/* Loaded after the existing Nota token sheet. Colours always follow its theme. */
.hub-page-header, .hub-page > .nota-hub, .hub-page > noscript { box-sizing: border-box; width: 100%; max-width: var(--layout-width); margin-inline: auto; padding-inline: var(--layout-gutter); }
.hub-page-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-8); padding-block: var(--space-8); border-bottom: 1px solid var(--border); color: var(--ink); }
.hub-page-name { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--type-h4); margin: 0; }
.hub-page-header .hub-nav { padding: 0; border: 0; }
.hub-page > .nota-hub { padding-block: var(--space-12); }
.hub-page > noscript { display: block; padding-block: var(--space-12); }
.nota-hub { min-width: 0; color: var(--ink); background: transparent; font: var(--type-body)/var(--type-body-lh) var(--font-sans); padding: 0; }
/* Same contextual interaction register as the notary page. Dialogs sit on the
   document body rather than inside the notary pane, so they own that context. */
:is(.nota-hub, .hub-dialog, .primary-hub, .hub-first-cabinet, .hub-page-header) { --action-accent: var(--accent-purple); --action-ink: color-mix(in srgb, var(--action-accent) var(--action-ink-mix), var(--action-text)); --action-tint: color-mix(in srgb, var(--action-accent) 12%, var(--action-surface)); --ring: var(--action-ink); }
.nota-hub *, .hub-dialog * { box-sizing: border-box; }
.nota-hub p, .nota-hub h1, .nota-hub h2, .nota-hub h3, .nota-hub h4, .hub-dialog p, .hub-dialog h2, .hub-dialog h3, .hub-dialog h4 { margin: 0; }
:is(.nota-hub, .hub-dialog) :is(h1, h2, h3, h4) { font-family: var(--font-display); font-weight: var(--weight-display); color: var(--ink); overflow-wrap: anywhere; }
.hub-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--gap); padding-bottom: var(--space-12); border-bottom: 1px solid var(--border); }
.hub-brand h1 { font-size: var(--type-h1); line-height: var(--type-h1-lh); letter-spacing: var(--type-h1-ls); }
.hub-eyebrow { color: var(--ink-muted); font-size: var(--type-body); margin-bottom: var(--space-4); }
.hub-cabinet { display: grid; gap: var(--space-4); min-width: 0; max-width: 100%; }
.hub-cabinet-name, .hub-account > p:first-child { font-weight: 600; }
.hub-account { display: flex; min-width: 0; max-width: 100%; align-items: flex-start; flex-direction: column; gap: var(--space-4); overflow-wrap: anywhere; }
.hub-account-role, .hub-row-subtitle, .hub-field-hint { color: var(--ink-muted); }
.hub-notification-counts { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); font-size: var(--type-h4); }
.hub-notification-count { white-space: nowrap; font-variant-numeric: tabular-nums; }
.hub-notification-content { margin-top: var(--space-8); }
.hub-day { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap); padding-block: var(--space-8); border-bottom: 1px solid var(--border); }
.hub-nav { display: flex; flex-wrap: wrap; gap: var(--space-4); padding-block: var(--space-8); border-bottom: 1px solid var(--border); }
.hub-button { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); min-height: var(--control-height); min-width: var(--control-height); max-width: 100%; padding: var(--space-4) var(--space-6); font: inherit; font-weight: 500; color: var(--ink); background: transparent; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; text-align: center; overflow-wrap: anywhere; white-space: normal; transition: border-color var(--motion-fast) var(--ease-ui), background-color var(--motion-fast) var(--ease-ui), color var(--motion-fast) var(--ease-ui); }
.hub-button[data-hub-notifications] { flex-wrap: wrap; overflow-wrap: normal; justify-content: flex-start; }
.hub-button:not(:disabled):is(:hover, :focus-visible) { color: var(--action-ink); border-color: var(--action-ink); background: var(--action-tint); }
.hub-button.btn-primary { color: var(--action-ink); border-color: var(--action-ink); font-weight: 700; }
.hub-button:focus-visible, .nota-hub input:focus-visible, .nota-hub select:focus-visible, .nota-hub textarea:focus-visible, .hub-dialog input:focus-visible, .hub-dialog select:focus-visible, .hub-dialog textarea:focus-visible { outline: var(--space-1) solid var(--ring); outline-offset: var(--space-2); }
.hub-button:disabled { color: var(--ink-muted); cursor: not-allowed; border-style: dashed; }
.hub-nav [aria-current='page'] { border-color: var(--action-ink); font-weight: 600; color: var(--action-ink); background: transparent; }
.hub-count { margin-inline-start: var(--space-6); font-variant-numeric: tabular-nums; }
.hub-feedback:empty { display: none; }
.hub-feedback { padding-block: var(--space-8); }
.hub-content { padding-top: var(--space-12); min-width: 0; }
.hub-section-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--gap); align-items: flex-start; margin-bottom: var(--space-12); }
.hub-section-heading h2 { font-size: var(--type-h2); line-height: var(--type-h2-lh); letter-spacing: var(--type-h2-ls); }
.hub-section-actions, .hub-row-actions { display: flex; min-width: 0; max-width: 100%; flex-wrap: wrap; align-items: flex-start; gap: var(--space-4); }
.hub-task-filters { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-block: var(--space-8) var(--space-12); }
.hub-task-filters > .hub-field { flex: 1 1 calc(var(--control-height) * 4); max-width: var(--form-compact-max); }
.hub-zone-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--section-gap) var(--gap); }
.hub-zone { min-width: 0; }
.hub-zone-title { font-size: var(--type-h2); line-height: var(--type-h2-lh); letter-spacing: var(--type-h2-ls); padding-bottom: var(--space-8); border-bottom: 1px solid var(--border); }
.hub-today-date { display: block; margin-bottom: var(--space-12); color: var(--ink-muted); }
.hub-list { list-style: none; margin: 0; padding: 0; }
.hub-row { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: var(--gap); padding-block: var(--space-8); border-bottom: 1px solid var(--border); }
.hub-row-text { min-width: 0; flex: 1 1 calc(var(--control-height) * 4); overflow-wrap: anywhere; }
.hub-row-title { font-size: var(--type-h3); line-height: var(--type-h3-lh); margin-bottom: var(--space-4); }
.hub-row-meta { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); margin-top: var(--space-4); font-variant-numeric: tabular-nums; }
.hub-row-fields { display: grid; gap: var(--space-4); margin: 0; margin-top: var(--space-4); }
.hub-row-field { display: grid; gap: var(--space-2); min-width: 0; }
.hub-row-field dt, .hub-row-field dd { margin: 0; overflow-wrap: anywhere; }
.hub-meta-label { color: var(--ink-muted); font-size: var(--type-h4); }
.hub-empty-state { display: grid; align-content: start; justify-items: start; gap: var(--space-8); padding-block: var(--space-12); max-width: var(--form-compact-max); overflow-wrap: anywhere; }
.hub-empty-title { font-size: var(--type-h3); line-height: var(--type-h3-lh); }
.hub-empty-description { color: var(--ink-muted); }
.hub-state { padding-block: var(--space-8); overflow-wrap: anywhere; }
.hub-state-error, .hub-state-denied { color: var(--danger); }
.hub-state-loading, .hub-state-volume { color: var(--ink-muted); }
.hub-search { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-8); margin-bottom: var(--space-12); }
.hub-search input, .hub-cabinet select, .hub-field input, .hub-field textarea, .hub-field select { min-height: var(--control-height); min-width: 0; max-width: 100%; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: var(--space-4) var(--space-5); }
.hub-search input { min-width: 0; flex: 1 1 calc(var(--control-height) * 4); max-width: var(--form-compact-max); }
/* Explicit max-width removes the global confirmation-shell width cap for
   these reading/task dialogs. The common theme, border, crown and backdrop stay. */
.hub-dialog { --hub-dialog-pad: var(--pad-dialog); box-sizing: border-box; color: var(--ink); border-radius: var(--radius-lg); padding: var(--hub-dialog-pad); width: 100%; max-width: min(calc(100vw - var(--space-12)), calc(var(--control-height) * 16)); max-height: calc(100dvh - var(--space-12)); overflow: auto; font: var(--type-body)/var(--type-body-lh) var(--font-sans); }
.hub-dialog > .dlg-x-form { position: sticky; top: calc(-1 * var(--hub-dialog-pad)); margin-block-start: calc(-1 * var(--hub-dialog-pad)); padding-block-start: var(--hub-dialog-pad); height: auto; display: flex; justify-content: flex-end; background: inherit; z-index: 1; }
.hub-dialog-close { text-align: center; min-width: var(--control-height); }
.hub-dialog-heading { font-size: var(--type-h2); line-height: var(--type-h2-lh); margin-block: var(--space-8) var(--space-12); }
.hub-action-form { display: grid; gap: var(--space-12); }
.hub-field { display: grid; gap: var(--space-4); min-width: 0; border: 0; padding: 0; margin: 0; }
.hub-field > input:not([type='checkbox']), .hub-field > textarea, .hub-field > select { width: 100%; }
.hub-field > textarea { min-height: calc(var(--control-height) * 3); resize: vertical; }
.hub-field > legend { margin-bottom: var(--space-4); }
.hub-check { display: flex; align-items: center; gap: var(--space-8); min-height: var(--control-height); }
.hub-check input { width: var(--space-10); min-height: var(--space-10); flex: none; accent-color: var(--action-ink); }
.hub-field [aria-invalid='true'] { border-color: var(--danger); }
.hub-dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-8); position: sticky; bottom: calc(-1 * var(--hub-dialog-pad)); margin-block-end: calc(-1 * var(--hub-dialog-pad)); padding-block-start: var(--space-8); padding-block-end: var(--hub-dialog-pad); background: inherit; z-index: 1; }
.hub-dialog-case { max-width: min(calc(100vw - var(--space-12)), calc(var(--control-height) * 24)); margin: auto; }
.hub-detail-section { padding-block: var(--space-12); border-bottom: 1px solid var(--border); }
.hub-detail-section h3 { margin-bottom: var(--space-8); }
.hub-detail-field { overflow-wrap: anywhere; }
.hub-matter-actions { display: grid; gap: var(--space-8); padding-block: var(--space-12); }
.hub-matter-actions h3 { font-size: var(--type-h3); line-height: var(--type-h3-lh); }
/* The cabinet workspace keeps context on a single shared top line. Admin
   platform headers retain their existing presentation. */
.nota-hub:not(.nota-hub-platform) > .hub-header:has(> .hub-brand) { align-items: center; gap: var(--space-8) var(--gap); }
.nota-hub:not(.nota-hub-platform) .hub-cabinet { grid-auto-flow: column; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-6); }
.nota-hub:not(.nota-hub-platform) .hub-account { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); }
.nota-hub:not(.nota-hub-platform) .hub-day { padding-block: 0; border-bottom: 0; font-size: var(--type-h4); color: var(--ink-muted); }
.nota-hub:not(.nota-hub-platform) .hub-notification-count > span:last-child { font-family: var(--font-display); font-weight: var(--weight-display); font-variant-numeric: tabular-nums; }
/* Each fact preserves its explicit label/value pair. Wider rows use the
   available rail; narrow rows wrap whole facts instead of eight text lines. */
:is(.nota-hub:not(.nota-hub-platform), .hub-notifications-dialog) .hub-row-fields { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-12); }
.nota-hub:not(.nota-hub-platform) [data-hub-cabinet-choice] .hub-check { border: 1px solid var(--border); border-radius: var(--radius); padding-inline: var(--space-6); }
.nota-hub:not(.nota-hub-platform) [data-hub-cabinet-choice] .hub-check:has(input:checked) { border-color: var(--action-ink); }
.nota-hub:not(.nota-hub-platform) [data-hub-cabinet-choice] .hub-check:has(input:focus-visible) { outline: var(--space-1) solid var(--ring); outline-offset: var(--space-2); }
.hub-detail-section > .hub-row:last-child { border-bottom: 0; padding-block-end: 0; }
@media (max-width: 767px) {
  .hub-zone-grid { grid-template-columns: minmax(0, 1fr); }
  .hub-header > * { flex: 1 1 100%; }
  .hub-cabinet select { width: 100%; }
  .hub-dialog { --hub-dialog-pad: var(--space-8); }
  .nota-hub:not(.nota-hub-platform) > .hub-header > :is(.hub-brand, [data-hub-close-day]) { flex: 0 1 auto; }
  .nota-hub:not(.nota-hub-platform) .hub-row-text { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .hub-button { transition: none; } }
/* Cabinet lists distinguish the focused action without shifting row geometry. */
.hub-nav [aria-current='page'] { background: var(--action-tint); }
.hub-row:has(:is(button, a)):focus-within { background: var(--action-tint); }
.hub-row-title, .hub-row-subtitle { overflow-wrap: anywhere; }
.hub-row-actions { align-self: center; }
.hub-state { max-width: var(--form-compact-max); }
.hub-content[aria-busy='true'] { cursor: progress; }
.hub-search input[type='search'] { scroll-margin-block: var(--space-12); }
.hub-dialog :is(.hub-row-actions, .hub-section-actions) { align-items: center; }