/* CSS Order Intake — review queue UI. */

:root {
  --bg: #f1f5f9;
  --panel: #ffffff;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --brand: #0f172a;

  /* Status colours are the four-colour rule, read from tokens.css — this
     board used to carry a palette of its own, so the same order was amber
     here and red on proofing (audit 2026-09-02 #21). Nothing below may
     spell a colour out; a model test enforces it. */
  --st-received: var(--tone-neutral);
  --st-needs_review: var(--tone-warn);
  --st-needs_more_info: var(--tone-neutral);
  --st-approved: var(--tone-accent);
  --st-ready: var(--tone-accent);
  --st-entered: var(--tone-ok);
  --st-not_order: var(--tone-muted);
  --st-linked: var(--tone-muted);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

a { color: inherit; }

/* ---- Top bar ---------------------------------------------------------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px; background: var(--brand); color: #fff;
}
.brand { font-weight: 700; text-decoration: none; letter-spacing: .2px; }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.whoami { color: #cbd5e1; font-size: 13px; }
.topnav { color: #e2e8f0; font-size: 13px; font-weight: 600; text-decoration: none; }
.topnav:hover { color: #fff; text-decoration: underline; }
.linkbtn, .linkbtn button {
  background: transparent; color: #cbd5e1; border: 1px solid #334155;
  border-radius: 6px; padding: 5px 10px; font-size: 13px; cursor: pointer;
}
.linkbtn:hover { color: #fff; border-color: #64748b; }

/* ---- Flash ------------------------------------------------------------ */
.flash { padding: 9px 18px; font-size: 13px; }
.flash-notice { background: #dcfce7; color: #14532d; }
.flash-alert { background: #fee2e2; color: #7f1d1d; }

main { padding: 16px 18px; }

/* ---- Board ------------------------------------------------------------ */
.board {
  display: flex; gap: 14px; align-items: flex-start;
  overflow-x: auto; padding-bottom: 12px;
}
/* min-width: 0, or a card's one-line order (nowrap) sets the column's minimum
   width and pushes it past 288px instead of ending in an ellipsis. */
.column {
  flex: 0 0 288px; min-width: 0; background: #e9eef5; border-radius: 10px;
  display: flex; flex-direction: column; max-height: calc(100vh - 120px);
}
.column-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-top: 3px solid var(--muted);
  border-radius: 10px 10px 0 0; background: #fff;
}
.column-title { font-weight: 650; }
.column-count {
  background: #eef2f7; color: var(--muted); border-radius: 999px;
  padding: 1px 9px; font-size: 12px; font-weight: 600;
}
.column-body {
  padding: 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 9px;
  min-height: 60px;
}
.column-body.dragover { background: #dbe4f0; outline: 2px dashed #94a3b8; outline-offset: -6px; }
/* An empty column says what would land in it (StatusRegistry#empty). */
.column-empty { margin: 0; padding: var(--space-2); color: var(--muted); font-size: 12px; text-align: center; }
/* The next page of a column (#160), under its last card. */
.column-more { display: block; padding: var(--space-2); font-size: 12px; font-weight: 600; text-align: center; }

/* ---- Stage counts ------------------------------------------------------ */
/* One cell per column, in column order, wearing its column's accent, then the
   stalled count. Above the accents below, so .st-* sets the colour. */
.board-stats { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.board-stat {
  display: flex; align-items: baseline; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-top: 3px solid var(--muted);
  border-radius: 8px; background: var(--panel); color: inherit; text-decoration: none;
}
.board-stat-count { font-size: 17px; font-weight: 700; }
.board-stat-label { font-size: 12px; color: var(--muted); }

/* Column accents by status */
.st-received       { border-top-color: var(--st-received); }
.st-needs_review   { border-top-color: var(--st-needs_review); }
.st-needs_more_info{ border-top-color: var(--st-needs_more_info); }
.st-approved       { border-top-color: var(--st-approved); }
.st-ready          { border-top-color: var(--st-ready); }
.st-entered        { border-top-color: var(--st-entered); }
.st-not_order      { border-top-color: var(--st-not_order); }
.st-linked         { border-top-color: var(--st-linked); }

/* ---- Cards ------------------------------------------------------------ */
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06); cursor: grab;
}
.card:active { cursor: grabbing; }
.card-link { display: block; padding: 10px 11px; text-decoration: none; color: inherit; }
.card-subject { font-weight: 600; margin-bottom: 3px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-from { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* What the pipeline made of the thread: the order as one line of text, then
   how much of it there is. Clamped at two lines rather than cut at one: a long
   client name would otherwise push the warehouse off the card. */
.card-extract { margin-top: var(--space-1); font-size: 13px; font-weight: 500; line-height: 1.3;
  overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-counts { color: var(--muted); font-size: 12px; }
.card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; color: var(--muted); font-size: 12px; }
.card-chips { display: flex; align-items: center; gap: 6px; }
.card-attn { background: #f1f5f9; border-radius: 6px; padding: 1px 6px; }
/* "⚠ client": the client could not be resolved, so this order needs eyes
   before it is entered. That is what red means here, in the same two tints
   .palert uses. It was amber — a fifth colour, outside the four-colour rule
   (Dorry, slice-2 gate). */
.card-flag {
  background: var(--warn-bg); color: var(--warn-deep); border: 1px solid var(--warn);
  border-radius: 6px; padding: 1px 6px; font-weight: 600;
}

/* ---- Detail ----------------------------------------------------------- */
.detail { max-width: 1100px; margin: 0 auto; }
.back { margin: 0 0 12px; }
.detail-grid { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 18px; }
.email-subject { font-size: 19px; margin: 0 0 12px; }
.email-headers { display: grid; grid-template-columns: 60px 1fr; gap: 4px 10px; margin: 0 0 14px; }
.email-headers dt { color: var(--muted); }
.email-headers dd { margin: 0; }
.attachments { border-top: 1px solid var(--line); padding-top: 12px; margin-bottom: 14px; }
.attachments h2, .history h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 8px; }
.attachments ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; }
.att-type { color: var(--muted); font-size: 12px; margin-left: 6px; }
.email-body {
  white-space: pre-wrap; word-break: break-word; border-top: 1px solid var(--line);
  padding-top: 14px; font-size: 13.5px; color: #1e293b; max-height: 60vh; overflow-y: auto;
}
/* CSS's marketing block, folded where it sits in the body (#376). */
.email-fold-chip {
  margin: 6px 0; border: none; border-radius: 6px; background: #f1f5f9; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--muted); padding: 2px 8px;
}
.email-fold-chip:hover { background: #e2e8f0; }
.email-fold-body {
  margin: 6px 0; color: var(--muted); border-left: 2px solid var(--line); padding-left: 8px; cursor: pointer;
}

/* ---- Ticket panel ----------------------------------------------------- */
.status-badge, .card-attn { display: inline-block; }
.status-badge {
  color: #fff; border-radius: 6px; padding: 3px 10px; font-weight: 600; font-size: 13px;
}
.status-blurb { color: var(--muted); font-size: 12.5px; margin: 6px 0 0; }
.ticket-status { margin-bottom: 16px; }
.st-received.status-badge,       .status-badge.st-received       { background: var(--st-received); }
.st-needs_review.status-badge,   .status-badge.st-needs_review   { background: var(--st-needs_review); }
.st-needs_more_info.status-badge,.status-badge.st-needs_more_info{ background: var(--st-needs_more_info); }
.st-approved.status-badge,       .status-badge.st-approved       { background: var(--st-approved); }
.st-ready.status-badge,          .status-badge.st-ready          { background: var(--st-ready); }
.st-entered.status-badge,        .status-badge.st-entered        { background: var(--st-entered); }
/* The muted tint is the light grey, so it carries its own ink rather than
   the white the other badges use — same treatment as .pdecided.ignored. */
.st-not_order.status-badge,      .status-badge.st-not_order      { background: var(--st-not_order); color: var(--tone-muted-ink); }
.st-linked.status-badge,         .status-badge.st-linked         { background: var(--st-linked); color: var(--tone-muted-ink); }

.recognition { border-top: 1px solid var(--line); padding-top: 14px; margin-bottom: 4px; }
.recognition h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 6px; }
.rec-verdict { margin: 0; }
.rec-conf { color: var(--muted); font-size: 12.5px; margin-left: 6px; }
.rec-reason { margin: 4px 0 2px; font-size: 13px; }
.rec-model { margin: 0; color: var(--muted); font-size: 11.5px; }

/* ---- Extraction block ------------------------------------------------- */
/* Matches .recognition's section-boundary convention: no self margin-top; the
   gap above is owned by the previous section's margin-bottom. */
.extraction { border-top: 1px solid var(--line); padding-top: 14px; margin-bottom: 4px; }
.extraction h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 8px; }
.ext-empty { margin: 0; font-size: 13px; color: var(--muted); font-style: italic; }
.ext-error { margin: 0; font-size: 13px; color: #991b1b; }
.ext-error-detail { color: var(--muted); font-size: 11.5px; }
.ext-model { margin: 8px 0 0; color: var(--muted); font-size: 11.5px; }

.ext-order { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; background: #f8fafc; }
.ext-order-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
.ext-order-n { font-weight: 600; font-size: 12.5px; }
.ext-conf { color: var(--muted); font-size: 12px; }

/* Compact variant of the ticket status-badge, reused for per-order disposition
   so the page speaks one badge language (colours come from the st-* classes). */
.status-badge.sm { font-size: 11px; padding: 2px 8px; }

/* Values below are LLM/email-sourced and uncontrolled — wrap long tokens rather
   than let them blow out the fixed-width aside (same guard as .email-body). */
.ext-fields { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0 0 8px; font-size: 13px; }
.ext-fields dt { color: var(--muted); }
.ext-fields dd { margin: 0; overflow-wrap: anywhere; }

.ext-lines-wrap { overflow-x: auto; margin: 0 0 8px; }
.ext-lines { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ext-lines th { text-align: left; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line); padding: 3px 6px; white-space: nowrap; }
.ext-lines td { border-bottom: 1px solid var(--line); padding: 3px 6px; vertical-align: top; overflow-wrap: anywhere; }
.ext-lines tr:last-child td { border-bottom: none; }

/* Client resolution: a status badge plus the canonical master name it resolved
   to, and (when it adds something) the resolution note. Sits between the header
   fields and the sample lines. .ext-note is the muted, informational treatment
   for a note under a confident "known" badge; a note that needs action reuses the
   amber .ext-flag/.ext-missing chip instead. */
.ext-resolution { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
.ext-canonical { font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
.ext-defaults { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 12px; color: var(--muted); }
.ext-defaults-tag { text-transform: uppercase; letter-spacing: .04em; font-size: 10.5px; font-weight: 700; color: var(--muted); }
.ext-default { background: var(--line); border-radius: 4px; padding: 1px 6px; }
.ext-default strong { color: var(--ink, inherit); }
.ext-note { font-size: 12.5px; margin: 0 0 8px; color: var(--muted); overflow-wrap: anywhere; }

.ext-flag { font-size: 12.5px; margin: 6px 0 0; padding: 6px 9px; border-radius: 6px; overflow-wrap: anywhere; }
.ext-missing { background: #fef3c7; color: #92400e; }
.ext-conflicts { background: #fee2e2; color: #991b1b; list-style: none; padding: 6px 9px; }
.ext-conflicts li { margin: 0; }
.ext-conflicts li + li { margin-top: 3px; }

/* Thread linkage on the ticket detail. */
.thread-note { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; }
.thread-flag { font-size: 12.5px; margin: 10px 0 0; padding: 8px 10px; border-radius: 6px; overflow-wrap: anywhere; }
.thread-flag ul { margin: 4px 0 0; padding-left: 18px; }
.thread-flag.field-updates { background: #fef3c7; color: #92400e; }
.thread-flag.after-entry { background: #fee2e2; color: #991b1b; }
.thread-flag.corrections-stale { background: #fef3c7; color: #92400e; border: 1px solid #f59e0b; }

.transition-form { border-top: 1px solid var(--line); padding-top: 14px; }
.transition-form label { display: block; font-weight: 600; margin-bottom: 6px; }
.transition-form .muted { color: var(--muted); font-weight: 400; }
.transition-form textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 7px; padding: 8px; font: inherit; resize: vertical;
}
.status-buttons { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.stbtn {
  border: 1px solid transparent; color: #fff; border-radius: 7px; padding: 6px 11px;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.stbtn.st-received { background: var(--st-received); }
.stbtn.st-needs_review { background: var(--st-needs_review); }
.stbtn.st-needs_more_info { background: var(--st-needs_more_info); }
.stbtn.st-ready { background: var(--st-ready); }
.stbtn.st-entered { background: var(--st-entered); }
.stbtn.st-not_order { background: var(--st-not_order); color: var(--tone-muted-ink); }
.stbtn:hover { filter: brightness(1.07); }

.history { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 16px; }
.history ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.history li { font-size: 13px; }
.hist-when { color: var(--muted); font-size: 12px; display: block; }
.hist-actor { color: var(--muted); }
.hist-note { background: #f8fafc; border-left: 3px solid var(--line); padding: 5px 9px; margin-top: 4px; border-radius: 0 5px 5px 0; }

/* ---- Login gate ------------------------------------------------------- */
.gate { max-width: 360px; margin: 12vh auto; background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 32px; text-align: center; }
.gate h1 { margin: 0 0 6px; }
.gate p { color: var(--muted); margin: 0 0 20px; }
.btn { background: var(--brand); color: #fff; border: 0; border-radius: 8px; padding: 10px 20px;
  font-size: 15px; font-weight: 600; cursor: pointer; }

/* One door per tenant, stacked, when this app serves more than one company.
   Full width so the two company names read as a list of equals rather than as
   a primary action and an afterthought. */
.gate-doors { display: flex; flex-direction: column; gap: var(--space-2); }
.gate-doors .btn { width: 100%; }
/* Google's mark sits in full colour on the navy button, as on Google's own
   dark-theme sign-in button. */
.btn-google { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); }
.google-mark { width: 18px; height: 18px; flex: none; }
.gate-alt { font-size: 13px; margin: var(--space-4) 0 0; }
/* Password sign-in and setting a password: labels over boxes, one column. */
.gate-form { display: flex; flex-direction: column; gap: var(--space-2); text-align: left; }
.gate-form label { font-size: 13px; font-weight: 600; }
.gate-form .btn { margin-top: var(--space-3); }
.gate-form .gate-hint { font-size: 12px; margin: 0; }

@media (max-width: 800px) {
  .detail-grid { grid-template-columns: 1fr; }
}

/* ---- Stalled banner ---------------------------------------------------- */
/* The board's one piece of bad news: tickets nobody is waiting on because the
   pipeline dropped them. Amber, not red — nothing is broken now, but something
   needs a hand. */
.stalled-banner {
  background: #fffbeb; border: 1px solid #fcd34d; color: #92400e;
  border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; font-size: 13px;
}
.stalled-banner a { font-weight: 600; }

/* ---- The customer list, offered while somebody types a party name -------
   Shared: the proofing screen's party editor and the name-mapping screen
   both hang this box under an input, so it lives in the sheet both
   layouts load rather than in proofing.css, which /reference never had. */
/* The customers a party field's editor offers, hung under the editor (the
   script sets its top from the editor's height, which grows as the value
   wraps). The editor's own box and shadow, so the two read as one control. */
.psuggest {
  position: absolute; left: 0; z-index: 5;
  min-width: 240px; max-width: min(520px, calc(100vw - 80px));
  background: #fff; border: 1px solid var(--n300); border-radius: 6px;
  box-shadow: 0 1px 5px rgba(32, 33, 36, 0.2);
  padding: var(--space-1) 0; font-size: 12px;
}
.psuggest-list { list-style: none; margin: 0; padding: 0; }
.psuggest-item {
  display: flex; align-items: baseline; gap: var(--space-2);
  padding: var(--space-1) var(--space-2); cursor: pointer;
}
.psuggest-item:hover { background: var(--n100); }
/* Where the arrow keys are. Blue, as the focus ring is: the reviewer is about
   to act on it. */
.psuggest-item.active { background: var(--accent-tint); color: var(--accent-deep); }
/* The name is what she is choosing, so it keeps its width and the hint takes
   whatever is left. An alias hint is long enough to squeeze a name down to
   "INTERAMER…" otherwise; the whole hint is on hover. */
.psuggest-name { flex: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psuggest-hint {
  flex: 1 1 0; min-width: 0; text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11px; color: var(--n700);
}
.psuggest-none { margin: 0; padding: var(--space-1) var(--space-2); font-size: 11px; color: var(--warn-deep); }
/* The typed text resolves to a deactivated customer: the hint takes the
   warning red the match line uses for the same finding. */
.psuggest-item.inactive .psuggest-hint { color: var(--warn-deep); }