/* CSS Order Intake — reference-data screens. Loaded alongside application.css,
   which owns the top bar, flashes, and the palette these build on. */

:root {
  --ref-accent: #0f766e;
  --ref-attention: #d97706;
  --ref-attention-bg: #fffbeb;
}

/* ---- Shell: fixed left nav, scrolling content -------------------------- */
.ref-shell { display: flex; align-items: flex-start; gap: 24px; padding: 20px 22px; }
.ref-nav { flex: 0 0 168px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 20px; }
.ref-main { flex: 1 1 auto; min-width: 0; max-width: 1000px; }

.ref-navlink {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 11px; border-radius: 7px; font-size: 13.5px; font-weight: 600;
  color: var(--muted); text-decoration: none;
}
.ref-navlink:hover { background: #e2e8f0; color: var(--ink); }
.ref-navlink.current { background: var(--ink); color: #fff; }
.ref-badge {
  background: var(--ref-attention); color: #fff; border-radius: 10px;
  padding: 1px 7px; font-size: 11px; font-weight: 700;
}

/* ---- Page furniture ---------------------------------------------------- */
.ref-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.ref-head h1 { margin: 0; font-size: 21px; letter-spacing: -.2px; }
.ref-headactions { display: flex; align-items: center; gap: 8px; }
.ref-lede { margin: 0 0 18px; color: var(--muted); font-size: 13.5px; max-width: 68ch; }
.ref-note { margin: 0 0 12px; color: var(--muted); font-size: 13px; max-width: 72ch; }
.ref-note-attention {
  background: var(--ref-attention-bg); color: #92400e; border-left: 3px solid var(--ref-attention);
  padding: 8px 12px; border-radius: 0 6px 6px 0;
}
.ref-blank { color: var(--muted); font-style: italic; padding: 14px 0; }

/* ---- Toolbar: search + filters ----------------------------------------- */
.ref-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 12px;
}
.ref-search { display: flex; align-items: center; gap: 7px; }
.ref-filters { display: flex; align-items: center; gap: 4px; }
.ref-filter {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  color: var(--muted); text-decoration: none; border: 1px solid transparent;
}
.ref-filter:hover { background: #e2e8f0; color: var(--ink); }
.ref-filter.current { background: var(--panel); border-color: var(--line); color: var(--ink); }
.ref-filter-count { color: var(--muted); font-weight: 500; }

/* ---- Controls ---------------------------------------------------------- */
.ref-input {
  width: 100%; padding: 7px 10px; font: inherit; font-size: 13.5px;
  color: var(--ink); background: var(--panel);
  border: 1px solid var(--line); border-radius: 7px;
}
.ref-input:focus { outline: 2px solid var(--ref-accent); outline-offset: -1px; border-color: var(--ref-accent); }
.ref-input-sm { width: 140px; }
.ref-search .ref-input { width: 260px; }

.ref-btn, .ref-btn button {
  display: inline-block; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--ink); background: var(--panel); border: 1px solid var(--line);
  border-radius: 7px; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.ref-btn:hover, .ref-btn button:hover { border-color: #94a3b8; }
.ref-btn-primary, .ref-btn-primary button { background: var(--ink); border-color: var(--ink); color: #fff; }
.ref-btn-primary:hover, .ref-btn-primary button:hover { background: #1e293b; border-color: #1e293b; }
.ref-btn-quiet, .ref-btn-quiet button { color: var(--muted); background: transparent; }
/* A button that cannot be pressed has to look it. .ref-btn-primary paints its
   own background, so the browser's own shading for a disabled control never
   showed through: Save on the name-mapping screen was unpressable and looked
   ready to press (Jeff, 2026-09-21). */
.ref-btn:disabled, .ref-btn-primary:disabled, .ref-btn button:disabled {
  background: var(--line); border-color: var(--line); color: var(--muted); cursor: not-allowed;
}
.ref-btn:disabled:hover, .ref-btn-primary:disabled:hover, .ref-btn button:disabled:hover {
  background: var(--line); border-color: var(--line);
}
.ref-btn-quiet:hover, .ref-btn-quiet button:hover { color: var(--ink); }
/* button_to wraps its button in a block-level form, which would stack the row's
   actions vertically. The class lands on the button, so target the form itself. */
.ref-btn { margin: 0; }
.ref-actions form, .ref-headactions form, .ref-panel-head form, .ref-formactions form { display: inline-block; }

/* ---- Tables ------------------------------------------------------------ */
.ref-table {
  width: 100%; border-collapse: collapse; background: var(--panel);
  border: 1px solid var(--line); border-radius: 9px; overflow: hidden; font-size: 13.5px;
}
.ref-table th {
  text-align: left; padding: 9px 12px; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px; color: var(--muted);
  background: #f8fafc; border-bottom: 1px solid var(--line);
}
.ref-table td { padding: 9px 12px; border-top: 1px solid var(--line); vertical-align: middle; }
.ref-table tbody tr:first-child td { border-top: 0; }
.ref-table tbody tr:hover { background: #f8fafc; }
.ref-strong { font-weight: 600; }
/* application.css leaves links inherited-and-underlined; a table of them reads as
   noise, so the underline waits for a hover. */
.ref-table a { text-decoration: none; }
.ref-table a:hover { text-decoration: underline; }
.ref-key { color: var(--muted); width: 150px; }
.ref-arrow { color: var(--muted); width: 20px; text-align: center; }
.ref-empty { color: #cbd5e1; }
.ref-provenance { color: var(--muted); font-size: 12.5px; }
.ref-actions { text-align: right; white-space: nowrap; }
.ref-actions > * { margin-left: 5px; }
.ref-row-inactive .ref-strong { color: var(--muted); }

/* ---- Pills ------------------------------------------------------------- */
.ref-pill {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
  background: #e2e8f0; color: var(--muted); white-space: nowrap;
}
.ref-pill-approved { background: #dcfce7; color: #14532d; }
.ref-pill-pending  { background: #fef3c7; color: #92400e; }
.ref-pill-rejected { background: #fee2e2; color: #7f1d1d; }
.ref-pill-inactive { background: #e2e8f0; color: var(--muted); margin-left: 8px; }
.ref-pill-linked { background: #e0e7ff; color: #3730a3; }

/* A consequence worth reading before you save, not an error. */
.ref-warning {
  background: var(--ref-attention-bg); color: #92400e; border: 1px solid #fcd34d;
  border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; font-size: 13px; line-height: 1.5;
}

/* ---- Images (#230): a pasted image, drawn from its own bytes ----------- */
/* The original, scaled by the browser: the app makes no variants. */
.ref-thumb-link { display: inline-flex; flex-direction: column; gap: var(--space-1); }
.ref-thumb {
  display: block; width: 96px; height: 64px; object-fit: contain;
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
}
.ref-thumb-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.ref-image { display: block; max-width: 100%; height: auto; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
/* Scoped to the table so a header cell lines up with its numbers too. */
.ref-table .ref-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- Panels ------------------------------------------------------------ */
.ref-panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 16px 18px; margin-bottom: 16px;
}
.ref-panel h2 { margin: 0 0 4px; font-size: 15px; }
.ref-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ref-panel-attention { border-color: #fcd34d; background: var(--ref-attention-bg); }
.ref-panel .ref-table { border: 0; border-radius: 0; background: transparent; }
.ref-panel .ref-table tbody tr:hover { background: transparent; }

/* ---- Overview cards ---------------------------------------------------- */
.ref-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.ref-card {
  display: flex; flex-direction: column; gap: 2px; padding: 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  text-decoration: none; color: inherit;
}
.ref-card:hover { border-color: #94a3b8; }
.ref-card-count { font-size: 26px; font-weight: 700; letter-spacing: -.6px; }
.ref-card-label { font-size: 13.5px; font-weight: 600; }
.ref-card-note { color: var(--muted); font-size: 12px; line-height: 1.4; }
.ref-card-quiet { background: #f8fafc; }
.ref-card-quiet .ref-card-count { color: var(--muted); }

/* ---- Forms ------------------------------------------------------------- */
.ref-form {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 18px 20px; max-width: 640px;
}
.ref-field { margin-bottom: 16px; }
.ref-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.ref-hint { margin: 0 0 6px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.ref-field-check { display: flex; align-items: center; gap: 8px; }
.ref-field-check label { margin: 0; }
.ref-field-check input { margin: 0; }
.ref-field-inline { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ref-field-inline label { flex: 0 0 130px; margin: 0; }
.ref-field-inline .ref-input { flex: 1 1 auto; }
.ref-field-inline .ref-provenance { flex: 0 0 auto; }
.ref-fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; margin: 0 0 16px; }
.ref-fieldset legend { padding: 0 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.ref-formactions { display: flex; align-items: center; gap: 8px; padding-top: 4px; }
.ref-errors {
  background: #fee2e2; color: #7f1d1d; border-radius: 8px;
  padding: 10px 14px; margin-bottom: 16px; font-size: 13px;
}
.ref-errors p { margin: 0 0 4px; font-weight: 600; }
.ref-errors ul { margin: 0; padding-left: 18px; }

/* ---- Pager ------------------------------------------------------------- */
.ref-pager { display: flex; align-items: center; gap: 12px; padding: 14px 2px; }
.ref-pager-count { color: var(--muted); font-size: 12.5px; }

/* ---- Read-only vocabulary chips ---------------------------------------- */
.ref-chips { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; margin: 0; padding: 0; }
.ref-chip {
  padding: 5px 11px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; font-size: 13px;
}

/* ---- Evaluation: the model picker — search, a results list, chips for the chosen. */
.eval-picker { position: relative; }
.eval-picker-chips { margin-bottom: 8px; min-height: 0; }
.eval-picker-chip { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.eval-picker-chip .ref-provenance { font-size: 12px; }
.eval-picker-chip button {
  border: 0; background: none; padding: 0 2px; font: inherit; font-size: 15px; line-height: 1;
  color: var(--muted); cursor: pointer;
}
.eval-picker-chip button:hover { color: var(--warn); }
.eval-picker-box { display: flex; align-items: center; gap: 10px; }
.eval-picker-box .ref-input { flex: 1 1 auto; }
.eval-picker-count { flex: 0 0 auto; white-space: nowrap; }
.eval-picker-list {
  position: absolute; left: 0; right: 0; z-index: 20; margin: 4px 0 0; padding: 4px; list-style: none;
  max-height: 22rem; overflow: auto; background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.eval-picker-item {
  display: grid; grid-template-columns: minmax(0, 1fr) 6.5em 6.5em 4.5em; gap: 12px; align-items: baseline;
  padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 13px;
}
.eval-picker-item:hover, .eval-picker-item.active { background: var(--tone-muted); }
.eval-picker-item .ref-key { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eval-picker-item .ref-provenance { display: block; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eval-picker-item .eval-num { text-align: right; font-variant-numeric: tabular-nums; }
.eval-picker-item .eval-num small { display: block; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.eval-picker-empty { padding: 8px 10px; font-size: 13px; color: var(--muted); }

/* ---- Field contract (#396) -------------------------------------------------
   The page's job is to make a disagreement between what CSS agreed and what the
   app does impossible to miss, and everything else quiet. So one tone carries
   "agreed and not honoured" and nothing else competes with it. */
.ref-contract-alert  { background: #fee2e2; color: #7f1d1d; }
.ref-contract-warn   { background: #fef3c7; color: #92400e; }
.ref-contract-ok     { background: #dcfce7; color: #14532d; }
.ref-contract-quiet  { background: #e2e8f0; color: var(--muted); }
.ref-contract-plain  { background: var(--tone-muted); color: var(--muted); }

/* The one number the page exists for, read before the table under it. */
.ref-contract-score {
  margin: 0 0 var(--space-4); padding: 14px 16px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--panel); font-size: 14px;
}
.ref-contract-score strong { font-size: 18px; }
.ref-contract-score .ref-contract-ok { background: none; padding: 0; }

.ref-contract-filters { display: flex; flex-wrap: wrap; gap: 8px; }

/* A row whose contract the app is not honouring carries the alert's own tint,
   the way a flagged proofing cell does. A draft that has drifted is our own
   paperwork, so it is amber rather than red. */
.ref-contract-row-alert > td { background: #fef2f2; }
.ref-contract-row-warn  > td { background: #fffbeb; }

.ref-contract-compare th[scope="row"] { text-align: left; font-weight: 500; color: var(--muted); }
.ref-contract-differs > td, .ref-contract-differs > th { background: #fef2f2; }
p.ref-contract-alert {
  margin-top: var(--space-3); padding: 10px 12px; border-radius: 6px;
  background: #fef2f2; color: #7f1d1d; font-size: 13px;
}
.ref-contract-foot { margin-top: var(--space-5); font-size: 12.5px; }

.ref-history { list-style: none; margin: 0; padding: 0; }
.ref-history > li { padding: 10px 0; border-top: 1px solid var(--divider); font-size: 13px; }
.ref-history-changes { margin: 6px 0 0; padding-left: 18px; color: var(--muted); font-size: 12.5px; }
.ref-deflist { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 8px 16px; margin: 0; }
.ref-deflist dt { color: var(--muted); font-size: 13px; }
.ref-deflist dd { margin: 0; font-size: 14px; }

/* ---- Name mappings (#428) ----------------------------------------------
   One row, one form: a box wide enough for a client's whole name, the names we
   think it might be underneath it, and one Save. `position: relative` because
   the customer list hangs off this form. */
.ref-map { position: relative; display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.ref-map-input { width: 100%; min-width: 260px; }
.ref-map-pick { font-size: 12px; }
/* A pick is the answer, so the box is not — greyed, never disabled, because
   clicking it is how you change your mind and a radio cannot be un-ticked. */
.ref-map-input.muted { background: var(--n100); color: var(--n700); }
.ref-map-pick input:disabled + label { color: var(--n600); }
/* Both answers on one row: Save where the eye lands, and the quiet one for a
   name nothing can be mapped to pushed away to the right, so the two are never
   mistaken for a pair of equal choices. */
.ref-map-actions { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); width: 100%; }