/* Two schemes, one set of names. The light look is the product's; the dark one follows the reader's system setting
     (Isaac asked for it, 2026-09-17), and the same variables carry both, so a screen written in these names needs
     nothing else. A page whose look the couple chose (the invitation, the wedding site) says data-scheme="light" on
     <html> and stays out of it. Print is always light. Every pair below clears WCAG AA in both schemes; smoke.mjs checks. */
  :root {
    color-scheme: light;
    --ground: #faf9f6;
    --surface: #ffffff;
    --panel: #f2f1eb;
    --ink: #26282c;
    --ink-soft: #5c5f58;
    --ink-faint: #8a8d84;
    --line: #e2e0d7;
    --accent: #3e6553;                                                  /* text and outlines in the product's green */
    --accent-strong: color-mix(in srgb, var(--accent) 92%, white);      /* a filled control with white on it: the top of a button, a ✓ */
    --accent-deep: #2f4f40;                                             /* the bottom of that gradient */
    --accent-soft: #e7eee8;                                             /* a tint to sit on */
    --accent-ink: #2f4f40;                                              /* text on the tint */
    --rose: #a96a72;
    --rose-strong: #a96a72;                                             /* a filled rose control with white on it */
    --rose-soft: #f4e9ea;
    --rose-ink: #8e535b;                                                /* an error line */
    --gold-ink: #8a6d2e;                                                /* the season-pass template chip */
    --code-bg: rgba(38,40,44,.07);
    --toast-link: #9dc3ac;                                              /* Undo on the toast (ink-coloured) */
  }
  @media screen and (prefers-color-scheme: dark) {
    html:not([data-scheme="light"]) {
      color-scheme: dark;
      --ground: #161715;
      --surface: #1e201e;
      --panel: #262826;
      --ink: #e8e6df;
      --ink-soft: #b4b4ab;
      --ink-faint: #878a80;
      --line: #34362f;
      --accent: #7db496;
      --accent-strong: #4a7d62;
      --accent-deep: #2f4f40;
      --accent-soft: #22332a;
      --accent-ink: #b6d9c5;
      --rose: #d49aa2;
      --rose-strong: #a96a72;
      --rose-soft: #3a2a2d;
      --rose-ink: #e2adb4;
      --gold-ink: #d9be7a;
      --code-bg: rgba(255,255,255,.09);
      --toast-link: #2f4f40;
    }
  }
  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: "Instrument Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    letter-spacing: -0.011em;
    -webkit-font-smoothing: antialiased;
  }
  .font-display { font-family: "Fraunces", Georgia, serif; }
  button { font: inherit; border: none; background: none; cursor: pointer; color: inherit; padding: 0; }
  input, textarea, select { font: inherit; color: var(--ink); }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  .card {
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
    border-radius: 1.25rem;
    box-shadow: 0 1px 2px rgba(38,40,44,.05), 0 10px 30px -12px rgba(38,40,44,.12);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .card-hover { cursor: pointer; }
  .card-hover:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    box-shadow: 0 2px 4px rgba(38,40,44,.05), 0 18px 40px -14px rgba(38,40,44,.18);
  }
  .frost {
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
  }
  .btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    border-radius: 9999px;
    background: linear-gradient(180deg, var(--accent-strong), var(--accent-deep));
    color: #fff; font-weight: 500; padding: .625rem 1.25rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(38,40,44,.2),
      0 8px 20px -8px color-mix(in srgb, var(--accent) 55%, transparent);
    transition: transform .15s ease, filter .2s ease;
  }
  .btn-primary:hover { filter: brightness(1.06); }
  .btn-primary:active { transform: scale(.97); }
  .btn-quiet {
    display: inline-flex; align-items: center; border-radius: 9999px;
    padding: .375rem .875rem; font-size: .875rem; font-weight: 500;
    color: var(--accent-ink); background: var(--accent-soft);
    transition: transform .15s ease, filter .15s ease;
  }
  .btn-quiet:hover { filter: brightness(.97); }
  .btn-quiet:active { transform: scale(.96); }
  .field {
    border-radius: .875rem; border: 1px solid var(--line); background: var(--ground);
    padding: .625rem .875rem; outline: none; width: 100%;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  }
  .field:focus {
    border-color: var(--accent); background: var(--surface);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
  }
  .avatar {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9999px; font-weight: 600; color: #fff; flex-shrink: 0;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent-strong) 85%, white), var(--accent-deep));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
    user-select: none;
  }
  .avatar-rose {
    background: linear-gradient(135deg, color-mix(in srgb, var(--rose-strong) 80%, white),
      color-mix(in srgb, var(--rose-strong) 75%, black));
  }
  .badge {
    border-radius: 9999px; background: var(--accent-soft); color: var(--accent-ink);
    padding: .25rem .75rem; font-size: .75rem; font-weight: 600; white-space: nowrap;
  }
  .eyebrow {
    font-size: .72rem; font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: var(--accent);
  }
  @keyframes msg-in {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  .msg-in { animation: msg-in .28s cubic-bezier(.2,.9,.3,1.2) both; }
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } }
  @keyframes word-in { from { opacity: 0; } }   /* the word's own view: the room dims a little, the word arrives as a line does */
  .rise { animation: rise .45s ease both; }
  @keyframes blink { 0%,80%,100% { opacity: .25; } 40% { opacity: 1; } }
  .typing span {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--ink-faint); margin-right: 3px; animation: blink 1.2s infinite;
  }
  .typing span:nth-child(2) { animation-delay: .2s; }
  .typing span:nth-child(3) { animation-delay: .4s; }
  @media (prefers-reduced-motion: reduce) {
    .msg-in, .rise, .typing span { animation: none; }
  }

  /* ---------- layout ---------- */
  #app { min-height: 100vh; min-height: 100dvh; }
  .screen { min-height: 100vh; min-height: 100dvh; }
  .center-col {
    max-width: 28rem; margin: 0 auto; padding: 1.5rem;
    min-height: 100vh; min-height: 100dvh;
    display: flex; flex-direction: column; justify-content: center; gap: 1.5rem;
  }
  .hero-blob { position: absolute; border-radius: 50%; filter: blur(64px); pointer-events: none; z-index: 0; }

  .shell { display: flex; min-height: 100vh; min-height: 100dvh; }
  .main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
  .zone { display: contents; }   /* a zone of the three-zone layout is a paint boundary, not a box: its children sit in .main as before */
  .main-head {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; gap: .5rem;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
    padding: .875rem 1.5rem;
  }
  .feed { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem; }
  .feed-inner { max-width: 48rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
  .msg { display: flex; align-items: flex-end; gap: .625rem; max-width: 100%; }
  .msg.mine { align-self: flex-end; flex-direction: row-reverse; }
  .msg-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; font-size: .75rem; color: var(--ink-faint); margin-bottom: .125rem; }   /* wraps: the tools row (Reply, Heart, Copy, Hide, Hide <voice>) is wider than a phone */
  .msg.mine .msg-meta { justify-content: flex-end; }
  .msg-meta b { color: var(--ink-soft); }
  .msg-tools { display: inline-flex; flex-wrap: wrap; gap: .4rem; margin-left: .25rem; opacity: 0; transition: opacity .15s; }
  .msg:hover .msg-tools, .msg:focus-within .msg-tools { opacity: 1; }
  @media (hover: none) { .msg-tools { opacity: .7; } }
  .msg-tools button { font: inherit; color: var(--ink-faint); text-decoration: underline; background: none; border: 0; padding: 0; cursor: pointer; }
  .msg-tools button:hover { color: var(--ink); }
  .msg-tools button.danger { color: var(--rose); }
  /* narration: the room telling you something happened — one quiet line, no avatar, no bubble (docs/HERE.md) */
  .narr { align-self: center; max-width: 100%; text-align: center; font-size: .74rem; color: var(--ink-faint); line-height: 1.55; padding: 0 .5rem; border-radius: 8px; overflow-wrap: anywhere; }
  .narr + .narr { margin-top: -.55rem; }
  .narr-edge { color: var(--ink-faint); }   /* the edge of the map (docs/HERE.md, piece 9, open 5): the interval's own margin, a dashed rule on the side the map goes on */
  .narr-edge-before { border-bottom: 1px dashed var(--line); padding-bottom: .55rem; }
  .narr-edge-after { border-top: 1px dashed var(--line); padding-top: .55rem; }
  .narr + .narr-edge-after, .narr-edge-before + .narr { margin-top: 0; }
  .narr .narr-who, .narr b { color: var(--ink-soft); font-weight: 600; }
  .narr .narr-body { color: var(--ink-soft); }
  .narr a { color: inherit; text-decoration: none; }
  .narr a:hover { text-decoration: underline; }
  .narr button.narr-more { font: inherit; color: var(--accent-ink); text-decoration: underline; background: none; border: 0; padding: 0; cursor: pointer; }
  .narr .msg-tools { margin-left: .4rem; }
  .narr:hover .msg-tools, .narr:focus-within .msg-tools { opacity: 1; }
  /* the big ✓ (docs/HERE.md, piece 6): one's own ack, at the bubble's side, opposite the avatar — the loudest control a line has */
  .ack-big { flex-shrink: 0; align-self: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink-faint); font-size: 1.15rem; font-weight: 700; line-height: 1; cursor: pointer; transition: color .15s, border-color .15s, background .15s, transform .15s; }
  .ack-big:hover, .ack-big:focus-visible { color: #fff; background: var(--accent-strong); border-color: var(--accent-strong); transform: scale(1.06); }
  /* the trio (piece 8): ✓ ★ ↩ the same size, the same side, top to bottom; ★ lit while it stands; ✓ on a star asks first (ack-sure) */
  .ack-pair { flex-shrink: 0; align-self: center; display: flex; flex-direction: column; gap: .3rem; }
  .ack-star, .narr button.narr-star { font-size: 1rem; }
  .ack-star:hover, .ack-star:focus-visible, .narr button.narr-star:hover, .ack-star.on, .narr button.narr-star.on { background: var(--rose); border-color: var(--rose); color: #fff; }
  .ack-reply, .narr button.narr-reply { font-size: 1rem; font-weight: 500; }
  .ack-reply.on, .narr button.narr-reply.on { background: var(--accent); border-color: var(--accent); color: #fff; }   /* ↩ lit while the word is in the composer's set (piece 12) */
  .ack-sure, .narr button.ack-sure { border-color: var(--rose); color: var(--rose); }
  .narr button.narr-tick { font: inherit; font-weight: 700; color: var(--ink-faint); background: none; border: 1px solid var(--line); border-radius: 50%; width: 1.35rem; height: 1.35rem; line-height: 1; padding: 0; cursor: pointer; vertical-align: middle; }
  .narr button.narr-tick:hover { color: #fff; background: var(--accent-strong); border-color: var(--accent-strong); }
  .msg-meta a.msg-time { color: inherit; text-decoration: none; }
  .msg-meta a.msg-time:hover { text-decoration: underline; }
  /* the word is one box (docs/HERE.md, piece 10): the body and its files; its two edges in the thread — the quote above, the
     replies below — stand outside it, the way the quote stood before the box (Isaac, 2026-09-20 18:23: handles, not caps) */
  .word-col { min-width: 0; max-width: 28rem; }   /* the column is the box's width: its meta wraps and its edges take what the box gives, so nothing sets a wider column the box then sits at one side of (Isaac, 2026-09-20 18:53: the reader's own box left of its edges) */
  .word {
    max-width: 28rem; border-radius: 1.5rem;
    padding: .625rem 1rem; font-size: .95rem; line-height: 1.5;
    box-shadow: 0 1px 2px rgba(38,40,44,.05), 0 10px 30px -12px rgba(38,40,44,.12);
    overflow-wrap: break-word;
  }
  .msg.mine .word {
    border-bottom-right-radius: .375rem; color: #fff;
    background: linear-gradient(180deg, var(--accent-strong), var(--accent-deep));
  }
  .msg:not(.mine) .word {
    border-bottom-left-radius: .375rem; background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  }
  .bubble { white-space: pre-wrap; }
  .word-edit { margin: 0 -.5rem; }
  /* an edge: a word drawn as itself, one tap opening it; the same shape above the box (what this answers) and below it (what answers it) */
  .word-quote { display: block; width: 100%; max-width: 22rem; contain: inline-size; text-align: left; font: inherit; font-size: .74rem; line-height: 1.45; color: var(--ink-soft); background: var(--panel); border: 0; border-left: 3px solid var(--line); border-radius: 8px; padding: .3rem .6rem; margin: .05rem 0 .3rem; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .word-quote-off { color: var(--ink-faint); background: none; border-left: 0; padding: 0; cursor: default; white-space: normal; }
  .msg.mine .word-quote { margin-left: auto; }
  .msg.mine .word-quote-off { text-align: right; }
  .word-files { display: flex; gap: .35rem; flex-wrap: wrap; }
  .bubble + .word-files, .word-edit + .word-files { margin-top: .45rem; }
  .word-more { font-size: .72rem; margin-top: .3rem; }
  .word-more button { font: inherit; color: var(--accent-ink); text-decoration: underline; background: none; border: 0; padding: 0; cursor: pointer; }
  .msg.mine .word-more button { color: rgba(255,255,255,.9); }
  .word-replies { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; margin-top: .3rem; max-width: 100%; }   /* the bottom edge: each reply as itself, the top edge's shape, under the box */
  .msg.mine .word-replies { align-items: flex-end; }
  .word-replies .word-quote { margin: 0; }
  .bubble a { color: inherit; text-decoration: underline; overflow-wrap: anywhere; }
  .bubble code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85em; padding: .05em .3em; border-radius: 4px; background: var(--code-bg); }
  .msg.mine .bubble code { background: rgba(255,255,255,.18); }
  .bubble pre { margin: .5em 0; padding: .5em .75em; border-radius: .6rem; overflow-x: auto; background: var(--code-bg); white-space: pre; }
  .msg.mine .bubble pre { background: rgba(255,255,255,.14); }
  .bubble pre code { padding: 0; background: none; font-size: .82em; }
  .bubble blockquote { margin: 1.5em 0; padding: 0 0 0 .7em; border-left: 3px solid color-mix(in srgb, var(--ink) 18%, transparent); color: var(--ink-soft); }
  .msg.mine .bubble blockquote { border-left-color: rgba(255,255,255,.45); color: rgba(255,255,255,.85); }
  .bubble ul, .bubble ol { margin: .5em 0; padding-left: 1.4em; }
  .bubble li { margin: .1em 0; }
  .bubble h4, .bubble h5, .bubble h6 { margin: .6em 0 .2em; font-size: 1em; line-height: 1.35; }
  .bubble h4 { font-size: 1.1em; }
  .bubble hr { border: 0; border-top: 1px solid color-mix(in srgb, var(--ink) 15%, transparent); margin: .5em 0; }
  .msg.mine .bubble hr { border-top-color: rgba(255,255,255,.4); }
  .bubble .md-first { margin-top: 0; }                                     /* a block at the bubble's edge sits on its padding */
  .bubble .md-last { margin-bottom: 0; }
  .dock { position: sticky; bottom: 0; }
  .latest { display: none; position: absolute; left: 50%; bottom: calc(100% + .6rem); transform: translateX(-50%); z-index: 5; font-size: .74rem; border: 1px solid var(--line); border-radius: 9999px; padding: .18rem .65rem; color: var(--ink-soft); background: var(--surface); white-space: nowrap; cursor: pointer; box-shadow: 0 6px 18px -8px rgba(0,0,0,.35); }   /* a chip's shape, not its class: the tests read .goto-chip as the tabs */
  .latest:hover { border-color: var(--ink-faint); color: var(--ink); }   /* ↓ Latest (Abe, 2026-10-03): the way down to the newest line, above the dock, only while the reader is scrolled up from it; a tap scrolls there and it goes */
  .dock.away .latest { display: inline-flex; }
  .on-page .latest { display: none; }   /* on a page the stream is under the sheet; nothing to jump in */   /* on a page too, since the stream is under every page (2026-10-01): the page is the HUD risen, a sheet over the stream's latest lines */
  .hud.sheet { padding: 0; display: flex; flex-direction: column; max-height: 82vh; max-height: min(82dvh, calc(100dvh - 10rem)); background: var(--surface); box-shadow: 0 -14px 32px -22px rgba(0,0,0,.35); }   /* a page as the sheet: its own header, then its scroller; the stream shows above it */
  .hud.sheet .main-head { position: static; flex: none; }
  .hud.sheet .page-scroll { flex: 1; min-height: 0; overflow-y: auto; }
  /* the HUD and the composer, one block stuck to the bottom of the window; the HUD rises from behind the composer (the three-zone layout, docs/DECISIONS.md 2026-10-01) */
  .hud { border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); padding: 0 1.5rem; }
  .hud-line { display: flex; align-items: center; gap: .6rem; width: 100%; max-width: 48rem; margin: 0 auto; padding: .45rem 0; font-size: .76rem; color: var(--ink-faint); text-align: left; cursor: pointer; }
  .hud-line b { color: var(--ink-soft); font-weight: 600; }
  .hud-bits { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: .35rem .45rem; align-items: baseline; }
  .hud-dot { color: var(--line); }
  .hud-caret { font-size: .95rem; line-height: 1; color: var(--ink-faint); }
  .hud-panels { max-width: 48rem; margin: 0 auto; padding: .35rem 0 1rem; max-height: 60vh; overflow-y: auto; }
  .hud-dial { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .3rem; padding: .1rem 0 .8rem; font-size: .72rem; }   /* the dial (docs/HERE.md, piece 13), the sheet's first row: the HUD tunes how the stream presents */
  .hud-dial-label { color: var(--ink-faint); margin-right: .2rem; }
  .hud-at { color: var(--ink-faint); }
  .hud-pares { padding-top: 0; }   /* the pares (2026-10-02): the sheet's second row, under the dial, the same form */
  .hud-pare-n { margin-left: .3rem; min-width: 1.2rem; padding: 0 .3rem; border-radius: 9999px; background: var(--rose-strong); color: #fff; font-size: .62rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
  .hud-foot { display: flex; flex-direction: column; gap: .35rem; padding: 1rem 0 .2rem; margin-top: .9rem; border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); font-size: .74rem; color: var(--ink-faint); }   /* the sheet's last rows (2026-10-02): the room's own line, then who is reading and their own doors */
  .hud-room { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .45rem; } .hud-room b { color: var(--ink); font-size: .85rem; }
  .hud-you { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; }
  .hud-doors { display: inline-flex; flex-wrap: wrap; gap: .25rem; margin-left: auto; }
  .hud-fine { font-size: .66rem; color: var(--ink-faint); }   /* the fine print the account menu carried, until the sidebar went (2026-10-02) */
  .device { }   /* the hand-held (Isaac's pitch, 2026-10-01): the HUD and its tabs, one box; the HUD rises above the row, which stays put */
  .concrete { border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); background: var(--surface); }   /* the concrete block (the three-zone layout): the way out, then the composer, one box */
  .goto { padding: .45rem 1.5rem .55rem; }   /* the HUD's tabs (2026-10-02): ✦ Here and the pages as chips, one row that scrolls sideways on a phone */
  .goto-inner { max-width: 48rem; margin: 0 auto; display: flex; align-items: center; gap: .35rem; overflow-x: auto; scrollbar-width: none; font-size: .74rem; padding-bottom: .1rem; }
  .goto-inner::-webkit-scrollbar { display: none; }
  .goto-chip { flex: none; border: 1px solid var(--line); border-radius: 9999px; padding: .18rem .65rem; color: var(--ink-soft); white-space: nowrap; cursor: pointer; background: var(--surface); }
  .goto-chip:hover { border-color: var(--ink-faint); color: var(--ink); }
  .goto-chip.on { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent-ink); }
  .goto-chip.quiet { border-color: transparent; color: var(--ink-faint); }
  .goto.out { padding: .35rem 1.5rem 0; }   /* the way out alone (← Your dashboard, sign out): the concrete block's first row, at its far end as before */
  .goto.out .goto-inner { justify-content: flex-end; }
  .goto.out:last-child { padding-bottom: .5rem; }   /* a silent room has no composer under it */
  .composer { padding: 1rem 1.5rem; }
  .concrete .composer { padding-top: .5rem; }   /* under the way out, the composer sits closer */
  .zone-hud + .zone-act .composer, .main > .zone-act .composer { border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }   /* a composer with no concrete block around it keeps its own line */
  .composer-inner { max-width: 48rem; margin: 0 auto; display: flex; align-items: flex-end; gap: .75rem; }
  .composer textarea { resize: none; border-radius: 1.5rem; padding-left: 1rem; padding-right: 1rem; max-height: 10rem; min-height: 2.75rem; overflow-y: auto; }
  .composer.dropping { outline: 2px dashed var(--accent); outline-offset: -.5rem; background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface)); }

  .page-scroll { flex: 1; overflow-y: auto; padding: 2rem 1.5rem; }
  .page-inner { max-width: 48rem; margin: 0 auto; display: flex; flex-direction: column; gap: 2rem; }

  .toast {
    position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
    background: var(--ink); color: var(--ground); font-size: .875rem; font-weight: 500;
    padding: .625rem 1.25rem; border-radius: 9999px;
    box-shadow: 0 10px 30px -8px rgba(38,40,44,.4);
    z-index: 100; animation: rise .3s ease both;
  }

  .edit {
    outline: none; border-radius: 4px; cursor: text;
    padding: 0 2px; margin: 0 -2px;
    transition: background .12s ease, box-shadow .12s ease;
  }
  .edit:hover { background: color-mix(in srgb, var(--accent-soft) 60%, transparent); }
  .edit:focus { background: var(--surface); box-shadow: 0 0 0 2px var(--accent-soft); }
  .edit:empty:before { content: attr(data-ph); color: var(--ink-faint); font-style: italic; }
  @media print { .edit:empty:before { content: ""; } }
  @media print { .edit:hover, .edit:focus { background: none; box-shadow: none; } }

  @media (max-width: 640px) { .demo-pill { display: none } }
  .demo-pill {
    position: fixed; bottom: 1rem; right: 1rem; z-index: 50;
    font-size: .72rem; font-weight: 600; letter-spacing: .06em;
    color: var(--ink-faint); background: color-mix(in srgb, var(--surface) 85%, transparent);
    border: 1px solid var(--line); border-radius: 9999px; padding: .3rem .8rem;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }

  @media print {
    .demo-pill, .toast, .no-print, .on-page .feed, .on-page .goto, .on-page .concrete { display: none !important; }   /* a page prints alone: not the stream under it, not the tabs, not the block below it */
    .shell, .main { display: block; min-height: 0; }
    .dock { position: static; } .hud.sheet { display: block; max-height: none; box-shadow: none; } .hud.sheet .page-scroll { overflow: visible; }
    .page-scroll { padding: 0; overflow: visible; }
    .print-sheet .card { border: none; box-shadow: none; border-radius: 0; padding: 0; }
    body { background: #fff; }
  }

/* a preview's way back: fixed top-left, above everything; on a phone the explanation goes, so the badge at top-right never covers it */
.preview-back { position: fixed; top: 1rem; left: 1rem; z-index: 40; border-radius: 9999px; padding: .4rem 1rem; font-size: .8rem; font-weight: 600; background: #26282C; color: #FAF9F6; cursor: pointer; }
@media (max-width: 640px) { .preview-back-note { display: none; } }
/* the day-of sheet's "who to call" on a phone: one contact per block, never a sideways scroll */
@media (max-width: 640px) {
  .call-head { display: none !important; }
  .call-row { flex-direction: column !important; align-items: stretch !important; gap: .15rem !important; }
  .call-row > * { width: auto !important; text-align: left !important; }
  .call-row > button { align-self: flex-end; }
}