/*
 * Skeleton stylesheet — the Phase 3 component vocabulary, drafted.
 *
 * Every rule here is a COMPONENT, never a screen. If a screen needs a rule of its own, the
 * vocabulary is incomplete and the fix is to add the component, not the exception. That is
 * the zero-new-CSS-per-screen target from REDESIGN.md, tested on real screens rather than
 * asserted — five surfaces are built on this file and none of them adds a line.
 *
 * Colour, type, spacing and motion all come from tokens.css unchanged.
 */

@import url('tokens.css');

*, *::before, *::after { box-sizing: border-box; }

/* ============================================================ mock chrome ==== */
/* The only part of this file that dies when the skeleton becomes the real app. */

.mockbar {
  background: var(--zinc-900);
  color: var(--zinc-300);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: 600;
  padding: var(--space-2) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.mockbar__dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--cuivre-500); flex: none; }
.mockbar a { color: var(--blueprint-500); text-decoration: none; }
.mockbar a:hover { text-decoration: underline; }
.mockbar__spacer { flex: 1; }

/* ================================================================== shell ==== */

.shell {
  display: grid;
  grid-template-columns: 216px 1fr;
  grid-template-rows: auto 1fr;
  height: calc(100vh - 29px);
  min-height: 0;
}

.topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-4);
  height: 52px;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-strong);
}

.wordmark { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; color: var(--text-primary); width: 184px; flex: none; }
.wordmark__text { font-family: var(--font-display); font-weight: 800; letter-spacing: var(--tracking-display); font-size: var(--text-lg); }
.wordmark__tld { color: var(--text-muted); }

/* Global search: the sixth way in, and probably the primary one. */
.omnibox { flex: 1; max-width: 620px; position: relative; }
.omnibox input {
  width: 100%; height: 34px;
  padding: 0 var(--space-3) 0 var(--space-8);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  font: inherit; font-size: var(--text-sm); color: var(--text-primary);
}
.omnibox input::placeholder { color: var(--text-muted); }
.omnibox__icon { position: absolute; left: var(--space-3); top: 9px; color: var(--text-muted); pointer-events: none; }
.omnibox__key {
  position: absolute; right: var(--space-2); top: 7px;
  font-family: var(--font-mono); font-size: var(--text-2xs);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 1px 5px; color: var(--text-muted); background: var(--surface-raised);
}

.topbar__right { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }

.tenant {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: 600;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
  background: var(--surface-sunken); cursor: pointer;
}
.tenant__swatch { width: 10px; height: 10px; border-radius: 2px; background: var(--stage-scheduled); flex: none; }

.avatar {
  width: 30px; height: 30px; border-radius: var(--radius-full);
  background: var(--zinc-700); color: var(--white);
  display: grid; place-items: center;
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.02em;
  border: none; cursor: pointer;
}

/* ---- sidebar ---- */

.sidebar {
  background: var(--surface-raised);
  border-right: 1px solid var(--border-strong);
  padding: var(--space-4) var(--space-2);
  display: flex; flex-direction: column; gap: var(--space-1);
  overflow-y: auto;
}

.navgroup { display: flex; flex-direction: column; gap: 1px; }
.navgroup__label { padding: var(--space-4) var(--space-3) var(--space-1); }

.navlink {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  text-decoration: none; color: var(--text-secondary);
  font-size: var(--text-sm); font-weight: 500;
  transition: background var(--dur-instant) var(--ease-out);
}
.navlink:hover { background: var(--surface-sunken); color: var(--text-primary); }
.navlink--active { background: var(--accent-wash); color: var(--accent-hover); font-weight: 600; }
.navlink__glyph { flex: none; display: grid; place-items: center; width: 16px; color: currentColor; opacity: 0.85; }
.navlink__count { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-muted); }
.navlink--active .navlink__count { color: var(--accent); }

/* The home a role lands on: it is a task, so it is marked as one. */
.navlink--home { border-left: 2px solid var(--accent-warm); border-radius: 0 var(--radius-md) var(--radius-md) 0; }

.sidebar__foot { margin-top: auto; padding: var(--space-3); border-top: 1px solid var(--border-hairline); }

.lamp { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-2xs); color: var(--text-muted); }
.lamp__dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--state-positive); flex: none; }

/* ---- the work area ---- */

.work { min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }

/* ============================================================ task surface ==== */
/*
 * A task surface: columns that together hold one whole task. Nothing in here links to a
 * page where the next step happens — that is the entire point.
 */

.task { display: grid; min-height: 0; flex: 1; }
.task--three { grid-template-columns: 280px minmax(0, 1fr) minmax(0, 1.15fr); }
.task--two   { grid-template-columns: 300px minmax(0, 1fr) 340px; }
.task--wide  { grid-template-columns: minmax(0, 1fr); }

.col {
  min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--border-strong);
  background: var(--surface-raised);
}
.col:last-child { border-right: none; }
.col--sunken { background: var(--surface-sunken); }
.col__head {
  flex: none;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-hairline);
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 44px;
}
.col__title { font-family: var(--font-display); font-size: var(--text-base); font-weight: 700; letter-spacing: var(--tracking-display); }
.col__body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-4); }
.col__body--flush { padding: 0; }
.col__foot { flex: none; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border-strong); background: var(--surface-raised); }

/* The task header: start, position, end — always visible. */
.taskbar {
  flex: none;
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-strong);
}
.taskbar__title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; letter-spacing: var(--tracking-display); }
.taskbar__sub { font-size: var(--text-sm); color: var(--text-secondary); }
.taskbar__right { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }

/* ================================================================= panels ==== */

.panel {
  background: var(--surface-raised);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.panel + .panel { margin-top: var(--space-3); }
.panel__head { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-3); }
.panel__title { font-family: var(--font-display); font-size: var(--text-base); font-weight: 700; letter-spacing: var(--tracking-display); }
.panel__link { margin-left: auto; font-size: var(--text-xs); color: var(--accent); text-decoration: none; }
.panel__link:hover { text-decoration: underline; }

/* A section of a one-scroll record page. Sections, not tabs. */
.section { padding: var(--space-6) var(--space-8); border-bottom: 1px solid var(--border-hairline); }
.section:last-child { border-bottom: none; }
.section__head { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-4); }
.section__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; letter-spacing: var(--tracking-display); }
.section__count { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }

/* ================================================================ queues ==== */

.queue { display: flex; flex-direction: column; }
.queue__item {
  display: block; text-decoration: none; color: inherit;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-hairline);
  border-left: 2px solid transparent;
  cursor: pointer;
}
.queue__item:hover { background: var(--surface-sunken); }
.queue__item--on { background: var(--accent-wash); border-left-color: var(--accent); }
.queue__top { display: flex; align-items: center; gap: var(--space-2); margin-bottom: 2px; }
.queue__who { font-weight: 600; font-size: var(--text-sm); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue__age { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-muted); flex: none; }
.queue__age--old { color: var(--state-caution); font-weight: 600; }
.queue__age--stale { color: var(--state-negative); font-weight: 700; }
.queue__what { font-size: var(--text-xs); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue__meta { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }

/* Where an enquiry arrived from. One queue, every transport — the T1 fix. */
.transport {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 1px 6px; border-radius: var(--radius-sm);
  background: var(--surface-sunken); color: var(--text-secondary);
  border: 1px solid var(--border-hairline);
}
.transport--voix   { background: var(--accent-warm-wash); color: var(--cuivre-700); border-color: transparent; }
.transport--sms    { background: var(--accent-wash); color: var(--blueprint-700); border-color: transparent; }
.transport--courriel { background: var(--surface-sunken); color: var(--text-secondary); }
.transport--web    { background: var(--state-positive-wash); color: var(--vert-air-600); border-color: transparent; }
.transport--app    { background: var(--state-caution-wash); color: #8a5806; border-color: transparent; }

/* ================================================================== bits ==== */

.stage {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); font-weight: 600;
  padding: 2px 8px; border-radius: var(--radius-full);
  background: var(--surface-sunken); border: 1px solid var(--border-hairline);
}
.stage__dot { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--stage-intake); flex: none; }
.stage--quoting .stage__dot { background: var(--stage-quoting); }
.stage--progress .stage__dot { background: var(--stage-in-progress); }
.stage--scheduled .stage__dot { background: var(--stage-scheduled); }
.stage--won .stage__dot { background: var(--stage-won); }
.stage--awaiting .stage__dot { background: var(--stage-awaiting-payment); }

/* A labelled instrument reading. JobDetail invented this privately; here it is shared. */
.reading { display: flex; flex-direction: column; gap: 2px; }
.reading__value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: 'zero' 1; font-size: var(--text-lg); font-weight: 600; }
.reading__value--lg { font-size: var(--text-2xl); }
.reading__value--pos { color: var(--state-positive); }
.reading__value--warn { color: var(--state-caution); }
.readings { display: flex; gap: var(--space-8); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 34px; padding: 0 var(--space-4);
  border-radius: var(--radius-md); border: 1px solid transparent;
  font: inherit; font-size: var(--text-sm); font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: background var(--dur-instant) var(--ease-out);
}
.btn--primary { background: var(--accent); color: var(--white); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--ghost { background: transparent; color: var(--text-primary); border-color: var(--border-strong); }
.btn--ghost:hover { background: var(--surface-sunken); }
.btn--quiet { background: transparent; color: var(--text-secondary); height: 28px; padding: 0 var(--space-2); }
.btn--quiet:hover { background: var(--surface-sunken); color: var(--text-primary); }
.btn--sm { height: 28px; padding: 0 var(--space-3); font-size: var(--text-xs); }
.btn--block { width: 100%; }
.btn--tall { height: 40px; }

.field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); }
.field__label { font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; font-weight: 600; color: var(--text-secondary); }
.field input, .field textarea, .field select {
  width: 100%; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--surface-raised); font: inherit; font-size: var(--text-sm); color: var(--text-primary);
}
.field textarea { resize: vertical; min-height: 64px; }
.field__row { display: flex; gap: var(--space-3); }
.field__row > .field { flex: 1; }

table.grid { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
table.grid th {
  text-align: left; font-size: var(--text-2xs); letter-spacing: var(--tracking-label);
  text-transform: uppercase; font-weight: 600; color: var(--text-secondary);
  padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-strong); white-space: nowrap;
}
table.grid td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-hairline); vertical-align: middle; }
table.grid tr:last-child td { border-bottom: none; }
table.grid tbody tr:hover { background: var(--surface-sunken); }
td.numeric, th.numeric { text-align: right; }
.muted { color: var(--text-secondary); }
.dim { color: var(--text-muted); }
.strong { font-weight: 600; }

.chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-2xs); font-weight: 600;
  padding: 2px 7px; border-radius: var(--radius-sm);
  background: var(--surface-sunken); border: 1px solid var(--border-hairline); color: var(--text-secondary);
}
.chip--warn { background: var(--state-caution-wash); color: #8a5806; border-color: transparent; }
.chip--neg { background: var(--state-negative-wash); color: var(--rouille-600); border-color: transparent; }
.chip--pos { background: var(--state-positive-wash); color: var(--vert-air-600); border-color: transparent; }

.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.stack--tight { gap: var(--space-2); }
.row { display: flex; align-items: center; gap: var(--space-3); }
.row--between { justify-content: space-between; }
.spacer { flex: 1; }

/* ============================================================ duct run ==== */
/* The signature. A job's pipeline as a channel, filled to where the job sits. */

.duct { display: flex; flex-direction: column; gap: var(--space-2); }
.duct__stages { display: flex; list-style: none; margin: 0; padding: 0; }
.duct__stages li {
  flex: 1; font-size: var(--text-2xs); color: var(--text-muted);
  letter-spacing: 0.02em; text-align: left; padding-left: 2px;
}
.duct__stages li[aria-current] { color: var(--accent-warm); font-weight: 700; }

/* ========================================================== conversation ==== */

.thread { display: flex; flex-direction: column; gap: var(--space-3); }
.bubble {
  max-width: 78%; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg); font-size: var(--text-sm); line-height: 1.5; margin: 0;
}
.bubble--in { background: var(--surface-sunken); border: 1px solid var(--border-hairline); align-self: flex-start; border-bottom-left-radius: var(--radius-sm); }
.bubble--out { background: var(--accent-wash); color: var(--blueprint-700); align-self: flex-end; border-bottom-right-radius: var(--radius-sm); }
.bubble__meta { display: block; font-size: var(--text-2xs); color: var(--text-muted); margin-top: var(--space-2); font-family: var(--font-mono); }
.bubble--out .bubble__meta { color: var(--blueprint-600); opacity: 0.75; }

.event {
  display: flex; align-items: center; gap: var(--space-2); align-self: center;
  font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase;
  font-weight: 600; color: var(--text-secondary); padding: var(--space-1) 0;
}
.event__dot { width: 5px; height: 5px; border-radius: var(--radius-full); background: var(--accent-warm); flex: none; }

.composer { display: flex; gap: var(--space-2); align-items: flex-end; }
.composer textarea {
  flex: 1; padding: var(--space-2) var(--space-3); min-height: 38px; max-height: 120px; resize: vertical;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--surface-raised); font: inherit; font-size: var(--text-sm);
}

/* =============================================================== the day ==== */

.strip { display: flex; gap: var(--space-3); padding: var(--space-4); overflow-x: auto; border-bottom: 1px solid var(--border-strong); background: var(--surface-raised); }
.person {
  flex: none; width: 190px; padding: var(--space-3);
  border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
  background: var(--surface-raised);
}
.person--onsite { border-color: var(--accent-warm); box-shadow: inset 3px 0 0 var(--accent-warm); }
.person--free { background: var(--surface-sunken); }
.person__name { font-weight: 700; font-size: var(--text-sm); }
.person__state { font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; font-weight: 600; color: var(--text-secondary); margin-top: 2px; }
.person__where { font-size: var(--text-xs); color: var(--text-secondary); margin-top: var(--space-2); }

.daygrid { display: grid; grid-template-columns: 56px repeat(4, minmax(0,1fr)); flex: 1; min-height: 0; overflow: auto; background: var(--surface-sunken); }
.daygrid__hours { border-right: 1px solid var(--border-strong); background: var(--surface-raised); }
.daygrid__hour { height: 56px; padding: var(--space-1) var(--space-2); font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-muted); border-bottom: 1px solid var(--border-hairline); text-align: right; }
.daygrid__col { border-right: 1px solid var(--border-hairline); position: relative; }
.daygrid__colhead { position: sticky; top: 0; z-index: 1; padding: var(--space-2); background: var(--surface-raised); border-bottom: 1px solid var(--border-strong); font-size: var(--text-xs); font-weight: 700; text-align: center; }
.daygrid__slot { height: 56px; border-bottom: 1px solid var(--border-hairline); }

.visit {
  position: absolute; left: 4px; right: 4px;
  border-radius: var(--radius-sm); padding: var(--space-2);
  font-size: var(--text-xs); overflow: hidden;
  background: var(--accent-wash); border-left: 3px solid var(--accent); color: var(--blueprint-700);
}
.visit--progress { background: var(--accent-warm-wash); border-left-color: var(--accent-warm); color: var(--cuivre-700); }
.visit--done { background: var(--state-positive-wash); border-left-color: var(--state-positive); color: var(--vert-air-600); }
.visit__who { font-weight: 700; }
.visit__what { opacity: 0.85; }

/* Untimed promises get their own band. Drawing them on the clock invents a commitment. */
.untimed { padding: var(--space-3) var(--space-4); background: var(--surface-raised); border-bottom: 1px solid var(--border-strong); display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.untimed__card { padding: var(--space-2) var(--space-3); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); font-size: var(--text-xs); background: var(--surface-sunken); }

/* ================================================================ index ==== */

.doc { max-width: 980px; margin: 0 auto; padding: var(--space-12) var(--space-6) var(--space-16); }
.doc h1 { font-size: var(--text-3xl); margin-bottom: var(--space-3); }
.doc h2 { font-size: var(--text-xl); margin: var(--space-12) 0 var(--space-4); }
.doc p { color: var(--text-secondary); line-height: 1.65; max-width: 68ch; }
.doc strong { color: var(--text-primary); }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.card {
  display: block; text-decoration: none; color: inherit;
  padding: var(--space-5); background: var(--surface-raised);
  border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
  transition: box-shadow var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out);
}
.card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
.card__tag { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--accent-warm); font-weight: 600; }
.card__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; letter-spacing: var(--tracking-display); margin: var(--space-2) 0; }
.card__body { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.55; }
.card__count { margin-top: var(--space-4); display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); }
.was { color: var(--state-negative); text-decoration: line-through; }
.now { color: var(--state-positive); font-weight: 700; }

.scoretable { width: 100%; border-collapse: collapse; margin-top: var(--space-4); font-size: var(--text-sm); }
.scoretable th { text-align: left; font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-secondary); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-strong); }
.scoretable td { padding: var(--space-3); border-bottom: 1px solid var(--border-hairline); }


/* ============================================================= utilities ==== */
/*
 * Added AFTER building the five surfaces, from counting what they reached for inline: 30
 * font-size declarations, 28 width/height, ~30 spacing. Each one below is a rule the
 * screens were already writing by hand — which is exactly the signal REDESIGN.md Phase 3
 * describes. The vocabulary was short; this is it being lengthened rather than worked around.
 *
 * Positions computed from data (the day grid's top/height) stay inline on purpose: those are
 * values, not style decisions, the same way a chart's bar height is.
 */

.t-2xs  { font-size: var(--text-2xs); }
.t-xs   { font-size: var(--text-xs); }
.t-sm   { font-size: var(--text-sm); }
.t-base { font-size: var(--text-base); }
.t-lg   { font-size: var(--text-lg); }

.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.m-0  { margin: 0; }

.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-12 { gap: var(--space-12); }

.flex-1 { flex: 1; }
.flex-none { flex: none; }
.center { text-align: center; }
.top { align-items: flex-start; }
.end { align-items: flex-end; }

/* A hairline that divides. The dimension rule marks a measured span and is never this. */
.hr { border: none; border-top: 1px solid var(--border-hairline); margin: var(--space-2) 0; }
.rule-top { padding-top: var(--space-3); border-top: 1px solid var(--border-strong); }

/* Small variants, so a component is resized by name rather than by overriding it. */
.avatar--sm { width: 26px; height: 26px; font-size: var(--text-2xs); }
.reading--sm .reading__value { font-size: var(--text-base); }
.btn--icon { width: 34px; padding: 0; flex: none; }

/* A photograph, or the space one will occupy. */
.thumb {
  width: 120px; height: 88px;
  background: var(--surface-sunken);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  font-size: var(--text-xs); color: var(--text-muted);
}
.thumbs { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* A definition row: fixed-width label, value beside it. */
.def { display: flex; align-items: baseline; gap: var(--space-3); }
.def > .label { width: 110px; flex: none; }

.scroll-y { overflow-y: auto; }
.note { font-size: var(--text-2xs); color: var(--text-muted); }
.quote-lead { font-size: var(--text-lg); color: var(--text-primary); border-left: 3px solid var(--accent-warm); padding-left: var(--space-4); line-height: 1.6; }


/* ========================================================= multi-transport ==== */
/*
 * One thread, every way a customer can reach us.
 *
 * The schema already models this: message_transport is sms | email | in_app | note | call,
 * each message carries the `address` it travelled to or from, and delivered_at / read_at /
 * failed_reason are per message. What was missing is a UI that renders five different kinds
 * of contact in ONE timeline without pretending they are the same thing — a recorded phone
 * call is not a chat bubble, and an internal note must never look like something the
 * customer can see.
 *
 * The rule here: same timeline, different form. A transport is legible at a glance from the
 * SHAPE of the entry, not from a small coloured label that has to be learned.
 */

.msg { display: flex; flex-direction: column; max-width: 78%; }
.msg--in  { align-self: flex-start; }
.msg--out { align-self: flex-end; align-items: flex-end; }
.msg--full { max-width: 100%; align-self: stretch; }

.msg__head {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-2xs); color: var(--text-muted);
  margin-bottom: var(--space-1); font-family: var(--font-mono);
}

/* Delivery state. failed_reason has had a column since day one and never had a UI —
   a rep whose answer did not arrive is the one person who must be told. */
.delivery { display: inline-flex; align-items: center; gap: 3px; font-size: var(--text-2xs); font-family: var(--font-mono); }
.delivery--sent { color: var(--text-muted); }
.delivery--read { color: var(--state-positive); }
.delivery--failed { color: var(--state-negative); font-weight: 700; }

/* ---- a phone call, in the thread ---- */
/* 3 925 calls, all recorded, 40% transcribed. A call is an event with a recording and an
   extraction, so it gets a card, not a bubble. */
.callcard {
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent-warm);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  padding: var(--space-3) var(--space-4);
  width: 100%;
}
.callcard--missed { border-left-color: var(--state-negative); }
.callcard__dir--missed { color: var(--state-negative); }
.callcard__top { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.callcard__dir { font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; font-weight: 700; color: var(--accent-warm); }
.callcard__dur { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-muted); }
.player { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-2) 0; }
.player__wave { flex: 1; height: 22px; }
.transcript {
  font-size: var(--text-sm); line-height: 1.65;
  background: var(--surface-sunken); border-radius: var(--radius-sm);
  padding: var(--space-3); margin-top: var(--space-2);
}
/* What the extraction concluded. Confidence is shown, never silently trusted. */
.extract { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }

/* ---- a web form submission ---- */
/* 983 of Hydrokleen's jobs arrived from the web with full attribution. Today they land as a
   job and never enter the conversation at all. */
.formcard {
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--vert-air-600);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  padding: var(--space-3) var(--space-4);
  width: 100%;
}
.formcard__fields { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-4); font-size: var(--text-sm); margin-top: var(--space-2); }
.formcard__fields dt { font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; font-weight: 600; color: var(--text-secondary); }
.formcard__fields dd { margin: 0; }

/* ---- an email ---- */
/* Wider than an SMS because it is: a subject line, a signature, sometimes an HTML body. */
.emailmsg {
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  padding: var(--space-3) var(--space-4);
  width: 100%;
}
.emailmsg--out { background: var(--accent-wash); border-color: transparent; }
.emailmsg__subject { font-weight: 700; font-size: var(--text-sm); margin-bottom: var(--space-1); }
.emailmsg__body { font-size: var(--text-sm); line-height: 1.6; }

/* ---- an internal note ---- */
/* Never leaves the building, and must be impossible to mistake for a reply. Hatched edge,
   no bubble, its own colour — the composer changes appearance to match when writing one. */
.notecard {
  width: 100%;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: repeating-linear-gradient(45deg, var(--surface-sunken), var(--surface-sunken) 6px, transparent 6px, transparent 12px);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
}
.notecard__tag { font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; font-weight: 700; color: var(--text-secondary); }

/* ---- the composer, with the channel as an explicit decision ---- */
/*
 * The single most dangerous control in the product: writing an internal note and having it
 * reach the customer, or answering an email by SMS to a number that cannot receive it. So
 * the channel is picked before the text, the destination address is printed under the box,
 * and note mode restyles the whole composer rather than flipping a quiet toggle.
 */
.channelpick { display: flex; gap: var(--space-1); margin-bottom: var(--space-2); flex-wrap: wrap; }
.chan {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-strong); border-radius: var(--radius-full);
  background: var(--surface-raised); cursor: pointer;
  font: inherit; font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary);
}
.chan:hover { background: var(--surface-sunken); }
.chan--on { background: var(--accent); border-color: var(--accent); color: var(--white); }
.chan--note.chan--on { background: var(--zinc-700); border-color: var(--zinc-700); }
.chan--off { opacity: 0.45; cursor: not-allowed; text-decoration: line-through; }
.chan__dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; flex: none; }

.composer--note textarea { background: repeating-linear-gradient(45deg, var(--surface-sunken), var(--surface-sunken) 6px, transparent 6px, transparent 12px); border-style: dashed; }

.sendto { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-2xs); color: var(--text-secondary); margin-top: var(--space-2); }

/* ---- reachability ---- */
/* 97% of customers have a phone, 71% an email. For three in ten, email is not an option and
   must not be offered as though it were. */
.reach { display: flex; flex-direction: column; gap: var(--space-2); }
.reach__row { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.reach__row--no { color: var(--text-muted); }
.reach__mark { width: 14px; flex: none; text-align: center; font-weight: 700; }
.reach__mark--yes { color: var(--state-positive); }
.reach__mark--no { color: var(--text-muted); }
.reach__pref { margin-left: auto; }

/* An inbound sender we cannot match. inbound.ts gives them their own thread every time, on
   purpose — so the UI has to offer the resolution rather than hide the ambiguity. */
.unmatched {
  border: 1px solid var(--state-caution);
  background: var(--state-caution-wash);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

@media (max-width: 1200px) {
  .task--three, .task--two { grid-template-columns: minmax(0,1fr); }
  .col { border-right: none; border-bottom: 1px solid var(--border-strong); }
  .shell { height: auto; }
  .task { min-height: 0; }
  .col__body { overflow: visible; }
}