/* Live-dashboard additions on top of styles.css
   Connect + Configure flow, sync states, settings drawer.
   --------------------------------------------------------- */

/* ---- Standalone connect/configure screens -------------- */
.gate {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px 24px;
  background: var(--bg);
}
.gate-card {
  width: min(560px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 36px 32px;
  box-shadow: var(--shadow-card);
}
.gate-card .eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.gate-card .eyebrow .pulse {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--sage);
  box-shadow: 0 0 0 0 oklch(from var(--sage) l c h / 0.4);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 oklch(from var(--sage) l c h / 0.4); }
  70%  { box-shadow: 0 0 0 8px oklch(from var(--sage) l c h / 0); }
  100% { box-shadow: 0 0 0 0 oklch(from var(--sage) l c h / 0); }
}
.gate-card h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
  line-height: 1.1;
}
.gate-card .lede {
  color: var(--ink-3);
  font-size: 13.5px;
  line-height: 1.55;
  margin-bottom: 26px;
}

.fld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.fld label { font-size: 11.5px; color: var(--ink-2); font-weight: 500; }
.fld .hint { font-size: 11.5px; color: var(--ink-3); }
.fld input, .fld select {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 13px;
  font-family: var(--mono);
  outline: none;
  transition: border-color 0.15s;
}
.fld input:focus, .fld select:focus { border-color: var(--ink); }
.fld input.err { border-color: var(--danger); }

.gate-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}
.gate-actions .helper {
  font-size: 12px; color: var(--ink-3);
}
.gate-actions .helper a {
  color: var(--accent-deep);
  border-bottom: 1px solid currentColor;
}

.privacy-note {
  margin-top: 22px;
  padding: 14px 16px;
  background: var(--bg-deep);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.55;
  display: flex; gap: 10px;
  align-items: flex-start;
}
.privacy-note .icn { color: var(--sage); flex-shrink: 0; margin-top: 2px; }
.privacy-note strong { color: var(--ink-2); font-weight: 600; }

.err-banner {
  background: var(--danger-soft);
  border: 1px solid oklch(from var(--danger) l c h / 0.3);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--danger);
  margin-bottom: 14px;
  line-height: 1.45;
}

/* ---- Configure screen ---------------------------------- */
.config-shell { max-width: 920px; margin: 0 auto; padding: 40px 24px 80px; }
.config-shell .head { margin-bottom: 28px; }
.config-shell .head h1 {
  font-family: var(--serif); font-weight: 500; font-size: 30px;
  letter-spacing: -0.015em; margin: 0 0 6px;
}
.config-shell .head .sub { color: var(--ink-3); font-size: 13.5px; }

.config-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 18px;
  overflow: hidden;
}
.config-section .cs-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
}
.config-section .cs-head:hover { background: var(--surface-2); }
.config-section .cs-head h3 {
  font-family: var(--serif); font-weight: 500; font-size: 17px; margin: 0;
}
.config-section .cs-head .meta {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--ink-3);
}
.config-section .cs-body {
  padding: 18px 20px 22px;
  border-top: 1px solid var(--border-soft);
}
.config-section.collapsed .cs-body { display: none; }
.config-section.collapsed .cs-head { border-bottom: 0; }

.config-section .field-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 16px;
}
.config-section .field-grid .fld { margin-bottom: 0; }

.config-section .source-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0 16px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 16px;
}
.config-section .source-row label {
  font-size: 11.5px; color: var(--ink-2); font-weight: 500;
}
.config-section .source-row select { flex: 1; max-width: 320px; }

.skip-pill {
  font-size: 11px; color: var(--ink-3);
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
}
.config-section.mapped .cs-head .meta { color: var(--success); }
.config-section.unmapped .cs-head .meta { color: var(--ink-4); }

.config-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--border-soft);
}
.config-foot .left { display: flex; gap: 10px; }
.config-foot .right { display: flex; gap: 10px; }

/* ---- Sync/Status bar in topbar ------------------------- */
.sync-bar {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--ink-3);
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border-soft);
}
.sync-bar .led {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--ink-4);
  flex-shrink: 0;
}
.sync-bar.live .led { background: var(--sage); box-shadow: 0 0 0 3px oklch(from var(--sage) l c h / 0.15); }
.sync-bar.syncing .led { background: var(--warning); animation: blink 1s infinite; }
.sync-bar.error .led { background: var(--danger); }
.sync-bar.mock .led { background: var(--ink-4); }
@keyframes blink { 0%, 100% { opacity: 1 } 50% { opacity: 0.3 } }

.sync-bar button {
  font-size: 12px; color: var(--ink-2);
  padding: 0 4px;
  border-left: 1px solid var(--border-soft);
  margin-left: 4px;
  cursor: pointer;
}
.sync-bar button:hover { color: var(--ink); }

/* ---- Settings drawer ----------------------------------- */
.drawer-bd {
  position: fixed; inset: 0;
  background: oklch(0.15 0.010 60 / 0.4);
  z-index: 90;
  backdrop-filter: blur(2px);
  animation: fadeIn 0.18s ease;
}
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(440px, 100%);
  background: var(--bg);
  border-left: 1px solid var(--border);
  z-index: 91;
  overflow-y: auto;
  animation: slideIn 0.22s ease;
  padding: 28px 28px 60px;
}
@keyframes slideIn { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.drawer h2 {
  font-family: var(--serif); font-weight: 500; font-size: 22px;
  margin: 0 0 4px; letter-spacing: -0.012em;
}
.drawer .drawer-sub {
  font-size: 12.5px; color: var(--ink-3); margin-bottom: 22px;
}
.drawer .kv {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  font-size: 12.5px;
  padding: 12px 0;
  border-top: 1px solid var(--border-soft);
}
.drawer .kv:last-of-type { border-bottom: 1px solid var(--border-soft); }
.drawer .kv .k { color: var(--ink-3); }
.drawer .kv .v { font-family: var(--mono); text-align: right; color: var(--ink); word-break: break-all; }
.drawer .kv .v.muted { color: var(--ink-3); }

.drawer .drawer-actions {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 24px;
}
.drawer .drawer-actions .btn { justify-content: center; }

/* ---- Section sync indicator (per-view) ----------------- */
.section-sync {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--ink-3);
  font-family: var(--mono);
}
.section-sync .led {
  width: 5px; height: 5px; border-radius: 999px; background: var(--ink-4);
}
.section-sync.live .led { background: var(--sage); }
.section-sync.mock .led { background: var(--ink-4); }
.section-sync.err .led  { background: var(--danger); }

/* ---- Loading/empty/error ------------------------------- */
.skeleton {
  background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--radius);
}
@keyframes shimmer { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }

.error-card {
  background: var(--danger-soft);
  border: 1px solid oklch(from var(--danger) l c h / 0.3);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.55;
  margin-bottom: 18px;
}
.error-card .ttl {
  font-weight: 600; color: var(--danger);
  margin-bottom: 4px;
  display: flex; align-items: center; gap: 8px;
}
.error-card code {
  font-family: var(--mono); font-size: 11.5px;
  background: var(--surface); padding: 1px 4px; border-radius: 3px;
}

/* =====================================================================
   LIVE DASHBOARD — view styles
   ===================================================================== */

.canvas-inner { width: 100%; }

/* ---- Overview hero ------------------------------------- */
.overview-hero {
  display: grid;
  grid-template-columns: 1.5fr 300px;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 22px;
}
.oh-left { padding: 22px 26px; }
.oh-right {
  padding: 22px 24px;
  background: var(--bg-deep);
  border-left: 1px solid var(--border-soft);
  display: flex; flex-direction: column; justify-content: center;
}
.oh-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 30px;
  letter-spacing: -0.018em;
  line-height: 1.05;
  margin: 10px 0 5px;
}
.oh-address {
  font-size: 13.5px;
  color: var(--ink-3);
  font-family: var(--serif);
  font-style: italic;
}
.chip-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.chip.mono-chip {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
}
.chip.mini {
  font-size: 10.5px;
  padding: 2px 7px;
  font-weight: 400;
}
.oh-dates {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
  font-family: var(--serif);
  font-size: 14px;
}
.oh-dates .upper {
  display: block;
  font-family: var(--sans);
  margin-bottom: 4px;
}

.oh-budget {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.015em;
}
.oh-budget-sub {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-3);
  margin-top: 6px;
  margin-bottom: 16px;
}
.oh-stack {
  height: 10px;
  background: var(--bg);
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  margin-bottom: 14px;
  border: 1px solid var(--border-soft);
}
.oh-stack .seg.drawn   { background: var(--ink); height: 100%; }
.oh-stack .seg.pending { background: var(--accent); height: 100%; opacity: 0.7; }
.oh-right .legend-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11.5px;
  color: var(--ink-2);
  font-family: var(--mono);
}
.oh-right .legend-row .sw { display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 7px; vertical-align: middle; }
.oh-right .legend-row .sw.drawn { background: var(--ink); }
.oh-right .legend-row .sw.pending { background: var(--accent); opacity: 0.7; }
.oh-right .legend-row .sw.rem { background: var(--bg); border: 1px solid var(--border); }

@media (max-width: 720px) {
  .overview-hero { grid-template-columns: 1fr; }
  .oh-right { border-left: 0; border-top: 1px solid var(--border-soft); }
}

/* ---- Stat strip — wider variant ------------------------ */
.stat-card .val.mono-val {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 24px;
}

/* ---- Two col grid (overview) --------------------------- */
.two-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}
@media (max-width: 1100px) { .two-col-grid { grid-template-columns: 1fr; } }

/* ---- Overview list rows -------------------------------- */
.overview-list-row {
  display: grid;
  grid-template-columns: 1fr auto 14px;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  transition: background 0.12s;
}
.overview-list-row:last-child { border-bottom: 0; }
.overview-list-row:hover { background: var(--surface-2); }
.overview-list-row .oli-main { min-width: 0; }
.overview-list-row .oli-title {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.overview-list-row .oli-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--ink-3);
  flex-wrap: wrap;
}
.overview-list-row .oli-due {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-2);
  white-space: nowrap;
  gap: 2px;
}
.overview-list-row .oli-due.urgent { color: var(--warning); }
.overview-list-row .oli-due.overdue { color: var(--danger); }
.overview-list-row .oli-days {
  font-size: 10.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.overview-list-row .oli-range {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
}

/* ============ Overview summary — Project pulse + Decision board ====== */
.ov-mini-link {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 12px; color: var(--accent-deep);
}

/* ---- Project pulse (class renamed from .pulse to avoid colliding with
   the login screen's .gate-card .eyebrow .pulse status dot) ------------- */
.proj-pulse {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 28px;
  margin-bottom: var(--gap);
}
.proj-pulse.clickable { cursor: pointer; transition: border-color 0.14s, box-shadow 0.14s; }
.proj-pulse.clickable:hover { border-color: var(--accent); box-shadow: 0 8px 28px -18px rgba(0,0,0,0.45); }
.proj-pulse.clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pulse-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pulse-head-l { flex: 1 1 auto; min-width: 0; }
.pulse-title { font-family: var(--serif); font-weight: 500; font-size: 20px; letter-spacing: -0.01em; margin: 0; }
.pulse-sub { margin: 4px 0 0; font-size: 13px; color: var(--ink-3); }
.pulse-sub b { color: var(--accent-deep); font-weight: 600; font-variant-numeric: tabular-nums; }

.pulse-arc { position: relative; margin-top: 20px; }
.pulse-now-label {
  position: absolute; top: -20px; transform: translateX(-50%);
  font-family: var(--mono); font-size: 9.5px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink); white-space: nowrap;
}
.pulse-track {
  position: relative; height: 6px;
  background: var(--bg-deep);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
}
.pulse-fill {
  position: absolute; left: 0; top: 0; bottom: 0; min-width: 6px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 45%, var(--ink)), var(--accent));
  border-radius: 999px;
}
.pulse-now {
  position: absolute; top: 50%;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--ink); border: 3px solid var(--surface);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 16%, transparent);
}
.pulse-ends {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-top: 12px; font-family: var(--serif);
}
.pulse-end .upper { display: block; margin-bottom: 2px; }
.pulse-end.right { text-align: right; }
.pulse-end-d { font-size: 14.5px; color: var(--ink); }

.pulse-next {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}
.pulse-next-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); font-weight: 600; }
.pulse-next-list { display: flex; gap: 10px; flex-wrap: wrap; }
.pulse-next-empty { font-size: 13px; color: var(--ink-3); font-style: italic; font-family: var(--serif); }
.pulse-chip {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--bg-deep);
  border: 1px solid var(--border-soft);
  border-radius: 999px; padding: 6px 14px 6px 11px;
}
.pc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.pc-name { font-family: var(--serif); font-size: 13.5px; color: var(--ink); }
.pc-meta { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.ov-mini-link { flex: 0 0 auto; }

/* ---- Upcoming meetings (Overview) ---------------------- */
.up-meetings {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 28px;
  margin-bottom: var(--gap);
}
.up-meetings.clickable { cursor: pointer; transition: border-color 0.14s, box-shadow 0.14s; }
.up-meetings.clickable:hover { border-color: var(--accent); box-shadow: 0 8px 28px -18px rgba(0,0,0,0.45); }
.up-meetings.clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.up-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.up-head-l { flex: 1 1 auto; min-width: 0; }
.up-title { font-family: var(--serif); font-weight: 500; font-size: 20px; letter-spacing: -0.01em; margin: 0; }
.up-sub { margin: 4px 0 0; font-size: 13px; color: var(--ink-3); }

.up-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; }
.up-card {
  display: flex; gap: 14px; align-items: stretch;
  background: var(--bg-deep); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 12px 14px;
  border-left: 3px solid var(--ink-4);
}
.up-card.client { border-left-color: oklch(0.55 0.13 260); }
.up-card.walk   { border-left-color: var(--success); }
.up-card.vendor { border-left-color: oklch(0.55 0.14 300); }
.up-card.site   { border-left-color: var(--warning); }
.up-card.other  { border-left-color: var(--ink-4); }

.up-date {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 46px; text-align: center;
}
.up-dow { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); }
.up-day { font-family: var(--serif); font-size: 24px; line-height: 1.05; color: var(--ink); }
.up-mon { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); }
.up-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.up-tag {
  align-self: flex-start; font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}
.up-tag.client { background: oklch(0.93 0.04 260); color: oklch(0.40 0.13 260); }
.up-tag.walk   { background: var(--success-soft); color: var(--success); }
.up-tag.vendor { background: oklch(0.93 0.05 300); color: oklch(0.42 0.14 300); }
.up-tag.site   { background: var(--warning-soft); color: oklch(0.45 0.10 70); }
.up-tag.other  { background: var(--surface-2); color: var(--ink-2); }
.up-card-title { font-family: var(--serif); font-size: 14.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-card-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 11.5px; color: var(--ink-3); }
.up-when { color: var(--accent-deep); font-weight: 600; white-space: nowrap; }
.up-time { font-family: var(--mono); white-space: nowrap; }
.up-loc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }

/* ---- Decision board ------------------------------------ */
.db { margin-bottom: var(--gap); }
.db-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.db-head-l { flex: 1 1 auto; min-width: 0; }
.db-title { font-family: var(--serif); font-weight: 500; font-size: 22px; letter-spacing: -0.012em; margin: 0; }
.db-sub { margin: 4px 0 0; font-size: 13px; color: var(--ink-3); }
.db-allbtn {
  appearance: none; cursor: pointer; white-space: nowrap; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent; border: 1px solid var(--border);
  color: var(--ink-2); font: inherit; font-size: 12.5px;
  padding: 7px 13px; border-radius: 999px;
  transition: background 0.12s, border-color 0.12s;
}
.db-allbtn:hover { background: var(--surface-2); border-color: var(--accent); }

.db-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); align-items: start; }
@media (max-width: 980px) { .db-cols { grid-template-columns: 1fr; } }

.db-col {
  --lane: var(--ink-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--lane);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column;
  max-height: 430px; overflow: hidden;
}
.db-col[data-accent="bid"]     { --lane: var(--accent); }
.db-col[data-accent="approve"] { --lane: var(--warning); }
.db-col[data-accent="select"]  { --lane: var(--sage); }
.db-col[data-accent="decide"]  { --lane: oklch(0.50 0.12 260); }
.db-col[data-accent="task"]    { --lane: oklch(0.52 0.09 200); }
.db-col[data-accent="option"]  { --lane: oklch(0.52 0.13 330); }
.db-col-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px 11px;
  border-bottom: 1px solid var(--border-soft);
}
.db-col-title { flex: 1 1 auto; min-width: 0; font-family: var(--serif); font-size: 14.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-col-count {
  flex: 0 0 auto;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  min-width: 22px; text-align: center;
  color: var(--lane);
  background: color-mix(in srgb, var(--lane) 14%, transparent);
  border-radius: 999px; padding: 2px 8px;
}
.db-col-body {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px; overflow-y: auto; overscroll-behavior: contain;
}
.db-empty {
  padding: 22px 12px; text-align: center;
  font-family: var(--serif); font-style: italic;
  font-size: 13px; color: var(--ink-3);
}

.dc {
  appearance: none; cursor: pointer; text-align: left;
  position: relative; display: block; width: 100%;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 11px 30px 12px 13px;
  font: inherit;
  transition: transform 0.1s, border-color 0.12s, box-shadow 0.12s, background 0.12s;
}
.dc:hover {
  background: var(--surface);
  border-color: var(--lane, var(--accent));
  box-shadow: 0 5px 16px -11px rgba(0,0,0,0.55);
  transform: translateY(-1px);
}
.dc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.dc-room { flex: 1 1 auto; min-width: 0; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-due { flex: 0 0 auto; font-family: var(--mono); font-size: 10.5px; white-space: nowrap; }
.dc-due.is-normal  { color: var(--ink-3); }
.dc-due.is-urgent  { color: var(--warning); }
.dc-due.is-overdue { color: var(--danger); font-weight: 600; }
.dc-name { font-family: var(--serif); font-size: 15px; line-height: 1.25; color: var(--ink); text-wrap: pretty; }
.dc-go {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  color: var(--ink-3); opacity: 0; transition: opacity 0.12s, color 0.12s;
}
.dc:hover .dc-go { opacity: 1; color: var(--lane, var(--accent)); }

/* ---- Selections grid (live) ---------------------------- */
.sel-grid-live {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
@media (max-width: 1100px) { .sel-grid-live { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .sel-grid-live { grid-template-columns: 1fr; } }

.sel-card-live {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  cursor: pointer;
  transition: all 0.18s;
  position: relative;
}
.sel-card-live:hover { border-color: var(--ink-4); transform: translateY(-1px); }

/* Pin the green approved-bid box, footrow, and Remove button to the bottom
   of each card so cards align visually regardless of how tall the bid
   summary above runs. The grid already stretches cards in a row to equal
   height; this just makes the bottom content hug that bottom edge. */
.sel-card-live .card-bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sel-card-live .top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.sel-card-live .name {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.2;
  color: var(--ink);
}
.sel-card-live .room {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 4px;
}
.sel-card-live .approved-bid {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--success-soft);
  border: 1px solid oklch(from var(--success) l c h / 0.2);
  border-radius: var(--radius);
}
.sel-card-live .approved-bid .check {
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--success);
  color: white;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.sel-card-live .approved-bid .vname {
  font-family: var(--serif);
  font-size: 13.5px;
  color: var(--ink);
}
.sel-card-live .approved-bid .vmeta {
  font-size: 11px;
  color: var(--ink-3);
}
.sel-card-live .bid-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-soft);
  font-size: 12px;
  color: var(--ink-2);
}
.sel-card-live .bid-summary.muted {
  border-top-color: transparent;
}
.sel-card-live .bid-summary .upper {
  margin-right: 4px;
}
.sel-card-live .bid-summary .mono { font-family: var(--mono); color: var(--ink); }
.sel-card-live .footrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-3);
}
.sel-card-live .footrow .due { display: inline-flex; align-items: center; gap: 6px; }
.sel-card-live .footrow .due.urgent { color: var(--warning); }
.sel-card-live .footrow .due.overdue { color: var(--danger); }
.sel-card-live .footrow .due .mono { font-family: var(--mono); }
.sel-card-live .footrow .oli-days {
  font-family: var(--mono);
  font-size: 10.5px;
  background: var(--bg-deep);
  padding: 1px 6px;
  border-radius: 999px;
  color: var(--ink-3);
}

/* ---- Decision card action buttons ---------------------- */
.sel-card-live .card-actions {
  display: flex;
  gap: 6px;
  padding-top: 12px;
  margin-top: 4px;
  border-top: 1px solid var(--border-soft);
  align-items: center;
}
/* When there's only a single action button on the card (the Remove ⇄ Add
   toggle), keep it sized to its content and pinned right — same place the
   Remove button sat when the card had three actions. */
.sel-card-live .card-actions .card-action.solo {
  flex: 0 0 auto;
  margin-left: auto;
}
.sel-card-live .card-action {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 8px;
  font-size: 12px;
  font-family: var(--sans);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.sel-card-live .card-action:hover:not(:disabled) {
  background: var(--surface-2);
  color: var(--ink);
}
.sel-card-live .card-action.approve:hover:not(:disabled) {
  background: var(--sage-soft);
  color: var(--sage);
  border-color: transparent;
}
.sel-card-live .card-action.rebid:hover:not(:disabled) {
  background: oklch(from var(--warning) l c h / 0.12);
  color: var(--warning);
  border-color: transparent;
}
.sel-card-live .card-action.remove:hover:not(:disabled) {
  background: oklch(from var(--danger) l c h / 0.10);
  color: var(--danger);
  border-color: transparent;
}
.sel-card-live .card-action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.sel-card-live .card-action.ghost {
  flex: 0 0 auto;
  background: transparent;
  border-color: transparent;
  color: var(--ink-3);
  text-decoration: underline;
}
.sel-card-live .card-action.ghost:hover { color: var(--ink); background: transparent; }
.sel-card-live .card-action-note {
  flex: 1;
  font-size: 11.5px;
  color: var(--ink-3);
  font-style: italic;
}
.sel-card-live.is-removed {
  opacity: 0.6;
  background: var(--bg-deep);
}
.sel-card-live.is-removed:hover { transform: none; border-color: var(--border); }
.sel-card-live.is-removed .name { text-decoration: line-through; color: var(--ink-3); }

.action-error-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin: 12px 0 0;
  border-radius: var(--radius);
  background: oklch(from var(--danger) l c h / 0.10);
  color: var(--danger);
  border: 1px solid oklch(from var(--danger) l c h / 0.25);
  font-size: 13px;
}

.room-select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12.5px;
  font-family: var(--sans);
  cursor: pointer;
}

/* ---- Selection detail (live) --------------------------- */
.sd-hero-live {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
  align-items: start;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 28px;
}
.sd-hero-live h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 32px;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 12px 0 14px;
}
.sd-hero-live .meta-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.sd-hero-live .spec {
  margin-top: 18px;
  max-width: 660px;
}
.sd-hero-live .spec .upper {
  display: block;
  margin-bottom: 6px;
}
.sd-hero-live .spec p {
  font-family: var(--serif);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  white-space: pre-wrap;
}
.sd-hero-live .summary-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.sd-hero-live .summary-card .row-mini { display: flex; justify-content: space-between; font-size: 12.5px; align-items: baseline; }
.sd-hero-live .summary-card .row-mini .lbl { color: var(--ink-3); }
.sd-hero-live .summary-card .row-mini .val { font-family: var(--mono); }
.sd-hero-live .summary-card .row-mini.allowance {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}
.sd-hero-live .summary-card .row-mini.allowance .lbl {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}
.sd-hero-live .summary-card .row-mini.allowance .val {
  font-size: 16px;
  color: var(--ink);
  font-weight: 500;
}

.sd-h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 19px;
  margin: 0 0 14px;
  letter-spacing: -0.012em;
}

/* Inspiration grid */
.insp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.insp-tile {
  aspect-ratio: 1/1;
  background: var(--bg-deep);
  border-radius: var(--radius);
  overflow: hidden;
  display: block;
  border: 1px solid var(--border-soft);
}
.insp-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.insp-file {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; gap: 8px;
  font-size: 11.5px; color: var(--ink-3);
  padding: 16px; text-align: center;
}

/* Bid row */
.bid-row {
  display: grid;
  grid-template-columns: 22px 80px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  cursor: pointer;
  transition: all 0.15s;
}
.bid-row + .bid-row { margin-top: 10px; }
.bid-row:hover:not(.approved) { border-color: var(--ink-4); }
.bid-row.picked {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink) inset;
}
.bid-row.approved {
  border-color: var(--success);
  background: oklch(from var(--success-soft) l c h / 0.5);
  cursor: default;
}
.bid-row .radio {
  width: 18px; height: 18px;
  border-radius: 999px;
  border: 1.5px solid var(--ink-4);
  background: var(--surface);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.bid-row.picked .radio { border-color: var(--ink); }
.bid-row.picked .radio::after { content: ""; width: 9px; height: 9px; border-radius: 999px; background: var(--ink); }
/* When a bid is both picked AND accepted, the green check should be the
   only thing in the radio circle — suppress the picked-state black dot
   so it doesn't peek out underneath. */
.bid-row.approved.picked .radio::after { content: none; }
.bid-row.approved .radio {
  border-color: var(--success);
  background: var(--success);
  color: white;
}
.bid-photo {
  width: 80px; height: 80px;
  border-radius: var(--radius);
  overflow: visible;
  background: var(--bg-deep);
  flex-shrink: 0;
  position: relative;
}
.bid-photo > a, .bid-photo > img, .bid-photo-ph { border-radius: var(--radius); overflow: hidden; }
.bid-photo > a { display: block; width: 100%; height: 100%; }
.bid-photo-url {
  position: absolute; top: calc(100% + 4px); left: 0;
  display: flex; gap: 4px; align-items: center;
  z-index: 3;
}
.bid-photo-url input {
  width: 150px; font: inherit; font-size: 11px;
  padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--paper);
}
.bid-photo-url .btn-sm { padding: 4px 10px; font-size: 11px; }
.bid-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.bid-photo-ph {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  font-family: var(--serif);
  font-size: 24px;
  color: var(--ink-3);
}
.bid-vendor {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink);
  line-height: 1.2;
}
.bid-product {
  font-size: 12.5px;
  color: var(--ink-3);
  margin-top: 2px;
}
.bid-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 6px;
  flex-wrap: wrap;
}
.bid-meta .spec-link {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--accent-deep);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.bid-meta .spec-link:hover { color: var(--accent); }
.bid-notes {
  font-size: 12px;
  color: var(--ink-2);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-soft);
  font-family: var(--serif);
  line-height: 1.55;
  max-width: 600px;
}

/* Builder inline edit on a bid row */
.bid-edit-btn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink-2);
  font: inherit;
  font-size: 11px;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  margin-left: auto;
  transition: all 0.12s;
}
.bid-edit-btn:hover {
  border-color: var(--ink-3);
  color: var(--ink);
  background: var(--surface-2, oklch(from var(--ink) l c h / 0.04));
}
.bid-row.editing {
  cursor: default;
  border-color: var(--ink-3);
  background: var(--surface, oklch(from var(--ink) l c h / 0.02));
}
.bid-row.editing:hover { border-color: var(--ink-3); }
.bid-edit {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 600px;
}
.bid-edit-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bid-edit-field .upper {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.bid-edit-field input,
.bid-edit-field textarea {
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--bg, #fff);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 9px;
  resize: vertical;
  font-family: var(--serif);
  line-height: 1.5;
  width: 100%;
  box-sizing: border-box;
}
.bid-edit-field textarea { min-height: 64px; }
.bid-edit-field input:focus,
.bid-edit-field textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}
.bid-edit-field input:disabled,
.bid-edit-field textarea:disabled {
  opacity: 0.55;
  cursor: progress;
}
.bid-edit-err {
  font-size: 12px;
  color: var(--danger);
  background: oklch(from var(--danger) l c h / 0.08);
  border: 1px solid oklch(from var(--danger) l c h / 0.3);
  border-radius: 6px;
  padding: 6px 10px;
}
.bid-edit-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Selection status chip strip — full set of Selection Items statuses shown
   above the bid list. Mirrors the visual vocabulary of the filter pills. */
.status-strip-section {
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface, oklch(from var(--ink) l c h / 0.02));
}
.status-strip-section .ss-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.status-strip-section .ss-head .upper {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.status-strip-section .ss-err {
  font-size: 12px;
  color: var(--danger);
}
.status-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.status-chip-btn {
  appearance: none;
  font: inherit;
  cursor: pointer;
  border-width: 1px;
  border-style: solid;
  transition: filter 0.12s, transform 0.12s, opacity 0.12s;
}
.status-chip-btn:not(:disabled):hover {
  filter: brightness(0.96);
  transform: translateY(-1px);
}
.status-chip-btn.active {
  cursor: default;
  outline: 2px solid var(--ink);
  outline-offset: -1px;
  font-weight: 600;
}
.status-chip-btn:disabled:not(.active) {
  opacity: 0.55;
  cursor: progress;
}

/* Bid-row inline status chips (builder only) */
.bid-status-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-soft);
}
/* The selection-status variant lives at the top of the detail (not nested
   in a bid row), so drop the dashed separator and give it standalone room. */
.bid-status-strip.selection-status-strip {
  margin: 0 0 18px;
  padding: 0;
  border-top: 0;
}

/* Bid / selection action row beneath the bid list. Buttons flow left,
   "Remove selection" pushes right via margin-left:auto in the JSX. */
.detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}
.bid-action-hint {
  font-size: 11.5px;
  color: var(--ink-3);
  font-style: italic;
}

/* Selection Status row — buttons styled like the bid-actions buttons
   beneath the bid list. The Awaiting / Received buttons are status
   indicators (not togglable; uploading a doc advances them). The Approve
   toggle is the only live action. */
.selection-status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}
.selection-status-row > .upper {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-right: 4px;
}
.selection-status-btn {
  /* Status-indicator buttons — they look like ghost buttons but the cursor
     stays default so they don't read as actionable. Live toggle variants
     (Un-approve / Un-accept) opt back in to pointer by being not-disabled. */
  cursor: default;
}
.selection-status-btn:not(:disabled) {
  cursor: pointer;
}
.selection-status-btn.is-current {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
/* Phase-tone variants for the design-phase button. Each has the same
   tinted-fill look used by the matching chip colors, but at button size. */
.selection-status-btn.is-awaiting {
  background: var(--warning-soft);
  color: var(--warning);
  border-color: oklch(from var(--warning) l c h / 0.4);
}
.selection-status-btn.is-received {
  background: var(--success-soft);
  color: var(--success);
  border-color: oklch(from var(--success) l c h / 0.4);
}
.selection-status-btn.is-rejected {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: oklch(from var(--danger) l c h / 0.4);
}
/* Greyed-out state for the bid-row indicator when the parent selection
   hasn't been approved yet — pairs with the disabled bid-action buttons
   below so the whole row reads as "locked, approve selection first." */
.selection-status-btn.is-locked {
  background: oklch(from var(--ink) l c h / 0.05);
  color: var(--ink-3);
  border-color: var(--border);
}

/* No global .btn:disabled rule lived in styles.css, so disabled buttons
   were rendering identically to enabled ones — only the cursor changed.
   This restores a clear greyed-out look (used by the Accept bid / Rebid /
   Reject bid buttons before approval, among others). */
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.4);
  pointer-events: none;
}
.btn-primary:disabled {
  /* Keep the primary's dark fill recognizable even when disabled. */
  background: var(--ink-4, oklch(0.7 0.01 60));
  border-color: var(--ink-4, oklch(0.7 0.01 60));
}
/* Make sure :hover never gains a color/background on a disabled button. */
.btn:disabled:hover,
.btn-primary:disabled:hover,
.btn-ghost:disabled:hover,
.btn-ghost.danger:disabled:hover,
.btn-danger-ghost:disabled:hover {
  background: inherit;
  color: inherit;
  border-color: inherit;
  transform: none;
  filter: grayscale(0.4);
}
/* Indicator buttons (Pending / Received / Rejected / locked) keep full
   opacity even when disabled — they're always disabled by design and
   their tinted colors should stay vivid. The is-current variant is the
   live Un-approve / Un-accept toggle; when it's conditionally disabled
   (e.g. locked by an accepted bid downstream), let the normal greyed
   .btn:disabled treatment apply so it visually reads as inactive. */
.selection-status-btn:disabled:is(.is-awaiting, .is-received, .is-rejected, .is-locked) {
  opacity: 1;
}
.selection-status-btn.is-locked,
.selection-status-btn.is-locked:disabled {
  opacity: 1;
  filter: none;
}
.bid-status-strip .upper {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-right: 4px;
}
.bid-status-err {
  font-size: 11.5px;
  color: var(--danger);
  margin-left: 6px;
}
.bid-price {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.bid-price .amount {
  font-size: 17px;
  color: var(--ink);
}
.bid-price .approved-tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--success);
  margin-top: 3px;
  font-family: var(--sans);
}

/* Comments */
.comments {
  display: flex; flex-direction: column; gap: 14px;
  margin-bottom: 18px;
}
.comment {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: start;
}
.comment-body {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 10px 14px;
}
.comment.builder .comment-body { background: var(--sage-soft); border-color: transparent; }
.comment-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.comment-head .who {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--ink);
}
.comment-head .when {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
}
.comment-text {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
}
.comment-compose {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.comment-compose textarea {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-family: var(--sans);
  font-size: 13px;
  outline: none;
  resize: vertical;
  min-height: 56px;
}
.comment-compose textarea:focus { border-color: var(--ink); }

/* ---- Budget — SCS Group ------------------------------- */
.scs-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 14px;
  overflow: hidden;
}
.scs-head {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 24px;
  align-items: center;
  padding: 14px 20px;
  cursor: pointer;
  transition: background 0.12s;
}
.scs-head:hover { background: var(--surface-2); }
.scs-title {
  display: flex; align-items: center; gap: 12px;
}
.scs-title h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 16px;
  margin: 0;
  letter-spacing: -0.005em;
}
.scs-title .scs-count {
  font-size: 11.5px;
  color: var(--ink-3);
  padding: 2px 8px;
  background: var(--bg-deep);
  border-radius: 999px;
}
.scs-bar {
  display: flex;
  align-items: center;
  gap: 14px;
}
.scs-bar .bar {
  flex: 1;
  height: 6px;
  background: var(--bg-deep);
  border-radius: 999px;
  position: relative;
  overflow: hidden;
}
.scs-bar .bar .fill {
  position: absolute;
  top: 0; height: 100%;
  border-radius: 999px;
}
.scs-bar .bar .fill.drawn { left: 0; background: var(--ink); }
.scs-bar .bar .fill.pending { background: var(--accent); opacity: 0.6; }
.scs-nums {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono);
  font-size: 12.5px;
  white-space: nowrap;
  min-width: 140px;
  justify-content: flex-end;
}
.scs-body {
  border-top: 1px solid var(--border-soft);
}
.line-row {
  display: grid;
  grid-template-columns: 1.6fr 1.6fr 1fr 1fr;
  gap: 16px;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13px;
}
.line-row:last-child { border-bottom: 0; }
.line-row:hover { background: var(--surface-2); }
.line-row .lr-name { min-width: 0; }
.line-row .lr-contractor {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 3px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.line-row .lr-disc {
  background: var(--bg-deep);
  padding: 1px 6px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-2);
  text-transform: lowercase;
}
.line-row .lr-bar { display: flex; align-items: center; }
.line-row .lr-bar .bar {
  width: 100%;
  height: 4px;
  background: var(--bg-deep);
  border-radius: 999px;
  position: relative;
  overflow: hidden;
}
.line-row .lr-bar .bar .fill {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 999px;
}
.line-row .lr-bar .bar .fill.drawn { left: 0; background: var(--ink); }
.line-row .lr-bar .bar .fill.pending { background: var(--accent); opacity: 0.6; }
.line-row .lr-nums {
  display: flex; flex-direction: column; gap: 1px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  text-align: right;
}
.line-row .lr-nums .lr-num.muted { color: var(--ink-3); font-size: 11px; }
.line-row .lr-rem { font-size: 12px; font-family: var(--mono); text-align: right; }
.line-row .lr-rem .muted { color: var(--ink-3); }

/* Builder-only inline allowance editing inside the Budget line rows */
.line-row.editing { background: oklch(from var(--accent) 0.97 0.02 h); }
.line-row .lr-nums { align-items: flex-end; }
.line-row .lr-nums .allow-cell.editable {
  cursor: text;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  padding: 1px 4px;
  margin: -1px -4px;
  border-radius: 6px;
  transition: background 0.12s;
}
.line-row .lr-nums .allow-cell.editable .allow-pencil {
  opacity: 0;
  margin-left: 5px;
  font-size: 10px;
  color: var(--accent);
  transition: opacity 0.12s;
}
.line-row:hover .lr-nums .allow-cell.editable .allow-pencil { opacity: 0.6; }
.line-row .lr-nums .allow-cell.editable:hover {
  background: oklch(from var(--accent) 0.95 0.03 h);
  color: var(--ink);
}
.line-row .lr-nums .allow-cell.editable:hover .allow-pencil { opacity: 1; }
.line-row .lr-nums .allow-editor { position: relative; }

/* ---- Draws ---------------------------------------------- */
.list-row.lr-draw {
  grid-template-columns: 130px 100px 130px 110px 110px 1fr 18px;
}
.list-row.lr-draw.open { background: var(--surface-2); }
.list-row.lr-draw .small { font-size: 12px; color: var(--ink-3); }
.draw-detail {
  background: var(--bg-deep);
  padding: 18px 28px 24px 60px;
  border-bottom: 1px solid var(--border-soft);
}
.alloc-row {
  display: grid;
  grid-template-columns: 1fr 140px 110px;
  gap: 16px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13px;
}
.alloc-row:last-child { border-bottom: 0; }
.alloc-row .alloc-name { font-family: var(--serif); }
.alloc-row .alloc-contractor { color: var(--ink-3); font-family: var(--sans); font-size: 11.5px; }
.alloc-row .alloc-disc {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  text-transform: lowercase;
}
.alloc-row .alloc-amt {
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-size: 13px;
  color: var(--ink);
}
.draw-notes {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}
.draw-notes .upper {
  display: block;
  margin-bottom: 4px;
}
.draw-notes p {
  margin: 0;
  font-family: var(--serif);
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.55;
}

/* ---- Misc reset ---------------------------------------- */
.list-row.lr-selection .deadline,
.list-row.lr-selection .allowance,
.list-row.lr-budget .num,
.list-row.lr-doc .num,
.list-row.lr-draw .num {
  font-variant-numeric: tabular-nums;
}

/* Improve page-head a bit */
.page-head .ttl { font-size: 32px; }

/* =====================================================================
   LOGIN GATE — role tabs + sign-in card
   ===================================================================== */
.login-card { max-width: 480px; }
.role-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  background: var(--bg-deep);
  padding: 6px;
  border-radius: calc(var(--radius) + 2px);
  border: 1px solid var(--border-soft);
  margin: 4px 0 18px 0;
}
.role-tab {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 10px 8px 11px;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  color: var(--ink-2);
}
.role-tab:hover { background: var(--surface); }
.role-tab .rt-label {
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--ink);
}
.role-tab .rt-sub {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.role-tab.active {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.role-tab.active .rt-label { color: var(--accent-deep); }

/* hint under input */
.fld .hint { font-size: 11.5px; color: var(--ink-3); margin-top: 6px; line-height: 1.45; }
.fld .hint code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }

/* =====================================================================
   PROJECT SWITCHER — popover variant
   ===================================================================== */
.proj-switcher-wrap { position: relative; }
.proj-switcher {
  appearance: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  border: 1px solid transparent;
  background: var(--surface);
  cursor: default;
}
.proj-switcher.interactive { cursor: pointer; }
.proj-switcher.interactive:hover { border-color: var(--border); }
.proj-switcher .label-block .upper {
  display: flex; align-items: center; gap: 6px;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3);
}
.proj-switcher .count-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 16px; padding: 0 5px;
  font-size: 10px; font-weight: 600;
  background: var(--accent-soft); color: var(--accent-deep);
  border-radius: 999px;
  letter-spacing: 0;
}
.proj-switcher .proj-addr {
  font-size: 11px;
  color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 1px;
}

.proj-pop {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 6px);
  z-index: 50;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 2px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
  overflow: hidden;
  max-height: 360px;
  display: flex; flex-direction: column;
}
.proj-pop-search { padding: 8px 8px 0 8px; }
.proj-pop-search input {
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-deep);
  font: inherit;
  font-size: 12.5px;
  outline: none;
}
.proj-pop-search input:focus { border-color: var(--accent); background: var(--surface); }
.proj-pop-list { overflow-y: auto; padding: 6px; }
.proj-pop-item {
  appearance: none;
  width: 100%;
  text-align: left;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
}
.proj-pop-item:hover { background: var(--bg-deep); }
.proj-pop-item.active { background: var(--accent-soft); }
.proj-pop-item.active .ppi-name { color: var(--accent-deep); }
.ppi-main { flex: 1; min-width: 0; }
.ppi-name {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ppi-sub {
  font-size: 11.5px;
  color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}
.status-chip {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: var(--bg-deep);
  color: var(--ink-3);
  flex-shrink: 0;
}
.status-chip.ok    { color: var(--sage); border-color: oklch(from var(--sage) l c h / 0.3); background: var(--sage-soft); }
.status-chip.muted { color: var(--ink-3); }
.proj-pop-empty {
  padding: 18px 12px;
  font-size: 12px; color: var(--ink-3); text-align: center;
}

/* =====================================================================
   SIDEBAR ACCOUNT BLOCK
   ===================================================================== */
.sidebar-account {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border-soft);
}
.account-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px;
  border-radius: var(--radius);
}
.account-row .name {
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.account-row .role {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px;
  color: var(--ink-3);
  white-space: nowrap; overflow: hidden;
  margin-top: 2px;
}
.account-row .role-email {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.role-pill {
  display: inline-flex; align-items: center;
  padding: 1px 7px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  background: var(--ink-soft, var(--bg-deep));
  color: var(--ink-2);
  border: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.role-pill.client   { background: var(--bg-deep); color: var(--ink-2); }
.role-pill.designer { background: var(--sage-soft); color: var(--sage); border-color: oklch(from var(--sage) l c h / 0.25); }
.role-pill.builder  { background: var(--accent-soft); color: var(--accent-deep); border-color: oklch(from var(--accent) l c h / 0.25); }

.signout-btn {
  flex-shrink: 0;
  opacity: 0.55;
  transition: opacity 0.15s, background 0.15s;
}
.signout-btn:hover {
  opacity: 1;
  background: var(--danger-soft);
  color: var(--danger);
}

.avatar.clay { background: var(--accent-soft); color: var(--accent-deep); }
.avatar.ocean { background: oklch(0.93 0.04 245); color: oklch(0.45 0.13 245); }
.role-pill.vendor { background: oklch(0.93 0.04 245); color: oklch(0.45 0.13 245); border-color: oklch(0.55 0.13 245 / 0.25); }

/* =====================================================================
   SELECTIONS — sub-tabs (Decisions / Allowances)
   ===================================================================== */
.sub-tabs {
  display: flex;
  gap: 4px;
  margin: 18px 0 16px 0;
  border-bottom: 1px solid var(--border-soft);
}
.sub-tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 10px 4px 11px;
  margin-right: 18px;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.15s, border-color 0.15s;
  position: relative;
  top: 1px; /* overlap the parent border */
}
.sub-tab:hover { color: var(--ink); }
.sub-tab.active { color: var(--ink); border-bottom-color: var(--accent); }
.sub-tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  background: var(--bg-deep); color: var(--ink-3);
  border-radius: 999px;
}
.sub-tab.active .sub-tab-count { background: var(--accent-soft); color: var(--accent-deep); }
.sub-tab-flag {
  font-family: var(--sans, inherit);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-deep);
  background: var(--accent-soft);
  padding: 2px 7px;
  border-radius: 999px;
}

/* =====================================================================
   ALLOWANCES PANEL
   ===================================================================== */
.allow-wrap { display: flex; flex-direction: column; gap: 22px; }

.allow-summary {
  display: flex; flex-wrap: wrap;
  align-items: flex-end;
  gap: 26px 32px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  margin-bottom: 4px;
}
.allow-stat { display: flex; flex-direction: column; gap: 4px; min-width: 130px; flex: 0 0 auto; }
.allow-stat .upper {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.allow-stat .val {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.05;
  color: var(--ink);
}
.allow-stat .val.warn { color: var(--accent-deep); }
.allow-stat .val.mono { font-family: var(--mono); font-size: 20px; }
.allow-stat .delta {
  font-family: var(--mono);
  font-size: 11px;
  margin-top: 2px;
}
.allow-stat .delta.over { color: var(--danger); }
.allow-stat .delta.under { color: var(--sage); }

.allow-group-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-deep);
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
}
.allow-group-toggle .upper {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  padding: 0 6px 0 8px;
}
.allow-group-toggle button {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 4px 12px;
  border-radius: 999px;
  font: inherit;
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
}
.allow-group-toggle button:hover { color: var(--ink); background: var(--surface); }
.allow-group-toggle button.active {
  background: var(--accent-soft, var(--surface));
  color: var(--accent-deep);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  border: 1px solid oklch(from var(--accent) l c h / 0.3);
}

.allow-group {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.allow-group-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-deep);
}
.allow-group-head h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.allow-group-head .meta {
  display: inline-flex; gap: 8px;
  font-size: 12px; color: var(--ink-3);
}
.allow-group-head .meta .dot { color: var(--ink-4); }

.allow-table { display: flex; flex-direction: column; }
.allow-row {
  display: grid;
  grid-template-columns: 1fr 150px 150px 160px 18px;
  align-items: center;
  gap: 18px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-soft);
  transition: background 0.12s;
}
.allow-row:last-child { border-bottom: 0; }
.allow-row.clickable { cursor: pointer; }
.allow-row.clickable:hover { background: var(--bg-deep); }
.allow-row.clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.allow-row.muted { background: oklch(from var(--accent) 0.97 0.02 h); }

/* Placeholder card on Decisions tab (for client-selectable PLIs with no Selection Item) */
.sel-card-live.placeholder {
  background: repeating-linear-gradient(
    135deg,
    var(--surface) 0px,
    var(--surface) 8px,
    var(--bg-deep) 8px,
    var(--bg-deep) 16px
  );
  border-style: dashed;
  cursor: default;
}
.sel-card-live.placeholder:hover { transform: none; box-shadow: none; }
.sel-card-live.placeholder .name { color: var(--ink-2); }

/* Placeholder card — drag-over + upload state */
.sel-card-live.placeholder.drag-over {
  background: oklch(from var(--accent) l c h / 0.08);
  border-color: var(--accent);
  border-style: solid;
  box-shadow: 0 0 0 3px oklch(from var(--accent) l c h / 0.12);
}
.sel-card-live.placeholder.uploading {
  opacity: 0.7;
  cursor: progress;
}
.sel-card-live.placeholder .card-action.approve {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  position: relative;
}
.sel-card-live.placeholder .card-action.approve input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.sel-card-live.placeholder .card-action.is-busy { opacity: 0.6; cursor: progress; }

.allow-row .num { text-align: right; }
.allow-row .mono { font-family: var(--mono); font-size: 12.5px; }
.allow-row .scs { color: var(--ink-3); font-size: 11.5px; }
.allow-row .item { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.allow-row .iname {
  font-size: 13.5px;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.allow-row .ihint { font-size: 11px; color: var(--ink-3); }
.allow-row .delta.inline {
  margin-left: 6px;
  font-size: 10.5px;
  padding: 1px 5px;
  border-radius: 999px;
}
.allow-row .delta.inline.over { background: oklch(from var(--danger) l c h / 0.12); color: var(--danger); }
.allow-row .delta.inline.under { background: var(--sage-soft); color: var(--sage); }
.allow-row .dim { color: var(--ink-4); }
.allow-row .chev { color: var(--ink-4); display: flex; justify-content: flex-end; }
.allow-row.clickable:hover .chev { color: var(--accent-deep); }

.allow-row-head {
  background: transparent;
  border-bottom: 1px solid var(--border);
  padding-top: 10px; padding-bottom: 10px;
}
.allow-row-head > span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

/* Status chips inside allowance rows */
.allow-chip {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid transparent;
}
.allow-chip.muted { background: var(--bg-deep); color: var(--ink-3); border-color: var(--border-soft); }
.allow-chip.warn  { background: var(--accent-soft); color: var(--accent-deep); border-color: oklch(from var(--accent) l c h / 0.3); }
.allow-chip.ok    { background: var(--sage-soft);   color: var(--sage);        border-color: oklch(from var(--sage) l c h / 0.3); }
.allow-chip.info  { background: oklch(from var(--ink) 0.95 0.005 h); color: var(--ink-2); border-color: var(--border-soft); }

/* Builder-only inline allowance editor */
.allow-row .allow-cell.editable {
  cursor: text;
  position: relative;
}
.allow-row .allow-cell.editable .allow-pencil {
  opacity: 0;
  margin-left: 6px;
  font-size: 10px;
  color: var(--ink-4);
  transition: opacity 0.12s;
}
.allow-row .allow-cell.editable:hover .allow-pencil { opacity: 1; }
.allow-row .allow-cell.editable:hover {
  background: oklch(from var(--accent) 0.97 0.02 h);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px oklch(from var(--accent) l c h / 0.25);
}
.allow-row.editing { background: oklch(from var(--accent) 0.97 0.02 h); }
.allow-row .allow-cell.is-editing { overflow: visible; }
.allow-editor {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
  position: relative;
}
.allow-input-wrap {
  display: inline-flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 1px 6px 1px 8px;
  box-shadow: 0 0 0 3px oklch(from var(--accent) l c h / 0.12);
}
.allow-input-wrap .allow-prefix {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
  margin-right: 2px;
}
.allow-input-wrap input {
  appearance: none;
  background: transparent;
  border: 0;
  outline: 0;
  font: inherit;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink);
  text-align: right;
  width: 84px;
  padding: 3px 0;
}
.allow-btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-2);
  width: 24px; height: 24px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  padding: 0;
}
.allow-btn:hover { background: var(--bg-deep); }
.allow-btn:disabled { opacity: 0.5; cursor: progress; }
.allow-btn.ok {
  background: var(--sage);
  border-color: var(--sage);
  color: #fff;
}
.allow-btn.ok:hover { background: oklch(from var(--sage) calc(l - 0.04) c h); }
.allow-btn.cancel:hover { color: var(--danger); border-color: oklch(from var(--danger) l c h / 0.4); }
.allow-edit-error {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: oklch(from var(--danger) l c h / 0.1);
  color: var(--danger);
  border: 1px solid oklch(from var(--danger) l c h / 0.3);
  font-size: 11px;
  font-family: var(--sans, inherit);
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 2;
}
.allow-row-head .head-hint {
  text-transform: none;
  letter-spacing: 0;
  font-size: 10px;
  color: var(--accent-deep);
  font-weight: 500;
  margin-left: 4px;
}

/* Selection detail — quick action row (mirrors card actions) */
.sd-action-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin: 0 0 16px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}
.sd-action-row .sd-action-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-3);
  margin-right: 6px;
}
.sd-action-row .card-action { font-size: 12.5px; padding: 6px 12px; }

/* Danger variant for ghost buttons (used by Remove selection) */
.btn-ghost.danger {
  color: var(--danger);
  border-color: oklch(from var(--danger) l c h / 0.4);
}
.btn-ghost.danger:hover {
  color: var(--danger);
  background: oklch(from var(--danger) l c h / 0.08);
  border-color: var(--danger);
}

/* =====================================================================
   DESIGN DOCUMENTS — between Bids and Comments on the selection detail
   ===================================================================== */
.design-note {
  background: var(--bg-deep);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 12px 14px 14px;
  margin-bottom: 14px;
}
.design-note .upper {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.design-note p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
  white-space: pre-wrap;
}

.design-docs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.design-doc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.design-doc-row:hover {
  background: var(--bg-deep);
  border-color: var(--border);
  transform: translateX(2px);
}
.design-doc-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-deep);
  color: var(--ink-2);
  border: 1px solid var(--border-soft);
}
.design-doc-icon.kind-drive { color: #1a73e8; background: oklch(0.97 0.03 250); border-color: oklch(0.92 0.06 250); }
.design-doc-icon.kind-figma { color: #a259ff; background: oklch(0.97 0.04 305); border-color: oklch(0.92 0.08 305); }
.design-doc-label { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dd-title {
  font-size: 13.5px;
  color: var(--ink);
  font-weight: 500;
}
.dd-url {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.design-doc-open {
  color: var(--ink-3);
  font-size: 14px;
  flex-shrink: 0;
  margin-left: 4px;
  transition: color 0.12s, transform 0.12s;
}
.design-doc-row:hover .design-doc-open {
  color: var(--accent-deep);
  transform: translate(2px, -2px);
}

.design-inspiration .upper {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-3);
}

.design-empty {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-deep);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--ink-3);
}
.design-empty > svg, .design-empty > [class*="icon"] {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--ink-4);
}
.design-empty .dd-empty-title {
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 2px;
}
.design-empty .dd-empty-hint {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-3);
}
.design-empty .dd-empty-hint .mono {
  font-family: var(--mono);
  font-size: 11px;
  background: var(--surface);
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid var(--border-soft);
  color: var(--ink-2);
}

/* Header w/ upload button */
.dd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 12px;
}
.dd-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.dd-upload-btn:hover {
  background: var(--accent-soft);
  border-color: oklch(from var(--accent) l c h / 0.4);
  color: var(--accent-deep);
}
.dd-upload-btn.busy { opacity: 0.6; cursor: progress; }

/* Drop zone (shown when section is empty + user can upload) */
.dd-dropzone {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 18px;
  background: var(--bg-deep);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.dd-dropzone:hover {
  background: oklch(from var(--accent) l c h / 0.05);
  border-color: oklch(from var(--accent) l c h / 0.5);
}
.dd-dropzone.drag {
  background: oklch(from var(--accent) l c h / 0.08);
  border-color: var(--accent);
  border-style: solid;
}
.dd-dropzone.busy { opacity: 0.7; cursor: progress; }
.dd-dropzone > svg {
  flex-shrink: 0;
  color: var(--ink-4);
}
.dd-dz-title { font-size: 13.5px; color: var(--ink); }
.dd-dz-hint  { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

.dd-upload-error {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: oklch(from var(--danger) l c h / 0.08);
  color: var(--danger);
  border: 1px solid oklch(from var(--danger) l c h / 0.25);
  border-radius: var(--radius);
  font-size: 12px;
  margin-bottom: 12px;
}

/* Drag overlay shown when dragging files onto a non-empty section */
.design-docs-section.drag {
  outline: 2px dashed var(--accent);
  outline-offset: 6px;
  border-radius: 6px;
}
.dd-drag-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: oklch(from var(--accent) l c h / 0.18);
  backdrop-filter: blur(4px);
  border-radius: var(--radius);
  z-index: 5;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent-deep);
  pointer-events: none;
  border: 1.5px dashed var(--accent);
}
.dd-drag-overlay svg { color: var(--accent-deep); }

/* =====================================================================
   DOCUMENTS — project-level page (home plans, surveys, permits, etc.)
   ===================================================================== */
.documents-view {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  min-height: 60vh;
}
.documents-view.drag {
  outline: 2px dashed var(--accent);
  outline-offset: 6px;
  border-radius: 6px;
}
.documents-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.documents-head .page-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 32px;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--ink);
}
.documents-head .page-sub {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-3);
  max-width: 56ch;
  line-height: 1.55;
}
.documents-head .page-sub .project-name {
  color: var(--ink);
  font-weight: 500;
}
.documents-head .btn.is-busy { opacity: 0.6; cursor: progress; }

.documents-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.count-pill {
  display: inline-block;
  margin-left: 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  background: var(--bg-deep);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 1px 8px;
  vertical-align: middle;
}
.insp-tile-meta {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 4px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Doc category section */
.doc-section {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 16px 18px 18px;
  position: relative;
  transition: border-color 0.12s, background 0.12s;
}
.doc-section.drag {
  border-color: var(--accent);
  background: oklch(from var(--accent) l c h / 0.04);
  border-style: solid;
}
.doc-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.doc-section-hint {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 2px;
}

/* Document card grid (thumbnails + label) */
.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.doc-card {
  position: relative;
  background: var(--bg-deep);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.doc-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  border-color: var(--border);
}
.doc-card.removing { opacity: 0.4; pointer-events: none; }

.doc-card-thumb {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--surface);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.doc-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.doc-card-pdf,
.doc-card-generic {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--ink-3);
  background: linear-gradient(135deg, var(--surface) 0%, var(--bg-deep) 100%);
}
.doc-card-pdf img { width: 100%; height: 100%; object-fit: cover; }
.doc-ext {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  padding: 2px 7px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.doc-card-open {
  position: absolute;
  top: 8px; right: 8px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  opacity: 0;
  transition: opacity 0.15s;
  border: 1px solid var(--border-soft);
}
.doc-card:hover .doc-card-open { opacity: 1; }
.doc-card-meta {
  padding: 10px 12px 12px;
  background: var(--surface);
  border-top: 1px solid var(--border-soft);
}
.doc-card-name {
  font-size: 12.5px;
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-card-sub {
  font-size: 11px;
  font-family: var(--mono);
  color: var(--ink-3);
  margin-top: 2px;
}
.doc-card-del {
  position: absolute;
  top: 8px; left: 8px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--border);
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  opacity: 0;
  transition: opacity 0.15s, color 0.12s, border-color 0.12s;
  z-index: 3;
}
.doc-card:hover .doc-card-del { opacity: 1; }
.doc-card-del:hover {
  color: var(--danger);
  border-color: oklch(from var(--danger) l c h / 0.4);
}
.doc-card-del:disabled { opacity: 0.4; cursor: progress; }

/* Doc rows with a delete button — wrap with relative position */
.design-doc-row.has-actions {
  padding: 0;
  position: relative;
  overflow: hidden;
}
.design-doc-row.has-actions .dd-row-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  text-decoration: none;
  color: inherit;
  flex: 1;
  min-width: 0;
}
.design-doc-row.has-actions:hover { background: var(--bg-deep); }
.dd-row-del,
.insp-tile-del {
  position: absolute;
  top: 8px; right: 8px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, color 0.12s, border-color 0.12s;
  padding: 0;
  z-index: 2;
}
.design-doc-row.has-actions:hover .dd-row-del,
.insp-tile-wrap:hover .insp-tile-del {
  opacity: 1;
}
.dd-row-del:hover,
.insp-tile-del:hover {
  color: var(--danger);
  border-color: oklch(from var(--danger) l c h / 0.4);
}
.dd-row-del:disabled,
.insp-tile-del:disabled { opacity: 0.4; cursor: progress; }

.design-doc-row.removing,
.insp-tile-wrap.removing { opacity: 0.4; pointer-events: none; }

/* Wrap around insp-tile so delete button can position absolutely */
.insp-tile-wrap {
  position: relative;
  display: block;
}

@media (max-width: 900px) {
  .allow-row { grid-template-columns: 1fr 110px 110px 140px 18px; }
}

/* Clickable team-member row */
.contact-row--clickable {
  appearance: none;
  background: transparent;
  border: 0;
  font-family: inherit;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.contact-row--clickable .icon { color: var(--ink-3); opacity: 0; transition: opacity 0.15s, transform 0.15s; }
.contact-row--clickable:hover .icon { opacity: 1; transform: translateX(2px); }

/* =====================================================================
   CONTACT MODAL — popup with email / phone / website
   ===================================================================== */
.contact-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
  padding: 22px 22px 18px;
  z-index: 101;
}
.contact-modal .modal-close {
  position: absolute; top: 12px; right: 12px;
}
.cm-head {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 14px;
}
.cm-head .avatar { width: 44px; height: 44px; font-size: 16px; }
.cm-id { min-width: 0; flex: 1; }
.cm-name { font-family: var(--serif); font-size: 20px; line-height: 1.15; color: var(--ink); }
.cm-sub  { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.cm-fields { display: flex; flex-direction: column; gap: 4px; }
.cm-field {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 10px;
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: background 0.12s, color 0.12s;
}
.cm-field:hover { background: var(--bg-deep); color: var(--accent-deep); }
.cm-icn {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--bg-deep);
  color: var(--ink-3);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cm-field:hover .cm-icn { background: var(--accent-soft); color: var(--accent-deep); }
.cm-fval { display: flex; flex-direction: column; min-width: 0; }
.cm-flabel {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.cm-fvalue {
  font-size: 13.5px;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 1px;
}
.cm-empty {
  padding: 18px 8px;
  font-size: 12.5px;
  color: var(--ink-3);
  text-align: center;
}

/* Delete-comment button (builder only) */
.comment-del {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-3);
  width: 20px; height: 20px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0;
  margin-left: auto;
  transition: opacity 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
}
.comment:hover .comment-del { opacity: 0.55; }
.comment-del:hover { opacity: 1; background: var(--danger-soft); color: var(--danger); border-color: oklch(from var(--danger) l c h / 0.25); }
.comment-del:disabled { opacity: 0.4; cursor: wait; }


/* =====================================================================
   SETTINGS VIEW — site-wide settings (builder only)
   ===================================================================== */
.settings-view {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 60vh;
}

/* Top-level sections (User control / Preferences / Templates) */
.settings-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.settings-tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 10px 14px 11px;
  font: inherit;
  font-size: 13px;
  color: var(--ink-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: -1px;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.settings-tab:hover:not(.disabled) {
  color: var(--ink);
}
.settings-tab.active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
.settings-tab.disabled {
  color: var(--ink-4);
  cursor: not-allowed;
}
.settings-tab .soon-pill {
  font-size: 9px;
  font-family: var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--surface-2);
  color: var(--ink-3);
  padding: 2px 5px;
  border-radius: 3px;
  border: 1px solid var(--border-soft);
}

.settings-section {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--pad);
  box-shadow: var(--shadow-card);
}

/* ---- User-control sub-tabs (Clients / Designers / Employees) ------ */
.uc-kind-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.uc-kind {
  appearance: none;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 7px 13px 7px 11px;
  font: inherit;
  font-size: 12.5px;
  color: var(--ink-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.uc-kind:hover { background: var(--surface); border-color: var(--border); }
.uc-kind.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface);
}
.uc-kind.active .uc-kind-count {
  background: rgba(255,255,255,0.18);
  color: var(--surface);
}
.uc-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--ink-3);
  flex-shrink: 0;
}
.uc-dot.tone-ink   { background: var(--ink); }
.uc-dot.tone-sage  { background: var(--sage); }
.uc-dot.tone-clay  { background: var(--accent); }
.uc-dot.tone-ocean { background: oklch(0.55 0.13 245); }
.uc-kind-label { font-weight: 500; }
.uc-kind-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 17px; padding: 0 5px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-3);
  border: 1px solid var(--border-soft);
  font-size: 10.5px;
  font-family: var(--mono);
}
.uc-kind.active .uc-kind-count { border-color: transparent; }

/* ---- Section head: title + search + add button -------------------- */
.uc-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.uc-blurb {
  flex: 1;
  min-width: 220px;
}
.uc-desc {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.5;
}
.uc-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.uc-search {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.uc-search svg {
  position: absolute;
  left: 9px;
  color: var(--ink-4);
  pointer-events: none;
}
.uc-search input {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 7px 12px 7px 28px;
  font: inherit;
  font-size: 13px;
  width: 220px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.12s;
}
.uc-search input:focus {
  border-color: var(--accent);
  background: var(--surface);
}
.uc-add {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ---- List of records ---------------------------------------------- */
.uc-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-soft);
}
.uc-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(240px, 1.8fr) auto auto;
  gap: 16px;
  align-items: center;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border-soft);
  transition: background 0.12s;
}
.uc-row:hover { background: var(--surface-2); }
.uc-row-id {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.uc-row-name-wrap { min-width: 0; }
.uc-row-name {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.uc-row-sub {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.uc-row-contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.uc-row-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-2);
  text-decoration: none;
  max-width: 100%;
}
.uc-row-link span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.uc-row-link:hover { color: var(--accent-deep); }
.uc-row-link svg { color: var(--ink-4); flex-shrink: 0; }
.uc-row-status { display: flex; }
.uc-status-chip {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: var(--mono);
  background: var(--surface-2);
  color: var(--ink-3);
  border: 1px solid var(--border-soft);
}
.uc-status-chip.status-active,
.uc-status-chip.status-warranty {
  color: var(--success);
  background: var(--success-soft);
  border-color: oklch(from var(--success) l c h / 0.25);
}
.uc-status-chip.status-on-hold,
.uc-status-chip.status-prospect {
  color: var(--warning);
  background: var(--warning-soft);
  border-color: oklch(from var(--warning) l c h / 0.25);
}
.uc-status-chip.status-closed,
.uc-status-chip.status-inactive,
.uc-status-chip.status-past-collaborator {
  color: var(--ink-3);
}
.uc-row-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}
.uc-row-actions .icon-btn { width: 28px; height: 28px; }
.uc-row-actions .icon-btn.danger:hover { color: var(--danger); background: var(--danger-soft); }

/* Empty / search-empty state */
.uc-empty {
  padding: 36px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-3);
  font-style: italic;
  border-top: 1px solid var(--border-soft);
}

/* ---- Employees table missing - setup hint ------------------------- */
.uc-setup {
  display: flex;
  gap: 14px;
  padding: 20px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
}
.uc-setup-icn {
  width: 40px; height: 40px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.uc-setup-title {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink);
  margin-bottom: 6px;
}
.uc-setup p {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.55;
}
.uc-setup-list {
  margin: 0 0 10px;
  padding-left: 18px;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.8;
}
.uc-setup-list .mono {
  font-family: var(--mono);
  font-size: 11.5px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  padding: 1px 5px;
  border-radius: 3px;
}
.uc-setup-note {
  font-size: 12px !important;
  color: var(--ink-3) !important;
  font-style: italic;
}
.uc-setup-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.uc-setup-divider {
  position: relative;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-4);
  margin: 6px 0 10px;
  text-align: left;
}
.uc-setup-divider::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  border-top: 1px solid var(--border-soft);
  z-index: 0;
}
.uc-setup-divider span {
  position: relative;
  background: var(--surface-2);
  padding-right: 10px;
}

/* ---- Form modal --------------------------------------------------- */
.uc-form {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}
.uc-form-head {
  margin-bottom: 18px;
  padding-right: 28px;
}
.uc-form-sub {
  margin-top: 6px;
  font-size: 13px;
  color: var(--ink-3);
}
.uc-form-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.uc-form-body .fld { display: flex; flex-direction: column; gap: 5px; }
.uc-form-body .fld label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}
.uc-form-body .fld .req { color: var(--accent); }
.uc-form-body .fld input,
.uc-form-body .fld select {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 9px 11px;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.12s, background 0.12s;
}
.uc-form-body .fld input:focus,
.uc-form-body .fld select:focus {
  border-color: var(--accent);
  background: var(--surface);
}
.uc-form-body .fld.fld-error input,
.uc-form-body .fld.fld-error select {
  border-color: var(--danger);
}
.uc-form-body .fld .hint {
  font-size: 11.5px;
  color: var(--ink-3);
}
.uc-form-body .fld .hint-error {
  color: var(--danger);
}
.uc-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}

/* ---- Confirm-delete modal ---------------------------------------- */
.uc-confirm {
  width: min(440px, calc(100vw - 32px));
}
.uc-confirm-body {
  margin: 14px 0 6px;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.55;
}

/* On narrow screens collapse the row into stacked blocks */
@media (max-width: 760px) {
  .uc-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 14px 4px;
  }
  .uc-row-actions { justify-content: flex-end; }
  .uc-search input { width: 160px; }
}


/* =====================================================================
   TASKS — task list with grouping, modal, quick complete
   ===================================================================== */
.tasks-view {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 60vh;
}
.tasks-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.tasks-head-actions { display: flex; gap: 8px; }

/* ---- Lens tabs --------------------------------------------------- */
.task-lenses {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
}
.task-lens {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 10px 14px 12px;
  font: inherit;
  font-size: 13px;
  color: var(--ink-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: -1px;
  transition: color 0.12s, border-color 0.12s;
}
.task-lens:hover { color: var(--ink); }
.task-lens.active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
.task-lens-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 17px; padding: 0 6px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-3);
  border: 1px solid var(--border-soft);
  font-size: 10.5px;
  font-family: var(--mono);
}
.task-lens.active .task-lens-count {
  background: var(--accent-soft);
  color: var(--accent-deep);
  border-color: transparent;
}

/* ---- Filter strip ------------------------------------------------- */
.task-filters {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 6px 0 2px;
}
.task-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 1;
  min-width: 200px;
  max-width: 360px;
}
.task-search svg { position: absolute; left: 9px; color: var(--ink-4); pointer-events: none; }
.task-search input {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 7px 12px 7px 28px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  outline: none;
  width: 100%;
}
.task-search input:focus { border-color: var(--accent); background: var(--surface); }
.task-filter-group {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-3);
}
.task-filter-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10.5px;
}
.task-select {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 6px 8px;
  font: inherit;
  font-size: 12.5px;
  color: var(--ink);
  cursor: pointer;
}
.task-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-2);
  cursor: pointer;
}
.task-toggle input { accent-color: var(--accent); }

/* ---- Groups ------------------------------------------------------- */
.task-groups {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 8px;
}
.task-group { display: flex; flex-direction: column; }
.task-group-head {
  appearance: none;
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  font: inherit;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  cursor: pointer;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 4px;
}
.task-group-head:hover { color: var(--ink); }
.task-group-chev {
  transform: rotate(90deg);
  transition: transform 0.15s;
  color: var(--ink-4);
}
.task-group.collapsed .task-group-chev { transform: rotate(0deg); }
.task-group-label { letter-spacing: 0.08em; }
.task-group-count {
  background: var(--surface-2);
  color: var(--ink-3);
  border: 1px solid var(--border-soft);
  padding: 1px 7px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.02em;
}
.task-group.is-overdue .task-group-label { color: var(--danger); }
.task-group.is-overdue .task-group-count {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: oklch(from var(--danger) l c h / 0.25);
}

.task-group-list { display: flex; flex-direction: column; }

/* ---- Row --------------------------------------------------------- */
.task-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 6px;
  border-bottom: 1px solid var(--border-soft);
  transition: background 0.1s;
}
.task-row:hover { background: var(--surface-2); }
.task-row.done .task-title { text-decoration: line-through; color: var(--ink-3); }
.task-row.done .task-desc  { color: var(--ink-4); }
.task-row.blocked { background: oklch(from var(--danger) l c h / 0.03); }
.task-row.blocked:hover { background: oklch(from var(--danger) l c h / 0.06); }

/* Checkbox */
.task-check {
  flex-shrink: 0;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-4);
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  margin-top: 1px;
}
.task-check:hover { border-color: var(--success); }
.task-check.checked {
  background: var(--success);
  border-color: var(--success);
  color: var(--surface);
}
.task-check.small { width: 14px; height: 14px; border-width: 1.2px; }

/* Main content */
.task-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  cursor: pointer;
}
.task-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.task-title {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink);
  line-height: 1.3;
}
.task-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 999px;
}
.task-pill.urgent { background: var(--danger-soft); color: var(--danger); }
.task-pill.high   { background: var(--warning-soft); color: var(--warning); }
.task-pill.blocked {
  background: oklch(from var(--danger) l c h / 0.1);
  color: var(--danger);
  border: 1px solid oklch(from var(--danger) l c h / 0.3);
}
.task-meta-row {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 12px;
  color: var(--ink-3);
  flex-wrap: wrap;
}
.task-desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 400px;
}
.task-checklist-mini {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
}

/* Side meta */
.task-side {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.task-due {
  font-size: 11.5px;
  color: var(--ink-3);
  font-family: var(--mono);
  white-space: nowrap;
}
.task-due.over { color: var(--danger); font-weight: 500; }
.task-due.today { color: var(--accent-deep); font-weight: 500; }
.task-section-chip {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: var(--mono);
  padding: 2px 8px;
  border-radius: 3px;
  background: var(--surface-2);
  color: var(--ink-3);
  border: 1px solid var(--border-soft);
  white-space: nowrap;
}
.task-owner .avatar { width: 24px; height: 24px; font-size: 9px; }

/* Action buttons */
.task-actions {
  display: flex;
  align-items: center;
  gap: 1px;
  opacity: 0;
  transition: opacity 0.12s;
}
.task-row:hover .task-actions { opacity: 1; }
.task-actions .icon-btn { width: 26px; height: 26px; }
.task-actions .icon-btn.danger:hover { color: var(--danger); background: var(--danger-soft); }

/* Empty */
.task-empty {
  padding: 60px 24px;
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-3);
  font-style: italic;
}

/* ---- Form modal -------------------------------------------------- */
.task-form {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}
.task-form-head { margin-bottom: 18px; padding-right: 28px; }
.task-form-sub { margin-top: 6px; font-size: 13px; color: var(--ink-3); }
.task-form-body { display: flex; flex-direction: column; gap: 14px; }
.task-form-body .fld { display: flex; flex-direction: column; gap: 5px; }
.task-form-body .fld label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}
.task-form-body .fld .req { color: var(--accent); }
.task-form-body .fld input,
.task-form-body .fld select,
.task-form-body .fld textarea {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 9px 11px;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.12s, background 0.12s;
  font-family: var(--sans);
}
.task-form-body .fld textarea {
  resize: vertical;
  min-height: 60px;
  line-height: 1.5;
}
.task-form-body .fld input:focus,
.task-form-body .fld select:focus,
.task-form-body .fld textarea:focus {
  border-color: var(--accent);
  background: var(--surface);
}
.task-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.task-form-grid .fld-wide { grid-column: span 2; }

.task-checklist-edit {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
  padding: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}
.task-checklist-edit-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}
.task-checklist-edit-row.done .task-checklist-edit-text {
  text-decoration: line-through;
  color: var(--ink-3);
}
.task-checklist-edit-text {
  flex: 1;
  font-size: 13px;
  color: var(--ink);
}
.task-checklist-edit-row .icon-btn { width: 22px; height: 22px; }

.task-checklist-add {
  display: flex;
  gap: 6px;
}
.task-checklist-add input { flex: 1; }

.task-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}

@media (max-width: 720px) {
  .task-row {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "check main actions"
                          ". side side";
    gap: 8px 12px;
  }
  .task-check { grid-area: check; }
  .task-main { grid-area: main; }
  .task-side { grid-area: side; }
  .task-actions { grid-area: actions; opacity: 1; }
  .task-form-grid { grid-template-columns: 1fr; }
  .task-form-grid .fld-wide { grid-column: span 1; }
}


/* =====================================================================
   SCHEDULE TASKS PANEL — inline tasks for a schedule row
   ===================================================================== */
.sch-tasks-panel {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}
.sch-tasks-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.sch-tasks-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sch-tasks-count {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  background: var(--surface-2);
  color: var(--ink-3);
  border: 1px solid var(--border-soft);
  padding: 1px 6px;
  border-radius: 999px;
  text-transform: none;
}
.sch-tasks-count.done { color: var(--success); background: var(--success-soft); border-color: oklch(from var(--success) l c h / 0.25); }
.sch-tasks-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 5px 10px;
}

.sch-tasks-empty {
  font-size: 12.5px;
  color: var(--ink-3);
  font-style: italic;
  padding: 4px 2px;
}

.sch-tasks-add {
  display: flex;
  gap: 8px;
  padding: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  margin-bottom: 10px;
  align-items: center;
}
.sch-tasks-add-title {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 7px 11px;
  font: inherit;
  font-size: 13px;
  outline: none;
}
.sch-tasks-add-title:focus { border-color: var(--accent); }
.sch-tasks-add-due {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 6px 8px;
  font: inherit;
  font-size: 12px;
  outline: none;
  color: var(--ink-2);
}

.sch-tasks-list { display: flex; flex-direction: column; }
.sch-tasks-list.done .sch-task-row { opacity: 0.6; }

.sch-task-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 4px;
  font-size: 13px;
  border-bottom: 1px solid var(--border-soft);
}
.sch-task-row:last-child { border-bottom: 0; }
.sch-task-row.done .sch-task-title { text-decoration: line-through; color: var(--ink-3); }

.sch-task-check {
  flex-shrink: 0;
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 1.4px solid var(--ink-4);
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.sch-task-check:hover:not(:disabled) { border-color: var(--success); }
.sch-task-check:disabled { cursor: default; opacity: 0.6; }
.sch-task-check.checked {
  background: var(--success);
  border-color: var(--success);
  color: var(--surface);
}
.sch-task-title { flex: 1; color: var(--ink); }
.sch-task-blocked {
  font-size: 10px;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--danger-soft);
  color: var(--danger);
}
.sch-task-due {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
}
.sch-task-owner {
  font-size: 11px;
  color: var(--ink-3);
}

.sch-tasks-show-done {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 8px 2px 2px;
  font: inherit;
  font-size: 11.5px;
  color: var(--ink-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.sch-tasks-show-done:hover { color: var(--ink); }
.sch-tasks-show-done svg { transition: transform 0.15s; color: var(--ink-4); }

/* ---- New chip + label additions for tasks view ----------------- */
.task-sched-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--ink-3);
  font-family: var(--mono);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  padding: 1px 7px;
  border-radius: 3px;
}
.task-sched-link svg { color: var(--ink-4); }
.task-form-optional {
  font-family: var(--sans);
  font-size: 10.5px;
  color: var(--ink-4);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 4px;
  font-weight: 400;
}

/* ---- Decision (client decision request) ------------------------- */
.task-pill.decision {
  background: oklch(from var(--accent) l c h / 0.12);
  color: var(--accent-deep);
}
.task-pill.decision svg { color: var(--accent-deep); }
.task-for-hint {
  margin-top: 5px;
  font-size: 11px;
  color: var(--accent-deep);
}
.task-sched-link.chosen { color: var(--success, #5a7d52); }
.task-sched-link.chosen svg { color: var(--success, #5a7d52); }
.task-decide-btn { padding: 5px 14px; font-size: 12.5px; }

/* Decision setup prompts */
.decision-setup-banner, .decision-setup-inline {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 16px;
  border: 1px solid oklch(from var(--accent) l c h / 0.4);
  background: oklch(from var(--accent) l c h / 0.06);
  border-radius: 10px;
}
.decision-setup-inline { margin-top: 4px; }
.decision-setup-banner .dsb-text, .decision-setup-inline .dsb-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.decision-setup-banner strong, .decision-setup-inline strong { font-size: 13.5px; color: var(--ink); }
.decision-setup-banner span, .decision-setup-inline span { font-size: 12px; color: var(--ink-3); }
.decision-setup-banner .btn, .decision-setup-inline .btn { flex: none; }

/* Options editor (in the form) */
.opt-editor { display: flex; flex-direction: column; gap: 10px; }
.opt-empty { font-size: 12.5px; color: var(--ink-3); font-style: italic; padding: 4px 0; }
.opt-row {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px; border: 1px solid var(--border-soft); border-radius: 8px;
  background: var(--surface-2);
}
.opt-row-head { display: flex; align-items: center; gap: 8px; }
.opt-num {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.opt-row input { width: 100%; }
.opt-row .opt-product { flex: 1; }
.opt-file { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.opt-file-existing, .task-sched-link[href] { cursor: pointer; }
.opt-file-existing {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--accent-deep); text-decoration: none;
}
.opt-file-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--ink-2); cursor: pointer;
  border: 1px dashed var(--border); border-radius: 6px; padding: 4px 10px;
}
.opt-file-btn:hover { border-color: var(--ink-4); color: var(--ink); }
.opt-add { align-self: flex-start; }

/* Client decision chooser */
.decision-detail { font-size: 13.5px; color: var(--ink-2); margin: 0 0 14px; line-height: 1.5; }
.chooser-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.chooser-opt {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 9px;
  cursor: pointer; transition: border-color .12s, background .12s;
}
.chooser-opt:hover { border-color: var(--ink-4); }
.chooser-opt.sel { border-color: var(--accent); background: oklch(from var(--accent) l c h / 0.06); }
.chooser-opt input { position: absolute; opacity: 0; pointer-events: none; }
.chooser-radio {
  flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  border: 2px solid var(--border); position: relative;
}
.chooser-opt.sel .chooser-radio { border-color: var(--accent); }
.chooser-opt.sel .chooser-radio::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent);
}
.chooser-opt-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.chooser-opt-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.chooser-opt-links { display: flex; gap: 14px; flex-wrap: wrap; }
.chooser-opt-links a {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--accent-deep); text-decoration: none;
}
.chooser-opt-links a:hover { text-decoration: underline; }
.task-resource { display: flex; flex-direction: column; gap: 12px; }

/* ---- Selection detail: tagged tasks + revise composer + design versions -- */
.sel-tasks { display: flex; flex-direction: column; border: 1px solid var(--border-soft); border-radius: 10px; overflow: hidden; }
.revise-composer {
  margin-top: 10px; padding: 12px 14px;
  border: 1px solid oklch(from var(--accent) l c h / 0.4);
  background: oklch(from var(--accent) l c h / 0.05);
  border-radius: 10px; display: flex; flex-direction: column; gap: 8px;
}
.revise-composer .upper { font-size: 11px; letter-spacing: .05em; color: var(--ink-3); }
.revise-composer textarea {
  width: 100%; resize: vertical; font: inherit; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 7px; background: var(--paper);
}
.revise-actions { display: flex; justify-content: flex-end; gap: 8px; }

.dv-wrap { display: flex; flex-direction: column; gap: 14px; }
.dv-head { display: flex; align-items: center; justify-content: space-between; }
.dv-list { display: flex; flex-direction: column; gap: 14px; }
.dv-card {
  border: 1px solid var(--border); border-radius: 12px; padding: 16px;
  background: var(--paper); display: flex; flex-direction: column; gap: 12px;
}
.dv-card.is-latest { border-color: var(--ink-4); box-shadow: 0 1px 0 var(--border-soft); position: relative; }
.dv-card.drag { border-color: var(--accent); box-shadow: 0 0 0 2px oklch(from var(--accent) l c h / 0.25); }
.dv-drop-overlay {
  position: absolute; inset: 0; z-index: 2; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: oklch(from var(--accent) l c h / 0.1); color: var(--accent-deep);
  font-size: 14px; font-weight: 600; pointer-events: none;
}
.dv-attach-ind {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--border-soft);
  padding: 3px 8px; border-radius: 999px; margin-left: 4px;
}
.dv-attach-ind:hover { border-color: var(--ink-4); color: var(--ink); }
.dv-attach-ind img { width: 18px; height: 18px; object-fit: cover; border-radius: 3px; }
.designer-sel-images { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.dsi-tile { position: relative; }
.dsi-tile.removing { opacity: .4; pointer-events: none; }
.dsi-thumb { display: block; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-soft); }
.dsi-thumb img { display: block; width: 96px; height: 96px; object-fit: cover; }
.dv-image { display: block; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-soft); max-width: 108px; }
.dv-image img { display: block; width: 100%; height: auto; object-fit: cover; }
.dv-file-wrap { position: relative; }
.ci-tile { position: relative; }
.ci-tile.removing { opacity: 0.4; pointer-events: none; }
.ci-tile > a { display: block; width: 140px; height: 140px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-soft); }
.ci-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dv-file-wrap.removing { opacity: 0.4; pointer-events: none; }
.dsi-del {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--paper); color: var(--ink-2);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.dsi-del:hover { color: var(--danger); border-color: var(--danger); }
.dv-edit-btn { display: inline-flex; align-items: center; gap: 4px; appearance: none; background: transparent; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 11.5px; color: var(--ink-2); padding: 3px 9px; cursor: pointer; }
.dv-edit-btn:hover { border-color: var(--ink-4); color: var(--ink); }
.dv-details { display: flex; flex-direction: column; gap: 8px; }
.dv-edit { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--border-soft); border-radius: 9px; background: var(--surface-2); }
.dv-edit .fld label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); margin-bottom: 4px; }
.dv-edit input, .dv-edit textarea { width: 100%; font: inherit; padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--paper); }
.dv-dropzone {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 20px; border: 1.5px dashed var(--border); border-radius: 10px;
  background: var(--surface-2); cursor: pointer; text-align: center; color: var(--ink-2);
}
.dv-dropzone:hover { border-color: var(--accent); color: var(--ink); }
.dv-dropzone.drag { border-color: var(--accent); border-style: solid; background: oklch(from var(--accent) l c h / 0.08); color: var(--ink); }
.dv-dropzone-title { font-size: 13px; font-weight: 600; }
.dv-dropzone-sub { font-size: 11px; color: var(--ink-3); }
.dv-card-head { display: flex; align-items: center; gap: 10px; }
.dv-version { font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--ink); }
.dv-when { font-size: 11.5px; color: var(--ink-3); margin-left: auto; }
.dv-status {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 9px; border-radius: 999px;
}
.dv-status.submitted { background: var(--surface-2); color: var(--ink-2); }
.dv-status.revisions { background: var(--warning-soft, oklch(from var(--warning) l c h / 0.14)); color: var(--warning); }
.dv-status.approved { background: oklch(from var(--success, #5a7d52) l c h / 0.16); color: var(--success, #5a7d52); }
.dv-notes { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; white-space: pre-wrap; }
.dv-files { display: flex; flex-wrap: wrap; gap: 10px; }
.dv-file {
  display: flex; align-items: center; gap: 8px; text-decoration: none;
  border: 1px solid var(--border-soft); border-radius: 8px; padding: 8px 12px;
  color: var(--ink); background: var(--surface-2); max-width: 240px;
}
.dv-file img { width: 32px; height: 32px; object-fit: cover; border-radius: 4px; flex: none; }
.dv-file-name { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-addfile {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-size: 12.5px; color: var(--ink-2); border: 1px dashed var(--border);
  border-radius: 8px; padding: 8px 12px;
}
.dv-addfile:hover { border-color: var(--ink-4); color: var(--ink); }
.dv-addfile.standalone { align-self: flex-start; }
.dv-feedback {
  border-top: 1px solid var(--border-soft); padding-top: 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.dv-feedback-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.dv-feedback-text { font-size: 13px; color: var(--ink); line-height: 1.5; white-space: pre-wrap; }
.dv-fb-entries { display: flex; flex-direction: column; gap: 8px; }
.dv-fb-entry { border-left: 2px solid var(--border); padding: 2px 0 2px 10px; }
.dv-fb-entry-meta { display: flex; align-items: center; gap: 8px; }
.dv-fb-entry-meta .who { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.dv-fb-entry-meta .when { font-size: 11px; color: var(--ink-3); }
.dv-fb-entry-actions { display: inline-flex; gap: 2px; margin-left: auto; }
.dv-fb-entry-actions button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  color: var(--ink-3); padding: 3px; border-radius: 4px; display: inline-flex;
}
.dv-fb-entry-actions button:hover { color: var(--ink); background: var(--surface-2); }
.dv-fb-entry-actions button[title="Delete"]:hover { color: var(--danger); }
.dv-fb-entry-body { font-size: 13px; color: var(--ink-2); line-height: 1.45; white-space: pre-wrap; margin-top: 1px; }
.dv-fb-entry-edit { margin-top: 4px; display: flex; flex-direction: column; gap: 6px; }
.dv-fb-entry-edit textarea { width: 100%; font: inherit; padding: 7px 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--paper); resize: vertical; }
.dv-feedback-empty { font-size: 12.5px; color: var(--ink-3); font-style: italic; }
.dv-fb-clear {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; gap: 3px; margin-left: auto;
  font-size: 11px; color: var(--ink-3); text-transform: none; letter-spacing: 0;
}
.dv-fb-clear:hover { color: var(--danger); }
.dv-comment { display: flex; gap: 10px; }
.dv-comment-body { flex: 1; min-width: 0; }
.dv-comment-head { display: flex; align-items: baseline; gap: 8px; }
.dv-comment-head .who { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.dv-comment-head .when { font-size: 11px; color: var(--ink-3); }
.dv-comment-text { font-size: 13px; color: var(--ink-2); line-height: 1.45; white-space: pre-wrap; }
.dv-feedback-compose { display: flex; gap: 8px; align-items: flex-start; }
.dv-feedback-compose textarea {
  flex: 1; resize: vertical; font: inherit; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 7px; background: var(--paper);
}
.dv-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dv-revise-note { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--danger); margin-right: auto; }
.dd-empty-sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.comment-compose-actions, .dv-compose-actions { display: flex; align-items: center; gap: 8px; }
.comment-compose-actions { margin-top: 6px; justify-content: flex-end; }
.comment-atts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.comment-att {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  border: 1px solid var(--border-soft); border-radius: 7px; padding: 5px 9px;
  background: var(--surface-2); color: var(--ink); max-width: 220px; font-size: 12px;
}
.comment-att img { width: 24px; height: 24px; object-fit: cover; border-radius: 3px; flex: none; }
.comment-att-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dv-brand { font-size: 13px; font-weight: 600; color: var(--ink); }
.dv-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--accent-deep); text-decoration: none; }
.dv-link:hover { text-decoration: underline; }
.dv-old-tag { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.dv-history { margin-top: 14px; border: 1px solid var(--border-soft); border-radius: 10px; overflow: hidden; }
.dv-history-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); padding: 10px 14px 6px; }
.dv-history-row {
  display: flex; align-items: center; width: 100%;
  border-top: 1px solid var(--border-soft);
}
.dv-history-row:hover { background: var(--surface-2); }
.dv-history-open {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
  appearance: none; background: transparent; border: 0;
  font: inherit; text-align: left; cursor: pointer; padding: 10px 14px;
}
.dv-history-del {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  color: var(--ink-3); padding: 8px 12px; flex: none;
}
.dv-history-del:hover { color: var(--danger); }
.dv-history-name { flex: 1; min-width: 0; font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-history-when { font-size: 11px; color: var(--ink-3); flex: none; }


/* =====================================================================
   PERMISSIONS MATRIX — Settings → Permissions
   ===================================================================== */
.perm-control { display: flex; flex-direction: column; }

.perm-matrix-wrap {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: 6px;
}
.perm-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.perm-matrix th,
.perm-matrix td {
  padding: 0;
  text-align: left;
}
.perm-matrix thead tr {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-soft);
}
.perm-corner {
  padding: 12px 16px !important;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  font-weight: 500;
  width: 50%;
}
.perm-role-head {
  padding: 12px 10px !important;
  text-align: center !important;
  white-space: nowrap;
}
.perm-role-head .uc-dot {
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
}
.perm-role-label {
  font-size: 12.5px;
  color: var(--ink);
  font-weight: 500;
  vertical-align: middle;
}
.perm-matrix tbody tr {
  border-bottom: 1px solid var(--border-soft);
}
.perm-matrix tbody tr:last-child { border-bottom: 0; }
.perm-matrix tbody tr:hover { background: var(--surface-2); }

.perm-page-cell {
  padding: 11px 16px !important;
}
.perm-page-label {
  font-family: var(--serif);
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.2;
}
.perm-page-note {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 2px;
}
.perm-toggle-cell {
  text-align: center !important;
  width: 88px;
}
.perm-toggle {
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--surface);
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
}
.perm-toggle:hover { border-color: var(--accent); }
.perm-toggle:active { transform: scale(0.92); }
.perm-toggle.on {
  background: var(--accent);
  border-color: var(--accent);
}
.perm-toggle.busy { opacity: 0.5; cursor: progress; }

.perm-foot-note {
  font-size: 12px;
  color: var(--ink-3);
  font-style: italic;
  margin-top: 14px;
  line-height: 1.5;
}

/* Mobile: keep the matrix but let it scroll horizontally if tight. */
@media (max-width: 720px) {
  .perm-matrix-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .perm-matrix { min-width: 420px; }
  .perm-page-cell { padding: 10px 12px !important; }
  .perm-toggle-cell { width: 64px; }
}


/* =====================================================================
   PER-USER PAGE ACCESS — inside the user edit modal
   ===================================================================== */
.uc-perm-block {
  border-top: 1px solid var(--border-soft);
  padding-top: 14px;
  margin-top: 2px;
}
.uc-perm-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.uc-perm-toggle input {
  margin-top: 2px;
  width: 16px; height: 16px;
  accent-color: var(--accent);
  flex-shrink: 0;
}
.uc-perm-toggle-title {
  display: block;
  font-size: 13.5px;
  color: var(--ink);
  font-weight: 500;
}
.uc-perm-toggle-sub {
  display: block;
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 1px;
}
.uc-perm-pages {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
  margin-top: 12px;
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}
.uc-perm-page {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink-2);
  transition: background 0.1s;
}
.uc-perm-page:hover { background: var(--surface); }
.uc-perm-page input {
  width: 15px; height: 15px;
  accent-color: var(--accent);
}
.uc-perm-page.on .uc-perm-page-label { color: var(--ink); }

.uc-custom-badge {
  display: inline-block;
  margin-left: 8px;
  font-size: 9.5px;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  vertical-align: middle;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  border: 1px solid oklch(from var(--accent) l c h / 0.25);
}

@media (max-width: 720px) {
  .uc-perm-pages { grid-template-columns: 1fr; }
}

/* Linked-projects picker in the user form (vendors) */
.uc-proj-block { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.uc-proj-head { margin-bottom: 8px; }
.uc-proj-title { font-size: 13px; font-weight: 600; color: var(--ink); display: block; }
.uc-proj-sub { font-size: 12px; color: var(--ink-3); display: block; margin-top: 2px; }
.uc-proj-list { display: flex; flex-direction: column; gap: 6px; }
.uc-proj-item {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: var(--radius);
  font-size: 13px; color: var(--ink-2); transition: background 0.1s, border-color 0.1s;
}
.uc-proj-item:hover { background: var(--surface-2); }
.uc-proj-item.on { border-color: var(--accent); color: var(--ink); background: var(--accent-soft); }
.uc-proj-item input { width: 15px; height: 15px; accent-color: var(--accent); flex: none; }

/* =====================================================================
   VENDOR ↔ SELECTION sections (tag / bid / compliance) in selection detail
   ===================================================================== */
.vsel-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.vsel-empty { font-size: 13px; color: var(--ink-3); font-style: italic; }
.vsel-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: oklch(0.95 0.02 245); border: 1px solid oklch(0.55 0.13 245 / 0.25);
  border-radius: 999px; padding: 4px 6px 4px 11px; font-size: 12.5px; color: var(--ink);
}
.vsel-chip-name { font-weight: 500; }
.vsel-chip-trade { color: var(--ink-3); font-size: 11.5px; }
.vsel-chip-x {
  appearance: none; background: none; border: 0; cursor: pointer; line-height: 0;
  color: var(--ink-3); padding: 2px; border-radius: 50%;
}
.vsel-chip-x:hover { color: var(--danger); background: var(--danger-soft); }
.vsel-add-wrap select { max-width: 320px; }

.vsel-saved { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--success); margin: 8px 0; }

.vsel-bid-form { display: flex; flex-direction: column; gap: 12px; max-width: 460px; }
.vsel-fld { display: flex; flex-direction: column; gap: 4px; }
.vsel-fld > span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); }
.vsel-opt { text-transform: none; letter-spacing: 0; color: var(--ink-4); }
.vsel-fld input, .vsel-fld textarea {
  border: 1px solid var(--border-soft); border-radius: 8px; padding: 8px 10px;
  font: inherit; font-size: 13.5px; background: var(--surface); color: var(--ink); resize: vertical;
}
.vsel-bid-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 2px; }
.vsel-bid-readonly { display: flex; flex-direction: column; gap: 7px; max-width: 460px; }
.vsel-bid-row { display: flex; align-items: baseline; gap: 12px; }
.vsel-bid-row .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); min-width: 80px; }
.vsel-bid-row .val { font-size: 14px; color: var(--ink); }
.vsel-bid-note { font-size: 12.5px; color: var(--ink-2); margin-top: 4px; padding: 8px 10px; background: var(--surface-2); border-radius: 8px; }
.vsel-bid-note.ok { color: var(--success); background: var(--success-soft); display: flex; align-items: center; gap: 6px; }

.vsel-comp-sub { font-size: 13px; color: var(--ink-2); margin: 6px 0 12px; max-width: 560px; }
.vsel-comp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.vsel-comp-doc { border: 1px solid var(--border-soft); border-radius: 10px; padding: 12px; background: var(--bg-deep); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.vsel-comp-doc-head { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.vsel-comp-doc-title { font-size: 12.5px; font-weight: 600; color: var(--ink); }


/* =====================================================================
   DESIGNER SELECTION CARD — bid-style box (product / website / desc)
   ===================================================================== */
.designer-sel-card {
  grid-template-columns: 22px 80px 1fr !important;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
}
.designer-sel-spacer { width: 22px; }
.designer-sel-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
}
.designer-sel-icon img { width: 26px; height: 26px; object-fit: contain; }
.designer-sel-web {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--accent-deep);
  text-decoration: none;
  margin-top: 3px;
}
.designer-sel-web:hover { text-decoration: underline; }
.designer-sel-web svg { color: var(--ink-4); }
.designer-sel-notes {
  margin-top: 6px;
  white-space: pre-wrap;
}
.designer-sel-edit { flex-shrink: 0; align-self: flex-start; }

/* Inline editor inside the card */
.designer-sel-card.editing { display: block; padding: 14px 16px; }
.dsc-edit { display: flex; flex-direction: column; gap: 12px; }
.dsc-edit .bid-edit-field { display: flex; flex-direction: column; gap: 5px; }
.dsc-edit .bid-edit-field .upper {
  font-size: 10.5px; letter-spacing: 0.06em; color: var(--ink-3);
}
.dsc-edit input,
.dsc-edit textarea {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 8px 11px;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  outline: none;
  font-family: var(--sans);
}
.dsc-edit textarea { resize: vertical; min-height: 60px; line-height: 1.5; }
.dsc-edit input:focus,
.dsc-edit textarea:focus { border-color: var(--accent); background: var(--surface); }
.dsc-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}


/* Two-track status chips on selection cards / detail header */
.track-chips {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.meta-row .track-chips { flex-direction: row; align-items: center; }


/* Inline-editable selection title */
.sel-title-editable { cursor: text; border-radius: 6px; transition: background 0.12s; }
.sel-title-editable:hover { background: var(--surface-2); box-shadow: 0 0 0 6px var(--surface-2); }
.sel-title-input {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 38px;
  line-height: 1.05;
  letter-spacing: -0.015em;
  width: 100%;
  border: 0;
  border-bottom: 2px solid var(--accent);
  background: transparent;
  color: var(--ink);
  outline: none;
  padding: 0 0 2px;
  margin: 0;
}


/* Inline-editable selection description */
.spec-editable { cursor: text; border-radius: 6px; padding: 4px 6px; margin: 0 -6px; transition: background 0.12s; }
.spec-editable:hover { background: var(--surface-2); }
.spec-placeholder { color: var(--ink-4); font-style: italic; }
.sel-desc-input {
  width: 100%;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.55;
  padding: 8px 10px;
  outline: none;
  resize: vertical;
  margin-top: 4px;
}


/* Inline-editable due date */
.due-date-editable { cursor: pointer; border-radius: 5px; padding: 1px 5px; margin: -1px -5px; transition: background 0.12s; }
.due-date-editable:hover { background: var(--surface-2); box-shadow: inset 0 -1px 0 var(--accent); }
.due-date-input {
  font: inherit;
  font-size: 13px;
  border: 1px solid var(--accent);
  border-radius: 5px;
  padding: 2px 6px;
  background: var(--surface);
  color: var(--ink);
  outline: none;
}


/* "Needs your approval" derived review section in Tasks */
.task-review-section {
  background: var(--accent-soft);
  border: 1px solid oklch(from var(--accent) l c h / 0.25);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 4px;
}
.task-review-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--accent-deep); font-weight: 500;
  margin-bottom: 8px;
}
.task-review-head svg { color: var(--accent-deep); }
.task-review-count {
  background: var(--accent); color: var(--surface);
  border-radius: 999px; font-size: 10.5px; font-family: var(--mono);
  padding: 1px 7px; letter-spacing: 0.02em;
}
.task-review-list { display: flex; flex-direction: column; gap: 2px; }
.task-review-row {
  appearance: none; background: transparent; border: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 8px; border-radius: var(--radius);
  cursor: pointer; text-align: left; width: 100%;
  transition: background 0.12s;
}
.task-review-row:hover { background: oklch(from var(--surface) l c h / 0.7); }
.task-review-kind {
  flex-shrink: 0; font-size: 9.5px; font-family: var(--mono);
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 7px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border-soft); color: var(--ink-3);
}
.task-review-kind.bid { color: var(--accent-deep); border-color: oklch(from var(--accent) l c h / 0.3); }
.task-review-name { font-family: var(--serif); font-size: 14.5px; color: var(--ink); flex-shrink: 0; }
.task-review-label { font-size: 12.5px; color: var(--ink-3); flex: 1; }
.task-review-chev { color: var(--ink-4); flex-shrink: 0; }
@media (max-width: 720px) {
  .task-review-row { flex-wrap: wrap; gap: 6px; }
  .task-review-label { flex: 1 1 100%; order: 3; }
}


/* =====================================================================
   PM OVERVIEW
   ===================================================================== */
.pm-overview { display: flex; flex-direction: column; gap: 22px; }
.pm-hero {
  display: grid; grid-template-columns: 1fr 300px; gap: 28px;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); padding: 26px 28px; box-shadow: var(--shadow-card);
}
.pm-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-deep); margin-bottom: 6px; }
.pm-hero h1 { font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 1.1; margin: 0; color: var(--ink); }
.pm-addr { font-size: 13px; color: var(--ink-3); margin-top: 4px; }
.pm-phase { font-size: 13.5px; color: var(--ink-2); margin-top: 14px; }
.pm-progress-card { display: flex; flex-direction: column; justify-content: center; gap: 8px; border-left: 1px solid var(--border-soft); padding-left: 24px; }
.pm-progress-top { display: flex; align-items: baseline; gap: 8px; }
.pm-progress-pct { font-family: var(--serif); font-size: 32px; color: var(--ink); }
.pm-progress-lbl { font-size: 12px; color: var(--ink-3); }
.pm-progress-bar { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.pm-progress-bar .fill { height: 100%; background: var(--sage); border-radius: 999px; }
.pm-progress-sub { font-size: 11.5px; color: var(--ink-3); }

.pm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pm-stat {
  appearance: none; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px;
  transition: border-color 0.12s;
}
.pm-stat:hover { border-color: var(--ink-4); }
.pm-stat .lbl { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); }
.pm-stat .val { font-family: var(--serif); font-size: 26px; color: var(--ink); }
.pm-stat .val.danger { color: var(--danger); }
.pm-stat .val.warn { color: var(--warning); }

.pm-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 1100px) {
  .pm-hero { grid-template-columns: 1fr; }
  .pm-progress-card { border-left: 0; border-top: 1px solid var(--border-soft); padding-left: 0; padding-top: 16px; }
  .pm-cols { grid-template-columns: 1fr; }
  .pm-stats { grid-template-columns: 1fr 1fr; }
}

/* ---- Team roster (PM Overview) ------------------------------------- */
.pm-roster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0;
}
.pm-roster-member {
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  padding: 14px 16px 6px;
  min-width: 0;
}
.pm-roster-member.is-clear { opacity: 0.66; }
.pm-roster-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 8px;
}
.pm-roster-id { flex: 1; min-width: 0; }
.pm-roster-id .name {
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pm-roster-id .role {
  font-size: 11px; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pm-roster-count {
  font-size: 11px; color: var(--ink-3); white-space: nowrap;
  flex: none;
}
.pm-roster-member:not(.is-clear) .pm-roster-count {
  color: var(--accent-deep); font-weight: 600;
}
.pm-roster-tasks { display: flex; flex-direction: column; padding-bottom: 6px; }
.pm-roster-task {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  font: inherit; text-align: left;
  display: flex; align-items: baseline; gap: 10px;
  padding: 5px 6px; border-radius: 5px;
  color: var(--ink-2);
}
.pm-roster-task:hover { background: var(--surface-2); }
.pm-roster-task .prt-title {
  flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pm-roster-task .prt-due { flex: none; font-size: 11px; color: var(--ink-3); }
.pm-roster-task .prt-due.overdue { color: var(--danger); font-weight: 600; }
.pm-roster-more {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  font: inherit; text-align: left; padding: 4px 6px;
  font-size: 11.5px; color: var(--accent-deep);
}
.pm-roster-more:hover { text-decoration: underline; }

/* =====================================================================
   OPTIONS — budget upgrades / alternatives. Page cards, editor modal
   extensions, and the Budget-view line integrations.
   ===================================================================== */

/* ---- Options page: card grid -------------------------------------- */
.opt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: var(--gap, 18px);
}
.opt-card {
  display: flex; flex-direction: column;
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.opt-card-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border-soft);
}
.opt-card-name { font-family: var(--serif); font-size: 16px; font-weight: 500; color: var(--ink); }
.opt-card-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 4px; font-size: 12px; color: var(--ink-3);
}
.opt-card-meta .mono { font-family: var(--mono); }
.opt-card-meta .dot { color: var(--ink-4); }

.opt-section { padding: 6px 12px; }
.opt-section + .opt-section { border-top: 1px dashed var(--border-soft); }
.opt-section-label {
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3); padding: 8px 6px 4px;
}
.opt-choice {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 10px 8px; border-radius: 9px;
  transition: background .12s;
}
.opt-choice.interactive { cursor: pointer; }
.opt-choice.interactive:hover { background: var(--surface-2); }
.opt-choice.busy { opacity: 0.55; pointer-events: none; }
.opt-choice.chosen { background: oklch(from var(--accent) l c h / 0.07); }
.opt-mark {
  flex: none; width: 19px; height: 19px; margin-top: 1px;
  border: 1.5px solid var(--ink-4); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.opt-mark.check { border-radius: 5px; }
.opt-mark.radio { border-radius: 50%; }
.opt-choice.chosen .opt-mark { background: var(--accent); border-color: var(--accent); }
.opt-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.opt-choice-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.opt-choice-name { font-size: 13.5px; color: var(--ink); font-weight: 500; }
.opt-choice-desc { font-size: 12px; color: var(--ink-3); line-height: 1.45; }
.opt-choice-links { display: flex; gap: 12px; margin-top: 2px; }
.opt-choice-links a {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; color: var(--accent-deep); text-decoration: none;
}
.opt-choice-links a:hover { text-decoration: underline; }
.opt-choice-cost {
  flex: none; font-size: 13px; color: var(--ink-3);
  font-variant-numeric: tabular-nums; padding-top: 1px;
}
.opt-choice-cost.on { color: var(--accent-deep); font-weight: 600; }

.opt-card-foot {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 18px; border-top: 1px solid var(--border-soft);
  background: var(--surface-2);
}
.opt-foot-label { font-size: 12px; color: var(--ink-3); }
.opt-foot-total { display: flex; align-items: baseline; gap: 10px; }
.opt-uplift { font-size: 12px; color: var(--accent-deep); font-weight: 600; }
.opt-newtotal { font-size: 15px; color: var(--ink); font-weight: 600; }

.opt-banner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; margin-bottom: 18px;
  background: oklch(from var(--accent) l c h / 0.08);
  border: 1px solid oklch(from var(--accent) l c h / 0.25);
  border-radius: 10px;
  font-size: 13px; color: var(--ink-2);
}
.opt-banner-amt { font-size: 16px; font-weight: 600; color: var(--accent-deep); }

.opt-add-picker {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px; margin-bottom: 18px;
  background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 10px;
}
.opt-add-picker-label { font-size: 13px; color: var(--ink-2); }

/* ---- Options editor modal extensions ------------------------------ */
.opt-editor-modal { max-width: 560px; }
.opt-edit-list { display: flex; flex-direction: column; gap: 12px; }
.opt-edit-row {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px; border: 1px solid var(--border-soft); border-radius: 9px;
  background: var(--surface-2);
}
.opt-edit-top { display: flex; align-items: center; gap: 8px; }
.opt-edit-top .opt-product { flex: 1; }
.opt-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opt-edit-fld { display: flex; flex-direction: column; gap: 5px; }
.opt-edit-fld > span { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; }
.opt-type-toggle { display: flex; gap: 0; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.opt-type-toggle button {
  flex: 1; appearance: none; background: var(--surface); border: 0; cursor: pointer;
  padding: 7px 8px; font-size: 12px; color: var(--ink-3);
}
.opt-type-toggle button + button { border-left: 1px solid var(--border); }
.opt-type-toggle button.active { background: var(--accent); color: #fff; font-weight: 500; }
.opt-cost-input {
  display: flex; align-items: center; gap: 2px;
  border: 1px solid var(--border); border-radius: 7px; padding: 0 10px;
  background: var(--surface);
}
.opt-cost-input input {
  border: 0; background: transparent; padding: 7px 0; width: 100%;
  font-family: var(--mono); font-size: 13px; color: var(--ink); outline: none;
}
.opt-add-row { display: flex; gap: 10px; margin-top: 12px; }
.opt-add-row .btn, .opt-editor-modal .task-form-actions .btn { white-space: nowrap; }
.opt-edit-error {
  font-size: 12.5px; color: var(--danger); margin-top: 10px;
  padding: 8px 12px; background: var(--danger-soft); border-radius: 7px;
}

/* ---- Budget view: per-line options ------------------------------- */
.lr-opts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.opt-badge {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  appearance: none; cursor: pointer;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--ink-3);
  padding: 2px 9px 2px 6px; font-size: 11px;
}
.opt-badge:hover { border-color: var(--ink-4); color: var(--ink); }
.opt-badge.has-chosen { border-color: oklch(from var(--accent) l c h / 0.4); color: var(--accent-deep); background: oklch(from var(--accent) l c h / 0.07); }
.opt-add-mini {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  appearance: none; cursor: pointer; border: 1px dashed var(--border);
  border-radius: 999px; background: transparent; color: var(--ink-3);
  padding: 2px 10px 2px 7px; font-size: 11px;
  opacity: 0; transition: opacity .12s, border-color .12s, color .12s;
}
.line-row:hover .opt-add-mini, .opt-add-mini:focus-visible { opacity: 1; }
.opt-add-mini:hover { border-color: var(--accent); color: var(--accent-deep); }
.opt-add-mini.inline { margin-left: 8px; }
.line-row .lr-contractor { flex-wrap: wrap; row-gap: 4px; }
.lr-uplift-dot { color: var(--accent-deep); font-size: 8px; margin-left: 4px; vertical-align: middle; }

.opt-subrow {
  grid-column: 1 / -1;
  padding: 12px 16px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-soft);
}
.opt-subrow-empty { font-size: 12.5px; color: var(--ink-3); font-style: italic; }
.opt-subrow-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3);
  margin-bottom: 8px;
}
.opt-subrow-head .mono { font-family: var(--mono); text-transform: none; letter-spacing: 0; color: var(--ink-2); }
.opt-subitem {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px;
}
.opt-subitem:last-of-type { border-bottom: 0; }
.opt-subitem-mark {
  flex: none; width: 16px; height: 16px; border-radius: 4px;
  border: 1.5px solid var(--ink-4); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.opt-subitem-mark.on { background: var(--accent); border-color: var(--accent); }
.opt-subitem-name { flex: 1; min-width: 0; color: var(--ink); }
.opt-subitem.chosen .opt-subitem-name { font-weight: 500; }
.opt-subitem-type {
  flex: none; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border);
  color: var(--ink-3);
}
.opt-subitem-type.alt { border-color: oklch(from var(--sage, #7a8f6e) l c h / 0.5); color: var(--sage, #5e7355); }
.opt-subitem-cost { flex: none; font-family: var(--mono); font-size: 12px; color: var(--accent-deep); min-width: 64px; text-align: right; }
.opt-subitem-state { flex: none; font-size: 11px; color: var(--ink-4); min-width: 78px; text-align: right; }
.opt-subitem-state.on { color: var(--accent-deep); }
.opt-subrow-link {
  display: inline-flex; align-items: center; gap: 4px;
  appearance: none; background: transparent; border: 0; cursor: pointer;
  margin-top: 10px; padding: 0; font-size: 12px; color: var(--accent-deep);
}
.opt-subrow-link:hover { text-decoration: underline; }

/* =====================================================================
   CHANGE ORDERS + EFFECTIVE-ALLOWANCE BREAKDOWN
   ===================================================================== */

/* Signed-money helpers used across budget + change orders */
.co-add-text    { color: var(--accent-deep); }
.co-credit-text { color: var(--success); }

/* Tiny button variant for inline approve/reject on a CO row */
.btn-xs {
  font-size: 11.5px;
  padding: 4px 9px;
  border-radius: 6px;
  line-height: 1.1;
}

/* ---- Per-line markers + the breakdown badge on a budget row -------- */
.lr-cos { display: flex; align-items: center; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.co-badge {
  display: inline-flex; align-items: center; gap: 6px;
  appearance: none; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: 999px; padding: 2px 9px 2px 6px;
  font-size: 11px; color: var(--ink-2);
}
.co-badge:hover { border-color: var(--border); }
.co-badge.open { background: oklch(from var(--accent) 0.95 0.03 h); border-color: var(--accent); color: var(--accent-deep); }
.co-badge-seg { font-family: var(--mono); font-size: 10.5px; }
.co-badge-seg.add    { color: var(--accent-deep); }
.co-badge-seg.credit { color: var(--success); }
.co-badge-flag {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--warning); color: #fff; border-radius: 4px; padding: 1px 5px;
}
.co-badge.has-pending { border-color: var(--warning); }

.lr-co-dot  { margin-left: 4px; font-size: 8px; vertical-align: middle; }
.lr-co-dot.add    { color: var(--accent-deep); }
.lr-co-dot.credit { color: var(--success); }
.lr-sel-dot { margin-left: 4px; font-size: 8px; color: var(--accent); vertical-align: middle; }

/* ---- The Allowance → Selection → CO → Effective breakdown subrow --- */
.budget-breakdown .bd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 22px;
}
.bd-cell { display: flex; flex-direction: column; gap: 3px; }
.bd-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); }
.bd-val { font-size: 14px; color: var(--ink); }
.bd-val .dim { color: var(--ink-4); font-size: 12.5px; text-transform: none; letter-spacing: 0; }
.bd-cell.bd-eff .bd-label { color: var(--accent-deep); }
.bd-cell.bd-eff .bd-val { font-weight: 600; }
.bd-edit {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  margin-left: 6px; color: var(--ink-3); font-size: 11px;
}
.bd-edit:hover { color: var(--accent-deep); }

.bd-co-list { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--border-soft); padding-top: 10px; }
.bd-co-item { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.bd-co-desc { flex: 1; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-actions { margin-top: 12px; display: flex; gap: 18px; flex-wrap: wrap; }

/* ---- Change-order status chip ------------------------------------- */
.co-chip {
  display: inline-flex; align-items: center;
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.02em;
  padding: 1px 8px; border-radius: 999px; white-space: nowrap;
  border: 1px solid transparent;
}
.co-chip.draft    { background: oklch(from var(--ink) 0.95 0.005 h); color: var(--ink-2); border-color: var(--border-soft); }
.co-chip.pending  { background: var(--warning-soft); color: oklch(0.45 0.10 70); }
.co-chip.approved { background: var(--success-soft); color: var(--success); }
.co-chip.declined { background: var(--danger-soft);  color: var(--danger); }

/* ---- Change-orders panel (Budget → Change orders) ----------------- */
.co-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.co-panel-head .sub { max-width: 640px; color: var(--ink-3); font-size: 13px; }
.co-banner { display: flex; align-items: center; justify-content: space-between; }
.co-banner-pending {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--warning); color: #fff; border-radius: 4px; padding: 1px 6px; margin-right: 10px;
}
.opt-banner-amt.add    { color: var(--accent-deep); }
.opt-banner-amt.credit { color: var(--success); }

/* CO cards reuse .opt-card / .opt-grid; just the inner CO list differs */
.co-list { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 12px; }
.co-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 10px;
  background: var(--surface);
}
.co-row.busy { opacity: 0.5; pointer-events: none; }
.co-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.co-row-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.co-num { font-size: 12px; color: var(--ink-2); font-weight: 600; }
.co-type-tag {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink-3); border: 1px solid var(--border-soft); border-radius: 4px; padding: 0 5px;
}
.co-type-tag.credit { color: var(--success); border-color: oklch(from var(--success) 0.85 0.06 h); }
.co-row-desc { font-size: 13px; color: var(--ink); }
.co-row-foot { display: flex; gap: 10px; }
.co-row-date { font-size: 11px; color: var(--ink-3); }
.co-row-amt { flex: none; font-size: 14px; font-weight: 600; min-width: 76px; text-align: right; }
.co-row-amt.add    { color: var(--accent-deep); }
.co-row-amt.credit { color: var(--success); }
.co-row-actions { flex: none; display: flex; align-items: center; gap: 6px; }
.co-uplift.add    { color: var(--accent-deep); }
.co-uplift.credit { color: var(--success); }

/* CO editor modal — extends the options editor shell */
.co-edit-grid { grid-template-columns: 1fr 1.2fr 1fr; }
.co-dir-toggle button.active.add    { background: var(--accent); border-color: var(--accent); color: #fff; }
.co-dir-toggle button.active.credit { background: var(--success); border-color: var(--success); color: #fff; }
.co-status-fld { margin-top: 4px; }
.co-edit-row.locked { opacity: 0.72; }
.co-locked-note { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--success); margin-top: 4px; }
.co-preview { margin-left: auto; align-self: center; font-size: 12px; color: var(--ink-3); }
.co-preview b.add    { color: var(--accent-deep); }
.co-preview b.credit { color: var(--success); }

/* Loan-bar change-order legend swatch */
.legend-item .sw.co { background: var(--accent); }

@media (max-width: 720px) {
  .co-row { flex-wrap: wrap; }
  .co-row-amt { order: 3; min-width: 0; }
  .co-row-actions { order: 4; margin-left: auto; }
  .co-edit-grid { grid-template-columns: 1fr; }
  .co-panel-head { flex-direction: column; }
}

/* =====================================================================
   BUDGET BIDS — every-line list (Budget → Bids, builder only)
   ===================================================================== */
.bidlist { display: flex; flex-direction: column; gap: 20px; }
.bidlist-summary { color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.bidlist-group-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.bidlist-group-head h3 { font-family: var(--serif); font-weight: 500; font-size: 15px; margin: 0; color: var(--ink); }
.bidlist-group-count { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.bidlist-rows { border: 1px solid var(--border-soft); border-radius: 12px; overflow: hidden; background: var(--surface); }

.bidline {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 16px; border-bottom: 1px solid var(--border-soft);
}
.bidline:last-child { border-bottom: 0; }
.bidline.interactive { cursor: pointer; }
.bidline.interactive:hover { background: var(--surface-2); }
.bidline.has-bid { background: oklch(from var(--success) 0.985 0.015 h); }
.bidline.has-bid:hover { background: oklch(from var(--success) 0.96 0.02 h); }
.bidline-main { flex: 1; min-width: 0; }
.bidline-name { font-size: 14px; color: var(--ink); }
.bidline-vendor { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; display: flex; align-items: center; gap: 8px; }
.bidline-vendor-empty { color: var(--accent-deep); }
.bidline-tag {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.04em;
  border-radius: 4px; padding: 1px 5px;
}
.bidline-tag.sel { background: var(--accent-soft); color: var(--accent-deep); }
.bidline-tag.pending { background: var(--warning-soft); color: oklch(0.45 0.10 70); }

.bidline-nums { min-width: 168px; display: flex; flex-direction: column; gap: 3px; }
.bidline-num { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 16px; }
.bidline-num-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); }
.bidline-num-val { font-size: 13px; color: var(--ink); text-align: right; }
.bidline-num.bid .bidline-num-lbl { color: var(--accent-deep); }
.bidline-num.bid .bidline-num-val { font-weight: 600; }
.bidline-num.bid.over .bidline-num-val { color: var(--accent-deep); }
.bidline-num-val .dim { color: var(--ink-4); }
.bidline-chev { color: var(--ink-4); flex: none; }
.bidline-unaccept {
  flex: none; appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px; border-radius: 6px;
  background: transparent; border: 1px solid var(--border-soft);
  font-size: 11.5px; color: var(--ink-3); white-space: nowrap;
}
.bidline-unaccept:hover:not(:disabled) { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }
.bidline-unaccept:disabled { opacity: 0.5; cursor: default; }

/* Accept control inside the bid editor */
.bid-edit-grid { grid-template-columns: 1fr 1.5fr; align-items: end; }
.bid-radio {
  width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.bid-radio.on { border-color: var(--success); }
.bid-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.bid-accept-toggle {
  display: inline-flex; align-items: center; gap: 8px; height: 38px;
  appearance: none; cursor: pointer; padding: 0 14px;
  background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 8px;
  font-size: 12.5px; color: var(--ink-2); white-space: nowrap;
}
.bid-accept-toggle.on { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.bid-accepted-row { border-color: oklch(from var(--success) 0.80 0.06 h); }

@media (max-width: 720px) {
  .bidline { flex-wrap: wrap; }
  .bidline-nums { min-width: 0; width: 100%; flex-direction: row; justify-content: space-between; }
  .bidline-num { grid-template-columns: auto; text-align: left; gap: 0; }
  .bid-edit-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   DESIGN SCHEDULE — timeline of selection deadlines + meetings
   ===================================================================== */
.ds-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.ds-head .sub { max-width: 640px; color: var(--ink-3); font-size: 13px; }
.ds-filter { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }

.ds-timeline { display: flex; flex-direction: column; gap: 26px; }
.ds-month-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; position: sticky; top: 0; background: var(--bg); padding: 4px 0; z-index: 1; }
.ds-month-head h3 { font-family: var(--serif); font-weight: 500; font-size: 17px; margin: 0; color: var(--ink); }
.ds-month-count { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.ds-month-items { display: flex; flex-direction: column; }

/* One timeline row: date · spine · body */
.ds-item {
  display: grid; grid-template-columns: 52px 24px 1fr auto; align-items: stretch;
  gap: 0; padding: 0; position: relative;
}
.ds-item .ds-date {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding-top: 14px; text-align: center;
}
.ds-dow { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); }
.ds-day { font-family: var(--serif); font-size: 20px; line-height: 1; color: var(--ink); margin-top: 1px; }

/* Vertical spine with a node dot */
.ds-spine { position: relative; display: flex; justify-content: center; }
.ds-spine::before { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--border-soft); }
.ds-node {
  position: relative; z-index: 1; margin-top: 18px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); border: 2.5px solid var(--bg); box-shadow: 0 0 0 1px var(--accent);
}
.ds-node.deadline { background: var(--surface); box-shadow: 0 0 0 1px var(--ink-4); border-color: var(--bg); }
.ds-item:first-child .ds-spine::before { top: 18px; }
.ds-item:last-child .ds-spine::before { bottom: calc(100% - 24px); }

.ds-body {
  padding: 12px 14px; margin: 6px 0 6px 6px;
  border: 1px solid var(--border-soft); border-radius: 12px; background: var(--surface);
  min-width: 0;
}
.ds-item.editable, .ds-item[role="button"] { cursor: pointer; }
.ds-item.editable:hover .ds-body, .ds-item[role="button"]:hover .ds-body { border-color: var(--border); background: var(--surface-2); }
.ds-item.past { opacity: 0.62; }
.ds-item.past:hover { opacity: 0.85; }

.ds-item-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.ds-item-title { font-size: 14.5px; color: var(--ink); font-weight: 500; }
.ds-item-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; font-size: 12px; color: var(--ink-3); }
.ds-item-notes { margin-top: 6px; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.ds-time { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); }
.ds-loc::before { content: "📍 "; }
.ds-room, .ds-loc { color: var(--ink-3); }
.ds-link-sel { color: var(--accent-deep); cursor: pointer; }
.ds-link-sel:hover { text-decoration: underline; }
.ds-edit-hint { display: flex; align-items: center; padding: 0 6px 0 2px; color: var(--ink-4); align-self: center; }

/* Type tags */
.ds-type-tag {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
}
.ds-type-tag.client   { background: oklch(0.93 0.04 260); color: oklch(0.40 0.13 260); }
.ds-type-tag.walk     { background: var(--success-soft); color: var(--success); }
.ds-type-tag.vendor   { background: oklch(0.93 0.05 300); color: oklch(0.42 0.14 300); }
.ds-type-tag.site     { background: var(--warning-soft); color: oklch(0.45 0.10 70); }
.ds-type-tag.other    { background: var(--surface-2); color: var(--ink-2); }
.ds-type-tag.deadline { background: transparent; color: var(--ink-3); border: 1px solid var(--border); }

/* Accent the node + left border by meeting type */
.ds-item.meeting.client .ds-node { background: oklch(0.45 0.13 260); box-shadow: 0 0 0 1px oklch(0.45 0.13 260); }
.ds-item.meeting.walk   .ds-node { background: var(--success); box-shadow: 0 0 0 1px var(--success); }
.ds-item.meeting.vendor .ds-node { background: oklch(0.50 0.14 300); box-shadow: 0 0 0 1px oklch(0.50 0.14 300); }
.ds-item.meeting.site   .ds-node { background: var(--warning); box-shadow: 0 0 0 1px var(--warning); }

/* Soon / urgency pills */
.ds-soon {
  font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-deep);
}
.ds-soon.urgent  { background: var(--danger-soft); color: var(--danger); }
.ds-soon.overdue { background: var(--danger-soft); color: var(--danger); }
.ds-soon.done    { background: var(--success-soft); color: var(--success); }

.ds-item.deadline.done .ds-body { background: oklch(from var(--success) 0.985 0.012 h); }

/* Meeting editor — type chips + date/time row */
.mtg-type-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.mtg-type-chip {
  appearance: none; cursor: pointer; padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--border-soft); background: var(--surface-2);
  font-size: 12.5px; color: var(--ink-2);
}
.mtg-type-chip:hover { border-color: var(--border); }
.mtg-type-chip.active.client { background: oklch(0.93 0.04 260); border-color: oklch(0.45 0.13 260); color: oklch(0.40 0.13 260); }
.mtg-type-chip.active.walk   { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.mtg-type-chip.active.vendor { background: oklch(0.93 0.05 300); border-color: oklch(0.50 0.14 300); color: oklch(0.42 0.14 300); }
.mtg-type-chip.active.site   { background: var(--warning-soft); border-color: var(--warning); color: oklch(0.45 0.10 70); }
.mtg-type-chip.active.other  { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.mtg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mtg-opt { text-transform: none; letter-spacing: 0; color: var(--ink-4); font-size: 10.5px; }
.btn.danger-text { color: var(--danger); }
.btn.danger-text:hover { background: var(--danger-soft); }

@media (max-width: 720px) {
  .ds-item { grid-template-columns: 46px 20px 1fr; }
  .ds-edit-hint { display: none; }
  .ds-head { flex-direction: column; }
  .mtg-row { grid-template-columns: 1fr; }
}

/* ---- Roadmap (horizontal deadline timeline) ----------------------- */
.ds-roadmap {
  border: 1px solid var(--border-soft); border-radius: 14px;
  background: var(--surface); padding: 14px 14px 4px; margin-bottom: 24px;
}
.ds-rm-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 12px; padding: 0 2px; }
.ds-lg { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-3); }
.ds-lg::before { content: ""; width: 9px; height: 9px; border-radius: 50%; }
.ds-lg.overdue::before { background: var(--danger); }
.ds-lg.urgent::before  { background: oklch(0.60 0.17 35); }
.ds-lg.soon::before    { background: var(--warning); }
.ds-lg.later::before   { background: var(--accent); }
.ds-lg.done::before    { background: var(--success); }
.ds-lg.mtg::before     { background: oklch(0.50 0.14 300); }

.ds-rm-body { display: flex; align-items: stretch; }
.ds-rm-gutter { flex: none; width: 86px; border-right: 1px solid var(--border-soft); }
.ds-rm-axis-pad { height: 30px; }
.ds-rm-lane-lbl {
  display: flex; align-items: center; padding-left: 2px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3);
  border-top: 1px solid var(--border-soft);
}
.ds-rm-scroll { flex: 1; overflow-x: auto; overflow-y: hidden; }
.ds-rm-track { position: relative; min-width: 100%; }
.ds-rm-months { display: flex; height: 30px; }
.ds-rm-month {
  flex: none; display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; color: var(--ink-2); border-left: 1px solid var(--border-soft);
}
.ds-rm-month:first-child { border-left: 0; }
.ds-rm-month.alt { background: var(--surface-2); }
.ds-rm-yr { color: var(--ink-4); }
.ds-rm-today {
  position: absolute; top: 24px; bottom: 0; width: 2px;
  background: var(--accent); z-index: 4; pointer-events: none;
}
.ds-rm-today span {
  position: absolute; top: -2px; left: 50%; transform: translateX(-50%);
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: #fff; background: var(--accent); padding: 1px 5px; border-radius: 4px; white-space: nowrap;
}
.ds-rm-lane {
  position: relative; border-top: 1px solid var(--border-soft);
  /* month gridlines continued down the lanes */
  background-image: repeating-linear-gradient(to right, transparent, transparent calc(200px - 1px), var(--border-soft) calc(200px - 1px), var(--border-soft) 200px);
}
.ds-rm-lane-empty { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--ink-4); font-style: italic; }

.ds-marker {
  position: absolute; display: inline-flex; align-items: center; gap: 5px;
  height: 20px; padding: 0 8px 0 6px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border-soft); cursor: pointer;
  font-size: 11px; color: var(--ink); white-space: nowrap; max-width: 184px;
  transform: translateX(-4px); transition: box-shadow .12s, border-color .12s;
}
.ds-marker:hover { z-index: 6; box-shadow: var(--shadow-card); border-color: var(--border); }
.ds-marker-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ds-marker-lbl { overflow: hidden; text-overflow: ellipsis; }
.ds-marker.dl.overdue { border-color: var(--danger); }
.ds-marker.dl.overdue .ds-marker-dot { background: var(--danger); }
.ds-marker.dl.urgent  .ds-marker-dot { background: oklch(0.60 0.17 35); }
.ds-marker.dl.soon    .ds-marker-dot { background: var(--warning); }
.ds-marker.dl.later   .ds-marker-dot { background: var(--accent); }
.ds-marker.dl.done    { opacity: 0.7; }
.ds-marker.dl.done    .ds-marker-dot { background: var(--success); }
.ds-marker.mtg { border-style: dashed; }
.ds-marker.mtg.client .ds-marker-dot { background: oklch(0.45 0.13 260); }
.ds-marker.mtg.walk   .ds-marker-dot { background: var(--success); }
.ds-marker.mtg.vendor .ds-marker-dot { background: oklch(0.50 0.14 300); }
.ds-marker.mtg.site   .ds-marker-dot { background: var(--warning); }
.ds-marker.mtg.other  .ds-marker-dot { background: var(--ink-3); }

/* ---- Undated decisions strip -------------------------------------- */
.ds-undated {
  border: 1px dashed var(--border); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 24px; background: var(--surface-2);
}
.ds-undated-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ds-undated-title { font-size: 13px; font-weight: 600; color: var(--ink); }
.ds-undated-sub { font-size: 12px; color: var(--ink-3); }
.ds-undated-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ds-undated-chip {
  display: inline-flex; align-items: center; gap: 7px;
  appearance: none; cursor: pointer; padding: 5px 11px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border-soft);
  font-size: 12px; color: var(--ink-2);
}
.ds-undated-chip:hover { border-color: var(--accent); color: var(--accent-deep); }
.ds-undated-room { font-size: 10.5px; color: var(--ink-4); }

@media (max-width: 720px) {
  .ds-rm-gutter { width: 64px; }
}

/* =====================================================================
   VENDORS — directory + compliance (builder-only)
   ===================================================================== */
.vendors-view .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ven-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: 9px;
  padding: 8px 12px; margin-bottom: 18px; max-width: 360px; color: var(--ink-3);
}
.ven-search input { border: 0; background: none; outline: none; font: inherit; color: var(--ink); flex: 1; }

/* ---- avatar ---- */
.ven-avatar {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; color: #fff; background: oklch(0.55 0.13 245);
}
.ven-avatar.sm { width: 32px; height: 32px; font-size: 12px; border-radius: 8px; }

/* ---- directory ---- */
.ven-dir { display: flex; flex-direction: column; border: 1px solid var(--border-soft); border-radius: 12px; overflow: hidden; background: var(--surface); }
.ven-row {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft); cursor: pointer;
}
.ven-row:last-child { border-bottom: 0; }
.ven-row:hover { background: var(--surface-2); }
.ven-row-main { flex: 1; min-width: 0; }
.ven-row-name { font-size: 14px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.ven-row-sub { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 3px; font-size: 12px; color: var(--ink-3); }
.ven-trade { color: var(--ink-2); font-weight: 500; }
.ven-status { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 6px; border-radius: 4px; }
.ven-status.active { background: var(--success-soft); color: var(--success); }
.ven-status.inactive { background: var(--surface-2); color: var(--ink-3); border: 1px solid var(--border-soft); }
.ven-row-actions { display: flex; gap: 4px; flex: none; }

.ven-compliance-pill {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.ven-compliance-pill.ok { background: var(--success-soft); color: var(--success); }
.ven-compliance-pill.attention { background: var(--warning-soft); color: oklch(0.45 0.10 70); }

/* ---- compliance stats ---- */
.ven-compliance-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 18px; }
.ven-stat { background: var(--surface); border: 1px solid var(--border-soft); border-radius: 12px; padding: 14px 16px; border-left: 3px solid var(--success); }
.ven-stat.warn { border-left-color: var(--warning); }
.ven-stat.danger { border-left-color: var(--danger); }
.ven-stat-val { display: block; font-family: var(--serif); font-size: 26px; line-height: 1; color: var(--ink); }
.ven-stat-lbl { display: block; margin-top: 4px; font-size: 11.5px; color: var(--ink-3); }

/* ---- compliance cards ---- */
.ven-compliance { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; }
.ven-comp-card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: 14px; padding: 16px 18px; }
.ven-comp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ven-comp-head > span.ven-compliance-pill { margin-left: auto; }
.ven-comp-name { font-size: 14.5px; font-weight: 500; color: var(--ink); }
.ven-comp-trade { font-size: 12px; color: var(--ink-3); }

.ven-doc-grid { display: flex; flex-direction: column; gap: 14px; }
.ven-doc { border: 1px solid var(--border-soft); border-radius: 10px; padding: 12px; background: var(--bg-deep); }
.ven-doc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ven-doc-title { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.ven-doc-status { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.ven-doc-status.ok { background: var(--success-soft); color: var(--success); }
.ven-doc-status.neutral { background: var(--surface-2); color: var(--ink-2); }
.ven-doc-status.soon { background: var(--warning-soft); color: oklch(0.45 0.10 70); }
.ven-doc-status.expired { background: var(--danger-soft); color: var(--danger); }
.ven-doc-status.missing { background: var(--danger-soft); color: var(--danger); }
.ven-doc-files { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; }
.ven-file { display: flex; align-items: center; gap: 8px; }
.ven-file-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--accent-deep); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ven-file-link:hover { text-decoration: underline; }
.ven-file-x { appearance: none; background: none; border: 0; cursor: pointer; color: var(--ink-4); padding: 2px; line-height: 0; }
.ven-file-x:hover { color: var(--danger); }
.ven-doc-meta { display: flex; align-items: flex-end; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.ven-meta-fld { display: flex; flex-direction: column; gap: 3px; }
.ven-meta-fld span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); }
.ven-meta-fld input { border: 1px solid var(--border-soft); border-radius: 7px; padding: 5px 8px; font: inherit; font-size: 12.5px; background: var(--surface); color: var(--ink); }

@media (max-width: 720px) {
  .ven-compliance { grid-template-columns: 1fr; }
  .ven-row-sub { font-size: 11px; }
}