/*
 * WebDiagnosis application stylesheet.
 *
 * ONE file, on purpose. There used to be two: styles.css carrying a legacy
 * blue palette, and shell.css overriding every one of its tokens purely
 * because it loaded second at equal specificity. That worked, and it was a
 * trap - editing the file that looked like the base had no effect, and which
 * value won depended on the order of two <link> tags.
 *
 * Six phases of redesign had also been stacked as successive override layers,
 * so one component could be declared eight times down the file and the real
 * value was whichever copy came last. Every selector is now declared ONCE, at
 * the place its component is described, carrying the values that were winning
 * before the merge. Nothing was restyled in the process: a computed-style
 * snapshot of 963 elements, in both themes, at five widths, is identical
 * either side of it.
 *
 * @media blocks are deliberately left where they sat. They are a separate
 * cascade and moving them would change which breakpoint wins.
 *
 * No build step. Edit and reload; server.js stamps the URL with the file's
 * mtime so a changed file is never served from cache.
 */

/* ============ palette ============ */
/* ---------- shell --------------------------------------------------------- */
:root {
  /*
   * TWO COLOURS DO THE WORK, and they mean different things.
   *
   *   ORANGE is the interface. It is the colour the product is built out of:
   *   the wordmark, section accents, icon chips, the credit balance, progress,
   *   the ambient light. It is everywhere, quietly, and it is what makes a
   *   screen recognisably this product.
   *
   *   PURPLE means "do this". Primary buttons, the selected rail entry, a
   *   chosen option, the focus ring. It is Search Console's impressions
   *   purple, deepened a step: the audience lives in that tool all day, and
   *   borrowing its accent is what makes an SEO product read as belonging on
   *   the same shelf. Used sparingly, it is the one colour a click follows.
   *
   * Everything else - blue, teal, amber, rose - is status only, and always
   * arrives as a tint behind an icon and a word, never as a filled control.
   * That separation is what stops a dashboard becoming a paint chart, and it
   * is why the two accents can sit on the same screen without competing.
   *
   * The ground is a cool neutral grey rather than the warm paper it used to
   * be: magenta on warm grey goes muddy, and the whole point of the cooler
   * ground is to let both accents stay clean.
   */
  --bg: #eceff4;
  --bg-2: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f6fa;
  --surface-3: #ffffff;
  --panel: var(--surface);
  --line: #dfe4ec;
  --line-2: #eef1f6;
  --line-strong: #c4cbd8;
  --ink: #18202f;
  --ink-2: #54607a;
  /* Muted ink must clear AA on --surface-2, where the Soon badge, the check
     descriptions and the report meta line sit, not merely on white. Measured:
     4.62:1 on #f4f6fa. The reference design used #7f8a9e here, which is 3.7:1
     and would have shipped a readability failure in 33 places. */
  --ink-3: #616c7e;

  /*
   * Orange, the action colour. White on it measures 2.6:1 and fails outright,
   * so a filled accent carries NEAR-BLACK text in both themes.
   * `-ink` is the darker step for orange used as TYPE on a light surface.
   */
  --brand: #f97316;
  --brand-ink: #c03f0a;
  --brand-soft: #fff2e8;
  --brand-line: #fbd0af;
  --brand-hover: #ea580c;
  --on-accent: #1b0d02;

  /*
   * Magenta, the identity colour. This one takes WHITE, not near-black: it is
   * dark enough to carry it at 6.9:1, and white is what keeps a selected nav
   * entry reading as selected rather than as a warning.
   */
  /*
   * Search Console's impressions purple, taken a step deeper and a shade less
   * blue than the raw #5e35b1. The stock value is a UI chip colour and reads
   * flat at button size; this one holds its richness against white and still
   * carries white type at 8.2:1.
   *
   * The tints stay pale on purpose: purple earns its place on a control that
   * does something, and as a wash across a dozen cards it stops meaning
   * anything at all.
   */
  --violet: #56309e;
  --violet-ink: #4a2789;
  --violet-soft: #f3f0fb;
  --violet-line: #d9d0f0;
  --on-violet: #ffffff;
  /* The single atmospheric use, contained inside the dashboard hero card. */
  --hero-glow: rgba(86, 48, 158, .09);
  /* The old names, so components written against them pick the new hue up. */
  --purple: var(--violet);
  --purple-ink: var(--violet-ink);
  --purple-soft: var(--violet-soft);
  --magenta: var(--violet);
  --magenta-ink: var(--violet-ink);
  --magenta-soft: var(--violet-soft);

  --sky: #2563eb;
  --sky-ink: #1d4ed8;
  --sky-soft: #e9effd;
  --teal: #0d9488;
  --teal-ink: #0f766e;
  --teal-soft: #e0f4f2;
  /* Attention stays yellow-leaning so it cannot be confused with the action
     orange. Different hue, different shape: attention only ever tints. */
  --warn: #b4770a;
  --warn-ink: #9e6100;
  --warn-soft: #fdf5e3;
  --orange: var(--brand);
  --orange-soft: var(--brand-soft);
  --red: #c73553;
  --red-ink: #c53351;
  --red-soft: #fdedf0;
  --good: #0f9d6e;
  --good-ink: #007d4e;
  --good-soft: #e3f7ef;
  --bad: var(--red);
  --bad-soft: var(--red-soft);

  --r: 16px;
  --r-sm: 11px;
  --r-lg: 20px;

  --sh: 0 1px 2px rgba(20, 28, 45, .05), 0 10px 24px -16px rgba(20, 28, 45, .14);
  --sh-md: 0 2px 4px rgba(20, 28, 45, .07), 0 18px 36px -18px rgba(20, 28, 45, .2);
  --sh-lg: 0 12px 28px rgba(20, 28, 45, .12), 0 36px 68px -24px rgba(20, 28, 45, .28);
  --ring: 0 0 0 3px rgba(162, 28, 175, .28);
  /* A filled CTA carries its own warm glow rather than the neutral card shadow,
     which is what makes it read as lifted off the page instead of drawn on it. */
  --sh-cta: 0 10px 26px rgba(194, 65, 12, .2);

  /*
   * The ambient wash behind the page. Barely there in light mode: a single
   * magenta light at the top right, which is all the ground needs to stop
   * reading as flat card stock.
   */
  /* Orange is the interface colour, so the ambient light is warm. */
  --amb-1: rgba(249, 115, 22, .07);
  --amb-2: rgba(86, 48, 158, .04);
  --amb-3: rgba(249, 115, 22, .04);
  --topbar-h: 62px;
  --sidebar-w: 256px;
  --amb-top: linear-gradient(180deg, rgba(241, 243, 248, .9), rgba(236, 239, 244, 0) 46%);

  /*
   * Three faces, each with a job.
   *
   * Manrope carries display type only - page titles, the numbers on a stat
   * tile, a plan price. It replaces Sora, whose short-armed r closed up against
   * an n at display tracking: "Turn" read as "Tum". Manrope draws an r that
   * cannot be mistaken for half of an m.
   *
   * Plus Jakarta Sans carries everything a person reads in sentences.
   *
   * IBM Plex Mono carries values that are DATA: a URL, a credit count, a
   * score, a file size. Tabular figures line up in a column, and a monospaced
   * URL is the difference between scanning a list and reading one.
   */
  --font-display: Manrope, "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/*
 * The legacy `@media (prefers-color-scheme: dark)` palette used to sit here.
 *
 * It was a whole second dark theme in the old blue - --brand #5b8dff - and it
 * was a live hazard rather than merely dead weight. Its selector,
 * `:root:not([data-theme="light"])`, has the same specificity as the real dark
 * block below and matched in dark mode too; it lost only because it came
 * first. Any rule that ever moved would have brought the blue back.
 *
 * The boot script in <head> resolves "system" to a real theme before first
 * paint, so the document always carries an explicit data-theme and this block
 * had nothing left to do.
 */


/*
 * Dark theme. One block, keyed only on the attribute.
 *
 * There used to be a second copy of every token inside a
 * `@media (prefers-color-scheme: dark)` rule. It was dead weight: the boot
 * script in the document head always writes an explicit data-theme, so the
 * media query only ever applied to a legacy "system" value, and two hand-kept
 * copies of a forty-token palette is a drift waiting to happen. The head script
 * now resolves "system" to a real value before first paint, which leaves this
 * as the single source of truth for what dark mode looks like.
 *
 * --- how depth works here --------------------------------------------------
 *
 * Deep navy, never black. A drop shadow is invisible on a dark background, so
 * elevation is carried by LIGHTNESS instead: the page is the darkest thing on
 * screen, a card sits a measurable step above it, a popover a step above that.
 * Every step is a real difference, not a token that happens to have its own
 * name. Borders draw the edges; shadows only soften them.
 *
 * The surfaces are not neutral grey. Each carries a trace of the brand violet,
 * which is what keeps a large dark area feeling like this product rather than
 * like a default dark theme, without tinting anything enough to read as blue.
 */
/* ---------- the wash: two warm lights and a violet ----------------------- */
/*
 * The ground was lit from exactly one corner, which is why the far side of
 * every long page fell flat. Three sources now: a warm pool top-right, a
 * SECOND warm one low and right of centre, and a violet behind the sidebar.
 * Two warm lights give the field a direction rather than a single hotspot,
 * and the violet is the second brand colour doing structural work instead of
 * a generic blue.
 *
 * Every alpha came down at the same time. The previous 30% orange on navy was
 * a visible smear behind the cards; a wash should be felt and not looked at.
 */
:root[data-theme="dark"] {
  /*
   * Deep slate-navy, not black.
   *
   * A drop shadow is invisible on a dark ground, so elevation is carried by
   * LIGHTNESS: the page is the darkest thing on screen, a card sits a
   * measurable step above it, a popover a step above that. Borders draw the
   * edges; shadows only soften them.
   *
   * The ground is cooler and greyer than the navy it replaces, because the
   * identity colour is now magenta. On a blue-violet field a magenta pill goes
   * muddy; on this it stays clean, and the orange CTA still carries because
   * warm on cool-neutral is the widest separation available.
   */
  --bg: #121824;
  --bg-2: #171e2c;
  --surface: #1c2433;
  --surface-2: #212a3b;
  --surface-3: #27324a;
  --panel: var(--surface);
  /*
   * Borders as translucent light rather than a mixed colour. One value then
   * reads correctly on the page, on a card and on a nested surface, instead of
   * needing a hand-picked grey per step.
   */
  --line: rgba(170, 182, 206, .14);
  --line-2: rgba(170, 182, 206, .09);
  --line-strong: rgba(170, 182, 206, .3);
  --ink: #e9eef7;
  --ink-2: #a5b0c5;
  /* Clears AA on --surface-3, the lightest thing it sits on (popovers, the
     account menu), not merely on the page. */
  --ink-3: #919db3;

  /*
   * The CTA keeps its light-mode orange. It is the one element on the screen
   * that must not change meaning between themes, and near-black on #f97316
   * clears AA on both grounds, so there is nothing to gain by shifting it.
   * `-ink` is the lifted step for orange used as TYPE on a dark surface.
   */
  --brand: #f97316;
  --brand-ink: #fdba74;
  --brand-soft: rgba(249, 115, 22, .16);
  --brand-line: rgba(249, 115, 22, .34);
  --brand-hover: #fb8c3c;
  --on-accent: #1b0d02;

  /*
   * The purple lifts on dark, as every hue must, but stays in the Search
   * Console family rather than turning lilac. White still rides on it.
   */
  --violet: #8b6ce0;
  --violet-ink: #b9a4f0;
  --violet-soft: rgba(139, 108, 224, .18);
  --violet-line: rgba(139, 108, 224, .36);
  --on-violet: #120a24;
  --hero-glow: rgba(139, 108, 224, .18);
  --purple: var(--violet);
  --purple-ink: var(--violet-ink);
  --purple-soft: var(--violet-soft);
  --magenta: var(--violet);
  --magenta-ink: var(--violet-ink);
  --magenta-soft: var(--violet-soft);

  --sky: #60a5fa;
  --sky-ink: #93c5fd;
  --sky-soft: rgba(96, 165, 250, .16);
  --teal: #2dd4bf;
  --teal-ink: #7ee7d8;
  --teal-soft: rgba(45, 212, 191, .16);
  --warn: #fbbf24;
  --warn-ink: #fbbf24;
  --warn-soft: rgba(251, 191, 36, .16);
  --orange: #fb923c;
  --orange-soft: rgba(251, 146, 60, .16);
  --red: #fb7185;
  --red-ink: #fb7185;
  --red-soft: rgba(251, 113, 133, .16);
  --good: #34d399;
  --good-ink: #34d399;
  --good-soft: rgba(52, 211, 153, .16);
  --bad: var(--red);
  --bad-soft: var(--red-soft);

  --sh: 0 1px 0 rgba(255, 255, 255, .04), 0 14px 32px -22px rgba(6, 10, 20, .8);
  --sh-md: 0 1px 0 rgba(255, 255, 255, .06), 0 22px 46px -22px rgba(6, 10, 20, .9);
  --sh-lg: 0 1px 0 rgba(255, 255, 255, .06), 0 34px 66px -26px rgba(6, 10, 20, .95);
  --ring: 0 0 0 3px rgba(208, 98, 230, .34);
  --sh-cta: 0 10px 26px rgba(234, 88, 12, .32);

  /*
   * A WARM pool top right and a cool magenta one behind the rail.
   *
   * Dark surfaces go dead without a light source, and the accent that should
   * be lighting them is the one that means "act". Keeping the warm pool low
   * and wide gives the ground depth without tinting any card it sits under;
   * the magenta second light stops the field reading as a single hot corner.
   * Both are felt rather than seen: raise either and the cards start to look
   * coloured, which is the failure this palette is trying to avoid.
   */
  --amb-1: rgba(249, 115, 22, .16);
  --amb-2: rgba(139, 108, 224, .13);
  --amb-3: rgba(249, 115, 22, .07);
  --amb-top: linear-gradient(180deg, rgba(40, 52, 82, .44), rgba(18, 24, 36, 0) 46%);
}
* { box-sizing: border-box; }

/* The `hidden` attribute must beat any display we set on a class. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { letter-spacing: -.022em; line-height: 1.22; margin: 0; }
.shell { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.shell.narrow { max-width: 760px; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 5px; }
a { color: var(--brand-ink); }

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: inherit;
}

/*
 * The theme control lives further down this file as `.tt`. An earlier `.themepill` /
 * `.tp-*` implementation used to sit here; its markup was replaced before this
 * file was, so the rules had been styling nothing for some time. Removed rather
 * than left to rot, since a second set of toggle styles is exactly the kind of
 * thing that gets copied by mistake later.
 */
/* ============ shared ============ */
.view { padding-bottom: 72px; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh);
  padding: 26px;
}

.btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: 15px;
  font-weight: 650;
  padding: 10px 18px;
  cursor: pointer;
  transition: filter .15s, background .15s, border-color .15s, box-shadow .15s, transform .12s;
}
.btn:hover:not(:disabled) { filter: brightness(1.05); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-primary {
  background: var(--brand);
  color: var(--on-accent);
  box-shadow: 0 1px 2px rgba(16,26,51,.10), 0 6px 16px color-mix(in srgb, var(--brand) 28%, transparent);
}
.btn-quiet { background: transparent; color: var(--ink-2); border-color: var(--line); }
.btn-quiet:hover:not(:disabled) { color: var(--ink); border-color: var(--ink-3); background: var(--line-2); }
.btn-lg { font-size: 16.5px; padding: 14px 30px; border-radius: 11px; }
.btn-sm { font-size: 13px; padding: 7px 13px; }
.notice { margin: 16px 0 0; padding: 12px 15px; border-radius: var(--r-sm); font-size: 14.5px; }

.notice-bad {
  background: var(--bad-soft);
  color: var(--bad);
  border: 1px solid color-mix(in srgb, var(--bad) 28%, transparent);
}
.empty { padding: 30px; text-align: center; color: var(--ink-3); }

/* ============ hero ============ */
.hero {
  background: radial-gradient(900px 380px at 12% -8%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 70%),
    radial-gradient(760px 340px at 88% -12%, color-mix(in srgb, var(--purple) 11%, transparent), transparent 70%),
    linear-gradient(180deg, var(--bg-2), transparent);
  padding: 60px 0 44px;
  text-align: center;
}
.hero h1 { font-size: clamp(29px, 4.6vw, 46px); max-width: 19ch; margin: 0 auto; }

.flow {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 34px 0 0;
  padding: 0;
  flex-wrap: wrap;
}

.seg {
  display: inline-flex;
  gap: 3px;
  background: var(--bg-2);
  border-radius: 11px;
  padding: 3px;
  margin-bottom: 18px;
}
.src { display: none; }
.src.is-on { display: block; }

.drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
  border: 2px dashed var(--line);
  border-radius: var(--r);
  padding: 46px 24px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.drop:hover, .drop.is-over { border-color: var(--brand); background: var(--brand-soft); }

textarea {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 13px 15px;
  resize: vertical;
  font-family: var(--font-mono);
  font-size: 13.5px;
}
textarea:focus { border-color: var(--brand); box-shadow: var(--ring); outline: none; }

.ready {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: var(--r);
  background: var(--teal-soft);
  border: 1px solid color-mix(in srgb, var(--teal) 30%, transparent);
}
.ready-l { font-weight: 660; color: var(--teal); }

/* ============ analysis mode ============ */
.modes { margin-top: 22px; display: grid; gap: 12px; }

.mode {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 4px 14px;
  align-items: start;
  border: 2px solid var(--line);
  border-radius: var(--r);
  padding: 18px 20px;
  background: var(--panel);
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.mode:hover { border-color: var(--ink-3); }
.mode.is-on { border-color: var(--brand); background: var(--brand-soft); box-shadow: var(--ring); }

.mode-fields {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.cz-chip {
  font-size: 12.5px;
  font-weight: 640;
  padding: 5px 12px;
  border-radius: 99px;
  background: var(--teal-soft);
  color: var(--teal-ink);
  cursor: help;
}

/* option cards */
.cz-body { margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.cz-lede { margin: 0 0 14px; font-size: 13.5px; color: var(--ink-2); }

.cz-opt {
  display: block;
  position: relative;
  padding: 14px 16px 14px 44px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel);
  cursor: pointer;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.cz-opt:hover { border-color: var(--ink-3); }
.cz-opt:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); box-shadow: var(--ring); }
.cz-opt input { position: absolute; opacity: 0; pointer-events: none; }

.cz-box {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 19px;
  height: 19px;
  border: 2px solid var(--ink-3);
  border-radius: 6px;
  transition: background .12s, border-color .12s;
}
.cz-opt:has(input:checked) .cz-box { background: var(--violet); border-color: var(--violet); }

.cz-opt:has(input:checked) .cz-box::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--on-accent);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.cz-opt-t { display: block; font-size: 14px; font-weight: 660; }

.cz-opt-d {
  display: block;
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.45;
  margin-top: 3px;
}

.cz-foot {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cz-count { font-size: 13px; color: var(--ink-3); }
.advanced { margin-top: 20px; border-top: 1px solid var(--line-2); padding-top: 14px; }
.advanced summary { cursor: pointer; font-size: 13.5px; color: var(--ink-2); font-weight: 620; }

/* ============ scanning ============ */
.scan-panel { margin-top: 48px; text-align: center; padding: 44px 30px; }
.scan-title { font-size: 25px; }
.scan-name { margin: 7px 0 0; color: var(--ink-3); font-size: 14px; }
.counter { margin-top: 28px; font-size: 15px; color: var(--ink-2); }

.counter #counterN {
  font-size: 36px;
  font-weight: 760;
  color: var(--ink);
  letter-spacing: -.03em;
  display: block;
}

.bar {
  height: 9px;
  background: var(--bg-2);
  border-radius: 99px;
  overflow: hidden;
  margin: 18px 0 26px;
}

.bar-fill {
  height: 100%;
  width: 0;
  border-radius: 99px;
  transition: width .4s ease;
  background: linear-gradient(90deg, var(--brand), var(--purple));
}

.phases {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 330px;
  text-align: left;
  display: grid;
  gap: 11px;
}

.phases li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 14.5px;
  color: var(--ink-3);
}
.phases li.is-done { color: var(--ink-2); }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 45%, transparent); } 50% { box-shadow: 0 0 0 7px transparent; }
}

.scan-foot { margin: 26px 0 0; font-size: 13.5px; color: var(--ink-3); }
.scan-actions { margin-top: 18px; display: flex; gap: 10px; justify-content: center; }

/* ============ report ============ */
.rep-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  padding: 36px 0 22px;
}

.crumb {
  margin: 0 0 5px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--purple);
}
.rep-head h1 { font-size: 28px; }
.rep-meta { margin: 6px 0 0; color: var(--ink-3); font-size: 14px; }
.rep-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.menu { position: relative; }
.caret { font-size: 11px; opacity: .85; margin-left: 3px; }

.menu-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  width: 328px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-lg);
  padding: 6px;
  display: grid;
  gap: 2px;
}

.menu-item {
  appearance: none;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 2px 10px;
  padding: 11px 12px;
  border-radius: var(--r-sm);
}
.menu-item:hover:not(.is-off) { background: var(--line-2); }
.mi-ic { grid-row: span 2; font-size: 17px; line-height: 1.4; }

.mi-t {
  font-weight: 660;
  font-size: 14.5px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.mi-d { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }

.mi-tag {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--orange-soft);
  color: var(--brand-ink);
  padding: 2px 7px;
  border-radius: 99px;
}
.menu-item.is-off { opacity: .58; cursor: not-allowed; }
.menu-item.is-hero .mi-t { color: var(--brand); }

/* four cards */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

/*
 * Scoped to `.cards` on purpose.
 *
 * These are the four headline tiles on a report, and the accent stripe belongs
 * to them alone. Unscoped, the rule also painted every panel in the app shell,
 * which is what put a blue bar down the side of unrelated cards.
 */
.cards .card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh);
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
}

.cards .card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--accent, var(--brand));
}

.card-l {
  font-size: 13px;
  font-weight: 650;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 7px;
}

.card-v {
  margin-top: 8px;
  font-size: 35px;
  font-weight: 760;
  letter-spacing: -.035em;
  color: var(--accent, var(--ink));
  line-height: 1.1;
}
.card-v small { font-size: 17px; font-weight: 650; color: var(--ink-3); letter-spacing: 0; }
.card-d { margin-top: 5px; font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }

.verdictbar {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: var(--r);
  padding: 18px 20px;
  box-shadow: var(--sh);
}

.verdict-ic {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--teal-soft);
  color: var(--teal);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 14px;
  flex: none;
}
.verdictbar p { margin: 0; font-size: 17.5px; font-weight: 660; }
.verdictbar.is-empty { border-left-color: var(--orange); }
.verdictbar.is-empty .verdict-ic { background: var(--orange-soft); color: var(--brand-ink); }

/* attribution */
.attrib-line { margin: 14px 0 0; font-size: 12.5px; color: var(--ink-3); }

.attrib-link {
  color: var(--brand-ink);
  font-weight: 620;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ============ take away: copy or export ============ */
.takeaway { margin-top: 18px; }
.takeaway-head h2 { font-size: 19px; margin: 0 0 4px; }
.takeaway-head p { margin: 0; font-size: 13.5px; color: var(--ink-3); }
.takeaway-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 20px 0 12px; }

/* The two things to do next carry equal visual weight - one copies, one saves. */
.btn-copy { background: var(--teal); color: var(--on-accent); border-color: var(--teal); }
.btn-copy:hover:not(:disabled) { background: var(--teal-ink); border-color: var(--teal-ink); }
.btn-copy.is-done { background: var(--teal-ink); border-color: var(--teal-ink); }
.btn-ic { font-size: 15px; margin-right: 2px; }
.takeaway-hint { margin: 0; font-size: 13px; color: var(--ink-2); max-width: 62ch; }

.takeaway-cols {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-2);
}

.tc-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.tc-list { display: flex; gap: 6px; flex-wrap: wrap; }

.tc-chip {
  font-size: 12px;
  font-weight: 620;
  padding: 3px 10px;
  border-radius: 99px;
  background: var(--brand-soft);
  color: var(--brand-ink);
  white-space: nowrap;
}
.sort-note { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-3); }

.notice-good {
  border-color: var(--teal);
  background: var(--teal-soft);
  color: var(--teal-ink, var(--teal));
}
.notice-good a { color: inherit; font-weight: 700; }

/* ============ history ============ */
.hist {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh);
  padding: 18px 22px;
  margin-bottom: 12px;
}
.hist-main { min-width: 210px; flex: 1 1 260px; }

.hist-name {
  font-weight: 700;
  font-size: 16px;
  background: none;
  border: 0;
  padding: 0;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.hist-name:hover { color: var(--brand); text-decoration: underline; }
.hist-meta { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.hist-concl { font-size: 13.5px; color: var(--ink-2); margin-top: 6px; }
.hist-stats { display: flex; gap: 20px; flex-wrap: wrap; }
.hs { text-align: center; min-width: 56px; }
.hs b { display: block; font-size: 19px; font-weight: 750; letter-spacing: -.02em; }

.hs span {
  font-size: 10.5px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 650;
}
.hs-good b { color: var(--teal); }
.hs-warn b { color: var(--orange); }
.hist-actions { display: flex; gap: 8px; }
.hist-empty { text-align: center; padding: 60px 20px; color: var(--ink-3); }

/* ============ permission explainer ============ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(9, 14, 28, .55);
  backdrop-filter: blur(3px);
}

.modal-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-lg);
  padding: 30px;
  max-width: 520px;
  width: 100%;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.modal-ic { font-size: 30px; line-height: 1; }
.modal-t { font-size: 21px; margin: 12px 0 10px; }
.modal-lead { margin: 0 0 18px; font-size: 15px; color: var(--ink-2); }

.modal-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 9px;
}
.modal-list li { position: relative; padding-left: 27px; font-size: 14.5px; }

.modal-list li::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 19px;
  text-align: center;
  font-weight: 800;
  font-size: 13px;
}

/* What it can do, and what it cannot - the second half is the reassuring one. */
.mo-yes { color: var(--ink); }
.mo-yes::before { content: "✓"; color: var(--teal); }
.mo-no { color: var(--ink-2); }
.mo-no::before { content: "✕"; color: var(--ink-3); }
.modal-scope { margin: 0 0 20px; font-size: 12.5px; color: var(--ink-3); }

.modal-scope code {
  background: var(--bg-2);
  border-radius: 5px;
  padding: 2px 6px;
  font-size: 12px;
  word-break: break-all;
}
.modal-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.modal-foot {
  margin: 18px 0 0;
  padding-top: 15px;
  border-top: 1px solid var(--line-2);
  font-size: 13px;
  color: var(--ink-3);
}

.quota {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  background: var(--bg-2);
  border-radius: 99px;
  white-space: nowrap;
}
.quota-n { font-weight: 750; font-size: 14px; letter-spacing: -.02em; }
.quota-l { font-size: 12px; color: var(--ink-3); }

.quota-bar {
  width: 46px;
  height: 5px;
  border-radius: 99px;
  background: var(--line);
  overflow: hidden;
}

.quota-fill {
  display: block;
  height: 100%;
  background: var(--teal);
  border-radius: 99px;
  transition: width .4s ease;
}
.quota.is-low .quota-n { color: var(--orange); }
.quota.is-low .quota-fill { background: var(--orange); }
.quota.is-out .quota-n { color: var(--red); }
.quota.is-out .quota-fill { background: var(--red); }
.acct { position: relative; }
.signin-h { font-size: clamp(24px, 3.4vw, 31px); max-width: 20ch; margin: 0 auto; }

.gbtn {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 13px 26px;
  font-size: 16px;
  font-weight: 650;
  box-shadow: var(--sh);
  transition: border-color .15s, transform .12s;
}
.gbtn:hover { border-color: var(--ink-3); transform: translateY(-1px); }
.gbtn-ic { display: flex; }

.signin-points {
  list-style: none;
  margin: 30px 0 0;
  padding: 22px 0 0;
  text-align: left;
  border-top: 1px solid var(--line-2);
  display: grid;
  gap: 11px;
  font-size: 13.5px;
  color: var(--ink-3);
}
.signin-points b { color: var(--ink-2); }

.devbox {
  margin: 22px auto 0;
  max-width: 440px;
  text-align: left;
  padding: 14px 16px;
  border: 1px dashed var(--orange);
  border-radius: var(--r);
  background: var(--orange-soft);
}
.devbox p { margin: 0 0 10px; font-size: 12.5px; color: var(--orange); }
.devbox-row { display: flex; gap: 8px; }

.devbox-row input {
  flex: 1;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 8px 11px;
  font-size: 13.5px;
}

/* ============ footer ============ */
.foot { border-top: 1px solid var(--line); padding: 26px 0 46px; }
.foot p { margin: 0; font-size: 13px; color: var(--ink-3); max-width: 80ch; }
/* ============ responsive ============ */
@media (max-width: 980px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .shell { padding: 0 16px; }
  .appbar-in { height: 58px; gap: 8px; }
  .brand-sub { display: none; }
  .brand-name { font-size: 16px; }
  .appnav { gap: 2px; }
  .navlink { padding: 7px 9px; font-size: 13.5px; }
  /* On a phone the header keeps the number and drops everything decorative -
     "493 / 500" is the part that matters, and the bar repeats it. */
  .quota-l, .quota-bar, .acct-name { display: none; }
  .quota { padding: 5px 9px; gap: 5px; }
  .quota-tag { font-size: 9px; padding: 2px 5px; }
  /* The brand must be allowed to give way; a grid child will not shrink below
     its content unless told to, and that is what pushes the header sideways. */
  .brand, .appnav { min-width: 0; }
  .acct-btn { padding: 4px; border: 0; }
  .acct-pop { width: min(272px, calc(100vw - 24px)); }

  .hero { padding: 38px 0 30px; }
  .hero-sub { font-size: 15.5px; }
  .flow { gap: 8px; }
  .flow-arrow { display: none; }
  .flow > li:not(.flow-arrow) { flex: 1 1 100%; flex-direction: row; align-items: center; gap: 11px; padding: 12px 16px; min-width: 0; }
  .flow-n { margin-bottom: 0; }
  .flow-d { margin-left: auto; text-align: right; }

  .panel { padding: 18px; }
  .drop { padding: 32px 16px; }
  .mode { grid-template-columns: auto 1fr; padding: 15px 16px; }
  .mode-speed { grid-column: 2; grid-row: auto; margin-top: 6px; }
  .cz-grid { grid-template-columns: 1fr; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { width: 100%; }
  .cta-quota { text-align: center; }

  .rep-head { padding: 22px 0 16px; }
  .rep-head h1 { font-size: 23px; }
  .rep-actions { width: 100%; }
  .menu { flex: 1; }
  .menu-btn { width: 100%; }
  .menu-pop { width: min(328px, calc(100vw - 32px)); right: auto; left: 0; }

  .cards { grid-template-columns: 1fr; gap: 10px; }
  .cards .card { padding: 16px 18px; }
  .card-v { font-size: 31px; }
  .verdictbar { padding: 15px 16px; }
  .verdictbar p { font-size: 16px; }

  .detail > summary { padding: 15px 18px; }
  .detail-tools, .detail-foot { padding-left: 18px; padding-right: 18px; }
  .prospect { grid-template-columns: 30px 1fr; }
  .p-score { grid-row: auto; grid-column: 2; text-align: left; display: flex; align-items: baseline; gap: 7px; margin-top: 8px; }
  .p-score b { font-size: 19px; }
  .tablewrap { max-height: none; }
  .scan-panel { padding: 30px 20px; margin-top: 26px; }
  .signin-panel { margin-top: 24px; padding: 28px 20px; }
  .reassure { gap: 12px; flex-direction: column; align-items: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* On the narrowest phones the welcome badge goes too - the chip is already
   purple on a welcome day, and the account menu spells it out in full. */
@media (max-width: 430px) {
  .quota-tag { display: none; }
}

body { background: var(--bg); color: var(--ink); }

/* ============ shell ============ */
.app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; }

/* ---------- sidebar ---------- */
/*
 * The chrome sits on its own surface, one step below the cards.
 *
 * This used to be `--surface`, the exact token the cards use, so in dark mode
 * the sidebar and every panel resolved to the same #151f3c and the interface
 * read as one flat sheet of navy. The palette already carried five steps and
 * the shell was only using two: `--bg-2` was defined and referenced nowhere.
 *
 * Ladder, darkest to lightest: --bg page, --bg-2 chrome, --surface cards,
 * --surface-2 nested and hover, --surface-3 selected and popovers.
 */
.sb {
  background: var(--bg-2);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 14px 12px 12px;
  gap: 14px;
}

.sb-brand {
  display: flex;
  align-items: center;
  padding: 6px 8px 14px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--line-2);
}

/*
 * Both logo files are in the DOM and CSS picks one, which is what makes the
 * swap instant when data-theme flips: no request, no decode, no frame showing
 * the wrong wordmark. The width/height attributes on the <img> carry the real
 * 3:1 ratio, so the box is reserved before the file arrives and the sidebar
 * does not jump.
 */
.sb-logo { display: block; width: 168px; height: auto; }
.sb-logo-dark { display: none; }
:root[data-theme="dark"] .sb-logo-light { display: none; }
:root[data-theme="dark"] .sb-logo-dark { display: block; }
/*
 * The rail scrolls when a short window cannot fit the nav, and on Windows that
 * meant a full-width light scrollbar sitting against the chrome - a piece of
 * operating system furniture in the middle of the product. Thin, themed, and
 * only the thumb is drawn.
 */
.sb-scroll {
  flex: 1;
  overflow-y: auto;
  margin: 0 -4px;
  padding: 0 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.sb-scroll::-webkit-scrollbar { width: 6px; }
.sb-scroll::-webkit-scrollbar-track { background: transparent; }
.sb-scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }
.sb-group { margin-bottom: 14px; }

.sb-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0 10px 6px;
}

.sb-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  appearance: none;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  font-size: 13.8px;
  font-weight: 560;
  color: var(--ink-2);
  padding: 8px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  text-decoration: none;
  margin-bottom: 1px;
}
.sb-item svg { flex: none; opacity: .8; }

/*
 * The label is its own flex item, which is what stops the "Soon" badge from
 * breaking the entry over three lines.
 *
 * It used to be a bare text node, so the flex box treated the label and the
 * badge as one run and wrapped "Link Verification Checker" around it:
 * "Link" / "Verification  Soon" / "Checker". As a real item that is allowed to
 * shrink, the label wraps on its own and the badge stays put at the end.
 */
.sb-item-t { flex: 1 1 auto; min-width: 0; }
.sb-item:hover { background: var(--surface-2); color: var(--ink); }

.sb-item.is-on svg { opacity: 1; }

.sb-soon {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink-3);
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 2px 6px;
  border-radius: 999px;
}
.sb-foot { border-top: 1px solid var(--line-2); padding-top: 10px; }

/* quota block in the sidebar foot */
.sb-quota {
  padding: 10px;
  background: var(--surface-2);
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
}
.sb-quota-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sb-quota-n { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sb-quota-l { font-size: 11px; color: var(--ink-3); }

.sb-quota-bar {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: var(--line);
  margin-top: 7px;
  overflow: hidden;
}

.sb-quota-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--purple));
}
.sb-quota-note { font-size: 11px; color: var(--ink-3); margin: 6px 0 0; }

/* ---------- top bar ---------- */
.tb {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 22px;
  /* Same chrome layer as the sidebar, keeping the translucency and blur that
     let content show through as it scrolls under. */
  background: color-mix(in srgb, var(--bg-2) 86%, transparent);
  backdrop-filter: saturate(1.5) blur(10px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 30;
}

.tb-title {
  font-size: 14.5px;
  font-weight: 650;
  letter-spacing: -.01em;
  margin: 0;
  /* One line, always. A wrapping title pushed the top bar to triple height on a phone. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.tb-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

/* Top bar controls never wrap; the title is what gives way on a narrow screen. */
.tb-right .btn, .tb-right .acct2-btn { white-space: nowrap; }

.tb-burger {
  display: none;
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  border-radius: var(--r-sm);
  padding: 6px 9px;
  cursor: pointer;
}

/* ---------- main ---------- */
.main { min-width: 0; display: flex; flex-direction: column; }
.page { padding: 22px 26px 56px; width: 100%; max-width: 1320px; }
.page-head { margin-bottom: 18px; }
.page-head h1 { font-size: 22px; margin: 0; letter-spacing: -.022em; font-weight: 700; }
.page-head p { margin: 5px 0 0; color: var(--ink-2); font-size: 13.8px; max-width: 76ch; }

.page-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

/* ============ surfaces ============ */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh);
}
.card-pad { padding: 20px 22px; }

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--line-2);
}
.card-head h2 { font-size: 14.5px; margin: 0; letter-spacing: -.01em; font-weight: 660; }
.card-head p { margin: 3px 0 0; font-size: 12.5px; color: var(--ink-3); }
.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* ---------- stat tiles ---------- */
.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 15px 17px;
  box-shadow: var(--sh);
  position: relative;
  overflow: hidden;
}

.stat::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--brand);
  opacity: .85;
}
.stat.t-purple::before { background: var(--purple); }
.stat.t-teal::before { background: var(--teal); }
.stat.t-warn::before { background: var(--warn); }

.stat-k {
  font-size: 11px;
  font-weight: 660;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.stat-v {
  font-size: 27px;
  font-weight: 720;
  letter-spacing: -.025em;
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.stat-s { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }

/* ---------- misc ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 660;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid var(--line);
}
.chip-brand { background: var(--brand-soft); color: var(--brand-ink); border-color: var(--brand-line); }
.chip-good { background: var(--good-soft); color: var(--teal-ink); border-color: transparent; }
.chip-purple { background: var(--purple-soft); color: var(--purple-ink); border-color: transparent; }
.muted { color: var(--ink-3); font-size: 12.5px; }

/* ============ tool page: prospect checker ============ */
.tool-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) 296px; align-items: start; }

.src-tabs {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 11px;
  margin-bottom: 14px;
}

.src-tab {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13.4px;
  font-weight: 620;
  color: var(--ink-2);
  padding: 7px 15px;
  border-radius: 8px;
  cursor: pointer;
}
.src-tab:hover { color: var(--ink); }
.src-tab.is-on { background: var(--surface); color: var(--ink); box-shadow: var(--sh); }

/* the drop zone is the main event on this page, so it is given real height */
.dropzone {
  display: grid;
  place-items: center;
  gap: 7px;
  text-align: center;
  min-height: 224px;
  padding: 26px;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r);
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--brand); background: var(--brand-soft); }
.dropzone-ic { color: var(--brand); }
.dropzone-1 { font-size: 15.5px; font-weight: 660; }
.dropzone-2 { font-size: 13px; color: var(--ink-2); }

textarea.paste-box {
  width: 100%;
  min-height: 224px;
  resize: vertical;
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px 15px;
  font-size: 13.5px;
  line-height: 1.65;
  font-family: var(--font-mono);
}
textarea.paste-box:focus { outline: 0; border-color: var(--brand); box-shadow: var(--ring); }

.readybar {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
  margin-top: 13px;
  padding: 11px 14px;
  background: var(--good-soft);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
}

.readybar-n {
  font-size: 19px;
  font-weight: 720;
  color: var(--teal-ink);
  font-variant-numeric: tabular-nums;
}
.readybar-l { font-size: 13.4px; color: var(--teal-ink); font-weight: 600; }
.readybar-note { font-size: 12.5px; color: var(--ink-2); width: 100%; margin: 0; }

/* analysis mode picker */
.modes2 { display: grid; gap: 10px; }

.mode2 {
  display: block;
  position: relative;
  cursor: pointer;
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  padding: 14px 16px 14px 44px;
}
.mode2:hover { border-color: var(--line-strong); }
.mode2.is-on { border-color: var(--brand); background: var(--brand-soft); }

.mode2-dot {
  position: absolute;
  left: 16px;
  top: 16px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  background: var(--surface);
}
.mode2.is-on .mode2-dot { border-color: var(--violet); box-shadow: inset 0 0 0 3.5px var(--violet); }

.mode2-t {
  font-size: 14.2px;
  font-weight: 660;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.mode2-d { display: block; font-size: 12.8px; color: var(--ink-2); margin-top: 3px; }

.cta2 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.cta2-note { font-size: 12.5px; color: var(--ink-3); }

/* right rail */
.rail { display: grid; gap: 14px; position: sticky; top: calc(var(--topbar-h) + 16px); }

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
  counter-reset: s;
}

.steps li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  font-size: 12.8px;
  color: var(--ink-2);
}

.steps li::before {
  counter-increment: s;
  content: counter(s);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-size: 11px;
  font-weight: 720;
  border: 1px solid var(--brand-line);
}
.steps b { color: var(--ink); font-weight: 640; display: block; }

/* ============ placeholder / empty states ============ */
.empty {
  display: grid;
  place-items: center;
  text-align: center;
  gap: 9px;
  padding: 54px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh);
}

.empty-ic {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: var(--brand-soft);
  color: var(--brand);
  border: 1px solid var(--brand-line);
}
.empty h2 { font-size: 16.5px; margin: 4px 0 0; letter-spacing: -.015em; }
.empty p { margin: 0; color: var(--ink-2); font-size: 13.4px; max-width: 52ch; }

/* ============ settings-style rows ============ */
.rows { display: grid; }

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--line-2);
}
.row:last-child { border-bottom: 0; }
.row-t { font-size: 13.8px; font-weight: 620; }
.row-d { font-size: 12.6px; color: var(--ink-3); margin: 2px 0 0; max-width: 62ch; }

.row-v {
  font-size: 13.6px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* a switch that reads clearly in both themes */
.switch { position: relative; width: 40px; height: 23px; flex: none; }

.switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.switch span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--line-strong);
  transition: background .16s;
}

.switch span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #fff;
  transition: transform .16s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.switch input:checked + span { background: var(--brand); }
.switch input:checked + span::after { transform: translateX(17px); }
.switch input:focus-visible + span { box-shadow: var(--ring); }

/* ============ theme toggle in the top bar ============ */
/*
 * Theme switch.
 *
 * A single button wrapping a track, two icons and a sliding thumb. The button
 * is the hit target, so the whole 52x28 control responds - the previous pair of
 * 28px icon buttons meant aiming at a specific glyph, which is under the 44px
 * touch guidance and irritating with a mouse too. The padded box below takes
 * the real tap area past 44px without changing how it looks.
 *
 * State is readable without colour vision: the thumb physically sits on the sun
 * side or the moon side, and the icon it covers is the active one.
 */
.tt {
  appearance: none;
  border: 0;
  background: none;
  padding: 8px;
  margin: -8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  -webkit-tap-highlight-color: transparent;
}

.tt-track {
  position: relative;
  display: block;
  width: 52px;
  height: 28px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  transition: background .22s ease, border-color .22s ease;
}

.tt.is-dark .tt-track {
  background: linear-gradient(135deg, var(--brand-soft), var(--surface-3));
  border-color: var(--brand-line);
}

/* The icons sit under the thumb; whichever the thumb covers is the live one. */
.tt-ico {
  position: absolute;
  top: 0;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  pointer-events: none;
  transition: color .22s ease, opacity .22s ease;
}
.tt-ico-sun { left: 0; color: var(--warn); opacity: 1; }
.tt-ico-moon { right: 0; color: var(--ink-3); opacity: .55; }
.tt.is-dark .tt-ico-sun { color: var(--ink-3); opacity: .5; }
.tt.is-dark .tt-ico-moon { color: var(--brand-ink); opacity: 1; }

.tt-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--sh);
  border: 1px solid var(--line-2);
  transition: transform .22s cubic-bezier(.4, 0, .2, 1), background .22s ease;
}
.tt.is-dark .tt-thumb { transform: translateX(24px); background: var(--surface-3); border-color: var(--brand-line); }
.tt:hover .tt-track { border-color: var(--line-strong); }
.tt:focus-visible { outline: none; }
.tt:focus-visible .tt-track { box-shadow: var(--ring); border-color: var(--brand); }
/* Someone who asked for less motion gets the state change, not the journey. */
@media (prefers-reduced-motion: reduce) {
  .tt-track, .tt-thumb, .tt-ico { transition: none; }
}


/* ============ account menu ============ */
.acct2 { position: relative; }

.acct2-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 4px 9px 4px 4px;
  color: inherit;
  font: inherit;
}
.acct2-btn:hover { background: var(--surface-2); border-color: var(--line); }

.acct2-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--purple));
}

.acct2-n {
  font-size: 13.2px;
  font-weight: 600;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acct2-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 268px;
  z-index: 50;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-lg);
  padding: 6px;
}
.acct2-who { padding: 10px 11px 11px; border-bottom: 1px solid var(--line-2); margin-bottom: 5px; }
.acct2-who-n { font-size: 13.5px; font-weight: 660; }
.acct2-who-e { font-size: 12px; color: var(--ink-3); word-break: break-all; }

.acct2-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  appearance: none;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  font-size: 13.2px;
  color: var(--ink-2);
  padding: 8px 11px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
}
.acct2-item:hover { background: var(--surface-2); color: var(--ink); }
.acct2-item-bad:hover { background: var(--bad-soft); color: var(--bad); }
/* ============ responsive ============ */
@media (max-width: 1080px) {
  .tool-grid { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; }
}

@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sb {
    position: fixed; inset: 0 auto 0 0; width: 268px; z-index: 60;
    transform: translateX(-100%); transition: transform .2s ease;
  }
  .app.nav-open .sb { transform: translateX(0); box-shadow: var(--sh-lg); }
  .app.nav-open::after {
    content: ""; position: fixed; inset: 0; background: rgba(6, 12, 26, .5); z-index: 50;
  }
  .tb-burger { display: inline-flex; }
  .tb { padding: 0 14px; gap: 10px; }
  .tb-title { font-size: 13.6px; }
  .page { padding: 18px 16px 44px; }
}


/*
 * The scan view is a single column of progress and reads better held in, so it
 * keeps a narrower measure than the report and tool pages.
 */
.page-narrow { max-width: 760px; }

/* ============================================================================
   Phase 3 + 4 components
   ==========================================================================*/
/* ---------- sidebar: Help sits apart at the foot ---------- */
.sb-group-foot { margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--line-2); }

/* ---------- dashboard: the balance, once ---------- */
.card-credits .card-pad { padding-top: 4px; }
.credit-big { display: flex; align-items: baseline; gap: 8px; }

.credit-n {
  font-size: 40px;
  font-weight: 760;
  letter-spacing: -.03em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  /* The one number worth reading on this screen, in the brand hue. */
  background: linear-gradient(92deg, var(--brand), color-mix(in srgb, var(--brand) 55%, var(--violet)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.credit-l { font-size: 13px; font-weight: 600; color: var(--ink-3); }

.credit-bar {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  margin: 12px 0 9px;
  overflow: hidden;
}

.credit-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--purple));
  transition: width .35s ease;
}
.credit-note { margin: 0; font-size: 12.6px; color: var(--ink-3); }
.next-tool { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: start; }
.next-tool b { display: block; font-size: 14.5px; margin-bottom: 3px; }
.next-tool p { margin: 0; font-size: 13.2px; color: var(--ink-2); line-height: 1.55; }

.next-ic {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--purple-soft);
  color: var(--purple-ink);
  border: 1px solid var(--brand-line);
}

/* ---------- preferences: a real theme control ---------- */
.seg2 {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: 10px;
}

.seg2-btn {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 12.8px;
  font-weight: 600;
  color: var(--ink-3);
  padding: 6px 14px;
  border-radius: 8px;
  min-height: 32px;
}
.seg2-btn:hover { color: var(--ink); }
.seg2-btn.is-on { background: var(--brand); color: var(--on-accent); }
.seg2-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.card-foot-note { padding-top: 12px; padding-bottom: 12px; }
.card-foot-note p { margin: 0; font-size: 12.8px; color: var(--ink-3); line-height: 1.6; }

/* ---------- tool: the cost, before the click ---------- */
.cost-line {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
  margin: 14px 0 2px;
  padding: 11px 14px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  border-radius: var(--r-sm);
}

.cost-n {
  font-size: 17px;
  font-weight: 720;
  color: var(--brand-ink);
  font-variant-numeric: tabular-nums;
}
.cost-l { font-size: 13px; color: var(--ink-2); }
.cost-dot { color: var(--ink-3); }
.cost-warn { flex-basis: 100%; font-size: 12.6px; color: var(--warn); font-weight: 600; }

/* ---------- scan: measured counters ---------- */
.counter-left { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-3); }

.live {
  list-style: none;
  margin: 20px auto 0;
  padding: 0;
  max-width: 320px;
  display: grid;
  gap: 8px;
}

.live-row {
  display: grid;
  grid-template-columns: 54px 1fr;
  align-items: center;
  gap: 12px;
  padding: 9px 13px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  /* The accent rule is what gives each number its meaning at a glance. */
  border-left: 3px solid var(--line-strong);
  text-align: left;
}
.live-row b { font-size: 19px; font-weight: 730; font-variant-numeric: tabular-nums; text-align: right; }
.live-row span { font-size: 13px; color: var(--ink-2); }
.live-row.t-teal { border-left-color: var(--teal); }
.live-row.t-teal b { color: var(--teal-ink); }
.live-row.t-brand { border-left-color: var(--brand); }
.live-row.t-brand b { color: var(--brand-ink); }
.live-row.t-warn { border-left-color: var(--warn); }
.live-row.t-warn b { color: var(--warn); }

/*
 * Unable to verify is NEUTRAL, never red. It is an honest fourth answer, not a
 * failure, and colouring it as one would tell a link builder the tool broke
 * when it worked.
 */
.live-row.t-muted { border-left-color: var(--line-strong); }
.live-row.t-muted b { color: var(--ink-3); }
.scan-eta { margin: 16px 0 0; font-size: 13px; color: var(--ink-3); }

/* ---------- report: four numbers with four meanings ---------- */
.cards .stat-card {
  position: relative;
  padding: 16px 16px 15px;
  /* Body stays neutral. Colour lives in the chip, the rule and the number. */
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--r);
}

.stat-chip {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  margin-bottom: 10px;
  background: var(--surface-2);
  color: var(--ink-3);
}

.cards .stat-card .card-l {
  font-size: 12.2px;
  font-weight: 660;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}

.cards .stat-card .card-v {
  font-size: 30px;
  font-weight: 750;
  letter-spacing: -.025em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.cards .stat-card .card-v small { font-size: 15px; font-weight: 600; color: var(--ink-3); }
.cards .stat-card .card-d { margin-top: 7px; font-size: 12.4px; color: var(--ink-2); line-height: 1.5; }
.stat-card.t-teal { border-left-color: var(--teal); }
.stat-card.t-teal .stat-chip { background: var(--teal-soft); color: var(--teal-ink); }
.stat-card.t-teal .card-v { color: var(--teal-ink); }
.stat-card.t-brand { border-left-color: var(--brand); }
.stat-card.t-brand .stat-chip { background: var(--brand-soft); color: var(--brand-ink); }
.stat-card.t-brand .card-v { color: var(--brand-ink); }
.stat-card.t-warn { border-left-color: var(--warn); }
.stat-card.t-warn .stat-chip { background: var(--warn-soft); color: var(--warn); }
.stat-card.t-warn .card-v { color: var(--warn); }

/*
 * Best Prospects answers the question the user came with, so it is set apart
 * rather than being the fourth of four equals.
 */
.stat-card.t-best.is-hero {
  border-left-color: var(--purple);
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand-soft) 70%, transparent), transparent 62%),
    var(--surface);
  box-shadow: var(--sh);
}
.stat-card.t-best .stat-chip { background: var(--brand); color: var(--on-accent); }
.stat-card.t-best .card-l { color: var(--brand-ink); }

.stat-card.t-best .card-v {
  font-size: 34px;
  background: linear-gradient(92deg, var(--brand), var(--purple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-card.t-best .card-v small { -webkit-text-fill-color: var(--ink-3); }
@media (max-width: 640px) {
  .live { max-width: none; }
  .cards .stat-card .card-v { font-size: 26px; }
}


/*
 * Copy is the secondary path.
 *
 * It used to be a filled teal button sitting beside Export, so the two read as
 * equals and the eye went to the wrong one. This audience finishes in a
 * spreadsheet, and the file is what gets handed to a VA or a client, so Export
 * is the only filled button here. Copy keeps the teal, as an outline, because
 * teal already means "this worked" everywhere else in the product.
 */
/*
 * Copy is GREEN and filled.
 *
 * It was an outlined teal button, which read as secondary next to a filled
 * export. Both are ways of leaving with your data and both deserve weight.
 *
 * The two themes take different text colours, and that is the point: white on
 * the light-mode green measures 5.37:1, while white on the lifted dark-mode
 * green is 1.9:1 and would be unreadable. The fill changes, so the ink has to
 * change with it. Picking one ink for both is how a button ends up legible in
 * the theme it was designed in and invisible in the other.
 */
:root {
  --copy: #0e7a4e;
  --copy-hover: #0b6640;
  --copy-ink: #0b6640;
  --on-copy: #ffffff;
}
:root[data-theme="dark"] {
  --copy: #34d399;
  --copy-hover: #57e0ad;
  --copy-ink: #57e0ad;
  --on-copy: #081a12;
}

.btn-copy { background: var(--copy); color: var(--on-copy); border-color: var(--copy); }
/*
 * Hover EMPTIES the button.
 *
 * The fill drops away and the colour moves to the text and the border, so the
 * control reads as "about to be pressed" rather than merely a shade darker.
 * The ink has to change with it: the white that sits on the fill would be
 * invisible on the page behind it.
 */
.btn-copy:hover:not(:disabled) {
  background: transparent;
  border-color: var(--copy);
  color: var(--copy-ink);
}
.btn-copy .btn-ic, .btn-copy #copyLabel { color: inherit; }
.btn-copy.is-done { background: var(--copy-hover); border-color: var(--copy-hover); color: var(--on-copy); }

/*
 * New Scan is ORANGE and filled, with a deeper orange on hover.
 *
 * It sits at the top of a finished report as the way out of it, and as a quiet
 * outlined button it disappeared against the page. Near-black ink, because
 * white on this orange is 2.6:1 and fails outright.
 */
.btn-accent {
  background: var(--brand);
  color: var(--on-accent);
  border-color: var(--brand);
}
/* The same emptying hover, so the two filled buttons behave alike. */
/* The caret is part of the label, so it takes the label's colour outright. */
.btn-primary .caret { opacity: 1; color: inherit; }

.btn-accent:hover:not(:disabled) {
  background: transparent;
  border-color: var(--brand);
  color: var(--brand-ink);
}

/* ============================================================================
   Phase 5 + 6 - trust surfaces and the full visual system

   The rule this whole section is written against: TINT, DO NOT FLOOD. Colour
   lives in icon chips, 2px accent rules, pill backgrounds, progress fills,
   focus rings and the one number on a screen that matters. Card bodies stay
   neutral, because the people using this read batches of URLs and a rainbow
   costs them time. Every status also carries a label or an icon, so none of it
   depends on colour vision or survives only in colour.

   Colour meanings, applied consistently everywhere below:
     violet  primary and active      purple  informational emphasis
     teal    verified good           amber   attention and review
     red     real failure only       neutral honest absence
   ==========================================================================*/
/* ---------- page measures ---------------------------------------------- */
/*
 * Text-led pages get a narrower measure than the tool. Help, Pricing,
 * Preferences and Usage are read; the Prospect Checker is worked in. Letting
 * a paragraph run to 1320px is what made those pages feel like a spreadsheet.
 */
.page-mid { max-width: 940px; }
#dashHi { font-size: 25px; }

/* ---------- sidebar ------------------------------------------------------ */
/*
 * Every nav icon is a chip, not a loose glyph. Unselected it is a quiet box
 * that gives the column a rhythm; selected it fills with the brand violet, so
 * where you are is legible from the corner of the eye rather than needing to
 * be read.
 */
.sb-item { position: relative; }

.sb-item svg {
  width: 28px;
  height: 28px;
  padding: 5px;
  box-sizing: border-box;
  border-radius: 8px;
  opacity: 1;
  color: var(--ink-3);
  background: transparent;
  transition: background .14s ease, color .14s ease;
}
.sb-item:hover svg { background: var(--surface-2); color: var(--ink-2); }

/*
 * The active state carries a 2px accent rule inside its left edge, which is
 * the same device the report tiles and the live counters use. One vocabulary,
 * three screens.
 */
.sb-item.is-on svg { background: none; color: var(--on-violet); }
.sb-label { font-size: 10px; letter-spacing: .1em; padding-bottom: 7px; }

/* Forthcoming, not disabled. Grey said "broken"; purple says "informational". */
.sb-soon {
  background: var(--purple-soft);
  color: var(--purple-ink);
  border-color: color-mix(in srgb, var(--purple) 32%, transparent);
}

/* ---------- sidebar credit block ---------------------------------------- */
/*
 * A card rather than a tinted rectangle, and a link rather than a dead panel:
 * the number people glance at is also the fastest route to the page that
 * explains it.
 *
 * Low and out are AMBER, never red. Running out of credits is an attention
 * state, not a failure, and red is reserved for something actually going
 * wrong. The colour never travels alone - the note underneath says what
 * happened, in words.
 */
.sb-quota {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  padding: 11px 12px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color .14s ease;
}

.sb-quota::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--brand), var(--purple));
}
.sb-quota:hover { border-color: var(--line-strong); }

.sb-quota-n {
  font-size: 19px;
  font-weight: 750;
  letter-spacing: -.025em;
  background: linear-gradient(92deg, var(--brand), var(--purple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sb-quota-l { font-size: 11.5px; font-weight: 600; }
.sb-quota.is-low::before, .sb-quota.is-out::before { background: var(--warn); }
.sb-quota.is-low .sb-quota-n, .sb-quota.is-out .sb-quota-n { background: none; -webkit-text-fill-color: var(--warn); color: var(--warn); }
.sb-quota.is-low .sb-quota-fill, .sb-quota.is-out .sb-quota-fill { background: var(--warn); }
.sb-quota.is-out { border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); }
.sb-quota.is-out .sb-quota-note { color: var(--warn); font-weight: 600; }

/* ---------- card heads with an identity --------------------------------- */
.card-head-ic { display: flex; align-items: center; gap: 12px; min-width: 0; }
.card-head-ic > div { min-width: 0; }

.head-ic {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
}
.head-ic.t-brand { background: var(--brand-soft); color: var(--brand-ink); border-color: var(--brand-line); }
.head-ic.t-purple { background: var(--purple-soft); color: var(--purple-ink); border-color: var(--brand-line); }

.head-ic.t-teal {
  background: var(--teal-soft);
  color: var(--teal-ink);
  border-color: color-mix(in srgb, var(--teal) 26%, transparent);
}

/* The step number IS the ornament, so the heading does not have to carry "1." */
.head-n {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--brand);
  color: var(--on-accent);
  font-size: 13px;
  font-weight: 730;
  font-variant-numeric: tabular-nums;
}

/* ---------- dashboard ---------------------------------------------------- */
/*
 * Not two equal columns. The tool is a doorway and the balance is a fact, so
 * the doorway gets the width, the top accent rule and the only filled button
 * on the screen.
 */
.grid-dash { grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); }
.card-tool.is-hero { position: relative; overflow: hidden; }

.card-tool.is-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--purple) 58%, var(--teal));
}
.card-credits { position: relative; overflow: hidden; }

.card-credits .card-pad {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--brand-soft) 55%, transparent), transparent 70%);
}

/* ---------- account menu ------------------------------------------------- */
.acct2-who { display: flex; align-items: center; gap: 10px; }
.acct2-who-txt { min-width: 0; }

.acct2-who-av {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 13.5px;
  font-weight: 720;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--purple));
}

.acct2-credits {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  margin: 6px 4px 7px;
  padding: 10px 11px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  border-radius: var(--r-sm);
  text-decoration: none;
}
.acct2-credits:hover { border-color: var(--brand); }

.ac-n {
  font-size: 18px;
  font-weight: 740;
  color: var(--brand-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.ac-l { font-size: 12.5px; font-weight: 620; color: var(--brand-ink); }
.ac-d { flex-basis: 100%; font-size: 11.5px; color: var(--ink-3); }
.acct2-sep { height: 1px; background: var(--line-2); margin: 5px 6px; }
.acct2-item svg { flex: none; opacity: .7; }
.acct2-item:hover svg { opacity: 1; }

/* ---------- preferences: the person, then their settings ---------------- */
.prof {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-2);
  background: linear-gradient(90deg, var(--brand-soft), transparent 64%);
}

.prof-av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: 720;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--purple));
}
.prof-txt { min-width: 0; }
.prof-n { font-size: 15.5px; font-weight: 680; letter-spacing: -.01em; }
.prof-e { font-size: 12.6px; color: var(--ink-3); word-break: break-all; }
.prof .chip { margin-left: auto; flex: none; }

/* Two row groups in one card should still read as one list. */
.rows + .rows { border-top: 1px solid var(--line-2); }

/* ---------- pricing ------------------------------------------------------ */
.plan {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh);
}

.plan::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand), var(--purple) 55%, var(--teal));
}

.plan-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 25px 26px 20px;
  border-bottom: 1px solid var(--line-2);
}

.plan-name {
  font-size: 11.5px;
  font-weight: 730;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-ink);
}

.plan-price {
  font-size: 38px;
  font-weight: 760;
  letter-spacing: -.032em;
  line-height: 1.05;
  margin-top: 5px;
}

.plan-price span {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0;
  margin-left: 6px;
}

.plan-sub {
  margin: 9px 0 0;
  font-size: 13.4px;
  color: var(--ink-2);
  max-width: 58ch;
  line-height: 1.55;
}

.plan-list {
  list-style: none;
  margin: 0;
  padding: 20px 26px;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

.plan-list li {
  display: grid;
  grid-template-columns: 19px 1fr;
  gap: 11px;
  font-size: 12.6px;
  color: var(--ink-3);
  line-height: 1.55;
}

.plan-list b {
  display: block;
  color: var(--ink);
  font-size: 13.6px;
  font-weight: 660;
  margin-bottom: 2px;
}

.pl-ic {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  margin-top: 1px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--teal-soft);
  color: var(--teal-ink);
}

.plan-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 17px 26px 19px;
  border-top: 1px solid var(--line-2);
  background: var(--surface-2);
}
.plan-foot-note { font-size: 12.6px; color: var(--ink-3); }

/*
 * What is coming is a paragraph on a tinted rule, not a second product card.
 * An empty tier with no price and no date makes the real one look like a trial
 * of something that does not exist.
 */
.soonbox {
  margin-top: 18px;
  padding: 19px 22px;
  border-radius: var(--r);
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--purple);
}
.soonbox-head { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; }

.soonbox-ic {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--purple-soft);
  color: var(--purple-ink);
}
.soonbox h2 { font-size: 15px; margin: 0; font-weight: 670; letter-spacing: -.01em; }

.soonbox p {
  margin: 0;
  font-size: 13.2px;
  color: var(--ink-2);
  line-height: 1.68;
  max-width: 76ch;
}

/* ---------- help --------------------------------------------------------- */
.guide {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: g;
  display: grid;
  gap: 17px;
}
.guide li { position: relative; display: grid; grid-template-columns: 30px 1fr; column-gap: 13px; }

.guide li::before {
  counter-increment: g;
  content: counter(g);
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--brand-soft);
  color: var(--brand-ink);
  border: 1px solid var(--brand-line);
  font-size: 12.5px;
  font-weight: 730;
}

/* The thread between the steps, so five items read as one sequence. */
.guide li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 32px;
  bottom: -18px;
  width: 1px;
  background: var(--line);
}
.guide b { grid-column: 2; font-size: 14px; font-weight: 665; margin-bottom: 3px; }

.guide span {
  grid-column: 2;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.62;
  max-width: 72ch;
}

/* A dot in the colour the term wears everywhere else, beside the term itself. */
.row-term .row-t { display: flex; align-items: center; gap: 9px; }

.term-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
  background: var(--ink-3);
}
.term-dot.t-teal { background: var(--teal); }
.term-dot.t-brand { background: var(--brand); }
.term-dot.t-warn { background: var(--warn); }
.term-dot.t-muted { background: var(--line-strong); }
.row-term .row-d { max-width: 78ch; line-height: 1.6; }
.row-term .row-d b { color: var(--ink); font-weight: 660; }

/* ---------- sign in ------------------------------------------------------ */
/* Modals sit on the top surface of the ladder, above cards and popovers. */
.modal-card { background: var(--surface-3); }
.signin-card { max-width: 458px; padding: 28px 30px 22px; position: relative; overflow: hidden; }

.signin-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand), var(--purple) 55%, var(--teal));
}
.signin-brand { margin-bottom: 19px; }
.signin-logo { display: block; width: 152px; height: auto; }
.signin-logo-dark { display: none; }
:root[data-theme="dark"] .signin-logo-light { display: none; }
:root[data-theme="dark"] .signin-logo-dark { display: block; }
.signin-h { font-size: 21px; font-weight: 720; letter-spacing: -.024em; margin: 0 0 8px; }

.signin-lead {
  margin: 0 0 19px;
  font-size: 13.8px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 42ch;
}

/*
 * The Google button stays a neutral surface carrying the official mark,
 * because Google's brand guidance is explicit about that and a violet one
 * would be off-limits. Prominence comes from width, height and the ring on
 * hover instead of from repainting somebody else's logo button.
 */
.signin-card .gbtn {
  display: flex;
  width: 100%;
  justify-content: center;
  gap: 11px;
  min-height: 50px;
  padding: 13px 22px;
  background: var(--surface);
  color: var(--ink);
  border: 1.5px solid var(--line-strong);
  border-radius: 11px;
  font-size: 15.5px;
  font-weight: 660;
  box-shadow: var(--sh);
}
.signin-card .gbtn:hover { border-color: var(--brand); background: var(--brand-soft); transform: none; }
.signin-card .gbtn:focus-visible { outline: none; border-color: var(--brand); box-shadow: var(--ring); }

/* Google unconfigured: look unavailable rather than failing silently on click. */
.gbtn.is-off { opacity: .45; pointer-events: none; }

.signin-points {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  border-top: 0;
  display: grid;
  gap: 10px;
  text-align: left;
}

.signin-points li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  font-size: 13.2px;
  color: var(--ink-2);
  line-height: 1.5;
}
.signin-points b { color: var(--ink); font-weight: 700; }

.sp-ic {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin-top: 1px;
  display: grid;
  place-items: center;
  background: var(--teal-soft);
  color: var(--teal-ink);
}
.signin-foot { margin-top: 19px; padding-top: 15px; border-top: 1px solid var(--line-2); }
.signin-scope { margin: 0; font-size: 12.2px; color: var(--ink-3); line-height: 1.62; }

.signin-foot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.signin-hold {
  margin: 0;
  font-size: 12px;
  color: var(--ink-3);
  max-width: 36ch;
  line-height: 1.5;
}

/* ---------- scan progress ------------------------------------------------ */
/*
 * People sit here for thirty to sixty seconds, so this screen has to keep
 * saying "still working" without inventing anything. Everything moving on it
 * is measured: the percentage, the bar, the counters. The one decorative
 * element is the dot, and it is driven by the scan's real status, so it stops
 * the moment the scan does.
 */
.scan-panel {
  text-align: left;
  padding: 26px 28px 24px;
  margin-top: 24px;
  position: relative;
  overflow: hidden;
}

.scan-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--purple));
}
.scan-top { display: flex; align-items: center; gap: 12px; }
.scan-top-txt { flex: 1; min-width: 0; }
.scan-title { font-size: 19px; margin: 0; font-weight: 700; letter-spacing: -.022em; }

.scan-name {
  margin: 3px 0 0;
  font-size: 12.8px;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scan-pct {
  flex: none;
  font-size: 31px;
  font-weight: 760;
  letter-spacing: -.032em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(92deg, var(--brand), var(--purple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.scan-pct small { font-size: 15px; font-weight: 640; -webkit-text-fill-color: var(--ink-3); }

.scan-live {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
  background: var(--line-strong);
}
.scan-panel.is-running .scan-live { background: var(--teal); animation: scanpulse 1.9s ease-out infinite; }
.scan-panel.is-stopped .scan-live { background: var(--warn); }
@keyframes scanpulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--teal) 55%, transparent); }
  70%  { box-shadow: 0 0 0 9px color-mix(in srgb, var(--teal) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--teal) 0%, transparent); }
}

.counter { margin-top: 22px; font-size: 14px; color: var(--ink-2); }

.counter #counterN {
  display: inline;
  font-size: 29px;
  font-weight: 750;
  color: var(--ink);
  letter-spacing: -.03em;
  margin-right: 6px;
  font-variant-numeric: tabular-nums;
}
.counter-left { color: var(--ink-3); }

.bar {
  height: 10px;
  margin: 14px 0 2px;
  border-radius: 99px;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  overflow: hidden;
}

.bar-fill {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--brand), var(--purple));
}

/* A sheen only while work is genuinely in flight. It carries no information;
   it is the visual equivalent of an engine note, and it goes quiet on pause. */
.scan-panel.is-running .bar-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent);
  animation: barsheen 1.7s linear infinite;
}
@keyframes barsheen {
  from { transform: translateX(-100%); } to { transform: translateX(100%); }
}


.live {
  max-width: none;
  margin: 18px 0 0;
  grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
}
.live-row { grid-template-columns: 26px auto 1fr; gap: 11px; padding: 11px 13px; }

.live-ic {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex: none;
}
.live-row.t-teal .live-ic { background: var(--teal-soft); color: var(--teal-ink); }
.live-row.t-brand .live-ic { background: var(--brand-soft); color: var(--brand-ink); }
.live-row.t-warn .live-ic { background: var(--warn-soft); color: var(--warn); }
.live-row.t-muted .live-ic { background: var(--surface-3); color: var(--ink-3); border: 1px solid var(--line); }
.scan-eta { margin: 15px 0 0; }
.scan-foot { margin: 15px 0 0; font-size: 13px; color: var(--ink-3); line-height: 1.6; }
.scan-actions { margin-top: 18px; justify-content: flex-start; }

/* ---------- report ------------------------------------------------------- */
.rep-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.crumb {
  margin: 0 0 4px;
  font-size: 10.5px;
  font-weight: 720;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-ink);
}
.takeaway { position: relative; overflow: hidden; }

.takeaway::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--purple));
}
.verdictbar { border-radius: var(--r); }

/* ---------- nested surfaces: use the ladder, not the card colour --------- */
/*
 * These all sat on `--surface`, the same token as the card holding them, so in
 * dark mode a choice card and its container resolved to one flat sheet of navy
 * and only the border said anything was there.
 */
.mode2 { background: var(--surface-2); }
.mode2.is-on { background: var(--brand-soft); }
.cz-opt { background: var(--surface-2); }
.menu-pop { background: var(--surface-3); }
.devbox-row input { background: var(--surface-2); }

/* ---------- focus: one visible ring, everywhere -------------------------- */
/*
 * Keyboard users get the same ring on every control rather than the browser
 * default on some and nothing on others.
 */
.btn:focus-visible, .sb-item:focus-visible, .acct2-item:focus-visible, .acct2-btn:focus-visible, .src-tab:focus-visible, .mode2:focus-within, .cz-opt:focus-within, .sb-quota:focus-visible, .acct2-credits:focus-visible, .gbtn:focus-visible { outline: none; box-shadow: var(--ring); }
/* ============================================================================
   Responsive

   Desktop is the working surface; a phone should be clean and usable without
   pretending a hundred-URL batch belongs on one.
   ==========================================================================*/
/* 900-1199: the sidebar stays, the report tiles fold to 2x2. */
@media (max-width: 1199px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1080px) {
  .grid-dash { grid-template-columns: minmax(0, 1fr); }
}

/* Below the sidebar breakpoint every target clears the 44px touch minimum. */
@media (max-width: 900px) {
  .btn, .sb-item, .acct2-item, .src-tab, .seg2-btn, .acct2-credits { min-height: 44px; }
  .sb-item { padding-top: 10px; padding-bottom: 10px; }
  .prof { padding: 14px 16px; }
  .plan-head, .plan-list, .plan-foot { padding-left: 18px; padding-right: 18px; }
}

/* Single column, and nothing wide enough to push the page sideways. */
@media (max-width: 599px) {
  .page { padding: 16px 14px 40px; }
  .page-head h1 { font-size: 20px; }
  #dashHi { font-size: 21px; }

  .cards { grid-template-columns: 1fr; }
  .live { grid-template-columns: 1fr; }
  .plan-list { grid-template-columns: 1fr; }
  .plan-price { font-size: 32px; }

  .scan-panel { padding: 20px 17px 18px; }
  .scan-pct { font-size: 25px; }
  .counter #counterN { font-size: 25px; }

  .signin-card { padding: 24px 20px 18px; }
  .signin-h { font-size: 19px; }

  /* The export path is the finish line, so on a phone it gets the full width
     rather than two half buttons fighting over one row. */
  .takeaway-actions { flex-direction: column; align-items: stretch; }
  .takeaway-actions .menu, .takeaway-actions .btn { width: 100%; }
  .scan-actions .btn { flex: 1; }
  .rep-actions, .rep-actions .btn { width: 100%; }

  .card-head { padding: 13px 16px; }
  .card-pad { padding: 16px; }
  .row { padding: 14px 16px; flex-wrap: wrap; }
  .prof-av { width: 38px; height: 38px; font-size: 15px; }
}


/* ---------- link-buttons look like buttons ------------------------------ */
/*
 * An <a class="btn"> kept the default underline, so the primary call to action
 * on the dashboard and on Pricing read as underlined text inside a filled
 * shape. Centring is here for the same reason: an anchor is not a flex box by
 * default, so a link-button with an icon lined up differently from a real one.
 */
a.btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* ---------- contrast corrections, measured not guessed ------------------ */
/*
 * Both of these were measured from computed values in the live page, in both
 * themes, rather than eyeballed:
 *
 *   .sb-label  --ink-3 on --bg-2      4.49:1  (AA wants 4.50 at this size)
 *   .ac-d      --ink-3 on --brand-soft 4.29:1
 *
 * A tinted background eats contrast that the same token clears on the plain
 * page behind it, which is exactly the case a screenshot cannot catch.
 */
.sb-label { color: var(--ink-2); }
.ac-d { color: var(--ink-2); }

/*
 * The modal sits a step higher on the surface ladder than a card, and in dark
 * mode that lighter navy costs contrast: --ink-3 measured 4.39:1 on
 * --surface-3, just under AA for body text. The two smallest paragraphs in the
 * sign-in card move up a step. Light mode gains from the same change.
 */
.signin-scope, .signin-hold { color: var(--ink-2); }

/* ---------- report tiles: one accent rule, not two ---------------------- */
/*
 * `.cards .card::before` paints a 4px bar in `--accent`, which the Phase 4
 * tiles no longer set, so it fell back to violet and sat directly behind the
 * new 3px semantic border-left. Every tile was showing two stripes: its real
 * colour and a violet sliver beside it, which read as a rendering fault and
 * quietly broke the "teal means verified good" rule on three cards out of four.
 *
 * The border-left is the one that carries meaning, so the old bar goes.
 */
.cards .stat-card::before { content: none; }

/* ============================================================================
   Phase 7 - the premium design system

   This replaces the 6.1 and 6.2 override layers rather than stacking a third
   one on top of them. Four things carry the whole redesign:

     1. GROUND. Deep navy-charcoal in dark, warm paper in light, both with a
        faint ambient wash so a large flat area has depth in it. Navy is the
        right ground precisely because the accent is orange - they sit opposite
        each other, so a filled pill carries further here than it ever could on
        the violet field this used to have.
     2. TYPE. Inter, a real scale, tabular figures on every number, and
        headings that are actually bigger than the body text around them.
     3. SELECTION. Filled, warm, unmistakable. One lit row, everywhere.
     4. STAT CARDS. Tinted gradient wash, icon chip, oversized figure. The
        numbers are the product; they should look like it.

   Colour discipline is unchanged: accent for actions, semantics for data,
   neutral for everything else, and never colour alone.
   ==========================================================================*/
/* ---------- type ---------------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.55;
  font-feature-settings: "cv05" 1, "ss03" 1;
  letter-spacing: -.006em;
}

/* Every figure in the product is tabular, so columns of numbers line up and a
   counter climbing during a scan does not jitter its own width. */
.stat-v, .card-v, .credit-n, .sb-quota-n, .scan-pct, .counter #counterN, .plan-price, .cost-n, .readybar-n, .live-row b, .ac-n, .row-v, .hs b { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
h1, h2, h3 { letter-spacing: -.026em; line-height: 1.18; }
.page-head { margin-bottom: 22px; }
.page-head h1 { font-size: 27px; font-weight: 760; letter-spacing: -.032em; }
.page-head p { margin-top: 7px; font-size: 14px; color: var(--ink-2); line-height: 1.6; }
#dashHi { font-size: 30px; }
.card-head h2 { font-size: 15px; font-weight: 660; letter-spacing: -.015em; }
.card-head p { font-size: 12.8px; color: var(--ink-3); line-height: 1.5; }

/* ---------- ground: the ambient wash -------------------------------------- */
/*
 * One fixed, non-interactive layer behind everything. It is what stops a large
 * dark surface reading as a switched-off screen, and it is deliberately weak -
 * two soft pools, warm top-right and cool bottom-left, at four to nine percent.
 */
body { position: relative; background: var(--bg); }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(60% 50% at 88% -8%, var(--amb-1), transparent 70%),
    radial-gradient(52% 46% at 4% 104%, var(--amb-2), transparent 72%),
    radial-gradient(48% 40% at 70% 108%, var(--amb-3), transparent 68%);
}
.app { position: relative; z-index: 1; }

.sb {
  background: var(--bg-2);
  border-right: 1px solid var(--line);
  padding: 16px 14px 14px;
  gap: 16px;
}
.sb-brand { padding: 4px 8px 16px; border-bottom: 1px solid var(--line-2); }
.sb-logo { width: 158px; }
.sb-group { margin-bottom: 20px; }

.sb-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0 12px 9px;
}
.sb-label::after { content: none; }

.sb-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 11px;
  margin-bottom: 3px;
  font-size: 13.8px;
  font-weight: 540;
  color: var(--ink-2);
  transition: background .15s ease, color .15s ease;
}

.sb-item svg {
  width: 19px;
  height: 19px;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--ink-3);
  opacity: 1;
  flex: none;
  transition: color .15s ease;
}
.sb-item:hover { background: var(--surface-2); color: var(--ink); }
.sb-item:hover svg { background: none; color: var(--ink-2); }

/*
 * Selected, and MAGENTA rather than orange.
 *
 * This is the one place the two accents had to be pulled apart. A filled
 * orange block here competed with the primary button for the same meaning:
 * both said "act", one of them was only saying "you are here". Magenta is the
 * identity colour and never appears on a control that does something, so a
 * filled magenta rail entry cannot be mistaken for a button.
 *
 * Declared ONCE. There were four copies of this rule down the file, three of
 * them painting a soft tinted pill that nothing ever saw.
 */
.sb-item.is-on {
  background: var(--violet);
  color: var(--on-violet);
  font-weight: 700;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--violet) 32%, transparent);
}
.sb-item.is-on svg { background: none; color: var(--on-violet); opacity: 1; }
.sb-item.is-on:hover { background: var(--violet); color: var(--on-violet); }

.sb-soon {
  background: var(--surface-2);
  color: var(--ink-3);
  border: 1px solid var(--line);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 3px 7px;
  /* Never squeezed, never wrapped: it is two syllables and a border. */
  flex: none;
  white-space: nowrap;
}

.sb-item.is-on .sb-soon {
  background: color-mix(in srgb, var(--on-violet) 15%, transparent);
  color: var(--on-violet);
  border-color: color-mix(in srgb, var(--on-violet) 24%, transparent);
}
.sb-group-foot { border-top: 1px solid var(--line-2); padding-top: 14px; }
.sb-foot { border-top: 1px solid var(--line-2); padding-top: 12px; }

/* the balance block: quiet card, accent only on the figure */
.sb-quota {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
  padding: 13px 14px;
  border-radius: 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: none;
  overflow: hidden;
}
.sb-quota::before { content: none; }
.sb-quota:hover { border-color: var(--line-strong); box-shadow: var(--sh); }

.sb-quota-n {
  font-size: 23px;
  font-weight: 780;
  letter-spacing: -.03em;
  background: none;
  -webkit-text-fill-color: var(--brand-ink);
  color: var(--brand-ink);
}
.sb-quota-l { font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.sb-quota-bar { height: 6px; background: var(--surface-2); margin-top: 9px; }
.sb-quota-fill { background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 55%, var(--violet))); }
.sb-quota-note { font-size: 11.5px; margin-top: 8px; }
.sb-quota.is-low .sb-quota-n, .sb-quota.is-out .sb-quota-n { -webkit-text-fill-color: var(--warn); color: var(--warn); }
.sb-quota.is-low .sb-quota-fill, .sb-quota.is-out .sb-quota-fill { background: var(--warn); }

/* ---------- top bar ------------------------------------------------------- */
.tb {
  height: 62px;
  padding: 0 26px;
  background: color-mix(in srgb, var(--bg-2) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}

.tb-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- surfaces ------------------------------------------------------ */
.card, .panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--sh);
}
.card-head { padding: 16px 20px; border-bottom: 1px solid var(--line-2); }
.card-pad { padding: 20px; }
.page { padding: 24px 26px 60px; }
.grid { gap: 16px; }

/* ---------- buttons ------------------------------------------------------- */
.btn {
  border-radius: 10px;
  font-weight: 640;
  font-size: 14px;
  padding: 10px 18px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: -.01em;
}
.btn-lg { font-size: 15.5px; padding: 13px 26px; min-height: 48px; border-radius: 12px; }
.btn-sm { font-size: 13px; padding: 7px 14px; min-height: 34px; }

.btn-primary {
  background: var(--violet);
  color: var(--on-violet);
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .10),
              0 4px 14px color-mix(in srgb, var(--brand) 32%, transparent);
}

.btn-primary:hover:not(:disabled) {
  filter: none;
  background: color-mix(in srgb, var(--brand) 88%, #000);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12),
              0 8px 22px color-mix(in srgb, var(--brand) 42%, transparent);
}
:root[data-theme="dark"] .btn-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--brand) 88%, #fff); }
.btn-quiet { background: var(--surface); border-color: var(--line-strong); color: var(--ink-2); }
.btn-quiet:hover:not(:disabled) { background: var(--surface-2); border-color: var(--ink-3); color: var(--ink); }

/* ---------- chips --------------------------------------------------------- */
.chip { font-size: 11.5px; font-weight: 660; padding: 5px 10px; letter-spacing: -.005em; }
.chip-brand { background: var(--brand-soft); color: var(--brand-ink); border-color: var(--brand-line); }
.chip-good { background: var(--good-soft); color: var(--teal-ink); border-color: transparent; }
.chip-purple { background: var(--purple-soft); color: var(--purple-ink); border-color: transparent; }

.cz-chip {
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid var(--line);
  font-size: 12px;
}

.cz-chip.t-teal {
  background: var(--teal-soft);
  color: var(--teal-ink);
  border-color: color-mix(in srgb, var(--teal) 26%, transparent);
}
.cz-chip.t-brand { background: var(--brand-soft); color: var(--brand-ink); border-color: var(--brand-line); }

.cz-chip.t-sky {
  background: var(--sky-soft);
  color: var(--sky-ink);
  border-color: color-mix(in srgb, var(--sky) 26%, transparent);
}

.cz-chip.t-warn {
  background: var(--warn-soft);
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 28%, transparent);
}

/* ---------- card head icons ---------------------------------------------- */
.card-head-ic { display: flex; align-items: center; gap: 13px; min-width: 0; }
.card-head-ic > div { min-width: 0; }

.head-ic {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
}
.head-ic.t-brand { background: var(--brand-soft); color: var(--brand-ink); border-color: var(--brand-line); }

.head-ic.t-purple {
  background: var(--purple-soft);
  color: var(--purple-ink);
  border-color: color-mix(in srgb, var(--purple) 24%, transparent);
}

.head-ic.t-teal {
  background: var(--teal-soft);
  color: var(--teal-ink);
  border-color: color-mix(in srgb, var(--teal) 26%, transparent);
}

.head-ic.t-sky {
  background: var(--sky-soft);
  color: var(--sky-ink);
  border-color: color-mix(in srgb, var(--sky) 26%, transparent);
}

.head-n {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid var(--line);
  font-size: 13.5px;
  font-weight: 760;
}

/* ---------- stat cards: the numbers are the product ----------------------- */
/*
 * Rebuilt against the dashboard reference: a tinted gradient wash across the
 * card, an icon chip in the same hue, and a figure large enough to be read
 * from the doorway. The wash is what makes four tiles scannable as four
 * different answers instead of four identical boxes with different words in.
 */
.cards { gap: 16px; }

.cards .stat-card {
  position: relative;
  overflow: hidden;
  padding: 18px 18px 17px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 1px solid var(--line);
  box-shadow: var(--sh);
}

.cards .stat-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(150deg, var(--tone-wash, transparent), transparent 62%);
}
.cards .stat-card > * { position: relative; z-index: 1; }

.stat-chip {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  margin-bottom: 13px;
  background: var(--surface-2);
  color: var(--ink-3);
  border: 1px solid var(--line);
}

.cards .stat-card .card-l {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.cards .stat-card .card-v { font-size: 36px; font-weight: 800; letter-spacing: -.04em; line-height: 1.05; }
.cards .stat-card .card-v small { font-size: 16px; font-weight: 620; color: var(--ink-3); letter-spacing: -.01em; }
.cards .stat-card .card-d { margin-top: 9px; font-size: 12.4px; color: var(--ink-2); line-height: 1.5; }

/*
 * Four solid cards, in the Search Console manner.
 *
 * They used to be white cards carrying a faint tinted wash, which is a good
 * way to hint at a colour and a poor way to tell four answers apart at a
 * glance. A filled card commits: the colour IS the category, and the figure
 * sits on it in white.
 *
 * The hues are Search Console's own, deepened. Three of its four fail AA under
 * white text as published - clicks blue at 3.56:1, CTR teal at 4.32:1,
 * position orange at 3.09:1 - so each was taken down its own hue until white
 * clears 4.6:1. Purple was the opposite problem: #5e35b1 passes at 8.02:1 but
 * is so much darker than the other three that the row stopped reading as a
 * set, so it was lifted to sit alongside them.
 *
 * The same fills serve both themes on purpose. A filled card carries its own
 * background, so the page behind it cannot change the contrast on it, and
 * re-tinting per theme would be four more colours to keep honest for no gain.
 */
:root {
  --card-blue: #3972d2;
  --card-blue-hover: #3264b9;
  --card-purple: #8551ee;
  --card-purple-hover: #7547d1;
  --card-green: #008174;
  --card-green-hover: #007266;
  --card-orange: #b65908;
  --card-orange-hover: #a04e07;
  --on-card: #ffffff;
}

.cards .stat-card {
  background: var(--tone-fill);
  border-color: transparent;
  color: var(--on-card);
  box-shadow: var(--sh);
  transition: background .14s ease, transform .14s ease, box-shadow .14s ease;
}

/* The wash overlay belonged to the tinted treatment this replaces. */
.cards .stat-card::after { content: none; }

/*
 * Every piece of text on a card is FULL white, with no opacity anywhere.
 *
 * Dimming the label and the description was the instinct, and it is exactly
 * what these fills cannot afford: white on them measures about 4.7:1, so
 * knocking it back to 82% drops the label to 3.69:1 and the description to
 * 3.99:1 - both under the line, on the two pieces of text that explain what
 * the number means. The hierarchy is carried by size, weight and case
 * instead, which costs nothing.
 *
 * The hover prompt keeps its own opacity, because that is its reveal, and it
 * is only ever read at full strength.
 */
.cards .stat-card .card-l { color: var(--on-card); }
.cards .stat-card .card-v { color: var(--on-card); }
.cards .stat-card .card-v small { color: var(--on-card); }
.cards .stat-card .card-d { color: var(--on-card); }
.cards .stat-card .stat-cta { color: var(--on-card); }

/* The icon chip reads as a lighter pane of the same card, not a second hue. */
.cards .stat-card .stat-chip {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .3);
  color: var(--on-card);
}

/*
 * Hover is a small lift and a slightly DEEPER fill.
 *
 * Lightening was the instinct and it is the wrong move here: every one of
 * these fills sits just above the AA line under white text, so a lighter
 * hover would push the label below it at the exact moment the pointer is on
 * it. Going deeper raises the contrast instead of spending it.
 */
.cards .stat-card:hover:not(:disabled) {
  background: var(--tone-fill-hover);
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}
/*
 * A card with no rows in it is NOT dimmed.
 *
 * Fading it to 55% took the label and the figure down to about 2.5:1 against
 * their own fill - and "FOLLOW OPPORTUNITIES 0" is information, not chrome.
 * Zero is often the most important thing on the screen. It simply stops being
 * a button: no pointer, no hover, no prompt.
 */
.cards .stat-card:disabled { cursor: default; }

/* Filtering: a white ring, because a coloured one is invisible on a fill. */
.cards .stat-card.is-filtering { box-shadow: inset 0 0 0 2px var(--on-card), var(--sh-md); }
.cards .stat-card.is-filtering .stat-cta { opacity: 1; }

.stat-card.t-blue { --tone-fill: var(--card-blue); --tone-fill-hover: var(--card-blue-hover); }
.stat-card.t-purple { --tone-fill: var(--card-purple); --tone-fill-hover: var(--card-purple-hover); }
.stat-card.t-green { --tone-fill: var(--card-green); --tone-fill-hover: var(--card-green-hover); }
.stat-card.t-orange { --tone-fill: var(--card-orange); --tone-fill-hover: var(--card-orange-hover); }

/* Best Prospects is the answer people came for, so it is the one that lifts. */
.stat-card.t-green.is-hero { box-shadow: var(--sh-md); }
.stat-card.t-green.is-hero .card-v { font-size: 40px; }

/* The chips under the table wear the same four colours when they are on. */
.rf.t-blue.is-on { border-color: var(--card-blue); box-shadow: inset 0 0 0 1px var(--card-blue); }
.rf.t-blue.is-on .rf-n { color: var(--card-blue); }
.rf.t-purple.is-on { border-color: var(--card-purple); box-shadow: inset 0 0 0 1px var(--card-purple); }
.rf.t-purple.is-on .rf-n { color: var(--card-purple); }
.rf.t-green.is-on { border-color: var(--card-green); box-shadow: inset 0 0 0 1px var(--card-green); }
.rf.t-green.is-on .rf-n { color: var(--card-green); }
.rf.t-orange.is-on { border-color: var(--card-orange); box-shadow: inset 0 0 0 1px var(--card-orange); }
.rf.t-orange.is-on .rf-n { color: var(--card-orange); }

/* Usage tiles pick up the same treatment. */
.stat { border-radius: 16px; padding: 18px 19px; }
.stat::before { width: 3px; }
.stat-k { font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.stat-v { font-size: 32px; font-weight: 790; letter-spacing: -.035em; }

/* ---------- verdict + takeaway ------------------------------------------- */
.verdictbar {
  border-radius: 14px;
  padding: 16px 18px;
  border-left-width: 3px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
}
.verdictbar p { font-size: 16px; font-weight: 640; letter-spacing: -.015em; }
.verdictbar.is-empty { border-left-color: var(--warn); }
.verdict-ic { color: var(--teal-ink); }
.verdictbar.is-empty .verdict-ic { background: var(--warn-soft); color: var(--warn); }
.takeaway { position: relative; overflow: hidden; border-radius: 16px; }

.takeaway::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--line);
}
.takeaway-head h2 { font-size: 20px; font-weight: 720; letter-spacing: -.028em; }

/* ---------- the process bar ---------------------------------------------- */

/*
 * Four steps across the top, replacing a "How it works" card that described
 * the same four in prose, in the right rail, below the fold.
 *
 * A stepper earns its place by saying where you ARE, which a paragraph cannot.
 * Done steps go quiet and keep a tick; the current one is filled. Nothing here
 * is clickable: it reports progress, it does not offer to jump, because three
 * of the four steps cannot be reached out of order.
 */
.steps-bar {
  display: flex;
  align-items: stretch;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 7px;
  list-style: none;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh);
}

.pstep {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 15px 8px 9px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 650;
  color: var(--ink-3);
  white-space: nowrap;
  min-width: 0;
}

.pstep-ic {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 9px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink-3);
}

.pstep-t { overflow: hidden; text-overflow: ellipsis; }

/* Done: the interface colour, quietly, with a tick instead of the glyph. */
.pstep.is-done { color: var(--ink-2); }
.pstep.is-done .pstep-ic {
  background: var(--brand-soft);
  border-color: var(--brand-line);
  color: var(--brand-ink);
}

/*
 * Current: filled, because "where am I" has to survive a glance. This is the
 * one place the process bar takes the action colour - it is the step the next
 * click belongs to.
 */
.pstep.is-now {
  background: var(--violet-soft);
  color: var(--violet-ink);
  box-shadow: inset 0 0 0 1px var(--violet-line);
}
.pstep.is-now .pstep-ic {
  background: var(--violet);
  border-color: transparent;
  color: var(--on-violet);
}

@media (max-width: 899px) {
  .steps-bar { border-radius: var(--r); gap: 4px; }
  .pstep { flex: 1 1 auto; justify-content: center; padding: 8px 10px; font-size: 12.2px; }
  .pstep-t { display: none; }
  .pstep.is-now .pstep-t { display: block; }
}

/* ---------- the scan summary card ---------------------------------------- */

/*
 * Price, list size, balance afterwards and the button, in one frame.
 *
 * The action used to sit at the foot of the checks card, a scroll away from
 * the numbers that decide whether to press it. Nobody should have to hold a
 * credit balance in their head while they look for the button that spends it.
 */
.card-summary { position: sticky; top: 78px; }

.sum-total { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.sum-n {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.sum-l { font-size: 13.5px; font-weight: 600; color: var(--ink-3); }

.sum-rows { margin: 14px 0 0; padding: 0; }
.sum-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-2);
}
.sum-row:last-child { border-bottom: 0; }
.sum-row dt { font-size: 13px; color: var(--ink-2); }
.sum-row dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  font-feature-settings: "tnum" 1;
}
/* The balance after this scan is the one figure worth colouring. */
#costAfter { color: var(--good-ink); }
#costAfter.is-short { color: var(--warn-ink); }

.card-summary .cta2 { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.card-summary .cta2 .btn-lg { width: 100%; justify-content: center; }
.sum-note { margin: 10px 0 0; font-size: 12px; line-height: 1.55; color: var(--ink-3); text-align: center; }

@media (max-width: 1080px) {
  .card-summary { position: static; }
}

/* ---------- the theme switch --------------------------------------------- */

/*
 * A real sliding switch: the thumb moves, and the label says which side it
 * landed on.
 *
 * The first switch in this product carried only a thumb position, and nobody
 * could tell which end was dark. The fix is not a bigger thumb - it is the
 * word next to it. Three signals for one state: position, the icon riding on
 * the thumb, and the name of the theme you are in.
 */
.tsw {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 13px 5px 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
  min-height: 40px;
  transition: border-color .14s ease, background .14s ease;
}
.tsw:hover { border-color: var(--line-strong); color: var(--ink); }
.tsw:focus-visible { outline: none; box-shadow: var(--ring); }

.tsw-track {
  position: relative;
  display: block;
  width: 52px;
  height: 28px;
  flex: none;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.tsw-ico {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--ink-3);
  z-index: 1;
}
.tsw-sun { left: 2px; }
.tsw-moon { right: 2px; }

/* The thumb sits UNDER the icons and carries the active one on its face. */
.tsw-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 1px 3px rgba(20, 28, 45, .3);
  transition: transform .22s cubic-bezier(.3, .8, .3, 1), background .18s ease;
  z-index: 2;
}
/* Icons ride above the thumb so the active one reads on the fill. */
.tsw-ico { z-index: 3; }
.tsw:not(.is-dark) .tsw-sun { color: var(--on-accent); }
.tsw.is-dark .tsw-moon { color: var(--on-violet); }

.tsw.is-dark .tsw-thumb { transform: translateX(24px); background: var(--violet); }
.tsw-label { min-width: 34px; text-align: left; }

@media (prefers-reduced-motion: reduce) {
  .tsw-thumb { transition: none; }
}

/* On a phone the word comes off; the moving thumb still carries the state. */
@media (max-width: 599px) {
  .tsw { padding: 4px 5px; gap: 0; }
  .tsw-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* ---------- the dashboard hero ------------------------------------------- */

/*
 * The one place magenta is allowed to be atmospheric rather than functional.
 *
 * Everywhere else it marks a selection or a piece of identity and then stops.
 * Here it is the wash behind the product's own claim, which is exactly what a
 * brand colour is for, and it is contained inside one card so it never becomes
 * the background of the whole application.
 */
.hero-card {
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
  padding: 34px 34px 32px;
  border-radius: var(--r-lg);
  background:
    radial-gradient(78% 120% at 88% -20%, var(--hero-glow), transparent 62%),
    var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh);
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-ink);
}
.hero-spark { display: inline-flex; color: var(--brand); }

.hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.014em;
  line-height: 1.16;
  color: var(--ink);
}

.hero-sub {
  margin: 14px 0 0;
  max-width: 66ch;
  font-size: 14.6px;
  line-height: 1.62;
  color: var(--ink-2);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

@media (max-width: 899px) {
  .hero-card { padding: 26px 20px 24px; }
  .hero-title { font-size: 27px; }
  .hero-title br { display: none; }
  .hero-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------- pricing: three columns, one of them real --------------------- */

.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.plan-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0 4px;
}
.pf {
  padding: 9px 10px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  min-width: 0;
}
.pf-k {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pf-v {
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}

/* The card you are actually on is the only one with any lift to it. */
.plan.is-current { border-color: var(--violet-line); box-shadow: var(--sh-md); }

/*
 * A planned column is quieter than the real one, on purpose.
 *
 * Nothing here can be bought. Giving these the same visual weight as the live
 * plan would read as an offer, and the fastest way to lose a user's trust is a
 * pricing page that sells something that does not exist.
 */
.plan.is-planned { background: var(--surface-2); }
.plan.is-planned .plan-price { color: var(--ink-2); }
.plan.is-planned::before { opacity: .45; }
/* A planned column states that it is undecided rather than listing a guess. */
.plan-tbd {
  margin: 18px 0 0;
  padding: 14px 15px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  font-size: 12.8px;
  line-height: 1.6;
  color: var(--ink-2);
}
:root[data-theme="dark"] .plan-tbd { background: var(--surface-3); }

.plan.is-planned .plan-list em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 12px;
  color: var(--ink-3);
}
.plan.is-planned .plan-list b { display: block; }
.plan.is-planned .pl-ic { color: var(--ink-3); background: var(--surface-3); }

.chip-soon {
  background: var(--surface-3);
  color: var(--ink-2);
  border: 1px solid var(--line-strong);
}

@media (max-width: 1099px) {
  .plans { grid-template-columns: minmax(0, 1fr); }
  .plan-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- summary cards as filters -------------------------------------- */

/*
 * The cards became buttons, so they need a button's manners: a pointer, a
 * focus ring, and enough lift on hover to say they can be pressed. Everything
 * about their appearance otherwise stays exactly as it was.
 */
.stat-card {
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  appearance: none;
}
.stat-card:hover:not(:disabled) { box-shadow: var(--sh-md); }
/* A group with no rows in it is a fact, not an offer. */
.stat-card:disabled { cursor: default; }
.stat-card:disabled .stat-cta { display: none; }
.stat-card:focus-visible { outline: none; box-shadow: var(--ring); }

/* The prompt is quiet until the card is worth pressing. */
.stat-cta {
  display: block;
  margin-top: 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
  opacity: 0;
  transition: opacity .14s ease, color .14s ease;
}
.stat-card:hover .stat-cta, .stat-card:focus-visible .stat-cta { opacity: 1; }

/*
 * Filtering, on a filled card.
 *
 * The ring is WHITE and sits inside the card, because the previous version
 * drew it in the card's own tone - which was legible while the cards were
 * white and is invisible now that the tone IS the card. The tone variables it
 * read no longer exist either: the four tiles were renamed to the colours
 * they wear, so those rules had quietly stopped matching anything.
 *
 * The tick that used to follow the label is gone with them. It was written as
 * an escape that did not survive being written to disk and had become a
 * literal control character, rendering as a stray glyph.
 */

@media (prefers-reduced-motion: reduce) {
  .stat-cta { transition: none; }
}

/* ---------- the results table -------------------------------------------- */

/*
 * A working surface, not a showpiece.
 *
 * The people reading this scan a hundred rows looking for the handful worth an
 * hour of their time, so the table is dense, the type is small and the only
 * colour is the one carrying a verdict. Zebra striping is deliberately absent:
 * with tinted status cells in most columns it fights the data rather than
 * helping the eye track a line.
 */
.results { margin-top: 18px; padding: 0; overflow: hidden; }

.results-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px 22px 14px;
}
.results-head h2 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.results-head p { margin: 4px 0 0; font-size: 13.2px; color: var(--ink-2); }

.results-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 260px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink-3);
}
.results-search:focus-within { border-color: var(--violet); box-shadow: var(--ring); }
.results-search svg { flex: none; }
.results-search input {
  border: 0;
  background: none;
  outline: none;
  width: 100%;
  font-size: 13px;
  color: var(--ink);
}

/* ---------- filter chips ---------- */

.results-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 22px 14px;
}

.rf {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-2);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .14s ease, color .14s ease;
}
.rf:hover { color: var(--ink); border-color: var(--line-strong); }
.rf:focus-visible { outline: none; box-shadow: var(--ring); }

/*
 * The selected chip is outlined, not filled. A row of filled pills would put
 * five saturated blocks above a table whose whole job is to make a handful of
 * tinted cells stand out.
 */
.rf.is-on {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--violet);
  box-shadow: inset 0 0 0 1px var(--violet);
}
.rf-n {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
}
.rf.is-on .rf-n { color: var(--violet-ink); }
.rf.t-teal.is-on { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); }
.rf.t-teal.is-on .rf-n { color: var(--teal-ink); }
.rf.t-warn.is-on { border-color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn); }
.rf.t-warn.is-on .rf-n { color: var(--warn); }
.rf.t-brand.is-on { border-color: var(--sky); box-shadow: inset 0 0 0 1px var(--sky); }
.rf.t-brand.is-on .rf-n { color: var(--sky-ink); }

/* ---------- the table itself ---------- */

/* Wide content scrolls in its own container. The page body never does. */
.results-scroll { overflow-x: auto; border-top: 1px solid var(--line); }

.results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.results-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  padding: 0;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.rth {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-3);
  cursor: pointer;
  white-space: nowrap;
}
.rth:hover { color: var(--ink); }
.rth:focus-visible { outline: none; box-shadow: var(--ring); }
.rth.is-on { color: var(--violet-ink); }
.rth-ar { font-size: 11px; }

.results-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: middle;
}
.results-table tbody tr:last-child td { border-bottom: 0; }
.results-table tbody tr:hover td { background: var(--surface-2); }

/*
 * The URL column is the one people read character by character, so it is
 * monospaced and allowed the most room. It truncates rather than wrapping:
 * a hundred rows of two-line URLs is not a table anybody can scan.
 */
.rc-url {
  max-width: 420px;
  min-width: 240px;
}
.rc-url a {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  font-family: var(--font-mono);
  font-size: 12.2px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}
.rc-url a:hover { color: var(--violet-ink); text-decoration: underline; }

.rc-best {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--violet-soft);
  color: var(--violet-ink);
  border: 1px solid var(--violet-line);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  vertical-align: 1px;
}

/*
 * A status cell is a tinted pill; everything else is plain text. Only the
 * cells that carry a judgement get colour, which is what lets the eye find
 * them in a wall of a hundred rows.
 */
.rc { display: inline-block; color: var(--ink-2); white-space: nowrap; }
.rc.t-good, .rc.t-warn, .rc.t-bad {
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
}
.rc.t-good { background: var(--good-soft); color: var(--good-ink); }
.rc.t-warn { background: var(--warn-soft); color: var(--warn-ink); }
.rc.t-bad { background: var(--bad-soft); color: var(--red-ink); }

/* ---------- foot, pager, empty ---------- */

.results-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 22px;
  border-top: 1px solid var(--line);
}
.results-count { margin: 0; font-size: 12.5px; color: var(--ink-2); font-family: var(--font-mono); }
.results-pager { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rp-n { font-size: 12.5px; color: var(--ink-3); font-family: var(--font-mono); }

.results-empty { padding: 34px 22px; text-align: center; }
.results-empty p { margin: 0 0 12px; color: var(--ink-2); }

.results-note {
  margin: 0;
  padding: 0 22px 20px;
  font-size: 12.4px;
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 88ch;
}

@media (max-width: 899px) {
  .results-head, .results-filters, .results-foot, .results-note { padding-left: 16px; padding-right: 16px; }
  .results-search { min-width: 0; width: 100%; }
  .rc-url { min-width: 200px; }
}

.crumb {
  margin: 0 0 6px;
  font-size: 10.5px;
  font-weight: 720;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--brand-ink);
}
.rep-head h1 { font-size: 27px; font-weight: 770; letter-spacing: -.034em; }

/* ---------- prospect checker --------------------------------------------- */
.src-tabs { padding: 4px; border-radius: 12px; background: var(--surface-2); border-color: var(--line); }

.src-tab {
  font-size: 13.5px;
  font-weight: 620;
  color: var(--ink-3);
  padding: 8px 16px;
  border-radius: 9px;
}
.src-tab:hover { color: var(--ink); }

.src-tab.is-on {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
  border: 1px solid var(--line);
}
:root[data-theme="dark"] .src-tab.is-on { background: var(--surface-3); border-color: var(--line-strong); }

.dropzone {
  min-height: 236px;
  border-radius: 15px;
  background: var(--surface-2);
  border: 1.5px dashed var(--line-strong);
}
.dropzone:hover, .dropzone.is-over { background: var(--violet-soft); border-color: var(--violet); }

.dropzone-ic {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 19px;
  background: var(--surface);
  color: var(--violet);
  border: 1px solid var(--line);
  box-shadow: var(--sh);
}
.dropzone:hover .dropzone-ic, .dropzone.is-over .dropzone-ic { border-color: var(--violet-line); }
.dropzone-1 { font-size: 16.5px; font-weight: 680; letter-spacing: -.02em; }
.dropzone-2 { font-size: 13.2px; color: var(--ink-2); }
.dropzone-2 b { color: var(--violet-ink); }

/*
 * Choosing a mode is a selection, not an action, so it wears the identity
 * colour. Orange here put two things that looked like buttons on one card and
 * left the reader guessing which one actually starts the scan.
 */
/* the two analysis modes read as real choices */
.mode2 {
  background: var(--surface-2);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px 16px 46px;
}
.mode2:hover { border-color: var(--line-strong); }

.mode2.is-on {
  border-color: var(--violet);
  background: var(--violet-soft);
  box-shadow: 0 0 0 1px var(--violet) inset;
}
.mode2-dot { top: 18px; background: var(--surface); }
.mode2.is-on .mode2-dot { border-color: var(--violet); box-shadow: inset 0 0 0 3.5px var(--violet); }
.mode2-t { font-size: 15px; font-weight: 680; letter-spacing: -.018em; }
.mode2-d { font-size: 13px; color: var(--ink-2); margin-top: 5px; }
.cz-opt { background: var(--surface-2); border-color: var(--line); border-radius: 11px; }
.cz-opt:has(input:checked) { border-color: var(--violet); background: var(--violet-soft); box-shadow: none; }
.cz-opt:has(input:checked) .cz-box { background: var(--violet); border-color: var(--violet); }

/* At the optional-field limit the remaining boxes stop being offers. */
.cz-opt.is-disabled { opacity: .45; cursor: not-allowed; }
.cz-opt.is-disabled .cz-opt-t, .cz-opt.is-disabled .cz-opt-d { color: var(--ink-3); }

.cost-line {
  border-radius: 12px;
  padding: 13px 16px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
}
.cost-n { font-size: 19px; font-weight: 760; color: var(--brand-ink); }
.readybar { border-radius: 12px; padding: 13px 16px; }
.readybar-n { font-size: 21px; font-weight: 780; }

/* the right rail */
.rail { gap: 16px; }
.steps-flow { gap: 17px; }
.steps-flow li { grid-template-columns: 30px 1fr; gap: 13px; position: relative; font-size: 13px; }

.steps-flow li::before {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 760;
  align-self: start;
  border-width: 1px;
}

.steps-flow li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 14.5px;
  top: 32px;
  bottom: -17px;
  width: 1px;
  background: var(--line);
}
.steps-flow li:nth-child(1)::before { background: var(--brand-soft); color: var(--brand-ink); border-color: var(--brand-line); }

.steps-flow li:nth-child(2)::before {
  background: var(--sky-soft);
  color: var(--sky-ink);
  border-color: color-mix(in srgb, var(--sky) 28%, transparent);
}

.steps-flow li:nth-child(3)::before {
  background: var(--teal-soft);
  color: var(--teal-ink);
  border-color: color-mix(in srgb, var(--teal) 28%, transparent);
}
.steps-flow b { font-size: 13.6px; font-weight: 670; margin-bottom: 3px; }
.steps-flow span { color: var(--ink-2); line-height: 1.55; }

/* ---------- scan progress ------------------------------------------------- */
.scan-panel {
  text-align: left;
  padding: 28px 30px 26px;
  margin-top: 26px;
  position: relative;
  overflow: hidden;
  border-radius: 18px;
}

.scan-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--brand-line);
}
.scan-title { font-size: 21px; font-weight: 730; letter-spacing: -.028em; }
.scan-name { font-size: 13px; color: var(--ink-3); }

.scan-pct {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -.04em;
  background: none;
  -webkit-text-fill-color: var(--violet-ink);
  color: var(--violet-ink);
}
.scan-pct small { font-size: 17px; font-weight: 660; -webkit-text-fill-color: var(--ink-3); }
.scan-live { width: 10px; height: 10px; background: var(--line-strong); }
.scan-panel.is-running .scan-live { background: var(--teal); animation: scanpulse 1.9s ease-out infinite; }
.scan-panel.is-stopped .scan-live { background: var(--warn); }
.counter { margin-top: 24px; font-size: 14.5px; color: var(--ink-2); }
.counter #counterN { font-size: 33px; font-weight: 790; color: var(--ink); letter-spacing: -.038em; }

.bar {
  height: 12px;
  margin: 16px 0 2px;
  border-radius: 99px;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  overflow: hidden;
}

.bar-fill {
  background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 55%, var(--violet)));
}
.live { grid-template-columns: repeat(auto-fit, minmax(214px, 1fr)); gap: 10px; margin-top: 20px; }

.live-row {
  grid-template-columns: 30px auto 1fr;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
}
.live-ic { width: 30px; height: 30px; border-radius: 9px; }
.live-row b { font-size: 21px; font-weight: 780; }
.live-row span { font-size: 12.8px; color: var(--ink-2); }

/* ---------- account, pricing, help --------------------------------------- */
.acct2-av, .acct2-who-av, .prof-av { background: var(--brand); color: var(--on-accent); }
.acct2-btn:hover { background: var(--surface-2); border-color: var(--line); }
.acct2-credits { background: var(--surface-2); border-color: var(--line); border-radius: 11px; }
.acct2-credits:hover { border-color: var(--line-strong); }
.ac-n { color: var(--brand-ink); font-size: 19px; font-weight: 780; }
.ac-l { color: var(--ink-2); }
.prof { background: var(--surface-2); }
.prof-n { font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.seg2 { background: var(--surface-2); border-color: var(--line); border-radius: 11px; }
.seg2-btn.is-on { background: var(--violet); color: var(--on-violet); }
.switch input:checked + span { background: var(--violet); }
.plan { border-radius: 18px; box-shadow: var(--sh-md); }
.plan::before { background: var(--line); }
.plan.is-current::before { background: var(--violet); }
.plan-name { color: var(--violet-ink); font-size: 11.5px; letter-spacing: .13em; }
.plan-price { font-size: 42px; font-weight: 800; letter-spacing: -.04em; }
/* Three columns are narrower than the single card this page used to be, so the
   price and its unit share a line rather than the unit wrapping under it. */
.plans .plan-price { font-size: 34px; white-space: nowrap; }
.plans .plan-price span { white-space: nowrap; }
.plans .plan-head { align-items: flex-start; gap: 10px; }
.plans .plan-sub { font-size: 12.8px; line-height: 1.5; }
.plans .plan-list li { font-size: 13px; }

.plan-foot { background: var(--surface-2); }
.pl-ic { background: var(--teal-soft); color: var(--teal-ink); }
.soonbox { border-left-color: var(--brand); background: var(--surface-2); border-radius: 14px; }
.soonbox-ic { background: var(--brand-soft); color: var(--brand-ink); }

.guide li::before {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 760;
}
.guide li:not(:last-child)::after { left: 14.5px; top: 33px; bottom: -18px; background: var(--line); }
.guide li { grid-template-columns: 30px 1fr; }
.guide li:nth-child(1)::before { background: var(--brand-soft); color: var(--brand-ink); border-color: var(--brand-line); }

.guide li:nth-child(2)::before {
  background: var(--sky-soft);
  color: var(--sky-ink);
  border-color: color-mix(in srgb, var(--sky) 28%, transparent);
}

.guide li:nth-child(3)::before {
  background: var(--teal-soft);
  color: var(--teal-ink);
  border-color: color-mix(in srgb, var(--teal) 28%, transparent);
}

.guide li:nth-child(4)::before {
  background: var(--purple-soft);
  color: var(--purple-ink);
  border-color: color-mix(in srgb, var(--purple) 28%, transparent);
}

.guide li:nth-child(5)::before {
  background: var(--warn-soft);
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 30%, transparent);
}
.guide b { font-size: 14.5px; font-weight: 680; }
.term-dot.t-teal { background: var(--teal); }
.term-dot.t-brand { background: var(--sky); }
.term-dot.t-warn { background: var(--warn); }
.empty { border-radius: 18px; }

.empty-ic {
  width: 54px;
  height: 54px;
  border-radius: 17px;
  background: var(--brand-soft);
  color: var(--brand-ink);
  border-color: var(--brand-line);
}
.empty h2 { font-size: 19px; font-weight: 720; letter-spacing: -.025em; }
.row-t { font-size: 14px; font-weight: 640; }
.row-d { font-size: 12.8px; line-height: 1.55; }

/* ---------- dashboard ----------------------------------------------------- */
.card-tool.is-hero { position: relative; overflow: hidden; border-radius: 18px; box-shadow: var(--sh-md); }

.card-tool.is-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--brand-line);
}
.card-credits { position: relative; overflow: hidden; border-radius: 18px; }

.card-credits .card-pad {
  background: linear-gradient(160deg, color-mix(in srgb, var(--brand) 9%, transparent), transparent 64%);
}

.credit-n {
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -.042em;
  background: none;
  -webkit-text-fill-color: var(--brand-ink);
  color: var(--brand-ink);
}
.credit-bar { height: 8px; background: var(--surface-2); }
.credit-fill { background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 55%, var(--violet))); }

.next-ic {
  background: var(--purple-soft);
  color: var(--purple-ink);
  border-color: color-mix(in srgb, var(--purple) 26%, transparent);
}

/* ---------- sign in ------------------------------------------------------- */
.signin-card { border-radius: 20px; max-width: 468px; }
.signin-card::before { background: var(--brand); }
.signin-h { font-size: 24px; font-weight: 770; letter-spacing: -.032em; }
.signin-lead { font-size: 14.2px; }
.signin-card .gbtn { border-radius: 12px; min-height: 52px; font-size: 15.5px; }
.sp-ic { background: var(--teal-soft); color: var(--teal-ink); }
.modal-card { border-radius: 18px; }

/* ---------- menus and popovers ------------------------------------------- */
.acct2-pop, .menu-pop { border-radius: 14px; background: var(--surface-3); }
.acct2-item { border-radius: 9px; font-size: 13.4px; }
.acct2-item svg { flex: none; opacity: .7; }
.acct2-item:hover svg { opacity: 1; }
.acct2-sep { height: 1px; background: var(--line-2); margin: 6px 6px; }

/* ---------- focus --------------------------------------------------------- */
.btn:focus-visible, .sb-item:focus-visible, .acct2-item:focus-visible, .acct2-btn:focus-visible, .src-tab:focus-visible, .mode2:focus-within, .cz-opt:focus-within, .sb-quota:focus-visible, .acct2-credits:focus-visible, .gbtn:focus-visible, .seg2-btn:focus-visible { outline: none; box-shadow: var(--ring); }
:focus-visible { outline-color: var(--brand); }
/* ---------- responsive ---------------------------------------------------- */
@media (max-width: 1199px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1080px) {
  .grid-dash { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .btn, .sb-item, .acct2-item, .src-tab, .seg2-btn, .acct2-credits { min-height: 44px; }
  .tb { padding: 0 16px; }
  .page { padding: 20px 18px 48px; }
}

@media (max-width: 599px) {
  .page { padding: 16px 14px 44px; }
  .page-head h1 { font-size: 23px; }
  #dashHi { font-size: 24px; }
  .rep-head h1 { font-size: 23px; }
  .cards, .live, .plan-list { grid-template-columns: 1fr; }
  .cards .stat-card .card-v { font-size: 32px; }
  .scan-panel { padding: 22px 18px 20px; }
  .scan-pct { font-size: 30px; }
  .counter #counterN { font-size: 28px; }
  .credit-n { font-size: 38px; }
  .plan-price { font-size: 34px; }
  .takeaway-actions { flex-direction: column; align-items: stretch; }
  .takeaway-actions .menu, .takeaway-actions .btn { width: 100%; }
  .rep-actions, .rep-actions .btn { width: 100%; }
  .card-head { padding: 14px 16px; }
  .card-pad { padding: 16px; }
  .row { padding: 14px 16px; flex-wrap: wrap; }
}


/* ---------- accent discipline: orange marks ACTIONS, not every figure ----- */
/*
 * First pass put the accent on the selected pill, the CTA, the progress fill,
 * the step marker AND both credit figures, which meant a single screen carried
 * six orange things and the eye had nowhere to land. Large bold figures do not
 * need colour to read as important - size already does that - so they go back
 * to ink and the accent is left marking what you can act on.
 */
.credit-n, .sb-quota-n { background: none; color: var(--ink); -webkit-text-fill-color: var(--ink); }
.sb-quota.is-low .sb-quota-n, .sb-quota.is-out .sb-quota-n { color: var(--warn); -webkit-text-fill-color: var(--warn); }
.ac-n { color: var(--ink); }

/* ============================================================================
   Phase 7.1 - light in the dark, a smoother face, foldable sections
   ==========================================================================*/
/* ---------- type: smoother, and bigger ----------------------------------- */
/*
 * Plus Jakarta Sans. Inter is a fine grid font but it is a mechanical one, and
 * what this needed was warmth: rounder bowls, softer terminals, a face that
 * reads as designed rather than as a default. Inter stays underneath it as the
 * fallback, so nothing shifts if the first family is slow.
 *
 * Everything also went UP a step. 14.5px body and 27px headings were sized for
 * a denser tool than this one; a link builder scanning a page of results should
 * not have to lean in.
 */
body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.62;
  letter-spacing: -.003em;
  font-feature-settings: normal;
}
.page-head h1 { font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
.page-head p { font-size: 14.8px; line-height: 1.62; max-width: 74ch; }
#dashHi { font-size: 33px; }
.rep-head h1 { font-size: 30px; font-weight: 800; }
.card-head h2 { font-size: 16.5px; font-weight: 700; letter-spacing: -.018em; }
.card-head p { font-size: 13.6px; line-height: 1.55; color: var(--ink-2); }
.sb-item { font-size: 14.4px; font-weight: 550; }
.sb-item.is-on { font-weight: 700; }
.btn { font-size: 14.6px; font-weight: 650; }
.btn-lg { font-size: 16px; }
.mode2-t { font-size: 16px; font-weight: 700; }
.mode2-d { font-size: 13.8px; line-height: 1.6; }
.dropzone-1 { font-size: 17.5px; font-weight: 700; }
.dropzone-2 { font-size: 13.8px; }
.steps-flow b { font-size: 14.4px; font-weight: 700; }
.steps-flow span { font-size: 13.6px; line-height: 1.6; }
.row-t { font-size: 14.6px; font-weight: 660; }
.row-d { font-size: 13.4px; line-height: 1.6; }
.guide b { font-size: 15px; }
.guide span { font-size: 13.8px; line-height: 1.65; }
.cz-chip { font-size: 12.6px; font-weight: 650; }
.chip { font-size: 12px; }
.muted { font-size: 13.4px; }
.cards .stat-card .card-l { font-size: 12px; letter-spacing: .06em; }
.cards .stat-card .card-d { font-size: 13.2px; line-height: 1.55; }
.takeaway-head h2 { font-size: 21px; font-weight: 780; }
.verdictbar p { font-size: 17px; font-weight: 680; }
/* ---------- the display face --------------------------------------------- */

/*
 * Sora, and only where a heading is doing a heading's job.
 *
 * It is a tighter, more geometric face than the body text, which is exactly
 * what gives a page title authority at 30px and exactly what makes it feel
 * cramped and shouty at 13px. So it takes the titles, the one number on a
 * screen that matters, and nothing else. Sub-headings inside a card stay on
 * the body face, because they are read as sentences.
 */
.page-head h1,
.rep-head h1,
#dashHi,
.card-head h2,
.takeaway-head h2,
.plan-price,
.scan-pct,
.credit-n,
.sb-quota-n,
.counter,
.cards .stat-card .card-v,
.ac-n,
.stat-v {
  font-family: var(--font-display);
  /* Opened up from -.03em: tight tracking on a geometric face is what turned
     "Turn" into "Tum", and the letterform fix alone would not have held. */
  letter-spacing: -.015em;
}

/* The display face carries no 550/650 weights, so the in-between values used
   by the body face round DOWN in it and a title lands lighter than intended. */
.page-head h1, .rep-head h1, #dashHi { font-weight: 800; }
.card-head h2, .takeaway-head h2 { font-weight: 700; letter-spacing: -.02em; }
.cards .stat-card .card-v, .credit-n, .sb-quota-n, .counter, .scan-pct, .ac-n, .plan-price { font-weight: 800; }

/* ---------- the data face ------------------------------------------------- */

/*
 * A value that came out of a machine is set in mono, and a sentence never is.
 *
 * The point is not decoration. Tabular figures put a column of scores into a
 * straight line, and a monospaced URL can be scanned character by character,
 * which is the whole job on a report screen. Anything a person reads as prose
 * stays on the body face.
 */
.cost-n,
.readybar-n,
.sb-quota-note,
.credit-note,
.cz-chip,
.tc-chip,
.mode2-t .chip,
.attrib-line {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
}
.cz-chip, .tc-chip { font-size: 11.8px; font-weight: 500; letter-spacing: 0; }
.sb-quota-note, .credit-note { font-size: 11px; letter-spacing: -.01em; }

/* ---------- the ground: light in it -------------------------------------- */
/*
 * The previous wash was seven percent of a colour on a near-black ground,
 * which is to say invisible. This is a real gradient: a warm pool up in the
 * top right, a cool one behind the sidebar, and a lift across the top of the
 * whole page so the field has direction. Fixed, non-interactive, and still
 * subtle enough that nothing sits on a colour it has to fight.
 */
body::before {
  background: radial-gradient(78% 62% at 82% -12%, var(--amb-1), transparent 62%),
    radial-gradient(62% 52% at 2% 6%, var(--amb-2), transparent 58%),
    var(--amb-top, transparent);
}

/* Chrome stays translucent so the wash reads through it rather than stopping
   at the sidebar edge, which is what makes the whole field feel like one page. */
:root[data-theme="dark"] .sb { background: color-mix(in srgb, var(--bg-2) 86%, transparent); }
:root[data-theme="dark"] .tb { background: color-mix(in srgb, var(--bg-2) 76%, transparent); }
:root[data-theme="dark"] .card, :root[data-theme="dark"] .panel { background: color-mix(in srgb, var(--surface) 94%, transparent); }

/* ---------- collapsible sections ----------------------------------------- */
.sb-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 7px 12px;
  margin-bottom: 2px;
  border-radius: 9px;
  transition: color .14s ease, background .14s ease;
}
.sb-label:hover { color: var(--ink-2); background: var(--surface-2); }
.sb-label:focus-visible { outline: none; box-shadow: var(--ring); }
.sb-caret { flex: none; opacity: .7; transition: transform .22s ease; }
.sb-group.is-closed .sb-caret { transform: rotate(-90deg); }

.sb-items {
  overflow: hidden;
  max-height: 320px;
  opacity: 1;
  transition: max-height .24s ease, opacity .18s ease;
}
.sb-group.is-closed .sb-items { max-height: 0; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .sb-items, .sb-caret { transition: none; }
}


/* ---------- fewer colours, used harder ----------------------------------- */
/*
 * The palette had orange, blue, emerald, amber, purple, magenta and red in
 * play at once, which is six too many for a working tool. Purple and magenta
 * are out of the interface entirely. What is left says one thing each:
 * orange acts, blue informs, emerald confirms, amber warns, red failed.
 */
.cz-chip.t-brand {
  background: var(--sky-soft);
  color: var(--sky-ink);
  border-color: color-mix(in srgb, var(--sky) 26%, transparent);
}
.cz-chip.t-sky { background: var(--surface-2); color: var(--ink-2); border-color: var(--line); }
.term-dot.t-brand { background: var(--sky); }

.next-ic {
  background: var(--sky-soft);
  color: var(--sky-ink);
  border-color: color-mix(in srgb, var(--sky) 26%, transparent);
}
.soonbox { border-left-color: var(--sky); }
.soonbox-ic { background: var(--sky-soft); color: var(--sky-ink); }
.chip-purple { background: var(--sky-soft); color: var(--sky-ink); border-color: transparent; }
.guide li:nth-child(4)::before { background: var(--surface-2); color: var(--ink-2); border-color: var(--line); }

.guide li:nth-child(5)::before {
  background: var(--warn-soft);
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 30%, transparent);
}

.head-ic.t-purple {
  background: var(--sky-soft);
  color: var(--sky-ink);
  border-color: color-mix(in srgb, var(--sky) 24%, transparent);
}

/* ---------- selected: warm, lifted, not shouting -------------------------- */

.btn-primary {
  background: var(--violet);
  color: var(--on-violet);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 8px 20px color-mix(in srgb, var(--violet) 34%, transparent);
}

/* ---------- readability pass --------------------------------------------- */
/* Body copy in dark mode moves up a step: on the lifted navy there is room for
   it, and quiet text should be quiet rather than half gone. */
:root[data-theme="dark"] .card-head p, :root[data-theme="dark"] .row-d, :root[data-theme="dark"] .steps-flow span, :root[data-theme="dark"] .mode2-d, :root[data-theme="dark"] .guide span, :root[data-theme="dark"] .cards .stat-card .card-d { color: var(--ink-2); }

/* ============================================================================
   Phase 7.2 - visibility, neutral chips, a natural selected card, a rail
   ==========================================================================*/
/* ---------- field chips: typographic, not colour-coded -------------------- */
/*
 * These five are a LIST OF COLUMN NAMES. They are not statuses, nothing about
 * them is good or bad, and tinting them four different ways made a static
 * caption look like live results. One quiet treatment, and the words do the
 * work - which is what they were always doing anyway.
 */
.cz-chip, .cz-chip.t-teal, .cz-chip.t-brand, .cz-chip.t-sky, .cz-chip.t-warn, .tc-chip {
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid var(--line);
  font-weight: 600;
}
:root[data-theme="dark"] .cz-chip, :root[data-theme="dark"] .tc-chip { background: var(--surface-3); border-color: var(--line-strong); }

/* ---------- sidebar visibility ------------------------------------------- */
/*
 * The rail was the dimmest column on screen: section labels and icons both sat
 * on --ink-3, which is a caption weight, on a surface that had just been made
 * translucent. Labels and icons move up to --ink-2 and the chrome goes back to
 * near-opaque, so the wash still reads through it without costing legibility.
 */
.sb-label { color: var(--ink-2); font-weight: 750; }
.sb-label:hover { color: var(--ink); }
.sb-item { color: var(--ink-2); }
.sb-item svg { color: var(--ink-2); }
.sb-item:hover svg, .sb-item:hover { color: var(--ink); }
:root[data-theme="dark"] .sb-item svg { color: var(--ink-2); }
:root[data-theme="dark"] .sb { background: color-mix(in srgb, var(--bg-2) 95%, transparent); }
:root[data-theme="dark"] .tb { background: color-mix(in srgb, var(--bg-2) 88%, transparent); }
:root[data-theme="dark"] .card, :root[data-theme="dark"] .panel { background: color-mix(in srgb, var(--surface) 97%, transparent); }
.tb-title { color: var(--ink-2); }

body::before {
  background: radial-gradient(62% 48% at 88% -6%, var(--amb-1), transparent 60%),
    radial-gradient(46% 40% at -4% 10%, var(--amb-2), transparent 58%),
    radial-gradient(54% 44% at 72% 108%, var(--amb-3), transparent 62%),
    var(--amb-top, transparent);
}

/* ---------- the selected mode card: elevation, not a brown wash ---------- */
/*
 * `--brand-soft` on navy is a muddy amber-brown, and filling a whole card with
 * it made the recommended option look stained rather than chosen. Selection is
 * carried the way it should be: the card lifts to the next surface, takes an
 * accent border and a quiet accent glow, and the radio does the rest.
 */
.mode2.is-on {
  background: var(--surface-2);
  border-color: var(--violet);
  box-shadow: inset 0 0 0 1px var(--violet),
              0 3px 16px color-mix(in srgb, var(--violet) 16%, transparent);
}
:root[data-theme="dark"] .mode2.is-on { background: var(--surface-3); }
.cz-opt:has(input:checked) { background: var(--surface-2); border-color: var(--violet); box-shadow: none; }
:root[data-theme="dark"] .cz-opt:has(input:checked) { background: var(--surface-3); }
.dropzone:hover, .dropzone.is-over { background: var(--surface-2); border-color: var(--violet); }

.cost-line {
  background: var(--surface-2);
  border-color: var(--line);
  border-left: 3px solid var(--brand);
}
.cost-n { color: var(--ink); }

/* ---------- centred content, before and after collapse ------------------- */
.page { margin-inline: auto; }

/* ---------- the icon rail ------------------------------------------------ */
/*
 * The collapse control, sitting astride the sidebar's right border.
 *
 * `.sb` is sticky, so it is already a containing block for an absolutely
 * positioned child; half the button hangs over the edge into the page, which
 * is what makes it read as a handle on that edge rather than as a button that
 * happens to be nearby.
 */
.sb-mini {
  position: absolute;
  top: 22px;
  right: -13px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-3);
  border-radius: 999px;
  width: 26px;
  height: 26px;
  padding: 0;
  cursor: pointer;
  box-shadow: var(--sh-sm);
  transition: color .14s ease, border-color .14s ease, background .14s ease;
}
.sb-mini:hover { color: var(--on-violet); background: var(--violet); border-color: var(--violet); }
.sb-mini:focus-visible { outline: none; box-shadow: var(--ring); }
.app { transition: grid-template-columns .22s ease; }
.app.nav-mini { --sidebar-w: 78px; }

/*
 * Labels collapse by zeroing the type rather than by wrapping every one of
 * eight nav strings in a span. The icons carry explicit dimensions so they are
 * untouched, and the text stays in the accessibility tree either way.
 */
.app.nav-mini .sb-item { justify-content: center; gap: 0; font-size: 0; padding: 11px 0; }
.app.nav-mini .sb-item svg { font-size: 0; }
.app.nav-mini .sb-label { display: none; }
.app.nav-mini .sb-items { max-height: none; opacity: 1; }
.app.nav-mini .sb-group.is-closed .sb-items { max-height: none; opacity: 1; }
.app.nav-mini .sb { padding-left: 10px; padding-right: 10px; }
.app.nav-mini .sb-brand { justify-content: center; padding-left: 0; padding-right: 0; }

/* Crop the wordmark to its mark rather than shrinking the whole lockup to a smudge. */
.app.nav-mini .sb-logo { width: 38px; height: 34px; object-fit: cover; object-position: left center; }
.app.nav-mini .sb-quota { padding: 10px 6px; text-align: center; }
.app.nav-mini .sb-quota-l, .app.nav-mini .sb-quota-note, .app.nav-mini .sb-quota-bar { display: none; }
.app.nav-mini .sb-quota-top { justify-content: center; }
.app.nav-mini .sb-quota-n { font-size: 17px; }
.app.nav-mini .sb-group { margin-bottom: 10px; }
.app.nav-mini .sb-group-foot { padding-top: 10px; }
@media (prefers-reduced-motion: reduce) {
  .app { transition: none; }
}

/* The drawer already is a collapse; a rail inside it is two ideas fighting. */
@media (max-width: 900px) {
  .sb-mini { display: none; }
  .app.nav-mini { --sidebar-w: 256px; }
  .app.nav-mini .sb-item { justify-content: flex-start; gap: 12px; font-size: 14.4px; padding: 10px 12px; }
  .app.nav-mini .sb-label { display: flex; }
  .app.nav-mini .sb-logo { width: 158px; height: auto; object-fit: fill; }
  .app.nav-mini .sb-quota-l, .app.nav-mini .sb-quota-note, .app.nav-mini .sb-quota-bar { display: block; }
}


/*
 * Zeroing the parent's type does not reach a badge that sets its own size, and
 * the label is now its own element rather than a bare text node, so both are
 * hidden by name.
 */
.app.nav-mini .sb-soon, .app.nav-mini .sb-item-t { display: none; }

/*
 * Crop tight to the mark, at the width the logo file actually divides at.
 *
 * `cover` scales to the box height and shows the leftmost slice, so the box
 * width decides how much of the image survives. 30x30 exposed image x 0-724 -
 * and the wordmark starts at 537, which is why the rail kept showing the mark
 * followed by a sliced "W". Measured from the file: the mark runs x 98-515 of
 * 2172, the next ink begins at 537, so 526 falls in the gap. Height sets the
 * scale, so the box must be 526/724 = 0.727 of its own height to expose
 * exactly that much and no more.
 */
.app.nav-mini .sb-logo { width: 22px; height: 30px; object-position: 0 center; }
@media (max-width: 900px) {
  .app.nav-mini .sb-soon, .app.nav-mini .sb-item-t { display: inline-flex; }

  /*
   * ...and the crop must not follow the rail into the drawer.
   *
   * The 22px crop above sits outside any media query and after the earlier
   * restore, so a visitor who had collapsed the rail on a desktop got a 22px
   * sliver of the mark at the top of the drawer on their phone. The drawer is
   * 268px wide and shows the full lockup, like it does when the rail is open.
   */
  .app.nav-mini .sb-logo {
    width: 150px; height: auto; object-fit: fill; object-position: left center;
  }
  .app.nav-mini .sb-brand { justify-content: flex-start; padding-left: 6px; padding-right: 6px; }
}


/* ============================================================================
   Phase 7.3 - the last ten percent
   ==========================================================================*/
/*
 * The track carries two things: a measured fill for pages checked, and an
 * indeterminate tail for the part that cannot be measured. The tail only ever
 * appears while the server is genuinely still working, so a moving bar always
 * means something is happening.
 */
.bar { position: relative; }

.bar-tail {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 10%;
  overflow: hidden;
  border-radius: 0 99px 99px 0;
  background: color-mix(in srgb, var(--brand) 16%, transparent);
}
.scan-panel.is-finalising .bar-tail { display: block; }

.bar-tail::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 60%;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  animation: bartail 1.15s ease-in-out infinite;
}
@keyframes bartail {
  from { transform: translateX(-110%); }
  to   { transform: translateX(280%); }
}


/* "Finishing" replaces the figure, so it needs the label's size, not the
   figure's. A 38px word in the numeral slot would wrap the header. */
.scan-pct.is-word {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  -webkit-text-fill-color: var(--brand);
  color: var(--brand);
}
.scan-panel.is-finalising .scan-live { background: var(--brand); animation: scanpulse 1.4s ease-out infinite; }
.scan-panel.is-complete .scan-live { background: var(--teal); animation: none; }
.scan-panel.is-complete .bar-fill { transition: width .45s cubic-bezier(.25, .8, .3, 1); }
@media (prefers-reduced-motion: reduce) {
  .bar-tail::after { animation: none; opacity: .6; }
}


/* ---------- a scan you walked away from ---------------------------------- */
.tb-scan {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  padding: 7px 13px;
  border-radius: 999px;
  margin-left: 14px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  color: var(--brand-ink);
  font-size: 12.8px;
  font-weight: 650;
  white-space: nowrap;
  flex: none;
}
.tb-scan:hover { border-color: var(--brand); }

.tb-scan-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--brand);
  animation: scanpulse 1.9s ease-out infinite;
}
@media (max-width: 720px) {
  .tb-scan-txt { display: none; } .tb-scan { padding: 7px 9px; }
}


/* ---------- the export menu must not be clipped by its own card ---------- */
/*
 * `.takeaway` carried `overflow: hidden` so the accent rule along its top
 * followed the card's rounded corners. The export dropdown lives inside that
 * card, so the same rule clipped the menu the moment it opened - half of it
 * cut off against the card edge.
 *
 * The rule gets its own matching radius instead, which is what the overflow
 * was standing in for, and the card stops clipping its own children.
 */
.takeaway { overflow: visible; }
.takeaway::before { border-radius: 16px 16px 0 0; }

/* The menu sits above neighbouring cards rather than under them. */
.menu { position: relative; z-index: 5; }
.menu-pop { z-index: 60; }

/* The pill in its finished state: a destination, not something in progress. */
.tb-scan.is-done { background: var(--surface-2); border-color: var(--line-strong); color: var(--ink-2); }
.tb-scan.is-done:hover { border-color: var(--ink-3); color: var(--ink); }
.tb-scan.is-done .tb-scan-dot { background: var(--teal); animation: none; }

/*
 * The export menu opens from the LEFT edge of its button.
 *
 * It was right-aligned, which is correct for a control sitting at the right of
 * a card - but Export is the leftmost thing in this row, so the menu hung out
 * past the card and over the sidebar. Aligning it to the button it belongs to
 * keeps it inside the card it was opened from.
 */
.takeaway-actions .menu-pop { left: 0; right: auto; }

/* --- Detailed Check: horizontal categories --------------------------------
 *
 * Four columns of checkboxes side by side was ragged (6, 5, 3 and 7 boxes) and
 * put all twenty-one on screen at once, which is the overwhelm the grouping
 * was meant to remove. A tab strip shows one category at a time - three to
 * seven boxes - and each tab carries its own count so nothing ticked can hide
 * behind a tab nobody is looking at.
 *
 * The violet is doing structural work here: it marks "the product is
 * organising something for you", which is the same job it does on progress and
 * on the hero stat. The orange stays reserved for things you press.
 */
.cz-tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 14px;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow-x: auto;
  scrollbar-width: none;
}
.cz-tabs::-webkit-scrollbar { display: none; }

.cz-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 1 1 auto;
  justify-content: center;
  white-space: nowrap;
  padding: 9px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.cz-tab:hover { color: var(--ink); background: color-mix(in srgb, var(--surface) 70%, transparent); }

.cz-tab.is-on {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--violet-line);
  box-shadow: 0 1px 2px rgba(18, 20, 28, .06);
}
.cz-tab:focus-visible { outline: none; box-shadow: var(--ring); }

/* The count is the only thing that has to survive a glance at a closed tab. */
.cz-tab-n {
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: inline-grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: var(--violet);
  border-radius: 999px;
}
:root[data-theme="dark"] .cz-tab-n { color: #1a1230; }
.cz-panel-d { margin: 0 0 12px; font-size: 12.6px; line-height: 1.55; color: var(--ink-3); }

.cz-panel-grid {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  align-items: stretch;
}
@media (max-width: 640px) {
  .cz-tab { flex: 0 0 auto; }
  .cz-panel-grid { grid-template-columns: 1fr; }
}


/*
 * Which rows the export buttons will take.
 *
 * The report table filters on the client; the exports send what the table is
 * showing. This line says which of the two cases is in force, because a
 * download outlives the screen that produced it and "eight of a hundred" is not
 * a thing anybody can tell from the file.
 */
.export-scope {
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-3);
}
.export-scope.is-filtered {
  color: var(--warn-ink);
  font-weight: 500;
}


/* Product design system: neutral surfaces; purple actions; orange activity.
   Keep these shared palette values aligned with the other WebDiagnosis surface. */
:root {
  --bg: #f5f6f8; --bg-2: #ffffff; --surface: #ffffff; --surface-2: #f5f6f8; --surface-3: #ffffff;
  --band-plain: #ffffff; --band-ground: #f5f6f8; --band-tint: #f8f7f5;
  --ink: #20242c; --ink-2: #525c69; --ink-3: #606a76;
  --line: #dfe3e8; --line-2: #edf0f3; --line-strong: #bec5ce;
  --brand: #e66b27; --brand-ink: #a74714; --brand-soft: #fff2e9; --brand-line: #edc3a9;
  --violet: #5936a2; --violet-ink: #513090; --violet-soft: #f2eef9; --violet-line: #d5c7ec; --on-violet: #ffffff;
  --r: 12px; --r-sm: 8px; --r-lg: 16px;
  --sh-sm: 0 1px 2px rgb(20 28 40 / 4%); --sh: 0 2px 6px rgb(20 28 40 / 4%);
  --sh-md: 0 4px 14px rgb(20 28 40 / 5%); --sh-lg: 0 16px 40px -16px rgb(20 28 40 / 20%);
}
:root[data-theme="dark"] {
  --bg: #14171c; --bg-2: #1a1e25; --surface: #1e232b; --surface-2: #252b34; --surface-3: #2c333e;
  --band-plain: #1a1e25; --band-ground: #14171c; --band-tint: #1e232b;
  --ink: #f0f2f5; --ink-2: #c0c7d2; --ink-3: #acb5c3;
  --line: #363e4a; --line-2: #303742; --line-strong: #586374;
  --brand: #f58d50; --brand-ink: #ffb889; --brand-soft: #39291f; --brand-line: #745039;
  --violet: #b9a0f1; --violet-ink: #d0bef6; --violet-soft: #30283f; --violet-line: #665082; --on-violet: #201332;
  --sh-sm: 0 1px 2px rgb(0 0 0 / 10%); --sh: 0 2px 6px rgb(0 0 0 / 12%);
  --sh-md: 0 4px 14px rgb(0 0 0 / 14%); --sh-lg: 0 16px 40px -16px rgb(0 0 0 / 40%);
}

/* Workspace surfaces follow the marketing system without changing workflow. */
body::before, .hero-card::before, .hero-card::after { content: none; }
.sb, .tb, :root[data-theme="dark"] .sb, :root[data-theme="dark"] .tb { background: var(--bg-2); backdrop-filter: none; }
.card, .panel, :root[data-theme="dark"] .card, :root[data-theme="dark"] .panel { background: var(--surface); border-radius: 12px; box-shadow: var(--sh-sm); }
.btn { border-radius: 8px; box-shadow: none; min-height: 40px; }
.btn:hover { transform: none; }
.hero-card { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 12px; box-shadow: none; padding: 32px; }
.hero-title { font-size: clamp(28px, 2.7vw, 40px); max-width: 28ch; line-height: 1.18; }
.hero-sub { max-width: 64ch; font-size: 15px; line-height: 1.75; }
.hero-spark { background: var(--brand-soft); color: var(--brand-ink); }
.card-tool.is-hero, .card-credits, .plan, .signin-card, .empty { border-radius: 12px; box-shadow: var(--sh-sm); }
.card-tool.is-hero::before { content: none; }
.card-credits .card-pad { background: none; }
.credit-n { color: var(--ink); -webkit-text-fill-color: var(--ink); }
.credit-fill { background: var(--brand); }
.mode2.is-on { box-shadow: inset 0 0 0 1px var(--violet); }
.cards .stat-card, .cards .stat-card:hover:not(:disabled), .cards .stat-card.is-hero { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--tone-fill); box-shadow: none; color: var(--ink); border-radius: 10px; transform: none; }
.cards .stat-card .card-l, .cards .stat-card .card-d, .cards .stat-card .card-v small, .cards .stat-card .stat-cta { color: var(--ink-2); }
.cards .stat-card .card-l { text-transform: none; letter-spacing: 0; font-size: 13px; }
.cards .stat-card .card-v, .cards .stat-card.is-hero .card-v { color: var(--ink); -webkit-text-fill-color: var(--ink); font-size: 34px; }
.cards .stat-card .stat-chip { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); box-shadow: none; }
.cards .stat-card.is-filtering { border-color: var(--violet); box-shadow: inset 0 0 0 1px var(--violet); }
.cards .stat-card:hover:not(:disabled) { border-color: var(--line-strong); }
.cards .stat-card:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }
.cards .stat-card .stat-cta { opacity: 1; }
.takeaway { border-left: 0; }
.takeaway::before { content: none; }
.takeaway-head h2 { font-size: 21px; }
.takeaway-hint, .sort-note, .results-note { color: var(--ink-2); line-height: 1.65; }
.rth { font-size: 12px; text-transform: none; letter-spacing: 0; min-height: 44px; color: var(--ink-2); }
.results-table td { padding-block: 13px; }
.rc-url a { font-size: 12.5px; }
.results-scroll { scrollbar-gutter: stable; }
.results-table th:first-child, .results-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); border-right: 1px solid var(--line); }
.results-table th:first-child { background: var(--surface-2); z-index: 2; }
.results-table tr:hover td:first-child { background: var(--surface-2); }
.results-table .rc-url { max-width: 320px; }
.results-search input { min-height: 42px; }
.result-filter { min-height: 36px; }
@media (max-width: 650px) {
  .hero-card { padding: 24px 20px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cards .stat-card { padding: 16px 12px; min-width: 0; }
  .cards .stat-card .card-l { font-size: 12px; }
  .cards .stat-card .card-d { font-size: 12px; }
  .cards .stat-card .card-v, .cards .stat-card.is-hero .card-v { font-size: 28px; }
  .cards .stat-card .stat-chip { width: 28px; height: 28px; }
  .results-table th:first-child, .results-table td:first-child { position: static; }
  .takeaway-actions { align-items: stretch; }
  .takeaway-actions .btn { min-height: 46px; }
  .results-search { width: 100%; }
  .results-search input { min-width: 0; width: 100%; }
}

/* Report actions: export leads; copy and starting over remain secondary. */
.btn-copy, .btn-copy:hover { background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink); }
.btn-copy:hover { background: var(--surface-2); }
.sb-quota-fill { background: var(--brand); }
.cards .stat-card { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; }
.cards .stat-card .stat-cta { margin-top: auto; padding-top: 12px; }
.plans .is-planned .plan-price { font-size: 24px; white-space: normal; }

/* Keep the report itself within reach on small screens. Descriptions remain accessible. */
@media (max-width: 650px) {
  .cards .stat-card { min-height: 124px; position: relative; }
  .cards .stat-card .stat-chip { display: none; }
  .cards .stat-card .card-l { margin-top: 0; }
  .cards .stat-card .card-d { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cards .stat-card .stat-cta { font-size: 10px; padding-top: 8px; }
}

/* The daily top-up countdown, inline at the end of the credit note. It is a
 * sibling of the note text rather than a child, so repainting the note cannot
 * remove it. Tabular numerals stop the line jittering as the seconds tick. */
.credit-reset { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.credit-reset[hidden] { display: none; }
/* ============================================================ backlink verifier
 *
 * The client domain field on the shared list form. It borrows the paste box's
 * surface, border and monospace face, because a domain is data exactly as a
 * URL list is.
 */
.domain-field { display: flex; flex-direction: column; gap: 7px; }
.domain-l { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.domain-input {
  width: 100%;
  max-width: 420px;
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 11px 13px;
  font-size: 14.5px;
  font-family: var(--font-mono);
}
.domain-input:focus { outline: 0; border-color: var(--brand); box-shadow: var(--ring); }
.domain-hint { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-3); }
.domain-hint.is-bad { color: var(--warn); }
/* A cell that is empty on purpose - a Not Found page has no target URL. */
.rc-blank { color: var(--ink-3); }


/* ============================================================================
   Density, the collapsible rail, and the report table
   ----------------------------------------------------------------------------
   Three complaints, one cause: the interface was drawn for a 27-inch monitor
   and most of the work happens on a 13-inch laptop. Everything here trims the
   chrome so the DATA gets the room, without shrinking type - small text is not
   the same thing as a dense layout, and only one of the two is readable.
   ========================================================================== */

:root {
  /*
   * 256 -> 240, measured rather than chosen.
   *
   * "Backlink Prospect Checker" is the longest label in the nav and wants
   * 168px on one line. The label box is the sidebar less its own padding
   * (2x10), the item's (2x7), the icon (26) and the gap (8) - so 240 leaves it
   * 174px and the wrap that used to push that entry onto two lines is gone.
   * 224 left it 152px, which is where the wrap came from.
   */
  --sidebar-w: 240px;
  --topbar-h: 56px;
  /* The tick column, and therefore where the frozen URL column begins. */
  --rsel-w: 40px;
}

/* ---------- the shell breathes less ------------------------------------- */

.page { padding: 18px 22px 44px; }
.page-head { margin-bottom: 14px; }
.tb { padding: 0 18px; gap: 12px; }

/*
 * Cards lose a few pixels each, which is worth more than it sounds: a report
 * screen stacks six of them, so 6px off the padding is most of a row of table.
 */
.card-pad { padding: 16px 18px; }
.panel { padding: 18px 20px; }
.cards { gap: 12px; }

/* ---------- sidebar: tighter, and collapsible ---------------------------- */

.sb { padding: 12px 10px 10px; gap: 10px; }
.sb-brand { padding: 4px 6px 12px; }
.sb-logo { width: 150px; }
.sb-group { margin-bottom: 10px; }
/*
 * Sharper, not bolder.
 *
 * The labels were --ink-2 at weight 550, which is a mid-tone at a light
 * weight: legible by measurement (about 7:1 light, 10:1 dark) and soft to
 * actually read. Full --ink at 600 is the smallest change that makes them look
 * deliberate. The icon stays at --ink-2 so the glyph does not compete with the
 * word next to it, and the selected item is still the violet chip.
 */
.sb-item {
  padding: 7px 7px;
  font-size: 13.4px;
  gap: 8px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.005em;
}
.sb-item svg { color: var(--ink-2); }
.sb-label { color: var(--ink-2); font-weight: 750; }
.sb-item svg { width: 26px; height: 26px; padding: 4.5px; }
.sb-label { padding: 0 8px 5px; }
.sb-foot { padding-top: 8px; }
.sb-quota { padding: 9px 11px 10px; }
.sb-quota-n { font-size: 17px; }

/* The chevron points the way the edge will travel. */
.sb-mini-ar { transition: transform .18s ease; transform-origin: 12px 12px; }
.app.nav-mini .sb-mini-ar { transform: scaleX(-1); }

/* ---------- the rail ------------------------------------------------------ */

/*
 * Why the rail never actually narrowed anything.
 *
 * `.app` carried `transition: grid-template-columns .22s ease`, and a track
 * list holding a `1fr` is not reliably interpolable: Chromium answers the
 * change by keeping the OLD list rather than jumping to the new one. Measured
 * here - with the transition forced off the same click resolves the track to
 * 64px immediately, with it on the track stays at its full width forever.
 *
 * So collapsing did hide the labels and crop the logo, and then left the icons
 * floating in a column that was still the full 224px. The rail has never
 * worked in this browser.
 *
 * The fix is to stop transitioning it. The collapse is now instant, which is
 * what every other app with a rail does, and is a great deal better than an
 * animation that never arrives. An `auto` track plus a transitioned width on
 * the sidebar was tried first and is worse: `auto` sizes to the item's
 * min-content, so the rail snapped back out to the width of its widest
 * unbreakable child.
 */
.app { transition: none; }

/*
 * Nothing inside the rail may set its width; the grid track decides.
 *
 * This used to say `overflow-x: hidden`, which held the width and also clipped
 * every rail tooltip out of existence - they are drawn just outside the
 * sidebar's right edge, so they were never once visible. The track is a
 * definite length, so it holds the width on its own without the clipping.
 */
@media (min-width: 901px) {
  /*
   * The sidebar outranks the top bar.
   *
   * Half the collapse button hangs past the sidebar's right edge, which is
   * inside the top bar's band; the top bar is sticky at z-index 30, so without
   * this it painted over that half and swallowed the clicks that landed there.
   * Scoped above the drawer breakpoint so the drawer keeps its own z-index 60.
   */
  .sb { min-width: 0; z-index: 40; }
}

/*
 * ...and the scroller inside it clipped them too.
 *
 * `.sb-scroll` sets `overflow-y: auto`, which makes the X axis a scroll box as
 * well, so the tooltip was cut off at the sidebar's inner edge. In the rail the
 * nav is eight icons and a credit chip - about 420px - so it does not need to
 * scroll, and letting it overflow is what lets a tooltip leave the sidebar.
 */
.app.nav-mini .sb-scroll { overflow: visible; }

/*
 * ...and so did the group wrapper.
 *
 * `.sb-items` is `overflow: hidden` so a group can animate its max-height
 * shut. The rail already pins those groups open (max-height: none), so the
 * hidden overflow is doing nothing there except cutting the tooltip off at the
 * icon's own edge. Three nested clippers, which is why these tooltips had
 * never once appeared on screen.
 */
.app.nav-mini .sb-items { overflow: visible; }

/*
 * 78 -> 64. The rail holds one 26px icon and nothing else, so the rest was
 * margin; 64 still leaves 19px either side of the chip, which is a comfortable
 * target, and hands 14px back to the table.
 */
.app.nav-mini { --sidebar-w: 64px; }
.app.nav-mini .sb { padding-left: 8px; padding-right: 8px; }
.app.nav-mini .sb-item { padding: 7px 0; }

/*
 * A group label with its text gone is a rule between groups, which is the only
 * job left for it at this width. Without this the rail had unexplained gaps.
 */
.app.nav-mini .sb-label {
  display: block;
  padding: 0;
  height: 1px;
  margin: 0 8px 9px;
  background: var(--line-2);
  pointer-events: none;
  overflow: hidden;
}

/*
 * Tooltips, because an icon on its own is a guess.
 *
 * Drawn from data-tip on the nav item, so the tooltip carries the same string
 * as the label the rail hides - there is no second copy to fall out of step.
 * Presentation only: every item keeps its real text in the DOM for a screen
 * reader, the rail just sets it to font-size 0.
 */
.app.nav-mini .sb-item { position: relative; }
.app.nav-mini .sb-item[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 80;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--bg-2);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s ease;
  box-shadow: var(--sh-md);
}
.app.nav-mini .sb-item[data-tip]:hover::after,
.app.nav-mini .sb-item[data-tip]:focus-visible::after { opacity: 1; }

/* Below 900px the sidebar is a drawer, and a drawer needs its labels. */
@media (max-width: 900px) {
  .app.nav-mini { --sidebar-w: 260px; }
  .app.nav-mini .sb { padding-left: 10px; padding-right: 10px; }
  .app.nav-mini .sb-item { padding: 6px 8px; }
  .app.nav-mini .sb-item[data-tip]::after { content: none; }
  .app.nav-mini .sb-label {
    display: flex; height: auto; margin: 0; padding: 0 8px 5px;
    background: none; overflow: visible;
  }
}

/* ============================================================================
   The report table
   ----------------------------------------------------------------------------
   The old table was a grid of evenly grey text: correct, and unreadable at a
   hundred rows. The fixes are all about giving the eye somewhere to land -
   a header that is clearly a header, a column edge that is clearly an edge,
   and colour reserved for the cells that carry a judgement.
   ========================================================================== */

/* The toolbar reads as one strip with the table, not as a separate card. */
.results-head { padding: 16px 18px 12px; align-items: flex-start; }
.results-head h2 { font-size: 15px; }
.results-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.results-search { min-width: 230px; padding: 7px 11px; }
.rtool-copy { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.results-filters { padding: 0 18px 12px; gap: 6px; }
.rf { padding: 5px 10px; font-size: 12px; }

/*
 * The report is the one page that is a table, so it gets the width a table
 * wants. Every other page is read rather than worked in and keeps the 1320px
 * measure: a paragraph that runs the full width of a 27-inch monitor is not a
 * generous layout, it is an unreadable one.
 *
 * 1560 is the figure at which the verifier's seven columns stop needing a
 * horizontal scroll on a 1920 screen, measured rather than chosen.
 */
[data-view="report"] .page { max-width: 1560px; }

/* ---------- selection bar ------------------------------------------------- */

.results-selbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 9px 18px;
  background: var(--violet-soft);
  border-top: 1px solid var(--violet-line);
  border-bottom: 1px solid var(--violet-line);
}
.rsb-n { font-size: 13px; font-weight: 700; color: var(--violet-ink); font-variant-numeric: tabular-nums; }
.rsb-note { font-size: 12.2px; color: var(--ink-2); min-width: 0; }
.rsb-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ---------- the grid ------------------------------------------------------ */

/*
 * A long table gets its own scroll box so the header can pin to the top of it.
 * Short ones do not: a scroll bar around eight rows is furniture for nothing,
 * and the sticky header has nothing to stick to.
 */
.results-scroll.is-tall {
  max-height: min(72vh, 780px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.results-scroll.is-tall::-webkit-scrollbar { width: 9px; height: 9px; }
.results-scroll.is-tall::-webkit-scrollbar-track { background: transparent; }
.results-scroll.is-tall::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 5px; }

.results-table { font-size: 12.9px; }

/*
 * The header is a header: a solid band, a heavier rule under it, and ink dark
 * enough to read as a label rather than as the quietest row in the table.
 */
.results-table th {
  background: var(--surface-2);
  border-bottom: 2px solid var(--line-strong);
  box-shadow: inset -1px 0 0 var(--line-2);
}
.results-table th:last-child { box-shadow: none; }
.rth {
  padding: 9px 12px;
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 750;
  color: var(--ink-2);
  min-height: 0;
}
.rth:hover { color: var(--violet-ink); }
.rth.is-on { color: var(--violet-ink); }
.rth-ar { font-size: 10px; margin-left: auto; padding-left: 4px; }

/*
 * A hairline down each column. It is --line-2, the faintest rule in the
 * palette, because the job is to stop two neighbouring values from reading as
 * one phrase - not to draw a spreadsheet.
 */
.results-table td {
  padding: 8px 12px;
  box-shadow: inset -1px 0 0 var(--line-2);
}
.results-table td:last-child { box-shadow: none; }
.results-table tbody tr:hover td { background: var(--surface-2); }

/*
 * Short closed values sit centred under a centred header: statuses, link types
 * and counts. Anything read left to right - a URL, an anchor, a note - stays
 * left, where the eye looks for the first character.
 *
 * Counts were right-aligned, which is the right call for figures being summed
 * or compared down a column. These are one- and two-digit counts sitting under
 * a short header, so matching the header beats last-digit alignment; the digits
 * still share one width, so a centred column of them stays even.
 */
.rc-td-center { text-align: center; }
.rth.is-center { justify-content: center; }
/* The arrow is pushed right by margin-left:auto, which would drag a centred
   label off centre the moment a column is sorted. */
.rth.is-center .rth-ar { margin-left: 0; }
.rc-num { font-variant-numeric: tabular-nums; font-weight: 650; color: var(--ink); }

/*
 * URLs: readable, and not the loudest thing on the row.
 *
 * They are the widest value in every table and were also the darkest, so a
 * hundred rows read as a wall of monospace with the answers hidden between
 * them. Now they sit at --ink-2 and only come forward on hover.
 */
.rc-url a { font-size: 12px; color: var(--ink-2); font-weight: 450; }
.results-table tbody tr:hover .rc-url a { color: var(--ink); }
/*
 * 320px of URL twice over (source and target) was most of the table's width
 * before a single answer appeared. 280 still shows a domain and a slug, and
 * the whole URL is one hover away.
 */
.results-table .rc-url { max-width: 280px; min-width: 190px; }

/*
 * A pill for every value in a status column, including the neutral ones.
 *
 * Tinting only the good and bad ones left "Unknown" and "Unable to Verify" as
 * bare text in a column of badges, which read as a missing value rather than
 * as the answer they are.
 */
/*
 * Free text is capped so one wordy cell cannot set its column's width. Pills
 * and numbers are exempt: both are short by construction, and an ellipsised
 * status would be worse than a narrow one.
 */
.rc {
  max-width: 34ch;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.rc-pill, .rc-num { max-width: none; overflow: visible; }

.rc-pill {
  display: inline-block;
  padding: 2.5px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-2);
  font-weight: 650;
  font-size: 11.8px;
  line-height: 1.55;
}
.rc-pill.t-good { background: var(--good-soft); color: var(--good-ink); border-color: color-mix(in srgb, var(--good) 30%, transparent); }
.rc-pill.t-warn { background: var(--warn-soft); color: var(--warn-ink); border-color: color-mix(in srgb, var(--warn) 32%, transparent); }
.rc-pill.t-bad { background: var(--bad-soft); color: var(--red-ink); border-color: color-mix(in srgb, var(--red) 30%, transparent); }

/* A plain tinted cell that is NOT a status column keeps the old soft pill. */
.rc.t-good, .rc.t-warn, .rc.t-bad { font-size: 11.8px; }

/* ---------- tick boxes ---------------------------------------------------- */

/*
 * One number decides the tick column's width and where the frozen URL column
 * starts. They were two numbers, and `width` on a table cell is a suggestion
 * the auto layout is free to ignore - it rendered 34px against a 38px pin, so
 * the URL column floated four pixels clear of the column it sits against.
 * min and max width make the suggestion binding.
 */
.rsel-h, .rsel {
  width: var(--rsel-w);
  min-width: var(--rsel-w);
  max-width: var(--rsel-w);
  padding-left: 12px !important;
  padding-right: 0 !important;
  box-shadow: none !important;
}
.rsel-h { background: var(--surface-2); }
.rsel-l {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  cursor: pointer;
}
.rsel-h .rsel-l { padding: 9px 0; }
.rsel-l input {
  position: absolute;
  width: 16px;
  height: 16px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.rsel-box {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  display: inline-block;
  position: relative;
  transition: background .12s ease, border-color .12s ease;
}
.rsel-l:hover .rsel-box { border-color: var(--violet); }
.rsel-l input:focus-visible + .rsel-box { box-shadow: var(--ring); }
.rsel-l input:checked + .rsel-box,
.rsel-l input:indeterminate + .rsel-box { background: var(--violet); border-color: var(--violet); }
.rsel-l input:checked + .rsel-box::after {
  content: "";
  position: absolute;
  left: 4.6px;
  top: 1.4px;
  width: 4px;
  height: 8.5px;
  border: solid var(--on-violet);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
.rsel-l input:indeterminate + .rsel-box::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 6px;
  width: 8px;
  height: 2px;
  border-radius: 1px;
  background: var(--on-violet);
}

/* A picked row stays obvious while you scroll away from the box you ticked. */
.results-table tbody tr.is-picked td { background: color-mix(in srgb, var(--violet-soft) 70%, var(--surface)); }
.results-table tbody tr.is-picked:hover td { background: var(--violet-soft); }

.results-foot { padding: 11px 18px; }
.results-note { padding: 0 18px 16px; }

@media (max-width: 899px) {
  .results-head, .results-filters, .results-foot, .results-note, .results-selbar {
    padding-left: 14px; padding-right: 14px;
  }
  .results-tools { width: 100%; }
  .results-search { min-width: 0; flex: 1; }
}

/*
 * On a phone the search and the copy button cannot share a line: the button
 * has a fixed width and the search gets whatever is left, which was about
 * eleven characters of placeholder.
 */
@media (max-width: 560px) {
  .results-tools { flex-direction: column; align-items: stretch; }
  .rtool-copy { justify-content: center; }
  .rsb-actions .btn { white-space: nowrap; }
  .rsb-actions { margin-left: 0; width: 100%; }
  .rsb-actions .btn { flex: 1; }
  /* A phone has no room to spare for a scroll box inside a scrolling page. */
  .results-scroll.is-tall { max-height: none; overflow: auto; }
  .page { padding: 16px 14px 40px; }
}


/*
 * The frozen columns.
 *
 * An earlier rule pinned `:first-child`, which was the URL. The tick box is
 * now first, so the pin has to name both: the box, then the URL beside it.
 * Without this the URL - the one value that says WHICH row you are reading -
 * scrolls away and leaves a column of anonymous check boxes behind.
 */
.results-table th:first-child,
.results-table td:first-child { border-right: 0; }

.results-table th:nth-child(2),
.results-table td:nth-child(2) {
  position: sticky;
  left: var(--rsel-w);
  z-index: 1;
  background: var(--surface);
  border-right: 1px solid var(--line);
}
.results-table th:nth-child(2) { background: var(--surface-2); z-index: 2; }
.results-table tr:hover td:nth-child(2) { background: var(--surface-2); }
.results-table tbody tr.is-picked td:first-child,
.results-table tbody tr.is-picked td:nth-child(2) {
  background: color-mix(in srgb, var(--violet-soft) 70%, var(--surface));
}
.results-table tbody tr.is-picked:hover td:first-child,
.results-table tbody tr.is-picked:hover td:nth-child(2) { background: var(--violet-soft); }

/* The pinned header cells have to outrank the pinned body cells in both axes,
   or a sticky URL slides over the header row it belongs under. */
.results-table th { z-index: 3; }
.results-table th:first-child, .results-table th:nth-child(2) { z-index: 4; }

/*
 * Two frozen columns are more than a narrow screen can give up. Below 900px
 * the table scrolls as one piece.
 */
@media (max-width: 899px) {
  .results-table th:first-child,
  .results-table td:first-child,
  .results-table th:nth-child(2),
  .results-table td:nth-child(2) { position: static; }
}