/* reader.css — the visibility reader (/account/reader/).
 *
 * One reader, three doors: the scorecard opens to breakdowns, the plan and the
 * answers, and every number and every action resolves to the same list of
 * questions. Designed phone-first against the Biltmore crawl (2026-09-05);
 * the desktop adds a rail, nothing else.
 *
 * Colours come from the site tokens (main.css / redesign.css) so the Letterpress
 * light theme and the terminal theme apply without a second palette here. The
 * only tokens this sheet owns are the four engine hues, the verdict blue and the
 * layout handles. Every selector is scoped under .rdr.
 */
.rdr {
  --r-info: var(--rl-blue, #7aa6f5);
  --r-danger: var(--rl-red, #ef4444);
  --r-warn: var(--rl-amber, #f59e0b);
  --e-chatgpt: #3fbf86; --e-claude: #e8965a; --e-gemini: #7aa6f5; --e-perplexity: #5ed3c8;
  --r-faint: var(--text-faint, #71717a);
  --r-muted: var(--text-muted, #a1a1aa);
  --r-text2: var(--text-secondary, #e4e4e7);
  --r-card: var(--bg-card, #141416);
  --r-card2: var(--bg-card-hover, #1a1a1d);
  --r-border: var(--border, #27272a);
  --r-border2: var(--border-light, #3f3f46);
  --r-accent: var(--accent, #c8ff00);
  --r-accent-ink: var(--accent-ink, #09090b);
  --r-accent-dim: var(--accent-dim, rgba(200,255,0,.12));
  --r-accent-line: rgba(var(--accent-rgb, 200,255,0), .4);
  /* --r-top is the bottom edge of the sticky chrome above the reader (the nav,
     and the operator strip when there is one). Measured at runtime by the page,
     because the nav is sticky and its height depends on who is signed in. */
  --r-top: 64px;
  --r-nav: 0px;
  color: var(--r-text2);
  font-size: 16px; line-height: 1.55;
}
[data-theme="light"] .rdr {
  --e-chatgpt: #1f8a5b; --e-claude: #b8602a; --e-gemini: #2f5fb3; --e-perplexity: #1c8f89;
}
.rdr *, .rdr *::before, .rdr *::after { box-sizing: border-box; }
.rdr h1, .rdr h2, .rdr h3, .rdr h4 { color: var(--text); margin: 0; letter-spacing: -.015em; text-wrap: balance; }
.rdr p { margin: 0; }
.rdr a { color: var(--text); }
.rdr button { font: inherit; }
.rdr .mono, .rdr .k { font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace); }
.rdr .k { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--r-muted); }
.rdr .num { font-variant-numeric: tabular-nums; }

/* shell: one column; a rail on wide screens. The account's .dash is 720px
   wide, which suits a settings page and starves a reader with a rail, so the
   reader widens its own container and trims the account's 5rem top padding. */
.account--reader { padding-top: 1.5rem; }
.dash--reader { max-width: 1240px; }
.rdr { display: grid; grid-template-columns: minmax(0, 1fr); }
.rdr__rail { display: none; }
.rdr__main { max-width: 680px; margin: 0 auto; width: 100%; min-width: 0; padding: 0 0 6rem; }
@media (min-width: 1100px) {
  .rdr { grid-template-columns: 224px minmax(0, 1fr); gap: 2.5rem; }
  /* The rail is short and sticks for the length of the page. It used to be
     given the viewport's height, which is taller than the room left near the
     bottom of a short page, so sticky gave up and the rail scrolled off with the
     content. Content height, capped at the viewport, never hits that limit. */
  .rdr__rail { display: flex; flex-direction: column; gap: .2rem; padding: 1.1rem 0 1rem; border-right: 1px solid var(--r-border); position: sticky; top: var(--r-top); max-height: calc(100dvh - var(--r-top)); overflow: auto; align-self: start; }
  .rdr__main { max-width: 960px; margin: 0; padding-bottom: 4rem; }
}
.rdr__rail a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem .75rem; margin-right: 1rem; border-radius: 10px; text-decoration: none; color: var(--r-muted); font-size: .92rem; min-height: 44px; border: 1px solid transparent; }
.rdr__rail a:hover { background: var(--r-card); color: var(--text); }
.rdr__rail a.is-on { background: var(--r-accent-dim); border-color: var(--r-accent-line); color: var(--text); font-weight: 600; }
.rdr__rail .brand { display: flex; align-items: center; gap: .7rem; padding: .2rem .75rem 1rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--r-muted); }
.rdr__rail .brand b { display: block; font-family: var(--font-body, inherit); font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--text); margin-top: .2rem; }
.rdr__rail .dl { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: 1.2rem 1rem 0 0; padding: .65rem .75rem; border: 1px solid var(--r-border2); border-radius: 10px; text-decoration: none; color: var(--text); font-size: .86rem; font-weight: 600; min-height: 44px; }
.rdr__rail .dl small { font-family: var(--mono); font-size: .62rem; color: var(--r-muted); letter-spacing: .08em; }
.rdr__rail .dl:hover { border-color: var(--r-accent-line); }
.rdr__rail .paid { margin: .6rem 1rem 0 0; font-size: .76rem; color: var(--r-muted); padding: .75rem; border: 1px dashed var(--r-border2); border-radius: 10px; }

/* breadcrumb: the way back, and where you are */
.rdr__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; padding: .7rem 0 .2rem; font-size: .82rem; color: var(--r-muted); }
.rdr__back { text-decoration: none; color: var(--text); font-weight: 600; min-height: 32px; display: inline-flex; align-items: center; }
.rdr__back:hover { color: var(--r-accent); }
.rdr__trail { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem; min-width: 0; }
.rdr__trail a { color: var(--r-muted); text-decoration: none; }
.rdr__trail a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.rdr__trail i { font-style: normal; color: var(--r-faint); }
.rdr__trail b { color: var(--text); font-weight: 500; }
@media (max-width: 640px) { .rdr__trail { display: none; } }

/* section switcher on phones and tablets: pills, pinned */
.rdr__nav { position: sticky; top: var(--r-top); z-index: 9; background: var(--bg); padding: .45rem 0 .5rem; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--r-border); margin-bottom: .4rem; }
.rdr__nav::-webkit-scrollbar { display: none; }
.rdr__nav a { flex: none; }
@media (min-width: 1100px) { .rdr__nav { display: none; } }
@media (max-width: 1099px) { .rdr.is-detail .rdr__nav { display: none; } }

/* page head */
.rdr .ph { padding: 1rem 0 .6rem; display: flex; align-items: flex-start; gap: .7rem; }
.rdr .ph h1 { font-size: 1.45rem; font-weight: 700; line-height: 1.2; }
.rdr .ph .sub { font-size: .86rem; color: var(--r-muted); margin-top: .2rem; }
.rdr .back { flex: none; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--r-border2); background: var(--r-card); color: var(--text); display: grid; place-items: center; text-decoration: none; font-size: 1.05rem; }
.rdr .big { font-size: 4.2rem; line-height: 1; font-weight: 700; color: var(--r-accent); letter-spacing: -.04em; }
.rdr .big small { font-size: 1.6rem; color: var(--r-muted); font-weight: 600; margin-left: .1rem; }
.rdr .card { background: var(--r-card); border: 1px solid var(--r-border); border-radius: 14px; padding: 14px 15px; }
.rdr .card + .card { margin-top: 10px; }
.rdr .lede { font-size: 1rem; color: var(--r-text2); }
.rdr .lede b { color: var(--text); }
.rdr .pill { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--r-border2); border-radius: 999px; padding: .32rem .7rem; font-size: .82rem; color: var(--r-text2); background: transparent; cursor: pointer; white-space: nowrap; min-height: 36px; text-decoration: none; }
/* A selected pill carries a word, so it follows the button rule rather than
   the badge rule: deep green with light ink, not a sentence on bright lime. */
.rdr .pill--on { background: var(--btn-fill, #3f5c0b); color: var(--btn-ink, #f4ffe0); border-color: var(--btn-fill, #3f5c0b); font-weight: 600; }
.rdr .pill small { font-family: var(--mono); font-size: .68rem; opacity: .75; }
.rdr .tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 4px 0 10px; margin: 0 -2px; }
.rdr .tabs::-webkit-scrollbar { display: none; }
.rdr .eng { display: inline-flex; align-items: center; gap: .3rem; font-family: var(--mono); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; padding: .2rem .45rem; border-radius: 5px; border: 1px solid; white-space: nowrap; }
.rdr .eng--chatgpt { color: var(--e-chatgpt); border-color: color-mix(in srgb, var(--e-chatgpt) 45%, transparent); background: color-mix(in srgb, var(--e-chatgpt) 12%, transparent); }
.rdr .eng--claude { color: var(--e-claude); border-color: color-mix(in srgb, var(--e-claude) 45%, transparent); background: color-mix(in srgb, var(--e-claude) 12%, transparent); }
.rdr .eng--gemini { color: var(--e-gemini); border-color: color-mix(in srgb, var(--e-gemini) 45%, transparent); background: color-mix(in srgb, var(--e-gemini) 12%, transparent); }
.rdr .eng--perplexity { color: var(--e-perplexity); border-color: color-mix(in srgb, var(--e-perplexity) 45%, transparent); background: color-mix(in srgb, var(--e-perplexity) 12%, transparent); }
/* Two marks, two questions. The DOT says whether the answer named you: solid
   accent is the top pick, an accent ring is named, a faint ring is not. The BAR
   underneath says whether the engine cited one of your pages, which is a
   different fact and gets a different mark rather than a fifth colour. Red is
   deliberately absent here: red means absent, losing and critical everywhere
   else in this report, so the best state must not wear it. */
.rdr .dots { display: inline-flex; gap: 6px; align-items: center; flex: none; }
.rdr .dot { position: relative; width: 11px; height: 11px; border-radius: 50%; display: inline-block; border: 2px solid var(--r-border2); }
.rdr .dot--2 { background: var(--r-accent); border-color: var(--r-accent); }
.rdr .dot--1 { border-color: var(--r-accent); background: transparent; }
.rdr .dot--0 { border: 1.5px solid var(--r-faint); }
.rdr .dot--cite::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -5px; width: 11px; height: 2px; border-radius: 1px; background: var(--r-info); }
.rdr .dots:has(.dot--cite) { margin-bottom: 2px; }
.rdr .sb { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--r-border); gap: 2px; }
.rdr .sb i { display: block; height: 100%; }
.rdr .sb .w { background: var(--r-accent); }
.rdr .sb .v { background: color-mix(in srgb, var(--r-accent) 55%, transparent); }
.rdr .sb .c { background: var(--r-info); }
.rdr .legend { display: flex; flex-wrap: wrap; gap: .5rem .9rem; font-size: .74rem; color: var(--r-muted); margin: 6px 0 4px; font-family: var(--mono); }
.rdr .legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: .3rem; vertical-align: -1px; }
.rdr .legend .w { background: var(--r-accent); }
.rdr .legend .v { background: color-mix(in srgb, var(--r-accent) 55%, transparent); }
.rdr .legend .c { background: var(--r-info); }
.rdr .legend .a { border: 1px solid var(--r-faint); }
.rdr .legend span { cursor: help; }

.rdr .lock { font-family: var(--mono); font-size: .62rem; color: var(--r-accent); letter-spacing: .08em; text-transform: uppercase; margin-left: .3rem; }
.rdr .points { margin: .4rem 0 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .5rem; font-size: .93rem; }
.rdr .points li::marker { color: var(--r-accent); }
.rdr .sec { margin-top: 22px; }
.rdr .how { margin-top: 10px; border-top: 1px solid var(--r-border); }
.rdr .how summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; list-style: none; }
.rdr .how summary::-webkit-details-marker { display: none; }
.rdr .how summary::after { content: "+"; margin-left: auto; color: var(--r-muted); font-family: var(--mono); }
.rdr .how[open] summary::after { content: "−"; }
.rdr .how p { font-size: .9rem; color: var(--r-text2); margin: 0 0 .7rem; max-width: 62ch; }
.rdr .how b { color: var(--text); font-weight: 600; }
.rdr .sec > .k { display: block; margin-bottom: 8px; }

/* segment rows */
.rdr .seg { display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 5px 10px; padding: 12px 0; border-bottom: 1px solid var(--r-border); text-decoration: none; color: inherit; min-height: 44px; }
.rdr .seg:hover .seg__n { color: var(--r-accent); }
.rdr .seg__n { font-size: .95rem; color: var(--text); font-weight: 500; display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.rdr .seg__n small { color: var(--r-muted); font-weight: 400; font-family: var(--mono); font-size: .68rem; white-space: nowrap; }
.rdr .seg__v { font-family: var(--mono); font-size: 1rem; color: var(--text); text-align: right; align-self: center; grid-row: span 2; }
.rdr .seg__v.bad { color: var(--r-danger); }
.rdr .seg__v.warn { color: var(--r-warn); }

/* question rows */
.rdr .q { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: .3rem .5rem; padding: 12px 0; border-bottom: 1px solid var(--r-border); text-decoration: none; color: inherit; min-height: 44px; }
.rdr .q__n { font-family: var(--mono); font-size: .68rem; color: var(--r-faint); padding-top: .3rem; }
.rdr .q__t { font-size: .95rem; color: var(--text); line-height: 1.35; }
.rdr .q__m { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-family: var(--mono); font-size: .68rem; color: var(--r-muted); flex-wrap: wrap; }
.rdr .q__m .abs { color: var(--r-danger); }
.rdr .q__m .won { color: var(--r-accent); }
.rdr .q:hover .q__t { color: var(--r-accent); }
.rdr .chips { display: flex; flex-wrap: wrap; gap: 5px; }
.rdr .chip { font-family: var(--mono); font-size: .66rem; color: var(--r-muted); border: 1px solid var(--r-border2); border-radius: 5px; padding: .15rem .4rem; text-decoration: none; }
.rdr .chip--me { color: var(--r-accent); border-color: var(--r-accent-line); }
.rdr a.chip:hover { color: var(--text); }

/* Cited pages. A chip row could only carry the domain; a reader who wants to
   check a claim wants the page, so each citation is its own openable row with
   the site on the left and the page on the right. */
.rdr .cites { display: flex; flex-direction: column; gap: 2px; }
.rdr .cite { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) 12px; gap: .55rem; align-items: baseline; padding: .28rem .45rem; border: 1px solid transparent; border-radius: 5px; text-decoration: none; color: inherit; }
.rdr .cite__d { font-family: var(--mono); font-size: .66rem; color: var(--r-muted); white-space: nowrap; }
.rdr .cite__t { font-size: .78rem; color: var(--r-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rdr .cite em { font-style: normal; font-size: .66rem; color: var(--r-faint); opacity: 0; }
.rdr .cite:hover { border-color: var(--r-border2); background: var(--r-tint, rgba(127,127,127,.05)); }
.rdr .cite:hover .cite__t { color: var(--text); }
.rdr .cite:hover em { opacity: 1; }
.rdr .cite--me .cite__d { color: var(--r-accent); }
@media (max-width: 620px) {
  .rdr .cite { grid-template-columns: minmax(0, 1fr) 12px; }
  .rdr .cite__d { grid-column: 1 / -1; }
}

/* bars */
.rdr .bar { display: grid; grid-template-columns: 132px minmax(0, 1fr) 44px; gap: .6rem; align-items: center; padding: 6px 0; font-size: .86rem; text-decoration: none; color: inherit; }
.rdr .bar__n { color: var(--r-text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rdr .bar__t { display: block; height: 8px; background: var(--r-border); border-radius: 4px; overflow: hidden; }
.rdr .bar__f { display: block; height: 100%; background: var(--r-info); border-radius: 4px; }
.rdr .bar.me .bar__n { color: var(--r-accent); font-weight: 600; }
.rdr .bar.me .bar__f { background: var(--r-accent); }
.rdr .bar.red .bar__f { background: var(--r-danger); }
.rdr .bar__v { font-family: var(--mono); font-size: .76rem; color: var(--r-muted); text-align: right; }
.rdr .h2h { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rdr .h2h span, .rdr .h2h a { font-family: var(--mono); font-size: .7rem; border: 1px solid var(--r-border2); border-radius: 999px; padding: .3rem .6rem; color: var(--r-text2); text-decoration: none; }
.rdr .h2h span b, .rdr .h2h a b { color: var(--r-accent); font-weight: 600; }
.rdr .h2h span.l b, .rdr .h2h a.l b { color: var(--r-danger); }
/* A record you can open reads as a door, not a chip. */
.rdr .h2h a { border-color: var(--r-border); }
.rdr .h2h a:hover { border-color: var(--r-accent); color: var(--text); }

/* plan */
.rdr .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; background: var(--btn-fill, #3f5c0b); color: var(--btn-ink, #f4ffe0); font-weight: 600; border: 0; border-radius: 12px; padding: .75rem 1rem; font-size: .95rem; min-height: 46px; cursor: pointer; width: 100%; text-decoration: none; }
.rdr .btn:hover { background: color-mix(in srgb, var(--btn-fill, #3f5c0b) 88%, #fff); }
.rdr .btn--ghost { background: transparent; color: var(--text); border: 1px solid var(--r-border2); }
.rdr .btn--ghost:hover { background: transparent; border-color: var(--r-accent-line); }
.rdr .btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.rdr .brief h4 { font-size: .95rem; margin: 16px 0 6px; font-weight: 600; }
.rdr .brief p, .rdr .brief li { font-size: .93rem; color: var(--r-text2); }
.rdr .brief ul { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .35rem; }
.rdr .brief li::marker { color: var(--r-accent-line); }
.rdr .brief .sub { display: flex; flex-direction: column; gap: .6rem; }
.rdr .brief .sub p { margin: 0; }
.rdr .brief .sub h4 { margin-top: 8px; }
.rdr .prog { height: 8px; background: var(--r-border); border-radius: 4px; overflow: hidden; margin-top: 6px; }
.rdr .prog i { display: block; height: 100%; background: var(--r-accent); }
/* sticky action bar: where you are in the plan, and the way back, while the brief scrolls */
.rdr .abar { position: sticky; top: calc(var(--r-top) + var(--r-nav)); z-index: 8; background: var(--bg); border-bottom: 1px solid var(--r-border); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .6rem; align-items: center; padding: .55rem 0; margin: 0 0 .6rem; }
.rdr .abar__back { display: inline-flex; align-items: center; gap: .35rem; text-decoration: none; color: var(--text); font-size: .86rem; font-weight: 600; min-height: 44px; padding: 0 .2rem; white-space: nowrap; }
.rdr .abar__back span { font-family: var(--mono); font-size: .68rem; color: var(--r-muted); font-weight: 400; letter-spacing: .06em; text-transform: uppercase; }
.rdr .abar__mid { min-width: 0; text-align: center; }
.rdr .abar__mid b { display: block; font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--r-muted); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rdr .abar__mid span { display: block; font-size: .84rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rdr .abar__nav { display: inline-flex; gap: 4px; }
.rdr .abar__nav a { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--r-border2); background: var(--r-card); color: var(--text); display: grid; place-items: center; text-decoration: none; font-size: 1rem; }
.rdr .abar__nav a.off { opacity: .3; pointer-events: none; }
.rdr .abar__prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--r-border); }
.rdr .abar__prog i { display: block; height: 100%; background: var(--r-accent); }

/* answers */
.rdr .strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.rdr .vs { border: 1px solid var(--r-border); border-radius: 10px; padding: 8px 4px; text-align: center; cursor: pointer; background: var(--r-card); min-width: 0; overflow-wrap: anywhere; text-decoration: none; color: inherit; }
.rdr .vs.is-on { border-color: var(--r-accent); background: var(--r-accent-dim); }
.rdr .vs .eng { font-size: .58rem; padding: .14rem .3rem; }
.rdr .vs small { display: block; font-family: var(--mono); font-size: .62rem; color: var(--r-muted); margin-top: .35rem; letter-spacing: .03em; line-height: 1.3; }
.rdr .vs small.w { color: var(--r-accent); }
.rdr .vs small.v { color: var(--r-info); }
.rdr .vs small.x { color: var(--r-danger); }
.rdr .filters { position: sticky; top: calc(var(--r-top) + var(--r-nav)); z-index: 5; background: var(--bg); padding: 6px 0 8px; margin: 0 -2px; }
.rdr .filters .row2 { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.rdr .search { flex: 1; min-width: 0; background: var(--r-card); border: 1px solid var(--r-border2); border-radius: 10px; color: var(--text); padding: .55rem .75rem; font: inherit; font-size: .9rem; min-height: 40px; }
.rdr select.search { flex: none; width: auto; max-width: 46%; }
.rdr .count { font-family: var(--mono); font-size: .7rem; color: var(--r-muted); margin: 6px 0 2px; }
.rdr .ans p { font-size: .95rem; color: var(--r-text2); margin: 0 0 .8rem; line-height: 1.55; }
.rdr .ans h5 { font-size: .98rem; color: var(--text); margin: 1rem 0 .4rem; font-weight: 600; }
.rdr .ans ul { margin: 0 0 .8rem; padding-left: 1.1rem; font-size: .95rem; }
.rdr .ans li { margin-bottom: .35rem; }
.rdr .ans .tw { overflow-x: auto; margin: .3rem 0 1rem; }
.rdr .ans table { border-collapse: collapse; font-size: .8rem; min-width: 100%; border: 1px solid var(--r-border); border-radius: 8px; }
.rdr .ans th { background: var(--r-card); color: var(--r-muted); font-family: var(--mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; padding: .45rem .55rem; border-bottom: 1px solid var(--r-border); text-align: left; font-weight: 500; }
.rdr .ans td { padding: .45rem .55rem; border-bottom: 1px solid var(--r-border); color: var(--r-text2); vertical-align: top; }
.rdr .ans .chips { margin: -.4rem 0 .9rem; }
.rdr .junk { color: var(--r-faint); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--r-danger) 60%, transparent); font-family: var(--mono); font-size: .78rem; display: block; line-height: 1.45; }
.rdr .note { font-size: .88rem; color: var(--r-muted); border-left: 2px solid var(--r-danger); padding-left: .65rem; margin: 0 0 .9rem; }
.rdr .gate { border: 1px solid var(--r-accent-line); border-radius: 14px; padding: 16px; background: linear-gradient(180deg, var(--r-accent-dim), transparent 70%), var(--r-card); margin-top: 14px; }
.rdr .gate b { color: var(--text); display: block; margin-bottom: .3rem; font-size: 1.02rem; }
.rdr .gate p { font-size: .88rem; color: var(--r-muted); margin: 0 0 .8rem; }
.rdr .blur { filter: blur(6px); user-select: none; pointer-events: none; opacity: .65; }
.rdr details.why { margin-top: 14px; border-top: 1px solid var(--r-border); padding-top: 6px; }
.rdr details.why summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; list-style: none; }
.rdr details.why summary::-webkit-details-marker { display: none; }
.rdr details.why p { font-size: .88rem; color: var(--r-muted); margin: .3rem 0 .6rem; }
.rdr .qnav { display: flex; justify-content: space-between; gap: .5rem; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--r-border); }
.rdr .qnav a { font-size: .86rem; color: var(--r-muted); text-decoration: none; min-height: 44px; display: flex; align-items: center; }
.rdr .qnav a:hover { color: var(--text); }
.rdr .tog { display: inline-flex; border: 1px solid var(--r-border2); border-radius: 999px; overflow: hidden; }
.rdr .tog button { background: transparent; border: 0; color: var(--r-muted); font-size: .78rem; padding: .35rem .7rem; cursor: pointer; min-height: 34px; }
.rdr .tog button.is-on { background: var(--text); color: var(--bg); font-weight: 600; }
.rdr .empty { color: var(--r-muted); font-size: .9rem; padding: 1.5rem 0; }
.rdr .op { font-family: var(--mono); font-size: .7rem; color: var(--r-muted); border: 1px dashed var(--r-border2); border-radius: 8px; padding: .5rem .7rem; margin-top: 10px; }
.rdr-toast { position: fixed; left: 50%; transform: translate(-50%, 8px); bottom: calc(84px + var(--tabbar-shift, 0px)); background: var(--text); color: var(--bg); border-radius: 12px; padding: .7rem 1rem; font-size: .9rem; font-weight: 500; opacity: 0; transition: all .2s; z-index: 70; pointer-events: none; max-width: min(92vw, 520px); text-align: center; }
.rdr-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 1100px) { .rdr-toast { bottom: 28px; } }
@media (prefers-reduced-motion: reduce) { .rdr *, .rdr-toast { transition: none !important; } }

.rdr__rail .brand-avatar--rail { width: 40px; height: 40px; border-radius: 11px; background: #fff; flex: none; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.rdr__rail .brand-avatar--rail .brand-avatar__mono { font-size: 1.05rem; color: #111; }
.rdr__rail .brand-avatar--rail .brand-avatar__img { padding: 6px; }

.rdr .ph--brand { align-items: center; gap: .9rem; }
.rdr .brand-avatar--score { width: 48px; height: 48px; border-radius: 13px; background: #fff; flex: none; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.rdr .brand-avatar--score .brand-avatar__mono { font-size: 1.2rem; color: #111; }
.rdr .brand-avatar--score .brand-avatar__img { padding: 7px; }
@media (min-width: 1100px) { .rdr .brand-avatar--score { display: none; } }

/* pdf freshness · re-crawl nudge · share in the rail */
.rdr .dlmeta { display: block; margin-top: 6px; font-size: .78rem; color: var(--r-muted); }
.rdr .nudge { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; font-size: .88rem; color: var(--r-text2); background: color-mix(in srgb, var(--r-accent) 8%, transparent); }
.rdr .nudge a { color: var(--text); font-weight: 600; }
.rdr__rail button.dl { width: calc(100% - 1rem); background: transparent; color: var(--text); font: inherit; cursor: pointer; margin-top: .5rem; }

/* ── section arrows · the question's bar · what buyers said · phone fixes (2026-09-06) ── */
/* Previous and next section at the foot of every route, in the rail's order.
   The rail is the only way between sections on a desktop and the pills scroll
   off on a phone; the foot is where the eye is when it wants the next thing. */
.rdr__foot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--r-border); }
.rdr__foot-a { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--r-border); border-radius: 12px; background: var(--r-card); text-decoration: none; color: var(--text); min-height: 60px; justify-content: center; min-width: 0; }
.rdr__foot-a small { font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--r-muted); }
.rdr__foot-a b { font-size: .95rem; font-weight: 600; line-height: 1.25; }
.rdr__foot-a.next { text-align: right; align-items: flex-end; }
.rdr__foot-a:hover { border-color: var(--r-accent-line); }
.rdr__foot-a.next b { color: var(--text); }

/* The question's sticky bar: the action bar's shape, with the engine switch
   on a second row so a long answer can be read to the end and the other three
   engines are still one tap away. */
.rdr .abar--q { grid-template-rows: auto auto; row-gap: .4rem; }
.rdr .abar__strip { grid-column: 1 / -1; gap: 5px; }
.rdr .abar__strip .vs { padding: 5px 3px; border-radius: 8px; }
.rdr .abar__strip .vs small { margin-top: .2rem; font-size: .58rem; }
.rdr .abar__strip .vs small + small { display: none; }
.rdr .abar__mid em { font-style: normal; }
.rdr .abar__mid .abs { color: var(--r-danger); }
.rdr .abar__mid .won { color: var(--r-accent); }
.rdr .ph--q { padding-top: .6rem; }
.rdr .ph--q h1 { font-size: 1.25rem; }

/* What buyers said */
.rdr .finding { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: .5rem; padding: 14px 0; border-bottom: 1px solid var(--r-border); }
.rdr .finding__n { font-family: var(--mono); font-size: .7rem; color: var(--r-faint); padding-top: .25rem; }
.rdr .finding__b > b { display: block; font-size: 1rem; color: var(--text); line-height: 1.35; }
.rdr .finding__b > p { font-size: .9rem; color: var(--r-text2); margin: 0 0 6px; }
.rdr .vq { margin: 10px 0 0; padding: 10px 12px; border-left: 2px solid var(--r-accent-line); background: var(--r-card); border-radius: 0 10px 10px 0; }
.rdr .vq p { font-size: .92rem; color: var(--text); font-style: italic; margin: 0 0 4px; }
.rdr .vq footer { font-family: var(--mono); font-size: .66rem; color: var(--r-muted); }
.rdr .vq footer a { color: var(--r-muted); text-decoration: none; }
.rdr .vq footer a:hover { color: var(--r-accent); }

/* Phones: nothing in a brief may set the page's width. A target URL or a
   pasted path in an implementation step used to, and the page then panned
   sideways under the thumb. */
.rdr .brief, .rdr .brief p, .rdr .brief li, .rdr .sec p, .rdr .ans, .rdr .finding__b, .rdr .vq p { overflow-wrap: anywhere; }
.rdr__main, .rdr .sec { min-width: 0; }
@media (max-width: 640px) {
  .account--reader { padding-top: .75rem; }
  .rdr__crumbs { padding-top: .35rem; }
  .rdr .abar { column-gap: .45rem; }
  .rdr .abar__back { padding: 0; }
  .rdr .abar__nav a { width: 38px; height: 38px; }
  .rdr__foot { gap: 8px; }
  .rdr__foot-a { padding: 10px 12px; }
}

/* ── What buyers said, redrawn (2026-09-06): the shape first, then the argument ── */
.rdr .vjump { padding-top: 0; }
.rdr .vlede { font-size: .9rem; color: var(--r-muted); margin: 2px 0 12px; max-width: 68ch; }
.rdr .vlede .mono { font-size: .72rem; }
.rdr .vglance { display: flex; flex-direction: column; gap: 10px; }
/* Four tiles, and the grid was hardcoded to three, so the fourth dropped onto a
   row of its own and sat there at a quarter width looking like an afterthought.
   Fit as many as the container can hold and let them reflow. */
.rdr .vtiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 8px; align-items: stretch; }
/* Equal height, or the one tile with a second line of caption sits 10px proud
   of the other three and the row reads as broken rather than as a set. */
.rdr .vtile { display: flex; flex-direction: column; }
.rdr .vtile .s { flex: 1 1 auto; }
/* Each one is a door into the part of the Voice of Customer that number came
   from, so it reads as a link and lands on that section. */
/* flex, not block: `a.vtile` outranks `.vtile` on specificity, so a `display:
   block` here quietly beat the column rule below and left the tiles ragged. */
.rdr a.vtile { text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: border-color .12s, transform .12s; }
.rdr a.vtile:hover { border-color: var(--rl-voice, #b9a5ff); transform: translateY(-1px); }
.rdr a.vtile:hover .v { color: var(--rl-voice, #b9a5ff); }
.rdr .vtile__go { display: block; font-size: .66rem; font-family: var(--mono); color: var(--r-faint); margin-top: auto; padding-top: .35rem; }
.rdr a.vtile:hover .vtile__go { color: var(--rl-voice, #b9a5ff); }
.rdr .vtile .v { font-family: var(--mono); font-size: 1.4rem; font-weight: 600; color: var(--rl-voice, #b9a5ff); letter-spacing: -.02em; }
.rdr .vtile .s { font-size: .74rem; color: var(--r-muted); line-height: 1.3; margin-top: 2px; }
.rdr .vcharts { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 720px) { .rdr .vcharts { grid-template-columns: 1fr 1fr; } }
.rdr .vchart > .k { display: block; margin-bottom: 8px; }
.rdr .vbar { display: grid; grid-template-columns: minmax(0, 1fr) 30px; grid-template-areas: "n v" "t t"; gap: 2px 8px; align-items: center; padding: 5px 0; font-size: .84rem; }
.rdr .vbar__n { grid-area: n; color: var(--r-text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rdr .vbar__t { grid-area: t; display: block; height: 7px; background: var(--r-border); border-radius: 4px; overflow: hidden; }
.rdr .vbar__f { display: block; height: 100%; background: var(--rl-voice, #b9a5ff); border-radius: 4px; }
.rdr .vbar__f.red { background: var(--r-danger); }
.rdr .vbar__v { grid-area: v; font-family: var(--mono); font-size: .74rem; color: var(--r-muted); text-align: right; }
.rdr .vwho__bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--r-border); gap: 2px; margin-bottom: 8px; }
.rdr .vwho__bar i { display: block; height: 100%; background: var(--rl-voice, #b9a5ff); min-width: 3px; }
.rdr .vchip { color: var(--r-text2); border-color: var(--rl-voice-line, rgba(185,165,255,.45)); }
.rdr .vchip i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--rl-voice, #b9a5ff); margin-right: .35rem; vertical-align: -1px; }
.rdr .vchip--era { color: var(--rl-voice, #b9a5ff); }
/* a finding: number, the claim and its reach, the buyer's sentence */
.rdr .vf { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 18px 0; border-bottom: 1px solid var(--r-border); }
.rdr .vf__n { font-family: var(--mono); font-size: .72rem; color: var(--r-faint); padding-top: .35rem; }
.rdr .vf__t h3 { font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
.rdr .vf__t { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rdr .vf__q { grid-column: 2; min-width: 0; }
.rdr .vreach { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; margin-top: 2px; }
.rdr .vreach__t { display: block; height: 8px; background: var(--r-border); border-radius: 4px; overflow: hidden; }
.rdr .vreach__t i { display: block; height: 100%; background: var(--rl-voice, #b9a5ff); border-radius: 4px; }
.rdr .vreach__v { font-family: var(--mono); font-size: .8rem; color: var(--text); }
.rdr .vreach__u { grid-column: 1 / -1; font-family: var(--mono); font-size: .66rem; color: var(--r-muted); letter-spacing: .04em; }
.rdr .vchips { margin-top: 2px; }
.rdr .vf__more { border-top: 1px dashed var(--r-border); margin-top: 4px; }
.rdr .vf__more summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; list-style: none; font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--r-muted); }
.rdr .vf__more summary::-webkit-details-marker { display: none; }
.rdr .vf__more summary::after { content: "+"; margin-left: auto; }
.rdr .vf__more[open] summary::after { content: "−"; }
.rdr .vf__more p { font-size: .92rem; color: var(--r-text2); max-width: 68ch; margin: 0 0 10px; }
.rdr .vf__nq { font-size: .92rem; color: var(--r-text2); }
/* the quote as speech */
.rdr .vq2 { margin: 0; padding: 12px 14px 10px 16px; border-left: 3px solid var(--rl-voice, #b9a5ff); background: var(--r-card); border-radius: 0 12px 12px 0; position: relative; }
.rdr .vq2 blockquote { margin: 0; font-size: .98rem; line-height: 1.5; color: var(--text); }
.rdr .vq2 blockquote::before { content: "“"; font-family: var(--serif, Georgia, serif); font-size: 2rem; line-height: 0; color: var(--rl-voice, #b9a5ff); margin-right: .15rem; vertical-align: -.5rem; }
.rdr .vq2 figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .6rem; margin-top: 8px; font-size: .78rem; color: var(--r-muted); }
.rdr .vq2 figcaption b { color: var(--text); font-weight: 600; }
.rdr .vq2--lead blockquote { font-size: 1.04rem; }
.rdr .play { display: inline-flex; align-items: center; gap: .3rem; font-family: var(--mono); font-size: .66rem; color: var(--rl-voice, #b9a5ff); border: 1px solid var(--rl-voice-line, rgba(185,165,255,.45)); border-radius: 999px; padding: .15rem .55rem; text-decoration: none; margin-left: auto; white-space: nowrap; min-height: 28px; }
.rdr .play:hover { background: var(--rl-voice-soft, rgba(185,165,255,.14)); }
.rdr .vf__more .vq2 { margin-top: 4px; }
/* one deal as a timeline */
.rdr .vdeal__t { font-size: 1.05rem; font-weight: 600; margin: 2px 0 2px; }
.rdr .vdeal__o { font-size: .86rem; color: var(--r-muted); margin: 0 0 10px; }
.rdr .vdeal__w { font-size: .9rem; color: var(--r-text2); margin-top: 12px; max-width: 68ch; }
.rdr .tl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rdr .tl__s { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 0 12px; position: relative; padding-bottom: 16px; }
.rdr .tl__s::before { content: ""; grid-column: 1; width: 10px; height: 10px; border-radius: 50%; background: var(--rl-voice, #b9a5ff); margin: 6px 0 0 6px; box-shadow: 0 0 0 3px var(--rl-voice-soft, rgba(185,165,255,.14)); }
.rdr .tl__s::after { content: ""; position: absolute; left: 10.5px; top: 20px; bottom: 0; width: 1px; background: var(--r-border); }
.rdr .tl__s:last-child::after { display: none; }
.rdr .tl__d { grid-column: 2; display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: baseline; }
.rdr .tl__d b { color: var(--text); font-size: .95rem; }
.rdr .tl__d span { font-family: var(--mono); font-size: .68rem; color: var(--r-muted); }
.rdr .tl__q { grid-column: 2; margin-top: 6px; padding: 10px 12px; background: var(--r-card); border-radius: 10px; border: 1px solid var(--r-border); }
.rdr .tl__q .k { display: block; margin-bottom: 4px; letter-spacing: .06em; text-transform: none; }
.rdr .tl__q p { font-size: .92rem; color: var(--text); margin: 0 0 6px; }
.rdr .tl__q .play { margin-left: 0; }
/* anchors land under the sticky chrome, not behind it */
.rdr [id^="v-"] { scroll-margin-top: calc(var(--r-top) + var(--r-nav) + 10px); }
/* desktop: the claim on the left, the buyer's sentence beside it */
@media (min-width: 1100px) {
  .rdr .vf { grid-template-columns: 30px minmax(0, 7fr) minmax(0, 6fr); column-gap: 22px; }
  .rdr .vf__q { grid-column: 3; grid-row: 1; }
  .rdr .vtiles { max-width: 780px; }
}
@media (max-width: 640px) {
  .rdr .vtile .v { font-size: 1.2rem; }
  .rdr .vf { grid-template-columns: 24px minmax(0, 1fr); gap: 8px; }
  .rdr .vq2 blockquote { font-size: .95rem; }
}

/* An honest gap beats a false zero: the note under the rings when the verdicts are withheld. */
.rdr .integrity { font-size: .78rem; color: var(--r-muted); margin-top: 8px; border-left: 2px solid var(--r-warn); padding-left: .6rem; }

/* ── what this moves, by group (#11) ─────────────────────────────────────── */
.rdr .movesnote { font-size: .88rem; line-height: 1.55; color: var(--r-muted); margin: 2px 0 10px; }
.rdr .movesrow { display: grid; grid-template-columns: 7.5rem 1fr; gap: .5rem; align-items: start; margin-bottom: .5rem; }
.rdr .movesrow__k { font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--r-muted); padding-top: .3rem; }
@media (max-width: 560px) { .rdr .movesrow { grid-template-columns: 1fr; gap: .2rem; } }

/* ── citations, as their own room (#10) ──────────────────────────────────── */
.rdr .fold { border: 1px solid var(--r-border); border-radius: 12px; margin: 10px 0; background: var(--r-card); }
.rdr .fold > summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
  padding: .8rem .9rem; cursor: pointer; list-style: none;
}
.rdr .fold > summary::-webkit-details-marker { display: none; }
.rdr .fold > summary::after { content: "+"; color: var(--r-muted); font-family: var(--mono); }
.rdr .fold[open] > summary::after { content: "−"; }
.rdr .fold > summary b { font-size: .98rem; font-weight: 600; }
.rdr .fold > summary span { font-family: var(--mono); font-size: .72rem; color: var(--r-muted); margin-left: auto; margin-right: .6rem; }
.rdr .fold__b { padding: 0 .9rem .9rem; }
.rdr .foldnote { font-size: .88rem; line-height: 1.55; color: var(--r-muted); margin: 0 0 .7rem; }
/* The citation list has a shape: a rank, what the page is, how hard the
   engines leaned on it, and the questions behind that number. The number is
   the control, and it opens where it sits rather than sending the reader to
   another page to find out what "14" meant. */
.rdr .cstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 8px; margin: 12px 0 4px; }
.rdr .cstat { padding: .8rem .9rem; }
.rdr .cstat .v { font-size: 1.6rem; font-weight: 700; line-height: 1.1; color: var(--r-accent); }
.rdr .cstat .s { font-size: .78rem; color: var(--r-muted); margin-top: .2rem; line-height: 1.35; }
.rdr .cpages { display: flex; flex-direction: column; }
.rdr .cpage {
  display: grid; grid-template-columns: 2.1rem 1fr auto; gap: .15rem .7rem;
  align-items: baseline; padding: .8rem 0; border-bottom: 1px solid var(--r-border);
}
.rdr .cpage__r { font-family: var(--mono); font-size: .72rem; color: var(--r-faint); }
.rdr .cpage__t { font-size: .96rem; font-weight: 600; margin: 0; text-transform: capitalize; line-height: 1.3; }
.rdr .cpage__u { font-size: .76rem; color: var(--r-muted); font-family: var(--mono); word-break: break-all; }
.rdr .cpage__u:hover { color: var(--r-accent); }
.rdr .cpage__n { text-align: right; white-space: nowrap; }
.rdr .cpage__n b { font-size: 1.35rem; color: var(--r-accent); display: block; line-height: 1; }
.rdr .cpage__n span { font-size: .68rem; color: var(--r-muted); font-family: var(--mono); }
.rdr .cpage__q { grid-column: 2 / -1; margin-top: .45rem; }
.rdr .cpage__q > summary {
  cursor: pointer; list-style: none; font-size: .78rem; color: var(--r-info);
  font-family: var(--mono); letter-spacing: .02em;
}
.rdr .cpage__q > summary::-webkit-details-marker { display: none; }
.rdr .cpage__q > summary::before { content: "▸ "; }
.rdr .cpage__q[open] > summary::before { content: "▾ "; }
.rdr .cpage__q ul { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.rdr .cpage__q li { display: flex; align-items: baseline; justify-content: space-between; gap: .7rem; }
.rdr .cpage__q li a { display: flex; align-items: baseline; gap: .5rem; font-size: .87rem; color: var(--r-text2); line-height: 1.4; }
.rdr .cpage__q li a:hover { color: var(--r-accent); }
.rdr .cpage__q li a .num { font-size: .7rem; color: var(--r-faint); flex: none; }
.rdr .cpage__q li i { font-style: normal; font-family: var(--mono); font-size: .66rem; color: var(--r-muted); white-space: nowrap; flex: none; }
.rdr .cpage__q li i.cit { color: var(--r-info); }
.rdr .cpage__q li i.abs { color: var(--r-danger); }
.rdr .cpage__q li i.won { color: var(--r-accent); }
.rdr .cpage__q--none { font-size: .74rem; color: var(--r-faint); font-family: var(--mono); }
@media (max-width: 560px) {
  .rdr .cpage { grid-template-columns: 1fr auto; }
  .rdr .cpage__r { display: none; }
  .rdr .cpage__q { grid-column: 1 / -1; }
}
.rdr .citedoms { margin-top: .8rem; display: flex; flex-direction: column; gap: .5rem; }
.rdr .citedom { display: grid; grid-template-columns: 8rem 1fr; gap: .5rem; align-items: start; }
.rdr .citedom__n { font-size: .82rem; color: var(--r-muted); }
@media (max-width: 560px) { .rdr .citedom { grid-template-columns: 1fr; } }

/* ── the cited-but-not-named verdict (#8) ────────────────────────────────── */
.rdr .q__m .cit { color: var(--r-info); }
.rdr .note--cite { border-left: 2px solid var(--r-info); padding-left: .6rem; color: var(--r-text2); }

/* ── Voice of Customer: the method and the market synopsis (#13) ─────────── */
.rdr .vmethod { font-size: .92rem; line-height: 1.6; color: var(--r-text2); margin: 0 0 12px; }
.rdr .vmkt { font-size: .95rem; line-height: 1.65; color: var(--r-text2); margin: 4px 0 0; }
.rdr .vhand { font-size: .9rem; line-height: 1.6; color: var(--r-muted); margin: 4px 0 10px; }
.rdr .vunit { font-size: .72rem; color: var(--r-muted); margin: 4px 0 0; font-family: var(--mono); }
.rdr .vchip { cursor: help; }
.rdr .vs small.cit { color: var(--r-info); }
.rdr .abar__mid em.cit { color: var(--r-info); }
.rdr .ctail { margin-top: .6rem; }
.rdr .ctail > summary {
  cursor: pointer; list-style: none; font-family: var(--mono); font-size: .74rem;
  color: var(--r-muted); padding: .6rem .8rem; border: 1px dashed var(--r-border2); border-radius: 10px;
}
.rdr .ctail > summary::-webkit-details-marker { display: none; }
.rdr .ctail > summary:hover { color: var(--text); border-color: var(--r-accent-line); }
.rdr .ctail[open] > summary { margin-bottom: .4rem; }
.rdr .vtile__sub { display: block; font-size: .72rem; color: var(--r-faint); margin-top: .15rem; }

/* ── The cover (scorecard) ─────────────────────────────────────────────────
   One screen, read top to bottom: the score and its key, the engines, then the
   reading path. Phones and tablets stack in that order with the engines after
   the path, because the path is where a first-time reader needs to go next. */
.rdr .cover { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "hero" "path" "eng" "also" "read" "op"; row-gap: 18px; }
.rdr .cv-head { grid-area: head; padding-bottom: 0; }
.rdr .cv-head .sub { max-width: 60ch; }
.rdr .cv-hero { grid-area: hero; min-width: 0; }
.rdr .cv-eng { grid-area: eng; }
.rdr .cv-path { grid-area: path; }
.rdr .cv-also { grid-area: also; }
.rdr .cv-read { grid-area: read; margin-top: 0; }
.rdr .cover > .op { grid-area: op; }

.rdr .cv-top { display: flex; align-items: center; gap: 1rem; margin: 2px 0 14px; }
.rdr .cv-top .big { margin: 0; flex: none; }
.rdr .cv-top .lede { font-size: 1.05rem; line-height: 1.4; max-width: 24ch; }

.rdr .cv-bar { display: flex; gap: 2px; height: 14px; border-radius: 7px; overflow: hidden; }
.rdr .cv-bar i { display: block; flex: 0 1 0; min-width: 4px; }
.rdr .cv-bar__w, .rdr .cv-sw--w { background: var(--r-accent); }
.rdr .cv-bar__v, .rdr .cv-sw--v { background: color-mix(in srgb, var(--r-accent) 50%, transparent); }
.rdr .cv-bar__c, .rdr .cv-sw--c { background: var(--r-info); }
.rdr .cv-bar__a, .rdr .cv-sw--a { background: color-mix(in srgb, var(--r-danger) 32%, var(--r-border)); }

/* The key: count, label and a one-line meaning, readable without a tap. */
.rdr .cv-key { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-top: 12px; }
.rdr .cv-key__i { display: grid; grid-template-columns: 10px auto minmax(0, 1fr); column-gap: 8px; align-items: baseline; text-decoration: none; color: inherit; }
.rdr .cv-sw { width: 10px; height: 10px; border-radius: 3px; align-self: center; }
.rdr .cv-key__l { color: var(--r-text2); font-size: .9rem; white-space: nowrap; }
.rdr .cv-key__l b { font-family: var(--mono); font-size: 1.05rem; font-weight: 600; color: var(--text); margin-right: .15rem; }
.rdr .cv-key__i--a .cv-key__l b { color: var(--r-danger); }
.rdr .cv-key__i small { font-size: .8rem; color: var(--r-muted); line-height: 1.35; }
.rdr a.cv-key__i:hover .cv-key__l { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 760px) {
  .rdr .cv-key { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 12px 18px; }
  .rdr .cv-key__i { grid-template-columns: 10px minmax(0, 1fr); align-items: start; }
  .rdr .cv-sw { align-self: start; margin-top: 6px; }
  .rdr .cv-key__l { white-space: normal; line-height: 1.3; }
  .rdr .cv-key__i small { grid-column: 2; margin-top: 3px; }
}
.rdr .cv-hero .how { margin-top: 14px; }

.rdr .cv-eng { align-self: start; background: var(--r-card); border: 1px solid var(--r-border); border-radius: 14px; padding: 12px 14px 10px; }
.rdr .cv-eng > .k { display: block; margin-bottom: 4px; }
.rdr .cv-eng__r { display: grid; grid-template-columns: 6.8rem minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; }
.rdr .cv-eng__r + .cv-eng__r { border-top: 1px solid var(--r-border); }
.rdr .cv-eng__r .eng { justify-self: start; }
.rdr .cv-eng__t { height: 6px; border-radius: 3px; background: var(--r-border); overflow: hidden; }
.rdr .cv-eng__t i { display: block; height: 100%; min-width: 3px; border-radius: 3px; }
.rdr .cv-eng__n { font-family: var(--mono); font-size: .74rem; color: var(--r-muted); white-space: nowrap; }
.rdr .cv-eng__n a { color: var(--r-text2); text-decoration: none; }
.rdr .cv-eng__n a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.rdr .cv-eng__n .cv-eng__w { color: var(--r-accent); }
.rdr .cv-eng .integrity { margin-top: 8px; }

/* The reading path: three steps in order, the last one the move to make. */
.rdr .cv-path > .k { display: block; margin-bottom: 8px; }
.rdr .cv-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.rdr .cv-step { display: flex; flex-direction: column; gap: 6px; padding: 13px 15px 14px; border: 1px solid var(--r-border); border-radius: 14px; background: var(--r-card); color: inherit; text-decoration: none; transition: border-color .12s, background .12s; }
.rdr .cv-step:hover { border-color: var(--r-accent-line); background: var(--r-card2); }
.rdr .cv-step:focus-visible, .rdr .cv-more a:focus-visible, .rdr .cv-key__i:focus-visible { outline: 2px solid var(--r-accent); outline-offset: 2px; }
.rdr .cv-step__n { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--r-muted); }
.rdr .cv-step__n em { font-style: normal; font-size: 1.1rem; letter-spacing: 0; color: var(--r-accent); }
.rdr .cv-step b { font-size: 1rem; line-height: 1.32; font-weight: 600; color: var(--text); }
.rdr .cv-step__s { font-size: .84rem; line-height: 1.42; color: var(--r-muted); }
.rdr .cv-step--go { border-color: var(--r-accent-line); background: color-mix(in srgb, var(--r-accent) 7%, var(--r-card)); }
.rdr .cv-step--go .cv-step__n { color: var(--r-accent); }
@media (min-width: 760px) { .rdr .cv-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.rdr .cv-also__h { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 8px; }
.rdr .cv-also__h a { font-size: .84rem; color: var(--r-accent); text-decoration: none; }
.rdr .cv-also__h a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rdr .cv-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rdr .cv-more a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--r-border); border-radius: 12px; color: inherit; text-decoration: none; transition: border-color .12s, background .12s; }
.rdr .cv-more a:hover { border-color: var(--r-border2); background: var(--r-card); }
.rdr .cv-more b { font-size: .9rem; font-weight: 600; color: var(--text); }
.rdr .cv-more span { font-size: .76rem; line-height: 1.35; color: var(--r-muted); }
.rdr .cv-more .cv-more__calls { border-style: dashed; }
.rdr .cv-take { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.rdr .cv-take .btn { margin: 0; }
.rdr .cv-take .dlmeta { flex-basis: 100%; margin-top: 0; }
@media (min-width: 760px) { .rdr .cv-more { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

@media (min-width: 1100px) {
  .rdr .cover { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-areas: "head head" "hero eng" "path path" "also also" "read read" "op op"; column-gap: 2.5rem; row-gap: 22px; }
  /* The rail carries the PDF and the invite on a desktop. */
  .rdr .cv-take { display: none; }
}

/* Cover head: a small label and date, then the verdict as the headline. */
.rdr .cv-eyebrow { display: block; margin-bottom: 5px; }
.rdr .cv-head h1 { font-size: clamp(1.3rem, 1rem + 1.2vw, 1.7rem); line-height: 1.22; max-width: 32ch; }
.rdr .cv-head .sub { margin-top: .4rem; }
/* How we count this, short: four lines and a way to the full method. */
.rdr .cv-how ul { margin: 0 0 .7rem; padding-left: 1.1rem; display: grid; gap: .45rem; max-width: 62ch; font-size: .9rem; line-height: 1.5; color: var(--r-text2); }
.rdr .cv-how li::marker { color: var(--r-accent); }
.rdr .cv-how__more { display: inline-block; margin-bottom: .7rem; font-size: .84rem; color: var(--r-accent); text-decoration: none; }
.rdr .cv-how__more:hover { text-decoration: underline; text-underline-offset: 3px; }
.rdr .cv-head { align-items: flex-start; }
.rdr .cv-head > .brand-avatar { align-self: flex-start; margin-top: 4px; }

/* ── The plan, in plain words: the how-to line, the owner filter, the off-site list ── */
.rdr .plan-how { font-size: .92rem; line-height: 1.5; color: var(--r-text2); margin: 12px 0 10px; max-width: 64ch; }
.rdr .plan-who { align-items: center; padding-top: 2px; }
.rdr .plan-who .k { flex: none; margin-right: 4px; }
.rdr .offg { margin-top: 20px; }
.rdr .offg h3 { font-size: 1.02rem; font-weight: 600; }
.rdr .offg h3 small { margin-left: .45rem; font-family: var(--mono); font-size: .72rem; font-weight: 400; color: var(--r-muted); }
.rdr .offg__s { margin: 2px 0 8px; font-size: .84rem; color: var(--r-muted); }
.rdr .offl { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--r-border); }
.rdr .offl li { display: grid; gap: 4px; padding: 11px 0; border-bottom: 1px solid var(--r-border); }
.rdr .offl p { max-width: 72ch; font-size: .92rem; line-height: 1.5; color: var(--r-text2); }
.rdr .offl a { font-size: .78rem; color: var(--r-muted); text-decoration: none; }
.rdr .offl a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.rdr .offlink { margin-top: 12px; font-size: .88rem; }
.rdr .offlink a { color: var(--r-accent); text-decoration: none; }
.rdr .offlink a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── The plan: the whole list, and the move you are on ─────────────────────
   Desktop: two panes. The outline stays pinned with its own scroll, so the
   plan never leaves the screen while a move is open. Below 1100px there is one
   pane at a time: the outline is the plan, a move opens on its own screen. */
.rdr .pl { margin-top: 12px; }
.rdr .pl__list { display: flex; flex-direction: column; min-width: 0; }
.rdr .pl__cap, .rdr .pr { display: grid; grid-template-columns: 16px 22px minmax(0, 1fr) 30px 26px; gap: 8px; align-items: center; }
.rdr .pl__cap { padding: 0 8px 6px; border-bottom: 1px solid var(--r-border); font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--r-faint); }
.rdr .pl__cap span:nth-child(n+4) { text-align: right; }
.rdr .pl__lh { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; padding: 14px 8px 5px; }
.rdr .pl__lh b { font-size: .86rem; font-weight: 600; color: var(--text); }
.rdr .pl__lh span { font-family: var(--mono); font-size: .62rem; text-align: right; color: var(--r-faint); }
.rdr .pl__pg { padding: 3px 8px 3px 54px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: .66rem; color: var(--r-muted); }
.rdr .pl__pg small { font-size: inherit; color: var(--r-faint); }
.rdr .pr { min-height: 34px; padding: 6px 8px; border: 1px solid transparent; border-radius: 8px; font-size: .86rem; line-height: 1.3; color: var(--r-text2); text-decoration: none; }
.rdr .pr:hover { background: var(--r-card); color: var(--text); }
.rdr .pr:focus-visible { outline: 2px solid var(--r-accent); outline-offset: 1px; }
.rdr .pr.is-sel { background: var(--r-accent-dim); border-color: var(--r-accent-line); color: var(--text); }
.rdr .pr__c { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--r-border2); }
.rdr .pr__c--off { border-style: dashed; }
.rdr .pr.done .pr__c { background: var(--r-accent); border-color: var(--r-accent); }
.rdr .pr.done .pr__t { color: var(--r-faint); text-decoration: line-through; }
.rdr .pr__r { font-family: var(--mono); font-size: .66rem; color: var(--r-faint); }
.rdr .pr__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rdr .pr__g { font-family: var(--mono); font-size: .72rem; text-align: right; color: var(--r-accent); }
.rdr .pr__o { font-family: var(--mono); font-size: .68rem; text-align: right; color: var(--r-muted); }
.rdr .pr--off .pr__t { color: var(--text); }
.rdr .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rdr .pl__back { display: inline-block; margin: 6px 0 4px; font-size: .88rem; color: var(--r-muted); text-decoration: none; }
.rdr .pl__offhead h2 { font-size: 1.3rem; font-weight: 700; }
.rdr .pl__offhead h2 small { margin-left: .4rem; font-family: var(--mono); font-size: .8rem; font-weight: 400; color: var(--r-muted); }
.rdr .act-h { font-size: 1.35rem; font-weight: 700; line-height: 1.25; margin: 6px 0 12px; }
@media (min-width: 1100px) {
  .rdr .pl { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 28px; align-items: start; }
  .rdr .pl__list { position: sticky; top: calc(var(--r-top) + 8px); max-height: calc(100dvh - var(--r-top) - 20px); overflow: auto; overscroll-behavior: contain; padding-right: 4px; }
  .rdr .pl__detail .abar__back, .rdr .pl__back { display: none; }
}
@media (max-width: 1099px) {
  .rdr .plw[data-sel="1"] .pl-hd, .rdr .plw[data-sel="1"] .pl__list { display: none; }
  .rdr .plw[data-sel="0"] .pl__detail { display: none; }
  .rdr .pr__t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

/* What to do: the one block on a move that is lifted off the page. */
.rdr .todo { margin: 4px 0 14px; padding: 12px 16px 14px; border: 1px solid var(--r-accent-line); border-radius: 14px; background: color-mix(in srgb, var(--r-accent) 5%, var(--r-card)); }
.rdr .todo__h { margin: 0 0 2px; font-family: var(--mono); font-size: .7rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--r-accent); }
.rdr .todo .brief { margin: 0; }
.rdr .todo__off { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--r-border2); scroll-margin-top: calc(var(--r-top) + 96px); border-radius: 0 0 8px 8px; }
.rdr .todo__off h4 { font-size: 1rem; font-weight: 600; color: var(--text); }
.rdr .todo__off h4 small { margin-left: .4rem; font-family: var(--mono); font-size: .72rem; font-weight: 400; color: var(--r-muted); }
.rdr .todo__off ul { margin: .45rem 0 0; padding-left: 1.1rem; display: grid; gap: .5rem; font-size: .93rem; line-height: 1.5; color: var(--r-text2); }
.rdr .todo__off li::marker { color: var(--r-accent); }
.rdr .todo__off.is-see { animation: rdr-see 1.8s ease-out 1; }
@keyframes rdr-see { from { background: var(--r-accent-dim); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .rdr .todo__off.is-see { animation: none; outline: 1px solid var(--r-accent-line); outline-offset: 4px; } }
/* Two lines per move in the outline at every width: a title cut at 25
   characters told nobody what the move was. */
.rdr .pr__t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rdr .pr { padding-top: 7px; padding-bottom: 7px; }
/* The outline is a height-capped flex column; without this its clipped rows
   (the page header under Improve pages you have) shrink until they vanish. */
.rdr .pl__list > * { flex-shrink: 0; }

/* The executive summary sits under the score; How we count this closes the cover. */
.rdr .cover { grid-template-areas: "head" "hero" "read" "path" "eng" "also" "how" "op"; }
.rdr .cv-howb { grid-area: how; margin-top: 0; }
.rdr .cv-read:empty { display: none; }
.rdr .cv-read > .k { display: block; margin-bottom: 8px; }
.rdr .cv-points { display: grid; gap: 10px 32px; margin: 0; font-size: .93rem; line-height: 1.5; color: var(--r-text2); }
@media (min-width: 760px) { .rdr .cv-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .rdr .cover { grid-template-areas: "head head" "hero eng" "read read" "path path" "also also" "how how" "op op"; } }