/* Life by Design OS — "Midnight" design system (life-by-design-os.md) */
:root {
  --ink-900:#0F1524; --ink-800:#1A2236; --ink-700:#333E56; --ink-600:#4E5A73;
  --ink-500:#6B7690; --ink-400:#97A0B5; --ink-300:#BEC5D5; --ink-200:#D8DDE7; --ink-100:#E7EAF1;
  --paper:#EDF0F6; --paper-2:#E3E8F1; --cream:#E4E9F1; --cream-2:#F2F5FA;
  --white:#FBFCFE; --white-2:#FFFFFF;
  --black:#131A2B; --on-black:#EEF1F8;
  --line:#DAE0EB; --line-soft:#E6EAF2; --line-strong:#C2CAD9;
  --sapphire:#2F569E; --sapphire-100:#D9E2F2;
  --teal:#2E7264; --teal-100:#D3E4DF;
  --gold:#A8862F; --gold-100:#EEE3C8;
  --garnet:#9C3348; --garnet-100:#EBD2D7;
  --font-serif:'Newsreader','Iowan Old Style',Georgia,serif;
  --font-sans:'Public Sans',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --nav-width:208px; --content-max:760px;
  --shadow-modal:0 30px 74px -20px rgba(15,21,36,0.40);
  --scrim:rgba(11,16,30,0.44);
  --ease:cubic-bezier(0.4,0,0.2,1);
}
* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; }
body { background:var(--paper); color:var(--ink-700); font:16px/1.55 var(--font-sans); -webkit-font-smoothing:antialiased; }
.boot { display:flex; height:100vh; align-items:center; justify-content:center; font:400 28px var(--font-serif); color:var(--ink-400); }
button { font:inherit; cursor:pointer; }
a { color:var(--sapphire); text-decoration:none; }

/* ---------- micro-label (signature) ---------- */
.mlabel { font:600 11px var(--font-sans); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-400); }
.kbd { font:500 11px var(--font-mono); letter-spacing:.02em; color:var(--ink-400); border:1px solid var(--line); border-radius:4px; padding:1px 6px; }

/* ---------- layout ---------- */
.shell { display:flex; min-height:100vh; }
.rail { position:fixed; inset:0 auto 0 0; width:var(--nav-width); background:var(--cream); border-right:1px solid var(--line); display:flex; flex-direction:column; padding:28px 0 16px; z-index:10; }
.rail .wordmark { font:500 22px var(--font-serif); color:var(--ink-900); padding:0 20px 2px; }
.rail .wordsub { font:600 10px var(--font-sans); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-400); padding:0 20px 18px; border-bottom:1px solid var(--line-soft); }
.rail nav { flex:1; padding-top:10px; overflow-y:auto; }
.navitem { display:flex; align-items:center; justify-content:space-between; width:100%; text-align:left; background:none; border:none; padding:10px 20px; font:500 14px var(--font-sans); color:var(--ink-600); transition:background .12s var(--ease), color .12s var(--ease); }
.navitem:hover { color:var(--ink-900); background:var(--cream-2); }
.navitem.active { background:var(--cream-2); color:var(--ink-900); font-weight:600; box-shadow:inset 2px 0 0 var(--sapphire); }
.navitem .count { font:500 11px var(--font-mono); color:var(--ink-400); }
.rail .foot { border-top:1px solid var(--line-soft); padding-top:8px; }
.rail .foot .navitem { font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--ink-500); }
main { flex:1; margin-left:var(--nav-width); padding:40px 40px 110px; }
.col { max-width:var(--content-max); }

/* ---------- masthead ---------- */
.eyebrow { font:600 11px var(--font-sans); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-400); margin-bottom:8px; }
h1.pagetitle { font:400 42px/1.1 var(--font-serif); letter-spacing:-0.01em; color:var(--ink-900); margin-bottom:6px; }
.pagemeta { color:var(--ink-500); font-size:14px; margin-bottom:28px; }

/* ---------- cards ---------- */
.card { background:var(--white); border:1px solid var(--line); border-radius:4px; padding:20px 22px; margin-bottom:20px; }
.card.alert { background:var(--garnet-100); border-color:#d9b3bc; }
.cardhead { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px; }
.cardhead .acc { font:500 12px var(--font-mono); color:var(--ink-400); }

/* ---------- task rows ---------- */
.trow { display:flex; align-items:center; gap:12px; padding:11px 2px; border-bottom:1px solid var(--line-soft); min-height:44px; }
.trow:last-child { border-bottom:none; }
.trow .tcheck { width:19px; height:19px; min-width:19px; border:1.5px solid var(--ink-300); border-radius:2px; background:var(--white-2); display:flex; align-items:center; justify-content:center; color:transparent; font-size:13px; transition:all .12s var(--ease); border:1.5px solid var(--line-strong); }
.trow .tcheck.done { background:var(--teal); border-color:var(--teal); color:#fff; }
.trow .tmain { flex:1; min-width:0; }
.trow .ttitle { color:var(--ink-800); font-size:15px; cursor:pointer; }
.trow.done .ttitle { color:var(--ink-400); text-decoration:line-through; }
.trow .tmeta { font-size:12px; color:var(--ink-400); margin-top:1px; display:flex; gap:8px; flex-wrap:wrap; }
.trow .tstar { background:none; border:none; font-size:16px; color:var(--ink-300); padding:4px; }
.trow .tstar.on { color:var(--gold); }
.badge { font:600 10px var(--font-sans); letter-spacing:.1em; text-transform:uppercase; padding:2px 8px; border-radius:999px; }
.badge.ink { background:var(--ink-100); color:var(--ink-600); }
.badge.accent { background:var(--sapphire-100); color:var(--sapphire); }
.badge.ok { background:var(--teal-100); color:var(--teal); }
.badge.warn { background:var(--gold-100); color:var(--gold); }
.badge.alert { background:var(--garnet-100); color:var(--garnet); }
.p1 { color:var(--garnet); font-weight:600; }

/* ---------- forms ---------- */
.field { margin-bottom:18px; }
.field label { display:block; margin-bottom:6px; font:600 11px var(--font-sans); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-400); }
.field input, .field select { width:100%; height:40px; border:none; border-bottom:1px solid var(--line-strong); background:var(--white-2); padding:0 10px; font:400 15px var(--font-sans); color:var(--ink-800); outline:none; border-radius:2px 2px 0 0; transition:border-color .12s; }
.field input:focus, .field select:focus { border-bottom:1.5px solid var(--ink-900); }
.field textarea { width:100%; border:1px solid var(--line-strong); border-radius:2px; background:var(--white-2); padding:10px; font:400 15px/1.5 var(--font-sans); color:var(--ink-800); outline:none; min-height:80px; resize:vertical; }
.field textarea:focus { border-color:var(--ink-900); }
.field .mono { font-family:var(--font-mono); font-size:14px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:42px; padding:0 22px; border-radius:2px; border:1px solid transparent; font:600 12px var(--font-sans); letter-spacing:.12em; text-transform:uppercase; transition:transform .08s; }
.btn:active { transform:translateY(1px); }
.btn.primary { background:var(--black); color:var(--on-black); }
.btn.secondary { background:var(--white); border-color:var(--line-strong); color:var(--ink-700); }
.btn.ghost { background:none; color:var(--ink-500); }
.btn.full { width:100%; }
.formgrid { display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
.formgrid .span2 { grid-column:1 / -1; }

/* ---------- login ---------- */
.loginwrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.loginbox { width:100%; max-width:360px; }
.loginbox .wordmark { font:400 34px var(--font-serif); color:var(--ink-900); margin-bottom:4px; }
.loginbox .wordsub { font:600 10px var(--font-sans); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-400); margin-bottom:34px; }
.loginerr { color:var(--garnet); font-size:13px; margin:-6px 0 14px; min-height:18px; }

/* ---------- capture overlay ---------- */
.overlay { position:fixed; inset:0; background:var(--scrim); backdrop-filter:blur(2px); display:flex; align-items:flex-start; justify-content:center; padding:12vh 20px 20px; z-index:50; }
.sheet { width:100%; max-width:560px; background:var(--white); border-radius:8px; box-shadow:var(--shadow-modal); padding:22px; }
.sheet textarea { width:100%; border:none; outline:none; font:400 17px/1.5 var(--font-sans); color:var(--ink-800); min-height:76px; resize:none; background:transparent; }
.sheet .sheetfoot { display:flex; align-items:center; justify-content:space-between; margin-top:10px; }
.capresult { margin-top:14px; border-top:1px solid var(--line-soft); padding-top:12px; font-size:14px; color:var(--ink-700); }
.capresult .rline { display:flex; gap:8px; align-items:baseline; padding:3px 0; }
.spin { display:inline-block; width:14px; height:14px; border:2px solid var(--ink-200); border-top-color:var(--sapphire); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ---------- misc ---------- */
.empty { color:var(--ink-400); font-size:14px; padding:12px 0; font-style:italic; }
.quiet { color:var(--ink-400); font-size:12px; }
.fab { position:fixed; right:22px; bottom:calc(24px + env(safe-area-inset-bottom)); width:54px; height:54px; border-radius:50%; background:var(--black); color:var(--on-black); border:none; font-size:22px; box-shadow:0 12px 38px -12px rgba(15,21,36,.4); z-index:40; }
.chips { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.chip { border:1px solid var(--line-strong); background:var(--white); border-radius:999px; padding:5px 14px; font:600 11px var(--font-sans); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-500); }
.chip.on { background:var(--black); color:var(--on-black); border-color:var(--black); }
.evrow { display:flex; gap:12px; padding:7px 0; border-bottom:1px solid var(--line-soft); font-size:14px; }
.evrow:last-child { border-bottom:none; }
.evrow .evtime { font:500 12px var(--font-mono); color:var(--gold); min-width:74px; padding-top:2px; }
.domrow { display:flex; align-items:center; justify-content:space-between; padding:13px 2px; border-bottom:1px solid var(--line-soft); }
.domrow:last-child { border-bottom:none; }
.domrow .dname { color:var(--ink-800); font-size:15px; font-weight:500; }
.domrow .dstats { display:flex; gap:14px; font:500 12px var(--font-mono); color:var(--ink-400); }

/* ---------- phase 2: rhythm / routines / projects / slipping ---------- */
.sliprow { display:flex; align-items:flex-start; gap:10px; padding:9px 0; border-bottom:1px solid #e0c4cb; }
.sliprow:last-child { border-bottom:none; }
.slipmain { flex:1; font-size:14px; color:var(--ink-800); }
.slipx { background:none; border:none; color:var(--ink-400); font-size:13px; padding:2px 6px; }
.slipx:hover { color:var(--garnet); }
.rblock { padding:8px 0 4px; border-bottom:1px solid var(--line-soft); }
.rblock:last-child { border-bottom:none; }
.rrow, .rtrow { display:flex; align-items:center; gap:11px; padding:8px 0; min-height:40px; }
.rtrow { align-items:flex-start; border-bottom:1px solid var(--line-soft); padding:11px 0; }
.rtrow:last-child { border-bottom:none; }
.rtmain { flex:1; min-width:0; }
.rname { font-size:15px; color:var(--ink-800); }
.rname.rdone, .rdone { color:var(--ink-400); text-decoration:line-through; }
.rbridge { display:flex; gap:8px; flex-wrap:wrap; padding:8px 0 6px; }
.heat { display:flex; gap:3px; margin-top:6px; }
.heatcell { width:9px; height:9px; border-radius:2px; background:var(--ink-100); }
.heatcell.on { background:var(--teal); }
.progress { height:6px; background:var(--ink-100); border-radius:3px; overflow:hidden; }
.progressfill { height:100%; background:var(--sapphire); border-radius:3px; transition:width .3s var(--ease); }
.projrow { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 2px; border-bottom:1px solid var(--line-soft); cursor:pointer; }
.projrow:last-child { border-bottom:none; }
.projrow:hover .projname { color:var(--sapphire); }
.projname { font-size:15.5px; font-weight:500; color:var(--ink-800); }
.sheetwide { max-width:640px; max-height:86vh; overflow-y:auto; }
.addrow { display:flex; gap:8px; margin-top:8px; }
.addrow input { flex:1; height:38px; border:none; border-bottom:1px solid var(--line-strong); background:var(--white-2); padding:0 10px; font:400 14px var(--font-sans); color:var(--ink-800); outline:none; border-radius:2px 2px 0 0; }
.addrow input:focus { border-bottom:1.5px solid var(--ink-900); }

/* ---------- daily brief: countdown / daily text / tiles / week / lifebook / inbox ---------- */
.countdown { display:flex; align-items:center; justify-content:space-between; gap:16px; background:var(--ink-900); color:var(--on-black); border-radius:4px; padding:14px 20px; margin-bottom:20px; }
.cdnum { font:400 34px var(--font-serif); color:var(--gold); }
.cdlbl { font:600 11px var(--font-sans); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-300); margin-left:10px; }
.cdmission { font-size:13px; color:var(--ink-300); text-align:right; max-width:60%; font-style:italic; }
.dtcard { background:var(--white); }
.dtscrip { font:400 20px/1.4 var(--font-serif); color:var(--ink-900); margin:8px 0 6px; }
.dtcite { font-size:15px; color:var(--ink-500); font-style:italic; }
.dtcomment { font-size:14px; line-height:1.6; color:var(--ink-600); }
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:3px; overflow:hidden; }
.tile { background:var(--white); padding:12px 14px; }
.tlabel { font:600 10px var(--font-sans); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-400); }
.tval { font:400 24px var(--font-serif); color:var(--ink-900); margin-top:3px; }
.tval.t-teal { color:var(--teal); } .tval.t-gold { color:var(--gold); } .tval.t-garnet { color:var(--garnet); }
.tsub { font-size:11px; color:var(--ink-400); margin-top:1px; }
.wfocus { font:400 15px var(--font-serif); font-style:italic; color:var(--ink-700); margin-bottom:12px; }
.wtrow { display:flex; align-items:center; gap:10px; padding:6px 0; font-size:14px; color:var(--ink-700); border-bottom:1px solid var(--line-soft); }
.wtrow:last-child { border-bottom:none; }
.wtcheck { width:16px; height:16px; min-width:16px; border:1.5px solid var(--line-strong); border-radius:2px; display:flex; align-items:center; justify-content:center; font-size:11px; color:#fff; }
.wtcheck.on { background:var(--teal); border-color:var(--teal); }
.nsstar { text-transform:none; letter-spacing:0; font-weight:500; }
.lbrow { display:flex; align-items:center; gap:13px; padding:14px 2px; border-bottom:1px solid var(--line-soft); }
.lbrow:last-child { border-bottom:none; }
.lbdot { width:10px; height:10px; min-width:10px; border-radius:50%; }
.lbmain { flex:1; min-width:0; }
.lblinks { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.dashlink { font:600 12px var(--font-sans); color:var(--sapphire); white-space:nowrap; }
.dashlink:hover { color:var(--ink-900); }
.caprow { display:flex; align-items:flex-start; gap:12px; padding:12px 2px; border-bottom:1px solid var(--line-soft); }
.caprow:last-child { border-bottom:none; }
.capmain { flex:1; min-width:0; }
.captext { font-size:15px; color:var(--ink-800); }
.capacts { display:flex; align-items:center; gap:8px; }
.capacts select { border:1px solid var(--line-strong); border-radius:2px; background:var(--white-2); font:500 12px var(--font-sans); color:var(--ink-600); padding:6px; }

/* ---------- mobile ---------- */
.tabbar { display:none; }
@media (max-width:900px) {
  .rail { display:none; }
  main { margin-left:0; padding:26px 18px 130px; }
  h1.pagetitle { font-size:32px; }
  .formgrid { grid-template-columns:1fr; }
  .tabbar { display:flex; position:fixed; left:0; right:0; bottom:0; background:var(--white); border-top:1px solid var(--line); z-index:30; padding-bottom:env(safe-area-inset-bottom); }
  .tabbar button { flex:1; background:none; border:none; padding:11px 0 9px; font:600 10px var(--font-sans); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-400); }
  .tabbar button.active { color:var(--ink-900); box-shadow:inset 0 2px 0 var(--sapphire); }
  .fab { bottom:calc(74px + env(safe-area-inset-bottom)); }
}