/* Toduesday — the house style, with one departure: a checked box is the
   loudest thing on the screen, because ticking it off is the whole point. */
:root {
  --color-bg:          oklch(16% 0.015 260);
  --color-bg-raise:    oklch(21% 0.018 260);
  --color-surface:     oklch(25% 0.02 260);
  --color-text:        oklch(93% 0.01 260);
  --color-text-dim:    oklch(65% 0.015 260);
  --color-accent:      oklch(72% 0.18 55);
  --color-accent-deep: oklch(60% 0.19 45);
  --color-line:        oklch(35% 0.02 260);

  --radius: 14px;
  --duration-fast: 150ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  font-family: "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }

body {
  min-height: 100svh;
  background:
    radial-gradient(oklch(48% 0.025 250 / 0.5) 1.7px, transparent 2.4px),
    radial-gradient(90rem 40rem at 50% -10%, oklch(28% 0.05 55 / 0.35), transparent 60%),
    var(--color-bg);
  background-size: 58px 58px, 100% 100%, 100% 100%;
  color: var(--color-text);
  font-size: 1rem;
}
button, input { font: inherit; }
button { cursor: pointer; border: 0; background: none; color: inherit; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

.kicker {
  font-family: var(--mono);
  font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-accent);
}
.kicker::before { content: "▲ "; font-size: 0.6rem; vertical-align: 2px; }

.primary {
  font-weight: 650;
  color: oklch(15% 0.03 55);
  background: linear-gradient(180deg, var(--color-accent), var(--color-accent-deep));
  border-radius: calc(var(--radius) - 4px);
  padding: 0.6rem 1.3rem;
  transition: filter var(--duration-fast), transform var(--duration-fast) var(--ease-out-expo);
}
.primary:hover { filter: brightness(1.08); }
.primary:active { transform: scale(0.98); }

.ghost {
  color: var(--color-text-dim);
  padding: 0.55rem 1rem;
  border: 1px solid var(--color-line);
  border-radius: calc(var(--radius) - 4px);
  transition: color var(--duration-fast), border-color var(--duration-fast);
}
.ghost:hover { color: var(--color-text); border-color: var(--color-accent-deep); }
.ghost.danger:hover { color: oklch(70% 0.19 25); border-color: oklch(50% 0.16 25); }

/* ===== The door ===== */
#gate { min-height: 100svh; display: grid; place-items: center; padding: 1.5rem; }
.gate-inner { width: min(26rem, 100%); text-align: center; }
.gate-inner h1 {
  font-size: clamp(2.4rem, 1.4rem + 5vw, 3.6rem);
  letter-spacing: -0.02em; margin: 0.5rem 0 0.3rem;
}
.gate-inner h1 em { font-style: normal; color: var(--color-accent); }
.gate-sub { color: var(--color-text-dim); margin-bottom: 1.4rem; }

#people { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
.person {
  display: grid; gap: 0.3rem; justify-items: center;
  padding: 0.8rem 1rem; min-width: 5.5rem;
  background: var(--color-bg-raise);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  transition: border-color var(--duration-fast), transform var(--duration-fast) var(--ease-out-expo);
}
.person:hover { border-color: var(--color-accent-deep); transform: translateY(-2px); }
.person .face { font-size: 1.6rem; line-height: 1; }
.person .name { font-size: 0.85rem; color: var(--color-text-dim); }

#pinForm { margin-top: 1.2rem; display: grid; gap: 0.7rem; }
#pinInput {
  background: var(--color-bg-raise);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  color: var(--color-text);
  text-align: center; letter-spacing: 0.6em; font-size: 1.4rem;
  padding: 0.7rem 0.5rem 0.7rem 1.1rem;
}
#pinInput:focus { outline: 0; border-color: var(--color-accent-deep); }
.gate-actions { display: flex; gap: 0.5rem; }
.gate-actions .ghost { flex: 0 0 auto; }
.gate-actions .primary { flex: 1; }
.gate-error { margin-top: 0.8rem; color: oklch(70% 0.19 25); font-size: 0.9rem; min-height: 1.2em; }

/* ===== App shell ===== */
#app {
  max-width: 46rem; margin: 0 auto;
  padding: calc(1.1rem + env(safe-area-inset-top)) 1.1rem 5rem;
}
header.bar { display: flex; align-items: center; gap: .8rem; padding: .3rem 0 1.2rem; flex-wrap: wrap; }
header.bar > div:first-child { flex: 1 1 12rem; min-width: 0; }
header.bar h1 { font-size: 1.35rem; margin: 0; letter-spacing: -.01em; }
header.bar h1 span { color: var(--color-accent); }
header.bar .spacer { flex: 1; }
header.bar .statusline {
  margin: .25rem 0 0; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .04em; color: var(--color-text-dim);
}
.bar-actions { display: flex; gap: .5rem; flex: 0 0 auto; }
.icon-btn {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  background: var(--color-bg-raise);
  border: 1px solid var(--color-line);
  border-radius: calc(var(--radius) - 4px);
  color: var(--color-text-dim);
  transition: color var(--duration-fast), border-color var(--duration-fast);
}
.icon-btn:hover { color: var(--color-text); border-color: var(--color-accent-deep); }
@media (max-width: 700px) {
  header.bar { gap: .5rem; padding-bottom: .9rem; }
  header.bar .spacer { display: none; }
  /* Its own full-width row — never crammed beside the title. */
  .bar-actions { flex: 1 0 100%; justify-content: space-between; }
  .bar-actions .icon-btn { flex: 1 1 auto; max-width: 5rem; }
}

/* ===== Tabs ===== */
.tabs {
  display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .5rem;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none;
  display: inline-flex; align-items: baseline; gap: .45rem;
  padding: .45rem .95rem; border-radius: 999px;
  border: 1px solid var(--color-line);
  background: var(--color-bg-raise);
  color: var(--color-text-dim);
  font-size: .9rem; white-space: nowrap;
  transition: color var(--duration-fast), border-color var(--duration-fast);
}
.tab[aria-pressed="true"] { color: var(--color-text); border-color: var(--color-accent-deep); }
.tab .n { font-family: var(--mono); font-size: .7rem; }
.tab .lock { font-size: .7rem; opacity: .7; }

/* ===== Add ===== */
#addForm {
  margin-top: 1rem; display: flex; gap: .5rem;
  background: var(--color-bg-raise);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: .5rem;
}
#addForm:focus-within { border-color: var(--color-accent-deep); }
#addInput {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: 0;
  color: var(--color-text); padding: .55rem .7rem; font-size: 1.02rem;
}
#addInput::placeholder { color: oklch(50% 0.01 260); }

/* ===== Tasks ===== */
.tasks { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .45rem; }
.task {
  display: flex; align-items: flex-start; gap: .8rem;
  padding: .8rem .9rem;
  background: var(--color-bg-raise);
  border: 1px solid var(--color-line);
  border-radius: calc(var(--radius) - 3px);
  transition: border-color var(--duration-fast), opacity var(--duration-fast);
}
.task:hover { border-color: var(--color-accent-deep); }
.task.done { opacity: .45; }
.task.done .title { text-decoration: line-through; }

/* The box is deliberately big and deliberately loud when ticked — this is
   the gesture the whole product is built around. */
.box {
  appearance: none; flex: none;
  width: 1.5rem; height: 1.5rem; margin-top: .05rem;
  border: 2px solid var(--color-text-dim);
  border-radius: 7px;
  display: grid; place-items: center;
  transition: background var(--duration-fast), border-color var(--duration-fast),
              transform var(--duration-fast) var(--ease-out-expo);
}
.box:hover { border-color: var(--color-accent); }
.box:checked {
  background: linear-gradient(180deg, var(--color-accent), var(--color-accent-deep));
  border-color: var(--color-accent);
}
.box:checked::after {
  content: "✓"; font-size: 1rem; font-weight: 700; color: oklch(15% 0.03 55);
}
.box:active { transform: scale(0.9); }

.task .title { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.35; }

/* How long a task has sat there, shown only once it is past a week. Quiet on
   purpose: that a badge is there at all is the signal, and the knob is the
   thing that colour-codes. No new hue — in this house orange still only ever
   means "do it". */
.task .age {
  flex: none; align-self: center;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .06em;
  color: var(--color-text-dim);
  background: var(--color-surface);
  border-radius: 999px; padding: .15rem .45rem;
}
.task .age.old { color: var(--color-text); }
.task .x {
  flex: none; color: oklch(45% 0.01 260); font-size: .9rem;
  padding: .2rem .35rem; border-radius: 6px;
}
.task .x:hover { color: oklch(70% 0.19 25); }

.empty { margin-top: 1.4rem; color: var(--color-text-dim); font-size: .93rem; line-height: 1.6; }

/* ===== Sheet ===== */
.sheet-wrap {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; padding: 1.2rem;
  background: oklch(8% 0.01 260 / .68); backdrop-filter: blur(3px);
  overflow-y: auto;
}
.sheet {
  width: min(24rem, 100%);
  background: var(--color-bg-raise);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 1.2rem 1.2rem 1rem;
  display: grid; gap: .7rem;
  box-shadow: 0 18px 50px oklch(0% 0 0 / .45);
}
.sheet.wide { width: min(34rem, 100%); }
.sheet-title { font-weight: 650; font-size: 1.05rem; }
.sheet-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .3rem; }

.group { border: 1px solid var(--color-line); border-radius: calc(var(--radius) - 4px); }
.group > summary {
  cursor: pointer; list-style: none; padding: .65rem .85rem;
  font-size: .92rem; display: flex; align-items: center; gap: .5rem;
}
.group > summary::-webkit-details-marker { display: none; }
.group > summary::before {
  content: "›"; display: inline-block; font-size: 1rem; line-height: 1;
  transition: transform var(--duration-fast) ease;
}
.group[open] > summary::before { transform: rotate(90deg); }
.group > *:not(summary) { padding: 0 .85rem; }
.group > *:last-child { padding-bottom: .85rem; }
.hint {
  margin-left: auto; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent);
}

.inline-form { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; }
.inline-form input {
  flex: 1; min-width: 7rem;
  background: var(--color-bg); border: 1px solid var(--color-line);
  border-radius: calc(var(--radius) - 6px); color: var(--color-text);
  padding: .45rem .6rem; outline: 0;
}
.inline-form input:focus { border-color: var(--color-accent-deep); }
.chip-toggle {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .85rem; color: var(--color-text-dim);
  border: 1px solid var(--color-line); border-radius: 999px;
  padding: .4rem .8rem; cursor: pointer; white-space: nowrap;
}
.chip-toggle:has(input:checked) { color: var(--color-text); border-color: var(--color-accent-deep); }
.chip-toggle input { accent-color: var(--color-accent); }

.admin-row {
  display: flex; align-items: center; gap: .55rem;
  padding: .5rem 0; border-bottom: 1px solid var(--color-line);
  font-size: .9rem;
}
.admin-row:last-child { border-bottom: 0; }
.admin-row .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.admin-row .meta { font-family: var(--mono); font-size: .68rem; color: var(--color-text-dim); }

.note { font-size: .88rem; line-height: 1.55; color: var(--color-text-dim); margin-top: .5rem; }
.note.dim { font-size: .8rem; color: oklch(52% 0.01 260); }
.steps { margin: .5rem 0 .3rem 1.1rem; font-size: .88rem; line-height: 1.6; color: var(--color-text-dim); }
.steps strong { color: var(--color-text); }
.kv { display: flex; gap: .6rem; align-items: baseline; margin-top: .3rem; font-size: .84rem; }
.kv span { font-family: var(--mono); font-size: .7rem; text-transform: uppercase;
           letter-spacing: .1em; color: oklch(52% 0.01 260); min-width: 3rem; }
.kv code {
  font-family: var(--mono); font-size: .78rem; overflow-wrap: anywhere;
  background: var(--color-bg); border: 1px solid var(--color-line);
  border-radius: 6px; padding: .15rem .4rem; color: var(--color-text);
}

#toast {
  position: fixed; bottom: calc(1.2rem + env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%); z-index: 90;
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: 999px; padding: .55rem 1.2rem; font-size: .92rem;
  box-shadow: 0 8px 26px oklch(0% 0 0 / .4);
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* The + that saves a trip into Settings. Same pill as a tab, so it reads as
   part of the strip rather than bolted beside it. */
.tab-add {
  font-weight: 650;
  padding: .45rem .9rem;
  color: var(--color-accent);
  border-style: dashed;
}
.tab-add:hover { border-color: var(--color-accent); border-style: solid; }

.tab-new {
  display: inline-flex; align-items: center; gap: .5rem;
  border-color: var(--color-accent-deep);
  padding: .3rem .5rem .3rem .8rem;
}
.tab-new input[type=text], .tab-new input:not([type]) {
  background: transparent; border: 0; outline: 0;
  color: var(--color-text); font: inherit; font-size: .9rem;
  width: 8rem; min-width: 0;
}
.mini-toggle {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .72rem; color: var(--color-text-dim); white-space: nowrap;
}
.mini-toggle input { accent-color: var(--color-accent); }

.steps.sub { margin-top: .35rem; margin-bottom: .2rem; list-style: disc; }
.steps code {
  font-family: var(--mono); font-size: .78rem;
  background: var(--color-bg); border: 1px solid var(--color-line);
  border-radius: 5px; padding: .05rem .3rem; color: var(--color-text);
}

/* Sweep the ticked items. Sits with the tabs because that is where you are
   looking when a list has gone stale, not buried in Settings. */
.tab-sweep { color: var(--color-text-dim); gap: .35rem; align-items: center; }
.tab-sweep:hover { color: oklch(70% 0.19 25); border-color: oklch(50% 0.16 25); }
.tab-sweep.armed {
  color: oklch(70% 0.19 25); border-color: oklch(50% 0.16 25);
  font-size: .82rem;
}

/* ===== Sub-tasks and dragging ===== */
.task.kid { margin-left: 2.1rem; }
/* An elbow, so a sub-task reads as attached rather than just indented. */
.task.kid::before {
  content: ""; position: absolute; left: -1.1rem; top: 50%;
  width: .8rem; height: 1px; background: var(--color-line);
}
.task { position: relative; }

.grip {
  flex: none; margin: .1rem -.2rem 0 -.3rem; padding: .25rem;
  color: oklch(45% 0.01 260); border-radius: 5px;
  cursor: grab; touch-action: none;   /* or the page scrolls instead */
}
.grip:hover { color: var(--color-text-dim); }
.grip svg { fill: currentColor; display: block; }
.task.dragging { opacity: .35; }
body.dragging-now { user-select: none; }

.drop-target {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 1px var(--color-accent);
}

.drag-ghost {
  position: fixed; top: 0; left: 0; z-index: 100; pointer-events: none;
  max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: .4rem .7rem; font-size: .85rem;
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-accent-deep); border-radius: 999px;
  box-shadow: 0 10px 30px oklch(0% 0 0 / .5);
}

/* The discoverable way to nest. Dragging works too, but nobody finds a drop
   target they were not already looking for. */
.subadd {
  flex: none; width: 1.6rem; height: 1.6rem; margin-top: -.05rem;
  display: grid; place-items: center;
  color: oklch(45% 0.01 260); font-size: 1.1rem; line-height: 1;
  border: 1px solid transparent; border-radius: 6px;
}
.task:hover .subadd { color: var(--color-accent); border-color: var(--color-line); }
.subadd:hover { border-color: var(--color-accent) !important; }
/* On a phone there is no hover, so the affordance has to be visible at rest —
   dimmer than the text it belongs to, but plainly a button. */
@media (hover: none) {
  .subadd { color: var(--color-text-dim); border-color: var(--color-line); }
}

.sub-new { padding: .5rem .9rem; border-color: var(--color-accent-deep); }
.sub-new input {
  width: 100%; background: transparent; border: 0; outline: 0;
  color: var(--color-text); font: inherit; font-size: .95rem;
}

/* A three-way segmented control. Used for terminal text size, where the
   options are few, ordered, and worth showing at once — a <select> would hide
   two of the three behind a tap. */
.seg {
  display: inline-flex; flex: none;
  border: 1px solid var(--color-line); border-radius: 8px; overflow: hidden;
}
.seg button {
  padding: .3rem .62rem; min-width: 2rem;
  background: transparent; border: 0; border-left: 1px solid var(--color-line);
  color: var(--color-text-dim); font-family: var(--mono); font-size: .8rem;
}
.seg button:first-child { border-left: 0; }
.seg button[aria-pressed="true"] { background: var(--color-accent-deep); color: var(--color-text); }
.seg button:not([aria-pressed="true"]):hover { color: var(--color-text); }

/* Place search results. Buttons, not a list: each one is an action, and on a
   phone a row you tap should look like a row you can tap. */
#placeResults { display: grid; gap: .3rem; margin-top: .5rem; }
.place-hit {
  text-align: left; padding: .5rem .7rem;
  background: var(--color-bg-raise);
  border: 1px solid var(--color-line);
  border-radius: 8px;
  color: var(--color-text-dim); font-size: .9rem;
}
.place-hit:hover { color: var(--color-text); border-color: var(--color-accent-deep); }

/* ===== Info pane editor ===== */
.pane-page {
  margin-top: .7rem; padding: .7rem .8rem;
  background: var(--color-bg-raise);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}
.pane-page > header {
  display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-text-dim);
}
.pane-page > header span:first-child { flex: 1; }
.pane-page > header .ghost { padding: .25rem .6rem; font-size: .72rem; }
/* How full the page is. Advisory: the firmware simply stops drawing when it
   runs out of glass, so over-full costs the widgets at the bottom. */
.pane-fill { font-size: .68rem; opacity: .75; }
.pane-fill.over { color: oklch(72% 0.18 55); opacity: 1; }

.pane-slots { display: grid; gap: .35rem; }
.pane-slot {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .6rem;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: 9px;
}
.pane-slot .grow { flex: 1; min-width: 0; font-size: .95rem; }

#paneShelf { display: grid; gap: .4rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.shelf-chip {
  display: grid; gap: .15rem; text-align: left;
  padding: .55rem .7rem;
  background: var(--color-bg-raise);
  border: 1px solid var(--color-line);
  border-radius: 10px;
  color: var(--color-text-dim);
  cursor: grab; touch-action: none;
}
.shelf-chip strong { color: var(--color-text); font-size: .92rem; font-weight: 600; }
.shelf-chip span { font-size: .76rem; line-height: 1.3; }
.shelf-chip:hover { border-color: var(--color-accent-deep); }

#paneTerminalPick { margin-bottom: .3rem; }
#paneTerminalPick[hidden] { display: none !important; }

/* Timers, at the top of the pane sheet: they are state the terminal shows,
   so they live with the thing that decides what it shows. */
#timerBox { margin: .8rem 0 .4rem; }
.timer-row {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  padding: .5rem 0;
}
.timer-row .grow { flex: 1 1 9rem; min-width: 0; font-size: .92rem; }
.timer-row .ghost { padding: .35rem .7rem; font-size: .82rem; }
.seg.small button { padding: .28rem .5rem; font-size: .74rem; }
.preset-row { gap: .35rem; padding-top: 0; }
.preset-label {
  flex: 0 0 3rem; font-family: var(--mono); font-size: .7rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-dim);
}
.preset-row .ghost { flex: 1 1 auto; min-width: 2.8rem; text-align: center; }

/* Starring, and renaming in place. */
.star {
  flex: none; width: 1.7rem; height: 1.7rem;
  display: grid; place-items: center;
  border-radius: 6px; border: 1px solid transparent;
  color: oklch(45% 0.01 260);
  transition: color var(--duration-fast), transform var(--duration-fast) var(--ease-out-expo);
}
.star svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.star.on { color: var(--color-accent); }
.star.on svg { fill: currentColor; stroke: currentColor; }
.star:active { transform: scale(.88); }
.task:hover .star { color: var(--color-text-dim); }
.task:hover .star.on { color: var(--color-accent); }
@media (hover: none) { .star { color: var(--color-text-dim); } }

/* A starred row earns a little weight — on a list of twelve, colour alone on
   a 15px glyph is not enough to find at a glance. */
.task:has(.star.on) { border-color: var(--color-accent-deep); }
.task:has(.star.on) .title { font-weight: 600; }

.title { cursor: text; }
.rename {
  flex: 1; min-width: 0;
  background: var(--color-bg); color: var(--color-text);
  border: 1px solid var(--color-accent-deep); border-radius: 7px;
  padding: .35rem .5rem; font-size: 1rem;
}
.rename:focus { outline: 0; }

/* ===== Notes ===== */
/* A note is read, not scanned. It wraps, keeps its line breaks, and drops the
   monospace-tight rhythm the todo rows use. */
.task.note { align-items: flex-start; }
/* Every title keeps its line breaks, not only notes. The terminal still
   flattens a todo row to one line — that is a panel constraint, not a reason
   to refuse the newline here. */
.title { white-space: pre-wrap; }
.task.note .title { line-height: 1.45; padding: .1rem 0; }
#addForm.notes #addInput { font-size: .98rem; }
.rename.long {
  resize: vertical; min-height: 2.4rem; line-height: 1.45;
  font-family: inherit; white-space: pre-wrap;
}
.chip-toggle.kind {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .06em;
  padding: .3rem .55rem; border-radius: 7px;
  border: 1px solid var(--color-line); color: var(--color-text-dim);
}
.chip-toggle.kind[aria-pressed="true"] {
  color: var(--color-accent); border-color: var(--color-accent-deep);
}

/* The composer grows with what is typed into it. */
#addInput {
  resize: none; font-family: inherit; line-height: 1.4;
  min-height: 2.6rem; max-height: 14rem; overflow-y: auto;
}
#addForm { align-items: flex-end; }
#addForm .primary { flex: none; }

/* A notes list, as one document. */
#docWrap { margin-top: 1rem; }
#docText {
  width: 100%; min-height: 15rem;
  background: var(--color-bg-raise);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  color: var(--color-text);
  font: inherit; line-height: 1.55;
  padding: 1rem 1.1rem;
  resize: vertical; white-space: pre-wrap;
}
#docText:focus { outline: 0; border-color: var(--color-accent-deep); }
.doc-state {
  margin-top: .4rem; text-align: right;
  font-family: var(--mono); font-size: .68rem; color: var(--color-text-dim);
}

/* Reorder insertion marks: a bar at the edge the drop will land on. Box
   shadows rather than borders, so rows do not shift while the finger moves. */
.task.drop-before { box-shadow: 0 -3px 0 0 var(--color-accent); }
.task.drop-after  { box-shadow: 0 3px 0 0 var(--color-accent); }

/* ===== The three pickers ===== */
.pickers { display: flex; gap: .5rem; margin-bottom: .9rem; }
.picker { position: relative; flex: 1; min-width: 0; }
.picker-btn {
  display: flex; align-items: center; gap: .45rem;
  width: 100%; padding: .55rem .8rem;
  background: var(--color-bg-raise);
  border: 1px solid var(--color-line); border-radius: var(--radius);
  color: var(--color-text-dim); font-size: .92rem; text-align: left;
}
.picker-btn .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-btn .n {
  font-family: ui-monospace, Menlo, monospace; font-size: .72rem;
  color: var(--color-accent); flex: none;
}
.picker-btn .caret { color: var(--color-text-dim); flex: none; font-size: .8rem; }
.picker-btn.active { color: var(--color-text); border-color: var(--color-accent-deep); }
.picker-btn.ai { flex: none; width: auto; }
.picker-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }
.picker-menu {
  position: absolute; z-index: 45; top: calc(100% + .3rem); left: 0; right: 0;
  min-width: 12rem;
  display: grid; gap: .1rem; padding: .3rem;
  background: var(--color-surface);
  border: 1px solid var(--color-line); border-radius: var(--radius);
  box-shadow: 0 18px 40px oklch(10% 0.02 260 / 0.45);
  max-height: 55svh; overflow-y: auto;
}
.picker-opt {
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem .7rem; border-radius: 8px;
  color: var(--color-text-dim); font-size: .9rem; text-align: left;
}
.picker-opt:hover { background: var(--color-bg-raise); color: var(--color-text); }
.picker-opt[aria-selected="true"] { color: var(--color-text); font-weight: 650; }
.picker-opt .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-opt .lock { font-size: .68rem; color: var(--color-text-dim); }
.picker-opt .n { font-family: ui-monospace, Menlo, monospace; font-size: .72rem; color: var(--color-accent); }
.picker-opt.action { border-top: 1px dashed var(--color-line); border-radius: 0 0 8px 8px; font-size: .82rem; }

/* ===== AI dashboard ===== */
#aiDash { padding-bottom: 2rem; }
.ai-perms { display: flex; gap: .5rem; flex-wrap: wrap; margin: .4rem 0 1rem; }
.ai-feed-item {
  display: flex; gap: .6rem; align-items: baseline;
  padding: .5rem .1rem; border-bottom: 1px dashed var(--color-line);
  font-size: .95rem;
}
.ai-feed-item.done span { text-decoration: line-through; color: var(--color-text-dim); }
.ai-feed-item .when { margin-left: auto; flex: none; font-size: .72rem; color: var(--color-text-dim); }
.ai-feed-item input { accent-color: var(--color-accent); }
.ai-log { list-style: none; padding: 0; margin-top: .6rem; }
.ai-log li {
  padding: .35rem 0; font-size: .82rem; color: var(--color-text-dim);
  border-bottom: 1px solid oklch(24% 0.02 260);
}
.ai-log .when { font-size: .7rem; margin-left: .3rem; }
.ai-report {
  white-space: pre-wrap; overflow-wrap: anywhere;
  padding: .8rem .95rem; margin: .3rem 0 .9rem;
  background: var(--color-bg-raise);
  border: 1px solid var(--color-line); border-radius: var(--radius);
  font-size: .92rem; line-height: 1.55;
}