/* ============================================================
   dashboard.css · Halcyon candidate-branch demo · the three result
   surfaces in the Sharing group: the personal dashboard, the read-only
   team roll-up, and the single-result share target.

   RESULT-FIRST grammar (Operating Directive #10): a card NAMES the
   outcome a reader came for ("Readiness 61%", "Latest from supply
   chain"), never the screen it lives on. The grid is a control surface;
   the named result each card links to is the deliverable.

   Built on the shared Datum tokens in halcyon.css (--accent cyan = agent
   work, --gold = the human gate, --surface/--border for the chassis), so
   light and dark inherit automatically and every color holds WCAG AA on
   both grounds. No new color is introduced here.

   All motion (card entrance, reorder lift, share-sheet rise) lives behind
   @media (prefers-reduced-motion: no-preference). Under reduce, every
   card is at its final state instantly and fully readable.

   No remote asset, no webfont, no image. Glyphs are mono text.
   ============================================================ */

/* visually-hidden label, kept readable by assistive tech */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- the page frame: header + intro + grid --------------------------- */
.dash-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.dash-head-copy { min-width: 0; }
.dash-role-line {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-dim);
  margin-top: 4px;
}
.dash-role-line strong { color: var(--accent-deep); font-weight: 700; }

/* the toolbar: role switcher + add-card + reset */
.dash-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.dash-role-select {
  appearance: none;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 30px 8px 12px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
    linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
  background-position: calc(100% - 16px) 16px, calc(100% - 11px) 16px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.dash-role-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.dash-add,
.dash-ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.dash-add {
  background: var(--accent);
  color: #07252C;
  border: 1px solid var(--accent);
}
.dash-add:hover { background: var(--accent-deep); }
.dash-add .dash-add-glyph { font-size: 16px; line-height: 1; font-weight: 700; }
.dash-ghost-btn {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
}
.dash-ghost-btn:hover { color: var(--text); border-color: var(--accent); }
.dash-add:focus-visible,
.dash-ghost-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- the responsive card grid ---------------------------------------- */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
  align-items: start;
  min-width: 0;
}

/* a result card. The header carries the title + glyph + a menu of small
   actions; the body carries the result value + meta; the footer links to
   the detail page that produced the result. */
.dash-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  min-width: 0;
  box-shadow: var(--shadow-sm);
}
.dash-card.is-dragging { opacity: 0.55; border-color: var(--accent); }
.dash-card.is-drop-target { border-color: var(--accent); border-style: dashed; }

.dash-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft);
  cursor: grab;
}
.dash-card-head:active { cursor: grabbing; }
.dash-card-glyph {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--accent-pale);
  border: 1px solid var(--border-accent);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 11px; font-weight: 700;
  flex: none;
}
.dash-card.type-agent .dash-card-glyph,
.dash-card.type-simulation .dash-card-glyph {
  background: var(--accent-pale);
}
.dash-card-title {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.dash-card-actions {
  display: flex;
  gap: 2px;
  flex: none;
}
.dash-card-actions button {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 13px;
  cursor: pointer;
}
.dash-card-actions button:hover { color: var(--text); border-color: var(--border); background: var(--surface-2); }
.dash-card-actions button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.dash-card-body {
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
/* the body is the click target that opens the page behind the result.
   The pointer cursor must win over the tooltip layer's cursor:help, so the
   selector is qualified with the card to raise specificity. */
.dash-card .dash-card-body[data-card-open],
.dash-card-body[data-card-open] { cursor: pointer; }
.dash-card-body[data-card-open]:hover { background: var(--accent-pale); }
.dash-card-body[data-card-open]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.dash-card:hover { border-color: var(--border-accent); box-shadow: var(--shadow); }
.dash-card-value {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.05;
}
.dash-card.type-agent .dash-card-value,
.dash-card.type-flow .dash-card-value { font-size: 24px; }
.dash-card-meta {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.5;
}
.dash-card-trust { margin-top: 2px; }

/* a small status pill for flow / hold states */
.dash-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
}
.dash-status.is-hold { color: var(--gold); background: var(--gold-soft); border: 1px solid var(--gold); }
.dash-status.is-go   { color: var(--ok); background: var(--ok-wash); border: 1px solid var(--ok); }

/* the shared badge: shown when a card was shared with the team */
.dash-shared-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--gold);
  background: var(--gold-pale);
  border: 1px solid var(--gold-soft);
}
.dash-shared-badge::before { content: "\2197"; font-size: 11px; }

/* the agent pass-rate bar */
.dash-passbar {
  height: 6px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  overflow: hidden;
}
.dash-passbar > i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}

/* chat / conversation card: a Slack-like message group, scrollable */
.dash-chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 2px;
}
.dash-msg {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dash-msg-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.dash-msg-sender { font-size: 12px; font-weight: 600; color: var(--accent-deep); }
.dash-msg-time { font-size: 11px; color: var(--text-dimmer); font-family: var(--mono); }
.dash-msg-text { font-size: 12.5px; color: var(--text); line-height: 1.45; }

.dash-card-foot {
  padding: 11px 14px;
  border-top: 1px solid var(--border-soft);
  background: var(--surface-3);
}
.dash-card-foot a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
}
.dash-card-foot a::after { content: "\2192"; transition: transform 0.18s ease; }
.dash-card-foot a:hover::after { transform: translateX(3px); }

/* ---- the add-card / settings / share dialogs ------------------------- */
dialog.dash-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  padding: 0;
  box-shadow: var(--shadow-lg);
}
dialog.dash-dialog::backdrop { background: rgba(8, 10, 13, 0.62); }
.dash-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--border-soft);
}
.dash-dialog-head h2 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.dash-dialog-head p { margin: 4px 0 0; font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }
.dash-dialog-close {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-dim);
  font-size: 16px; cursor: pointer; flex: none;
}
.dash-dialog-close:hover { color: var(--text); border-color: var(--accent); }
.dash-dialog-body { padding: 16px 20px 20px; overflow-y: auto; }

/* picker gallery inside the add-card dialog */
.dash-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-3);
}
.dash-picker-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  min-width: 0;
}
.dash-picker-item:hover { border-color: var(--accent); }
.dash-picker-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dash-picker-type {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dimmer);
}
.dash-picker-name { font-size: 13px; font-weight: 600; color: var(--text); }
.dash-picker-preview { font-size: 11.5px; color: var(--text-dim); line-height: 1.45; }

/* the share dialog teammate list */
.dash-share-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 4px 0 0;
}
.dash-share-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.dash-share-row:hover { background: var(--surface-2); }
.dash-share-row input { width: 16px; height: 16px; accent-color: var(--gold); flex: none; }
.dash-share-row span { font-size: 13px; color: var(--text); }

.dash-dialog-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid var(--border-soft);
}
.dash-primary-btn {
  background: var(--gold);
  color: #2A1B05;
  border: 1px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  font: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer;
}
.dash-primary-btn:hover { background: var(--gold-deep); }
.dash-primary-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* the settings dialog field */
.dash-field { display: flex; flex-direction: column; gap: 6px; }
.dash-field label { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.dash-field select,
.dash-field input {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font: inherit; font-size: 13px;
}
.dash-field select:focus-visible,
.dash-field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* a transient toast */
.dash-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(8px);
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius);
  padding: 11px 16px;
  font-size: 13px;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  z-index: 60;
  max-width: calc(100vw - 32px);
}
.dash-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* the foot pointer at the result packet */
.dash-foot {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.dash-foot p { margin: 0; font-size: 12.5px; color: var(--text-dim); max-width: 52ch; }
/* the unified Export group spans the full foot width so its button grid
   reads as one obvious row; dashboard.js mounts it from window.HalcyonExport. */
.dash-export-mount { flex: 1 1 100%; width: 100%; min-width: 0; }
.dash-export-unavailable { margin: var(--space-3) 0 0; font-size: 13px; line-height: 1.5; color: var(--text-dim); }
.dash-foot-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.packet-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--gold-soft);
  color: var(--gold-deep);
  border: 1px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  font-size: 13px; font-weight: 700;
  white-space: nowrap;
}
.packet-cta:hover { background: var(--gold-pale); }

/* ============================================================
   TEAM DASHBOARD — the read-only roll-up
   ============================================================ */
.team-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.team-metric {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px;
}
.team-metric-value { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); line-height: 1.1; }
.team-metric-label { font-size: 12.5px; color: var(--text-dim); margin-top: 4px; }
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
  align-items: start;
}
.team-from {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.team-from::before { content: "from"; font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dimmer); }
.team-back { margin-top: var(--space-5); }

/* ============================================================
   SHARE — the single read-only shared-result target
   ============================================================ */
.share-wrap {
  max-width: 640px;
  margin: 0 auto;
}
.share-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 11px 14px;
  border: 1px solid var(--gold);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm);
  background: var(--gold-pale);
  margin-bottom: 18px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-dim);
}
.share-banner strong {
  color: var(--gold-deep);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 1.2px;
}
.share-sharer {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--text-dim);
}
.share-sharer .team-from { font-size: 11.5px; }
.share-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.share-card .dash-card-value { font-size: 40px; }
.share-card .dash-card-head { cursor: default; }
.share-body { padding: 4px 0; }
.share-foot {
  margin-top: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.share-foot p { margin: 0; font-size: 12.5px; color: var(--text-dim); }

/* ---- shared empty-state alignment with .empty-coach (enrich.css) ----- */
.dash-empty-wrap { grid-column: 1 / -1; }

/* ============================================================
   MOTION — every animation gated behind no-preference. Under reduce,
   cards sit at their final state, instantly, fully readable.
   ============================================================ */
.dash-card,
.team-metric,
.share-card { will-change: auto; }

@media (prefers-reduced-motion: no-preference) {
  .dash-card,
  .team-metric {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
    animation: dash-card-in 0.5s cubic-bezier(0.18, 0.9, 0.28, 1.2) forwards;
    animation-delay: var(--dash-stagger, 0ms);
  }
  @keyframes dash-card-in {
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  .dash-card { transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
  .dash-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
  .dash-toast { transition: opacity 0.25s ease, transform 0.25s ease; }
  dialog.dash-dialog[open] { animation: dash-dialog-rise 0.28s cubic-bezier(0.18, 0.9, 0.28, 1.1); }
  @keyframes dash-dialog-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .share-card { animation: dash-card-in 0.55s cubic-bezier(0.18, 0.9, 0.28, 1.2) both; }
}

@media (prefers-reduced-motion: reduce) {
  .dash-card,
  .team-metric,
  .share-card { opacity: 1; transform: none; animation: none; }
  .dash-toast { transition: none; }
}

/* ---- responsive: collapse to one column, keep zero horizontal overflow */
@media (max-width: 720px) {
  .dash-head { flex-direction: column; }
  .dash-toolbar { width: 100%; }
  .dash-grid,
  .team-grid { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  .dash-card-value { font-size: 26px; }
  .share-card .dash-card-value { font-size: 32px; }
  .dash-toolbar { gap: 6px; }
  .dash-add, .dash-ghost-btn { padding: 8px 11px; }
}

/* ============================================================
   DEPARTMENT READINESS PANEL — the surface where BOTH toggles
   materially change what renders. The "Viewing as <department>"
   switcher re-derives every value from that department's own items;
   the Guided / Visual / Detailed mode re-renders the SAME items as a
   short walkthrough, a compact chart, or a full table. Token-driven so
   light (the default) and dark both hold WCAG AA, no text-on-text, and
   no horizontal overflow at 375px. All motion sits behind
   prefers-reduced-motion: no-preference.
   ============================================================ */
.dept-panel {
  margin: 0 0 var(--space-4);
  padding: var(--space-4) var(--space-4) calc(var(--space-4) + 2px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.dept-panel:empty { display: none; }

/* head: mode eyebrow + department title + lead sentence */
.dept-head { min-width: 0; }
.dept-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent-deep);
  margin: 0 0 6px;
}
.dept-eyebrow .dept-mode-tag {
  padding: 2px 8px; border-radius: 999px;
  background: var(--accent-pale); border: 1px solid var(--border-accent);
  color: var(--accent-deep);
}
.dept-title {
  margin: 0 0 4px; font-size: 19px; line-height: 1.25;
  font-weight: 800; color: var(--text); overflow-wrap: anywhere;
}
.dept-lead {
  margin: 0; font-size: 14px; line-height: 1.55;
  color: var(--text-dim); overflow-wrap: anywhere;
}
.dept-lead strong { color: var(--text); font-weight: 700; }

/* shared count chips row (all three modes show the department's count) */
.dept-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: var(--space-3) 0 0;
}
.dept-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 12.5px; color: var(--text-dim); white-space: nowrap;
}
.dept-chip b { font-size: 14px; color: var(--text); font-weight: 800; }

/* ---- GUIDED: a short walkthrough — steps + a single next move ---- */
.dept-guided { margin-top: var(--space-4); }
.dept-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 10px;
}
.dept-step {
  display: grid; grid-template-columns: 28px 1fr; gap: 12px;
  align-items: start; min-width: 0;
}
.dept-step-n {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent-pale); border: 1px solid var(--border-accent);
  color: var(--accent-deep); font-weight: 800; font-size: 13px;
  font-family: var(--mono);
}
.dept-step-text {
  font-size: 14px; line-height: 1.5; color: var(--text);
  min-width: 0; overflow-wrap: anywhere;
}
.dept-step-text .dept-step-sub {
  display: block; margin-top: 2px;
  font-size: 12.5px; color: var(--text-dim);
}
.dept-guided-cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: var(--space-4);
  padding: 10px 16px; border-radius: var(--radius-sm);
  background: var(--accent); color: #fff;
  font-size: 13.5px; font-weight: 700; text-decoration: none;
  border: 1px solid var(--accent);
  box-shadow: var(--shadow-teal);
}
.dept-guided-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- VISUAL: the chart is the focus, minimal text ---- */
.dept-visual { margin-top: var(--space-4); }
.dept-bars {
  display: grid; gap: 12px; margin: 0;
}
.dept-bar-row {
  display: grid; grid-template-columns: minmax(96px, 132px) 1fr auto;
  gap: 12px; align-items: center; min-width: 0;
}
.dept-bar-label {
  font-size: 12.5px; color: var(--text-dim);
  min-width: 0; overflow-wrap: anywhere;
}
.dept-bar-track {
  height: 12px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  overflow: hidden; min-width: 0;
}
.dept-bar-fill {
  height: 100%; border-radius: 999px;
  background: var(--accent);
  width: 0;
}
.dept-bar-fill.is-gate { background: var(--gold); }
.dept-bar-fill.is-dim { background: var(--text-dimmer); }
.dept-bar-count {
  font-family: var(--mono); font-size: 12.5px; font-weight: 700;
  color: var(--text); min-width: 1.5em; text-align: right;
}
.dept-visual-note {
  margin: var(--space-4) 0 0; font-size: 12.5px;
  line-height: 1.5; color: var(--text-dim);
}

/* ---- DETAILED: the full table, every column ---- */
.dept-detailed { margin-top: var(--space-4); }
.dept-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dept-table {
  width: 100%; border-collapse: collapse;
  font-size: 12.5px; min-width: 560px;
}
.dept-table caption {
  text-align: left; caption-side: top;
  margin-bottom: 8px; font-size: 12.5px; color: var(--text-dim);
}
.dept-table th, .dept-table td {
  text-align: left; padding: 8px 10px;
  border-bottom: 1px solid var(--border); vertical-align: top;
}
.dept-table th {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-dim); font-weight: 700;
  white-space: nowrap;
}
.dept-table td { color: var(--text); }
.dept-table tbody tr:hover { background: var(--accent-pale); }
.dept-cell-id { font-family: var(--mono); font-size: 11.5px; color: var(--accent-deep); white-space: nowrap; }
.dept-pill {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
  border: 1px solid var(--border);
}
.dept-pill.is-linked   { color: var(--ok); background: var(--ok-wash); border-color: var(--ok); }
.dept-pill.is-reviewed { color: var(--accent-deep); background: var(--accent-pale); border-color: var(--border-accent); }
.dept-pill.is-missing  { color: var(--warn-color); background: var(--warn-wash); border-color: var(--warn-color); }
.dept-pill.is-blocked  { color: var(--gold); background: var(--gold-pale); border-color: var(--gold); }
.dept-detailed-foot {
  margin: var(--space-3) 0 0; font-size: 12px; color: var(--text-dim);
}

/* empty state when a department carries no items */
.dept-empty {
  margin-top: var(--space-3); font-size: 13.5px;
  line-height: 1.55; color: var(--text-dim);
}

@media (prefers-reduced-motion: no-preference) {
  .dept-panel { transition: border-color 0.2s ease; }
  .dept-mode-body { animation: dept-fade 0.34s cubic-bezier(0.18, 0.9, 0.28, 1.05) both; }
  @keyframes dept-fade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .dept-bar-fill { transition: width 0.5s cubic-bezier(0.18, 0.9, 0.28, 1.05); }
  .dept-step { animation: dept-fade 0.4s cubic-bezier(0.18, 0.9, 0.28, 1.05) both; animation-delay: var(--dept-stagger, 0ms); }
}
@media (prefers-reduced-motion: reduce) {
  .dept-mode-body, .dept-step { animation: none; opacity: 1; transform: none; }
  .dept-bar-fill { transition: none; }
}

@media (max-width: 520px) {
  .dept-bar-row { grid-template-columns: 1fr auto; }
  .dept-bar-label { grid-column: 1 / -1; }
}

/* ---- view-mode density on the card grid itself --------------------------
   The mode toggle also changes the card grid below the panel, so the whole
   page reads differently per mode (not only the panel):
     Visual   tighter columns, the result value enlarged, footers hidden.
     Detailed wider single-column rows so every meta line has room.
   Guided keeps the default comfortable grid. Body class set by shell.js. */
body.mode-visual .dash-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
}
body.mode-visual .dash-card-foot { display: none; }
body.mode-visual .dash-card-value { font-size: 40px; }
body.mode-visual .dash-card-meta { font-size: 12px; }

body.mode-detailed .dash-grid { grid-template-columns: 1fr; }
body.mode-detailed .dash-card { max-width: 100%; }
body.mode-detailed .dash-card-meta { font-size: 13.5px; }