/* THE WORKBOOK — styles for the panel at the very foot of ATTEND, STEWARD and FORTIS.
 *
 * ─── CANONICAL SOURCE ───────────────────────────────────────────────────────────────────────────
 * Lives at  hearth-attend/packages/notes/public/workbook.css  and is copied into steward and fortis
 * by  hearth-attend/tools/sync-notes.mjs.  Edit here, re-run that. Never edit a copy.
 * ────────────────────────────────────────────────────────────────────────────────────────────────
 *
 * ─── TOKENS: THE ROLE VOCABULARY, NOT AN INVENTION ──────────────────────────────────────────────
 * Every colour here is a ROLE from the design token contract
 * (hearth-brain/shared/_archive/2608/design-tokens.md): bg · field · surface · surface-2 · line ·
 * line-strong · ink · ink-2 · ink-3 · accent · accent-dim · positive · attention · critical.
 *
 * This file names roles and nothing else. It does NOT reach for --card, --steel, --dim or --action:
 * that would be one component knowing three private vocabularies, which is the tax the contract
 * exists to remove. Each app declares the roles it was missing as aliases over its own tokens —
 * additive, no rename, so the 1,216-reference rename the contract defers stays deferred.
 *
 * The literal fallbacks are a last resort so a host that forgets the bridge renders legibly rather
 * than invisibly. They are deliberately neutral and match no app's palette; seeing them means the
 * bridge is missing.
 *
 * The three palettes stay different on purpose — warm ledger, cold cockpit, night watch. One
 * vocabulary of roles, three palettes, exactly as the contract says.
 * ────────────────────────────────────────────────────────────────────────────────────────────────
 */

.wb-root {
  display: block;
  box-sizing: border-box;
  width: min(100%, 46rem);
  margin: 1.5rem auto 0;
  padding: 0 1rem calc(8rem + env(safe-area-inset-bottom, 0px));
  font-family: inherit;
  color: var(--ink, #e6e9ee);
}
.wb-root *, .wb-root *::before, .wb-root *::after { box-sizing: border-box; }

.wb-panel {
  padding: 0.75rem 0.9rem 0.9rem;
  border: 1px solid var(--line, #2b3441);
  border-radius: 0.55rem;
  background: var(--surface, #171d26);
}
.wb-panel > summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--ink-2, #a6b0be);
  list-style: revert;
}
.wb-panel[open] > summary { margin-bottom: 0.5rem; }

.wb-quiet { margin: 0.35rem 0 0; font-size: 0.78rem; line-height: 1.5; color: var(--ink-3, #76808e); }

.wb-body {
  display: block;
  width: 100%;
  margin-top: 0.55rem;
  padding: 0.55rem 0.65rem;
  background: var(--field, #10151c);
  color: var(--ink, #e6e9ee);
  border: 1px solid var(--line, #2b3441);
  border-radius: 0.45rem;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.45;
  resize: vertical;
}
.wb-body::placeholder { color: var(--ink-3, #76808e); }
.wb-body:focus-visible {
  outline: 2px solid var(--accent, #7cc4e8);
  outline-offset: 1px;
  border-color: var(--accent, #7cc4e8);
}

.wb-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0.55rem 0 0.7rem; }
.wb-chips-gap { flex: 1 1 0.75rem; min-width: 0.35rem; }
.wb-chips-label { font-size: 0.75rem; color: var(--ink-3, #76808e); }

.wb-chip {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-height: 0;
  padding: 0.22rem 0.6rem;
  border: 1px solid var(--line, #2b3441);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2, #a6b0be);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.6;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s var(--ease, cubic-bezier(0.23, 1, 0.32, 1)),
              color 0.15s var(--ease, cubic-bezier(0.23, 1, 0.32, 1));
}
.wb-chip:hover { background: var(--field, #10151c); color: var(--ink, #e6e9ee); }
.wb-chip.on {
  background: var(--accent, #7cc4e8);
  border-color: var(--accent, #7cc4e8);
  color: var(--accent-ink, #0e1720);
}
.wb-chip:focus-visible { outline: 2px solid var(--accent, #7cc4e8); outline-offset: 2px; }

.wb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; }
.wb-save {
  width: auto;
  min-height: 2.2rem;
  padding: 0 1rem;
  border: 0;
  border-radius: 0.45rem;
  background: var(--accent, #7cc4e8);
  color: var(--accent-ink, #0e1720);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.wb-save[disabled] { opacity: 0.5; cursor: default; }
.wb-save:focus-visible { outline: 2px solid var(--accent, #7cc4e8); outline-offset: 2px; }
.wb-said { font-size: 0.78rem; color: var(--ink-2, #a6b0be); }

.wb-notes { display: grid; gap: 0.45rem; margin-top: 0.85rem; }
.wb-note {
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--line, #2b3441);
  border-radius: 0.45rem;
  background: var(--field, #10151c);
}
.wb-note.wb-done { opacity: 0.5; }
.wb-note-body { font-size: 0.9rem; line-height: 1.45; }
.wb-note-meta { margin-top: 0.2rem; font-size: 0.72rem; color: var(--ink-3, #76808e); }
.wb-note .wb-chip { margin-top: 0.45rem; }
.wb-note-done {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.72rem;
  color: var(--positive, #6fbf9b);
}

/* ── the historical record ─────────────────────────────────────────
 * Two shelves in one panel: what is still being asked for, and what was
 * asked and done. The switch is a pair of tabs rather than a filter chip,
 * because these are two different things to be doing — writing, and reading.
 */
.wb-tabs {
  display: flex;
  gap: 0.35rem;
  margin: 0.1rem 0 0.6rem;
  border-bottom: 1px solid var(--line, #2b3441);
}
.wb-tab {
  padding: 0.35rem 0.7rem;
  min-height: 34px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--ink-3, #76808e);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}
.wb-tab.on { color: var(--ink, #e7ecf3); border-bottom-color: var(--accent, #7cc4e8); }
.wb-tab:focus-visible { outline: 2px solid var(--accent, #7cc4e8); outline-offset: -2px; }

/* An archived note is filed, not faded: .wb-done dims to 0.5 because a closed
 * item on the LIVE list is noise, but in the record it is the content. */
.wb-note.wb-archived { opacity: 1; border-color: var(--line, #2b3441); }
.wb-note-outcome {
  margin-top: 0.4rem;
  padding-left: 0.55rem;
  border-left: 2px solid var(--positive, #6fbf9b);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ink-2, #a6b0be);
}
.wb-note-acts { display: flex; flex-wrap: wrap; gap: 0.35rem; }

/* The trail, behind one tap. The outcome answers "what happened"; this
 * answers "what happened, in order, and who did it" — which is worth having
 * and is not worth reading every time. */
.wb-trail {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0 0 0 0.75rem;
  border-left: 1px solid var(--line, #2b3441);
  display: grid;
  gap: 0.4rem;
}
.wb-trail li { font-size: 0.78rem; line-height: 1.4; color: var(--ink-2, #a6b0be); }
.wb-ev-when { color: var(--ink-3, #76808e); }
.wb-ev-said { margin-top: 0.15rem; color: var(--ink, #e7ecf3); }
.wb-ev-detail { margin-top: 0.1rem; font-size: 0.72rem; color: var(--ink-3, #76808e); }

/* ── PICTURES (0mtlwzbwb-d0f8iq) ─────────────────────────────────────
 * A row, not a grid. Four is the cap, and four thumbnails side by side on a
 * phone are stamps — so they scroll horizontally at a size you can actually
 * read, and the caption sits under its own picture rather than in a list
 * below all of them. A caption that is not adjacent to its picture is a
 * caption you have to count to match up. */
.wb-pics {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-bottom: 0.25rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.wb-pic {
  position: relative;
  flex: 0 0 auto;
  width: 8.5rem;
  margin: 0;
  display: grid;
  gap: 0.3rem;
}
.wb-pic img {
  display: block;
  width: 100%;
  height: 6.4rem;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--line, #2b3441);
  background: var(--surface-2, #141a22);
}
.wb-pic figcaption {
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--ink-2, #a6b0be);
}
.wb-cap {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.74rem;
  padding: 0.25rem 0.35rem;
  color: var(--ink, #e7ecf3);
  background: var(--surface-2, #141a22);
  border: 1px solid var(--line, #2b3441);
  border-radius: 5px;
}
/* The remove control sits ON the picture. Off it, in a row of four, there is
 * no way to tell which one it removes. */
.wb-pic-x {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  line-height: 1;
  font-size: 0.95rem;
  color: var(--ink, #e7ecf3);
  background: rgba(0, 0, 0, 0.62);
  border: 1px solid var(--line, #2b3441);
  border-radius: 50%;
  cursor: pointer;
}

/* The picker itself never shows: accept="image/*" is what puts Camera and
 * Photo Library on the iOS sheet, and a bare file control in a footer reads as
 * a form. It carries the `hidden` attribute too — this rule exists so the class
 * the markup names is a class the stylesheet has, which is the contract that
 * caught the panel shipping unstyled once already. */
.wb-file { display: none; }

/* ── THE CORRECTION (0mtlxrvud-wrgged) ───────────────────────────────
 * The editor replaces the note in the list rather than opening over it, so
 * the surrounding notes stay put and it is obvious which one is being
 * changed. The accent border is the only thing that says "this one is open". */
.wb-editing {
  border-color: var(--accent, #95d7e7);
  display: grid;
  gap: 0.5rem;
}
.wb-edit-body {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.86rem;
  line-height: 1.5;
  padding: 0.5rem 0.6rem;
  color: var(--ink, #e7ecf3);
  background: var(--surface-2, #141a22);
  border: 1px solid var(--line, #2b3441);
  border-radius: 6px;
  resize: vertical;
}

@media (prefers-reduced-motion: reduce) {
  .wb-chip { transition: none; }
}

/* Leave real scrollable space above fixed navigation, and avoid iPhone's input zoom. */
.wb-body, .wb-edit-body, .wb-cap { font-size: 16px; scroll-margin-bottom: 8rem; }
.wb-save, .wb-chip { min-height: 44px; }
.wb-keyboard-dismiss {
  position: fixed; right: max(12px, env(safe-area-inset-right, 0px)); z-index: 10000;
  min-height: 44px; padding: 10px 16px; border: 1px solid var(--line, #2b3441);
  border-radius: 22px; background: var(--surface, #171d26); color: var(--ink, #e6e9ee);
  font: 600 16px system-ui, sans-serif; box-shadow: 0 2px 12px #0005; cursor: pointer;
}
.wb-keyboard-dismiss[hidden] { display: none; }

/* A pinned host stays one summary tall until opened. */
.wb-mounted { margin: 0 auto; padding-bottom: 0; }
.wb-mounted:has(.wb-panel[open]) { padding-bottom: calc(8rem + env(safe-area-inset-bottom, 0px)); }

/* Grid children must shrink so the picture strip scrolls inside the note. */
.wb-notes, .wb-note, .wb-pics { min-width: 0; }
.wb-note-body, .wb-note-meta, .wb-pic figcaption { overflow-wrap: anywhere; }