/* Canonical UI primitives. Keep legacy page-specific layout in styles.css.
   Tokens and behavior contracts: docs/UI_SYSTEM.md. */
:root {
  --ui-space-1: 4px; --ui-space-2: 8px; --ui-space-3: 12px;
  --ui-space-4: 16px; --ui-space-6: 24px;
  --ui-bg: #0a0a0a; --ui-surface: #16171b; --ui-raised: #202228;
  --ui-text: #e5e5e5; --ui-secondary: #888; --ui-muted: #888;
  --ui-border: #34373e; --ui-accent: #ff9f00;
  --ui-hover: rgba(255,255,255,.045); --ui-selected: rgba(42,163,255,.12);
  --ui-success: #74d5a5; --ui-warning: #ffc266; --ui-error: #ff8585;
  --ui-info: #86c5ff; --ui-radius: 4px; --ui-radius-overlay: 8px;
  --ui-overlay-shadow: 0 16px 48px rgba(0,0,0,.45);
  --ui-control: 28px; --ui-button-height: 24px; --ui-touch: 32px; --ui-row: 28px;
  --ui-cell-y: 4px; --ui-cell-x: 8px; --ui-label-width: 88px;
  --ui-title: 18px; --ui-label: 12px; --ui-meta: 11px;
  --ui-header: 36px; --ui-sidebar: 184px;
  --panel-shadow: none; --row-hover: var(--ui-hover); --row-selected: var(--ui-selected);
  --m-bg: var(--ui-bg); --m-panel: var(--ui-surface); --m-border: var(--ui-border);
  --m-text: var(--ui-text); --m-secondary: var(--ui-secondary); --m-muted: var(--ui-muted);
  --m-accent: var(--ui-accent);
}
[hidden] { display: none !important; }
:where(a,button,input,select,textarea,[tabindex]):focus-visible {
  outline: 2px solid var(--ui-accent); outline-offset: 2px;
}
:where(button,a)[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.ui-icon-button { display: inline-flex; align-items: center; justify-content: center;
  width: var(--ui-control); flex-shrink: 0; color: var(--ui-text);
  background: var(--ui-surface); border: 1px solid var(--ui-border); cursor: pointer; }
.ui-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; flex-shrink: 0; }
.panel,.table-section,.export-section { background: var(--ui-surface); box-shadow: none; border-radius: var(--ui-radius); }
.modal-content,.cmdk-panel { background: var(--ui-surface); border-radius: var(--ui-radius-overlay); box-shadow: var(--ui-overlay-shadow); }
.page-title-bar { flex-wrap: wrap; }
.page-title-actions { flex-wrap: wrap; }
.terminal-header { min-height: var(--ui-header); height: var(--ui-header); }
.terminal-layout,.terminal-main,.terminal-main-scroll { min-width: 0; }
.terminal-main.terminal-main--list-scroll .list-page-head-sticky { background: var(--ui-bg); }
.terminal-sidebar nav a { min-height: var(--ui-control); border-radius: var(--ui-radius); }
.contact-tabs,.thread-detail-tabs,.settings-tabs { gap: var(--ui-space-1); overflow-x: auto; scrollbar-width: thin; }
:where(.contact-hero,.company-hero,.project-hero) { border-radius: var(--ui-radius); box-shadow: none; background: var(--ui-surface); }
.ui-save-status { display: flex; gap: var(--ui-space-1); align-items: center; min-height: var(--ui-control);
  color: var(--ui-secondary); font-size: var(--ui-meta); }
.ui-save-status[data-state=error] { color: var(--ui-error); }
.ui-save-status[data-state=saved] { color: var(--ui-success); }
.ui-empty-state { padding: var(--ui-space-2); color: var(--ui-secondary); text-align: center; }
.ui-empty-state h2 { color: var(--ui-text); font-size: var(--ui-title); margin: 0 0 var(--ui-space-2); }
.ui-empty-state p { margin: 0 0 var(--ui-space-4); }
.ui-skip-link { position: fixed; top: -100px; left: 12px; z-index: 10010;
  background: var(--ui-accent); color: #111; padding: 8px 12px; }
.ui-skip-link:focus { top: 8px; }
.ui-nav-toggle,.ui-nav-close,.ui-nav-scrim,.ui-pane-back { display: none; }
.ui-split.mail-workspace.mail-split,.ui-split.threads-workspace {
  display: grid; grid-template-columns: minmax(320px,var(--ui-list-width,40%)) 8px minmax(360px,1fr);
  gap: 0; min-width: 0;
}
.ui-split > .mail-list-panel,.ui-split > .mail-detail-panel {
  min-width: 0; width: auto; max-width: none; box-shadow: none; border: 1px solid var(--ui-border);
}
.ui-split .mail-viewer-panel,.ui-split .mail-list-panel { box-shadow: none; }
.ui-split-handle { cursor: col-resize; touch-action: none; position: relative; background: transparent; }
.ui-split-handle::after { content: ''; position: absolute; left: 3px; top: 12px; bottom: 12px; width: 2px; background: var(--ui-border); }
.ui-split-handle:hover::after,.ui-split-handle:focus-visible::after { background: var(--ui-accent); }
.ui-resizing { cursor: col-resize; user-select: none; }
.ui-split .ui-pane-back { display:none; align-self: flex-start; margin-bottom: var(--ui-space-2); }
.cmdk-status { min-height: 24px; padding: 4px 12px; font-size: var(--ui-meta); color: var(--ui-secondary); }
.cmdk-input { min-width: 0; }
.m-topbar { background: var(--ui-surface); backdrop-filter: none; }
.m-topbar__icon-btn,.m-topbar__back { min-width: var(--ui-touch); min-height: var(--ui-touch); }
@media (max-width: 1100px) {
  .ui-split.mail-workspace.mail-split,.ui-split.threads-workspace { grid-template-columns: minmax(0,1fr); }
  .ui-split > .ui-split-handle { display: none; }
  .ui-split:not(.ui-has-detail) > :is(.mail-detail-panel,.threads-detail-panel) { display: none; }
  .ui-split.ui-has-detail > :is(.mail-list-panel,.threads-list-panel) { display: none; }
  .ui-split.ui-has-detail .ui-pane-back { display: inline-flex; }
  .ui-split > :is(.mail-detail-panel,.threads-detail-panel) { height: 100%; min-height: 0; }
}
@media (max-width: 900px) {
  .ui-nav-toggle,.ui-nav-close { display: inline-flex; }
  .terminal-sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 260px;
    max-width: calc(100vw - 44px); z-index: 8001; transform: translateX(-100%);
    transition: none; background: var(--ui-surface); overflow-y: auto; padding-top: var(--ui-space-2); }
  .ui-nav-open .terminal-sidebar { transform: translateX(0); }
  .ui-nav-open .ui-nav-scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 8000; }
  .terminal-sidebar nav a { min-height: var(--ui-touch); }
  .terminal-main { width: 100%; }
  .terminal-header .command-bar { min-width: 0; }
  .terminal-header-user { max-width: 8rem; }
}
@media (max-width: 600px) {
  :root { --ui-label-width: 80px; }
  body:has(> .terminal-header) { width: 100%; height: 100dvh; }
  .terminal-main { padding: var(--ui-space-2); }
  .terminal-header { padding: 4px 8px; gap: var(--ui-space-2); }
  .terminal-header .terminal-brand,.terminal-header .terminal-logo { display: none; }
  .terminal-header .shortcut-hint { display: none; }
  .terminal-header-user { max-width: 6rem; }
  .context-toolbar { flex-wrap: wrap; }
  .page-title-bar { align-items: flex-start; }
  .page-title-actions { width: 100%; }
  .filters-form .filters-row > label:not(.checkbox-filter-label) { min-width: 0; flex-basis: 100%; }
  .table-section { max-width: 100%; overflow-x: auto; }
  .contacts-table { min-width: 680px; }
  .contact-tabs,.thread-detail-tabs { flex-wrap: nowrap; }
  .contact-tab-button,.thread-detail-tab { flex-shrink: 0; min-height: var(--ui-touch); }
  .modal-content { width: calc(100vw - 16px); max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .cmdk-overlay { padding: 8px; align-items: flex-start; }
  .cmdk-panel { width: 100%; margin-top: 0; max-height: calc(100dvh - 16px); }
  .cmdk-input-row { padding: 8px; }
  .cmdk-input { font-size: 16px; }
  .ui-icon-button { min-width: var(--ui-touch); min-height: var(--ui-touch); }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
.terminal-main > .ui-mail-filters { width:100%; margin:0; display:flex; align-items:flex-end; gap:var(--ui-space-2); padding:var(--ui-space-2) 0; flex-shrink:0; }
.ui-mail-filters label { color:var(--ui-secondary); font-size:var(--ui-meta); }
.ui-mail-search { flex:1; min-width:120px; }
.ui-mail-search input { width:100%; }
.mail-compose-panel:not([hidden]) { position:fixed; z-index:7000; right:var(--ui-space-3); bottom:var(--ui-space-3);
  width:min(620px,calc(100vw - 24px)); max-height:calc(100dvh - 68px); overflow-y:auto;
  background:var(--ui-surface); border:1px solid var(--ui-border); box-shadow:var(--ui-overlay-shadow); }
.mail-compose-panel .mail-compose-head { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:start; position:sticky; top:-8px; background:var(--ui-surface); z-index:2; }
.mail-compose-panel .mail-compose-head__state { grid-column:1; grid-row:2; justify-self:start; }
.mail-compose-panel .mail-compose-head > .ui-icon-button { grid-column:2; grid-row:1; }
.mail-compose-actions { position:sticky; bottom:-8px; background:var(--ui-surface); padding:var(--ui-space-2) 0; z-index:2; }
.mail-compose-option:has(input[type=checkbox]:not(:checked)) .mail-compose-option__body { display:none; }
.ui-graph-selection { display:flex; gap:var(--ui-space-2); align-items:center; flex-wrap:wrap; padding:var(--ui-space-2); border:1px solid var(--ui-border); }
.ui-graph-selection > span { flex:1; min-width:120px; }

.dashboard-kpi-cell { box-shadow:none; }
@media(max-width:600px) {
  .terminal-main > .ui-mail-filters { flex-wrap:wrap; padding:8px 12px; }
  .ui-mail-search { flex-basis:100%; }
  .mail-kpi-bar .dashboard-kpi-strip { display:flex; overflow-x:auto; }
  .mail-kpi-bar .dashboard-kpi-cell { flex:0 0 140px; }
  .mail-compose-panel:not([hidden]) { inset:0; width:100%; max-height:100dvh; border-radius:0; margin:0; }
  .ui-object-header :is(.contact-hero__channels,.company-hero__channels) { max-width:100%; flex-wrap:wrap; }
  .ui-object-header :is(.hero-channel,.contact-hero__identity,.company-hero__identity) { min-width:0; overflow-wrap:anywhere; }
}
.ui-split .mail-viewer-meta-layout { flex-wrap:wrap; }
.ui-split .mail-viewer-meta-block { flex:1 1 240px; }
.ui-split .mail-viewer-meta-rail { flex:0 0 auto; max-width:100%; margin-left:auto; align-items:flex-end; }
.ui-split .mail-viewer-actions__primary { flex-wrap:wrap; }
.ui-split .mail-viewer-meta-date { text-align:right; }
@media(max-width:600px) {
  .terminal-status { height:auto; min-height:28px; flex-wrap:wrap; gap:4px 12px; padding:4px 8px; }
  .terminal-status__actions { max-width:100%; }
  .files-filters-row .files-mime-multiselect { width:100%; min-width:0; max-width:100%; }
  .files-mime-multiselect__panel { max-width:calc(100vw - 40px); }
  .ui-split .mail-viewer-meta-rail { flex-basis:100%; }
}

.ui-thread-context { padding:12px; border:1px solid var(--ui-border); border-radius:var(--ui-radius); margin-bottom:12px; }
.ui-thread-context summary { min-height:32px; cursor:pointer; }
.ui-thread-context dl { display:grid; grid-template-columns:auto 1fr; gap:8px 16px; }
.ui-thread-context dd { margin:0; }

/* Compact terminal contract: semantic colors remain in the original theme.
   Geometry and casing apply equally to native, custom, desktop and mobile buttons. */
button, input[type=button], input[type=submit], input[type=reset],
.button-primary,.button-secondary,.button-danger,.button-nav,.button-share-accent,
.primary-button,.secondary-button,.m-btn,.m-chip {
  border-radius:0 !important; text-transform:uppercase !important;
  letter-spacing:.5px; box-sizing:border-box; max-width:100%;
}
.button-primary,.button-secondary,.button-danger,.button-nav,.button-share-accent,.ui-icon-button,
.primary-button,.secondary-button,.m-btn {
  min-height:var(--ui-button-height); height:auto; padding:4px 10px;
  line-height:1.2; font-size:var(--font-size-sm,11px); font-family:var(--font-mono,'Roboto Mono');
}
.button-primary,a.button-primary,.primary-button,.filters-form-actions__buttons button[type=submit],
.m-btn:not(.m-btn--secondary):not(.m-btn--danger) {
  background:linear-gradient(180deg,#ffb13b,var(--terminal-accent,#ff9f00));
  color:#000; border:1px solid rgba(255,159,0,.86); font-weight:600;
}
.button-secondary,.secondary-button,.m-btn--secondary {
  background:rgba(255,255,255,.02); color:var(--terminal-muted,#888); border:1px solid var(--border-soft, #313339);
}
.button-danger,.m-btn--danger {
  background:rgba(255,77,77,.035); color:var(--terminal-red,#ff4d4d); border:1px solid rgba(255,77,77,.5);
}
.ui-icon-button { border-radius:0; min-width:24px; width:24px; padding:2px; }
:where(.terminal-input,.terminal-select,.terminal-input-full) { border-radius:0; }
input[type=checkbox],input[type=radio] {
  flex:0 0 14px; width:14px; min-width:14px; max-width:14px;
  height:14px; min-height:14px; max-height:14px; margin:0; vertical-align:middle;
}
:is(.contacts-table,.data-table,.files-table) > :is(thead,tbody,tfoot) > tr > :is(th,td) {
  padding:var(--ui-cell-y) var(--ui-cell-x);
}
:is(.contacts-table,.files-table) :is(th,td).col-checkbox { width:28px; min-width:28px; padding:4px; }
.page-title-bar,.context-toolbar,.page-title-actions { gap:var(--spacing-sm,4px); }
.panel { padding:var(--spacing-md,8px); }
.ui-object-header { margin-bottom:var(--spacing-md,8px); }

/* Restore the original five-column Threads design. Fractional tracks shrink
   within the resized pane; text truncates inside cells instead of colliding. */
.ui-split.threads-workspace { --ui-list-width:52%; }
.ui-split > .threads-list-panel,.ui-split > .threads-detail-panel { width:auto; max-width:none; min-width:0; }
.threads-list-panel {
  --threads-list-cols:minmax(0,1.7fr) minmax(44px,.7fr) minmax(0,.8fr) minmax(0,1.35fr) 64px;
  --threads-list-gap:8px;
}
.threads-list-header > span,.thread-list-row > span { min-width:0; overflow:hidden; }
.threads-list-header > span { text-overflow:ellipsis; white-space:nowrap; }
.threads-list-row,.thread-list-row { flex-shrink:0; }




/* Label-left forms. The runtime only annotates existing label/control pairs;
   it preserves inputs, IDs, event handlers, validation and picker containers. */
.ui-field-row.ui-field-row {
  display:grid !important; grid-template-columns:var(--ui-label-width) minmax(0,1fr) !important;
  align-items:center; gap:4px 8px; min-width:0; max-width:100%;
  text-align:left; margin-top:0; margin-bottom:0;
}
.ui-field-row > .ui-field-caption {
  grid-column:1; align-self:center; min-width:0; margin:0;
  white-space:normal; overflow-wrap:anywhere; line-height:1.25;
}
.ui-field-row > :not(.ui-field-caption) { grid-column:2; min-width:0; max-width:100%; }
.ui-field-row > :is(input,select,textarea) { width:100%; box-sizing:border-box; }
.ui-field-row > :is(input,select):not([type=checkbox]):not([type=radio]) {
  min-height:var(--ui-control); height:var(--ui-control); border-radius:0;
}
.ui-field-row > :is(.tag-suggest-wrap,.company-picker,.project-picker) { width:100%; min-width:0; }
.ui-field-row .tag-suggest-wrap > input { width:100%; min-width:0; box-sizing:border-box; }
.ui-field-row > :is(.form-field-error,.form-field-help,.mail-recipient-preview) { grid-column:2; }
.filters-form .filters-row > label.ui-field-row { flex:1 1 260px; min-width:220px; }
.filters-form-actions__caption:not([data-ui-original-filters], [data-ui-original-filters] *) { display:none; }
.filters-form-actions:not([data-ui-original-filters], [data-ui-original-filters] *) { align-self:center; }
.filters-form-inline:not([data-ui-original-filters], [data-ui-original-filters] *),.filters-form-inline .filters-left-group:not([data-ui-original-filters], [data-ui-original-filters] *) { flex-wrap:wrap; align-items:center; }
.filters-row:not([data-ui-original-filters], [data-ui-original-filters] *),.filters-row-single:not([data-ui-original-filters], [data-ui-original-filters] *) { flex-wrap:wrap; align-items:center; overflow:visible; }
.checkbox-filter-label:not([data-ui-original-filters], [data-ui-original-filters] *),.filters-inline-option:not([data-ui-original-filters], [data-ui-original-filters] *) { display:inline-flex; align-items:center; gap:4px; min-width:0; }
.mail-compose-fields { grid-template-columns:minmax(0,1fr); }
.mail-compose-option__body { padding-left:0; }
.ui-mail-filters { align-items:center; flex-wrap:wrap; }
.ui-mail-filters .ui-mail-search { flex:1 1 320px; }
@media(max-width:600px) {
  .filters-form .filters-row > label.ui-field-row { flex-basis:100%; min-width:0; }
  .form-field.ui-field-row,.ui-field-row { --ui-label-width:80px; }
  .new-contact-modal__form-grid,.new-thread-modal__form-grid { grid-template-columns:minmax(0,1fr); }
}

/* Keep compact controls inside their tracks, including legacy inline widths. */
.ui-field-row > :is(input,select,textarea),.ui-field-row .tag-suggest-wrap > input { min-width:0 !important; }
#graph-filters-form { flex-wrap:wrap; min-width:0; max-width:100%; }
#graph-filters-form > .ui-field-row { flex:1 1 240px; }
.graph-toolbar > .ui-field-row { flex:1 1 260px; }
.new-contact-modal__footer { position:static; margin-top:8px; }
.new-contact-modal__form-grid { gap:8px; }
.new-contact-modal__identity-grid { grid-template-columns:56px repeat(3,minmax(0,1fr)); gap:8px; }
.terminal-header > .feedback-fab { width:24px; height:24px; min-height:24px; padding:2px; font-size:16px; box-shadow:none; }
.ui-split > .threads-list-panel { height:100%; max-height:none; }
.threads-list-body > .threads-list { flex:1 1 0; }
.threads-list-filler { min-height:0; flex:0 0 auto; padding:4px 12px; }
.threads-list-body:has(.thread-list-row) > .threads-list-filler { display:none; }
@media(max-width:600px) {
 .new-contact-modal__identity-grid { grid-template-columns:minmax(0,1fr); }
}

.ui-field-caption.sr-only { position:static; width:auto; height:auto; padding:0; clip:auto; clip-path:none; overflow:visible; }
.ui-field-row > .chip-input { width:100%; box-sizing:border-box; }

/* Original filter captions and spacing, with controls contained in their cells. */
.filters-form[data-ui-original-filters] label > :is(input:not([type=checkbox]):not([type=radio]),select) {
  min-width:0 !important; max-width:100%; box-sizing:border-box;
}