/* Keep compact sizing above the shared button padding rules. */
.app-topbar>#userGuideButton { display:inline-flex; align-items:center; justify-content:center; gap:0.4375rem; flex:0 0 auto; min-width:2.5rem; height:2.5rem; margin:0; padding:0 0.75rem; font-size:0.75rem; line-height:1; white-space:nowrap; }
.app-topbar>#userGuideButton[hidden] { display:none; }
.guide-open-icon { display:block; flex:0 0 1.25rem; width:1.25rem; height:1.25rem; color:var(--accent); }
body.user-guide-open { overflow:hidden; }
#userGuideDialog { container:guide-card / inline-size; width:min(55rem,calc(100% - 2rem)); max-width:none; max-height:calc(100dvh - 2rem); padding:0; overflow:hidden; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); color:var(--ink); box-shadow:none; }
#userGuideDialog[open] { display:flex; flex-direction:column; }
#userGuideDialog::backdrop { background:rgb(12 10 16 / 0.82); backdrop-filter:blur(0.3125rem); }
#userGuideDialog :is(button,progress) { font-family:inherit; }
#userGuideDialog button { cursor:pointer; }
#userGuideDialog button:focus-visible { outline:2px solid var(--accent); outline-offset:0.1875rem; }
#userGuideDialog button:disabled { opacity:.4; cursor:default; }
.guide-heading { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:0.75rem; padding:0.8125rem 1.25rem; border-bottom:1px solid var(--line); background:var(--surface-subtle); }
/* The "daily huddle" wordmark stays on one line; a long guide name ("DEFENSE BOARDS GUIDE") wraps instead (UI-364). */
.guide-brand { display:flex; align-items:center; gap:0.5rem; min-width:0; font-size:0.75rem; font-weight:800; letter-spacing:.5px; white-space:nowrap; }
.guide-brand>span { min-width:0; margin-left:0.5rem; font-size:0.6875rem; font-weight:600; letter-spacing:1.6px; color:var(--muted); white-space:normal; }
.guide-close { flex:0 0 2.5rem; height:2.5rem; padding:0; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface-raised); color:var(--ink); font-size:1.5rem; }
.guide-layout { display:grid; grid-template-columns:10.9375rem minmax(0,1fr); min-height:0; overflow:hidden; }
.guide-steps { display:flex; flex-direction:column; gap:0.3125rem; padding:1.375rem 0.75rem; border-right:1px solid var(--line); background:var(--surface-subtle); overflow-y:auto; }
.guide-steps button { display:flex; align-items:center; gap:0.625rem; min-height:2.6875rem; padding:0.5625rem 0.625rem; border:1px solid transparent; border-radius:var(--r-control); text-align:left; background:transparent; color:var(--muted); font-size:0.75rem; }
.guide-steps button>span { display:grid; place-items:center; flex:0 0 1.4375rem; height:1.4375rem; border:1px solid var(--line); border-radius:var(--r-control); font-size:0.625rem; }
.guide-steps button[aria-current=step] { border-color:var(--accent); background:var(--surface-raised); color:var(--ink); font-weight:700; }
.guide-steps button[aria-current=step]>span { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.guide-content { min-height:0; min-width:0; overflow-y:auto; overscroll-behavior:contain; padding:1.6875rem 1.75rem 1.5rem; scrollbar-width:thin; scrollbar-color:var(--line) var(--surface); }
#guideTitle { margin:0 0 0.625rem; font-size:1.5625rem; line-height:1.2; letter-spacing:-.6px; color:var(--ink); outline:none; }
#guideDescription { margin:0; font-size:0.875rem; line-height:1.6; color:var(--muted); }
.guide-illustration { margin:1.375rem 0; padding:0.9375rem; border:1px solid var(--line); border-radius:var(--r-card); background:var(--bg); }
#guideExample { display:block; margin-bottom:0.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:1.3px; font-size:0.6875rem; }
#guideVisual { font-size:0.75rem; line-height:1.5; }
#guideVisual em { font-style:normal; }
/* Nothing in the mocks is under 11px (0.625rem at the site's 110% root). */
#guideVisual small { font-size:0.625rem; color:var(--muted); }
.tour-team { display:inline-flex; align-items:center; gap:0.4375rem; font-weight:750; color:var(--ink); }
.tour-team img { flex:0 0 auto; object-fit:contain; }
.tour-team img[hidden],.tour-face img[hidden] { display:none; }
.tour-matchup { padding-bottom:0.75rem; margin-bottom:0.75rem; border-bottom:1px solid var(--line); }
.tour-matchup>div { display:flex; align-items:center; gap:0.625rem; flex-wrap:wrap; font-size:1rem; }
.tour-matchup>small { display:block; margin-top:0.4375rem; }
.tour-at { color:var(--muted); font-size:0.6875rem; }
.tour-person { display:flex; align-items:center; gap:0.5625rem; min-width:0; }
.tour-person>span:last-child { display:flex; flex-direction:column; gap:0.1875rem; min-width:0; }
.tour-person b { line-height:1.3; font-size:0.8125rem; }
.tour-face { position:relative; display:grid; place-items:center; flex:0 0 3rem; width:3rem; height:3rem; overflow:hidden; border-radius:var(--r-card); background:var(--surface-raised); color:var(--muted); font-weight:750; }
.tour-face img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:bottom; }
.tour-face:has(img:not([hidden]))>span { visibility:hidden; }
#guideVisual>.tour-person { margin-bottom:1rem; }
.tour-game-facts { display:flex; align-items:center; flex-wrap:wrap; gap:0.5rem 0.9375rem; padding-bottom:0.875rem; color:var(--muted); font-size:0.625rem; }
.tour-game-focus { display:grid; grid-template-columns:1.1fr 1fr; gap:1.125rem; }
.tour-game-focus .tour-main-price { margin-top:0.75rem; width:max-content; }
.tour-recent { padding-left:0.875rem; border-left:1px solid var(--line); }
.tour-recent>div { display:grid; grid-template-columns:1fr auto; gap:0.25rem 0.5rem; padding:0.75rem 0; border-bottom:1px solid var(--line); font-size:0.6875rem; }
.tour-recent>div>small { grid-column:1 / -1; }
.tour-evidence-card { display:flex; flex-direction:column; gap:0.625rem; min-width:0; padding:0.625rem; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); }
.tour-evidence-card .tour-person { gap:0.375rem; }
.tour-evidence-card .tour-face { width:2.25rem; height:2.5rem; flex-basis:2.25rem; }
.tour-evidence-card .tour-person b { font-size:0.6875rem; }
.tour-evidence-card .tour-person small { font-size:0.625rem; }
.tour-evidence-values { display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; }
.tour-evidence-values>span { display:flex; flex-direction:column; gap:0.25rem; padding:0.375rem; }
#guideVisual .tour-evidence-values b { font-size:1.0625rem; }
.tour-evidence-card>em { margin-top:auto; }
.tour-next { border-color:var(--accent); }
.tour-next-line { display:flex; flex-direction:column; gap:0.3125rem; margin-top:auto; padding:0.375rem; color:var(--muted); }
#guideVisual .tour-next-line>b { font-size:1.5rem; color:var(--ink); }
.tour-next-line>span { font-size:0.625rem; }
.tour-position-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0.625rem; padding:0.875rem 0; }
.tour-position-summary>span { display:flex; flex-direction:column; gap:0.3125rem; padding:0.5rem; }
.tour-position-summary b { font-size:1.3125rem; }
#guideVisual .tour-comparison { width:100%; min-width:0; border-collapse:collapse; font-size:0.6875rem; }
.tour-comparison th,.tour-comparison td { padding:0.625rem 0.4375rem; border-bottom:1px solid var(--line); text-align:right; }
.tour-comparison thead { background:var(--surface-subtle); color:var(--muted); font-size:0.625rem; }
.tour-comparison th:first-child { text-align:left; }
.tour-comparison .tour-person { gap:0.375rem; }
.tour-comparison .tour-person b { font-size:0.6875rem; }
.tour-comparison .tour-face { width:2.25rem; height:2.375rem; flex-basis:2.25rem; }
.tour-comparison td>.tour-over { display:inline-block; padding:0.375rem 0.5625rem; font-weight:750; }
.tour-preview { display:block; margin-bottom:0.75rem; font-size:0.625rem; color:var(--muted); }
.tour-path { display:flex; align-items:center; justify-content:center; gap:0.75rem; flex-wrap:wrap; margin-top:1.0625rem; font-size:0.6875rem; color:var(--muted); }
.tour-path i { color:var(--accent); font-style:normal; }
.tour-demo-header { display:flex; justify-content:space-between; gap:0.625rem; flex-wrap:wrap; padding-bottom:0.75rem; border-bottom:1px solid var(--line); }
.tour-demo-header>span { color:var(--muted); font-size:0.625rem; }
.tour-research-weeks { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0.5625rem; padding-top:0.75rem; }
.tour-research-weeks b { font-size:0.6875rem; }
.tour-research-weeks em { font-size:0.625rem; padding:0.4375rem 0.3125rem; background:var(--surface-raised); border-radius:var(--r-control); }
.tour-repeat { color:var(--muted); margin-top:0.875rem; font-size:0.625rem; text-align:center; }
#guideVisual .tour-over { color:var(--good); background:var(--good-bg); border-radius:var(--r-data); }
#guideVisual .tour-under { color:var(--bad); background:var(--bad-bg); }
.tour-price-strip { display:flex; align-items:center; justify-content:center; gap:0.625rem; }
.tour-price { display:flex; flex-direction:column; gap:0.1875rem; min-width:3.9375rem; text-align:center; padding:0.625rem 0.375rem; background:var(--surface-raised); border:1px solid var(--line); border-radius:var(--r-control); }
#guideVisual .tour-price small { color:var(--ink); font-size:0.6875rem; }
.tour-price b { color:var(--accent); font-size:0.875rem; }
.tour-price em { font-size:0.625rem; color:var(--muted); }
.tour-main-price { border:1px solid var(--accent); border-radius:var(--r-control); padding:0.3125rem; text-align:center; }
.tour-main-price>div { display:flex; gap:0.3125rem; }
.tour-main-price>strong { display:block; padding:0.3125rem 0 1px; font-size:0.625rem; color:var(--lilac); }
.tour-receipt { display:flex; justify-content:space-between; gap:0.9375rem; padding:0.625rem 0; }
.tour-receipt>div { display:flex; flex-direction:column; gap:0.4375rem; }
.tour-receipt>div:last-child { text-align:right; }
.tour-receipt strong { font-size:1.5625rem; line-height:1; }
.tour-receipt b { font-size:1.5625rem; line-height:1; }
.tour-price-note { display:flex; flex-direction:column; gap:0.25rem; padding:0.625rem 0.75rem; background:var(--surface); color:var(--muted); font-size:0.6875rem; }
.tour-tracker { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0.75rem; }
.tour-tracker>div { display:flex; flex-direction:column; gap:0.5rem; }
.tour-tracker b { padding:0.4375rem 0.1875rem; font-size:1rem; }
.tour-tracker span { font-size:0.625rem; color:var(--muted); }
#guidePoints { display:grid; gap:0.75rem; padding:0 0 0 1.125rem; margin:0 0 1.25rem; font-size:0.8125rem; line-height:1.7; color:var(--ink); }
#guidePoints li::marker { color:var(--accent); }
#guideNote { padding:0.75rem 0.875rem; margin:0; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface); color:var(--muted); font-size:0.75rem; line-height:1.65; }
.guide-footer { flex:0 0 auto; display:flex; align-items:center; gap:1.25rem; padding:0.9375rem 1.25rem; border-top:1px solid var(--line); background:var(--surface-subtle); }
.guide-skip { min-height:2.75rem; background:none; border:0; padding:0.625rem 0.75rem; margin-left:-0.75rem; font-size:0.75rem; color:var(--muted); text-decoration:underline; text-underline-offset:0.1875rem; }
.guide-progress { display:flex; flex-direction:column; gap:0.4375rem; margin-right:auto; font-size:0.6875rem; color:var(--muted); }
.guide-progress progress { width:6.25rem; height:0.25rem; border:0; border-radius:var(--r-data); overflow:hidden; appearance:none; background:var(--surface-strong); accent-color:var(--accent); }
.guide-progress progress::-webkit-progress-bar { background:var(--surface-strong); }
.guide-progress progress::-webkit-progress-value { background:var(--accent); }
.guide-progress progress::-moz-progress-bar { background:var(--accent); }
.guide-actions { display:flex; gap:0.5rem; }
.guide-actions .pd-button { min-height:2.625rem; padding:0.5625rem 1.125rem; font-size:0.75rem; }
/* The Props row as ?view=percentage draws it: UI-636's card (percentage-plays.css), with
   Arcade pieces from studio-kit.js. The layout follows the width of the guide's content
   (container query on .guide-content), not the viewport: at 768 the dialog keeps its side nav
   and the content is phone-narrow. The guide is never as wide as the page's one-line card
   (about 38rem here), so the player, price, score and Why share the top line, in the page's
   fixed price and score columns, and the chart and the evidence share the second: the player
   keeps room for his game line ("DET @ CAR | Tough 30th yds allowed"). */
.guide-content { container:guide-content / inline-size; }
.tour-ar-row { display:grid; grid-template-columns:2.5rem 8.5rem minmax(0,1fr) 8.5rem 3.75rem 2rem; grid-template-areas:"face who who pick score why" ". form ev ev ev ev"; align-items:center; gap:0.75rem 0.75rem; margin-top:0.625rem; padding:0.75rem 1rem 0.75rem 1.5rem; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); color:var(--ink); }
/* The Props guide's compact row (no chart or evidence). Each narrower layout below sets both rows'
   columns in one grouped rule, so a compact row can't keep a wider layout's columns (UI-757, UI-760). */
.tour-ar-row.is-compact { grid-template-columns:2.5rem minmax(0,1fr) 8.5rem 3.75rem 2rem; grid-template-areas:"face who pick score why"; }
.tour-ar-row>.tour-face { grid-area:face; width:2.5rem; height:2.5rem; flex-basis:2.5rem; border:1px solid var(--line); border-radius:var(--r-control); font-size:0.8125rem; }
.tour-ar-who { grid-area:who; display:flex; flex-direction:column; gap:0.25rem; min-width:0; }
/* Names as on Props: Big Shoulders, upper case. The name line is the page's own
   (.percentage-name-line in percentage-plays.css, on the same element): it wraps, so "+1 more
   prop" goes under a name it can't sit beside (UI-757). */
.tour-ar-name>b { min-width:0; font:900 1.5rem/1 var(--font-display); text-transform:uppercase; overflow-wrap:anywhere; color:var(--ink); }
/* His other props in the tier: the page's button rules (.percentage-more-props, UI-754), on the
   same element, so the picture follows the page (UI-760). Only what a picture needs is set here:
   a span sizes like the button (border-box), and it is not a control, so the pointer passes
   through it (no hover border, no pointer cursor, no tap area). */
#guideVisual .tour-more-props { box-sizing:border-box; pointer-events:none; }
.tour-ar-prop { font-size:0.875rem; }
.tour-ar-prop>i { font-weight:700; }
.tour-ar-who i,.tour-ar-count i { font-style:normal; font-family:var(--font-mono); }
/* Two lines under the prop: the game ("DET @ CAR" with CAR's defense rank joined to its box),
   then his role and the kickoff ("WR2 · Sun 7:20 PM"). The rank chip wraps under the boxes
   where it can't fit beside them. */
#guideVisual .tour-ar-context { display:flex; flex-direction:column; align-items:flex-start; gap:0.25rem; min-width:0; max-width:100%; color:var(--muted); font-size:0.75rem; }
.tour-ar-game { display:flex; flex-wrap:wrap; align-items:center; row-gap:0.25rem; min-width:0; max-width:100%; }
.tour-ar-when { display:flex; flex-wrap:wrap; align-items:center; column-gap:0.375rem; white-space:nowrap; }
.tour-ar-teams { flex:none; display:inline-flex; align-items:center; gap:0.25rem; }
.tour-ar-at { color:var(--muted); font-size:0.6875rem; font-weight:800; }
.tour-ar-matchup { display:inline-flex; min-width:0; max-width:100%; }
.tour-ar-matchup:not(.is-joined) { margin-left:0.375rem; }
/* The rank joined to the opponent's box: square inner corners, no gap between them. Where the
   chip has wrapped under the boxes (.is-wrapped, set after layout by onboarding.js watchWrap,
   UI-679) both keep their own rounded corners. */
.tour-ar-game:has(.tour-ar-matchup.is-joined:not(.is-wrapped)) .tour-ar-teams>.team-boxes:last-child { border-top-right-radius:0; border-bottom-right-radius:0; }
.tour-ar-matchup.is-joined:not(.is-wrapped) .ar-mu { border-top-left-radius:0; border-bottom-left-radius:0; }
/* Prices as on Props: side + line on the left, the price on the right, a 2px ink border. */
#guideVisual .ar-price { height:2.75rem; min-width:9.5rem; gap:0.375rem; padding:0 0.75rem; background:var(--surface-raised); color:var(--ink); border:2px solid var(--ink); border-radius:var(--r-control); cursor:default; font:900 1.3125rem/1 var(--font-display); }
#guideVisual .ar-price :is(span,strong) { color:inherit; font:inherit; white-space:nowrap; }
/* In the row the price fills its column; Break-even is in its tooltip (and for screen readers). */
.tour-ar-pick { grid-area:pick; display:flex; flex-direction:column; align-items:stretch; min-width:0; }
.tour-ar-price { display:block; min-width:0; }
#guideVisual .tour-ar-pick .ar-price { display:flex; align-items:center; justify-content:space-between; box-sizing:border-box; width:100%; min-width:0; }
#guideVisual .tour-ar-pick .ar-price:has(> .bet-side-label) { display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:auto auto; align-content:center; column-gap:0.5rem; row-gap:0.125rem; }
#guideVisual .tour-ar-pick .ar-price > .bet-side-label { grid-area:1 / 1; font:600 0.6875rem/1 var(--font-body); letter-spacing:0.01em; opacity:0.78; }
#guideVisual .tour-ar-pick .ar-price > .bet-side-label + span { grid-area:2 / 1; }
#guideVisual .tour-ar-pick .ar-price:has(> .bet-side-label) > strong { grid-area:1 / 3 / 3 / 4; align-self:stretch; display:flex; align-items:center; padding-left:0.5rem; border-left:1px solid color-mix(in srgb, currentColor 30%, transparent); font-weight:600; }
.tour-ar-form { grid-area:form; display:flex; flex-direction:column; gap:0.3125rem; min-width:0; }
#guideVisual .tour-ar-form .ar-chart-micro { width:100%; max-width:9.5rem; }
.tour-ar-count { display:inline-flex; align-items:center; gap:0.3125rem; font-size:0.75rem; font-weight:700; white-space:nowrap; }
.tour-ar-count.tone-for { color:var(--good); }
.tour-ar-count.tone-against { color:var(--bad); }
.tour-ar-count.tone-thin { color:var(--thin); }
.tour-ar-evidence { grid-area:ev; display:flex; flex-direction:column; gap:0.375rem; min-width:0; }
.tour-ar-chips { display:flex; flex-wrap:wrap; align-items:center; gap:0.375rem 0.625rem; min-width:0; }
.tour-ar-chips .ar-signals { min-width:0; max-width:100%; }
.tour-ar-chips .ar-sig { max-width:100%; min-width:0; }
.tour-ar-chips .ar-sig-stat { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.tour-ar-headline { font-size:0.8125rem; line-height:1.4; color:var(--ink); }
/* The Play Score as a big display number, in the tier's colour (green under Strong and Lean). */
.tour-ar-score { grid-area:score; display:flex; flex-direction:column; align-items:center; gap:0.125rem; min-width:0; color:var(--muted); }
#guideVisual .tour-ar-score strong { color:var(--ink); font:900 2.125rem/0.9 var(--font-display); font-variant-numeric:tabular-nums; }
#guideVisual .tour-ar-score[data-tone=good] strong { color:var(--good); }
.tour-ar-score span { font-size:0.6875rem; }
/* Why is the arrow at the end of a row, as on the page. */
.tour-ar-why { grid-area:why; justify-self:end; display:grid; place-items:center; width:2rem; height:2rem; box-sizing:border-box; border:2px solid var(--line); border-radius:var(--r-control); color:var(--muted); }
/* The signal tones as swatches, no ✓/✕ marks (UI-462): filled for supports, works against and
   neutral, a dashed outline for thin data, as the chips draw it. */
.mock-legend b { width:0.75rem; height:0.5rem; border-radius:var(--r-data); background:currentColor; }
.mock-legend b.tone-thin { background:none; outline:1px dashed currentColor; outline-offset:-1px; }
.mock-legend .tone-for { color:var(--good); }
.mock-legend .tone-against { color:var(--bad); }
.mock-legend .tone-neutral { color:var(--muted); }
.mock-legend .tone-thin { color:var(--thin); }
/* Phones, as on the page (UI-636): who and Why, then the chart, price and score on one line,
   then the evidence, its chips packed into one wrapping line and the full sentence under them. */
@container guide-content (max-width:40rem) {
  .tour-ar-row,.tour-ar-row.is-compact { grid-template-columns:2.25rem minmax(0,1fr) minmax(6.75rem,1fr) 2.75rem; }
  .tour-ar-row { grid-template-areas:"face who who why" "form form pick score" "ev ev ev ev"; gap:0.5rem 0.625rem; padding:0.625rem 0.75rem 0.625rem 1.125rem; }
  .tour-ar-row.is-compact { grid-template-areas:"face who who why" ". . pick score"; }
  .tour-ar-row>:is(.tour-face,.tour-ar-why) { align-self:start; }
  .tour-ar-row>.tour-face { width:2.25rem; height:2.25rem; flex-basis:2.25rem; }
  .tour-ar-why { width:2.5rem; height:2.5rem; }
  /* The player block runs under Why, so the game line has room for the rank chip beside the
     boxes; the name and prop lines keep clear of Why. */
  .tour-ar-row>.tour-ar-who { grid-column:2 / -1; grid-row:1; gap:0.125rem; }
  .tour-ar-row>.tour-ar-why { grid-column:4; grid-row:1; position:relative; z-index:1; }
  .tour-ar-who>:is(.tour-ar-name,.tour-ar-prop) { padding-right:3rem; }
  .tour-ar-count { flex-wrap:wrap; white-space:normal; }
  #guideVisual .tour-ar-score strong { font-size:1.875rem; }
  #guideVisual .tour-ar-pick .ar-price { padding:0 0.5rem; font-size:1.0625rem; }
  .tour-ar-chips { gap:0.25rem; }
  .tour-ar-chips .ar-signals { gap:0.25rem; }
  .tour-ar-chips :is(.ar-sig,.ar-verdict) { height:auto; min-height:1.4375rem; padding:0.125rem 0.375rem; font-size:0.6875rem; white-space:normal; }
}
/* Phone-narrow: the boxes show their codes without logos, so the rank chip fits beside them. */
@container guide-content (max-width:26rem) {
  .tour-ar-game .team-box { --tb-logo-w:0px; --tb-gap:0px; }
  .tour-ar-game .team-box-logo { display:none; }
}
/* Narrower still (a 390 phone), the chip goes under the boxes. */
@container guide-content (max-width:22rem) {
  /* At 320 the chip's words may wrap inside it rather than run past the card. */
  #guideVisual .tour-ar-matchup .ar-mu { max-width:100%; height:auto; min-height:1.375rem; white-space:normal; }
}
/* The Props page ("What it's for"), as UI-204 drew it: "Props" with the week across from it
   and one plain caveat line, a tier and compact rows, Show all, then Everything else. */
.tour-props-head { display:flex; flex-direction:column; gap:0.375rem; padding-bottom:0.875rem; }
.tour-props-title { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; font:900 1.875rem/1 var(--font-display); text-transform:uppercase; color:var(--ink); }
.tour-props-title>span { font-size:0.6em; }
#guideVisual .tour-props-head>p { margin:0; color:var(--muted); font-size:0.8125rem; line-height:1.45; }
.tour-props-head>p>span { font-size:0.75rem; }
.tour-tier-head { display:flex; align-items:center; flex-wrap:wrap; gap:0.25rem 0.5rem; }
.tour-tier-head>b { font:800 1.25rem/1.1 var(--font-display); color:var(--ink); }
#guideVisual .tour-tier-count { color:var(--muted); font:400 1rem var(--font-mono); }
.tour-tier-swatch { width:1rem; height:1rem; box-sizing:border-box; border:3px dashed var(--thin); border-radius:var(--r-control); }
/* The Lean tier's swatch, as on Props (a green outline). */
.tour-tier-swatch.is-lean { border-style:solid; border-color:var(--good); }
/* The Strong tier's swatch, as on Props (filled green), and room above the next tier's heading. */
.tour-tier-swatch.is-strong { border:1px solid var(--line); background:var(--good); }
.tour-ar-row+.tour-tier-head { margin-top:0.875rem; }
.tour-show-all { display:inline-flex; align-items:center; height:2.25rem; margin-top:0.625rem; padding:0 0.875rem; border:2px solid var(--line); border-radius:var(--r-control); color:var(--ink); font-size:0.8125rem; font-weight:700; }
.tour-rest { display:flex; align-items:center; flex-wrap:wrap; gap:0.375rem 0.875rem; margin-top:0.75rem; padding:0.75rem 0.875rem; border:2px dashed var(--line); border-radius:var(--r-control); color:var(--muted); font-size:0.75rem; font-weight:700; }
.tour-rest>b { font:800 1.25rem/1.1 var(--font-display); color:var(--ink); }
/* UI-756: "1273 props · 301 players" wraps as one piece under the title on a phone, not mid-count. */
.tour-rest .tour-tier-count { display:inline-block; }
.tour-rest i { font:700 0.8125rem var(--font-mono); font-style:normal; }
.tour-rest>.is-thin { color:var(--thin); text-decoration:underline dashed 1px; text-underline-offset:0.25em; }
.tour-rest>.is-against { color:var(--bad); }
.tour-rest>.is-neutral { font-weight:500; }
.tour-rest>em { display:inline-flex; align-items:center; gap:0.25rem; margin-left:auto; color:var(--ink); font-weight:800; }
/* Filters: Position and Side up front, More filters under them. */
.tour-filters { display:flex; flex-wrap:wrap; align-items:flex-end; gap:0.625rem 0.875rem; }
.tour-filters.tour-more { margin-top:0.75rem; padding:0.75rem; border:2px solid var(--line); border-radius:var(--r-control); background:var(--surface); }
.tour-filter { display:flex; flex-direction:column; gap:0.25rem; min-width:0; }
#guideVisual .tour-filter>small { font-size:0.6875rem; font-weight:700; color:var(--muted); }
.tour-seg { display:inline-flex; flex-wrap:wrap; gap:0.25rem; padding:0.1875rem; border:2px solid var(--line); border-radius:var(--r-control); }
.tour-seg>span { padding:0.3125rem 0.625rem; border-radius:var(--r-control); color:var(--ink); font-size:0.75rem; font-weight:700; white-space:nowrap; }
.tour-seg>.is-on { background:var(--selected-bg); color:var(--ink); box-shadow:inset 0 0 0 1px var(--accent); }
.tour-select { padding:0.375rem 0.625rem; border:2px solid var(--line); border-radius:var(--r-control); background:var(--surface-raised); color:var(--ink); font-size:0.75rem; white-space:nowrap; }
.tour-more-toggle { display:inline-flex; align-items:center; gap:0.375rem; min-height:2.25rem; padding:0 0.75rem; border:2px solid var(--line); border-radius:var(--r-control); color:var(--ink); font-size:0.75rem; font-weight:800; }
/* The Game logs dialog: header, this week's line, then the two logs. */
.tour-log-head { display:flex; align-items:flex-start; gap:0.625rem; padding-bottom:0.75rem; border-bottom:1px solid var(--line); }
.tour-log-head>span { display:flex; flex-direction:column; gap:0.125rem; min-width:0; }
.tour-log-head b { font:800 1rem var(--font-display); color:var(--ink); }
#guideVisual .tour-log-head small { font-size:0.75rem; }
.tour-log-head strong { color:var(--ink); }
.tour-log-line { display:flex; align-items:center; flex-wrap:wrap; gap:0.5rem 0.875rem; margin-top:0.75rem; padding:0.625rem 0.75rem; border:2px solid var(--line); border-radius:var(--r-card); background:var(--surface); }
.tour-log-line>span:first-child { display:flex; flex-direction:column; }
#guideVisual .tour-log-line>span:first-child b { font:400 1.5rem/1 var(--font-mono); color:var(--ink); }
.tour-log-line>em { color:var(--muted); font-size:0.75rem; }
.tour-log-section { margin-top:0.875rem; }
.tour-log-section>header { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:0.125rem 0.5rem; margin-bottom:0.375rem; }
.tour-log-section>header>b { font:800 0.9375rem var(--font-display); color:var(--ink); white-space:nowrap; }
.tour-log-section>header>span { color:var(--muted); font-size:0.75rem; }
.tour-log-section>header strong { font-family:var(--font-mono); font-weight:400; color:var(--ink); font-size:0.875rem; }
#guideVisual .tour-log-table { width:100%; border-collapse:collapse; font-size:0.75rem; }
.tour-log-table th,.tour-log-table td { padding:0.4375rem 0.5rem; border-bottom:1px solid var(--line); text-align:center; vertical-align:middle; }
.tour-log-table thead th { background:var(--surface); color:var(--muted); font-size:0.6875rem; font-weight:800; letter-spacing:0.04em; text-transform:uppercase; }
.tour-log-table thead th:first-child,.tour-log-table tbody th { text-align:left; }
.tour-log-table tbody th>.tour-face { float:left; margin-right:0.5rem; }
.tour-log-table tbody th>span { display:flex; flex-direction:column; min-width:0; }
.tour-log-table tbody th b { color:var(--ink); font-size:0.8125rem; font-weight:700; }
#guideVisual .tour-log-table tbody small { display:flex; align-items:center; gap:0.25rem; font-size:0.6875rem; }
#guideVisual .tour-log-table td>small { display:block; }
.tour-log-table td { color:var(--ink); font-family:var(--font-mono); }
.tour-log-table td>b { display:block; color:var(--good); font-family:var(--font-body); }
.tour-log-actual { display:inline-block; min-width:2.5rem; padding:0.25rem 0.375rem; border-radius:var(--r-card); background:var(--good-bg); color:var(--good); font-size:0.9375rem; }
.tour-log-table td>b.is-miss { color:var(--bad); }
.tour-log-actual.is-miss { background:var(--bad-bg); color:var(--bad); }
#guideVisual .tour-log-week>th { padding-top:0.5rem; background:var(--surface); color:var(--muted); font-size:0.6875rem; font-weight:800; }
@container guide-content (max-width:26rem) {
  .tour-log-table .tour-face { display:none; }
  .tour-log-table th,.tour-log-table td { padding:0.375rem 0.25rem; }
  .tour-log-actual { min-width:0; }
}

/* Tour steps for Teams and Usage. */
.tour-sections { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0.5rem; margin-top:0.875rem; }
.tour-sections-five { grid-template-columns:repeat(3,minmax(0,1fr)); }
.tour-sections-three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.tour-sections>span { display:flex; flex-direction:column; gap:0.3125rem; padding:0.75rem 0.625rem; border:1px solid var(--line); border-radius:var(--r-card); color:var(--muted); font-size:0.6875rem; line-height:1.4; }
.tour-sections b { font-size:0.875rem; color:var(--ink); }
@media(max-width:44em) {
  .tour-sections,.tour-sections-five { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tour-sections-three { grid-template-columns:1fr; }
}

/* Guide pages without an illustration or note. */
.guide-illustration[hidden],#guideNote[hidden] { display:none; }
.guide-illustration[hidden]+#guidePoints { margin-top:1.25rem; }
/* Every guide keeps one size while you page through it, so Next never moves; long pages scroll inside. */
/* The margins round the card stop growing past their 100% size, so large text keeps the room for the step (UI-441). */
#userGuideDialog { height:min(56rem,calc(100dvh - min(2rem,36px))); }
#userGuideDialog .guide-layout { flex:1 1 0; }
/* Guide graphics: small mock-ups of each screen, drawn from real data. */
.mock-logo { flex:0 0 auto; object-fit:contain; vertical-align:middle; }
.mock-logo[hidden] { display:none; }
.mock-face { width:2.25rem; height:2.25rem; flex:0 0 2.25rem; }
.mock-rows { display:grid; gap:0.4375rem; margin-top:0.75rem; }
.mock-row { display:flex; align-items:center; gap:0.625rem; min-width:0; padding:0.5rem 0.625rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface); }
.mock-row>span:not([class]) { display:flex; flex-direction:column; gap:0.125rem; min-width:0; flex:1 1 auto; }
.mock-row b { color:var(--ink); font-size:0.75rem; }
#guideVisual .mock-row small { display:flex; align-items:center; gap:0.25rem; color:var(--muted); font-size:0.625rem; }
.mock-row strong { color:var(--ink); font-size:1.125rem; font-weight:800; }
.mock-pill { flex:0 0 auto; padding:0.25rem 0.5rem; border:1px solid var(--line); border-radius:var(--r-data); color:var(--ink); font-size:0.625rem; white-space:nowrap; }
.mock-pill.is-good { color:var(--good); background:var(--good-bg); border-color:var(--good); }
.mock-pill.is-bad { color:var(--bad); background:var(--bad-bg); border-color:var(--bad); }
.mock-pos { display:inline-grid; place-items:center; min-width:1.625rem; --chip-min:1rem; padding:0.0625rem 0.3125rem; border-radius:var(--r-data); background:var(--surface-strong); color:var(--muted); font-size:0.625rem; font-weight:800; }
.mock-tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(7rem, 100%), 1fr)); gap:0.4375rem; margin-top:0.75rem; }
.mock-tiles>span { display:flex; flex-direction:column; align-items:flex-start; gap:0.25rem; padding:0.625rem 0.6875rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface); }
#guideVisual .mock-tiles small { color:var(--muted); font-size:0.625rem; }
.mock-tiles b { color:var(--ink); font-size:1.375rem; line-height:1.1; }
.mock-rank { padding:0.0625rem 0.375rem; border-radius:var(--r-data); background:var(--surface-strong); color:var(--ink); font-size:0.625rem; font-weight:700; white-space:nowrap; }
.mock-rank.is-good { background:var(--good-bg); color:var(--good); }
.mock-rank.is-bad { background:var(--bad-bg); color:var(--bad); }
.mock-hero { display:flex; align-items:center; gap:0.875rem; padding:0.75rem 0.875rem; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface-raised); }
.mock-hero>div { display:flex; flex-direction:column; gap:0.1875rem; }
#guideVisual .mock-hero small { color:var(--muted); font-weight:800; letter-spacing:0.08em; }
.mock-hero b { color:var(--ink); font-size:1.25rem; }
.mock-hero span { color:var(--muted); font-size:0.6875rem; }
.mock-game { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:0.75rem; padding:0.75rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface); }
.mock-game>div { display:flex; flex-direction:column; align-items:center; gap:0.1875rem; text-align:center; }
.mock-game b { color:var(--ink); font-size:0.875rem; }
.mock-game-mid b { font-size:1.125rem; }
.mock-game-mid span { color:var(--muted); font-size:0.625rem; }
.mock-game-mid em { margin-top:0.25rem; padding:0.1875rem 0.5rem; border-radius:var(--r-card); background:var(--surface-raised); color:var(--ink); font-size:0.625rem; }
.mock-lines { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0.4375rem; margin-top:0.4375rem; }
.mock-lines>span { display:flex; flex-direction:column; align-items:center; gap:0.1875rem; padding:0.5rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface-raised); }
.mock-lines b { color:var(--accent); font-size:0.8125rem; }
.mock-table { width:100%; margin-top:0.75rem; border-collapse:collapse; font-size:0.6875rem; }
.mock-table th,.mock-table td { padding:0.375rem 0.5rem; border-bottom:1px solid var(--line); text-align:left; color:var(--ink); vertical-align:top; }
.mock-table thead th { color:var(--muted); font-size:0.625rem; letter-spacing:0.06em; text-transform:uppercase; }
.mock-table tbody th { color:var(--ink); font-weight:650; white-space:nowrap; }
.mock-table tbody th .mock-logo { margin-right:0.375rem; }
.mock-table td:not(:first-child) { font-variant-numeric:tabular-nums; }
.mock-table tr.is-current>* { background:var(--surface-raised); }
.mock-legend { display:flex; flex-wrap:wrap; gap:0.5rem 1rem; margin-top:0.875rem; color:var(--muted); font-size:0.6875rem; }
.mock-legend>span { display:flex; align-items:center; gap:0.375rem; }
.mock-legend i,.mock-chips i { width:0.5rem; height:0.5rem; border-radius:var(--r-data); }
/* Walkthrough swatches only (UI-235): Research lab, Teams, bar charts and the bet slip use these state classes too. */
:is(.mock-legend, .mock-chips) i.is-hit { background:var(--good); }
:is(.mock-legend, .mock-chips) i.is-miss { background:var(--bad); }
#guideVisual .mock-col-title { display:block; margin-bottom:0.375rem; color:var(--muted); font-weight:800; letter-spacing:0.08em; }
.mock-checklist { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0.5rem; margin:0; padding:0; list-style:none; }
.mock-checklist li { position:relative; display:flex; flex-direction:column; gap:0.1875rem; padding:0.75rem 0.75rem 0.75rem 2.5rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface); color:var(--muted); font-size:0.6875rem; }
.mock-checklist li::before { content:"✓"; position:absolute; left:0.75rem; top:0.75rem; display:grid; place-items:center; width:1.25rem; height:1.25rem; border-radius:var(--r-data); background:var(--good-bg); color:var(--good); font-weight:800; }
.mock-checklist b { color:var(--ink); font-size:0.8125rem; }
.mock-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0.625rem; margin-top:0.75rem; }
.mock-columns>div { min-width:0; }
.mock-columns .mock-row { margin-bottom:0.4375rem; }
.mock-trend { display:flex; align-items:center; gap:0.25rem; color:var(--muted); font-size:0.625rem; }
.mock-score { display:inline-grid; place-items:center; min-width:2rem; padding:0.125rem 0.3125rem; border-radius:var(--r-data); font-style:normal; font-size:0.6875rem; font-weight:800; }
.mock-score.is-high { background:var(--good-bg); color:var(--good); }
.mock-score.is-low { background:var(--surface-raised); color:var(--muted); }
.mock-row>em { flex:0 0 auto; font-style:normal; font-size:0.75rem; font-weight:800; }
.mock-row>em.is-good { color:var(--good); }
.mock-row>em.is-bad { color:var(--bad); }
.mock-bars { display:grid; gap:0.4375rem; margin-top:0.75rem; }
.mock-bars>div { display:grid; grid-template-columns:8.5rem minmax(0,1fr) auto; align-items:center; gap:0.625rem; }
.mock-bars>div>span:first-child { display:flex; flex-direction:column; gap:0.0625rem; }
.mock-bars b { color:var(--ink); font-size:0.75rem; }
.mock-bar { height:0.625rem; border-radius:0; background:var(--surface-raised); overflow:hidden; }
.mock-bar i { display:block; height:100%; border-radius:inherit; }
.mock-bar i.is-high { background:var(--good); }
.mock-bar i.is-low { background:var(--line); }
.mock-toggle,.mock-chips { display:flex; flex-wrap:wrap; gap:0.375rem; margin-bottom:0.75rem; }
.mock-toggle>span,.mock-chips>span { display:inline-flex; align-items:center; gap:0.3125rem; padding:0.375rem 0.625rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface); color:var(--ink); font-size:0.6875rem; font-weight:650; }
.mock-toggle>.is-current { border-color:var(--accent); background:var(--surface-raised); box-shadow:inset 0 -2px var(--accent); color:var(--ink); }
.mock-chips>span { border-radius:var(--r-data); }
.mock-chips>.is-current { background:var(--selected-bg); color:var(--ink); border-color:var(--accent); }
.mock-chips b { padding:0 0.3125rem; border-radius:var(--r-data); background:var(--surface); color:var(--ink); font-size:0.625rem; }
.mock-chips>.is-current b { background:none; color:inherit; }
.mock-rows+.mock-chips { margin:0.75rem 0 0; }
.mock-pick { display:grid; place-items:center; flex:0 0 1.75rem; height:1.75rem; border:1px solid var(--line); border-radius:var(--r-control); color:var(--ink); font-weight:800; }
.mock-pick.is-on { background:var(--good-bg); border-color:var(--good); color:var(--good); }
.mock-star { flex:0 0 auto; color:var(--muted); font-size:0.875rem; }
.mock-star.is-on { color:var(--thin); }
.mock-col { display:flex; flex-direction:column; align-items:center; gap:0.0625rem; flex:0 0 5.25rem; }
.mock-col b { font-size:0.875rem; white-space:nowrap; }
.mock-result { flex:0 0 auto; padding:0.25rem 0.5rem; border-radius:var(--r-data); font-size:0.6875rem; font-weight:700; }
.is-won .mock-result { background:var(--good-bg); color:var(--good); }
.is-lost .mock-result { background:var(--bad-bg); color:var(--bad); }
.is-won strong { color:var(--good); }
.is-lost strong { color:var(--bad); }
.mock-bet strong { flex:0 0 3.5rem; text-align:right; font-size:0.8125rem; }
@media(max-width:44em) {
  .mock-columns,.mock-checklist { grid-template-columns:1fr; }
  .mock-columns>div { min-width:0; }
  .mock-row { gap:0.4375rem; padding:0.4375rem 0.5rem; }
  .mock-score { min-width:1.625rem; padding:0.125rem 0.1875rem; }
  .mock-bars>div { grid-template-columns:6.5rem minmax(0,1fr) auto; }
  .mock-bet { flex-wrap:wrap; }
  .mock-bet .mock-col { flex-basis:3.5rem; }
  .mock-game { gap:0.375rem; }
}

/* Share step: a mock card beside the four steps to make one. */
.tour-share { display:grid; grid-template-columns:minmax(0,25rem) minmax(11rem,1fr); gap:0.875rem; align-items:start; margin-top:0.625rem; }
.tour-share-canvas { display:block; width:100%; height:auto; aspect-ratio:1; border-radius:var(--r-control); box-shadow:none; }
.tour-share-steps { display:grid; gap:0.5rem; }
.tour-share-steps>span { display:flex; flex-direction:column; gap:0.25rem; padding:0.625rem 0.75rem; border:1px solid var(--line); border-radius:var(--r-control); color:var(--muted); font-size:0.6875rem; line-height:1.4; }
.tour-share-steps b { color:var(--ink); font-size:0.8125rem; }
/* Too narrow for the card beside a readable steps column (768: the side nav stays, so
   the content is about 30rem): stack the card over the steps. The media rule is for
   browsers without container queries. */
@media(max-width:44em) { .tour-share { grid-template-columns:1fr; } }
@container guide-content (max-width:40rem) {
  .tour-share { grid-template-columns:1fr; }
  .tour-share-canvas { max-width:25rem; margin-inline:auto; }
  .tour-share-steps { grid-template-columns:repeat(auto-fit, minmax(min(10rem, 100%), 1fr)); }
}

@media(max-width:82.5em) { .guide-open-label { display:none; }.app-topbar>#userGuideButton { width:2.5rem; padding:0; } }
@media(max-width:66em) {
  .app-topbar>.guide-open { grid-column:3; grid-row:2; justify-self:end; }
  .app-topbar>.notebook-tabs { grid-column:1 / 3; }
}
@media(max-width:44em) {
  #userGuideDialog { width:calc(100% - min(1rem,18px)); max-height:calc(100dvh - min(1rem,18px)); border-radius:var(--r-card); box-shadow:none; }
  .guide-heading { padding:0.5rem 0.75rem; }.guide-brand { font-size:0.6875rem; }.guide-brand>span { font-size:0.6875rem; letter-spacing:0; margin-left:2px; line-height:1.25; }
  .guide-layout { display:flex; flex-direction:column; }
  .guide-steps { flex:0 0 auto; flex-direction:row; gap:0.3125rem; overflow-x:auto; padding:0.5625rem 0.75rem; border-right:0; border-bottom:1px solid var(--line); scrollbar-width:thin; }
  .guide-steps button { flex:0 0 auto; gap:0.375rem; padding:0.4375rem 0.5rem; min-height:2.75rem; font-size:0.75rem; }
  .guide-steps button>span { flex-basis:1.375rem; height:1.375rem; font-size:0.75rem; }
  #guideExample { font-size:0.75rem; letter-spacing:1px; }
  .guide-content { padding:1.25rem 1rem; }
  #guideTitle { font-size:1.4375rem; }#guideDescription { font-size:0.8125rem; }
  .guide-illustration { padding:0.6875rem; margin:1.0625rem 0; }
  .tour-path { gap:0.375rem; font-size:0.625rem; }
  .tour-matchup>div { font-size:0.875rem; gap:0.4375rem; }.tour-team { gap:0.3125rem; }.tour-team img { width:1.375rem; height:1.375rem; }
  .tour-game-focus { grid-template-columns:1fr; gap:0.875rem; }.tour-game-focus>div:first-child { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0.5rem; }.tour-game-focus .tour-person b { font-size:0.6875rem; }.tour-game-focus .tour-face { width:2.25rem; height:2.5rem; flex-basis:2.25rem; }.tour-game-focus .tour-main-price { flex:0 0 auto; margin-top:0; }.tour-game-focus .tour-main-price .tour-price { min-width:0; }
  .tour-recent { padding:0.625rem 0 0; border-left:0; border-top:1px solid var(--line); }.tour-recent>div { grid-template-columns:1fr auto auto; }.tour-recent>div>small { grid-column:auto; }
  .tour-research-weeks { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0.4375rem; }.tour-evidence-card { padding:0.5rem; gap:0.5rem; }.tour-evidence-card .tour-person { flex-wrap:wrap; }.tour-evidence-card .tour-person b { font-size:0.75rem; }.tour-next { grid-column:1 / -1; display:grid; grid-template-columns:1fr auto; }.tour-next>small { grid-column:1 / -1; }.tour-next .tour-person { flex-wrap:nowrap; }.tour-next-line { margin:0; }.tour-evidence-values { gap:0.1875rem; }.tour-evidence-values>span { padding:0.3125rem; }
  .tour-position-summary { gap:0.25rem; }.tour-position-summary>span { padding:0.375rem; }.tour-position-summary b { font-size:1.125rem; }
  #guideVisual .tour-comparison { font-size:0.625rem; }.tour-comparison th,.tour-comparison td { padding:0.5rem 0.1875rem; }.tour-comparison .tour-face { width:1.75rem; height:2.125rem; flex-basis:1.75rem; }.tour-comparison .tour-person b { font-size:0.625rem; }.tour-comparison td>.tour-over { padding:0.375rem; }
  .tour-price-strip { gap:0.3125rem; }.tour-price { min-width:0; padding:0.625rem 0.3125rem; }.tour-main-price { padding:0.25rem; }.tour-main-price .tour-price { min-width:4rem; }
  .tour-tracker { gap:0.4375rem; }.tour-tracker b { font-size:0.8125rem; }
  #guidePoints { font-size:0.75rem; gap:0.625rem; }#guideNote { padding:0.625rem 0.75rem; font-size:0.6875rem; }
  .guide-footer { flex-wrap:wrap; padding:0.625rem 0.75rem; gap:0.625rem; }
  .guide-progress { margin-right:0; margin-left:auto; }.guide-progress progress { width:5rem; }
  .guide-actions { width:100%; }.guide-actions .pd-button { flex:1; min-height:2.75rem; }
}
/* First visit on a shared link: a small prompt instead of the full-screen tour. It sits at
   the top of the page, in the flow, so it never covers the page it was opened on (a fixed
   prompt sat on the Player page's chart and pick buttons). */
.guide-offer { display:flex; align-items:center; flex-wrap:wrap; gap:0.5rem 0.75rem; margin:0 0 1rem; padding:0.5rem 0.5rem 0.5rem 1rem; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface-raised); color:var(--ink); box-shadow:none; font-size:0.875rem; line-height:1.4; }
.guide-offer>span { flex:1 1 16rem; min-width:0; color:var(--muted); }
.guide-offer>span b { color:var(--ink); }
.guide-offer button { min-height:2.75rem; font:inherit; font-weight:800; cursor:pointer; border-radius:var(--r-control); }
.guide-offer-open { padding:0 1rem; border:1px solid var(--line); background:var(--accent); color:var(--accent-ink); box-shadow:none; white-space:nowrap; }
.guide-offer-close { flex:0 0 2.75rem; padding:0; border:0; background:transparent; color:var(--muted); font-size:1.375rem; line-height:1; }
.guide-offer button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* Phones: the sentence on its own line, the button and the × under it. */
@media(max-width:30em) { .guide-offer { padding:0.625rem 0.5rem 0.5rem 0.75rem; }.guide-offer>span { flex-basis:100%; }.guide-offer-open { flex:1 1 0; min-width:0; padding:0.375rem 0.75rem; white-space:normal; } }
@media(prefers-reduced-motion:no-preference) { .guide-offer { animation:guide-appear .18s ease-out; } }
@media(prefers-reduced-motion:no-preference) { #userGuideDialog[open] { animation:guide-appear .18s ease-out; } @keyframes guide-appear { from { opacity:0; transform:translateY(0.5rem); } to { opacity:1; transform:translateY(0); } } }
/* A 320 phone at 100% text (UI-443): the card is about 19.6em wide (24em at 390). Four examples
   ran past their boxes: the Props row's Form count and chart sat beside the price in a 70px
   column, "+17.1%" and "Pending" were wider than their columns, and the alternate prices were
   squeezed to 22px. The Form count and the price take a line each, the totals and the tracker
   get a little more room, and the main price takes the first line with the alternates under it.
   The large-text block below still has the last word on a narrower card. */
@container guide-card (max-width:22em) {
  /* Both rows' columns together: a compact row that kept its fixed price column pushed the Play
     Score past the card's edge at 320 (UI-757). */
  .tour-ar-row,.tour-ar-row.is-compact { grid-template-columns:2.25rem minmax(0,1fr) auto auto; }
  /* The chart takes its own line; the price and the score share the next. */
  .tour-ar-row { grid-template-areas:"face who who why" "form form form form" "pick pick pick score" "ev ev ev ev"; }
  .tour-ar-row.is-compact { grid-template-areas:"face who who why" "pick pick pick score"; }
  /* One name size for every Props row on a card this narrow (UI-760): the name line is about 100px
     beside Why, and "FREIERMUTH" is about 120px at the page's 1.5rem, so 1.125rem keeps it whole.
     The large-text block below used the same size. */
  .tour-ar-name>b { font-size:1.125rem; }
  .tour-position-summary>span { padding:0.375rem 0.25rem; }
  .tour-position-summary b { font-size:1rem; }
  .tour-tracker { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:0.875rem; }
  .tour-price-strip { flex-wrap:wrap; }
  .tour-price-strip>.tour-main-price { order:-1; flex:1 1 100%; }
  .tour-price-strip>.tour-main-price .tour-price { flex:1 1 0; }
  .tour-price-strip>.tour-price { flex:1 1 0; }
}
/* Large text on a phone (UI-441): with the browser's 200% setting a 320-390 phone leaves the
   card under 14em wide (at 100% text it is 17em or more, so nothing here applies). The header,
   step list and footer took most of the height and left the step a sliver: the step list and
   the step scroll together, the header and footer shrink to their content, and the examples
   stack so no name or price is pushed past the card. */
@container guide-card (max-width:14em) {
  .guide-heading { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0.375rem; padding:0.25rem 0.25rem 0.25rem 0.5rem; }
  /* "daily huddle" may wrap between its words; the guide name takes its own line. */
  .guide-brand { flex-wrap:wrap; gap:0 0.375rem; white-space:normal; line-height:1.2; }
  .guide-brand>img { width:1.25em; height:1.25em; }
  .guide-brand>span { flex-basis:100%; margin-left:0; }
  .guide-close { width:max(44px,1.5em); height:max(44px,1.5em); font-size:1rem; }
  #userGuideDialog .guide-layout { flex:1 1 0; overflow-y:auto; overscroll-behavior:contain; }
  .guide-steps { overflow-y:hidden; padding:0.375rem 0.5rem; }
  .guide-steps button { min-height:max(44px,1.75em); padding:0.25em 0.4em; }
  .guide-content { flex:0 0 auto; overflow:visible; padding:0.75rem 0.5rem; }
  #guideTitle { font-size:1.25rem; overflow-wrap:break-word; }
  .guide-illustration { padding:0.5rem; }
  /* Skip and the step count share a line, Back and Next the next. */
  .guide-footer { gap:0 0.25rem; padding:0.125rem 0.5rem 0.5rem; }
  .guide-skip { min-height:max(44px,1.75em); margin-left:0; padding:0; }
  .guide-progress { flex:1 1 auto; align-items:flex-end; gap:0.25rem; white-space:nowrap; }
  .guide-progress progress { width:min(100%,5em); }
  /* "Start exploring" takes its own line rather than squeezing Back. */
  .guide-actions { flex-wrap:wrap; }
  .guide-actions .pd-button { flex:1 1 auto; min-width:0; min-height:max(44px,1.75em); padding:0.25em 0.5em; white-space:normal; }
  /* Examples: a name keeps the room beside its face; prices and side-by-side boxes wrap. */
  .tour-person { flex-wrap:wrap; }
  .tour-person>span:last-child { flex:1 1 5em; }
  .tour-game-focus>div:first-child,.tour-receipt,.tour-price-strip { flex-wrap:wrap; }
  .tour-game-focus .tour-main-price,.tour-main-price { width:auto; max-width:100%; }
  .tour-main-price>div { flex-wrap:wrap; justify-content:center; }
  .tour-game-focus .tour-main-price .tour-price,.tour-main-price .tour-price,.tour-price { flex:1 1 auto; min-width:0; }
  .tour-recent>div { grid-template-columns:minmax(0,1fr) auto; }
  .tour-recent>div>small { grid-column:1 / -1; }
  /* The Props row stacks: face, name, form, price, evidence, then Why and the score. */
  .tour-ar-row,.tour-ar-row.is-compact { grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"face face" "who who" "form form" "pick pick" "ev ev" "why score"; }
  .tour-ar-row,.tour-ar-row.is-compact { padding:0.5rem; }
  .tour-ar-row>.tour-ar-who { grid-area:who; }
  .tour-ar-row>.tour-ar-why { grid-area:why; justify-self:start; }
  .tour-ar-who>:is(.tour-ar-name,.tour-ar-prop) { padding-right:0; }
  /* "+1 more prop" is wider than the card here: it may shrink to the name line and wrap between
     its words, as the price does (UI-760). */
  #guideVisual .tour-more-props { flex:0 1 auto; max-width:100%; height:auto; min-height:1.625rem; padding-block:0.125rem; white-space:normal; }
  .tour-ar-when { white-space:normal; }
  #guideVisual .tour-ar-matchup .ar-mu { flex-wrap:wrap; }
  /* The price's side and odds go on two lines when they don't fit one. */
  #guideVisual .tour-ar-pick .ar-price,#guideVisual .ar-price { flex-wrap:wrap; justify-content:center; min-width:0; height:auto; min-height:2.75rem; padding-block:0.25rem; }
  .tour-ar-count { flex-wrap:wrap; white-space:normal; }
  .tour-ar-row.is-compact .tour-ar-pick { justify-self:stretch; }
  #guideVisual .tour-ar-row .ar-chart-micro { max-width:100%; }
  #guideVisual .tour-ar-who .ar-mu { max-width:100%; height:auto; white-space:normal; }
  /* A chip's figures go under its label instead of shrinking to a letter a line. */
  .tour-ar-chips .ar-sig { flex-wrap:wrap; }
  .tour-ar-chips .ar-sig-stat { min-width:auto; overflow:visible; white-space:normal; }
  .tour-props-title { flex-wrap:wrap; }
  .tour-sections,.tour-sections-five,.tour-sections-three,.tour-position-summary { grid-template-columns:1fr; }
  .tour-tracker { grid-template-columns:1fr; }
  /* The tab guides' pictures. */
  .tour-research-weeks,.mock-lines { grid-template-columns:1fr; }
  .tour-next { grid-template-columns:1fr; }
  .tour-next .tour-person { flex-wrap:wrap; }
  .tour-filter { max-width:100%; }
  .tour-select,.mock-pill { white-space:normal; }
  .tour-seg>span { white-space:normal; }
  .tour-evidence-values { grid-template-columns:1fr; }
  .mock-row { flex-wrap:wrap; }
  .mock-row>span:not([class]) { flex:1 1 6em; }
  .mock-bars>div { grid-template-columns:minmax(0,1fr) auto; }
  .mock-bars .mock-bar { grid-column:1 / -1; grid-row:2; }
  .mock-checklist li { padding-left:2rem; }
  .mock-checklist li::before { left:0.5rem; }
  /* The Game logs table keeps its columns and scrolls sideways inside the picture. */
  #guideVisual .tour-log-table { display:block; overflow-x:auto; }
}
/* Logo + code team boxes need about 8rem for the pair; in the narrowest step (a 320px phone at
   200% text) the logos give way and their slot closes, as on Today (UI-602); the codes stay. */
@container guide-content (max-width:8rem) { #guideVisual .team-box { --tb-logo-w:0px; --tb-gap:0px; } #guideVisual .team-box-logo { display:none; } }