/* ============================================================
   docs.css · the DOCUMENTS page for the Halcyon candidate branch.
   ============================================================
   Bring a document in, watch Halcyon pull the fields it can read as pointer
   metadata, edit the record, then send it onward. Six sections, top to
   bottom: connect/import, the import animation, the editable workspace, the
   doc-to-record-flow diagram, publish/export, and versions/compare.

   Every color is a Datum token from halcyon.css, so theme.js flips light and
   dark for free and the trust grammar (.km-agent-work / .km-agent-suggestion
   / .km-human-gate / .km-verified) inherits both grounds at WCAG AA. Text
   always sits in its own card, never over the import art.

   Legibility: AA on the ground, readable measure, no horizontal overflow at
   1280px or 375px — every grid track is minmax(0, …) and content columns are
   min-width:0 so long field values wrap instead of pushing the layout wide.

   MOTION CONTRACT: motion is OFF by default. Every animated thing here lives
   ONLY inside @media (prefers-reduced-motion: no-preference): the import
   sequence (progress fill, boundary sweep, doc travel, field cascade, lock
   pulse, pointer fade), card entrances, the modal slide-up, and the toast.
   Under reduce, docs.js runs the sequence at 0ms and these rules pin every
   element to its final, fully readable, motionless state.
   ============================================================ */

/* ---- section scaffold ---------------------------------------------------- */
.docs-section {
  margin-bottom: var(--space-8);
  min-width: 0;
}
.docs-section-head { margin-bottom: var(--space-5); min-width: 0; }
.docs-section-title {
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 var(--space-2);
}
.docs-section-sub {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-dim);
  margin: 0;
  max-width: 70ch;
}

/* ---- 1 · CONNECT / IMPORT — six source cards ----------------------------- */
.docs-source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
}
.docs-source-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: left;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  min-width: 0;
  box-shadow: var(--shadow-sm);
  font: inherit;
}
.docs-source-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.docs-source-glyph {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  border: 1px solid var(--border-accent);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 13px; font-weight: 700;
  flex: none;
}
.docs-source-ext {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dimmer);
  letter-spacing: 0.04em;
}
.docs-source-ext.is-connector {
  color: var(--accent);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.08em;
}
.docs-source-name { font-size: 14.5px; font-weight: 600; color: var(--text); }
.docs-source-blurb { font-size: 12.5px; line-height: 1.5; color: var(--text-dim); }

/* ---- 2 · IMPORT ANIMATION ------------------------------------------------ */
.docs-import-stage {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 90% at 0% 0%, var(--accent-pale), transparent 55%),
    var(--surface);
  padding: var(--space-6);
  min-height: 132px;
  min-width: 0;
  overflow: hidden;
}
.docs-import-empty {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-dim);
  font-size: 13.5px;
}
.docs-import-empty-ico {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--accent-pale);
  border: 1px solid var(--border-accent);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 14px; font-weight: 700;
  flex: none;
}

/* progress bar */
.docs-import-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
  border: 1px solid var(--border-soft);
}
.docs-import-bar {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-bright), var(--accent-deep));
}

/* boundary track: doc icon on the left, a line, a wall on the right */
.docs-import-track {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  min-width: 0;
}
.docs-import-doc {
  flex: none;
  width: 42px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border-accent);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 10px; font-weight: 700;
}
.docs-import-line {
  position: relative;
  flex: 1 1 auto;
  height: 3px;
  border-radius: 999px;
  background: var(--surface-2);
  min-width: 0;
}
.docs-import-line-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--gold));
}
.docs-import-wall {
  flex: none;
  color: var(--gold);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
}

/* field cascade chips */
.docs-import-cascade {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
  min-height: 0;
}
.docs-cascade-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--border-accent);
  opacity: 1;
}
.docs-cascade-chip.is-suggested {
  border-style: dashed;
  background: var(--accent-pale);
}

/* lock badge + pointer reference line */
.docs-import-lock { margin-top: var(--space-5); }
.docs-import-pointer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-soft);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-dim);
  min-width: 0;
}
.docs-pointer-key {
  color: var(--accent-deep);
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
}
.docs-pointer-hash { color: var(--accent); word-break: break-all; }
.docs-pointer-when { color: var(--text-dim); }
.docs-pointer-sep { color: var(--text-dimmer); }

/* ---- 3 · WORKSPACE — editable field cards -------------------------------- */
.docs-workspace-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-3);
  font-size: 12.5px;
  color: var(--text-dim);
  min-width: 0;
}
.docs-ws-file { font-weight: 600; color: var(--text); }
.docs-ws-dot { color: var(--text-dimmer); }
.docs-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
  align-items: start;
}
.docs-field-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.docs-field-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.docs-field-handle {
  flex: none;
  color: var(--text-dimmer);
  font-family: var(--mono);
  cursor: grab;
  letter-spacing: -1px;
  font-size: 14px;
  user-select: none;
}
.docs-field-label {
  flex: 1 1 auto;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.docs-field-remove {
  flex: none;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 16px; line-height: 1;
  cursor: pointer;
}
.docs-field-remove:hover { color: var(--gold); border-color: var(--gold); }
.docs-field-value {
  text-align: left;
  width: 100%;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  padding: var(--space-3);
  font: inherit;
  font-size: 13.5px;
  line-height: 1.55;
  cursor: text;
  min-width: 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.docs-field-value:hover { border-color: var(--border-accent); }
.docs-field-edit {
  width: 100%;
  min-height: 76px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  padding: var(--space-3);
  font: inherit;
  font-size: 13.5px;
  line-height: 1.55;
  resize: vertical;
  box-shadow: 0 0 0 3px var(--accent-pale);
}
.docs-empty-coach { margin-top: var(--space-2); }

/* ---- 4 · DOC-TO-RECORD-FLOW DIAGRAM -------------------------------------- */
.docs-flow-diagram {
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  min-width: 0;
}
.docs-flow-node {
  flex: 1 1 180px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  cursor: default;
  min-width: 0;
}
.docs-flow-node:hover,
.docs-flow-node:focus-visible {
  border-color: var(--gold);
  outline: none;
  box-shadow: 0 0 0 1px var(--gold);
}
.docs-flow-dot {
  flex: none;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 12px; font-weight: 700;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
}
.docs-flow-node.is-work .docs-flow-dot {
  color: var(--accent); background: var(--accent-soft); border-color: var(--border-accent);
}
.docs-flow-node.is-gate { border-left: 3px solid var(--accent-bright); }
.docs-flow-node.is-gate .docs-flow-dot {
  color: var(--accent-deep); background: var(--accent-soft); border-color: var(--accent-bright);
}
.docs-flow-node.is-human { border-left: 3px solid var(--gold); }
.docs-flow-node.is-human .docs-flow-dot {
  color: var(--gold); background: var(--gold-soft); border-color: var(--gold);
}
.docs-flow-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.docs-flow-label { font-size: 13.5px; font-weight: 600; color: var(--text); }
.docs-flow-sub { font-size: 11.5px; color: var(--text-dim); }
.docs-flow-arrow {
  display: flex; align-items: center;
  color: var(--text-dimmer);
  font-size: 16px;
  flex: none;
}
.docs-flow-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-4);
  font-size: 12px;
  color: var(--text-dim);
}
.docs-flow-legend span { display: inline-flex; align-items: center; gap: var(--space-2); }
.docs-flow-swatch {
  width: 12px; height: 12px; border-radius: 3px; flex: none;
}
.docs-flow-swatch.is-work { background: var(--accent); }
.docs-flow-swatch.is-gate { background: var(--accent-bright); }
.docs-flow-swatch.is-human { background: var(--gold); }

/* ---- 5 · PUBLISH / EXPORT ------------------------------------------------ */
.docs-export-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-4);
}
.docs-export-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.docs-export-head { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.docs-export-glyph {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 11px; font-weight: 700;
  flex: none;
}
.docs-export-name { font-size: 14px; font-weight: 600; color: var(--text); min-width: 0; }
.docs-export-result { font-size: 12.5px; line-height: 1.5; color: var(--text-dim); margin: 0; flex: 1 1 auto; }
.docs-export-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
  opacity: 0;
}
.docs-export-progress-fill {
  display: block; height: 100%; width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-bright), var(--accent-deep));
}
.docs-export-card.is-running .docs-export-progress { opacity: 1; }
.docs-export-card.is-done { border-color: var(--ok); }

/* ---- 6 · VERSIONS / COMPARE ---------------------------------------------- */
.docs-version-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.docs-version-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  min-width: 0;
  flex-wrap: wrap;
}
.docs-version-item.is-canonical { border-left: 3px solid var(--gold); }
.docs-version-dot {
  flex: none;
  width: 12px; height: 12px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 2px solid var(--border-accent);
}
.docs-version-item.is-canonical .docs-version-dot { background: var(--gold-soft); border-color: var(--gold); }
.docs-version-body { flex: 1 1 240px; min-width: 0; }
.docs-version-top { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.docs-version-file { font-size: 13.5px; font-weight: 600; color: var(--text); word-break: break-word; }
.docs-version-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  margin-top: var(--space-2);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  min-width: 0;
}
.docs-version-hash { color: var(--accent); word-break: break-all; }
.docs-version-actions {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  flex: none;
}
.docs-version-cmp { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); cursor: pointer; }
.docs-version-cmp-text { user-select: none; }

/* ---- buttons (shared) ---------------------------------------------------- */
.docs-btn {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
}
.docs-btn.primary {
  background: var(--accent-bright);
  border-color: var(--accent-bright);
  color: #07232B;
}
.docs-btn.primary:disabled { opacity: 0.45; cursor: not-allowed; }
.docs-btn.primary.is-link { background: var(--gold); border-color: var(--gold); color: #2A1B05; }
.docs-btn.ghost { background: transparent; color: var(--text-dim); }
.docs-mini-btn {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-dim);
  cursor: pointer;
}
.docs-mini-btn:hover:not(:disabled) { border-color: var(--border-accent); color: var(--accent); }
.docs-mini-btn.is-strong:not(:disabled) { color: var(--gold); border-color: var(--gold); }
.docs-mini-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---- modals -------------------------------------------------------------- */
.docs-dialog-scrim {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(7, 9, 12, 0.62);
  opacity: 0;
}
/* When hidden the scrim must be fully gone. Without this, display:flex above
   overrides the [hidden] attribute, leaving an invisible full-screen overlay
   that swallows every click on the rail and the page (the founder 2026-06-14). */
.docs-dialog-scrim[hidden] { display: none; }
.docs-dialog-scrim.is-open { opacity: 1; }
.docs-dialog {
  position: relative;
  width: min(520px, 100%);
  max-height: calc(100vh - 2 * var(--space-4));
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6);
  min-width: 0;
}
.docs-dialog-wide { width: min(760px, 100%); }
.docs-dialog-close {
  position: absolute;
  top: var(--space-3); right: var(--space-3);
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 20px; line-height: 1;
  cursor: pointer;
}
.docs-dialog-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.docs-dialog-title { font-size: 18px; font-weight: 650; color: var(--text); margin: var(--space-2) 0; }
.docs-dialog-sub { font-size: 13px; line-height: 1.55; color: var(--text-dim); margin: 0 0 var(--space-5); }

/* mock file drop */
.docs-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-6);
  border: 1.5px dashed var(--border-accent);
  border-radius: var(--radius);
  background: var(--accent-pale);
  cursor: pointer;
  position: relative;
}
.docs-drop-ico {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--border-accent);
  color: var(--accent);
  font-size: 22px; font-weight: 700;
}
.docs-drop-title { font-size: 14px; font-weight: 600; color: var(--text); word-break: break-word; }
.docs-drop-sub { font-size: 11.5px; color: var(--text-dim); }
.docs-file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* field preview (checkbox list) */
.docs-modal-preview { margin-top: var(--space-5); }
.docs-modal-preview-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.docs-modal-preview-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); }
.docs-preview-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); max-height: 280px; overflow-y: auto; }
.docs-preview-item {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  min-width: 0;
}
.docs-preview-label { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; min-width: 0; }
.docs-preview-cb { flex: none; width: 16px; height: 16px; accent-color: var(--accent-bright); }
.docs-preview-text { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-width: 0; }
.docs-preview-name { font-size: 13px; font-weight: 600; color: var(--text); }
.docs-preview-value { font-size: 12px; color: var(--text-dim); line-height: 1.5; padding-left: 24px; word-break: break-word; }

.docs-dialog-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3);
  margin-top: var(--space-6);
  flex-wrap: wrap;
}
.docs-diff-count { margin-right: auto; }

/* diff grid: three columns (field, A, B) */
.docs-diff {
  display: grid;
  grid-template-columns: minmax(90px, 0.8fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 1px;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-top: var(--space-3);
}
.docs-diff-h {
  background: var(--surface-2);
  padding: var(--space-3);
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-dim);
  font-family: var(--mono);
}
.docs-diff-label, .docs-diff-val {
  background: var(--surface);
  padding: var(--space-3);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text);
  min-width: 0;
  word-break: break-word;
}
.docs-diff-label { color: var(--text-dim); font-weight: 600; }
.docs-diff-label.is-changed { color: var(--gold); }
.docs-diff-val.is-changed { background: var(--gold-pale); color: var(--gold-deep); }

/* toast */
.docs-toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-6);
  transform: translateX(-50%);
  z-index: 90;
  max-width: min(460px, calc(100vw - 2 * var(--space-4)));
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--border-accent);
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  opacity: 0;
}
.docs-toast.is-show { opacity: 1; }

/* ---- responsive: stack the flow + tighten cards at small widths ---------- */
@media (max-width: 720px) {
  .docs-flow-arrow { transform: rotate(90deg); width: 100%; justify-content: center; }
  .docs-flow-node { flex: 1 1 100%; }
  .docs-version-item { flex-direction: column; }
  .docs-version-actions { width: 100%; }
}
@media (max-width: 420px) {
  .docs-source-grid,
  .docs-fields,
  .docs-export-grid { grid-template-columns: minmax(0, 1fr); }
  .docs-diff { grid-template-columns: minmax(0, 1fr); }
  .docs-diff-h:first-child { display: none; }
}

/* ============================================================
   MOTION LAYER — the ONLY place anything animates. Everything above
   is the still, final, readable state; these rules add movement only
   when the reader has not asked to reduce motion.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  /* source cards lift on hover */
  .docs-source-card {
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
  }
  .docs-source-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-accent);
    box-shadow: var(--shadow);
  }

  /* import sequence: progress + boundary sweep are width transitions docs.js drives */
  .docs-import-bar { transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
  .docs-import-line-fill { transition: width 0.62s cubic-bezier(0.4, 0, 0.2, 1); }
  .docs-import-doc { transition: transform 0.62s cubic-bezier(0.4, 0, 0.2, 1); }
  .docs-import-doc.is-travel { transform: translateX(min(60vw, 320px)); }

  /* field cascade: each chip eases up, staggered by its --i index */
  .docs-cascade-chip {
    opacity: 0;
    transform: translateY(8px);
    animation: docs-chip-in 0.34s ease forwards;
    animation-delay: calc(var(--i, 0) * 100ms);
  }
  @keyframes docs-chip-in { to { opacity: 1; transform: translateY(0); } }

  /* lock badge pulses once when it appears */
  .docs-import-lock.is-pulse .docs-lock-badge {
    animation: docs-lock-pulse 0.7s ease;
  }
  @keyframes docs-lock-pulse {
    0% { transform: scale(0.92); opacity: 0; }
    45% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
  }

  /* pointer line fades up */
  .docs-import-pointer { animation: docs-fade-up 0.4s ease; }
  @keyframes docs-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

  /* field cards: a removed card fades + collapses */
  .docs-field-card { transition: opacity 0.24s ease, transform 0.24s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
  .docs-field-card.is-removing { opacity: 0; transform: scale(0.96); }
  .docs-field-card.is-dragging { opacity: 0.6; }
  .docs-field-card.is-drop-target { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-pale); }

  /* export progress + done check */
  .docs-export-card.is-running .docs-export-progress-fill {
    width: 100%;
    transition: width 1.5s linear;
  }

  /* modal slide-up */
  .docs-dialog-scrim { transition: opacity 0.2s ease; }
  .docs-dialog { transform: translateY(14px); transition: transform 0.24s cubic-bezier(0.2, 0, 0.2, 1); }
  .docs-dialog-scrim.is-open .docs-dialog { transform: translateY(0); }

  /* toast slide-up */
  .docs-toast { transition: opacity 0.24s ease, transform 0.24s ease; transform: translateX(-50%) translateY(10px); }
  .docs-toast.is-show { transform: translateX(-50%) translateY(0); }
}

/* reduced motion: pin every animated thing to its final, readable state */
@media (prefers-reduced-motion: reduce) {
  .docs-import-bar { width: 100%; }
  .docs-import-doc.is-travel { transform: none; }
  .docs-cascade-chip { opacity: 1; transform: none; animation: none; }
  .docs-import-lock.is-pulse .docs-lock-badge { animation: none; }
  .docs-import-pointer { animation: none; }
  .docs-field-card.is-removing { opacity: 1; transform: none; }
  .docs-dialog { transform: none; }
  .docs-toast { transform: translateX(-50%); }
}

/* ============================================================
   DEPARTMENT DOCUMENTS 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 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 18px;
  padding: 18px 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.dept-panel:empty { display: none; }
.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; }
.dept-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 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(--line);
  font-size: 12.5px; color: var(--text-dim); white-space: nowrap;
}
.dept-chip b { font-size: 14px; color: var(--text); font-weight: 800; }
.dept-guided { margin-top: 16px; }
.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: 16px; 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; }
.dept-visual { margin-top: 16px; }
.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(--line);
  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: 16px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-dim); }
.dept-detailed { margin-top: 16px; }
.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(--line); 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(--line);
}
.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: 12px 0 0; font-size: 12px; color: var(--text-dim); }
.dept-empty { margin-top: 12px; 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 documents page itself ---------------------
   The mode toggle changes the workspace below the panel too:
     Visual   the import-stage diagram + flow diagram lead, the long version
              history collapses so the picture is the focus.
     Detailed every section is open and roomy, the field cards stack so each
              value has full width to read.
   Guided keeps the default sectioned reading layout. Body class set by
   shell.js. Each holds inside its width, no horizontal overflow. */
body.mode-visual .docs-versions { display: none; }
body.mode-visual .docs-fields { grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); }
body.mode-detailed .docs-fields { grid-template-columns: 1fr; }
body.mode-detailed .docs-field-card { max-width: 100%; }