/* Terminal aesthetic, borrowed from init.Habits.
 *
 * The look is a good fit for this app for a reason beyond taste: a monospace list with bracket
 * checkboxes is dense, calm, and has no vocabulary for urgency. There is no colour ramp to go
 * red, no ring to fill, no bar to be 80% of. The things this design refuses to render are things
 * the aesthetic has no way to express in the first place.
 *
 * The one accent colour marks state (done), never performance. */

:root {
  --bg:      #0b0d0e;
  --panel:   #101314;
  --fg:      #d7dedb;
  --muted:   #6d7d75;
  --line:    #1e2426;
  --accent:  #5af78e;   /* state only: a completed row. never a score, never a warning */
  --dim:     #3f4b46;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
  --tap: 44px;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #fbfaf7; --panel: #f4f2ec; --fg: #23282a; --muted: #6a736e;
    --line: #e2e0d8; --accent: #1f8a4c; --dim: #a8b0aa;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.55 var(--mono);
  -webkit-font-smoothing: antialiased;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

main { max-width: 40rem; margin: 0 auto; padding: 1.5rem 1rem 6rem; }

/* $ prompt header ------------------------------------------------------------------------- */
header { margin-bottom: 1.4rem; }
.prompt { color: var(--muted); font-size: .82rem; letter-spacing: .02em; }
.prompt .sigil { color: var(--accent); }
h1 {
  font-size: 1rem; font-weight: 500; margin: .35rem 0 0;
  letter-spacing: .01em; color: var(--fg);
}
h1::before { content: "> "; color: var(--dim); }

h2.area {
  font-size: .78rem; font-weight: 400; color: var(--muted);
  margin: 1.6rem 0 .45rem; letter-spacing: .02em;
}
h2.area::before { content: "// "; color: var(--dim); }
h2.area:first-of-type { margin-top: 0; }

/* rows ------------------------------------------------------------------------------------- */
.row {
  display: flex; align-items: baseline; gap: .55rem;
  padding: .42rem 0;
  flex-wrap: wrap;
}

/* The checkbox is literally "[ ]" / "[x]" -- no circle to fill, no ring to complete. */
.check {
  flex: 0 0 auto;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--dim);
  position: relative; line-height: 1;
}
.check::before { content: "[ ]"; }
.check::after {                       /* 44px tap target around a 3-character glyph */
  content: ""; position: absolute; left: -6px; right: -6px;
  top: 50%; height: var(--tap); transform: translateY(-50%);
}
.row.done  .check { color: var(--accent); }
.row.done  .check::before { content: "[x]"; }
.row.skipped .check { color: var(--muted); }
.row.skipped .check::before { content: "[-]"; }

.time {
  flex: 0 0 auto; color: var(--muted); font-size: .88rem;
  font-variant-numeric: tabular-nums;
}
.time.none { color: var(--dim); }

.body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1; }
.name { overflow-wrap: anywhere; }
.row.done .name { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.row.skipped .name { color: var(--muted); }

.meta { font-size: .8rem; color: var(--dim); }
.meta::before { content: "// "; }

.empty { color: var(--muted); }
.empty::before { content: "// "; color: var(--dim); }

/* the strip: undo + the one question ------------------------------------------------------- */
.strip {
  flex: 1 0 100%;
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  padding: .4rem 0 .1rem 1.9rem;
}
.strip .q { font-size: .82rem; color: var(--muted); }
.chips { display: flex; gap: .4rem; }

/* All three identical: same size, same weight, same colour, no default selection, no
   de-emphasis of the middle option. "Normal" is the modal and most decision-relevant answer. */
.chip {
  min-height: 34px; padding: 0 .6rem;
  border: 1px solid var(--line); border-radius: 3px;
  background: transparent; color: var(--fg);
  font: inherit; font-size: .82rem; cursor: pointer;
}
.chip::before { content: "["; color: var(--dim); }
.chip::after  { content: "]"; color: var(--dim); }
.chip.picked { border-color: var(--accent); color: var(--accent); }

.undo, .dismiss {
  background: none; border: 0; color: var(--muted);
  font: inherit; font-size: .82rem; cursor: pointer;
  min-height: 34px; padding: 0 .25rem;
}
.undo::before { content: "["; color: var(--dim); }
.undo::after  { content: "]"; color: var(--dim); }
.dismiss { margin-left: auto; }

/* capture ---------------------------------------------------------------------------------- */
#capture { display: flex; gap: .5rem; align-items: flex-start; margin-bottom: 1.5rem; }
#capture textarea {
  flex: 1; min-height: 44px; resize: none; overflow: hidden;
  font: inherit; font-size: .9rem; padding: .55rem .6rem;
  border: 1px solid var(--line); border-radius: 3px;
  background: var(--panel); color: var(--fg);
}
#capture textarea:focus { outline: none; border-color: var(--dim); }
#capture textarea::placeholder { color: var(--dim); }
#capture button {
  min-height: 44px; padding: 0 .8rem; font: inherit; font-size: .85rem;
  border: 1px solid var(--line); border-radius: 3px;
  background: transparent; color: var(--muted); cursor: pointer;
}
#capture button:disabled { opacity: .45; cursor: default; }
#capture-note { font-size: .8rem; color: var(--muted); margin: -1rem 0 1.4rem; }
#capture-note::before { content: "[ok] "; color: var(--accent); }

/* login ------------------------------------------------------------------------------------ */
.login { max-width: 22rem; margin: 20vh auto; padding: 0 1rem; }
.login label { display: block; font-size: .82rem; color: var(--muted); margin-bottom: .4rem; }
.login label::before { content: "$ "; color: var(--accent); }
.login input, .login button {
  width: 100%; min-height: 44px; font: inherit; padding: 0 .6rem;
  border: 1px solid var(--line); border-radius: 3px;
  background: var(--panel); color: var(--fg);
}
.login input:focus { outline: none; border-color: var(--dim); }
.login button {
  margin-top: .7rem; background: transparent; color: var(--accent);
  border-color: var(--dim); cursor: pointer;
}
.login .msg { color: var(--muted); font-size: .82rem; margin-top: .8rem; }
.login .msg::before { content: "// "; color: var(--dim); }

.fatal { max-width: 32rem; margin: 20vh auto; padding: 0 1rem; }

/* away ------------------------------------------------------------------------------------- */
/* Declared, dated, and framed as a fact rather than a lapse. Nothing here counts what was
   missed, because nothing was: a day inside a span is a non-event, not a zero. */
#away-banner { padding: .9rem 0 .2rem; color: var(--muted); }
#away-banner .headline { color: var(--fg); }
#away-banner .headline::before { content: "[away] "; color: var(--accent); }
#away-banner .sub { display: block; font-size: .82rem; color: var(--dim); margin-top: .25rem; }
#away-banner .sub::before { content: "// "; }
#away-banner button {
  margin-top: .7rem; min-height: 38px; padding: 0 .6rem; font: inherit; font-size: .85rem;
  background: none; border: 1px solid var(--line); border-radius: 3px;
  color: var(--fg); cursor: pointer;
}

#footer { margin-top: 3rem; padding-top: .9rem; border-top: 1px solid var(--line); }
#away-toggle {
  background: none; border: 0; padding: .3rem 0; font: inherit; font-size: .82rem;
  color: var(--dim); cursor: pointer;
}
#away-toggle::before { content: "["; }
#away-toggle::after { content: "]"; }
#away-form { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; margin-top: .6rem; }
#away-form label { font-size: .8rem; color: var(--muted); }
#away-form input, #away-form button {
  font: inherit; font-size: .85rem; min-height: 38px; padding: 0 .5rem;
  background: var(--panel); color: var(--fg);
  border: 1px solid var(--line); border-radius: 3px;
}
#away-form button { background: none; color: var(--accent); cursor: pointer; }

/* household attribution --------------------------------------------------------------------- */
/* Who completed a shared task is carried by ONE colour on the checkbox. Deliberately not a name,
   not a timestamp, and above all not a count: colour tells you at a glance whether the dog has
   been fed, while "you did 5, I did 2" is the household scoreboard this must never become.
   Colour is set inline per row as --by (see app.js). */
.row.done .check { color: var(--by, var(--accent)); }
.row.shared .name { }                         /* shared tasks read identically; no badge */

/* Colour alone is a weak channel for anyone with a colour-vision difference. The done state is
   ALSO carried by the [x] glyph and the strikethrough, both of which are colour-independent, so
   nothing is lost if the hues are indistinguishable -- only the "who". */