/* CS Planner — warm editorial. Off-white paper, deep palm green, coral and
   gold accents. Evolved from the Weekly Operating Matrix look. */

:root {
  --porcelain: #FAF7F2;
  --paper-2: #F3EEE5;
  --surface: #ffffff;
  --palm: #1E3A2F;
  --palm-deep: #142720;
  --jade: #7FB89E;
  --jade-soft: #E3EFE8;
  --sand: #D9C7A7;
  --coral: #D96C4F;
  --coral-soft: #F6E3DC;
  --gold: #C9A227;
  --gold-soft: #F4EAC9;
  --ink: #22271F;
  --ink-soft: #5C6357;
  --ink-faint: #9AA093;
  --line: rgba(34, 39, 31, 0.12);
  --serif: 'Fraunces', ui-serif, Georgia, serif;
  --sans: 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(20, 39, 32, 0.06);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--porcelain);
  background-image: radial-gradient(1200px 500px at 20% -10%, rgba(127, 184, 158, 0.08), transparent);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; color: var(--palm-deep); margin: 0 0 .4em; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
a { color: var(--palm); }

/* ── Shell ── */
header.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px; border-bottom: 1px solid var(--line);
  background: var(--porcelain); position: sticky; top: 0; z-index: 20;
}
.topbar .brand { font-family: var(--serif); font-weight: 700; font-size: 1.1rem; color: var(--palm-deep); text-decoration: none; }
nav.tabs { display: flex; gap: 2px; flex-wrap: wrap; }
nav.tabs a {
  padding: 6px 11px; border-radius: 999px; text-decoration: none;
  color: var(--ink-soft); font-weight: 500; font-size: .92rem;
}
nav.tabs a.active { background: var(--palm); color: var(--porcelain); }
nav.tabs a:hover:not(.active) { background: var(--paper-2); }
.topbar .who { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: .85rem; }
.topbar .who img { width: 26px; height: 26px; border-radius: 50%; }

main { max-width: 980px; margin: 0 auto; padding: 24px 20px 80px; }

/* ── Cards & chips ── */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px 16px; margin-bottom: 12px;
}
.card.tinted { background: var(--jade-soft); }
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); font-size: .85rem; }

.chip {
  display: inline-block; padding: 1px 9px; border-radius: 999px;
  font-size: .74rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
}
.chip.sell { background: var(--coral-soft); color: var(--coral); }
.chip.build { background: var(--jade-soft); color: var(--palm); }
.chip.decide { background: var(--gold-soft); color: #8A6D0F; }
.chip.software { background: var(--paper-2); color: var(--ink-soft); }
.chip.status { background: var(--paper-2); color: var(--ink-soft); text-transform: none; }
.chip.warn { background: var(--gold-soft); color: #8A6D0F; text-transform: none; }
.chip.confidence-low { background: var(--gold-soft); color: #8A6D0F; }
.chip.confidence-medium { background: var(--paper-2); color: var(--ink-soft); }
.chip.confidence-high { background: var(--jade-soft); color: var(--palm); }

.prio { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.prio.p1 { background: var(--coral); }
.prio.p2 { background: var(--gold); }
.prio.p3 { background: var(--sand); }

/* ── Buttons & forms ── */
button, .btn {
  font-family: var(--sans); font-size: .9rem; font-weight: 600;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  color: var(--ink); padding: 7px 14px; cursor: pointer;
}
button:hover { border-color: var(--palm); }
button.primary { background: var(--palm); border-color: var(--palm); color: var(--porcelain); }
button.primary:hover { background: var(--palm-deep); }
button.danger { color: var(--coral); }
button.small { padding: 3px 9px; font-size: .8rem; font-weight: 500; }
button:disabled { opacity: .5; cursor: default; }

textarea, input, select {
  font-family: var(--sans); font-size: .95rem; color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
  background: var(--surface); width: 100%;
}
textarea:focus, input:focus, select:focus { outline: 2px solid var(--jade); outline-offset: 0; }
textarea.dumpbox { min-height: 140px; resize: vertical; font-size: 1rem; }
label.f { display: block; font-size: .78rem; font-weight: 600; color: var(--ink-soft); margin: 8px 0 3px; }

.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 14px; }

/* ── Progress bars ── */
.bar { height: 7px; border-radius: 999px; background: var(--paper-2); overflow: hidden; }
.bar > i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--coral), var(--palm));
  transition: width .35s ease;
}

/* ── Task rows (Today, Roadmap) ── */
.task-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 14px;
  border-top: 1px solid var(--line);
}
.task-row input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--palm); flex: 0 0 17px; cursor: pointer; }
.task-row .t { flex: 1; }
.task-row.done .t { text-decoration: line-through; color: var(--ink-faint); }

/* ── Week matrix (structure evolved from the original Operating Matrix) ── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 6px;
  color: var(--palm); font-size: .72rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 24px; height: 2px; border-radius: 2px; background: var(--coral); }
.wk-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.wk-top h1 { font-size: clamp(1.8rem, 4.5vw, 2.6rem); line-height: 1; margin: 0; letter-spacing: -.02em; }
.wk-nav { display: flex; align-items: center; gap: 8px; }
.week-pill {
  padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink-soft); font-size: .78rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}

.rulebanner {
  position: relative; overflow: hidden; display: flex; gap: 14px; align-items: center;
  margin-bottom: 14px; padding: 16px 20px; border-radius: 14px;
  color: var(--porcelain); background: var(--palm); box-shadow: var(--shadow);
}
.rulebanner::after {
  content: ""; position: absolute; right: -48px; top: -80px; width: 180px; height: 180px;
  border: 32px solid rgba(255, 255, 255, .07); border-radius: 50%;
}
.rulebanner .lbl {
  flex: 0 0 auto; padding: 5px 9px; border-radius: 7px; color: var(--palm); background: var(--porcelain);
  font-size: .68rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
}
.rulebanner p { position: relative; z-index: 1; margin: 0; font-weight: 650; font-size: clamp(.95rem, 2.2vw, 1.15rem); line-height: 1.35; }

.progress-card {
  margin-bottom: 14px; padding: 14px 18px; border: 1px solid var(--line);
  border-radius: 14px; background: var(--surface); box-shadow: var(--shadow);
}
.progress-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.progress-title { font-size: .78rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--palm-deep); }
.progress-text { color: var(--ink-soft); font-size: .84rem; font-variant-numeric: tabular-nums; }
.progress-track { overflow: hidden; height: 10px; border-radius: 999px; background: var(--paper-2); }
.progress-fill {
  width: 0; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--coral), var(--palm));
  transition: width .3s ease;
}

.wk-day {
  overflow: hidden; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); margin-bottom: 10px; box-shadow: var(--shadow);
}
.wk-day.today { border-color: var(--palm); }
.wk-toggle {
  width: 100%; display: grid; grid-template-columns: 46px 1fr auto auto; gap: 13px;
  align-items: center; padding: 14px 18px; border: 0; background: transparent;
  text-align: left; cursor: pointer; border-radius: 0; font-weight: 500;
}
.wk-toggle:hover { background: rgba(30, 58, 47, .035); border-color: transparent; }
.day-num {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px;
  color: var(--palm); background: var(--jade-soft);
  font-family: var(--serif); font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.wk-day.today .day-num { color: var(--porcelain); background: var(--palm); }
.day-copy { min-width: 0; }
.day-name { display: block; font-family: var(--serif); font-weight: 650; font-size: 1.02rem; color: var(--palm-deep); }
.day-focus {
  display: block; overflow: hidden; color: var(--ink-soft); font-size: .82rem;
  text-overflow: ellipsis; white-space: nowrap;
}
.day-count {
  padding: 4px 9px; border-radius: 999px; color: var(--palm); background: var(--jade-soft);
  font-size: .73rem; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.day-count.done-all { color: var(--porcelain); background: var(--palm); }
.wk-chevron {
  width: 28px; height: 28px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%; color: var(--ink-faint);
  font-size: 1rem; line-height: 1; transition: transform .18s ease, background .18s ease;
}
.wk-toggle[aria-expanded="true"] .wk-chevron { transform: rotate(180deg); background: var(--jade-soft); }
.wk-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; }
.wk-panel[data-open="true"] { grid-template-rows: 1fr; }
.wk-panel-inner { overflow: hidden; }

.task-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px;
  padding: 2px 18px 18px; margin: 0;
}
.taskcard {
  position: relative; display: flex; align-items: flex-start; min-height: 64px;
  padding: 12px 34px 12px 12px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.taskcard:hover { border-color: rgba(30, 58, 47, .42); transform: translateY(-1px); }
.taskcard input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.checkmark {
  flex: 0 0 auto; display: grid; place-items: center; width: 21px; height: 21px;
  margin: 1px 10px 0 0; border: 2px solid var(--ink-faint); border-radius: 7px;
  color: transparent; background: var(--surface); font-size: .78rem; font-weight: 900; transition: .15s ease;
}
.taskcard input:checked + .checkmark { border-color: var(--palm); color: #fff; background: var(--palm); }
.taskcard .tc-text { font-size: .88rem; font-weight: 550; line-height: 1.4; }
.taskcard .tc-text .chip { margin-left: 6px; vertical-align: 1px; }
.taskcard:has(input:checked) { border-color: transparent; background: var(--jade-soft); }
.taskcard input:checked ~ .tc-text { color: var(--ink-soft); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.tc-edit {
  position: absolute; top: 6px; right: 6px; padding: 2px 7px; font-size: .75rem;
  border: 0; background: transparent; color: var(--ink-faint); opacity: 0; cursor: pointer;
}
.taskcard:hover .tc-edit { opacity: 1; }
.tc-empty { color: var(--ink-faint); font-family: var(--serif); font-style: italic; padding: 2px 18px 16px; }

@media (max-width: 680px) {
  .task-grid { grid-template-columns: 1fr; }
  .wk-toggle { grid-template-columns: 40px 1fr auto; gap: 10px; padding: 12px 14px; }
  .day-num { width: 40px; height: 40px; }
  .wk-chevron { display: none; }
  .day-focus { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}
@media print {
  .topbar, .wk-nav, .tc-edit { display: none; }
  .wk-panel { grid-template-rows: 1fr !important; }
  .wk-day, .rulebanner, .progress-card, .card { box-shadow: none; }
}

/* ── Goal tree ── */
details.node { margin: 4px 0; }
details.node > summary { list-style: none; cursor: pointer; }
details.node > summary::-webkit-details-marker { display: none; }
.node-line {
  display: flex; align-items: center; gap: 9px; padding: 7px 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow);
}
.node-line .title { font-weight: 600; }
.node-line .type { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); }
.node-line .prog { width: 90px; }
.node-kids { margin-left: 22px; border-left: 2px solid var(--jade-soft); padding-left: 10px; }
.caret { transition: transform .15s; color: var(--ink-faint); font-size: .7rem; }
details[open] > summary .caret { transform: rotate(90deg); }

/* ── Roadmap ── */
.hswitch { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
.hswitch button.on { background: var(--palm); color: var(--porcelain); border-color: var(--palm); }
.period-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.period-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; cursor: pointer; box-shadow: var(--shadow); }
.period-card:hover { border-color: var(--palm); }
.period-card b { font-family: var(--serif); }

/* ── Review cards ── */
.proposal { border-left: 4px solid var(--jade); }
.proposal.low, .proposal.needs { border-left-color: var(--gold); }
.proposal .why { background: var(--paper-2); border-radius: 8px; padding: 8px 10px; font-size: .87rem; color: var(--ink-soft); margin-top: 8px; }
.reviewbar {
  position: sticky; top: 53px; z-index: 10; background: var(--porcelain);
  padding: 10px 0; display: flex; gap: 10px; align-items: center; border-bottom: 1px solid var(--line); margin-bottom: 12px;
}

/* ── Misc ── */
.banner { background: var(--gold-soft); border: 1px solid rgba(201, 162, 39, .35); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 12px; }
.empty { text-align: center; color: var(--ink-faint); padding: 40px 10px; font-family: var(--serif); font-style: italic; }
.spin { display: inline-block; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
dialog {
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 40px rgba(20,39,32,.18);
  padding: 18px 20px; width: min(560px, 92vw); background: var(--porcelain);
}
dialog::backdrop { background: rgba(20, 39, 32, .35); }
.toast {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: var(--palm-deep); color: var(--porcelain); border-radius: 999px;
  padding: 8px 18px; font-size: .9rem; z-index: 50; box-shadow: 0 4px 16px rgba(0,0,0,.25);
}

@media (max-width: 720px) {
  main { padding: 16px 12px 70px; }
  .grid2, .grid3 { grid-template-columns: 1fr; }
  nav.tabs a { padding: 5px 9px; font-size: .85rem; }
  .topbar .who span { display: none; }
}

/* ── Themes ─────────────────────────────────────────────────────────
   Selected in Settings → Appearance; stored server-side (cross-device)
   and cached in localStorage for instant paint. Default = Editorial. */

:root[data-theme="cortex"] {
  --porcelain: #0b1017; --paper-2: #10161f; --surface: #131b26;
  --palm: #38bdf8; --palm-deep: #93d8fb;
  --jade: #38bdf8; --jade-soft: #14283a; --sand: #2b415c;
  --coral: #fb7185; --coral-soft: #371d29; --gold: #fbbf24; --gold-soft: #362b12;
  --ink: #e2eaf4; --ink-soft: #8ba3bd; --ink-faint: #587090;
  --line: rgba(226, 234, 244, 0.13);
  --serif: 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
:root[data-theme="cortex"] body {
  background-image: radial-gradient(1200px 500px at 20% -10%, rgba(56, 189, 248, 0.07), transparent);
}
:root[data-theme="cortex"] .chip.decide,
:root[data-theme="cortex"] .chip.warn,
:root[data-theme="cortex"] .chip.confidence-low { color: #fbbf24; }
:root[data-theme="cortex"] .rulebanner::after { border-color: rgba(11, 16, 23, 0.25); }

:root[data-theme="minimal"] {
  --porcelain: #fafafa; --paper-2: #f0f0ef; --surface: #ffffff;
  --palm: #18181b; --palm-deep: #09090b;
  --jade: #a1a1aa; --jade-soft: #ececee; --sand: #d4d4d8;
  --coral: #2563eb; --coral-soft: #e8effe; --gold: #52525b; --gold-soft: #e8e8e8;
  --ink: #18181b; --ink-soft: #52525b; --ink-faint: #a1a1aa;
  --line: rgba(0, 0, 0, 0.09);
  --serif: 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --radius: 8px; --shadow: none;
}
:root[data-theme="minimal"] body { background-image: none; }
:root[data-theme="minimal"] .chip.decide,
:root[data-theme="minimal"] .chip.warn,
:root[data-theme="minimal"] .chip.confidence-low { color: #52525b; }

:root[data-theme="noir"] {
  --porcelain: #0d0c0a; --paper-2: #151310; --surface: #1a1713;
  --palm: #c9a86c; --palm-deep: #e4cd9e;
  --jade: #c9a86c; --jade-soft: #2a2418; --sand: #4a3f2c;
  --coral: #d97757; --coral-soft: #34211a; --gold: #c9a86c; --gold-soft: #2a2418;
  --ink: #ece5d8; --ink-soft: #a99f8c; --ink-faint: #6f6757;
  --line: rgba(236, 229, 216, 0.13);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
:root[data-theme="noir"] body {
  background-image: radial-gradient(1200px 500px at 20% -10%, rgba(201, 168, 108, 0.06), transparent);
}
:root[data-theme="noir"] .chip.decide,
:root[data-theme="noir"] .chip.warn,
:root[data-theme="noir"] .chip.confidence-low { color: #c9a86c; }
:root[data-theme="noir"] .rulebanner { color: #0d0c0a; }
:root[data-theme="noir"] .rulebanner .lbl { background: #0d0c0a; color: #c9a86c; }

/* Theme picker swatches (Settings → Appearance) */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.theme-opt {
  border: 2px solid var(--line); border-radius: 12px; padding: 10px; cursor: pointer;
  background: var(--surface); text-align: left;
}
.theme-opt.on { border-color: var(--palm); }
.theme-opt .sw { display: flex; gap: 4px; margin-bottom: 8px; }
.theme-opt .sw i { width: 22px; height: 22px; border-radius: 6px; display: block; }
.theme-opt b { font-size: .88rem; }
.theme-opt .faint { display: block; }

/* ── North Star (Roadmap) ── */
.northstar {
  position: relative; overflow: hidden; display: flex; gap: 14px; align-items: flex-start;
  margin-bottom: 14px; padding: 18px 20px; border-radius: 14px;
  color: var(--porcelain); background: var(--palm); box-shadow: var(--shadow);
}
.northstar::after {
  content: ""; position: absolute; right: -48px; top: -80px; width: 200px; height: 200px;
  border: 34px solid rgba(255, 255, 255, .07); border-radius: 50%;
}
.northstar .lbl {
  flex: 0 0 auto; padding: 5px 9px; border-radius: 7px; color: var(--palm); background: var(--porcelain);
  font-size: .68rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
}
.ns-goals { position: relative; z-index: 1; display: grid; gap: 14px; flex: 1; min-width: 0; }
.ns-goal b { font-family: var(--serif); font-size: clamp(1.05rem, 2.4vw, 1.3rem); font-weight: 650; letter-spacing: -.01em; }
.ns-goal p { margin: 4px 0 8px; font-size: .87rem; opacity: .82; line-height: 1.45; }
.ns-bar { overflow: hidden; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .18); margin: 8px 0 5px; }
.ns-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--coral), var(--gold)); transition: width .3s ease; }
.ns-count { font-size: .78rem; opacity: .85; font-variant-numeric: tabular-nums; }
:root[data-theme="noir"] .northstar { color: #0d0c0a; }
:root[data-theme="noir"] .northstar .lbl { background: #0d0c0a; color: #c9a86c; }
:root[data-theme="noir"] .ns-bar { background: rgba(13, 12, 10, .25); }

.serves { display: block; font-size: .74rem; color: var(--ink-faint); margin-top: 3px; font-weight: 500; }
.taskcard input:checked ~ .tc-text .serves { text-decoration: none; }
@media (max-width: 680px) { .northstar { flex-direction: column; gap: 10px; } }