/*
 * OurWorkshop — Design System.
 * One house look (warm paper, tangerine accent, Bricolage/Hanken/Space Mono),
 * one knob: --accent-h. Every surface reads the tokens below. The old palette
 * variable names (--cream, --serif, --gold…) are kept as back-compat aliases
 * that now point at the design-system tokens, so existing views reskin for free.
 */

/* ---- Self-hosted webfonts (latin subset) ------------------------------- */
@font-face {
  font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 800;
  font-display: swap; src: url("/assets/bricolage-grotesque-7bec0498.woff2") format('woff2');
}
@font-face {
  font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url("/assets/hanken-grotesk-62d0893d.woff2") format('woff2');
}
@font-face {
  font-family: 'Space Mono'; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/assets/space-mono-400-2fb0d22d.woff2") format('woff2');
}
@font-face {
  font-family: 'Space Mono'; font-style: normal; font-weight: 700;
  font-display: swap; src: url("/assets/space-mono-700-27e084bd.woff2") format('woff2');
}

:root {
  /* One fixed house look — opt out of the browser's dark-mode adjustments so
     native controls (inputs, scrollbars) stay on our warm-paper palette. */
  color-scheme: only light;

  /* --- Warm neutrals (workshop paper) --- */
  --bg:        #f7f2e9;   /* page background */
  --surface:   #fffdf8;   /* raised surface — warm white */
  --surface-2: #efe7d6;   /* sunk panel / inset */
  --ink:       #1f1b16;   /* near-black, warm */
  --sub:       #6f6655;   /* secondary / muted text */
  --line:      #e4dac6;   /* hairline border */
  --line-2:    #d0c4ab;   /* stronger divider */

  /* --- Accent (tangerine) — OKLCH; --accent-h is the only tenant knob --- */
  --accent-l: 0.70;
  --accent-c: 0.165;
  --accent-h: 52;
  --accent:      oklch(var(--accent-l) var(--accent-c) var(--accent-h));
  --accent-soft: oklch(min(calc(var(--accent-l) + 0.30), 0.96) calc(var(--accent-c) * 0.38) var(--accent-h));
  --accent-dim:  oklch(min(calc(var(--accent-l) + 0.20), 0.92) calc(var(--accent-c) * 0.55) var(--accent-h));
  --accent-deep: oklch(max(calc(var(--accent-l) - 0.14), 0.30) var(--accent-c) var(--accent-h));
  --on-accent:   #fffdf8;

  /* --- Spine (lifecycle motif) --- */
  --spine:      oklch(0.64 0.095 196);
  --spine-soft: oklch(0.92 0.040 196);
  --spine-deep: oklch(0.46 0.080 196);

  /* --- Status (muted, never neon) --- */
  --ok:          oklch(0.57 0.10 150);
  --ok-soft:     oklch(0.93 0.045 150);
  --warn:        oklch(0.72 0.12 72);
  --warn-soft:   oklch(0.94 0.060 80);
  --danger:      oklch(0.56 0.16 28);
  --danger-soft: oklch(0.93 0.050 30);

  /* --- Type --- */
  --font-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-label:   'Space Mono', ui-monospace, 'SFMono-Regular', monospace;
  --w-display:  700;
  --w-medium:   500;
  --w-semibold: 600;
  --track-display: -0.02em;
  --track-label:   0.16em;

  /* --- Radius --- */
  --radius:      10px;
  --radius-lg:   18px;
  --radius-pill: 999px;

  /* --- Shadows (warm, low — paper lifting off a bench) --- */
  --shadow-1: 0 1px 3px rgba(40, 30, 15, 0.06), 0 1px 2px rgba(40, 30, 15, 0.04);
  --shadow-2: 0 6px 18px rgba(40, 30, 15, 0.08);
  --shadow-3: 0 14px 38px rgba(40, 30, 15, 0.12);

  /* --- Layout --- */
  --header-h: 64px;

  /* ---- Back-compat aliases (old names → design-system tokens) ---------- */
  --cream:    var(--surface-2);
  --cream-2:  #e7ddca;
  --paper:    var(--surface);
  --paper-2:  var(--surface-2);
  --ink-2:    #34302a;            /* body text */
  --muted:    var(--sub);
  --accent-2: var(--accent-dim);
  --sage:     var(--ok);
  --gold:     var(--accent-deep);
  --serif:    var(--font-display);
  --sans:     var(--font-body);
  --card:     var(--surface);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

/* Display headings — Bricolage, tight tracking. */
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: var(--track-display); }

::selection { background: var(--accent-dim); color: var(--ink); }
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.35);
  border-radius: var(--radius);
}

/* The signature mono spec-label / eyebrow voice. */
.ow-eyebrow {
  font-family: var(--font-label); font-size: 11px; letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--accent-deep); font-weight: 400;
}

/* ---- Admin shell: dark rail + cream working surface --------------------- */

.admin {
  display: grid;
  grid-template-columns: 208px 1fr;
  min-height: 100vh;
  background: var(--bg);
}

.rail {
  background: var(--surface);
  color: var(--sub);
  padding: 20px 14px;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.rail__brand {
  padding: 4px 8px 18px;
}

.rail__section {
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--sub);
  margin: 22px 8px 8px;
}

.rail__item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: var(--radius);
  margin-bottom: 2px;
  cursor: pointer;
  color: var(--sub);
  font-size: 13px;
  text-decoration: none;
}
.rail__item:hover { background: var(--surface-2); color: var(--ink); }
.rail__item.is-active { background: var(--accent); color: var(--on-accent); font-weight: var(--w-semibold); }
.rail__item .ic { width: 14px; text-align: center; }
.rail__item .label { flex: 1; }
.rail__badge {
  font-size: 10px;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-weight: 700;
  font-family: var(--font-label);
}
.rail__item.is-active .rail__badge { background: var(--on-accent); color: var(--accent); }

/* Logo — type-set wordmark in the display face. */
.logo { display: inline-flex; align-items: baseline; font-family: var(--font-display); font-weight: var(--w-display); letter-spacing: -.02em; }
.logo b { color: var(--accent); font-weight: var(--w-display); }
.logo .dot { color: var(--accent); margin: 0 1px; }

.main { min-width: 0; }

.topbar {
  padding: 18px 32px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.topbar__eyebrow { font-family: var(--font-label); font-size: 11px; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--accent-deep); }
.topbar__title { font-family: var(--font-display); font-weight: var(--w-display); font-size: 30px; margin: 6px 0 0; letter-spacing: var(--track-display); }
.topbar__sub { margin-top: 4px; font-size: 14px; color: var(--ink-soft); }
.topbar__actions { display: flex; gap: 10px; align-items: center; }

/* Buttons — uppercase mono label; variants from the design system. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius);
  font-family: var(--font-label); font-size: 12px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer;
  border: none; box-shadow: inset 0 0 0 1.5px var(--line-2);
  background: transparent;
  color: var(--ink);
  white-space: nowrap;
  transition: filter .12s, transform .12s;
}
.btn:hover { filter: brightness(.96); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--ink); color: var(--bg); box-shadow: none; }
.btn--accent  { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.btn--soft    { background: var(--accent-soft); color: var(--accent-deep); box-shadow: none; }
.search { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.search input { border: none; outline: none; background: transparent; font-size: 13px; font-family: inherit; width: 200px; }

/* ---- KPI strip --------------------------------------------------------- */

.kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; padding: 20px 32px 0; }
.kpi { background: #fff; border: 1px solid var(--line-2); border-radius: 8px; padding: 14px 16px; }
.kpi__label { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.kpi__value { font-family: var(--serif); font-size: 28px; line-height: 1.1; margin-top: 6px; }
.kpi__delta { font-size: 11px; margin-top: 4px; color: var(--muted); }
.kpi__delta.is-warn { color: var(--accent); }
.kpi__delta.is-good { color: #5a8060; }

/* ---- Kanban ------------------------------------------------------------ */

.board-wrap { padding: 24px 32px 48px; overflow-x: auto; }
.board { display: grid; grid-template-columns: repeat(5, minmax(260px, 1fr)); gap: 14px; min-width: 1300px; }

.col { background: #f0ebe1; border-radius: 10px; padding: 12px; min-height: 600px; }
.col__head { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 12px; border-bottom: 1px dashed var(--line); }
.col__dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.col__title { font-size: 13px; font-weight: 600; }
.col__title .count { color: var(--muted); font-weight: 400; margin-left: 4px; }
.col__hint { font-size: 10px; color: var(--muted); margin-top: 2px; }
.col__body { padding-top: 12px; min-height: 40px; }
.col__empty { font-size: 11px; color: var(--muted); text-align: center; padding: 24px 0; font-style: italic; }

/* ---- Lead card --------------------------------------------------------- */

.card {
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 10px;
  cursor: grab;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .02);
  position: relative;
}
.card:active { cursor: grabbing; }
.card.sortable-ghost { opacity: .4; }
.card.sortable-drag { box-shadow: 0 12px 28px rgba(26, 23, 20, .22); }

.card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.card__who { display: flex; align-items: center; gap: 8px; }
.avatar { width: 24px; height: 24px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-size: 11px; font-family: var(--serif); }
.card__name { font-size: 13px; font-weight: 600; }
.card__days { font-size: 10px; color: var(--muted); }
.card__date { font-size: 11px; color: var(--muted); margin-bottom: 6px; display: flex; gap: 6px; align-items: center; }
.card__date .d { font-family: var(--serif); color: var(--ink-2); font-size: 13px; }
.card__venue { font-size: 11px; color: var(--muted); margin-bottom: 10px; }
.pills { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.pill { font-size: 10px; padding: 3px 7px; background: var(--cream); border-radius: 999px; color: var(--ink-2); }
.card__msg { font-size: 11.5px; color: var(--ink-2); font-style: italic; border-left: 2px solid var(--line); padding-left: 8px; line-height: 1.45; margin-bottom: 8px; }
.card__followup { font-size: 10.5px; color: var(--accent); font-weight: 600; margin-bottom: 8px; letter-spacing: .04em; }
.card__foot { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line-2); padding-top: 8px; }
.card__total { font-family: var(--serif); font-size: 16px; }
.card__deposit { font-size: 10px; padding: 3px 7px; background: #fff3e0; color: var(--accent); border-radius: 4px; font-weight: 600; }

/* ====================================================================
   Toasts, rail extras, shared chrome
   ==================================================================== */
.toast { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 200;
  padding: 12px 20px; border-radius: 8px; font-size: 13px; font-weight: 500;
  box-shadow: 0 12px 32px rgba(26,23,20,.22); transition: opacity .4s, transform .4s; }
.toast--notice { background: #2a241f; color: var(--cream); }
.toast--alert { background: var(--accent); color: #fff; }
.toast.is-leaving { opacity: 0; transform: translateX(-50%) translateY(-12px); }

.rail__item.is-disabled { opacity: .45; cursor: default; }
.rail__user { margin-top: auto; display: flex; align-items: center;
  gap: 9px; padding: 14px 10px 4px; border-top: 1px solid var(--line); }
.rail__avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent); font-family: var(--font-label); font-size: 12px; font-weight: 700; }
.rail__user-meta { flex: 1; min-width: 0; }
.rail__user-name { font-size: 12.5px; font-weight: var(--w-semibold); color: var(--ink); }
.rail__user-sub { font-size: 10.5px; color: var(--sub); }
.rail__signout-form { margin: 0; }
.rail__signout { background: transparent; border: none; color: var(--sub); cursor: pointer; font-size: 16px; }
.rail__signout:hover { color: var(--accent); }
.muted-link, .slug-chip { font-size: 12px; color: var(--muted); }
.slug-chip { font-family: var(--font-label); background: var(--surface-2); padding: 5px 10px; border-radius: var(--radius); border: 1px solid var(--line); }

.card__actions { margin-top: 10px; }
.card__promote button, .card__promote { width: 100%; }
.card__promote { padding: 8px; border: 1px solid var(--ink); background: var(--ink); color: var(--cream);
  border-radius: 6px; font-size: 11px; font-weight: 600; letter-spacing: .04em; cursor: pointer; font-family: inherit; }
.card__open { display: block; text-align: center; padding: 8px; border: 1px solid var(--line); border-radius: 6px;
  font-size: 11px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.card__promote form { margin: 0; }

/* ====================================================================
   Sign-in
   ==================================================================== */
.signin { min-height: 100vh; display: grid; place-items: center; background: var(--cream); padding: 24px; }
.signin__card { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 44px 40px;
  width: 380px; text-align: center; box-shadow: 0 18px 50px rgba(26,23,20,.08); }
.signin__card .logo { margin-bottom: 24px; }
.signin__title { font-family: var(--serif); font-weight: 300; font-size: 30px; margin: 0; }
.signin__sub { font-size: 14px; color: var(--muted); margin: 8px 0 28px; line-height: 1.5; }
.signin__google, .signin__dev { width: 100%; padding: 13px; border-radius: 8px; cursor: pointer; font-family: inherit;
  font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 10px; }
.signin__google { background: var(--ink); color: var(--cream); border: none; }
.signin__google .g { background: #fff; color: var(--ink); width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--serif); font-size: 13px; }
.signin form { margin: 10px 0 0; }
.signin__dev { background: transparent; border: 1px dashed var(--line); color: var(--muted); }
.signin__foot { font-size: 11px; color: var(--muted); margin: 22px 0 0; line-height: 1.5; }

/* ====================================================================
   Project workspace
   ==================================================================== */
.proj-hero-wrap { padding: 18px 32px 0; }
.proj-hero { background: #fff; border: 1px solid var(--line-2); border-radius: 10px; padding: 18px 22px;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr; gap: 24px; align-items: center; }
.proj-hero__status { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.proj-hero__status .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.proj-hero__event { font-family: var(--serif); font-size: 22px; margin-top: 6px; }
.proj-hero__sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.proj-stat .l { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); display: block; }
.proj-stat .v { font-family: var(--serif); font-size: 18px; display: block; margin-top: 4px; }
.proj-stat .s { font-size: 10.5px; color: var(--muted); display: block; margin-top: 3px; }
.proj-flags { display: flex; flex-direction: column; gap: 6px; }
.flag-toggle { padding: 6px 10px; border-radius: 999px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
  border: 1px solid var(--line); background: #fff; color: var(--muted); cursor: pointer; font-family: inherit; }
.flag-toggle.is-on { background: #eaf1e6; color: #5a8060; border-color: #cfe0c8; }
.proj-flags form { margin: 0; }

/* Lifecycle stage picker — a compact dropdown in the project header. */
.stage-form { margin: 0; }
.stage-select { padding: 7px 30px 7px 12px; border-radius: 999px; border: 1px solid var(--ink); background: var(--ink);
  color: var(--cream); font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23f4ece0' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }
.stage-select:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 2px; }

.proj-tabs { padding: 20px 32px 0; border-bottom: 1px solid var(--line-2); display: flex; gap: 24px; align-items: center; }
.proj-tab { padding: 10px 2px 14px; font-size: 13px; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.proj-tab.is-on { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
.proj-tab .c { font-size: 11px; color: var(--muted); }
/* Unread client replies waiting on the After tab — accent pill, not a muted count. */
.proj-tab .c--unread { display: inline-block; min-width: 16px; padding: 1px 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; text-align: center; line-height: 1.4; }
.proj-tabs__meta { margin-left: auto; font-size: 11px; color: var(--muted); }
.proj-body { padding: 20px 32px 48px; }
.proj-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: start; }
.proj-col { display: flex; flex-direction: column; gap: 24px; }

.panel { background: #fff; border: 1px solid var(--line-2); border-radius: 10px; padding: 18px 20px; margin-bottom: 16px; }
.panel__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.panel__eyebrow { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.panel__h { font-family: var(--serif); font-weight: 400; font-size: 20px; margin: 0; }
.panel__quote { font-size: 13.5px; line-height: 1.7; color: var(--ink-2); font-style: italic; padding: 4px 0 14px; }
.panel__empty { font-size: 12px; color: var(--muted); font-style: italic; padding: 10px 0; }
.panel__hint { font-size: 11.5px; color: var(--muted); margin: 10px 0 0; }

.kv > div { display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line-2); }
.kv dt { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0; }
.kv dd { font-size: 13px; color: var(--ink-2); margin: 0; line-height: 1.5; }

.timeline { position: relative; padding-left: 8px; }
.timeline__row { display: grid; grid-template-columns: 14px 56px 1fr; gap: 8px; align-items: baseline; padding: 7px 0; position: relative; }
.timeline__dot { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; }
.timeline__row.is-done .timeline__dot { background: var(--ink); border: none; }
.timeline__row.is-now .timeline__dot { background: var(--accent); border: none; }
.timeline__row.is-soon .timeline__dot { border: 2px solid var(--accent); }
.timeline__date { font-size: 10.5px; color: var(--muted); letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.timeline__title { font-size: 13.5px; color: var(--ink); }
.timeline__row.is-done .timeline__title { color: var(--muted); text-decoration: line-through; }
.timeline__flag { font-size: 9px; padding: 2px 6px; background: #fff3e0; color: var(--accent); border-radius: 3px; font-weight: 700; text-transform: uppercase; }
.timeline__now { font-size: 9px; padding: 2px 6px; background: var(--accent); color: #fff; border-radius: 3px; font-weight: 700; text-transform: uppercase; }
.timeline__sub { grid-column: 3; font-size: 11.5px; color: var(--muted); }

.log-form { display: flex; gap: 8px; margin-bottom: 12px; }
.log-form__input { flex: 1; padding: 9px 12px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; font-family: inherit; }
.log-form__btn { padding: 9px 14px; border: 1px solid var(--line); background: var(--ink); color: var(--cream); border-radius: 6px; font-size: 12px; cursor: pointer; font-family: inherit; }
.log-row { display: grid; grid-template-columns: 120px 1fr; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line-2); }
.log-row__when { font-size: 11px; color: var(--muted); }
.log-row__body { font-size: 13px; line-height: 1.55; color: var(--ink-2); }

.asset-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.asset-grid.sm { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.lib__grid-wrap .asset-grid { grid-template-columns: repeat(5, 1fr); }
.asset { border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; background: #fff; }
.asset__img { position: relative; aspect-ratio: 1/1; background: #1a1714; }
.asset__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.asset__filechip { width: 100%; height: 100%; display: grid; place-items: center; color: var(--cream); background: #2a241f; font-size: 11px; padding: 8px; text-align: center; }
.asset__star { position: absolute; top: 6px; right: 8px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.asset__type { position: absolute; top: 8px; left: 8px; font-size: 9px; padding: 3px 7px; border-radius: 3px; color: #fff; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.asset__share { position: absolute; bottom: 40px; left: 8px; font-size: 9px; padding: 2px 6px; border-radius: 3px; background: rgba(255,255,255,.9); color: var(--ink); font-weight: 600; }
.asset__foot { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 8px; background: linear-gradient(to top, rgba(0,0,0,.78), transparent); color: #fff; }
.asset__proj { font-size: 11px; font-weight: 600; }
.asset__edit { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px; align-items: center; }
.asset__sel { font-size: 11px; padding: 5px 6px; border: 1px solid var(--line); border-radius: 5px; font-family: inherit; }
.asset__check { font-size: 10.5px; color: var(--muted); display: flex; align-items: center; gap: 3px; }
.asset__save { font-size: 11px; padding: 5px 10px; background: var(--ink); color: var(--cream); border: none; border-radius: 5px; cursor: pointer; font-family: inherit; }
.asset__del { width: 100%; padding: 6px; background: transparent; border: none; border-top: 1px solid var(--line-2); color: var(--muted); font-size: 11px; cursor: pointer; font-family: inherit; }
.asset__del form, .asset .asset__del { margin: 0; }

.upload-form { display: flex; flex-direction: column; gap: 12px; padding: 14px; background: var(--cream); border-radius: 10px; }
.upload-form__meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.upload-form__sel { padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; font-family: inherit; background: #fff; }
.upload-form__check { font-size: 12px; color: var(--ink-2); display: flex; align-items: center; gap: 4px; }
.upload-form__btn { padding: 8px 16px; background: var(--ink); color: var(--cream); border: none; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }

/* ---- Branded upload zone (Files tab) ---------------------------------- */
.dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center; padding: 26px 20px; border: 1.5px dashed var(--line);
  border-radius: 10px; background: #fff; cursor: pointer; transition: border-color .12s, background .12s; }
.dropzone:hover { border-color: var(--accent-2); background: var(--paper); }
.dropzone.is-over { border-color: var(--accent); background: #fbf1ea; }
.dropzone.is-filled { border-style: solid; border-color: #cfe0c8; background: #f3f7f0; }
.dropzone__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dropzone__icon { color: var(--muted); line-height: 0; }
.dropzone.is-over .dropzone__icon { color: var(--accent); }
.dropzone__prompt { display: flex; flex-direction: column; gap: 3px; }
.dropzone__title { font-size: 14px; font-weight: 600; color: var(--ink); }
.dropzone__hint { font-size: 11.5px; color: var(--muted); }
.dropzone__status { font-size: 13px; font-weight: 600; color: #5a8060; padding: 2px 0; }
/* Client-side thumbnails of the picked images, before the upload is submitted. */
.dropzone__preview { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; position: relative; z-index: 1; }
.dropzone__thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line-2); box-shadow: var(--shadow-1); }
.dropzone__mob { display: none; }
@media (max-width: 768px) {
  .dropzone { padding: 22px 16px; }
  .dropzone__desk { display: none; }
  .dropzone__mob { display: inline; }
  .upload-form__btn { flex: 1; padding: 11px 16px; }
}

.msg-form { display: flex; flex-direction: column; gap: 10px; }
.msg-form__input { padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; font-family: inherit; width: 100%; box-sizing: border-box; }
.msg-form__btn { align-self: flex-start; padding: 11px 18px; background: var(--accent); color: #fff; border: none; border-radius: 6px; font-size: 12px; font-weight: 600; letter-spacing: .06em; cursor: pointer; font-family: inherit; }

/* Photo picker in the client-update composer — tick photos to embed in the email. */
.photo-pick__label { font-size: 12px; color: var(--ink-soft, #6b6157); margin-bottom: 6px; }
.photo-pick__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.photo-pick__item { position: relative; display: block; cursor: pointer; aspect-ratio: 1; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); }
.photo-pick__thumb { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .12s; }
.photo-pick__check { position: absolute; top: 6px; left: 6px; z-index: 2; width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }
.photo-pick__item:has(.photo-pick__check:checked) { outline: 2px solid var(--accent); outline-offset: -2px; }
.photo-pick__item:has(.photo-pick__check:not(:checked)) .photo-pick__thumb { opacity: .65; }
@media (max-width: 520px) { .photo-pick__grid { grid-template-columns: repeat(3, 1fr); } }
.sent-row { padding: 10px 0; border-top: 1px solid var(--line-2); }
.sent-row__subj { font-size: 13px; font-weight: 500; }
.sent-row__meta { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* Comm tab — the project ↔ client email conversation. */
.thread { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.thread__msg { max-width: 85%; padding: 10px 13px; border-radius: 12px; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.thread__msg--outbound { align-self: flex-end; background: var(--ink); color: var(--cream); border-bottom-right-radius: 3px; }
.thread__msg--inbound  { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 3px; }
.thread__meta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; font-size: 11px; opacity: .8; }
.thread__who { font-weight: 600; }
.thread__time { margin-left: auto; }
.thread__flag { color: var(--accent); font-weight: 600; }
.thread__msg--outbound .thread__flag { color: var(--accent-2); }
.thread__subj { font-size: 11px; font-weight: 600; letter-spacing: .03em; opacity: .75; margin-bottom: 4px; }
.thread__body p { margin: 0 0 6px; }
.thread__body p:last-child { margin-bottom: 0; }
.thread__photos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.thread__photo { width: 84px; height: 84px; object-fit: cover; border-radius: 6px; }

/* Projects index */
.proj-index { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 24px 32px 48px; }
.proj-card { background: #fff; border: 1px solid var(--line-2); border-radius: 10px; padding: 18px; text-decoration: none; color: var(--ink); display: block; }
.proj-card__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.proj-card__status { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: var(--cream); color: var(--accent); }
.proj-card__days { font-size: 11px; color: var(--muted); }
.proj-card__name { font-family: var(--serif); font-size: 22px; }
.proj-card__meta { font-size: 12px; color: var(--muted); margin: 4px 0 12px; }
.proj-card__foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; border-top: 1px solid var(--line-2); padding-top: 10px; }
.proj-card__total { font-family: var(--serif); font-size: 17px; }
.proj-card__flag { font-size: 10px; padding: 3px 8px; background: #eaf1e6; color: #5a8060; border-radius: 4px; }
.proj-card__slug { margin-left: auto; font-family: ui-monospace, monospace; font-size: 10px; color: var(--muted); }

/* Library */
.lib { display: grid; grid-template-columns: 220px 1fr; min-height: calc(100vh - 90px); }
.lib__rail { padding: 20px 18px; border-right: 1px solid var(--line-2); background: #fbf9f3; }
.lib__section { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin: 18px 6px 8px; }
.lib__item { display: block; padding: 7px 8px; border-radius: 5px; font-size: 12.5px; color: var(--ink-2); text-decoration: none; }
.lib__item.sm { font-size: 12px; }
.lib__item.is-on { background: var(--ink); color: var(--cream); font-weight: 600; }
.lib__grid-wrap { padding: 20px 28px 60px; }

/* Unified lifecycle stepper wraps (8 stages now); build stages flagged subtly. */
.stage-stepper { row-gap: 8px; }
.stage-pill.is-build:not(.is-on) { border-style: dashed; }

/* ====================================================================
   Phone upload, QR panel, quick-add, tappable milestones
   ==================================================================== */

/* Tappable milestone rows (button reset, keep the grid) */
.timeline__form { margin: 0; }
button.timeline__row {
  width: 100%; background: none; border: none; font-family: inherit; text-align: left;
  cursor: pointer; border-radius: 6px;
}
button.timeline__row:hover { background: var(--cream); }
button.timeline__row .timeline__title { transition: color .1s; }

/* Files-tab top: upload form + scan panel side by side */
.files-top { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: stretch; }
.phone-panel { display: flex; gap: 14px; align-items: center; background: var(--ink); color: var(--cream);
  border-radius: 8px; padding: 14px 16px; max-width: 360px; }
.phone-panel .qr { background: #fff; border-radius: 6px; padding: 6px; flex: none; }
.phone-panel .qr svg { display: block; width: 100%; height: 100%; }
.phone-panel__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.phone-panel__txt strong { font-size: 13px; }
.phone-panel__txt span { font-size: 11.5px; color: rgba(245,239,230,.7); line-height: 1.4; }
.phone-panel__txt code { font-size: 10px; color: var(--accent-2); word-break: break-all; }
@media (max-width: 1100px) { .files-top { grid-template-columns: 1fr; } .phone-panel { max-width: none; } }

/* ---- Mobile photo upload page ---- */
.mobile-body { background: var(--cream); }
.mup { max-width: 520px; margin: 0 auto; padding: 18px 16px 40px; min-height: 100vh; }
.mup__head { display: flex; align-items: center; gap: 12px; padding: 8px 4px 18px; border-bottom: 1px solid var(--line); }
.mup__proj { min-width: 0; }
.mup__name { font-family: var(--serif); font-size: 20px; line-height: 1.1; }
.mup__sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.mup__form { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.mup__big { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 96px; border-radius: 14px; font-size: 18px; font-weight: 600; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.mup__big--camera { background: var(--ink); color: var(--cream); }
.mup__big--library { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.mup__file { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.mup__opts { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px;
  font-size: 14px; color: var(--ink-2); flex-wrap: wrap; }
.mup__opts select { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); font-family: inherit; font-size: 14px; }
.mup__share { display: flex; align-items: center; gap: 6px; }
.mup__hint { font-size: 12px; color: var(--muted); text-align: center; margin: 6px 0 0; }
.mup__recent { margin-top: 28px; }
.mup__recent-h { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.mup__recent-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mup__thumb { aspect-ratio: 1/1; border-radius: 10px; overflow: hidden; background: #e8ddc8; }
.mup__thumb img { width: 100%; height: 100%; object-fit: cover; }
.mup__back { display: inline-block; margin-top: 28px; font-size: 14px; color: var(--ink-2); text-decoration: none; }

/* ---- Quick-add inquiry form ---- */
.quickadd { max-width: 760px; padding: 24px 32px 48px; }
.quickadd__lead { font-size: 14px; color: var(--muted); margin: 0 0 20px; }
.quickadd__form { background: #fff; border: 1px solid var(--line-2); border-radius: 12px; padding: 24px; }
.quickadd__row { display: flex; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.quickadd__row label, .quickadd__full { display: flex; flex-direction: column; gap: 5px; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted); flex: 1; min-width: 120px; }
.quickadd__full { margin-bottom: 16px; }
.quickadd input, .quickadd select, .quickadd textarea {
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; font-family: inherit; font-size: 14px;
  color: var(--ink); background: #fff; text-transform: none; letter-spacing: normal; }
.quickadd__products { border: none; padding: 0; margin: 0 0 18px; }
.quickadd__products legend { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 0 0 8px; }
.quickadd__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.quickadd__chip input { position: absolute; opacity: 0; }
.quickadd__chip span { display: inline-block; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 12px; cursor: pointer; color: var(--ink-2); background: #fff; }
.quickadd__chip input:checked + span { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.quickadd__actions { display: flex; align-items: center; gap: 16px; }

/* ---- Products catalog (admin curation) ---- */
.prod-wrap { padding: 24px 32px 48px; }
.prod-lead { font-size: 14px; color: var(--muted); margin: 0 0 22px; max-width: 720px; }
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.prod-card { background: #fff; border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.prod-card__img { position: relative; aspect-ratio: 4/3; background: #e8ddc8; }
.prod-card__img img { width: 100%; height: 100%; object-fit: cover; }
.prod-card__noimg { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.prod-card__cat { position: absolute; top: 10px; left: 10px; font-size: 9px; padding: 4px 9px; border-radius: 999px;
  background: rgba(26, 23, 20, .82); color: var(--cream); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.prod-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.prod-card__name { margin: 0; font-size: 16px; color: var(--ink); }
.prod-card__blurb { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.prod-card__act { display: flex; gap: 8px; margin-top: auto; padding-top: 6px; }
.btn--sm { padding: 6px 12px; font-size: 12px; }
/* Public-visibility toggle in the product form. */
.prod-form__pub { display: flex; gap: 10px; align-items: flex-start; background: #fbf9f3; border: 1px solid var(--line-2);
  border-radius: 10px; padding: 12px 14px; margin: 2px 0 4px; cursor: pointer; }
.prod-form__pub input { margin-top: 3px; flex: 0 0 auto; }
.prod-form__pub strong { display: block; font-size: 13.5px; color: var(--ink); }
.prod-form__pub .hint { display: block; font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 2px; }

/* Collapsible SEO tips on the product form. */
.seo-tips { background: var(--paper); border: 1px solid var(--line-2); border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0; margin: 0 0 18px; overflow: hidden; }
.seo-tips > summary { display: flex; align-items: center; gap: 9px; padding: 12px 16px; cursor: pointer;
  font-size: 13.5px; color: var(--ink-2); list-style: none; user-select: none; }
.seo-tips > summary::-webkit-details-marker { display: none; }
.seo-tips > summary strong { color: var(--ink); font-weight: 600; }
.seo-tips__icon { display: inline-flex; flex: 0 0 auto; color: var(--accent-deep); }
.seo-tips[open] > summary { border-bottom: 1px solid var(--line-2); }
.seo-tips__list { margin: 0; padding: 12px 18px 14px 34px; display: flex; flex-direction: column; gap: 9px; }
.seo-tips__list li { font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.seo-tips__list strong { color: var(--ink); font-weight: 600; }
.seo-tips__list code { font-family: var(--mono, monospace); font-size: 11.5px; background: var(--cream-2);
  padding: 1px 5px; border-radius: 4px; color: var(--ink-2); }

/* Status badges on catalog cards (stacked, top-right) + archived dimming. */
.prod-card__badges { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column;
  align-items: flex-end; gap: 5px; }
.prod-card__vis { font-size: 9px; padding: 3px 8px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .09em; font-weight: 700; }
.prod-card__vis.is-public { background: #eef3ee; color: #5a8060; }
.prod-card__vis.is-hidden { background: rgba(26, 23, 20, .72); color: var(--cream); }
.prod-card__vis.is-rental { background: var(--accent-soft); color: var(--accent-deep); }
.prod-card.is-archived { opacity: .72; }
.prod-card.is-archived .prod-card__img { filter: grayscale(.4); }

/* At-a-glance filter chips on the products index (visibility + rentals). */
.prod-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.prod-filters__label { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
  font-weight: 700; margin-right: 2px; }
.prod-filters__sep { width: 1px; align-self: stretch; min-height: 18px; background: var(--line-2); margin: 0 4px; }
.prod-chip { font-size: 12.5px; padding: 5px 13px; border-radius: 999px; border: 1px solid var(--line-2);
  background: #fff; color: var(--ink-2); text-decoration: none; line-height: 1.2; transition: background .12s, border-color .12s; }
.prod-chip:hover { border-color: var(--accent); }
.prod-chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.prod-chip--rental.is-on { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }

/* Current-photos strip in the product form — each thumb has a delete chip. */
.prod-form__photos { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 6px; }
.prod-form__photo { position: relative; width: 84px; height: 84px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.prod-form__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prod-form__photodel { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; padding: 0; border: none; cursor: pointer;
  border-radius: 999px; background: rgba(26, 23, 20, .8); color: #fff; font-size: 12px; line-height: 22px; }
.prod-form__photodel form, .prod-form__photodel { display: inline; }

/* Internal documents — admin-only working files on a product. */
.prod-docs { background: #fff; border: 1px solid var(--line-2); border-radius: 12px; padding: 18px 20px; margin-top: 22px; max-width: 680px; }
.prod-docs__h2 { font-size: 15px; margin: 0 0 4px; color: var(--ink); }
.prod-docs__hint { font-size: 12px; color: var(--muted); margin: 0 0 14px; line-height: 1.5; }
.prod-docs__hint strong { color: var(--accent); }
.prod-docs__meta { display: flex; gap: 8px; align-items: center; margin-top: 10px; }

/* ---- Shop settings: logo block ---- */
.settings-logo { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.settings-logo__fields { flex: 1; min-width: 220px; }
.settings-logo__preview { min-width: 160px; }
.settings-logo__preview img { max-width: 150px; max-height: 80px; background: #fff;
  border: 1px solid var(--line); border-radius: 8px; padding: 8px; object-fit: contain; }
.settings-logo__none { display: inline-block; font-size: 13px; color: var(--muted);
  padding: 20px 12px; border: 1px dashed var(--line); border-radius: 8px; }
.settings-logo__remove { display: flex; align-items: center; gap: 6px; margin-top: 8px;
  font-size: 12px; color: var(--accent); text-transform: none; letter-spacing: normal; }
.settings-logo__remove input { width: auto; }
.prod-docs__list { list-style: none; padding: 0; margin: 16px 0 0; }
.prod-docs__row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line-2); }
.prod-docs__badge { font-size: 9px; padding: 3px 7px; border-radius: 4px; background: var(--cream); color: var(--ink-2);
  text-transform: uppercase; letter-spacing: .08em; font-weight: 700; white-space: nowrap; }
.prod-docs__name { font-size: 13px; color: var(--ink); flex: 1; word-break: break-all; }
.prod-docs__del { margin-left: auto; background: transparent; border: 1px solid var(--line); border-radius: 6px;
  padding: 4px 10px; font-size: 11px; color: var(--muted); cursor: pointer; font-family: inherit; }
.prod-docs__empty { font-size: 13px; color: var(--muted); margin: 16px 0 0; }

/* Client portal — the project's catalog pieces, linking to public detail pages. */
.portal__pieces { display: flex; flex-direction: column; gap: 8px; }
.portal__piece { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 10px; text-decoration: none;
  color: var(--ink); background: #fff; border: 1px solid var(--line-2); }
.portal__piecethumb { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 8px; overflow: hidden; background: #e8ddc8; }
.portal__piecethumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portal__piecename { font-family: var(--serif); font-size: 16px; }

/* ---- Order type + schedule / logistics ---- */
.order-badge { font-size: 9px; padding: 3px 8px; border-radius: 999px; background: var(--cream); color: var(--ink-2);
  text-transform: uppercase; letter-spacing: .1em; font-weight: 700; margin-left: 10px; }
.order-badge.is-rental { background: #eef3ee; color: #5a8060; }

.sched { display: flex; gap: 8px; margin-bottom: 12px; }
.sched__step { flex: 1; background: var(--cream); border-radius: 8px; padding: 10px 12px; text-align: center; }
.sched__label { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.sched__date { font-family: var(--serif); font-size: 15px; margin-top: 4px; }
.sched__date.is-empty { color: var(--muted); }
.sched__note { font-size: 12.5px; color: var(--ink-2); background: #fff7ef; border: 1px solid #f0e2d2;
  border-radius: 6px; padding: 8px 12px; margin-bottom: 12px; }

.sched-facts { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0 0 12px; }
.sched-facts__item { display: flex; flex-direction: column; gap: 2px; }
.sched-facts dt { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.sched-facts dd { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.sched-facts dd a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.sched-facts dd a:hover { border-bottom-color: var(--ink); }
.sched-facts__multiline { white-space: pre-line; }

/* Brief panel — three layers labelled like the sched-edit eyebrows. */
/* Brief sections — each is a distinct inset block with a left stripe colour-coded
   by audience, so the four layers (inquiry / catalog / client-facing / internal)
   read as separate things rather than one wall of text. The stripe colour IS the
   meaning: accent = the client sees this, muted = internal only. */
.brief-section { padding: 12px 14px; margin-bottom: 10px; border-radius: 8px;
  background: var(--surface-2); border-left: 3px solid var(--line-2); }
.brief-section:last-of-type { margin-bottom: 0; }
.brief-section--inquiry { background: transparent; border-left-color: var(--line-2); }
.brief-section--internal { border-left-color: var(--sub); }
.brief-section--client { border-left-color: var(--accent); background: var(--accent-soft); }
.brief-section__label { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 6px; }
.brief-section__label .hint { text-transform: none; letter-spacing: normal; color: var(--muted); }
.brief-section__body { font-size: 13.5px; line-height: 1.65; color: var(--ink-2); }
.brief-section__body p { margin: 0 0 8px; } .brief-section__body p:last-child { margin-bottom: 0; }
.brief-section .panel__quote { padding: 0; }
.brief-section .panel__empty { padding: 0; }

/* In-place edit: the form reuses the brief-section blocks so editing writes
   over the same coloured layers you were just reading. */
.brief-section__field { width: 100%; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 6px; font-family: inherit; font-size: 13.5px; line-height: 1.6;
  color: var(--ink); background: #fff; resize: vertical; }
.brief-section__field:focus { outline: none; border-color: var(--accent); }
.brief-edit__actions { display: flex; gap: 10px; align-items: center; margin-top: 4px; }

/* Logistics card — 2-up split (Who left, When & where right) on desktop;
   stacks on mobile. Each block keeps its own Edit toggle for the part you're
   changing. The big date-strip cards are gone — event date lives in the hero. */
.panel.logistics { display: grid; grid-template-columns: 1fr 1fr; gap: 0; column-gap: 28px; }
.logistics__block { padding: 4px 0; min-width: 0; }
.logistics__block + .logistics__block { border-left: 1px solid var(--line-2); padding-left: 28px; }
.logistics__eyebrow { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.logistics__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.logistics__head .logistics__eyebrow { margin-bottom: 0; }
.logistics__block .sched-facts { margin-bottom: 4px; }
.logistics__block .sched-edit { border-top: 0; padding-top: 4px; margin-top: 6px; }
@media (max-width: 760px) {
  .panel.logistics { grid-template-columns: 1fr; }
  .logistics__block + .logistics__block { border-left: 0; padding-left: 0; border-top: 1px solid var(--line-2); margin-top: 14px; padding-top: 14px; }
}

.sched-edit { border-top: 1px solid var(--line-2); }
.sched-edit > summary { list-style: none; cursor: pointer; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); padding: 12px 0 2px; display: inline-flex; align-items: center; gap: 6px; }
.sched-edit > summary::-webkit-details-marker { display: none; }
.sched-edit > summary::before { content: "✎"; font-size: 12px; }
.sched-edit[open] > summary { color: var(--ink-2); margin-bottom: 4px; }
.sched-edit .sched-form { border-top: 0; padding-top: 4px; }

.sched-form { border-top: 1px solid var(--line-2); padding-top: 14px; }
.sched-form__row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.sched-form__row label, .sched-form__note { display: flex; flex-direction: column; gap: 4px; font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sched-form__row label { flex: 1; min-width: 110px; }
.sched-form__row label.is-muted { opacity: .5; }
.sched-form .hint { text-transform: none; letter-spacing: normal; color: var(--muted); }
.sched-form input, .sched-form select, .sched-form textarea { padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 6px; font-family: inherit; font-size: 13px; text-transform: none; letter-spacing: normal;
  color: var(--ink); background: #fff; }
.sched-form__note { margin-bottom: 12px; }

/* Delivery / pickup segmented toggle inside the schedule form. */
.seg { flex: 1; min-width: 110px; border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.seg legend { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 0; }
.seg__opts { display: flex; width: 100%; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
/* Beat `.sched-form__row label` (which would pin each option to min-width 110px
   and overflow the toggle) — these labels must shrink to share the row. */
.seg .seg__opt { flex: 1; min-width: 0; margin: 0; }
.seg__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg__opt span { display: block; text-align: center; padding: 8px 10px; font-size: 12px; cursor: pointer;
  background: #fff; color: var(--ink-2); text-transform: none; letter-spacing: normal; }
.seg__opt + .seg__opt span { border-left: 1px solid var(--line); }
.seg__opt input:checked + span { background: var(--ink); color: var(--cream); }
.seg__opt input:focus-visible + span { outline: 2px solid var(--ink-2); outline-offset: -2px; }
/* `label { display: flex }` outranks the UA [hidden] rule, so the toggle's
   inactive date field stays visible — force it hidden with matching specificity. */
.sched-form [hidden] { display: none; }

/* ---- Expiry / stale / lost ---- */
.card__stale { font-size: 10.5px; color: #9a6a2a; background: #fdf3e3; border: 1px solid #f0dcbf;
  border-radius: 4px; padding: 4px 7px; margin-bottom: 8px; font-weight: 600; }
.card__actions { display: flex; gap: 6px; align-items: center; }
.card__open { flex: 1; }
.card__expire { padding: 8px 10px; border: 1px solid var(--line); background: #fff; color: var(--muted);
  border-radius: 6px; font-size: 11px; cursor: pointer; font-family: inherit; }
.card__expire:hover { color: var(--accent); border-color: var(--accent); }
.card__expire form, .card__actions form { margin: 0; }

.lost-banner { margin: 16px 32px 0; padding: 12px 18px; background: #2a241f; color: var(--cream);
  border-radius: 8px; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.lost-banner__btn { margin-left: auto; padding: 6px 12px; background: var(--accent); color: #fff; border: none;
  border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; font-family: inherit; }
.lost-banner form { margin: 0; }
/* Junk is a quieter, greyer dead-end than a real lost lead. */
.lost-banner--junk { background: #3a3733; color: #cfc9c1; }

.lost { padding: 24px 32px 48px; }
.lost__lead { font-size: 14px; color: var(--muted); margin: 0 0 18px; }
.lost__row { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 20px; align-items: center;
  background: #fff; border: 1px solid var(--line-2); border-radius: 10px; padding: 16px 18px; margin-bottom: 10px; }
.lost__name { font-family: var(--serif); font-size: 19px; }
.lost__meta { font-size: 12px; color: var(--muted); margin: 3px 0 8px; }
.lost__reason { font-size: 13px; color: var(--ink-2); font-style: italic; }
.lost__when { font-size: 11px; color: var(--muted); margin-top: 3px; }
.lost__act { display: flex; gap: 8px; align-items: center; }
.lost__act form { margin: 0; }
/* Phone: the 3-column row stacks; actions go full-width so nothing bleeds. */
@media (max-width: 600px) {
  .lost { padding: 20px 16px 40px; }
  .lost__row { grid-template-columns: 1fr; gap: 10px; }
  .lost__act { width: 100%; }
  .lost__act .btn, .lost__act form { flex: 1; }
  .lost__act .btn { width: 100%; text-align: center; }
}

/* ====================================================================
   Client portal (PIN gate + unlocked) + admin portal panel + buckets
   ==================================================================== */
.portal { max-width: 520px; margin: 0 auto; padding: 18px 16px 48px; }
.portal--locked { display: grid; place-items: center; min-height: 100vh; }
.portal--quote { max-width: 600px; }
.portal--quote .pquote { margin-top: 18px; }
.portal__quotelink { text-align: center; margin: 18px 0 0; font-size: 13px; color: var(--muted); }

/* Layout wrappers vanish on phones (display:contents) so the stacked order and
   spacing stay byte-identical to the original single-column portal. On desktop
   they become a two-column grid: status rail on the right, content on the left. */
.portal__body, .portal__side, .portal__main { display: contents; }
@media (min-width: 760px) {
  /* Desktop: lift the portal onto a warm-paper "sheet" with an accent cap so it
     reads as a finished document rather than text floating on the page. */
  .portal { max-width: 1000px; margin: 32px auto 48px; padding: 8px 48px 60px;
    background: var(--surface); border: 1px solid var(--line-2); border-top: 4px solid var(--accent);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-2); }
  .portal__head { padding-top: 24px; }
  .portal__body { display: grid; grid-template-columns: minmax(0, 1fr) 300px;
    gap: 32px; align-items: start; }
  .portal__main { display: block; grid-column: 1; grid-row: 1; min-width: 0; }
  .portal__side { display: block; grid-column: 2; grid-row: 1; position: sticky; top: 24px; }
  .portal__main > :first-child, .portal__side > :first-child { margin-top: 0; }
  .portal__sched { flex-wrap: wrap; }
  .portal__sched .portal__schedstep { flex: 1 1 calc(50% - 4px); }
  .portal__grid { grid-template-columns: repeat(4, 1fr); }
  .portal__pieces { display: grid; grid-template-columns: 1fr 1fr; }
}
.portal__lockcard { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 40px 32px;
  text-align: center; width: 100%; max-width: 360px; }
.portal__locktitle { font-family: var(--serif); font-weight: 300; font-size: 26px; margin: 18px 0 6px; }
.portal__locksub { font-size: 14px; color: var(--muted); margin: 0 0 24px; line-height: 1.5; }
.portal__pinform { display: flex; flex-direction: column; gap: 10px; }
.portal__pininput { padding: 16px; font-size: 28px; text-align: center; letter-spacing: .4em;
  border: 1px solid var(--line); border-radius: 12px; font-family: inherit; }
.portal__pinbtn { padding: 14px; background: var(--ink); color: var(--cream); border: none; border-radius: 12px;
  font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit; }
.portal__lockfoot { font-size: 12px; color: var(--muted); margin: 20px 0 0; }

/* Header — a brand row (shop + "Project Portal" kicker so you know where you
   are) over a title row (project name + status). Works on phone and desktop. */
.portal__head { padding: 4px 4px 16px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.portal__brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.portal__logo { font-size: 15px; }
.portal__kicker { font-family: var(--font-label); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line-2); border-radius: var(--radius-pill); padding: 4px 11px; white-space: nowrap; }
.portal__title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.portal__name { font-family: var(--serif); font-weight: 400; font-size: 25px; line-height: 1.1; margin: 0; }
.portal__status { font-size: 12px; color: var(--accent); display: inline-flex; align-items: center; gap: 6px;
  text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
.portal__status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.portal__sched { display: flex; gap: 8px; margin: 18px 0; }
.portal__schedstep { flex: 1; background: #fff; border: 1px solid var(--line-2); border-radius: 10px; padding: 10px; text-align: center; }
.portal__schedstep .l { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.portal__schedstep .d { font-family: var(--serif); font-size: 15px; margin-top: 3px; }
.portal__schedstep .d.is-empty { color: var(--muted); }
.portal__upload { background: var(--ink); color: var(--cream); border-radius: 14px; padding: 20px; margin: 18px 0; }
.portal__h2 { font-family: var(--serif); font-weight: 400; font-size: 20px; margin: 0 0 4px; }
.portal__h2 span { font-size: 13px; color: var(--muted); font-family: var(--sans); }
.portal__upload .portal__h2 { color: var(--cream); }
.portal__hint { font-size: 13px; color: var(--muted); margin: 0 0 14px; }
.portal__brief { font-size: 14.5px; line-height: 1.65; color: var(--ink-2); margin: 0; }
.portal__brief p { margin: 0 0 10px; } .portal__brief p:last-child { margin-bottom: 0; }
.portal__upload .portal__hint { color: rgba(245,239,230,.6); }
.portal__form { display: flex; flex-direction: column; gap: 10px; }
.portal__bucket { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(245,239,230,.6);
  display: flex; flex-direction: column; gap: 5px; }
.portal__bucket select { padding: 10px; border-radius: 8px; border: none; font-family: inherit; font-size: 14px;
  text-transform: none; letter-spacing: normal; }
.portal__add { position: relative; display: flex; align-items: center; justify-content: center; min-height: 80px;
  background: rgba(245,239,230,.08); border: 1px dashed rgba(245,239,230,.3); border-radius: 12px;
  color: var(--cream); font-size: 16px; font-weight: 600; cursor: pointer; }
.portal__add input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.portal__section { margin: 24px 0; }

/* ---- Portal quote: review + approve / request changes / decline ---- */
.pquote { background: #fff; border: 1px solid var(--line-2); border-radius: 14px; padding: 18px; }
.pquote__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.pquote__head .portal__h2 { margin: 0; }
.pquote__banner { background: #faf5ea; border: 1px solid #ecdcb4; border-radius: 10px;
  padding: 12px 14px; margin-bottom: 14px; font-size: 14px; color: var(--ink); line-height: 1.5; }
.pquote__banner--ok { background: #e7efe2; border-color: #cfe0c4; color: #3d5a2e; }
.pquote__banner--muted { background: var(--cream-2); border-color: var(--line-2); color: var(--muted); }
.pquote__note { margin-top: 8px; font-style: italic; color: var(--ink-2); }
.pquote__doc { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; }
.pquote__download { text-align: center; margin: 14px 0 0; font-size: 13.5px; }
.pquote__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px;
  padding-top: 16px; border-top: 1px solid var(--line-2); }
.pquote__btn { display: inline-block; width: 100%; box-sizing: border-box; text-align: center;
  padding: 13px 16px; border-radius: 10px; border: 1px solid var(--line); background: #fff;
  color: var(--ink); font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.pquote__btn--approve { background: var(--accent); border-color: var(--accent); color: #fff; font-size: 16px; }
.pquote__btn--decline { background: #fff; border-color: #e0c4bd; color: var(--accent); }
.pquote__actions form { margin: 0; }
.pquote__more { border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; }
.pquote__more > summary { list-style: none; cursor: pointer; padding: 12px 14px; font-size: 14px;
  font-weight: 600; color: var(--ink-2); background: var(--cream-2); }
.pquote__more > summary::-webkit-details-marker { display: none; }
.pquote__more[open] > summary { border-bottom: 1px solid var(--line-2); }
.pquote__form { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.pquote__label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.pquote__opt { color: var(--line); }
.pquote__form textarea { width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid var(--line);
  border-radius: 8px; font-family: inherit; font-size: 15px; color: var(--ink); resize: vertical; line-height: 1.5; }
.portal__h3 { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 8px; display: flex; align-items: center; gap: 6px; }
.portal__h3 span { font-family: var(--sans); letter-spacing: 0; }
.portal__group { margin: 14px 0; }
.portal__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.portal__tile { margin: 0; }
.portal__thumb { display: block; width: 100%; aspect-ratio: 1/1; border-radius: 10px; overflow: hidden;
  background: #e8ddc8; padding: 0; border: none; cursor: pointer; }
.portal__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portal__thumb--doc { text-decoration: none; }
.portal__file { width: 100%; height: 100%; display: grid; place-items: center; gap: 2px; font-size: 22px; color: var(--muted); }
.portal__file span { font-size: 9px; padding: 0 4px; text-align: center; word-break: break-word; }
.portal__file em { font-size: 9px; font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.portal__cap { font-size: 11px; color: var(--muted); margin: 4px 2px 0; line-height: 1.35; }

/* Empty-state cards so sections stay visible before there's any data. */
.portal__empty { background: #fff; border: 1px dashed var(--line); border-radius: 12px;
  padding: 18px; font-size: 13px; color: var(--muted); line-height: 1.5; text-align: center; }

/* Read-only progress timeline. */
.portal__timeline { list-style: none; margin: 0; padding: 0; }
.portal__step { display: flex; align-items: flex-start; gap: 12px; padding: 0 0 16px; position: relative; }
.portal__step::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: -2px; width: 2px; background: var(--line); }
.portal__step:last-child::before { display: none; }
.portal__stepdot { flex: 0 0 12px; width: 12px; height: 12px; border-radius: 50%; margin-top: 2px;
  background: #fff; border: 2px solid var(--line); position: relative; z-index: 1; }
.portal__step.is-done .portal__stepdot { background: var(--accent); border-color: var(--accent); }
.portal__step.is-now .portal__stepdot { background: var(--ink); border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(20,20,20,.12); }
.portal__steptitle { font-size: 14px; }
.portal__step.is-todo .portal__steptitle { color: var(--muted); }
.portal__stepsub { font-size: 12px; color: var(--muted); margin-top: 1px; }
.portal__stepdate { margin-left: auto; font-size: 11px; color: var(--muted); white-space: nowrap; padding-top: 1px; }

/* Full-screen photo viewer. */
.portal__lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(20,18,16,.92);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; }
.portal__lightbox[hidden] { display: none; }
.portal__lightbox img { max-width: 100%; max-height: 80vh; border-radius: 8px; object-fit: contain; }
.portal__lbcap { color: rgba(245,239,230,.85); font-size: 13px; text-align: center; margin: 0; max-width: 520px; }
.portal__lbclose { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%;
  border: none; background: rgba(245,239,230,.15); color: var(--cream); font-size: 18px; cursor: pointer; }

.portal__foot { text-align: center; font-family: var(--font-label); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); }

/* "Made with OurWorkshop" badge — sits under the shop name in the portal/quote
   footer. Tasteful and quiet (it flatters the shop, doesn't compete with it),
   but warms to the accent on hover so the curious can find their way to us. */
.madewith { display: inline-block; margin-top: 8px; font-family: var(--font-label); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted); opacity: .8; text-decoration: none; transition: color .12s, opacity .12s; }
.madewith:hover { color: var(--ink); opacity: 1; }
/* Keep the wordmark monochrome — it's OUR brand, so it shouldn't borrow the
   tenant's accent. Distinguish it by weight, not colour. */
.madewith__brand, .madewith__brand b { font-weight: 700; color: inherit; }

.portal-panel { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--cream); border: 1px solid var(--line-2); border-radius: 10px; padding: 14px 16px; margin: 14px 0; }
.portal-panel__label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.portal-panel__url { font-size: 12px; color: var(--ink-2); word-break: break-all; }
.portal-panel__pin { font-size: 13px; margin-top: 4px; }
.portal-panel__pin strong { font-size: 16px; letter-spacing: .12em; }
.portal-panel__act form { margin: 0; }
/* On a phone the row crushes the button into a tall sliver — stack it and let
   the email button go full width below the link + PIN. */
@media (max-width: 480px) {
  .portal-panel { flex-direction: column; align-items: stretch; gap: 12px; }
  .portal-panel__act form, .portal-panel__act .btn { width: 100%; }
}

.bucket { margin-top: 18px; }
.bucket__head { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line-2); }
.bucket__head span { color: var(--ink-2); margin-left: 4px; }

.lib__item .lib__hint { float: right; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.lib__item.is-on .lib__hint { color: rgba(245,239,230,.55); }

/* ======================================================================
 * Internal admin (workshop) — responsive layer.
 * The app is desktop-built but used at the dinner table on a phone, so the
 * fixed side rail becomes an app-style bottom tab bar and every desktop
 * grid (kanban, KPIs, project workspace, library) collapses to a single
 * scrollable column. Desktop (>1024px) is untouched.
 * ====================================================================== */

/* ---- Tablet / small laptop: tighten padding, fewer columns ------------ */
@media (max-width: 1024px) {
  .topbar { padding: 18px 20px; }
  .kpis { grid-template-columns: repeat(3, 1fr); padding: 16px 20px 0; }
  .board-wrap, .proj-body, .proj-index, .contact-wrap { padding-left: 20px; padding-right: 20px; }
  .proj-hero-wrap, .stage-stepper, .proj-tabs, .lib__grid-wrap { padding-left: 20px; padding-right: 20px; }
  .proj-index { grid-template-columns: repeat(2, 1fr); }
  .proj-hero { grid-template-columns: 1fr 1fr; row-gap: 16px; }
  .proj-cols { grid-template-columns: 1fr; }
  .asset-grid, .lib__grid-wrap .asset-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Phone / small tablet: bottom tab bar + single column ------------- */
@media (max-width: 768px) {
  /* iOS Safari auto-zooms when you focus a text control whose font-size is
     under 16px, and doesn't always zoom back out. One app-wide rule so every
     form field is immune — no need to remember it per-form. !important because
     many fields set their own <16px size at higher specificity; this must win.
     Excludes buttons/checkboxes/radios/file (they don't zoom) and the portal
     PIN field (intentionally large at 28px). */
  input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]):not(.portal__pininput),
  textarea, select { font-size: 16px !important; }

  /* Shell: one column; leave room at the bottom for the fixed tab bar. */
  .admin { grid-template-columns: 1fr; }
  .main { padding-bottom: 72px; }

  /* Side rail → fixed bottom tab bar. Keep only the workspace links. */
  .rail {
    position: fixed; inset: auto 0 0 0; top: auto;
    height: auto; width: 100%; z-index: 100;
    display: flex; flex-direction: row; gap: 4px; overflow: visible;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line); border-right: none;
    box-shadow: 0 -2px 12px rgba(40, 30, 15, .06);
  }
  .rail__brand, .rail__section, .rail__user, .rail__item.is-disabled { display: none; }
  .rail__item {
    flex: 1; flex-direction: column; gap: 3px; justify-content: center;
    margin: 0; padding: 8px 4px; position: relative; font-size: 11px; text-align: center;
  }
  .rail__item .ic { width: auto; font-size: 17px; opacity: 1; }
  .rail__item .label { flex: none; }
  .rail__badge { position: absolute; top: 4px; right: 22px; }

  /* Topbar stacks; the (non-functional) search is dropped on phones. */
  .topbar { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; }
  .topbar__title { font-size: 26px; }
  .topbar__actions { width: 100%; flex-wrap: wrap; }
  .search { display: none; }

  .kpis { grid-template-columns: repeat(2, 1fr); padding: 14px 16px 0; }

  /* Kanban: stack the columns vertically instead of a 1300px scroll. */
  .board-wrap { padding: 16px 16px 32px; overflow-x: visible; }
  .board { grid-template-columns: 1fr; min-width: 0; gap: 12px; }
  .col { min-height: 0; }

  /* Project workspace: everything to one column. */
  .proj-hero-wrap, .stage-stepper, .proj-body, .contact-wrap { padding-left: 16px; padding-right: 16px; }
  .proj-hero { grid-template-columns: 1fr; gap: 16px; }
  .proj-tabs { padding: 14px 16px 0; gap: 18px; overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; }
  .proj-tabs__meta { display: none; }
  .proj-index { grid-template-columns: 1fr; padding: 16px; }
  .log-form { flex-wrap: wrap; }

  .asset-grid, .asset-grid.sm, .lib__grid-wrap .asset-grid { grid-template-columns: repeat(2, 1fr); }

  /* Library: the filter rail becomes a compact chip area above the grid. */
  .lib { grid-template-columns: 1fr; min-height: 0; }
  .lib__rail { border-right: none; border-bottom: 1px solid var(--line-2); padding: 14px 16px; }
  .lib__item { display: inline-block; }
  .lib__grid-wrap { padding: 16px; }

  /* Products catalog: full-width padding, single-column grid on phones. */
  .prod-wrap { padding: 16px 16px 32px; }
  .prod-grid { grid-template-columns: 1fr; }

  /* Sign-in card fits a 375px screen. */
  .signin { padding: 16px; }
  .signin__card { width: 100%; max-width: 380px; padding: 32px 24px; }
}

/* ====================================================================== */
/* Quotes                                                                  */
/* ====================================================================== */

/* Status chips */
.qstatus { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  padding: 4px 9px; border-radius: 999px; background: var(--cream-2); color: var(--ink-2); white-space: nowrap; }
.qstatus--draft      { background: var(--cream-2); color: var(--muted); }
.qstatus--sent       { background: #e9eef0; color: #3a5a6a; }
.qstatus--accepted   { background: #e7efe2; color: #4a6a3a; }
.qstatus--declined   { background: #f3e0db; color: var(--accent); }
.qstatus--changes_requested { background: #f5ecd6; color: #8a6a2c; }
.qstatus--superseded { background: #efe9df; color: #9a8f80; }

/* Client's portal response surfaced to the admin (changes request / decline note) */
.quote-feedback { border: 1px solid var(--line-2); border-left: 3px solid #c79a36; border-radius: 8px;
  padding: 12px 14px; margin: 0 0 18px; background: #faf5ea; }
.quote-feedback--declined { border-left-color: var(--accent); background: #f9efec; }
.quote-feedback p { margin: 6px 0 0; font-size: 14px; color: var(--ink); }
.quote-feedback p.muted { font-size: 12.5px; color: var(--muted); }

/* Action bar above the document / in the tab */
.quote-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 22px; }
.quote-actions form { margin: 0; }
/* Roomier than the dense default .btn — these sit alone under the big title. */
.quote-actions .btn { padding: 13px 20px; }

/* ---- Receipt callout (shown on an accepted quote) ---- */
.quote-receipt { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  align-items: center; background: var(--paper-2, #f6f1e8); border: 1px solid var(--line-2);
  border-radius: 10px; padding: 14px 16px; margin-bottom: 18px; }
.quote-receipt__main { flex: 1; min-width: 220px; }
.quote-receipt p.muted { margin: 4px 0 0; font-size: 12.5px; line-height: 1.55; }
.quote-receipt .quote-actions { margin-bottom: 0; }

/* ---- Draft editor form ---- */
.quote-form__errors { background: #f3e0db; color: var(--accent); border-radius: 6px;
  padding: 10px 14px; font-size: 12.5px; margin-bottom: 14px; }
.quote-form__meta { display: flex; flex-wrap: wrap; gap: 12px; }
.quote-form__meta label, .quote-form__intro {
  display: flex; flex-direction: column; gap: 4px; font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); }
.quote-form__meta label { flex: 1; min-width: 120px; }
.quote-form__intro { margin-top: 12px; }
.quote-form .hint { text-transform: none; letter-spacing: normal; color: var(--muted); }

/* Subtitle hints sit on their own line, making a label taller than its hint-less
   row-mates — which would push that field down and break the row's alignment.
   These rows already stretch every label to equal height, so anchoring the
   control to the bottom keeps fields aligned no matter how many caption lines a
   label has. Applies to every flex-column-label row that mixes hinted + plain. */
.quote-form__meta label > :is(input, select, textarea),
.sched-form__row label > :is(input, select, textarea),
.quickadd__row label > :is(input, select, textarea) { margin-top: auto; }
.quote-form input:not([type=submit]), .quote-form textarea, .quote-form select {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px;
  font-family: inherit; color: var(--ink); background: #fff; width: 100%; box-sizing: border-box; }
.quote-form textarea { resize: vertical; line-height: 1.5; }
.quote-form__addbtns { display: flex; gap: 8px; }

/* Line item rows */
.qlines { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.qline { display: grid; grid-template-columns: 18px 1fr 70px 90px 70px 110px 28px; gap: 10px;
  align-items: start; padding: 10px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--paper); }
.qline--note { grid-template-columns: 18px 1fr 28px; background: #fbf6ee; border-style: dashed; }
.qline[hidden] { display: none; } /* a row flagged for _destroy must actually hide; .qline's display:grid otherwise beats the [hidden] default */
.qline__disc { display: flex; flex-direction: column; gap: 3px;
  font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.qline__was { font-size: 11px; color: var(--muted); text-decoration: line-through; letter-spacing: 0; }
.qline__handle { color: var(--line); font-size: 14px; padding-top: 22px; text-align: center; cursor: default; }
.qline__desc { display: flex; flex-direction: column; gap: 3px; }
.qline__tag { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.qline__lbl { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.qline__desc-input { resize: vertical; min-height: 38px; }
.qline__qty, .qline__price { display: flex; flex-direction: column; gap: 3px;
  font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.qline__num { text-align: right; }
.qline__amount { display: flex; flex-direction: column; gap: 3px; align-items: flex-end;
  font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.qline__amount span[data-amount] { font-family: var(--serif); font-size: 15px; color: var(--ink); letter-spacing: 0; }
.qline__amount--note { color: var(--line); padding-top: 8px; }
.qline__rm { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 6px; border-radius: 4px; }
.qline__rm:hover { background: #f3e0db; color: var(--accent); }

/* Cost rows (internal BOM + shop time) — mirrors the quote line editor */
.cline { display: grid; grid-template-columns: 18px 1fr 80px 100px 110px 28px; gap: 10px;
  align-items: start; padding: 10px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--paper); }
.cline--labor { background: #f0f2ee; }
.cline[hidden] { display: none; } /* a row flagged for _destroy must actually hide; .cline's display:grid otherwise beats the [hidden] default */
.cline__handle { color: var(--line); font-size: 14px; padding-top: 22px; text-align: center; cursor: default; }
.cline__desc { display: flex; flex-direction: column; gap: 3px; }
.cline__tag { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--sage); font-weight: 700; }
.cline__lbl { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cline__desc-input { resize: vertical; min-height: 38px; }
.cline__qty, .cline__price { display: flex; flex-direction: column; gap: 3px;
  font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cline__num { text-align: right; }
.cline__amount { display: flex; flex-direction: column; gap: 3px; align-items: flex-end;
  font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.cline__amount span[data-amount] { font-family: var(--serif); font-size: 15px; color: var(--ink); letter-spacing: 0; }
.cline__rm { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 6px; border-radius: 4px; }
.cline__rm:hover { background: #f3e0db; color: var(--accent); }

/* Quote sample / reference gallery editor */
.qsamples__grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.qsamples__item { position: relative; width: 96px; height: 96px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line-2); }
.qsamples__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qsamples__rmform { position: absolute; top: 4px; right: 4px; margin: 0; }
.qsamples__rm { border: none; background: rgba(26,23,20,.72); color: #fff; width: 22px; height: 22px; border-radius: 999px;
  font-size: 11px; line-height: 1; cursor: pointer; padding: 0; }
.qsamples__rm:hover { background: var(--accent); }
.dropzone--sm { padding: 18px 16px; }
.qsamples__upload { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; margin-bottom: 16px; }
.qsamples__upload .dropzone { width: 100%; }
.qsamples__pickhead { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.qsamples__pickgrid { display: flex; flex-wrap: wrap; gap: 10px; }
.qsamples__pickform { margin: 0; }
.qsamples__pickitem { position: relative; width: 80px; height: 80px; padding: 0; border: 1px solid var(--line-2); border-radius: 8px;
  overflow: hidden; cursor: pointer; background: none; display: block; }
.qsamples__pickitem:hover { border-color: var(--ink-2); }
.qsamples__add { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(26,23,20,.55); color: #fff; font-size: 11px; opacity: 0; transition: opacity .12s; }
.qsamples__pickitem:hover .qsamples__add { opacity: 1; }

/* Quote sample gallery in the rendered document */
.qdoc__samples { margin: 8px 0 18px; }
.qdoc__samplegrid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.qdoc__sample { width: 130px; height: 130px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line-2); }
.qdoc__samplenote { margin: 8px 0 0; font-size: 11.5px; font-style: italic; color: var(--muted); line-height: 1.5; }

/* Live totals in the editor */
.qtotals { margin-left: auto; max-width: 320px; border-top: 1px solid var(--line); padding-top: 12px; }
.qtotals__row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; color: var(--ink-2); }
.qtotals__row--total { font-family: var(--serif); font-size: 19px; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px; }
.qtotals__row--muted { color: var(--muted); font-size: 12px; }
.quote-form__terms { font-size: 12.5px; }
.quote-form__actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.quote-form__actions .btn { width: auto; }
.quote-form__cancel { margin-left: 6px; font-size: 12px; color: var(--muted); text-decoration: none; }
.quote-form__cancel:hover { color: var(--ink); }

/* ---- Revision history ---- */
/* Quote tab: list-rail on the left, the chosen quote on the right. Collapses
   to a phone back-and-forth (list ⇄ detail) below 768px — see the media query. */
.quote-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
.quote-rail { background: #fff; border: 1px solid var(--line-2); border-radius: 10px; padding: 14px 16px; position: sticky; top: 20px; }
.quote-rail__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.quote-rail__head .panel__h { font-size: 18px; }
.quote-rail__list { display: flex; flex-direction: column; gap: 2px; }
.qrow { display: block; padding: 10px; border-radius: 8px; border: 1px solid transparent; text-decoration: none; color: var(--ink-2); }
.qrow:hover { background: var(--paper); }
.qrow.is-on { background: #fbf6ee; border-color: var(--line); }
.qrow__top { display: flex; align-items: center; gap: 8px; }
.qrow__v { font-family: var(--serif); font-size: 16px; color: var(--ink); }
.qrow__mid { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 3px 0; }
.qrow__bot { display: flex; align-items: baseline; justify-content: space-between; }
.qrow__total { font-family: var(--serif); font-size: 14px; color: var(--ink); }
.qrow__when { font-size: 11px; color: var(--muted); }
.quote-detail__back { display: none; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); text-decoration: none; margin-bottom: 12px; }
.quote-detail__back:hover { color: var(--ink); }

/* Phone: one pane at a time. The list shows by default; tapping a quote loads
   the detail (is-detail) and swaps the rail out for a back link. */
@media (max-width: 768px) {
  .quote-layout { grid-template-columns: 1fr; gap: 0; }
  .quote-rail { position: static; }
  .quote-layout:not(.is-detail) .quote-detail { display: none; }
  .quote-layout.is-detail .quote-rail { display: none; }
  .quote-layout.is-detail .quote-detail__back { display: inline-flex; }
}

.qhist { display: flex; flex-direction: column; }
.qhist__row { display: grid; grid-template-columns: 44px 100px 1fr auto 70px; gap: 12px; align-items: center;
  padding: 11px 6px; border-bottom: 1px solid var(--line-2); text-decoration: none; color: var(--ink-2); font-size: 13px; }
.qhist__row:last-child { border-bottom: none; }
.qhist__row:hover { background: var(--paper); }
.qhist__row.is-current { background: #fbf6ee; }
.qhist__v { font-family: var(--serif); font-size: 16px; color: var(--ink); }
.qhist__title { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qhist__total { font-family: var(--serif); font-size: 15px; }
.qhist__when { font-size: 11px; color: var(--muted); text-align: right; }

/* ====================================================================== */
/* The rendered quote document                                            */
/* ====================================================================== */
.qdoc { background: #fff; border: 1px solid var(--line-2); border-radius: 12px;
  padding: 40px 44px; max-width: 760px; margin: 0 auto; color: var(--ink); }
.qdoc__head { display: flex; justify-content: space-between; align-items: flex-start;
  padding-bottom: 22px; border-bottom: 2px solid var(--ink); margin-bottom: 24px; }
.qdoc__logo { font-family: var(--font-display); font-weight: var(--w-display); font-style: normal; font-size: 28px; line-height: 1; letter-spacing: -.02em; }
.qdoc__logo .dot { color: var(--accent); margin: 0 1px; }
.qdoc__brandword { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.qdoc__title { text-align: right; }
.qdoc__doctype { font-family: var(--serif); font-size: 24px; font-weight: 300; letter-spacing: .04em; }
.qdoc__num { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.qdoc__date, .qdoc__valid { font-size: 12px; color: var(--muted); margin-top: 3px; }
.qdoc__parties { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 22px; }
.qdoc__plabel { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.qdoc__pname { font-family: var(--serif); font-size: 17px; }
.qdoc__pline { font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.qdoc__pline--multiline { white-space: pre-line; }
.qdoc__intro { font-size: 14px; line-height: 1.65; color: var(--ink-2); margin: 0 0 22px;
  padding: 14px 18px; background: var(--paper); border-left: 3px solid var(--gold); border-radius: 0 6px 6px 0; }
.qdoc__intro span { display: block; }
.qdoc__table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-bottom: 8px; }
.qdoc__table thead th { text-align: left; font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; padding: 0 0 10px; border-bottom: 1px solid var(--line); }
.qdoc__table .c-qty, .qdoc__table .c-unit, .qdoc__table .c-amt { text-align: right; white-space: nowrap; width: 1%; padding-left: 18px; }
.qdoc__table tbody td { padding: 12px 0; border-bottom: 1px solid var(--line-2); vertical-align: top; line-height: 1.5; }
.qdoc__table tbody td.c-amt { font-family: var(--serif); font-size: 15px; }
.qdoc__note td { color: var(--muted); font-style: italic; }
.qdoc__note-tag { display: inline-block; font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); font-style: normal; font-weight: 700; margin-right: 8px; vertical-align: 1px; }
.qdoc__empty { color: var(--muted); font-style: italic; text-align: center; padding: 22px 0; }
.qdoc__foot { display: grid; grid-template-columns: 1fr 300px; gap: 32px; margin-top: 22px; align-items: start; }
.qdoc__terms { font-size: 11.5px; color: var(--muted); line-height: 1.6; }
.qdoc__terms span { display: block; }
.qdoc__totals { border-top: 2px solid var(--ink); padding-top: 12px; }
.qdoc__trow { display: flex; justify-content: space-between; font-size: 13.5px; padding: 5px 0; color: var(--ink-2); }
.qdoc__trow--total { font-family: var(--serif); font-size: 22px; color: var(--ink);
  border-top: 1px solid var(--line); margin-top: 6px; padding-top: 12px; }
.qdoc__trow--accent { color: var(--accent); font-weight: 600; }
.qdoc__trow--muted { color: var(--muted); font-size: 12px; }
.qdoc__trow--save { color: var(--accent); font-weight: 600; }
.qdoc__was { display: block; font-size: 11px; color: var(--muted); text-decoration: line-through; font-family: var(--serif); }
.qdoc__disc-tag { display: inline-block; font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; margin-left: 8px; vertical-align: 1px;
  background: color-mix(in oklch, var(--accent) 12%, transparent); padding: 2px 6px; border-radius: 3px; }
.qdoc__sign { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line-2);
  font-size: 12px; color: var(--muted); text-align: center; }

/* ---- Print: just the document ---- */
@media print {
  .rail, .topbar, .proj-tabs, .proj-hero-wrap, .stage-stepper, .quote-actions, .quote-rail, .quote-detail__back, .no-print, .toast { display: none !important; }
  .quote-layout { display: block !important; }
  .admin, .main, .proj-body { display: block !important; padding: 0 !important; background: #fff !important; }
  .qdoc { border: none; max-width: none; padding: 0; }
  body { background: #fff; }
}

/* ---- Mobile (375px gate) ---- */
@media (max-width: 768px) {
  .qline { grid-template-columns: 1fr 1fr; gap: 8px; }
  .qline__handle { display: none; }
  .qline__desc { grid-column: 1 / -1; }
  .qline--note { grid-template-columns: 1fr; }
  .qline__amount { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .qline__rm { position: absolute; }
  .qline { position: relative; padding-top: 30px; }
  .qline__rm { top: 6px; right: 6px; }

  .cline { grid-template-columns: 1fr 1fr; gap: 8px; position: relative; padding-top: 30px; }
  .cline__handle { display: none; }
  .cline__desc { grid-column: 1 / -1; }
  .cline__amount { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .cline__rm { position: absolute; top: 6px; right: 6px; }

  .qtotals { max-width: none; }

  .qdoc { padding: 24px 18px; }
  .qdoc__head { flex-direction: column; gap: 14px; }
  .qdoc__title { text-align: left; }
  .qdoc__parties { grid-template-columns: 1fr; gap: 16px; }
  .qdoc__foot { grid-template-columns: 1fr; gap: 20px; }
  .qdoc__table .c-unit { display: none; }

  .qhist__row { grid-template-columns: 38px 1fr auto; row-gap: 4px; }
  .qhist__title, .qhist__when { display: none; }
}

/* ====================================================================== */
/* Handbook (admin "how it works")                                         */
/* ====================================================================== */

.btn--ghost { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.btn--ghost:hover { color: var(--ink); border-color: var(--ink-2); }

.hb-stamp { font-size: 11px; color: var(--muted); letter-spacing: .04em; }

/* Layout: TOC rail + reading column */
.hb { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 28px;
  padding: 20px 32px 56px; align-items: start; }

.hb__toc { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 20px; }
.hb__tocitem { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border-radius: 9px;
  text-decoration: none; color: var(--ink-2); border: 1px solid transparent; }
.hb__tocitem:hover { background: #fff; border-color: var(--line-2); }
.hb__tocitem.is-on { background: var(--ink); border-color: var(--ink); }
.hb__tocitem.is-on .hb__toctitle, .hb__tocitem.is-on .hb__tocicon { color: var(--cream); }
.hb__tocitem.is-on .hb__tocblurb { color: rgba(245,239,230,.6); }
.hb__tocicon { font-size: 15px; line-height: 1.4; color: var(--muted); width: 18px; text-align: center; flex: none; }
.hb__toctext { display: flex; flex-direction: column; gap: 2px; }
.hb__toctitle { font-weight: 600; font-size: 13.5px; }
.hb__tocblurb { font-size: 11px; color: var(--muted); line-height: 1.4; }

/* The reading column */
.hb__page { background: #fff; border: 1px solid var(--line-2); border-radius: 12px;
  padding: 36px 44px 28px; max-width: 760px; }
.hb-lede { font-family: var(--serif); font-weight: 300; font-size: 21px; line-height: 1.5;
  color: var(--ink); margin: 0 0 8px; letter-spacing: -.01em; }
.hb-h2 { font-family: var(--serif); font-weight: 400; font-size: 23px; margin: 34px 0 12px;
  padding-top: 22px; border-top: 1px solid var(--line-2); }
.hb-h3 { font-size: 14px; font-weight: 700; letter-spacing: .02em; margin: 20px 0 10px; color: var(--ink-2); }
.hb-p { font-size: 14.5px; line-height: 1.7; color: var(--ink-2); margin: 0 0 12px; }
.hb-muted { color: var(--muted); font-size: 13px; }
.hb-link { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(184,89,58,.3); }
.hb-link:hover { border-bottom-color: var(--accent); }
.hb__page code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .85em;
  background: var(--cream-2); padding: 1px 6px; border-radius: 4px; color: var(--ink-2); }

/* Callout */
.hb-callout { background: var(--paper); border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0;
  padding: 14px 18px; margin: 18px 0; font-size: 14px; line-height: 1.65; color: var(--ink-2); }

/* Card grid */
.hb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 16px 0; }
.hb-card { border: 1px solid var(--line-2); border-radius: 10px; padding: 16px; background: var(--paper); }
.hb-card__tag { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
  font-weight: 700; margin-bottom: 8px; }
.hb-card__h { font-family: var(--serif); font-weight: 400; font-size: 17px; margin: 0 0 6px; }
.hb-card p { font-size: 13px; line-height: 1.6; color: var(--ink-2); margin: 0; }

/* Definition-style table */
.hb-table { width: 100%; border-collapse: collapse; margin: 12px 0 16px; }
.hb-table th { text-align: left; vertical-align: top; width: 30%; padding: 11px 16px 11px 0;
  font-size: 13px; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.hb-table td { vertical-align: top; padding: 11px 0; font-size: 13.5px; line-height: 1.6;
  color: var(--ink-2); border-bottom: 1px solid var(--line-2); }

/* Numbered steps */
.hb-steps { margin: 12px 0 16px; padding: 0; counter-reset: hb; list-style: none; }
.hb-steps li { position: relative; padding: 4px 0 12px 38px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.hb-steps li::before { counter-increment: hb; content: counter(hb); position: absolute; left: 0; top: 2px;
  width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--cream);
  font-family: var(--serif); font-size: 13px; display: grid; place-items: center; }

/* Stage chips row */
.hb-stages { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 0 16px; }
.hb-stage { font-size: 12px; padding: 5px 10px; border-radius: 999px; background: var(--cream-2); color: var(--ink-2); }
.hb-stage.is-build { background: var(--ink); color: var(--cream); }
.hb-stage__arrow { color: var(--line); font-size: 12px; }

.hb-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 16px; }
.hb-tag { font-size: 11px; padding: 4px 9px; border-radius: 999px; background: var(--cream-2);
  color: var(--ink-2); letter-spacing: .02em; }

/* Data-model tree */
.hb-tree { font-size: 13.5px; line-height: 1.85; color: var(--ink-2); }
.hb-tree ul { margin: 2px 0 2px; }

.hb__pagefoot { margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--line-2);
  font-size: 11.5px; color: var(--muted); line-height: 1.6; }

/* ---- Handbook responsive ---- */
/* Below the admin shell's tablet breakpoint there isn't room for a 264px TOC
   beside the reading column, so the TOC folds into a horizontal chip strip. */
@media (max-width: 1024px) {
  .hb { grid-template-columns: 1fr; gap: 16px; padding: 18px 20px 48px; }
  .hb__toc { position: static; flex-direction: row; gap: 8px; overflow-x: auto;
    margin: 0 -20px; padding: 0 20px 4px; -webkit-overflow-scrolling: touch; }
  .hb__tocitem { flex: none; width: 168px; }
  .hb__tocblurb { display: none; }
  .hb__page { max-width: none; }
}
@media (max-width: 768px) {
  .rail__item--desk { display: none; }   /* keep the bottom tab bar at 3 */
  .hb { padding: 16px 16px 40px; }
  .hb__toc { margin: 0 -16px; padding: 0 16px 4px; }
  .hb__tocitem { width: 150px; }
  .hb__page { padding: 22px 18px; }
  .hb-lede { font-size: 18px; }
  .hb-h2 { font-size: 20px; }
  .hb-table th { white-space: normal; width: 38%; }
}

/* ── Expire-lead confirm dialog ───────────────────────────────────────────
   Replaces the stock browser confirm() on the Leads/Projects cards with a
   styled choice between Lost and Junk. One <dialog> lives in the layout. */
.modal {
  border: none;
  border-radius: 14px;
  padding: 0;
  background: transparent;
  max-width: 380px;
  width: calc(100% - 32px);
}
.modal::backdrop { background: rgba(26, 23, 20, .45); backdrop-filter: blur(2px); }
.modal[open] { animation: modal-in .14s ease-out; }
@keyframes modal-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.modal__panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 22px 18px;
  box-shadow: 0 24px 60px rgba(26, 23, 20, .28);
}
.modal__title { font-family: var(--font-display); font-size: 21px; font-weight: var(--w-display); color: var(--ink); margin: 0 0 4px; }
.modal__sub { font-size: 13px; color: var(--muted); margin: 0 0 18px; line-height: 1.45; }

.modal__actions { display: flex; flex-direction: column; gap: 10px; }
.modal__actions form { margin: 0; }

.modal__choice {
  display: flex; flex-direction: column; gap: 2px;
  width: 100%; text-align: left;
  padding: 12px 14px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .12s, background .12s, transform .04s;
}
.modal__choice:hover { transform: translateY(-1px); }
.modal__choice:active { transform: translateY(0); }
.modal__choice-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.modal__choice-hint { font-size: 12px; color: var(--muted); line-height: 1.4; }
.modal__choice--lost:hover { border-color: var(--accent); background: #fbf1ec; }
.modal__choice--lost .modal__choice-title { color: var(--accent); }
.modal__choice--junk:hover { border-color: var(--ink-2); background: var(--cream); }

.modal__cancel {
  display: block; width: 100%;
  margin-top: 14px; padding: 9px;
  background: transparent; border: none;
  color: var(--muted); font-family: inherit; font-size: 13px; cursor: pointer;
}
.modal__cancel:hover { color: var(--ink); }

@media (max-width: 480px) {
  .modal__panel { padding: 18px 16px 14px; }
  .modal__title { font-size: 19px; }
}

/* ── Generic confirm dialog (replaces window.confirm) ─────────────────────
   Drives every data-turbo-confirm via Turbo.setConfirmMethod (see
   confirm_dialog.js), so the prompt works in the iOS standalone PWA where the
   native confirm() is suppressed. Reuses .modal / .modal__panel above. */
.confirm-modal__message {
  font-size: 15px; color: var(--ink); line-height: 1.5;
  margin: 2px 0 20px;
}
.confirm-modal__actions {
  display: flex; gap: 10px; justify-content: flex-end;
}
.confirm-modal__actions .btn { margin: 0; }
@media (max-width: 480px) {
  .confirm-modal__actions { flex-direction: column-reverse; }
  .confirm-modal__actions .btn { width: 100%; text-align: center; }
}

/* ── Signature pad (sign-to-approve dialog) ───────────────────────────────
   A drawable canvas in the approve modal. touch-action:none so drawing on a
   phone strokes the canvas instead of scrolling the page. */
.sigpad { position: relative; margin: 4px 0 10px; }
.sigpad__canvas {
  display: block; width: 100%; height: 170px;
  border: 1px solid var(--line); border-radius: 9px;
  background: #fff; touch-action: none; cursor: crosshair;
}
.sigpad__line {
  position: absolute; left: 14px; bottom: 16px;
  font-size: 12px; color: var(--muted); pointer-events: none;
  border-top: 1px solid var(--line); padding-top: 3px; padding-right: 60px;
}
.sigpad__error { color: var(--accent); font-size: 12px; margin: 0 0 10px; }
.sigpad__actions { display: flex; gap: 10px; }
.sigpad__actions .pquote__btn { flex: 1; margin: 0; }

/* The captured signature rendered back on the quote/receipt document. */
.qdoc__signature { margin-top: 18px; }
.qdoc__signature-img {
  display: block; max-width: 240px; max-height: 90px;
  margin: 2px 0 4px; border-bottom: 1px solid var(--ink);
}
.qdoc__signature-meta { font-size: 12px; color: var(--muted); }

/* ── Email updates (Marketing → Email updates) ────────────────────────────
   Admin compose/preview screens + the public "sign up for updates" form and
   the token-keyed unsubscribe page. Mobile rules are folded into the existing
   admin (≤768) and public (≤600) blocks below this section. */

/* Admin: audience counters */
.bc-audiences { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; }
.bc-aud { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.bc-aud__n { font-family: var(--font-display); font-weight: var(--w-display); font-size: 26px; color: var(--ink); }
.bc-aud__l { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* Admin: email update list */
.bc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bc-row { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }
.bc-row__link { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; text-decoration: none; color: var(--ink); }
.bc-row__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bc-row__subject { font-weight: 600; font-size: 15px; }
.bc-row__meta { font-size: 12px; color: var(--muted); }
.bc-tag { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.bc-tag--sent { background: #eaf0e6; color: #5a6e4e; }
.bc-tag--sending { background: #fff3e0; color: var(--accent); }
.bc-tag--draft { background: var(--cream); color: var(--ink-2); }
.bc-empty { color: var(--muted); font-size: 14px; padding: 18px 0; }

/* Admin: body padding so content aligns with the topbar (matches .quickadd/.board-wrap) */
.bc-body { padding: 24px 32px 48px; }

/* Admin: preview screen */
.bc-preview { max-width: 560px; }
.bc-preview__meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 18px;
  font-size: 13px; color: var(--ink-2); }
.bc-preview__k { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.bc-preview__email { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.bc-preview__brand { text-align: center; padding: 18px 0; border-bottom: 1px solid #ece5d6;
  font-family: Georgia, serif; color: #1a1714; }
.bc-preview__body { padding: 24px 22px; line-height: 1.6; font-size: 15px; color: #1a1714; }
.bc-preview__foot { padding: 16px 22px; border-top: 1px solid #ece5d6; font-size: 12px;
  color: #6b6157; text-align: center; line-height: 1.7; }
.bc-preview__foot a { color: #6b6157; }
.bc-send { margin-top: 18px; }
.bc-preview__note { font-size: 12px; color: var(--muted); margin-top: 8px; }

/* Public: unsubscribe / signup-result card (mobile-first, phone layout) */
.sub-card { width: 100%; max-width: 420px; margin: 8vh auto; padding: 36px 26px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px; text-align: center;
  box-sizing: border-box; }
.sub-card__brand { font-family: var(--font-display); font-weight: var(--w-display); font-size: 20px; color: var(--ink); margin-bottom: 18px; }
.sub-card__h { font-family: var(--font-display); font-weight: var(--w-display); font-size: 24px; color: var(--ink); margin: 0 0 12px; }
.sub-card__p { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0 0 22px; }
.sub-card__note { font-size: 13px; color: var(--muted); margin-top: 16px; }
.sub-btn { display: inline-block; width: 100%; box-sizing: border-box; padding: 14px 18px;
  font-size: 16px; font-weight: 600; border-radius: 9px; border: none; cursor: pointer;
  text-decoration: none; text-align: center; }
.sub-btn--dark { background: var(--ink); color: var(--cream); }
.sub-card form { margin: 0; }

/* Admin mobile (≤768): collapse counters + tidy preview */
@media (max-width: 768px) {
  .bc-body { padding: 16px 16px 32px; }
  .bc-audiences { grid-template-columns: 1fr; gap: 10px; }
  .bc-preview { max-width: none; }
  .bc-row__link { flex-direction: row; }
}

/* Public mobile (≤600): the unsubscribe / signup-result card. */
@media (max-width: 600px) {
  .sub-card { margin: 4vh auto; padding: 28px 20px; }
}

/* ── Contacts ─────────────────────────────────────────────────────────────
   People directory: a search box in the topbar + a tappable row list. Rows
   stay comfortable at phone width (the directory is used on the go). */
.contact-wrap { padding: 20px 32px 48px; }
.contact-search__input {
  width: 260px; max-width: 100%; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card);
  color: var(--ink); font-size: 13.5px;
}
/* Desktop fills the width with a card grid; narrow screens collapse to one
   column on their own (auto-fill can't fit two 320px tracks). */
.contact-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.contact-row mark { background: var(--accent-soft); color: inherit; border-radius: 3px; padding: 0 1px; }
/* display:flex above would beat the [hidden] UA rule — restate it for the live filter. */
.contact-row[hidden] { display: none; }

/* Social handles — brand glyph sits inside its input; lights up on focus. */
.soc-ico { width: 16px; height: 16px; }
.soc-field { position: relative; justify-content: flex-end; }
.soc-field .soc-ico {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none;
}
.soc-field input { padding-left: 34px; }
.soc-field:focus-within .soc-ico { color: var(--accent); }

/* Profile links on the contact page — icon + handle pills. */
.soc-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.soc-link {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px 7px 10px;
  border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2);
  font-size: 12.5px; text-decoration: none;
}
.soc-link:hover { border-color: var(--accent); color: var(--accent); }
.contact-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  text-decoration: none; color: inherit;
}
.contact-row:hover { border-color: var(--ink); }
.contact-row__avatar {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent, #b8593a);
  color: #fff; font-size: 14px; font-weight: 600;
}
.contact-row__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.contact-row__name { font-size: 14.5px; color: var(--ink); font-weight: 500; }
.contact-row__sub { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-row__count { flex: 0 0 auto; font-size: 12px; color: var(--ink-2); }

@media (max-width: 600px) {
  .contact-search__input { width: 100%; }
}

/* ======================================================================
 * Design-system layer — applied on top of the structural rules above so
 * existing views adopt the OurWorkshop look (Space Mono spec-labels,
 * tangerine accent, warm shadows, gently rounded surfaces) without
 * touching every rule. Added with the brand refresh (June 2026).
 * ====================================================================== */

/* The mono uppercase spec-label voice — the brand's signature tic. */
.topbar__eyebrow, .rail__section, .kpi__label, .panel__eyebrow,
.proj-hero__status, .proj-stat .l, .proj-card__status, .proj-tabs__meta,
.card__stale, .card__followup,
.timeline__flag, .timeline__now, .timeline__date,
.qstatus, .order-badge, .prod-card__cat, .prod-card__vis,
.qdoc__num, .qdoc__plabel, .qdoc__brandword, .qdoc__table thead th,
.qdoc__note-tag, .qline__tag, .qline__lbl, .qline__qty, .qline__price,
.qline__amount, .qline__disc, .cline__tag, .cline__lbl, .cline__qty, .cline__price, .cline__amount,
.quote-form__meta label, .quote-form__intro, .qsamples__pickhead,
.sched__label, .sched-facts dt, .sched-form__row label, .sched-form__note, .seg legend,
.bc-tag, .bc-preview__k, .hb-card__tag, .lib__section, .lib__item .lib__hint,
.bucket__head, .portal__status, .portal__h3, .portal__schedstep .l, .portal__bucket,
.order-badge, .prod-docs__badge, .settings-logo__remove {
  font-family: var(--font-label);
}

/* Status badges ride the accent ramp / muted status tokens. */
.col__dot { background: var(--accent) !important; }
.card__deposit { background: var(--accent-soft); color: var(--accent-deep); }
.proj-card__status { background: var(--accent-soft); color: var(--accent-deep); }

/* Warm-white surfaces (match --surface) where pure white was hard-coded. */
.kpi, .card, .panel, .proj-hero, .proj-card, .asset, .prod-card,
.qdoc, .hb__page, .hb-card, .quickadd__form, .portal__schedstep,
.pquote, .portal__piece, .bc-aud, .bc-row, .contact-row, .signin__card {
  background: var(--surface);
}

/* Warm, low resting shadow + a lift on hover for the primary cards. */
.kpi, .panel, .proj-hero, .qdoc, .hb__page { box-shadow: var(--shadow-1); }
.proj-card, .prod-card, .card { box-shadow: var(--shadow-1); transition: box-shadow .16s, transform .16s; }
.proj-card:hover, .prod-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }

/* Active nav / selected states use the accent, not ink, where it reads as "current". */
.lib__item.is-on, .hb__tocitem.is-on { background: var(--accent); border-color: var(--accent); }
.hb__tocitem.is-on .hb__toctitle, .hb__tocitem.is-on .hb__tocicon { color: var(--on-accent); }
.hb__tocitem.is-on .hb__tocblurb { color: oklch(1 0 0 / .7); }
.lib__item.is-on .lib__hint { color: oklch(1 0 0 / .7); }

/* ── Brand accent knob (Settings → Brand accent) ──────────────────────────
   Curated swatches + a 0–360 slider; the only per-tenant theming control. */
.accent-knob { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin: 4px 0 2px; }
.accent-knob__swatches { display: flex; gap: 8px; }
.accent-knob__sw {
  width: 26px; height: 26px; border-radius: 50%; padding: 0; flex: none; cursor: pointer;
  border: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
  transition: box-shadow .12s, transform .08s;
}
.accent-knob__sw:hover { transform: translateY(-1px); }
.accent-knob__sw.is-on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.accent-knob__slide { display: flex; align-items: center; gap: 10px; }
.accent-knob .accent-knob__slider {
  width: 180px; cursor: pointer; accent-color: var(--accent);
  border: none; padding: 0; background: transparent; border-radius: 0;
}
.accent-knob__readout {
  font-family: var(--font-label); font-size: 12px; color: var(--sub);
  min-width: 44px; font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) { .accent-knob__slider { width: 140px; } }

/* ── Product variants ─────────────────────────────────────────────────────
   Internal recipes on a catalog product ("7ft painted"): templated quote +
   cost lines and tagged docs. The variant editor reuses the .qline row
   anatomy from the quote form; these rules cover what's new. */

/* Product page: the variants list + quick-add. */
.prod-vars__counts { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.prod-vars__add { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.prod-vars__add .prod-vars__name { flex: 1 1 200px; min-width: 0; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card);
  color: var(--ink); font-size: 13.5px; font-family: inherit; }

/* Variant editor: rows drop the discount + amount columns the quote form has,
   so they get their own (narrower) grid; kind tags pick up side tints. */
.vline { grid-template-columns: 18px 1fr 70px 90px 28px; }
.vline--quote_note { grid-template-columns: 18px 1fr 110px 28px; }
.vline__tag--material, .vline__tag--labor { background: #eef3ee; color: #5a8060; }
.vdanger { margin-top: 18px; display: flex; justify-content: flex-end; }
.vdanger .vdanger__btn { background: transparent; border: 1px solid var(--line); border-radius: 6px;
  padding: 6px 12px; font-size: 12px; color: var(--muted); cursor: pointer; font-family: inherit; }
.vdanger .vdanger__btn:hover { color: #a33; border-color: #c99; }

/* "Insert from variant" picker — sits with the +Line/+Note buttons on the
   quote editor and the costs tab. Scoped under .quote-form so it outranks the
   `.quote-form select` input styling. */
.quote-form .variant-pick { max-width: 200px; padding: 7px 10px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--card); color: var(--ink-2);
  font-size: 12.5px; font-family: inherit; cursor: pointer; }
.quote-form__addbtns { flex-wrap: wrap; }

/* Brief tab: the catalog picks (product, optionally narrowed to a variant). */
.brief-picks { list-style: none; padding: 0; margin: 0 0 10px; }
.brief-picks__row { display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0; border-top: 1px solid var(--line-2); }
.brief-picks__row:first-child { border-top: none; padding-top: 0; }
.brief-picks__main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; flex: 1; }
.brief-picks__name { font-size: 13.5px; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--line); }
.brief-picks__name:hover { border-bottom-color: var(--ink); }
.brief-picks__variant { font-family: var(--font-label); font-size: 10px; padding: 3px 8px;
  border-radius: 999px; background: var(--accent-soft); color: var(--accent-deep);
  text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.brief-picks__docs { display: flex; gap: 6px 14px; flex-wrap: wrap; width: 100%; }
.brief-picks__doc { font-size: 12px; color: var(--ink-2); text-decoration: none;
  border-bottom: 1px dashed var(--line); word-break: break-all; }
.brief-picks__doc:hover { border-bottom-color: var(--ink); }
.brief-picks__rm { flex: none; background: transparent; border: 1px solid var(--line); border-radius: 6px;
  width: 28px; height: 28px; font-size: 11px; color: var(--muted); cursor: pointer; font-family: inherit; }
.brief-picks__rm:hover { color: #a33; border-color: #c99; }
.brief-picks__add { display: flex; gap: 8px; flex-wrap: wrap; }
.brief-picks__select { flex: 1 1 240px; min-width: 0; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--card); color: var(--ink); font-size: 13px; font-family: inherit; }

/* Admin mobile (≤768): pickers and quick-adds go full width. Desktop is
   untouched — additive only. (Inputs get 16px from the global rule above.) */
@media (max-width: 768px) {
  /* Re-collapse variant rows — the base .vline grid above would otherwise win
     over the earlier .qline mobile override. */
  .vline { grid-template-columns: 1fr 1fr; }
  .vline--quote_note { grid-template-columns: 1fr; }
  .quote-form .variant-pick { max-width: 100%; flex: 1 1 100%; }
  .brief-picks__add .btn, .prod-vars__add .btn { flex: none; }
}

/* ---- CSV import / export (contacts roster) ------------------------- */
.csv-mode { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; font-size: 13px; line-height: 1.5; }
.csv-mode input { margin-top: 3px; }
.csv-mode em { color: var(--muted); font-style: normal; }

.csv-review { max-width: 760px; }
.csv-summary { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.csv-stat { background: #fff; border: 1px solid var(--line-2); border-radius: 999px;
  padding: 6px 14px; font-size: 12.5px; color: var(--muted); }
.csv-stat strong { color: var(--ink); }
.csv-stat--add  { border-color: var(--ok);     background: var(--ok-soft); }
.csv-stat--edit { border-color: var(--warn);   background: var(--warn-soft); }
.csv-stat--del,
.csv-stat--err  { border-color: var(--danger); background: var(--danger-soft); }

.panel--warn { border-color: var(--danger); }
.csv-h { font-size: 13px; font-weight: 600; margin: 0 0 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.csv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.csv-list li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
  padding: 7px 0; border-top: 1px solid var(--line-2); font-size: 13px; }
.csv-list li:first-child { border-top: none; }
.csv-name { font-weight: 600; color: var(--ink); }
.csv-review .muted, .csv-list .muted { color: var(--muted); font-size: 12.5px; }
.csv-confirm { display: flex; align-items: center; gap: 16px; margin-top: 22px; }

.btn--danger { background: var(--danger); color: #fff; box-shadow: none; }
.contact-danger .panel__hint { margin-bottom: 12px; }