/* CW 222 Command — design system stylesheet.
   THE ESTATE, NOT THE TERMINAL: navy roof, limestone-paper walls, one brass
   fixture per room. Rules live in DESIGN_SYSTEM.md — read it before editing.
   All colors come from these tokens. No colors outside the tokens. Ever. */
:root{
  /* surfaces */
  --roof:#22304E; --roofline:#31405F;
  --paper:#F5F1EA; --card:#FFFEFB; --line:#E3DDD1; --wash:#FBF6EA;
  /* ink hierarchy */
  --ink:#232A38; --ink-2:#5A6070; --ink-3:#6B7180;
  /* accent metal — lines, marks, monogram only; never text under 18px */
  --brass:#A5802F;
  /* section pigments (legacy names kept — pages reference them inline) */
  --home:#24345C; --family:#A14E36; --friends:#8A6320;
  --finance:#34675A; --fitness:#4A6A82; --faith:#7E611C;
  /* utility */
  --stale-bg:#FBF3E2; --stale-edge:#8A6320; --link:#2E5E8E;
  --kid-wash:#FBF4F1;
  --serif:"Lora",Georgia,"Iowan Old Style",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.55 var(--sans)}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--home);outline-offset:2px}

/* ---------- header / nav — the navy roof, brass sill ---------- */
.hdr{background:var(--roof);color:#fff;border-bottom:2px solid var(--brass)}
.hdr-in{max-width:1080px;margin:0 auto;padding:14px 18px 0}
.brand{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.brand .mark{width:34px;height:34px;border-radius:6px;border:1px solid var(--roofline);display:block}
.brand h1{margin:0;font:600 22px/1.2 var(--serif);letter-spacing:0}
.brand .tag{color:#93A3BC;font:600 11.5px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.asof{margin-left:auto;color:#93A3BC;font:500 11.5px/1.4 var(--sans);letter-spacing:.04em}
nav.menu{display:flex;gap:2px;margin-top:10px;flex-wrap:wrap}
nav.menu .item{position:relative}
nav.menu a.top{display:inline-flex;align-items:center;gap:7px;color:#D7DFE8;
  padding:9px 13px;border-radius:8px 8px 0 0;font:600 13px/1 var(--sans);letter-spacing:.01em;
  border-top:2px solid transparent;
  transition:background-color 150ms ease-out,color 150ms ease-out}
nav.menu a.top:hover{background:#2C3A57;text-decoration:none}
nav.menu .item.active a.top{background:var(--paper);color:var(--ink);border-top-color:var(--section,var(--brass))}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.sub{display:none;position:absolute;left:0;top:100%;background:var(--card);min-width:170px;
  border:1px solid var(--line);border-radius:0 8px 8px 8px;
  box-shadow:0 4px 14px rgba(34,48,78,.14);z-index:50}
.item:hover .sub,.item.open .sub{display:block}
.sub a{display:block;padding:9px 14px;color:var(--ink);font:13px/1.3 var(--sans);border-bottom:1px solid var(--paper)}
.sub a:last-child{border-bottom:none}
.sub a:hover{background:var(--paper);text-decoration:none}
.caret{font-size:9px;opacity:.7}

/* ---------- page body — paper walls ---------- */
main{max-width:1080px;margin:0 auto;padding:32px 18px 64px}
.pagehead{display:flex;align-items:center;gap:10px;margin:0 0 4px}
.pagehead .dot{width:11px;height:11px}
.pagehead h2{margin:0;font:600 26px/1.25 var(--serif)}
.lede{color:var(--ink-2);margin:0 0 24px;font-size:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px 18px;
  transition:border-color 150ms ease-out}
.card:hover{border-color:#CFC7B8}
.card h3{margin:0 0 8px;display:flex;align-items:center;gap:8px;
  font:700 13px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.card h3 .dot{width:9px;height:9px}
.card h3 a{color:inherit}
.sub-note,.stamp{color:var(--ink-3);font:500 11.5px/1.4 var(--sans);letter-spacing:.04em}
.card ul{margin:6px 0 2px;padding-left:18px}
.card li{margin:4px 0}
.wide{grid-column:1/-1}
.tier1{border-top:3px solid var(--home)}
.tier1 h3{font-size:14px}
.empty{color:var(--ink-3);font-style:italic}
.pill{display:inline-block;background:var(--paper);border:1px solid var(--line);
  border-radius:999px;padding:2px 10px;font-size:12px;margin:2px 4px 2px 0}
.group-label{margin:10px 0 2px;font:700 11.5px/1.3 var(--sans);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2)}
.done,.past{color:var(--ink-3)}
.age{color:var(--friends);font-size:12px}

/* kids — quadruplets on one family shelf */
.kid{border-left:3px solid var(--family);background:var(--kid-wash)}
.kid a{color:var(--family)}
.kidline{margin:6px 0;padding-left:0;list-style:none}
.kidline li{margin:5px 0}
.kidline .kname{font-weight:600}
.kidline .kname a{color:var(--family)}

/* the verse — one quiet room */
.verse{background:var(--wash);text-align:center;padding:24px 18px 18px}
.verse::before{content:"";display:block;width:24px;border-top:1px solid var(--brass);margin:0 auto 14px}
.verse p.vtext{margin:0 0 8px;font:500 italic 18px/1.6 var(--serif)}
.verse .stamp{display:block}

/* stale notice — parchment, honest, not panicked */
.stale{background:var(--stale-bg);border-left:3px solid var(--stale-edge);color:var(--ink);
  border-radius:8px;padding:10px 14px;font-size:13px;font-weight:500;margin:0 0 16px}

table{border-collapse:collapse;width:100%;font-size:13.5px}
th,td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--line)}
th{color:var(--ink-2);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
tr.today-row td{background:var(--wash);font-weight:600}

@media(max-width:640px){
  .brand .mark{width:28px;height:28px}
  .brand .tag{display:none}
  .asof{margin-left:0;flex-basis:100%;order:5}
  nav.menu a.top{padding:8px 10px;font-size:12.5px}
  main{padding-top:24px}
}