/* Elada account pages: sign up, sign in, onboarding and the dashboard. Every value comes from the Elada brand book
   (tokens.json): Stone (light) and Abyss (dark). Same tokens and buttons as the homepage. */
@font-face{font-family:"Rethink Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/rethink-sans-latin.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/geist-mono-latin.woff2) format("woff2")}
:root{
  --surface:#eceae5; --surface-raised:#f7f6f3; --line:#d6d3cc;
  --ink:#061224; --ink-muted:#4f5866; --mark:#a3a6ac;
  --depth:#367e84; --on-depth:#ffffff; --depth-ink:#2a6469; --foam:#def6f6;
  --signal:#ff6e42;
  --shadow-float:0 8px 24px -8px #0612242e;
  --focus-ring:0 0 0 2px #eceae5, 0 0 0 4px #2a6469;
  --logo-ink:#061224; --logo-depth:#367e84;
  --sans:"Rethink Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,Menlo,monospace;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px; --space-12:48px; --space-20:80px;
  --radius-sm:4px; --radius-md:8px; --radius-full:9999px;
  /* Google's own sign-in button colours (its branding rules); light set */
  --g-fill:#ffffff; --g-line:#747775; --g-ink:#1f1f1f;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --surface:#061224; --surface-raised:#0e1d31; --line:#1f3047;
    --ink:#eceeea; --ink-muted:#a3acb8; --mark:#4a4f57;
    --depth:#5fb0b6; --on-depth:#061224; --depth-ink:#7cc6cb; --foam:#0f2a2e;
    --signal:#ff7a52;
    --shadow-float:0 8px 24px -8px #000000b3;
    --focus-ring:0 0 0 2px #061224, 0 0 0 4px #7cc6cb;
    --logo-ink:#ffffff; --logo-depth:#ffffff;
    --g-fill:#131314; --g-line:#8e918f; --g-ink:#e3e3e3;
    color-scheme:dark;
  }
  /* the sign-in panel steps up one level so the split stays visible on the dark page */
  :root:not([data-theme="light"]) .auth-side{background:var(--surface-raised)}
  :root:not([data-theme="light"]) .auth-side .spec{background:var(--surface)}
  :root:not([data-theme="light"]) .auth-side .spec-q{background:var(--surface-raised)}
  /* logo tiles sit on the dark ink token with a hairline, not on pure white */
  :root:not([data-theme="light"]) .plate,:root:not([data-theme="light"]) .who img{background:var(--ink);outline:1px solid var(--line);outline-offset:-1px}
}
/* the Abyss panel beside the sign-in form: its own tokens, whatever the page's theme */
.abyss{
  --surface:#061224; --surface-raised:#0e1d31; --line:#1f3047;
  --ink:#eceeea; --ink-muted:#a3acb8;
  --depth:#5fb0b6; --on-depth:#061224; --depth-ink:#7cc6cb; --foam:#0f2a2e;
  --logo-ink:#ffffff; --logo-depth:#ffffff;
  background:var(--surface);color:var(--ink);
}

/* ---------------------------------------------------------------- Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--surface);color:var(--ink);font:400 16px/24px var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,p,ol,ul,dl,dd,figure,fieldset{margin:0;padding:0;border:0}
ol,ul{list-style:none}
a{color:var(--depth-ink);text-underline-offset:3px}
button,input,select,textarea{font:inherit;color:inherit}
em,i,cite,address,var,dfn{font-style:normal}  /* no italic anywhere: emphasis comes from weight */
code,kbd,samp,pre{font-family:var(--mono)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid transparent;box-shadow:var(--focus-ring)}
[hidden]{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--space-4);top:-48px;z-index:40;padding:var(--space-2) var(--space-4);background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-sm)}
.skip:focus{top:var(--space-2)}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.l-ink{fill:var(--logo-ink)}
.l-depth{fill:var(--logo-depth)}
.ic{display:block;width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ic-20{width:20px;height:20px}
.logo{display:block;width:116px;line-height:0;margin-left:-9px;padding:3px 0}
.logo svg{display:block;width:100%;height:auto}

/* type: brand styles only, plus the two named small sizes (small 14/20, h3 18/28) */
.h1{font-size:40px;line-height:44px;font-weight:600;letter-spacing:-.025em;text-wrap:balance}
.h2{font-size:28px;line-height:32px;font-weight:600;letter-spacing:-.02em;text-wrap:balance}
.h3{font-size:18px;line-height:28px;font-weight:600}
.lead{font-size:18px;line-height:28px}
.small{font-size:14px;line-height:20px}
.label{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.data{font-family:var(--mono);font-size:14px;line-height:20px;font-weight:400;font-variant-numeric:tabular-nums}
.muted{color:var(--ink-muted)}
.nw{white-space:nowrap}

/* buttons: fully round, primary at most once per view */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:44px;padding:0 var(--space-6);border:1px solid var(--line);border-radius:var(--radius-full);
  background:var(--surface-raised);color:var(--ink);font:600 16px/1 var(--sans);text-decoration:none;white-space:nowrap;cursor:pointer;transition:border-color .2s ease}
.btn:hover{border-color:var(--ink-muted)}
.btn-primary{background:var(--depth);border-color:var(--depth);color:var(--on-depth)}
.btn-primary:hover{border-color:var(--depth-ink)}
.btn-lg{height:48px;padding:0 var(--space-8)}
.btn-sm{height:40px;padding:0 var(--space-4);font-size:14px}
.btn-wide{width:100%}
.btn[disabled]{opacity:.6;cursor:default}
.btn-google{background:var(--g-fill);border-color:var(--g-line);color:var(--g-ink)}
.btn-google:hover{border-color:var(--g-ink)}
.tlink{display:inline-flex;align-items:center;gap:var(--space-1);min-height:44px;padding:0;border:0;background:none;color:var(--depth-ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.tlink:hover{color:var(--ink)}
.tlink[disabled]{color:var(--ink-muted);text-decoration:none;cursor:default}

/* forms: field edges in ink-muted so they meet 3:1 against the page */
.field{display:block}
.field>span,.field-l{display:block;margin-bottom:var(--space-2);font-size:14px;line-height:20px;font-weight:600}
.input{display:block;width:100%;height:48px;padding:0 var(--space-3);border:1px solid var(--ink-muted);border-radius:var(--radius-sm);background:var(--surface-raised);color:var(--ink);font:400 16px/24px var(--sans)}
.input::placeholder{color:var(--ink-muted);opacity:1}
.input:hover{border-color:var(--ink)}
.input.data{font-family:var(--mono);font-variant-numeric:tabular-nums}
input.input.data{font-size:16px}
textarea.input{height:auto;min-height:96px;padding:var(--space-3);resize:vertical}
textarea.input.data{font:400 14px/20px var(--mono);font-variant-numeric:tabular-nums}
select.input{appearance:none;-webkit-appearance:none;padding-right:var(--space-8);background-image:linear-gradient(45deg,transparent 50%,var(--ink-muted) 50%),linear-gradient(135deg,var(--ink-muted) 50%,transparent 50%);background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;background-size:5px 5px;background-repeat:no-repeat}
select.input[disabled]{opacity:.6}
/* focus can land on a date field's own calendar button (Shift+Tab does): the whole field takes the brand ring, not the browser's */
input[type="date"]:focus-within{outline:2px solid transparent;box-shadow:var(--focus-ring)}
input[type="date"]::-webkit-calendar-picker-indicator{outline:0}
.input.is-bad{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.input.is-bad:focus-visible{box-shadow:inset 0 0 0 1px var(--ink),var(--focus-ring)}  /* an invalid field keeps its focus ring */
/* an error is a sentence in ink: no edge bar (owner: no left-border accents) */
.err{display:flex;gap:var(--space-2);margin-top:var(--space-2);font-size:14px;line-height:20px;color:var(--ink)}
.code-input{height:56px;font:400 24px/32px var(--mono);letter-spacing:.24em;font-variant-numeric:tabular-nums}
/* checkboxes drawn in the palette, the same in both themes */
input[type="checkbox"]{appearance:none;-webkit-appearance:none;display:grid;place-items:center;flex:none;width:20px;height:20px;margin:0;border:1px solid var(--ink-muted);border-radius:var(--radius-sm);background:var(--surface-raised);cursor:pointer}
/* ticked: foam with a depth-ink edge and tick, as the book marks a selected filter (depth fills only the primary button, the
   AdToken underline and chart series 1) */
input[type="checkbox"]:checked{background:var(--foam);border-color:var(--depth-ink)}
input[type="checkbox"]:checked::after{content:"";width:5px;height:10px;margin-top:-2px;border:solid var(--depth-ink);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* ---------------------------------------------------------------- Sign up and sign in */
.auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100vh;min-height:100dvh}
.auth-main{display:flex;flex-direction:column;padding:var(--space-6) var(--space-12)}
/* the form starts at the same height on every step (centred in the column, its heading dropped about 90 px on the code step) */
.auth-box{width:100%;max-width:400px;margin:var(--space-20) auto 0;padding:var(--space-8) 0}
@media (max-height: 760px){.auth-box{margin-top:0}}  /* a short laptop window keeps the whole email step in view */
.auth-box .h1{margin-bottom:var(--space-3)}
.auth-box .lead{color:var(--ink-muted)}
.auth-acts{display:grid;gap:var(--space-4);margin-top:var(--space-8)}
.auth .btn[aria-disabled="true"]{cursor:progress}  /* a button whose request runs (auth.js busy): full contrast, its label says what it does */
.auth .tlink[aria-disabled="true"]{color:var(--ink-muted);text-decoration:none;cursor:progress}  /* "Sending code…" on the resend link: no longer looks like a link */
.g-mark{width:18px;height:18px;flex:none}
.gis-box{display:flex;justify-content:center;min-height:44px}  /* Google's own button, in the place of ours (real sign-in) */
.or{display:flex;align-items:center;gap:var(--space-3);font-size:14px;line-height:20px;color:var(--ink-muted)}
.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--line)}
.auth-legal{margin-top:var(--space-6);font-size:14px;line-height:20px;color:var(--ink-muted)}
.auth-legal a{padding:var(--space-3) 0}  /* a 44 px tap target inside the sentence; the line keeps its height */
/* the switch link keeps the 44 px .tlink height; the row's top padding gives back what that adds above the text */
.auth-swap{margin-top:var(--space-6);padding-top:var(--space-1);border-top:1px solid var(--line);font-size:14px;line-height:20px;color:var(--ink-muted)}
.auth-submit{margin-top:var(--space-4)}
.code-acts{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-2) var(--space-4);font-size:14px}
.code-to{font-family:var(--mono);font-size:16px;color:var(--ink);overflow-wrap:anywhere}
.code-hint{margin-top:var(--space-2);font-size:14px;line-height:20px;color:var(--ink-muted)}
.code-hint:empty{display:none}
.preview-note{margin-top:auto;padding-top:var(--space-4);font:400 12px/16px var(--mono);color:var(--ink-muted);text-wrap:balance}

/* the Abyss side: one real recorded ad, the way an AI answer carries it */
.auth-side{display:flex;flex-direction:column;justify-content:center;padding:var(--space-12);border-left:1px solid var(--line)}
.side-in{width:100%;max-width:440px;margin:0 auto}
.side-h{margin-bottom:var(--space-8)}
.spec{display:flex;flex-direction:column;padding:var(--space-6);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-raised)}
.spec-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);font-size:14px;line-height:20px;color:var(--ink-muted)}
.spec-eng{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--ink)}
.spec-eng img{display:block;width:20px;height:20px}
.spec-q{align-self:flex-end;margin-top:var(--space-4);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);background:var(--surface);color:var(--ink)}
.auth-side .spec-q{color:var(--ink-muted)}  /* AdToken: the prompt above the answer in data and ink-muted */
.spec-a{margin-top:var(--space-4);color:var(--ink-muted)}
.spec-ad{display:grid;grid-template-columns:minmax(0,1fr) 80px;gap:var(--space-4);align-items:center;margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--line)}
.spec-ad .ph{display:block;width:80px;height:80px;border-radius:var(--radius-sm);background:#fff;overflow:hidden}
.spec-ad .ph img{display:block;width:100%;height:100%;object-fit:contain}
.spec-t{font-weight:600}
/* AdToken: the sponsored phrase, ink at 600 with a 3 px depth underline that draws in from the left, like the bar in the logo */
.tok{padding-bottom:5px;background:linear-gradient(var(--depth),var(--depth)) 0 100%/100% 3px no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.spec-ad .tok{animation:tok-draw 1.1s ease-out .5s backwards}
@keyframes tok-draw{from{background-size:0 3px}to{background-size:100% 3px}}
.spec-m{margin-top:var(--space-2);color:var(--ink-muted)}
.spec-by{margin-top:var(--space-4);color:var(--ink-muted)}
@media (prefers-reduced-motion: reduce){.spec-ad .tok{animation:none}}
@media (max-width: 960px){
  .auth{grid-template-columns:minmax(0,1fr)}
  .auth-side{display:none}
  .auth-main{padding:var(--space-4)}
  .auth-box{margin-top:var(--space-12)}  /* one column: the heading about where onboarding's sits */
  .h1{font-size:32px;line-height:36px}
}

/* ---------------------------------------------------------------- Onboarding */
.ob{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.ob-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--space-4);height:64px;padding:0 var(--space-6);border-bottom:1px solid var(--line)}
.ob-step{color:var(--ink-muted)}
.ob-out{justify-self:end;font-size:14px}
.track{height:3px;background:var(--line)}
.track>span{display:block;height:100%;background:var(--depth);transition:width .4s ease}
.ob-main{flex:1;width:100%;max-width:600px;margin:0 auto;padding:var(--space-12) var(--space-4) var(--space-8)}
.ob-main .label{margin-bottom:var(--space-3)}
.ob-main .h1{margin-bottom:var(--space-3)}
.ob-sub{color:var(--ink-muted)}
.ob-form{margin-top:var(--space-8)}
.ob-acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-6);margin-top:var(--space-8)}
.brand-card{display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--space-4);align-items:center;margin-top:var(--space-8);padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-raised)}
.plate{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;overflow:hidden}
.plate img{display:block;width:40px;height:40px;object-fit:contain}
.plate span{font-weight:600;color:#061224}
.ob-h{margin-top:var(--space-8);margin-bottom:var(--space-3)}
.ob-add{display:flex;gap:var(--space-2);margin-top:var(--space-3);max-width:400px}
.ob-add select.input{flex:1;min-width:0}
.ob-add .input{height:40px;font-size:14px;background-position:calc(100% - 18px) 17px,calc(100% - 13px) 17px}
/* chips: raised and hairlined when off; foam with a depth edge when chosen */
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.chip{display:inline-flex;align-items:center;gap:var(--space-2);min-height:32px;padding:var(--space-1) var(--space-3);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-raised);color:var(--ink);font-size:14px;line-height:20px;text-align:left}
button.chip,label.chip{cursor:pointer}
button.chip:hover,label.chip:hover{border-color:var(--ink-muted)}
.chip.is-on,.chip[aria-pressed="true"],label.chip:has(input:checked){background:var(--foam);border-color:var(--depth);color:var(--depth-ink);font-weight:600}
.chip.is-on:hover,.chip[aria-pressed="true"]:hover{border-color:var(--depth-ink)}
.chip .data{font-weight:400}
.chip input[type="checkbox"]{width:16px;height:16px}
.chip input[type="checkbox"]:checked::after{width:4px;height:8px}
.checks{border-top:1px solid var(--line)}
.checks-scroll{max-height:440px;overflow-y:auto;border-bottom:1px solid var(--line)}
.checks-scroll .check:last-of-type{border-bottom:0}
.ob-filter{margin-bottom:var(--space-3)}
.ob-none{padding:var(--space-3) var(--space-2)}
.ob-note{margin-bottom:var(--space-3)}
.check{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:var(--space-3);align-items:start;padding:var(--space-3) var(--space-2);border-bottom:1px solid var(--line);cursor:pointer}
.check input{margin-top:2px}
.check:has(input:checked){background:var(--foam)}
.check:has(input:checked) .data{color:var(--depth-ink);font-weight:600}
.check small{color:var(--ink-muted);font:400 14px/20px var(--mono);white-space:nowrap}

/* ---------------------------------------------------------------- Dashboard */
.shell{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh;min-height:100dvh}
.side{position:sticky;top:0;display:flex;flex-direction:column;height:100vh;height:100dvh;padding:var(--space-4);border-right:1px solid var(--line)}
.side .logo{margin:var(--space-1) 0 var(--space-6) var(--space-1)}
/* the nav in sections (ChatGPT, Google and Alexa, then Plan); it scrolls on its own when the window is short, so the account
   stays in view, with room for the focus ring */
.side-nav{display:grid;align-content:start;gap:var(--space-4);min-height:0;margin:0 calc(-1 * var(--space-1));padding:var(--space-1);overflow-y:auto}
.nav-g{display:grid;gap:var(--space-1)}
.nav-h{padding:0 var(--space-3)}
.side-nav a{display:flex;align-items:center;gap:var(--space-3);min-height:40px;padding:0 var(--space-3);border-radius:var(--radius-sm);color:var(--ink-muted);text-decoration:none}
.side-nav a:hover{color:var(--ink)}
.side-nav a[aria-current="page"]{background:var(--foam);color:var(--depth-ink);font-weight:600}
.side-foot{position:relative;margin-top:auto;padding-top:var(--space-2)}
.acct{display:flex;align-items:center;gap:var(--space-3);width:100%;min-height:48px;padding:var(--space-1) var(--space-2);border:0;border-radius:var(--radius-sm);background:none;text-align:left;cursor:pointer}
.acct:hover{background:var(--surface-raised)}
.acct .plate,.acct-m .plate{flex:none;width:32px;height:32px}  /* a long name never squeezes the tile */
.acct .plate img,.acct-m .plate img{width:22px;height:22px}
.acct-t{min-width:0}
.acct-t b,.acct-t small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-t b{font-size:14px;line-height:20px;font-weight:600}
.acct-t small{font-size:12px;line-height:16px;color:var(--ink-muted)}
.m-acct{position:relative}
.acct-m{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:var(--radius-sm);background:none;cursor:pointer}
.menu{position:absolute;left:0;right:0;bottom:calc(100% + var(--space-1));z-index:20;padding:var(--space-1);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-raised);box-shadow:var(--shadow-float)}
.m-acct .menu{left:auto;right:0;bottom:auto;top:calc(100% + var(--space-1));min-width:180px}
.menu button,.menu a{display:flex;align-items:center;gap:var(--space-2);width:100%;min-height:40px;padding:0 var(--space-3);border:0;border-radius:var(--radius-sm);background:none;color:var(--ink);font-size:14px;line-height:20px;text-decoration:none;cursor:pointer}
.menu button:hover,.menu a:hover{background:var(--surface)}
.menu [aria-disabled="true"]{color:var(--ink-muted);cursor:default}
/* the phone's account menu says who is signed in (the bar shows only the logo tile); a long address wraps */
.m-acct .menu{width:max-content;max-width:min(320px,calc(100vw - 2 * var(--space-4)))}
.menu-who{margin-bottom:var(--space-1);padding:var(--space-2) var(--space-3) var(--space-3);border-bottom:1px solid var(--line)}
.menu-who b,.menu-who small{display:block;overflow-wrap:anywhere}
.menu-who b{font-size:14px;line-height:20px;font-weight:600}
.menu-who small{font-size:12px;line-height:16px;color:var(--ink-muted)}

.main{min-width:0;padding:var(--space-8) var(--space-12) var(--space-12)}
.main :is(p,h1,h2,h3,li,dt,dd){overflow-wrap:break-word}  /* a long name or address in running text wraps, never pushes the page sideways */
.main:focus,.main:focus-visible,h1[tabindex]:focus,h1[tabindex]:focus-visible{outline:0;box-shadow:none}  /* focus moves here on a route change, for screen readers; no ring on a whole page */
.main-in{max-width:1200px;margin:0}
/* a page still on its way: a line track with a depth fill, and what is loading (as the ChatGPT pages' loader). It fades in
   after a moment, so a page that comes at once never flashes it */
.wait{display:grid;gap:var(--space-3);max-width:320px;padding:var(--space-8) 0;font-size:14px;line-height:20px;color:var(--ink-muted);animation:wait-in .3s ease-out .3s backwards}
.wait-t{display:block;height:3px;overflow:hidden;background:var(--line)}
.wait-t i{display:block;width:40%;height:100%;background:var(--depth);animation:wait-run 1.4s ease-in-out infinite}
@keyframes wait-in{from{opacity:0}}
@keyframes wait-run{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
@media (prefers-reduced-motion: reduce){.wait,.wait-t i{animation:none}.track>span{transition:none}}
.page-head{margin-bottom:var(--space-8)}  /* space-8 between a headline and its body, as on the ChatGPT pages */
.ph-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-4)}
.page-head .label{margin-bottom:var(--space-2)}
.head-acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
@media (min-width: 961px){.ph-row{flex-wrap:nowrap}.ph-t{flex:1;min-width:0}.head-acts{flex:none}}  /* the actions stay beside the title; the note wraps instead */
.head-acts select.input{width:auto;min-width:200px;height:40px;font-size:14px;background-position:calc(100% - 18px) 17px,calc(100% - 13px) 17px}
.note-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--space-3);margin-top:var(--space-2)}
html.lock{overflow:hidden}  /* the page behind the open drawer stays still */
.page-note{font:400 14px/20px var(--mono);font-variant-numeric:tabular-nums;color:var(--ink-muted)}
.note-row .tlink{min-height:24px;font-size:14px;line-height:20px}
.page-sub{margin-top:var(--space-2);font-size:14px;line-height:20px;color:var(--ink-muted)}
.about{max-width:720px;margin-top:var(--space-3);padding:var(--space-6);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-raised);font-size:14px;line-height:20px}
.about p+p{margin-top:var(--space-2)}
.about .data{color:var(--ink-muted)}
/* links inside tables stay ink: only the name in the first cell keeps a hairline underline, numbers show one on hover or focus */
.tbl a{color:inherit;text-decoration:none;text-underline-offset:3px}
.tbl a:hover,.tbl a:focus-visible{color:var(--depth-ink);text-decoration:underline;text-decoration-color:currentColor}
.tbl tbody tr>:first-child a,.ov-also a{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.tbl tbody tr>:first-child a:hover,.tbl tbody tr>:first-child a:focus-visible,.ov-also a:hover{color:var(--depth-ink);text-decoration-color:currentColor}
.tbl tbody tr:not(.is-you):not(.is-on):hover,.vs tbody tr:not(.is-you):not(.is-on):hover>td:first-child{background:var(--surface)}

/* overview */
.ov-lead{max-width:880px}
.ov-lead .data{font-size:16px;line-height:24px}
.ov-also{max-width:880px;margin-top:var(--space-2);font-size:14px;line-height:20px;color:var(--ink-muted)}
.ov-block{margin-top:var(--space-12)}
.ov-h{margin-bottom:var(--space-3)}
.ov-hrow{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-1) var(--space-4);margin-bottom:var(--space-3)}
.ov-hrow a{color:var(--depth-ink)}
.grid-2{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-12) var(--space-6);align-items:start}
@media (min-width: 1280px){.grid-2{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
.ov-col{min-width:0}
/* cards pad space-6 on a desk and space-4 on a phone (tokens.json) */
.box{padding:var(--space-6);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-raised)}
.box-foot{margin-top:var(--space-3);font-size:14px;line-height:20px}
.bars{display:grid;gap:var(--space-3)}
/* the top advertisers box pads itself (card padding: 24 px on a desk, 16 px on a phone), so its column names run edge to edge */
#top-adv{padding:0}
.bars-h{padding:var(--space-3) var(--space-6);border-bottom:1px solid var(--line)}
.bars-b{padding:var(--space-3) var(--space-6) var(--space-6)}
.bars-x{margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--line)}
.bar{display:grid;grid-template-columns:32px minmax(0,3fr) minmax(48px,2fr) 36px;gap:var(--space-3);align-items:center;font-size:14px;line-height:20px;color:inherit;text-decoration:none}
a.bar:hover .bar-name{text-decoration:underline}
.bar-r{color:var(--ink-muted);text-align:right}
.bar-n{display:flex;align-items:baseline;gap:var(--space-2);min-width:0}
.bar-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-t{height:8px;background:var(--line)}
.bar-t i{display:block;height:100%;background:var(--ink-muted);font-style:normal}
.bar.is-you .bar-t i{background:var(--depth)}
.bar.is-you .bar-name{font-weight:600}
.bar-v{text-align:right}
.tag{flex:none;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.tag.is-you{color:var(--depth-ink)}
.vs-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);margin-bottom:var(--space-3)}
.tbl .th-name{font-size:12px;line-height:16px;font-weight:600;letter-spacing:0;text-transform:none}
.tbl .th-you{color:var(--depth-ink)}
.vs td.hi{font-weight:600;color:var(--ink)}
.vs-line{display:none}
.sugg{margin-top:var(--space-2);font:400 14px/20px var(--sans);color:var(--ink-muted)}
.sugg-i{white-space:nowrap}
.sugg .tlink{min-height:24px}
.more{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3);margin-top:var(--space-4);color:var(--ink-muted);font-size:14px}

/* filters */
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}
.filters .input{width:auto;min-width:180px;height:40px;font-size:14px}
.filters select.input{background-position:calc(100% - 18px) 17px,calc(100% - 13px) 17px}
.filters .grow{flex:1;min-width:220px}
.segs{gap:var(--space-3) var(--space-8)}
.seg{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.seg .label{margin-right:var(--space-1)}
.active{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);margin-bottom:var(--space-4)}
.active .tlink{min-height:32px;font-size:14px}
.riv-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-bottom:var(--space-4)}
.riv-row .label{margin-right:var(--space-1)}
.filters .chip,.riv-row .chip{min-height:40px}  /* beside a 40 px select or input; rows of chips only stay at 32 px */
.riv-row .input{width:auto;min-width:220px;height:40px;font-size:14px;background-position:calc(100% - 18px) 17px,calc(100% - 13px) 17px}
/* chip counts in mono; a chip with nothing behind it is muted and does nothing, but stays reachable */
.chip .cnt{color:inherit}
.chip[aria-disabled="true"]{color:var(--ink-muted);cursor:default}
.chip[aria-disabled="true"]:hover{border-color:var(--line)}
.save-line{margin:calc(-1 * var(--space-2)) 0 var(--space-3);font-size:14px;line-height:20px}
.save-line .tlink{min-height:32px}

/* tables */
.tbl-wrap{position:relative;overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-raised)}
.tbl{width:100%;border-collapse:collapse;font-size:14px;line-height:20px}
.tbl th{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--line);text-align:left;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);white-space:nowrap}
.tbl tbody th{font-size:14px;line-height:20px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink)}
.tbl td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--line);vertical-align:top}
.tbl tbody th{border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:last-child td,.tbl tr:last-child th{border-bottom:0}
.tbl thead tr:last-child th{border-bottom:1px solid var(--line)}
/* you and your picks: foam behind the row and depth-ink text, as the book marks a highlighted row (no edge bar) */
.tbl tbody tr.is-you,.tbl tbody tr.is-on{background:var(--foam)}
.tbl tbody tr.is-you>*,.tbl tbody tr.is-on>*{color:var(--depth-ink)}
.tbl .num{width:96px;text-align:right;white-space:nowrap}
.tbl .mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.tbl .rank{width:56px}
.tbl .clip{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-width:380px}
.tbl .tlink{min-height:24px;margin:-2px 0;vertical-align:top}
.ov-col .tbl th,.ov-col .tbl td{padding:var(--space-3)}
.ov-col .tbl .num{width:auto}  /* in the half-width column the prompt and its top brand keep the room */
.ov-col .tbl .tie{white-space:normal}  /* there, tied names may take two lines; "5 each" stays whole */
.ov-col .tbl .tie .data{white-space:nowrap}
.ov-col .tbl .who{white-space:normal}
.tbl tr.nr td{border-bottom:0}
.nr-t{display:block;margin-top:var(--space-1);font-family:var(--sans);color:var(--ink-muted)}
.tbl tr.nr-sub td{padding-top:0}
.nr-sub .sugg{margin-top:0}
/* the rivals matrix scrolls sideways on small screens with the prompt column held in place; focus never hides behind it */
.vs td:first-child,.vs th:first-child{position:sticky;left:0;z-index:1;min-width:150px;background:var(--surface-raised)}
.vs tr.is-you>td:first-child,.vs tr.is-on>td:first-child{background:var(--foam)}  /* the held column keeps the row's foam */
.tbl-wrap:has(.vs){scroll-padding-inline-start:150px}
.more-l{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.bars-cut{margin-top:var(--space-3)}
.th-sort{display:inline-flex;align-items:center;gap:var(--space-1);padding:0;border:0;background:none;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer}
.th-sort:hover{color:var(--ink)}
[aria-sort="descending"] .th-sort::after{content:"↓" / ""}
[aria-sort="ascending"] .th-sort::after{content:"↑" / ""}
.saved-t{margin-right:var(--space-3);color:var(--depth-ink);font-weight:600}
.rowlink{display:block;width:100%;max-width:380px;padding:2px 4px;margin:-2px -4px;border:0;border-radius:var(--radius-sm);background:none;color:inherit;text-align:left;cursor:pointer}
.rowlink:hover .clip{text-decoration:underline}
.row-meta{display:none}
.sf,.who-a,.who-btn{vertical-align:top}
.who-btn,.who-a{display:inline-flex;max-width:100%;padding:0;border:0;background:none;color:inherit;text-align:left;text-decoration:none;cursor:pointer}
.tbl a.who-a{text-decoration:none}
.who-btn:hover .who-n,.who-a:hover .who-n{text-decoration:underline}
/* a row's own link keeps the first cell's hairline underline wherever it sits: an advertiser's name, a surface, an ad's headline */
.tbl a.who-a .who-n,.tbl a.sf-a .sf,.tbl-ads .rowlink .clip{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.tbl a.who-a:hover .who-n,.tbl a.who-a:focus-visible .who-n,.tbl a.sf-a:hover .sf,.tbl a.sf-a:focus-visible .sf,.tbl-ads .rowlink:hover .clip{color:var(--depth-ink);text-decoration-color:currentColor}
.who{display:flex;align-items:center;gap:var(--space-2);min-width:0;font-weight:600;white-space:nowrap}
.who img,.who-ph{flex:none;width:16px;height:16px;border-radius:var(--radius-sm)}
.who img{display:block;background:#fff;object-fit:contain}
.who-ph{display:grid;place-items:center;border:1px solid var(--line);font:600 10px/1 var(--sans);color:var(--ink-muted)}
.who .data{margin-left:var(--space-1);font-weight:400}
/* a tie stays on one line: the names, then "5 each"; the full list is in the title and for screen readers */
.tie{display:flex;gap:var(--space-2);align-items:baseline;white-space:nowrap;min-width:0;padding-left:24px}  /* 16 px logo + 8 px gap, so tied names line up */
.tie-n{min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.tie .data{flex:none}
.sf{display:inline-flex;align-items:center;gap:var(--space-2);white-space:nowrap}
.sf img{display:block;width:16px;height:16px}
.c-sf .sf,.c-sfs .sf{color:var(--ink-muted)}
.c-sfs .sf{display:inline-flex}
.sep{color:var(--ink-muted)}
.tbl a.sf-a{text-decoration:none}
.tbl a.sf-a:hover .sf{text-decoration:underline}
.foot-note{margin-top:var(--space-3);font:400 14px/20px var(--sans);color:var(--ink-muted)}
.foot-note a{color:var(--depth-ink)}
.pl-block{margin-top:var(--space-12)}
/* empty and error states: what happened (one sentence in ink, or .empty-t 600 with .empty-s under it: what to do next, in
   ink-muted) and one way out, in the same hairline box */
.empty{padding:var(--space-6);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-raised);text-align:left;color:var(--ink)}
.empty .btn{margin-top:var(--space-3)}
.empty-x{margin-top:var(--space-3)}
.empty-t{font-weight:600}
.empty-s{margin-top:var(--space-1);font-size:14px;line-height:20px;color:var(--ink-muted)}

/* the ad drawer floats over a scrim; the page behind is inert */
.scrim{position:fixed;inset:0;z-index:29;background:var(--surface);opacity:.5}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:30;width:min(460px,100%);padding:var(--space-6);overflow-y:auto;border-left:1px solid var(--line);background:var(--surface-raised);box-shadow:var(--shadow-float)}
.drawer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4)}
.d-q{display:block;margin:0 0 var(--space-4)}
.d-desc{margin-top:var(--space-3)}
.d-dom{display:block;margin-top:var(--space-1)}
.d-save{display:flex;flex-wrap:wrap;align-items:center;margin-top:var(--space-6)}
.d-links{display:grid;gap:var(--space-1);margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--line);font-size:14px;line-height:20px}
.d-links a{display:inline-flex;align-items:center;min-height:32px}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:var(--radius-full);background:none;cursor:pointer}
.icon-btn:hover{background:var(--surface)}
.kv{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--space-2) var(--space-4);margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--line);font-size:14px;line-height:20px}
.kv dt{color:var(--ink-muted)}
.kv .who{white-space:normal}

/* plan a campaign */
.last-brief{max-width:720px;margin-bottom:var(--space-6);font-size:14px;line-height:20px;color:var(--ink-muted)}
.last-brief b{color:var(--ink)}
.last-brief a{display:inline-block;padding:var(--space-3) var(--space-2);margin:calc(-1 * var(--space-3)) calc(-1 * var(--space-2))}  /* a 40 px target, the line unmoved */
.plan-ev{container-type:inline-size}
.plan-ev .tbl td:first-child{min-width:200px}
.plan-ev .tbl .num{width:auto}  /* inside the 720 px form the prompt and its brands line keep the room */
.plan-ev .tbl th,.plan-ev .tbl td{padding-left:var(--space-3);padding-right:var(--space-3)}
.plan-ev .tbl tbody tr>:first-child{hyphens:manual}  /* a prompt reads as typed, never "orthope-dic", even on the narrowest phones */
/* "Recorded on" is a column only in a box wide enough for it; in the 720 px form (and on a phone) it is the line under the prompt */
.ev-line{display:block;margin-top:var(--space-1);color:var(--ink-muted)}
.c-rec{display:none}
@container (min-width: 900px){.plan-ev .c-rec{display:table-cell}.plan-ev .ev-line{display:none}}
.ev-sf{display:block}
.ev-sf+.ev-sf{margin-top:var(--space-1)}
/* the error line moves under the field it is about; dense flow keeps the start date beside the budget when it sits under the
   budget, and the negative margin keeps it 8 px from its field, as in the Campaigns form */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row dense;gap:var(--space-4);max-width:720px}
.form-grid .full{grid-column:1/-1}
.form-grid legend{padding:0}
.form-grid .err{margin-top:calc(-1 * var(--space-2))}
/* the surface picker looks like the shell's toggle chips (foam and depth-ink when on, no depth-filled box): the native checkbox
   stays, for keyboards, screen readers and the form, laid unseen over the whole chip, and the chip carries its focus ring */
.form-grid .chip{position:relative;min-height:40px}
.form-grid .chip input[type="checkbox"]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0}
.form-grid .chip:has(input:focus-visible){box-shadow:var(--focus-ring)}
.brief-opt{font-weight:400}  /* "optional" beside a field's name, as in the Campaigns form */
.done{max-width:720px;padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--foam);color:var(--depth-ink);font-weight:600}
.done:focus-visible{box-shadow:var(--focus-ring)}
.brief-kv{max-width:720px;margin-top:var(--space-6);grid-template-columns:128px minmax(0,1fr)}
.brief-kv dd{min-width:0;overflow-wrap:anywhere}  /* a long landing page or name wraps instead of pushing the page sideways */
.brief-n{margin-top:var(--space-4);font-size:14px;line-height:20px}

/* surface logos next to surface names (chips, notes, plan boxes); ChatGPT's tile is drawn a touch smaller, as on the homepage */
.chip img{display:block;flex:none;width:16px;height:16px}
.chip img[src$="chatgpt.svg"],.sf img[src$="chatgpt.svg"]{width:14px;height:14px;margin:1px;border-radius:3px}
.bc-sf .sf{color:inherit}
/* Save is a quiet row action; it shows as a link on the row's hover or its own focus. "Saved · Remove" stays as it is.
   A suggestion's Save, under a prompt not recorded yet, is the line's only action, so it keeps its link look */
.tbl tr:not(.nr-sub) td:last-child .tlink[data-save]{color:var(--ink-muted);text-decoration:none}
.tbl tr:not(.nr-sub):hover td:last-child .tlink[data-save],.tbl tr:not(.nr-sub) td:last-child .tlink[data-save]:focus-visible{color:var(--depth-ink);text-decoration:underline}
/* a saved prompt typed as one long word wraps, so the counts beside it stay in view in the half-width column */
#saved-tbl td:first-child,#list td.mono:first-child{overflow-wrap:anywhere}
/* overview: the next step under the lead, your categories, chips over the top advertisers, the note under the comparison */
.ov-next{max-width:880px;margin-top:var(--space-2)}
.ov-next .data{font-size:16px;line-height:24px}
.ov-next a{white-space:nowrap}
.ov-cats{margin-top:var(--space-8)}
.top-seg{margin-bottom:var(--space-3)}
.vs-note{margin-top:var(--space-2);color:var(--ink-muted)}
.ev-riv{display:block;margin-top:var(--space-1);color:var(--ink-muted)}
/* the advertisers list: ChatGPT, then Google and Alexa, each its own section with its own counts */
.adv-sec+.adv-sec{margin-top:var(--space-12)}
.adv-sec h2[tabindex]:focus{outline:0;box-shadow:none}  /* focus lands here after Try again, for screen readers; no ring on a heading */
.cg-line{font-size:14px;line-height:20px;color:var(--ink-muted)}
.cg-err{margin-left:auto;font-size:14px;line-height:20px}
/* the advertiser page */
.bp-block+.bp-block{margin-top:var(--space-12)}
.bp-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-6)}
.cmp{display:flex;align-items:center;gap:var(--space-2);font-size:14px;line-height:20px;font-weight:600}
.cmp select.input{font-weight:400}
/* a name as long as a web address wraps in the title, its label and a column head, instead of pushing the page sideways */
.page-head:has(.bp-name) .label{overflow-wrap:anywhere}
/* the name breaks only when it cannot fit (break-word, not anywhere), so the balanced title never splits it from its dot;
   the title block may then shrink to the row on its own */
.bp-name{overflow-wrap:break-word}
.ph-t:has(.bp-name){min-width:0}
.bp-block .th-name{overflow-wrap:break-word}
.bp-block .th-long{overflow-wrap:anywhere}  /* a long web address in a column head breaks anywhere, so the column stays in view */
.cmp{min-width:0}  /* a long name picked in Compare with stays inside the select, which keeps to the row */

/* below a wide desk every table keeps to its box: numbers take only their own width, cells pad 12 px, long names and column
   names wrap, and low-value columns (hide-m) step out. Short prompts stay on one line (A.pq) */
@media (max-width: 1279px){
  .tbl th,.tbl td{padding-left:var(--space-3);padding-right:var(--space-3)}
  .tbl .num{width:auto}
  .tbl .who{white-space:normal}
  .tbl .who-n{overflow-wrap:anywhere}  /* a one-word name as long as a web address */
  .tbl .tie{white-space:normal}  /* tied names may take two lines here; "5 each" stays whole */
  .tbl .tie .data{white-space:nowrap}
  .tbl .th-name,.tbl .th-wrap{white-space:normal}
  .tbl .hide-m{display:none}
}
/* a desk under 1100 px leaves the tables about as much room as a tablet, so the same columns (hide-s) step out */
@media (max-width: 1099px){.tbl .hide-s{display:none}}

.mobile-bar{display:none}
@media (max-width: 960px){
  .shell{display:block}
  .side{position:static;display:block;height:auto;padding:0;border-right:0}
  .mobile-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);height:64px;padding:0 var(--space-4);border-bottom:1px solid var(--line)}
  .side>.logo,.side-foot{display:none}
  .mobile-bar .logo{margin:0}
  .side-nav{display:flex;gap:var(--space-1);margin:0;overflow-x:auto;padding:var(--space-2) var(--space-4);border-bottom:1px solid var(--line);scrollbar-width:none;scroll-padding-inline:var(--space-4)}
  .side-nav:empty{display:none}  /* while the account is checked there is no nav yet: no empty band under the bar */
  .side-nav a{flex:none;gap:var(--space-2);min-height:44px}
  .nav-g{display:flex;flex:none;gap:var(--space-1)}
  .nav-g+.nav-g{padding-left:var(--space-2);border-left:1px solid var(--line)}
  .nav-h{display:none}
  .main{padding:var(--space-6) var(--space-4) var(--space-12)}
  .form-grid{grid-template-columns:minmax(0,1fr)}
  .filters .input{flex:1 1 140px;min-width:0}
  .head-acts select.input{flex:1 1 180px;min-width:0}
  .ob-top{grid-template-columns:1fr auto}
  .ob-out{display:none}
}
/* phone: each ad is a headline, then one quiet line of brand · prompt · surface · price; each comparison row is its prompt,
   then one line of counts. The header select and button share one row, and the search gets a row of its own. */
@media (max-width: 600px){
  .tbl-ads thead,.vs thead{display:none}
  .tbl-ads,.tbl-ads tbody,.vs,.vs tbody{display:block}
  .tbl-ads tr,.vs tr{display:block;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--line)}
  .tbl-ads tr:last-child,.vs tr:last-child{border-bottom:0}
  .tbl-ads td,.vs td{display:none;padding:0;border:0}
  .tbl-ads td.c-ad{display:block}
  .vs td:first-child{display:block;position:static;min-width:0;background:none;overflow-wrap:anywhere}
  .vs tbody tr:not(.is-you):not(.is-on):hover>td:first-child{background:none}
  .vs-line{display:block;margin-top:var(--space-1);color:var(--ink-muted)}
  .tbl-ads .rowlink{max-width:none;font-weight:600}
  .tbl-ads .row-meta{display:block;margin-top:var(--space-1);color:var(--ink-muted);overflow-wrap:anywhere}
  .row-meta .rm-n{font-family:var(--sans)}  /* the brand is a name, in Rethink Sans; prompt, surface and price stay in mono */
  .segs{gap:var(--space-3)}
  .tbl .hide-p{display:none}
  .head-acts{width:100%;flex-wrap:nowrap}
  .head-acts select.input{flex:1;min-width:0}
  .filters .grow{flex-basis:100%}
  .plan-ev .tbl td:first-child{min-width:0}
  /* Prompts, Placements, a brand's prompts and the plan evidence stack too: the first cell, then one wrapped line of labelled
     counts ("Ads 83  You 19"); every count keeps its link and never breaks */
  .tbl-stack thead{display:none}
  .tbl-stack,.tbl-stack tbody{display:block}
  .tbl-stack tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-1) var(--space-4);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--line)}
  .tbl-stack tr:last-child,.tbl-stack tr.nr{border-bottom:0}
  .tbl-stack tr.nr-sub{padding-top:0}
  .tbl.tbl-stack tr>*{padding:0;border:0;text-align:left}
  .tbl-stack tr>:first-child{flex:1 1 100%;min-width:0;overflow-wrap:anywhere}
  .tbl-stack td[data-l]{display:block}  /* a stacked row has room for every labelled count, even one a narrow table leaves out */
  .tbl-stack td:empty,.tbl-stack td.na{display:none}
  .tbl-stack td[data-l]::before{content:attr(data-l) " ";font-family:var(--sans);color:var(--ink-muted)}
  .tbl-stack .c-save{margin-left:auto}
  /* tap targets of at least 40 px: the top advertiser rows, the chip rows, Clear filters and the quiet row actions. Save and Remove
     grow into the row's padding, so the line keeps its height; a suggestion's Save makes its own line 40 px */
  .bars{gap:0}
  .bars .bar{min-height:40px}
  .bars-h{padding:var(--space-3) var(--space-4)}
  .bars-b{padding:var(--space-1) var(--space-4) var(--space-3)}
  .vs-bar .chip,.top-seg .chip,.active .chip,.active .tlink,.save-line .tlink{min-height:40px}
  .nr-sub .tlink{min-height:40px;vertical-align:baseline}
  .c-save .tlink{min-height:40px;margin:-10px 0}
  #pos-tbl .tag{display:none}  /* every row but yours is a rival here; your row keeps its foam and depth-ink text */
  .tbl .num{width:auto}  /* on a phone the prompt or name column keeps the room */
  .tbl .c-rank{white-space:normal}  /* "Tied" may sit above "8 of 74"; the numbers stay together */
  .head-acts:has(.cmp){flex-wrap:wrap}
  .cmp{flex:1 1 100%}
  .box,.about{padding:var(--space-4)}
  /* tap targets of at least 40 px: a chip a finger presses grows; "About this data" keeps its line and takes a taller hit area */
  button.chip,label.chip,a.chip{min-height:40px}
  .note-row .tlink{position:relative}
  .note-row .tlink::after{content:"";position:absolute;inset:-8px -4px}
  /* the same for a link or button in a table cell (a name, a prompt, a count, a sort), a text link, a top-advertiser row and the
     drawer's links: an invisible hit area of at least 40 px around them, so the look and the rhythm stay */
  .tbl :is(td,th) :is(a,button):not(.chip):not(.btn),.tlink,.kv a,a.bar{position:relative}
  .tbl :is(td,th) :is(a,button):not(.chip):not(.btn)::before,.tlink::before,.kv a::before{content:"";position:absolute;inset:-12px -8px}
  a.bar{min-height:28px}
  a.bar::before{content:"";position:absolute;inset:-6px 0}
  .d-links a{min-height:40px}
  #bp-tbl td.c-sfs{display:block;flex:1 1 100%}  /* the advertiser's prompts keep their surfaces: a quiet line under the prompt */
}
/* the narrowest phones: top advertiser names wrap instead of being cut */
@media (max-width: 480px){
  .bar-name{white-space:normal;overflow-wrap:anywhere}
  .bar-n{flex-wrap:wrap}
}
/* 320 to 400 px: table cells pad 8 px and a long name in the first column may hyphenate, so a four-column table still fits */
@media (max-width: 400px){
  .tbl th,.tbl td{padding-left:var(--space-2);padding-right:var(--space-2)}
  .tbl tbody tr>:first-child{overflow-wrap:anywhere}  /* only a very long word breaks; names and prompts are never hyphenated */
}
@media (max-width: 360px){.tbl thead th{letter-spacing:.04em}}  /* the narrowest phones: column names track a little tighter */

/* Plan a campaign (ChatGPT): Ads Manager's three steps as sections split by hairlines, not boxes; the preview is the one card */
.pl-form{max-width:1040px}
.pl-sec{padding-top:var(--space-8);margin-top:var(--space-8);border-top:1px solid var(--line)}
.pl-sec:first-of-type{margin-top:0;padding-top:0;border-top:0}
.pl-sec>.label,.pl-sec-h .label{margin-bottom:var(--space-1)}
.pl-sec>.h3{margin-bottom:var(--space-6)}
.pl-sec-h{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-6)}
.pl-sec-h h2,.pl-sec-h h3{overflow-wrap:anywhere}
.pl-form .h4{font-size:16px;line-height:24px;font-weight:600}
.pl-grid{max-width:720px}
.pl-ad{margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--line)}
.pl-add{margin-top:var(--space-6)}
.pl-add-g{margin-top:var(--space-3)}
.pl-form .form-grid .err{margin-top:var(--space-1)}
.pl-ad-grid{display:grid;grid-template-columns:minmax(0,720px) minmax(280px,1fr);gap:var(--space-8);align-items:start}
.pl-help{margin-top:var(--space-2);font-size:14px;line-height:20px;color:var(--ink-muted)}
.form-grid>.pl-help{margin-top:calc(-1 * var(--space-2))}
.pl-unv{display:block;margin-top:var(--space-1);color:var(--ink)}
.pl-cnt{margin-top:var(--space-1);font-size:12px;line-height:16px;overflow-wrap:anywhere}
.pl-warn{padding-left:var(--space-3);border-left:2px solid var(--ink-muted);font-size:14px;line-height:20px}
.pl-opts{display:grid;gap:var(--space-1)}
.pl-opt{display:flex;gap:var(--space-3);align-items:flex-start;min-height:44px;padding:var(--space-2) 0;cursor:pointer}
.pl-opt input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--depth)}
.pl-opt>span{display:flex;flex-direction:column;min-width:0}
.pl-opt b{font-weight:600}
.pl-oh{font-size:14px;line-height:20px;color:var(--ink-muted)}
.pl-opt.is-off{cursor:default}
.pl-opt.is-off b{color:var(--ink-muted)}
.form-grid .chip input[type="radio"]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pl-file{display:block;max-width:100%;min-height:44px;font-size:14px}
.pl-file:focus-visible{box-shadow:var(--focus-ring)}
.pl-ev .tbl-wrap{margin-top:var(--space-2)}
.pl-ev td.mono{overflow-wrap:anywhere}
.pl-pv{position:sticky;top:var(--space-6)}
.pl-pv>.label{margin-bottom:var(--space-2)}
.pl-ans{padding:var(--space-4) var(--space-5,20px);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-raised)}
.pl-q{margin:0 0 var(--space-3);font:400 13px/20px var(--mono);color:var(--ink-muted);overflow-wrap:anywhere}
.pl-a{margin:0;font-size:16px;line-height:30px;overflow-wrap:anywhere}
.pl-tk{font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--depth);text-decoration-thickness:3px;text-underline-offset:5px;text-decoration-skip-ink:none}
.pl-by{display:flex;align-items:center;gap:var(--space-2);margin:var(--space-3) 0 0;font-size:12px;line-height:16px;color:var(--ink-muted)}
.pl-by img{width:40px;height:40px;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--line)}
.pl-send{margin-top:var(--space-8)}
.err-sum{max-width:720px;margin-bottom:var(--space-6);padding-left:var(--space-4);border-left:2px solid var(--ink);font-size:14px;line-height:20px}
.err-sum:focus-visible{box-shadow:var(--focus-ring)}
.err-sum ul{margin:var(--space-2) 0 0;padding-left:var(--space-4)}
.err-sum a{display:inline-block;padding:var(--space-1) 0;color:var(--ink)}
.pl-sum-h{max-width:720px;margin-top:var(--space-8)}
.pl-sum-h+.brief-kv{margin-top:var(--space-3)}
@media (max-width: 1099px){.pl-ad-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-6)}.pl-pv{position:static;max-width:720px}}

/* the top bar (owner 2026-11-06): the wireframe's tabs on top (Library, Campaigns, Placements), credits, the OpenAI ad account
   and the signed-in address on the right; no side menu */
.shell.top-shell{display:block}
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:var(--space-6);min-height:56px;padding:0 var(--space-6);background:var(--surface-raised);border-bottom:1px solid var(--line)}
.topbar .logo{display:block;flex:none;margin:0}
.topbar .logo svg{display:block;width:104px;height:36px}
.top-nav{display:flex;gap:2px;min-width:0}
.top-nav a{display:inline-flex;align-items:center;gap:var(--space-2);min-height:40px;padding:0 var(--space-3);border-radius:var(--radius-sm);color:var(--ink-muted);font-weight:500;text-decoration:none;white-space:nowrap}
.top-nav a:hover{color:var(--ink)}
.top-nav a[aria-current="page"]{background:var(--foam);color:var(--depth-ink)}
.top-nav .au-navn{margin-left:0}
.top-acct{display:flex;align-items:center;gap:var(--space-4);min-width:0;margin-left:auto;font-size:14px;line-height:20px}
.top-acct .credits,.top-acct .oa{display:inline-flex;align-items:center;gap:var(--space-2);white-space:nowrap;color:var(--ink);text-decoration:none}
.top-acct .credits{padding:2px var(--space-2);border:1px solid var(--line);border-radius:var(--radius-sm)}
.top-acct .credits:hover,.top-acct .oa:hover{text-decoration:underline}
.top-acct .dot{flex:none;width:8px;height:8px;border-radius:50%;border:1px solid var(--ink-muted)}
.top-acct .dot.live{border-color:var(--signal);background:var(--signal)}
.top-acct .who{min-width:0;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-muted)}
.top-shell .main{padding:var(--space-8) var(--space-6) var(--space-12)}
.top-shell .main-in{margin:0 auto}
@media (max-width: 960px){
  .topbar{flex-wrap:wrap;gap:var(--space-2) var(--space-4);padding:var(--space-2) var(--space-4)}
  .top-nav{order:3;width:100%;overflow-x:auto;scrollbar-width:none}
  .top-acct{gap:var(--space-3)}
  .top-acct .who{display:none}
  .top-shell .main{padding:var(--space-6) var(--space-4) var(--space-12)}
}
@media (max-width: 480px){
  .top-acct .oa{display:none}
}