/* ── the house tokens: Cursor's colours, as in inbox.css (the ones before are the git tag colors-before-cursor) ── */
  :root {
    --ink: #26251e; --ground: #f7f7f4; --white: #f2f1ed; --quiet: #ebeae5; --hairline: rgba(38,37,30,.1);
    --muted-on-ink: rgba(38,37,30,.2); --secondary: rgba(38,37,30,.6); --faint: rgba(38,37,30,.4); --fold: rgba(38,37,30,.5);
    --action: #3a83f7; --pale: #e8f3fe; --details: #ebf2fc; --green: #127a45; --red: #d6453d;
    --held: #fce5c8; --held-ink: #8c4b14;   /* the apricot (inbox.css): the upgrade pills, and Create here */
    --machine: #14120b; --machine-text: rgba(237,236,236,.6);   /* the Agent view's ground = the dark theme's ground */
    --r-card: 20px; --r-float: 10px; --r-field: 8px;
    --shadow-column: 0 8px 24px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.08);
    --shadow-pill: 0 2px 6px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.06);
    --tab-on: rgba(38,37,30,.07); --tab-hover: rgba(38,37,30,.04);   /* Claude's tabs: the chosen one on a grey fill */
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --ease: cubic-bezier(.32, .72, 0, 1);   /* the one curve everything moves on: quick to leave, soft to land */
  }
  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  .no-t { transition: none !important; }   /* one frame without transitions: the start of a glide */
  html { background: var(--ground); color: var(--ink); font-family: "Geist", ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; touch-action: pan-x pan-y; }   /* scrolls, never zooms on a phone */
  body { margin: 0; font-size: 14px; line-height: 1.3; min-height: var(--full, 100dvh); }   /* --full: the page's height before the keys shortened it */
  a { color: inherit; text-decoration: none; }
  button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
  input { font: inherit; }
  /* a field is never highlighted — not on focus, not by the browser's autofill; only an error turns its border red */
  input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-text-fill-color: var(--ink); caret-color: var(--ink); transition: background-color 600000s 0s, color 600000s 0s; }
  svg.i { width: 16px; height: 16px; flex: none; }
  .cur { font-family: "EB Garamond", Georgia, serif; font-style: italic; font-weight: 500; font-size: 1.12em; }   /* the cursive accent: an agent's name inside the sentence */

  /* ── the top: only the mark, top left — it is the sign-in ── */
  .top { position: fixed; inset: 0 0 auto 0; z-index: 20; display: flex; justify-content: flex-start; padding: 12px 16px; pointer-events: none; }
  .top > * { pointer-events: auto; }
  .arrow { width: 40px; height: 40px; border-radius: 50%; background: var(--white); color: var(--ink); border: 1px solid var(--hairline); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-pill); }
  .arrow:hover { background: var(--quiet); }
  .arrow .mark { font-family: "Geist", ui-sans-serif, system-ui, sans-serif; font-weight: 900; font-size: 24px; line-height: 1; -webkit-text-stroke: .5px currentColor; transform: translateY(-1px); }
  .arrow picture { display: contents; }
  .arrow .logo { width: 16px; height: 24px; display: block; }   /* the Preferred mark at its native 16 × 24, never scaled or nudged */

  /* ── the landing is a chat: two bubbles from us on the left, in a draft's grey; then hers on the right, in a published
     bubble's blue — the box she types her handle or site into; no arrow, Enter (the keyboard's Go) sends it. Her page's
     colours, by day and by night ── */
  .landing { min-height: var(--full, 100dvh); padding: 72px 16px 96px; display: flex; flex-direction: column; align-items: center; justify-content: safe center; }
  .thread { width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 12px; }
  .landing-block { width: 100%; max-width: 448px; display: flex; flex-direction: column; align-items: center; }   /* the staging gate's column and title */
  .landing-heading { font-size: 15px; line-height: 19.5px; font-weight: 400; text-align: center; margin: 0 0 16px; }
  .r { display: flex; }
  .r.mine { justify-content: flex-end; }
  .bubble { max-width: 448px; padding: 14px 16px 12px; border-radius: var(--r-card); border-bottom-left-radius: 8px; background: var(--quiet); font-size: 15px; line-height: 22px; letter-spacing: -.15px; }
  .bubble p { margin: 0; }
  .bubble .m { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin: 0 1px 0 3px; }
  .bubble .named { white-space: nowrap; }
  .bubble .learn { color: var(--action); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }   /* in the cursive, blue */
  /* the box floats over the page as it grows — the slot keeps its place, so nothing moves (the old composer's rule).
     From her first tap it glides out of the thread to just under the mark, the page behind it dimmed and blurred, and what
     it finds (five at most) hangs under it — never a scroll inside; it settles back when she leaves it */
  .slot { position: relative; width: 100%; max-width: 448px; height: 56px; }
  .box.up { z-index: 42; }                                              /* over the dim while she is searching or claiming */
  .box { position: absolute; inset: 0 0 auto 0; z-index: 5; background: var(--pale); border-radius: var(--r-card); border-bottom-right-radius: 8px; overflow: hidden; transition: transform .45s var(--ease); }
  .box.out { position: fixed; inset: 64px auto auto 50%; width: 448px; margin-left: -224px; }   /* out of the thread ("top" is the mark's bar) */
  /* while the box is out the page stands still, laid out at its full height but clipped to the screen (and shifted up by
     --y, how far she had scrolled): nothing is left to scroll, so the keys can't push the bubbles up. Clipped, not fixed —
     a fixed page would stack the box under the dim */
  html.held { overflow: hidden; }
  html.held body { height: 100dvh; min-height: 0; overflow: clip; }
  html.held .landing { margin-top: calc(var(--vvt, 0px) - var(--y, 0px)); }   /* + --vvt: when iOS pans the screen down for the keys, the page moves down with it and stands still to the eye */
  @media (max-width: 799px) {
    .bubble, .slot { max-width: 92%; }
    .box.out { inset: calc(64px + var(--vvt, 0px)) 16px auto 16px; width: auto; margin: 0; }   /* --vvt: iOS pans the screen down for the keys; the box stays at the top of what she sees */
  }
  .field { display: flex; align-items: center; height: 56px; padding: 0 20px; margin: 0; }
  .field input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 16px; color: var(--ink); }
  .field input::placeholder { color: var(--secondary); }
  .rows { border-top: 1px solid var(--hairline); }
  .rows[hidden], .field[hidden] { display: none; }
  .row { display: flex; align-items: center; gap: 12px; padding: 12px 20px; cursor: pointer; }   /* the whole row claims, not only its pill */
  .row:hover, .nomatch:hover { background: var(--tab-hover); }
  .row + .row { border-top: 1px solid var(--quiet); }
  .row .n { font-size: 14px; font-weight: 500; }
  .row .s { font-size: 12px; color: var(--secondary); margin-top: 2px; line-height: 16px; }
  .pill-claim { margin-left: auto; flex: none; display: inline-flex; align-items: center; justify-content: center; height: 26px; padding: 0 12px; border-radius: var(--r-float); background: var(--held); color: var(--held-ink); font-size: 13px; font-weight: 500; }   /* Claim: the apricot, like Create and upgrade */
  .pill-claim:hover { background: #f9dbb6; }
  .nomatch { padding: 14px 20px; font-size: 14px; color: var(--secondary); display: flex; align-items: center; gap: 12px; cursor: pointer; }
  .nomatch .req { margin-left: auto; flex: none; display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: var(--r-float); background: var(--held); color: var(--held-ink); font-size: 13px; font-weight: 500; }   /* Create: the upgrade pill's apricot */
  .nomatch .req:hover { background: #f9dbb6; }

  /* the other screens inside the box: request · claim (sign in) · check your email · requested */
  .screen { padding: 20px; border-top: 1px solid var(--hairline); }
  .screen[hidden] { display: none; }
  .screen .t { font-size: 16px; font-weight: 600; margin: 0 0 4px; }
  .screen .l { font-size: 14px; line-height: 20px; color: var(--secondary); margin: 0 0 14px; }
  .screen .l b { color: var(--ink); font-weight: 500; }
  .btn-white[hidden], .or[hidden] { display: none; }
  .btn-white { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 44px; border-radius: var(--r-float); background: var(--white); border: 1px solid var(--hairline); font-size: 14px; font-weight: 600; }
  .btn-white:hover { background: var(--quiet); }
  .btn-white img { width: 18px; height: 18px; }
  .or { display: flex; align-items: center; gap: 12px; margin: 14px 0; color: var(--faint); font-size: 12px; }
  .or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
  /* the email field: no arrow — Enter (the keyboard's Go) sends it; a hairline that never lights up, red only for a bad
     address. Every field in the cards after sign-in is this one too */
  .email { display: flex; align-items: center; height: 48px; padding: 0 14px; border: 1px solid var(--hairline); border-radius: var(--r-float); }
  .email[hidden] { display: none; }
  .crafts + .email { margin-top: 8px; }
  .email input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 16px; color: var(--ink); }   /* 16, or the phone zooms in */
  .email input::placeholder { color: var(--secondary); text-indent: 3px; }   /* a hair of air between the caret and the placeholder's first letter */
  .email.bad { border-color: var(--red); }   /* the red border is the whole message */
  .sheet .l:last-child { margin-bottom: 0; }
  .sheet .l.c { text-align: center; }                                  /* the line under a centred title */
  .sheet .okl:not([hidden]) { display: flex; align-items: center; justify-content: center; gap: 6px; }   /* @handle verified, back from the Instagram link */
  .sheet .okl .ck { width: 16px; height: 16px; flex: none; color: #5cc29a; }
  .sheet .okl b { color: var(--ink); font-weight: 500; }
  /* the crafts: a full-width row each, in the field's size; a picked one sits on the grey fill with a check */
  .crafts { display: flex; flex-direction: column; gap: 2px; }
  .craft { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 44px; padding: 0 14px; border-radius: var(--r-float); font-size: 16px; color: var(--ink); text-align: left; }
  .craft .ck { width: 18px; height: 18px; flex: none; visibility: hidden; }
  @media (hover: hover) { .craft:hover { background: var(--tab-hover); } }
  .craft[aria-pressed="true"] { background: var(--tab-on); }
  .craft[aria-pressed="true"] .ck { visibility: visible; }
  .craft[disabled] { opacity: .35; cursor: default; }                  /* two picked: the rest grey out */
  .craft[disabled]:hover { background: none; }
  .crafts.bad .craft { color: var(--red); }                            /* Next with no craft picked: the crafts say so in red */
  /* the action: full width under the field, the size of Continue with Google */
  .cta { display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; margin-top: 16px; border-radius: var(--r-float); background: var(--ink); color: var(--white); font-size: 14px; font-weight: 600; }
  .cta:hover { background: #3b3a33; }
  .quiet { font-size: 13px; color: var(--secondary); }
  .quiet a { color: var(--action); }
  .fine { font-size: 12px; line-height: 16px; color: var(--secondary); text-align: center; margin: 14px 0 0; }
  .fine a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }   /* Terms and Privacy Policy in the cursive, the line clear of the letters */

  /* ── the sign-in: a card over a dim on the desk, inquiry.new's floating card on the phone; both glide in ── */
  .dim { position: fixed; inset: 0; z-index: 40; background: rgba(38,37,30,.28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s; }
  .dim.in { opacity: 1; }
  .dim[hidden] { display: none; }
  .sheet { position: fixed; z-index: 41; left: 50%; top: 50%; transform: translate(-50%, calc(-50% + 12px)); opacity: 0; width: min(448px, calc(100% - 32px)); background: var(--white); border-radius: var(--r-card); box-shadow: var(--shadow-column); padding: 24px; transition: transform .45s var(--ease), opacity .3s; }
  .sheet.in { transform: translate(-50%, -50%); opacity: 1; }
  .sheet[hidden] { display: none; }
  /* every card is the warm dark card in both themes, like the menu (the phone's by night): its own inks, so a field,
     a tab or the Google button inside it reads the same by day and by night */
  .sheet { --ink: #edecec; --white: #1b1913; --quiet: #26241e; --hairline: rgba(237,236,236,.1); --muted-on-ink: #d7d6d5; --secondary: rgba(237,236,236,.6); --faint: rgba(237,236,236,.4); --tab-on: rgba(237,236,236,.1); --tab-hover: rgba(237,236,236,.05); color: var(--ink); border: 1px solid var(--hairline); }
  .sheet .btn-white img { filter: invert(1); }                         /* the Google mark: white on the dark card */
  .sheet .cta:hover { background: #d7d6d5; }
  /* every card breathes the same way: the title, 8 of air, its line, 20 of air, then the field or the action */
  .sheet .t { font-size: 18px; font-weight: 600; margin: 0 0 18px; }
  .sheet .t.c { text-align: center; }                                  /* Sign in: the title alone, centred */
  .sheet .l { font-size: 14px; line-height: 20px; color: var(--secondary); margin: -10px 0 20px; }   /* an instruction or the reason for an error; no decorative subtitles */
  .sheet .l:empty { display: none; }
  .sheet .quiet { display: block; margin: 0 0 0 auto; color: var(--held); font-weight: 500; }   /* Resend the email: at the right, in the apricot */
  /* a card's lines rise in, one after another, never a cut; following the keys, a card moves at their pace */
  @keyframes rise { from { opacity: 0; transform: translateY(6px); } }
  .sheet.in > * { animation: rise .35s var(--ease) both; }
  .sheet.in > :nth-child(2) { animation-delay: .04s; } .sheet.in > :nth-child(3) { animation-delay: .08s; } .sheet.in > :nth-child(4) { animation-delay: .12s; }
  .sheet.kb { transition-duration: .3s; }
  @media (max-width: 799px) {
    /* the phone card (inquiry.new's R03): 16 in from each side, 29 off the bottom, r 20, the column's shadow, 20 in.
       It rises from below the screen, and with the keys up it floats 8 above them (F15), gliding as they come and go. */
    .sheet { top: auto; bottom: calc(29px + var(--kb, 0px)); left: 16px; right: 16px; width: auto; padding: 20px; transform: translateY(calc(100% + 40px)); }
    .sheet.in { transform: none; }
    html.keys .sheet { bottom: calc(var(--kb, 0px) + 8px); }
  }

  /* ── Human / Agent: bottom right, on the desk and the phone alike (as in the inbox) ── */
  .toggle { position: fixed; right: 20px; bottom: 20px; z-index: 10; display: inline-flex; align-items: center; gap: 2px; padding: 2px; background: rgba(38,37,30,.04); border: 1px solid rgba(38,37,30,.11); border-radius: var(--r-field); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); font-size: 12px; line-height: 15px; font-weight: 500; }
  .toggle button { display: inline-flex; align-items: center; justify-content: center; width: 60.5px; height: 18px; border-radius: 6px; color: var(--secondary); }
  .toggle button[aria-pressed="true"] { background: var(--white); color: var(--ink); box-shadow: var(--shadow-pill); cursor: default; }
  @media (max-width: 799px) { .toggle { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); } }   /* above the iPhone's home bar */
  html.keys .toggle { display: none; }   /* gone while the phone's keys are up */

  /* the Agent state: what an agent sees at the root */
  html.machine { background: var(--machine); color: var(--machine-text); }
  html.machine .toggle { background: rgba(237,236,236,.1); border-color: rgba(237,236,236,.16); }
  html.machine .toggle button { color: var(--machine-text); }
  html.machine .toggle button[aria-pressed="true"] { color: var(--ink); }
  html.machine .top, html.machine .landing { display: none; }
  .mach { display: none; max-width: 720px; margin: 0 auto; padding: 48px 20px 120px; }
  html.machine .mach { display: block; }
  .mach .block { position: relative; padding: 20px 20px 40px 36px; font-family: var(--mono); font-size: 11px; line-height: 16px; white-space: pre-wrap; overflow-wrap: anywhere; }
  .mach .block::before { content: ""; position: absolute; left: 24px; top: 0; bottom: 0; width: 1px; background: rgba(237,236,236,.2); }

  /* the toast, uppercase CC's shape in a light butter, the same by day and by night: a card at the top, an icon, the words, a ×; gone after three seconds */
  .toast { position: fixed; top: calc(12px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 50; display: none; align-items: center; gap: 10px; width: min(360px, calc(100% - 32px)); padding: 12px 10px 12px 14px; border-radius: var(--r-float); background: #fff7dc; color: #26251e; border: 1px solid rgba(38,37,30,.08); box-shadow: var(--shadow-column); font-size: 13px; line-height: 18px; font-weight: 500; }
  .toast.on { display: flex; }
  .toast span { flex: 1; }
  .toast .x { flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: rgba(38,37,30,.6); }
  .toast .x:hover { background: rgba(38,37,30,.06); color: #26251e; }

  /* the dark theme, Cursor's by night (as in inbox.css): cards a shade lighter, ink #edecec seen through for the quieter
     words, the blue pills faded into the page; the mark swaps to its white file */
  @media (prefers-color-scheme: dark) {
    :root { --ink: #edecec; --ground: #14120b; --white: #1b1913; --quiet: #26241e; --hairline: rgba(237,236,236,.1); --muted-on-ink: #d7d6d5; --secondary: rgba(237,236,236,.6); --faint: rgba(237,236,236,.4); --fold: rgba(237,236,236,.5); --tab-on: rgba(237,236,236,.1); --tab-hover: rgba(237,236,236,.05);
      --pale: #1c293a; --details: rgba(58,131,247,.2); }
    .dim { background: rgba(0,0,0,.5); }
    .bubble { background: #2b2923; }                                        /* a draft's grey by night; the box takes --pale, the published blue */
    .cta:hover { background: #d7d6d5; }
    .btn-white img { filter: invert(1); }                                   /* the Google mark is monochrome: white on the dark button */
    img[src*="mark-openai"] { filter: invert(1); }                          /* so is ChatGPT's: white by night */
    .toggle { background: rgba(237,236,236,.06); border-color: rgba(237,236,236,.14); }
    .toggle button[aria-pressed="true"], html.machine .toggle button[aria-pressed="true"] { background: rgba(237,236,236,.14); color: #edecec; box-shadow: none; }
  }