/* ============================================================
   Base layer: design tokens, reset, and the shell primitives
   (hero, status bar, buttons) shared with index.html and
   tasks.html. Those two pages still carry their own inline copy
   of this look; this file is the extracted version that the
   newer, multi-file pages load. Keep the token values in step
   with them so the app stays one visual system.
   ============================================================ */

:root {
  /* The airier gaura used inside the capacity ring's free slice. Until
     the file exists, the slice's sage tint shows on its own. */
  --gaura-bloom: url("../assets/gaura-bloom.png");

  /* Paper surfaces */
  --paper-app: #F6F6F2;
  --paper-body: #EBEAE3;
  --paper-hero: #F3F3EE;
  --paper-vault: #EFEEE7;
  --paper-editor: #FCFCFA;

  /* Cobalt pencil-ink ramp */
  --cobalt: #2333DD;
  --cobalt-hover: #1A26B2;
  --cobalt-light: #5A68EC;
  --cobalt-mid: #3849DB;
  --cobalt-pale-2: #8E99EA;
  /* A separate, purer blue reserved for small hand-drawn accents (the
     hero's underline stroke and rule) rather than UI chrome — cobalt
     already owns buttons, links and focus states, so this stays out
     of their way. Deliberately darker than a pure electric ultramarine
     (#3F00FF) — that read as too bright/glary for an accent seen on
     every page load. */
  --ultramarine: #240090;

  /* Ink / text */
  --ink-heading: #17233F;
  --ink-title: #1C2A48;
  --ink-body: #2C3550;
  --ink-body-2: #26324E;
  --text-secondary: #6B6F7B;
  --text-secondary-2: #7C7A72;
  --text-muted: #9A968A;
  --text-muted-2: #A9A490;
  --eyebrow: #9A8F6F;
  --danger: #B0503F;

  /* Lines & tints */
  --divider: rgba(35,51,221,0.12);
  --divider-hero: rgba(35,51,221,0.16);
  --selection: rgba(35,51,221,0.18);

  /* Done rows: a soft moss-green wash that reads on the ivory paper */
  --done-wash: #E7EDDC;
  --done-ink: #5E7150;

  /* Capacity signals: calm when there is room, warm when there is not.
     Deliberately not red/green traffic lights — an honest dashboard should
     inform, not scold. */
  --room-ink: #5E7150;
  --tight-ink: #97702F;
  --tight-wash: #F3E9D3;
  --over-ink: #B0503F;

  --font-ui: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;

  --hero-height: 9vh;
  --hero-min-height: 72px;
  --vault-width: 244px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }
body {
  font-family: var(--font-ui);
  background: var(--paper-body);
  color: var(--ink-body-2);
  height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--selection); }
a { color: var(--cobalt); text-decoration: none; }
a:hover { color: var(--cobalt-hover); }

@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes drawStroke { to { stroke-dashoffset: 0; } }
.draw-path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: drawStroke 1.1s ease forwards; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(35,51,221,0.20); border-radius: 0; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(35,51,221,0.34); background-clip: padding-box; }

button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select {
  font: inherit;
  color: var(--ink-body-2);
  border: 1px solid var(--divider);
  border-radius: 0;
  background: rgba(255,255,255,0.72);
  padding: 8px 12px;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: rgba(35,51,221,0.4); }

/* Native checkboxes paint their own subtly rounded control regardless of
   border-radius — appearance:none is the only way to make them sharp
   squares too, so this is unscoped rather than tied to one class. */
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; padding: 0; margin: 0; flex: none;
  border: 1.5px solid var(--divider); border-radius: 0;
  background: var(--paper-editor); cursor: pointer; position: relative;
  transition: background 0.12s ease, border-color 0.12s ease;
}
input[type="checkbox"]:checked,
input[type="checkbox"]:indeterminate {
  background: var(--cobalt); border-color: var(--cobalt);
}
input[type="checkbox"]:checked::after {
  content: "✓"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; line-height: 1;
}
input[type="checkbox"]:indeterminate::after {
  content: ""; position: absolute; left: 3px; right: 3px; top: 6.5px;
  height: 2px; background: #fff;
}
input[type="checkbox"]:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }

.hidden { display: none !important; }

.paper-grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(35,51,221,0.05) 0.6px, transparent 0.6px);
  background-size: 4px 4px; opacity: 0.5;
}

.primary-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 40px; padding: 0 18px;
  background: var(--cobalt); color: #F7F4EC;
  border-radius: 0; font-size: 13px; font-weight: 600;
  box-shadow: 0 2px 8px rgba(35,51,221,0.28);
  transition: background 0.15s ease;
}
.primary-button:hover { background: var(--cobalt-hover); }

.quiet-button {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px;
  font-size: 12.5px; font-weight: 600; color: var(--cobalt);
  border: 1px solid var(--divider); border-radius: 0;
  background: rgba(255,255,255,0.5);
}
.quiet-button:hover { border-color: rgba(35,51,221,0.4); color: var(--cobalt-hover); }

.delete-button {
  color: var(--danger); font-size: 12px; font-weight: 500; line-height: 1;
  padding: 5px 10px; border-radius: 0; border: 1px solid rgba(176,80,63,0.28);
  background: transparent; white-space: nowrap;
}
.delete-button:hover { background: rgba(176,80,63,0.08); border-color: rgba(176,80,63,0.45); }

/* Toggle button for is_done state — a clear action ("Done") rather than
   a checkbox, so a row never shows two boxes that look alike. */
.done-button {
  color: var(--text-muted); font-size: 12px; font-weight: 600; line-height: 1;
  padding: 5px 10px; border-radius: 0; border: 1px solid var(--divider);
  background: transparent; white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.done-button:hover { border-color: var(--cobalt); color: var(--cobalt); }
.done-button.is-done { background: var(--done-ink); border-color: var(--done-ink); color: #F7F4EC; }
.done-button.is-done:hover { opacity: 0.85; }

.status-bar {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
  z-index: 20; padding: 8px 18px; border-radius: 0; font-size: 13px;
  color: #F7F4EC; box-shadow: 0 6px 20px rgba(23,35,63,0.22);
}
.status-bar.is-error { background: var(--danger); }
.status-bar.is-notice { background: var(--cobalt); }

/* ---- Simple centered note (config missing / signed out / setup) ---- */
.center-note {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1; padding: 24px;
}
.center-note .card {
  background: var(--paper-editor); border: 1px solid var(--divider);
  border-radius: 0; padding: 34px 38px; max-width: 460px;
  box-shadow: 0 10px 30px rgba(23,35,63,0.08);
  animation: fadeUp 0.5s ease both;
}
.center-note h1 { font-family: var(--font-serif); font-weight: 500; font-size: 26px; color: var(--ink-heading); margin-bottom: 10px; }
.center-note p { font-size: 14px; line-height: 1.6; color: var(--ink-body); }
.center-note .primary-button { margin-top: 18px; }

/* ============================================================
   Hero — plain cream paper throughout, no photo and no color block.
   Ultramarine shows up only as the rule along the hero's bottom
   edge, which is what separates the header from the page below.
   Most of the hero stays cream, so there is very little saturated
   color to strain the eye on every page load.
   ============================================================ */
.hero {
  flex-shrink: 0; height: var(--hero-height); min-height: var(--hero-min-height);
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #4A3F86 0%, #362D63 100%); z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px;
}

.hero-utility {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  flex: none; z-index: 2;
}
.hero-back-link {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 13px;
  font-size: 13px; font-weight: 600; color: #F3F3EE;
  border: 1px solid rgba(255,255,255,0.22); border-radius: 0;
  background: rgba(255,255,255,0.14);
}
.hero-back-link:hover { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.2); color: #fff; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, #C7CCEE, #A9B0DE);
  display: flex; align-items: center; justify-content: center;
  color: #2A2560; font-size: 13px; font-weight: 600; font-family: var(--font-serif);
  box-shadow: 0 0 0 2px rgba(243,243,238,0.32), 0 2px 8px rgba(0,0,0,0.22); cursor: pointer;
}

.hero-wordmark {
  display: flex; flex-direction: column;
  order: -1; flex: none; z-index: 2;
  opacity: 0; animation: fadeUp 0.7s ease 0.15s forwards;
}
.hero-eyebrow {
  font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(243,243,238,0.68); margin-bottom: 3px;
}
.hero-title {
  font-family: var(--font-serif); font-weight: 500; font-size: 26px;
  line-height: 0.98; letter-spacing: -0.3px; color: #F3F3EE;
}
.hero-underline-row { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.hero-underline-row svg path { stroke: rgba(243,243,238,0.65); }
.hero-underline-row .in-motion { font-family: var(--font-serif); font-style: italic; font-size: 13px; color: rgba(243,243,238,0.82); }

/* ---- 2-pane grid: sidebar + main ---- */
.panes {
  flex: 1; display: grid;
  grid-template-columns: var(--vault-width) 1fr;
  min-height: 0; position: relative; z-index: 1;
}
.pane { min-height: 0; display: flex; flex-direction: column; }
.pane-scroll { flex: 1; overflow-y: auto; min-height: 0; }

.vault {
  border-right: 1px solid var(--divider);
  background: var(--paper-vault);
  opacity: 0; animation: fadeUp 0.5s ease 0.02s forwards;
}
.vault .pane-scroll { padding: 20px 14px 16px; }
.section-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--eyebrow);
}
.vault-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 6px 10px;
}
.icon-add { color: var(--text-secondary-2); display: grid; place-items: center; padding: 2px; border-radius: 0; }
.icon-add:hover { color: var(--cobalt); background: rgba(35,51,221,0.06); }

.empty-note {
  padding: 34px; text-align: center; color: var(--text-muted);
  font-family: var(--font-serif); font-style: italic; font-size: 15px;
}
.vault .empty-note {
  color: var(--text-muted); font-size: 13px; padding: 6px 4px; line-height: 1.5;
  text-align: left; font-family: var(--font-ui); font-style: normal;
}