/* Homeschool OS — app.css (0046, plan §4b).
   One visual language, extracted from base.html's inline styles and grown
   into components. Palette unchanged: navy #1f3864 on warm paper #faf9f7. */

:root {
  color-scheme: light;
  /* Palette (unchanged since 0046; 0064 adds roles, not new hues). */
  --ink: #1a1a1a;
  --paper: #faf9f7;
  --card: #ffffff;
  --navy: #1f3864;
  --navy-soft: #2c4a80;
  --muted: #666;
  --line: #e6e2db;
  --ok: #2e7d32;
  --warn: #b26a00;
  --danger: #b00020;

  /* 0064 roles: name the JOB, so a surface never hard-codes a hex. */
  --ink-soft: #4a4a4a;
  --wash: #f2efe9;          /* quiet fill: stat blocks, chip rests */
  --navy-wash: #eef1f7;     /* selected/active tint of the brand */
  --ok-wash: #e8f5e9;
  --warn-wash: #fff3e0;
  --danger-wash: #fdecea;

  /* Type scale. Deliberately short -- five sizes is a system, twelve is a mess. */
  --t-xs: .75rem;
  --t-sm: .85rem;
  --t-md: 1rem;
  --t-lg: 1.25rem;
  --t-xl: 1.6rem;

  /* Space scale (4px base). */
  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(31, 56, 100, .06), 0 1px 8px rgba(31, 56, 100, .04);
  --tap: 44px;              /* iOS minimum touch target */
}

* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; margin: 0; background: var(--paper); color: var(--ink); }
main { max-width: 480px; margin: 0 auto; padding: 0 var(--s-4) var(--s-6); }
@media (min-width: 760px) {
  /* 0064: the app was hard-locked to 480px, so every desktop looked like a
     phone screenshot. Widen the shell and let two-column surfaces breathe. */
  main { max-width: 900px; padding: 0 var(--s-5) var(--s-6); }
  .nav { max-width: 900px; }
}
h1 { font-size: 1.3rem; margin: .9rem 0 .6rem; }
h2.sec, h2 { font-size: 1rem; margin: 1.1rem 0 .35rem; }
a { color: var(--navy); }

/* Navigation */
.nav { max-width: 480px; margin: 0 auto; padding: .75rem 1rem .5rem;
       display: flex; gap: .9rem; align-items: center; font-size: .9rem;
       border-bottom: 1px solid var(--line); background: var(--paper);
       position: sticky; top: 0; z-index: 10; }

/* 0064: seven authenticated controls need ~463px of a single flex row, so on a
   320-390px phone the old no-wrap nav crowded or overflowed -- measured, not
   assumed. Wrap to two rows below the desktop breakpoint and drop the
   margin-left:auto push, which would otherwise force a ragged break. Nothing is
   hidden behind a menu: every destination stays one tap away, which matters
   most for Log, the habit surface. */
@media (max-width: 759px) {
  .nav { flex-wrap: wrap; gap: .45rem .8rem; row-gap: .45rem; }
  .nav .push { margin-left: 0; }
}
.nav a { color: var(--navy); font-weight: 600; text-decoration: none; }
.nav a:hover { text-decoration: underline; }
.nav .brand { color: var(--navy); font-weight: 700; }
.nav .push { margin-left: auto; }

/* Forms — thumb-sized targets, no iOS zoom (16px+ inputs) */
form p { display: flex; flex-direction: column; gap: .25rem; margin: .6rem 0; }
label { font-size: .85rem; font-weight: 600; }
input, select, textarea { font-size: 1rem; padding: .6rem; border: 1px solid #ccc;
  border-radius: 8px; background: #fff; width: 100%; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 3px solid var(--navy-soft); outline-offset: 1px; }
button { width: 100%; min-height: 44px; padding: .8rem; font-size: 1.05rem; border: 0;
  border-radius: 10px; background: var(--navy); color: #fff; margin-top: .5rem; cursor: pointer; }
button:hover { background: var(--navy-soft); }

/* The one-tap primary action */
a.bigbtn { display: block; text-align: center; padding: .95rem; background: var(--navy);
  color: #fff; border-radius: 10px; font-weight: 600; font-size: 1.05rem;
  text-decoration: none; margin: .35rem 0 1rem; }
a.bigbtn:hover { background: var(--navy-soft); }

/* Cards */
.entry { padding: .55rem .75rem; border-left: 3px solid var(--navy); background: var(--card);
  border-radius: 6px; margin: .4rem 0; font-size: .9rem;
  box-shadow: 0 1px 2px rgba(31,56,100,.06); }
.task { display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  padding: .65rem .75rem; background: var(--card); border-radius: 6px; margin: .45rem 0;
  border-left: 3px solid var(--warn); font-size: .9rem;
  box-shadow: 0 1px 2px rgba(31,56,100,.06); }
.task.done { border-left-color: var(--ok); opacity: .65; }
.task button { width: auto; min-height: 36px; margin: 0; padding: .45rem .75rem; font-size: .85rem; }
.due { color: #555; font-size: .8rem; }
.overdue { color: var(--danger); font-weight: 600; }

/* Chips */
.chip { font-size: .7rem; padding: .12rem .5rem; border-radius: 99px; margin-left: .4rem;
  vertical-align: middle; font-weight: 600; }
.chip-pending { background: #fff3e0; color: var(--warn); }
.chip-done { background: #e8f5e9; color: var(--ok); }
.chip-overdue { background: #fdecea; color: var(--danger); }

/* Messaging + small text */
.flash { background: #e8f5e9; border-left: 3px solid var(--ok); padding: .6rem .75rem;
  border-radius: 6px; margin: .75rem 0; }
.errorlist { color: var(--danger); font-size: .85rem; margin: 0; padding-left: 1rem; }
.savenote { font-size: .75rem; color: var(--ok); margin-left: .4rem; }
.hint { font-size: .85rem; color: var(--muted); }
.authlink { font-size: .85rem; margin-top: 1rem; }
.empty { color: var(--muted); font-size: .9rem; background: var(--card); border: 1px dashed var(--line);
  border-radius: 8px; padding: .8rem .9rem; margin: .5rem 0; }

details.detail-opt { margin: .2rem 0 .6rem; }
details.detail-opt summary { font-size: .8rem; color: #777; cursor: pointer; }

form.inlineform { display: inline; margin: 0; }
button.linkbutton { width: auto; min-height: 0; margin: 0; padding: 0; border: 0; background: none;
  color: var(--navy); font-weight: 600; font-size: .9rem; cursor: pointer; }
button.linkbutton:hover { background: none; text-decoration: underline; }

/* Landing (0053) */
.hero { padding: 1.2rem 0 .4rem; }
.hero h1 { font-size: 1.45rem; line-height: 1.25; }
.hero p { font-size: .95rem; color: #333; }
.offer { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--navy);
  border-radius: 10px; padding: .3rem 1rem 1rem; margin: 1.2rem 0;
  box-shadow: 0 1px 3px rgba(31,56,100,.08); }


/* ===================================================================
   0064 — parent experience components.
   Added, not replaced: every class 0046 shipped still resolves, so no
   existing template changes meaning because this file grew.
   =================================================================== */

/* --- page furniture ------------------------------------------------ */
.pagehead { margin: var(--s-4) 0 var(--s-3); }
.pagehead h1 { margin: 0 0 var(--s-1); font-size: var(--t-xl); letter-spacing: -.01em; }
.pagehead .sub { color: var(--muted); font-size: var(--t-sm); }
.section { margin: var(--s-5) 0 var(--s-3); }
.section > h2 { font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); margin: 0 0 var(--s-2); font-weight: 700; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s-4); box-shadow: var(--shadow); }
.card + .card { margin-top: var(--s-2); }
.card h3 { margin: 0 0 var(--s-1); font-size: var(--t-md); }

/* --- the "what needs attention" card -------------------------------- */
.next { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--navy);
  border-radius: var(--radius); padding: var(--s-4); box-shadow: var(--shadow); }
.next .when { font-size: var(--t-sm); color: var(--muted); }
.next .what { font-size: var(--t-lg); margin: var(--s-1) 0; }
.next.is-overdue { border-left-color: var(--danger); }
.next.is-soon { border-left-color: var(--warn); }

/* --- stats: only ever rendered from tested derivations -------------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
.stat { background: var(--wash); border-radius: var(--radius-sm); padding: var(--s-3);
  text-align: center; }
.stat .n { display: block; font-size: var(--t-lg); font-weight: 700; color: var(--navy);
  line-height: 1.1; }
.stat .l { font-size: var(--t-xs); color: var(--muted); }

/* --- tap-first capture ---------------------------------------------- */
.field { margin: var(--s-4) 0; }
.field > .lab { display: block; font-size: var(--t-sm); font-weight: 600; margin-bottom: var(--s-2); }
.choices { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0;
  cursor: pointer; }
.choice span { display: block; min-height: var(--tap); padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line); border-radius: 99px; background: var(--card);
  font-size: var(--t-md); line-height: 1.2; display: flex; align-items: center;
  justify-content: center; }
.choice input:checked + span { background: var(--navy-wash); border-color: var(--navy);
  color: var(--navy); font-weight: 600; }
.choice input:focus-visible + span { outline: 3px solid var(--navy); outline-offset: 2px; }
.choices.dur .choice span { min-width: 4.5rem; }

/* --- record rows (/records/ and recent activity) --------------------- */
.rec { display: flex; gap: var(--s-3); align-items: flex-start; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-3);
  margin-bottom: var(--s-2); }
.rec .thumb { width: 56px; height: 56px; border-radius: var(--radius-sm); object-fit: cover;
  flex: 0 0 56px; background: var(--wash); }
.rec .body { min-width: 0; flex: 1; }
.rec .top { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: baseline; }
.rec .who { font-weight: 600; }
.rec .meta { font-size: var(--t-sm); color: var(--muted); }
.rec .note { font-size: var(--t-sm); color: var(--ink-soft); margin-top: var(--s-1);
  overflow-wrap: anywhere; }

/* --- document status: the four states the DB can justify ------------- */
.status { display: inline-block; font-size: var(--t-xs); font-weight: 600; padding: .15rem .55rem;
  border-radius: 99px; }
.status-draft { background: var(--navy-wash); color: var(--navy); }
.status-done { background: var(--ok-wash); color: var(--ok); }
.status-filed { background: var(--ok-wash); color: var(--ok); }
.status-none { background: var(--wash); color: var(--muted); }
/* 0072: the setup page reports INFORMATION, not achievement. A green success
   wash on "Added" reads as a score -- and a page of green ticks becomes
   "complete your profile", which is one short step from "you're compliant".
   Held is quiet and brand-neutral; needed is a nudge, not an alarm. */
.status-held { background: var(--navy-wash); color: var(--navy); }
.status-needed { background: var(--warn-wash); color: var(--warn); }

/* --- auth entrance --------------------------------------------------- */
.auth { max-width: 380px; margin: var(--s-6) auto; }
.auth .mark { text-align: center; margin-bottom: var(--s-4); }
.auth .mark .name { font-weight: 700; color: var(--navy); font-size: var(--t-lg); }
.auth .mark .tag { display: block; font-size: var(--t-sm); color: var(--muted); margin-top: var(--s-1); }
.auth .card { padding: var(--s-5); }
.auth h1 { font-size: var(--t-lg); margin: 0 0 var(--s-4); }
.auth label { display: block; margin-bottom: var(--s-1); }
.auth .row { margin-bottom: var(--s-4); }
.auth input { width: 100%; }

/* --- filters (records) ------------------------------------------------ */
.filters { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: end;
  margin-bottom: var(--s-3); }
.filters .f { flex: 1 1 8rem; }
.filters label { font-size: var(--t-xs); color: var(--muted); }
.filters select { width: 100%; }
.filters button { width: auto; min-height: 0; padding: .55rem var(--s-4); font-size: var(--t-sm); }

/* --- first-run teaching ------------------------------------------------ */
.teach { background: var(--navy-wash); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s-4); }
.teach h2 { margin: 0 0 var(--s-2); font-size: var(--t-md); text-transform: none;
  letter-spacing: 0; color: var(--ink); }
.teach ul { margin: var(--s-2) 0; padding-left: var(--s-5); font-size: var(--t-sm); }
.teach li { margin: var(--s-1) 0; }

/* --- honesty note ------------------------------------------------------ */
.note-quiet { font-size: var(--t-xs); color: var(--muted); margin-top: var(--s-2); }

/* --- desktop composition ----------------------------------------------- */
@media (min-width: 760px) {
  .cols { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--s-5); align-items: start; }
  .stats { gap: var(--s-3); }
  .pagehead h1 { font-size: 2rem; }
  .rec .thumb { width: 72px; height: 72px; flex-basis: 72px; }
}


/* 0073: custom-value reveals. The default is VISIBLE, so a parent without
   JavaScript sees the field rather than being trapped behind a hidden input;
   the script hides the ones whose chip is not selected. */
.reveal { margin-top: var(--s-3); }
/* Scoped to the capture form on purpose: `.reveal` is a generic name, and this
   page's script should not silently change the semantics of every future
   .reveal element in the application. */
.js-on #capture-form .reveal:not([data-open]) { display: none; }

/* Evidence pages, in order, with the controls that repair a wrong picker
   order. Numbered because "Page 3" is what the parent is looking at. */
.pages { display: grid; gap: var(--s-2); }
.page-row { display: flex; gap: var(--s-3); align-items: center; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-2); }
.page-row .n { font-weight: 700; color: var(--navy); min-width: 4.5rem; font-size: var(--t-sm); }
.page-row .thumb { width: 64px; height: 64px; }
.page-row .moves { margin-left: auto; display: flex; gap: var(--s-1); }
.page-row .moves button { min-height: 36px; padding: .2rem .6rem; width: auto; }