/* report-brief.css: the subscriber's page (the owner's ruling of 23 Sep 2026, S1; the subscriber experience doc,
 * section 7's phone mock). The brief on top (report-brief.js), the market's chapters folded under their headings
 * (report-view.js sbFold), the part heading over the market, and the readings last. Drawn in the report's own tokens
 * (report-view.css :root); this file only lays out what the subscriber's page adds. Phone first: everything holds at
 * 375 px with no sideways scroll. Nothing here is reached by a style attribute: the page's CSP drops those.
 *
 * YOUR WEEK, REDESIGNED (the owner's rulings of 2 Oct 2026, the hybrid of docs/your-week-redesign-plan-2026-10-02.html):
 * the headline first, the tiles with their chips and small lines, what changed beside you and your competitors, one step,
 * what is coming. Colour says whose news it is and never says it alone: green good for you, red bad for you, blue a
 * competitor's, gold a starting point or a step; every chip carries an arrow, "=" or a word. Big numbers are ink, not gold
 * (a gold "0 of 25" read as a win). Labels are words at a readable size, not 10 px capitals. */

/* ── the brief ─────────────────────────────────────────────────────────────────────────────────────────────── */
.sb-card{border:1px solid var(--gold-line);background:linear-gradient(180deg,var(--gold-soft),transparent 160px),var(--surface);
  border-radius:14px;padding:18px 20px 16px;margin:18px 0 8px}
.sb-vh{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sb-head{margin:0 0 10px}
.sb-card h2.sb-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;font:700 24px/1.1 var(--disp);color:var(--ink);margin:0}
.sb-tier{font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold-line);border-radius:999px;padding:2px 9px}
.sb-where{font:500 11px var(--mono);letter-spacing:.04em;color:var(--ink3);margin:6px 0 0}

/* 1: the window, the headline, the line under it, the start strip */
.sb-wtop{margin:0 0 14px}
.sb-eyebrow{font:600 10.5px/1.45 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink3);margin:0 0 6px}
.sb-card .sb-headline{font:700 34px/1.06 var(--disp);letter-spacing:.005em;color:var(--ink);margin:0;max-width:24em;text-wrap:balance;overflow-wrap:anywhere}
.sb-sub{font:400 .95rem/1.5 var(--body);color:var(--ink2);margin:8px 0 0;max-width:46em}
.sb-strip{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:12px 0 0}
.sb-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;width:132px}
.sb-bar span{height:6px;border-radius:3px;background:var(--line)}
.sb-bar span.on{background:var(--gold)}
.sb-strip-t{font:600 12px var(--body);color:var(--gold)}
/* what could not be read, said beside the headline; and the moves past the cap of five, counted */
.sb-part-note{font-size:.88rem;line-height:1.5;color:var(--ink);background:var(--gold-soft);border:1px solid var(--gold-line);border-radius:8px;padding:8px 11px;margin:0 0 12px;max-width:60em}
.sb-cut{font-size:.84rem;color:var(--ink3);margin:8px 0 0}

/* 2: the tiles */
.sb-score{margin:0}
.sb-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
/* none read yet: one line, never four tiles of a lone dot (the review of 27 Sep, rule 9) */
.sb-score-none{margin:0;font-size:.92rem;line-height:1.5;color:var(--ink2)}
.sb-tile{display:flex;flex-direction:column;gap:6px;min-width:0;box-sizing:border-box;background:var(--surface2);border:1px solid var(--line);
  border-radius:12px;padding:12px 12px 10px;color:inherit;text-decoration:none}
a.sb-tile{cursor:pointer}
a.sb-tile:hover{border-color:var(--gold-line)}
a.sb-tile:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.sb-tl{font:600 12.5px/1.3 var(--body);color:var(--ink2);margin:0}
.sb-tv{font:700 32px/1 var(--disp);color:var(--ink);margin:0;font-variant-numeric:tabular-nums}
.sb-tv small{font:500 13px var(--body);color:var(--ink3)}
.sb-tn{font-size:12px;line-height:1.35;color:var(--ink3);margin:0}
/* the reviews tile: what of its change is confirmed (release 8, L2) */
.sb-tc{font-size:12px;line-height:1.35;color:var(--ink2);margin:0}
/* the line under the AI tile (the ChatGPT sources and ads round, 2 Oct 2026): one line under the four tiles, wrapping */
.sb-src{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:10px 0 0;font-size:13px;line-height:1.45;color:var(--ink2)}
.sb-src-t{flex:1 1 260px;min-width:0}
.sb-chip{display:inline-flex;align-items:center;gap:4px;width:fit-content;max-width:100%;font:600 12px/1.2 var(--body);border-radius:999px;padding:3px 9px;margin:0;
  color:var(--ink2);background:rgba(238,242,239,.06)}
.sb-chip-g{font-size:10px}
.sb-chip.up{color:var(--mint);background:var(--mint-soft)}
.sb-chip.down{color:var(--bad);background:var(--bad-soft)}
.sb-chip.other{color:var(--blue);background:rgba(127,180,232,.12)}
.sb-chip.start{color:var(--gold);background:var(--gold-soft)}
.sb-spark{color:var(--ink3);margin-top:auto}
.sb-spark.up{color:var(--mint)}
.sb-spark.down{color:var(--bad)}
.sb-spark-svg{display:block;width:100%;height:24px;overflow:visible}

/* 3: what changed, and you vs. your competitors */
.sb-two{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin:18px 0 0}
.sb-h{font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin:0 0 4px}
.sb-rule{font-size:.8rem;line-height:1.45;color:var(--ink3);margin:0 0 6px}
.sb-list,.sb-rlist{list-style:none;margin:0;padding:0}
.sb-move{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:4px 10px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line2)}
.sb-move:last-child{border-bottom:0}
.sb-g{font-size:11px;line-height:1.45;text-align:center;color:var(--blue)}
.sb-move.up .sb-g{color:var(--mint)}
.sb-move.down .sb-g{color:var(--bad)}
.sb-move.mk .sb-g{color:var(--ink2)}
.sb-mb{display:flex;flex-direction:column;gap:2px;min-width:0}
.sb-who{font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.sb-move.up .sb-who{color:var(--mint)}
.sb-move.down .sb-who{color:var(--bad)}
.sb-move.mk .sb-who{color:var(--ink2)}
.sb-t{font-size:.94rem;line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.sb-b{font-size:12px;line-height:1.4;color:var(--ink3)}
.sb-ev{font:600 12px var(--body);color:var(--mint);text-decoration:none;white-space:nowrap}
.sb-ev:hover,.sb-ev:focus-visible{text-decoration:underline}
.sb-rrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;padding:9px 0;border-bottom:1px solid var(--line2)}
.sb-rrow:last-child{border-bottom:0}
.sb-rrow.you{background:rgba(67,213,151,.05);border-radius:8px;padding:9px 8px;margin:0 -8px}
.sb-rn{display:flex;align-items:baseline;gap:6px;min-width:0;flex:1 1 12em}
.sb-rname{font:600 .92rem/1.35 var(--body);color:var(--ink);overflow-wrap:anywhere;min-width:0}
.sb-youtag{font:600 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mint);border:1px solid var(--mint-soft);border-radius:999px;padding:1px 6px;white-space:nowrap}
.sb-rf{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.sb-rr,.sb-rv{font:600 .92rem var(--body);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.sb-rr small,.sb-rv small{font:400 12px var(--body);color:var(--ink3)}
/* a confirmed gain's own range beside its chip (release 8, L2) */
.sb-rto{font:400 12px var(--body);color:var(--ink3);font-variant-numeric:tabular-nums;white-space:nowrap}

/* 4: the one next step */
.sb-next{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;align-items:center;margin:18px 0 0;padding:12px 14px;border:1px solid var(--gold-line);border-radius:12px;background:var(--gold-soft)}
.sb-quiet .sb-next{margin:0 0 16px}
.sb-next .sb-h{grid-column:1 / -1;color:var(--gold)}
.sb-step{margin:0;display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline;grid-column:1}
.sb-steptext{font:600 1rem/1.45 var(--body);color:var(--ink)}
.sb-eff{font-size:12px;color:var(--ink3);white-space:nowrap}
.sb-why{grid-column:1;font-size:.88rem;line-height:1.5;color:var(--ink2);margin:2px 0 0}
.sb-done{grid-column:2;grid-row:2 / span 2;font:600 13px var(--body);color:#10231a;background:var(--mint);border:0;border-radius:999px;padding:10px 18px;cursor:pointer;white-space:nowrap;min-height:44px}
.sb-done:hover,.sb-done:focus-visible{filter:brightness(1.08);outline:2px solid var(--mint-soft);outline-offset:2px}
.sb-done.is-busy{opacity:.6}
.sb-done.is-done{background:transparent;color:var(--mint);border:1px solid var(--mint);cursor:default}
.sb-said{grid-column:1 / -1;font-size:12px;color:var(--ink3);margin:6px 0 0;min-height:1em}

/* 5: what is coming */
.sb-coming{margin:16px 0 0;padding:12px 0 0;border-top:1px solid var(--line)}
.sb-clock{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 28px}
.sb-clock li{display:flex;flex-direction:column;gap:2px;min-width:0}
.sb-cl-k{font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.sb-cl-v{font:600 .92rem var(--body);color:var(--ink)}

/* the setup, folded under the strip before check 4; a slot still to name stays open */
.sb-setup{margin:12px 0 0;padding:4px 0 0;border-top:1px solid var(--line)}
.sb-setup-s{cursor:pointer;min-height:44px;display:flex;align-items:center;font:600 .88rem var(--body);color:var(--ink2)}
.sb-setup-s:focus-visible{outline:2px solid var(--mint);outline-offset:2px;border-radius:6px}
.sb-check{list-style:none;margin:12px 0 0;padding:10px 0 0;border-top:1px solid var(--line)}
.sb-setup .sb-check{margin:0;padding:0 0 4px;border-top:0}
.sb-ck{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:8px;align-items:center;padding:4px 0}
.sb-ci{width:16px;height:16px;color:var(--ink3)}
.sb-ck.done .sb-ci{color:var(--mint)}
.sb-ck.running .sb-ci{color:var(--gold)}
.sb-cl{font-size:.9rem;color:var(--ink)}
.sb-ck.waiting .sb-cl{color:var(--ink2)}
.sb-cs{font:500 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.sb-ck.running .sb-cs{color:var(--gold)}
@media (prefers-reduced-motion:no-preference){
  .sb-ck.running .sb-ci{animation:sb-pulse 1.6s ease-in-out infinite}
  @keyframes sb-pulse{0%,100%{opacity:1}50%{opacity:.35}}
}

/* ── the part heading over the market, and the market's folded chapters ─────────────────────────────────────── */
.sb-part{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:30px 0 4px;padding:10px 0 0;border-top:1px solid var(--gold-line)}
.sb-part-t{font:700 22px/1.1 var(--disp);color:var(--ink)}
.sb-part-n{font:500 10.5px var(--mono);letter-spacing:.06em;color:var(--ink3)}
.sb-readings h2 .sb-part-n{margin-left:10px}
.rep-card.sb-fold h2{cursor:pointer}
.sb-open{margin-left:auto;font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mint);background:transparent;border:1px solid var(--mint-soft);border-radius:999px;padding:4px 10px;cursor:pointer;min-height:28px}
.sb-open:hover,.sb-open:focus-visible{border-color:var(--mint);outline:none}
.rep-card.sb-fold h2{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
/* shut on screen in the Friendly view only: the Technical view and paper keep every chapter open */
@media screen{
  body.rep-friendly .rep-card.sb-shut>:not(h2){display:none !important}
  body.rep-friendly .rep-card.sb-shut{padding-bottom:0}
  body:not(.rep-friendly) .sb-open{display:none}
}
.sb-basehost{margin:4px 0 8px}

/* a market of the plan still to name (the owner's rulings of 24 Sep): its row, and the short form under it */
.sb-slotrow{list-style:none;padding:2px 0 10px 26px}
.sb-slot-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 10px}
.sb-sf{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 180px}
.sb-sfl{font:500 9.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.sb-sfi{font:500 .9rem var(--body);color:var(--ink);background:var(--surface2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;min-height:38px;width:100%;box-sizing:border-box}
.sb-sfi:focus-visible{outline:2px solid var(--mint-soft);outline-offset:1px;border-color:var(--mint)}
.sb-sfi[aria-invalid="true"]{border-color:var(--bad)}
.sb-sfe{display:block;font:500 .8rem/1.4 var(--body);color:var(--bad);margin-top:2px}
.sb-sfe[hidden]{display:none}
.sb-slot-go{font:600 12px var(--body);color:#10231a;background:var(--mint);border:0;border-radius:999px;padding:9px 16px;cursor:pointer;white-space:nowrap;min-height:38px}
.sb-slot-go:hover,.sb-slot-go:focus-visible{filter:brightness(1.08);outline:2px solid var(--mint-soft);outline-offset:2px}
.sb-slot-go.is-busy{opacity:.6}
.sb-slot-form .sb-said{flex-basis:100%;margin:2px 0 0}
/* the plan itself, and "Change plan" (a live plan's page only) */
.sb-plan{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:12px 0 0;padding:10px 0 0;border-top:1px solid var(--line)}
.sb-plan-t{font:500 10.5px var(--mono);letter-spacing:.04em;color:var(--ink2)}
.sb-plan-go{display:inline-flex;align-items:center;font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mint);background:transparent;border:1px solid var(--mint-soft);border-radius:999px;padding:5px 12px;cursor:pointer;min-height:30px;box-sizing:border-box;text-decoration:none}
.sb-plan-go:hover,.sb-plan-go:focus-visible{border-color:var(--mint);outline:none}
.sb-plan .sb-said{flex-basis:100%;margin:0}


/* the plan's own row, under the card (the redesign: a sales action is not the week's news) */
.sb-plan-row{margin:0 0 6px;padding:8px 2px 0;border-top:0}

@media (min-width:900px){
  .sb-two.both{grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:24px}
}
@media (max-width:700px){
  .sb-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .sb-card{padding:16px 14px 14px;border-radius:12px}
  .sb-card h2.sb-title{font-size:21px}
  .sb-card .sb-headline{font-size:27px;line-height:1.08}
  .sb-sub{font-size:.92rem}
  .sb-tile{padding:11px 11px 9px}
  .sb-tv{font-size:28px}
  .sb-move{grid-template-columns:16px minmax(0,1fr)}
  .sb-ev{grid-column:2;justify-self:start}
  .sb-next{grid-template-columns:minmax(0,1fr)}
  .sb-done{grid-column:1;grid-row:auto;justify-self:start;margin-top:10px}
  .sb-clock{gap:10px 22px}
  .sb-slotrow{padding-left:0}
  .sb-slot-go{flex:1 1 100%}
}
/* TAP TARGETS (28 Sep, audit A's P3-3: "See it" was 38 by 14 px on a phone): a hit area of 44 px around it, which moves
   nothing in the row; a screen's rule alone */
@media screen and (max-width:760px){
  .sb-ev{position:relative}
  .sb-ev::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}
}
@media print{
  .sb-card{border-color:#999;background:#fff}
  .sb-card h2.sb-title,.sb-card .sb-headline,.sb-t,.sb-steptext,.sb-cl,.sb-rname,.sb-tv,.sb-cl-v,.sb-rr,.sb-rv{color:#111}
  .sb-sub,.sb-tl,.sb-why,.sb-rule,.sb-b{color:#333}
  .sb-tile{background:#fff;border-color:#bbb}
  .sb-next{background:#fff;border-color:#bbb}
  .sb-setup:not([open]) .sb-check{display:none}
  .sb-done,.sb-open,.sb-ev,.sb-said,.sb-slotrow,.sb-plan-go,.sb-plan-row{display:none !important}
  .sb-part{border-color:#ccc}
}