/* Buy or Bin — site stylesheet. Tokens follow the Buy or Bin design system. */
html { color-scheme: light dark; }
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
body { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }

/* Layout: one 720px reading column with a sticky wordmark bar. Ink on paper, one safety-yellow brand colour, four verdict colours that never carry meaning alone, and nothing that moves except the stamp. Tokens follow the Buy or Bin design system. */
  :root {
    --paper: #f1f3f4;
    --card: #ffffff;
    --card-2: #e8ebed;
    --ink: #121417;
    --ink-muted: #5b6470;
    --on-ink: #ffffff;
    --line: #d3d8dd;
    --line-strong: #7b8591;
    --brand: #ffc700;
    --on-brand: #121417;
    --buy: #007a4d;   --buy-soft: #ddf3e8;
    --swap: #0b63b6;  --swap-soft: #e2edfa;
    --wait: #9c5200;  --wait-soft: #fbeedc;
    --bin: #b5301a;   --bin-soft: #fae4df;
    --focus: #121417;
    --shadow-card: 0 1px 2px rgba(18, 20, 23, 0.06);
    --font-display: "Bricolage Grotesque", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
    --font-text: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", Arial, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
    --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-full: 999px;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --paper: #0f1115; --card: #171a20; --card-2: #20242b; --ink: #e9ecef; --ink-muted: #a5aeb8; --on-ink: #121417; --line: #2c323b; --line-strong: #6b7683;
      --brand: #ffc700; --on-brand: #121417;
      --buy: #4fd39a; --buy-soft: #0f2a1e; --swap: #7cc0ff; --swap-soft: #10233a; --wait: #ffb454; --wait-soft: #33240e; --bin: #ff8a70; --bin-soft: #3a1712;
      --focus: #ffc700; --shadow-card: none;
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --paper: #0f1115; --card: #171a20; --card-2: #20242b; --ink: #e9ecef; --ink-muted: #a5aeb8; --on-ink: #121417; --line: #2c323b; --line-strong: #6b7683;
    --brand: #ffc700; --on-brand: #121417;
    --buy: #4fd39a; --buy-soft: #0f2a1e; --swap: #7cc0ff; --swap-soft: #10233a; --wait: #ffb454; --wait-soft: #33240e; --bin: #ff8a70; --bin-soft: #3a1712;
    --focus: #ffc700; --shadow-card: none;
    color-scheme: dark;
  }

  * { box-sizing: border-box; }
  body { background: var(--paper); color: var(--ink); font-family: var(--font-text); font-size: 18px; line-height: 28px; -webkit-font-smoothing: antialiased; }
  body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--paper); }
  a { color: inherit; }
  button { font: inherit; color: inherit; }
  h1, h2, h3 { font-family: var(--font-display); font-optical-sizing: auto; text-wrap: balance; margin: 0; }
  h1 { font-size: 36px; line-height: 40px; font-weight: 800; letter-spacing: -0.01em; }
  h2 { font-size: 28px; line-height: 32px; font-weight: 800; }
  h3 { font-size: 22px; line-height: 28px; font-weight: 700; }
  @media (max-width: 480px) { h1 { font-size: 30px; line-height: 34px; } }
  p { margin: 0; }
  ul, ol { margin: 0; padding-left: 1.2em; }
  :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
  .shell { max-width: 720px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 0 64px; }

  /* Top bar */
  .top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--paper); display: flex; align-items: center; gap: 16px; padding-block: 12px; border-bottom: 1px solid var(--line); }
  .wordmark { display: inline-flex; align-items: center; gap: 0.18em; font-family: var(--font-display); font-weight: 800; font-stretch: 80%; font-optical-sizing: auto; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1; font-size: 28px; color: var(--ink); text-decoration: none; flex: 0 0 auto; }
  .wordmark .or { font-family: var(--font-text); font-weight: 600; text-transform: lowercase; letter-spacing: 0; font-size: 0.5em; line-height: 1; background: var(--brand); color: var(--on-brand); padding: 0.22em 0.5em 0.26em; border-radius: var(--radius-sm); }
  .nav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; min-width: 0; }
  .nav::-webkit-scrollbar { display: none; }
  /* The sections are plain links, so search engines can follow them; the app catches the click and draws the page in place. */
  .nav a { display: inline-flex; align-items: center; flex: 0 0 auto; padding: 6px 12px; min-height: 36px; border-radius: var(--radius-full); white-space: nowrap; text-decoration: none; color: var(--ink-muted); font-size: 16px; line-height: 24px; font-weight: 500; }
  .nav a[aria-current="page"] { color: var(--ink); background: var(--card-2); font-weight: 600; }
  .nav a .count { font-family: var(--font-mono); font-size: 12px; background: var(--brand); color: var(--on-brand); border-radius: var(--radius-full); padding: 0 6px; margin-left: 4px; }
  .who { font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--ink-muted); white-space: nowrap; flex: 0 0 auto; }
  .nav .l-short { display: none; }
  /* On a phone the five sections do not fit beside the wordmark, so the nav takes a row of its own under it, with
     shorter labels for the two long ones, rather than scrolling off the right edge. */
  @media (max-width: 600px) {
    .top { flex-wrap: wrap; gap: 4px 16px; padding-block: 8px; }
    .top .nav { flex-basis: 100%; order: 3; }
    .top .who { margin-left: auto; }
    .nav a { padding: 6px 10px; font-size: 15px; }
    .nav .l-long { display: none; }
    .nav .l-short { display: inline; }
  }
  .proto-band { font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--ink-muted); padding-block: 8px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  .proto-band b { font-weight: 500; background: var(--brand); color: var(--on-brand); padding: 1px 6px; border-radius: var(--radius-sm); }

  main { display: grid; gap: 24px; padding-block: 16px; }
  .stack { display: grid; gap: 16px; }
  .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; min-width: 0; box-shadow: var(--shadow-card); }
  .card.flat { background: transparent; border: 0; box-shadow: none; padding: 0; }
  .muted { color: var(--ink-muted); }
  .small { font-size: 16px; line-height: 24px; }
  .caption { font-size: 14px; line-height: 20px; }
  .mono { font-family: var(--font-mono); font-size: 14px; line-height: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
  .hl { background: linear-gradient(transparent 58%, var(--brand) 58%, var(--brand) 92%, transparent 92%); padding: 0 2px; }
  .lede { font-size: 22px; line-height: 32px; max-width: 70ch; }
  .prose { max-width: 70ch; }

  /* Chips */
  .chip { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--radius-sm); border: 1px solid var(--line); color: var(--ink-muted); background: var(--card); white-space: nowrap; }
  .chip.ad { border: 1.5px solid var(--ink); color: var(--ink); font-weight: 600; }
  .chip.example { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
  .chip.cat { background: var(--card-2); border-color: transparent; }
  .chip.buy { color: var(--buy); background: var(--buy-soft); border-color: transparent; font-weight: 600; }
  .chip.instead { color: var(--swap); background: var(--swap-soft); border-color: transparent; font-weight: 600; }
  .chip.wait { color: var(--wait); background: var(--wait-soft); border-color: transparent; font-weight: 600; }
  .chip.dont { color: var(--bin); background: var(--bin-soft); border-color: transparent; font-weight: 600; }
  .chip.ready { color: var(--ink); background: var(--card-2); border-color: transparent; font-weight: 600; } /* a Claude draft waits on the desk */
  .chip svg { width: 12px; height: 12px; }

  /* The stamp: word + shape + colour, never colour alone */
  .stamp { display: inline-flex; align-items: center; gap: 0.28em; font-family: var(--font-display); font-weight: 800; font-stretch: 80%; font-optical-sizing: auto; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; font-size: 56px; padding: 0.3em 0.55em 0.32em; border: 3px solid currentColor; border-radius: var(--radius-md); background: var(--card); box-shadow: inset 0 0 0 2px var(--card), inset 0 0 0 3.5px currentColor; transform: rotate(-6deg); transform-origin: 50% 50%; white-space: nowrap; }
  .stamp svg { width: 0.8em; height: 0.8em; flex: 0 0 auto; }
  .stamp.buy { color: var(--buy); }
  .stamp.instead { color: var(--swap); }
  .stamp.wait { color: var(--wait); border-radius: var(--radius-full); }
  .stamp.dont { color: var(--bin); border-radius: 0; }
  .stamp.sm { font-size: 14px; font-stretch: 85%; padding: 0.3em 0.55em; border-width: 2px; box-shadow: none; transform: rotate(-3deg); gap: 0.3em; }
  .stamp.sm svg { width: 0.9em; height: 0.9em; }
  .stamp.flat { transform: none; }
  @media (max-width: 480px) { .stamp { font-size: 44px; } }
  @media (prefers-reduced-motion: no-preference) {
    .stamp.slam { animation: slam 420ms cubic-bezier(0.2, 0.9, 0.3, 1.15) both; }
    .stamp.slam.sm { animation-duration: 300ms; }
    @keyframes slam { 0% { transform: rotate(-6deg) scale(1.6); opacity: 0; } 60% { transform: rotate(-6deg) scale(0.96); opacity: 1; } 100% { transform: rotate(-6deg) scale(1); opacity: 1; } }
  }
  @media (prefers-reduced-motion: reduce) {
    .stamp.slam { animation: fadein 200ms ease-out both; }
    @keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
  }

  /* Buttons: 44px, a verb, sentence case */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: var(--radius-md); border: 1.5px solid var(--ink); background: var(--ink); color: var(--on-ink); font-family: var(--font-text); font-size: 16px; line-height: 24px; font-weight: 600; text-decoration: none; cursor: pointer; }
  .btn:hover { opacity: 0.9; }
  .btn.ghost { background: var(--card); color: var(--ink); border-color: var(--line-strong); font-weight: 500; }
  .btn.brand { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
  .btn.sm { min-height: 36px; padding: 6px 12px; font-size: 14px; line-height: 20px; }
  .btn svg { width: 18px; height: 18px; }
  .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: default; }
  .btn .tag { font-family: var(--font-mono); font-size: 11px; line-height: 14px; letter-spacing: 0.06em; padding: 1px 5px; border-radius: 3px; border: 1px solid currentColor; }
  .link-btn { background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; color: var(--ink-muted); }

  /* Funding line: above the first link */
  .funding { font-size: 14px; line-height: 20px; color: var(--ink-muted); padding: 6px 0; border-bottom: 1px solid var(--line); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

  /* Chat front door */
  .chat { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 440px; max-height: 72vh; scroll-margin-top: 80px; scroll-margin-bottom: 16px; } /* the margins clear the sticky bar when app.js brings the panel into view */
  .chat-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
  .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--brand); color: var(--on-brand); font-family: var(--font-display); font-weight: 800; font-stretch: 80%; display: grid; place-items: center; }
  .chat-head .meta { line-height: 1.25; flex: 1 1 200px; min-width: 0; } /* takes the free width, so its line does not wrap early */
  .chat-head .meta b { display: block; }
  .toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; line-height: 20px; color: var(--ink-muted); cursor: pointer; }
  /* The conversation scrolls inside the panel. macOS hides scrollbars until you scroll, which left no sign of a question
     that had scrolled out of the top, so here the scrollbar is always drawn and an edge with more beyond it fades out
     (fadeChat in app.js sets the classes). The bar sits in the card's padding, so the bubbles still line up with the box below. */
  .messages { position: relative; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding-block: 16px;
    --top: #000; --bottom: #000; --fade: linear-gradient(var(--top), #000 24px, #000 calc(100% - 24px), var(--bottom));
    -webkit-mask-image: var(--fade); mask-image: var(--fade); }
  .messages.more-above { --top: transparent; }
  .messages.more-below { --bottom: transparent; }
  @supports selector(::-webkit-scrollbar) {
    .messages { margin-right: -16px; padding-right: 4px; scrollbar-gutter: stable;
      -webkit-mask-image: var(--fade), linear-gradient(#000, #000); mask-image: var(--fade), linear-gradient(#000, #000);
      -webkit-mask-size: calc(100% - 12px) 100%, 12px 100%; mask-size: calc(100% - 12px) 100%, 12px 100%;
      -webkit-mask-position: left top, right top; mask-position: left top, right top; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
    .messages::-webkit-scrollbar { width: 12px; }
    .messages::-webkit-scrollbar-track { background: transparent; }
    .messages::-webkit-scrollbar-thumb { background: var(--line-strong); border: 3px solid var(--card); border-radius: var(--radius-full); }
    .messages::-webkit-scrollbar-thumb:hover { background: var(--ink-muted); }
  }
  @supports not selector(::-webkit-scrollbar) { .messages { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } }
  .msg { max-width: 86%; padding: 10px 14px; border-radius: var(--radius-lg); min-width: 0; overflow-wrap: anywhere; }
  .msg.me { align-self: flex-end; background: var(--brand); color: var(--on-brand); border-bottom-right-radius: 4px; }
  .msg.bot { align-self: flex-start; background: var(--card-2); border-bottom-left-radius: 4px; }
  .msg .time { display: block; font-family: var(--font-mono); font-size: 12px; line-height: 16px; opacity: 0.75; margin-top: 4px; }
  .msg.bot .stamp.sm { margin: 2px 0 8px; }
  .msg .btn { margin-top: 8px; }
  .ticket { display: grid; gap: 4px; }
  .ticket-state { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 14px; line-height: 20px; font-weight: 500; }
  .ticket-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--wait); flex: 0 0 auto; }
  .ticket.done .ticket-dot { background: var(--buy); }
  .ticket.closed .ticket-dot { background: var(--ink-muted); }
  .ticket.failed .ticket-dot { background: var(--bin); }
  .typing { align-self: flex-start; color: var(--ink-muted); font-size: 14px; line-height: 20px; padding: 6px 14px; }
  .composer { display: flex; gap: 8px; padding: 12px; margin-top: 12px; background: var(--card); border: 1.5px solid var(--line-strong); border-radius: var(--radius-lg); }
  .composer textarea { flex: 1; min-width: 0; resize: none; border: 0; background: transparent; color: var(--ink); font: 400 18px/28px var(--font-text); padding: 8px 4px; min-height: 44px; max-height: 120px; }
  .composer textarea::placeholder { color: var(--ink-muted); }
  .starters { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 12px; }
  .starters button { background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-full); padding: 8px 14px; min-height: 40px; font-size: 16px; line-height: 24px; cursor: pointer; color: var(--ink); }
  .starters button:hover { border-color: var(--ink); }
  /* On a phone the six starters would stand taller than the panel allows, pushing the composer out of the card over the
     text below it; there they become one row that scrolls sideways, as suggestion chips do. */
  @media (max-width: 600px) {
    .starters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -4px; padding-inline: 4px; }
    .starters::-webkit-scrollbar { display: none; }
    .starters button { flex: 0 0 auto; white-space: nowrap; max-width: 85vw; overflow: hidden; text-overflow: ellipsis; }
    .chat { scroll-margin-top: 112px; } /* the sticky bar is two rows here */
    .composer { align-items: flex-end; } /* two lines of placeholder fit; Send stays 44px at the bottom right */
    .composer textarea { min-height: 72px; }
  }

  /* Verdict page */
  .verdict-hero { display: grid; gap: 16px; }
  .verdict-hero .stamp-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
  .asked { color: var(--ink-muted); font-size: 16px; line-height: 24px; }
  .pick { display: grid; gap: 12px; }
  .pick .name { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 30px; margin: 0; }
  .price { font-family: var(--font-mono); font-size: 14px; line-height: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
  .pick ul { display: grid; gap: 4px; }
  .pick li::marker { color: var(--buy); }
  .box { border-radius: var(--radius-lg); padding: 16px 20px; display: grid; gap: 8px; }
  .box h3 { font-size: 18px; line-height: 24px; }
  .box.unpaid { border: 2px dashed var(--ink); background: var(--card); }
  .box.how { background: var(--card-2); }
  .box.wait { background: var(--wait-soft); }
  .box.dont { background: var(--bin-soft); }
  .box.instead { background: var(--swap-soft); }
  .box.buy { background: var(--buy-soft); }
  .kept-figure { font-family: var(--font-display); font-weight: 800; font-size: 36px; line-height: 40px; font-variant-numeric: tabular-nums; }
  .kept-def { color: var(--ink-muted); font-size: 14px; line-height: 20px; flex: 1; min-width: 200px; }
  .kept-meter { height: 10px; background: var(--card-2); border-radius: var(--radius-full); overflow: hidden; }
  .kept-meter i { display: block; height: 100%; background: var(--buy); border-radius: var(--radius-full); }
  .share { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .share-note { font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--ink-muted); overflow-wrap: anywhere; }
  .disclosure { font-size: 14px; line-height: 20px; color: var(--ink-muted); border-top: 1px solid var(--line); padding-top: 12px; }
  .signoff { font-family: var(--font-mono); font-size: 14px; line-height: 20px; color: var(--ink-muted); }

  /* Lists and tables */
  .feed-item { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; cursor: pointer; }
  .feed-item:last-child { border-bottom: 0; }
  .feed-item .need { font-weight: 600; }
  .feed-item .pickname { color: var(--ink-muted); font-size: 16px; line-height: 24px; }
  .filters { display: flex; gap: 8px; flex-wrap: wrap; }
  .filters button { background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-full); padding: 4px 14px; min-height: 36px; font-size: 16px; line-height: 24px; cursor: pointer; }
  .filters button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
  .search { width: 100%; border: 1.5px solid var(--line-strong); border-radius: var(--radius-md); padding: 8px 12px; background: var(--card); color: var(--ink); font: 400 16px/24px var(--font-text); min-height: 44px; }
  .tbl-wrap { overflow-x: auto; }
  table { border-collapse: collapse; width: 100%; font-size: 16px; line-height: 24px; }
  th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
  th { font-family: var(--font-mono); font-size: 12px; line-height: 16px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); font-weight: 500; }
  td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
  .code-list { display: grid; gap: 12px; counter-reset: clause; padding: 0; }
  .code-list li { list-style: none; display: grid; grid-template-columns: 2.4rem 1fr; gap: 8px; }
  .code-list li::before { counter-increment: clause; content: counter(clause); font-family: var(--font-display); font-weight: 800; font-size: 24px; color: var(--ink-muted); line-height: 1.1; }
  .code-list b { display: block; }

  /* Desk */
  .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
  .stat { background: var(--card-2); border-radius: var(--radius-md); padding: 10px 12px; }
  .stat .v { font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 32px; font-variant-numeric: tabular-nums; }
  .stat .l { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
  .queue-item { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px; display: grid; gap: 8px; font-size: 16px; line-height: 24px; }
  .queue-item .q { font-weight: 500; overflow-wrap: anywhere; }
  form.vform { display: grid; gap: 10px; font-size: 16px; line-height: 24px; }
  .field { display: grid; gap: 4px; }
  .field label { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
  .field input, .field textarea, .field select { width: 100%; border: 1.5px solid var(--line-strong); border-radius: var(--radius-md); padding: 8px 10px; background: var(--card); color: var(--ink); font: 400 16px/24px var(--font-text); min-height: 44px; }
  .field textarea { min-height: 72px; resize: vertical; }
  .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  @media (max-width: 520px) { .grid2 { grid-template-columns: 1fr; } }
  .notice { font-size: 16px; line-height: 24px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--card-2); }
  .notice.ok { background: var(--buy-soft); }
  .notice.warn { background: var(--wait-soft); }
  .notice.bad { background: var(--bin-soft); }
  footer { font-size: 14px; line-height: 20px; color: var(--ink-muted); padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
  footer .foot-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; }
  footer .foot-links a { color: var(--ink-muted); text-decoration: underline; text-underline-offset: 2px; }
  @media print { .top, .proto-band, .share, .composer, .starters, footer { display: none !important; } .stamp { transform: none; } }