/* hub-documents-home.css — owned by P27 (Documents destination).
   Scope: the Documents destination every notary sees.
   Created empty by P00 (2026-10-11) so the cascade order is fixed before any
   rule lands: styles.css → primary-hub.css → primary-hub-day.css →
   notary-howto.css → hub-*.css → client-*.css, all before action-controls.css.
   new-sheets-tokens.test.mjs holds this sheet to tokens only: no literal colour,
   no off-scale px spacing, no px font-size, and every selector has a consumer. */

/* The destination: a toolbar that wraps, then the facts. No fixed widths —
   every track is fluid so 320 px and 1440 px read the same list. */
.hub-docs { display: grid; min-width: 0; gap: var(--space-8); }
.hub-docs-toolbar { display: flex; flex-wrap: wrap; min-width: 0; align-items: flex-end; gap: var(--space-4) var(--space-8); }
.hub-docs-field { display: grid; flex: 1 1 calc(var(--control-height) * 5); min-width: 0; gap: var(--space-4); }
.hub-docs-field > label { color: var(--ink); font-weight: 600; }
.hub-docs-field :is(input, select) { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; min-height: var(--control-height); font: inherit; font-size: var(--type-body); color: var(--ink); }
.hub-docs-field input:not([type='file']) { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4) var(--space-6); }
.hub-docs-field :is(input, select):focus-visible { outline: var(--space-1) solid var(--ring); outline-offset: var(--space-2); }
.hub-docs-actions { display: flex; flex-wrap: wrap; min-width: 0; gap: var(--space-4) var(--space-8); }
.hub-docs-actions:empty, .hub-docs-more:empty { display: none; }
.hub-docs-actions .btn, .hub-docs-more .btn, .hub-docs-tools .btn, .hub-docs-pending-item > .btn { min-height: var(--control-height); max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.hub-docs-status { margin: 0; color: var(--ink-muted); }
.hub-docs-message { margin: 0; color: var(--ink-muted); overflow-wrap: anywhere; }
.hub-docs-message-error { color: var(--danger); }
.hub-docs-h { margin: 0 0 var(--space-4); font-size: var(--type-h4); line-height: var(--type-h4-lh); }
.hub-docs-help { margin: 0; color: var(--ink-muted); }
.hub-docs-pending, .hub-docs-closed { min-width: 0; padding: var(--space-8); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-inset); }
.hub-docs-pending-list, .hub-docs-list, .hub-docs-trail, .hub-docs-pieces { display: grid; min-width: 0; margin: 0; padding: 0; list-style: none; }
.hub-docs-pending-list { gap: var(--space-8); }
.hub-docs-pending-item { display: grid; min-width: 0; gap: var(--space-4); justify-items: start; }
.hub-docs-pieces { gap: var(--space-2); padding-inline-start: var(--space-8); color: var(--ink); overflow-wrap: anywhere; }
.hub-docs-list { gap: var(--space-4); }
.hub-docs-row { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--space-2) var(--space-8); padding: var(--space-8); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.hub-docs-open { grid-column: 1; min-width: 0; min-height: var(--control-height); padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 600; text-align: start; text-decoration: underline; overflow-wrap: anywhere; cursor: pointer; }
.hub-docs-open:focus-visible { outline: var(--space-1) solid var(--ring); outline-offset: var(--space-2); }
.hub-docs-where, .hub-docs-facts { grid-column: 1; min-width: 0; color: var(--ink-muted); overflow-wrap: anywhere; }
.hub-docs-where { color: var(--ink); }
.hub-docs-tools { display: flex; flex-wrap: wrap; grid-column: 2; grid-row: 1 / span 3; min-width: 0; gap: var(--space-4); justify-content: flex-end; }
.hub-docs-note { grid-column: 1 / -1; min-width: 0; color: var(--ink-muted); overflow-wrap: anywhere; }
.hub-docs-note:empty { display: none; }
.hub-docs-note-error { color: var(--danger); }
.hub-docs-dialog { box-sizing: border-box; width: min(calc(var(--control-height) * 16), calc(100vw - var(--space-16))); max-width: calc(100vw - var(--space-16)); max-height: calc(100dvh - var(--space-16)); overflow-y: auto; overscroll-behavior: contain; }
.hub-docs-dialog-body { display: grid; min-width: 0; gap: var(--space-8); }
.hub-docs-dialog-body > h3 { margin: 0; padding-inline-end: calc(var(--control-height) + var(--space-8)); overflow-wrap: anywhere; }
.hub-docs-trail { gap: var(--space-4); }
.hub-docs-trail-item { display: grid; min-width: 0; gap: var(--space-2); padding-block-end: var(--space-4); border-block-end: 1px solid var(--border); }
.hub-docs-trail-what { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.hub-docs-trail-name { color: var(--ink); overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .hub-docs-row { grid-template-columns: minmax(0, 1fr); }
  .hub-docs-tools { grid-column: 1; grid-row: auto; justify-content: flex-start; }
}