/* luma-inter-v1: Inter, self-hosted. One variable file per subset covers
   weights 100 to 900. Nothing here reaches the network; the app must render with
   the connection cut, and a font request would leak the timing of every open of
   a record to whoever served it. font-display: swap so text is readable in the
   fallback while the file arrives, never invisible. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Care spine, local review build.
   Mobile first. 44px minimum tap target and 16px inputs, because anything
   smaller makes a phone zoom and strands someone halfway through a form.
   No external fonts: the stack below is resolved on the device. */

:root {
  --bg: #f6f7f9;
  --card: #ffffff;
  --ink: #14171c;
  --mut: #5a6472;
  --line: #d9dee6;
  --accent: #2f4a7a;
  --accent-ink: #ffffff;
  --warn-bg: #fdf4e3;
  --warn-ink: #6b4a10;
  --deny-bg: #fbeceb;
  --deny-ink: #8a2a22;
  --ok-bg: #eaf4ee;
  --ok-ink: #1f5c38;
  --radius: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
}

h1 { font-size: 24px; margin: 0 0 4px; }
h2 { font-size: 18px; margin: 0 0 12px; }

.sub, .note, .footnote { color: var(--mut); font-size: 14px; }
.note { margin: 8px 0 0; }
.footnote { margin-top: 24px; }
.kicker {
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px;
  color: var(--mut); margin: 0 0 8px;
}

/* sign in */
.auth-body { display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 20px; }
.auth-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px; width: 100%; max-width: 420px;
}

label {
  display: block; font-size: 14px; font-weight: 600;
  margin: 16px 0 6px; color: var(--ink);
}

input[type="text"], input[type="email"], input[type="password"], textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 12px; min-height: 44px;
}

textarea { resize: vertical; }

input:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}

.btn {
  font: inherit; font-size: 16px; min-height: 44px; padding: 10px 18px;
  border-radius: 10px; border: 1px solid transparent; cursor: pointer;
}
.btn.primary { background: var(--accent); color: var(--accent-ink); width: 100%;
  margin-top: 20px; }
.btn.primary[disabled] { opacity: 0.6; cursor: default; }
.btn.ghost { background: transparent; border-color: var(--line); color: var(--ink); }

.error {
  background: var(--deny-bg); color: var(--deny-ink); border-radius: 10px;
  padding: 10px 12px; margin: 16px 0 0; font-size: 14px;
}

/* app chrome */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; background: var(--card); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 5; flex-wrap: wrap;
}
.who { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.topbar-right { display: flex; align-items: center; gap: 8px; }

.tag {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; background: var(--ok-bg); color: var(--ok-ink);
  border-radius: 999px; padding: 4px 10px;
}
.tag.quiet { background: var(--warn-bg); color: var(--warn-ink); }
.tag.late { background: var(--warn-bg); color: var(--warn-ink); }
.tag.deny { background: var(--deny-bg); color: var(--deny-ink); }

.tabs {
  display: flex; gap: 4px; padding: 8px 12px; background: var(--card);
  border-bottom: 1px solid var(--line); overflow-x: auto;
}
.tab {
  font: inherit; font-size: 15px; min-height: 44px; padding: 8px 14px;
  background: transparent; border: 1px solid transparent; border-radius: 999px;
  color: var(--mut); cursor: pointer; white-space: nowrap; flex: 0 0 auto;
}
.tab.is-on { background: var(--accent); color: var(--accent-ink); }

main { padding: 16px; max-width: 760px; margin: 0 auto; }

.banner {
  background: var(--warn-bg); color: var(--warn-ink); border-radius: 10px;
  padding: 12px 14px; font-size: 15px; margin: 0 0 16px;
}

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; margin-bottom: 20px;
}

fieldset.chips { border: 0; padding: 0; margin: 16px 0 0; }
fieldset.chips legend {
  font-size: 14px; font-weight: 600; padding: 0; margin-bottom: 8px;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font: inherit; font-size: 15px; min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 999px; cursor: pointer;
}
.chip.is-on { background: var(--accent); color: var(--accent-ink);
  border-color: var(--accent); }

.custom-time { margin-top: 12px; }

.section-title { margin: 24px 0 12px; }

.record-list { list-style: none; margin: 0; padding: 0; }
.record {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px; margin-bottom: 12px;
}
.record-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
.record-kind { font-weight: 600; }
.record-body { margin: 6px 0; overflow-wrap: anywhere; }
.record-times { font-size: 13px; color: var(--mut); }
.record-times span { display: block; }

.audit-row {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
  font-size: 14px;
}
.audit-row .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; color: var(--mut);
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media (min-width: 700px) {
  main { padding: 24px; }
}

/* Your documents: the answer-once screen.
   Same tokens as the rest of the shell. Nothing new is invented here except the
   meter, which is the one thing this screen has to say that the others do not:
   how much is left. */

.progress-card { padding-bottom: 16px; }

.meter {
  height: 10px; background: var(--line); border-radius: 999px;
  overflow: hidden; margin: 12px 0 0;
}
.meter span {
  display: block; height: 100%; width: 0%;
  background: var(--accent); border-radius: 999px;
  transition: width 200ms ease;
}
.meter.small { height: 6px; margin: 8px 0; }

.doc-row .btn { margin-top: 10px; width: 100%; }

/* The document as the person will receive it. Held to a readable measure and
   given its own scroll, so a 40-page handbook cannot push the rest of the
   screen out of reach on a phone. */
.preview-card { margin-top: 16px; }
.preview-body {
  max-height: 60vh; overflow-y: auto; margin: 12px 0;
  padding: 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper, #fff);
}
.preview-line {
  margin: 0 0 10px; font-size: 15px; line-height: 1.5;
  max-width: 62ch; overflow-wrap: anywhere;
}
.preview-line:last-child { margin-bottom: 0; }

.qrow { padding: 16px 0; border-top: 1px solid var(--line); }
.qrow:first-of-type { border-top: 0; }
.qrow label { margin-top: 0; font-size: 16px; }
.qrow .note { margin: 4px 0 10px; }
.qrow .tag { display: inline-block; margin: 0 6px 10px 0; }

.tag.ok { background: var(--ok-bg); color: var(--ok-ink); }

/* A value already held on file, shown as something to correct rather than as an
   answer this person gave. Quoted, so it never looks like their own typing. */
.held-note { margin-bottom: 6px; }
.held-value {
  margin: 0 0 10px; padding: 10px 12px;
  border-left: 3px solid var(--accent);
  background: var(--tint, #f3f5f4);
  font-size: 15px; line-height: 1.45; overflow-wrap: anywhere;
}

.linkish {
  background: none; border: 0; padding: 0; font: inherit; font-size: 14px;
  color: var(--accent); text-decoration: underline; cursor: pointer;
  min-height: 44px;
}

a.btn { display: inline-flex; align-items: center; text-decoration: none; }

@media (min-width: 720px) {
  .doc-row .btn { width: auto; }
}