/* Nova's dashboard.

   Warm and quiet, the same family as Claude Desktop: parchment neutrals
   rather than cold grey, one warm accent instead of a rainbow, generous
   rounded corners, soft borders instead of heavy shadows. It runs all day on
   a machine in the corner and gets glanced at from a phone, so nothing here
   should be the brightest thing in the room.

   Dark is still the default - unchanged from the original reasoning, only
   restyled - because a screen left on in a room is usually a screen at
   night. Light is what prefers-color-scheme:light asks for. */

:root {
  --ground: #262421;
  --surface: #302E29;
  --surface-2: #38352F;
  --surface-raised: #3D3A33;
  --ink: #F3EEE6;
  --ink-2: #B3AB9C;
  --ink-3: #85796A;
  --rule: #46433B;
  --rule-soft: #38352F;
  --accent: #E2825E;
  --accent-ink: #2A1810;
  --accent-soft: #4A3428;
  --late: #E0897C;
  --late-soft: #43241F;
  --now: #E0AC5C;
  --now-soft: #3E301A;
  --good: #86BE9B;
  --good-soft: #23342A;
  --shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 4px 14px rgba(0, 0, 0, .18);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .2);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  --radius-sm: 9px;
  --radius: 14px;
  --radius-lg: 20px;
}

@media (prefers-color-scheme: light) {
  :root {
    --ground: #F4F0E9;
    --surface: #FFFFFF;
    --surface-2: #FAF6EF;
    --surface-raised: #FFFFFF;
    --ink: #26221C;
    --ink-2: #6B6255;
    --ink-3: #948A78;
    --rule: #E7E0D2;
    --rule-soft: #EFE9DC;
    --accent: #BF5D3E;
    --accent-ink: #FFFFFF;
    --accent-soft: #F6E4DA;
    --late: #B3493A;
    --late-soft: #FBEAE6;
    --now: #A16A18;
    --now-soft: #FAF0DC;
    --good: #3F7A5A;
    --good-soft: #E7F1EA;
    --shadow: 0 1px 2px rgba(60, 47, 30, .06), 0 6px 18px rgba(60, 47, 30, .07);
    --shadow-sm: 0 1px 2px rgba(60, 47, 30, .06);
  }
}

* { box-sizing: border-box; }

html { -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

svg.ico {
  width: 19px;
  height: 19px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   Layout shell: a sidebar on a real screen, a bottom bar in your pocket.
   Nothing here is JavaScript - the "More" panel on mobile is a native
   <details>, which means it works with no script on the page at all.
   ========================================================================== */

.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 232px;
  flex: none;
  background: var(--surface);
  border-right: 1px solid var(--rule);
  padding: 20px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.mark {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -.01em;
  text-decoration: none;
  color: var(--ink);
  padding: 4px 10px;
}

.mark .dot-mark {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

.sidebar nav { display: flex; flex-direction: column; gap: 2px; }

.sidebar nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--ink-2);
  text-decoration: none;
  font-size: 14.5px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
}

.sidebar nav a:hover { color: var(--ink); background: var(--surface-2); }

.sidebar nav a.here {
  color: var(--ink);
  background: var(--accent-soft);
  font-weight: 600;
}

.sidebar nav a.here svg.ico { color: var(--accent); }

.nav-gap { height: 8px; }

/* The compact top bar - mobile only, shown instead of the sidebar. */

.topbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  /* Installed as a standalone app (since the PWA work landed), there is no
     browser chrome pushing this down - it sits directly under the status
     bar / notch unless it claims that space itself. Ordinary mobile Safari
     reports 0px here, so this costs nothing there. */
  padding: calc(7px + env(safe-area-inset-top)) 12px 7px;
  min-height: 0;
  position: sticky;
  top: 0;
  z-index: 6;
}

/* Smaller than the sidebar's own .mark - the topbar is a thin strip to
   orient by, not a banner. */
.topbar .mark {
  font-size: 15px;
  padding: 4px 6px;
  gap: 6px;
}

.topbar .mark .dot-mark { width: 7px; height: 7px; }

.icon-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--surface-2);
  color: var(--ink-2);
  cursor: pointer;
  flex: none;
}

.icon-btn svg.ico { width: 17px; height: 17px; }
.icon-btn:hover { color: var(--ink); }

main { flex: 1; min-width: 0; }

.content {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 32px 60px;
}

footer.foot {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 32px 40px;
  color: var(--ink-3);
  font-size: 12.5px;
}

/* The bottom tab bar - mobile only. Five stops: the ones reached for most,
   plus a "More" tab that opens the rest as a sheet above the bar. */

.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--surface);
  border-top: 1px solid var(--rule);
  padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
  z-index: 8;
}

.bottom-nav .row {
  display: flex;
}

.bottom-nav a, .bottom-nav summary {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 2px 5px;
  color: var(--ink-3);
  text-decoration: none;
  font-size: 10.5px;
  border-radius: var(--radius-sm);
  list-style: none;
  cursor: pointer;
}

.bottom-nav summary::-webkit-details-marker { display: none; }
.bottom-nav a.here, .bottom-nav details[open] summary, .bottom-nav summary.here { color: var(--accent); }

.more-panel {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: calc(64px + env(safe-area-inset-bottom));
  background: var(--surface-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px;
  z-index: 9;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.more-panel a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: var(--ink-2);
  text-decoration: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
}

.more-panel a:hover, .more-panel a.here, .more-panel .theme-option:hover { color: var(--ink); background: var(--surface-2); }

.scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .25);
  z-index: 7;
}

.theme-options {
  grid-column: span 2;
  display: flex;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule-soft);
  margin-bottom: 8px;
}

.theme-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  color: var(--ink-2);
  text-decoration: none;
  font-size: 13px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
}

.theme-btn:hover { background: var(--surface-2); }

details.more[open] .scrim { display: block; }

/* ---- headings ---- */

h1 {
  font-family: var(--serif);
  font-size: 27px;
  letter-spacing: -.01em;
  margin: 0 0 5px;
  font-weight: 700;
}

.sub { color: var(--ink-2); margin: 0 0 26px; font-size: 14.5px; max-width: 58ch; }

h2 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-3);
  font-weight: 600;
  margin: 34px 0 12px;
  font-family: var(--mono);
  display: flex;
  align-items: center;
  gap: 8px;
}

h2 .meta {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--sans);
  color: var(--ink-3);
  font-weight: 500;
  font-size: 12px;
}

/* ---- counters: the visual blocks a glance should land on first ---- */

.counts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 12px;
  margin-bottom: 10px;
}

.count {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}

.count .n {
  font-size: 30px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: -.01em;
}

.count .l { color: var(--ink-2); font-size: 13px; margin-top: 3px; }
.count.late { border-color: var(--late); background: var(--late-soft); }
.count.late .n { color: var(--late); }
.count.now { border-color: var(--now); background: var(--now-soft); }
.count.now .n { color: var(--now); }

/* ---- lists ---- */

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--rule-soft);
}

.item:last-child { border-bottom: 0; }
.item .id { font-family: var(--mono); font-size: 12px; color: var(--ink-3); min-width: 30px; }
.item .what { flex: 1; min-width: 0; }
.item .meta { color: var(--ink-3); font-size: 12.5px; font-family: var(--mono); white-space: nowrap; }
.item.done .what { color: var(--ink-3); text-decoration: line-through; }

.tag {
  display: inline-block;
  font-size: 11px;
  font-family: var(--mono);
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid currentColor;
  margin-left: 6px;
  vertical-align: 1px;
  white-space: nowrap;
}

.tag.late { color: var(--late); background: var(--late-soft); }
.tag.now { color: var(--now); background: var(--now-soft); }
.tag.good { color: var(--good); background: var(--good-soft); }
.tag.quiet { color: var(--ink-3); }

.empty {
  color: var(--ink-3);
  padding: 22px 18px;
  font-size: 14.5px;
  background: var(--surface-2);
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  text-align: center;
}

/* ---- waiting (the one place anything happens) ---- */

.proposal {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--now);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}

.proposal h3 { margin: 0 0 6px; font-size: 16.5px; font-weight: 650; }
.proposal .why { color: var(--ink-2); font-size: 14px; margin: 0 0 12px; }

.proposal pre {
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  font-family: var(--mono);
  font-size: 12.5px;
  overflow-x: auto;
  margin: 0 0 14px;
  color: var(--ink-2);
  white-space: pre-wrap;
}

.answer { display: flex; gap: 10px; }

button {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--rule);
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
}

button.yes { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
button:hover { filter: brightness(1.08); }
button:active { transform: translateY(1px); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- streaks ---- */

.streak { display: flex; gap: 3px; margin-top: 8px; }

.dot {
  width: 13px;
  height: 13px;
  border-radius: 4px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
}

.dot.on { background: var(--good); border-color: var(--good); }

.scroller { overflow-x: auto; }


/* ---- chat: the one page that is a conversation, not a report ---- */

.chat-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 4px 2px 14px;
  margin-bottom: 14px;
}

.bubble { max-width: 78%; }
.bubble.luc { align-self: flex-end; text-align: right; }
.bubble.nova { align-self: flex-start; }

.bubble-body {
  display: inline-block;
  text-align: left;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 14.5px;
  line-height: 1.45;
  white-space: pre-wrap;
  box-shadow: var(--shadow-sm);
}

.bubble.luc .bubble-body {
  background: var(--accent);
  color: var(--accent-ink);
  border-bottom-right-radius: 4px;
}

.bubble.nova .bubble-body {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-bottom-left-radius: 4px;
}

.bubble-meta {
  color: var(--ink-3);
  font-size: 11px;
  font-family: var(--mono);
  margin-top: 3px;
}

.chat-form {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  /* Plain flow on desktop, a short distance below the thread - the short
     gap above it is .chat-thread's own margin-bottom, no need for a second
     one here. On mobile (see the small-screens section below) it is fixed
     to the real screen edge instead, with chat.html's own script shifting
     it up by the keyboard's measured height - the one thing plain flow
     cannot do on its own there. */
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--ground);
}

.chat-form textarea {
  flex: 1;
  font: inherit;
  /* Never below 16px - see the same note on .field input above. This is
     the input actually causing "everything keeps zooming in". */
  font-size: 16px;
  line-height: 1.4;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--ink);
  resize: none;
  max-height: 120px;
  /* Grown in JS as more is typed - starts at one line's worth. */
  height: 44px;
}

.chat-form textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---- a divider between one day's messages and the next ---- */

.chat-date {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 6px 0 2px;
}

.chat-date span {
  color: var(--ink-3);
  font-size: 11.5px;
  font-family: var(--mono);
  background: var(--surface-2);
  padding: 3px 12px;
  border-radius: 20px;
}

/* ---- the about-you form: a real form, not a chat message ---- */

.field-section {
  margin: 0 0 26px;
}

.field-section h2 { margin-bottom: 4px; }

.field-section .hint {
  color: var(--ink-3);
  font-size: 12.5px;
  margin: 0 0 12px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}

.field input[type="text"], .field textarea {
  font: inherit;
  /* Never below 16px - iOS Safari auto-zooms the whole page in when a text
     input smaller than that gets focus, and does not reliably zoom back
     out. That is the "everything keeps zooming in" this was causing. */
  font-size: 16px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--ink);
  resize: vertical;
}

.field textarea { min-height: 84px; line-height: 1.5; }

.field input:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.saved-banner {
  background: var(--now-soft);
  border: 1px solid var(--now);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13.5px;
  margin-bottom: 20px;
}

/* ==========================================================================
   Small screens: sidebar becomes a compact top bar plus a bottom tab bar.
   ========================================================================== */

@media (max-width: 860px) {
  /* A flex column the height of the screen, purely so chat's message
     thread below can be told to fill whatever the topbar leaves rather
     than stopping at a fixed 60vh and leaving blank page beneath it. This
     is only about that visual fullness now, not about the keyboard - the
     input is fixed and JS-positioned independently of how tall anything
     else on the page is, so there is nothing left for this to fight. */
  /* A real height, not just a floor - min-height let the whole flex chain
     grow to fit however many messages there were instead of capping the
     thread to the visible screen and scrolling internally, which was the
     entire point. Every other page is unaffected: nothing here clips
     overflowing content, it just stops using it to stretch the container,
     so a long to-do list still spills past one screen and the page still
     scrolls exactly as it always did. */
  .shell { display: flex; flex-direction: column; height: 100dvh; }
  main { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .sidebar { display: none; }
  .topbar { display: flex; }
  .icon-btn { display: flex; }
  .content { padding: 22px 16px 90px; max-width: 100%; }
  /* Chat's input is fixed to the real screen edge below (like .bottom-nav
     already is on every other page), so .content needs its own reserved
     clearance for it instead of the 90px meant for the bottom-nav bar,
     which never renders here at all. It also fills the rest of the screen
     (see .shell above) so the thread inside it has room to grow into
     instead of leaving blank space between itself and the input. */
  .content.no-bottom-nav {
    padding-bottom: 76px;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }
  footer.foot { display: none; } /* said once, in the "more" sheet instead */
  .bottom-nav { display: block; }

  .item { flex-wrap: wrap; gap: 4px 10px; }
  .item .meta { width: 100%; }

  .count .n { font-size: 26px; }

  /* Grows to fill .content.no-bottom-nav instead of stopping at 60vh -
     that fixed cap is what left blank page below the last message once
     the input stopped being part of the normal document flow. */
  .chat-thread { flex: 1; min-height: 0; max-height: none; }

  /* Fixed to the true bottom of the screen, the same as .bottom-nav on
     every other page. chat.html's own script shifts it upward by exactly
     the keyboard's measured height (window.visualViewport) whenever the
     keyboard opens, via transform - so it starts here and tracks the
     keyboard from there, rather than trying to get a CSS unit or the
     page's own height to do that for it. */
  .chat-form {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
    background: var(--ground);
    border-top: 1px solid var(--rule);
    z-index: 8;
  }
}

@media (min-width: 861px) {
  .more-panel, details.more { display: none; }
}