/* Milo — the visual system.
 *
 * Palette from MILO-SPEC §14, which is normative: Sienna, Forest, Cream,
 * Charcoal, Purple at 60/30/10. Discipline from offline: hairlines, mono
 * utility labels, no decoration, one focal point per screen.
 *
 * §2.2 is BINDING and most of what follows is it:
 *   - no sudden motion. Change is legible and calm, or instant. Never
 *     performed. Nothing slides, bounces, or appears unexpectedly.
 *   - predictable layout. Elements do not move between screens or reorder
 *     themselves. Muscle memory must hold.
 *   - warm, never stark. No harsh white, no aggressive contrast, no saturated
 *     alerting colour.
 */

:root {
  --sienna:    #C4632D;
  --forest:    #3A6B48;
  --cream:     #FAF7F2;
  --charcoal:  #1E1614;
  --purple:    #7D33BE;

  --ground:    var(--cream);
  --raised:    #FFFDFA;
  --ink:       var(--charcoal);
  --ink-2:     #5C4F49;
  --quiet:     #8C7F78;
  --rule:      #E2DAD1;
  --sunk:      #F2EBE3;

  --display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* One duration, and it is short. A transition long enough to notice is a
   * transition being performed at you. */
  --t: 110ms;

  --gutter: 20px;
  --r: 10px;
}

/* Warm dark, not generic dark. */
@media (prefers-color-scheme: dark) {
  :root {
    --ground:   #17110F;
    --raised:   #1F1815;
    --ink:      #F2EBE3;
    --ink-2:    #C4B7AE;
    --quiet:    #8B7D75;
    --rule:     #322824;
    --sunk:     #120D0B;
    --sienna:   #D9773F;
    --forest:   #5C9A70;
  }
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* ── time atmosphere — six states, §14 / gospel §11.5 ─────────────────────
 * A wash, not a light show. It tells you where you are in the day at a
 * glance and never competes with the words. */
:root[data-time="dawn"]      { --wash: 210, 150, 90; --wash-a: .055; }
:root[data-time="morning"]   { --wash: 196, 99, 45;  --wash-a: .035; }
:root[data-time="midday"]    { --wash: 240, 235, 220;--wash-a: .030; }
:root[data-time="afternoon"] { --wash: 196, 99, 45;  --wash-a: .055; }
:root[data-time="sunset"]    { --wash: 190, 80, 50;  --wash-a: .085; }
:root[data-time="night"]     { --wash: 60, 40, 80;   --wash-a: .075; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  background: var(--ground);
  background-image: linear-gradient(
    180deg,
    rgba(var(--wash, 196 99 45), var(--wash-a, .03)) 0%,
    rgba(var(--wash, 196 99 45), 0) 42%);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

/* Reduced motion is honoured absolutely — and since the baseline is already
 * near-instant, this removes the remainder rather than substituting anything. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ── the shell ───────────────────────────────────────────────────────────── */

.app { display: flex; flex-direction: column; height: 100dvh; max-width: 720px;
       margin: 0 auto; }

header.top {
  display: flex; align-items: center; gap: 12px;
  padding: 14px var(--gutter) 12px;
  border-bottom: 1px solid var(--rule);
}
.mark { display: flex; align-items: center; gap: 9px; cursor: pointer;
        background: none; border: 0; padding: 0; }
.mark svg { display: block; width: 22px; height: 22px; }
.mark b { font-family: var(--display); font-size: 20px; font-weight: 400;
          letter-spacing: .01em; color: var(--ink); }
.top .spacer { flex: 1; }

/* Utility labels are mono, small, spaced, upper — they encode information and
 * are never decorative. */
.u { font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
     text-transform: uppercase; color: var(--quiet); }

.ws { display: flex; border: 1px solid var(--rule); border-radius: 6px;
      overflow: hidden; }
.ws button { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
             text-transform: uppercase; padding: 5px 9px; border: 0;
             background: transparent; color: var(--quiet); cursor: pointer;
             transition: background var(--t) linear, color var(--t) linear; }
.ws button[aria-pressed="true"] { background: var(--ink); color: var(--ground); }

/* ── main ────────────────────────────────────────────────────────────────── */

main { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pad { padding: var(--gutter); }

.stamp { display: flex; align-items: baseline; gap: 10px; padding: 22px var(--gutter) 4px; }
.stamp h1 { font-family: var(--display); font-size: 34px; font-weight: 400;
            line-height: 1.05; letter-spacing: -.01em; }

/* The dominant now card. One focal point per screen. */
.now {
  margin: 16px var(--gutter) 0; padding: 20px;
  background: var(--raised); border: 1px solid var(--rule); border-radius: var(--r);
}
.now .ladder { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.now .ladder i { width: 6px; height: 6px; background: var(--forest); border-radius: 50%;
                 display: block; flex: none; }
.now h2 { font-family: var(--display); font-size: 27px; font-weight: 400;
          line-height: 1.15; margin-bottom: 6px; }
.now .meta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; }

.row-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }

button.act {
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  padding: 11px 16px; border-radius: 8px; border: 1px solid var(--rule);
  background: var(--raised); color: var(--ink); cursor: pointer;
  min-height: 44px;                 /* accessible target, §13 */
  transition: background var(--t) linear, border-color var(--t) linear;
}
button.act:hover { border-color: var(--quiet); }
button.act.primary { background: var(--sienna); border-color: var(--sienna); color: #fff; }
button.act.primary:hover { background: #B2571F; }
button.act.quiet { background: transparent; border-color: transparent; color: var(--ink-2); }

/* ── lists ───────────────────────────────────────────────────────────────── */

.section-head { display: flex; align-items: baseline; gap: 10px;
                padding: 26px var(--gutter) 8px; }
.section-head .u { flex: none; }
.section-head hr { flex: 1; border: 0; border-top: 1px solid var(--rule); }

.item { display: flex; align-items: flex-start; gap: 12px;
        padding: 13px var(--gutter); border-bottom: 1px solid var(--rule); }
.item:last-child { border-bottom: 0; }
.item .tick {
  flex: none; width: 44px; height: 44px; margin: -11px 0 -11px -10px;
  display: grid; place-items: center; background: none; border: 0; cursor: pointer;
}
/* Only the dedicated control completes. Row text, whitespace, time and the
 * project header never do — gospel §10.1, and it is a law here. */
.item .tick span { width: 17px; height: 17px; border: 1.5px solid var(--quiet);
                   border-radius: 50%; display: block;
                   transition: border-color var(--t) linear; }
.item .tick:hover span { border-color: var(--sienna); }
.item .body { flex: 1; min-width: 0; cursor: pointer; }
.item .title { font-size: 15.5px; line-height: 1.35; }
.item .sub { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 3px; }
.item.anchor .title { font-weight: 600; }
.item.anchor .tick span { border-radius: 2px; border-color: var(--forest); }
.item.done .title { color: var(--quiet); text-decoration: line-through; }

.pill { font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
        color: var(--quiet); }
.pill.goal { color: var(--forest); }
.pill.due { color: var(--sienna); }

/* ── timeline ────────────────────────────────────────────────────────────── */

.tl { position: relative; margin: 0 var(--gutter); }
.tl .hour { position: relative; border-top: 1px solid var(--rule); }
.tl .hour > .u { position: absolute; top: -7px; left: 0; background: var(--ground);
                 padding-right: 8px; }
.tl .lane { margin-left: 56px; }
.tl .blk { position: absolute; left: 56px; right: 0; border-radius: 7px;
           border: 1px solid var(--rule); background: var(--raised);
           padding: 7px 10px; overflow: hidden; }
.tl .blk.anchor { border-color: var(--forest); background: color-mix(in srgb, var(--forest) 7%, var(--raised)); }
.tl .blk.rhythm { border-style: dashed; }
.tl .blk .t { font-size: 13.5px; line-height: 1.25; }
.tl .now-line { position: absolute; left: 0; right: 0; height: 2px;
                background: var(--sienna); }
.tl .now-line::before { content: ""; position: absolute; left: 0; top: -3px;
                        width: 8px; height: 8px; border-radius: 50%;
                        background: var(--sienna); }

/* The far horizon fogs. Fidelity degrades with distance on purpose — years
 * out should show goals, not tasks. */
.fog-1 { opacity: .72; }
.fog-2 { opacity: .46; }
.fog-3 { opacity: .26; }

/* ── sheets ──────────────────────────────────────────────────────────────── */

.sheet-bg { position: fixed; inset: 0; background: rgba(20,14,12,.34);
            display: none; z-index: 40; }
.sheet-bg[data-open="1"] { display: block; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
  max-width: 720px; margin: 0 auto;
  background: var(--ground); border-top: 1px solid var(--rule);
  border-radius: 14px 14px 0 0; padding: 18px var(--gutter)
    calc(18px + env(safe-area-inset-bottom));
  max-height: 86dvh; overflow-y: auto; display: none;
}
.sheet[data-open="1"] { display: block; }
.sheet h3 { font-family: var(--display); font-size: 22px; font-weight: 400;
            margin-bottom: 4px; }
.sheet .u + h3 { margin-top: 2px; }
.sheet .why-row { display: flex; justify-content: space-between; gap: 14px;
                  padding: 9px 0; border-bottom: 1px solid var(--rule); }

input.field, textarea.field, select.field {
  width: 100%; font-family: var(--sans); font-size: 16px; color: var(--ink);
  background: var(--raised); border: 1px solid var(--rule); border-radius: 8px;
  padding: 12px; margin-top: 8px; min-height: 44px;
}
textarea.field { min-height: 88px; resize: vertical; }
label.lab { display: block; margin-top: 14px; }

/* ── bottom nav — predictable, never reorders ────────────────────────────── */

nav.tabs {
  display: flex; border-top: 1px solid var(--rule); background: var(--ground);
  padding-bottom: env(safe-area-inset-bottom);
}
nav.tabs button {
  flex: 1; background: none; border: 0; cursor: pointer;
  padding: 11px 4px 12px; min-height: 52px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--quiet);
  border-top: 2px solid transparent; margin-top: -1px;
  transition: color var(--t) linear, border-color var(--t) linear;
}
nav.tabs button[aria-current="page"] { color: var(--ink); border-top-color: var(--sienna); }

/* ── states ──────────────────────────────────────────────────────────────── */

.empty { padding: 40px var(--gutter); color: var(--ink-2); max-width: 46ch; }
.empty p { margin-bottom: 10px; }
.note { border-left: 2px solid var(--rule); padding: 2px 0 2px 14px;
        margin: 14px var(--gutter); color: var(--ink-2); font-size: 14.5px; }
.note.warm { border-left-color: var(--sienna); }

/* Burnout collapses the surface. Everything not essential is simply not here —
 * hiding it behind a control is still showing it. */
body[data-burnout="1"] nav.tabs,
body[data-burnout="1"] .section-head,
body[data-burnout="1"] .stamp .u { display: none; }