/* Brief Builder shared visual system.
   Loaded after each page stylesheet so common UI cannot drift between tools. */
:root {
  --ds-navy-950: #071425;
  --ds-navy-900: #0a2342;
  --ds-navy-800: #123d68;
  --ds-blue-700: #0953bd;
  --ds-blue-600: #0b5ed7;
  --ds-blue-100: #eaf3ff;
  --ds-ink: #172033;
  --ds-muted: #64748b;
  --ds-surface: #ffffff;
  --ds-surface-soft: #f5f8fc;
  --ds-background: #eef2f7;
  --ds-border: #d6deea;
  --ds-border-strong: #bdc8d8;
  --ds-focus: #9fc5ff;
  --ds-success: #16865c;
  --ds-warning: #a16207;
  --ds-danger: #a52a2a;

  --ds-font-sans: Inter, "Segoe UI", Arial, sans-serif;
  --ds-text-xs: 10px;
  --ds-text-sm: 12px;
  --ds-text-md: 14px;
  --ds-text-lg: 16px;
  --ds-text-xl: 20px;
  --ds-text-2xl: 30px;

  --ds-weight-regular: 500;
  --ds-weight-semibold: 700;
  --ds-weight-bold: 800;

  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;
  --ds-space-10: 40px;
  --ds-space-12: 48px;

  --ds-radius-sm: 8px;
  --ds-radius-md: 10px;
  --ds-radius-lg: 12px;
  --ds-radius-xl: 16px;
  --ds-radius-pill: 999px;

  --ds-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
  --ds-shadow-md: 0 8px 24px rgba(22, 32, 51, .08);
  --ds-shadow-lg: 0 18px 44px rgba(22, 32, 51, .12);
  --ds-control-height: 44px;

  /* Compatibility aliases used by the existing page styles. */
  --navy-950: var(--ds-navy-950);
  --navy-900: var(--ds-navy-900);
  --navy-800: var(--ds-navy-800);
  --navy: var(--ds-navy-900);
  --blue-700: var(--ds-blue-700);
  --blue-650: var(--ds-blue-600);
  --blue-600: var(--ds-blue-600);
  --blue: var(--ds-blue-600);
  --blue-100: var(--ds-blue-100);
  --brand: var(--ds-blue-600);
  --brand-dark: var(--ds-blue-700);
  --brand-light: var(--ds-blue-100);
  --ink: var(--ds-ink);
  --text: var(--ds-ink);
  --muted: var(--ds-muted);
  --text-muted: var(--ds-muted);
  --surface: var(--ds-surface);
  --surface-2: var(--ds-surface-soft);
  --soft: var(--ds-surface-soft);
  --surface-low: var(--ds-surface-soft);
  --background: var(--ds-background);
  --bg: var(--ds-background);
  --line: var(--ds-border);
  --border: var(--ds-border);
  --line-strong: var(--ds-border-strong);
  --focus: var(--ds-focus);
  --success: var(--ds-success);
  --danger: var(--ds-danger);
  --shadow: var(--ds-shadow-md);
  --shadow-soft: var(--ds-shadow-md);
  --shadow-md: var(--ds-shadow-md);
  --shadow-lg: var(--ds-shadow-lg);
  --radius-sm: var(--ds-radius-sm);
  --radius-md: var(--ds-radius-md);
  --radius-lg: var(--ds-radius-lg);
  --radius: var(--ds-radius-lg);
  --control-height: var(--ds-control-height);

  --teal-600: var(--ds-success);
  --gold-500: var(--ds-warning);
  --workspace-navy: var(--ds-navy-900);
  --workspace-navy-soft: var(--ds-navy-800);
  --workspace-blue: var(--ds-blue-600);
  --workspace-blue-soft: var(--ds-blue-100);
  --workspace-canvas: var(--ds-surface-soft);
  --workspace-preview: #e8f0fd;
  --workspace-border: var(--ds-border);
  --workspace-line: var(--ds-border);
  --workspace-text: var(--ds-ink);
  --workspace-shadow: var(--ds-shadow-md);
  --briefdesk-sidebar: var(--ds-navy-900);
  --briefdesk-sidebar-2: var(--ds-navy-950);
  --briefdesk-editor: var(--ds-background);
  --briefdesk-blue: var(--ds-blue-600);
  --briefdesk-blue-2: var(--ds-blue-700);
  --briefdesk-blue-soft: var(--ds-blue-100);
  --precision-bg: var(--ds-background);
  --precision-surface: var(--ds-surface);
  --precision-surface-soft: var(--ds-surface-soft);
  --precision-surface-blue: var(--ds-blue-100);
  --precision-text: var(--ds-ink);
  --precision-muted: var(--ds-muted);
  --precision-border: var(--ds-border);
  --precision-border-strong: var(--ds-border-strong);
  --precision-primary: var(--ds-blue-600);
  --precision-primary-dark: var(--ds-blue-700);
  --precision-primary-soft: var(--ds-blue-100);
  --precision-success: var(--ds-success);
  --precision-danger: var(--ds-danger);
  --precision-shadow: var(--ds-shadow-sm);
  --precision-shadow-lg: var(--ds-shadow-lg);
  --stitch-navy: var(--ds-navy-900);
  --stitch-primary: var(--ds-blue-600);
  --stitch-accent: var(--ds-blue-600);
  --stitch-surface: var(--ds-surface);
  --stitch-surface-low: var(--ds-surface-soft);
  --stitch-border: var(--ds-border);
  --stitch-text: var(--ds-ink);
  --stitch-muted: var(--ds-muted);
  --stitch-success: var(--ds-success);
}

body[data-ui-page] {
  color: var(--ds-ink);
  font-family: var(--ds-font-sans);
  -webkit-font-smoothing: antialiased;
}

body[data-ui-page] :is(button, input, select, textarea) {
  font-family: inherit;
}

body[data-ui-page] :is(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--ds-focus);
  outline-offset: 2px;
}

/* Shared tool headers. Geometry remains page-owned; surface treatment is shared. */
body[data-ui-page] :is(.statement-header, .finder-header, .plate-header, .redaction-header) {
  color: #fff;
  background: linear-gradient(135deg, var(--ds-navy-950), var(--ds-navy-800));
  border-color: rgba(255, 255, 255, .12);
  box-shadow: 0 8px 24px rgba(5, 25, 52, .18);
}

body[data-ui-page] :is(.statement-brand, .plate-brand, .redaction-brand) img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  background: var(--ds-surface);
  border-radius: var(--ds-radius-md);
}

body[data-ui-page] :is(.statement-brand, .plate-brand, .redaction-brand) small {
  color: #b9cae0;
  font-size: var(--ds-text-xs);
}

body[data-ui-page] :is(.header-actions a, .header-actions button, .home-link, .back-to-builder) {
  min-height: 42px;
  padding: 9px 13px;
  color: #fff;
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-bold);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .23);
  border-radius: var(--ds-radius-md);
}

body[data-ui-page] :is(.header-actions a, .header-actions button, .home-link, .back-to-builder):hover {
  color: #fff;
  background: rgba(255, 255, 255, .17);
}

/* Repeated application cards. Paper previews and drawing canvases are excluded. */
body[data-ui-page] :is(
  .workspace-card,
  .utility-card,
  .matter-card,
  .finder-result-card,
  .selected-lawparts,
  .statement-form-section,
  .template-picker,
  .redaction-panel,
  .plate-controls,
  .plate-preview-card,
  .card,
  .offender-card
) {
  background-color: var(--ds-surface);
  border-color: var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-md);
}

/* Canonical controls: 44px, 10px radius, blue primary, quiet secondary. */
body[data-ui-page] :is(
  button.primary,
  .primary-action,
  .download-button,
  .btn-primary,
  .print-button,
  .save-brief-button,
  .access-gate__submit
) {
  min-height: var(--ds-control-height);
  color: #fff;
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-bold);
  background: var(--ds-blue-600);
  border: 1px solid var(--ds-blue-600);
  border-radius: var(--ds-radius-md);
  box-shadow: none;
}

body[data-ui-page] :is(
  button.primary,
  .primary-action,
  .download-button,
  .btn-primary,
  .print-button,
  .save-brief-button,
  .access-gate__submit
):hover {
  background: var(--ds-blue-700);
  border-color: var(--ds-blue-700);
}

body[data-ui-page] :is(
  button.secondary,
  .secondary-action,
  .text-button,
  .btn:not(.btn-primary):not(.btn-danger)
) {
  min-height: var(--ds-control-height);
  color: var(--ds-navy-800);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-semibold);
  background: var(--ds-surface-soft);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  box-shadow: none;
}

body[data-ui-page] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select, textarea) {
  min-height: var(--ds-control-height);
  color: var(--ds-ink);
  background-color: var(--ds-surface);
  border-color: var(--ds-border-strong);
  border-radius: var(--ds-radius-sm);
  box-shadow: none;
}

body[data-ui-page] :is(button.primary, button.secondary, .btn, .primary-action, .secondary-action, .download-button) {
  border-radius: var(--ds-radius-md);
}

body[data-ui-page] :is(button:disabled, input:disabled, select:disabled, textarea:disabled) {
  cursor: not-allowed;
  opacity: .58;
}

body[data-ui-page] :is(.command-footer, .sidebar-footer, .selected-lawparts-note) {
  color: var(--ds-muted);
  font-size: var(--ds-text-xs);
}

body[data-ui-page] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select, textarea):focus {
  border-color: var(--ds-blue-600);
  box-shadow: 0 0 0 3px rgba(11, 94, 215, .1);
}

body[data-ui-page] .eyebrow {
  color: var(--ds-blue-700);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-bold);
  letter-spacing: .16em;
}

body[data-ui-page] :is(.save-status, .save-state) > span:first-child {
  background: var(--ds-success);
}

body[data-ui-page] :is(.finder-toast, .redaction-toast) {
  color: #fff;
  background: var(--ds-navy-900);
  border-radius: var(--ds-radius-sm);
  box-shadow: var(--ds-shadow-md);
}

/* Launcher and Timeline use custom shells, but share the same core surfaces. */
body[data-ui-page="launcher"] :is(.command-sidebar, .command-topbar),
body[data-ui-page="timeline"] .nav-bar {
  background-color: var(--ds-navy-950);
}

body[data-ui-page="launcher"] :is(.command-search, .matter-card, .workspace-card, .utility-card),
body[data-ui-page="timeline"] :is(.card, .toolbar input[type="search"]) {
  border-color: var(--ds-border);
}

body[data-ui-page="timeline"] :is(.nav-brand__icon, .offender-chip__avatar--placeholder, .offender-avatar--placeholder) {
  background: var(--ds-blue-600);
}

body[data-ui-page="timeline"] .access-gate {
  color: var(--ds-ink);
  background: var(--ds-navy-950);
  font-family: var(--ds-font-sans);
}

body[data-ui-page="timeline"] .access-gate__card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-lg);
}

/* The standalone opener follows the same card and action contract. */
body[data-ui-page="opener"] main {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  box-shadow: var(--ds-shadow-lg);
}

/* Brief Builder uses its persistent sidebar as the application shell. With no
   redundant desktop top bar, the editor and preview can use the full viewport. */
@media screen and (min-width: 901px) {
  body[data-ui-page="brief-builder"] main,
  body[data-ui-page="brief-builder"].sidebar-collapsed main {
    height: 100vh;
    margin-top: 0;
  }
}

body[data-ui-page="opener"] main a {
  min-height: var(--ds-control-height);
  border-radius: var(--ds-radius-md);
}

.stored-profiles-list {
  margin-top: var(--ds-space-3);
}

.visually-hidden-file {
  display: none;
}