/* ============================================================
   Daily Bread — stylesheet
   Warm-charcoal dark theme, mobile-first, zero dependencies.
   ============================================================ */

:root{
  --bg:        #14110f;
  --bg-2:      #1b1714;
  --surface:   #211c19;
  --surface-2: #2a2420;
  --line:      #3a322c;
  --line-soft: #2c2622;
  --text:      #f3ece3;
  --text-dim:  #b8aa9b;
  --text-mut:  #8a7c6f;

  --bread:     #e0a44a;   /* primary accent (wheat) */
  --bread-dim: #b9863a;

  --whiteroom:    #a78bfa;
  --gametheory:   #f0b34a;
  --learning:     #34d399;
  --adaptability: #fb7185;

  --good: #4ade80;
  --warn: #fbbf24;
  --bad:  #f87171;

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 20px;

  --shadow: 0 6px 24px rgba(0,0,0,.35);
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; }
body{
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(224,164,74,.06), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(167,139,250,.05), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  overscroll-behavior-y:none;
}
button{ font-family:inherit; cursor:pointer; color:inherit; }
a{ color:var(--bread); }

/* ---------- Boot splash ---------- */
.boot{
  position:fixed; inset:0; z-index:100;
  display:flex; flex-direction:column; gap:12px;
  align-items:center; justify-content:center;
  background:var(--bg); transition:opacity .4s ease;
}
.boot.hide{ opacity:0; pointer-events:none; }
.boot-mark{ font-size:54px; animation:rise 1.4s ease infinite alternate; }
.boot-text{ color:var(--text-mut); letter-spacing:.28em; text-transform:uppercase; font-size:12px; }
@keyframes rise{ from{ transform:translateY(4px) } to{ transform:translateY(-4px) } }

/* ---------- Top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:30;
  padding-top:var(--safe-t);
  background:rgba(20,17,15,.82);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.topbar-inner{
  max-width:1100px; margin:0 auto;
  height:54px; padding:0 14px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{ background:none; border:0; display:flex; align-items:center; gap:9px; padding:6px 4px; }
.brand-mark{ font-size:20px; }
.brand-name{ font-weight:700; letter-spacing:.01em; font-size:16px; }
.topbar-actions{ display:flex; align-items:center; gap:8px; }
.icon-btn{
  background:var(--surface); border:1px solid var(--line);
  border-radius:999px; padding:7px 12px; font-size:14px;
  display:flex; align-items:center; gap:7px; color:var(--text-dim);
  transition:border-color .15s, color .15s;
}
.icon-btn:hover{ border-color:var(--bread-dim); color:var(--text); }
#sync-label{ font-size:12px; font-weight:600; letter-spacing:.02em; }
.sync-dot{ width:8px; height:8px; border-radius:50%; background:var(--text-mut); box-shadow:0 0 0 0 rgba(0,0,0,0); }
.sync-dot.ok{ background:var(--good); }
.sync-dot.busy{ background:var(--warn); animation:pulse 1s infinite; }
.sync-dot.err{ background:var(--bad); }
.sync-dot.pending{ background:var(--bread); }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }

/* ---------- Layout ---------- */
.app{
  max-width:1100px; margin:0 auto;
  padding:16px 14px calc(96px + var(--safe-b));
}
.view-head{ margin:4px 0 18px; }
.view-kicker{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--text-mut); font-weight:700;
}
.view-title{ font-size:26px; font-weight:800; margin:4px 0 2px; letter-spacing:-.01em; }
.view-sub{ color:var(--text-dim); font-size:13.5px; max-width:60ch; }

/* ---------- Grid ---------- */
.grid{ display:grid; gap:12px; }
.grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.grid.cols-4{ grid-template-columns:repeat(4,1fr); }
@media(min-width:720px){
  .grid.md-2{ grid-template-columns:repeat(2,1fr); }
  .grid.md-3{ grid-template-columns:repeat(3,1fr); }
  .grid.md-4{ grid-template-columns:repeat(4,1fr); }
}

/* ---------- Cards ---------- */
.card{
  background:linear-gradient(180deg, var(--surface), var(--bg-2));
  border:1px solid var(--line-soft);
  border-radius:var(--r);
  padding:16px;
}
.card.pad-lg{ padding:20px; }
.card-title{ font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--text-dim); margin:0 0 12px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.card-title .hint{ font-size:11px; color:var(--text-mut); font-weight:500; letter-spacing:0; }

/* ---------- Stat tiles ---------- */
.stat{
  background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--r); padding:14px 14px 13px;
  position:relative; overflow:hidden;
}
.stat::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--accent, var(--bread)); opacity:.8;
}
.stat-val{ font-family:var(--mono); font-size:25px; font-weight:700; letter-spacing:-.02em; line-height:1.1; }
.stat-val small{ font-size:14px; color:var(--text-mut); font-weight:600; }
.stat-lbl{ font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--text-mut); margin-top:5px; font-weight:600; }
.stat-sub{ font-size:12px; color:var(--text-dim); margin-top:3px; }

/* ---------- Program cards (dashboard) ---------- */
.prog-card{
  display:block; text-align:left; width:100%;
  background:linear-gradient(180deg, var(--surface), var(--bg-2));
  border:1px solid var(--line-soft); border-radius:var(--r-lg);
  padding:16px; position:relative; overflow:hidden;
  transition:transform .12s ease, border-color .15s ease;
}
.prog-card:hover{ transform:translateY(-2px); border-color:var(--accent); }
.prog-card .glow{
  position:absolute; right:-40px; top:-40px; width:140px; height:140px;
  background:radial-gradient(circle, var(--accent), transparent 65%);
  opacity:.16; pointer-events:none;
}
.prog-top{ display:flex; align-items:center; gap:11px; margin-bottom:14px; }
.prog-ico{
  width:42px; height:42px; border-radius:12px; flex:none;
  display:grid; place-items:center; font-size:21px;
  background:var(--surface-2); border:1px solid var(--line);
}
.prog-name{ font-weight:800; font-size:16px; letter-spacing:-.01em; }
.prog-tag{ font-size:12px; color:var(--text-mut); }
.prog-metrics{ display:flex; gap:18px; margin-top:2px; flex-wrap:wrap; }
.prog-metric .v{ font-family:var(--mono); font-size:20px; font-weight:700; }
.prog-metric .l{ font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--text-mut); }

/* ---------- Progress bar ---------- */
.bar{ height:8px; border-radius:99px; background:var(--surface-2); overflow:hidden; border:1px solid var(--line-soft); }
.bar > span{ display:block; height:100%; background:var(--accent, var(--bread)); border-radius:99px; transition:width .5s ease; }
.bar.tall{ height:11px; }
.bar-row{ display:flex; align-items:center; gap:10px; }
.bar-row .bar{ flex:1; }
.bar-pct{ font-family:var(--mono); font-size:12px; color:var(--text-dim); min-width:38px; text-align:right; }

/* ---------- Ring (donut) ---------- */
.ring-wrap{ display:flex; align-items:center; gap:16px; }
.ring{ flex:none; }
.ring-center{ font-family:var(--mono); font-weight:700; }

/* ---------- Checklists ---------- */
.checklist{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.check{
  display:flex; align-items:flex-start; gap:11px;
  background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--r-sm); padding:11px 12px; cursor:pointer;
  transition:border-color .12s, background .12s;
}
.check:hover{ border-color:var(--line); }
.check.done{ background:rgba(74,222,128,.06); border-color:rgba(74,222,128,.22); }
.check .box{
  width:20px; height:20px; border-radius:6px; flex:none; margin-top:1px;
  border:1.5px solid var(--line); display:grid; place-items:center;
  font-size:13px; color:transparent; transition:.12s;
}
.check.done .box{ background:var(--good); border-color:var(--good); color:#0c1a0e; }
.check .ct{ font-size:13.5px; line-height:1.35; }
.check .ct small{ display:block; color:var(--text-mut); font-size:11.5px; margin-top:1px; }

/* ---------- Forms ---------- */
details.logbox{
  background:linear-gradient(180deg, var(--surface), var(--bg-2));
  border:1px solid var(--line-soft); border-radius:var(--r);
  margin-bottom:12px; overflow:hidden;
}
details.logbox[open]{ border-color:var(--line); }
details.logbox > summary{
  list-style:none; cursor:pointer; padding:15px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-weight:700; font-size:14.5px;
}
details.logbox > summary::-webkit-details-marker{ display:none; }
details.logbox > summary .chev{ color:var(--text-mut); transition:transform .2s; }
details.logbox[open] > summary .chev{ transform:rotate(90deg); }
.logbody{ padding:4px 16px 16px; display:grid; gap:13px; }

.field{ display:grid; gap:6px; }
.field > label{ font-size:12px; font-weight:600; color:var(--text-dim); letter-spacing:.01em; }
.field .help{ font-size:11px; color:var(--text-mut); }
input[type=text], input[type=number], input[type=date], textarea, select{
  width:100%; background:var(--bg-2); color:var(--text);
  border:1px solid var(--line); border-radius:var(--r-sm);
  padding:10px 12px; font-size:15px; font-family:inherit;
  transition:border-color .12s;
}
input:focus, textarea:focus, select:focus{ outline:none; border-color:var(--bread-dim); }
textarea{ resize:vertical; min-height:64px; line-height:1.45; }
input[type=number]{ font-family:var(--mono); }
.row{ display:grid; gap:10px; grid-template-columns:1fr 1fr; }
.row.three{ grid-template-columns:1fr 1fr 1fr; }
@media(max-width:460px){ .row.three{ grid-template-columns:1fr 1fr; } }

/* chips / toggles */
.chips{ display:flex; flex-wrap:wrap; gap:7px; }
.chip{
  background:var(--surface); border:1px solid var(--line);
  border-radius:99px; padding:7px 13px; font-size:13px; color:var(--text-dim);
  transition:.12s; user-select:none;
}
.chip.on{ background:var(--accent,var(--bread)); border-color:var(--accent,var(--bread)); color:#1a1208; font-weight:700; }

/* score selector 1-10 / 1-5 */
.scale{ display:flex; gap:5px; flex-wrap:wrap; }
.scale button{
  width:34px; height:34px; border-radius:9px; font-family:var(--mono);
  background:var(--surface); border:1px solid var(--line); color:var(--text-dim); font-size:13px;
}
.scale button.on{ background:var(--accent,var(--bread)); border-color:var(--accent,var(--bread)); color:#1a1208; font-weight:700; }

.btn{
  background:var(--bread); color:#1c1207; border:0; font-weight:700;
  border-radius:var(--r-sm); padding:12px 16px; font-size:14.5px;
  transition:filter .12s, transform .05s;
}
.btn:hover{ filter:brightness(1.06); }
.btn:active{ transform:translateY(1px); }
.btn.full{ width:100%; }
.btn.ghost{ background:var(--surface); color:var(--text); border:1px solid var(--line); }
.btn.ghost:hover{ border-color:var(--bread-dim); }
.btn.sm{ padding:8px 12px; font-size:13px; }
.btn-row{ display:flex; gap:9px; flex-wrap:wrap; }

/* ---------- History list ---------- */
.hist{ display:grid; gap:8px; }
.hist-item{
  background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--r-sm); padding:11px 13px; font-size:13px;
  display:flex; gap:12px; align-items:baseline;
}
.hist-date{ font-family:var(--mono); color:var(--text-mut); font-size:12px; flex:none; min-width:84px; }
.hist-body{ color:var(--text-dim); }
.hist-body b{ color:var(--text); font-weight:600; }
.hist-tag{ font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--accent,var(--bread)); font-weight:700; }
.hist-pending{ color:var(--bread); font-size:11px; }

/* ---------- Heatmap ---------- */
.heat{ display:flex; gap:3px; overflow-x:auto; padding-bottom:4px; }
.heat-col{ display:grid; grid-template-rows:repeat(7,1fr); gap:3px; }
.heat-cell{ width:13px; height:13px; border-radius:3px; background:var(--surface-2); }
.heat-legend{ display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text-mut); margin-top:8px; }

/* ---------- SVG chart helpers ---------- */
.chart{ width:100%; display:block; }
.chart text{ fill:var(--text-mut); font-family:var(--mono); }
.axis-line{ stroke:var(--line-soft); }

/* ---------- Misc ---------- */
.muted{ color:var(--text-mut); }
.dim{ color:var(--text-dim); }
.section-gap{ margin-top:22px; }
.section-label{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-mut); font-weight:700; margin:24px 4px 12px; }
.inline-note{ font-size:12px; color:var(--text-mut); background:var(--surface); border:1px solid var(--line-soft); border-left:3px solid var(--bread-dim); border-radius:var(--r-sm); padding:10px 12px; }
.empty{ text-align:center; color:var(--text-mut); padding:26px 16px; font-size:13px; }
.pill{ display:inline-block; font-size:11px; font-weight:700; padding:3px 9px; border-radius:99px; background:var(--surface-2); border:1px solid var(--line); color:var(--text-dim); }
.pill.accent{ background:color-mix(in srgb, var(--accent,var(--bread)) 18%, transparent); border-color:var(--accent,var(--bread)); color:var(--accent,var(--bread)); }
hr.sep{ border:0; border-top:1px solid var(--line-soft); margin:18px 0; }

/* ---------- Tab bar ---------- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:flex; justify-content:space-around;
  background:rgba(20,17,15,.92);
  backdrop-filter:saturate(140%) blur(12px);
  border-top:1px solid var(--line-soft);
  padding:6px 4px calc(6px + var(--safe-b));
}
.tab{
  background:none; border:0; flex:1; max-width:140px;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:5px 2px; color:var(--text-mut); border-radius:10px;
  transition:color .12s;
}
.tab .tab-ico{ font-size:18px; line-height:1; filter:grayscale(.4) opacity(.8); }
.tab .tab-lbl{ font-size:10px; font-weight:600; letter-spacing:.01em; }
.tab.active{ color:var(--text); }
.tab.active .tab-ico{ filter:none; }
.tab.active .tab-lbl{ color:var(--accent,var(--bread)); }

@media(min-width:720px){
  .tabbar{ max-width:1100px; margin:0 auto; bottom:14px; left:50%; transform:translateX(-50%);
    border:1px solid var(--line); border-radius:99px; width:max-content; padding:7px 10px calc(7px + var(--safe-b)); gap:6px; }
  .tab{ flex-direction:row; max-width:none; padding:7px 14px; }
  .tab .tab-lbl{ font-size:12px; }
}

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; transform:translateX(-50%) translateY(20px);
  bottom:calc(86px + var(--safe-b)); z-index:60;
  background:var(--surface-2); border:1px solid var(--line);
  color:var(--text); padding:11px 16px; border-radius:99px;
  font-size:13px; font-weight:600; box-shadow:var(--shadow);
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; max-width:90vw;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast.good{ border-color:rgba(74,222,128,.4); }
.toast.bad{ border-color:rgba(248,113,113,.5); }

/* settings token field */
.token-field{ display:flex; gap:8px; }
.token-field input{ font-family:var(--mono); font-size:13px; letter-spacing:.02em; }
code.kbd{ font-family:var(--mono); background:var(--surface-2); padding:1px 6px; border-radius:5px; border:1px solid var(--line); font-size:12px; }

.doc{ font-size:13.5px; line-height:1.6; color:var(--text-dim); }
.doc ol, .doc ul{ padding-left:20px; }
.doc li{ margin:4px 0; }
.doc b{ color:var(--text); }