/*
  Palette (this tool only; audience: Thulani, reviewing his own drafts).
  Warm paper neutral plus one deep teal, a nod to the water-sector work the
  documents are about. Teal marks the one thing to act on per screen
  (links, Save, the active mode); everything else is ink and rules.
  Document text is Arial because that is what the Word export uses, so the
  preview reads the way the file will. Interface chrome uses the system face
  so it sits quietly inside Telegram.
  Dials: ENERGY 1 / RHYTHM 1 / MOTION 1.
*/
:root {
  --bg: #F3F1EC;
  --sheet: #FBFAF7;
  --ink: #1E2226;
  --muted: #565D64;
  --rule: #D6D1C7;
  --accent: #1A5A5F;
  --accent-ink: #FBFAF7;
  --danger: #9B2C1F;
  --focus: #1A5A5F;
  --ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --doc: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #15181B;
  --sheet: #1C2024;
  --ink: #E6E3DD;
  --muted: #A2A8AD;
  --rule: #343A40;
  --accent: #7DBDB8;
  --accent-ink: #12191A;
  --danger: #E59383;
  --focus: #7DBDB8;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 1rem/1.45 var(--ui);
  overflow-x: hidden;
}
button, input, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

main { max-width: 46rem; margin: 0 auto; padding: 0 1rem calc(6rem + env(safe-area-inset-bottom)); }

/* Top bar: only shown outside Telegram, where there is no native back button */
.topbar { display: none; align-items: center; min-height: 3rem; border-bottom: 1px solid var(--rule); margin: 0 -1rem; padding: 0 1rem; }
body.web .topbar:not([hidden]) { display: flex; }
.back { background: none; border: 0; padding: .6rem 0; min-height: 44px; color: var(--accent); cursor: pointer; }
.back:hover { text-decoration: underline; }

h1 { font-size: 1.35rem; line-height: 1.25; margin: 1.25rem 0 .25rem; font-weight: 650; overflow-wrap: anywhere; }
.sub { color: var(--muted); margin: 0 0 1rem; font-size: .9rem; }

/* Search */
.search { display: block; width: 100%; margin: 1rem 0 .5rem; padding: .7rem .8rem; min-height: 44px;
  background: var(--sheet); border: 1px solid var(--muted); border-radius: 2px; }
.search::placeholder { color: var(--muted); }

/* Register: the list reads like a filing register, date in a fixed left
   column with tabular figures. Repeated on every list screen. */
.group { margin-top: 1.5rem; }
.group h2 { font-size: .95rem; font-weight: 650; margin: 0; padding-bottom: .4rem; border-bottom: 1px solid var(--ink); display: flex; justify-content: space-between; }
.group h2 span { color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.rows { list-style: none; margin: 0; padding: 0; }
.row { display: grid; grid-template-columns: 3rem 1fr; gap: .75rem; width: 100%; text-align: left;
  padding: .8rem 0; min-height: 44px; background: none; border: 0; border-bottom: 1px solid var(--rule); cursor: pointer; }
.row:hover .row-title { text-decoration: underline; text-decoration-color: var(--accent); }
.date { font-variant-numeric: tabular-nums; line-height: 1.1; }
.date b { display: block; font-size: 1.25rem; font-weight: 600; }
.date small { color: var(--muted); font-size: .8rem; }
.row-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.row-meta { color: var(--muted); font-size: .85rem; margin-top: .15rem; }
.empty { color: var(--muted); padding: 1rem 0; border-bottom: 1px solid var(--rule); }

/* Skeleton rows, shaped like the register */
.sk { height: .9rem; background: var(--rule); border-radius: 2px; opacity: .6; }
.sk.d { height: 2rem; width: 2rem; }
.sk.t { width: 85%; margin-bottom: .4rem; }
.sk.m { width: 40%; height: .7rem; }
.sk.w40 { display: inline-block; width: 40%; }
.sk-h1 { display: block; height: 1.4rem; }
.sk-gap { margin-top: 1rem; }

/* Document view */
.modes { display: inline-flex; border: 1px solid var(--muted); border-radius: 2px; margin: .25rem 0 1rem; }
.modes button { background: var(--sheet); border: 0; padding: .5rem 1rem; min-height: 44px; min-width: 5.5rem; cursor: pointer; }
.modes button + button { border-left: 1px solid var(--muted); }
.modes button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.modes button:not([aria-pressed="true"]):hover { text-decoration: underline; }
.readonly { color: var(--muted); font-size: .9rem; margin: .25rem 0 1rem; }

.sheet { background: var(--sheet); border: 1px solid var(--rule); border-radius: 2px; padding: 1.25rem 1rem; }
@media (min-width: 40rem) { .sheet { padding: 2rem 2.25rem; } }
.doc { font-family: var(--doc); font-size: 1rem; line-height: 1.55; overflow-wrap: anywhere; }
.doc > :first-child { margin-top: 0; }
.doc h1 { font-size: 1.3rem; margin: 1.5rem 0 .5rem; }
.doc h2 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; }
.doc h3, .doc h4 { font-size: 1.02rem; margin: 1.25rem 0 .4rem; }
.doc p, .doc ul, .doc ol { margin: 0 0 .8rem; }
.doc ul, .doc ol { padding-left: 1.3rem; }
.doc li { margin-bottom: .25rem; }
.doc hr { border: 0; border-top: 1px solid var(--rule); margin: 1.25rem 0; }
.doc blockquote { margin: 0 0 .8rem; padding: .25rem 0 .25rem .9rem; border-left: 1px solid var(--muted); color: var(--muted); }
.doc table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; margin: 0 0 1rem; font-size: .92rem; }
.doc th, .doc td { border: 1px solid var(--rule); padding: .4rem .5rem; text-align: left; vertical-align: top; }
.doc code { font-family: var(--mono); font-size: .9em; }
.doc pre { overflow-x: auto; }
.doc input[type="checkbox"] { margin-right: .4rem; }
.meta-line { color: var(--muted); font-size: .85rem; margin: 0 0 1rem; overflow-wrap: anywhere; }

.editor { display: block; width: 100%; min-height: 60vh; resize: none; overflow: hidden;
  font: .95rem/1.55 var(--mono); background: var(--sheet); border: 1px solid var(--muted); border-radius: 2px; padding: 1rem; }

/* Export: a plain section, not cards */
.exports { margin-top: 1.75rem; border-top: 1px solid var(--ink); }
.exports h2 { font-size: .95rem; font-weight: 650; margin: .6rem 0 .25rem; }
.exports p { color: var(--muted); font-size: .85rem; margin: 0 0 .5rem; }
.action { display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left;
  min-height: 48px; padding: .7rem 0; background: none; border: 0; border-bottom: 1px solid var(--rule); cursor: pointer; }
.action:hover span:first-child { text-decoration: underline; }
.action span:last-child { color: var(--muted); font-size: .85rem; font-family: var(--mono); }
.action[disabled] { opacity: .55; cursor: progress; }

/* Save bar (outside Telegram; inside, Telegram's main button does this) */
.savebar { position: fixed; left: 0; right: 0; bottom: 0; display: none; gap: .75rem; align-items: center; justify-content: space-between;
  padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); background: var(--sheet); border-top: 1px solid var(--rule); }
.savebar.show { display: flex; }
.savebar span { color: var(--muted); font-size: .9rem; }
.btn { min-height: 44px; padding: .55rem 1.1rem; border-radius: 2px; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); font-weight: 600; cursor: pointer; }
.btn.quiet { background: none; color: var(--ink); border-color: var(--muted); font-weight: 400; }
.btn.danger { background: var(--danger); border-color: var(--danger); color: var(--sheet); }

/* Discard confirmation (outside Telegram; inside, showConfirm is used) */
.confirm { position: fixed; inset: 0; display: none; align-items: flex-end; justify-content: center; background: rgb(0 0 0 / .35); }
.confirm.show { display: flex; }
.confirm div { background: var(--sheet); width: 100%; max-width: 46rem; padding: 1.25rem 1rem calc(1rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); }
.confirm p { margin: 0 0 1rem; }
.confirm .btns { display: flex; gap: .75rem; justify-content: flex-end; padding: 0; }

.status { position: fixed; left: 1rem; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); max-width: 44rem; margin: 0 auto;
  padding: .75rem 1rem; background: var(--ink); color: var(--bg); border-radius: 2px; display: none; }
.status.show { display: block; }
.status.err { background: var(--danger); color: var(--sheet); }
body.saving-visible .status { bottom: calc(5rem + env(safe-area-inset-bottom)); }

.notice { margin: 2rem 0; padding: 1rem; border: 1px solid var(--rule); background: var(--sheet); border-radius: 2px; }
.notice h1 { margin-top: 0; font-size: 1.1rem; }
.notice button { margin-top: .75rem; }