/* Settings > Document types - destination-local atoms, namespace th-dt-*. Lifts into
   src/Advant.Crossroads.Threshold/wwwroot/css/threshold-document-types.css, loaded after
   threshold-operational-components.css and th-grid.css. Every colour is a shipped --th-* token;
   literals are sizes and radii only. Everything else on the page is shipped: the cc-page head,
   ThresholdGrid (th-grid-*, expand-primary), the All Files filter chip (af-chip-*), th-field /
   th-input / th-textarea, th-banner, th-denied and the shared ThresholdDialog (th-modal, th-fb).

   The page root is a size container, so the narrow reflow below follows the pane, not the
   viewport (the house pattern of th-route-page). Threshold is designed down to tablet width;
   below 720px the page only reflows. */

.th-dt-page { container-type: inline-size; container-name: th-dt; position: relative; }

/* Head: the shipped cc-page-head, with the one-line purpose under the title. */
.th-dt-sub { margin-top: 4px; max-width: 72ch; font-size: var(--th-size-13); line-height: 1.5; color: var(--th-ink-3); text-wrap: pretty; }
.th-dt-nowrap { white-space: nowrap; }
.th-dt-gutter { padding: 0 24px 28px; display: flex; flex-direction: column; gap: 12px; }

/* Name cell: the grid lead, with the built-in badge on the primary line. */
.th-dt-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.th-dt-name .pri { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-dt-badge {
  flex: none;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 16px;
  padding: 0 6px;
  border-radius: var(--th-radius-pill);
  border: 1px solid var(--th-line-2);
  background: var(--th-paper-2);
  color: var(--th-ink-2);
}

/* Used in: a count sentence; muted when nothing names the type. */
.th-dt-used { color: var(--th-ink-2); }
.th-dt-used.is-none { color: var(--th-ink-3); }
.th-dt-updated { color: var(--th-ink-3); font-size: var(--th-size-12); white-space: nowrap; }

/* ---- Inline detail (inside .th-grid-detail) ---------------------- */
.th-dt-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 28px; }
.th-dt-fields { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.th-dt-fields .th-input, .th-dt-fields .th-textarea { width: 100%; box-sizing: border-box; }
.th-dt-opt { font-weight: 400; color: var(--th-ink-3); margin-left: 4px; }
.th-dt-keyval {
  display: block;
  font-family: var(--th-font-mono);
  font-size: var(--th-size-13);
  color: var(--th-ink);
  padding: 6px 10px;
  border: 1px dashed var(--th-line-2);
  border-radius: var(--th-radius-3);
  background: var(--th-paper);
  overflow-wrap: anywhere;
}
.th-dt-readval { font-size: var(--th-size-13); color: var(--th-ink); line-height: 1.5; overflow-wrap: anywhere; }
.th-dt-readval.is-empty { color: var(--th-ink-3); }

.th-dt-builtin { font-size: var(--th-size-12); color: var(--th-ink-2); line-height: 1.5; }

.th-dt-usedin { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.th-dt-usedin-head { font-size: 12px; font-weight: 600; color: var(--th-ink); }
.th-dt-usedin-def { display: flex; flex-direction: column; gap: 3px; }
.th-dt-usedin-defname { font-size: 11.5px; color: var(--th-ink-3); }
.th-dt-usedin-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.th-dt-usedin-list li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; font-size: var(--th-size-13); color: var(--th-ink); }
.th-dt-usedin-kind { font-size: 11.5px; color: var(--th-ink-3); }
.th-dt-usedin-none { font-size: var(--th-size-13); color: var(--th-ink-3); }
.th-dt-usedin-note { font-size: 11.5px; line-height: 1.5; color: var(--th-ink-2); text-wrap: pretty; }
.th-dt-usedin-fail { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: var(--th-size-13); color: var(--th-ink-2); }
.th-dt-usedin-fail svg { width: 14px; height: 14px; color: var(--th-warn-ink); flex: none; }

.th-dt-meta { grid-column: 1 / -1; font-size: 11.5px; color: var(--th-ink-3); }
.th-dt-notice { grid-column: 1 / -1; }
.th-dt-acts { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 2px; }
.th-dt-acts .spacer { flex: 1; }

/* The archived row reads quieter; its name keeps full ink so it stays findable. */
.th-grid tr.th-dt-row-archived td { color: var(--th-ink-2); }

/* ---- Seeds-only hint above the grid ------------------------------ */
.th-dt-start { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 10px 12px; border: 1px dashed var(--th-line-2); border-radius: var(--th-radius-5); background: var(--th-paper-sunk); font-size: var(--th-size-13); color: var(--th-ink-2); }
.th-dt-start .t { flex: 1 1 320px; line-height: 1.5; }

/* ---- Load failure above loaded rows (Teams' pattern) ------------- */
.th-dt-load-error { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 9px 12px; border: 1px solid var(--th-warn); border-radius: var(--th-radius-5); background: var(--th-warn-soft); color: var(--th-warn-ink); font-size: var(--th-size-13); }
.th-dt-load-error svg { flex: none; }
.th-dt-load-error__text { flex: 1 1 260px; }

/* ---- New document type dialog ------------------------------------ */
.th-dt-form { display: flex; flex-direction: column; gap: 12px; }
.th-dt-form .th-input, .th-dt-form .th-textarea { width: 100%; box-sizing: border-box; }
.th-dt-form .th-input.is-key { font-family: var(--th-font-mono); }
.th-dt-form-note { font-size: 11.5px; color: var(--th-ink-2); line-height: 1.5; }
.th-dt-keyaction { display: flex; }

/* Focus, for keyboard users: the shipped ring. [tabindex] covers a value focused by script, such as the
   first value a viewer's open row moves focus to, which would otherwise take the browser's own ring. */
.th-dt-page :where(button, a, input, textarea, select, [tabindex]):focus-visible { outline: 2px solid var(--th-advant); outline-offset: 2px; }

/* ---- Narrow reflow (the pane, below tablet width) ---------------- */
@container th-dt (max-width: 720px) {
  .th-dt-gutter { padding: 0 16px 24px; }
  /* Key and Updated step out of the row (both stay in the open row's detail); the grid keeps its
     own horizontal scroll as a last resort, so the page itself never scrolls sideways. */
  .th-dt-c-key, .th-dt-c-updated { display: none; }
  .th-dt-page .th-grid-wrap { overflow-x: auto; }
  .th-dt-detail { grid-template-columns: minmax(0, 1fr); }
  .th-dt-usedin-list li { grid-template-columns: 84px minmax(0, 1fr); }
}