/* Data-entry first: dense, high-contrast, keyboard-friendly. Several hundred
   lots get typed per catalog, so vertical space and tab order matter more than
   decoration. */

:root {
  --bg:        #f6f7f9;
  --surface:   #ffffff;
  --ink:       #16191d;
  --ink-soft:  #5b6572;
  --ink-faint: #8b95a3;
  --line:      #dde1e7;
  --line-soft: #eaedf1;

  --accent:      #1f6feb;
  --accent-soft: #e8f0fe;
  --danger:      #c4331d;
  --danger-soft: #fdecea;
  --warn:        #9a6700;
  --warn-soft:   #fff8e0;
  --ok:          #1a7f37;

  --auto:      #f0f7ff;   /* pedigree cell filled from the graph */
  --auto-edge: #b6d4fe;

  --radius: 6px;
  --gap: 12px;

  /* The nav sidebar. On the lots page a second sidebar sits beside it. */
  --rail: 208px;
  --topbar-h: 54px;
}

/* Dark applies when the machine asks for it, unless the theme button has
   explicitly chosen light; an explicit dark always wins. Declared twice
   because CSS has no way to reuse a block of custom properties. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #14171b;
    --surface:   #1c2026;
    --ink:       #e7eaee;
    --ink-soft:  #a5aebb;
    --ink-faint: #78828f;
    --line:      #2c323a;
    --line-soft: #242930;

    --accent:      #4f8ff7;
    --accent-soft: #1a2a44;
    --danger:      #f0705c;
    --danger-soft: #3a1f1a;
    --warn:        #e0b341;
    --warn-soft:   #33290f;
    --ok:          #4ac26b;

    --auto:      #17263c;
    --auto-edge: #2d4a75;

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg:        #14171b;
  --surface:   #1c2026;
  --ink:       #e7eaee;
  --ink-soft:  #a5aebb;
  --ink-faint: #78828f;
  --line:      #2c323a;
  --line-soft: #242930;

  --accent:      #4f8ff7;
  --accent-soft: #1a2a44;
  --danger:      #f0705c;
  --danger-soft: #3a1f1a;
  --warn:        #e0b341;
  --warn-soft:   #33290f;
  --ok:          #4ac26b;

  --auto:      #17263c;
  --auto-edge: #2d4a75;

  color-scheme: dark;
}

/* So form controls, scrollbars and the like follow too. */
:root[data-theme="light"] { color-scheme: light; }

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
}

/* ------------------------------------------------------------- app shell */

/* Two columns: the sidebar spans full height, everything else stacks beside
   it. The sidebar is an empty element in the HTML until shell.js fills it, so
   the column is the right width from first paint and nothing jumps. */

.app {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "nav top"
    "nav main";
  min-height: 100vh;
}

.app > .sidenav { grid-area: nav; }
.app > .topbar  { grid-area: top; }

/* width:100% matters more than it looks. Pages that centre themselves use
   `max-width` with `margin: 0 auto`, and auto margins turn off the stretch a
   grid item normally gets — so the item falls back to shrink-to-fit, which for
   the Data page means the min-content width of a 57-column table. It grew past
   its column and pushed the whole page sideways. Filling the track first, then
   letting max-width cap it, keeps the centring and loses the overflow. */
.app > main { grid-area: main; min-width: 0; width: 100%; }

/* --------------------------------------------------------------- sidenav */

.sidenav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 10px;
  background: var(--surface);
  border-right: 1px solid var(--line);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  z-index: 25;
}

.sidenav-brand {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 4px 8px 12px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.sidenav-name { min-width: 0; }

/* The brand row aligns on the text baseline, which would hang a replaced
   element by its bottom edge. These opt out of that and centre instead. */
.sidenav-mark, .signin-card .brand-mark { display: block; align-self: center; flex: none; }

.sidenav .version {
  font-weight: 500;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1px 6px;
  letter-spacing: 0;
  flex: none;
}
/* Flagged when the database was written by a different build. */
.sidenav .version.mismatch {
  color: var(--warn);
  border-color: var(--warn);
  background: var(--warn-soft);
}

/* The links scroll; the brand above and the account below stay put. */
.sidenav-links {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sidenav-group { display: flex; flex-direction: column; gap: 1px; }
.sidenav-group h2 {
  margin: 0 0 4px 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-faint);
  font-weight: 650;
}

.sidenav-group a {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border-radius: var(--radius);
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 550;
  font-size: 13px;
}
.sidenav-group a:hover { background: var(--line-soft); color: var(--ink); }
.sidenav-group a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }

/* --- who is signed in, at the bottom --- */

.sidenav-foot {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px solid var(--line-soft);
}

.org-switch { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.org-switch > span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-faint);
  font-weight: 650;
  padding-left: 8px;
}
.org-switch select { width: 100%; padding: 5px 8px; font-size: 13px; }

.account-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  background: none;
  border-radius: var(--radius);
  text-align: left;
  min-width: 0;
}
.account-btn:hover { background: var(--line-soft); }

.account-avatar {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

/* min-width:0 on both, so a long address ellipsizes instead of widening the
   sidebar past its column. */
.account-label { display: grid; min-width: 0; }
.account-label strong,
.account-label span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-label strong { font-size: 12px; font-weight: 600; }
.account-label span { font-size: 11px; color: var(--ink-faint); }

/* Opens upward — there is nothing below it. */
.account-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
}

.nav-badge {
  margin-left: auto;
  min-width: 17px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}

/* ---------------------------------------------------------------- topbar */

.topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 16px;
  min-height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}

.page-title {
  margin: 0 auto 0 0;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.auction-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;              /* let the select shrink instead of overflowing */
}

/* The global label rule stacks its contents and the global select rule is
   width:100%. Together they made the select overlap the word "Auction" once
   the bar got tight, so both are pinned back here. */
.auction-picker label {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  flex: none;
  white-space: nowrap;
  color: var(--ink-soft);
  font-size: 12px;
}

.auction-picker select {
  width: auto;
  min-width: 200px;
  max-width: 340px;
  flex: 0 1 auto;
}

.auction-picker button { flex: none; white-space: nowrap; }

/* Below this the bar wraps rather than crushing the picker. min-width:0 on the
   select because its 200px floor plus the button came to more than a phone is
   wide, and the bar pushed the whole page sideways. */
@media (max-width: 1180px) {
  .topbar { flex-wrap: wrap; gap: 10px 16px; }
  .auction-picker { order: 3; width: 100%; flex-wrap: wrap; }
  .auction-picker select { flex: 1 1 140px; min-width: 0; max-width: none; }
}

.graph-stat { color: var(--ink-faint); font-size: 12px; font-variant-numeric: tabular-nums; }

/* order: 99 in the base rule keeps it last; the auto margin there is for the
   sign-in card, which has no title to do the pushing. */
.topbar .theme-toggle { margin-left: 0; }

/* Narrow: the sidebar lies down across the top and scrolls sideways, which
   keeps every page reachable without a hamburger to open and a state to keep. */
@media (max-width: 820px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "nav" "top" "main";
  }

  .sidenav {
    position: static;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
  }

  .sidenav-brand { padding: 0; flex: none; }
  .sidenav-links { flex-direction: row; gap: 10px; overflow: visible; }
  .sidenav-group { flex-direction: row; gap: 2px; }
  .sidenav-group h2 { display: none; }
  .sidenav-group a { white-space: nowrap; }

  .sidenav-foot {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin: 0 0 0 auto;
    padding: 0 0 0 10px;
    border-top: 0;
    border-left: 1px solid var(--line-soft);
    flex: none;
  }
  .org-switch { flex-direction: row; align-items: center; gap: 6px; }
  .org-switch > span { display: none; }
  .org-switch select { width: auto; max-width: 160px; }
  .account-label { display: none; }
  .account-btn { width: auto; }
  .account-menu { left: auto; right: 0; top: calc(100% + 6px); bottom: auto; min-width: 150px; }
}

/* ---------------------------------------------------------------- layout */

.layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 0;
  align-items: start;
}

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; max-height: 300px; }
}

/* --------------------------------------------------------------- sidebar */

.sidebar {
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--surface);
  border-right: 1px solid var(--line);
  overflow: hidden;
}

.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sidebar-head h2 { margin: 0; font-size: 13px; text-transform: uppercase;
                   letter-spacing: 0.06em; color: var(--ink-soft); }

.lot-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
}

/* :not(.empty) because the placeholder row is one run of text — as a grid
   item it broke one word per line. */
.lot-list li:not(.empty) {
  padding: 7px 9px;
  border-radius: var(--radius);
  cursor: pointer;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
}
.lot-list li:hover { background: var(--line-soft); }
.lot-list li[aria-current="true"] { background: var(--accent-soft); }

.lot-list .no { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink-soft); }
.lot-list .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lot-list .sub { grid-column: 2; font-size: 11px; color: var(--ink-faint);
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lot-list li.scratched .nm { text-decoration: line-through; color: var(--ink-faint); }

.empty { color: var(--ink-faint); font-size: 13px; padding: 10px 4px; }

/* ---------------------------------------------------------------- editor */

.editor { padding: 16px; min-width: 0; }

.form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.form-head h1 { margin: 0; font-size: 19px; letter-spacing: -0.01em; }
.form-actions { display: flex; align-items: center; gap: 8px; }
.save-note { font-size: 12px; color: var(--ink-faint); }

fieldset {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 12px 14px 14px;
  margin: 0 0 12px;
}

legend {
  font-size: 12px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  padding: 0 6px;
}
.legend-note {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--ink-faint);
  margin-left: 8px;
}

/* ----------------------------------------------------------------- forms */

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
}

label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  min-width: 0;
}

input, select, textarea {
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px 8px;
  width: 100%;
  min-width: 0;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}

/* column spans */
.f-lot { grid-column: span 2; }
.f-val { grid-column: span 2; }
.f-sec { grid-column: span 3; }
.f-cat { grid-column: span 3; }
.f-status { grid-column: span 2; }

.f-name { grid-column: span 4; }
.f-reg  { grid-column: span 2; }
.f-gender  { grid-column: span 2; }
.f-color { grid-column: span 2; }
.f-foaled { grid-column: span 2; }
.f-infoal { grid-column: span 4; }

.f-sire, .f-dam { grid-column: span 4; }
.f-sirebreed, .f-dambreed { grid-column: span 2; }

.f-owner { grid-column: span 4; }
.f-agent { grid-column: span 3; }
.f-addr  { grid-column: span 5; }
.f-city  { grid-column: span 3; }
.f-state { grid-column: span 2; }
.f-zip   { grid-column: span 2; }
.f-phone { grid-column: span 3; }

.f-photo { grid-column: span 6; }
.f-cap   { grid-column: span 6; }

/* ------------------------------------------------------------- ancestors */

.ancestors {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
@media (max-width: 1100px) { .ancestors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.anc-gen {
  grid-column: 1 / -1;
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin-top: 4px;
}

/* A cell the graph filled, so it is obvious what was typed vs derived. */
input.autofilled {
  background: var(--auto);
  border-color: var(--auto-edge);
}

/* ------------------------------------------------------------- combo box */

.combo { position: relative; }

.combo-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.14);
  max-height: 260px;
  overflow-y: auto;
}

.combo-menu li {
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 8px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 13px;
  color: var(--ink);
}
.combo-menu li[aria-selected="true"] { background: var(--accent-soft); }
.combo-menu .meta { margin-left: auto; font-size: 11px; color: var(--ink-faint);
                    white-space: nowrap; }
.combo-menu .fuzzy-flag { font-size: 10px; color: var(--warn);
                          background: var(--warn-soft); padding: 1px 5px; border-radius: 3px; }
.combo-menu .none { color: var(--ink-faint); cursor: default; }

/* ------------------------------------------------------- footnote editor */

/* The backdrop renders the same text behind the textarea, with misspelled
   spans underlined. Both boxes must share identical metrics or the underlines
   drift away from the words. */
.notes-wrap { position: relative; }

.notes-backdrop,
.notes-wrap textarea {
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  white-space: pre-wrap;
  overflow-wrap: break-word;
  letter-spacing: normal;
}

.notes-backdrop {
  position: absolute;
  inset: 0;
  color: transparent;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.notes-wrap textarea {
  position: relative;
  z-index: 1;
  background: transparent;
  border-color: var(--line);
  resize: vertical;
  display: block;
}
.notes-wrap textarea:focus { border-color: var(--accent); }

.notes-backdrop mark {
  background: transparent;
  color: transparent;
  border-bottom: 2px wavy var(--danger);
  border-bottom-style: wavy;
}

/* Behind the transparent textarea, so a solid fill would hide the text. */
.notes-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--surface);
  border-radius: var(--radius);
  z-index: 0;
}

/* -------------------------------------------------------------- buttons */

button {
  font: inherit;
  font-weight: 550;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  padding: 6px 12px;
  cursor: pointer;
}
button:hover { border-color: var(--ink-faint); }

button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
button.primary:hover { filter: brightness(1.08); }

button.ghost { background: transparent; color: var(--ink-soft); }

button.danger { background: var(--danger-soft); border-color: transparent; color: var(--danger); }

button.small { padding: 3px 8px; font-size: 12px; }

/* -------------------------------------------------------------- warnings */

.warnings {
  border: 1px solid var(--warn);
  background: var(--warn-soft);
  color: var(--warn);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 13px;
}
.warnings ul { margin: 6px 0 0; padding-left: 18px; }

/* --------------------------------------------------------------- dialogs */

.dialog {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0;
  background: var(--surface);
  color: var(--ink);
  max-width: 560px;
  width: calc(100vw - 32px);
  box-shadow: 0 20px 60px rgb(0 0 0 / 0.3);
}
.dialog::backdrop { background: rgb(0 0 0 / 0.45); }
.dialog .dialog-body { padding: 18px 20px 16px; display: flex; flex-direction: column; gap: 12px; }
.dialog h2 { margin: 0; font-size: 17px; }
.dialog-sub { margin: 0; color: var(--ink-soft); font-size: 13px; }
.dialog-error { margin: 0; color: var(--danger); font-size: 13px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.dialog label { text-transform: none; letter-spacing: 0; font-size: 12px; }

/* ------------------------------------------------------- pedigree editor */

/* Opens the pedigree of whatever horse is in the field beside it. Sits inside
   the input rather than after it so the form's grid columns stay put. */
.ped-open {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 22px;
  height: 22px;
  padding: 0;
  line-height: 1;
  font-size: 13px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: none;
  color: var(--ink-faint);
  cursor: pointer;
}
.ped-open:hover:not(:disabled) {
  color: var(--accent);
  border-color: var(--line);
  background: var(--surface);
}
.ped-open:disabled { opacity: 0.25; cursor: default; }

/* The wrapper that lets the button sit inside a plain (non-combo) input. */
.ped-cell { position: relative; display: block; }

/* Keep a long name from running under the button. */
.ped-cell input,
.combo:has(> .ped-open) input { padding-right: 30px; }

/* A horse with no ancestors on file — the reason to open the editor. */
.ped-open.empty {
  color: var(--warn);
  border-color: var(--warn);
  background: var(--warn-soft);
}

.dialog.wide { max-width: 640px; }

.ped-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 620px) { .ped-grid { grid-template-columns: 1fr; } }

.ped-side { display: flex; flex-direction: column; gap: 8px; }
.ped-side-head {
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

.ped-field { display: flex; flex-direction: column; gap: 4px;
             text-transform: none; letter-spacing: 0; font-size: 12px; }
/* The grandparents sit under the parent they belong to. */
.ped-field.indent { margin-left: 12px; padding-left: 10px; border-left: 2px solid var(--line); }

.spell-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 46vh;
  overflow-y: auto;
}

.spell-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.spell-item.resolved { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 8%, transparent); }

.spell-word {
  font-weight: 650;
  font-size: 15px;
}
.spell-word .ctx { font-weight: 400; font-size: 12px; color: var(--ink-faint); margin-left: 8px; }

.spell-choices { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.spell-choices button { padding: 3px 9px; font-size: 13px; font-weight: 500; }
.spell-choices button.picked { background: var(--accent); border-color: var(--accent); color: #fff; }
.spell-choices .sep { width: 1px; height: 18px; background: var(--line); margin: 0 2px; }
.spell-choices input { width: 140px; padding: 3px 7px; font-size: 13px; }

/* ------------------------------------------------------------- templates */

.empty-state { padding: 60px 20px; text-align: center; color: var(--ink-faint); }
.empty-state h1 { font-size: 18px; color: var(--ink-soft); margin: 0 0 6px; }
.empty-state p { margin: 0; font-size: 14px; }

.hint { margin: 10px 0 0; font-size: 12px; color: var(--ink-faint); line-height: 1.5; }

.upload-actions { grid-column: span 3; display: flex; align-items: flex-end; }

.progress { height: 4px; background: var(--line-soft); border-radius: 2px; margin-top: 10px; overflow: hidden; }
.progress > div { height: 100%; width: 0; background: var(--accent); transition: width 0.15s; }

.btn-link {
  font-size: 14px; font-weight: 550; padding: 6px 12px;
  border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink); text-decoration: none;
}
.btn-link:hover { border-color: var(--ink-faint); }

/* template cards */
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }

.tpl-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tpl-card:hover { border-color: var(--accent); }

.tpl-card h3 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; }

.badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  padding: 2px 6px; border-radius: 3px; text-transform: uppercase;
}
.badge.idml { background: var(--accent-soft); color: var(--accent); }
.badge.pdf  { background: var(--warn-soft); color: var(--warn); }
.badge.err  { background: var(--danger-soft); color: var(--danger); }

.tpl-size { font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.tpl-size .pt { color: var(--ink-faint); font-size: 12px; }

.tpl-counts { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px; color: var(--ink-faint); }
.tpl-counts b { color: var(--ink-soft); font-weight: 650; }

/* detail */
.spec { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.spec div { display: flex; flex-direction: column; gap: 2px; }
.spec dt, .spec .k {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-faint); font-weight: 650;
}
.spec .v { font-size: 14px; font-variant-numeric: tabular-nums; }
.spec .v small { color: var(--ink-faint); font-size: 11px; }

.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.swatch { display: flex; align-items: center; gap: 8px; font-size: 12px; min-width: 0; }
.swatch .chip {
  width: 26px; height: 26px; border-radius: 4px; flex: none;
  border: 1px solid rgb(0 0 0 / 0.18);
}
.swatch .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.swatch .vals { color: var(--ink-faint); font-size: 11px; font-variant-numeric: tabular-nums; }

table.data { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.data th {
  text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-faint); padding: 4px 8px 6px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--surface);
}
table.data td { padding: 5px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
table.data td.num { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-soft); }
table.data td.txt { max-width: 340px; }
table.data tr:hover td { background: var(--line-soft); }

.scroll-x { overflow-x: auto; }
.scroll-y { max-height: 420px; overflow-y: auto; }

.flag { color: var(--danger); font-weight: 600; }
.flag.ok { color: var(--ok); }
.flag.warn { color: var(--warn); }

.keyword-chip {
  display: inline-block; font-family: ui-monospace, monospace; font-size: 12px;
  background: var(--accent-soft); color: var(--accent);
  padding: 3px 8px; border-radius: 4px; margin: 0 6px 6px 0;
}

.notice {
  border-left: 3px solid var(--warn); background: var(--warn-soft); color: var(--warn);
  padding: 8px 12px; border-radius: 4px; font-size: 12.5px; line-height: 1.5;
  margin-bottom: 10px;
}

/* ------------------------------------------------------ keyword reference */

.kw-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: 14px;
}

.kw-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.kw-panel.collapsed .kw-head { border-bottom: none; }
.kw-head h2 {
  margin: 0; font-size: 13px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-soft);
}
.kw-count { color: var(--ink-faint); font-weight: 400; margin-left: 6px; text-transform: none; }
.kw-actions { display: flex; align-items: center; gap: 6px; }
.kw-actions input { width: 150px; padding: 4px 8px; font-size: 13px; }

.kw-body { padding: 12px 14px 14px; }
.kw-panel.collapsed .kw-body { display: none; }
.kw-body code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 11.5px; background: var(--line-soft);
  padding: 1px 5px; border-radius: 3px;
}

.kw-group { margin-top: 14px; }
.kw-group:first-child { margin-top: 4px; }
.kw-group > h3 {
  margin: 0 0 6px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint);
}

.kw-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 4px; }

.kw-item {
  display: flex; align-items: baseline; gap: 8px;
  padding: 4px 8px; border-radius: 4px; cursor: pointer;
  border: 1px solid transparent; min-width: 0;
}
.kw-item:hover { background: var(--accent-soft); border-color: var(--auto-edge); }
.kw-item.copied { background: color-mix(in srgb, var(--ok) 14%, transparent); }

.kw-token {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12.5px; color: var(--accent); white-space: nowrap;
}
.kw-item.copied .kw-token { color: var(--ok); }
.kw-note { font-size: 10.5px; color: var(--ink-faint); margin-left: auto; white-space: nowrap; }

.kw-tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 1px 5px; border-radius: 3px; white-space: nowrap;
}
.kw-tag.auto  { background: var(--auto); color: var(--accent); border: 1px solid var(--auto-edge); }
.kw-tag.image { background: var(--warn-soft); color: var(--warn); }
.kw-tag.flow  { background: var(--line-soft); color: var(--ink-soft); }

/* recognized vs unknown placeholders on a template */
.keyword-chip.unknown { background: var(--danger-soft); color: var(--danger); }
.keyword-chip .maps { opacity: 0.7; font-size: 11px; }

/* ------------------------------------------------------------ slot map */

.slot-wrap { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }

.slot-map {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  flex: none;
}
.slot-map .page { fill: transparent; stroke: var(--line); stroke-width: 2; }
.slot-map .slot {
  fill: var(--accent);
  fill-opacity: 0.10;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-dasharray: 10 6;
}
.slot-map .slot-label {
  fill: var(--accent);
  font: 600 20px system-ui, sans-serif;
}

.build-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px;
}

/* ---------------------------------------------------------------- photos */

.photo-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}

.photo-slot {
  display: flex;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  min-width: 0;
}
.photo-slot.dragover { border-color: var(--accent); background: var(--accent-soft); }

.photo-thumb {
  width: 84px;
  height: 108px;
  flex: none;
  border: 1px dashed var(--line);
  border-radius: 4px;
  background: var(--line-soft);
  display: grid;
  place-items: center;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-thumb .none {
  font-size: 10px; color: var(--ink-faint); text-align: center;
  padding: 0 6px; line-height: 1.4;
}
.photo-thumb.has-image { border-style: solid; }
.photo-slot.low-res .photo-thumb { border-color: var(--warn); }
.photo-slot.missing .photo-thumb { border-color: var(--danger); }

.photo-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }

.photo-title {
  font-size: 11px; font-weight: 650; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--ink-soft);
}
.photo-meta { font-size: 11px; color: var(--ink-faint); overflow-wrap: anywhere; }
.photo-meta .warn { color: var(--warn); font-weight: 600; }
.photo-meta .bad  { color: var(--danger); font-weight: 600; }
.photo-meta .ok   { color: var(--ok); }

.photo-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.photo-actions button { padding: 3px 9px; font-size: 12px; }

.photo-slot input {
  font-size: 12px;
  padding: 4px 7px;
}

/* ------------------------------------------------------------ data quality */

.quality-main { padding: 16px; max-width: 1100px; margin: 0 auto; }

.q-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.q-stat {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 10px 12px;
}
.q-stat .n { font-size: 22px; font-weight: 650; font-variant-numeric: tabular-nums; }
.q-stat .k {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-faint); font-weight: 650;
}
.q-stat .sub { font-size: 11px; color: var(--ink-faint); }
.q-stat.done .n { color: var(--ok); }

.q-tabs {
  display: flex; align-items: center; gap: 4px;
  border-bottom: 1px solid var(--line); margin-bottom: 10px;
}
.q-tab {
  border: none; background: none; border-bottom: 2px solid transparent;
  border-radius: 0; padding: 8px 12px; color: var(--ink-soft); font-weight: 600;
}
.q-tab:hover { color: var(--ink); }
.q-tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.q-count {
  font-size: 11px; font-weight: 500; color: var(--ink-faint);
  background: var(--line-soft); padding: 1px 6px; border-radius: 9px; margin-left: 4px;
}
.q-tab-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.q-tab-actions select { width: auto; padding: 4px 8px; font-size: 13px; }

/* one decision */
.q-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.q-card.resolving { opacity: 0.45; pointer-events: none; }
.q-card.done { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 7%, transparent); }

.q-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.q-head .name { font-size: 15px; font-weight: 650; }
.q-head .what { font-size: 12px; color: var(--ink-soft); }
.q-impact {
  font-size: 11px; font-weight: 650; color: var(--warn);
  background: var(--warn-soft); padding: 1px 7px; border-radius: 9px;
}
.q-score {
  font-size: 11px; color: var(--ink-faint); font-variant-numeric: tabular-nums;
  margin-left: auto;
}

.q-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 720px) { .q-options { grid-template-columns: 1fr; } }

.q-option {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  display: flex; flex-direction: column; gap: 6px;
  cursor: pointer;
  min-width: 0;
}
.q-option:hover { border-color: var(--accent); background: var(--accent-soft); }
.q-option .val { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.q-option .meta { font-size: 11px; color: var(--ink-faint); line-height: 1.5; }
.q-option .warn-line { font-size: 11px; color: var(--danger); font-weight: 600; }
.q-option .pick {
  margin-top: auto; font-size: 12px; font-weight: 650; color: var(--accent);
}
/* The side the data already agrees with. */
.q-option.favoured { border-color: var(--auto-edge); background: var(--auto); }
.q-option.favoured .pick::after { content: '  · more used'; color: var(--ink-faint); font-weight: 400; }

.q-secondary { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
.q-secondary .spacer { margin-left: auto; }

.q-empty {
  text-align: center; padding: 50px 20px; color: var(--ink-faint);
  border: 1px dashed var(--line); border-radius: var(--radius);
}
.q-empty strong { display: block; color: var(--ok); font-size: 16px; margin-bottom: 4px; }

.q-explain {
  margin: 2px 0 10px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-faint);
  max-width: 640px;
}

.q-tag {
  display: inline-block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  margin-bottom: 3px;
}

.q-sources {
  margin: 8px 0 10px;
  font-size: 12px;
  line-height: 1.6;
  max-height: 128px;
  overflow-y: auto;
}
.q-src-label { color: var(--ink-faint); margin-bottom: 2px; }
.q-src-file {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11.5px;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}
.q-option .q-sources { margin: 6px 0 4px; max-height: 96px; }

.q-loading {
  text-align: center;
  padding: 40px 20px;
  color: var(--ink-faint);
  font-size: 13px;
}

.q-error {
  padding: 26px 24px;
  border: 1px solid var(--warn);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--warn) 7%, transparent);
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.6;
  max-width: 620px;
  margin: 0 auto;
}
.q-error strong {
  display: block;
  color: var(--warn);
  font-size: 15px;
  margin-bottom: 6px;
}
.q-error button { margin-top: 14px; }

.q-more { text-align: center; padding: 10px 0 30px; }

.merge-lines { font-size: 13px; line-height: 1.7; }
.merge-lines .clash { color: var(--warn); }

/* ----------------------------------------------------------------- toast */

.toast {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--bg);
  padding: 9px 16px;
  border-radius: 20px;
  font-size: 13px;
  z-index: 60;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.25);
}
.toast.err { background: var(--danger); color: #fff; }

.toast-action {
  margin-left: 12px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  background: var(--bg);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
}
.toast-action:hover { background: #fff; }

/* ==========================================================================
   Data page
   ========================================================================== */

.data-main { padding: 16px; max-width: 1400px; margin: 0 auto; }

.d-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.d-stat {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.d-stat strong { font-size: 22px; font-weight: 650; font-variant-numeric: tabular-nums; }
.d-stat span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
               color: var(--ink-faint); }

.d-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.d-panel-head h2 { margin: 0 0 4px; font-size: 15px; }
.d-panel-head .hint { margin: 0 0 12px; max-width: 70ch; }

.d-sub {
  margin: 16px 0 8px;
  font-size: 12px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}
.d-sub:first-of-type { margin-top: 4px; }

/* --- export cards --- */

.d-exports {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.d-export {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.d-export h3 { margin: 0; font-size: 13px; }
.d-export p { margin: 0; font-size: 12px; color: var(--ink-faint); flex: 1; }
.d-export button { align-self: flex-start; }

/* --- browse --- */

.d-tabs {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line); margin-bottom: 10px;
}
.d-tab {
  border: none; background: none; border-bottom: 2px solid transparent;
  border-radius: 0; padding: 8px 12px; color: var(--ink-soft); font-weight: 600;
}
.d-tab:hover { color: var(--ink); }
.d-tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.d-count {
  font-size: 11px; font-weight: 500; color: var(--ink-faint);
  background: var(--line-soft); padding: 1px 6px; border-radius: 9px; margin-left: 4px;
}
.d-tab-actions { margin-left: auto; display: flex; gap: 6px; align-items: center;
                 flex-wrap: wrap; padding-bottom: 6px; }
.d-tab-actions select,
.d-tab-actions input[type="search"] { width: auto; padding: 4px 8px; font-size: 13px; }
.d-tab-actions input[type="search"] { min-width: 180px; }

.d-check {
  /* the global label rule is flex-direction:column, which this must undo */
  display: inline-flex; flex-direction: row; align-items: center; gap: 6px;
  font-size: 12px; text-transform: none; letter-spacing: 0; white-space: nowrap;
}
.d-check input { width: auto; }

/* The table is wide by design — 56 columns for lots — so it scrolls inside
   its own box rather than pushing the page sideways. */
.d-table-wrap {
  overflow: auto;
  max-height: 60vh;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.d-table { border-collapse: collapse; font-size: 12px; white-space: nowrap; }
.d-table th, .d-table td {
  padding: 5px 9px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.d-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  font-size: 11px; font-weight: 650;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-faint);
}
.d-table tbody tr:hover { background: var(--line-soft); }
.d-table td.empty { color: var(--ink-faint); padding: 20px; white-space: normal; }

.d-pager {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; font-size: 12px; color: var(--ink-faint);
}
.d-pager button { font-size: 12px; }

/* --- retention --- */

.d-auctions { display: flex; flex-direction: column; gap: 6px; }
.d-auction {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.d-auction-name { font-weight: 600; font-size: 13px; }
.d-auction-meta { font-size: 12px; color: var(--ink-faint); white-space: nowrap; }
button.danger-text { color: var(--danger); }
button.danger-text:hover { background: var(--danger-soft); border-color: transparent; }

.d-prune { display: flex; flex-direction: column; gap: 4px; }
.d-prune-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}
.d-prune-row.none { opacity: 0.45; cursor: default; }
.d-prune-row input { width: auto; margin-top: 2px; }
.d-prune-row span { display: flex; flex-direction: column; gap: 2px; }
.d-prune-row strong { font-size: 13px; font-weight: 600; }
.d-prune-row em { font-style: normal; font-size: 12px; color: var(--ink-faint); }

.d-prune-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; }

.d-del-list { list-style: none; margin: 0 0 8px; padding: 0;
              display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.d-del-list li { padding-left: 20px; position: relative; }
.d-del-list li.goes::before  { content: '−'; position: absolute; left: 4px; color: var(--danger); }
.d-del-list li.stays::before { content: '✓'; position: absolute; left: 2px; color: var(--ok, #2c7a4b); }
.d-del-list li.stays { color: var(--ink-faint); }

/* ------------------------------------------------------ override dialog */

.ov-card {
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 10px;
}
.ov-card[data-choice="update"] { border-left-color: var(--warn); background: var(--warn-soft); }
.ov-card[data-choice="new"]    { border-left-color: var(--accent); background: var(--accent-soft); }

.ov-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.ov-kind {
  font-size: 10px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-faint); border: 1px solid var(--line); border-radius: 3px; padding: 1px 5px;
}
.ov-uses { margin-left: auto; font-size: 11px; color: var(--ink-faint); white-space: nowrap; }

.ov-diff { border-collapse: collapse; font-size: 12px; margin-bottom: 10px; width: 100%; }
.ov-diff th {
  text-align: left; font-weight: 600; color: var(--ink-soft);
  padding: 2px 10px 2px 0; white-space: nowrap; width: 1%;
}
.ov-diff td { padding: 2px 0; }
.ov-from  { color: var(--ink-faint); text-decoration: line-through; }
.ov-arrow { color: var(--ink-faint); padding: 0 8px !important; width: 1%; }
.ov-to    { font-weight: 600; }

.ov-choices { display: flex; gap: 8px; flex-wrap: wrap; }
.ov-choice {
  display: flex; align-items: flex-start; gap: 6px;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 6px 10px; cursor: pointer; flex: 1 1 150px;
  text-transform: none; letter-spacing: 0; background: var(--surface);
}
.ov-choice:hover { border-color: var(--accent); }
.ov-choice input { width: auto; margin-top: 2px; }
.ov-choice span { display: flex; flex-direction: column; gap: 1px; }
.ov-choice strong { font-size: 12px; font-weight: 650; color: var(--ink); }
.ov-choice em { font-style: normal; font-size: 11px; color: var(--ink-faint); }

.ov-newname { margin-top: 8px; text-transform: none; letter-spacing: 0; font-size: 12px; }

/* Several components set display on elements that also get toggled with the
   `hidden` attribute — display wins unless this does. */
[hidden] { display: none !important; }

/* inline-flex inside the dialog's column layout centres itself otherwise. */
.dialog .d-check { align-self: flex-start; }

/* ---------------------------------------------------------- theme toggle */

/* Always the last thing in the bar, hard right. On the Auction Lots page the
   auction picker already takes margin-left:auto, so this needs its own push
   to stay at the end when the bar wraps. */
.theme-toggle {
  margin-left: auto;
  flex: none;
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 15px;
  line-height: 1;
  border-radius: 50%;
  order: 99;
}
.topbar .graph-stat + .theme-toggle { margin-left: 0; }

/* --- closed-list tidy --- */

.d-vocab { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.d-vocab-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.d-vocab-head { display: flex; flex-direction: column; gap: 2px; }
.d-vocab-head strong { font-size: 13px; }
.d-vocab-allowed { font-size: 11px; color: var(--ink-faint); }

.d-vocab-changes { list-style: none; margin: 0; padding: 0;
                   display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.d-vocab-changes li { display: flex; align-items: baseline; gap: 6px; }
.d-vocab-changes em { margin-left: auto; font-style: normal; font-size: 11px;
                      color: var(--ink-faint); white-space: nowrap; }

.d-vocab-unmapped { margin: 0; font-size: 12px; color: var(--warn);
                    background: var(--warn-soft); border-radius: 4px; padding: 6px 8px; }
.d-vocab-foot { margin: 0; font-size: 11px; color: var(--ink-faint); }

/* ------------------------------------------------------- field-level note */

/* Sits under an input to say something about what was just typed. Absolute so
   it cannot push the grid row taller and shift every field below it. */
.field-note {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 5;
  margin-top: 2px;
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.3;
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}
.field-note.err  { color: var(--danger); background: var(--danger-soft); }
.field-note.warn { color: var(--warn);   background: var(--warn-soft); }

/* The label is the positioning context for the note above. */
.grid label { position: relative; }

/* A lot number that is already taken. */
input.taken {
  border-color: var(--danger);
  background: var(--danger-soft);
}
input.taken:focus { outline-color: var(--danger); }

/* Text-only action inside a note. */
button.link {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 650;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
}
button.link:hover { opacity: 0.75; }

/* ============================================================== sign in === */

.signin-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
}

.signin { width: 100%; max-width: 380px; }

.signin-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  padding: 26px 24px 20px;
  box-shadow: 0 12px 40px rgb(0 0 0 / 0.10);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* The sign-in page has no shell, so it carries its own brand rather than the
   one the sidebar draws. */
.signin-card .brand {
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
}
.signin-card .brand .version {
  font-weight: 500;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1px 7px;
  letter-spacing: 0;
}
.signin-card .theme-toggle { position: absolute; top: 14px; right: 14px; margin-left: 0; }

.signin-sub { margin: 0; color: var(--ink-soft); font-size: 13px; }

.signin-card form { display: flex; flex-direction: column; gap: 10px; }
.signin-card label { text-transform: none; letter-spacing: 0; font-size: 12px; gap: 4px; }
.signin-card button.primary { margin-top: 4px; padding: 8px; }

.signin-note {
  margin: 0; font-size: 12px; color: var(--ok);
  background: color-mix(in srgb, var(--ok) 10%, transparent);
  border-radius: 4px; padding: 7px 9px;
}

button.link {
  border: 0; background: none; padding: 0;
  font: inherit; font-size: 12px;
  color: var(--accent); text-decoration: underline; cursor: pointer;
  align-self: flex-start;
}
button.link:hover { opacity: 0.8; }

.signin-foot {
  margin: 4px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-size: 11px;
  color: var(--ink-faint);
  line-height: 1.5;
}

/* Said when a client is bounced off a page that is not theirs. */
.shell-note {
  margin: 12px 16px 0;
  padding: 9px 12px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
}

/* ------------------------------------------------------------ review queue */

.review-main { padding: 18px 16px 40px; max-width: 900px; margin: 0 auto; }
.review-sub { margin: 0 0 14px; }

.review-card {
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.review-card.submitted { border-left-color: var(--accent); }
.review-card.rejected  { border-left-color: var(--danger); }
.review-card.approved  { border-left-color: var(--ok); }

.review-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.review-card-head h2 { font-size: 15px; margin: 0; }
.review-where { font-size: 12px; color: var(--ink-faint); }

.review-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  margin: 8px 0 0;
  font-size: 12px;
}
.review-facts dt { color: var(--ink-faint); }
.review-facts dd { margin: 0; }

.review-note {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  font-size: 13px;
  line-height: 1.5;
}

.review-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.review-actions .btn-link { margin-right: auto; }

#rejectForm textarea { width: 100%; resize: vertical; }

/* Where a lot stands with Gold Star, shown to the client who sent it. */
.entry-status {
  margin: 0 0 12px;
  padding: 9px 12px;
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.5;
  background: var(--accent-soft);
  color: var(--accent);
}
.entry-status.rejected {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
}

/* ------------------------------------------------------------------ admin */

.admin-main { padding: 18px 16px 40px; max-width: 1000px; margin: 0 auto; }

.admin-bar {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 0 0 14px;
}
.admin-bar .hint { margin: 0; max-width: 62ch; }
.admin-bar button { flex: none; margin-left: auto; }

/* --- one person --- */

.admin-person,
.admin-client {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.admin-person.disabled,
.admin-client.disabled { opacity: 0.6; }

.admin-person-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.admin-who { display: grid; min-width: 0; }
.admin-who strong { font-size: 14px; }
.admin-who span { font-size: 11px; color: var(--ink-faint); }

.admin-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-tag {
  font-size: 10px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 9px;
  background: var(--line-soft);
  color: var(--ink-soft);
}
.admin-tag.staff { background: var(--accent-soft); color: var(--accent); }
.admin-tag.off   { background: var(--danger-soft); color: var(--danger); }

.admin-note { margin: 10px 0 0; font-size: 12px; color: var(--ink-faint); }
.admin-note.warn { color: var(--warn); }

/* --- which clients, and how far --- */

.admin-memberships { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }

.admin-access {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius);
  background: var(--bg);
}
.admin-access.add { background: none; border: 1px dashed var(--line); }

.admin-access-org { font-weight: 600; font-size: 13px; min-width: 140px; }
.admin-access select { width: auto; flex: 1 1 auto; min-width: 0; padding: 4px 8px; font-size: 12px; }
.admin-access button { flex: none; }

.admin-person-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}
.admin-person-actions .hint { margin: 0 0 0 auto; }

button.small { padding: 4px 9px; font-size: 12px; }
button.danger-text { color: var(--danger); }

/* --- clients --- */

.admin-counts { display: flex; gap: 18px; }
.admin-counts span { display: grid; text-align: right; }
.admin-counts strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.admin-counts em {
  font-style: normal;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
}

/* --- what each role opens --- */

.admin-roles { overflow-x: auto; }

.admin-role-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.admin-role-table th,
.admin-role-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: top;
}
.admin-role-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  white-space: nowrap;
}
.admin-role-table td:first-child { display: table-cell; }
.admin-role-table td strong { display: block; }
.admin-role-table td span { font-size: 11px; color: var(--ink-faint); }

.admin-mark { text-align: center !important; font-size: 15px; color: var(--ok); width: 8em; }
.admin-mark.no { color: var(--line); }

.admin-role-foot td { border-top: 2px solid var(--line); }

.admin-ok {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--ok);
  background: color-mix(in srgb, var(--ok) 10%, transparent);
  border-radius: 4px;
  padding: 8px 10px;
}

#personLink { font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
#personForm { display: flex; flex-direction: column; gap: 10px; }
#personResult { display: flex; flex-direction: column; gap: 10px; }

/* --------------------------------------------------- a new build is out */

/* Sits above the toast, and low enough that it does not cover the form
   actions people are reaching for when it appears. */
.update-bar {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(440px, calc(100vw - 32px));
  padding: 10px 12px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 10px 30px rgb(0 0 0 / 22%);
  font-size: 13px;
}
.update-bar span { flex: 1; min-width: 0; }
.update-bar button { flex: none; }

/* A data-format change has no "not now". */
.update-bar.required {
  border-color: var(--warn);
  background: var(--warn-soft);
  color: var(--warn);
}

/* ---------------------------------------------------------- your account */

.account-main { padding: 18px 16px 40px; max-width: 620px; margin: 0 auto; }

.acc-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.acc-panel h2 { margin: 0 0 10px; font-size: 15px; }
.acc-panel form { display: flex; flex-direction: column; gap: 10px; }
.acc-panel .hint { margin: 4px 0 12px; }
.acc-panel form .hint { margin: 0; }

.acc-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}
.acc-actions button { margin-left: auto; flex: none; }
.acc-actions .save-note { font-size: 12px; color: var(--ink-faint); }

.acc-ok {
  margin: 0;
  font-size: 12px;
  color: var(--ok);
  background: color-mix(in srgb, var(--ok) 10%, transparent);
  border-radius: 4px;
  padding: 7px 9px;
}

#accEmail { color: var(--ink-faint); }

.acc-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  margin: 0;
  font-size: 13px;
}
.acc-facts dt { color: var(--ink-faint); }
.acc-facts dd { margin: 0; }

/* The account menu now holds a link as well as the sign-out button. */
.account-menu a {
  color: var(--accent);
  text-decoration: none;
  font-size: 12px;
  font-weight: 550;
}
.account-menu a:hover { text-decoration: underline; }

/* ------------------------------------------------ the closed-list editor */

.vocab-list {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 12px 14px;
  margin-bottom: 12px;
}
.vocab-list.fixed { background: var(--bg); }

.vocab-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.vocab-head h3 { margin: 0; font-size: 14px; }
.vocab-head > :last-child { margin-left: auto; }

.vocab-terms { display: flex; flex-direction: column; gap: 5px; }

.vocab-term {
  display: flex;
  align-items: center;
  gap: 8px;
}
.vocab-term input { flex: 1 1 auto; min-width: 0; padding: 5px 9px; }
.vocab-term.add { margin-top: 8px; }
.vocab-term.add input { border-style: dashed; }

.vocab-count {
  flex: none;
  width: 8em;
  text-align: right;
  font-size: 11px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.vocab-count.none { color: var(--ink-faint); font-style: italic; }

.vocab-move { width: 28px; padding: 4px 0; text-align: center; }

.vocab-offlist {
  margin-top: 12px;
  padding: 9px 11px;
  border-radius: var(--radius);
  background: var(--warn-soft);
  font-size: 12px;
}
.vocab-offlist strong { display: block; color: var(--warn); margin-bottom: 3px; }
.vocab-offlist .hint { margin: 6px 0 0; }

.vocab-fixed-values { display: flex; flex-wrap: wrap; gap: 6px; }
.vocab-fixed-values span {
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 12px;
  color: var(--ink-soft);
  background: var(--surface);
}