/* documents.css — docs-kg lane (2026-10-13)
   Documents library: one intake surface, dense table, preview pane.
   Follows design/DESIGN_DIRECTION.md: neutral surfaces, one accent, no
   gradients / glows / coloured left borders, segmented filters, tabular
   numerals, 150–200ms motion, stacked rows at ≤768px.
   Only existing tokens from css/styles.css + design/brand.css are used. */

#module-documents {
  --docs-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --docs-dur: 180ms;
  --docs-row-h: 44px;
}

#module-documents .docs-num,
#module-documents .docs-td.docs-num,
#module-documents .docs-seg-n {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ── one upload surface ─────────────────────────────────────────────────── */
#module-documents .docs-intake-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card-bg);
}
#module-documents .docs-intake-panel.has-docs {
  padding: var(--space-2);
  background: transparent;
  border-style: dashed;
}
/* The shared intake component (css/intake.css, another lane's file) paints a
   gradient, an inset ring and a glow on its drop zone. The design direction
   bans those in areas this lane touches, so they are neutralised here by
   scope rather than by editing the shared component. The zone is also a
   secondary affordance once the library has rows, so it gets compact. */
#module-documents .docs-intake-panel .cbss-intake-drop {
  background: var(--bg-input);
  box-shadow: none;
}
#module-documents .docs-intake-panel .cbss-intake-drop::before { content: none; }
#module-documents .docs-intake-panel .cbss-intake-drop.is-over,
#module-documents .docs-intake-panel .cbss-intake-drop:focus-within {
  background: var(--bg-hover);
  border-color: var(--accent);
  box-shadow: none;
}
#module-documents .docs-intake-panel.has-docs .cbss-intake-drop {
  min-height: 0;
  padding: 10px 12px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
#module-documents .docs-intake-panel.has-docs .cbss-intake-lead strong { font-size: var(--fs-sm); }
#module-documents .docs-intake-panel.has-docs .cbss-intake-lead span { font-size: 11px; }
#module-documents .docs-intake-panel.has-docs .cbss-intake-browse { min-height: 32px; }
#module-documents .docs-empty {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 62ch;
}
#module-documents .docs-empty[hidden] { display: none; }
#module-documents .docs-empty-title {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
#module-documents .docs-empty-lead,
#module-documents .docs-empty-note {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-secondary);
}
#module-documents .docs-empty-note { color: var(--text-muted); }
#module-documents .docs-empty-examples {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
/* One upload surface: the empty panel's primary action and the sealed intake
   drop zone run the same pipeline, so only the drop zone's own browse button
   is shown and the duplicate panel CTA stays in the DOM for the keyboard path
   without painting a second competing button. */
#module-documents .docs-empty .docs-btn-primary {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
#module-documents .docs-empty .docs-btn-primary:focus-visible {
  position: static;
  width: auto; height: auto;
  margin: 0; clip: auto;
  min-height: 44px;
}
#module-documents .docs-btn-primary {
  align-self: flex-start;
  min-height: 44px;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
  font-weight: 500;
}
#module-documents .docs-btn-primary:hover { filter: brightness(1.06); }
#module-documents .docs-btn-secondary {
  min-height: 44px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  color: var(--text-primary);
}
/* `.sr-only` has no global definition in css/styles.css (only `.login-sr-only`
   and a KG-scoped copy in css/graph.css exist), so every screen-reader label
   in this module rendered visibly and collided with the real cells. Scoped
   here rather than globally: the shell lane owns css/styles.css. */
#module-documents .docs-mirror,
#module-documents .sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ── toolbar: segmented filters, not chip clouds ────────────────────────── */
#module-documents .docs-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-4) 0 var(--space-3);
}
#module-documents .docs-toolbar[hidden] { display: none; }
#module-documents .docs-toolbar-search {
  min-width: 200px;
  height: 32px;
  font-size: var(--fs-sm);
}
#module-documents .docs-toolbar-select {
  height: 32px;
  font-size: var(--fs-sm);
  padding: 0 var(--space-2);
}
#module-documents .docs-toolbar-field { display: inline-flex; }
#module-documents .docs-toolbar-spacer { flex: 1 1 auto; }
#module-documents .docs-seg {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
}
#module-documents .docs-seg-btn {
  min-height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background var(--docs-dur) var(--docs-ease),
              color var(--docs-dur) var(--docs-ease);
}
#module-documents .docs-seg-btn[aria-checked="true"] {
  background: var(--bg-hover);
  color: var(--text-primary);
  font-weight: 500;
}
#module-documents .docs-seg-btn:focus-visible,
#module-documents .docs-toolbar-search:focus-visible,
#module-documents .docs-toolbar-select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
#module-documents .docs-seg-n { color: var(--text-muted); font-size: 11px; }

/* ── table + preview split ──────────────────────────────────────────────── */
#module-documents .docs-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-3);
  align-items: start;
}
#module-documents .docs-table {
  container-type: inline-size;
  container-name: docstable;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  overflow: hidden;
}
/* Measured 2026-10-14: inside the split the table gets ~536px at 1440px wide,
   so fixed pixel columns starved the name cell to 0px and the action cell to
   10px, and the cells painted on top of each other. Every column after the
   name is now a minmax() share of the row, and the mid columns drop out as the
   row narrows instead of collapsing the ones that carry the identity. */
#module-documents .docs-tr,
#module-documents .doc-item {
  display: grid;
  grid-template-columns:
    28px
    minmax(96px, 1fr)
    minmax(56px, 0.42fr)
    minmax(48px, 0.3fr)
    minmax(78px, 0.6fr)
    minmax(86px, 0.62fr)
    minmax(168px, auto);
  align-items: center;
  gap: 6px;
  padding: 0 10px;
}
@media (min-width: 1680px) {
  #module-documents .docs-split { grid-template-columns: minmax(0, 1fr) 360px; }
}
/* Below ~1180px the preview stacks under the table so the row keeps its
   columns instead of compressing them away. */
@media (max-width: 1180px) {
  #module-documents .docs-split { grid-template-columns: minmax(0, 1fr); }
  #module-documents .docs-preview { position: static; }
}
/* The row responds to the TABLE width, not the viewport: with the preview pane
   open the table is ~560px at 1440px wide, which is too tight for 7 columns.
   Project and size are the first to go — both are repeated in the preview. */
@container docstable (max-width: 700px) {
  #module-documents .docs-tr,
  #module-documents .doc-item {
    grid-template-columns:
      28px minmax(96px, 1fr) minmax(74px, 0.52fr) minmax(86px, 0.6fr) minmax(168px, auto);
  }
  #module-documents .docs-c-proj,
  #module-documents .docs-c-size { display: none; }
}
@container docstable (max-width: 520px) {
  #module-documents .docs-tr,
  #module-documents .doc-item {
    grid-template-columns: 28px minmax(90px, 1fr) minmax(86px, 0.62fr) minmax(168px, auto);
  }
  #module-documents .docs-c-date { display: none; }
}
#module-documents .docs-th-row {
  min-height: 32px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-input);
}
#module-documents .docs-th {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
#module-documents .doc-list { display: block; gap: 0; }
#module-documents .doc-item {
  min-height: var(--docs-row-h);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  transition: background var(--docs-dur) var(--docs-ease);
}
#module-documents .doc-item:last-child { border-bottom: 0; }
#module-documents .doc-item:hover { background: var(--bg-hover); }
#module-documents .doc-item.is-selected { background: var(--bg-hover); }
/* Until the shell lane ships html[data-lang], both language spans are visible,
   so cells must clip rather than wrap into each other. */
#module-documents .docs-td {
  min-width: 0;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#module-documents .docs-th { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#module-documents .docs-c-name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
#module-documents .docs-type-mark,
#module-documents .docs-type-pill {
  flex: 0 0 auto;
  min-width: 34px;
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--text-muted);
}
#module-documents .docs-name-wrap { min-width: 0; display: flex; flex-direction: column; }
#module-documents .doc-name {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#module-documents .doc-meta {
  display: flex;
  gap: 8px;
  margin-top: 0;
  font-size: 11px;
  color: var(--text-muted);
}
#module-documents .doc-meta:empty { display: none; }
/* The chip keeps the legacy `.doc-status` class so status gates still match it;
   that class carries tinted backgrounds in css/styles.css. Neutralise them here
   so the row stays a calm outline chip. */
#module-documents .docs-chip.doc-status,
#module-documents .docs-chip.doc-status.pending,
#module-documents .docs-chip.doc-status.approved,
#module-documents .docs-chip.doc-status.rejected,
#module-documents .docs-chip.doc-status.in-review { background: transparent; }
#module-documents .docs-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-height: 20px;
  padding: 1px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: transparent;
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-secondary);
}
#module-documents .docs-chip-review,
#module-documents .docs-chip-running,
#module-documents .docs-chip-queued { color: var(--orange); border-color: color-mix(in srgb, var(--orange) 40%, var(--border)); }
#module-documents .docs-chip-accepted { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, var(--border)); }
#module-documents .docs-chip-failed,
#module-documents .docs-chip-rejected { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, var(--border)); }
#module-documents .docs-c-act {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  overflow: visible;
}
#module-documents .docs-c-act .btn-icon {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 0 7px;
  font-size: 11px;
  line-height: 1.1;
  white-space: nowrap;
}
/* The ghost actions only appear on the focused or hovered row; at this density
   three labelled buttons per row is noise. */
/* Opacity, not display: the buttons stay in the tab order and clickable
   (scripts/test_document_annotations_browser.py presses the row's Notes), and
   the cell width does not jump when a row is hovered. */
#module-documents .docs-row-ghost {
  opacity: 0;
  transition: opacity var(--docs-dur) var(--docs-ease);
}
#module-documents .doc-item:hover .docs-row-ghost,
#module-documents .doc-item:focus-within .docs-row-ghost,
#module-documents .doc-item.is-selected .docs-row-ghost,
#module-documents .docs-row-ghost:focus-visible { opacity: 1; }
@media (hover: none) {
  #module-documents .docs-row-ghost { opacity: 1; }
}
#module-documents .docs-row-ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
}
#module-documents .doc-item:hover .docs-row-ghost,
#module-documents .doc-item.is-selected .docs-row-ghost { border-color: var(--border); color: var(--text-secondary); }
#module-documents .docs-nomatch {
  margin: 0;
  padding: var(--space-5) var(--space-4);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-align: center;
}
#module-documents .docs-nomatch[hidden] { display: none; }

/* ── preview pane ───────────────────────────────────────────────────────── */
#module-documents .docs-preview {
  position: sticky;
  top: var(--space-3);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  overflow: hidden;
}
#module-documents .docs-preview-media {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 132px;
  padding: var(--space-3);
  border-bottom: 1px solid var(--border);
  background: var(--bg-input);
}
#module-documents .docs-preview-img {
  max-width: 100%;
  max-height: 220px;
  object-fit: contain;
  border-radius: var(--radius-sm);
}
#module-documents .docs-preview-text {
  margin: 0;
  max-height: 200px;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}
#module-documents .docs-preview-open {
  align-self: flex-start;
  font-size: var(--fs-sm);
  color: var(--accent);
}
#module-documents .docs-skel {
  height: 108px;
  border-radius: var(--radius-sm);
  background: var(--bg-hover);
  animation: docs-skel 1.2s var(--docs-ease) infinite;
}
#module-documents .docs-preview-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
}
#module-documents .docs-preview-title {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
}
#module-documents .docs-preview-chips { display: flex; gap: 6px; align-items: center; }
#module-documents .docs-preview-meta { display: flex; flex-direction: column; gap: 2px; }
#module-documents .docs-preview-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-sm);
}
#module-documents .docs-preview-row > span:first-child { color: var(--text-muted); }
#module-documents .docs-preview-row > span:last-child { color: var(--text-primary); font-variant-numeric: tabular-nums; }
#module-documents .docs-preview-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}
#module-documents .docs-preview-summary p { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--text-secondary); }
#module-documents .docs-preview-summary p[lang="zh"] { font-family: var(--font-cn); }
#module-documents .docs-preview-k { color: var(--text-muted); font-size: 11px; }
#module-documents .docs-preview-muted,
#module-documents .docs-preview-idle {
  margin: 0;
  padding: var(--space-4) var(--space-3);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-normal);
}
#module-documents .docs-preview-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

@keyframes docs-skel {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.9; }
}

/* ── mobile: stacked rows, no horizontal overflow ───────────────────────── */
@media (max-width: 768px) {
  #module-documents .docs-split { grid-template-columns: minmax(0, 1fr); }
  #module-documents .docs-preview { position: static; }
  #module-documents .docs-th-row { display: none; }
  #module-documents .docs-tr,
  #module-documents .doc-item {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    grid-template-areas: "mark name status" "mark meta act";
    row-gap: 4px;
    padding: var(--space-2) var(--space-3);
  }
  #module-documents .docs-c-sel { grid-area: mark; }
  #module-documents .docs-c-name { grid-area: name; }
  #module-documents .docs-c-status { grid-area: status; justify-self: end; }
  #module-documents .docs-c-act { grid-area: act; }
  #module-documents .docs-c-proj,
  #module-documents .docs-c-size { display: none; }
  #module-documents .docs-c-date {
    grid-area: meta;
    font-size: 11px;
    color: var(--text-muted);
  }
  #module-documents .docs-toolbar-search,
  #module-documents .docs-toolbar-select { min-height: 44px; height: 44px; }
  #module-documents .docs-seg { width: 100%; overflow-x: auto; scrollbar-width: none; }
  #module-documents .docs-seg-btn { min-height: 40px; flex: 0 0 auto; white-space: nowrap; }
  #module-documents .docs-intake-panel.has-docs .cbss-intake-drop { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  #module-documents { --docs-dur: 0ms; --docs-ease: linear; }
  #module-documents .doc-item,
  #module-documents .docs-seg-btn { transition: none; }
  #module-documents .docs-skel { animation: none; }
}