/* dailygrand-styles.css
   Product-owned stylesheet for dailygrand. Forked from the platform
   styles.css on 23 Aug 2026 under the owner's directive that styling is no
   longer shareable (PIPELINE.md v2.5). This is a COPY, not an import:
   there is deliberately no @import and no link to the shared file, so a
   change made here cannot reach any other product — and a change made to
   the shared file cannot reach this one. Editing this file affects dailygrand
   and nothing else.
*/

/* Mega Millions Basic controls stay neutral, including Engine and Circles. */
button.worksheet-tab.mega-basic-tab.active { background: #fff; color: #334155; border-color: #cbd5e1; }
button.worksheet-tab.mega-basic-tab:hover, button.worksheet-tab.mega-basic-tab:focus-visible { background: #f1f5f9; color: #0f172a; border-color: #94a3b8; }
:root {
  --ink: #17212b;
  --muted: #64717f;
  --line: #d9e1e8;
  --surface: #ffffff;
  --soft: #f4f7f9;
  --accent: #0f766e;
  --accent-2: #c2410c;
  --accent-3: #2563eb;
  --good: #166534;
}

* { box-sizing: border-box; }
/* CLS hardening: always reserve the scrollbar gutter so toggling the viewport
   scrollbar never reflows the page horizontally. On classic (space-taking)
   scrollbars — most Windows/Linux desktop Chrome/Edge — the age gate and the
   modal scroll-locks set body{overflow:hidden} AFTER first paint, which removes
   the scrollbar and shifts the whole centered layout sideways (a layout shift
   that rolls up into "/"'s CLS via SPA history navigation). Reserving the gutter
   makes those overflow toggles reflow-free. No-op on overlay scrollbars (macOS). */
html { scrollbar-gutter: stable; }
body {
  margin: 0;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f7f3ed;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-header {
  /* 1fr | auto | 1fr: the centre nav sits at TRUE page centre no matter how
     wide the brand (left) or auth links (right) are, and never shifts when
     the right side changes (Admin vs Login/Register vs Account). Owner
     centering rule, 25 Jul 2026. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 18px 28px;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
  position: sticky;
  top: 0;
  z-index: 5;
}
.app-header > .brand { justify-self: start; }
.app-header > .tabs { justify-self: center; }
.app-header > .auth-links { justify-self: end; }

.brand { display: flex; align-items: center; gap: 12px; min-width: 245px; }
.brand-mark {
  width: 44px;
  height: 44px;
  display: block;
  flex: 0 0 44px;
  background: transparent;
  border-radius: 8px;
}
.brand-logo {
  display: block;
  width: 44px;
  height: 44px;
}

/* One knob for the whole brand lock-up: mark, wordmark, TM, BETA pill and
   tagline all scale from it, so the block keeps its proportions and there is a
   single number to change.
     1.00 = the original size
     0.70 = the size the owner chose (31 Jul 2026) — a 30% reduction
   0.30 was rendered first, as the literal reading of "reduce by 70%". It put a
   7px wordmark and 3.3px tagline next to 16px nav links: smaller than the menu
   beside it, and below the readable floor this audit set everywhere else. The
   owner picked 0.70 after seeing both. */
:root { --brand-scale: 0.70; }
.brand h1 { margin: 0; font-size: 18px; letter-spacing: 0; }
.brand p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.brand-logo-full { display: block; height: 40px; width: auto; max-width: 240px; }
.brand-icon { display: block; height: calc(28px * var(--brand-scale, 1)); width: auto; flex: 0 0 auto; }
.brand-stack { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
.brand-wordmark-row { display: inline-flex; align-items: flex-start; }
/* The name column: the wordmark with its caption directly beneath. Its width is
   set by the wordmark image alone, which is exactly what the caption justifies
   against — the ™ and Beta pill are row-siblings OUTSIDE this column, so they
   cannot widen the caption's span. (owner, 31 Jul 2026: "the brand name is
   lotolens and the beta is not a part of it") */
.brand-name-col { display: inline-flex; flex-direction: column; gap: 2px; }
.brand-tm { font-size: calc(8px * var(--brand-scale, 1)); font-weight: 800; line-height: 1; margin: 1px 0 0 1px; color: var(--ink); }
.brand-wordmark {
  display: block;
  /* width:0 + min-width:100% — the same anti-circularity trick the caption
     used, now on the IMAGE: it must take the column's width without CONTRIBUTING
     its own intrinsic 222px to it, or the column inflates to the image instead
     of to the caption. height:auto keeps the aspect ratio from the width/height
     attributes. */
  width: 0;
  min-width: 100%;
  height: auto;
}
/* Small "Beta" badge beside the wordmark (owner, 26 Jul 2026). Deliberately
   quiet: it labels the product without competing with the logo — brand cyan on
   a 10%-tint pill, uppercase micro-type, aligned to the wordmark's cap height.
   flex:0 0 auto so it can never squeeze the logo, and the header grid keeps the
   nav centred regardless (gotcha 32(g)). */
.brand-beta {
  flex: 0 0 auto;
  align-self: flex-start;
  margin: calc(1px * var(--brand-scale, 1)) 0 0 calc(6px * var(--brand-scale, 1));
  padding: calc(2px * var(--brand-scale, 1)) calc(6px * var(--brand-scale, 1));
  border: 1px solid rgba(0, 151, 174, .35);
  border-radius: 999px;
  background: rgba(0, 151, 174, .10);
  /* was #0097AE at 9px — measured 3.48:1 against the header, under the 4.5:1
     minimum for text this size. Darkened to clear it. (31 Jul 2026) */
  color: #00707F;
  font-size: calc(11px * var(--brand-scale, 1));
  font-weight: 800;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand .brand-tagline {
  margin: 0;
  /* was 8px — smaller than any readable floor on a phone (31 Jul 2026) */
  font-size: calc(11px * var(--brand-scale, 1));
  font-weight: 600;
  letter-spacing: 0;
  color: #1f3a5f;
  white-space: nowrap;
  line-height: 1;
  /* The dependency runs CAPTION -> NAME, not the other way. The caption sits
     at its natural size and spacing and sets the .brand-name-col width; the
     wordmark image is width:100% of that column, so "LotoLens" grows until it
     is exactly as long as "Lottery Data Analysis" (owner, 31 Jul 2026: the
     previous version squeezed the caption down to the name, which made the
     name look small — they wanted the NAME enlarged to the caption). The ™ and
     Beta pill sit outside the column and add nothing to the measurement.
     --brand-scale still scales the whole lock-up through this font-size. */
}
.brand-text-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.tabs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.tab {
  border: 1px solid var(--line);
  background: white;
  color: var(--ink);
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 650;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.2;
}
/* Softer, on-brand selected state (brand navy instead of near-black). */
.tab.active { background: #042A63; color: white; border-color: #042A63; }
/* Header nav is TEXT-ONLY (owner, 25 Jul 2026, OpenAI-style): no boxes, blends
   with the white header. Scoped to .tabs so buttons elsewhere that reuse .tab
   (e.g. My Products in .auth-links) keep their outlined look. The border stays
   1px transparent and weight/padding never change, so nothing shifts. */
.tabs .tab { border-color: transparent; background: transparent; color: #46545f; }
.tabs .tab:hover { background: rgba(4, 42, 99, .06); color: var(--ink); }
.tabs .tab.active {
  background: transparent;
  border-color: transparent;
  color: #042A63;
  text-decoration: underline 2px #042A63;
  text-underline-offset: 7px;
}

/* width:100% is load-bearing for CLS, not cosmetic. <body> is a flex column and
   this rule's `margin: 0 auto` gives <main> auto cross-axis margins, which in a
   flex item SUPPRESS the default stretch — so an EMPTY app-shell <main> (before
   app.js fills the .view sections) shrinks to just its padding (~48px wide) and
   centres itself, then snaps to full width when content renders. That horizontal
   snap of the whole content column is a large layout shift on every landing-page
   load (measured CLS ~0.34 at a 756px viewport, main 48px×centred → full width).
   An explicit width:100% keeps <main> full-width (capped by max-width) whether
   empty or full, so there is no snap. */
main { width: 100%; max-width: 1220px; margin: 0 auto; padding: 24px; }
/* Reserve the scrollbar's width at all times so centred content sits at the
   same x-position on every page — without this, pages without a scrollbar
   render ~15px to the right of pages with one, so the layout visibly jumps
   when navigating (owner centering rule, 25 Jul 2026). */
html { scrollbar-gutter: stable; }
/* CLS fix: the app-shell (index.html) ships EMPTY .view sections that app.js
   fills client-side, so before the JS runs the footer paints just under the
   header and then jumps ~800px down — a large layout shift on nearly every
   landing-page load. Reserve ~viewport height for the shell main so the footer
   starts below the fold; once the real content renders (always taller) this
   min-height is inert, so the rendered page is unchanged. server-rendered
   pages (main.server-page) already have their content in the HTML and are
   excluded. Reserve a full viewport (not 100vh − 48px): the header is ~74px,
   not 48px, so the old value left the empty-shell footer only ~26px below the
   fold and depended on the header's exact height. A flat 100vh keeps the empty
   shell taller than the viewport regardless of header height, so a scrollbar is
   reserved from first paint (no scrollbar-appearance reflow on hydration) and
   the footer stays well below the fold. Inert once the taller real content
   renders, so the finished page is pixel-identical. */
main:not(.server-page) { min-height: 100vh; }
.auth-links {
  display: flex;
  align-items: center;
  gap: 10px;
}
.auth-links a,
.auth-links button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}
.auth-links form {
  margin: 0;
}
/* Highlight the current page's link (Login/Register) to match the active tab. */
.auth-links a.active { background: #042A63; color: #fff; border-color: #042A63; }
/* Right-side split (owner, 25 Jul 2026): navigation-like links are TEXT
   (Login, My Products, Logout — same quiet style as the centre nav) and
   Register is THE one filled navy CTA in the header. Account chip and Admin
   keep their existing looks. Geometry never changes — colours only. */
.auth-links a[href$="/auth/login"],
.auth-links .tab[data-nav="products"],
.auth-links form button {
  border-color: transparent; background: transparent; color: #46545f;
}
.auth-links a[href$="/auth/login"]:hover,
.auth-links .tab[data-nav="products"]:hover,
.auth-links form button:hover {
  background: rgba(4, 42, 99, .06); color: var(--ink);
}
.auth-links a[href$="/auth/login"].active {
  background: transparent; border-color: transparent; color: #042A63;
  text-decoration: underline 2px #042A63; text-underline-offset: 7px;
}
.auth-links a[href$="/auth/register"] { background: #042A63; border-color: #042A63; color: #fff; }
.auth-links a[href$="/auth/register"]:hover { background: #0a3a80; border-color: #0a3a80; }
/* Admin button/tab is hidden until the 7639 code is typed (handled in app.js,
   which adds .revealed). Targeted by href/data-view so NO template change is
   needed. The surrounding flex gap collapses when hidden, so the menu spacing
   stays correct either way. */
.auth-links a[href*="/admin"]:not(.revealed),
.tabs .tab[data-view="admin"]:not(.revealed) { display: none; }
.auth-links a.account-nav-tier-pro,
.auth-links a.account-nav-tier-pro:hover,
.auth-links a.account-nav-tier-pro.active {
  border-color: #a81d1d;
  color: #9b1b1b;
  background: #fff;
}
.auth-links a.account-nav-tier-pro,
.auth-links a.account-nav-tier-pro:hover,
.auth-links a.account-nav-tier-pro.active {
  border-color: #a81d1d;
  color: #9b1b1b;
  background: #fff;
}
.auth-links a.account-nav-tier-pro.account-nav-super-trial,
.auth-links a.account-nav-tier-pro.account-nav-super-trial:hover,
.auth-links a.account-nav-tier-pro.account-nav-super-trial.active {
  color: #6b3f00;
  background: linear-gradient(#fff8e1, #fff8e1) padding-box,
    linear-gradient(135deg, #7a1616 0%, #c12828 22%, #f0c75e 46%, #fff1b8 58%, #c89322 76%, #7a1616 100%) border-box;
}
/* Account tab: a small secondary access label ("Pro · USA Powerball trial")
   stacked under "Account". It inherits the tier colour from the link, stays
   small, and wraps onto a second line instead of widening the tab. */
.auth-links a.account-nav-has-sub {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
  padding-top: 5px;
  padding-bottom: 5px;
}
.auth-links a.account-nav-has-sub .account-nav-sub {
  font-size: 10.5px;
  font-weight: 700;
  opacity: 0.92;
  white-space: normal;
  max-width: 160px;
  margin-top: 1px;
}
/* Account page: canonical access label (level + trial/standard + product scope),
   coloured by tier to match the Pro badge. */
.account-scope-line { margin: 3px 0 0; font-size: 15px; font-weight: 800; }
.account-scope-line.account-scope-pro { color: #9b1b1b; }
.account-scope-line.account-scope-pro { color: #9b1b1b; }
/* Super Trial keeps its own distinct gold, matching the Account badge/tab. */
.account-scope-line.account-scope-super { color: #6b3f00; }
.server-page {
  max-width: 980px;
  margin: 32px auto 48px;
}
.auth-panel,
.account-panel {
  max-width: 760px;
  margin: 0 auto;
}
.auth-form {
  display: grid;
  gap: 16px;
  max-width: 460px;
}
.auth-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-weight: 800;
}
.auth-form input {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--ink);
  font: inherit;
}
.flash-panel {
  margin-bottom: 18px;
}
.flash-panel p,
.server-note {
  margin: 0;
  color: var(--muted);
}
.account-access-panel {
  margin-top: 18px;
}
.account-link-button {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.billing-success-return {
  margin-top: 22px;
}
.admin-panel {
  max-width: 1180px;
  margin: 0 auto;
}
.admin-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
}
.admin-nav a,
.admin-nav button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 8px 11px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}
.admin-nav a.active {
  background: #042A63;
  border-color: #042A63;
  color: #fff;
}
.admin-nav form,
.admin-actions form {
  margin: 0;
}
.admin-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}
.admin-stats .metric {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.admin-subpanel {
  margin-top: 16px;
}
.admin-subpanel {
  padding: 24px;
}
.admin-subpanel h3 {
  margin: 0 0 20px;
}
.admin-subpanel p {
  margin: 0 0 28px;
  line-height: 1.7;
}
.admin-subpanel .account-link-button {
  display: inline-block;
  margin-top: 8px;
}
.admin-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.admin-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  background: #fff;
}
.admin-table th,
.admin-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}
.admin-table th {
  background: #eaf1f6;
  color: #334155;
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.admin-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.admin-actions a,
.admin-actions button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 7px 10px;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}
.admin-actions button.admin-danger {
  border-color: #e6b3b3;
  color: #b3261e;
}
.admin-actions button.admin-danger:hover {
  background: #fdeceb;
  border-color: #d9534f;
}

/* --- Draw Schedule tab ---------------------------------------------------- */
.schedule-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 16px;
}
.schedule-toolbar label { font-weight: 800; color: #334155; }
.schedule-toolbar select {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  background: #fff;
  max-width: 100%;
}
.schedule-toolbar-note { color: var(--muted); font-size: 13px; }
.schedule-table { min-width: 1180px; }
.schedule-table th {
  white-space: nowrap;
  vertical-align: bottom;
  font-size: 11.5px;
}
.schedule-table td {
  vertical-align: top;
  font-size: 14px;
  line-height: 1.45;
}
.schedule-table tbody tr:hover { background: #f8fafc; }
.schedule-table .schedule-product strong { font-size: 15px; }
.schedule-table .num-cell {
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: #334155;
}
.schedule-table .nowrap-cell,
.schedule-table .schedule-day { white-space: nowrap; }
.schedule-table .tz-cell { min-width: 148px; color: #475569; }
.schedule-table .next-draw-cell { min-width: 258px; }
.next-draw-line { display: flex; gap: 10px; align-items: baseline; white-space: nowrap; }
.next-draw-line + .next-draw-line { margin-top: 6px; }
.ndl-tag {
  flex: 0 0 54px;
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}
.ndl-val { font-weight: 600; }
.schedule-table .next-draw-line:first-child .ndl-val { font-weight: 700; }
.schedule-table .verify-note { color: var(--muted); font-size: 12px; margin-top: 4px; font-style: italic; max-width: 220px; }
.schedule-actions { flex-wrap: wrap; min-width: 128px; }
.schedule-actions a,
.schedule-actions button { white-space: nowrap; }

.schedule-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
.schedule-badge.status-active { color: #166534; background: #dcfce7; }
.schedule-badge.status-future { color: #1d4ed8; background: #eaf1ff; }
.schedule-badge.status-expired { color: #92400e; background: #fef3c7; }
.schedule-badge.status-inactive { color: #475569; background: #e8edf2; }
.schedule-badge.status-configuration-error { color: #9b1b1b; background: #fbeaea; }

/* Edit form */
.schedule-form { margin-top: 8px; }
.schedule-fieldset {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0 0 18px;
}
.schedule-fieldset legend { font-weight: 850; padding: 0 6px; }
.schedule-fieldset .field-hint { color: var(--muted); font-size: 13px; margin: 0 0 8px; }
.weekday-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 6px 14px;
}
.weekday-option { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.weekday-option input { width: auto; }
.schedule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.schedule-grid label { display: flex; flex-direction: column; gap: 6px; font-weight: 800; color: #334155; }
.schedule-grid input {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 11px;
  font: inherit;
}
.schedule-grid .field-hint { font-weight: 500; color: var(--muted); font-size: 12px; }
.schedule-active-toggle { flex-direction: row !important; align-items: center; gap: 8px; }
.schedule-active-toggle input { width: auto; }
.schedule-form-actions { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.schedule-verify-form {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.schedule-verify-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 800; color: #334155; flex: 1 1 320px; }
.schedule-verify-form input { border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; font: inherit; }

/* Responsive: stack the schedule table into cards on narrow screens. */
@media (max-width: 720px) {
  .schedule-table { min-width: 0; }
  .schedule-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .schedule-table, .schedule-table tbody, .schedule-table tr, .schedule-table td { display: block; width: 100%; }
  .schedule-table tr {
    border-bottom: 2px solid var(--line);
    padding: 6px 0;
  }
  .schedule-table td {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid #eef2f6;
    padding: 9px 14px;
    text-align: right;
  }
  .schedule-table td::before {
    content: attr(data-label);
    font-weight: 850;
    color: #334155;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .03em;
    text-align: left;
  }
  .schedule-table td.schedule-actions { justify-content: flex-start; }
  /* Let long values wrap on mobile instead of forcing horizontal overflow. */
  .schedule-table .nowrap-cell,
  .schedule-table .schedule-day,
  .next-draw-line { white-space: normal; }
  .schedule-table .num-cell { text-align: right; }
  .schedule-table .verify-note { max-width: none; }
  .next-draw-cell { min-width: 0; }
  .schedule-table td.next-draw-cell { flex-direction: column; align-items: flex-end; gap: 6px; }
  .schedule-table td.next-draw-cell::before { align-self: flex-start; }
  .next-draw-line { flex-direction: column; gap: 1px; align-items: flex-end; text-align: right; }
  .ndl-tag { flex-basis: auto; }
  .weekday-grid { grid-template-columns: 1fr 1fr; }
}
/* Password field with a show/hide eye toggle */
.pw-field { position: relative; display: block; }
.pw-field input { width: 100%; box-sizing: border-box; padding-right: 42px; }
.pw-toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; padding: 4px; margin: 0; cursor: pointer;
  color: #7a8794; display: inline-flex; align-items: center; line-height: 0;
}
.pw-toggle:hover { color: var(--ink); }
.pw-toggle svg { width: 20px; height: 20px; display: block; }
.field-hint { display: block; margin: -4px 0 4px; color: var(--muted); font-size: 12.5px; }
.admin-draw-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 14px;
}
.admin-draw-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-weight: 800;
}
.admin-draw-form input {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--ink);
  font: inherit;
}
.admin-draw-form input.field-invalid {
  border-color: #dc2626;
  background: #fff5f5;
}
.draw-range-popup {
  margin-top: 14px;
  max-width: 420px;
  border: 1px solid #f2c9c9;
  border-radius: 14px;
  background: #fff7f7;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
  padding: 12px 14px 14px;
}
.draw-range-popup.hidden {
  display: none !important;
}
.draw-range-popup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.draw-range-popup-head strong {
  color: #9f3a3a;
  font-size: 13px;
  font-weight: 850;
}
.draw-range-popup p {
  margin: 0;
  color: #5a2830;
  line-height: 1.45;
  font-weight: 650;
}
.draw-range-popup-close {
  border: 0;
  background: transparent;
  color: #9f3a3a;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.admin-form-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, .75fr);
  gap: 24px;
  align-items: stretch;
  padding: 30px;
  background: #fffaf1;
  border-bottom: 1px solid var(--line);
}
.eyebrow { color: var(--accent); font-size: 13px; font-weight: 800; text-transform: uppercase; }
.hero h2 { margin: 8px 0 10px; font-size: 42px; line-height: 1.05; letter-spacing: 0; max-width: 760px; }
.hero p { color: #475569; max-width: 790px; font-size: 17px; line-height: 1.55; margin: 0; }

.view { display: none; padding-top: 24px; }
.view.active { display: block; }
.dashboard-view { min-height: 760px; }
/* The skeleton must not FLASH (owner report, 2 Aug 2026 — "a silver flash,
   then the page loads"). On a warm load the engine replaces this within a
   couple of hundred milliseconds, so the shimmer appeared for one blink and
   read as a glitch. It now starts invisible and only fades in if the load is
   still running after 450ms — a fast load shows nothing, a slow one still
   gets its progress indicator. Powerball Australia is the only template that
   ships this skeleton. */
.dashboard-loading {
  padding-top: 26px;
  opacity: 0;
  animation: dashboard-loading-appear .2s ease-out .45s forwards;
}
@keyframes dashboard-loading-appear { to { opacity: 1; } }
.dashboard-loading-title,
.dashboard-loading-metrics span,
.dashboard-loading-workbook {
  background: linear-gradient(90deg, #edf1f5 25%, #f8fafc 50%, #edf1f5 75%);
  background-size: 200% 100%;
  animation: dashboard-loading-shimmer 1.4s ease-in-out infinite;
  border-radius: 8px;
}
.dashboard-loading-title { width: min(360px, 70%); height: 34px; margin: 0 0 18px; }
.dashboard-loading-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.dashboard-loading-metrics span { height: 128px; }
.dashboard-loading-workbook { height: 430px; margin-top: 20px; }
@keyframes dashboard-loading-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .dashboard-loading-title,
  .dashboard-loading-metrics span,
  .dashboard-loading-workbook { animation: none; }
}
.grid { display: grid; gap: 16px; }
.grid.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.panel, .metric, .product-card, .draw-card, .journey-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
}
.journey-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  background: #12312e;
  color: white;
}
.journey-card span { color: #a7f3d0; font-size: 13px; font-weight: 800; text-transform: uppercase; }
.journey-card strong { font-size: 24px; line-height: 1.15; }
.journey-card p { color: #d7fff1; font-size: 14px; margin: 0; }

/* ===== Landing page (lp-) — value-first, single-product launch ===== */
.lp-honest-line { margin-top: 14px; font-size: 14px; }
.lp-honest-line a { color: var(--accent); font-weight: 700; text-decoration: none; }
.lp-honest-line a:hover { text-decoration: underline; }
.lp-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.lp-cta-row .primary-action, .lp-cta-row .secondary-action { font-size: 15px; padding: 12px 22px; }
.lp-proof { gap: 12px; justify-content: flex-start; }
.lp-proof-stats { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 9px; }
.lp-proof-stats li { color: #d7fff1; font-size: 14.5px; line-height: 1.3; padding-left: 20px; position: relative; }
.lp-proof-stats li::before { content: "✓"; position: absolute; left: 0; color: #6ee7b7; font-weight: 900; }
.lp-proof-stats li b { color: #fff; font-weight: 850; }
/* "Pro" links to Plans and Pricing. Every other emphasised word in this list is
   bold white, so bold alone would not read as clickable — the mint tint and the
   underline are what mark it, and they must survive `li b`'s white. */
.lp-proof-stats a { color: #6ee7b7; text-decoration: underline; text-underline-offset: 2px;
  text-decoration-thickness: 1.5px; border-radius: 3px; }
.lp-proof-stats a b { color: inherit; }
.lp-proof-stats a:hover { color: #a7f3d0; }
.lp-proof-stats a:focus-visible { outline: 2px solid #6ee7b7; outline-offset: 2px; text-decoration: none; }
.lp-proof-draw { margin-top: 4px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.15); }
.lp-proof-draw .latest-draw-line { color: #eafff7; }
.lp-proof-draw .draw-main-numbers { color: #eafff7; font-weight: 700; }
.lp-proof-draw .draw-separator { color: rgba(255,255,255,.4); }

.lp-tiers .lp-tier { position: relative; display: flex; flex-direction: column; }
.lp-tier h4 { margin: 0 0 6px; font-size: 19px; color: var(--ink); }
.lp-tier-price { margin: 0 0 12px; font-size: 26px; font-weight: 900; color: var(--ink); }
.lp-tier-price small { font-size: 14px; font-weight: 700; color: var(--muted); }
.lp-tier-price em { font-size: 13px; font-weight: 700; color: var(--muted); font-style: normal; }
.lp-tier-note { margin: 0; color: #475569; font-size: 14px; line-height: 1.5; }
.lp-tier-pro { border-color: #a81d1d; background: #fff; }
/* Pro heading — true shiny gold: a bright metallic light-streak, not flat brown-gold */
.lp-tier-pro h4 {
  color: #9b1b1b;
  -webkit-text-fill-color: #9b1b1b;
}
.lp-tier-badge { position: absolute; top: -11px; right: 16px; background: linear-gradient(120deg,#7a1414,#b82828 42%,#d84a4a 50%,#b82828 58%,#7a1414); color: #ffffff; font-size: 11px; font-weight: 850; letter-spacing: .03em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 6px rgba(74,8,8,.4); text-shadow: 0 1px 0 rgba(255,255,255,.3); }
.lp-tiers-foot { display: flex; justify-content: center; margin: 16px 0 4px; }
.lp-roadmap-card { cursor: default; }
.lp-roadmap-card.lp-roadmap-live { border-color: var(--good); background: #f2fbf5; }
.lp-roadmap-card.lp-roadmap-live small { color: var(--good); font-weight: 800; }
.lp-roadmap-card.lp-roadmap-live strong { color: var(--good); }
/* World-level country finder: available = green, coming-soon still clickable */
.country-card.lp-roadmap-live { border-color: var(--good); background: #f2fbf5; }
.country-card.lp-roadmap-live small { color: var(--good); font-weight: 800; }
.country-card.lp-finder-soon small { color: var(--muted); }
/* Countries with no live product yet: greyed and non-clickable */
.country-card.lp-finder-off { cursor: default; background: #f4f7f9; opacity: .68; }
.country-card.lp-finder-off strong,
.country-card.lp-finder-off small { color: var(--muted); }
/* Breadcrumb / back navigation between levels */
.lp-crumb { margin: 4px 0 12px; }
.lp-back { background: none; border: 0; color: var(--accent); font-weight: 800; font-size: 14px; cursor: pointer; padding: 6px 2px; }
.lp-back:hover { text-decoration: underline; }
/* Country-page access options */
.lp-access-card h4 { margin: 0 0 6px; font-size: 17px; color: var(--ink); }
.lp-access-card p { margin: 0; color: #475569; font-size: 14px; line-height: 1.5; }
/* Coming-soon product rows are non-interactive */
.product-row-soon { cursor: default; opacity: .82; }
.lp-soon-eta { margin: 12px 0 0; font-weight: 800; color: var(--accent-2); }
.metric span, .panel-label { display: block; color: var(--muted); font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.metric strong { display: block; font-size: 28px; line-height: 1.1; }
.metric small { color: var(--muted); }
.latest-draw-line { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
/* Products without a powerball (e.g. Sweden Lotto) have no 24px chip to centre
   against, so the numbers line renders exactly like the plain inline date small,
   keeping its baseline level with the "Jul 8, 2026" date in the neighbouring
   tiles instead of riding a couple of pixels high inside a flex box. */
.latest-draw-line:not(:has(.powerball-chip)) { display: inline; }
.draw-main-numbers { color: var(--muted); font-weight: 400; white-space: nowrap; }
.draw-separator { color: var(--muted); font-style: normal; }
.powerball-chip { width: 24px; height: 24px; flex: 0 0 auto; box-sizing: border-box; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--special-ball-bg, #00B0F0); color: #fff; font-size: 12px; font-weight: 800; line-height: 1; }

/* South Korea Lotto S1 uses the owner's supplied accent in both the Engine
   cells and the latest-results tile; other products retain their own colours. */
.oz-dashboard-page.kr-dashboard-page .source-data-sheet .supp-circle,
.oz-dashboard-page.kr-dashboard-page .latest-result-card .powerball-chip { background: #abf7b1; color: #17212b; }
/* Canada Lotto 6/49 — maple-red accent on brand NUMBER-CIRCLE elements only
   (gotcha #18: the chrome stays shared teal). The Bonus circle in the Engine
   grid and the Bonus chip on the Latest Draw card wear the product accent. */
.oz-dashboard-page.ca-dashboard-page .source-data-sheet .supp-circle,
.oz-dashboard-page.ca-dashboard-page .latest-result-card .powerball-chip { background: #DC2626; color: #ffffff; }

.section-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin: 26px 0 12px;
}
.section-title h3 { margin: 0 0 8px; font-size: 22px; }
.section-title p { margin: 0; color: var(--muted); }
.section-title.compact { margin-top: 0; }
/* Per-product "Buy Pro" CTA (owner, 25 Jul 2026): sits at the RIGHT edge of the
   dashboard title row — the same edge as the stats tiles below — and on the SAME
   baseline as the product title (.section-title is already
   flex/space-between/align-items:end, so the button is simply its 2nd child).
   Wears the flat deep-red Pro chrome (gotcha 32e). Hidden for users who already
   hold Pro on the product. */
.dashboard-buy-btn {
  flex: 0 0 auto;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  border: 1.5px solid #a81d1d;
  border-radius: 8px;
  background: #fff;
  color: #9b1b1b;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  /* The row aligns items to the WRAPPER's bottom, which sits one title
     bottom-margin below the title text. Mirroring that margin on the button
     puts it dead-centre on the title line — measured 0px offset on both
     families (owner: "same line as the title, like a ruler across it").
     app.js family: h3, margin 0 0 8px. */
  margin-bottom: 8px;
}
/* Oz-family dashboards use an h2 at 32px, whose default bottom margin is
   0.83em = 26.5px. Measured 0px offset with this value. */
.oz-dashboard-page .dashboard-buy-btn { margin-bottom: 26.5px; }
.dashboard-buy-btn:hover { background: #fdf2f2; }
.country-heading { display: flex; align-items: center; gap: 18px; }
.country-flag { display: inline-flex; width: 76px; height: 52px; filter: drop-shadow(0 2px 2px rgba(23, 33, 43, .1)); }
.country-flag svg { width: 100%; height: 100%; overflow: visible; }
/* Australia's photographic flag (animated WebP + reduced-motion PNG fallback).
   Its own class, NOT .country-flag: that one carries a drop-shadow and 76x52,
   and this asset must render bare — no background, border, shadow or rounding.
   The heading row (.country-heading, flex + align-items:center + gap) already
   supplies the vertical alignment and spacing, so this only sets the box. */
.country-flag--photo { display: inline-flex; width: 58px; height: 40px; flex: 0 0 auto; }
.country-flag--photo picture { display: block; width: 100%; height: 100%; }
.country-flag--photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* The small country rows (My Products / Favourites / add-product picker) size
   their flags at 26px via ".acct-flag svg" — a rule an <img> never matches, so
   without this the photo flag would render heading-sized inside a 26px slot. */
.acct-flag .country-flag--photo { width: 26px; height: 18px; }
.country-flag .flag-pole { stroke: #6b7280; stroke-width: 2.2; stroke-linecap: round; }
.country-flag .flag-cloth { transform-box: fill-box; transform-origin: left center; transform-style: preserve-3d; filter: url(#flag-wave); animation: flag-breeze 2.6s ease-in-out infinite; }
.country-flag .flag-field { fill: #002868; stroke: rgba(23, 33, 43, .2); stroke-width: .8; }
.country-flag .union { fill: #012169; }
/* Union Jack: WHITE fimbriation underneath (wide), RED crosses on top (narrow)
   — the correct layering; it was inverted (red under white) until 24 Jul 2026. */
.country-flag .union-cross-red { stroke: #c8102e; stroke-width: 2.6; }
.country-flag .union-cross { stroke: #fff; stroke-width: 5.2; }
.country-flag .union-cross::after { content: none; }
.country-flag .star { fill: #fff; }
.country-flag .commonwealth { transform: translateY(1px); }
.country-flag .flag-fold { stroke: rgba(255,255,255,.18); stroke-width: 2.5; opacity: .55; mix-blend-mode: screen; }
@keyframes flag-breeze {
  0%, 100% { transform: skewY(0deg) rotateY(0deg) scaleX(1); }
  18% { transform: skewY(3deg) rotateY(-10deg) scaleX(.94); }
  42% { transform: skewY(-2deg) rotateY(8deg) scaleX(.98); }
  67% { transform: skewY(2.5deg) rotateY(-7deg) scaleX(.95); }
  86% { transform: skewY(-1deg) rotateY(4deg) scaleX(.99); }
}
@media (prefers-reduced-motion: reduce) {
  .country-flag .flag-cloth { animation: none; }
}
#dashboard .section-title.dashboard-title {
  margin-top: 12px;
}
#dashboard .section-title.dashboard-title h2,
#dashboard .section-title.dashboard-title h3 {
  font-size: 32px;
  line-height: 1.15;
}
.section-title.dashboard-title .dashboard-eyebrow {
  margin: 0 0 4px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* The country name is a link back to that country's product list (owner,
   26 Jul 2026). It must look EXACTLY as it did — no button chrome, no
   underline at rest — and only reveal itself as clickable on hover, so the
   heading block is unchanged visually. Inherits the eyebrow's colour so it
   stays correct in both themes. */
.section-title.dashboard-title .dashboard-eyebrow a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  /* The link itself was a 17px-tall target. Padding gives it the 24px minimum
     without changing how the heading looks. (31 Jul 2026) */
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.section-title.dashboard-title .dashboard-eyebrow a:hover,
.section-title.dashboard-title .dashboard-eyebrow a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.country-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.country-card {
  border: 1px solid var(--line);
  background: white;
  border-radius: 8px;
  padding: 18px;
  text-align: left;
  cursor: pointer;
  min-height: 128px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.country-card span { font-size: 22px; font-weight: 850; }
.country-card strong { color: var(--accent); }
.country-card small { color: var(--muted); }
.country-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .13);
}

.catalogue-layout {
  display: grid;
  grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr);
  gap: 18px;
  margin-top: 22px;
}
.product-list { display: grid; gap: 10px; }
.product-row {
  border: 1px solid var(--line);
  background: #fbfcfd;
  border-radius: 8px;
  padding: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  cursor: pointer;
}
.product-row span { display: grid; gap: 3px; }
.product-row small { color: var(--muted); }
.product-row em {
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
  color: var(--accent);
  background: #eef6f4;
  padding: 5px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.product-row em.future { color: var(--accent-2); background: #fff2e7; }
.product-row.selected { border-color: var(--accent-3); background: #eff6ff; }

/* Single-product launch: muted "coming soon" cards + product stage badges. */
.country-card-soon { cursor: default; opacity: .72; background: #f6f8fa; border-style: dashed; }
.country-card-soon strong { color: var(--muted); }
.prod-badge.available { color: var(--accent); background: #eef6f4; }
.prod-badge.dev { color: #1d4ed8; background: #eaf1ff; }
.prod-badge.soon { color: var(--accent-2); background: #fff2e7; }
.panel-soon { opacity: .74; background: #f6f8fa; border-style: dashed; }
.soon-tag { font-size: 11px; font-weight: 800; color: var(--accent-2); background: #fff2e7; padding: 2px 8px; border-radius: 999px; vertical-align: middle; margin-left: 6px; }
.product-card-soon { opacity: .82; border-style: dashed; }
/* Analysis-tab count split by tier (Basic / Pro). */
/* Reconciles the "Analysis Tabs" headline with the tab strip: the Conclusion is
   counted but drawn as its own quick-nav button, so the strip is one short. */
/* ⛔ THE VEIL WAS THE WHOLE DEFECT. `opacity:.72` over --muted composited to
   2.90:1 in light and 4.19:1 in dark against a 4.5:1 floor, on a 12px line that
   renders on EVERY tab ("… includes the Conclusion"). The colour was never
   wrong; the veil on top of it was. Removing the veil and changing no colour
   at all takes it to 4.99:1 light / 6.68:1 dark. Found by
   scripts/probe_dailygrand_colour_contrast.mjs (R2), which folds every
   ancestor opacity into the ratio — the reason it saw this and four earlier
   sweeps did not. */
.tab-count-note { display: block; margin-top: 4px; font-size: 12px; }
.tab-tier-split { display: flex; flex-wrap: nowrap; gap: 4px; margin-top: 6px; }
.tab-tier-split b { font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 999px; white-space: nowrap; }
.tab-tier-split .tt-basic { color: #475569; background: #eef2f6; }
.tab-tier-split .tt-pro { color: #9b1b1b; background: #fbeaea; }
.tab-tier-split .tt-pro { color: #9b1b1b; background: #fbeaea; }

.detail-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0;
}
.detail-stats div {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}
.detail-stats span { display: block; color: var(--muted); font-size: 12px; font-weight: 800; }
.detail-stats strong { display: block; margin-top: 4px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.primary-action, .secondary-action {
  border: 1px solid var(--ink);
  border-radius: 8px;
  padding: 10px 13px;
  font-weight: 800;
  cursor: pointer;
}
.primary-action { background: var(--ink); color: white; }
.secondary-action { background: white; color: var(--ink); border-color: var(--line); }
.secondary-action:disabled { color: var(--muted); cursor: not-allowed; }

/* Small "back to country list" arrow next to the country name — same dark,
   rounded look as the Open Dashboard button, about a quarter of the size. */
.country-heading { display: flex; align-items: center; gap: 12px; }
.scroll-up-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; flex: 0 0 auto;
  border: 1px solid var(--ink); border-radius: 9px;
  background: var(--ink); color: #fff; cursor: pointer;
}
.scroll-up-btn:hover { opacity: 0.88; }
.account-action-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.account-action-form { margin: 0; }
.account-action-button {
  width: 190px;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}
.account-link-button { text-decoration: none; }
.account-basic-panel { max-width: none; }
.account-heading-row { align-items: flex-start; }
.account-heading-tier { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 8px; color: #fff; font-size: .72em; line-height: 1; vertical-align: middle; text-decoration: none; cursor: pointer; }
.account-heading-line { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.account-expiry-inline { color: var(--muted); font-size: 14px; font-weight: 750; line-height: 1.2; }
.account-heading-tier-basic { background: #e8eef3; color: #475569; }
.account-heading-tier-basic:hover { background: #dbe5ed; }
.account-heading-tier-pro { background: #a81d1d; }
.account-heading-tier-pro:hover { background: #c43a3a; }
.account-heading-tier-pro { background: #a81d1d; }
.account-heading-tier-pro:hover { background: #c43a3a; }
.account-heading-tier-pro.account-heading-tier-super-trial {
  color: #6b3f00;
  background: linear-gradient(135deg, #a81d1d 0%, #d33d3d 28%, #f0c75e 52%, #fff1b8 64%, #c89322 80%, #8a1717 100%);
}
.account-heading-tier-pro.account-heading-tier-super-trial:hover { background: linear-gradient(135deg, #bd2929 0%, #e04d4d 28%, #f5d779 52%, #fff6cf 64%, #d6a52e 80%, #9e1c1c 100%); }
@media (max-width: 700px) { .account-heading-row { flex-direction: column; } .account-heading-line { gap: 8px; } }
.account-tier-link {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  margin: 0 2px;
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  font-weight: 850;
  line-height: 1;
  vertical-align: middle;
}
.account-tier-pro { background: #a81d1d; }
.account-tier-pro:hover { background: #c43a3a; }
.account-tier-pro { background: #a81d1d; }
.account-tier-pro:hover { background: #c43a3a; }
.account-expiry { display: block; margin-top: -8px; margin-bottom: 14px; color: var(--muted); font-weight: 700; }
.admin-entry-panel { margin-bottom: 18px; }
.admin-product-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.admin-product-tabs a { border: 1px solid var(--line); border-radius: 8px; padding: 9px 14px; color: var(--ink); background: #fff; text-decoration: none; font-weight: 750; }
.admin-product-tabs a:hover { border-color: var(--brand-cyan); }
.admin-product-tabs a.active { color: #fff; background: var(--brand-navy); border-color: var(--brand-navy); }
.draw-entry-form {
  display: grid;
  grid-template-columns: 150px repeat(4, minmax(72px, 1fr));
  gap: 10px;
  align-items: end;
}
.draw-entry-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.draw-entry-form input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 10px;
  color: var(--ink);
  font: inherit;
}
.draw-entry-form input.field-invalid {
  border-color: #dc2626;
  background: #fff5f5;
}
.admin-message {
  margin: 10px 0 0;
  color: var(--accent-2);
  font-weight: 750;
}
.hidden { display: none !important; }
.small-action {
  padding: 6px 8px;
  font-size: 12px;
  margin-right: 6px;
}
.admin-draw-table td:last-child {
  white-space: nowrap;
}
.product-card.subscribed { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(15, 118, 110, .10); }
.latest-draw { margin: 16px 0; }

.workbook-shell {
  margin-top: 18px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: visible;
}
.workbook-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  background: #edf3f7;
  border-bottom: 1px solid var(--line);
}
.workbook-topbar h3 { margin: 0; font-size: 20px; }
.latest-mini {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}
.latest-mini span { color: var(--muted); font-size: 13px; font-weight: 800; margin-right: 4px; }
.latest-mini b {
  min-width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #dfe8ef;
  font-size: 12px;
}
.latest-mini b.power { background: var(--accent-2); color: white; }
.worksheet-tabs {
  display: flex;
  gap: 4px;
  /* The full tab strip is far wider than the viewport (50+ tabs), so it scrolls
     horizontally in its OWN container. The scrollbar was previously HIDDEN
     (scrollbar-width:none) which, combined with macOS/Chrome auto-hiding overlay
     scrollbars, left mouse users with no way to reach the off-screen tabs. Show a
     thin, always-visible horizontal scrollbar so the overflow is reachable. */
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 #e9eef5;
  padding: 10px 10px 0;
  background: #f8fafc;
  border-bottom: 1px solid var(--line);
}
.worksheet-tabs::-webkit-scrollbar {
  height: 9px;
}
.worksheet-tabs::-webkit-scrollbar-track {
  background: #e9eef5;
  border-radius: 6px;
}
.worksheet-tabs::-webkit-scrollbar-thumb {
  background: #94a3b8;
  border-radius: 6px;
}
.worksheet-tabs::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}
.worksheet-tab {
  flex: 0 0 auto;
  min-height: 43px;
  border: 1px solid var(--line);
  border-bottom: 0;
  background: #eef2f5;
  color: #334155;
  border-radius: 7px 7px 0 0;
  padding: 9px 12px;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.worksheet-tab.active {
  background: white;
  color: var(--accent);
  border-color: var(--accent);
}
.worksheet-tab.master-tab-wide {
  position: relative;
  min-width: 88px;
  min-height: 43px;
  padding: 9px 12px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border: 1.5px solid #a81d1d;
  border-bottom: 0;
  background: #eef2f5;
}
.worksheet-tab.master-tab-wide::after { content: none; }
.worksheet-tab.master-tab-wide.active {
  background: #fff;
  border-color: #a81d1d;
}
.worksheet-tab.master-tab-wide .master-tab-main {
  position: relative;
  z-index: 1;
  display: block;
  color: #17212b;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.05;
  text-transform: none;
  white-space: nowrap;
  align-self: center;
  transform: none;
}
.worksheet-tab.master-tab-wide .master-tab-label {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 5px;
  z-index: 1;
  display: block;
  color: #9b1b1b;
  /* was 7.5px — unreadable on a phone; 10px is the floor this audit holds to
     for any text a customer is meant to read (31 Jul 2026) */
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: none;
  white-space: nowrap;
  align-self: center;
  transform: translateY(0);
}
.worksheet-tab.master-tab-compact {
  position: relative;
  min-width: 78px;
  min-height: 43px;
  padding: 9px 12px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border: 1.5px solid #a81d1d;
  border-bottom: 0;
  background: #eef2f5;
}
.worksheet-tab.master-tab-compact::after { content: none; }
.worksheet-tab.master-tab-compact.active {
  background: #fff;
  border-color: #a81d1d;
}
.worksheet-tab.master-tab-compact .master-tab-main {
  position: relative;
  z-index: 1;
  display: block;
  color: inherit;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.05;
  text-transform: none;
  white-space: nowrap;
  align-self: center;
  transform: none;
}
.worksheet-tab.master-tab-compact .master-tab-label {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 5px;
  z-index: 1;
  display: block;
  color: #9b1b1b;
  /* was 7.5px — unreadable on a phone; 10px is the floor this audit holds to
     for any text a customer is meant to read (31 Jul 2026) */
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: none;
  white-space: nowrap;
  align-self: center;
  transform: translateY(0);
}
.worksheet-tab.master-tab-compact.active .master-tab-main,
.worksheet-tab.master-tab-compact.active .master-tab-label {
  color: #9b1b1b;
}
#worksheetPanel { padding: 10px 18px 18px; }

/* Wide analysis content must scroll INSIDE the panel, never push the page.
 *
 * WHY (31 Jul 2026). Measured in a real browser: with any analysis tab open at
 * a 500px viewport, the document was 795px wide — the whole page, header and
 * all, slid sideways by ~295px on a phone. The offenders were the analysis
 * tables (479px) and long <em> notes (430px), neither of which had a
 * horizontally scrollable ancestor, so their width propagated all the way up
 * to <html>.
 *
 * This had never been caught because visual checks were only ever run at
 * desktop width, and a layout-shift score cannot see it: the page is not
 * shifting, it is genuinely too wide.
 *
 * The panel keeps its own horizontal scroll, and its long-word content is
 * allowed to wrap, so nothing escapes the viewport.
 */
#worksheetPanel {
  max-width: 100%;
  /* clip, NOT auto. overflow-x:auto made the panel a scroll container, and the
     worksheet header inside it is position:sticky — a sticky element inside a
     scroll container pins to that box instead of the viewport. On every fork
     product that broke the whole dashboard: a dead gap above the pills, the
     header floating mid-page, and tab content sliding underneath it (owner's
     screenshots, 31 Jul 2026). overflow:clip forbids the panel from pushing
     the page sideways WITHOUT creating a scroll container, so the sticky
     header keeps working. Wide content scrolls in the body wrapper below. */
  overflow-x: clip;
}
/* The scroll container lives BELOW the sticky header: wide analysis content
   pans here, inside the tab body, where there is nothing sticky to break. */
#worksheetPanel .oz-worksheet-body {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
#worksheetPanel table {
  max-width: 100%;
}
/* Prose inside the panel wraps instead of setting a floor on the page width. */
#worksheetPanel p,
#worksheetPanel li,
#worksheetPanel em,
#worksheetPanel small,
#worksheetPanel .note,
#worksheetPanel .empty-state {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.worksheet-header {
  position: sticky;
  top: var(--app-header-h, 80px);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  background: white;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--line);
}
.worksheet-header span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}
.worksheet-header h3 { margin: 0; font-size: 12px; line-height: 1.15; }
.worksheet-header p { margin: 0; color: var(--muted); }
.worksheet-title-with-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
.worksheet-heading-note em {
  left: 100%;
  top: 50%;
  width: 390px;
  max-width: calc(100vw - 48px);
  font-weight: 400;
  line-height: 1.45;
}
.worksheet-note {
  background: #fffaf1;
  border: 1px solid #ead9bd;
  border-radius: 8px;
  padding: 12px;
  color: #60441e;
  margin-bottom: 14px;
  line-height: 1.45;
}
.analysis-hero {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  border-radius: 8px;
  padding: 18px;
  margin-bottom: 16px;
  color: white;
}
.analysis-hero span {
  display: block;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  opacity: .86;
  margin-bottom: 6px;
}
.analysis-hero h4 { margin: 0; font-size: 22px; line-height: 1.15; max-width: 660px; }
.analysis-hero p { margin: 0; color: rgba(255,255,255,.86); max-width: 380px; line-height: 1.45; }
.analysis-hero.data { background: #0f766e; }
.analysis-hero.group { background: #334155; }
.analysis-hero.segment { background: #2563eb; }
.analysis-hero.variation { background: #7c3aed; }
.analysis-hero.number { background: #166534; }
.analysis-hero.powerball { background: #c2410c; }
.analysis-hero.ratio { background: #4338ca; }
.pattern-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.pattern-card {
  border: 1px solid var(--line);
  background: #f8fafc;
  border-radius: 8px;
  padding: 12px;
}
.pattern-card strong { display: block; font-size: 19px; }
.pattern-card span, .pattern-card small { display: block; color: var(--muted); margin-top: 3px; }
.raw-sheet {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}
.raw-sheet summary {
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 850;
}
.raw-sheet .sheet-preview-wrap { border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.heatmap-wrap {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: auto;
  background: white;
}
.heatmap { min-width: 760px; padding: 10px; display: grid; gap: 4px; }
.heat-row { display: grid; grid-template-columns: repeat(10, minmax(58px, 1fr)); gap: 4px; }
.heat-row span {
  min-height: 34px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 750;
  padding: 5px;
  border: 1px solid rgba(15, 23, 42, .08);
}
.empty-state { color: var(--muted); margin: 0; }
.sheet-preview-wrap {
  width: fit-content;
  max-width: 100%;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.sheet-preview {
  border: 0;
  min-width: 820px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.sheet-preview td {
  min-width: 96px;
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  padding: 8px 10px;
}
.sheet-preview tr:first-child td {
  background: #edf3f7;
  font-weight: 800;
}
.worksheet-summary { margin-top: 16px; }

.graph-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  overflow: hidden;
}
.graph-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}
.graph-summary div {
  background: #f8fafc;
  padding: 13px 15px;
}
.graph-summary span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 4px;
}
.graph-summary strong {
  font-size: 16px;
}
/* The "Draw order" box is a clickable toggle (flips the chart oldest<->latest). */
.graph-summary div.graph-order-toggle { cursor: pointer; user-select: none; }
.graph-summary div.graph-order-toggle:hover { background: #eef2f7; }
.graph-order-icon { font-style: normal; color: var(--accent); font-weight: 800; margin-left: 2px; }
.graph-scroll {
  max-width: 100%;
  overflow: auto;
  background: #ffffff;
}
.graph-fixed-title {
  padding: 14px 16px 0 92px;
  color: #17212b;
  font-size: 17px;
  font-weight: 850;
}
.graph-chart-body {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: start;
  background: #ffffff;
}
.graph-axis-svg {
  display: block;
  border-right: 1px solid #94a3b8;
  background: #ffffff;
  position: relative;
  z-index: 2;
}
.source-line-chart {
  display: block;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.graph-title {
  fill: #17212b;
  font-size: 17px;
  font-weight: 850;
}
/* 8px is unreadable on a phone; 10px is the floor the mobile probe holds
   every product to. (31 Jul 2026) */
.graph-axis-label {
  fill: #334155;
  font-size: 10px;
  font-weight: 400;
}
/* Sharper segment/value numbers inside the trajectory axis boxes (bolder + darker).
   Only the box labels carry both classes — the up/down move arrows do not, so they
   keep their own styling. */
.graph-axis-label.graph-axis-option {
  fill: #17212b;
  font-weight: 700;
}
.graph-axis-option {
  cursor: pointer;
}
.graph-axis-option:hover {
  opacity: 0.82;
}
.graph-move-up {
  fill: #2563eb;
  font-weight: 800;
}
.graph-move-down {
  fill: #d1495b;
  font-weight: 800;
}
.graph-date-label {
  fill: #64717f;
  font-size: 10px;
}

.seg-bridge-panel { margin-top: 18px; border: 1px solid #b8c2ce; border-radius: 8px; background: #fff; padding: 18px 24px 20px; }
.seg-bridge-panel .graph-fixed-title { margin-bottom: 6px; }
.seg-bridge-body { display: grid; grid-template-columns: minmax(0, 360px) 1fr; gap: 40px; align-items: start; margin-top: 8px; }
.seg-bridge-subtitle { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 14px; }
.seg-bridge-grid { display: grid; grid-template-columns: 84px 1fr 1fr; gap: 6px; }
.seg-bridge-corner { }
.seg-bridge-colhead { font-size: 11px; font-weight: 800; text-align: center; padding: 4px 0; border-radius: 5px; }
.seg-bridge-colhead.up { color: #2563eb; background: #eaf1fb; }
.seg-bridge-colhead.down { color: #d1495b; background: #fbeef0; }
.seg-bridge-rowhead { font-size: 11px; font-weight: 800; color: #17212b; display: flex; align-items: center; }
.seg-bridge-cell { border-radius: 6px; padding: 10px 8px; text-align: center; border: 1px solid rgba(23,33,43,0.06); }
.seg-bridge-cell.up { background: #eaf1fb; }
.seg-bridge-cell.down { background: #fbeef0; }
.seg-bridge-cell-label { display: block; font-size: 10.5px; font-weight: 700; color: #475569; margin-bottom: 3px; }
.seg-bridge-cell strong { font-size: 20px; font-weight: 850; color: #17212b; }
.seg-bridge-cell i { font-style: normal; font-size: 11px; font-weight: 700; color: var(--muted); margin-left: 5px; }
.seg-bridge-summary { margin: 14px 0 0; font-size: 13px; color: #2b3a3a; line-height: 1.55; }
.seg-bridge-summary b { color: #17212b; }
.seg-bridge-empty { font-size: 13px; color: var(--muted); line-height: 1.5; }
.seg-bridge-bar-row { display: grid; grid-template-columns: 56px 1fr 58px; align-items: center; gap: 10px; margin-bottom: 6px; padding: 2px 4px; border-radius: 5px; }
.seg-bridge-bar-row.sel { background: #f1f6f5; outline: 1px solid #cfe3df; }
.seg-bridge-key { font-size: 11px; font-weight: 700; text-align: center; padding: 3px 0; border-radius: 4px; color: #17212b; border: 1px solid rgba(23,33,43,0.08); }
.seg-bridge-track { background: #eef2f7; border-radius: 5px; height: 15px; }
.seg-bridge-fill { height: 100%; border-radius: 5px; background: #5b86a8; min-width: 3px; }
.seg-bridge-bar-row.sel .seg-bridge-fill { background: var(--engine-accent, #2a9d8f); }
.seg-bridge-num { font-size: 12px; font-weight: 750; color: #17212b; text-align: right; }
.seg-bridge-num i { font-style: normal; font-size: 10px; color: var(--muted); font-weight: 600; margin-left: 4px; }
.seg-bridge-note { margin: 12px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.seg-bridge-note b { color: #17212b; }
.seg-bridge-caveat { margin: 16px 0 0; font-size: 11.5px; color: var(--muted); font-style: italic; }
@media (max-width: 820px) { .seg-bridge-body { grid-template-columns: 1fr; } }

.conc-view { max-width: 880px; }
.conc-hero { border: 1px solid #cfe3df; border-left: 4px solid var(--engine-accent, #2a9d8f); background: #f1f6f5; border-radius: 10px; padding: 18px 22px; }
.conc-eyebrow { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #2a7d72; margin-bottom: 8px; }
.conc-hero h3 { margin: 0 0 8px; font-size: 22px; line-height: 1.3; color: #17212b; }
.conc-hero-seg { display: inline-block; padding: 1px 9px; border-radius: 6px; font-weight: 800; color: #17212b; border: 1px solid rgba(23,33,43,0.1); }
.conc-hero p { margin: 0; font-size: 14px; color: #2b3a3a; line-height: 1.55; }
.conc-hero b { color: #17212b; }
.conc-section { margin-top: 24px; }
.conc-section h4 { margin: 0 0 8px; font-size: 15px; color: #17212b; }
.conc-section > p { margin: 0 0 14px; font-size: 13.5px; color: #475569; line-height: 1.6; }
.conc-section b { color: #17212b; }
.conc-tv-legend { display: flex; gap: 18px; font-size: 12px; font-weight: 700; color: #334155; margin-bottom: 10px; }
.conc-tv-legend span { display: flex; align-items: center; gap: 7px; }
.conc-tv-legend i { width: 14px; height: 10px; border-radius: 3px; }
.conc-tv-legend i.theory, .conc-tv-bar.theory { background: var(--engine-accent, #2a9d8f); }
.conc-tv-legend i.obs, .conc-tv-bar.obs { background: #aebfd4; }
.conc-tv-row { display: grid; grid-template-columns: 56px 1fr 78px; align-items: center; gap: 12px; margin-bottom: 7px; padding: 2px 4px; border-radius: 5px; }
.conc-tv-row.top { background: #f1f6f5; }
.conc-seg-key { font-size: 11px; font-weight: 700; text-align: center; padding: 3px 0; border-radius: 4px; color: #17212b; border: 1px solid rgba(23,33,43,0.08); }
.conc-tv-bars { display: flex; flex-direction: column; gap: 3px; }
.conc-tv-bar { height: 9px; border-radius: 3px; min-width: 2px; }
.conc-tv-num { text-align: right; line-height: 1.15; }
.conc-tv-num b { display: block; font-size: 12px; color: #17212b; }
.conc-tv-num i { font-style: normal; font-size: 10.5px; color: var(--muted); }
.conc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.conc-chip { font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 5px; color: #17212b; border: 1px solid rgba(23,33,43,0.1); cursor: pointer; }
.conc-chip.sel { outline: 2px solid #17212b; outline-offset: -1px; }
.conc-cond-head { display: grid; grid-template-columns: 56px 1fr 1fr; gap: 12px; font-size: 11px; font-weight: 800; color: var(--muted); margin-bottom: 8px; }
.conc-cond-head span:nth-child(3) { color: #2a7d72; }
.conc-cond-row { display: grid; grid-template-columns: 56px 1fr 1fr; gap: 12px; align-items: center; margin-bottom: 7px; }
.conc-cond-pair { display: flex; align-items: center; gap: 8px; }
.conc-cond-track { flex: 1; background: #eef2f7; border-radius: 5px; height: 15px; }
.conc-cond-fill { height: 100%; border-radius: 5px; min-width: 3px; }
.conc-cond-fill.base { background: #aebfd4; }
.conc-cond-fill.cond { background: var(--engine-accent, #2a9d8f); }
.conc-cond-val { font-size: 11.5px; font-weight: 700; color: #17212b; width: 42px; text-align: right; }
.conc-verdict { margin: 14px 0 0; font-size: 13px; line-height: 1.55; padding: 12px 14px; border-radius: 8px; }
.conc-verdict.ok { background: #eef6f4; border: 1px solid #cfe3df; color: #2b3a3a; }
.conc-verdict.warn { background: #fbf3ec; border: 1px solid #ecd9c3; color: #5c4a33; }
.conc-verdict b { color: #17212b; }
.conc-ladder { margin: 4px 0 4px; }
.conc-ladder-row { display: grid; grid-template-columns: 230px 1fr 48px; align-items: center; gap: 14px; margin-bottom: 10px; }
.conc-ladder-label b { display: block; font-size: 13px; font-weight: 800; color: #17212b; }
.conc-ladder-label i { font-style: normal; font-size: 11px; color: var(--muted); }
.conc-ladder-track { background: #eef2f7; border-radius: 6px; height: 22px; }
.conc-ladder-fill { height: 100%; border-radius: 6px; min-width: 3px; }
.conc-ladder-fill.base { background: var(--engine-accent, #2a9d8f); }
.conc-ladder-fill.one { background: #5b86a8; }
.conc-ladder-fill.two { background: #c1666b; }
.conc-ladder-num { font-size: 13px; font-weight: 800; color: #17212b; text-align: right; }
.conc-bottomline { margin-top: 24px; background: #17212b; border-radius: 10px; padding: 16px 20px; }
.conc-bottomline strong { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #5eaa9c; margin-bottom: 6px; }
.conc-bottomline p { margin: 0; font-size: 14px; color: #e8eef0; line-height: 1.55; }
.conc-bottomline b { color: #ffffff; }
.conc-disclaimer { margin: 18px 0 0; font-size: 11.5px; color: var(--muted); font-style: italic; line-height: 1.5; }

/* ---- Verdict layer 2 · multi-lens synthesis ---- */
.i2-view { font-size: 13px; color: #2b3a3a; }
.i2-seg { display: inline-block; font-size: 11.5px; font-weight: 800; padding: 1px 7px; border-radius: 4px; color: #17212b; vertical-align: middle; border: 1px solid rgba(23,33,43,0.06); }
.i2-hero { background: linear-gradient(180deg,#f5f9fc,#eaeff5); border: 1px solid #d8e0ea; border-radius: 12px; padding: 20px 22px; margin-bottom: 6px; }
.i2-title { font-size: 20px; font-weight: 800; color: #17212b; margin: 6px 0 10px; }
.i2-lede { margin: 0; font-size: 14px; line-height: 1.62; color: #2b3a3a; }
.i2-section { margin: 26px 0; padding-top: 22px; border-top: 1px solid #e3e8ee; }
.i2-featured { background: #fbfcfe; border: 1px solid #e1e8f0; border-radius: 12px; padding: 18px 20px; margin: 26px 0; }
.i2-note { margin: 12px 0 0; font-size: 12.5px; color: #4a5662; line-height: 1.55; }
.i2-note b { color: #17212b; }
.i2-warn { background: #fbf5ee; border: 1px solid #ecd9c3; border-radius: 8px; padding: 11px 13px; color: #5c4a33; }
.i2-pos { color: #2a7d72; font-weight: 700; }
.i2-neg { color: #b3503f; font-weight: 700; }

.i2-table { width: 100%; border-collapse: collapse; margin: 14px 0 4px; font-size: 12px; }
@media (max-width: 720px) {
  /* Dense multi-column verdict tables (e.g. S: Verdict's 10-column table) do
     not fit a phone screen at readable size -- scroll the table itself
     within its own bounded box instead of forcing the whole page wider
     (audit 2026-08-12: this was the single largest overflow contributor,
     703px on S: Verdict). Shared platform table class. */
  .i2-table { display: block; overflow-x: auto; max-width: 100%; }
}
.i2-table th { text-align: left; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); border-bottom: 1px solid #dde4ec; padding: 5px 8px; }
.i2-table td { padding: 6px 8px; border-bottom: 1px solid #f0f3f7; color: #2b3a3a; }
.i2-table tr.i2-mute td { color: #9aa7b4; }

.i2-diverging { margin: 14px 0 4px; }
.i2-div-row { display: grid; grid-template-columns: 60px 1fr 96px 130px; align-items: center; gap: 10px; margin-bottom: 5px; }
.i2-div-row.thin { opacity: .5; }
.i2-div-track { position: relative; height: 16px; background: #f3f5f8; border-radius: 5px; }
.i2-div-mid { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 0; border-left: 1.5px dotted #44546a; }
.i2-div-fill { position: absolute; top: 0; height: 100%; }
.i2-div-fill.over { background: var(--engine-accent, #2a9d8f); border-radius: 0 5px 5px 0; }
.i2-div-fill.under { background: #c1666b; border-radius: 5px 0 0 5px; }
.i2-div-num { text-align: right; font-size: 12px; line-height: 1.1; }
.i2-div-num b { color: #17212b; font-weight: 800; }
.i2-div-num i { display: block; font-style: normal; font-size: 10px; color: var(--muted); }
.i2-div-flag { font-size: 10px; color: var(--muted); }

.i2-reads { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.i2-read { background: #fff; border: 1px solid #e1e7ee; border-radius: 9px; padding: 12px 14px; font-size: 12.5px; line-height: 1.5; color: #2b3a3a; }
.i2-read b { color: #17212b; }
.i2-read i { font-style: normal; color: #5b6b7b; font-weight: 700; }

.i2-heat-title, .i2-bars-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin: 18px 0 9px; }
.i2-heat { display: grid; gap: 3px; align-items: stretch; }
.i2-heat-corner { font-size: 10px; font-weight: 700; color: var(--muted); display: flex; align-items: flex-end; }
.i2-heat-ch { font-size: 10px; font-weight: 800; color: #475569; text-align: center; align-self: end; padding-bottom: 2px; }
.i2-heat-rl { font-size: 10px; font-weight: 800; color: #17212b; border-radius: 4px; display: flex; align-items: center; justify-content: center; height: 22px; }
.i2-heat-cell { border-radius: 4px; font-size: 10px; font-weight: 700; color: #17212b; display: flex; align-items: center; justify-content: center; height: 22px; }
.i2-heat-cell.empty { background: #f4f6f9; }
.i2-heat-cell.thin { outline: 1px dashed rgba(23,33,43,0.25); outline-offset: -2px; }
.i2-heat-score { font-size: 10.5px; font-weight: 800; color: #17212b; display: flex; align-items: center; justify-content: center; background: #f0f3f7; border-radius: 4px; }
.i2-heat-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 9px 0 0; font-size: 10.5px; color: var(--muted); }
.i2-heat-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

.i2-bars { margin: 8px 0 4px; }
.i2-bar-row { display: grid; grid-template-columns: 56px 1fr 120px; align-items: center; gap: 10px; margin-bottom: 6px; }
.i2-bar-row.i2-live .i2-bar-track { outline: 1.5px solid #2563eb; outline-offset: 1px; border-radius: 6px; }
.i2-bar-track { position: relative; background: #eef2f7; border-radius: 6px; height: 16px; }
.i2-bar-fill { height: 100%; border-radius: 6px; min-width: 3px; }
.i2-bar-tick { position: absolute; top: -3px; bottom: -3px; width: 0; border-left: 2px dotted #44546a; opacity: .6; }
.i2-bar-num { text-align: right; font-size: 12px; font-weight: 800; color: #17212b; line-height: 1.1; }
.i2-bar-num i { display: block; font-style: normal; font-size: 10px; font-weight: 600; color: var(--muted); }
.i2-pair { display: flex; align-items: center; gap: 4px; }
.i2-arrow { color: var(--muted); font-weight: 800; }

.i2-reality { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin: 12px 0; align-items: start; }
.i2-reality-main { background: #f1f6f5; border: 1px solid #d7e7e3; border-left: 3px solid var(--engine-accent, #2a9d8f); border-radius: 9px; padding: 14px 16px; }
.i2-reality-side { background: #fff; border: 1px solid #e1e7ee; border-radius: 9px; padding: 14px 16px; }
.i2-reality-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin-bottom: 10px; }
.i2-twin { display: grid; grid-template-columns: 88px 1fr 96px; align-items: center; gap: 10px; }
.i2-twin-lab { font-size: 11px; font-weight: 800; color: #17212b; }
.i2-reality-verdict { margin: 12px 0 0; font-size: 12.5px; line-height: 1.55; color: #2b3a3a; }
.i2-reality-verdict b { color: #17212b; }
.i2-reality-strong { display: block; margin-top: 6px; color: #2a7d72; font-weight: 700; }
.i2-mini-row { display: grid; grid-template-columns: 56px 1fr 96px; align-items: center; gap: 9px; margin-bottom: 7px; }
.i2-mini-k { font-size: 12px; font-weight: 800; color: #17212b; text-align: center; }

.i2-line-wrap { margin: 10px 0 4px; }
.i2-svg { width: 100%; height: auto; display: block; }
.i2-ax { font-size: 10px; fill: var(--muted); }
.i2-ax-t { font-size: 10.5px; font-weight: 700; fill: #5b6b7b; }
.i2-line-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; font-size: 11.5px; color: #4a5662; }
.i2-line-legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: 3px; }
.i2-line-legend b { color: #17212b; }

.i2-struct { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 12px 0; }
.i2-struct-card { background: #fff; border: 1px solid #e1e7ee; border-radius: 9px; padding: 13px 15px; }
.i2-skel { display: grid; gap: 9px; margin: 4px 0; }
.i2-skel-row { display: grid; grid-template-columns: 200px 1fr; align-items: center; gap: 14px; }
.i2-skel-name i { font-style: normal; font-size: 11px; color: var(--muted); margin-left: 4px; }
.i2-skel-slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; max-width: 360px; }
.i2-skel-slot { height: 34px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #fff; background: #eef2f7; }
.i2-skel-slot.c0 { background: #eef2f7; color: transparent; border: 1px dashed #cbd5e1; }
.i2-skel-slot.c1 { background: #5b86a8; }
.i2-skel-slot.c2 { background: var(--engine-accent, #2a9d8f); }
.i2-skel-slot.c3 { background: #1f7d72; }
.i2-skel-slot.c4 { background: #c1666b; }
.i2-skel-slot.c5 { background: #b3503f; }

.i2-verdict { margin-top: 28px; background: #17212b; border-radius: 12px; padding: 20px 22px; }
.i2-verdict-eyebrow { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #5eaa9c; margin-bottom: 8px; }
.i2-verdict-intro { margin: 0 0 16px; font-size: 13px; color: #c6d0d4; line-height: 1.6; }
.i2-verdict-intro, .i2-verdict-honest { }
.i2-verdict-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.i2-vc { background: #1f2a36; border: 1px solid #2c3a48; border-radius: 10px; padding: 14px 15px; }
.i2-vc.edge { border-top: 3px solid var(--engine-accent, #2a9d8f); }
.i2-vc.volume { border-top: 3px solid #5b86a8; }
.i2-vc.watch { border-top: 3px solid #c08552; }
.i2-vc-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.i2-vc-tag { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: #93a3ad; }
.i2-vc-reason { margin: 0; font-size: 12.5px; line-height: 1.55; color: #d6dee2; }
.i2-vc-reason b { color: #fff; }
.i2-vc-reason i { color: #aebcc4; }
.i2-verdict-honest { margin: 16px 0 0; font-size: 12.5px; color: #aeb9c0; line-height: 1.6; }
.i2-verdict-honest b { color: #fff; }
.i2-disclaimer { margin: 16px 0 0; font-size: 11.5px; color: var(--muted); font-style: italic; line-height: 1.5; }
@media (max-width: 820px) { .i2-reads, .i2-reality, .i2-struct, .i2-verdict-cards { grid-template-columns: 1fr; } .i2-skel-row { grid-template-columns: 1fr; } }

/* Verdict layer 2 · sequential 'line as a signal' section */
.i2-occ { margin: 8px 0 4px; }
.i2-occ-row { display: grid; grid-template-columns: 56px 1fr 84px; align-items: center; gap: 10px; margin-bottom: 4px; }
.i2-occ-row.band .i2-seg { outline: 1.5px solid var(--engine-accent, #2a9d8f); outline-offset: 1px; }
.i2-occ-num { text-align: right; font-size: 11.5px; font-weight: 800; color: #17212b; line-height: 1.1; }
.i2-occ-num i { display: block; font-style: normal; font-size: 10px; font-weight: 600; color: var(--muted); }
.i2-seq-lv { font-size: 11px; color: var(--muted); font-weight: 600; }
.i2-seq-conc { margin-top: 18px; background: #f1f6f5; border: 1px solid #d7e7e3; border-left: 3px solid var(--engine-accent, #2a9d8f); border-radius: 10px; padding: 16px 18px; }
.i2-seq-conc-eyebrow { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #2a7d72; margin-bottom: 12px; }
.i2-seq-conc-picks { display: grid; gap: 12px; }
.i2-seq-pick { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; }
.i2-seq-pick > div p { margin: 4px 0 0; font-size: 12.5px; color: #2b3a3a; line-height: 1.5; }
.i2-seq-rank { width: 26px; height: 26px; border-radius: 50%; background: var(--engine-accent, #2a9d8f); color: #fff; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.i2-seq-pick:nth-child(2) .i2-seq-rank { background: #5b86a8; }
.i2-seq-uncertainty { margin: 14px 0 0; font-size: 12.5px; color: #4a5662; line-height: 1.55; }
.i2-seq-uncertainty b { color: #17212b; }

/* Verdict layer 2 · two-step signature match section */
.i2-2s-sig { background: #f6f8fb; border: 1px solid #e1e8f0; border-radius: 10px; padding: 14px 16px; margin: 12px 0; }
.i2-2s-sig-lab { display: block; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 9px; }
.i2-2s-sig-flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.i2-2s-sig-flow .i2-seg { font-size: 13px; padding: 3px 10px; }
.i2-2s-arrow { color: #9aa7b4; font-weight: 800; }
.i2-2s-now { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: #2a7d72; background: #e4f1ee; border-radius: 10px; padding: 1px 7px; }
.i2-2s-next { font-size: 15px; font-weight: 800; color: #9aa7b4; border: 1.5px dashed #c2ccd6; border-radius: 6px; padding: 1px 11px; }
.i2-2s-matches { margin: 11px 0 0; font-size: 12.5px; color: #4a5662; line-height: 1.5; }
.i2-2s-matches b { color: #17212b; }
.i2-table tr.i2-2s-top td { background: #f1f6f5; }
.i2-2s-conc { margin-top: 18px; background: #17212b; border-radius: 11px; padding: 16px 18px; }
.i2-2s-conc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.i2-2s-conc-eyebrow { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #5eaa9c; }
.i2-conf { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: 3px 10px; border-radius: 20px; }
.i2-conf.lo { background: #4a2f2f; color: #e6b9b0; }
.i2-conf.mod { background: #463b25; color: #e8cf9a; }
.i2-conf.hi { background: #1f3d34; color: #7fd8c4; }
.i2-2s-conc .i2-seq-conc-picks { gap: 12px; }
.i2-2s-conc .i2-seq-pick > div { color: #d6dee2; }
.i2-2s-conc .i2-seq-pick > div b { color: #fff; }
.i2-2s-conc .i2-seq-pick > div p { color: #c0cace; }
.i2-2s-conc .i2-seq-rank { background: var(--engine-accent, #2a9d8f); }
.i2-2s-conc .i2-seq-pick:nth-child(2) .i2-seq-rank { background: #5b86a8; }
.i2-2s-why { margin: 14px 0 0; font-size: 12.5px; color: #aeb9c0; line-height: 1.6; }
.i2-2s-why b { color: #fff; }

/* ---- Verdict layer 4 · master segment decision ---- */
.i4-view { max-width: 1120px; }
.i4-hero .i2-lede { max-width: 920px; }
.i4-now {
  margin: 18px 0 6px;
  border: 1px solid #d8e0ea;
  border-radius: 12px;
  background: #fbfcfe;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, .8fr);
  gap: 18px;
  align-items: start;
}
.i4-now h4 { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 16px; color: #17212b; }
.i4-now h4 span { color: #9aa7b4; font-weight: 800; }
.i4-now h4 em { font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: #2a7d72; background: #e4f1ee; padding: 2px 8px; border-radius: 20px; }
.i4-now p { margin: 0; color: #4a5662; line-height: 1.55; font-size: 12.5px; }
.i4-now-stats { display: grid; gap: 8px; }
.i4-now-stats span { border: 1px solid #e1e7ee; background: #fff; border-radius: 8px; padding: 9px 11px; color: #4a5662; font-size: 12px; }
.i4-now-stats b { color: #17212b; font-size: 15px; margin-right: 5px; }
.i4-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 18px 0 4px; }
.i4-card {
  border: 1px solid #e1e7ee;
  border-top: 3px solid var(--engine-accent, #2a9d8f);
  border-radius: 10px;
  background: #fff;
  padding: 13px 14px;
  min-width: 0;
}
.i4-card:nth-child(2) { border-top-color: #5b86a8; }
.i4-card:nth-child(3) { border-top-color: #c08552; }
.i4-card:nth-child(4) { border-top-color: #c1666b; }
.i4-card > span { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 8px; }
.i4-card b { display: block; margin: 9px 0 6px; font-size: 19px; color: #17212b; }
.i4-card p { margin: 0; color: #4a5662; line-height: 1.45; font-size: 12px; }
.i4-scoreboard { margin: 12px 0 16px; }
.i4-score-row {
  display: grid;
  grid-template-columns: 64px 1fr 104px;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
}
.i4-score-row.top .i2-seg { outline: 1.5px solid #17212b; outline-offset: 1px; }
.i4-score-track { height: 20px; border-radius: 7px; background: #eef2f7; overflow: hidden; }
.i4-score-fill { height: 100%; min-width: 3px; border-radius: 7px; background: linear-gradient(90deg, var(--engine-accent, #2a9d8f), #5b86a8); }
.i4-score-row span:last-child { text-align: right; line-height: 1.1; }
.i4-score-row span:last-child b { display: block; color: #17212b; font-size: 13px; }
.i4-score-row span:last-child i { display: block; color: var(--muted); font-size: 10px; font-style: normal; font-weight: 650; }
.i4-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}
.i4-split .i2-section { min-width: 0; }
.i4-build { display: grid; gap: 11px; margin-top: 12px; }
.i4-build-row {
  display: grid;
  grid-template-columns: 150px minmax(220px, 360px) 1fr;
  align-items: center;
  gap: 14px;
  border: 1px solid #e1e7ee;
  border-radius: 9px;
  background: #fff;
  padding: 11px 13px;
}
.i4-build-row > div:first-child span:last-child {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.i4-build-row p { margin: 0; color: #4a5662; line-height: 1.45; font-size: 12.5px; }
.i4-build-row p b { color: #17212b; }
@media (max-width: 980px) {
  .i4-now, .i4-card-grid, .i4-split, .i4-build-row { grid-template-columns: 1fr; }
}

/* ---- Verdict layer 5 · deep segment verdict ---- */
.i5-view { max-width: 1180px; }
.i5-hero .i2-lede { max-width: 1040px; }
.i5-final-strip {
  margin: 18px 0 6px;
  background: #17212b;
  color: #d6dee2;
  border-radius: 12px;
  padding: 18px 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 18px;
  align-items: center;
}
.i5-final-strip h4 { margin: 4px 0 9px; color: #fff; font-size: 16px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.i5-final-strip p { margin: 0; font-size: 12.8px; line-height: 1.58; color: #c6d0d4; }
.i5-conviction {
  border: 1px solid #2c3a48;
  background: #1f2a36;
  border-radius: 10px;
  padding: 13px 14px;
  text-align: center;
}
.i5-conviction b { display: block; color: #7fd8c4; font-size: 20px; text-transform: uppercase; letter-spacing: .03em; }
.i5-conviction span { display: block; margin-top: 4px; color: #aebcc4; font-size: 11.5px; line-height: 1.35; }
.i5-verdict-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 18px 0 6px; }
.i5-verdict-card {
  background: #fff;
  border: 1px solid #e1e7ee;
  border-top: 3px solid var(--engine-accent, #2a9d8f);
  border-radius: 10px;
  padding: 13px 14px;
  min-width: 0;
}
.i5-verdict-card.cover { border-top-color: #5b86a8; }
.i5-verdict-card.watch { border-top-color: #c08552; }
.i5-verdict-card.raw { border-top-color: #9aa7b4; }
.i5-verdict-card > span { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 8px; }
.i5-verdict-card b { display: block; margin: 8px 0 6px; font-size: 19px; color: #17212b; }
.i5-verdict-card p { margin: 0; color: #4a5662; line-height: 1.45; font-size: 12px; }
.i5-scoreboard { margin: 14px 0 4px; }
.i5-score-row {
  display: grid;
  grid-template-columns: 28px 64px 1fr 48px minmax(120px, 190px);
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
  font-size: 12px;
}
.i5-score-row > span:first-child { color: var(--muted); font-weight: 800; text-align: right; }
.i5-score-row.top .i2-seg { outline: 1.5px solid #17212b; outline-offset: 1px; }
.i5-score-track { height: 20px; background: #eef2f7; border-radius: 7px; overflow: hidden; }
.i5-score-track div { height: 100%; min-width: 3px; border-radius: 7px; }
.i5-score-row strong { color: #17212b; font-size: 13px; text-align: right; }
.i5-score-row em { color: var(--muted); font-style: normal; font-weight: 650; font-size: 10.5px; line-height: 1.15; }
.i5-wide-panel {
  margin: 28px 0;
  border-top: 1px solid #e3e8ee;
  padding-top: 22px;
}
.i5-chart-wrap {
  background: #fbfcfe;
  border: 1px solid #d8e0ea;
  border-radius: 12px;
  padding: 12px;
  overflow-x: auto;
}
.i5-spark { width: 100%; min-width: 760px; height: auto; display: block; }
.i5-svg-label { font-size: 11px; fill: #17212b; font-weight: 800; }
.i5-svg-note { font-size: 10.5px; fill: #5b6b7b; font-weight: 700; }
.i5-svg-estimate { text-anchor: end; }
.i5-chart-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
  margin: 12px 0;
}
.i5-chart-grid div {
  background: #fff;
  border: 1px solid #e1e7ee;
  border-radius: 9px;
  padding: 10px 11px;
}
.i5-chart-grid b { display: block; color: #17212b; font-size: 14px; margin-bottom: 4px; }
.i5-chart-grid span { color: var(--muted); font-size: 10.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .03em; }
.i5-chart-list { display: grid; gap: 7px; margin: 12px 0 4px; }
.i5-chart-row {
  display: grid;
  grid-template-columns: 64px 1fr 58px minmax(160px, 260px);
  gap: 10px;
  align-items: center;
  font-size: 12px;
}
.i5-chart-track { height: 16px; background: #eef2f7; border-radius: 6px; overflow: hidden; }
.i5-chart-track div { height: 100%; min-width: 3px; border-radius: 6px; }
.i5-chart-row span { color: #17212b; font-weight: 800; text-align: right; }
.i5-chart-row em { color: var(--muted); font-style: normal; line-height: 1.2; }
.i5-table td, .i5-table th { vertical-align: top; }
.i5-table td { line-height: 1.35; }
.i5-path-stack { display: grid; gap: 12px; }
.i5-path-stack h5 { margin: 0 0 6px; font-size: 11px; color: #17212b; text-transform: uppercase; letter-spacing: .03em; }
.i5-audit {
  background: #fbfcfe;
  border: 1px solid #e1e7ee;
  border-radius: 12px;
  padding: 18px 20px;
}
.i5-full { min-width: 980px; }
@media (max-width: 720px) {
  /* Same min-width-beats-max-width shape as .s5-full-table above (audit
     2026-08-12) -- let it shrink into its scrollable box on narrow screens. */
  .i5-full { min-width: 0; }
}
.i5-build { display: grid; gap: 11px; margin-top: 12px; }
.i5-build-row {
  display: grid;
  grid-template-columns: 150px minmax(220px, 360px) 1fr;
  align-items: center;
  gap: 14px;
  border: 1px solid #e1e7ee;
  border-radius: 9px;
  background: #fff;
  padding: 11px 13px;
}
.i5-build-row > div:first-child span:last-child {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.i5-build-row p { margin: 0; color: #4a5662; line-height: 1.45; font-size: 12.5px; }
.i5-master-verdict {
  margin-top: 30px;
  background: #17212b;
  border-radius: 12px;
  padding: 20px 22px;
  color: #d6dee2;
}
.i5-master-verdict h4 { margin: 0 0 12px; color: #fff; font-size: 18px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.i5-master-verdict p { margin: 11px 0 0; font-size: 13px; line-height: 1.6; color: #c6d0d4; }
.i5-master-verdict b { color: #fff; }
@media (max-width: 980px) {
  .i5-final-strip, .i5-verdict-grid, .i5-chart-grid, .i5-build-row { grid-template-columns: 1fr; }
  .i5-score-row { grid-template-columns: 24px 64px 1fr 42px; }
  .i5-score-row em { grid-column: 3 / 5; }
  .i5-chart-row { grid-template-columns: 64px 1fr 54px; }
  .i5-chart-row em { grid-column: 2 / 4; }
}

/* ---- S4 - Verdict · Segment Isolation ---- */
.s5-view { max-width: 1220px; }
.s5-hero {
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(250,252,255,.96));
  border: 1.5px solid #a81d1d;
}
.s5-output {
  margin: 18px 0 8px;
  background: #17212b;
  color: #d6dee2;
  border-radius: 12px;
  padding: 18px 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 18px;
  align-items: center;
}
.s5-output h4 { margin: 4px 0 9px; color: #fff; font-size: 18px; line-height: 1.35; display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.s5-output p { margin: 0; color: #c6d0d4; font-size: 12.8px; line-height: 1.6; }
.s5-output-count {
  border: 1px solid #3a4653;
  background: #1f2a36;
  border-radius: 10px;
  padding: 13px 14px;
  text-align: center;
}
.s5-output-count b { display: block; color: #f6d86b; font-size: 30px; line-height: 1; }
.s5-output-count span { display: block; color: #aebcc4; font-size: 10.5px; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; margin-top: 7px; }
.s5-isolated-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 18px 0 8px; }
.s5-isolated-card {
  border: 1px solid #e0e7ef;
  border-top: 4px solid #b02020;
  border-radius: 11px;
  background: #fff;
  padding: 16px 18px;
  min-width: 0;
}
.s5-isolated-card.cover { border-top-color: #5b86a8; }
.s5-isolated-card > span { display: block; color: var(--muted); font-size: 10.5px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 10px; }
.s5-isolated-card b { display: block; margin: 10px 0 8px; color: #17212b; font-size: 28px; line-height: 1; }
.s5-isolated-card p { margin: 0; color: #455464; font-size: 12.8px; line-height: 1.55; }
.s5-scoreboard { display: grid; gap: 8px; margin: 14px 0 4px; }
.s5-score-row {
  display: grid;
  grid-template-columns: 28px 64px minmax(180px, 1fr) 44px minmax(190px, .7fr);
  gap: 10px;
  align-items: center;
  font-size: 12px;
}
.s5-score-row > span:first-child { color: var(--muted); font-weight: 900; text-align: right; }
.s5-score-row.isolated .i2-seg { outline: 1.5px solid #17212b; outline-offset: 1px; }
.s5-score-track, .s5-perm-row div, .s5-chart-row div {
  height: 18px;
  background: #eef2f7;
  border-radius: 7px;
  overflow: hidden;
}
.s5-score-track i, .s5-perm-row i, .s5-chart-row i {
  display: block;
  height: 100%;
  min-width: 3px;
  border-radius: 7px;
}
.s5-score-row b { text-align: right; color: #17212b; font-size: 13px; }
.s5-score-row em { color: var(--muted); font-style: normal; font-size: 10.5px; font-weight: 700; line-height: 1.2; }
.s5-wide {
  margin: 28px 0;
  border-top: 1px solid #e3e8ee;
  padding-top: 22px;
}
.s5-perm-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(280px, .75fr);
  gap: 18px;
  align-items: start;
}
.s5-perm-list { display: grid; gap: 8px; }
.s5-perm-row {
  display: grid;
  grid-template-columns: 64px minmax(160px, 1fr) 52px minmax(120px, .65fr);
  gap: 10px;
  align-items: center;
  font-size: 12px;
}
.s5-perm-row i { background: linear-gradient(90deg, #b02020, #5b86a8); }
.s5-perm-row b { text-align: right; color: #17212b; }
.s5-perm-row span { color: var(--muted); font-size: 10.5px; font-weight: 700; }
.s5-method-card {
  border: 1px solid #e0e7ef;
  border-radius: 11px;
  background: #fbfcfe;
  padding: 15px 17px;
}
.s5-method-card b { display: block; color: #17212b; font-size: 14px; margin-bottom: 8px; }
.s5-method-card p { margin: 0 0 11px; color: #4a5662; font-size: 12.5px; line-height: 1.55; }
.s5-method-card p:last-child { margin-bottom: 0; }
.s5-chart { width: 100%; min-width: 760px; height: auto; display: block; }
.s5-chart-list { display: grid; gap: 8px; margin: 12px 0 4px; }
.s5-chart-row {
  display: grid;
  grid-template-columns: 64px minmax(170px, 1fr) 58px minmax(145px, .65fr);
  gap: 10px;
  align-items: center;
  font-size: 12px;
}
.s5-chart-row b { text-align: right; color: #17212b; font-size: 12px; }
.s5-chart-row span { color: var(--muted); font-size: 11px; line-height: 1.2; }
.s5-lens-table td:first-child span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  margin-top: 2px;
}
.s5-full-table { min-width: 1050px; }
@media (max-width: 720px) {
  /* min-width always wins over max-width when they conflict (CSS spec), so
     this floor was overriding the .i2-table mobile fix above and was the
     true, direct cause of S: Verdict's 703px overflow (audit 2026-08-12) --
     the largest single contributor found in the whole product. Let it shrink
     to fit the scrollable box on narrow screens; the 1050px floor stays for
     desktop, where it belongs. */
  .s5-full-table { min-width: 0; }
}
.s5-final {
  margin-top: 30px;
  background: #17212b;
  color: #d6dee2;
  border-radius: 12px;
  padding: 20px 22px;
}
.s5-final h4 { margin: 0 0 12px; color: #fff; font-size: 18px; line-height: 1.35; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.s5-final p { margin: 11px 0 0; color: #c6d0d4; font-size: 13px; line-height: 1.6; }
.s5-final b { color: #fff; }
.s5-retained {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 2px solid #e3e8ee;
}
@media (max-width: 980px) {
  .s5-output, .s5-isolated-grid, .s5-perm-grid { grid-template-columns: 1fr; }
  .s5-score-row { grid-template-columns: 24px 64px 1fr 42px; }
  .s5-score-row em { grid-column: 3 / 5; }
  .s5-perm-row, .s5-chart-row { grid-template-columns: 64px 1fr 54px; }
  .s5-perm-row span, .s5-chart-row span { grid-column: 2 / 4; }
}
.decision-view { max-width: 1040px; }
.decision-hero { border: 1px solid #cfe3df; border-left: 4px solid var(--engine-accent, #2a9d8f); background: #f1f6f5; border-radius: 10px; padding: 18px 22px; margin-bottom: 22px; }
.decision-hero h3 { margin: 0 0 8px; font-size: 22px; line-height: 1.25; color: #17212b; }
.decision-hero p { margin: 0; font-size: 14px; color: #2b3a3a; line-height: 1.55; }
.decision-section { margin-top: 24px; }
.decision-section h4 { margin: 0 0 10px; font-size: 15px; color: #17212b; }
.decision-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; margin-top: 24px; }
.decision-note { margin: 12px 0 0; font-size: 12.5px; color: #4a5662; line-height: 1.55; background: #f6f8fb; border: 1px solid #e3e8ee; border-radius: 8px; padding: 12px 14px; }
.decision-note b { color: #17212b; }
.decision-picks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
.decision-picks div { border: 1px solid #dde4ec; border-radius: 8px; padding: 12px 14px; background: #fff; min-width: 0; }
.decision-picks span { display: block; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 6px; }
.decision-picks b { display: block; font-size: 18px; color: #17212b; line-height: 1.2; overflow-wrap: anywhere; }
.decision-picks em { display: block; font-style: normal; font-size: 11.5px; color: #64748b; margin-top: 4px; overflow-wrap: anywhere; }
.distance-column-details { border: 1px solid #dde4ec; border-radius: 8px; background: #fff; padding: 10px 14px; margin: 0 0 12px; }
.distance-column-details summary { cursor: pointer; font-size: 13px; font-weight: 800; color: #17212b; list-style: none; }
.distance-column-details summary::-webkit-details-marker { display: none; }
.distance-column-body { margin-top: 12px; display: grid; gap: 10px; }
.distance-mini-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.distance-mini-grid div { border: 1px solid #e5ebf2; border-radius: 8px; padding: 10px 11px; background: #f8fafc; }
.distance-mini-grid span { display: block; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 5px; }
.distance-mini-grid b { display: block; font-size: 16px; color: #17212b; line-height: 1.2; overflow-wrap: anywhere; }
.distance-mini-grid em { display: block; font-style: normal; font-size: 11px; color: #64748b; margin-top: 4px; overflow-wrap: anywhere; }
.ticket-form { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 12px; margin: 12px 0 16px; }
.ticket-form label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ticket-form input, .coverage-input { width: 100%; box-sizing: border-box; margin-top: 6px; border: 1px solid #cfd8e3; border-radius: 7px; padding: 10px 12px; font: inherit; color: #17212b; background: #fff; }
.coverage-input { min-height: 108px; resize: vertical; line-height: 1.5; }
@media (max-width: 880px) {
  .decision-grid, .decision-picks, .ticket-form { grid-template-columns: 1fr; }
  .distance-mini-grid { grid-template-columns: 1fr 1fr; }
}

.segment-analysis-view {
  border: 1px solid #b8c2ce;
  border-radius: 6px;
  overflow: hidden;
  background: #ffffff;
}
.segment-two-view {
  border: 1px solid #b8c2ce;
  border-radius: 6px;
  overflow: hidden;
  background: #ffffff;
}
.segment-two-scroll {
  overflow: auto;
}
.segment-two-grid {
  min-width: 780px;
  display: grid;
  grid-template-columns: 570px 150px;
  column-gap: 36px;
  align-items: start;
}
.seg2-table {
  border-top: 3px solid #1D2330;
  border-bottom: 3px solid #1D2330;
}
.seg2-header,
.seg2-row,
.seg2-sum {
  display: grid;
  grid-template-columns: 176px 112px 282px;
  align-items: stretch;
}
.seg2-header {
  background: #284460;
  color: #ffffff;
  font-weight: 850;
  font-size: 12px;
  min-height: 28px;
}
.seg2-header div,
.seg2-row > div,
.seg2-sum div {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.seg2-row {
  min-height: 24px;
  background: #ffffff;
}
.seg2-row.top,
.seg2-row.middle {
  background: #e9f0f8;
}
.seg2-pattern {
  color: #17212b;
  font-weight: 850;
  font-size: 11px;
}
.seg2-bar-cell {
  position: relative;
  overflow: hidden;
  font-size: 11px;
  color: #17212b;
}
.seg2-bar-cell span {
  position: absolute;
  left: 4px;
  top: 4px;
  bottom: 4px;
  border-radius: 2px;
  border: 1px solid rgba(23, 33, 43, 0.12);
}
.seg2-bar-cell.occurrence span {
  background: #aebfd4;
}
.seg2-bar-cell.probability span {
  background: #5b86a8;
}
.seg2-bar-cell b {
  position: relative;
  z-index: 1;
  font-weight: 650;
}
.seg2-sum {
  margin-top: 12px;
  min-height: 30px;
  background: #e5e7eb;
  color: #111827;
  font-weight: 850;
  font-size: 12px;
  border-top: 2px solid #1D2330;
}
.seg2-side {
  position: relative;
  min-height: 370px;
}
.seg2-summary {
  position: absolute;
  left: 0;
}
.seg2-summary.top { top: 64px; }
.seg2-summary.middle { top: 204px; }
.seg2-summary.bottom { top: 318px; }
.seg2-summary button {
  min-width: 70px;
  padding: 5px 9px;
  border-radius: 6px;
  border: 1px solid rgba(23, 33, 43, 0.22);
  box-shadow: 0 1px 3px rgba(23, 33, 43, 0.12);
  background: var(--engine-accent, #2a9d8f);
  color: #ffffff;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}
.seg2-summary.middle button,
.seg2-summary.bottom button {
  background: #284460;
  color: #ffffff;
}
.segment-two-note {
  position: absolute;
  left: 0;
  top: 142px;
  z-index: 4;
  width: 148px;
  padding: 10px 12px;
  border: 2px solid #17212b;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 12px 24px rgba(23, 33, 43, .16);
  color: #17212b;
  text-align: center;
}
.segment-two-note[hidden] {
  display: none;
}
.segment-two-note strong {
  display: block;
  font-size: 12px;
  margin-bottom: 6px;
}
.segment-two-note p {
  margin: 0;
  font-size: 10px;
  line-height: 1.35;
}
.segment-three-view {
  border: 1px solid #b8c2ce;
  border-radius: 6px;
  overflow: hidden;
  background: #ffffff;
}
.segment-three-scroll {
  max-height: calc(100vh - 285px);
  overflow: auto;
}
.segment-three-grid {
  min-width: max-content;
  display: flex;
  align-items: flex-start;
}
.seg3-block {
  width: 218px;
  flex: 0 0 218px;
  border-right: 1px solid #cbd5e1;
}
.seg3-source {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 42px;
  background: #284460;
  color: #ffffff;
  border-bottom: 2px solid #1D2330;
}
.seg3-source {
  display: grid;
  grid-template-rows: 15px 1fr;
  place-items: center;
  padding: 3px;
}
.seg3-source span {
  font-size: 10px;
  font-weight: 800;
}
.seg3-source b {
  width: 100%;
  padding: 3px 2px;
  border: 1px solid rgba(23, 33, 43, .2);
  color: #17212b;
  font-size: 10px;
  text-align: center;
}
.seg3-subheader,
.seg3-row {
  display: grid;
  grid-template-columns: 90px 64px 64px;
}
.seg3-subheader {
  position: sticky;
  top: 42px;
  z-index: 2;
  min-height: 20px;
  background: #eef4fb;
  color: #334155;
  border-bottom: 1px solid #cbd5e1;
  font-size: 10px;
  font-weight: 850;
}
.seg3-subheader span {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
}
.seg3-row-label {
  min-height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #cbd5e1;
  border-bottom: 1px solid #e2e8f0;
  color: #17212b;
  font-size: 10px;
  font-weight: 500;
}
.seg3-metric {
  min-height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #e2e8f0;
  border-right: 1px solid #edf2f7;
  color: #17212b;
  font-size: 10px;
  font-weight: 750;
}
.seg3-metric.empty {
  background: #ffffff;
}
.number-analysis-one-view {
  border: 1px solid #b8c2ce;
  border-radius: 6px;
  overflow: auto;
  background: #ffffff;
  padding: 14px;
}
.number-analysis-summary {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 0;
  margin-bottom: 14px;
  border: 1px solid #d7e0ea;
  position: sticky;
  left: 0;
  z-index: 8;
  background: #ffffff;
}
.number-analysis-summary span,
.number-analysis-summary strong {
  min-height: 30px;
  padding: 6px 10px;
  border-right: 1px solid #d7e0ea;
  color: #17212b;
  font-size: 12px;
  white-space: nowrap;
}
.number-analysis-summary span {
  background: #eaf1f8;
  font-weight: 850;
}
.number-analysis-summary .logic-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-right: 12px;
  position: relative;
}
.logic-info {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1px solid #64748b;
  background: #ffffff;
  color: #17212b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  cursor: help;
}
.logic-info em {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translate(10px, -50%);
  width: 430px;
  max-width: calc(100vw - 48px);
  padding: 9px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .14);
  color: #17212b;
  font-size: 11px;
  font-style: normal;
  font-weight: 650;
  line-height: 1.35;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  z-index: 20;
}
.logic-info:hover em,
.logic-info:focus em {
  opacity: 1;
}
@media (max-width: 720px) {
  /* An invisible (opacity:0) absolutely-positioned tooltip still contributes
     to the page's scrollable area even though nothing clips it -- this was
     forcing horizontal scroll on every single tab at phone width regardless
     of whether the tooltip was ever opened (audit 2026-08-12: 29-703px of
     overflow on all 54 Mega-Sena tabs, traced to exactly this rule; shared
     platform stylesheet, so this fixes every product that uses it). Flip to
     a below-anchor, viewport-width layout on narrow screens instead of
     floating 390-430px to the right, which cannot fit a 390px viewport at
     any anchor position. */
  .worksheet-heading-note em,
  .logic-info em {
    left: 0;
    right: 0;
    top: 100%;
    transform: translateY(8px);
    width: auto;
    max-width: none;
  }
}
.number-analysis-summary .logic-info em {
  left: 0;
  top: 100%;
  transform: translateY(8px);
}
.number-analysis-summary strong {
  text-align: center;
}
.number-analysis-summary strong:last-child {
  border-right: 0;
}
.number-analysis-grid {
  display: grid;
  grid-template-columns: repeat(3, 430px);
  gap: 18px 22px;
  align-items: start;
}
.number-analysis-two-grid {
  display: grid;
  grid-template-columns: repeat(7, 340px);
  gap: 18px;
  align-items: start;
}
.number-analysis-three-grid {
  display: grid;
  grid-template-columns: 340px 340px 340px;
  gap: 22px;
  align-items: start;
}
.number-analysis-block {
  border: 1px solid #d7e0ea;
  background: #ffffff;
}
.number-analysis-head,
.number-analysis-row {
  display: grid;
  grid-template-columns: 72px 112px 112px 112px;
  align-items: center;
  min-height: 29px;
  border-bottom: 1px solid #e2e8f0;
}
.number-analysis-block.compact .number-analysis-head,
.number-analysis-row.compact {
  grid-template-columns: 76px 126px 126px;
}
.number-analysis-head {
  background: #284460;
}
.number-analysis-head span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 850;
  text-align: center;
  white-space: nowrap;
}
.number-analysis-row span,
.number-analysis-row b {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 29px;
  padding: 3px 6px;
  color: #17212b;
  font-size: 12px;
  white-space: nowrap;
}
.number-analysis-row span {
  background: #eef4fb;
  font-weight: 850;
}
.number-analysis-row b {
  font-weight: 650;
}
.number-analysis-row.total {
  background: #f8fafc;
}
.number-analysis-row.total span,
.number-analysis-row.total b {
  font-weight: 850;
}
.number-analysis-row.compact span,
.number-analysis-row.compact b {
  font-size: 11px;
}
.number-data-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 22px;
  overflow: hidden;
  background: #ffffff;
}
.number-data-bar i {
  position: absolute;
  inset: 3px auto 3px 0;
  width: var(--bar-width);
  background: var(--bar-color, #b7d7ef);
}
.number-data-bar strong {
  position: relative;
  z-index: 1;
  font-weight: 750;
}
.na-depth {
  min-width: 1180px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #dce6f0;
}
.na-depth-hero {
  padding: 18px 20px;
  border-radius: 13px;
  background: linear-gradient(135deg, #17212b 0%, #284460 100%);
  color: #ffffff;
  box-shadow: 0 12px 28px rgba(23, 33, 43, .10);
}
.na-depth-hero span,
.na-depth-title span,
.na-depth-final span,
.na-depth-cards span {
  display: block;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.na-depth-hero span {
  color: #8ed8cb;
}
.na-depth-hero h4 {
  margin: 7px 0 8px;
  font-size: 22px;
  line-height: 1.2;
}
.na-depth-hero p {
  max-width: 1040px;
  margin: 0;
  color: #d5dee7;
  font-size: 13.5px;
  line-height: 1.6;
}
.na-depth-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}
.na-depth-cards div {
  padding: 13px 14px;
  border: 1px solid #dce6f0;
  border-radius: 11px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(23, 33, 43, .05);
}
.na-depth-cards span,
.na-depth-cards em {
  color: #64748b;
  font-style: normal;
}
.na-depth-cards b {
  display: block;
  margin: 5px 0 2px;
  color: #17212b;
  font-size: 24px;
  line-height: 1;
}
.na-depth-cards em {
  font-size: 12px;
  font-weight: 750;
}
.na-depth-section {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid #dce6f0;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(23, 33, 43, .04);
}
.na-depth-two {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}
.na-depth-title span {
  color: #0f766e;
}
.na-depth-title h4 {
  margin: 5px 0 5px;
  color: #17212b;
  font-size: 16px;
}
.na-depth-title p {
  margin: 0 0 10px;
  color: #586678;
  font-size: 12.5px;
  line-height: 1.5;
}
.na-depth-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 12px;
}
.na-depth-table th {
  padding: 8px 9px;
  background: #17212b;
  color: #ffffff;
  font-weight: 850;
  text-align: left;
  white-space: nowrap;
}
.na-depth-table td {
  padding: 7px 9px;
  border-bottom: 1px solid #edf2f7;
  color: #263442;
  vertical-align: middle;
}
.na-depth-table tr:nth-child(even) td {
  background: #fbfdff;
}
.na-depth-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 96px;
  min-height: 22px;
  overflow: hidden;
  border-radius: 999px;
  background: #eef3f8;
}
.na-depth-bar i {
  position: absolute;
  left: 3px;
  top: 3px;
  bottom: 3px;
  border-radius: 999px;
}
.na-depth-bar strong {
  position: relative;
  z-index: 1;
  padding: 0 8px;
  color: #0f172a;
  font-size: 12px;
  font-weight: 850;
}
.na-depth-lanes {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 12px;
  align-items: end;
  height: 230px;
  padding: 12px 8px 0;
}
.na-depth-lane {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  text-align: center;
}
.na-depth-lane span,
.na-depth-lane b,
.na-depth-lane em {
  position: relative;
  z-index: 2;
}
.na-depth-lane span {
  color: #17212b;
  font-size: 13px;
  font-weight: 850;
}
.na-depth-lane b {
  color: #17212b;
  font-size: 18px;
}
.na-depth-lane i {
  width: 100%;
  min-height: 18px;
  border-radius: 10px 10px 5px 5px;
  box-shadow: inset 0 0 0 1px rgba(23, 33, 43, .10), 0 8px 16px rgba(23, 33, 43, .08);
}
.na-depth-lane em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}
.na-parity-chart {
  display: grid;
  grid-template-columns: repeat(8, minmax(86px, 1fr));
  gap: 10px;
  align-items: end;
  height: 230px;
  padding: 12px 8px 0;
}
.na-parity-tile {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  text-align: center;
}
.na-parity-tile.current {
  padding: 8px;
  border: 1px solid #d0a617;
  border-radius: 12px;
  background: #fffaf0;
}
.na-parity-tile span,
.na-parity-tile b {
  position: relative;
  z-index: 2;
  color: #17212b;
  font-weight: 850;
}
.na-parity-tile i {
  width: 100%;
  min-height: 14px;
  border-radius: 10px 10px 5px 5px;
  box-shadow: inset 0 0 0 1px rgba(23, 33, 43, .10), 0 8px 16px rgba(23, 33, 43, .08);
}
.na-repeat-counts {
  display: grid;
  grid-template-columns: repeat(8, minmax(96px, 1fr));
  gap: 10px;
  align-items: end;
  height: 250px;
  padding: 12px 8px 0;
}
.na-repeat-count {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: 8px;
  border: 1px solid #dce6f0;
  border-radius: 12px;
  background: #fbfdff;
  text-align: center;
}
.na-repeat-count.primary {
  border-color: #0f766e;
  background: #f0fdfa;
  box-shadow: 0 8px 18px rgba(15, 118, 110, .12);
}
.na-repeat-count.cover {
  border-color: #d0a617;
  background: #fffaf0;
  box-shadow: 0 8px 18px rgba(155, 122, 32, .12);
}
.na-repeat-count span,
.na-repeat-count b,
.na-repeat-count em {
  position: relative;
  z-index: 2;
}
.na-repeat-count span {
  color: #17212b;
  font-size: 12px;
  font-weight: 850;
}
.na-repeat-count b {
  color: #17212b;
  font-size: 18px;
}
.na-repeat-count i {
  width: 100%;
  min-height: 14px;
  border-radius: 10px 10px 5px 5px;
  box-shadow: inset 0 0 0 1px rgba(23, 33, 43, .10), 0 8px 16px rgba(23, 33, 43, .08);
}
.na-repeat-count em {
  color: #64748b;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.2;
}
.na-repeat-chip {
  display: inline-block;
  margin: 2px 4px 2px 0;
  padding: 3px 6px;
  border-radius: 999px;
  background: #eef3f8;
  color: #334155;
  font-size: 11px;
  font-weight: 750;
}
.na4-block-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(190px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.na4-block-card {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid #dce6f0;
  border-radius: 12px;
  background: #fbfdff;
  box-shadow: 0 8px 18px rgba(23, 33, 43, .04);
}
.na4-block-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid #edf2f7;
}
.na4-block-card-head b {
  color: #17212b;
  font-size: 15px;
}
.na4-block-card-head span {
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.na4-mini-row {
  display: grid;
  grid-template-columns: 22px minmax(90px, 1fr) 34px;
  gap: 7px;
  align-items: center;
  padding: 4px;
  border-radius: 8px;
}
.na4-mini-row.primary {
  background: #edfdf8;
}
.na4-mini-row.cover {
  background: #fff8e6;
}
.na4-mini-row > span,
.na4-mini-row > em {
  color: #334155;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  text-align: center;
}
.segment-pill {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 7px;
  color: #17212b;
  font-weight: 850;
  border: 1px solid rgba(23, 33, 43, .08);
}
.na-depth-final {
  margin-top: 14px;
  padding: 16px 18px;
  border-radius: 12px;
  background: #f6f9fc;
  border: 1px solid #dce6f0;
}
.na-depth-final span {
  color: #0f766e;
}
.na-depth-final p {
  margin: 6px 0 0;
  color: #334155;
  font-size: 13px;
  line-height: 1.55;
}
@media (max-width: 900px) {
  .na-depth-cards,
  .na-depth-two {
    grid-template-columns: 1fr;
  }
  .na-depth-lanes,
  .na-parity-chart,
  .na-repeat-counts,
  .na4-block-grid {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    height: auto;
  }
}
.number-analysis-four-view {
  overflow: auto;
}
.number-co-grid {
  display: grid;
  grid-template-columns: repeat(35, 430px);
  gap: 18px;
  align-items: start;
  min-width: max-content;
}
.number-co-block {
  border: 1px solid #d7e0ea;
  background: #ffffff;
}
.number-co-title {
  background: #f6d75b;
  color: #17212b;
  font-size: 18px;
  font-weight: 850;
  text-align: center;
  padding: 7px 8px;
  border-bottom: 1px solid #d7e0ea;
}
.number-co-head,
.number-co-row {
  display: grid;
  grid-template-columns: 72px 112px 112px 112px;
  align-items: center;
  min-height: 27px;
  border-bottom: 1px solid #e2e8f0;
}
.number-analysis-four-view:not(.number-analysis-five-view) .number-co-grid {
  grid-template-columns: repeat(35, 460px);
}
.number-analysis-four-view:not(.number-analysis-five-view) .number-co-head,
.number-analysis-four-view:not(.number-analysis-five-view) .number-co-row {
  grid-template-columns: 72px 104px 104px 104px 60px;
}
.number-analysis-five-view .number-co-grid {
  grid-template-columns: repeat(35, 460px);
}
.number-analysis-five-view .number-co-grid.number-co-grid-single {
  grid-template-columns: minmax(430px, 1fr);
  min-width: 0;
}
.number-co-grid.number-co-grid-all .number-co-block {
  /* Keep every combination in the document, while deferring off-screen paint. */
  content-visibility: auto;
  contain-intrinsic-size: auto 1500px;
}
.number-analysis-five-view .number-co-head,
.number-analysis-five-view .number-co-row {
  grid-template-columns: 72px 104px 104px 104px 60px;
}
.number-co-head {
  background: #284460;
}
.number-co-head span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #ffffff;
  font-size: 11px;
  font-weight: 850;
  text-align: center;
  white-space: nowrap;
}
.number-filter-select {
  width: 18px;
  min-width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid #9fb2c5;
  border-radius: 3px;
  background: #ffffff;
  color: #17212b;
  font-size: 0;
  cursor: pointer;
}
.number-filter-select option {
  font-size: 12px;
}
.analysis-page-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 750;
}
.number-analysis-summary .analysis-page-control {
  min-height: 30px;
  padding: 6px 10px;
  border-right: 1px solid #d7e0ea;
  background: #eaf1f8;
  color: #17212b;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}
.analysis-page-select {
  min-width: 132px;
  height: 30px;
  padding: 3px 8px;
  border: 1px solid #9eb1c4;
  border-radius: 6px;
  background: #fff;
  color: #17212b;
  font: inherit;
}
.number-heading-info {
  color: #17212b;
  flex: 0 0 16px;
}
.number-co-head .logic-info em {
  left: 0;
  top: 100%;
  transform: translateY(8px);
  text-align: left;
}
.number-co-row span,
.number-co-row b {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 27px;
  padding: 3px 6px;
  color: #17212b;
  font-size: 11px;
  white-space: nowrap;
}
.number-co-row span {
  background: #fff8d6;
  font-weight: 800;
}
.number-co-row b {
  background: #ffffff;
  font-weight: 650;
}
.number-co-row.same-number span,
.number-co-row.same-number b {
  background: #f8fafc;
  color: #94a3b8;
}
.number-analysis-five-view .number-co-title {
  background: #9bd18b;
}
.number-analysis-five-view .number-co-row span {
  background: #edf8e9;
}
.pb-analysis-three-view .number-co-grid {
  grid-template-columns: repeat(20, 460px);
  align-items: stretch;
}
/* Two header rows, then ONE 29px row per number — however many there are.
   This used to say `repeat(20, 29px)`, which is Australian Powerball's pool
   size (its Powerball ball is 1-20). Every other product feeds this block its
   own pool — South Korea 45, Oz 47, TattsLotto and Weekday Windfall 45, Set
   for Life 44 — so rows 21 upwards fell into implicit auto rows and, with the
   `min-height: 0; height: 100%; overflow: hidden` below, collapsed to nothing.
   The numbers were still in the DOM; they just had no height to be seen in.
   grid-auto-rows sizes every data row alike whatever the pool, so this can
   never again be tied to one game's geometry. */
.pb-analysis-three-view .number-co-block {
  display: grid;
  grid-template-rows: 36px 31px;
  grid-auto-rows: 29px;
}
.pb-analysis-three-view .number-co-head,
.pb-analysis-three-view .number-co-row {
  grid-template-columns: 72px 104px 104px 104px 60px;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
.pb-analysis-three-view .number-co-title {
  background: #7dd3fc;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  height: 100%;
  padding: 0 8px;
}
.pb-analysis-three-view .number-co-row span {
  background: #e0f5fe;
}
.pb-analysis-three-view .number-co-head span,
.pb-analysis-three-view .number-co-row span,
.pb-analysis-three-view .number-co-row b {
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
.pb-analysis-three-view .number-data-bar {
  min-height: 0;
  height: 100%;
}
.pb-analysis-four-view {
  border: 1px solid #b8c2ce;
  border-radius: 6px;
  background: #ffffff;
  overflow: auto;
  padding: 12px;
}
.pb4-summary {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  border: 1px solid #d7e0ea;
  margin-bottom: 14px;
}
.pb4-summary span,
.pb4-summary strong {
  min-height: 30px;
  padding: 6px 10px;
  border-right: 1px solid #d7e0ea;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}
.pb4-summary span {
  background: #eaf1f8;
  font-weight: 850;
}
.pb4-summary strong {
  background: #ffffff;
  font-weight: 850;
}
.pb4-grid {
  display: grid;
  grid-template-columns: repeat(5, 170px);
  gap: 12px;
  min-width: max-content;
}
.pb4-block {
  border: 1px solid #d7e0ea;
  background: #ffffff;
}
.pb4-title {
  background: #7dd3fc;
  color: #17212b;
  font-weight: 850;
  text-align: center;
  padding: 7px 8px;
}
.pb4-head,
.pb4-row,
.pb4-total {
  display: grid;
  grid-template-columns: 72px 96px;
  min-height: 28px;
  align-items: center;
  border-bottom: 1px solid #e2e8f0;
}
.pb4-head {
  background: #284460;
}
.pb4-head span {
  color: #ffffff;
  font-size: 11px;
  font-weight: 850;
  text-align: center;
}
.pb4-row span,
.pb4-row b,
.pb4-total span,
.pb4-total b {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 3px 6px;
  font-size: 11px;
  color: #17212b;
}
.pb4-row span {
  background: #e0f5fe;
  font-weight: 800;
}
.pb4-row b,
.pb4-total b {
  background: #ffffff;
  font-weight: 700;
}
.pb4-total {
  background: #f8fafc;
  border-bottom: 0;
  font-weight: 850;
}
.pb4-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  width: 100%;
  background: #ffffff;
  overflow: hidden;
}
.pb4-bar i {
  position: absolute;
  inset: 3px auto 3px 0;
  width: var(--bar-width);
  background: #7dd3fc;
}
.pb4-bar strong {
  position: relative;
  z-index: 1;
}
.pb4-hover-tooltip {
  position: fixed;
  z-index: 9999;
  max-width: 360px;
  max-height: 260px;
  overflow: auto;
  padding: 8px 10px;
  border: 1px solid #17212b;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.2);
  color: #17212b;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
  white-space: pre;
  pointer-events: none;
}
.pb4-hover-tooltip[hidden] {
  display: none;
}
.powerball-segment-ratio-view {
  border: 1px solid #b8c2ce;
  border-radius: 6px;
  background: #ffffff;
  overflow: auto;
  padding: 12px;
}
.powerball-segment-grid {
  display: grid;
  grid-template-columns: repeat(20, 560px);
  gap: 12px;
  min-width: max-content;
}
.powerball-segment-grid.powerball-segment-grid-single {
  grid-template-columns: minmax(548px, 1fr);
  min-width: 0;
}
.powerball-segment-block {
  border: 1px solid #d7e0ea;
  background: #ffffff;
}
.powerball-segment-title {
  background: #c4b5fd;
  color: #17212b;
  font-weight: 850;
  text-align: center;
  padding: 7px 8px;
}
.powerball-segment-head,
.powerball-segment-row,
.powerball-segment-total {
  display: grid;
  grid-template-columns: 86px 108px 108px 108px 78px 60px;
  min-height: 28px;
  align-items: center;
  border-bottom: 1px solid #e2e8f0;
}
.oe-ratio { font-weight: 850; font-size: 11px; }
.oe-ratio.oe-high { color: #166534; }  /* above expected */
.oe-ratio.oe-low { color: #b91c1c; }   /* below expected */
.oe-ratio.oe-mid { color: #4a5568; } /* 4.45:1 on the cream cell */   /* ~ as expected */
.powerball-segment-head {
  background: #284460;
}
.powerball-segment-head span {
  color: #ffffff;
  font-size: 11px;
  font-weight: 850;
  text-align: center;
}
.powerball-segment-row span,
.powerball-segment-row b,
.powerball-segment-total span,
.powerball-segment-total b {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 3px 6px;
  font-size: 11px;
  color: #17212b;
}
.powerball-segment-row span {
  font-weight: 800;
}
.powerball-segment-row b,
.powerball-segment-total b {
  background: #ffffff;
  font-weight: 700;
}
.powerball-segment-total {
  background: #f8fafc;
  border-bottom: 0;
  font-weight: 850;
}
.ratio-data-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  width: 100%;
  background: #ffffff;
  overflow: hidden;
}
.ratio-data-bar i {
  position: absolute;
  inset: 3px auto 3px 0;
  width: var(--bar-width);
  background: #c4b5fd;
}
.ratio-data-bar strong {
  position: relative;
  z-index: 1;
}
.powerball-number-ratio-view .powerball-segment-title {
  background: #99f6e4;
}
.powerball-number-ratio-view .powerball-segment-row span {
  background: #ecfdf5;
}
.powerball-number-ratio-view .ratio-data-bar i {
  background: #2dd4bf;
}
.pb-analysis-one-view {
  border: 1px solid #b8c2ce;
  border-radius: 6px;
  background: #ffffff;
  overflow: auto;
  max-width: 100%;
  padding: 10px;
}
.pb-excel-view {
  min-width: 1260px;
}
.pb-excel-title {
  display: grid;
  grid-template-columns: 1fr 240px;
  align-items: center;
  margin-bottom: 8px;
}
.pb-excel-title strong,
.pb-excel-title span {
  min-height: 30px;
  padding: 6px 10px;
  background: #1f2937;
  color: #ffffff;
  font-size: 13px;
  font-weight: 850;
}
.pb-excel-title span {
  text-align: center;
}
.pb-excel-range-strip {
  display: grid;
  grid-template-columns: repeat(5, 88px) 208px;
  width: 648px;
  margin-bottom: 10px;
  border: 1px solid #d7e0ea;
}
.pb-excel-range-strip span,
.pb-excel-range-strip b,
.pb-excel-range-strip em {
  min-height: 27px;
  padding: 4px 8px;
  border-right: 1px solid #d7e0ea;
  border-bottom: 1px solid #d7e0ea;
  color: #17212b;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  text-align: center;
}
.pb-excel-range-strip span {
  background: color-mix(in srgb, var(--range-color, #d9eaf7) 60%, white);
}
.pb-excel-range-strip > :nth-child(6n) {
  border-right: 0;
}
.pb-excel-range-strip > :nth-child(n+13) {
  border-bottom: 0;
}
.pb-excel-main {
  display: grid;
  grid-template-columns: 650px 620px;
  gap: 12px;
  align-items: start;
}
.pb-excel-left {
  display: grid;
  gap: 0;
}
.pb-seg-grid {
  display: grid;
  grid-template-columns: repeat(2, 318px);
  gap: 10px 12px;
  align-items: start;
}
.pb-seg-block {
  border: 1px solid #d7e0ea;
}
.pb-seg-head,
.pb-seg-row,
.pb-seg-total {
  display: grid;
  grid-template-columns: 54px 74px 92px 92px;
  align-items: center;
  min-height: 24px;
  border-bottom: 1px solid #e2e8f0;
}
.pb-seg-head {
  background: #284460;
}
.pb-seg-head span {
  color: #ffffff;
  font-size: 11px;
  font-weight: 850;
  text-align: center;
}
.pb-seg-row span,
.pb-seg-total span {
  min-height: 24px;
  padding: 3px 6px;
  background: color-mix(in srgb, var(--range-color) 58%, white);
  color: #17212b;
  font-size: 11px;
  font-weight: 850;
  text-align: center;
}
.pb-seg-row b,
.pb-seg-row em,
.pb-seg-total b,
.pb-seg-total em {
  min-height: 24px;
  padding: 2px 5px;
  color: #17212b;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  text-align: center;
}
.pb-seg-total {
  background: #f8fafc;
  border-bottom: 0;
}
.pb-excel-side {
  display: grid;
  grid-template-columns: 300px 300px;
  gap: 10px;
  align-items: start;
}
.pb-summary-strip {
  display: inline-grid;
  grid-template-columns: max-content 86px max-content 150px;
  margin-bottom: 14px;
  border: 1px solid #d7e0ea;
}
.pb-summary-strip span,
.pb-summary-strip strong {
  min-height: 30px;
  padding: 6px 10px;
  border-right: 1px solid #d7e0ea;
  color: #17212b;
  font-size: 12px;
  white-space: nowrap;
}
.pb-summary-strip span {
  background: #eaf1f8;
  font-weight: 850;
}
.pb-summary-strip strong {
  text-align: center;
}
.pb-summary-strip strong:last-child {
  border-right: 0;
}
.pb-analysis-grid {
  display: grid;
  grid-template-columns: 430px 560px 360px;
  gap: 20px;
  align-items: start;
  min-width: max-content;
}
.pb-card {
  border: 1px solid #d7e0ea;
  background: #ffffff;
}
.pb-card h4 {
  margin: 0;
  padding: 7px 8px;
  background: #1f4e78;
  color: #ffffff;
  font-size: 12px;
  font-weight: 850;
  text-align: center;
}
.pb-heading-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
  white-space: nowrap;
}
.pb-heading-note .logic-info {
  color: #17212b;
  flex: 0 0 16px;
}

.pb1-depth {
  min-width: 1260px;
}
.pb1-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0 3px 3px 0;
  border-radius: 50%;
  border: 2px solid rgba(31, 78, 120, 0.28);
  background: #ffffff;
  color: #17212b;
  font-size: 14px;
  font-weight: 900;
}
.pb1-range-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  border-radius: 7px;
  padding: 5px 8px;
  background: color-mix(in srgb, var(--pb1-range, #eef2f7) 72%, #ffffff);
  color: #17212b;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(23, 33, 43, .08);
}
.pb1-range-graph {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 12px;
  height: 250px;
  align-items: end;
  padding: 12px 8px 0;
}
.pb1-range-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 7px;
  padding: 10px;
  border: 1px solid #dce6f0;
  border-radius: 12px;
  background: #fbfdff;
  text-align: center;
  overflow: hidden;
}
.pb1-range-card span,
.pb1-range-card b,
.pb1-range-card em {
  position: relative;
  z-index: 2;
}
.pb1-range-card span {
  color: #17212b;
  font-size: 13px;
  font-weight: 900;
}
.pb1-range-card b {
  color: #17212b;
  font-size: 20px;
}
.pb1-range-card i {
  width: 100%;
  min-height: 18px;
  border-radius: 10px 10px 5px 5px;
  background: color-mix(in srgb, var(--pb1-range, #5b86a8) 80%, #284460);
  box-shadow: inset 0 0 0 1px rgba(23, 33, 43, .12), 0 8px 16px rgba(23, 33, 43, .08);
}
.pb1-range-card em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}
.pb1-table tr.primary td {
  background: #f0fdfa;
}
.pb1-table tr.cover td {
  background: #fffaf0;
}

.pb2-depth {
  min-width: 1180px;
}
.pb2-distance-graph {
  display: grid;
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  gap: 12px;
  height: 250px;
  align-items: end;
  padding: 12px 8px 0;
}
.pb2-distance-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 7px;
  padding: 10px;
  border: 1px solid #dce6f0;
  border-radius: 12px;
  background: #fbfdff;
  text-align: center;
  overflow: hidden;
}
.pb2-distance-card span,
.pb2-distance-card b,
.pb2-distance-card em {
  position: relative;
  z-index: 2;
}
.pb2-distance-card span {
  color: #17212b;
  font-size: 13px;
  font-weight: 900;
}
.pb2-distance-card b {
  color: #17212b;
  font-size: 22px;
}
.pb2-distance-card i {
  width: 100%;
  min-height: 18px;
  border-radius: 10px 10px 5px 5px;
  background: var(--pb2-band);
  box-shadow: inset 0 0 0 1px rgba(23, 33, 43, .12), 0 8px 16px rgba(23, 33, 43, .08);
}
.pb2-distance-card em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}
.pb2-table tr.primary td {
  background: #f0fdfa;
}
.pb2-table tr.cover td {
  background: #fffaf0;
}
.pb2-journey-table tr.selected td {
  background: #eef7ff;
  box-shadow: inset 3px 0 0 #0ea5e9;
}

.pb3-depth {
  min-width: 1180px;
}
.pb3-table tr.primary td {
  background: #f0fdfa;
}
.pb3-table tr.cover td {
  background: #fffaf0;
}
.pb3-edge-table tr.latest td {
  background: #eefdf8;
  box-shadow: inset 3px 0 0 var(--engine-accent, #2a9d8f);
}

.pb4-depth {
  min-width: 1180px;
}
.pb4-depth-range-graph {
  display: grid;
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  gap: 12px;
  height: 250px;
  align-items: end;
  padding: 12px 8px 0;
}
.pb4-depth-range-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 7px;
  padding: 10px;
  border: 1px solid #dce6f0;
  border-radius: 12px;
  background: #fbfdff;
  text-align: center;
  overflow: hidden;
}
.pb4-depth-range-card span,
.pb4-depth-range-card b,
.pb4-depth-range-card em {
  position: relative;
  z-index: 2;
}
.pb4-depth-range-card span {
  color: #17212b;
  font-size: 13px;
  font-weight: 900;
}
.pb4-depth-range-card b {
  color: #17212b;
  font-size: 20px;
}
.pb4-depth-range-card i {
  width: 100%;
  min-height: 18px;
  border-radius: 10px 10px 5px 5px;
  background: linear-gradient(180deg, #7dd3fc 0%, #0ea5e9 100%);
  box-shadow: inset 0 0 0 1px rgba(23, 33, 43, .12), 0 8px 16px rgba(23, 33, 43, .08);
}
.pb4-depth-range-card em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}
.pb4-depth-table tr.primary td {
  background: #f0fdfa;
}
.pb4-depth-table tr.cover td {
  background: #fffaf0;
}

@media (max-width: 900px) {
  .pb2-distance-graph,
  .pb4-depth-range-graph {
    grid-template-columns: 1fr;
    height: auto;
  }
  .pb2-distance-card,
  .pb4-depth-range-card {
    min-height: 150px;
  }
}

@media (max-width: 900px) {
  .pb1-range-graph {
    grid-template-columns: 1fr;
    height: auto;
  }
  .pb1-range-card {
    min-height: 150px;
  }
}
.pb-heading-note .logic-info em {
  left: auto;
  right: 0;
  top: 100%;
  transform: translateY(8px);
  text-align: left;
}
.pb-range-head,
.pb-range-row,
.pb-number-head,
.pb-number-row,
.pb-dist-head,
.pb-dist-row {
  display: grid;
  align-items: center;
  min-height: 30px;
  border-bottom: 1px solid #e2e8f0;
}
.pb-range-head,
.pb-range-row {
  grid-template-columns: 116px 168px 110px;
}
.pb-number-head,
.pb-number-row {
  grid-template-columns: 88px 96px 112px;
}
.pb-dist-head,
.pb-dist-row {
  grid-template-columns: 166px 66px 64px;
}
.pb-range-head,
.pb-number-head,
.pb-dist-head {
  background: #284460;
}
.pb-range-head span,
.pb-number-head span,
.pb-dist-head span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #ffffff;
  font-size: 11px;
  font-weight: 850;
  text-align: center;
  white-space: nowrap;
}
.pb-filter-select {
  width: 18px;
  min-width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid #9fb2c5;
  border-radius: 3px;
  background: #ffffff;
  color: #17212b;
  font-size: 0;
  cursor: pointer;
}
.pb-filter-select option {
  font-size: 12px;
}
.pb-range-row span,
.pb-number-row span,
.pb-dist-row span {
  min-height: 24px;
  padding: 3px 6px;
  background: color-mix(in srgb, var(--range-color, #eaf1f8) 54%, white);
  color: #17212b;
  font-size: 11px;
  font-weight: 850;
  text-align: center;
}
.pb-range-row b,
.pb-number-row b,
.pb-number-row em,
.pb-dist-row b,
.pb-dist-row em,
.pb-range-row em {
  min-height: 24px;
  padding: 2px 5px;
  color: #17212b;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  text-align: center;
}
.pb-data-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 19px;
  overflow: hidden;
  background: #ffffff;
}
.pb-data-bar i {
  position: absolute;
  inset: 2px auto 2px 0;
  width: var(--bar-width);
  background: color-mix(in srgb, var(--bar-color) 78%, white);
}
.pb-data-bar strong {
  position: relative;
  z-index: 1;
  font-weight: 800;
}
.variation-one-view {
  border: 1px solid #b8c2ce;
  border-radius: 6px;
  overflow: hidden;
  background: #ffffff;
}
.variation-one-grid {
  display: grid;
  grid-template-columns: 620px 470px 300px 480px 780px;
  gap: 26px;
  align-items: start;
  overflow: auto;
  padding: 14px;
}
.variation-family-card,
.variation-main-table,
.variation-bucket-table,
.variation-summary-stack,
.variation-recent-stack {
  min-width: 0;
}
.variation-summary-stack {
  min-width: 480px;
}
.variation-recent-stack {
  min-width: 780px;
}
.variation-main-table,
.variation-bucket-table,
.variation-summary-stack,
.variation-recent-stack {
  margin-top: 37px;
}
.variation-family-card h4 {
  margin: 0 0 8px;
  padding: 8px 10px;
  color: #17212b;
  font-size: 13px;
  font-weight: 850;
  text-align: center;
}
.variation-summary-row,
.variation-summary-head,
.variation-window-table-head,
.variation-window-table-row {
  display: grid;
  align-items: center;
  min-height: 26px;
  border-bottom: 1px solid #e2e8f0;
}
.variation-summary-row,
.variation-summary-head {
  grid-template-columns: minmax(300px, 1fr) 86px 86px;
}
.variation-summary-row span {
  padding: 4px 8px;
  color: #17212b;
  font-size: 12px;
  white-space: nowrap;
}
.variation-summary-row b,
.variation-summary-row em,
.variation-summary-head b,
.variation-summary-head em {
  padding: 4px 6px;
  text-align: center;
  font-size: 12px;
  font-style: normal;
}
.variation-summary-head span {
  padding: 4px 8px;
  color: #ffffff;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}
.variation-window-table {
  margin-top: 12px;
}
.variation-or-table {
  width: 250px;
  margin-top: 12px;
}
.variation-or-row {
  display: grid;
  grid-template-columns: 178px 72px;
  min-height: 25px;
  border-bottom: 1px solid #e2e8f0;
}
.variation-or-row span,
.variation-or-row b {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  color: #17212b;
  font-size: 11px;
  white-space: nowrap;
}
.variation-or-row b {
  justify-content: center;
  font-weight: 750;
}
.variation-window-table-head,
.variation-window-table-row {
  grid-template-columns: 160px 112px 86px 104px 138px;
}
.variation-window-table-head,
.variation-table-head,
.variation-summary-head,
.variation-window-title {
  background: #284460;
  color: #ffffff;
  font-weight: 850;
}
.variation-window-table-head span,
.variation-window-table-row span,
.variation-window-table-row b {
  padding: 4px 6px;
  font-size: 11px;
  text-align: center;
  white-space: nowrap;
}
.variation-window-table-row span {
  text-align: left;
}
.variation-table-head,
.variation-table-row,
.variation-bucket-row {
  display: grid;
  align-items: center;
  min-height: 27px;
  border-bottom: 1px solid #e2e8f0;
}
.variation-table-head {
  grid-template-columns: 160px 100px 104px 104px;
  font-size: 12px;
}
.variation-table-row {
  grid-template-columns: 160px 100px 104px 104px;
}
.variation-bucket-table .variation-table-head,
.variation-bucket-row {
  grid-template-columns: 136px 78px 86px;
}
.variation-table-head span,
.variation-table-head em,
.variation-table-row span,
.variation-table-row b,
.variation-bucket-row span,
.variation-bucket-row b {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 27px;
  padding: 3px 6px;
  font-size: 11px;
  color: #17212b;
  white-space: nowrap;
}
.variation-table-head span {
  color: #ffffff;
}
.variation-table-head em {
  color: #ffffff;
  font-style: normal;
  font-weight: 850;
}
.variation-table-row span {
  background: #eef4fb;
  font-weight: 800;
}
.variation-table-row b,
.variation-bucket-row b {
  background: #ffffff;
  font-weight: 650;
}
.variation-recent-row b {
  background: #ffffff;
}
.variation-data-bar {
  position: relative;
  width: 100%;
  min-height: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #ffffff;
}
.variation-data-bar i {
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: var(--bar-width);
  background: var(--bar-color);
}
.variation-data-bar strong {
  position: relative;
  z-index: 1;
  color: #0f172a;
  font-size: inherit;
  font-weight: inherit;
}
.variation-window-title {
  min-height: 27px;
  display: flex;
  align-items: center;
  padding: 3px 8px;
  font-size: 12px;
}
.variation-window-block {
  margin-bottom: 12px;
  border: 1px solid #d8e0ea;
}
.variation-recent-heading {
  min-height: 27px;
  display: flex;
  align-items: center;
  padding: 4px 8px;
  background: #284460;
  color: #ffffff;
  font-size: 12px;
  font-weight: 850;
}
.variation-recent-grid {
  display: grid;
  grid-template-columns: repeat(4, 180px);
  gap: 12px;
  align-items: start;
  margin-top: 8px;
}
.variation-recent-block {
  border: 1px solid #d8e0ea;
}
.variation-recent-title {
  min-height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eef4fb;
  color: #17212b;
  font-size: 12px;
  font-weight: 850;
}
.variation-recent-head,
.variation-recent-row {
  display: grid;
  grid-template-columns: 72px 48px 60px;
  min-height: 26px;
  border-bottom: 1px solid #e2e8f0;
}
.variation-recent-head {
  background: #284460;
  color: #ffffff;
  font-weight: 850;
}
.variation-recent-head span,
.variation-recent-row span,
.variation-recent-row b {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px 5px;
  font-size: 10px;
  white-space: nowrap;
}
.variation-recent-row span {
  background: #eef4fb;
  color: #17212b;
  font-weight: 750;
}
.or-tooltip {
  position: relative;
  cursor: help;
}
.variation-table-row b,
.variation-bucket-row b,
.variation-recent-row b {
  background: #ffffff !important;
}
.or-tooltip span {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  display: none;
  width: 170px;
  padding: 7px 9px;
  border: 1px solid #17212b;
  border-radius: 8px;
  background: #ffffff;
  color: #17212b;
  box-shadow: 0 10px 22px rgba(23, 33, 43, .16);
  font-size: 11px;
  line-height: 1.3;
  z-index: 5;
}
.or-tooltip:hover span {
  display: block;
}

/* V1-V13 premium skin: premium presentation without changing the underlying analysis. */
.variation-one-view.variation-premium-view {
  border: 1px solid #d7e1ec;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--variation-premium-accent, #bfd0e4) 42%, rgba(255, 255, 255, 0)), transparent 28%),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 42%);
  box-shadow: 0 16px 36px rgba(23, 33, 43, .08);
}
.variation-premium-view .variation-one-grid {
  gap: 18px;
  padding: 20px;
  background: transparent;
}
.variation-premium-view .variation-family-card,
.variation-premium-view .variation-main-table,
.variation-premium-view .variation-bucket-table,
.variation-premium-view .variation-summary-stack,
.variation-premium-view .variation-recent-stack {
  border: 1px solid #dce6f0;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 10px 24px rgba(23, 33, 43, .06);
}
.variation-premium-view .variation-main-table,
.variation-premium-view .variation-bucket-table,
.variation-premium-view .variation-summary-stack,
.variation-premium-view .variation-recent-stack {
  margin-top: 0;
}
.variation-premium-view .variation-family-card {
  border-top: 4px solid var(--variation-premium-accent, #bfd0e4);
}
.variation-premium-view .variation-family-card h4 {
  margin: 0;
  padding: 12px 14px;
  background: linear-gradient(135deg, #17212b 0%, #2b4967 100%) !important;
  color: #ffffff;
  font-size: 14px;
  letter-spacing: .01em;
}
.variation-premium-view .variation-window-table {
  padding: 0 12px 12px;
}
.variation-premium-view .variation-or-table {
  margin: 12px 12px 14px;
}
.variation-premium-view .variation-window-table-head,
.variation-premium-view .variation-table-head,
.variation-premium-view .variation-summary-head,
.variation-premium-view .variation-window-title,
.variation-premium-view .variation-recent-heading,
.variation-premium-view .variation-recent-head {
  background: linear-gradient(135deg, #17212b 0%, #284460 100%);
  color: #ffffff;
}
.variation-premium-view .variation-summary-row,
.variation-premium-view .variation-window-table-row,
.variation-premium-view .variation-table-row,
.variation-premium-view .variation-bucket-row,
.variation-premium-view .variation-recent-row,
.variation-premium-view .variation-or-row {
  border-bottom-color: #edf2f7;
}
.variation-premium-view .variation-summary-row:nth-of-type(even),
.variation-premium-view .variation-window-table-row:nth-of-type(even),
.variation-premium-view .variation-table-row:nth-child(odd),
.variation-premium-view .variation-bucket-row:nth-child(odd),
.variation-premium-view .variation-recent-row:nth-child(odd) {
  background: #fbfdff;
}
.variation-premium-view .variation-table-row span,
.variation-premium-view .variation-recent-row span,
.variation-premium-view .variation-recent-title {
  background: #f0f5fb;
  color: #1e2c3a;
}
.variation-premium-view .variation-table-row span {
  min-height: 23px;
  margin: 3px 5px;
  border-radius: 7px;
  background: linear-gradient(180deg, #f5f9fd 0%, #eaf1f8 100%);
  box-shadow: inset 0 0 0 1px rgba(139, 161, 184, .22);
}
.variation-premium-view .variation-table-row b,
.variation-premium-view .variation-bucket-row b,
.variation-premium-view .variation-recent-row b {
  background: transparent !important;
}
.variation-premium-view .variation-data-bar {
  min-height: 22px;
  border: 1px solid #e2eaf3;
  border-radius: 999px;
  background: #f3f7fb;
  box-shadow: inset 0 1px 2px rgba(23, 33, 43, .04);
}
.variation-premium-view .variation-data-bar i {
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(var(--bar-width) - 6px);
  min-width: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--bar-color) 82%, #ffffff), var(--bar-color));
  box-shadow: 0 1px 4px rgba(69, 92, 115, .18);
}
.variation-premium-view .variation-data-bar strong {
  color: #0f172a;
  font-weight: 800;
}
.variation-premium-view .variation-window-block,
.variation-premium-view .variation-recent-block {
  overflow: hidden;
  border: 1px solid #dce6f0;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(23, 33, 43, .04);
}
.variation-premium-view .variation-recent-grid {
  gap: 14px;
  padding: 0 12px 14px;
}
.variation-premium-view .variation-recent-heading {
  padding: 10px 12px;
}

/* ---- Variation Analysis · deeper-read insight graphs ---- */
.var-ins { margin: 26px 0 6px; padding: 20px 18px 0; border-top: 1px solid #e3e8ee; }
.var-ins-head h4 { font-size: 15px; font-weight: 800; color: #17212b; margin: 0 0 6px; }
.var-ins-head p { margin: 0 0 4px; font-size: 13px; color: #475569; line-height: 1.55; }
.var-ins-head b { color: #17212b; }
.var-ins-empty { font-size: 13px; color: #4a5662; line-height: 1.55; background: #f6f8fb; border: 1px solid #e3e8ee; border-radius: 9px; padding: 14px 16px; }
.var-ins-empty b { color: #17212b; }
.var-ins-card { background: #fff; border: 1px solid #e1e7ee; border-radius: 10px; padding: 14px 16px; margin-top: 14px; }
.var-ins-card-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.var-ins-card-head h5 { margin: 0; font-size: 13px; font-weight: 800; color: #17212b; }
.var-ins-n { width: 24px; height: 24px; border-radius: 50%; background: #17212b; color: #fff; font-size: 11.5px; font-weight: 800; line-height: 1; display: flex; align-items: center; justify-content: center; flex: none; }
.var-ins-note { margin: 9px 0 0; font-size: 12.5px; color: #4a5662; line-height: 1.55; }
.var-ins-note b { color: #17212b; }
.vi-svg { width: 100%; height: auto; display: block; }
.vi-ax { font-size: 10px; fill: var(--muted); }
.vi-axt { font-size: 10.5px; font-weight: 700; fill: #5b6b7b; }
.vi-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 2px 0 8px; font-size: 11px; color: #4a5662; }
.vi-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.vi-legend i.vi-dash { width: 14px; height: 0; border-top: 2px dashed #44546a; border-radius: 0; vertical-align: 2px; }
.vi-row { display: grid; grid-template-columns: 90px 1fr 52px; align-items: center; gap: 10px; margin-bottom: 6px; }
.vi-row-lab { font-size: 11.5px; font-weight: 700; color: #4a5662; }
.vi-track { position: relative; background: #eef2f7; border-radius: 6px; height: 16px; }
.vi-fill { height: 100%; border-radius: 6px; min-width: 3px; }
.vi-tick { position: absolute; top: -3px; bottom: -3px; width: 0; border-left: 2px dotted #44546a; opacity: .6; }
.vi-row-num { text-align: right; font-size: 12px; font-weight: 800; color: #17212b; }
.vi-rp { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.vi-gap-title, .vi-gap-none { font-size: 11px; color: var(--muted); margin-bottom: 7px; }
.vi-gap-none { font-style: italic; }
.vi-build { margin-top: 12px; }
.vi-build-lab { display: block; font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.vi-skel { display: flex; gap: 7px; }
.vi-slot { width: 46px; height: 34px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; color: #fff; background: #eef2f7; }
.vi-slot.c0 { background: #eef2f7; color: transparent; border: 1px dashed #cbd5e1; }
.vi-slot.c1 { background: #46708f; } /* white on #5b86a8 was 3.87:1 */
.vi-slot.c2 { background: #1f7368; } /* white on the accent was 3.32:1 */
.vi-slot.c3 { background: #1f7d72; }
.vi-slot.c4 { background: #a34d55; } /* white on #c1666b was 3.6:1 */
.vi-slot.c5 { background: #b3503f; }
.vi-slot.c6 { background: #9a4040; }
.vi-slot.c7 { background: #7a2f2f; }
@media (max-width: 760px) { .vi-rp { grid-template-columns: 1fr; gap: 12px; } }

/* ---- Variation Analysis · which arrangement next ---- */
.var-next { margin-top: 18px; padding: 0 18px; }
.vt-panel .graph-summary div { padding: 10px 14px; }
.vt-panel .graph-summary span { font-size: 11px; }
.vt-panel .graph-summary strong { font-size: 14px; }
.vn-list { margin: 8px 0 2px; }
.vn-row { display: grid; grid-template-columns: 64px 86px 110px 1fr; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid #f0f3f7; font-size: 12.5px; }
.vn-arr { font-weight: 800; color: #17212b; text-align: center; padding: 2px 6px; border-radius: 5px; border: 1px solid rgba(23,33,43,0.06); }
.vn-seen { color: #4a5662; }
.vn-ago { color: #17212b; font-weight: 700; }
.vn-tag { font-weight: 700; }
.vn-table { width: 100%; border-collapse: collapse; margin: 10px 0 4px; font-size: 12.5px; }
.vn-table th { text-align: left; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); border-bottom: 1px solid #dde4ec; padding: 6px 8px; }
.vn-table td { padding: 7px 8px; border-bottom: 1px solid #f0f3f7; color: #2b3a3a; }
.vn-table td:first-child { font-weight: 700; color: #17212b; }
.vn-final { margin-top: 18px; background: #17212b; border-radius: 12px; padding: 18px 20px; }
.vn-final-eyebrow { display: block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #5eaa9c; margin-bottom: 10px; }
.vn-final-intro { margin: 0 0 14px; font-size: 13.5px; color: #d2dadf; line-height: 1.6; }
.vn-final-intro b { color: #fff; }
.vn-pick-list { display: grid; gap: 10px; }
.vn-pick { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; background: #1f2a36; border: 1px solid #2c3a48; border-radius: 9px; padding: 12px 14px; }
.vn-pick-rank { width: 26px; height: 26px; border-radius: 50%; background: var(--engine-accent, #2a9d8f); color: #fff; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.vn-pick-arr { display: inline-block; font-size: 15px; font-weight: 800; color: #17212b; padding: 2px 10px; border-radius: 6px; }
.vn-pick > div p { margin: 6px 0 0; font-size: 12.5px; color: #c0cace; line-height: 1.5; }
.vn-pick > div p b { color: #fff; }
.vn-final-note { margin: 14px 0 0; font-size: 12px; color: #aeb9c0; line-height: 1.55; font-style: italic; }
.vn-final-note b { color: #fff; }
@media (max-width: 760px) { .vn-row { grid-template-columns: 56px 1fr; row-gap: 2px; } .vn-row .vn-tag { grid-column: 2; } }
.vt-panel { margin: 8px 0 2px; }
.vt-empty { font-size: 13px; color: #4a5662; background: #f6f8fb; border: 1px solid #e3e8ee; border-radius: 9px; padding: 12px 14px; }

/* ---- Variation Analysis - decision insight layer ---- */
.vrep-report {
  margin: 26px 18px 6px;
  padding: 22px;
  border: 1px solid #d7e0eb;
  border-radius: 13px;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 46%);
  box-shadow: 0 10px 24px rgba(23, 33, 43, .05);
}
.vrep-hero {
  padding: 20px 22px;
  border-radius: 12px;
  background: #17212b;
  color: #ffffff;
}
.vrep-hero span,
.vrep-pick-card span,
.vrep-context-card span,
.vrep-final span {
  display: block;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.vrep-hero span {
  color: #7dd3c7;
}
.vrep-hero h4 {
  margin: 7px 0 8px;
  font-size: 24px;
  line-height: 1.15;
}
.vrep-hero p {
  max-width: 940px;
  margin: 0;
  color: #d3dde6;
  font-size: 14px;
  line-height: 1.65;
}
.vrep-depth-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 16px;
}
.vrep-depth-grid div {
  padding: 12px 13px;
  border: 1px solid #dce6f0;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(23, 33, 43, .04);
}
.vrep-depth-grid span,
.vrep-depth-grid em {
  display: block;
  color: #64748b;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}
.vrep-depth-grid b {
  display: block;
  margin: 5px 0 2px;
  color: #17212b;
  font-size: 22px;
  line-height: 1;
}
.vrep-exec-grid {
  display: grid;
  grid-template-columns: minmax(210px, .8fr) minmax(210px, .8fr) minmax(300px, 1.4fr);
  gap: 14px;
  margin: 16px 0;
}
.vrep-pick-card,
.vrep-context-card,
.vrep-section {
  border: 1px solid #dde6f0;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(23, 33, 43, .04);
}
.vrep-pick-card {
  padding: 17px;
  border-top-width: 4px;
}
.vrep-pick-card.lead {
  border-top-color: var(--vrep-lead, #4f83c2);
}
.vrep-pick-card.cover {
  border-top-color: #5b86a8;
}
.vrep-pick-card span,
.vrep-context-card span {
  color: #64748b;
}
.vrep-pick-card b {
  display: block;
  margin: 5px 0 4px;
  color: #17212b;
  font-size: 34px;
  line-height: 1;
}
.vrep-pick-card em {
  display: block;
  color: #0f766e;
  font-size: 13px;
  font-weight: 850;
  font-style: normal;
}
.vrep-pick-card p,
.vrep-context-card p,
.vrep-note {
  margin: 10px 0 0;
  color: #4a5662;
  font-size: 13px;
  line-height: 1.55;
}
.vrep-context-card {
  padding: 17px 18px;
}
.vrep-section {
  margin-top: 14px;
  padding: 17px 18px;
}
.vrep-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}
.vrep-scoreboard {
  display: grid;
  gap: 8px;
}
.vrep-score-row {
  display: grid;
  grid-template-columns: 30px 84px minmax(160px, 1fr) 76px minmax(180px, .8fr);
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 6px 8px;
  border: 1px solid #e4ebf3;
  border-radius: 9px;
  background: #fbfdff;
}
.vrep-score-row.lead {
  border-color: #9cc1df;
  background: #f3f8ff;
}
.vrep-score-row.cover {
  border-color: #b8cad9;
  background: #f7fafc;
}
.vrep-score-row > span:first-child {
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
  text-align: center;
}
.vrep-score-row div {
  height: 15px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf2f7;
}
.vrep-score-row i {
  display: block;
  height: 100%;
  border-radius: inherit;
}
.vrep-score-row b {
  color: #17212b;
  font-size: 13px;
}
.vrep-score-row em {
  color: #586678;
  font-size: 12px;
  font-style: normal;
}
.vrep-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  padding: 3px 9px;
  border: 1px solid rgba(23, 33, 43, .1);
  border-radius: 7px;
  background: color-mix(in srgb, var(--vrep-chip) 24%, #ffffff);
  color: #17212b;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.1;
  vertical-align: middle;
}
.vrep-chip.cover {
  background: #e7eef5;
}
.vrep-table {
  width: 100%;
  margin-top: 8px;
}
.vrep-table td,
.vrep-table th {
  vertical-align: middle;
}
.vrep-table td:first-child {
  font-weight: 800;
  color: #17212b;
}
.vrep-bar-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 120px;
  min-height: 22px;
  overflow: hidden;
  border-radius: 7px;
  background: #eef3f8;
}
.vrep-bar-cell i {
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  border-radius: 6px;
}
.vrep-bar-cell strong {
  position: relative;
  z-index: 1;
  padding: 0 7px;
  color: #17212b;
  font-size: 12px;
}
.vrep-list {
  margin: 10px 0 14px;
  padding-left: 0;
  list-style: none;
}
.vrep-list li {
  position: relative;
  margin: 7px 0;
  padding-left: 22px;
  color: #4a5662;
  font-size: 13px;
  line-height: 1.45;
}
.vrep-list li::before {
  position: absolute;
  left: 0;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  content: "";
}
.vrep-list.support li::before {
  background: var(--engine-accent, #2a9d8f);
}
.vrep-list.conflict li::before {
  background: #c1666b;
}
.vrep-section h5 {
  margin: 10px 0 0;
  color: #17212b;
  font-size: 13px;
  font-weight: 850;
}
.vrep-risk-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.vrep-risk-grid div {
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  background: #f8fafc;
}
.vrep-risk-grid span,
.vrep-risk-grid em {
  display: block;
  color: #64748b;
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
}
.vrep-risk-grid b {
  display: block;
  margin: 4px 0 1px;
  color: #17212b;
  font-size: 22px;
  line-height: 1;
}
.vrep-audit {
  font-size: 12px;
}
.vrep-audit .vrep-chip {
  min-width: 54px;
}
.vrep-final {
  margin-top: 16px;
  padding: 20px 22px;
  border-radius: 13px;
  background: linear-gradient(135deg, #17212b 0%, #243446 100%);
  color: #ffffff;
}
.vrep-final span {
  color: #7dd3c7;
}
.vrep-final h4 {
  margin: 7px 0 8px;
  font-size: 22px;
  line-height: 1.25;
}
.vrep-final p {
  margin: 0;
  color: #d5dee7;
  font-size: 14px;
  line-height: 1.6;
}
.vrep-final .vrep-disclaimer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  /* #afbbc8 restored. A previous contrast fix measured this text against
     WHITE — #afbbc8 on white really is 1.95:1 — and darkened it to
     #5b6779. But .vrep-final is a DARK panel, linear-gradient(135deg,
     #17212b, #243446), so the fix ran the wrong way: 6.51:1 -> 2.21:1,
     three times worse, on the ten products that render this panel.
     It stayed invisible because the visual sweep SKIPPED gradient
     backgrounds as unknowable — the same blind spot that let the
     original mismeasurement happen. Worst stop now 6.51:1.
     Measured by scripts/probe_de_gradient_contrast.mjs. */
  color: #afbbc8;
  font-size: 12.5px;
  font-style: italic;
}
.vrep-final .vrep-chip {
  background: #ffffff;
}
.v14-report {
  border-color: #d0a617;
  background: linear-gradient(180deg, #fffdf6 0%, #ffffff 42%);
}
.v14-hero {
  background: linear-gradient(135deg, #17212b 0%, #243446 64%, #3b2f0d 100%);
}
.v14-exec-grid .vrep-pick-card strong {
  display: block;
  margin: 4px 0 6px;
  color: #334155;
  font-size: 20px;
  line-height: 1;
}
.v14-seg-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  padding: 3px 9px;
  border: 1px solid rgba(23, 33, 43, .10);
  border-radius: 7px;
  background: color-mix(in srgb, var(--v14-seg) 58%, #ffffff);
  color: #17212b;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.1;
  vertical-align: middle;
}
.v14-scoreboard {
  display: grid;
  gap: 8px;
}
.v14-score-row {
  display: grid;
  grid-template-columns: 30px 82px 82px 58px minmax(150px, 1fr) 76px minmax(190px, .8fr);
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 7px 8px;
  border: 1px solid #e4ebf3;
  border-radius: 9px;
  background: #fbfdff;
}
.v14-score-row.lead {
  border-color: #d0a617;
  background: #fffaf0;
}
.v14-score-row.cover {
  border-color: #b8cad9;
  background: #f7fafc;
}
.v14-score-row > span:first-child,
.v14-score-row small {
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
  text-align: center;
}
.v14-score-row div {
  height: 15px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf2f7;
}
.v14-score-row i {
  display: block;
  height: 100%;
  border-radius: inherit;
}
.v14-score-row b {
  color: #17212b;
  font-size: 13px;
}
.v14-score-row em {
  color: #586678;
  font-size: 12px;
  font-style: normal;
}
.v14-table td,
.v14-audit td {
  font-size: 12.5px;
}
@media (max-width: 980px) {
  .vrep-exec-grid,
  .vrep-two-col {
    grid-template-columns: 1fr;
  }
  .vrep-depth-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vrep-score-row {
    grid-template-columns: 26px 72px minmax(120px, 1fr) 66px;
  }
  .vrep-score-row em {
    grid-column: 3 / -1;
  }
  .v14-score-row {
    grid-template-columns: 28px 76px 76px 52px minmax(140px, 1fr) 70px;
  }
  .v14-score-row em {
    grid-column: 5 / -1;
  }
}
@media (max-width: 640px) {
  .vrep-report {
    margin-left: 0;
    margin-right: 0;
    padding: 14px;
  }
  .vrep-score-row {
    grid-template-columns: 24px 70px 1fr;
  }
  .vrep-score-row b,
  .vrep-score-row em {
    grid-column: 2 / -1;
  }
  .vrep-risk-grid {
    grid-template-columns: 1fr;
  }
  .vrep-depth-grid {
    grid-template-columns: 1fr;
  }
  .v14-score-row {
    grid-template-columns: 24px 70px 70px 1fr;
  }
  .v14-score-row div,
  .v14-score-row b,
  .v14-score-row em {
    grid-column: 2 / -1;
  }
}

.segment-analysis-title {
  background: #1D2330;
  color: #ffffff;
  font-size: 10px;
  font-weight: 850;
  padding: 8px 12px;
  text-transform: uppercase;
}
.segment-analysis-scroll {
  overflow: auto;
}
.segment-analysis-grid {
  min-width: 1160px;
  display: grid;
  grid-template-columns: minmax(470px, 1fr) 150px minmax(470px, 1fr);
  align-items: start;
  background: #ffffff;
}
.seg-left,
.seg-right {
  display: grid;
  align-content: start;
}
.seg-header,
.seg-row {
  display: grid;
  min-height: 30px;
  border-bottom: 1px solid #dbe4ef;
}
.seg-header {
  background: #284460;
  color: #ffffff;
  font-weight: 850;
  font-size: 13px;
}
.seg-header.left,
.seg-row {
  grid-template-columns: minmax(190px, 1fr) 92px 90px 90px;
}
.seg-header.left {
  grid-template-columns: 32px minmax(158px, 1fr) 92px 90px 90px;
}
.seg-header.right,
.seg-right .seg-row {
  grid-template-columns: 90px 90px 92px minmax(158px, 1fr) 32px;
}
.seg-header span,
.seg-row > div {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 4px 6px;
  border-right: 1px solid #dbe4ef;
}
.seg-header span {
  justify-content: center;
  border-right-color: #8fa3b8;
}
.seg-condition {
  gap: 6px;
  background: #eef4fb;
  font-size: 12px;
}
.seg-condition.right {
  justify-content: space-between;
}
.seg-condition strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seg-indicator {
  flex: 0 0 24px;
  height: 24px;
  display: grid;
  place-items: center;
  background: #e8eef5;
  border: 1px solid #c2cedd;
  color: #2f4a68;
  font-weight: 800;
}
.seg-pattern {
  justify-content: center;
  font-weight: 650;
  font-size: 10px;
}
.seg-value {
  position: relative;
  justify-content: center;
  overflow: hidden;
}
.seg-value .seg-bar {
  position: absolute;
  left: 4px;
  top: 5px;
  bottom: 5px;
  border-radius: 2px;
  border: 1px solid rgba(23, 33, 43, 0.12);
}
.seg-value.occurrence .seg-bar {
  background: #aebfd4;
}
.seg-value.probability .seg-bar {
  background: #5b86a8;
}
.seg-value b {
  position: relative;
  z-index: 3;
  font-weight: 500;
  font-size: 10px;
}
.seg-block {
  display: grid;
  align-content: start;
  margin-bottom: 14px;
}
.seg-graphs {
  margin-top: 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  padding: 20px 24px 24px;
}
.seg-graph-head h4 { margin: 0 0 5px; font-size: 16px; color: #17212b; }
.seg-graph-head p { margin: 0 0 20px; color: var(--muted); font-size: 13px; line-height: 1.5; max-width: 760px; }
.seg-graph-head p b { color: #17212b; }
.seg-graph-body { display: grid; grid-template-columns: 232px 1fr; gap: 36px; align-items: start; }
.seg-donut-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.seg-donut { width: 200px; height: 200px; }
.seg-donut-value { font-size: 30px; font-weight: 850; fill: #17212b; }
.seg-donut-label { font-size: 12px; font-weight: 700; fill: var(--muted); }
.seg-donut-legend { display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; color: #334155; font-weight: 600; }
.seg-donut-legend span { display: flex; align-items: center; gap: 8px; }
.seg-donut-legend i { width: 12px; height: 12px; border-radius: 3px; }
.seg-bars-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 14px; }
.seg-bar-row { display: grid; grid-template-columns: 56px 1fr 70px; align-items: center; gap: 12px; margin-bottom: 9px; }
.seg-bar-key { font-size: 11px; font-weight: 700; text-align: center; padding: 3px 0; border-radius: 4px; color: #17212b; border: 1px solid rgba(23, 33, 43, 0.08); }
.seg-bar-track { background: #eef2f7; border-radius: 5px; height: 18px; }
.seg-bar-fill { height: 100%; border-radius: 5px; min-width: 3px; }
.seg-bar-num { font-size: 12px; font-weight: 750; color: #17212b; text-align: right; line-height: 1.1; }
.seg-bar-num i { display: block; font-style: normal; font-size: 10.5px; color: var(--muted); font-weight: 600; }
.seg-tier-block { width: 100%; margin-top: 4px; }
.seg-tier-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 8px; text-align: center; }
.seg-tier-bar { display: flex; height: 26px; border-radius: 6px; overflow: hidden; border: 1px solid rgba(23, 33, 43, 0.10); }
.seg-tier-bar span { display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 11px; font-weight: 800; min-width: 2px; }
.seg-tier-legend { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; font-size: 12px; color: #334155; font-weight: 600; }
.seg-tier-legend span { display: flex; align-items: center; gap: 8px; }
.seg-tier-legend i { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
@media (max-width: 760px) {
  .seg-graph-body { grid-template-columns: 1fr; }
}
.seg-decision { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 22px; }
.seg-decision-body { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; }
.seg-dec-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 14px; }
.seg-dec-row { display: grid; grid-template-columns: 80px 1fr 52px; align-items: center; gap: 12px; margin-bottom: 9px; }
.seg-dec-label { font-size: 12px; font-weight: 700; color: #17212b; }
.seg-dec-track { background: #eef2f7; border-radius: 5px; height: 18px; }
.seg-dec-fill { height: 100%; border-radius: 5px; background: #aebfd4; min-width: 3px; }
.seg-dec-fill.hi { background: var(--engine-accent, #2a9d8f); }
.seg-dec-num { font-size: 12px; font-weight: 750; color: #17212b; text-align: right; }
.seg-dec-note { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.seg-dec-note b { color: #17212b; }
.seg-dec-takeaway { margin-top: 22px; background: #f1f6f5; border: 1px solid #d7e7e3; border-left: 3px solid var(--engine-accent, #2a9d8f); border-radius: 8px; padding: 14px 16px; }
.seg-dec-takeaway strong { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #2a7d72; margin-bottom: 6px; }
.seg-dec-takeaway p { margin: 0; font-size: 13px; color: #2b3a3a; line-height: 1.55; }
.seg-dec-takeaway b { color: #17212b; }
@media (max-width: 760px) { .seg-decision-body { grid-template-columns: 1fr; } }

/* ---- Segment Analysis 1 · conditions deep-dive (before the bottom line) ---- */
.seg-cond-deep { margin-top: 30px; padding-top: 22px; border-top: 1px solid #e3e8ee; }
.seg-cond-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 4px 0 10px; }
.seg-cond-card { background: #fff; border: 1px solid #e1e7ee; border-radius: 9px; padding: 13px 15px; }
.seg-cond-card-head { display: flex; align-items: center; gap: 8px; }
.seg-cond-card-head b { font-size: 14px; color: #17212b; }
.seg-cond-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.seg-cond-badge { margin-left: auto; font-size: 10.5px; font-weight: 700; color: #5b6b7b; background: #eef2f7; border-radius: 20px; padding: 2px 9px; }
.seg-cond-mean { font-size: 11.5px; color: var(--muted); line-height: 1.45; margin: 5px 0 8px; }
.seg-cond-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.seg-cond-chip { font-size: 11px; font-weight: 800; color: #17212b; padding: 2px 7px; border-radius: 5px; border: 1px solid rgba(23,33,43,0.08); }
.seg-cond-track { position: relative; background: #eef2f7; border-radius: 6px; height: 16px; }
.seg-cond-fill { height: 100%; border-radius: 6px; min-width: 3px; }
.seg-cond-tick { position: absolute; top: -3px; bottom: -3px; width: 0; border-left: 2px dotted #44546a; opacity: .6; }
.seg-cond-foot { margin-top: 7px; font-size: 11.5px; color: #4a5662; }
.seg-cond-foot b { color: #17212b; font-weight: 800; }
.seg-cond-legend { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--muted); font-style: italic; margin: 2px 0 18px; }
.seg-cond-tickkey { display: inline-block; width: 0; height: 13px; border-left: 2px dotted #44546a; }
.seg-cond-relate { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 28px; align-items: center; margin: 6px 0 6px; }
.seg-cond-relate-chart { min-width: 0; }
.seg-sc { width: 100%; height: auto; display: block; }
.seg-sc-tick { font-size: 10px; fill: var(--muted); }
.seg-sc-lab { font-size: 10px; font-weight: 700; fill: #44546a; }
.seg-sc-axis { font-size: 10.5px; font-weight: 700; fill: #5b6b7b; }
.seg-cond-relate-read p { margin: 0 0 11px; font-size: 13px; color: #2b3a3a; line-height: 1.55; }
.seg-cond-relate-read b { color: #17212b; }
.seg-cond-notes { margin-top: 14px; display: grid; gap: 11px; }
.seg-cond-notes p { margin: 0; font-size: 13px; color: #2b3a3a; line-height: 1.55; }
.seg-cond-notes b { color: #17212b; }
@media (max-width: 760px) { .seg-cond-grid { grid-template-columns: 1fr; } .seg-cond-relate { grid-template-columns: 1fr; } }

.seg3-graph-body { display: grid; grid-template-columns: minmax(0, 540px) 1fr; gap: 34px; align-items: start; }
.seg3-heat-grid { display: grid; gap: 2px; }
.seg3-heat-corner { font-size: 10px; font-weight: 700; color: var(--muted); display: flex; align-items: flex-end; }
.seg3-heat-colhead { font-size: 10px; font-weight: 700; color: #475569; text-align: center; align-self: end; padding-bottom: 3px; }
.seg3-heat-row-label { font-size: 10px; font-weight: 800; color: #17212b; border: 1px solid rgba(23, 33, 43, 0.10); border-radius: 4px; cursor: pointer; padding: 0; height: 26px; }
.seg3-heat-row-label.sel { outline: 2px solid #17212b; outline-offset: -1px; }
.seg3-heat-cell { height: 26px; border-radius: 3px; }
.seg3-heat-cell.rowsel { box-shadow: inset 0 0 0 1px rgba(23, 33, 43, 0.18); }
.seg3-heat-scale { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 11px; color: var(--muted); font-weight: 600; }
.seg3-heat-scale i { flex: 1; height: 8px; border-radius: 4px; background: linear-gradient(90deg, rgba(42, 157, 143, 0.14), rgba(42, 157, 143, 0.96)); }
.seg3-side-wrap { display: flex; flex-direction: column; gap: 26px; }
.seg3-drill-title { font-size: 13px; font-weight: 700; color: #17212b; margin-bottom: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; line-height: 1.5; }
.seg3-top-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 14px; }
.seg3-chip { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 4px; color: #17212b; border: 1px solid rgba(23, 33, 43, 0.08); }
.seg3-bar-row { display: grid; grid-template-columns: 52px 1fr 60px; align-items: center; gap: 10px; margin-bottom: 8px; }
.seg3-bar-key { font-size: 11px; font-weight: 700; text-align: center; padding: 3px 0; border-radius: 4px; color: #17212b; border: 1px solid rgba(23, 33, 43, 0.08); }
.seg3-bar-track { background: #eef2f7; border-radius: 5px; height: 16px; }
.seg3-bar-fill { height: 100%; border-radius: 5px; background: var(--engine-accent, #2a9d8f); min-width: 3px; }
.seg3-bar-num { font-size: 12px; font-weight: 750; color: #17212b; text-align: right; line-height: 1.1; }
.seg3-bar-num i { display: block; font-style: normal; font-size: 10px; color: var(--muted); font-weight: 600; }
.seg3-seq-row { display: grid; grid-template-columns: auto auto auto 1fr auto; align-items: center; gap: 8px; margin-bottom: 8px; }
.seg3-seq-arrow { color: var(--muted); font-weight: 800; }
.seg3-empty { color: var(--muted); font-size: 13px; }
@media (max-width: 900px) { .seg3-graph-body { grid-template-columns: 1fr; } }
.seg3-trend { margin-top: 30px; border-top: 1px solid var(--line); padding-top: 22px; }
.seg3-trend-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.seg3-trend-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; font-weight: 700; color: #334155; }
.seg3-trend-legend span { display: flex; align-items: center; gap: 7px; }
.seg3-trend-legend i { width: 16px; height: 3px; border-radius: 2px; }
.seg3-trend-svg { width: 100%; height: auto; display: block; }
.seg-trend-axis { font-size: 10px; fill: var(--muted); font-weight: 600; }
.seg3-trend-note { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.seg3-trend-note b { color: #17212b; }
.seg3-trend-block { margin-top: 20px; }
.seg3-trend-blockhead { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.seg3-trend-subtitle { font-size: 12.5px; font-weight: 800; color: #17212b; }
.seg3-trend-legend b { color: #17212b; font-weight: 800; }

/* ---- Segment Analysis 2 · signal views (after the full-history note) ---- */
.seg3-signals { margin-top: 26px; padding-top: 22px; border-top: 1px solid #e3e8ee; }
.seg3-signals-body { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; margin-top: 4px; }
.seg3-sig-card { min-width: 0; }
.seg3-sig-sub { margin: 0 0 12px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.seg3-sig-key { font-weight: 800; }
.seg3-sig-key.up { color: #1f7368; } /* accent text on white was 3.32:1 */
.seg3-sig-key.down { color: #5b6779; } /* was #8a97a6: 2.98:1 on white */
.seg3-sig-row { display: grid; grid-template-columns: 132px minmax(0, 1fr) 64px 40px; align-items: center; gap: 9px; margin-bottom: 7px; }
.seg3-sig-pair { display: flex; align-items: center; gap: 3px; }
.seg3-sig-pair.single { justify-content: flex-start; }
.seg3-sig-track { position: relative; background: #eef2f7; border-radius: 6px; height: 16px; }
.seg3-sig-fill { height: 100%; border-radius: 6px; min-width: 3px; }
.seg3-sig-fill.up { background: var(--engine-accent, #2a9d8f); }
.seg3-sig-fill.down { background: #b7c2d0; }
.seg3-sig-tick { position: absolute; top: -3px; bottom: -3px; width: 0; border-left: 2px dotted #44546a; opacity: .6; }
.seg3-sig-num { text-align: right; line-height: 1.1; }
.seg3-sig-num b { font-size: 12.5px; font-weight: 800; color: #17212b; }
.seg3-sig-num i { display: block; font-style: normal; font-size: 10px; color: var(--muted); }
.seg3-sig-n { text-align: right; font-size: 10.5px; color: var(--muted); }
.seg3-sig-foot { margin: 18px 0 0; font-size: 12.5px; color: #4a5662; line-height: 1.55; background: #f6f8fb; border: 1px solid #e3e8ee; border-radius: 8px; padding: 12px 14px; }
.seg3-sig-foot b { color: #17212b; }
@media (max-width: 760px) { .seg3-signals-body { grid-template-columns: 1fr; } }
.trajectory-support { margin-top: 28px; padding-top: 24px; border-top: 1px solid #e3e8ee; }
.trajectory-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 16px 0 22px; }
.trajectory-card { border: 1px solid #dbe3ec; border-radius: 8px; background: #f8fbfd; padding: 13px 14px; min-width: 0; }
.trajectory-card span { display: block; color: #66758a; font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.trajectory-card strong { display: block; color: #17212b; font-size: 24px; line-height: 1; margin-bottom: 6px; }
.trajectory-card i { display: block; color: #66758a; font-style: normal; font-size: 12px; line-height: 1.35; }
.trajectory-decision-grid { display: grid; grid-template-columns: minmax(420px, 1.1fr) minmax(360px, .9fr); gap: 18px; margin: 0 0 24px; }
.trajectory-decision-panel { border: 1px solid #dbe3ec; border-radius: 8px; background: #fff; padding: 16px; min-width: 0; }
.trajectory-mini-note { margin: -4px 0 14px; color: #5b6878; font-size: 12.5px; line-height: 1.5; }
.trajectory-score-row { display: grid; grid-template-columns: 58px minmax(160px, 1fr) 54px minmax(116px, .8fr); gap: 10px; align-items: center; margin-bottom: 8px; }
.trajectory-score-track, .trajectory-direction-track { height: 16px; border-radius: 6px; background: #eef2f7; overflow: hidden; }
.trajectory-score-fill { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--engine-accent, #2a9d8f), #2563eb); min-width: 3px; }
.trajectory-score-num { text-align: right; color: #17212b; font-size: 12px; font-weight: 850; }
.trajectory-action { color: #4a5662; font-size: 11.5px; font-weight: 750; }
.trajectory-direction-row { display: grid; grid-template-columns: 172px minmax(120px, 1fr) 54px; gap: 10px; align-items: center; margin-bottom: 10px; }
.trajectory-direction-row span { color: #334155; font-size: 12px; font-weight: 750; }
.trajectory-direction-track i { display: block; height: 100%; border-radius: 6px; min-width: 3px; }
.trajectory-direction-row b { text-align: right; color: #17212b; font-size: 12px; }
.trajectory-support-grid { grid-template-columns: minmax(360px, .92fr) minmax(520px, 1.25fr); }
.trajectory-follow-row { display: grid; grid-template-columns: 58px minmax(140px, 1fr) 70px minmax(140px, 1.1fr); gap: 10px; align-items: center; margin-bottom: 8px; }
.trajectory-fill { background: #2563eb; }
.trajectory-read { color: #4a5662; font-size: 11.5px; line-height: 1.25; }
.trajectory-table td span { color: #66758a; font-size: 10.5px; }
.trajectory-two-step { display: grid; grid-template-columns: minmax(380px, .9fr) minmax(360px, 1fr); gap: 24px; margin-top: 24px; align-items: start; }
.trajectory-verdict { border: 1px solid #cfe4df; border-radius: 8px; background: #f4fbf9; padding: 16px 18px; color: #314045; }
.trajectory-verdict strong { display: block; color: #0f766e; font-size: 15px; margin-bottom: 9px; text-transform: uppercase; letter-spacing: .04em; }
.trajectory-verdict p { margin: 0 0 10px; font-size: 13px; line-height: 1.55; }
.trajectory-verdict p:last-child { margin-bottom: 0; }
.s3-depth { margin-top: 30px; padding-top: 24px; border-top: 1px solid #dfe6ee; }
.s3-depth-verdict { border: 1px solid #b8d8d1; border-radius: 8px; background: linear-gradient(180deg, #f4fbf9, #ffffff); padding: 16px 18px; margin: 16px 0 20px; }
.s3-depth-verdict span { display: block; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; color: #0f766e; margin-bottom: 8px; }
.s3-depth-verdict h4 { margin: 0 0 8px; color: #17212b; font-size: 18px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.s3-depth-verdict p { margin: 0; color: #445466; font-size: 13px; line-height: 1.55; }
.s3-depth-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.s3-depth-card { border: 1px solid #dbe3ec; border-radius: 8px; background: #fff; padding: 16px; min-width: 0; }
.s3-depth-card.wide { grid-column: 1 / -1; }
.s3-depth-card h5 { margin: 0 0 7px; color: #17212b; font-size: 15px; line-height: 1.25; }
.s3-depth-card p { margin: 0 0 13px; color: #5b6878; font-size: 12.5px; line-height: 1.5; }
.s3-depth-bar-row { display: grid; grid-template-columns: 58px minmax(180px, 1fr) 62px minmax(170px, .9fr); gap: 10px; align-items: center; margin-bottom: 8px; }
.s3-depth-track, .s3-depth-minirow div, .s3-depth-drift-track, .s3-depth-score { height: 16px; border-radius: 6px; background: #eef2f7; overflow: hidden; }
.s3-depth-track i, .s3-depth-minirow i, .s3-depth-drift-track i, .s3-depth-score i { display: block; height: 100%; min-width: 3px; border-radius: 6px; background: var(--engine-accent, #2a9d8f); }
.s3-depth-bar-row b { color: #17212b; font-size: 12px; text-align: right; }
.s3-depth-bar-row span:last-child { color: #566473; font-size: 11.5px; line-height: 1.25; }
.s3-depth-minirow { display: grid; grid-template-columns: 172px minmax(110px, 1fr) 58px; align-items: center; gap: 10px; margin-bottom: 9px; }
@media (max-width: 720px) {
  /* Fixed 172+110+58px columns (plus gaps) don't fit a phone screen (audit
     2026-08-12, S3: Analysis' last 55px of overflow) -- scroll within its
     own box instead of the page, same fix as .streak-row above. */
  .s3-depth-minirow { overflow-x: auto; max-width: 100%; }
}
.s3-depth-minirow span { color: #334155; font-size: 12px; font-weight: 750; }
.s3-depth-minirow b { text-align: right; color: #17212b; font-size: 12px; }
.s3-depth-divider { height: 1px; background: #e3e8ee; margin: 13px 0; }
.s3-depth-pair { display: grid; gap: 7px; margin-bottom: 12px; }
.s3-depth-drift-row { display: grid; grid-template-columns: 58px minmax(120px, 1fr) 58px; gap: 10px; align-items: center; }
.s3-depth-drift-track i.pos { background: var(--engine-accent, #2a9d8f); }
.s3-depth-drift-track i.neg { background: #d1495b; }
.s3-depth-drift-row b { color: #17212b; font-size: 12px; text-align: right; }
.s3-depth-statline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.s3-depth-statline div { border: 1px solid #e0e7ef; border-radius: 8px; background: #f8fbfd; padding: 12px; }
.s3-depth-statline b { display: block; color: #17212b; font-size: 20px; line-height: 1; margin-bottom: 6px; }
.s3-depth-statline span { display: block; color: #66758a; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .035em; }
.s3-depth-table td:nth-child(3) { min-width: 120px; }
.s3-depth-table td:nth-child(3) b { display: block; margin-top: 3px; color: #17212b; font-size: 11px; }
@media (max-width: 980px) {
  .trajectory-card-grid, .trajectory-decision-grid, .trajectory-support-grid, .trajectory-two-step, .s3-depth-grid, .s3-depth-statline { grid-template-columns: 1fr; }
  .trajectory-follow-row { grid-template-columns: 58px minmax(120px, 1fr) 66px; }
  .trajectory-read { grid-column: 2 / -1; }
  .s3-depth-card.wide { grid-column: auto; }
  .s3-depth-bar-row { grid-template-columns: 58px minmax(120px, 1fr) 58px; }
  .s3-depth-bar-row span:last-child { grid-column: 2 / -1; }
}

.seg-center {
  min-height: 100%;
  min-height: 640px;
  position: relative;
  border-left: 1px solid #e6edf5;
  border-right: 1px solid #e6edf5;
  background: #f8fafc;
}
.seg-card-wrap {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.seg-card-wrap.major { top: 123px; }
.seg-card-wrap.minor { top: 383px; }
.seg-card-wrap:hover { z-index: 20; }
.seg-center-card {
  min-width: 82px;
  padding: 5px 10px;
  text-align: center;
  color: #ffffff;
  font-weight: 850;
  font-size: 16px;
  border-radius: 6px;
  border: 1px solid rgba(23, 33, 43, 0.22);
  box-shadow: 0 1px 3px rgba(23, 33, 43, 0.12);
  cursor: default;
  transition: filter .15s ease;
}
.seg-card-wrap:hover .seg-center-card { filter: brightness(1.06); }
.seg-center-card.major { background: var(--engine-accent, #2a9d8f); color: #ffffff; }
.seg-center-card.minor { background: #284460; }
.seg-center-note {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 232px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 14px 30px rgba(23, 33, 43, 0.18);
  padding: 12px 14px;
  z-index: 30;
  text-align: left;
}
.seg-card-wrap:hover .seg-center-note { display: block; }
.seg-center-note strong { display: block; font-size: 12.5px; color: #17212b; margin-bottom: 6px; }
.seg-center-note p { margin: 0; font-size: 12px; color: #475569; line-height: 1.5; font-weight: 400; }
.seg-info-button {
  position: absolute;
  left: calc(50% + 48px);
  z-index: 3;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid #17212b;
  border-radius: 50%;
  background: #ffffff;
  color: #17212b;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  cursor: pointer;
}
.seg-info-button:hover {
  background: #eef4fb;
}
.seg-info-button.major-info {
  top: 127px;
}
.seg-info-button.minor-info {
  top: 387px;
}
.segment-summary-note {
  position: absolute;
  left: 50%;
  top: 330px;
  transform: translateX(-50%);
  z-index: 5;
  width: 230px;
  padding: 14px 16px;
  border: 2px solid #17212b;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 12px 24px rgba(23, 33, 43, .16);
  color: #17212b;
  text-align: center;
}
.segment-summary-note[hidden] {
  display: none;
}
.segment-summary-note strong {
  display: block;
  font-size: 12px;
  margin-bottom: 6px;
}
.segment-summary-note p {
  margin: 5px 0;
  font-size: 11px;
  line-height: 1.35;
}
.segment-note-close {
  position: absolute;
  top: 6px;
  right: 12px;
  border: 0;
  background: transparent;
  color: #17212b;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
}

.excel-sheet-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  /* Contain the table's sticky z-indexes in their own layer so the dark header
     and row-number gutter slide BEHIND the sticky "Engine" title bar
     (z-index 20) instead of poking over it while page-scrolling. */
  position: relative;
  z-index: 0;
}

.excel-sheet-layout.with-reference-panel {
  grid-template-columns: minmax(0, 1fr) 190px;
}
.excel-sheet-shell {
  display: grid;
  grid-template-columns: 46px 1fr;
  grid-template-rows: 28px max-content;
  width: 100%;
  max-width: 100%;
  max-height: calc(100vh - 260px);
  min-height: 430px;
  overflow: auto;
  /* Always-visible thin scrollbars so the wide grid's off-screen right columns
     (e.g. Reorganised Segment) are reachable by mouse users too — macOS/Chrome
     otherwise auto-hides the overlay scrollbar. */
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 #e9eef5;
  border: 1px solid #b8c2ce;
  background: white;
  border-radius: 6px;
  justify-self: stretch;
}
/* Engine one-screen fit (Mega Millions, owner report 1 Aug 2026). The default
   shell template sizes its grid track at max-content, which hands a
   compressible grid unlimited width — so its fr columns never compress and the
   sheet scrolls. This mode constrains the track to the shell, letting the
   engine's minmax(60%, fr) columns shrink-to-fit: the whole grid, Reorganised
   Segments included, on one screen with no sideways scroll on any laptop.
   Emitted only by an engine that also emits the matching column template;
   inert for every other product and tab. */
.excel-sheet-shell.engine-fit {
  grid-template-columns: 46px minmax(0, 1fr);
  width: 100%;
  justify-self: stretch;
}
.excel-sheet-shell::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
.excel-sheet-shell::-webkit-scrollbar-track {
  background: #e9eef5;
}
.excel-sheet-shell::-webkit-scrollbar-thumb {
  background: #94a3b8;
  border-radius: 6px;
}
.excel-sheet-shell::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}
.excel-reference-panel {
  position: sticky;
  top: 76px;
  z-index: 8;
  background: white;
  border: 1px solid #b8c2ce;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: -2px 0 0 rgba(23, 33, 43, .08);
}
.reference-col-headers {
  display: grid;
  grid-template-columns: 112px 78px;
}
.reference-col-headers div {
  height: 28px;
  display: grid;
  place-items: center;
  background: #e9eef3;
  color: #3f4d5f;
  font-size: 12px;
  font-weight: 700;
  border-right: 1px solid #c8d1dc;
  border-bottom: 1px solid #c8d1dc;
}
.reference-grid {
  display: grid;
  grid-template-columns: 112px 78px;
  grid-auto-rows: 30px;
}
.reference-grid .excel-cell {
  width: auto;
}
.excel-corner {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 40;
  background: #e9eef3;
  border-right: 1px solid #c8d1dc;
  border-bottom: 1px solid #c8d1dc;
}
.excel-col-headers {
  position: sticky;
  top: 0;
  z-index: 10;
  grid-column: 2;
  grid-row: 1;
  display: grid;
}
.excel-col-headers div,
.sticky-col-headers div {
  height: 28px;
  display: grid;
  place-items: center;
  background: #e9eef3;
  color: #3f4d5f;
  font-size: 12px;
  font-weight: 700;
  border-right: 1px solid #c8d1dc;
  border-bottom: 1px solid #c8d1dc;
}
.excel-col-headers div.sticky-helper-col,
.sticky-col-headers div.sticky-helper-col {
  position: sticky;
  z-index: 12;
}
.excel-col-headers div.separator-col,
.sticky-col-headers div.separator-col {
  background: white;
  color: transparent;
  border-right: 0;
  border-bottom: 0;
}
.excel-col-headers div.after-separator-col,
.sticky-col-headers div.after-separator-col {
  border-left: 1px solid #c8d1dc;
}
.sticky-col-headers {
  position: sticky;
  top: 0;
  z-index: 20;
  grid-column: 2;
  grid-row: 1;
  display: grid;
  pointer-events: none;
}
.frozen-col-headers {
  position: sticky;
  top: 0;
  left: 46px;
  z-index: 30;
  grid-column: 2;
  grid-row: 1;
  display: grid;
  pointer-events: none;
}
.frozen-col-headers div {
  height: 28px;
  display: grid;
  place-items: center;
  background: #e9eef3;
  color: #3f4d5f;
  font-size: 12px;
  font-weight: 700;
  border-right: 1px solid #c8d1dc;
  border-bottom: 1px solid #c8d1dc;
}
.excel-body {
  display: contents;
}
.excel-row-headers {
  position: sticky;
  left: 0;
  z-index: 16;
  grid-column: 1;
  grid-row: 2;
}
.excel-row-headers div {
  height: 30px;
  display: grid;
  place-items: center;
  background: #e9eef3;
  color: #3f4d5f;
  font-size: 12px;
  font-weight: 700;
  border-right: 1px solid #c8d1dc;
  border-bottom: 1px solid #d8dee7;
}
.excel-grid {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-auto-rows: 30px;
  align-items: stretch;
  position: relative;
}
.segment-analysis-one-shell .excel-grid {
  grid-auto-rows: 26px;
}
.segment-analysis-one-shell .excel-row-headers div {
  height: 26px;
}
.segment-analysis-one-shell .excel-cell {
  padding: 3px 6px;
  font-size: 11px;
}
.excel-cell {
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 4px 7px;
  border-right: 1px solid #d8dee7;
  border-bottom: 1px solid #d8dee7;
  color: #17212b;
  background: white;
  font-size: 12px;
  line-height: 1.2;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.excel-cell.sticky-helper-col {
  position: sticky;
  z-index: 9;
}
/* Engine header row: wrap long column labels onto two lines (centered) instead
   of clipping them with an ellipsis, so headers like "Combined-in-Order" and
   "Reorganised Segments" are always fully readable. */
.excel-cell.engine-header-cell {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.1;
  text-align: center;
  justify-content: center;
  word-break: normal;
  /* `overflow-wrap: anywhere` (was here) broke SINGLE words mid-character when
     the column was narrower than the word: the two-special-ball products render
     a 46px ball column, so EuroMillions' "Stars" split as "Star"/"s" and spilled
     out of the fixed 30px header row (EM-P2-1) — Eurojackpot's "Euros" carried
     the same latent break. `normal` still wraps MULTI-word labels at their space
     or hyphen, which is all the rule was ever for ("Reorganised Segments",
     "Combined-in-Order"); an unbreakable single word now simply overflows its
     cell horizontally, which is safe because this rule already sets
     `overflow: visible` and the neighbouring header cells share the same dark
     fill. Do NOT restore `anywhere`. */
  overflow-wrap: normal;
}
.excel-cell.sticky-helper-col.sticky-sheet-header {
  z-index: 14;
}
.excel-cell.sticky-reference-cell {
  position: sticky;
  z-index: 5;
  box-shadow: 0 1px 0 #b8c2ce;
}
.excel-cell.no-inner-border {
  border-right-color: #1D2330;
  border-left-color: #1D2330;
}
.excel-cell.no-border {
  border-right-color: transparent;
  border-bottom-color: transparent;
}
.group-analysis-shell .excel-col-headers div,
.group-analysis-shell .sticky-col-headers div,
.group-analysis-shell .frozen-col-headers div,
.group-analysis-shell .excel-row-headers div,
.group-analysis-shell .excel-corner {
  border-right-color: transparent;
  border-bottom-color: transparent;
}
.excel-cell.no-grid,
.excel-cell.separator-col {
  background: white !important;
  color: transparent !important;
  border-right: 0;
  border-bottom: 0;
  box-shadow: none;
}
.excel-cell.after-separator-col {
  border-left: 1px solid #d8dee7;
}

/* Engine — borderless (no grid lines) */
.source-data-sheet .excel-cell { border-color: transparent !important; }
.source-data-sheet .excel-cell.after-separator-col { border-left-color: transparent !important; }
.source-data-sheet .excel-cell.sticky-reference-cell { box-shadow: none !important; }
.source-data-sheet .excel-row-headers div { border-color: transparent !important; }
.source-data-sheet .excel-corner { border-color: transparent !important; }
/* Engine sheet (Mass Cash only, owner Checkpoint-3 request): fill the panel width
   so the grid's right edge lines up with the metric cards and the right margin
   matches the left — overrides the default hug-left. Scoped to the Mass Cash
   dashboard body class so NO other product's Engine sheet changes; the JS pairs
   this with a minmax(px,fr) colTemplate (IS_MASSCASH_PRODUCT). A grid wider than
   the panel still overflows the 1fr and scrolls via the shell's overflow:auto. */
.masscash-dashboard-page .source-data-sheet,
.texas-cash-five-dashboard-page .source-data-sheet,
.texas-two-step-dashboard-page .source-data-sheet {
  grid-template-columns: 46px minmax(0, 1fr);
  justify-self: stretch;
  width: 100%;
}

/* Engine — professional polish */
.source-data-sheet .pb-circle { position: relative; z-index: 6; width: 24px; height: 24px; flex: 0 0 auto; box-sizing: border-box; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--special-ball-bg, #00B0F0); color: #fff; font-size: 10.5px; font-weight: 800; line-height: 1; }
/* These circles open the source-data popup, so they are tap targets and WCAG
   2.5.8 (AA) applies: 24x24 is the minimum. They were 22x22, and Powerball
   Australia's landing view alone showed 1,262 of them. (31 Jul 2026) */
.source-data-sheet .pb-circle,
.source-data-sheet .num-repeat-ring { cursor: pointer; }
.source-data-sheet .pb-circle:hover,
.source-data-sheet .num-repeat-ring:hover { filter: brightness(0.95); }
/* FIX (audit-visual, 5 Aug 2026 — defect 3, discovered while wiring these
   circles' role="button" tabindex="0"): now that they are real Tab stops
   (they carry data-circle-kind and open the same source-circle-modal popup
   the audit's close button fix targets), they need their own visible focus
   indicator for the same WCAG 2.4.7 reason — a circle a keyboard user just
   tabbed onto with no visual change is indistinguishable from one that
   isn't focused at all. Shared because the class is shared (pba-all.js and
   the other split-engine forks all render pb-circle/num-repeat-ring). */
.source-data-sheet .pb-circle:focus-visible,
.source-data-sheet .num-repeat-ring:focus-visible { outline: 2.5px solid #2563eb; outline-offset: 2px; }
.source-data-sheet .excel-cell:has(.pb-circle) { padding-left: 0; padding-right: 0; overflow: visible; }
/* The ring background MUST stay transparent so the faint relationship lines
   (drawn in an SVG above the frozen number cells) read cleanly between circles. */
.source-data-sheet .num-repeat-ring { width: 24px; height: 24px; flex: 0 0 auto; box-sizing: border-box; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid rgba(23,33,43,0.55); background: transparent; font-size: 10.5px; font-weight: 700; line-height: 1; }
.source-data-sheet .num-repeat-ring.num-repeat-blue { border-color: #2563eb; }
.source-data-sheet .num-repeat-ring.num-repeat-green { border-color: #16a34a; }
.source-data-sheet .num-repeat-ring.num-repeat-red { border-color: #dc2626; }
.source-data-sheet .excel-cell:has(.num-repeat-ring) { padding-left: 0; padding-right: 0; overflow: visible; }
/* Powerball-match number that is also part of a run: filled pb circle PLUS a tier
   outline ring (box-shadow follows the circle's border-radius). */
.source-data-sheet .pb-circle.pb-ring { box-shadow: 0 0 0 1.5px rgba(23,33,43,0.7); }
.source-data-sheet .pb-circle.pb-ring.num-repeat-blue { box-shadow: 0 0 0 1.5px #2563eb; }
.source-data-sheet .pb-circle.pb-ring.num-repeat-green { box-shadow: 0 0 0 1.5px #16a34a; }
.source-data-sheet .pb-circle.pb-ring.num-repeat-red { box-shadow: 0 0 0 1.5px #dc2626; }
/* Default mode: relationship circles vanish and their numbers are NOT bold (the
   Powerball-match filled circle stays as the only highlight). */
.source-data-sheet.circles-hidden .num-repeat-ring { border-color: transparent !important; background: transparent !important; font-weight: 400; }
.source-data-sheet.circles-hidden .pb-circle.pb-ring { box-shadow: none; }
.source-data-sheet.circles-hidden .num-repeat-ring,
.source-data-sheet.circles-hidden .pb-circle.pb-ring { pointer-events: none; }
.source-data-sheet.circles-hidden .pb-match,
.source-data-sheet.circles-hidden .pb-match .pb-circle.pb-ring,
.source-data-sheet.circles-hidden .pb-match .num-repeat-ring { pointer-events: auto; }
/* Quick-nav buttons (SD/S/V/N/P/L-Tabs + Taskpad), centred in the header.
   When NOT selected they match the "Circles" button: white fill, light-grey
   border, dark bold text. flex:1 keeps them centred between the heading group
   and the right-hand Taskpad button. */
/* Header = three balanced columns: title | quick-nav | Taskpad. The side
   columns share leftover space equally (flex: 1 1 0), so the quick-nav letters
   sit in the SAME spot on every tab — before this, the quick-nav centred in
   whatever space the variable-width title left over, so the letter buttons
   jumped left/right on every tab click. */
.worksheet-quicknav { display: flex; gap: 6px; justify-content: center; flex: 0 1 auto; min-width: 0; }
/* PHONE WIDTHS: the quicknav's ~670px of buttons have no scroller of their own,
   so below ~700px they overflowed the BODY and the whole page panned sideways
   (150px of horizontal scroll at 375px, measured live, 30 Jul 2026 — every
   product, since all 22 share this shell). The strip now scrolls within itself.
   flex-start, not center: a centered flex container that overflows clips its
   LEFT items beyond reach — scrollLeft cannot go negative. 860px matches the
   codebase's existing mobile breakpoint; desktop is untouched. */
@media (max-width: 860px) {
  .worksheet-quicknav {
    /* max-width is the load-bearing line: without it the flex item keeps its
       ~670px content width regardless of flex-shrink, and overflow-x has
       nothing to do (measured: overflow-x alone left the 150px page pan
       untouched; with max-width it is 0 and the strip scrolls internally). */
    max-width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
}
.worksheet-right-group { display: flex; flex: 1 1 0; min-width: 0; justify-content: flex-end; }
.worksheet-tab.quicknav-tab { background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 8px 13px; font-weight: 800; }
/* No hover highlight — only the SELECTED (active) group button is highlighted
   (green border + green text), exactly as before. */
.worksheet-tab.quicknav-tab.active { background: #fff; color: var(--accent); border-color: var(--accent); }
/* Pro-styled quick-nav button (e.g. Conclusion): restore the gold gradient
   the plain .quicknav-tab background would otherwise flatten. */
.worksheet-tab.quicknav-tab.master-tab-compact,
.worksheet-tab.quicknav-tab.master-tab-compact.active {
  border: 1.5px solid #a81d1d;
  border-radius: 8px;
  background: #fff;
  padding: 6px 15px;
}
/* Every Pro quicknav pill looks the SAME (owner uniformity rule, 26 Jul 2026).
   The Pro signal is the red outline + the small red "Pro" sub-label; the MAIN
   word is ordinary ink, exactly like Circles and Taskpad. This rule used to
   paint the main word red because it was written for the Conclusion alone —
   then Learn took the Conclusion's slot, inherited the class, and shipped as
   the one red word in a row of dark ones. Do NOT special-case a single pill
   here again; if a new Pro pill is added it must inherit this untouched. */
.worksheet-tab.quicknav-tab.master-tab-compact:not(.taskpad-pro-btn) .master-tab-main,
.worksheet-tab.quicknav-tab.master-tab-compact:not(.taskpad-pro-btn).active .master-tab-main {
  color: var(--ink);
  font-weight: 850;
}
.worksheet-tab.quicknav-tab.taskpad-pro-tab {
  position: relative;
  width: 74px;
  min-height: 44px;
  padding: 5px 7px 4px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  overflow: hidden;
  border: 1.5px solid #a81d1d;
  background: #fff;
}
/* Taskpad is a Pro feature: it reuses the aligned master-tab-compact layout
   (so it lines up with the Conclusion button) but wears the blue metallic
   treatment instead of gold. */
.worksheet-tab.quicknav-tab.master-tab-compact.taskpad-pro-btn {
  background: #fff;
}
.worksheet-tab.quicknav-tab.taskpad-pro-btn .master-tab-main,
.worksheet-tab.quicknav-tab.taskpad-pro-btn.active .master-tab-main { color: #17212b; }
.worksheet-tab.quicknav-tab.taskpad-pro-btn .master-tab-label,
.worksheet-tab.quicknav-tab.taskpad-pro-btn.active .master-tab-label { color: #9b1b1b; }
.worksheet-tab.quicknav-tab.taskpad-pro-tab::after { content: none; }
.worksheet-header .taskpad-pro-main {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 100%;
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.05;
  text-transform: none;
  white-space: nowrap;
}
.worksheet-header .taskpad-pro-label {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 100%;
  color: #9b1b1b;
  /* was 7.5px — unreadable on a phone; 10px is the floor this audit holds to
     for any text a customer is meant to read (31 Jul 2026) */
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: none;
  white-space: nowrap;
}
.worksheet-tab.quicknav-tab.taskpad-pro-tab.active {
  border-color: transparent;
}
.worksheet-tab.quicknav-tab.taskpad-pro-tab.active .taskpad-pro-main,
.worksheet-tab.quicknav-tab.taskpad-pro-tab.active .taskpad-pro-label {
  color: #9b1b1b;
}
/* Taskpad board — a plain writing surface (Arial 12pt, 1.15 line spacing). */
/* Taskpad board — dark "blackboard" theme (charcoal background, white text, Inter
   font by default), matching the site's dark pages. */
.notes-board-wrap { border: 1px solid #3a3a3a; border-radius: 6px; background: #262626; overflow: hidden; }
/* Multi-document Taskpad: left sidebar (doc list, search, storage) + main editor. */
.notes-app { display: flex; border: 1px solid #3a3a3a; border-radius: 6px; background: #262626; overflow: hidden; min-height: calc(100vh - 300px); }
.notes-sidebar { flex: 0 0 232px; width: 232px; background: #1f1f1f; border-right: 1px solid #3a3a3a; display: flex; flex-direction: column; }
.notes-side-head { display: flex; gap: 6px; padding: 8px; border-bottom: 1px solid #3a3a3a; flex-wrap: wrap; }
.notes-search { flex: 1 1 auto; min-width: 0; height: 30px; border: 1px solid #4a4a4a; background: #2a2a2a; color: #f3f4f6; border-radius: 6px; padding: 0 9px; font-size: 12px; }
.notes-new-btn { flex: 0 0 auto; height: 30px; border: 1px solid #4a4a4a; background: #0d6aa0; color: #fff; border-radius: 6px; padding: 0 9px; cursor: pointer; font-size: 12px; font-weight: 800; }
.notes-folder-new-btn { background: #116fb8; }
.notes-new-btn:hover { background: #0b5c8c; }
.notes-doc-list { flex: 1 1 auto; overflow: auto; padding: 6px; }
.notes-doc { display: flex; align-items: center; gap: 4px; padding: 7px 8px; border-radius: 6px; cursor: pointer; color: #d4d6d9; }
.notes-doc.child { margin-left: 18px; padding-left: 7px; }
.notes-doc:hover { background: #2c2c2c; }
.notes-doc.active { background: #0d6aa0; color: #fff; }
.notes-doc-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.notes-doc-rename, .notes-doc-del, .notes-doc-move, .notes-folder-rename, .notes-folder-del { flex: 0 0 auto; width: 22px; height: 22px; border: none; background: transparent; color: inherit; opacity: .5; cursor: pointer; border-radius: 4px; font-size: 13px; line-height: 1; padding: 0; }
.notes-doc-del { font-size: 17px; }
.notes-folder-del { font-size: 17px; }
.notes-doc-rename:hover, .notes-doc-del:hover, .notes-doc-move:hover, .notes-folder-rename:hover, .notes-folder-del:hover { opacity: 1; background: rgba(255,255,255,.16); }
.notes-doc-empty { color: #8a8f95; font-size: 12px; padding: 12px 8px; text-align: center; }
.notes-folder { display: flex; align-items: center; gap: 6px; margin: 5px 0 2px; padding: 7px 8px; border-radius: 6px; color: #dbeafe; cursor: pointer; }
.notes-folder:hover, .notes-folder.active { background: #27384d; }
.notes-folder-icon { position: relative; flex: 0 0 20px; width: 20px; height: 14px; margin-top: 2px; border-radius: 3px; background: linear-gradient(180deg, #4bb3ff, #0a6fc2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.notes-folder-icon::before { content: ''; position: absolute; left: 2px; top: -4px; width: 9px; height: 5px; border-radius: 3px 3px 0 0; background: #6fc5ff; }
.notes-folder-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 800; }
.notes-folder-docs { margin-bottom: 5px; }
.notes-folder-empty { margin: 1px 0 4px 28px; color: #737b85; font-size: 11px; }
.notes-loose-title { margin: 10px 8px 4px; color: #8a8f95; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.notes-storage { padding: 8px 10px; border-top: 1px solid #3a3a3a; font-size: 11px; color: #9aa0a6; }
.notes-storage-bar { height: 6px; background: #333; border-radius: 4px; overflow: hidden; margin-bottom: 4px; }
.notes-storage-bar i { display: block; height: 100%; width: 0; background: var(--engine-accent, #2a9d8f); transition: width .2s; }
.notes-storage-bar i.full { background: #c0392b; }
.notes-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.notes-app .notes-board { flex: 1 1 auto; min-height: 240px; }
.notes-sep { display: inline-block; width: 1px; height: 18px; background: #4a4a4a; margin: 0 2px; }
.notes-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.notes-modal { background: #fff; color: #17212b; border-radius: 10px; padding: 22px 24px; max-width: 360px; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.notes-modal h4 { margin: 0 0 8px; font-size: 17px; }
.notes-modal p { margin: 0 0 16px; color: #475569; font-size: 14px; line-height: 1.45; }
.source-circle-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 1020; }
.source-circle-modal { position: relative; background: #fff; color: #17212b; border-radius: 10px; padding: 22px 24px 20px; max-width: 460px; width: min(92vw, 460px); box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.source-circle-modal h4 { margin: 0 0 10px; padding-right: 38px; font-size: 17px; }
.source-circle-modal p { margin: 0 0 12px; color: #475569; font-size: 14px; line-height: 1.5; }
.source-circle-modal p:last-child { margin-bottom: 0; }
.source-circle-modal-close { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border: 0; border-radius: 999px; background: #eef2f7; color: #17212b; font-size: 20px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.source-circle-modal-close:hover { background: #dfe6ef; }
/* FIX (audit-visual, 5 Aug 2026): the dialog now moves focus onto this
   button on open (see dailygrand-circle-popup.js and its sibling copies in
   the other split-engine forks) but it had no visible focus indicator —
   keyboard users opening the popup via Enter/Space had no on-screen sign
   focus had moved. Shared because this component is shared. */
.source-circle-modal-close:focus-visible { outline: 2.5px solid #2563eb; outline-offset: 2px; }
.notes-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(10px); background: #17212b; color: #fff; padding: 11px 18px; border-radius: 8px; font-size: 13px; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.25); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 1100; max-width: 90vw; text-align: center; }
.notes-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.notes-toolbar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid #3a3a3a; background: #2f2f2f; flex-wrap: wrap; }
.notes-toolbar button, .notes-toolbar select { height: 30px; min-width: 30px; border: 1px solid #4a4a4a; background: #3a3a3a; border-radius: 6px; padding: 0 9px; cursor: pointer; font-size: 13px; color: #f3f4f6; }
.notes-toolbar button:hover, .notes-toolbar select:hover { background: #474747; }
.notes-color { display: inline-flex; align-items: center; gap: 5px; height: 30px; border: 1px solid #4a4a4a; border-radius: 6px; padding: 0 8px; cursor: pointer; background: #3a3a3a; color: #f3f4f6; }
.notes-color input { width: 22px; height: 20px; border: none; background: none; padding: 0; cursor: pointer; }
.notes-status { margin-left: auto; font-size: 12px; color: #9aa0a6; }
.notes-status.err { color: #f3a8a8; }
.notes-board { min-height: calc(100vh - 340px); padding: 16px 18px; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 12pt; line-height: 1.15; color: #ffffff; background: #262626; outline: none; overflow: auto; }
.notes-board:empty::before { content: 'Jot down your findings before placing bets, or plan future bets…'; color: #8a8f95; }
.notes-board ul, .notes-board ol { margin: 8px 0 8px 26px; padding-left: 20px; }
.notes-board li { margin: 4px 0; padding-left: 3px; }
/* Pasted images keep their ORIGINAL size (never shrunk or enlarged); the board
   scrolls if an image is wider than the area. Still click-to-select for delete. */
.notes-board img { max-width: none; height: auto; cursor: pointer; border-radius: 3px; }
/* When an image is click-selected, the browser draws its selection highlight;
   add a clear ring too so it's obviously selected and ready to delete. */
.notes-board img::selection { background: rgba(37,99,235,0.25); }
.notes-board ::selection { background: rgba(37,99,235,0.25); }
/* Circles toggle button states */
.worksheet-title-group { display: flex; align-items: center; gap: 12px; flex: 1 1 0; min-width: 0; }
.circles-toggle-btn {
  position: relative;
  width: 74px;
  min-height: 44px;
  padding: 5px 7px 4px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  overflow: hidden;
  border: 1.5px solid #a81d1d;
  background: #fff;
}
.circles-toggle-btn::after { content: none; }
.worksheet-header .circles-toggle-main {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 100%;
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.05;
  text-transform: none;
  white-space: nowrap;
}
.worksheet-header .circles-toggle-pro {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 100%;
  color: #9b1b1b;
  /* was 7.5px — unreadable on a phone; 10px is the floor this audit holds to
     for any text a customer is meant to read (31 Jul 2026) */
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: none;
  white-space: nowrap;
}
/* The engaged states used to set `border-color: transparent`, so pressing
   Circles made the button's own outline vanish and left the label floating on
   the card — it read as the button disappearing rather than switching on.
   Keep the outline in every state; a tinted fill is what marks "engaged", and
   C-Lines deepens it so the three states stay tellable apart. */
.circles-toggle-btn.circles-on,
.circles-toggle-btn.circles-clines { color: #9b1b1b; }
.circles-toggle-btn.circles-on { background: #fdecec; }
.circles-toggle-btn.circles-clines { background: #f8d9d9; }
.circles-toggle-btn.circles-on .circles-toggle-main,
.circles-toggle-btn.circles-clines .circles-toggle-main { color: #9b1b1b; }
/* The stacked count/percentage in an Engine cell inherited 8.5px and printed
   its percentage at 8px — 202 of them on one phone-sized view, and unreadable.
   10px is the floor the mobile probe holds every product to. (31 Jul 2026) */
.source-data-sheet .cell-stack { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; font-size: 10px; }
.source-data-sheet .cell-stack b { font-size: 11px; font-weight: 700; }
.source-data-sheet .cell-stack i { font-size: 10px; font-style: normal; opacity: 0.72; margin-top: 1px; }

/* ---- the 10px floor for analysis-table sub-text --------------------------
   ⛔ A RELATIVE FONT-SIZE INHERITS A SHRINKING BASE. `<small>` has no author
   size, so it takes the UA's 0.8333x of whatever it lands in. At 1400px the
   table cell is 13px and the small is 10.83px — fine. At 390px the cell drops
   to 11px and the same unstyled markup computes 9.17px. MEASURED: 58 nodes at
   390px, zero at 1400px — R1-1 x37, DoD 3 x6, Grand: AL x4, DoD 1 x4,
   DoD 4 x4, R: Verdict x3, all of them counts and deltas like "(158 draws)",
   "+2.29", "(62.0%)". None is a click target; the 8px clickable labels were
   fixed in an earlier round.
   An absolute 10px is deliberate rather than another em: an em floor is the
   same bug one level up, and it comes back the next time a cell shrinks.
   Guarded by scripts/probe_dailygrand_colour_contrast.mjs (R3), which walks
   both widths. */
.na-depth-table small,
.na-depth-table td small,
.na-depth-section table small,
.dg-analysis-tab table small { font-size: 10px; }
.source-data-sheet .excel-cell:has(.cell-stack) { padding-left: 3px; padding-right: 3px; }
/* ---- the 2-draw repeat-streak ring (owner rule #32a) ----------------------
   ⛔ MEASURED AGAINST THE CELL IT SITS ON, NOT AGAINST THE SHEET. The pill sits
   inside the Combined-in-Order cell, whose fill is one of the seven
   PATTERN_HUES (dailygrand_engine_grid.py:109) — so the ring's neighbour is a
   pale tint, never the white sheet, and #F0B98A / #A9D18E are dark enough to
   swallow a mid-tone ring. WCAG 1.4.11 wants 3:1 for a UI component that
   carries meaning, and this one carries the streak length.

   Worst-of-seven fills, before -> after (each hue held EXACTLY; only lightness
   moved, and by the minimum that clears the floor):
     base   rgba(23,33,43,.55)  3.14:1  UNCHANGED — it already clears
     big    #2563eb -> #1555e2  2.96:1 -> 3.50:1   hue 221.2deg held
     green  #16a34a -> #0f7133  1.89:1 -> 3.50:1   hue 142.1deg held
     red    #dc2626 -> #bf1f1f  2.76:1 -> 3.50:1   hue 0deg held
   The green tier was the worst thing on this sheet in either theme: 1.89:1 on
   #F0B98A is a ring you cannot see. Guarded by
   scripts/probe_dailygrand_colour_contrast.mjs (R1), which measures every pill
   against its own fill in both themes and fails on a zero-pill walk. */
.source-data-sheet .repeat-pill { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; box-sizing: border-box; min-width: 56px; height: 21px; padding: 0 12px; border: 1px solid rgba(23,33,43,0.55); border-radius: 999px; }
.source-data-sheet .repeat-pill.repeat-pill-big { border-color: #1555e2; }
.source-data-sheet .repeat-pill.repeat-pill-green { border-color: #0f7133; }
.source-data-sheet .repeat-pill.repeat-pill-red { border-color: #bf1f1f; }
.source-data-sheet .excel-cell:has(.repeat-pill) { overflow: visible; }
/* #5b6779 not the old #8a97a8: on this #f4f6f9 fill the old grey measured
   2.74:1 against WCAG AA's 4.5:1 — the single largest contrast fault on the
   platform, 913 cells on the Mega Millions Engine alone. 5.3:1 now. */
.source-data-sheet .excel-row-headers div { background: #f4f6f9; color: #5b6779; font-weight: 600; }
.source-data-sheet .excel-column-header { color: #5b6779; font-weight: 600; }
.source-data-sheet .excel-corner { background: #f4f6f9; }
.source-data-sheet .excel-cell { color: #2b3a4a; }

/* Engine: NO A-T column letters at all — just a clean 8px grey strip above
   the frozen black title row (no letters, no gridlines). */
.source-data-sheet { background: #e9eef3; grid-template-rows: 8px max-content; }
.source-data-sheet .excel-col-headers { display: none; }
.source-data-sheet .excel-corner { display: none; }
/* box-shadow paints an opaque 8px grey bar directly above each frozen header cell,
   so rows scrolling under the strip never peek through — strip stays clean grey. */
.source-data-sheet .excel-cell.sticky-sheet-header { top: 8px; z-index: 22; box-shadow: 0 -8px 0 0 #e9eef3; }
.source-data-sheet .excel-cell.sticky-helper-col.sticky-sheet-header { z-index: 30; }
.source-data-sheet .excel-row-headers div:first-child { position: sticky; top: 8px; z-index: 20; box-shadow: 0 -8px 0 0 #e9eef3; }
/* Reverse-order arrow button at the table's top-left (same dark rounded look as
   the catalogue scroll-up button). Rotates to point down when reversed. */
.source-order-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; flex: 0 0 auto;
  border: 1px solid var(--ink); border-radius: 7px;
  background: var(--ink); color: #fff; cursor: pointer;
}
.source-order-toggle:hover { opacity: 0.88; }
.source-order-toggle svg { transition: transform 0.15s ease; }
.source-order-toggle.reversed svg { transform: rotate(180deg); }

.excel-cell.sticky-sheet-header {
  position: sticky;
  top: 28px;
  z-index: 7;
}
.excel-cell.allow-overflow {
  overflow: visible;
  text-overflow: clip;
  justify-content: center;
  z-index: 30;
}
.excel-cell.allow-overflow.sticky-sheet-header {
  z-index: 35;
}
.excel-cell.header-label-cell {
  z-index: 50;
  color: #FFFFFF;
  font-weight: 700;
}

.group-analysis-view {
  display: grid;
  gap: 24px;
  max-width: 100%;
  overflow-x: auto;
  padding: 2px 0 12px;
}
.group-analysis-row {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 26px;
  align-items: start;
}
.group-analysis-row.two-blocks {
  grid-template-columns: repeat(2, max-content);
}
.group-block {
  display: grid;
  gap: 6px;
}
.group-title {
  color: #17212b;
  font-size: 15px;
  font-weight: 750;
  text-align: center;
}
.group-matrix {
  display: grid;
  grid-template-columns: 28px repeat(8, 56px);
  grid-auto-rows: 24px;
  align-items: stretch;
}
.group-header,
.group-row-label,
.group-cell,
.group-total-label {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  font-size: 10px;
  line-height: 1;
}
.group-header {
  color: #3f4d5f;
  font-weight: 650;
  white-space: nowrap;
}
.group-row-label {
  color: #17212b;
  font-weight: 500;
}
.group-cell {
  color: #0F2417;
  font-weight: 400;
}
.group-total-cell {
  margin-top: 3px;
  font-weight: 650;
  color: #17212b;
  background: transparent;
}
.group-header.active-after {
  outline: 2px solid #0f766e;
  outline-offset: -2px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .72);
}
.group-header.active-after {
  background: #E8F5EE;
  color: #0f5132;
}

.balls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ball {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  background: #e8eef4;
  color: var(--ink);
}
.ball.power { background: var(--accent-2); color: white; }

.bars { display: grid; gap: 10px; }
.bar-row { display: grid; grid-template-columns: 92px 1fr 56px; gap: 10px; align-items: center; font-size: 13px; }
.bar-track { background: #e8eef4; height: 12px; border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--accent-3); border-radius: 999px; }

table { width: 100%; border-collapse: collapse; background: white; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: middle; }
th { background: #edf3f7; color: #314151; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
tr:last-child td { border-bottom: 0; }
.status { display: inline-flex; align-items: center; padding: 5px 8px; border-radius: 999px; background: #eef6f4; color: var(--accent); font-weight: 750; font-size: 12px; }
.status.future { background: #fff2e7; color: var(--accent-2); }

.product-card h4, .panel h4 { margin: 0 0 8px; font-size: 18px; }
.product-card p, .panel p { color: var(--muted); margin: 0; line-height: 1.45; }
.account-hub-grid .product-card { display: flex; flex-direction: column; min-width: 0; }
.account-hub-grid .product-card-soon { opacity: 1; }
.account-hub-grid .product-card > .actions:last-child { margin-top: auto; }
.account-hub-title { align-items: center; }
.account-hub-title > .primary-action { flex: 0 0 auto; }
.account-hub-grid .primary-action, .account-hub-title > .primary-action { background: #434b52; border-color: #434b52; }
.account-basic-note { margin: 12px 0 18px !important; }
.account-hub-grid .status + .account-product-row { margin-top: 12px; }
.account-product-row { display: grid; gap: 5px; margin: 0 0 14px; }
.account-product-row strong { font-size: 16px; }
.account-product-row small { color: var(--muted); }
.account-product-row .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.module-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.module { background: var(--soft); border: 1px solid var(--line); padding: 7px 9px; border-radius: 8px; font-size: 13px; font-weight: 650; }
.search-row { margin: 18px 0 12px; }
.search-row input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  font: inherit;
}

canvas { width: 100%; height: 260px; background: #fbfcfd; border: 1px solid var(--line); border-radius: 8px; }

@media (max-width: 860px) {
  .app-header { display: flex; align-items: flex-start; flex-direction: column; }
  .tabs { justify-content: flex-start; }
  .hero { grid-template-columns: 1fr; padding: 22px; }
  .hero h2 { font-size: 32px; }
  .grid.cols-5, .grid.cols-4, .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr; }
  .country-grid, .catalogue-layout { grid-template-columns: 1fr; }
  .workbook-topbar, .worksheet-header { flex-direction: column; align-items: stretch; }
  /* Stacked header: the Taskpad wrapper keeps its button full-width, as before. */
  .worksheet-right-group > .taskpad-pro-btn { flex: 1 1 auto; }
  .latest-mini { justify-content: flex-start; }
}

/* Legal / business content pages */
.content-page { max-width: 820px; line-height: 1.7; color: var(--ink); }
/* Uniform, professional type scale: one size for the page title, one for every
   section heading, one for every sub-heading, and even paragraph rhythm. */
.content-page h2 { margin: 0 0 10px; font-size: 24px; font-weight: 800; line-height: 1.3; }
.content-page h3 { margin: 30px 0 10px; font-size: 18px; font-weight: 700; line-height: 1.4; }
.content-page h4 { margin: 18px 0 6px; font-size: 15px; font-weight: 700; line-height: 1.45; }
.content-page > :first-child { margin-top: 0; }
.content-page p, .content-page li { color: var(--ink); }
.content-page p { margin: 0 0 12px; }
.content-page ul { margin: 8px 0 12px 18px; }
.content-page li { margin: 6px 0; }
.draft-notice {
  background: #fff7ed;
  border: 1px solid #fdba74;
  color: #9a3412;
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 650;
  font-size: 13px;
  margin-bottom: 16px;
}

/* Subscribe consent checkbox */
.consent-checkbox {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
}
.consent-checkbox input[type="checkbox"] { margin-top: 3px; flex: 0 0 auto; width: 16px; height: 16px; }

/* Subscription plans page */
.consent-page { max-width: 760px; }
/* Plans page (owner, 25 Jul 2026): a little more width on both sides so the
   intro paragraph stops stranding one word on its own line, and the copy is
   JUSTIFIED rather than centre-ragged. */
/* 960px + no inner cap measured live: the intro sets in 3 justified lines with
   8 words on the last — at 880/800 it stranded the single word "combinations."
   on a 4th line, which is what the owner flagged. */
.plans-page { max-width: 960px; }
.plans-page > .server-note {
  text-align: justify;
  text-align-last: center;   /* final line stays centred, not stranded left */
  hyphens: auto;
}
.plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 18px 0 8px;
}
.plan-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.plan-card-featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.plan-badge {
  position: absolute;
  top: -10px;
  right: 16px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
.plan-card h3 { margin: 0; font-size: 18px; }
.plan-price { font-size: 30px; font-weight: 800; color: var(--ink); }
.plan-price span { font-size: 14px; font-weight: 600; color: var(--muted); margin-left: 4px; }
.plan-note { margin: 0; color: var(--muted); font-size: 13px; min-height: 34px; }
.plan-choose { margin-top: 6px; text-align: center; }

/* Subscription consent page */
.consent-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--soft);
  padding: 16px 18px;
  margin: 16px 0;
}
.consent-summary-label { display: block; font-weight: 800; }
.consent-summary-note { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.consent-summary-price { font-size: 22px; font-weight: 800; white-space: nowrap; }
.consent-summary-price span { font-size: 13px; font-weight: 600; color: var(--muted); margin-left: 3px; }
.consent-form { display: flex; flex-direction: column; gap: 16px; }
.consent-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

@media (max-width: 620px) {
  .plan-grid { grid-template-columns: 1fr; }
  .consent-summary { flex-direction: column; align-items: flex-start; }
}

/* Site footer */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--soft);
  margin-top: auto;
  padding: 24px 28px;
}
.site-footer-inner { max-width: 1220px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.site-footer-note { color: var(--muted); font-size: 10.5px; line-height: 1.4; }
.site-footer-links { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.site-footer-links a {
  color: var(--ink);
  text-decoration: none;
  /* Measured on an iPhone SE: these were 10.5px text in a 12px-tall box —
     below the 24x24 minimum a control must offer (WCAG 2.5.8) and too
     small to read. The padding is what makes them tappable; the size is
     what makes them legible. (31 Jul 2026) */
  font-size: 13px;
  font-weight: 650;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 0;
}
.site-footer-links a:hover { color: var(--accent); text-decoration: underline; }
.site-footer-copy { color: var(--muted); font-size: 10.5px; }

/* 18+ age gate */
.age-gate {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 27, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.age-gate[hidden] { display: none; }
.age-gate-card {
  background: var(--surface);
  border-radius: 14px;
  border: 1px solid var(--line);
  max-width: 440px;
  width: 100%;
  /* A flex item defaults to min-width:auto, so it refuses to shrink below its
     own content — which made this card render a full 440px on a 375px phone and
     push its button and links 88px off-screen (audit P2-5). It is the FIRST
     thing a mobile visitor sees. min-width:0 lets it shrink; the media query
     tightens the padding once it does. */
  min-width: 0;
  padding: 28px;
  text-align: center;
}
@media (max-width: 420px) {
  .age-gate { padding: 12px; }
  .age-gate-card { padding: 20px 16px; }
}
.age-gate-logo-wrap { position: relative; display: block; width: fit-content; margin: 0 auto 14px; }
.age-gate-logo { height: 46px; width: auto; max-width: 220px; display: block; }
.age-gate-tm { position: absolute; top: 1px; right: -8px; font-size: 11px; font-weight: 800; line-height: 1; color: var(--ink); }
.age-gate-card h2 { margin: 0 0 8px; }
.age-gate-card p { color: var(--muted); }
.age-gate-actions { display: flex; flex-direction: column; gap: 10px; margin: 20px 0 12px; }
.age-gate-help { font-size: 13px; }

.nverdict-view { --nverdict-primary: #1f8a78; --nverdict-cover: #496f96; }
.nverdict-hero { border-color: rgba(181, 135, 16, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 218, 109, 0.28); }
.nverdict-depth div { min-height: 96px; }
.nverdict-final-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 18px 0;
}
.nverdict-pick {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbfb 100%);
  box-shadow: 0 14px 32px rgba(18, 35, 46, 0.08);
}
.nverdict-pick.cover { background: linear-gradient(135deg, #ffffff 0%, #f7faff 100%); }
.nverdict-pick span,
.nverdict-final span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.nverdict-pick strong {
  display: block;
  margin-top: 14px;
  font-size: 20px;
  color: var(--ink);
}
.nverdict-pick p { color: var(--muted); line-height: 1.55; }
.nverdict-strength-note { display: block; margin-top: 4px; font-size: 12px; font-style: normal; color: var(--muted); }
.nverdict-honesty {
  margin: 12px 0 4px;
  padding: 9px 14px;
  border-radius: 8px;
  background: #f6f8fa;
  border: 1px solid #e6eaef;
  color: #5c6672;
  font-size: 12.5px;
  line-height: 1.5;
}
.nverdict-honesty strong { color: #2f3a47; font-weight: 700; }
.nverdict-edge {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: 10px;
  background: #ecfdf3;
  border: 1px solid #b7e4c7;
}
.nverdict-edge > i {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #166534; color: #ffffff;
  font-size: 13px; font-weight: 900; font-style: normal;
}
.nverdict-edge strong { display: block; color: #166534; font-weight: 900; font-size: 13.5px; }
.nverdict-edge p { margin: 3px 0 0; color: #1f5133; line-height: 1.5; font-size: 13px; }
.streak-view { padding: 4px 0; }
.streak-hero { background: #17212b; border-radius: 12px; padding: 18px 22px; margin-bottom: 16px; }
.streak-hero > span { display: block; font-size: 11.5px; letter-spacing: .05em; color: #7fd0c0; font-weight: 900; text-transform: uppercase; margin-bottom: 4px; }
.streak-hero h4 { margin: 0 0 8px; color: #ffffff; font-size: 20px; }
.streak-hero p { margin: 0; color: #d7e0ea; line-height: 1.55; font-size: 14px; }
.streak-hero b { color: #ffffff; }
.streak-cur-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.streak-cur-grid > div { background: #f8fafc; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.streak-cur-grid span { display: block; font-size: 11px; color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.streak-cur-grid b { display: block; font-size: 22px; color: var(--ink); margin: 3px 0; }
.streak-cur-grid em { font-style: normal; font-size: 12px; color: var(--muted); }
.streak-section { margin: 16px 0; }
.streak-rows { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.streak-row { display: grid; grid-template-columns: 70px 1fr 60px 96px 52px auto; align-items: center; gap: 12px; padding: 5px 8px; border-radius: 8px; }
.streak-row.live { background: #f1f8f5; }
@media (max-width: 720px) {
  /* Fixed-width grid columns (70+60+96+52px plus gaps) plus a nowrap chip
     don't fit a phone screen (audit 2026-08-12, 119px overflow) -- scroll
     each row within its own box instead of the page. */
  .streak-row { overflow-x: auto; max-width: 100%; }
}
.streak-seg { display: inline-flex; align-items: center; justify-content: center; padding: 3px 8px; border-radius: 6px; font-weight: 850; font-size: 12px; color: #17212b; }
.streak-seg.sm { padding: 2px 6px; font-size: 11px; }
.streak-arrow { color: var(--muted); }
.streak-bar { position: relative; height: 10px; background: #eef2f7; border-radius: 99px; overflow: hidden; }
.streak-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: #5b86a8; border-radius: 99px; }
.streak-row .streak-up { color: #166534; font-weight: 850; }
.streak-row .streak-down { color: #b91c1c; font-weight: 850; }
.streak-row .streak-flat { color: var(--ink); font-weight: 800; }
.streak-base { font-size: 12px; color: var(--muted); }
.streak-mult { font-size: 12px; color: var(--muted); font-weight: 800; text-align: right; }
.streak-chip { font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.streak-high { background: #dcfce7; color: #166534; }
.streak-med { background: #e0edff; color: #0d4a8a; }
.streak-low { background: #f1f0e8; color: #5f5e5a; }
.streak-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 10px; }
@media (max-width: 720px) {
  /* Same dense-table-doesn't-fit-a-phone-screen shape as .i2-table above
     (audit 2026-08-12) -- scroll within its own box instead of the page. */
  .streak-table { display: block; overflow-x: auto; max-width: 100%; }
}
.streak-table th { text-align: left; padding: 7px 10px; background: #284460; color: #ffffff; font-weight: 800; font-size: 11px; }
.streak-table td { padding: 6px 10px; border-bottom: 1px solid #eef2f7; }
.streak-table small { color: var(--muted); }
.streak-empty { color: var(--muted); font-style: italic; padding: 8px; }
.tedge-table td small { color: var(--muted); margin-left: 3px; }
.tedge-table .oe-ratio { font-size: 13px; }
.tedge-table tr.tedge-hot td { background: #fdf7e7; }
/* #6b5410 not #8a6d1a: 4.15:1 on this cream fill, just under AA. 5.5:1 now. */
.tedge-thin { display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 800; color: #6b5410; background: #f7ecc8; border-radius: 99px; padding: 2px 8px; }
.tedge-view .nverdict-honesty { margin-top: 16px; }
.sprd-lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 12px; }
.sprd-lane { border: 1px solid var(--line); border-radius: 10px; padding: 14px; background: #ffffff; }
.sprd-lane.current { border-color: #0d6aa0; box-shadow: inset 0 0 0 1px #0d6aa0; }
.sprd-lane-head { margin-bottom: 10px; }
.sprd-lane-head b { display: block; font-size: 14px; color: var(--ink); }
.sprd-lane-head span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.sprd-lane-head i { display: inline-block; margin-top: 6px; font-style: normal; font-size: 10.5px; font-weight: 800; color: #0d4a8a; background: #e0edff; border-radius: 99px; padding: 2px 9px; }
.sprd-row { display: grid; grid-template-columns: 62px 52px 1fr 44px auto; align-items: center; gap: 8px; padding: 5px 2px; border-top: 1px solid #eef2f7; font-size: 12px; }
.sprd-row b { color: var(--ink); }
.sprd-row small { color: var(--muted); }
.sprd-row em { font-style: normal; font-weight: 800; text-align: right; }
@media (max-width: 900px) { .sprd-lanes { grid-template-columns: 1fr; } }
.sverdict-lens td small { color: var(--muted); font-weight: 700; }
.sverdict-read { background: #f8fafc; border: 1px solid var(--line); border-left: 4px solid #0d6aa0; border-radius: 0 10px 10px 0; padding: 16px 18px; font-size: 14.5px; line-height: 1.75; color: #24313f; }
.sverdict-scope { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 12px; }
.sverdict-card { border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: #ffffff; display: flex; flex-direction: column; gap: 8px; }
.sverdict-card > span { font-size: 11px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.sverdict-card.anchor { border-top: 4px solid #0d6aa0; }
.sverdict-card.cover { border-top: 4px solid #64748b; }
.sverdict-card.dark { border-top: 4px solid #166534; }
.sverdict-card.avoid { border-top: 4px solid #b91c1c; }
.sverdict-chip { font-size: 16px; }
.sverdict-card p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.sverdict-none { color: var(--muted); font-weight: 800; }
@media (max-width: 1000px) { .sverdict-scope { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nedge-num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #cbd5e1; background: #ffffff; color: var(--ink); font-weight: 850; font-size: 13px; margin: 1px; }
.nedge-num.above { border-color: #166534; background: #ecfdf3; color: #166534; }
.nedge-num.below { border-color: #b91c1c; background: #fef2f2; color: #b91c1c; }
.nedge-none { color: var(--muted); font-style: italic; font-size: 12px; }
.nedge-table td small { color: var(--muted); margin-left: 3px; }
.rheat-wrap { overflow-x: auto; margin-top: 10px; }
.rheat { border-collapse: collapse; font-size: 11px; }
.rheat th { background: #284460; color: #ffffff; font-weight: 800; padding: 5px 6px; font-size: 10.5px; white-space: nowrap; }
.rheat td { padding: 4px 7px; text-align: center; border: 1px solid #ffffff; min-width: 30px; font-weight: 700; color: #17212b; cursor: default; }
.rheat .rheat-pb { background: #eef2f7; font-weight: 850; }
.rheat .rheat-hi2 { background: #86efac; }
.rheat .rheat-hi1 { background: #d1fae5; }
.rheat .rheat-mid { background: #f4f6f8; color: #5c6672; }
.rheat .rheat-lo1 { background: #fee2e2; }
.rheat .rheat-lo2 { background: #fca5a5; }
.rheat .rheat-dim { background: #fafafa; color: #5b6779; }
.rfun { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.rfun-row { display: grid; grid-template-columns: 170px 1fr 76px minmax(0, 1.2fr); align-items: center; gap: 12px; }
.rfun-row.ghost { opacity: .62; }
.rfun-row.ghost .rfun-fill { background: repeating-linear-gradient(45deg, #b8c2ce, #b8c2ce 6px, #d7dee6 6px, #d7dee6 12px); }
.rfun-label { font-size: 12px; font-weight: 800; color: var(--ink); }
.rfun-track { height: 18px; background: #eef2f7; border-radius: 99px; overflow: hidden; }
.rfun-fill { height: 100%; background: #17212b; border-radius: 99px; }
.rfun-num { font-size: 15px; color: var(--ink); text-align: right; }
.rfun-note { font-size: 11.5px; color: var(--muted); }
.rhist-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 12px; }
.rhist b { display: block; font-size: 12.5px; color: var(--ink); margin-bottom: 8px; }
.rhist-cols { display: flex; align-items: flex-end; gap: 3px; height: 72px; }
.rhist-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; }
.rhist-col i { display: block; width: 16px; background: #cbd5e1; border-radius: 3px 3px 0 0; }
.rhist-col.obs i { background: #17212b; }
.rhist-col span { font-size: 10px; color: var(--muted); }
.rhist-col.obs span { font-weight: 900; color: var(--ink); }
.rhist small { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; }
@media (max-width: 900px) { .rhist-pair { grid-template-columns: 1fr; } .rfun-row { grid-template-columns: 130px 1fr 60px; } .rfun-note { display: none; } }
.verdict-hero-gold { border: 1.5px solid rgba(212, 175, 55, 0.65); box-shadow: inset 0 0 0 1px rgba(255, 218, 109, 0.28), 0 18px 36px rgba(34, 27, 9, 0.06); }
.v14-hero { border: 1.5px solid rgba(212, 175, 55, 0.65); box-shadow: inset 0 0 0 1px rgba(255, 218, 109, 0.28); }
/* THE VERDICT PLAQUE — every group verdict opens with the S4 treatment: a light
   glossy body framed by a METALLIC gold gradient border (the gradient is what
   makes it read as gold, not yellow). Overrides the dark hero base. */
.verdict-hero-plaque {
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(250,252,255,.96));
  border: 1.5px solid #a81d1d;
  box-shadow: 0 14px 30px rgba(34, 27, 9, 0.08);
}
.verdict-hero-plaque > span, .verdict-hero-plaque .conc-eyebrow { color: #9b1b1b; }
.verdict-hero-plaque h3, .verdict-hero-plaque h4 { color: #17212b; }
.verdict-hero-plaque p { color: #33404d; }
.verdict-hero-plaque p b, .verdict-hero-plaque h4 b { color: #17212b; }
/* THE CROWN PLAQUE — the same metallic plaque, but the border gradient weaves
   deep ruby (#9b111e) through the gold: golden-red, not yellow-and-red. */
.crown-plaque {
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,251,246,.97));
  border: 2px solid #a81d1d;
  box-shadow: 0 16px 34px rgba(74, 18, 18, 0.10);
}
.crown-plaque > span { color: #8a1a1a; }
.crown-plaque h4 { color: #17212b; }
.crown-plaque p { color: #33404d; }
.crown-plaque p b, .crown-plaque h4 b { color: #17212b; }
/* --- Conclusion teaser gating --- */
.crown-preview-toggle { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 4px; background: #eef2f7; border-radius: 999px; font-size: 12px; }
.crown-preview-toggle > span { color: var(--muted); font-weight: 700; padding: 0 6px; }
.crown-preview-toggle button { border: 0; background: transparent; color: #445; font-weight: 800; font-size: 12px; padding: 5px 12px; border-radius: 999px; cursor: pointer; }
.crown-preview-toggle button.on { background: #17212b; color: #fff; }
.crown-free-row { background: #fbfdf8; }
.crown-free-tag { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 850; color: #166534; background: #dcfce7; border-radius: 4px; padding: 1px 5px; vertical-align: middle; text-transform: uppercase; letter-spacing: .03em; }
.crown-locked-row { opacity: .95; }
.crown-locked-row td { background: repeating-linear-gradient(135deg, #f7f8fa, #f7f8fa 9px, #f1f3f6 9px, #f1f3f6 18px); }
.nedge-num.crown-lock-num { color: #b8c2ce; border-color: #dde3ea; background: #fbfcfd; filter: blur(0.6px); }
.crown-lock-mini { color: #9aa6b2; font-weight: 800; font-size: 12px; }
.conc-consent-wrap { display: flex; justify-content: center; padding: 26px 16px; }
.conc-consent-card { max-width: 560px; width: 100%; text-align: center; border: 1.5px solid #e3c9c9; border-radius: 16px; padding: 28px 26px; background: linear-gradient(180deg,#fffaf8,#fff); box-shadow: 0 18px 40px rgba(120,20,20,.12); }
.conc-consent-banner { margin: 0 0 14px; padding: 9px 14px; border-radius: 9px; background: #fbeaea; border: 1px solid #eccccc; color: #7a1414; font-size: 12.5px; font-weight: 600; text-align: center; }
.conc-paidlock-title { margin: 14px 0 8px; font-size: 22px; font-weight: 850; color: #17212b; }
.conc-paidlock-body { margin: 0 auto 20px; max-width: 540px; color: #475569; font-size: 14.5px; line-height: 1.6; }
.crown-lock-panel { text-align: center; border: 1.5px solid #a81d1d; border-radius: 14px; padding: 26px 22px; margin: 16px 0; background: linear-gradient(180deg, #fffdf7, #fff8ec); }
.crown-lock-panel-badge { display: inline-block; font-size: 11px; font-weight: 850; color: #9b1b1b; background: #fbeaea; border-radius: 999px; padding: 4px 12px; letter-spacing: .02em; }
.crown-lock-panel h4 { margin: 12px 0 6px; font-size: 19px; color: #17212b; }
.crown-lock-panel p { margin: 0 auto 14px; max-width: 560px; color: #43506b; line-height: 1.55; font-size: 14px; }
.crown-upsell-btn { border: 0; border-radius: 999px; padding: 12px 26px; font-size: 15px; font-weight: 850; color: #fff; background: linear-gradient(135deg, #b02020, #7a1414); cursor: pointer; box-shadow: 0 8px 20px rgba(122, 26, 26, 0.22); }
.crown-upsell-btn:hover { filter: brightness(1.06); }
.crown-lock-foot { font-size: 12px !important; color: #8a94a2 !important; margin-top: 12px !important; }
.conc-yearly-note { font-weight: 600; color: #7a1414 !important; }
/* --- Plans page --- */
/* Plans is a normal Basic-access tab — no special gold styling. */
.plans-billing-note { font-size: 12px; color: #64748b; margin: 10px auto 0; max-width: 520px; }
.plans-view { padding: 6px 2px 20px; }
.plans-hero { text-align: center; margin-bottom: 20px; }
.plans-hero h3 { font-size: 24px; color: #17212b; margin: 4px 0 8px; }
.plans-hero p { max-width: 620px; margin: 0 auto 16px; color: #43506b; line-height: 1.6; font-size: 14px; }
.plans-billing-toggle { display: inline-flex; gap: 4px; padding: 4px; background: #eef2f7; border-radius: 999px; }
.plans-billing-toggle button { border: 0; background: transparent; color: #445; font-weight: 800; font-size: 13px; padding: 8px 18px; border-radius: 999px; cursor: pointer; }
.plans-billing-toggle button.on { background: #17212b; color: #fff; }
.plans-save { font-size: 10px; font-weight: 850; color: #166534; background: #dcfce7; border-radius: 4px; padding: 1px 5px; margin-left: 4px; }
.plans-billing-toggle button.on .plans-save { color: #166534; }
.plans-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 900px; margin: 0 auto; }
.plan-card { position: relative; border: 1px solid #e2e8f0; border-radius: 16px; padding: 24px 20px; background: #fff; display: flex; flex-direction: column; }
.plan-card.featured { border: 2px solid #a81d1d; background: linear-gradient(180deg, #fffdf8, #fff8ea); box-shadow: 0 18px 40px rgba(150, 20, 20, 0.22); }
/* Blue plan card (matches the paid tab badge). */
.plan-card-pro { border: 1.5px solid #a81d1d; background: linear-gradient(180deg, #fffdf8, #fff8ea); box-shadow: 0 12px 28px rgba(150, 20, 20, 0.10); }
.plan-card-pro .plan-name { color: #9b1b1b; }
.plan-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); font-size: 10.5px; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; color: #ffffff; background: linear-gradient(120deg, #7a1414, #b82828 42%, #d84a4a 50%, #b82828 58%, #7a1414); border-radius: 999px; padding: 4px 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 6px rgba(74,8,8,.45); text-shadow: 0 1px 0 rgba(255,255,255,.3); }
.plan-save-badge { display: inline-block; font-size: 10px; font-weight: 850; color: #166534; background: #dcfce7; border-radius: 5px; padding: 2px 7px; margin-left: 8px; vertical-align: middle; }
.plan-name { font-size: 16px; font-weight: 850; color: #17212b; }
.plan-price { margin: 10px 0 16px; color: #17212b; }
.plan-price b { font-size: 30px; }
.plan-price span { color: var(--muted); font-size: 13px; margin-left: 3px; }
.plan-feats { list-style: none; padding: 0; margin: 0 0 20px; flex: 1; }
.plan-feats li { position: relative; padding: 6px 0 6px 24px; font-size: 13px; color: #2b3a4a; border-top: 1px solid #f0f3f7; line-height: 1.4; }
.plan-feats li::before { content: "✓"; position: absolute; left: 2px; color: var(--engine-accent, #2a9d8f); font-weight: 850; }
.plan-feats li.off { color: #aeb8c2; }
.plan-feats li.off::before { content: "✕"; color: #cfd6de; }
.plan-cta { border: 0; border-radius: 999px; padding: 12px 18px; font-size: 14px; font-weight: 850; cursor: pointer; background: #17212b; color: #fff; }
.plan-cta.gold { background: linear-gradient(180deg, #e05a5a 0%, #c62828 20%, #a81d1d 38%, #e35d5d 52%, #b02020 66%, #8a1414 84%, #6e0f0f 100%); color: #ffffff; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 5px 14px rgba(120,20,20,.4); text-shadow: 0 1px 0 rgba(255,248,220,.35); }
.plan-cta.blue { background: linear-gradient(135deg, #b02020, #7a1414); }
.plan-cta.ghost { background: #eef2f7; color: #8a94a2; cursor: default; }
.plan-cta:hover:not(.ghost) { filter: brightness(1.08); }
.plans-checkout-note { text-align: center; color: #166534; font-weight: 700; font-size: 13px; margin: 14px 0 0; min-height: 18px; }
.plans-foot { text-align: center; max-width: 640px; margin: 16px auto 0; color: #8a94a2; font-size: 12px; line-height: 1.5; }
@media (max-width: 760px) { .plans-grid { grid-template-columns: 1fr; } }
.nverdict-number-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.nverdict-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(31, 138, 120, 0.35);
  background: #fff;
  color: var(--ink);
  font-size: 16px;
  font-weight: 900;
  margin: 0 3px 3px 0;
}
.nverdict-pick .nverdict-number {
  display: inline-flex;
  font-size: 16px;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
}
.nverdict-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  border-radius: 7px;
  padding: 5px 9px;
  background: var(--chip);
  color: var(--ink);
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}
.nverdict-target-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.nverdict-target-grid div {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--soft);
  padding: 13px 15px;
}
.nverdict-target-grid span { display: block; color: var(--muted); font-size: 12px; font-weight: 800; }
.nverdict-target-grid b { display: block; margin-top: 4px; font-size: 24px; color: var(--ink); }
.nverdict-target-grid em { color: var(--muted); font-size: 12px; font-style: normal; }
.nverdict-bar {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) 34px;
  align-items: center;
  gap: 8px;
}
.nverdict-bar i {
  display: block;
  height: 16px;
  border-radius: 999px;
  background: #5b86a8;
}
.nverdict-bar b { font-size: 12px; }
.nverdict-anchor-table td,
.nverdict-combo-table td { vertical-align: middle; }
.nverdict-combo-table tr.lead { background: rgba(42, 157, 143, 0.10); }
.nverdict-combo-table tr.cover { background: rgba(91, 134, 168, 0.10); }
.nverdict-final { border-color: rgba(181, 135, 16, 0.58); }

@media (max-width: 900px) {
  .nverdict-final-grid,
  .nverdict-target-grid { grid-template-columns: 1fr; }
}

.p7-report { --p7-primary: #1f8a78; --p7-cover: #b58710; --p7-blue: #496f96; }
.p7-hero {
  border-color: rgba(181, 135, 16, 0.62);
  box-shadow: inset 0 0 0 1px rgba(255, 218, 109, 0.28), 0 18px 36px rgba(34, 27, 9, 0.06);
}
.p7-depth-grid div { min-height: 96px; }
.p7-final-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 18px 0;
}
.p7-pick {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbfb 100%);
  box-shadow: 0 14px 32px rgba(18, 35, 46, 0.08);
}
.p7-pick.cover { background: linear-gradient(135deg, #ffffff 0%, #fffaf0 100%); }
.p7-pick span,
.p7-final span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.p7-pick strong {
  display: block;
  margin-top: 14px;
  font-size: 20px;
  color: var(--ink);
}
.p7-pick p { color: var(--muted); line-height: 1.55; }
.p7-pb-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  border-radius: 999px;
  border: 2px solid rgba(31, 138, 120, 0.35);
  background: #ffffff;
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  margin: 0 4px 4px 0;
}
.p7-pb-chip.cover {
  border-color: rgba(181, 135, 16, 0.48);
  background: #fff8dc;
}
.p7-pb-chip.large {
  width: 58px;
  height: 58px;
  font-size: 28px;
  border-width: 3px;
  margin-top: 12px;
}
.p7-group-chip {
  display: inline-flex;
  min-width: 58px;
  justify-content: center;
  border-radius: 7px;
  padding: 5px 9px;
  background: var(--p7-group);
  color: var(--ink);
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}
.p7-bar {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) 44px;
  align-items: center;
  gap: 8px;
}
.p7-bar i {
  display: block;
  height: 16px;
  border-radius: 999px;
  background: var(--p7-blue);
}
.p7-bar b { font-size: 12px; color: var(--ink); }
.p7-table td { vertical-align: middle; }
.p7-table tr.primary { background: rgba(42, 157, 143, 0.10); }
.p7-table tr.cover { background: rgba(181, 135, 16, 0.10); }
.p7-final { border-color: rgba(181, 135, 16, 0.62); }

@media (max-width: 900px) {
  .p7-final-grid { grid-template-columns: 1fr; }
}

/* ===== Tier gating: locked tabs + upgrade panels ===== */
.tab-lock { margin-left: 5px; font-size: 10px; opacity: .8; }
.worksheet-tab.tab-is-locked { opacity: .82; }
.upgrade-gate {
  max-width: 720px; margin: 20px auto; padding: 30px 32px; border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f7f9fc); text-align: center;
  border: 1.5px solid transparent;
}
.upgrade-gate.upgrade-gate-pro {
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,251,244,.98));
  border-color: #a81d1d;
  box-shadow: 0 18px 40px rgba(74, 40, 9, .1);
}
.upgrade-gate.upgrade-gate-pro {
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,251,244,.98));
  border-color: #a81d1d;
  box-shadow: 0 18px 40px rgba(74, 40, 9, .1);
}
.upgrade-badge {
  display: inline-block; font-size: 11px; font-weight: 850; letter-spacing: .04em;
  text-transform: uppercase; padding: 5px 12px; border-radius: 999px; margin-bottom: 12px;
}
.upgrade-gate-pro .upgrade-badge { background: #a81d1d; color: #ffffff; }
.upgrade-gate-pro .upgrade-badge { background: #a81d1d; color: #ffffff; }
.upgrade-gate h3 { margin: 0 0 8px; font-size: 26px; color: #17212b; }
.upgrade-lede { margin: 0 auto 18px; max-width: 560px; font-size: 15px; line-height: 1.6; color: #33404d; }
.upgrade-feats { list-style: none; margin: 0 auto 22px; padding: 0; max-width: 520px; text-align: left; }
.upgrade-feats li { position: relative; padding: 8px 0 8px 28px; font-size: 14px; color: #2b3a3a; border-bottom: 1px solid #eef2f7; }
.upgrade-feats li::before { content: "✓"; position: absolute; left: 4px; font-weight: 900; color: var(--engine-accent, #2a9d8f); }
.upgrade-gate-pro .upgrade-feats li::before { color: #b02020; }
.upgrade-cta-row { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.upgrade-price { font-size: 20px; font-weight: 900; color: #17212b; }
.upgrade-price small { font-size: 12px; color: #7a8794; font-weight: 700; }
.upgrade-cta {
  border: 0; border-radius: 10px; padding: 13px 24px; font: inherit; font-weight: 850; font-size: 15px;
  color: #fff; cursor: pointer;
}
.upgrade-gate-pro .upgrade-cta { background: linear-gradient(135deg, #b02020, #7a1414); }
.upgrade-gate-pro .upgrade-cta { background: linear-gradient(135deg, #b02020, #7a1414); }
.upgrade-cta:hover { filter: brightness(1.07); }
.upgrade-foot { margin: 0; font-size: 12.5px; color: #667; line-height: 1.55; }

/* ===== Three-tier subscribe page (billing/plans_au.html) ===== */
.au-billing-toggle { display: inline-flex; gap: 4px; padding: 4px; background: #eef2f7; border-radius: 999px; margin: 6px 0 20px; }
.au-billing-toggle button { border: 0; background: transparent; color: #445; font-weight: 800; font-size: 14px; padding: 9px 22px; border-radius: 999px; cursor: pointer; }
.au-billing-toggle button.on { background: #17212b; color: #fff; }
.au-save { color: #166534; font-weight: 800; font-size: 12px; }
.au-billing-toggle button.on .au-save { color: #86efac; }
.au-plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 8px 0 18px; }
.au-plan-card { position: relative; border: 1.5px solid #e1e8f0; border-radius: 14px; padding: 24px 22px; background: #fff; display: flex; flex-direction: column; }
.au-plan-card.au-featured {
  border-color: #a81d1d;
  background: #fff;
  box-shadow: 0 16px 34px rgba(74, 40, 9, .08);
}
.au-plan-card.au-plan-pro {
  border-color: #a81d1d;
  background: #fff;
  box-shadow: 0 12px 28px rgba(150, 20, 20, .09);
}
.au-plan-card.au-plan-pro h3 { color: #9b1b1b; }
.au-plan-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: linear-gradient(120deg,#7a1414,#b82828 42%,#d84a4a 50%,#b82828 58%,#7a1414); color: #ffffff; font-size: 11px; font-weight: 850; letter-spacing: .03em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 6px rgba(74,8,8,.4); text-shadow: 0 1px 0 rgba(255,255,255,.3); }
.au-plan-card h3 { margin: 0 0 6px; font-size: 20px; color: #17212b; }
/* Pro plan heading — deep red (matches the landing tier cards) */
.au-plan-card.au-featured h3 {
  color: #9b1b1b;
  -webkit-text-fill-color: #9b1b1b;
}
.au-plan-price { margin: 4px 0 2px; }
.au-plan-price .au-price { font-size: 32px; font-weight: 900; color: #17212b; }
.au-plan-price .au-per { font-size: 14px; color: #7a8794; font-weight: 700; }
.au-price-hint { margin: 0 0 14px; font-size: 12.5px; font-weight: 700; color: #166534; min-height: 16px; }
.au-price-hint .au-hint-yearly { color: #7a8794; font-weight: 600; }
.au-save-flag { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #166534; color: #d9f7e0; font-size: 11px; font-weight: 850; letter-spacing: .01em; vertical-align: middle; }
.au-billing-toggle button.on .au-save-flag { background: #22c55e; color: #06230f; }
.au-plan-feats { list-style: none; margin: 0 0 20px; padding: 0; flex: 1 1 auto; }
.au-plan-feats li { position: relative; padding: 7px 0 7px 24px; font-size: 13.5px; color: #2b3a3a; }
.au-plan-feats li::before { content: "✓"; position: absolute; left: 2px; font-weight: 900; color: var(--engine-accent, #2a9d8f); }
.au-plan-cta { text-align: center; border-color: transparent; }
/* Pro · Monthly is the SECONDARY twin of the dark Pro · Yearly pill: same
   geometry via .secondary-action, but .au-plan-cta above wipes borders —
   restore the ink outline so it reads as a real button. */
.au-plan-cta.pro-cta-monthly { border: 1px solid var(--ink); border-radius: 8px; background: #fff; color: var(--ink); justify-content: center; }
.au-plan-cta.pro-cta-monthly:hover { background: #f3f5f7; }
/* Each tier's CTA wears its own colour scheme. */
.au-plan-cta.au-cta-basic { background: #17212b; color: #fff; }
.au-plan-cta.au-cta-basic:hover { background: #232f3d; }
.au-plan-cta.au-cta-pro { background: linear-gradient(135deg, #b02020, #7a1414); color: #fff; }
.au-plan-cta.au-cta-pro:hover { filter: brightness(1.06); }
.au-plan-cta.au-cta-pro-alt { background: linear-gradient(135deg, #8a1414, #b02020 55%, #6e0f0f); color: #fff5d6; }
.au-plan-cta.au-cta-pro-alt:hover { filter: brightness(1.07); }
/* Footer: prices note + a real Back button instead of an inline link. */
.au-plan-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding-top: 14px; border-top: 1px solid #e6ebf1; }
.au-plan-foot-note { font-size: 13px; color: #64748b; }
.au-back-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border: 1.5px solid #cbd5e1; border-radius: 10px; background: #fff; color: #17212b; font-weight: 800; font-size: 13px; text-decoration: none; transition: background .15s ease, border-color .15s ease; }
.au-back-btn:hover { background: #f1f5f9; border-color: #94a3b8; }
@media (max-width: 820px) { .au-plan-grid { grid-template-columns: 1fr; } }

/* Email-verification reminder on the Account page */
.verify-banner { background: #fff8e6; border: 1px solid #f0d98a; border-radius: 8px; margin: 12px 0 4px; }
.verify-banner p { margin: 0; color: #6b5a12; }
.verify-ok { color: #166534; font-weight: 800; font-size: 12px; margin-left: 6px; }

/* ===== Public statistics pages (/stats) ===== */
.stats-page h1 { font-size: 28px; color: #042A63; margin: 4px 0 10px; }
.stats-page h2 { font-size: 20px; color: #042A63; margin: 28px 0 12px; }
.stats-page h3 { font-size: 15px; color: #17212b; margin: 0 0 6px; }
.stats-crumbs { font-size: 12.5px; color: #64748b; margin-bottom: 10px; }
.stats-crumbs a { color: #0097AE; text-decoration: none; }
.stats-intro { font-size: 15px; line-height: 1.6; color: #2b3a4a; max-width: 760px; }
.stats-updated { font-size: 12.5px; color: #64748b; margin: 4px 0 8px; }
.stats-sub { font-size: 12.5px; color: #64748b; margin: 0 0 10px; }
.stats-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stats-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.stats-card { border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; background: #fff; }
.stats-big { font-size: 15px; color: #17212b; margin: 4px 0 0; }
.stats-big b { color: #042A63; font-size: 20px; }
.stats-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.stats-chip { display: inline-flex; flex-direction: column; align-items: center; min-width: 46px; padding: 7px 8px; border-radius: 9px; border: 1px solid #e2e8f0; background: #f8fafc; }
.stats-chip b { font-size: 18px; color: #042A63; }
.stats-chip small { font-size: 10.5px; color: #64748b; }
.stats-chip.hot { background: #eaf7fa; border-color: #b6e2ea; }
.stats-chip.hot b { color: #0097AE; }
.stats-chip.cold { background: #eef2f7; border-color: #d8e0ea; }
.stats-chip.over { background: #fbf3e6; border-color: #ecdcc0; }
.stats-chip.over b { color: #9a6a12; }
.stats-figure { margin: 8px 0 4px; }
.stats-bars { display: flex; align-items: flex-end; gap: 2px; height: 180px; padding: 4px 0; }
.stats-bar-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.stats-bar { width: 100%; background: linear-gradient(180deg, #0097AE, #042A63); border-radius: 3px 3px 0 0; min-height: 2px; }
.stats-bar-n { font-size: 10px; color: #64748b; margin-top: 3px; }
.stats-figure figcaption { font-size: 11.5px; color: #64748b; margin-top: 6px; }
.stats-recent td:last-child { text-align: center; }
.stats-pb { display: inline-block; min-width: 26px; padding: 2px 8px; border-radius: 20px; background: #042A63; color: #fff; font-weight: 800; font-size: 12px; }
.stats-cta { margin: 26px 0 8px; text-align: center; border: 1.5px solid #b6e2ea; border-radius: 16px; padding: 22px 18px; background: linear-gradient(180deg, #f4fbfc, #fff); }
.stats-cta h2 { margin-top: 0; }
.stats-cta-btn { display: inline-block; margin-top: 6px; }
.stats-links { display: flex; flex-wrap: wrap; gap: 14px; margin: 18px 0; font-size: 13.5px; }
.stats-links a { color: #0097AE; text-decoration: none; font-weight: 600; }
.stats-faq details { border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; background: #fff; }
.stats-faq summary { font-weight: 700; color: #17212b; cursor: pointer; font-size: 14px; }
.stats-faq p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.6; color: #2b3a4a; }
.stats-compliance { margin-top: 22px; font-size: 12px; color: #64748b; line-height: 1.5; }
.stats-compliance a { color: #0097AE; }
.stats-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 16px 0; }
.stats-hub-card { display: block; border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; background: #fff; text-decoration: none; transition: box-shadow .15s; }
.stats-hub-card:hover { box-shadow: 0 8px 22px rgba(4,42,99,.10); }
.stats-hub-card h3 { color: #042A63; }
.stats-hub-go { color: #0097AE; font-weight: 700; font-size: 13.5px; }
@media (max-width: 640px) {
  .stats-two, .stats-grid3 { grid-template-columns: 1fr; }
  .stats-bars { height: 140px; }
  .stats-bar-n { font-size: 7px; }
}

/* ===== Homepage hero: live sample card + trust strip ===== */
.lp-trust { margin: 14px 0 0; font-size: 12.5px; color: #64748b; font-weight: 600; }
.lp-sample { display: flex; flex-direction: column; gap: 12px; }
.lp-sample-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #0097AE; }
.lp-sample-draw small { display: block; font-size: 11.5px; color: #cbd5e1; margin-bottom: 8px; }
.lp-sample-nums { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-sample-ball { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-weight: 800; font-size: 13px; }
.lp-sample-ball.pb { background: #0097AE; }
.lp-sample-stats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: #e2e8f0; }
.lp-sample-stats b { color: #fff; }
.lp-sample-link { color: #7fdfef; font-weight: 700; font-size: 13px; text-decoration: none; }

/* Plans and Pricing rendered as a nav tab (anchor, not button) */
.tabs a.tab, .tabs a.tab-plans { text-decoration: none; }


/* ============================================================
   Oz Lotto dashboard (admin-only preview) — every rule scoped under
   .oz-dashboard-page (the Oz page's body class) so nothing here can
   affect Powerball Australia or any other page.
   ============================================================ */
/* Oz Lotto workbook viewer */.oz-dashboard-page .oz-dashboard .section-title p { max-width: 760px; }
.oz-dashboard-page .oz-dashboard.is-loading { display: none; }
.oz-dashboard-page .oz-dashboard .section-title.dashboard-title h2 { font-size: 32px; line-height: 1.15; }
.oz-dashboard-page .workbook-shell.is-loading { display: none; }
.oz-dashboard-page #worksheetPanel.is-loading { display: none; }
.oz-dashboard-page .oz-latest-line {
  /* display:flex is LOAD-BEARING here: the base
     .latest-draw-line:not(:has(.powerball-chip)) rule forces inline on
     no-powerball products, which collapses the gap — Oz itself was missing
     the flex re-activation the Tatts/WW/SFL scopes had (owner symmetry fix,
     25 Jul 2026). One rule covers all four stacked-supp products because
     their bodies all carry .oz-dashboard-page. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Owner symmetry rule: date→mains distance == mains→supps distance.
     Measured live: margin-top 8px + gap 8px gives exactly 8px == 8px. */
  gap: 8px;
  margin-top: 8px;
}
.oz-dashboard-page .oz-dashboard .oz-supp-number-line {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
}
.oz-dashboard-page .oz-supp-chip {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  box-sizing: border-box;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #15a36e;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

/* Worksheet header (title-group · quick-nav · Taskpad), order arrow, plans —
   matched to Powerball Australia's chrome. */
/* Header is a single non-wrapping row (matching Powerball Australia): title on
   the left, quick-nav filling the centre, Taskpad pinned to the right end. The
   heading uses the same small 12px size PBA uses so a long descriptive title
   still fits on one line and never pushes Taskpad onto a second row. */.oz-dashboard-page .oz-worksheet-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: nowrap; }
.oz-dashboard-page .oz-worksheet-header .worksheet-title-group { display: flex; align-items: center; gap: 12px; flex: 1 1 0; min-width: 0; }
.oz-dashboard-page .oz-worksheet-header .worksheet-title-with-note { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; font-size: 12px; font-weight: 850; color: #17212b; line-height: 1.15; }
.oz-dashboard-page .oz-worksheet-header .worksheet-title-text { min-width: 0; overflow: hidden; color: #17212b; font-size: 12px; font-weight: 850; line-height: 1.15; text-overflow: ellipsis; text-transform: none; white-space: nowrap; }
.oz-dashboard-page .oz-worksheet-header .worksheet-title-with-note .logic-info { flex: 0 0 16px; }
.oz-dashboard-page .worksheet-tab.quicknav-tab.taskpad-pro-btn { flex: 0 0 auto; background: #fff; }
.oz-dashboard-page .worksheet-tab.quicknav-tab.taskpad-pro-btn .master-tab-label { color: #9b1b1b; }

/* Circles button styling lives in the deep-red metallic block above (matching
   Powerball Australia's Pro treatment). The old flat override was removed so
   that block wins. */.oz-dashboard-page .circles-toggle-btn { cursor: pointer; }
.oz-dashboard-page .engine-tool-btn { height: 28px; padding: 0 12px; border: 1px solid #c8d1dc; border-radius: 8px; background: #fff; color: #17212b; font-size: 12px; font-weight: 650; cursor: pointer; }
.oz-dashboard-page .engine-tool-btn:hover { border-color: #15a36e; }

/* Order-flip arrow, in the grid corner cell above serial #1. */.oz-dashboard-page .excel-row-headers .source-order-toggle { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 1px solid #17212b; border-radius: 6px; background: #17212b; color: #fff; cursor: pointer; }
.oz-dashboard-page .source-order-toggle:hover { opacity: 0.85; }
.oz-dashboard-page .source-order-toggle svg { transition: transform 0.15s ease; }
.oz-dashboard-page .source-order-toggle.reversed svg { transform: rotate(180deg); }

/* Plans / pricing sheet. */.oz-dashboard-page .oz-plans-lede h3 { margin: 0 0 4px; font-size: 20px; color: #17212b; }
.oz-dashboard-page .oz-plans-lede p { margin: 0 0 20px; color: #5b6b7c; }
.oz-dashboard-page .oz-plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.oz-dashboard-page .oz-plan-card { position: relative; border: 1px solid #dbe3eb; border-radius: 14px; padding: 22px; background: #fff; display: flex; flex-direction: column; }
.oz-dashboard-page .oz-plan-pro { border-color: #15a36e; box-shadow: 0 8px 26px rgba(21,163,110,0.12); }
.oz-dashboard-page .oz-plan-pro-accent { border-color: #b02020; }
.oz-dashboard-page .oz-plan-tag { position: absolute; top: -11px; left: 20px; padding: 3px 10px; border-radius: 999px; background: #15a36e; color: #fff; font-size: 11px; font-weight: 800; }
.oz-dashboard-page .oz-plan-pro-accent .oz-plan-tag { background: #b02020; }
.oz-dashboard-page .oz-plan-name { font-size: 14px; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; color: #5b6b7c; }
.oz-dashboard-page .oz-plan-price { font-size: 34px; font-weight: 850; color: #17212b; margin: 4px 0 10px; }
.oz-dashboard-page .oz-plan-price small { font-size: 14px; font-weight: 650; color: #8a97a8; }
.oz-dashboard-page .oz-plan-blurb { margin: 0 0 12px; color: #3f4d5f; font-size: 13px; line-height: 1.5; }
.oz-dashboard-page .oz-plan-feats { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 7px; }
.oz-dashboard-page .oz-plan-feats li { position: relative; padding-left: 22px; font-size: 13px; color: #17212b; }
.oz-dashboard-page .oz-plan-feats li::before { content: "✓"; position: absolute; left: 0; color: #15a36e; font-weight: 850; }
.oz-dashboard-page .oz-plan-cta { margin-top: auto; height: 40px; border-radius: 9px; border: 1px solid #17212b; background: #17212b; color: #fff; font-weight: 800; cursor: pointer; }
.oz-dashboard-page .oz-plan-basic .oz-plan-cta { background: #fff; color: #17212b; }
.oz-dashboard-page .oz-plans-foot { margin-top: 18px; font-size: 12px; color: #8a97a8; }
.oz-dashboard-page .source-data-sheet .supp-circle.supp-ring { box-shadow: 0 0 0 1.5px rgba(23,33,43,0.7); }
.oz-dashboard-page .source-data-sheet .supp-circle.supp-ring-blue { box-shadow: 0 0 0 1.5px #2563eb; }
.oz-dashboard-page .source-data-sheet .supp-circle.supp-ring-green { box-shadow: 0 0 0 1.5px #16a34a; }
.oz-dashboard-page .source-data-sheet .supp-circle.supp-ring-red { box-shadow: 0 0 0 1.5px #dc2626; }
.oz-dashboard-page .source-data-sheet.circles-hidden .supp-circle.supp-ring,
.oz-dashboard-page .source-data-sheet.circles-hidden .supp-circle.supp-ring-blue,
.oz-dashboard-page .source-data-sheet.circles-hidden .supp-circle.supp-ring-green,
.oz-dashboard-page .source-data-sheet.circles-hidden .supp-circle.supp-ring-red { box-shadow: none; }
/* Canada Lotto 6/49: the Bonus circle is maple red, so the tier rings get a
   white halo gap — otherwise the 5+-streak RED ring would vanish against the
   red circle (the gotcha #56 "meaning is the colour" family). */
.oz-dashboard-page.ca-dashboard-page .source-data-sheet .supp-circle.supp-ring { box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px rgba(23,33,43,0.7); }
.oz-dashboard-page.ca-dashboard-page .source-data-sheet .supp-circle.supp-ring-blue { box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px #2563eb; }
.oz-dashboard-page.ca-dashboard-page .source-data-sheet .supp-circle.supp-ring-green { box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px #16a34a; }
.oz-dashboard-page.ca-dashboard-page .source-data-sheet .supp-circle.supp-ring-red { box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px #dc2626; }
/* The OFF state must still win over the more-specific ca ring rules above
   (gotcha #61: a state class that turns something off needs the extra
   specificity in the same commit). */
.oz-dashboard-page.ca-dashboard-page .source-data-sheet.circles-hidden .supp-circle.supp-ring,
.oz-dashboard-page.ca-dashboard-page .source-data-sheet.circles-hidden .supp-circle.supp-ring-blue,
.oz-dashboard-page.ca-dashboard-page .source-data-sheet.circles-hidden .supp-circle.supp-ring-green,
.oz-dashboard-page.ca-dashboard-page .source-data-sheet.circles-hidden .supp-circle.supp-ring-red { box-shadow: none; }
.oz-dashboard-page .oz-taskpad { border: 1px solid #dbe3eb; border-radius: 10px; background: #fff; overflow: hidden; }
.oz-dashboard-page .oz-taskpad-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #e4ebf2; background: #f8fafc; }
.oz-dashboard-page .oz-taskpad-head strong { display: block; font-size: 15px; color: #17212b; }
.oz-dashboard-page .oz-taskpad-head span { display: block; font-size: 12px; color: #5b6b7c; }
.oz-dashboard-page .oz-taskpad-head em { font-size: 12px; color: #15a36e; font-style: normal; }
.oz-dashboard-page .oz-taskpad-head .engine-tool-btn { margin-left: auto; }
.oz-dashboard-page .oz-taskpad-board { min-height: 380px; padding: 18px 20px; font-size: 14px; line-height: 1.6; color: #17212b; outline: none; }


/* Supp-lane switcher atop every P tab (S1/S2/S3 — which supp the page analyses). */.oz-dashboard-page .supp-lane-bar { display: flex; align-items: center; gap: 8px; margin: 2px 0 14px; padding: 10px 14px; background: #f4f7fa; border: 1px solid #dbe3eb; border-radius: 10px; }
.oz-dashboard-page .supp-lane-label { font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; color: #3f4d5f; }
.oz-dashboard-page .supp-lane-btn { min-width: 44px; height: 30px; padding: 0 12px; border: 1px solid #c8d1dc; border-radius: 8px; background: #fff; color: #17212b; font-size: 13px; font-weight: 700; cursor: pointer; }
.oz-dashboard-page .supp-lane-btn:hover { border-color: #15a36e; }
.oz-dashboard-page .supp-lane-btn.active { background: #15a36e; border-color: #15a36e; color: #fff; }
.oz-dashboard-page .supp-lane-note { margin-left: 6px; font-size: 12px; color: #5b6b7c; }
@media (max-width: 760px) {
.oz-dashboard-page .supp-lane-note { display: none; }
 
}


/* Seminal Data: S1-S3 supplementaries in the green LotoLens supp circle
   (Oz counterpart of Powerball's blue pb-circle). */.oz-dashboard-page .source-data-sheet .supp-circle { position: relative; z-index: 6; width: 22px; height: 22px; flex: 0 0 auto; box-sizing: border-box; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: #15a36e; color: #fff; font-size: 10.5px; font-weight: 800; line-height: 1; }
.oz-dashboard-page .source-data-sheet .excel-cell:has(.supp-circle) { padding-left: 0; padding-right: 0; overflow: visible; }
.oz-dashboard-page .worksheet-tab small { display: block; font-size: 10px; text-transform: uppercase; color: var(--muted); }
.oz-dashboard-page .oz-sheet-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px 8px; }
.oz-dashboard-page .oz-sheet-head strong { display: block; font-size: 16px; color: #17212b; }
.oz-dashboard-page .oz-sheet-head span { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.oz-dashboard-page .oz-sheet-frame { overflow: auto; max-height: calc(100vh - 330px); border-top: 1px solid #dbe3eb; background: #fff; }
.oz-dashboard-page .oz-sheet-table { border-collapse: collapse; table-layout: fixed; width: max-content; min-width: 100%; font-size: 12px; }
.oz-dashboard-page .oz-sheet-table td { min-width: 44px; height: 28px; padding: 4px 7px; border: 1px solid #e4ebf2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oz-dashboard-page .oz-sheet-table tr:first-child td { position: sticky; top: 0; z-index: 2; }
@media (max-width: 760px) {
.oz-dashboard-page .oz-sheet-frame { max-height: calc(100vh - 380px); }
.oz-dashboard-page .oz-sheet-table { font-size: 11px; }
.oz-dashboard-page .oz-sheet-table td { padding: 3px 5px; }


}


/* ===== Favorites picker modal + cards ===== */
.fav-modal-backdrop {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  background: rgba(4, 42, 99, .38); padding: 20px; overflow-y: auto;
}
.fav-modal {
  width: 100%; max-width: 520px; background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(4, 42, 99, .28);
  padding: 20px 22px; max-height: 84vh; display: flex; flex-direction: column;
}
.fav-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fav-modal-head h3 { margin: 0; font-size: 1.15rem; color: var(--ink); }
.fav-modal-close {
  border: none; background: transparent; font-size: 26px; line-height: 1; color: var(--muted);
  cursor: pointer; padding: 0 4px; border-radius: 8px;
}
.fav-modal-close:hover { color: var(--ink); }
.fav-modal-sub { margin: 4px 0 14px; color: var(--muted); font-size: .88rem; }
.fav-pick-list { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 2px; }
.fav-pick-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
}
.fav-pick-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fav-pick-info strong { color: var(--ink); font-size: .95rem; }
.fav-pick-info small { color: var(--muted); font-size: .78rem; }
.fav-pick-btn {
  flex: 0 0 auto; border: 1px solid #042A63; background: #fff; color: #042A63;
  font-weight: 650; font-size: .82rem; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  transition: background .15s, color .15s;
}
.fav-pick-btn:hover { background: rgba(4, 42, 99, .06); }
.fav-pick-btn.is-added { background: #042A63; color: #fff; }
.fav-pick-btn:disabled { opacity: .55; cursor: default; }
.fav-remove { color: var(--accent-2); }
.fav-add-card { border-style: dashed; }

/* Basic draw-window switch: neutral, compact, and the same height as the Engine controls. */
.analysis-window-toggle { position: relative; width: 38px; min-width: 38px; height: 44px; min-height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: #334155; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 13px; font-weight: 850; }
.analysis-window-toggle:hover, .analysis-window-toggle:focus-visible { background: #f1f5f9; color: #0f172a; border-color: #94a3b8; }

.analysis-window-toggle { position: relative; }

.analysis-window-toggle { position: relative; }

.analysis-window-toggle { position: relative; }

.analysis-window-toggle { position: relative; }

.analysis-window-toggle { position: relative; }

.analysis-window-toggle { position: relative; }
.analysis-window-toggle::after { content: attr(data-tooltip); position: absolute; left: 0; top: calc(100% + 8px); z-index: 40; width: min(430px, 78vw); padding: 9px 11px; border: 1px solid #cbd5e1; border-radius: 7px; background: #17212b; color: #fff; font-size: 12px; font-weight: 600; line-height: 1.35; text-align: left; white-space: normal; box-shadow: 0 8px 22px rgba(15,23,42,.2); opacity: 0; pointer-events: none; }
.analysis-window-toggle:hover::after, .analysis-window-toggle:focus-visible::after { opacity: 1; }

/* Lotto Max era toggle (Template Decision Report §7): in Mode 2 (full
   history), a tab carrying a theoretical/combinatorial baseline (True Edge /
   Verdict families, plus the new Bonus: Segment) cannot honestly blend three
   different pool sizes, so its tab-strip button is dimmed with the SAME
   opacity treatment as a tier-locked tab (.tab-is-locked) — a visual cue that
   clicking it opens a "switch to Mode 1" message rather than data. Content is
   the real gate (lm-core.js loadTab); this is only the affordance. */
.worksheet-tab.era-mode1-only { opacity: .82; }
.worksheet-tab.era-mode1-only:hover { opacity: 1; }
.era-baseline-gate { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 28px 20px; }
.era-baseline-gate .secondary-action { padding: 9px 16px; }

/* ---------------------------------------------------------------------------
   TattsLotto (Saturday Lotto/Gold Lotto/X Lotto) — accent overrides.
   The page reuses the entire oz_v2 workbook styling (body carries BOTH
   .oz-dashboard-page and .tatts-dashboard-page); this block only remaps the
   Oz green #15a36e to the TattsLotto deep gold #b45309 (Checkpoint 2). */
.tatts-dashboard-page .oz-supp-chip { background: #b45309; }
.tatts-dashboard-page .engine-tool-btn:hover { border-color: #b45309; }
.tatts-dashboard-page .oz-plan-pro { border-color: #b45309; box-shadow: 0 8px 26px rgba(180,83,9,0.12); }
.tatts-dashboard-page .oz-plan-tag { background: #b45309; }
.tatts-dashboard-page .oz-plan-feats li::before { color: #b45309; }
.tatts-dashboard-page .oz-taskpad-head em { color: #b45309; }
.tatts-dashboard-page .supp-lane-btn:hover { border-color: #b45309; }
.tatts-dashboard-page .supp-lane-btn.active { background: #b45309; border-color: #b45309; color: #fff; }
.tatts-dashboard-page .source-data-sheet .supp-circle { background: #b45309; }
/* Latest Draw Results card: give the supplementary circles clear separation
   from the main numbers. The base rule forces this line to display:inline for
   no-powerball products, which collapses the gap and lets the supps butt right
   against the last main number. Re-activating flex here restores the intended
   column layout (mains row, then supps row with a 6px gap) already defined on
   .oz-dashboard-page .oz-latest-line. Scoped to TattsLotto — does not touch Oz. */
.tatts-dashboard-page .oz-latest-line { display: flex; }

/* ---------------------------------------------------------------------------
   Weekday Windfall (Previously Monday & Wednesday Lotto) — accent overrides.
   The page reuses the entire oz_v2 workbook styling (body carries BOTH
   .oz-dashboard-page and .ww-dashboard-page); this block only remaps the
   Oz green #15a36e to the Weekday Windfall crimson #be123c (Checkpoint 2 —
   deliberately distinct from TattsLotto's #b45309 gold). */
.ww-dashboard-page .oz-supp-chip { background: #be123c; }
.ww-dashboard-page .engine-tool-btn:hover { border-color: #be123c; }
.ww-dashboard-page .oz-plan-pro { border-color: #be123c; box-shadow: 0 8px 26px rgba(190,18,60,0.12); }
.ww-dashboard-page .oz-plan-tag { background: #be123c; }
.ww-dashboard-page .oz-plan-feats li::before { color: #be123c; }
.ww-dashboard-page .oz-taskpad-head em { color: #be123c; }
.ww-dashboard-page .supp-lane-btn:hover { border-color: #be123c; }
.ww-dashboard-page .supp-lane-btn.active { background: #be123c; border-color: #be123c; color: #fff; }
.ww-dashboard-page .source-data-sheet .supp-circle { background: #be123c; }
/* Latest Draw Results card: keep the stacked mains-row / supps-row layout
   (same fix as TattsLotto — the base rule collapses the line for no-powerball
   products). Scoped to Weekday Windfall — does not touch Oz or TattsLotto. */
.ww-dashboard-page .oz-latest-line { display: flex; }

/* ---------------------------------------------------------------------------
   Set for Life (Australia) — accent overrides.
   The page reuses the entire oz_v2 workbook styling (body carries BOTH
   .oz-dashboard-page and .sfl-dashboard-page); this block only remaps the
   Oz green #15a36e to the Set for Life emerald #059669 on BRAND elements
   (Checkpoint 2 — chrome stays the shared site teal; gotcha #18). Distinct
   from the AU family (Powerball / Oz green, Tatts gold, Windfall crimson). */
.sfl-dashboard-page .oz-supp-chip { background: #059669; }
.sfl-dashboard-page .engine-tool-btn:hover { border-color: #059669; }
.sfl-dashboard-page .oz-plan-pro { border-color: #059669; box-shadow: 0 8px 26px rgba(5,150,105,0.12); }
.sfl-dashboard-page .oz-plan-tag { background: #059669; }
.sfl-dashboard-page .oz-plan-feats li::before { color: #059669; }
.sfl-dashboard-page .oz-taskpad-head em { color: #059669; }
.sfl-dashboard-page .supp-lane-btn:hover { border-color: #059669; }
.sfl-dashboard-page .supp-lane-btn.active { background: #059669; border-color: #059669; color: #fff; }
.sfl-dashboard-page .source-data-sheet .supp-circle { background: #059669; }
/* Latest Draw Results card: keep the stacked mains-row / supps-row layout. */
.sfl-dashboard-page .oz-latest-line { display: flex; }

/* ---------------------------------------------------------------------------
   LOTO (France) — Chance Number repeat-badge override (QA deep-audit fix,
   6 Aug 2026). LOTO France never got the accent override every sibling fork
   above already carries, so `.lf-dashboard-page .source-data-sheet
   .supp-circle` silently inherited the shared Oz-green default (#15a36e) —
   white text on that fill is 3.23:1, below WCAG AA's 4.5:1 floor for normal
   text. #0055A4 is the exact French-flag blue already used as this product's
   accentColor (LOTOLENS_PRODUCT.accentColor in lf_v2_dashboard.html); white
   text on it is 7.4:1, comfortably clearing AA (independently computed —
   relative luminance 0.0918, contrast (1.05)/(0.0918+0.05) = 7.4:1). Scoped to
   LOTO France only — does not touch any other product's supp-circle. */
.lf-dashboard-page .source-data-sheet .supp-circle { background: #0055A4; }

/* The SAME accent on the Latest Draw card's Chance Number chip (deep audit,
   13 Aug 2026). The override above fixed the Engine grid's circle and stopped
   there, so the chip on the summary card kept falling through to the shared
   `var(--special-ball-bg, #00B0F0)` default — white text at 2.48:1, the worst
   contrast measured anywhere on this product, on the tile a customer looks at
   first.

   Two things worth noting for the next person. The dark-mode override landed
   on 6 Aug (454e83f) and measures 4.86, so only the LIGHT default was missed:
   a fix deployed to one theme is a fix not deployed. And no new colour is
   introduced here — #0055A4 is this product's OWN declared accentColor, the
   one already on the circle three lines up, at 7.41:1. The failure was never a
   palette decision; it was an element the palette never reached. */
.lf-dashboard-page .latest-result-card .powerball-chip { background: #0055A4; color: #ffffff; }

/* ---- Participating-countries flag row (EuroMillions, owner req 2026-07-25).
   ONE line, always: the row never wraps — each flag is a shrinkable flex item
   (flex-basis 30px, min-width 0) so when the viewport is narrower than nine
   full-size flags, every flag shrinks equally and the whole row still fits on
   a single line. Hover shows the country name (native title tooltip). ---- */
/* The participating-country block is a SIBLING of the dashboard title row, never
   a child of the title wrapper. That is load-bearing, not cosmetic: the row is
   `align-items: end`, so anything stacked under the <h3> inside the wrapper
   grows the wrapper and drags the Buy Pro button down with it — the flag block
   pushed it 33-37px below the title line on the two Europe-wide products
   (regression fix, 25 Jul 2026). Keeping the wrapper title-only means the
   button's 8px mirror-margin (see .dashboard-buy-btn) lands dead-centre on the
   title line BY CONSTRUCTION, for every product, flag row or not — no
   per-product compensation to keep in sync. The title row drops its own bottom
   margin when a flag block follows, so the gap under the product name is
   unchanged from when the block lived inside the wrapper. */
.section-title.dashboard-title:has(+ .participating-countries) { margin-bottom: 0; }
.participating-countries { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; margin-bottom: 12px; min-width: 0; }
.participating-caption { font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #5b6570; }
.participating-flag-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; min-width: 0; max-width: 560px; }
/* max-width 560px (was 360px): a no-op for a 9-flag row (natural width ~318px,
   flags capped at 30px) but lets a 19-flag row (Eurojackpot) render ~24px
   flags on desktop instead of ~13px; narrow viewports still shrink-to-fit. */
.participating-flag { flex: 1 1 30px; min-width: 0; max-width: 30px; line-height: 0; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(23, 33, 43, .18); background: #fff; cursor: default; }
.participating-flag:hover, .participating-flag:focus-visible { box-shadow: 0 0 0 1.5px rgba(23, 33, 43, .45); outline: none; }
.participating-flag svg { display: block; width: 100%; height: auto; }
@media (max-width: 480px) { .participating-flag-row { gap: 4px; } }

/* ---- Account pages: country accordion + quiet row actions (owner, 26 Jul 2026) ---
   My Products and Favourites used to be one flat list, each product on three
   lines with a heavy dark "View analysis" block on its own row. With 19 live
   products that ran well past a screen. Now products sit under a collapsible
   country header with its flag, and the action is a quiet pill at the right of
   the row, which roughly halves the row height. New classes only — no existing
   rule is altered. */

.acct-group { border-top: 1px solid var(--line); }
.acct-group:first-child { border-top: 0; }

.acct-group-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 2px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.acct-group-head:hover { background: rgba(23, 33, 43, .04); }

.acct-flag { display: inline-flex; width: 26px; flex: 0 0 auto; }
.acct-flag svg { width: 26px; height: auto; display: block; }

.acct-country { font-weight: 800; font-size: 15px; }

.acct-count {
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--soft);
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

/* Drawn rather than a glyph so it rotates cleanly and sits on the baseline. */
.acct-chev {
  margin-left: auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform .16s ease;
}
.acct-group.open .acct-chev { transform: rotate(45deg); }

.acct-group-body { padding: 0 0 8px; }

.acct-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 2px 8px 36px;
}

.acct-name { font-weight: 700; font-size: 15px; line-height: 1.3; }
.acct-why { display: block; font-weight: 600; font-size: 12px; color: var(--muted); margin-top: 2px; }

.acct-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

/* The quiet pill: a real tap target, without the weight of the old dark block. */
.acct-open {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  border-radius: 999px;
  padding: 7px 15px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.acct-open:hover { border-color: var(--ink); background: rgba(23, 33, 43, .04); }

.acct-remove {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 4px;
}
.acct-remove:hover { color: #9b1b1b; text-decoration: underline; }

@media (max-width: 560px) {
  .acct-row { padding-left: 12px; flex-wrap: wrap; }
  .acct-actions { margin-left: auto; }
}

/* The favourites picker uses the same country accordion as the account list, so
   its groups need the modal's spacing rather than the card's. */
.fav-pick-list .acct-group { border-top-color: rgba(23, 33, 43, .12); }
.fav-pick-list .acct-group-head { padding: 12px 4px; }
.fav-pick-list .acct-group-body { display: flex; flex-direction: column; gap: 8px; padding: 2px 0 10px; }
/* ⚠️ An author `display` BEATS the hidden attribute's UA display:none, so the
   rule above made `body.hidden = true` close nothing: the chevron pointed right,
   the group was genuinely marked closed, and the browser drew the products
   anyway. Any element toggled via `hidden` that also carries an author display
   value needs this companion rule — the same trap the bundle-builder menu hit
   on 25 Jul 2026 (PIPELINE 32c). */
.fav-pick-list .acct-group-body[hidden] { display: none; }
/* Belt and braces for the account list too: it has no author display today, but
   one added later would silently break collapsing in exactly the same way. */
.acct-group-body[hidden] { display: none; }
.fav-pick-list .fav-pick-row { margin-left: 34px; }

@media (max-width: 560px) {
  .fav-pick-list .fav-pick-row { margin-left: 8px; }
}

/* --- Fork dashboards: "working" state during the analysis recompute -------
   The forks now YIELD before recomputing (so no control freezes any more), but
   the recompute that follows still takes real time on the heavy sheets. During
   it the panel previously showed nothing at all — the old grid just sat there —
   which still read as "my click did nothing". This pill is the only thing
   telling a customer the click registered. Deliberately NOT the `is-loading`
   class, which is display:none and would blank the sheet mid-sort. */
/* NO opacity dim while a tab loads.
   Dimming the whole panel to 0.55 for the full load (measured 1,072ms locally,
   1,553ms on production while the pre-rendered HTML is fetched) is what the
   owner saw as "a white flash comes first, then it loads" — at 55% the panel
   washes out toward the page background before the new content snaps in.
   The panel now keeps the previous tab fully readable and only the "Updating…"
   pill below says work is happening, so a tab switch never flashes. */
#worksheetPanel.is-recomputing { opacity: 1; }
#worksheetPanel.is-recomputing::after {
  content: "Updating\2026";
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  padding: 8px 14px;
  border-radius: 999px;
  background: #042A63;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 18px rgba(4, 42, 99, 0.28);
  pointer-events: none;
  opacity: 1;
}

/* Skip-to-content link: hidden until keyboard focus, so keyboard and screen-reader
   users can jump past the header/nav straight to the page. Added 30 Jul 2026 —
   the one accessibility gap the Korea audit's live pass turned up. Site-wide,
   because it belongs to the shell (like the nav), not to any one product. */
.skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 1000;
  padding: 10px 16px;
  border-radius: 8px;
  background: #1d4ed8;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 8px;
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* ---- WCAG AA contrast pass, 2 Aug 2026 (owner-approved) -------------------
   Every rule here answers a MEASURED failure: each element was sampled in a
   real browser against its real, alpha-composited background, and each
   replacement colour is computed to clear 4.5:1 there. Scoped overrides are
   used where the same token is fine elsewhere (e.g. --muted passes on white
   and only fails on tinted panels), so nothing changes visually except the
   failing cases. */
.i2-table th, .vn-table th { color: #4a5568; }        /* --muted on tinted panels: 4.3:1 */
.vn-pick-rank { background: #1f7368; }                /* white rank digits: 3.32:1 -> 5.5:1 */
.vrep-final .vrep-chip { color: #17212b; }            /* pale teal chips in the final panel: 1.75:1 */
.s5-perm-row .i2-seg, .s5-chart-row .i2-seg { color: #17212b; }  /* muted on pastel chips: 3.7-4.5:1 */
.vrep-pick-card span, .vrep-context-card span,
.vrep-score-row > span:first-child { color: #4a5568; }  /* slate on tinted cards */
.number-co-row.same-number span, .number-co-row.same-number b { color: #5b6779; }  /* faded dupes: 2.45:1 */
.conc-bottomline .conc-eyebrow { color: #5eaa9c; }
.i5-final-strip .conc-eyebrow,
.i2-verdict .conc-eyebrow,
.i2-2s-conc .conc-eyebrow,
.s5-output .conc-eyebrow { color: #5eaa9c; }        /* teal on the dark verdict panels: 3.32:1 -> 5.6:1 */    /* teal eyebrow on the dark panel: 3.32:1 -> 5.6:1,
                                                          same value the panel's strong already uses */

/* Screen-reader-only table headers (2 Aug 2026): the three path-memory tables
   on the verdict pages had no header row at all, so a screen reader cannot
   name their columns. This head is real markup but visually collapsed, keeping
   the page pixel-identical. */
.sr-only-thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }

/* ---- WCAG AA contrast, Powerball USA audit (2 Aug 2026) -------------------
   Six MEASURED failures, each sampled in a real browser against its real,
   alpha-composited background, each replacement computed to clear 4.5:1 there.
   These are DIFFERENT classes from the Mega pass above — the same shapes of
   fault recurring on tabs Mega does not render the same way. */
.i2-skel-slot.c1 { background: #46708f; }   /* white slot digits: 3.87:1 -> 5.28:1 */
.i2-skel-slot.c2 { background: #1f7368; }   /* white slot digits: 3.32:1 -> 5.66:1 */
.vn-tag.vn-tag-mid, .vn-tag[data-band="2"] { color: #46708f; }
.seg3-chip,
/* Container rules like `.na-depth-title span` and `.s3-depth-verdict span`
   (0,1,1 each) outrank a bare `.seg3-chip` (0,1,0), so the chip kept the accent
   teal at 4.44:1 wherever one of them applied. Class+class (0,2,0) beats
   class+element, and naming both containers keeps it explicit rather than
   reaching for !important. */
.na-depth-title .seg3-chip,
/* Lotto Max audit, 5 Aug 2026: the original #0b5c56 replacement above was
   checked against only a handful of the product's 15 SEGMENT_PATTERN_COLORS
   pastel chip backgrounds and reported as fixed — but two of the FULL set of
   15 were never sampled and still failed: 3220000 (#F0B98A, 4.48:1) and
   3310000 (#DDB8E3, 4.49:1), both under the 4.5:1 floor (S3: Analysis /
   T1: Drift's rendered chip is exactly the 3220000 case). Recomputed the
   worst case across ALL 15 backgrounds this time (not a sample) and picked
   #084943, which clears 4.5:1 against every one of them with margin
   (worst case, 3220000: 5.88:1). */
.s3-depth-verdict .seg3-chip { color: #084943; }   /* worst-of-15 4.48:1 -> 5.88:1 */
/* --muted on the pale-yellow verdict chip: 4.47:1, just under the bar. */

/* ===== LOTO (France) — lf-* classes, this product's own analysis-prose and
   Taskpad styling (own tab content, no shared code beyond the base variables
   above). WCAG AA checked: --ink on --surface/--soft is 13.7:1 and 12.9:1;
   --muted on --surface is 4.6:1. */
.lf-section { margin: 0 0 26px; }
.lf-section:last-child { margin-bottom: 0; }
.lf-section h4 { margin: 0 0 6px; font-size: 16px; color: var(--ink); }
.lf-lede { margin: 0 0 14px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.lf-limits { margin: 14px 0 0; padding: 12px 14px; background: var(--soft);
  border: 1px solid var(--line); border-radius: 10px; font-size: 13px;
  line-height: 1.55; color: var(--ink); }
.lf-limits b { color: var(--accent-2); }
.table-scroll { overflow-x: auto; }
table.lf-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 4px 0 14px; }
table.lf-table th, table.lf-table td { padding: 7px 10px; border-bottom: 1px solid var(--line);
  text-align: left; white-space: nowrap; }
table.lf-table th { color: var(--muted); font-weight: 600; background: var(--soft);
  position: sticky; top: 0; }
table.lf-table tbody tr:hover { background: var(--soft); }
.lf-faq-item { margin: 0 0 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.lf-faq-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.lf-faq-item h4 { margin: 0 0 6px; font-size: 15px; color: var(--ink); }
.lf-faq-item p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }

/* QA round 3 — chart/heat/grid additions (own classes, ported PATTERNS only,
   contrast-checked: palette text below all clear 4.5:1 on white). */
.lf-chart { margin: 6px 0 14px; }
.lf-bar-legend { display: flex; gap: 16px; margin: 0 0 8px; font-size: 12px; color: var(--muted); }
.lf-bar-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lf-bar-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.lf-paired-bars { margin: 4px 0 14px; }
.lf-paired-row { display: grid; grid-template-columns: 130px 1fr 110px; gap: 10px; align-items: center; font-size: 13px; margin: 0 0 8px; }
.lf-paired-tracks { display: flex; flex-direction: column; gap: 3px; }
.lf-paired-tracks .bar-track { height: 9px; }
.lf-num-grid { display: grid; gap: 4px; margin: 10px 0 16px; max-width: 620px; }
.lf-grid-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; border-radius: 5px; }
.lf-grid-legend { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 4px 0 10px; font-size: 11.5px; color: var(--muted); }
.lf-grid-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.lf-grid-legend-item i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.lf-crown-line { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 0 0 14px; background: var(--surface); }
.lf-crown-line-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 8px; }
.lf-crown-rank { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--accent-3); color: #ffffff; font-size: 13px; }
.lf-crown-nums { flex: 1 1 auto; }
.lf-crown-score { margin-left: auto; font-size: 16px; color: var(--ink); }
.lf-crown-score small { font-weight: 500; color: var(--muted); }
.lf-crown-why { margin: 0 0 10px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.nverdict-final .nverdict-chip { color: #3d4654; }  /* 4.47:1 -> 8.55:1 */

/* ---- WCAG AA contrast, Mega Millions re-audit (13 Aug 2026) — LIGHT --------
   Two measured LIGHT-theme failures, both sampled on the rendered page signed
   in as Pro, against the element's real alpha-composited background. Each
   replacement is the MINIMUM move in HSL lightness that reaches 4.5:1 — hue
   and saturation are untouched, because these are the owner's brand colours
   and this is a correction, not a redesign.

   Both selectors have their own rule in the generated dark overlay
   (theme-dark.css) or a dark re-assert in theme-dark-tweaks.css, so neither
   change leaks into dark mode. Re-measured in BOTH themes after the edit. */

/* S1: POP. White on ACCENT_COLOR #2a9d8f at 16px w850 is 3.32:1 (16px is below
   the 18.66px large-bold threshold, so the bar is 4.5, not 3). The existing
   2 Aug pass already darkened this same accent to #1f7368 for .vn-pick-rank
   and .vi-slot.c2; #238478 is the MINIMUM that clears the bar here, so that is
   what is used rather than reaching for the darker precedent value. */
.seg-center-card.major { background: #238478; }     /* 3.32:1 -> 4.52:1 */

/* Crown's "Preview as" label: --muted #64717f on the toggle's own #eef2f7 pill
   is 4.4365:1 — the same "--muted passes on white and only fails on a tinted
   panel" case the 2 Aug pass fixed for .i2-table th. One step darker clears it.
   theme-dark-tweaks.css re-asserts var(--muted) for dark, where this element
   already passes and must not be dragged to a light-theme literal. */
.crown-preview-toggle > span { color: #636f7d; }    /* 4.4365:1 -> 4.5555:1 */
/* M9 parity rebuild — trajectory chart legend (LOTO France only).
   Chip text uses each series' own palette colour on the page surface.

   NOT clickable, and deliberately no longer dressed as if it were. These chips
   are `<span>`s emitted by lineChartHtml() with no handler anywhere; the rule
   set here carried `cursor: pointer`, a `:hover` brightness change and an
   `.active` state that nothing in the codebase ever sets. An independent
   visual pass clicked all 24 chips across S3/P2/C2 and neither the panel nor
   the chips' own classes changed.

   A control that looks interactive and is not is worse than a plain label: the
   customer concludes the page is broken, or that they failed to click
   properly. The affordance is removed rather than faked. If these should
   toggle their series, that is a real feature with a real handler, and it
   belongs in the chart builder, not in a cursor style. */
.lf-traj-legend { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 4px 0 12px; }
.lf-traj-chip { border: 1.5px solid currentColor; background: var(--surface); border-radius: 999px;
  padding: 4px 12px; font-size: 12.5px; font-weight: 700; line-height: 1.2; }

/* ===== 82-tab parity rebuild (13 Aug 2026) — the depth builders.
   The Checkpoint-3 rejection was that 44 of 52 tabs were one paragraph deep.
   These are the shared pieces every rebuilt tab is assembled from: a stat
   strip, a derived reading block and a whole-pool heat strip. Contrast: --ink
   on --surface/--soft is 13.7:1 / 12.9:1 and --muted on --surface is 4.6:1
   (unchanged from the block above); the heat strip picks its own ink from its
   own cell lightness, see .lf-strip-cell. */
.lf-stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin: 4px 0 18px; }
.lf-stat { border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px;
  background: var(--soft); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lf-stat-value { font-size: 19px; line-height: 1.15; color: var(--ink); font-weight: 800;
  overflow-wrap: anywhere; }
.lf-stat-label { font-size: 12px; font-weight: 600; color: var(--ink); }
.lf-stat-sub { font-size: 11.5px; color: var(--muted); line-height: 1.4; }

.lf-reading { margin: 4px 0 14px; padding: 13px 16px; border: 1px solid var(--line);
  border-left: 3px solid var(--accent-3); border-radius: 10px; background: var(--surface); }
.lf-reading h5 { margin: 0 0 8px; font-size: 13.5px; color: var(--ink); font-weight: 700; }
.lf-reading ul { margin: 0; padding-left: 18px; }
.lf-reading li { margin: 0 0 6px; font-size: 13.5px; line-height: 1.6; color: var(--ink); }
.lf-reading li:last-child { margin-bottom: 0; }

.lf-pool-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 3px; margin: 6px 0 16px; }
.lf-strip-cell { border-radius: 5px; padding: 5px 2px; text-align: center; line-height: 1.25;
  display: flex; flex-direction: column; min-width: 0; }
/* Ink is set inline per cell from that cell's own lightness (>=62% lightness
   takes #17212b, below takes #ffffff) so every cell clears AA against its own
   background rather than against an assumed page colour. */
.lf-strip-cell b { font-size: 12px; font-weight: 800; }
.lf-strip-cell span { font-size: 10px; opacity: 0.92; overflow-wrap: anywhere; }

table.lf-pool-table td:first-child { font-weight: 700; }
table.lf-pool-table tbody tr:nth-child(7n) td { border-bottom: 1.5px solid var(--accent-2); }


/* ---- dailygrand-overrides.css, this product's OWN rules (source: lotolens/product_styles/) ---- */
/* dailygrand-overrides.css — Daily Grand (Canada)'s OWN styling rules.

   SOURCE FRAGMENT, not a served file. scripts/gen_product_styles.py splices it
   into lotolens/static/dailygrand-styles.css between the forked platform body
   and the shared FIX BLOCK. Edit here, then re-run:

       python3 scripts/gen_product_styles.py --code dailygrand

   These rules used to live in the SHARED lotolens/static/styles.css, which is
   the coupling the owner's 23 Aug 2026 directive forbids: a Daily Grand styling
   edit would have meant editing a file all 28 other products load. They were
   removed from there and moved here unchanged.

   Cascade note — the move is provably neutral. Every rule below is scoped to
   `.dailygrand-dashboard-page`, a body class set by exactly one template
   (dailygrand_v2_dashboard.html), so nothing else can match it. The only rules
   in styles.css with specificity high enough to compete for these selectors are
   the base `.na-depth*` / `.na4-*` declarations at lines 2788-3110, which sit
   ABOVE both the old position (7450) and this new one (end of body). Nothing
   between them mentions na-depth or na4-, so relocating changes no outcome.
*/

/* ---------------------------------------------------------------------------
   Daily Grand (Canada) — scoped overrides.
   The page reuses the oz_v2 workbook shell for its worksheet chrome (body
   carries BOTH .oz-dashboard-page and .dailygrand-dashboard-page) but the
   Grand Number is a genuinely separate-pool special ball (gotcha #64), so it
   renders via .pb-circle/--special-ball-bg (see dailygrand-dashboard.js),
   NOT the .supp-circle family the AU siblings above remap — there is
   deliberately no .dailygrand-dashboard-page .source-data-sheet .supp-circle
   rule here. */
/* FIX (audit-visual, 5 Aug 2026): .na-depth's shared 1180px floor exists for
   other products' genuinely wide tables (ca_v2 etc.). Daily Grand's own
   .na-depth content (Shape, and the rest of the analysis tabs built on this
   shell) never needs it — every child grid already responds down to 0
   (.na-depth-cards/-two use minmax(0, 1fr), .na-depth-table is width:100%)
   — so the floor only forced needless horizontal scrolling / edge clipping
   inside .oz-worksheet-body on narrower viewports. Scoped to Daily Grand;
   does not touch ca_v2 or any other .na-depth consumer. */
.dailygrand-dashboard-page .na-depth { min-width: 0; }

/* FIX (audit-visual re-verification, 5 Aug 2026): removing .na-depth's
   floor above unmasked a SECOND, previously-hidden bug at phone width —
   .na-depth-table itself has no shrink rule (table-layout: auto, and its
   `th` is white-space: nowrap), so a table with enough columns or long
   enough header text still forces its OWN intrinsic content width past a
   narrow shell regardless of the .na-depth fix (Day of Draw's 5-column
   table measured 516px intrinsic width against a 304px shell; 9 of 16
   tabs showed 12-212px residual overflow from this, previously invisible
   because the much larger 876px .na-depth floor dominated it). Scoped to
   Daily Grand, not the shared base .na-depth-table rule above (every other
   product using the na-depth pattern also depends on that rule and is out
   of this product's scope). Below the phone breakpoint: table-layout:fixed
   caps the table to its container's own width (matching every other
   .na-depth child, instead of growing past it), header/cell text is
   allowed to wrap instead of forcing width, and padding/font-size are
   trimmed slightly to keep wrapped rows compact. This is a floor-lowering
   fix, not a scroll-removal one — .oz-worksheet-body's existing
   overflow-x:auto remains the fallback for anything that still can't fit
   (e.g. one genuinely unbreakable token), so nothing regresses for content
   that was already fine. */
@media (max-width: 600px) {
  .dailygrand-dashboard-page .na-depth-table {
    table-layout: fixed;
    width: 100%;
  }
  .dailygrand-dashboard-page .na-depth-table th,
  .dailygrand-dashboard-page .na-depth-table td {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    padding: 6px 5px;
    font-size: 11px;
  }
  /* Number Analysis - Pairs (na4-block-grid/-card/-mini-row) is a card grid,
     not a <table>, so the fix above doesn't reach it — same underlying CSS
     Grid gotcha though: a grid item defaults to min-width:auto, so its own
     min-content size can force the track wider than the track's own
     minmax() lower bound. Root cause here: the shared (multi-product)
     .na4-mini-row rule hard-codes `grid-template-columns: 22px minmax(90px,
     1fr) 34px` — a 90px minimum built for whatever other products put in
     that middle slot — but Daily Grand's own renderPairs() only ever puts a
     single 1-2 digit number there (dailygrand-number.js's `<span>${p.n}
     </span>`), so 90px is far more than this product's own content ever
     needs. Scoped to Daily Grand, not the shared base rule (every other
     na4-mini-row consumer — ca_v2, oz_v2, pba, mega, usa, and others —
     keeps its own 90px). */
  .dailygrand-dashboard-page .na4-block-card { min-width: 0; }
  .dailygrand-dashboard-page .na4-mini-row {
    grid-template-columns: 18px minmax(24px, 1fr) 28px;
    gap: 4px;
    padding: 3px;
  }
  .dailygrand-dashboard-page .na4-block-card-head {
    gap: 6px;
    padding-bottom: 5px;
  }
}


/* ==========================================================================
   PER-PRODUCT FIX BLOCK — owner directive 23 Aug 2026 (PIPELINE.md v2.5)
   Appended to this product's OWN stylesheet. Nothing here is shared; the same
   text is duplicated into every other product's sheet, deliberately, so that a
   change here can never reach another product.
   ========================================================================== */

/* --- FIX 1: a clipped number must never still read as a valid number -------
   `.excel-cell` is a flex box with `justify-content:center` and
   `overflow:hidden`. Its content could not shrink (flex items default to
   `min-width:auto`), so an over-wide value overflowed EQUALLY on both sides
   and was sliced at BOTH ends with no marker anywhere:
       20.00% -> 0.00      16.67% -> 6.67      1201020 -> 20102
   Measured 115 such cells on Canada Lotto 6/49 and 97 on Powerball USA at
   390px; zero at 1400px.

   Chosen remedy: an UNAMBIGUOUS ELLIPSIS. Making the full value fit is not
   possible from CSS — the Engine's column minima are emitted inline by each
   product's engine as `minmax(26px, 44fr)`, and at 390px every track is
   already pinned to its 26px minimum with the grid overflowing (measured:
   grid width 256px, scrollWidth 704px). Widening them is an engine change,
   not a styling change. Wrapping is not viable either: these are unbroken
   digit runs, so a wrap would have to break mid-number, which is the very
   failure being fixed. An ellipsis loses precision but can never be misread
   as a complete number, which is the bar the owner set.

   Two shapes need it, because the Engine renders values two ways. */

/* 1a. stacked cells: <span class="cell-stack"><b>1</b><i>16.67%</i></span> */
.excel-cell > * { min-width: 0; max-width: 100%; }
.excel-cell .cell-stack { display: flex; flex-direction: column; min-width: 0; max-width: 100%; }
.excel-cell .cell-stack > b,
.excel-cell .cell-stack > i,
.excel-cell .cell-stack > span {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 1b. cells holding a bare text node (segment codes such as 1201020).
   A text node cannot be given `min-width`, and `text-overflow` does not apply
   to a flex container's anonymous item — so the cell itself must become a
   block formatting context. `align-content:center` keeps the vertical
   centring that `align-items:center` was providing, with no change to the box
   model or to any track size. Header cells are excluded: they are handled by
   FIX 2 below and must WRAP, not ellipsise. */
.excel-cell:not(:has(*)):not(.sticky-sheet-header):not(.engine-header-cell) {
  display: block;
  align-content: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* Buy back the 4px the ellipsis would otherwise cost.
     Measured: a six-digit segment code needs 57px in a 56px cell — a ONE PIXEL
     overflow, which is invisible when the glyph edges are merely shaved but
     costs a whole digit once an ellipsis is doing the truncating (200102 ->
     20010...). Trimming the 3px side padding to 1px widens the content box by
     4px and lets those values render in FULL instead: Powerball USA went from
     3,974 truncated cells to 1, Fantasy 5 from 526 to 1, Mega Millions from
     2,604 to 1. Centred text does not move when the padding shrinks — it stays
     centred in a slightly wider box — and the grid tracks are fixed pixel
     values emitted inline by the engine, so no column changes width. */
  padding-left: 1px;
  padding-right: 1px;
}

/* --- FIX 2: Engine column headers must wrap, not truncate (owner rule #27) --
   A wrap fix already existed for `.excel-cell.engine-header-cell` — but only
   4 of the 28 products' engines ever emit that class (app.js, app-basic.js,
   pba-*, usa-*, mega-*). Every other product's Engine header row is
   `.excel-cell.sticky-sheet-header`, so the fix never applied there. That is
   why it was measured as "present but incomplete at phone width".
   Applied here to the class the DOM actually carries. */
.excel-cell.sticky-sheet-header {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.1;
  text-align: center;
  justify-content: center;
  word-break: normal;
  /* never `anywhere`: it splits single words mid-character — see the note on
     .excel-cell.engine-header-cell earlier in this file. */
  overflow-wrap: normal;
}

/* --- FIX 4: gated (Pro) tab edge — owner rule #32e wants 1.5px #a81d1d ------
   The rule already SAID `1.5px`. Chrome floors border-width to a whole CSS
   pixel at every device-pixel-ratio (verified at DPR 1, 2 and 3: specified
   1.5px, used 1px), so it painted 1px. Keeping the 1px border preserves the
   box model and every tab position exactly; the missing half pixel is added
   as a spread-only box-shadow, which Chrome does honour fractionally and
   which occupies no layout space. */
.worksheet-tab.master-tab-wide,
.worksheet-tab.quicknav-tab.master-tab-compact,
.worksheet-tab.quicknav-tab.master-tab-compact.active,
.worksheet-tab.quicknav-tab.taskpad-pro-tab {
  border-width: 1px;
  box-shadow: 0 0 0 0.5px #a81d1d;
}