/* ===========================================================================
   dapOS PHONE - THE PRINT EDITION, NARROW.
   ===========================================================================
   REWRITTEN 2026-09-23 (owner: "why does the colors and layout and lots of
   other stuff differ SO much from my desktop version? I feel like im learning
   something new each time").

   The August sheet borrowed the desktop's tokens and then designed its own
   app with them: rounded cards, filled black buttons on every row, sentences
   set in bold mono, a navy dark mode the desktop does not have. Each was a
   phone habit, and together they made a second product.

   THE RULE NOW: the phone is the desktop at 390px. Same stock and paper, same
   three voices in the same jobs, same marks, same words. It differs ONLY
   where the screen forces it, and each of those is named here:
     1. the rail becomes a bottom bar (PupFlow's pattern: icon + label, a
        "More" sheet for the rest) - same area names as the desktop rail;
     2. tap areas grow to 44px without the marks growing (::after hit areas);
     3. two columns become one.
   Everything else is copied from ~/dapos-v3/app/globals.css and
   components/ui.tsx, which stay the authority. Values measured off the live
   desktop Now on 2026-09-23, not remembered.

   The desktop's laws, restated because this file broke them before:
     - nothing is rounded; rules instead of cards; no panel fills
     - a SENTENCE is never set in mono (serif reads, mono labels)
     - filled ink block = an action, at most one per unit of work
     - teal = state, gold = money/undecided, rust = a real clock only
     - cream only: the desktop has no automatic dark mode, so neither does this
   =========================================================================== */

@font-face { font-family: "Space Mono"; src: url("/fonts/SpaceMono.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("/fonts/SpaceMono-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Archivo Variable"; src: url("/fonts/Archivo.woff2") format("woff2-variations"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/fonts/InstrumentSerif.woff2") format("woff2"); font-weight: 400; font-display: swap; }
/* FRAUNCES (owner, 2026-09-23) - the desktop's serif now; see dapos-v3 globals.css. */
@font-face { font-family: "Fraunces Variable"; src: url("/fonts/Fraunces.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: light;
  --stock: #F5F2E8;
  --ink: #0E1320;
  --ink-soft: #2A2F3A;
  --muted: #5E5F5B;
  /* #686965, not the desktop's #6E6F6A (2026-09-23 contrast audit). The
     desktop's value is 4.52:1 on flat stock, but the page is the veiled
     paper plate (~#F3EEE1 average, #F2EBDB unveiled), where it falls to 4.27.
     This is the smallest darkening that clears 4.5:1 on the paper itself. */
  --muted-soft: var(--muted); /* one secondary grey (type pass, 2026-09-23) */
  --rule-grid: rgba(14, 19, 32, 0.16);
  --rule-sect: rgba(14, 19, 32, 0.40);
  --rule-mark: #0E1320;
  --teal: #117F86;
  --teal-text: #0F6E74;
  --gold: #F2A341;
  --gold-ink: #8A5A12;
  --rust: #C9603F;
  /* Rust AS TEXT, the way --gold-ink is gold as text: #C9603F is 3.4:1 on the
     paper, a fail for 12px warning lines. 4.60:1. Fills and marks keep --rust. */
  --rust-ink: #A75034;

  /* The three voices, resolved exactly as the desktop resolves them today
     (its licensed faces are not installed; these ARE what it renders). */
  --mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif: "Fraunces Variable", "Instrument Serif", Georgia, serif;
  --serif-wght: 350;
  --fit: "Archivo Variable", "Archivo Narrow", sans-serif;
  --fit-command: "wdth" 62, "wght" 900;
  --fit-ui: "wdth" 66, "wght" 800;
  /* Kept for markup written before this pass. */
  --command: var(--fit);
  --human: var(--serif);

  --gutter: 16px;
  --tabbar: 60px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

html { background: var(--stock); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  /* TRANSPARENT so the paper layer (body::before) shows everywhere. With a
     cream body background the texture only appeared below the content. */
  background: transparent;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  overflow-x: hidden;
  padding-bottom: calc(var(--tabbar) + var(--safe-b) + 24px);
  overscroll-behavior-y: none;
}
/* THE PAPER. Same plate and the same 50% stock veil as the desktop body. It
   is a fixed layer rather than background-attachment: fixed, which iOS
   Safari ignores (it would scroll the grain with the page). */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--stock);
  background-image:
    linear-gradient(rgba(245, 242, 232, 0.5), rgba(245, 242, 232, 0.5)),
    url("/plates/stock/paper-01.webp");
  background-size: cover, cover;
  background-position: center;
}

/* Gutters as padding, not as 100vw arithmetic: 100vw counts a scrollbar
   where one exists, which put the right edge under it. */
.wrap {
  box-sizing: border-box; width: 100%; max-width: calc(760px + var(--gutter) * 2);
  margin: 0 auto;
  padding: calc(var(--safe-t) + 12px) var(--gutter) 0;
}

/* ---- masthead ----------------------------------------------------------- */
header.top {
  display: flex; align-items: baseline; gap: 10px;
  padding: 4px 0 8px;
  border-bottom: 2px solid var(--rule-sect);
}
header.top h1 {
  font-family: var(--fit); font-variation-settings: var(--fit-command);
  font-weight: 900; font-size: 27px; line-height: 1; letter-spacing: -0.01em;
  margin: 0; text-transform: uppercase;
}
header.top .sub {
  margin-left: auto; font-size: 11px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted-soft);
}

/* The Mac's state: a datum line, not a banner. A Mac that is off is normal. */
.macbar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0 10px; margin-bottom: 6px; min-height: 44px; box-sizing: border-box;
  font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted-soft); text-decoration: none;
}
.macbar .dot { width: 7px; height: 7px; flex: 0 0 auto; background: var(--muted-soft); }
.macbar.awake .dot { background: var(--teal); }
.macbar.waiting .dot { background: var(--gold); }
.macbar .count { margin-left: auto; }

/* ---- the desktop's type roles ------------------------------------------- */
/* eyebrow: the section label */
.sect, .eyebrow {
  font-size: 11px; line-height: 1.4; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted-soft); margin: 26px 0 8px;
}
/* a zone: section label over a structural rule */
/* TYPE PASS (owner, 2026-09-23): tighter inside a group, wider between groups -
   same scale as the desktop's RHYTHM (4 / 8 / 24 / 48). */
.zone { border-top: 2px solid var(--rule-sect); padding-top: 12px; margin-top: 48px; }
.zone > .sect, .zone > .eyebrow { margin-top: 0; }
.eyebrow .aside { float: right; color: var(--muted-soft); }
/* the human line: anything he reads as a sentence */
.read { font-family: var(--serif); font-variation-settings: "wght" var(--serif-wght), "SOFT" 50; font-size: 16px; line-height: 1.5; color: var(--ink); }
/* the helper: a mono qualifier under a line */
.helper { font-size: 13px; line-height: 1.5; letter-spacing: 0.01em; color: var(--ink-soft); margin-top: 8px; }
/* The serif's axes wherever the serif is (same rule as the desktop). */
[style*="var(--serif)"] { font-variation-settings: "wght" var(--serif-wght), "SOFT" 50; }
.datum { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-soft); }
/* the command voice: once per screen at display size */
.display {
  font-family: var(--fit); font-variation-settings: var(--fit-command); font-weight: 900;
  font-size: clamp(38px, 13vw, 56px); line-height: 0.79; letter-spacing: -0.055em;
  /* The tight tracking closes the word gaps too at phone sizes; open them
     back up so GET ONE POST does not read as one word. */
  word-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink); margin: 0;
}
.fitui {
  font-family: var(--fit); font-variation-settings: var(--fit-ui); font-weight: 800;
  font-size: 19px; line-height: 1.1; letter-spacing: -0.012em; color: var(--ink);
}
/* the quiet link: the desktop's text door */
.ql, button.ql {
  display: inline-block; background: none; border: 0; border-bottom: 1px solid var(--rule-mark);
  padding: 0 0 1px; min-height: 0; border-radius: 0; flex: none;
  font-family: var(--mono); font-size: 14px; color: var(--muted); text-decoration: none;
  text-transform: none; letter-spacing: normal;
  cursor: pointer; position: relative;
}
.ql::after { content: ""; position: absolute; inset: -12px -6px; }

/* ---- a work row: [mark] line / helper ----------------------------------- */
/* A title and its own line are one object; the gap BETWEEN rows does the
   separating (owner, 2026-09-23: "the same amount of space between everything"). */
.wrow { display: flex; gap: 12px; align-items: flex-start; padding: 0; }
.wrow + .wrow { margin-top: 24px; }
.wrow.lead .line { font-size: 19px; line-height: 1.3; }
details.others { margin-top: 14px; }
details.others summary { font-size: 11px; color: var(--muted-soft); text-decoration: underline; cursor: pointer; list-style: none; }
details.others summary::-webkit-details-marker { display: none; }
details.others[open] summary { margin-bottom: 14px; }
.wrow .body { flex: 1; min-width: 0; }
.wrow .line { font-family: var(--serif); font-variation-settings: "wght" var(--serif-wght), "SOFT" 50; font-size: 16px; line-height: 1.3; color: var(--ink); }
.wrow.done .line { text-decoration: line-through; color: var(--muted-soft); }
.wrow .helper { margin-top: 3px; }
.wrow .tag { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-soft); }

/* THE MARKS. 17px squares with a 1px ink edge, exactly the desktop's; the
   44px tap area is an invisible ::after, so the mark never grows. */
.mark {
  position: relative; flex: 0 0 auto; width: 17px; height: 17px; margin-top: 3px;
  border: 1px solid var(--rule-mark); background: none; padding: 0; border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 13px; line-height: 1; color: var(--muted);
  min-height: 0; cursor: pointer; touch-action: manipulation;
}
.mark::after { content: ""; position: absolute; inset: -14px; }
.mark.on { background: var(--ink); color: var(--stock); }
.mark:disabled { opacity: 0.35; }

/* TODAY'S WIN: the one display object, on the desktop's 3px ink bar. */
.win { padding-left: 12px; border-left: 3px solid var(--ink); margin-top: 8px; }
.win .step { font-family: var(--serif); font-variation-settings: "wght" var(--serif-wght), "SOFT" 50; font-size: 15px; line-height: 1.4; color: var(--ink-soft); margin-top: 8px; }

/* readings: LABEL | reading | STATE, over grid rules */
.reading { display: flex; gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--rule-grid); }
.reading:first-of-type { border-top: 1px solid var(--rule-grid); }
.reading .k { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); min-width: 84px; flex: 0 0 auto; }
.reading .v { flex: 1; font-family: var(--serif); font-variation-settings: "wght" var(--serif-wght), "SOFT" 50; font-size: 15px; line-height: 1.35; color: var(--ink); }
.reading .s { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-soft); flex: 0 0 auto; }
.reading .s.met { color: var(--ink); }

/* Tonight: listings, the way the desktop sets them */
.night { padding: 8px 0 10px; border-bottom: 1px solid var(--rule-grid); }
.night .name { font-family: var(--serif); font-variation-settings: "wght" var(--serif-wght), "SOFT" 50; font-size: 15px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.night .blurb { font-family: var(--serif); font-variation-settings: "wght" var(--serif-wght), "SOFT" 50; font-size: 14px; line-height: 1.6; color: var(--ink); margin-top: 4px; }
.night .meta { font-size: 12px; line-height: 1.5; color: var(--ink-soft); margin-top: 4px; }
.warn { font-size: 12px; line-height: 1.5; color: var(--rust-ink); }

/* the state of a phone decision: saved, waiting for the Mac */
.chip { display: inline-block; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; padding: 1px 6px; }
.chip.wait { background: var(--gold); color: var(--ink); }
.fresh { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-soft); margin: -2px 0 8px; }

/* add a line: a field, not a panel */
form.add { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; margin: 4px 0 12px; }
form.add input[name] { flex: 1 1 100%; }
form.add .chk { white-space: nowrap; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); min-height: 44px; margin: 0; letter-spacing: 0; text-transform: none; }
form.add .chk input { width: 17px; height: 17px; min-height: 0; margin: 0; accent-color: var(--ink); }
form.add button { margin-left: auto; flex: 0 0 auto; }

/* ---- shared by Studio / Presence / pieces ------------------------------- */
.card {
  display: block; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--rule-grid);
  padding: 12px 0; min-height: 44px;
}
.card .t { font-family: var(--serif); font-variation-settings: "wght" var(--serif-wght), "SOFT" 50; font-size: 16px; line-height: 1.3; color: var(--ink); }
.card .m { font-size: 12px; line-height: 1.5; color: var(--ink-soft); margin-top: 4px; display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.card.struck .t { text-decoration: line-through; color: var(--muted-soft); }
.pill { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-soft); }
.pill.ready { color: var(--teal-text); }
.pill.wait { color: var(--gold-ink); }
.pill.posted { color: var(--muted-soft); }
.lab { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-soft); }

.strip { display: flex; gap: 6px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.strip::-webkit-scrollbar { display: none; }
.strip img, .strip .ph { width: 62px; height: 62px; flex: 0 0 auto; object-fit: cover; background: var(--rule-grid); scroll-snap-align: start; }
.slides { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
@media (min-width: 520px) { .slides { grid-template-columns: repeat(4, 1fr); } }
.slide { position: relative; aspect-ratio: 1; overflow: hidden; outline: 3px solid transparent; outline-offset: -3px; background: var(--rule-grid); }
.slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slide.sel { outline-color: var(--rule-mark); }
.slide .n { position: absolute; top: 4px; left: 4px; background: var(--stock); color: var(--ink); font-size: 11px; padding: 1px 5px; }
.slide .cover { position: absolute; top: 4px; right: 4px; background: var(--gold); color: var(--ink); font-size: 11px; padding: 1px 5px; letter-spacing: 0.06em; text-transform: uppercase; }
.slide .missing { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 11px; color: var(--muted); padding: 6px; line-height: 1.3; }
/* SLIDE TOOLS: pinned above the tab bar while a slide is selected. Remove is
   set apart (right, rust outline) and asks to confirm in app.js. */
.movebar {
  display: none; position: fixed; left: 0; right: 0; z-index: 25;
  bottom: calc(var(--tabbar) + var(--safe-b));
  background: var(--stock); border-top: 2px solid var(--rule-sect);
  padding: 8px var(--gutter); gap: 6px; align-items: center; flex-wrap: wrap;
}
body.selecting .movebar { display: flex; }
/* Two rows on a small phone (the SE cut "Make cover" off and hid Remove). */
body.selecting { padding-bottom: calc(var(--tabbar) + var(--safe-b) + 150px); }
.movebar .selinfo { flex: 1 0 100%; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.movebar button { flex: 0 0 auto; padding: 10px 11px; }
.movebar .danger { margin-left: auto; color: var(--rust-ink); border-color: var(--rust-ink); }
.cap { padding: 12px 0; border-bottom: 1px solid var(--rule-grid); }
.cap.chosen { border-left: 3px solid var(--rule-mark); padding-left: 10px; }
.cap .txt { font-family: var(--serif); font-variation-settings: "wght" var(--serif-wght), "SOFT" 50; font-size: 16px; line-height: 1.45; white-space: pre-wrap; }
.cap .style { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-soft); margin-bottom: 6px; }

/* VIEW SWITCH: outlined cells, the selected one MARKED (not filled) - the
   desktop's grammar for "a view you can switch to". */
.views { display: flex; margin: 14px 0 4px; }
.views a {
  flex: 1; text-align: center; padding: 11px 6px; min-height: 44px; box-sizing: border-box;
  border: 1px solid var(--rule-sect); margin-left: -1px; text-decoration: none;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.views a:first-child { margin-left: 0; }
.views a.on { color: var(--ink); border-bottom: 3px solid var(--rule-mark); }

/* ---- controls ------------------------------------------------------------ */
button, .btn, a.button {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  min-height: 44px; padding: 10px 14px; border-radius: 0;
  border: 1px solid var(--rule-sect); background: transparent; color: var(--ink);
  cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  touch-action: manipulation;
}
/* THE ACTION: a filled ink block. At most one per unit of work. */
button.primary, .btn.primary { background: var(--ink); color: var(--stock); border-color: var(--ink); }
button.gold, .btn.gold { background: var(--gold); color: var(--ink); border-color: var(--gold); }
button:disabled { opacity: 0.4; }
@media (hover: hover) and (pointer: fine) { button:hover, .btn:hover { border-color: var(--rule-mark); } }
.row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.row > button, .row > .btn, .row > a.button { flex: 1 1 auto; }

input, textarea, select {
  font-family: var(--mono); font-size: 16px; /* 16px: iOS zooms on anything smaller */
  width: 100%; min-height: 44px; padding: 8px 0; box-sizing: border-box;
  border: 0; border-bottom: 1px solid var(--rule-sect); border-radius: 0;
  background: transparent; color: var(--ink);
}
input:focus, textarea:focus { outline: none; border-bottom: 3px solid var(--rule-mark); }
textarea { min-height: 110px; line-height: 1.4; }
label { display: block; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-soft); margin: 14px 0 5px; }

.note { font-size: 12px; color: var(--ink-soft); line-height: 1.5; }
.empty { color: var(--muted-soft); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; padding: 14px 0; }
.err { color: var(--rust-ink); font-size: 12px; line-height: 1.5; margin-top: 8px; }
a { color: var(--ink); }
hr { border: 0; border-top: 1px solid var(--rule-grid); margin: 18px 0; }
.scrollx { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; font-size: 11px; width: 100%; }
td, th { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--rule-grid); vertical-align: top; }
td:first-child { color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
td.warn { color: var(--gold-ink); font-weight: 700; }

/* ---- THE BOTTOM BAR (PupFlow's pattern, dapOS's rail) --------------------
   Icon + label per area, the active one marked by a 3px ink bar on top (the
   desktop's --rule-w-mark), and "More" opening a sheet for the rest. The area
   names are the desktop rail's: Now, Studio, Presence - and Library and Fund
   inside More until they exist on the phone. */
nav.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; background: var(--stock);
  border-top: 2px solid var(--rule-sect);
  padding-bottom: var(--safe-b);
}
nav.tabs a, nav.tabs button {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; height: var(--tabbar); min-height: 0; padding: 0; border: 0; border-top: 3px solid transparent;
  margin-top: -2px; background: none; color: var(--muted); text-decoration: none; position: relative;
  font-family: var(--fit); font-variation-settings: var(--fit-ui); font-weight: 800;
  font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase;
}
nav.tabs svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: square; }
nav.tabs .on { color: var(--ink); border-top-color: var(--rule-mark); }
nav.tabs .badge { position: absolute; top: 6px; left: calc(50% + 8px); background: var(--gold); color: var(--ink); font-family: var(--mono); font-size: 11px; padding: 0 4px; }

.sheet-backdrop { display: none; position: fixed; inset: 0; background: rgba(14, 19, 32, 0.35); z-index: 31; }
.sheet {
  display: none; position: fixed; left: 0; right: 0; z-index: 32;
  bottom: calc(var(--tabbar) + var(--safe-b));
  background: var(--stock); border-top: 2px solid var(--rule-sect);
  padding: 6px var(--gutter) 10px; max-height: 70vh; overflow-y: auto;
}
body.more-open .sheet, body.more-open .sheet-backdrop { display: block; }
.sheet .grip { width: 38px; height: 3px; background: var(--rule-sect); margin: 6px auto 8px; }
.sheet a {
  display: flex; align-items: center; gap: 14px; min-height: 48px;
  border-bottom: 1px solid var(--rule-grid); text-decoration: none; color: var(--ink);
  font-family: var(--fit); font-variation-settings: var(--fit-ui); font-weight: 800;
  font-size: 17px; text-transform: uppercase; letter-spacing: 0.01em;
}
.sheet a svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: square; }
.sheet a .d { margin-left: auto; font-family: var(--mono); font-weight: 400; font-size: 11px; color: var(--muted-soft); letter-spacing: 0.04em; font-variation-settings: normal; }
.sheet .later { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-soft); padding: 12px 0 2px; line-height: 1.6; }

#toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabbar) + var(--safe-b) + 16px);
  background: var(--ink); color: var(--stock);
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; padding: 10px 16px;
  opacity: 0; pointer-events: none; transition: opacity .18s; z-index: 40;
  max-width: calc(100vw - 40px);
}
#toast.show { opacity: 1; }

/* ---- the revamp (2026-09-23) --------------------------------------------- */
/* A post's name: all of it, up to two lines, never cut at 24 characters. */
header.top h1.long {
  font-size: clamp(22px, 7vw, 27px); line-height: 1.02;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.back { display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
.statenote { font-family: var(--serif); font-variation-settings: "wght" var(--serif-wght), "SOFT" 50; font-size: 16px; line-height: 1.4; color: var(--ink); padding: 10px 0 4px; }
.macbar.error .dot { background: var(--gold); }

/* Studio's focus: the post the queue points at. A rule-framed block, not a card. */
.focus { display: block; text-decoration: none; color: inherit; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--rule-grid); padding: 12px 0 14px; margin-top: 14px; }
.focus .t { font-family: var(--serif); font-variation-settings: "wght" var(--serif-wght), "SOFT" 50; font-size: 21px; line-height: 1.2; }
.focus .ql { display: inline-block; }
details.fold { margin-top: 24px; }
details.fold > summary { list-style: none; display: inline-block; min-height: 0; margin-bottom: 6px; }
details.fold > summary::-webkit-details-marker { display: none; }

/* Presence rows carry the cover. */
.card.presence { display: flex; gap: 12px; align-items: center; }
.card.presence img, .card.presence .ph { width: 56px; height: 56px; object-fit: cover; flex: 0 0 auto; background: var(--rule-grid); }

/* Long lines: two lines, tap to open. The "…more" cue shows only if clipped. */
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.clamp.open { display: block; -webkit-line-clamp: unset; overflow: visible; }
.clamp.more:not(.open)::after { content: ""; }
.wrow .body .clamp.more:not(.open) + .helper::before { content: "tap for all · "; color: var(--muted-soft); }

/* The TODAY word-button (was a + square). A small outlined cell, one word. */
.todaybtn {
  position: relative; flex: 0 0 auto; margin-top: 1px; min-height: 0; padding: 3px 6px 2px;
  border: 1px solid var(--rule-mark); background: none; color: var(--ink);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.3;
}
.todaybtn::after { content: ""; position: absolute; inset: -12px -8px; }

/* The More sheet's Mac-only rows: listed, dimmed, not links. */
.sheet .off {
  display: flex; align-items: center; gap: 14px; min-height: 48px; border-bottom: 1px solid var(--rule-grid);
  color: var(--muted-soft); font-family: var(--fit); font-variation-settings: var(--fit-ui); font-weight: 800;
  font-size: 17px; text-transform: uppercase; letter-spacing: 0.01em;
}
.sheet .off svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: square; }
.sheet .off .d { margin-left: auto; font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: 0.04em; font-variation-settings: normal; }
/* While the sheet is open the page behind it does not move. */
body.locked { position: fixed; left: 0; right: 0; overflow: hidden; }

/* Login: one way through. */
form.login { margin-top: 18px; }
form.login label { margin-top: 0; }
form.login button { width: 100%; margin-top: 14px; }
form.login .err:empty { display: none; }

/* The offline copy's line (sw.js). */
.offline { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold-ink); border-bottom: 1px solid var(--rule-grid); padding: 8px 0; }

/* Health's verdict. */
.verdict { font-family: var(--serif); font-variation-settings: "wght" var(--serif-wght), "SOFT" 50; font-size: 22px; line-height: 1.25; margin: 14px 0 6px; }
.verdict.ok::before { content: ""; display: inline-block; width: 9px; height: 9px; background: var(--teal); margin-right: 10px; vertical-align: 3px; }
.verdict.look::before { content: ""; display: inline-block; width: 9px; height: 9px; background: var(--gold); margin-right: 10px; vertical-align: 3px; }
details.tech { margin-top: 18px; }
details.tech > summary { list-style: none; }
details.tech > summary::-webkit-details-marker { display: none; }

/* ---- tap-size audit fixes (2026-09-23): every control >= 44x44 -------------- */
details.run > summary.wrow { min-height: 44px; align-items: center; box-sizing: border-box; }
.night .name { position: relative; display: inline-block; }
.night .name::after { content: ""; position: absolute; inset: -12px -12px; }
.movebar button { min-width: 44px; }
.ql { min-height: 0; }
.rowlink { display: flex; align-items: center; min-height: 44px; }