/* ============================================================================
   Job panel — the slide-over that opens when you click a row on the board.

   The shell is entirely the canonical sheet's: .panel (fixed, right, z-index
   201, flex column) with .panel-head as the fixed chrome row and .panel-body as
   the scrolling region, and .adri-overlay as the scrim. Canon's overlay already
   handles opacity and, importantly, pointer-events:none while closed, so a
   dismissed scrim cannot swallow clicks.

   What is here is only what canon does not carry: a section divider inside the
   panel body, the header's icon buttons, the title block, the stat grid and the
   read. Tokens only, no raw hex.
   ========================================================================= */

/* A section inside .panel-body. Canon has the panel and its body but no notion
   of stacked sections within one, and this panel has four. */
.panel-sec { padding: 14px 16px; border-bottom: 1px solid var(--divider); }
.panel-sec:last-child { border-bottom: none; }

/* — Header: walk the list, open the full page, close ——————————————— */
.panel-head .pnav { display: inline-flex; gap: 4px; }
.panel-head .pos {
  font-family: var(--mono); font-size: var(--t-xs); color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.panel-head .pspring { flex: 1 1 auto; }
/* Square icon buttons — a text button's side padding is too wide for a glyph. */
.panel-head .ibtn { padding: 5px 9px; font-size: var(--t-sm); line-height: 1; }
.panel-head .ibtn:disabled { opacity: .38; cursor: default; }
.panel-head .ibtn:disabled:hover { border-color: var(--border-2); color: var(--ink-3); }

/* — Title block ————————————————————————————————————————— */
.panel-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.panel-title .who {
  font-family: var(--serif); font-size: var(--t-lg); font-weight: 600;
  letter-spacing: -.01em; color: var(--ink);
}
/* The mark star, same affordance as the board's star cell. */
.panel-title .pstar {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--faint);
  transition: color .12s, transform .12s;
}
.panel-title .pstar:hover { color: var(--need); transform: scale(1.1); }
.panel-title .pstar.on { color: var(--need); }
.panel-meta { color: var(--muted); font-size: var(--t-sm); margin-top: 5px; }
.panel-meta .jn { font-family: var(--mono); font-weight: 700; color: var(--accent); }
.panel-meta a.jn:hover { text-decoration: underline; }

/* — Stat strip: the six facts you triage on, in one glance ——————————
   Canon's .stats is a single segmented row; six cells need to wrap, so this is
   a grid of the same cells rather than a second stat component. */
.panel-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden; background: var(--surface);
}
.panel-stats .st { padding: 9px 12px; border-right: 1px solid var(--divider); border-bottom: 1px solid var(--divider); }
.panel-stats .st:nth-child(3n) { border-right: none; }
.panel-stats .st:nth-last-child(-n+3) { border-bottom: none; }
.panel-stats .st .k {
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .08em;
  color: var(--label); font-weight: 800;
}
.panel-stats .st .v {
  font-family: var(--mono); font-size: var(--t-md); font-weight: 600;
  color: var(--ink); margin-top: 4px; font-variant-numeric: tabular-nums;
}
/* A stat whose value is prose, not a number, drops the mono. */
.panel-stats .st .v.txt { font-family: var(--ui); font-size: var(--t-sm); font-weight: 600; }
@media (max-width: 560px) {
  .panel-stats { grid-template-columns: repeat(2, 1fr); }
  .panel-stats .st:nth-child(3n) { border-right: 1px solid var(--divider); }
  .panel-stats .st:nth-child(2n) { border-right: none; }
}

/* — The read ————————————————————————————————————————— */
.panel-read { border-left: 3px solid var(--accent); padding-left: 14px; }
/* The headline is the answer, so it is the biggest thing in the panel — the
   same call as the job page's .na-lead, kept a size down because the panel is a
   peek in a narrow column, not the full read. */
.panel-read .hl { font-family: var(--serif); font-size: 18px; font-weight: 700; color: var(--ink);
                  margin-bottom: 10px; line-height: 1.32; letter-spacing: -.01em; }
/* Section sub-heading — standalone rather than scoped to .panel-read, because
   the context grid, timeline, odds and promises sections (2026-09-02) all use
   it too. Safe to generalize: dashboard.html defines no .dh of its own. */
.dh {
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .08em;
  color: var(--label); font-weight: 800; margin: 12px 0 5px;
}
.panel-read .sub { color: var(--muted); font-weight: 400; }
.panel-read p { margin: 0; font-size: var(--t-sm); line-height: 1.55; color: var(--ink-2); }
.panel-read ul { margin: 0; padding-left: 18px; font-size: var(--t-sm); line-height: 1.55; color: var(--ink-2); }
.panel-read li { margin-bottom: 3px; }
.panel-read .move { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.45; }
/* .panel-sub is the same caption style for OUTSIDE .panel-read — never bare
   .sub, which dashboard.html's own <style> already defines (font-size:11px,
   loaded AFTER this stylesheet) and would silently win the cascade. */
.panel-sub { color: var(--muted); font-weight: 400; font-size: var(--t-sm); }

/* — Actions / footer ————————————————————————————————————— */
.panel-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.panel-load { display: flex; justify-content: center; padding: 34px 0; }
.panel-note { color: var(--muted); font-size: var(--t-sm); line-height: 1.5; margin-top: 12px; }
.panel-kbd {
  font-family: var(--mono); font-size: var(--t-micro); color: var(--muted);
  border: 1px solid var(--border-2); border-radius: 4px; padding: 1px 5px;
  background: var(--surface-2);
}
.panel-foot { color: var(--muted); font-size: var(--t-xs); margin-top: 12px; }

/* — Steps checklist — full parity with /jobs/<n> (2026-09-02) ———————————
   A tick is GLOBAL and carries a name, so two coordinators opening the same
   job on the same morning never repeat the same call — see risk-panel.js. */
.panel-move { margin: 12px 0; }
.stepline { display: flex; align-items: flex-start; gap: 9px; padding: 6px 0; }
.stepline.done { opacity: .7; }
.stepbox { margin-top: 3px; cursor: pointer; }
.stepwho {
  display: inline-block; margin-top: 3px; font-size: var(--t-xs); color: var(--muted);
}
.stepwho.mine { color: var(--ok-tx); }

/* — Job context grid ————————————————————————————————————————— */
.panel-cxgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-top: 4px; }
.cx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cxk {
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .06em;
  color: var(--label); font-weight: 800;
}
.cxv { font-size: var(--t-sm); color: var(--ink-2); overflow-wrap: break-word; }
@media (max-width: 480px) { .panel-cxgrid { grid-template-columns: 1fr; } }

/* — Interaction timeline — collapsed by default, key signal always visible — */
.tlbar {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  cursor: pointer; flex-wrap: wrap;
}
.tlbar .flag {
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .05em;
  color: var(--need-tx); background: var(--need-bg); border-radius: 4px; padding: 1px 6px; margin-left: 6px;
}
[data-el="timeline"] .tlbody { display: none; margin-top: 10px; }
[data-el="timeline"].open .tlbody { display: block; }
.note { padding: 8px 0; border-top: 1px solid var(--divider); }
.note:first-child { border-top: none; }
.ndate { font-family: var(--mono); font-size: var(--t-xs); color: var(--muted); }
.nby { font-size: var(--t-xs); color: var(--muted); margin-left: 8px; }
.nex { font-size: var(--t-sm); color: var(--ink-2); margin-top: 3px; line-height: 1.5; }

/* — Historical odds (loss-ensemble model) ———————————————————————————— */
.panel-oddsnum {
  font-family: var(--mono); font-size: 32px; font-weight: 600; line-height: 1.1;
  letter-spacing: -.02em; margin-top: 4px;
}
.panel-oddsnum.panel-odds-lo  { color: var(--ok-tx); }
.panel-oddsnum.panel-odds-mid { color: var(--need-tx); }
.panel-oddsnum.panel-odds-hi  { color: var(--crit); }
.panel-oddsbar {
  height: 8px; border-radius: 6px; background: var(--surface-2); margin-top: 10px;
  overflow: hidden; border: 1px solid var(--border);
}
.panel-oddsbar i { display: block; height: 100%; border-radius: 6px; }
.panel-oddsbar i.panel-odds-lo  { background: var(--ok); }
.panel-oddsbar i.panel-odds-mid { background: var(--need); }
.panel-oddsbar i.panel-odds-hi  { background: var(--crit); }

/* — Promises made on this job ——————————————————————————————————————
   Same completion the /promises board and the Brief's bell read — see the
   docblock on togglePromise() in risk-panel.js. */
[data-el="promises"] .pr { padding: 8px 0; border-top: 1px solid var(--divider); }
[data-el="promises"] .pr:first-child { border-top: none; }
[data-el="promises"] .pr.done { opacity: .65; }
.prdir {
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .05em;
  color: var(--label); font-weight: 800; margin-right: 6px;
}
.prdue { font-size: var(--t-xs); color: var(--muted); float: right; }
.prdue.over  { color: var(--crit); font-weight: 600; }
.prdue.today { color: var(--need-tx); font-weight: 600; }
.prmeta { font-size: var(--t-sm); color: var(--ink-2); margin-top: 3px; clear: both; }
.prmore {
  background: none; border: none; color: var(--accent); cursor: pointer;
  font-size: var(--t-xs); padding: 0 0 0 4px;
}
.prdone {
  margin-top: 5px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 3px 10px; font-size: var(--t-xs); cursor: pointer;
}
[data-el="promises"] .pr.done .prdone { color: var(--ok-tx); border-color: var(--ok); }

/* — "N more" fold, shared by the promises list ———————————————————————— */
.panel-more { margin-top: 8px; font-size: var(--t-xs); }
.panel-more summary { cursor: pointer; color: var(--accent); }
.panel-more[open] summary { margin-bottom: 6px; }