/* greyhoundapi.com — /ai-greyhound-racing-assistant
 *
 * A full-height app, not a page: nothing scrolls but the conversation and
 * the rail. Loaded ONLY by that page, so class names like .bar, .rail and
 * .turn cannot reach anything else on the site.
 */
:root{--paper:#F7F6F2;--ink:#17201B;--mut:#5A645D;--dim:#8A938C;--line:#E3E1D8;--line2:#D3D1C6;
 --white:#fff;--green:#0E5B41;--green-lt:#3FA980;--orange:#E17A2D;
 --disp:"Barlow Condensed",sans-serif;--body:"Public Sans",system-ui,sans-serif;--mono:"IBM Plex Mono",Menlo,monospace;
 --rail:272px;--col:720px}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--white);color:var(--ink);font:400 16px/1.6 var(--body);
  -webkit-font-smoothing:antialiased;overflow:hidden}
button{font:inherit}
code{font:500 .9em var(--mono);background:#F1EFE8;border-radius:4px;padding:1px 5px}

/* ---------- app shell: header + rail + column, nothing else ---------- */
/* NOTHING may exceed the viewport width.
   A grid or flex child defaults to min-width:auto, which refuses to shrink
   below its content — one long word, one wide table or one nowrap header row
   and the whole page grows a horizontal scrollbar. The guards below are the
   cheap insurance; the alternative is hunting the culprit every time. */
html,body{max-width:100%;overflow-x:hidden}
.app{display:grid;grid-template-columns:var(--rail) 1fr;grid-template-rows:auto 1fr;
  height:100dvh;max-width:100vw;overflow:hidden}
/* The mobile rail's backdrop.
   HIDDEN AT BASE, not only inside the media query. It is a direct child of the
   .app grid, so with no desktop rule it was display:block, took the first grid
   cell, and pushed the rail into column two and main onto the next row — the
   whole layout inverted by an element that is never visible on desktop.
   A grid child with no display rule is a grid ITEM, whatever it is for. */
.railbd{display:none}

.bar{min-width:0;overflow:hidden;grid-column:1/-1;display:flex;align-items:center;gap:14px;padding:0 18px;height:56px;
  border-bottom:1px solid var(--line);background:var(--white);z-index:5}
/* The brand, matched to site.css so the app does not read as a different
   product — same face, weight and spacing, and the REAL mark (a green ellipse
   with an orange dot) rather than the plain green square this page had. */
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);
  font:600 20px/1 var(--disp);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.brand-mark{width:22px;height:14px;border:2px solid var(--green);border-radius:50% / 60%;
  position:relative;flex:none}
.brand-mark::after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;
  background:var(--orange,#E17A2D);top:-3px;right:1px}

/* "AI Assistant" as a sub-brand, not a grey suffix hanging off the wordmark. */
.bsub{font:600 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--green);white-space:nowrap}

/* Dividers. The bar ran brand, nav, meter and button together as one undivided
   row; a rule between each group says which things belong with which. */
.bdiv{width:1px;height:20px;background:var(--line2);flex:none}
.bar .sp{flex:1}
/* The rest of the site, reachable from here. An app that traps you is an app
   you leave by closing the tab. */
.bnav{display:flex;align-items:center;gap:2px;margin-left:8px}
.bnav a{color:var(--mut);text-decoration:none;font-size:14px;font-weight:500;
  padding:7px 11px;border-radius:8px;white-space:nowrap}
.bnav a:hover{color:var(--ink);background:#F4F2EC}
@media(max-width:1080px){.bnav{display:none}}
/* The meter and the button are a PAIR — same height, radius and padding, so
   the top right reads as one control group rather than two unrelated things. */
.pill{display:inline-flex;align-items:center;gap:9px;height:36px;border:1px solid var(--line2);
  border-radius:9px;padding:0 13px;font-size:13px;color:var(--mut);white-space:nowrap}
.pill b{color:var(--ink);font-weight:600}
.pill .bar-b{width:46px;height:5px;border-radius:99px;background:#EDEBE3;overflow:hidden}
.pill .bar-b i{display:block;height:100%;background:var(--green-lt)}
.signin{display:inline-flex;align-items:center;height:36px;background:var(--green);color:#fff;
  border:1px solid var(--green);border-radius:9px;padding:0 15px;font-weight:600;font-size:14px;
  cursor:pointer;text-decoration:none;white-space:nowrap}
.signin:hover{background:#0A4231;border-color:#0A4231}
.burger{display:none;background:none;border:1px solid var(--line2);border-radius:8px;padding:6px 9px;cursor:pointer}

/* ---------- left rail: questions ---------- */
.rail{border-right:1px solid var(--line);background:#F4F2EC;overflow-y:auto;padding:16px 14px 26px}
/* ---- usage panel ----
   Hangs off the meter. The meter was a dead chip: a number with no way to learn
   when it refills, which on a rolling week is the only question that matters. */
/* The meter keeps the look it had before it became a button — a quiet chip with
   the figure in ink. Making it clickable should not have made it look muted. */
.pill{cursor:pointer;color:var(--mut)}
.pill b{color:var(--ink)}
.pill:hover{border-color:var(--green)}
.pill:hover b{color:var(--green)}
.pill[aria-expanded="true"]{border-color:var(--green);background:#F4F9F6}
.pill[aria-expanded="true"] b{color:var(--green)}

/* Hangs off the METER, not the window. */
.meterwrap{position:relative;display:inline-flex}
.usage{position:absolute;top:calc(100% + 9px);right:0;z-index:30;width:min(300px,calc(100vw - 24px));
  background:var(--white);border:1px solid var(--line2);border-radius:14px;padding:16px 18px;
  box-shadow:0 18px 44px -20px rgba(15,32,25,.45)}
.us-h{font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.us-big{font:700 26px/1 var(--disp);margin:9px 0 0;color:var(--ink)}
.us-big b{color:var(--green)}
.us-bar{height:6px;border-radius:99px;background:#EDEBE3;overflow:hidden;margin:11px 0 14px}
.us-bar i{display:block;height:100%;background:var(--green-lt);border-radius:99px}
.us-kv{margin:0;font-size:13.5px}
.us-kv dt{font:600 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--dim);margin-top:9px}
.us-kv dt:first-child{margin-top:0}
.us-kv dd{margin:2px 0 0;color:#3a453f}
.us-n{margin:13px 0 0;padding-top:12px;border-top:1px solid var(--line);
  font-size:12px;line-height:1.55;color:var(--mut)}
.us-cta{display:inline-block;margin-top:12px;background:var(--green);color:#fff;
  text-decoration:none;font-weight:600;font-size:13.5px;padding:8px 14px;border-radius:9px}

/* The site links inside the rail. Hidden on desktop, where the top bar carries
   them; on a phone this is the only way to reach anything else. */
.rnav{display:none}
@media(max-width:860px){
  .rnav{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 14px;padding:0 0 14px;
    border-bottom:1px solid var(--line)}
  .rnav a{flex:1 1 auto;text-align:center;text-decoration:none;background:var(--white);
    border:1px solid var(--line2);border-radius:8px;padding:8px 10px;
    font:600 13px var(--body);color:#3a453f;white-space:nowrap}
  .rnav a:hover{border-color:var(--green);color:var(--green)}
}

/* ---- rail tabs ----
   Yours and Inspiration answer different questions and were competing for one
   column. Tabs give each the full width and stop the rail scrolling forever. */
.rtabs{display:flex;gap:4px;background:#EFEDE5;border-radius:10px;padding:3px;margin-bottom:14px}
.rtab{flex:1;background:none;border:0;border-radius:8px;padding:7px 6px;cursor:pointer;
  font:600 13px var(--body);color:var(--mut);display:inline-flex;align-items:center;
  justify-content:center;gap:6px}
.rtab:hover{color:var(--ink)}
.rtab.on{background:var(--white);color:var(--green);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.rtab span{font:600 10.5px var(--mono);background:#E3E1D8;color:var(--mut);
  border-radius:999px;padding:1px 6px}
.rtab.on span{background:#E4F0E9;color:var(--green)}
.rpane{display:none}
.rpane.on{display:block}

/* ---- the portal ----
   What a blank conversation looks like. The live figures at the top are the
   engaging part: each is a real number from tonight's racing AND a question you
   can click, so the page has something going on in it before you type. */
.portal{padding:14px 0 30px}
.pt-head{text-align:center;margin-bottom:18px}
.pt-head h1{font-size:clamp(24px,3vw,32px);line-height:1.08}
.pt-head h1 span{color:var(--green)}
.pt-head p{max-width:48ch;margin:11px auto 0;color:var(--mut);font-size:15px}

.pt-live{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:7px;margin-bottom:18px}
/* Quieter than they were. Six saturated dark blocks pulled every bit of
   attention off the composer; the live figures are context, not the headline. */
.pl{background:#F1F5F2;border:1px solid #DCE6E0;border-radius:12px;padding:12px 14px;
  text-align:left;cursor:pointer;color:#3a453f;transition:border-color .15s,background .15s}
.pl:hover{border-color:var(--green);background:#EAF2ED}
.pl.wide{grid-column:span 2}
.pl-n{display:block;font:700 21px/1 var(--disp);color:var(--green);letter-spacing:-.01em}
.pl-l{display:block;margin-top:4px;font:500 11.5px var(--body);color:var(--mut);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.pt-find{margin-bottom:14px}
.pt-find input{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 14px;
  font:400 14px var(--body);color:var(--ink);background:var(--white)}
.pt-find input:focus{outline:none;border-color:var(--mut)}

.pt-cats{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.pc{background:var(--white);border:1px solid var(--line);border-radius:999px;padding:6px 12px;
  font:500 13px var(--body);color:var(--mut);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.pc:hover{color:var(--ink);border-color:var(--mut)}
.pc.on{background:var(--green);border-color:var(--green);color:#fff}
.pc span{font:600 10.5px var(--mono);opacity:.75}

.pt-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:8px}
.pq{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:10px 13px;
  text-align:left;font:400 13.5px/1.4 var(--body);color:var(--mut);cursor:pointer}
.pq:hover{border-color:var(--green);color:var(--green);background:#F6FAF8}
.pt-more{text-align:center;margin:16px 0 0}
.pt-more button{background:none;border:1px solid var(--line2);border-radius:9px;padding:9px 18px;
  font:500 13.5px var(--body);color:var(--mut);cursor:pointer}
.pt-more button:hover{color:var(--green);border-color:var(--green)}
@media(max-width:700px){.pl.wide{grid-column:span 2}.pt-list{grid-template-columns:minmax(0,1fr)}}

/* ---- follow-up chips ----
   The point of the page is that people struggle to think of the next question.
   Three offered, under the answer, in the model's own words. */
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 0}
.chip{background:var(--white);border:1px solid var(--line2);border-radius:999px;
  padding:7px 14px;font:400 13.5px var(--body);color:#3a453f;cursor:pointer;
  text-align:left;line-height:1.4}
.chip:hover{border-color:var(--green);color:var(--green);background:#F4F9F6}
.chip::before{content:"\2192";margin-right:7px;color:var(--dim);font-weight:600}
.chip:hover::before{color:var(--green)}

/* ---- failure, said kindly ---- */
.oops{border:1px solid #EBD9C4;background:#FEFAF5;border-radius:12px;padding:14px 16px}
.oops b{display:block;font-size:15px;font-weight:600;color:#8A5416}
.oops p{margin:6px 0 0;font-size:14px;line-height:1.55;color:#5A4A38}
.oops a{color:var(--green);font-weight:600}

/* Three sections, visibly separate. They were one undivided list and read as
   noise, so nobody used any of it. */
.rsec{border-top:1px solid var(--line);margin:16px 0 0;padding-top:14px}
.rsec:first-of-type{border-top:0;margin-top:0;padding-top:0}
.rsec h2{display:flex;align-items:center;gap:8px}
.shuffle{margin-left:auto;background:none;border:1px solid var(--line2);border-radius:7px;
  width:24px;height:22px;color:var(--mut);cursor:pointer;font-size:12px;line-height:1;padding:0}
.shuffle:hover{color:var(--green);border-color:var(--green)}

/* ---- "What you can ask" ----
   Each group is a small lesson: an icon, what it teaches, and the endpoints
   behind it. The rail used to be a bare list of sentences, which is a poor way
   to show somebody what an API can do. */
.rgrp{margin-bottom:4px;border:1px solid transparent;border-radius:11px;transition:border-color .15s}
.rgrp[open]{border-color:var(--line);background:var(--white);padding-bottom:6px}
.rgrp summary{display:flex;align-items:center;gap:9px;list-style:none;cursor:pointer;
  padding:9px 10px;border-radius:10px;font:600 13.5px var(--body);color:#3a453f}
.rgrp summary::-webkit-details-marker{display:none}
.rgrp summary::after{content:"";width:6px;height:6px;flex:none;
  border-right:1.5px solid var(--dim);border-bottom:1.5px solid var(--dim);
  transform:rotate(-45deg);transition:transform .16s}
.rgrp[open] summary::after{transform:rotate(45deg);border-color:var(--green)}
.rgrp summary:hover{background:var(--white);color:var(--ink)}
.rgrp[open] summary{color:var(--green)}
.rgrp .rg-t{flex:1;min-width:0}
.rgrp .rg-n{font:600 10.5px var(--mono);color:var(--dim);background:#EDEBE3;
  border-radius:999px;padding:2px 7px}
.rgrp[open] .rg-n{background:#E4F0E9;color:var(--green)}

/* A small mark per group, drawn in CSS — no icon font, no sprite. */
.rg-i{width:20px;height:20px;flex:none;border-radius:6px;background:#EDEBE3;
  position:relative;display:inline-block}
.rgrp[open] .rg-i{background:#E4F0E9}
.rg-i::after{content:"";position:absolute;inset:0;margin:auto;background:var(--mut)}
.rgrp[open] .rg-i::after{background:var(--green)}
.rg-dog::after{width:9px;height:6px;border-radius:3px 3px 1px 1px}
.rg-trap::after{width:9px;height:9px;border-radius:2px;
  clip-path:polygon(0 0,100% 0,100% 100%,50% 70%,0 100%)}
.rg-clock::after{width:10px;height:10px;border-radius:50%;
  background:none;border:2px solid var(--mut)}
.rgrp[open] .rg-clock::after{border-color:var(--green);background:none}
.rg-person::after{width:9px;height:9px;border-radius:50% 50% 3px 3px}
.rg-flag::after{width:9px;height:8px;clip-path:polygon(0 0,100% 0,100% 60%,0 60%,0 100%)}
.rg-globe::after{width:10px;height:10px;border-radius:50%;background:none;
  border:2px solid var(--mut);border-left-width:5px}
.rgrp[open] .rg-globe::after{border-color:var(--green);background:none}
.rg-dot::after{width:7px;height:7px;border-radius:50%}

.rg-why{margin:0 10px 6px;font:400 12.5px/1.5 var(--body);color:var(--mut)}
.rg-ep{margin:0 10px 9px;font:500 10.5px var(--mono);color:var(--green);
  letter-spacing:.01em;word-break:break-word;opacity:.85}
.rgrp .seed{padding-left:16px;margin-left:6px;border-left:2px solid var(--line);
  border-radius:0 8px 8px 0}
.rgrp .seed:hover{border-left-color:var(--green)}
/* A conversation, not a question: title on top, how many and when beneath. */
.asked{border-left:2px solid var(--line2);border-radius:0 9px 9px 0;color:var(--mut);padding:9px 10px}
.asked .at-t{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:#3a453f;font-size:13.5px;line-height:1.4}
.asked .at-m{display:block;margin-top:3px;font:500 11px var(--mono);color:var(--dim)}
.asked:hover{background:var(--white);border-left-color:var(--green)}
.asked:hover .at-t{color:var(--ink)}
.asked.on{border-left-color:var(--green);background:#EDF4F0}
.asked.on .at-t{color:var(--green);font-weight:600}
.rail-empty{font-size:12.5px;color:var(--dim);padding:2px 10px;line-height:1.5}
.rail h2{font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin:0 0 10px 2px}
.rail .grp{margin-bottom:18px}
.rail .grp-t{font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--mut);margin:0 0 6px 2px}
.rail h2{color:var(--green)}
.seed:hover{background:var(--white);border-color:var(--green);color:var(--green)}
/* ONE size for every clickable question in the rail. Suggested, browse and
   history were 13.5, 13 and 13px with different line heights, and a column of
   near-but-not-quite-equal text reads as sloppy even when nobody can say why. */
.seed,.asked{display:block;width:100%;text-align:left;background:transparent;
  border:1px solid transparent;border-radius:9px;padding:8px 10px;margin-bottom:1px;
  font:400 13.5px/1.5 var(--body);color:#3a453f;cursor:pointer}
.seed:hover{background:var(--white);border-color:var(--line2);color:var(--ink)}
.newq{display:flex;align-items:center;gap:8px;width:100%;background:var(--white);border:1px solid var(--line2);
  border-radius:9px;padding:9px 12px;font-weight:600;font-size:14px;color:var(--ink);cursor:pointer;margin-bottom:18px}
.newq:hover{border-color:var(--green);color:var(--green)}

/* ---------- the column ---------- */
.main{position:relative;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.scroll{flex:1;overflow-y:auto;overflow-x:hidden;min-width:0;padding:26px 20px 8px}
.col{max-width:var(--col);margin:0 auto;min-width:0}

/* empty state — the whole point of the page, centred */
.empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 20px}
.empty h1{font-size:clamp(30px,4vw,40px);line-height:1.05}
.empty h1 span{color:var(--green)}
.empty p{max-width:46ch;color:var(--mut);margin:12px 0 0;font-size:15.5px}

/* turns */
.turn{margin-bottom:26px;min-width:0;max-width:100%}
.turn.you{display:flex;justify-content:flex-end}
.turn.you .q{background:#F1EFE8;border-radius:14px 14px 4px 14px;padding:11px 15px;
  font-size:15.5px;max-width:80%}
.a{font-size:15.5px;line-height:1.7;min-width:0;overflow-wrap:anywhere}
.a p{margin:0 0 11px}
.a p:last-child{margin-bottom:0}
.a table{border-collapse:collapse;width:100%;margin:13px 0;font-size:14px}
.a th,.a td{text-align:left;padding:7px 11px;border-top:1px solid var(--line)}
.a thead th{background:#F7F6F2;border-top:0;font:600 11px var(--mono);text-transform:uppercase;
  letter-spacing:.05em;color:var(--mut)}
.meta{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.meta .ts{font:500 11.5px var(--mono);color:var(--dim)}
.meta .sp{flex:1}
.fb{display:flex;align-items:center;gap:6px}
.fb button{background:none;border:1px solid var(--line);border-radius:7px;width:30px;height:28px;
  color:var(--dim);cursor:pointer;line-height:1}
.fb button:hover{border-color:var(--green);color:var(--green)}
.fb button.on{background:var(--green);border-color:var(--green);color:#fff}

/* progress — real steps, not a spinner */
.prog{border-left:2px solid var(--line2);padding-left:15px}
.prog-h{display:flex;align-items:center;gap:9px;font-size:14.5px;color:var(--mut)}
.prog-h .dot{width:7px;height:7px;border-radius:50%;background:var(--green-lt);animation:pl 1.1s infinite}
@keyframes pl{0%,100%{opacity:.25}50%{opacity:1}}
.prog-h .el{margin-left:auto;font:500 12px var(--mono);color:var(--dim)}
.steps{list-style:none;margin:10px 0 0;padding:0}
.steps li{display:flex;gap:11px;align-items:baseline;padding:3px 0;font-size:13.5px;color:var(--mut)}
.steps li.now{color:var(--ink)}
.steps li .t{font:500 11px var(--mono);color:var(--dim);min-width:50px}

/* composer, pinned */
/* THE COMPOSER IS THE POINT OF THE PAGE.
   The portal below got rich enough — dark tiles, category pills, dozens of
   cards — that the box it is supposed to be feeding disappeared under it. The
   dock now sits on a lifted surface with a shadow, so it reads as the thing you
   act on rather than a footer. */
.dock{border-top:1px solid var(--line);background:var(--white);padding:16px 20px 18px;
  box-shadow:0 -10px 24px -18px rgba(15,32,25,.5);position:relative;z-index:3}
.dock .col{position:relative}
.box{display:flex;align-items:flex-end;gap:9px;border:1.5px solid var(--line2);border-radius:15px;
  padding:8px 8px 8px 17px;background:var(--white);transition:border-color .15s,box-shadow .15s}
.box:hover{border-color:var(--mut)}
.box:focus-within{border-color:var(--green);box-shadow:0 0 0 4px rgba(14,91,65,.09)}
.box textarea{flex:1;border:0;outline:none;resize:none;min-height:30px;max-height:150px;
  padding:10px 0;font:400 16px/1.5 var(--body);color:var(--ink);background:transparent}
.box textarea::placeholder{color:var(--mut)}
.box button{background:var(--green);border:0;color:#fff;border-radius:11px;width:42px;height:42px;
  cursor:pointer;flex:none;font-size:18px;line-height:1;transition:background .15s}
.box button:hover:not(:disabled){background:#0A4231}
.box button:disabled{background:#C8D0CA;cursor:not-allowed}
.dock-n{margin:9px 0 0;font-size:12px;color:var(--dim);text-align:center}
.dock-n a{color:var(--mut)}

/* out of questions */
/* [hidden] LAST and explicit.
   .gate sets display:flex, and a class beats the hidden ATTRIBUTE — so the
   "that is today's allowance" panel rendered permanently, under a meter that
   said 1 of 100. Same trap applies to .box when the allowance is spent. */
/* Compact. It sits where the composer was, so a tall amber panel reads as an
   error the page has thrown rather than a note about tomorrow. */
.gate{border:1px solid var(--line2);background:#FBFAF7;border-radius:12px;padding:10px 12px 10px 16px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap}
[hidden]{display:none!important}
.gate b{font-size:14.5px;font-weight:600}
.gate p{display:inline;margin:0;font-size:14px;color:var(--mut)}
.gate .sp{flex:1}
.gate a{display:inline-flex;align-items:center;height:34px;background:var(--green);color:#fff;
  text-decoration:none;font-weight:600;font-size:13.5px;padding:0 14px;border-radius:9px;white-space:nowrap}


/* ---------- signed-out: the column runs a demo ---------- */
.demo-h{text-align:center;padding:8px 0 22px}
.demo-h h1{font-size:clamp(27px,3.4vw,36px);line-height:1.06}
.demo-h h1 span{color:var(--green)}
.demo-h p{max-width:48ch;margin:11px auto 0;color:var(--mut);font-size:15.5px}
.demo-tag{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line2);
  border-radius:999px;padding:5px 12px;font:500 11.5px var(--mono);letter-spacing:.05em;
  text-transform:uppercase;color:var(--mut);margin-bottom:14px}
.demo-tag i{width:6px;height:6px;border-radius:50%;background:var(--green-lt);animation:pl 1.1s infinite}

.stage{min-height:330px}

/* ---- signed-out: a FIXED stage, nothing scrolls ----
   The demo used to append each exchange and scroll to it, which grew the page
   and jerked under anyone who touched the wheel. Now the viewport is fixed and
   exchanges cross-fade in place: one visible at a time, height reserved up
   front so the layout never shifts as it plays. */
body.demoing .main .scroll{overflow:hidden}
body.demoing .dock{border-top:1px solid var(--line)}
.dstage{position:relative;height:var(--dh,340px);overflow:hidden}
.dslide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease;
  pointer-events:none}
.dslide.in{opacity:1;transform:none;pointer-events:auto}
.dslide.out{opacity:0;transform:translateY(-8px)}
.dslide .turn:last-child{margin-bottom:0}
/* The join panel occupies the same box, so the swap is a fade rather than a
   layout change. */
/* FITS, never scrolls. It had overflow:auto, so on a short screen the sign-up —
   the one thing this page is trying to get you to read — grew its own scrollbar
   inside a fixed box. Everything below scales with the viewport instead, so it
   compresses rather than overflowing. */
.dstage .join{position:absolute;inset:0;margin:0;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(12px,2.2vh,26px) clamp(14px,2vw,26px)}
.dslide .q .qt{white-space:pre-wrap}
.dprog{display:flex;gap:6px;justify-content:center;margin-top:14px}
.dprog i{width:22px;height:3px;border-radius:99px;background:var(--line2);transition:background .3s}
.dprog i.on{background:var(--green)}
.caret{display:inline-block;width:2px;height:1.05em;background:var(--green);vertical-align:-2px;
  margin-left:2px;animation:bl .9s step-end infinite}
@keyframes bl{50%{opacity:0}}

/* the sign-up that fades in after the demo */
.join{opacity:0;transform:translateY(10px);transition:opacity .55s ease,transform .55s ease;
  border:1px solid var(--line);border-radius:16px;background:#FBFAF7;padding:26px 26px 24px;margin-top:6px}
.join.in{opacity:1;transform:none}
.join h2{font-size:clamp(20px,2.6vh,26px);text-align:center;line-height:1.1}
.join .sub{text-align:center;color:var(--mut);font-size:clamp(13px,1.7vh,15px);
  margin:clamp(6px,1vh,9px) auto clamp(11px,2vh,20px);max-width:44ch;line-height:1.5}
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(6px,1vw,10px);margin-bottom:clamp(11px,2vh,20px)}
.tier{background:var(--white);border:1px solid var(--line);border-radius:12px;
  padding:clamp(9px,1.6vh,15px) clamp(8px,1vw,16px);text-align:center}
.tier.on{border-color:var(--green);box-shadow:0 0 0 3px rgba(14,91,65,.07)}
.tier .n{font:700 clamp(21px,3vh,30px)/1 var(--disp);color:var(--ink)}
.tier .u{font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-top:5px}
.tier .p{font-size:13.5px;color:var(--mut);margin-top:8px}
.tier.on .n{color:var(--green)}
.join-cta{display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1.2vh,10px)}
.gbtn{display:inline-flex;align-items:center;gap:10px;background:var(--green);color:#fff;white-space:nowrap;
  text-decoration:none;font-weight:600;font-size:15.5px;padding:13px 24px;border-radius:11px}
.gbtn:hover{background:#0A4231}
.join-n{font-size:12.5px;color:var(--dim);text-align:center;margin:0}
/* Under about 620px of viewport there is not room for everything. Drop the
   supporting lines rather than shrink the heading and the button, which are the
   two things that have to stay readable. */
@media(max-height:620px){
  .dstage .join .sub{display:none}
  .dstage .join .tier .p{font-size:11px}
}
@media(max-height:520px){
  .dstage .join .join-n{display:none}
  .dstage .join h2{font-size:19px}
}

/* the dock, when signed out */
.locked{display:flex;align-items:center;gap:13px;border:1px solid var(--line2);border-radius:14px;
  padding:11px 11px 11px 16px;background:#FBFAF7}
.locked .t{flex:1;min-width:0;font-size:14.5px;color:var(--mut)}
.locked a{background:var(--green);color:#fff;text-decoration:none;font-weight:600;font-size:14px;
  padding:10px 17px;border-radius:10px;white-space:nowrap}

/* rail seeds prompt sign-in rather than pretending to work */
.rail.locked-rail .seed{cursor:default}
.rail.locked-rail .seed:hover{background:var(--white);border-color:var(--line2);color:var(--ink)}

/* ===========================================================================
 * MOBILE
 *
 * The desktop layout is a two-column app. On a phone it has to become one
 * column with the rail as a sheet, and every fixed-width assumption has to go —
 * a 360px screen is less than half the narrowest column this was designed for.
 * ======================================================================== */
@media(max-width:860px){
  .app{grid-template-columns:minmax(0,1fr)}

  /* --- bar: brand, burger, and one action. Nothing else fits. --- */
  .bar{gap:9px;padding:0 12px}
  /* On a phone the wordmark goes and the SUB-brand stays: you already know
     which site you are on, and "AI Assistant" is what tells you where you are
     within it. The mark keeps the identity. */
  .brand{font-size:0;gap:0}
  .bsub{font-size:11.5px;letter-spacing:.08em}
  .bdiv{display:none}
  .bdiv:first-of-type{display:block;height:18px}
  .burger{display:block}
  .bnav{display:none}
  /* Shown, not hidden. The allowance was invisible on the device most likely to
     run into it — just narrowed to the figure, with the detail behind a tap. */
  .pill{display:inline-flex;padding:0 10px;gap:0}
  .pill-w,.pill .bar-b{display:none}
  /* On a phone the meter is near the right edge and the panel is nearly as wide
     as the screen, so anchoring it to the meter would push it off. Pin it. */
  .usage{position:fixed;top:50px;right:8px;left:8px;width:auto}
  .signin{height:34px;padding:0 12px;font-size:13.5px}

  /* --- rail as a sheet, with a backdrop that can be tapped to close --- */
  .rail{display:none;position:fixed;left:0;top:56px;bottom:0;width:min(320px,88vw);z-index:22;
    box-shadow:0 12px 40px rgba(0,0,0,.22);padding-bottom:40px}
  .rail.open{display:block}
  .railbd{display:none;position:fixed;inset:56px 0 0;background:rgba(10,20,16,.34);z-index:21}
  .railbd.on{display:block}

  /* --- the column --- */
  .scroll{padding:16px 14px 4px}
  .turn{margin-bottom:20px}
  .turn.you .q{max-width:88%;font-size:15px}
  .a{font-size:15px}

  /* An answer table is three or four columns of times and prices. Scroll the
     TABLE, never the page — the same fault the docs had. */
  .a table{display:block;width:100%;max-width:100%;overflow-x:auto;
    -webkit-overflow-scrolling:touch}
  .a thead,.a tbody{display:table;width:100%;min-width:420px}
  .a th,.a td{padding:6px 9px;font-size:13.5px}

  /* --- portal --- */
  .portal{padding:6px 0 22px}
  .pt-head{margin-bottom:18px}
  .pt-head p{font-size:14.5px}
  .pt-live{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:18px}
  .pl{padding:13px 14px}
  .pl.wide{grid-column:span 2}
  .pl-n{font-size:23px}
  .pt-cats{gap:6px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;
    scrollbar-width:none;-ms-overflow-style:none}
  .pt-cats::-webkit-scrollbar{display:none}
  .pc{flex:none}
  .pt-list{grid-template-columns:minmax(0,1fr);gap:7px}
  .pq{padding:11px 13px;font-size:13.5px}

  /* --- chips wrap rather than squeeze --- */
  .chip{font-size:13px;padding:6px 12px}

  /* --- composer, clear of the home bar on iOS --- */
  .dock{padding:10px 12px calc(12px + env(safe-area-inset-bottom))}
  .box{padding:6px 6px 6px 13px}
  .box textarea{font-size:16px}   /* under 16px and iOS zooms the whole page in */
  .box button{width:36px;height:36px}
  .dock-n{font-size:11.5px;line-height:1.5}
  .gate{padding:10px 10px 10px 13px}
  .gate a{height:32px;font-size:13px}
  .locked{flex-wrap:wrap;gap:9px}
  .locked .t{flex:1 1 100%;font-size:13.5px}

  /* --- signed-out demo --- */
  .demo-h h1{font-size:26px}
  .demo-h p{font-size:14.5px}
  .join{padding:18px 14px}
  .join h2{font-size:22px}
  .tiers{grid-template-columns:repeat(3,1fr);gap:6px}
  .tier{padding:11px 8px}
  .tier .n{font-size:24px}
  .tier .p{font-size:11.5px}
  .stage{min-height:0}
  /* Shorter stage on a phone, and the tallest table is what sets it. */
  .dstage{height:var(--dh,300px)}
  .dslide .a table{font-size:12.5px}
}

/* Very narrow: the live tiles stop being a grid at all. */
@media(max-width:400px){
  .pt-live{grid-template-columns:minmax(0,1fr)}
  .pl.wide{grid-column:span 1}
  .pt-head h1{font-size:24px}
}

/* Landscape on a phone: almost no height, so the header and portal padding
   have to give way or the composer is off screen. */
@media(max-height:520px) and (orientation:landscape){
  .bar{height:48px}
  .rail,.railbd{top:48px}
  .portal{padding-top:0}
  .pt-head{margin-bottom:12px}
  .pt-live{margin-bottom:12px}
}