/* Nowish Backstage, in the app's language (src/ui/theme.ts; docs/design/DESIGN.md): Paper in
   light mode, Night in dark mode, two type sizes (a serif display line, the system sans for
   everything else), one radius, hairlines instead of boxes. Amber marks the one filled button
   and what needs attention (time running out). Phone first: one column, 48px touch targets. */
:root {
  --bg: #FAFAF8;
  --ink: #1C1916;
  --secondary: #776C60;
  --placeholder: #A39580;
  --hairline: #E9E4DD;
  --control: #F2EEE8;
  --segment-on: #FFFFFF;
  --pressed: rgba(28, 25, 22, 0.08);
  --destructive: #B3261E;
  --light-text: #A85C0C;
  --primary: #F5A53D;
  --primary-pressed: #DD9537;
  --on-primary: #1C1916;
  --hair: 0.5px;
  --outline: 1px;
  --serif: ui-serif, "New York", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1F1C19;
    --ink: #F5F0E7;
    --secondary: #B4A99A;
    --placeholder: #7A7066;
    --hairline: #4A423A;
    --control: #2A2622;
    --segment-on: #3D3833;
    --pressed: rgba(245, 240, 231, 0.10);
    --destructive: #E9A99B;
    --light-text: #F5A53D;
    --primary: #DB8F2E;
    --primary-pressed: #C47F28;
    --hair: 1px;
    --outline: 1.4px;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/24px var(--sans);
}
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.top {
  display: flex; justify-content: space-between; align-items: center;
  max-width: 720px; margin: 0 auto; min-height: 44px;
  padding: max(8px, env(safe-area-inset-top)) 16px 8px;
  border-bottom: var(--hair) solid var(--hairline);
}
.wordmark { font-family: var(--serif); }
main { max-width: 720px; margin: 0 auto; padding: 16px 16px 48px; }

h1 { font: 400 40px/44px var(--serif); letter-spacing: -0.4px; margin: 48px 0 16px; max-width: 300px; }
h2 { font: inherit; font-weight: 500; letter-spacing: 0.2px; margin: 24px 0 8px; }
p { margin: 0 0 12px; }
.muted { color: var(--secondary); }
.small { font-size: 15px; line-height: 20px; }
.problem { color: var(--destructive); }
.quote { border-left: 2px solid var(--hairline); padding-left: 12px; overflow-wrap: anywhere; }

button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border-radius: 6px; }
button:disabled { opacity: 0.5; cursor: default; }
:focus-visible { outline: 2px solid var(--light-text); outline-offset: 2px; }
.primary {
  min-height: 54px; padding: 0 24px; border: 0;
  background: var(--primary); color: var(--on-primary); font-weight: 500; letter-spacing: 0.2px;
}
.primary:active { background: var(--primary-pressed); }
.primary.danger { background: var(--destructive); color: var(--bg); }
.outline {
  min-height: 48px; padding: 0 16px; background: transparent;
  border: var(--outline) solid var(--ink); font-weight: 500; letter-spacing: 0.2px;
}
.outline:active, .link:active, .tabs button:active { background: var(--pressed); }
.compact { min-height: 44px; }
.link { background: none; border: 0; min-height: 44px; padding: 0 8px; color: var(--secondary); }
#view-signin .primary { width: 100%; margin-top: 24px; }

/* Tabs: a segmented control, as in the app. */
.tabs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px;
  background: var(--control); border-radius: 6px; margin-bottom: 8px;
}
.tabs button { min-height: 40px; border: 0; background: transparent; border-radius: 4px; color: var(--secondary); }
.tabs button[aria-selected="true"] { background: var(--segment-on); color: var(--ink); font-weight: 500; }

.banner { padding: 12px 0; border-bottom: var(--hair) solid var(--hairline); }
.banner.error { color: var(--destructive); }

.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.check { display: inline-flex; gap: 8px; align-items: center; min-height: 48px; color: var(--secondary); }
.check input { width: 20px; height: 20px; accent-color: var(--light-text); }

/* Report cards: hairline-separated, no boxes. */
.cards, .list { list-style: none; margin: 0; padding: 0; }
.cards > li { padding: 16px 0; border-top: var(--hair) solid var(--hairline); }
.cards > li:last-child { border-bottom: var(--hair) solid var(--hairline); }
.meta { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.clock { font-weight: 500; }
.clock.soon, .clock.overdue, .urgent { color: var(--light-text); }
.clock.overdue { color: var(--destructive); }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 8px 0 12px; }
.facts dt { color: var(--secondary); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.buttons .outline { flex: 1 1 auto; }
.outline.danger { border-color: var(--destructive); color: var(--destructive); }
.empty { color: var(--secondary); padding: 16px 0; }

.search { display: flex; gap: 8px; }
.search input, textarea {
  flex: 1; min-width: 0; min-height: 48px; padding: 8px 12px;
  background: var(--control); border: var(--hair) solid var(--hairline); border-radius: 6px;
}
::placeholder { color: var(--placeholder); }
.list > li {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  min-height: 50px; padding: 8px 0; border-bottom: var(--hair) solid var(--hairline);
}
.list .who { min-width: 0; overflow-wrap: anywhere; }
.list button { flex: none; white-space: nowrap; }
.list .who .small { display: block; }
#log > li { display: block; }
.block { display: block; }

dialog {
  width: min(100% - 32px, 480px); padding: 24px; border: 0; border-radius: 6px;
  background: var(--bg); color: var(--ink);
}
dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
dialog h2 { margin-top: 0; }
dialog label { display: block; margin: 8px 0 4px; }
dialog textarea { width: 100%; resize: vertical; }
dialog .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
dialog .actions button { flex: 1; }

/* Launch: the one display-size number on the page. */
.goal { margin: 16px 0 4px; }
.goal .big { font: 400 40px/44px var(--serif); letter-spacing: -0.4px; }