:root {
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --bg: #f1f5f9;
  --surface: #ffffff;
  --accent: #4f46e5;
  --danger: #b42318;
  --control: #cbd5e1;
  --radius: 12px;
  --radius-control: 8px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:#0f172a;
       font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif}
  .wrap{max-width:1040px;margin:0 auto;padding:24px 20px 40px}
  /* Every screen ends with a way to reach a person, and the legal set. Prefixed
     page-, for the same reason the nav classes are prefixed nav-. */
  .page-foot{max-width:1040px;margin:0 auto;padding:0 20px 40px;font-size:12px;color:#64748b}
  .page-foot p{margin:0;padding-top:16px;border-top:1px solid #e2e5ea}
  .page-foot a{color:#64748b}

  /* THE WAY OUT OF EVERY SCREEN.
     There was no navigation anywhere in the sender app until 2026-08-31.
     Every page was a leaf: finish the send or type a URL. The first person to
     use the guided sample opened the review screen with nobody to send to and
     had no way back -- "I'm just stuck", which is exactly what a leaf screen
     with no chrome is.

     EVERY CLASS HERE IS PREFIXED nav-, and that is not house style, it is a
     bug fix. The first version called the inner element .bar, which this
     stylesheet already used for the per-page engagement bars:

         .bar{height:8px; ... ;overflow:hidden}

     ".nav .bar" never overrode height or overflow, so the navigation rendered
     8px tall with everything inside it clipped. It shipped, and the symptom
     reported was "I can only see about 10px of the top navbar."
     tests/navigation.test.mjs now refuses a nav class that any other rule in
     the same stylesheet also styles. */
  .nav{border-bottom:1px solid #e2e5ea;background:#fff}
  .nav-inner{max-width:1040px;margin:0 auto;padding:12px 20px;
    display:flex;align-items:center;gap:20px;flex-wrap:wrap;min-height:44px}
  .nav-mark{display:flex;align-items:center;color:#0f172a;text-decoration:none;
    font-weight:600;font-size:15px;margin-right:4px}
  .nav a{color:#64748b;text-decoration:none;font-size:14px}
  .nav a:hover{color:#0f172a}
  .nav a.nav-here{color:#0f172a;font-weight:500}
  /* var() IS SAFE HERE ONLY BECAUSE TOKENS IS PREPENDED ABOVE. These rules
     once used --line and --muted while this sheet defined no :root at all, and
     an undefined custom property is invalid at computed-value time: the
     settings tab strip had NO bottom border for as long as it existed and
     nothing errored. The brand pass (2026-09-01) put packages/brand's TOKENS at
     the top of this sheet, and tests/mobile.test.mjs asserts every var() used
     in a served sheet is defined in that sheet -- so the failure now has a
     test, not a comment. The older rules stay in hex; either is fine as long as
     the guard holds. */
  .subnav{display:flex;gap:18px;margin:0 0 18px;padding:0 0 10px;
    border-bottom:1px solid #e2e5ea}
  .quiet{color:#64748b;margin-left:14px;font-size:13px}
  .quiet:hover{color:#b42318}
  .subnav a{color:#64748b;text-decoration:none;font-size:14px}
  .subnav a.subnav-here{color:#0f172a;font-weight:600}
  .nav-spacer{margin-left:auto}
  .nav form{margin:0}
  @media (max-width: 640px){ .nav-inner{gap:14px;padding:10px 12px} }
  h1{font-size:22px;margin:0 0 4px}
  .sub{color:#64748b;font-size:14px;margin:0 0 28px}
  .muted{color:#64748b}
  .card{background:#fff;border:1px solid #e2e5ea;border-radius:12px;margin:0 0 20px;overflow:visible}
  .card h2{font-size:15px;margin:0;padding:16px 20px;border-bottom:1px solid #eef1f5}
  table{width:100%;border-collapse:collapse;font-size:14px}
  th{text-align:left;font-weight:500;color:#64748b;font-size:12px;
     text-transform:uppercase;letter-spacing:.04em;padding:10px 20px;border-bottom:1px solid #eef1f5}
  td{padding:12px 20px;border-bottom:1px solid #f4f6f8;vertical-align:top}
  tr:last-child td{border-bottom:0}
  tfoot td{border-top:1px solid #e2e5ea;font-weight:500;color:#0f172a}
  a{color:#0f172a}
  .title{display:block;font-weight:500}
  .meta{display:block;color:#64748b;font-size:12px;margin-top:2px}
  .pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:500}
  .ok{background:#dcfce7;color:#166534}
  .wait{background:#f1f5f9;color:#475569}
  .dead{background:#fee2e2;color:#991b1b}
  .held{background:#fef3c7;color:#92400e}
  .redacted{background:#ede9fe;color:#5b21b6}
  .chips{display:flex;flex-wrap:wrap;gap:4px}
  .bar{height:8px;background:#e2e8f0;border-radius:4px;overflow:hidden;min-width:120px}
  .bar span{display:block;height:100%;background:#0f172a}
  /* An EMPTY STATE: the whole card is this message, so it gets room. */
  .empty{padding:28px 20px;color:#64748b;font-size:14px}
  /* BODY COPY inside a card that has other content. A different thing, and it
     was being written as "empty tight" everywhere -- an empty-state style with
     its top padding canceled, which left 28px of nothing under every card
     heading and made the send flow read as half-finished. */
  .prose{padding:14px 20px 0;margin:0 0 6px;color:#475569;font-size:14px;line-height:1.6}
  .prose:last-child{padding-bottom:18px}
  .prose + .prose{padding-top:8px}
  /* A note directly inside a card sits on the card's padding, like prose. */
  .card>.note{padding:0 20px 16px;margin-top:0!important}
  .card>.controls+.note{padding-top:0}
  .prose strong{color:#0f172a}
  .controls{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;padding:16px 20px}
  .controls label{display:block;font-size:12px;color:#64748b;margin:0 0 4px}
  .controls input{padding:8px 10px;border:1px solid #cbd5e1;border-radius:8px;font:inherit;font-size:14px}
  button{padding:9px 14px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;
         font:inherit;font-size:13px;font-weight:500;cursor:pointer;color:#0f172a}
  button.danger{border-color:#fca5a5;color:#b42318}
  button:hover{background:#f8fafc}
  /* The one primary action on a screen: indigo, per the brand spec. Everything
     else stays the outlined secondary, and danger is outlined red -- a filled
     red block invites the click it should slow down. */
  button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
  button.primary:hover{background:#4338ca;border-color:#4338ca}
  form.inline{display:inline}

  /* The row menu is a <details>, not a script. Same reason the controls are
     plain forms: the dashboard has to work on the day JavaScript does not. */
  details.menu{position:relative;display:inline-block}
  details.menu>summary{list-style:none;cursor:pointer;padding:2px 8px;border-radius:8px;
    color:#64748b;font-size:16px;line-height:1;user-select:none}
  details.menu>summary::-webkit-details-marker{display:none}
  details.menu>summary:hover{background:#f1f5f9;color:#0f172a}
  details.menu[open]>summary{background:#f1f5f9}
  .sheet{position:absolute;right:0;top:26px;z-index:20;min-width:170px;background:#fff;
    border:1px solid #e2e5ea;border-radius:12px;box-shadow:0 8px 24px rgba(15,23,42,.10);padding:6px}
  .sheet a,.sheet button{display:block;width:100%;text-align:left;padding:8px 10px;border:0;
    background:none;border-radius:8px;font:inherit;font-size:13px;color:#0f172a;text-decoration:none}
  .sheet a:hover,.sheet button:hover{background:#f6f7f9}
  .sheet button.danger{color:#b42318}
  .sheet form{margin:0}

  /* ---------------------------------------------------------------------
     Utilities, and the reason they exist rather than a style="" attribute.

     The sender app's CSP is default-src 'self' with no unsafe-inline, so a
     style= attribute is REFUSED by the browser -- silently, with no visible
     error beyond a console line nobody reads on a page that merely looks
     wrong. Everything under ui/ used them until 2026-08-30.

     One exception is impossible to express as a class: the engagement bar's
     width is computed per page. It is rounded to the nearest 5% and picks a
     class from the scale below. The bar is a comparison, not a measurement --
     the seconds are printed beside it.
     ------------------------------------------------------------------- */
  .right{text-align:right}
  .grow{flex:1;min-width:220px}
  .tight{padding-top:0}
  .stack{display:block}
  .self-center{align-self:center}
  .w-half{width:55%}
  p.err,.err{color:#b42318}
  p.good,.good{color:#166534}
  .linkbox{width:100%;font-size:12px}
  .linkbox.sm{font-size:11px}
  .paste{width:100%;padding:10px;border:1px solid #cbd5e1;border-radius:8px;
    font:inherit;font-size:13px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
  .bulleted{margin:0;padding-left:18px;line-height:1.7}
  .pad-b{padding-bottom:8px}
  .wide{width:100%}
  .textarea{width:100%;padding:10px;border:1px solid #cbd5e1;border-radius:8px;
    font:inherit;font-size:14px}
  .checkline{display:flex;gap:8px;align-items:flex-start;font-size:14px;color:#0f172a}
  .checkline input{margin-top:3px}
  .bar span.p0{width:0%}
  .bar span.p5{width:5%}
  .bar span.p10{width:10%}
  .bar span.p15{width:15%}
  .bar span.p20{width:20%}
  .bar span.p25{width:25%}
  .bar span.p30{width:30%}
  .bar span.p35{width:35%}
  .bar span.p40{width:40%}
  .bar span.p45{width:45%}
  .bar span.p50{width:50%}
  .bar span.p55{width:55%}
  .bar span.p60{width:60%}
  .bar span.p65{width:65%}
  .bar span.p70{width:70%}
  .bar span.p75{width:75%}
  .bar span.p80{width:80%}
  .bar span.p85{width:85%}
  .bar span.p90{width:90%}
  .bar span.p95{width:95%}
  .bar span.p100{width:100%}

  /* The API keys screen. Folded in from api-keys.ts so that ONE fingerprint
     covers everything /app.css serves -- see APP_CSS_PATH. */
  code{background:#f1f5f9;padding:1px 5px;border-radius:4px;font-size:13px}
  .fresh{border-color:#86efac}
  .fresh h2{background:#f0fdf4;border-bottom-color:#bbf7d0}
  .freshbody{padding:16px 20px}
  .freshbody p{margin:0 0 10px;font-size:14px}
  .keyval{width:100%;padding:10px 12px;border:1px solid #cbd5e1;border-radius:8px;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;background:#f8fafc}
  .note{margin:10px 0 0!important;font-size:13px;color:#64748b;line-height:1.5}
  .hint{margin:0;padding:0 20px 16px;font-size:13px;color:#64748b;line-height:1.5}
  td select{padding:6px 8px;border:1px solid #cbd5e1;border-radius:8px;font:inherit;font-size:13px;margin-right:6px}
  .controls select{padding:8px 10px;border:1px solid #cbd5e1;border-radius:8px;
    font:inherit;font-size:14px;background:#fff}

  /* Phones. The demo audience and the first-view moment both live here, so
     this is not an afterthought. The brand spec's two rules for a phone:
     TABLES BECOME STACKED CARDS below 640px -- never a horizontally scrolling
     table -- and CONTROLS GO TO A 44px MINIMUM.

     Stacked cards, mechanically: every cell becomes a block, the header row is
     hidden visually but kept for screen readers, and a cell that carries a
     data-label attribute prints it above its value. Two tables -- the home rows
     and a share's recipients -- are laid out as designed cards instead, with
     grid areas keyed on c-* classes, because "Recipients: dana@ +2" is not the
     row the canvas drew. The row menu survives the change: it is positioned to
     details.menu, not to the row.

     The first version of this block narrowed the cell gutter to 8px and hid
     columns, measured against a 412px table inside a 364px card. The stacked
     layout removes the reason; the gutters go back to being comfortable. */
  @media (max-width: 640px) {
    .wrap{padding:20px 12px 40px}
    .page-foot{padding:0 12px 32px}
    .card h2{padding:14px 16px}
    table,tbody,tfoot,tr,td{display:block}
    thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
    tr{padding:12px 16px;border-bottom:1px solid #f4f6f8}
    tr:last-child{border-bottom:0}
    td{padding:2px 0;border:0}
    td[data-label]::before{content:attr(data-label);display:block;font-size:11px;font-weight:500;
      text-transform:uppercase;letter-spacing:.04em;color:#64748b;margin:8px 0 2px}
    td:empty{display:none}
    tfoot td{border-top:0}
    .w-half{width:auto}
    .right{text-align:left}
    .bar{min-width:0}
    /* The designed cards. */
    tr.share,tr.recipient{display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:start}
    tr.share{grid-template-areas:"title menu" "who who" "state state" "when when"}
    tr.recipient{grid-template-areas:"title menu" "state state" "meta meta"}
    td.c-title{grid-area:title}
    td.c-who{grid-area:who}
    td.c-state{grid-area:state}
    td.c-when{grid-area:when}
    td.c-menu{grid-area:menu;text-align:right}
    td.c-meta{grid-area:auto;grid-column:1 / -1}
    tr.recipient td.c-meta{display:inline-block;margin-right:16px;grid-column:auto;grid-area:auto}
    /* The 44px floor, on everything a thumb lands on. */
    button,.controls input,.controls select,td select,.sheet a,.sheet button{min-height:44px}
    td select{padding:8px 10px;border:1px solid #cbd5e1;border-radius:8px;font:inherit;font-size:14px}
    .sheet a,.sheet button{display:flex;align-items:center}
    details.menu>summary{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
    .sheet{top:44px}
    .controls{padding:14px 16px}
    .controls input,.controls select,.controls form,.controls .grow{width:100%;max-width:100%}
    .controls form button,.controls>button{width:100%}
  }