/* ==========================================================================
   desk.css — THE ENQUIRY DESK (#512). Prefix `dk-`.
   --------------------------------------------------------------------------
   The queue at `#/desk` and one ticket at `#/enquiry/<ref>`. Borrows the app's
   own components wherever one exists — `.card`, `.table`, `.badge`, `.btn`,
   `.fld`, `.filter-tabs`, `.email*` (the quote screen's trail), `.cmp-pill--indet`
   (the hatched "we cannot tell"), `.rvp-cov` (a caveat above a list) — so this
   file only holds what is genuinely new: the three court tiles, the queue's own
   columns, the ticket header, the know/need pair, and the reply composer.

   ONE OWNER PER SELECTOR is checked by tests/css-split-check.js, so nothing here
   restates a selector another module already owns.
   ========================================================================== */

/* ---- the three tiles: whose court the day is in ------------------------- */
.dk-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin:0 0 12px}
.dk-tile{display:block;text-align:left;padding:14px 16px;border:1px solid var(--line);
  border-radius:12px;background:var(--card,#fff);cursor:pointer;font-family:var(--font);
  border-left-width:5px;transition:box-shadow .12s ease,transform .12s ease}
.dk-tile:hover{box-shadow:0 2px 10px rgba(0,0,0,.07)}
.dk-tile.is-on{box-shadow:0 0 0 2px var(--blue) inset}
.dk-tile__n{display:block;font-size:30px;font-weight:800;line-height:1.05;letter-spacing:-.5px}
.dk-tile__l{display:block;font-size:13px;font-weight:800;margin-top:2px}
.dk-tile__w{display:block;font-size:11.5px;font-weight:700;color:var(--muted);line-height:1.45;margin-top:5px}
.dk-tile--us{border-left-color:var(--orange,#F27300)}
.dk-tile--cust{border-left-color:var(--blue,#0B4F8A)}
.dk-tile--closed{border-left-color:var(--line,#d9d4c7)}
.dk-tile--us .dk-tile__n{color:var(--orange,#F27300)}
.dk-tile--cust .dk-tile__n{color:var(--blue,#0B4F8A)}
.dk-tile--closed .dk-tile__n{color:var(--muted)}

/* ---- the lane chips ----------------------------------------------------- */
.dk-lanes{margin:0 0 10px;flex-wrap:wrap}
/* A state with nothing in it is still offered, greyed, WITH its count — a chip
   that vanished at zero would make "is anything waiting on a person?"
   unanswerable without knowing the chip had ever existed. */
.dk-chip--zero{opacity:.5}
.dk-lanes__sep{display:inline-block;width:1px;align-self:stretch;margin:0 6px;
  background:var(--line,#d9d4c7)}

/* ---- the queue ---------------------------------------------------------- */
.dk-card{overflow-x:auto}
.dk-table td{vertical-align:top}
.dk-row{cursor:pointer}
.dk-ref{font-family:var(--mono,ui-monospace,Menlo,Consolas,monospace);font-size:14px;letter-spacing:.3px}
.dk-ref--none{font-size:11px;font-weight:800;white-space:normal;max-width:15ch;display:inline-block}
.dk-num{font-family:var(--mono,ui-monospace,Menlo,Consolas,monospace);font-size:11px;
  font-weight:700;color:var(--muted);margin-top:3px}
.dk-sub{font-weight:700;display:block;max-width:38ch}
.dk-from{font-size:11px;font-weight:700;color:var(--muted);margin-top:3px;word-break:break-all}
.dk-why{color:var(--muted);font-weight:700;font-size:11px;line-height:1.45;margin-top:3px;max-width:40ch}
.dk-next{font-size:11.5px;font-weight:700;line-height:1.45;margin-top:5px;max-width:38ch;color:var(--muted)}
.dk-next b{color:var(--ink,#1c1a17)}
.dk-nocust{font-size:11px;font-weight:800}
.dk-owner{font-size:12.5px}
.dk-owner--none{color:var(--muted);font-weight:700;font-style:italic}
.dk-flags{margin-top:5px;display:flex;flex-wrap:wrap;gap:4px}
.dk-flag{display:inline-block;font-size:10.5px;font-weight:800;padding:2px 6px;border-radius:6px;
  background:#eef1f6;color:var(--muted)}
.dk-flag--bad{background:#fdece7;color:var(--red,#F23C00)}
.dk-c-act{white-space:nowrap;text-align:right}

/* ---- age and the first-response clock ---------------------------------- */
.dk-age{font-size:14px;font-weight:800;display:inline-block}
.dk-age--unknown{font-size:14px}
.dk-sla{font-size:10.5px;font-weight:800;margin-top:5px;padding:2px 6px;border-radius:6px;
  display:inline-block;max-width:16ch;line-height:1.35}
.dk-sla--ok{background:#e8f6ec;color:#1c6b34}
.dk-sla--running{background:#eaf2fa;color:var(--blue,#0B4F8A)}
.dk-sla--overdue{background:#fdece7;color:var(--red,#F23C00)}
.dk-sla--missed{background:#fdf3e3;color:#8a5a00}
.dk-sla--none{background:#eef1f6;color:var(--muted)}
/* "Cannot tell" gets the hatched treatment the rest of the app gives an unknown:
   a message with no date has no response time, and that is not a target met. */
.dk-sla--unknown{background:repeating-linear-gradient(135deg,#eef1f6 0 5px,#e2e6ee 5px 10px);
  color:var(--muted)}

.dk-empty td{text-align:left}
.dk-note{color:var(--muted);font-weight:700;font-size:12px;line-height:1.55}
.dk-note--bad{color:var(--red,#F23C00)}
.dk-note--ok{color:#1c6b34}
.dk-note--src{margin:10px 0 0;padding-top:10px;border-top:1px dashed var(--line,#d9d4c7)}

/* ---- one ticket: the header ------------------------------------------- */
.dk-head{border-left:5px solid var(--line,#d9d4c7)}
.dk-head[data-court="us"]{border-left-color:var(--orange,#F27300)}
.dk-head[data-court="customer"]{border-left-color:var(--blue,#0B4F8A)}
.dk-head__top{display:flex;justify-content:space-between;align-items:flex-start;
  flex-wrap:wrap;gap:12px}
.dk-head__ref{font-size:30px;margin:0;letter-spacing:.5px;
  font-family:var(--mono,ui-monospace,Menlo,Consolas,monospace)}
.dk-head__cust{font-weight:800;font-size:14px;margin-top:4px}
.dk-head__badges{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dk-court{font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px;
  border:1px solid var(--line,#d9d4c7)}
.dk-court--us{background:#fdf3e8;color:#8a4500;border-color:#f3d9bd}
.dk-court--customer{background:#eaf2fa;color:var(--blue,#0B4F8A);border-color:#c6dcf0}
.dk-court--closed{background:#eef1f6;color:var(--muted)}
.dk-court--unknown{background:repeating-linear-gradient(135deg,#eef1f6 0 5px,#e2e6ee 5px 10px);color:var(--muted)}
.dk-head__why{color:var(--muted);font-weight:700;font-size:13px;line-height:1.6;
  margin:12px 0 0;max-width:100ch}
.dk-head__refnote{font-weight:700;font-size:12.5px;line-height:1.6;margin:8px 0 0;max-width:100ch}
.dk-head__refnote--none{color:var(--muted)}
.dk-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;
  margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line,#d9d4c7)}
.dk-facts>div{display:flex;flex-direction:column;gap:2px}
.dk-facts span{font-size:10.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--muted)}
.dk-facts b{font-size:13.5px;font-weight:800}
.dk-facts small{font-size:11px;font-weight:700;color:var(--muted);line-height:1.45;max-width:34ch}

/* ---- who owns it ----------------------------------------------------- */
.dk-own{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:14px 0 0;
  padding-top:12px;border-top:1px solid var(--line,#d9d4c7)}
.dk-own__l{font-size:10.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--muted)}
.dk-own__who{font-size:13.5px}
.dk-own__who--none{color:var(--muted);font-weight:700;font-style:italic}
.dk-own__acts{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-left:auto}
.dk-own__acts select{padding:7px 9px;border:1px solid var(--line);border-radius:8px;
  font-family:var(--font);font-weight:700;font-size:12px;background:var(--card,#fff)}
.dk-own__by{margin:0;min-width:190px}

/* ---- the triage questions ------------------------------------------- */
.dk-triage__q{padding:12px 0;border-top:1px dashed var(--line,#d9d4c7)}
.dk-triage__q>b{font-size:13.5px}
.dk-triage__q select{margin-top:8px;padding:9px 11px;border:1px solid var(--line);
  border-radius:9px;font-family:var(--font);font-weight:700;font-size:13px;
  background:var(--card,#fff);max-width:340px}
.dk-triage__q .btn{margin-top:8px;margin-right:6px}
.dk-triage__go{padding-top:14px;border-top:1px solid var(--line,#d9d4c7);margin-top:4px}
.dk-triage__go .btn{margin-bottom:8px}

/* ---- what we know / what we still need ------------------------------ */
.dk-know__cols{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:820px){.dk-know__cols{grid-template-columns:1fr}}
.dk-kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0}
.dk-kv dt{font-size:11px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;
  color:var(--muted);align-self:baseline}
.dk-kv dd{margin:0;font-weight:700;font-size:13px;line-height:1.5;word-break:break-word}
.dk-gaps{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.dk-gaps li{padding:8px 11px;border-radius:9px;border-left:3px solid var(--orange,#F27300);
  background:#fdf7f0}
.dk-gaps li>b{display:block;font-size:13px}
.dk-gaps li>span{display:block;font-size:11.5px;font-weight:700;color:var(--muted);
  line-height:1.45;margin-top:2px}
/* A field mentioned and unreadable is NOT the same as one never stated, so the
   two are drawn apart — the hatched treatment for "we looked and cannot tell". */
.dk-gaps li[data-state="unreadable"]{border-left-color:var(--muted);
  background:repeating-linear-gradient(135deg,#f6f4ef 0 6px,#eeebe3 6px 12px)}
.dk-gaps li[data-state="unpriced"]{border-left-color:var(--red,#F23C00);background:#fdece7}

/* ---- the reply composer -------------------------------------------- */
.dk-reply__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}
.dk-reply__ref{font-family:var(--mono,ui-monospace,Menlo,Consolas,monospace);font-size:12px;
  font-weight:800;color:var(--muted)}
.dk-kinds{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px;margin:0 0 12px}
.dk-kind{text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--card,#fff);cursor:pointer;font-family:var(--font)}
.dk-kind>b{display:block;font-size:13px}
.dk-kind>span{display:block;font-size:11.5px;font-weight:700;color:var(--muted);
  line-height:1.45;margin-top:3px}
.dk-kind.is-on{border-color:var(--blue,#0B4F8A);box-shadow:0 0 0 2px var(--blue) inset}
.dk-kind.is-off{opacity:.55;cursor:not-allowed}
.dk-reply textarea{font-family:var(--mono,ui-monospace,Menlo,Consolas,monospace);
  font-size:12.5px;line-height:1.6;white-space:pre-wrap}
.dk-reply__acts{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 10px}
.dk-reply--none{border-left:4px solid var(--line,#d9d4c7)}

/* ---- the conversation ---------------------------------------------- */
.dk-thread{margin-top:0}
/* Our own sent body, in full, under the same disclosure the inbound original
   uses — so "what did we actually send them" reads the same way as "what did
   they actually write". */
.dk-sent>summary{color:var(--blue,#0B4F8A)}

/* ---- elsewhere ----------------------------------------------------- */
.dk-links__l{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px}
.dk-links__l a{color:var(--blue,#0B4F8A);font-weight:800;font-size:13px;text-decoration:none}
.dk-links__l a:hover{text-decoration:underline}

/* ---- the pointer left on the quote register ------------------------- */
.qd-desk{border-left:4px solid var(--blue,#0B4F8A)}

/* A confirmation is NOT a refusal, and they do not share a box. `.reg-err` is
   the red panel a writer's refusal appears in; a successful send's own sentence
   rendered there told an operator they had got something wrong. */
.dk-done{border-left:4px solid var(--green,#1C6B34);font-weight:600;font-size:14.5px}

/* A mailto link past the safe length has its href removed rather than being left
   live, because an <a> cannot ask a question at click time and a client that
   truncates would send half a quote. It must LOOK unpressable to match. */
.dk-reply__acts a.is-off{opacity:.45;pointer-events:none;cursor:not-allowed}

/* ---- the client picker: select, Save, and add-a-new-client ---------------
   One component on two screens (the queue row and the ticket), so it has to sit
   in a table cell as well as in a card. The row wraps rather than overflowing:
   a Save button pushed outside a cell is a Save button nobody can press. */
.dk-pick{margin-top:5px}
.dk-pick__row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dk-pick select.dk-cust{max-width:230px;flex:1 1 150px;padding:7px 9px;
  border:1px solid var(--line);border-radius:8px;background:var(--card,#fff);
  font-family:var(--font);font-weight:700;font-size:12px}
.dk-pick__new{margin-top:9px;padding:11px 12px;border:1px dashed var(--line,#d9d4c7);
  border-radius:9px;background:rgba(0,0,0,.015)}
.dk-pick__new .fld{margin:0 0 8px}
.dk-pick__new .fld input{font-size:13px}
.dk-pick__acts{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
/* The writer's own sentence, in place — never a toast, which slides away while
   somebody is still reading which field it meant. */
.dk-pick__msg:empty{display:none}
.dk-pick__msg{margin-top:6px;font-weight:700;font-size:11.5px;line-height:1.5;
  max-width:46ch;color:var(--muted)}
.dk-pick__msg--bad{color:var(--red,#F23C00)}

/* ---- the raw message, on a ticket that is not an enquiry yet ------------
   Only rendered before a thread exists, because after that the conversation
   panel is the record. The body is a stranger's email: it is escaped into a
   <pre>, never marked up. */
.dk-raw{border-left:4px solid var(--blue,#0B4F8A)}
.dk-raw__msg+.dk-raw__msg{margin-top:16px;padding-top:16px;border-top:1px dashed var(--line,#d9d4c7)}
.dk-raw__h{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0 0 10px}
.dk-raw__h dt{font-size:10.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  color:var(--muted);align-self:baseline}
.dk-raw__h dd{margin:0;font-weight:700;font-size:13px;line-height:1.5;word-break:break-word}
.dk-raw__body{margin:0;padding:13px 15px;border:1px solid var(--line,#d9d4c7);border-radius:9px;
  background:rgba(0,0,0,.02);font-family:var(--mono,ui-monospace,Menlo,Consolas,monospace);
  font-size:12.5px;line-height:1.6;white-space:pre-wrap;word-break:break-word;
  max-height:420px;overflow:auto}

/* ---- the scope disclosure over the queue ------------------------------- */
.dk-scope{margin:0 0 12px}
.dk-scope>summary{cursor:pointer;font-weight:800;font-size:12.5px;color:var(--blue,#0B4F8A);
  padding:4px 0}
.dk-scope>summary:focus-visible{outline:2px solid var(--orange,#F58A2A);outline-offset:2px}
.dk-scope .dk-note{margin:6px 0 0;max-width:110ch}
.dk-foot{margin:10px 0 0;color:var(--muted)}

/* ---- the reply composer's own fields --------------------------------
   ⚠ THE MESSAGE BOX RENDERED ~180px WIDE. `.fld textarea` carries no width of
   its own, so an 18-row textarea sat as a narrow column with a 2,700-character
   quote wrapping inside it — unreadable, and unusable for the editing this
   composer exists to allow. Scoped to .dk-reply so no other screen's .fld
   moves. */
.dk-reply .fld input,
.dk-reply .fld textarea{width:100%;box-sizing:border-box}
.dk-reply .fld{max-width:none}

/* ---- the tidy-up pass (Simon: "the quote and enquiry one is ... hard to read")
   The dashboard introduces itself in one line and gets out of the way; this
   screen was putting three blocks of prose and two rows of buttons between the
   counts and the table. Everything below is about vertical space above the work. */
.dk-lede{margin:0 0 12px;color:var(--muted);font-weight:700;font-size:13.5px;max-width:90ch}

/* The qualification stays on the count's own line as a clause rather than a
   paragraph under it — same information, one line instead of three. */
#dk-heads .dk-note{display:inline}

/* The states with nothing in them, named in words instead of drawn as five
   pressable buttons that select an empty list. */
.dk-empties{margin:0 0 12px}
.dk-empties:empty{display:none}

/* The automation warning's compact form: headline and licence at full size, the
   mechanics behind a disclosure. `.rvp-warn` owns the box; this only reins in the
   nine lines it grew to in autosend. */
.intk-auto--compact{line-height:1.55}
.intk-auto__more{margin:4px 0 2px}
.intk-auto__more>summary{cursor:pointer;font-weight:800;font-size:12.5px;opacity:.85}
.intk-auto__more>summary:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.intk-auto__more>span{display:block;margin-top:5px;font-weight:700;font-size:12.5px;line-height:1.6}