.edit-button { width:100%; margin:0 0 18px; background:#343434; border-color:#555; }
.edit-form { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.edit-field { display:flex; flex-direction:column; gap:5px; color:#a9a9a9; font-size:11px; }
.edit-field input, .edit-field select { width:100%; min-width:0; }
.edit-actions { grid-column:1 / -1; display:flex; gap:8px; margin-top:8px; }
.secondary { background:#242424; }
#edit-message { grid-column:1 / -1; color:#a9a9a9; min-height:18px; font-size:12px; }
.mini-button { margin:8px 0 0; padding:4px 7px; font-size:11px; background:#292929; border-color:#4a4a4a; }
.table-edit { margin:0; }
.filter-label { display:flex; align-items:center; gap:6px; color:#a9a9a9; font-size:11px; }
.add-product { background:#343434; border-color:#666; }
.detail-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
.detail-actions .edit-button { margin:0; }
.issue-report-button{border-color:#464646;color:#d0d0d0}
.issue-report-note{color:#8fae95;font-size:10.5px;letter-spacing:.02em}
.delete-button { background:#341f1f; border-color:#744; color:#f0c7c7; }
.delete-button:hover { background:#4b2929; }
.archive-button { background:#fff7df; border-color:#9a6b00; color:#704c00; }
.archived-label { display:inline-flex; align-items:center; padding:7px 10px; border-radius:4px; color:#6a6a6a; background:#eee; font-size:12px; }
.inventory-help { color:#a9a9a9; font-size:11px; line-height:1.45; margin:0 0 8px; }
.mini-button + .mini-button { margin-left:6px; }
/* Inventory: every quantity shown here comes from the movement ledger. */
.stock-summary { display:flex; flex-wrap:wrap; gap:4px 12px; margin:0 0 10px; font-size:12px; color:#c8c8c8; }
.stock-summary b { color:#fff; font-size:14px; }
.review-flag { margin:6px 0 0; padding:5px 8px; border-radius:4px; background:#3a2f14; border:1px solid #7a6321; color:#f0dca8; font-size:11px; line-height:1.4; }
.card-review { border-color:#7a6321; }
.legacy-note { color:#8a8a8a; font-size:10px; }
/* The catalog .table-wrap is full-height; the movement log must not be. */
.movement-wrap { height:auto; max-height:280px; }
.movement-table { font-size:11px; }
.movement-table th, .movement-table td { padding:4px 6px; text-align:left; white-space:normal; min-width:0; }
.movement-table th:nth-child(3), .movement-table td:nth-child(3) { text-align:right; white-space:nowrap; }
.movement-table td:nth-child(5) { color:#a9a9a9; overflow-wrap:anywhere; }
.delta-negative { color:#f0b0b0; }
.delta-positive { color:#b6e0b6; }
/* Data Review — admin-only screen.
   Restrained black/grey. Colour is spent on exactly two signals:
     tone-verified   faint green  (Official source, Cross-checked)
     tone-attention  faint tan    (Needs review)
   Everything else — including missing-field chips — stays neutral grey, so the
   eye lands on status, not on decoration. No charts, no fills for their own sake. */
.admin-badge { display:inline-flex; align-items:center; padding:2px 5px; border:1px solid #4e4e4e; border-radius:2px; color:#9a9a9a; font-size:9px; font-weight:700; letter-spacing:.08em; line-height:1; flex:0 0 auto; }

.review-panel { padding:34px 34px 48px; overflow:auto; height:calc(100vh - 56px); background:#1d1d1d; }
.review-head { max-width:720px; margin:0 0 30px; }
.review-head .eyebrow { margin:0 0 10px; color:#8f8f8f; font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.review-head h1 { font-size:23px; font-weight:650; letter-spacing:-.01em; margin:0 0 10px; }
.review-lede { color:#a9a9a9; margin:0; font-size:12px; line-height:1.6; }

.review-section { margin:0 0 26px; }
.review-section-table { margin-bottom:0; }
.review-label { display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border:0; padding:0 0 9px; margin:0 0 12px; border-bottom:1px solid #2f2f2f;
  font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#8f8f8f; }
.review-scope { font-size:10px; font-weight:400; letter-spacing:.04em; text-transform:none; color:#7d7d7d; font-variant-numeric:tabular-nums; }
.review-scope b { color:#e8e8e8; font-weight:650; }

.stat-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:#2f2f2f; border:1px solid #2f2f2f; border-radius:3px; }
.stat-card { display:block; padding:16px 18px; border:0; border-radius:0; background:#212121; text-align:left; cursor:pointer; position:relative; }
.stat-card:hover { background:#282828; }
.stat-card b { display:block; font-size:25px; font-weight:600; line-height:1.1; font-variant-numeric:tabular-nums; color:#f1f1f1; }
.stat-card span { display:block; margin-top:7px; color:#9a9a9a; font-size:11px; letter-spacing:.01em; }
.stat-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:transparent; }
.stat-card.tone-verified::before { background:#4a6b4f; }
.stat-card.tone-attention::before { background:#8a7340; }
.stat-card-active { background:#2c2c2c; }
.stat-card-active span { color:#dcdcdc; }
.stat-card-active::before { background:#9a9a9a; }
.stat-card.tone-verified.stat-card-active::before { background:#6d9a74; }
.stat-card.tone-attention.stat-card-active::before { background:#bfa25c; }

.review-filters { display:flex; flex-wrap:wrap; align-items:end; gap:14px; margin:0 0 12px; }
.review-filters .filter-label { gap:5px; }
.review-filters select { min-width:170px; }
.review-toggle-groups { display:grid; gap:14px; }
.review-toggle-group h3 { margin:0 0 7px; color:#707070; font-size:9px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; }
.toggle-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; }
.field-toggle { display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:9px 11px; border:1px solid #333; border-radius:3px; background:#1f1f1f; color:#a9a9a9;
  font-size:11px; cursor:pointer; text-align:left; }
.field-toggle:hover { background:#272727; color:#d4d4d4; }
.field-toggle b { color:#e0e0e0; font-weight:600; font-variant-numeric:tabular-nums; }
.toggle-active { border-color:#6f6f6f; background:#2b2b2b; color:#f1f1f1; }
.toggle-active b { color:#fff; }

.review-caption { margin:0 0 8px; color:#7d7d7d; font-size:11px; line-height:1.5; }
.review-attention { margin:0 0 10px; padding:8px 11px; border-left:2px solid #8a7340; background:#242017;
  color:#cbbd97; font-size:11px; line-height:1.5; }

.review-wrap { height:auto; max-height:calc(100vh - 560px); min-height:240px; border:1px solid #2f2f2f; border-radius:3px; }
.review-table { font-size:11px; }
.review-table th { padding:8px 12px; background:#191919; border-bottom:1px solid #2f2f2f; color:#8f8f8f;
  font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.review-table td { padding:9px 12px; border-bottom:1px solid #262626; vertical-align:top; white-space:normal; min-width:0; }
.review-table tbody tr { cursor:pointer; }
.review-table tbody tr:hover { background:#252525; }
.review-table .num { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.col-id { font-family:Consolas,"SF Mono",monospace; font-size:10.5px; color:#9a9a9a; white-space:nowrap; }
.col-name { color:#f1f1f1; }
.col-sub { display:block; margin-top:2px; color:#8a8a8a; font-size:10px; }

.verif { display:inline-block; padding:2px 7px; border-radius:2px; border:1px solid #454545;
  color:#a9a9a9; font-size:10px; letter-spacing:.02em; white-space:nowrap; }
.verif-unreviewed { border-color:#3f3f3f; color:#8f8f8f; }
.verif-officialsource { border-color:#415c46; background:#1b241d; color:#a8c4ad; }
.verif-crosschecked { border-color:#557a5c; background:#1f2b22; color:#bcd8c1; }
.verif-needsreview { border-color:#6d5c33; background:#242017; color:#cbbd97; }

.miss-cell { white-space:nowrap; }
.miss-cell .miss-chip + .miss-chip { margin-left:4px; }
.miss-chip { padding:1px 6px; border:1px solid #3a3a3a; border-radius:2px; background:#232323; color:#9a9a9a; font-size:10px; white-space:nowrap; }
.miss-none { color:#6f6f6f; font-style:italic; }

/* Batch verification. Neutral grey; the only colour is the existing status
   vocabulary and the tan attention rule already defined above. */
.col-check { width:28px; padding-right:0 !important; }
.col-check input { margin:0; cursor:pointer; }
.batch-bar { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:0 0 12px;
  padding:10px 14px; border:1px solid #3f3f3f; border-radius:3px; background:#252525; font-size:12px; }
.batch-bar b { color:#fff; font-variant-numeric:tabular-nums; }
.batch-bar .filter-label { gap:6px; }
.batch-done { border-left:2px solid #4a6b4f; }
.batch-confirm { margin:0 0 14px; padding:16px 18px; border:1px solid #3f3f3f; border-radius:3px; background:#212121; }
.batch-confirm h3 { margin:0 0 14px; font-size:11px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:#8f8f8f; }
.confirm-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
  background:#2f2f2f; border:1px solid #2f2f2f; border-radius:3px; margin:0 0 14px; }
.confirm-grid > div { padding:12px 14px; background:#1d1d1d; }
.confirm-grid b { display:block; margin-top:5px; font-size:20px; font-weight:600;
  font-variant-numeric:tabular-nums; color:#f1f1f1; }
.confirm-label { display:block; color:#8f8f8f; font-size:10px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; }
.confirm-line { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 0 10px; font-size:11px; color:#c8c8c8; }
.confirm-line .confirm-label { display:inline-block; }
.dist-item { padding:2px 7px; border:1px solid #3a3a3a; border-radius:2px; background:#232323; color:#a9a9a9; }
.dist-item b { color:#e8e8e8; font-variant-numeric:tabular-nums; }
.confirm-note { max-width:520px; margin:12px 0 0; }
#batch-message { color:#cbbd97; font-size:11px; min-height:16px; margin-top:6px; }
@media(max-width:1050px) { .layout { grid-template-columns:180px minmax(420px,1fr) 340px; min-width:940px; } .detail { display:block; } .stat-row, .toggle-row { grid-template-columns:repeat(2,minmax(0,1fr)); } .review-panel { padding:22px; } }

/* ==========================================================================
   Team-demo polish (2026-08-21)
   Role separation, product-detail provenance, inventory flow guidance.
   Still only two signal colours; everything added here is neutral grey.
   ========================================================================== */

/* Admin-only surfaces. This is a UI-visibility split for demo clarity — it is
   NOT authentication and must never be described as one. The API is unchanged. */
body:not(.admin-mode) .admin-only { display:none !important; }
/* The final catalog column contains only administrator controls. Hiding the
   buttons alone left Viewers with a blank "Actions" column, so the complete
   column disappears with them. Admin keeps it under the clearer "Manage"
   heading. Other tables' action columns are untouched. */
body:not(.admin-mode) .catalog-table .col-actions { display:none; }
.admin-hint { margin:0 0 14px; padding:9px 12px; border:1px solid #3a3a3a; border-left:2px solid #6f6f6f;
  border-radius:3px; background:#1f1f1f; color:#9a9a9a; font-size:11px; line-height:1.55; }

/* Product detail — status line */
.detail-sub .verif { font-size:10px; }
.pill { display:inline-block; padding:2px 7px; border:1px solid #3a3a3a; border-radius:2px;
  background:#232323; color:#a0a0a0; font-size:10px; white-space:nowrap; }
.pill-strong { color:#dcdcdc; border-color:#4a4a4a; }

/* A spec value that has a recorded official source carries a quiet marker.
   Hovering it shows the verbatim printed text. No colour is spent on it. */
.src-mark { display:inline-block; margin-left:6px; padding:0 4px; border:1px solid #3d3d3d;
  border-radius:2px; color:#7d7d7d; font-size:9px; letter-spacing:.06em; cursor:help; vertical-align:1px; }
.src-mark:hover { border-color:#5e5e5e; color:#c0c0c0; }

/* Field sources block */
.fs-list { margin:0; }
.fs-row { display:grid; grid-template-columns:38% 62%; gap:10px; padding:7px 0;
  border-bottom:1px solid #262626; align-items:baseline; }
.fs-row:last-child { border-bottom:0; }
.fs-field { color:#a9a9a9; }
.fs-value { text-align:right; overflow-wrap:anywhere; color:#dcdcdc; font-size:11px; line-height:1.5; }
.fs-value em { color:#7d7d7d; font-style:italic; }
.fs-meta { display:block; margin-top:3px; color:#6f6f6f; font-size:10px; }
.fs-toggle { margin:8px 0 0; }
.fs-empty { color:#6f6f6f; font-style:italic; font-size:11px; }

/* Inventory flow guidance — two clearly separated actions */
.flow-guide { margin:0 0 10px; border:1px solid #333; border-radius:3px; background:#1b1b1b; }
.flow-step { display:grid; grid-template-columns:20px 1fr; gap:10px; padding:9px 12px;
  border-bottom:1px solid #292929; font-size:11px; line-height:1.55; color:#a9a9a9; }
.flow-step:last-child { border-bottom:0; }
.flow-step b { display:block; color:#e0e0e0; font-weight:600; margin-bottom:2px; }
.flow-num { display:flex; align-items:center; justify-content:center; width:20px; height:20px;
  border:1px solid #4a4a4a; border-radius:50%; color:#9a9a9a; font-size:10px; font-weight:700; }
.lot-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.lot-actions .mini-button { margin:0; }
.lot-figures { display:flex; flex-wrap:wrap; gap:3px 14px; margin:6px 0 0; color:#8a8a8a; font-size:10px;
  font-variant-numeric:tabular-nums; }

/* Archived records (admin) */
.archive-note { margin:0 0 12px; padding:9px 12px; border-left:2px solid #6d5c33; background:#242017;
  color:#cbbd97; font-size:11px; line-height:1.55; }
.fs-details summary { list-style:none; cursor:pointer; padding:7px 10px; border:1px solid #333;
  border-radius:3px; background:#1c1c1c; color:#9a9a9a; font-size:11px; }
.fs-details summary::-webkit-details-marker { display:none; }
.fs-details summary::before { content:"▸ "; color:#6f6f6f; }
.fs-details[open] summary::before { content:"▾ "; }
.fs-details summary:hover { border-color:#4e4e4e; color:#d4d4d4; }
.fs-details[open] summary { margin-bottom:6px; }

/* The review table gained a Missing column and now shares the row with the
   product-detail pane, so it needs the same compact metrics as the catalog.
   .review-table td previously beat .col-id on specificity and re-wrapped IDs. */
.review-table th, .review-table td { padding:8px 9px; }
.review-table td.col-id { white-space:nowrap; }
.review-table th { font-size:9.5px; letter-spacing:.05em; }
.review-wrap { min-width:0; }
/* Let the Missing column wrap rather than clip its last chip. */
.review-table .miss-cell { white-space:normal; line-height:1.95; }
.review-table .miss-chip { display:inline-block; margin:0 4px 0 0; }
.review-table .miss-cell .miss-chip + .miss-chip { margin-left:0; }

/* ==========================================================================
   Viewer Mode / final UX pass (2026-08-24)
   ========================================================================== */

/* One quiet line instead of a column of "Not verified" rows. Deliberately not a
   warning: an unmeasured specification is a normal state in a research catalog,
   not an error, so no red, no icon, no border. */
.spec-empty-note { padding:8px 0 2px; color:#6f6f6f; font-size:10.5px; line-height:1.6; }

/* Official reference: WHERE the record points. Framed, so it reads as one unit
   and is visually separate from the per-field source list underneath. */
.official-block { border:1px solid #333; border-radius:3px; background:#1b1b1b; padding:11px 12px; }
.official-block .source-link { margin-bottom:9px; }
.official-block-empty { color:#6f6f6f; font-style:italic; font-size:11px; }
.official-meta { display:flex; flex-direction:column; gap:3px; color:#7d7d7d; font-size:10px; line-height:1.5; }
.official-url { font-family:Consolas,"SF Mono",monospace; color:#8a8a8a; overflow-wrap:anywhere; }
.fs-details { margin-top:2px; }

/* ==========================================================================
   Server-side role control (2026-08-24)
   The app bar no longer holds a toggle. It shows the role the SERVER reported
   via GET /api/auth/me, and a sign-in / sign-out action. Neutral grey only.
   ========================================================================== */
.auth-control { display:flex; align-items:center; gap:8px; }
.auth-role { display:inline-flex; align-items:center; padding:3px 8px; border:1px solid #4e4e4e;
  border-radius:2px; color:#c8c8c8; font-size:10px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; line-height:1.4; }
.auth-role-viewer { color:#9a9a9a; border-color:#3f3f3f; }
.auth-button { padding:5px 10px; font-size:11px; background:#1d1d1d; border:1px solid #3f3f3f;
  border-radius:3px; color:#c8c8c8; }
.auth-button:hover { background:#282828; border-color:#5c5c5c; color:#ededed; }
.auth-note { color:#8a8a8a; font-size:10px; max-width:210px; line-height:1.4; }
.signin-form { display:flex; align-items:center; gap:6px; }
.signin-form input { min-width:190px; padding:5px 8px; font-size:11px; }

/* Employee gate is used only by hosted Viewer snapshots. Local WDPD keeps its
   historical anonymous read-only mode when no Viewer password is configured. */
body.employee-locked > header, body.employee-locked > .layout { visibility:hidden; }
.employee-gate { position:fixed; inset:0; z-index:1000; display:grid; place-items:center;
  padding:20px; background:#101010; color:#d8d8d8; }
.employee-gate[hidden] { display:none; }
.employee-gate-card { width:min(360px,100%); padding:30px; border:1px solid #343434;
  border-radius:5px; background:#171717; box-shadow:0 18px 55px rgba(0,0,0,.35); }
.employee-gate-card img { display:block; width:58px; height:auto; margin:0 0 20px; }
.employee-gate-kicker { margin:0 0 6px; color:#858585; font-size:10px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; }
.employee-gate-card h1 { margin:0 0 8px; color:#f0f0f0; font-size:28px; letter-spacing:.04em; }
.employee-gate-card > p:not(.employee-gate-kicker):not(.employee-gate-message):not(.employee-gate-note) {
  margin:0 0 22px; color:#999; font-size:12px; line-height:1.55; }
.employee-gate-note { margin:-12px 0 18px; padding:8px 9px; border-left:2px solid #555;
  background:#1c1c1c; color:#858585; font-size:10.5px; line-height:1.5; }
.employee-gate-card label { display:grid; gap:7px; color:#aaa; font-size:11px; }
.employee-gate-card input { width:100%; padding:10px 11px; border:1px solid #404040;
  border-radius:3px; background:#0f0f0f; color:#eee; font:inherit; }
.employee-gate-card button { width:100%; margin-top:12px; padding:10px 12px; border:1px solid #555;
  border-radius:3px; background:#e5e5e5; color:#111; font-size:12px; font-weight:700; }
.employee-gate-message { min-height:18px; margin:10px 0 0; color:#b5b5b5; font-size:11px; }

/* --- Delivery history (migration 004) --------------------------------------
   Viewer sees five columns; Admin sees the same table re-fetched from the admin
   route with reference, allocation and the void action. Neutral palette only. */
.delivery-wrap { height:auto; max-height:300px; border:1px solid #2f2f2f; border-radius:3px; }
.delivery-table { font-size:11px; }
.delivery-table { table-layout:fixed; width:100%; }
.delivery-table th { padding:6px 7px; background:#191919; border-bottom:1px solid #2f2f2f;
  color:#8f8f8f; font-size:9px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  white-space:normal; line-height:1.3; vertical-align:bottom; position:sticky; top:0; }
.delivery-table td { padding:6px 7px; border-bottom:1px solid #262626; white-space:normal;
  vertical-align:top; overflow-wrap:anywhere; }
/* Fixed layout, one width set per column count, so the table always fits the
   382px detail panel instead of growing a horizontal scrollbar. */
.delivery-table.cols-5 th:nth-child(1){width:22%}
.delivery-table.cols-5 th:nth-child(2){width:31%}
.delivery-table.cols-5 th:nth-child(3){width:20%}
.delivery-table.cols-5 th:nth-child(4){width:10%}
.delivery-table.cols-5 th:nth-child(5){width:17%}
.delivery-table.cols-5 td:nth-child(5){white-space:nowrap}
/* Eight columns do not fit a 382px panel at any width split, so the admin table
   uses automatic layout and scrolls horizontally inside its own container - which
   is the documented way to handle wide content. The Viewer's five-column table
   still fits exactly and never scrolls. */
.delivery-table.cols-8 { table-layout:auto; min-width:560px; }
.delivery-table.cols-8 th, .delivery-table.cols-8 td { white-space:nowrap; }
.delivery-table.cols-8 td:nth-child(2), .delivery-table.cols-8 td:nth-child(7) { white-space:normal; }
.delivery-table .num { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.delivery-table tr.row-void td { color:#6f6f6f; text-decoration:line-through; }
.delivery-table tr.row-void .col-actions { text-decoration:none; }
.alloc-cell { font-size:10px; color:#b4b4b4; overflow-wrap:anywhere; }
.alloc-none { color:#7d7d7d; font-style:normal; }
.alloc-ok { color:#8fae95; }
.delivery-note { margin:8px 0 0; color:#7d7d7d; font-size:10.5px; line-height:1.55; }

/* ---------------------------------------------------------------------------
   Stock management choice (Inventory section)

   The Stock button used to jump straight into an existing lot's movement form
   when a product had exactly one lot, which is how a new CCW purchase ended up
   pointed at a CW lot. The button now lands here instead, so the two actions have
   to be distinguishable at a glance without shouting.
   --------------------------------------------------------------------------- */
.stock-choice{display:flex;flex-direction:column;gap:6px;margin:10px 0 14px;
  padding:11px 12px;border:1px solid var(--line);border-left:2px solid #557a5c;
  background:#181818;border-radius:3px}
.stock-choice .mini-button{align-self:flex-start}
.stock-choice-primary{border-color:#415c46;background:#1f2b22}
.stock-choice-primary:hover{background:#26362a}

/* Brief marker when the Stock button scrolls this section into view. */
.section-focus{outline:1px solid #557a5c;outline-offset:6px;transition:outline-color .5s ease}

/* ---------------------------------------------------------------------------
   Restore confirmation (Archived records)
   Inline rather than a browser modal, so it inherits the screen's styling and
   never blocks the page.
   --------------------------------------------------------------------------- */
.restore-confirm{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  margin:10px 0 14px;padding:11px 12px;border:1px solid var(--line);
  border-left:2px solid #8a7340;background:#242017;border-radius:3px}
.restore-confirm-body{display:flex;flex-direction:column;gap:4px}
.restore-confirm-actions{display:flex;gap:6px;flex:none}
.archive-notice{color:#9a9a9a}

/* ---------------------------------------------------------------------------
   Copy link (shareable catalog URL)
   Available to Viewer and Admin alike - a link carries no privilege, so there
   is deliberately no admin-only class here. The note sits inside
   .filter-actions, which already wraps, so a long fallback link pushes the row
   down instead of widening the page on a phone.
   --------------------------------------------------------------------------- */
.copy-link-note{align-self:center;color:#8fae95;font-size:11px;letter-spacing:.02em;
  max-width:100%;min-width:0}
.copy-link-manual{display:flex;align-items:center;gap:6px;color:#9a9a9a;flex-wrap:wrap}
.copy-link-input{width:min(320px,60vw);font-size:11px;padding:4px 6px;
  background:#181818;color:#d8d8d8;border:1px solid var(--line);border-radius:3px}

/* The clipboard fallback needs a real, focusable textarea in the document.
   Kept out of sight without display:none or visibility:hidden, because neither
   can be selected and execCommand("copy") would have nothing to copy. */
.offscreen-copy{position:fixed;top:0;left:0;width:1px;height:1px;padding:0;border:0;
  opacity:0;pointer-events:none}

/* ---------------------------------------------------------------------------
   Manufacturer logos
   A fixed box plus object-fit:contain, so a long horizontal wordmark and a
   square emblem occupy the same slot and neither is stretched. The box is the
   only constraint; the artwork inside it is never altered, recoloured or
   cropped. Height is set and width is left free (or the reverse), so the
   aspect ratio can only be preserved.
   Public information: no admin-only class here, and nothing in this block is
   tied to an administrator control.
   --------------------------------------------------------------------------- */
/* Home cards carry NO logo - see renderHome's card template. There is therefore
   no .mfg-card-logo rule and no min-height reserving a slot for one: the head row
   is sized by its text, so every card is the same height for the ordinary reason
   rather than because space was held open.

   The one place a manufacturer logo appears is the selected-manufacturer header.
   Padding is on the image with box-sizing:content-box, so the plate grows
   OUTWARD and the artwork inside is the same size whether or not it is plated.
   Height is set and width left free, plus object-fit:contain, so the ratio cannot
   be distorted. 18px of artwork against a 28px name keeps the logo clearly
   subordinate to the text. */
.summary-logo{height:18px;width:auto;max-width:110px;padding:5px 8px;
  box-sizing:content-box;object-fit:contain;flex:0 0 auto}

/* Applied ONLY where logo_plate = 'light'. The value is data, set per
   manufacturer by the seed script, so this rule never names a company.
   Policy set by the operator on 2026-08-25: a light plate on every manufacturer
   EXCEPT Hobbywing, whose light-silver artwork reads well on the dark card and
   would be nearly erased by a plate. So it is selective, not blanket - and the
   one exception is exactly the case a blanket white box would break.
   A small light plate around the mark, not a full white box. #f7f7f5 rather than
   pure white so it reads as a deliberate surface next to the app's greys. The
   padding doubles as the clear space KDE's brand guideline requires.
   The original image is never touched: no white is composited into the file, no
   colour inverted, no background removed, nothing recoloured. This is a CSS
   background behind a transparent PNG. */
.logo-plate{background:#f7f7f5;border-radius:6px}

/* Shown only when a RECORDED logo fails to load or decode. A manufacturer with
   no logo renders nothing at all - this chip exists so a broken path cannot
   collapse the row or paint a broken-image icon. */
.logo-fallback{display:inline-flex;align-items:center;justify-content:center;
  min-width:26px;height:20px;padding:0 5px;border:1px solid #4e4e4e;border-radius:2px;
  color:#b4b4b4;font-size:9px;font-weight:700;letter-spacing:.04em;flex:0 0 auto}

@media(max-width:1050px){
  /* Narrow screens: the NAME has priority. The logo yields width, never the text,
     and max-width keeps a long horizontal wordmark from pushing the heading wider
     than the viewport. */
  .summary-logo{height:15px;max-width:38%;padding:4px 6px}
}

/* ---------------------------------------------------------------------------
   Selected-manufacturer heading
   Sits in the gap between the filter bar and the summary line. Shown only when
   one manufacturer is selected; "All manufacturers" hides the whole block
   rather than showing a placeholder.
   The name is unconditional - it does not depend on a logo existing, which is
   the reason it is here at all.
   --------------------------------------------------------------------------- */
.mfg-heading{display:flex;align-items:center;gap:10px;min-width:0;
  padding:14px 16px 2px;background:var(--panel)}

/* clamp() so the name shrinks on a phone instead of forcing the page wider.
   nowrap keeps it on one line; the ellipsis is a last-resort guard for a name
   far longer than any of the fourteen, and does not engage for any of them.
   h2 is reset here because style.css styles bare h2 as a 10px section label. */
.mfg-heading-name{margin:0;padding:0;border:0;min-width:0;max-width:100%;
  font-size:clamp(19px,2.4vw,28px);font-weight:650;letter-spacing:-.015em;
  line-height:1.15;color:var(--text);text-transform:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media(max-width:1050px){
  .mfg-heading{padding:11px 12px 2px}
  .mfg-heading-name{font-size:clamp(17px,4.2vw,22px)}
}

/* ---------------------------------------------------------------------------
   Verification readiness (Data Review)
   Reuses .stat-card wholesale - same surface, same active state, no new accent
   colour. The only difference is five columns instead of four, and a smaller
   number so a five-across row still fits without the figures crowding.
   No chart, no progress bar, no third status colour: this screen's palette is
   already defined and readiness is not a status.
   --------------------------------------------------------------------------- */
.readiness-row { grid-template-columns:repeat(5,minmax(0,1fr)); }
.readiness-card b { font-size:21px; }
.readiness-card span { margin-top:6px; line-height:1.35; }

@media(max-width:1050px) {
  /* Five across is unreadable on a phone. Two columns keeps each label on at
     most two lines and the row scrolls vertically with the page rather than
     forcing a horizontal scroll. */
  .readiness-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .readiness-card { padding:13px 14px; }
  .readiness-card b { font-size:19px; }
}