/* ==========================================================================
   Lead Opticals — Catalogue editor
   A working tool, not a shopfront: denser, plainer, no motion.
   ========================================================================== */

body.admin {
  background: var(--tint);
  font-size: var(--fs-sm);
  min-height: 100vh;
}

/* ------------------------------------------------------------------ bar */
.ad-bar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); flex-wrap: wrap;
  padding: 12px var(--sp-5);
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.ad-bar-left { display: flex; align-items: center; gap: var(--sp-4); }
.ad-logo { height: 38px; width: auto; }
.ad-bar h1 { font-size: var(--fs-md); font-family: var(--display); font-weight: 500; }
.ad-sub {
  font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .04em;
  color: var(--ink-faint); margin-top: 2px;
}
.ad-sub.is-dirty { color: var(--red); }
.ad-bar-right { display: flex; gap: 8px; flex-wrap: wrap; }

.ad-btn {
  padding: 9px 16px; min-height: 38px;
  border: 1px solid var(--line-strong); background: var(--paper);
  font-size: var(--fs-sm); font-weight: 500; color: var(--ink);
  border-radius: var(--r-sm); white-space: nowrap;
  transition: all var(--t-fast) var(--e-out);
}
.ad-btn:hover { border-color: var(--ink); background: var(--tint); }
.ad-btn.is-primary { background: var(--red); border-color: var(--red); color: #fff; }
.ad-btn.is-primary:hover { background: var(--red-dark); border-color: var(--red-dark); }
.ad-btn.is-danger { color: var(--danger); border-color: rgba(192,57,43,.4); }
.ad-btn.is-danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.ad-btn.is-small { padding: 6px 12px; min-height: 32px; font-size: var(--fs-xs); }

/* ----------------------------------------------------------------- tabs */
.ad-tabs {
  display: flex; gap: 2px; padding: 0 var(--sp-5);
  background: var(--paper); border-bottom: 1px solid var(--line);
  position: sticky; top: 63px; z-index: 39;
}
.ad-tab {
  padding: 11px 18px; font-size: var(--fs-sm); font-weight: 500;
  color: var(--ink-soft); border-bottom: 2px solid transparent;
  display: flex; align-items: center; gap: 7px;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.ad-tab:hover { color: var(--ink); }
.ad-tab.on { color: var(--ink); border-bottom-color: var(--red); }
.ad-count {
  min-width: 19px; height: 19px; padding: 0 6px; border-radius: var(--r-pill);
  background: var(--line); color: var(--ink-soft);
  font-family: var(--mono); font-size: var(--fs-2xs);
  display: inline-flex; align-items: center; justify-content: center;
}
.ad-count.is-warn { background: var(--danger); color: #fff; }

/* --------------------------------------------------------------- layout */
.ad-main {
  display: grid; grid-template-columns: 290px minmax(0, 1fr) 320px;
  gap: 1px; background: var(--line);
  align-items: start; min-height: calc(100vh - 104px);
}
.ad-main.is-single { display: block; background: var(--paper); }
.ad-main.is-single .ad-editor { max-width: 900px; }
.ad-list, .ad-editor, .ad-preview { background: var(--paper); min-height: 100%; }

/* ----------------------------------------------------------------- list */
.ad-list { position: sticky; top: 104px; max-height: calc(100vh - 104px); display: flex; flex-direction: column; }
.ad-list-head { padding: var(--sp-4); display: grid; gap: 8px; border-bottom: 1px solid var(--line); }
.ad-search { min-height: 38px; padding: 8px 12px; font-size: var(--fs-sm); }
.ad-hint {
  padding: 9px var(--sp-4); font-size: var(--fs-xs); color: var(--ink-faint);
  border-bottom: 1px solid var(--line); line-height: 1.45;
}
.ad-items { flex: 1; overflow-y: auto; }
.ad-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px var(--sp-4); cursor: pointer;
  border-bottom: 1px solid var(--line);
  transition: background-color var(--t-fast);
}
.ad-item:hover { background: var(--tint); }
.ad-item.on { background: var(--red-wash); box-shadow: inset 3px 0 0 var(--red); }
.ad-item.is-dragging { opacity: .4; }
.ad-item.is-over { box-shadow: inset 0 -2px 0 var(--red); }
.ad-item-art { width: 54px; flex: none; opacity: .85; }
.ad-item-art svg { width: 100%; height: auto; }
.ad-item-info { display: grid; gap: 1px; min-width: 0; flex: 1; }
.ad-item-info b { font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-item-info .mono { font-size: var(--fs-2xs); color: var(--ink-faint); }
.ad-item-flag {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--danger); color: #fff;
  font-family: var(--mono); font-size: var(--fs-2xs);
  display: grid; place-items: center;
}
.ad-item-empty { padding: var(--sp-5) var(--sp-4); font-size: var(--fs-xs); color: var(--ink-faint); }

/* --------------------------------------------------------------- editor */
.ad-editor { padding: var(--sp-5) var(--sp-6); }
.ad-empty { padding: var(--sp-10) var(--sp-4); text-align: center; }
.ad-empty p { margin-bottom: 6px; font-size: var(--fs-sm); }

.ad-form-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  padding-bottom: var(--sp-4); margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line);
}
.ad-form-head h2 { font-size: var(--fs-lg); font-family: var(--display); font-weight: 500; }
.ad-form-actions { display: flex; gap: 8px; }

.ad-group {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  margin-bottom: var(--sp-5); background: var(--paper);
}
.ad-group legend {
  padding: 0 8px; font-family: var(--mono); font-size: var(--fs-xs);
  letter-spacing: .12em; text-transform: uppercase; color: var(--red);
}
.ad-note { font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.55; margin-bottom: var(--sp-4); }
.ad-note.is-muted { color: var(--ink-faint); margin-bottom: 0; }
.ad-note code {
  font-family: var(--mono); font-size: var(--fs-xs);
  background: var(--tint); padding: 1px 5px; border: 1px solid var(--line);
}

.ad-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sp-4); }
.ad-field.is-wide { grid-column: 1 / -1; }
.ad-field label {
  display: block; margin-bottom: 5px;
  font-size: var(--fs-xs); font-weight: 500; color: var(--ink);
}
.ad-field label em {
  font-style: normal; font-family: var(--mono); font-size: var(--fs-3xs);
  letter-spacing: .08em; text-transform: uppercase; color: var(--red);
  margin-left: 4px;
}
.ad-field .input, .ad-field .select, .ad-field .textarea {
  min-height: 38px; padding: 8px 12px; font-size: var(--fs-sm);
}
.ad-textarea { min-height: 76px; }
.ad-field-hint { margin-top: 4px; font-size: var(--fs-xs); color: var(--ink-faint); line-height: 1.45; }

/* ------------------------------------------------------------ swatches */
.ad-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.ad-swatch {
  position: relative;
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; text-align: left;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--paper); font-size: var(--fs-xs);
  transition: all var(--t-fast) var(--e-out);
}
.ad-swatch:hover { border-color: var(--ink-faint); }
.ad-swatch.on { border-color: var(--ink); background: var(--tint); box-shadow: inset 0 0 0 1px var(--ink); }
.ad-swatch-dot {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
}
.ad-swatch-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-swatch-order {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--ink); color: #fff;
  font-family: var(--mono); font-size: var(--fs-2xs);
  display: grid; place-items: center;
}

/* ---------------------------------------------------------------- rows */
.ad-rows { display: grid; gap: 7px; margin-bottom: var(--sp-4); }
.ad-row { display: flex; align-items: center; gap: 7px; }
.ad-row.is-block { align-items: flex-start; }
.ad-row.is-lens { display: grid; grid-template-columns: 1.1fr 96px 2fr auto auto; align-items: center; }
/* A purpose row: parent type, name, locked reference, price, order,
   explanation, offered, remove. */
.ad-row.is-purpose {
  display: grid; align-items: center;
  grid-template-columns: 1.1fr 1.1fr 128px 86px 70px 1.6fr auto auto;
}
/* A figure the editor deliberately will not let staff change — a saved
   reference, or a lens type price that the purpose has superseded. */
.ad-locked {
  padding: 0 8px; font-size: var(--fs-xs);
  color: var(--ink-soft); background: var(--wash);
  border: 1px dashed var(--line-strong); border-radius: 2px;
  line-height: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ad-row .input { min-height: 36px; padding: 7px 11px; font-size: var(--fs-sm); }
.ad-row-mm { max-width: 96px; }
.ad-row-unit { font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-faint); }
.ad-row-x {
  flex: none; width: 30px; height: 30px; border-radius: var(--r-sm);
  color: var(--ink-faint); font-size: var(--fs-md); line-height: 1;
  transition: all var(--t-fast);
}
.ad-row-x:hover { background: var(--danger); color: #fff; }
.ad-rec { display: flex; align-items: center; gap: 5px; font-size: var(--fs-xs); color: var(--ink-soft); white-space: nowrap; }

/* -------------------------------------------------------------- photos */
.ad-photo-row {
  display: grid; grid-template-columns: 150px auto 1fr; gap: var(--sp-4);
  align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line);
}
.ad-photo-row:last-child { border-bottom: 0; }
.ad-photo-name { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); }
.ad-photo-views { display: flex; gap: 5px; }
.ad-photo-view {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  font-size: var(--fs-xs); cursor: pointer; text-transform: capitalize;
  transition: all var(--t-fast);
}
.ad-photo-view:hover { border-color: var(--ink); }
.ad-photo-view.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.ad-photo-view input { width: 12px; height: 12px; accent-color: var(--red); }
.ad-photo-file {
  font-family: var(--mono); font-size: var(--fs-2xs); color: var(--ink-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ------------------------------------------------------------- preview */
.ad-preview { position: sticky; top: 104px; padding: var(--sp-5); max-height: calc(100vh - 104px); overflow-y: auto; }
.ad-preview h3 { font-size: var(--fs-base); font-family: var(--display); font-weight: 500; margin-bottom: 4px; }
.ad-preview h4 {
  font-family: var(--mono); font-size: var(--fs-2xs); letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint);
  margin: var(--sp-5) 0 10px;
}
.ad-preview-card { pointer-events: none; }
.ad-preview-card .card-hover, .ad-preview-card .card-wish { display: none; }
.ad-preview-views { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ad-view {
  border: 1px solid var(--line); background: var(--tint); padding: 8px;
  display: grid; gap: 4px; justify-items: center;
}
.ad-view .mono { font-size: var(--fs-3xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.ad-view .frame-art { width: 100%; }

.ad-preview-issues { margin-top: var(--sp-5); }
.ad-issue-list { display: grid; gap: 7px; }
.ad-issue-list li {
  font-size: var(--fs-xs); line-height: 1.5; color: var(--danger);
  padding-left: 16px; position: relative;
}
.ad-issue-list li::before { content: '!'; position: absolute; left: 0; font-family: var(--mono); font-weight: 600; }
.ad-issue-list.is-large li { font-size: var(--fs-sm); padding: 10px 10px 10px 20px; background: rgba(192,57,43,.05); border-left: 2px solid var(--danger); }
.ad-issue-link {
  color: var(--ink); font-weight: 500; text-decoration: underline;
  text-underline-offset: 2px;
}
.ad-issue-link:hover { color: var(--red); }
.ad-ok {
  font-size: var(--fs-xs); color: var(--success);
  padding-left: 16px; position: relative;
}
.ad-ok::before { content: '✓'; position: absolute; left: 0; }
.ad-ok.is-large { font-size: var(--fs-sm); padding: 12px 12px 12px 30px; background: rgba(27,127,90,.06); border-left: 2px solid var(--success); }
.ad-ok.is-large::before { left: 12px; }

/* --------------------------------------------------------- narrow view */
@media (max-width: 1280px) {
  .ad-main { grid-template-columns: 250px minmax(0, 1fr); }
  .ad-preview { grid-column: 1 / -1; position: static; max-height: none; border-top: 1px solid var(--line); }
  .ad-preview-card { max-width: 320px; }
  .ad-preview-views { grid-template-columns: repeat(4, 1fr); max-width: 640px; }
}
@media (max-width: 860px) {
  .ad-main { grid-template-columns: 1fr; }
  .ad-list { position: static; max-height: none; }
  .ad-items { max-height: 320px; }
  .ad-editor { padding: var(--sp-5) var(--sp-4); }
  /* Six tabs do not fit a phone. They scroll sideways rather than wrapping,
     so the row stays one line and the last tab is always reachable — before
     this, tabs past the fourth simply ran off the edge with nothing to
     scroll. */
  .ad-tabs {
    top: 0; position: static;
    overflow-x: auto; flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .ad-tab { flex: 0 0 auto; }
  .ad-bar { position: static; }
  .ad-photo-row { grid-template-columns: 1fr; gap: 8px; }
  .ad-row.is-lens { grid-template-columns: 1fr 90px; grid-auto-flow: row; }
  .ad-row.is-purpose { grid-template-columns: 1fr 90px; grid-auto-flow: row; }
  .ad-row.is-purpose > *:nth-child(1),
  .ad-row.is-purpose > *:nth-child(2),
  .ad-row.is-purpose > *:nth-child(6) { grid-column: 1 / -1; }
  .ad-row.is-lens .input:nth-child(3) { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------- stock panel */
/* One row per colourway x width — the same grain as an inventory row. */
.ad-stock { display: grid; gap: 6px; }
.ad-stock-row {
  display: grid;
  grid-template-columns: 1fr 92px 92px;
  align-items: center;
  gap: var(--sp-2);
}
.ad-stock-name { font-size: var(--fs-sm); }
.ad-stock-qty { text-align: right; }
.ad-stock-res {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  text-align: right;
}
.ad-stock-total { margin-top: var(--sp-2); }

@media (max-width: 540px) {
  .ad-stock-row { grid-template-columns: 1fr 78px; }
  .ad-stock-res { grid-column: 2; text-align: right; }
}

/* ------------------------------------------- draft / archived / unsaved */
.ad-item-state {
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ad-item.is-draft .ad-item-state { color: var(--gold, #b8860b); }
.ad-item.is-archived { opacity: .55; }
.ad-item.is-unsaved { box-shadow: inset 3px 0 0 var(--gold, #b8860b); }

/* ------------------------------------------------------------ orders queue */
.so-toolbar { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); }
.so-filters { display: flex; gap: 6px; flex-wrap: wrap; margin: var(--sp-3) 0; }
.so-list { display: grid; gap: 8px; }

.so-card { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
/* An order waiting on a prescription is the one thing worth spotting from
   across the room. */
.so-card.is-attention { border-left: 3px solid var(--red); }
.so-card.is-open { box-shadow: 0 1px 0 var(--line); }

.so-head {
  width: 100%;
  display: grid;
  grid-template-columns: 108px 1fr auto auto auto;
  align-items: center;
  gap: var(--sp-3);
  padding: 11px 14px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.so-head:hover { background: var(--wash, rgba(0,0,0,.02)); }
.so-ref { font-size: var(--fs-xs); }
.so-who { display: grid; line-height: 1.25; }
.so-who b { font-size: var(--fs-sm); font-weight: 500; }
.so-who span { font-size: var(--fs-xs); color: var(--ink-soft); }
.so-state { font-size: var(--fs-xs); color: var(--ink-soft); }
.so-total { font-size: var(--fs-sm); }
.so-flag {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--red); color: #fff;
  font-size: var(--fs-xs); line-height: 18px; text-align: center;
}

.so-body { border-top: 1px solid var(--line); padding: var(--sp-4); background: var(--wash, rgba(0,0,0,.015)); }
.so-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.so-block { display: grid; gap: 8px; align-content: start; }
.so-block.is-wide { grid-column: 1 / -1; }
.so-block h4 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); margin: 0; }

.so-item { display: grid; gap: 1px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.so-item span { font-size: var(--fs-xs); color: var(--ink-soft); }
.so-totals { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--fs-xs); padding-top: 8px; }
.so-quote { border-left: 2px solid var(--line); padding-left: 10px; font-size: var(--fs-xs); }

.so-stages { display: flex; flex-wrap: wrap; gap: 5px; }
.so-notes { display: grid; gap: 7px; }
.so-note { border-left: 2px solid var(--line); padding-left: 9px; }
.so-note .mono { font-size: var(--fs-2xs); color: var(--ink-faint); }
.so-note p { font-size: var(--fs-xs); margin: 1px 0 0; }

.so-history { list-style: none; padding: 0; margin: 0; display: grid; gap: 3px; }
.so-history li { font-size: var(--fs-xs); color: var(--ink-soft); }
.so-history .mono { color: var(--ink-faint); }

.so-rx { border: 1px solid var(--line); border-radius: 5px; padding: 12px 14px; display: grid; gap: 8px; }
.so-rx-top { display: flex; align-items: center; gap: 10px; }
.so-rx-table { border-collapse: collapse; font-size: var(--fs-xs); }
.so-rx-table th { text-align: left; font-weight: 400; color: var(--ink-soft); padding-right: var(--sp-4); }
.so-rx-actions { display: flex; gap: 6px; flex-wrap: wrap; }

@media (max-width: 800px) {
  .so-head { grid-template-columns: 1fr auto; row-gap: 4px; }
  .so-ref, .so-state { grid-column: 1 / -1; }
  .so-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PRODUCT PHOTOGRAPHY
   Four fixed positions. The photograph is the subject, so the chrome stays
   quiet: thin rules, one accent, no shadows competing with the product.
   ========================================================================== */
.pm-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: 12px; }
.pm-head .ad-note { max-width: 46ch; margin: 0; }

.pm-count { font: 500 var(--fs-sm)/1 var(--mono); letter-spacing: .04em; padding: 4px 9px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); color: var(--ink-soft); }
.pm-count.is-complete { border-color: #1f7a4d; color: #1f7a4d; }
.pm-count.is-empty { border-color: var(--danger); color: var(--danger); }
.pm-missing { display: block; margin-top: 5px; }

.pm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

.pm-slot { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px; display: grid; gap: 8px; align-content: start; background: var(--paper); }
.pm-slot.is-primary { border-color: var(--ink); }
.pm-slot.is-empty { border-style: dashed; }
.pm-slot[draggable="true"] { cursor: grab; }

.pm-slot-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; min-height: 20px; }
.pm-role { font: 500 var(--fs-xs)/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.pm-slot.is-primary .pm-role { color: var(--ink); }
.pm-star { color: #b8912f; }

.pm-frame { position: relative; aspect-ratio: 1 / 1; border-radius: 3px; background: #f6f5f3; display: grid; place-items: center; overflow: hidden; cursor: pointer; border: 1px solid transparent; transition: border-color 140ms var(--e-out), background 140ms var(--e-out); }
.pm-frame:hover, .pm-frame:focus-visible { border-color: var(--line-strong); }
.pm-frame.is-over { border-color: var(--ink); background: #efeee9; }
.pm-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pm-empty { display: grid; justify-items: center; gap: 2px; text-align: center; padding: 8px; color: var(--ink-faint); }
.pm-empty .ad-note { margin: 0; font-size: var(--fs-2xs); }
.pm-plus { font-size: var(--fs-lg); line-height: 1; color: var(--ink-faint); }

.pm-progress { position: absolute; inset: auto 0 0 0; background: rgba(255,255,255,.94); padding: 6px 8px; display: flex; align-items: center; gap: 8px; font: 500 10px/1 var(--mono); }
.pm-bar { height: 3px; background: var(--ink); border-radius: 2px; width: 0; flex: 1; transition: width 120ms linear; }

.pm-err { font-size: var(--fs-xs); color: var(--danger); line-height: 1.35; }
.pm-alt .input { width: 100%; font-size: var(--fs-xs); }
.pm-actions { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }

.pm-mini { border: 1px solid var(--line); background: none; border-radius: var(--r-pill); padding: 3px 8px; font-size: var(--fs-2xs); cursor: pointer; color: var(--ink-soft); min-height: 24px; min-width: 24px; }
.pm-mini:hover { border-color: var(--ink); color: var(--ink); }
.pm-foot { margin-top: 10px; }

@media (max-width: 1100px) { .pm-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pm-grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .pm-frame, .pm-bar { transition: none; }
}

/* Catalogue list: photo completeness and view filters */
.ad-chips { display: flex; gap: 5px; flex-wrap: wrap; padding: 8px 0 2px; }
.ad-chip { border: 1px solid var(--line); background: none; border-radius: var(--r-pill); padding: 4px 10px; font-size: var(--fs-xs); cursor: pointer; color: var(--ink-soft); min-height: 26px; }
.ad-chip:hover { border-color: var(--ink-faint); color: var(--ink); }
.ad-chip.on { border-color: var(--ink); color: var(--ink); background: var(--paper); }
.ad-chip .mono { color: var(--ink-faint); font-size: var(--fs-2xs); margin-left: 2px; }

.ad-photo-chip { font: 500 10px/1 var(--mono); padding: 3px 6px; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--ink-faint); white-space: nowrap; align-self: center; }
.ad-photo-chip.is-complete { border-color: #1f7a4d; color: #1f7a4d; }
.ad-photo-chip.is-none { border-color: var(--danger); color: var(--danger); }
.ad-photo-chip.is-part { border-color: #b8912f; color: #8a6d22; }

/* VTO readiness — derived from photo coverage plus vto-config, never stored. */
.ad-vto-chip { font: 500 10px/1 var(--mono); padding: 3px 6px; border-radius: var(--r-pill); border: 1px dashed var(--line); color: var(--ink-faint); white-space: nowrap; align-self: center; }
.ad-vto-chip.is-photo { border-style: solid; border-color: #b8912f; color: #8a6d22; }
.ad-vto-chip.is-provider { border-style: solid; border-color: #1f7a4d; color: #1f7a4d; }
.ad-vto-chip.is-enabled { border-style: solid; background: #1f7a4d; border-color: #1f7a4d; color: #fff; }

/* Lead source in the staff message detail and on the queue card. */
.lead-src { display: grid; gap: 6px; }
.lead-src > div { display: flex; gap: 10px; align-items: baseline; }
.lead-src dt { min-width: 76px; font-size: var(--fs-xs); color: var(--ink-soft); }
.lead-src dd { font-size: var(--fs-sm); }
.so-intent { font-size: var(--fs-xs); color: var(--ink-soft); }

/* Lead facets: narrow the queue by area, intent or campaign. */
.so-facets { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: var(--sp-3); }
.so-facet { display: grid; gap: 4px; font-size: var(--fs-xs); color: var(--ink-soft); }
.so-facet .select { min-width: 150px; }

/* Age of an enquiry. Colour is a nudge, never a deadline — the practice has
   made no response-time commitment and the UI must not invent one. */
.so-age { display: block; font-size: var(--fs-xs); color: var(--ink-soft); }
.so-card.is-age-mid .so-age { color: var(--ink); font-weight: 600; }
.so-card.is-age-old { border-left: 3px solid var(--warn, #b26a00); }
.so-card.is-age-old .so-age { color: var(--warn, #b26a00); font-weight: 600; }

@media (max-width: 720px) {
  .so-facets { flex-direction: column; align-items: stretch; }
  .so-facet .select { width: 100%; }
}

/* Reporting. Two kinds of number, kept visually apart: recorded records, and
   browser-local CTA signals that must never read as traffic. */
.rep-section { margin-bottom: var(--sp-6); }
.rep-section > h3 { margin-bottom: 4px; }
.rep-section.is-local { border-top: 1px dashed var(--line); padding-top: var(--sp-5); }
.rep-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: var(--sp-3) 0; }
.rep-tile { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; }
.rep-n { display: block; font-size: 1.5rem; line-height: 1.1; }
.rep-k { display: block; font-size: var(--fs-xs); color: var(--ink-soft); }
.rep-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-4); }
.rep-block h4 { margin-bottom: 6px; }
.rep-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.rep-table th { text-align: left; font-weight: 500; padding: 3px 8px 3px 0; }
.rep-table td { padding: 3px 0; }
.rep-table tr.is-none { color: var(--ink-soft); }
.rep-bar { width: 40%; }
.rep-bar span { display: block; height: 6px; border-radius: 3px; background: var(--brand, #C22127); min-width: 2px; }
.rep-table tr.is-none .rep-bar span { background: var(--line); }

@media (max-width: 720px) {
  .rep-cols { grid-template-columns: 1fr; }
  .rep-bar { display: none; }
}

/* Log an offline enquiry — the notebook page for WhatsApp and phone leads. */
.lead-log { border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--sp-4); margin: var(--sp-3) 0; display: grid; gap: 12px; }
.lead-log h4 { margin: 0; }
.lead-log-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.lead-log label { display: grid; gap: 4px; font-size: var(--fs-xs); color: var(--ink-soft); }
.lead-log .input, .lead-log .select { width: 100%; }
.lead-log textarea.input { resize: vertical; }
[data-msg-log] { margin-bottom: var(--sp-3); }

@media (max-width: 720px) {
  .lead-log-grid { grid-template-columns: 1fr; }
}

/* Campaign performance spans the full width — it is the table the owner reads
   to decide where the advertising money goes. */
.rep-block.is-wide { grid-column: 1 / -1; }
.rep-table thead th { font-size: var(--fs-xs); color: var(--ink-soft); font-weight: 500; text-align: left; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.rep-table thead th:not(:first-child) { text-align: right; }
.rep-table tbody td { text-align: right; }

/* What came of the enquiry — the one field that turns a lead count into a
   commercial answer. */
.lead-outcome { display: grid; gap: 4px; font-size: var(--fs-xs); color: var(--ink-soft); margin-top: var(--sp-3); }
.lead-outcome .select { max-width: 260px; }
.so-outcome { font-weight: 600; }
.so-outcome.is-booked { color: var(--success, #1B7F5A); }

/* Bookings share the Messages queue shape; only the wide detail block differs. */
.so-block.is-wide { grid-column: 1 / -1; }