/* ============================================================================
   desk.css — the Tool Desk front page (dense, utilitarian)
   ----------------------------------------------------------------------------
   Layout + components for the Tool Desk. Loads AFTER tokens.css + style.css
   and reads the Daybreak tokens. Ported from the approved mockup
   (tool-desk-mockup.html); mockup's local vars mapped to house tokens:
     --card → --paper-2 · --line → --hair · --disp → --display · --body → --sans
   Density is deliberate: this is a daily-driver database, not a display case.
   ============================================================================ */

body.desk{font-size:14px;line-height:1.45}
.desk-wrap{padding-top:20px;padding-bottom:60px}
body.desk a{color:var(--accent-ink);text-decoration:none}
body.desk a:hover{text-decoration:underline}

/* ---- top bar: search is the page ---- */
.topbar{
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  position:sticky;top:0;background:var(--paper);
  padding:10px 0;border-bottom:1px solid var(--hair);z-index:5;
}
.topbar .brand{font-family:var(--mono);font-size:12px;color:var(--accent-ink);letter-spacing:.1em;white-space:nowrap}
.topbar input{
  flex:1;min-width:260px;padding:10px 14px;
  border:1px solid var(--hair);border-radius:8px;background:var(--paper-2);
  font:15px var(--sans);color:var(--ink);
}
.topbar input:focus{outline:2px solid var(--accent);outline-offset:-1px}
.kbd{font-family:var(--mono);font-size:11px;color:var(--muted);border:1px solid var(--hair);border-radius:4px;padding:1px 6px;background:var(--paper-2)}
.counts{font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap}
.counts b{color:var(--ink)}

/* ---- filter chips ---- */
.filters{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 4px}
.chip{
  font-family:var(--mono);font-size:11.5px;padding:4px 10px;
  border:1px solid var(--hair);border-radius:999px;background:var(--paper-2);
  cursor:pointer;color:var(--muted);
}
.chip.on{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)}
.filters .sep{color:var(--hair);align-self:center}

/* ---- pinned daily drivers ---- */
.pins{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 6px}
.pin{
  font-family:var(--mono);font-size:12px;padding:6px 12px;
  border:1px solid var(--hair);border-radius:8px;background:var(--paper-2);
  cursor:pointer;color:var(--ink);
}
.pin:hover{border-color:var(--accent);text-decoration:none}
.pin b{color:var(--accent-ink);font-weight:600}
.pin .p{color:var(--muted)}

/* ---- section label ---- */
.sec{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-ink);margin:26px 0 8px;display:flex;align-items:center;gap:10px;
}
.sec::after{content:"";flex:1;border-top:1px solid var(--hair)}

/* ---- dense tables ---- */
body.desk table{
  width:100%;border-collapse:collapse;background:var(--paper-2);
  border:1px solid var(--hair);border-radius:8px;overflow:hidden;
}
body.desk thead th{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);text-align:left;padding:7px 12px;
  border-bottom:1px solid var(--hair);background:var(--accent-tint);font-weight:500;
}
body.desk td{padding:7px 12px;border-top:1px solid var(--hair);vertical-align:baseline}
body.desk tr:hover td{background:var(--accent-tint)}
td.name{font-family:var(--display);font-weight:600;white-space:nowrap}
td.note{color:var(--muted);font-size:13px}
td.mono,.mono{font-family:var(--mono);font-size:12px}
.copy{cursor:pointer;color:var(--accent-ink);border-bottom:1px dashed var(--hair)}
.copy:hover{background:var(--accent-soft)}
.copy.copied{background:#e8f0e2}
.links a{margin-right:10px;font-family:var(--mono);font-size:12px}
.superseded{color:var(--muted);font-style:italic}

/* status chips — one class per registry status */
.status{font-family:var(--mono);font-size:10.5px;padding:1px 8px;border-radius:999px;white-space:nowrap}
.s-live,.s-built{background:#e8f0e2;color:#3d6b2f}
.s-active,.s-building{background:var(--accent-soft);color:var(--accent-ink)}
.s-frozen,.s-shelved{background:#e8ecf0;color:#4a5a6b}
.s-retired,.s-superseded,.s-private{background:#efe9df;color:#8a8272}

/* empty-search row */
.empty td{color:var(--muted);font-style:italic;text-align:center;padding:14px 12px}

body.desk footer{margin-top:36px;color:var(--muted);font-family:var(--mono);font-size:11px}

@media(max-width:820px){
  .hide-sm{display:none}
  body.desk td,body.desk thead th{padding:6px 8px}
}

/* motion: only the copy flash exists; kill it under reduced motion */
.copy{transition:background .3s ease}
@media(prefers-reduced-motion:reduce){
  .copy{transition:none}
  body.desk *{transition:none!important;animation:none!important}
}