/* ---------------------------------------------------------------------------
   MACROMIND — NetDiag section for the Looking Glass.

   Load this AFTER css/style.css so it can override, and never edit style.css:
   everything here is namespaced with .nd- so an upstream update cannot collide
   with it.

   Colour strategy: this stylesheet does not know whether your theme is light or
   dark, so it avoids fixed backgrounds and text colours almost entirely.
   Surfaces are translucent grey, borders are translucent grey, and text
   inherits from the page. The only opinionated colour is the accent below.
   That means it adapts to either theme without being told which one it is.
--------------------------------------------------------------------------- */

:root {
  --nd-accent:      #2781E9;   /* MACROMIND blue - the one colour to change */
  --nd-accent-ink:  #ffffff;   /* text on top of the accent */
  --nd-radius:      12px;
  --nd-surface:     rgba(128, 128, 128, .08);
  --nd-surface-2:   rgba(128, 128, 128, .14);
  --nd-line:        rgba(128, 128, 128, .28);
  --nd-soft:        color-mix(in srgb, currentColor 62%, transparent);
}

/* color-mix is widely supported but not universal; this is the fallback. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  :root { --nd-soft: rgba(128, 128, 128, .95); }
}

/* --- hero ---------------------------------------------------------------- */

.nd-hero-sub { max-width: 62ch; margin-left: auto; margin-right: auto; }

.nd-disclaimer {
  font-size: .875rem;
  color: var(--nd-soft);
  max-width: 62ch;
  margin: .75rem auto 0;
}

/* --- the "why two tests" block ------------------------------------------- */

.nd-why {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--nd-surface);
  border: 1px solid var(--nd-line);
  border-left: 3px solid var(--nd-accent);
  border-radius: var(--nd-radius);
  padding: 18px 22px;
  margin: 28px 0 32px;
}

.nd-why-icon { color: var(--nd-accent); flex: 0 0 auto; padding-top: 2px; }
.nd-why-title { font-size: 1rem; font-weight: 700; margin: 0 0 6px; }
.nd-why-text  { margin: 0; font-size: .9375rem; line-height: 1.65; color: var(--nd-soft); }

/* --- tabs ---------------------------------------------------------------- */

.nd-tablist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 26px;
}

.nd-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 14px 18px;
  background: var(--nd-surface);
  border: 1px solid var(--nd-line);
  border-radius: var(--nd-radius);
  color: inherit;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.nd-tab:hover { background: var(--nd-surface-2); }

.nd-tab-num {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--nd-surface-2);
  font-size: .8125rem; font-weight: 700;
  transition: background .15s, color .15s;
}

.nd-tab-txt { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.nd-tab-txt strong { font-size: .9375rem; font-weight: 600; }
.nd-tab-txt small  { font-size: .75rem; color: var(--nd-soft); margin-top: 2px; }

.nd-tab.is-on {
  border-color: var(--nd-accent);
  background: color-mix(in srgb, var(--nd-accent) 12%, transparent);
}
.nd-tab.is-on .nd-tab-num { background: var(--nd-accent); color: var(--nd-accent-ink); }

@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .nd-tab.is-on { background: var(--nd-surface-2); }
}

/* Without JavaScript both panels stay visible and stacked, so the Looking
   Glass form is never unreachable. The .js-on class is added by netdiag.js. */
.nd-tabs.js-on .nd-panel { display: none; }
.nd-tabs.js-on .nd-panel.is-on { display: block; }
.nd-tabs:not(.js-on) .nd-tablist { display: none; }
.nd-tabs:not(.js-on) .nd-panel + .nd-panel { margin-top: 40px; }

/* --- typography inside the panels ---------------------------------------- */

.nd-lead { font-size: 1.0625rem; line-height: 1.7; max-width: 68ch; margin: 0 0 22px; }

.nd-h3 {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--nd-soft);
  margin: 34px 0 14px;
}

.nd-list, .nd-steps { max-width: 72ch; padding-left: 20px; margin: 0 0 20px; }
.nd-list li, .nd-steps li { margin: 10px 0; line-height: 1.65; font-size: .9375rem; }
.nd-steps { counter-reset: none; }

.nd-callout {
  background: var(--nd-surface);
  border: 1px solid var(--nd-line);
  border-radius: var(--nd-radius);
  padding: 16px 20px;
  margin: 20px 0;
  font-size: .875rem;
  line-height: 1.65;
  color: var(--nd-soft);
  max-width: 76ch;
}
.nd-callout strong { color: inherit; }
.nd-callout-warn { border-left: 3px solid #B26A00; }

.nd-fineprint { font-size: .8125rem; color: var(--nd-soft); margin: 14px 0 0; max-width: 72ch; }

.nd-panel code {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .875em;
  background: var(--nd-surface-2);
  padding: 1px 5px;
  border-radius: 4px;
}

/* --- download cards ------------------------------------------------------ */

.nd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.nd-card {
  background: var(--nd-surface);
  border: 1px solid var(--nd-line);
  border-radius: var(--nd-radius);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
}

.nd-card.is-mine { border-color: var(--nd-accent); }

.nd-card-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}

.nd-card-os { font-size: 1rem; font-weight: 700; }

.nd-chip {
  font-size: .6875rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: var(--nd-accent); color: var(--nd-accent-ink);
}

.nd-dl {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--nd-line);
  border-radius: 9px;
  padding: 11px 14px;
  margin-bottom: 8px;
  transition: border-color .15s, background .15s;
}
.nd-dl:hover { border-color: var(--nd-accent); background: var(--nd-surface-2); color: inherit; }

.nd-dl.is-primary { background: var(--nd-accent); border-color: var(--nd-accent); color: var(--nd-accent-ink); }
.nd-dl.is-primary:hover { filter: brightness(1.08); background: var(--nd-accent); color: var(--nd-accent-ink); }
.nd-dl.is-primary .nd-dl-meta { color: var(--nd-accent-ink); opacity: .85; }
.nd-dl.is-primary code { background: rgba(255, 255, 255, .18); color: inherit; }

.nd-dl.is-off { opacity: .5; cursor: not-allowed; }

.nd-dl-kind { display: block; font-size: .9375rem; font-weight: 600; }
.nd-dl-meta { display: block; font-size: .75rem; color: var(--nd-soft); margin-top: 3px; }
.nd-dl-meta code { font-size: .95em; background: transparent; padding: 0; }

.nd-card-note {
  font-size: .75rem;
  line-height: 1.6;
  color: var(--nd-soft);
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--nd-line);
}

/* --- language switch ----------------------------------------------------- */

.nd-lang { display: inline-flex; gap: 4px; margin-left: 14px; }

.nd-lang-btn {
  font-size: .75rem; font-weight: 700; letter-spacing: .04em;
  padding: 5px 10px; border-radius: 7px;
  text-decoration: none;
  color: var(--nd-soft);
  border: 1px solid var(--nd-line);
  transition: background .15s, color .15s, border-color .15s;
}
.nd-lang-btn:hover { background: var(--nd-surface-2); color: inherit; }
.nd-lang-btn.is-on {
  background: var(--nd-accent);
  border-color: var(--nd-accent);
  color: var(--nd-accent-ink);
}

/* --- support note -------------------------------------------------------- */

.nd-support {
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--nd-line);
}
.nd-support p { font-size: .9375rem; line-height: 1.7; max-width: 72ch; color: var(--nd-soft); }
.nd-support a { color: var(--nd-accent); }

/* --- small screens ------------------------------------------------------- */

@media (max-width: 640px) {
  .nd-tablist { grid-template-columns: 1fr; }
  .nd-why { flex-direction: column; gap: 10px; padding: 16px 18px; }
  .nd-lead { font-size: 1rem; }
}

/* Respect the user's motion preference. */
@media (prefers-reduced-motion: reduce) {
  .nd-tab, .nd-dl, .nd-lang-btn, .nd-tab-num { transition: none; }
}