/* ==========================================================================
   Marlowe Electrical — Tradie Admin Desk demo skin
   Source of truth: brand-spec.md (TASK-160 P3). Tokens only — components below
   reference custom properties exclusively; no loose hex past :root.
   ========================================================================== */

:root {
  /* Colour — warm-tinted throughout, no flat black/white (brand-spec) */
  --color-primary: #1F3A2E;         /* ironbark green (deep) */
  --color-primary-deep: #16291F;    /* ironbark shadow */
  --color-secondary: #9A6B1E;       /* brass (warm ochre) */
  --color-secondary-deep: #7C551A;  /* brass shadow */
  --color-accent: #3C4A52;          /* slate steel */
  --color-bg: #F4F0E8;              /* bone (warm light) */
  --color-surface: #FBF8F1;         /* oat paper */
  --color-text: #21201C;            /* graphite ink */
  --color-muted: #6A655C;           /* warm slate grey */
  --color-line: #D8CFBE;            /* aged keyline */
  --color-line-soft: #E8E1D2;       /* faint rule */
  --color-bone-on-dark: #F4F0E8;    /* bone on ironbark */
  --color-brass-tint: #F0E6CE;      /* brass-washed tint */
  --color-green-tint: #E4EBE4;      /* green-washed surface (safe/confirmed) */
  --color-urgent-tint: #F2DAC9;     /* urgent wash */
  --color-urgent: #A8431F;          /* urgent flag / error (semantic only) */

  /* Type */
  --font-heading: "Saira", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", Consolas, monospace;

  /* Scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.1875rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-display: clamp(2.5rem, 6.5vw, 4.25rem);

  /* Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6rem;

  /* Shape + depth */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-tool: 6px;
  --shadow-card: 0 1px 2px rgba(33, 32, 28, 0.05), 0 12px 32px -12px rgba(33, 32, 28, 0.20);
  --shadow-phone: 0 24px 48px -16px rgba(33, 32, 28, 0.38);

  /* Motion — one concept: "settle" (fade + rise, once) */
  --ease-settle: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-settle: 540ms;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.05;
  margin: 0;
  letter-spacing: -0.005em;
}

p { margin: 0; }

a { color: var(--color-secondary-deep); }

:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------- connector-node mark -- */
/* Filled brass dot inside a ring — the brand mark + the terminal-block motif. */
.node {
  display: inline-block;
  flex: none;
  width: 0.9em;
  height: 0.9em;
  border-radius: 50%;
  border: 2px solid currentColor;
  position: relative;
  vertical-align: -0.06em;
}
.node::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0.34em;
  height: 0.34em;
  border-radius: 50%;
  background: currentColor;
}

/* ----------------------------------------------------------- masthead --- */
.masthead {
  background: linear-gradient(168deg, var(--color-primary) 0%, var(--color-primary-deep) 130%);
  color: var(--color-bone-on-dark);
  text-align: center;
  padding: var(--space-8) var(--space-5) var(--space-7);
}

.masthead .wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--text-display);
  letter-spacing: -0.02em;
  color: var(--color-bone-on-dark);
}

.masthead .wordmark .node { color: var(--color-secondary); width: 0.62em; height: 0.62em; }

.masthead .subline {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--color-bone-on-dark);
  opacity: 0.9;
}

.masthead .subline .dot { padding: 0 0.5em; color: var(--color-secondary); }

.masthead .subline .seg,
.site-footer .seg { white-space: nowrap; }

@media (max-width: 560px) {
  .masthead .subline .dot,
  .site-footer .dot { display: none; }
  .masthead .subline .seg,
  .site-footer .seg { display: block; }
  .masthead .subline .seg + .seg { margin-top: 0.55em; }
}

/* terminal-strip rule under masthead — double keyline punctuated by a node */
.strip-rule {
  position: relative;
  height: 9px;
  margin: 0;
  background:
    linear-gradient(var(--color-line) 0 0) top / 100% 1px no-repeat,
    linear-gradient(var(--color-line) 0 0) bottom / 100% 1px no-repeat;
}
.strip-rule::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 1.5px solid var(--color-secondary);
}

/* --------------------------------------------------------------- page --- */
.page {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-7) var(--space-5) var(--space-9);
}

.page--wide { max-width: 1040px; }

.intake-shell { max-width: 680px; margin: 0 auto; }

.lede {
  text-align: center;
  margin-bottom: var(--space-6);
}

.lede h1, .lede h2 { font-size: var(--text-2xl); }

.lede .note {
  margin-top: var(--space-2);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

/* ----------------------------------------------------- docket panel ----- */
/* Work-docket grammar: oat body, ruled header band, mono job stamp. */
.docket {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.docket__band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: var(--color-primary);
  color: var(--color-bone-on-dark);
  padding: var(--space-3) var(--space-5);
}

.docket__band .band-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-lg);
  letter-spacing: 0.01em;
}

.docket__band .band-title .node { color: var(--color-secondary); }

.docket__band .band-ref {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-secondary);
  background: var(--color-primary-deep);
  border: 1px solid var(--color-secondary-deep);
  border-radius: var(--radius-sm);
  padding: 0.15rem 0.5rem;
}

.docket__body {
  padding: var(--space-6) clamp(var(--space-4), 4vw, var(--space-7));
}

/* ----------------------------------------------- numbered field groups -- */
.fieldset-heading {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: var(--space-6) 0 var(--space-3);
}

.fieldset-heading:first-child { margin-top: 0; }

.fieldset-heading .step {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-secondary-deep);
  letter-spacing: 0.08em;
}

.fieldset-heading h2 {
  font-size: var(--text-xl);
  font-weight: 600;
}

.fieldset-heading .rule {
  flex: 1;
  height: 1px;
  background: var(--color-line-soft);
  align-self: center;
}

/* ----------------------------------------------------------- chips ------ */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip { position: relative; display: inline-flex; }

.chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.chip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
  text-align: center;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.chip input:hover + span { border-color: var(--color-muted); }

.chip input:checked + span {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-bone-on-dark);
}

.chip input:focus-visible + span {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

/* urgency chips carry the semantic colour when chosen */
.chip--urgency input[value="emergency"]:checked + span {
  background: var(--color-urgent);
  border-color: var(--color-urgent);
  color: var(--color-bone-on-dark);
}

.chip-stack span {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  min-width: 0;
  width: 100%;
  text-align: left;
  padding: var(--space-3) var(--space-4);
}

.chip-stack .chip-head { font-weight: 700; }

.chip-stack .chip-sub {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-muted);
}

.chip-stack input:checked + span .chip-sub { color: var(--color-bone-on-dark); opacity: 0.85; }

.urgency-grid { display: grid; gap: var(--space-2); grid-template-columns: 1fr; }

/* ----------------------------------------------------------- inputs ----- */
.field { margin-bottom: var(--space-4); }

.field label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  margin-bottom: var(--space-1);
}

.field input,
.field textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
}

.field textarea { min-height: 6.5rem; resize: vertical; line-height: 1.55; }

.field input::placeholder,
.field textarea::placeholder { color: var(--color-muted); opacity: 0.7; }

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

.field .hint {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.optional { font-weight: 400; color: var(--color-muted); }

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

@media (max-width: 540px) {
  .field-grid { grid-template-columns: 1fr; }
}

/* check row (on-site contact ok) */
.check-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-green-tint);
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  margin-top: var(--space-3);
}

.check-row input { margin-top: 0.2rem; accent-color: var(--color-primary); flex: none; }

.check-row label { font-weight: 600; }

.check-row .hint { margin-top: 0.1rem; }

/* ------------------------------------------------- photo-evidence drop -- */
/* The simulated phone-photo upload — taped-in instant-photo tiles. */
.photo-drop {
  border: 1.5px dashed var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  padding: var(--space-4);
  text-align: center;
}

.photo-drop__lead {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 700;
  font-size: var(--text-sm);
}

.photo-drop__lead .node { color: var(--color-secondary-deep); }

.photo-drop__sub {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.photo-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.count-btn {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 700;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  line-height: 1;
}

.count-btn:hover { border-color: var(--color-muted); }

.count-readout {
  font-size: var(--text-sm);
  color: var(--color-muted);
  min-width: 7.5rem;
}

.count-readout b { color: var(--color-text); font-family: var(--font-mono); }

.photo-tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.photo-tile {
  width: 84px;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  padding: 5px 5px 8px;
  box-shadow: 0 2px 6px -3px rgba(33, 32, 28, 0.3);
  transform: rotate(var(--tilt, -2deg));
}

.photo-tile:nth-child(even) { --tilt: 2.5deg; }
.photo-tile:nth-child(3n) { --tilt: -1deg; }

.photo-tile__img {
  height: 64px;
  border-radius: 2px;
  background:
    repeating-linear-gradient(
      135deg,
      var(--color-line-soft) 0 6px,
      var(--color-bg) 6px 12px
    );
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-tile__img .node { color: var(--color-accent); opacity: 0.7; }

.photo-tile__cap {
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.02em;
  color: var(--color-muted);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* sim badge — discreet, honest */
.sim-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-muted);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  padding: 0.1rem 0.45rem;
  white-space: nowrap;
}

.sim-note {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-muted);
}

/* ------------------------------------------------------------- button --- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  width: 100%;
  padding: 0.95rem var(--space-5);
  background: var(--color-primary);
  color: var(--color-bone-on-dark);
  border: 0;
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color 180ms ease;
}

.btn-primary .node { color: var(--color-secondary); }

.btn-primary:hover { background: var(--color-primary-deep); }

.btn-primary[disabled] { opacity: 0.6; cursor: wait; }

.btn-note {
  margin-top: var(--space-2);
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-muted);
}

/* form errors */
.form-errors {
  background: var(--color-urgent-tint);
  border: 1px solid var(--color-urgent);
  border-radius: var(--radius-md);
  color: var(--color-urgent);
  font-size: var(--text-sm);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}

.form-errors ul { margin: 0; padding-left: 1.1em; }

/* --------------------------------------------------- received (scr 1) --- */
.received-layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-6);
  align-items: start;
}

@media (max-width: 860px) {
  .received-layout { grid-template-columns: 1fr; }
}

.received-card .docket__band .band-title .node,
.received-card .docket__band .band-ref { color: var(--color-green-tint); }

.received-card .docket__band {
  background: linear-gradient(168deg, var(--color-primary) 0%, var(--color-primary-deep) 130%);
}

.received-card .band-ref {
  color: var(--color-secondary);
  background: var(--color-primary-deep);
  border-color: var(--color-secondary-deep);
}

.received-kicker {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-secondary-deep);
  margin-bottom: var(--space-2);
}

.received-card h1, .received-card h2.received-title {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-2);
}

.received-sub { color: var(--color-muted); font-size: var(--text-sm); }

.summary-rows {
  margin-top: var(--space-5);
  border-top: 1px solid var(--color-line-soft);
}

.summary-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-line-soft);
  font-size: var(--text-sm);
}

.summary-row dt { color: var(--color-muted); }

.summary-row dd { margin: 0; font-weight: 600; text-align: right; }

.summary-row dd.mono { font-family: var(--font-mono); font-weight: 600; }

.summary-desc {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-tool);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.summary-desc .summary-desc__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-2);
}

/* received photos — same taped-tile grammar, read-only */
.received-photos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* status chips */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  border-radius: 999px;
  padding: 0.15rem 0.65rem;
  border: 1px solid var(--color-line);
  background: var(--color-bg);
  color: var(--color-muted);
  white-space: nowrap;
}

.status-chip--urgent {
  background: var(--color-urgent-tint);
  border-color: var(--color-urgent);
  color: var(--color-urgent);
}

.status-chip--soon {
  background: var(--color-brass-tint);
  border-color: var(--color-secondary);
  color: var(--color-secondary-deep);
}

.status-chip--flexible {
  background: var(--color-green-tint);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* --------------------------------------------------- phone mock (msg) --- */
.phone-wrap { text-align: center; }

.phone-caption {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-3);
}

.phone {
  display: inline-block;
  width: min(310px, 100%);
  background: var(--color-text);
  border-radius: 38px;
  padding: 12px;
  box-shadow: var(--shadow-phone);
  text-align: left;
}

.phone__screen {
  background: var(--color-bg);
  border-radius: 28px;
  overflow: hidden;
}

.phone__statusbar {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2) var(--space-4) 0;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--color-muted);
}

.phone__header {
  text-align: center;
  padding: var(--space-2) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--color-line-soft);
}

.phone__avatar {
  width: 34px;
  height: 34px;
  margin: 0 auto var(--space-1);
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone__sender { font-size: var(--text-xs); font-weight: 700; }

.phone__thread { padding: var(--space-4); min-height: 180px; }

.sms-meta {
  text-align: center;
  font-size: 0.65rem;
  color: var(--color-muted);
  margin-bottom: var(--space-2);
}

.sms-bubble {
  background: var(--color-surface);
  border: 1px solid var(--color-line-soft);
  border-radius: 18px;
  border-bottom-right-radius: 6px;
  margin-left: auto;
  padding: var(--space-3) var(--space-4);
  font-size: 0.85rem;
  line-height: 1.55;
  max-width: 92%;
}

/* arc-next link under the confirmation */
.arc-next {
  margin-top: var(--space-6);
  text-align: center;
  font-size: var(--text-sm);
}

.arc-next a {
  color: var(--color-secondary-deep);
  font-weight: 700;
  text-decoration-color: var(--color-line);
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------- footer - */
.site-footer {
  border-top: 1px solid var(--color-line);
  padding: var(--space-6) var(--space-5);
  text-align: center;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.site-footer .rec { font-family: var(--font-mono); font-size: var(--text-xs); }

.site-footer .dot { padding: 0 0.5em; color: var(--color-line); }

/* --------------------------------------------------------------- motion - */
.settle { animation: settle var(--dur-settle) var(--ease-settle) both; }

@keyframes settle {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.htmx-swapping { opacity: 0; transition: opacity 120ms ease-out; }

@media (prefers-reduced-motion: reduce) {
  .settle { animation: none; }
  .htmx-swapping { transition: none; opacity: 1; }
  * { transition-duration: 0.01ms !important; }
}

/* ----------------------------------------------- walkthrough rail (arc) - */
/* Present from Increment 1 so the demo arc is visible; later screens light up. */
.arc {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
}

.arc__inner {
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-5);
  overflow-x: auto;
  scrollbar-width: none;
}

.arc__inner::-webkit-scrollbar { display: none; }

.arc__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  white-space: nowrap;
  padding-right: var(--space-4);
  border-right: 1px solid var(--color-line-soft);
}

.arc__steps {
  display: flex;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.arc__steps li {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-muted);
  white-space: nowrap;
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius-sm);
}

.arc__steps li.is-current {
  color: var(--color-primary-deep);
  background: var(--color-green-tint);
}

.arc__steps li.is-upcoming { opacity: 0.6; }

.arc__steps li a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  color: inherit;
  text-decoration: none;
}

.arc__steps li:not(.is-current) a:hover { color: var(--color-text); }

.arc__num { font-family: var(--font-mono); font-size: 0.65rem; color: var(--color-secondary-deep); }

.arc__soon {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  padding: 0 0.3rem;
  margin-left: var(--space-2);
}

/* =========================================================================
   OWNER CONSOLE SCREENS (2-4) — same docket grammar, denser tool layout
   ========================================================================= */

/* compact masthead variant for the owner-facing console screens */
.masthead--console {
  padding: var(--space-5) var(--space-5) var(--space-4);
  text-align: left;
}
.masthead--console .console-bar {
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.masthead--console .wordmark { font-size: var(--text-xl); }
.masthead--console .wordmark .node { width: 0.6em; height: 0.6em; }
.masthead--console .console-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-bone-on-dark);
  opacity: 0.8;
}

.console {
  max-width: 1040px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5) var(--space-9);
}

.console-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.console-head h1 { font-size: var(--text-2xl); }
.console-head .console-kicker {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-secondary-deep);
  margin-bottom: var(--space-1);
}
.console-head .console-sub { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-1); }

/* "Demonstration data" stamp — discreet, honest, mono */
.demo-stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--color-muted);
  border: 1px dashed var(--color-line);
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.7rem;
}
.demo-stamp .node { color: var(--color-secondary); width: 0.7em; height: 0.7em; }

/* two-column console layout: worklist rail + detail panel */
.console-split {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--space-5);
  align-items: start;
}
@media (max-width: 880px) {
  .console-split { grid-template-columns: 1fr; }
}

/* worklist rail */
.worklist {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.worklist__head {
  background: var(--color-primary);
  color: var(--color-bone-on-dark);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.worklist__head .node { color: var(--color-secondary); }
.worklist ul { list-style: none; margin: 0; padding: 0; }
.worklist li { border-bottom: 1px solid var(--color-line-soft); }
.worklist li:last-child { border-bottom: 0; }
.worklist a {
  display: block;
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  color: var(--color-text);
}
.worklist a:hover { background: var(--color-bg); }
.worklist li.is-active a {
  background: var(--color-green-tint);
  box-shadow: inset 3px 0 0 var(--color-secondary);
}
.worklist__ref {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-secondary-deep);
}
.worklist__name { font-weight: 700; font-size: var(--text-sm); }
.worklist__meta {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 0.2rem;
  font-size: var(--text-xs);
  color: var(--color-muted);
}
.worklist__empty { padding: var(--space-4); color: var(--color-muted); font-size: var(--text-sm); }

/* brief sheet — the docket re-used as a read sheet */
.brief-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}
@media (max-width: 560px) { .brief-grid { grid-template-columns: 1fr; } }

.brief-card {
  background: var(--color-bg);
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-tool);
  padding: var(--space-4);
}
.brief-card .brief-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-2);
}
.brief-card .brief-value {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-lg);
}
.brief-card ul { margin: var(--space-1) 0 0; padding-left: 1.1em; font-size: var(--text-sm); }
.brief-card ul li { margin-bottom: 0.2rem; }

/* risk pills (owner-side classification) */
.risk-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-lg);
}
.risk-pill::before {
  content: "";
  width: 0.7em; height: 0.7em;
  border-radius: 50%;
  flex: none;
}
.risk-pill--hazard { color: var(--color-urgent); }
.risk-pill--hazard::before { background: var(--color-urgent); }
.risk-pill--attention { color: var(--color-secondary-deep); }
.risk-pill--attention::before { background: var(--color-secondary); }
.risk-pill--routine { color: var(--color-accent); }
.risk-pill--routine::before { background: var(--color-accent); }
.risk-pill--unset { color: var(--color-muted); }
.risk-pill--unset::before { background: var(--color-muted); }

/* "why this brief" reasons */
.brief-reasons {
  margin-top: var(--space-5);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-line-soft);
  border-left: 3px solid var(--color-secondary);
  border-radius: var(--radius-tool);
}
.brief-reasons .brief-label { margin-bottom: var(--space-2); }
.brief-reasons ul { margin: 0; padding-left: 1.1em; font-size: var(--text-sm); color: var(--color-text); }
.brief-reasons li { margin-bottom: 0.2rem; }

/* request-as-read (the messy original beside the clean brief) */
.read-original {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-tool);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.read-original .brief-label { margin-bottom: var(--space-2); }

/* brief action bar */
.action-bar {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.action-bar .deposit-note { font-size: var(--text-sm); color: var(--color-muted); }
.action-bar .deposit-note b { color: var(--color-text); font-family: var(--font-mono); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.7rem var(--space-5);
  background: var(--color-secondary);
  color: var(--color-bone-on-dark);
  border: 0;
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 180ms ease;
}
.btn-secondary:hover { background: var(--color-secondary-deep); }
.btn-secondary .node { color: var(--color-bone-on-dark); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.6rem var(--space-4);
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}
.btn-ghost:hover { border-color: var(--color-muted); background: var(--color-surface); }

/* =============== Screen 3 — payment + follow-up ===================== */
.pay-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.pay-figure {
  flex: 1 1 8rem;
  background: var(--color-bg);
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-tool);
  padding: var(--space-4);
}
.pay-figure .pay-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.pay-figure .pay-amount {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-xl);
  margin-top: var(--space-1);
}
.pay-figure--owed .pay-amount { color: var(--color-secondary-deep); }
.pay-figure--overdue .pay-amount { color: var(--color-urgent); }

/* payment status chip */
.pstatus {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--color-line);
}
.pstatus--sent { background: var(--color-brass-tint); border-color: var(--color-secondary); color: var(--color-secondary-deep); }
.pstatus--paid { background: var(--color-green-tint); border-color: var(--color-accent); color: var(--color-primary-deep); }
.pstatus--overdue { background: var(--color-urgent-tint); border-color: var(--color-urgent); color: var(--color-urgent); }
.pstatus--draft { background: var(--color-bg); color: var(--color-muted); }

/* reminder schedule — vertical timeline */
.schedule { margin-top: var(--space-5); }
.schedule__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}
.schedule__dot {
  flex: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  margin-top: 0.25rem;
  border: 2px solid var(--color-line);
  background: var(--color-surface);
}
.schedule__row.is-done .schedule__dot { background: var(--color-accent); border-color: var(--color-accent); }
.schedule__row.is-today .schedule__dot { background: var(--color-secondary); border-color: var(--color-secondary); box-shadow: 0 0 0 3px var(--color-brass-tint); }
.schedule__row.is-skipped .schedule__dot { background: var(--color-green-tint); border-color: var(--color-accent); }
.schedule__row.is-skipped { opacity: 0.65; }
.schedule__body { font-size: var(--text-sm); }
.schedule__body .schedule__when { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); }
.schedule__body .schedule__label { font-weight: 600; }
.schedule__body .schedule__state {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-left: var(--space-2);
}

/* follow-up draft cards */
.draft-cards { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
@media (min-width: 620px) { .draft-cards { grid-template-columns: 1fr 1fr; } }
.draft-card {
  background: var(--color-bg);
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-tool);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.draft-card .draft-tone {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-secondary-deep);
}
.draft-card .draft-body {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text);
  flex: 1;
}
.draft-card form { margin: 0; }

/* sent follow-ups log */
.followlog { margin-top: var(--space-5); }
.followlog__item {
  border-top: 1px solid var(--color-line-soft);
  padding: var(--space-3) 0;
  font-size: var(--text-sm);
}
.followlog__item .followlog__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-bottom: 0.2rem;
}

/* =============== Screen 4 — owner dashboard ========================= */
.metric-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
@media (max-width: 760px) { .metric-row { grid-template-columns: repeat(2, 1fr); } }

.metric {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.metric--accent { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-bone-on-dark); }
.metric .metric-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.metric--accent .metric-label { color: var(--color-bone-on-dark); opacity: 0.85; }
.metric .metric-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-2xl);
  margin-top: var(--space-2);
  line-height: 1;
}
.metric--accent .metric-value { color: var(--color-secondary); }
.metric .metric-sub { font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-2); }
.metric--accent .metric-sub { color: var(--color-bone-on-dark); opacity: 0.8; }

.dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-5);
  align-items: start;
}
@media (max-width: 880px) { .dash-grid { grid-template-columns: 1fr; } }

/* pipeline buckets */
.pipeline { display: grid; gap: var(--space-4); }
.bucket {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.bucket__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-line-soft);
}
.bucket__title { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-lg); }
.bucket__sub { font-size: var(--text-xs); color: var(--color-muted); }
.bucket__count {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-xl);
  color: var(--color-secondary-deep);
}
.bucket__list { list-style: none; margin: 0; padding: var(--space-2) var(--space-4) var(--space-3); }
.bucket__list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-line-soft);
  font-size: var(--text-sm);
}
.bucket__list li:last-child { border-bottom: 0; }
.bucket__list a { text-decoration: none; color: var(--color-text); }
.bucket__list a:hover { color: var(--color-secondary-deep); }
.bucket__list .ref { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-secondary-deep); }
.bucket__empty { padding: var(--space-3) var(--space-4) var(--space-4); color: var(--color-muted); font-size: var(--text-sm); }

/* money panel + hand-built CSS bars (NO chart library) */
.money-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.money-panel h2 { font-size: var(--text-xl); margin-bottom: var(--space-1); }
.money-panel .panel-sub { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-5); }

.bars { display: grid; gap: var(--space-4); }
.bar-row { }
.bar-row__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-1);
  font-size: var(--text-sm);
}
.bar-row__label { color: var(--color-text); font-weight: 600; }
.bar-row__amount { font-family: var(--font-mono); font-weight: 700; color: var(--color-secondary-deep); }
.bar-track {
  height: 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-line-soft);
  border-radius: 3px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  background: var(--color-secondary);
  border-radius: 2px 0 0 2px;
}
.bar-row--age3 .bar-fill { background: var(--color-urgent); }

.money-foot {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line-soft);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}
.money-foot .foot-label { font-size: var(--text-sm); color: var(--color-muted); }
.money-foot .foot-value { font-family: var(--font-mono); font-weight: 700; font-size: var(--text-xl); color: var(--color-primary-deep); }

/* shared small bits for console screens */
.console-empty {
  background: var(--color-surface);
  border: 1px dashed var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  text-align: center;
  color: var(--color-muted);
}
.tiny-photos { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }
.tiny-photos .photo-tile { width: 60px; }
.tiny-photos .photo-tile__img { height: 44px; }