/* ==========================================================================
   SYMMETRA components — every control is defined ONCE here. The markup still
   carries several historical class names for the same thing (.btn.primary,
   .sym-btn--primary, .icon-btn, ...); they are all mapped to the same
   component so the app looks like one product.
   ========================================================================== */

@layer components {

  /* ---------------------------------------------------------------- buttons */
  .btn, .sym-btn, .icon-btn, .budget-act, .budget-toggle-all, .settings-tab-btn, .sym-owner-btn, .help-btn, .cp-btn {
    --btn-bg: var(--surface);
    --btn-fg: var(--text);
    --btn-border: var(--border-control);
    --btn-bg-hover: var(--surface-2);
    --btn-border-hover: var(--border-control-hover);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1-5);
    height: var(--control-md);
    padding: 0 var(--space-3);
    border: 1px solid var(--btn-border);
    border-radius: var(--radius-sm);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: var(--elev-1);
    cursor: pointer;
    user-select: none;
    transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out),
                color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), transform var(--dur-1);
  }
  .btn:hover:not(:disabled), .sym-btn:hover:not(:disabled), .icon-btn:hover:not(:disabled), .budget-act:hover:not(:disabled),
  .budget-toggle-all:hover, .sym-owner-btn:hover, .help-btn:hover, .cp-btn:hover {
    background: var(--btn-bg-hover);
    border-color: var(--btn-border-hover);
    text-decoration: none;
  }
  .btn:active:not(:disabled), .sym-btn:active:not(:disabled), .icon-btn:active:not(:disabled) { transform: translateY(.5px); }
  .btn:disabled, .sym-btn:disabled, .icon-btn:disabled, .btn.is-disabled, .budget-act:disabled {
    opacity: .5; cursor: not-allowed; box-shadow: none;
  }
  .btn svg, .sym-btn svg, .icon-btn svg, .budget-act svg { width: 16px; height: 16px; }

  /* primary */
  .btn.primary, .btn-primary, .sym-btn--primary, .btn.is-primary, .budget-act--primary {
    --btn-bg: var(--accent);
    --btn-fg: var(--on-accent);
    --btn-border: var(--accent);
    --btn-bg-hover: var(--accent-hover);
    --btn-border-hover: var(--accent-hover);
    background-image: var(--button-grad);
    box-shadow: var(--elev-1), inset 0 1px 0 rgba(255, 255, 255, .18), 0 6px 14px -6px rgba(76, 92, 255, .55);
  }
  .btn.primary:hover:not(:disabled), .btn-primary:hover:not(:disabled), .sym-btn--primary:hover:not(:disabled) {
    background-image: none; box-shadow: var(--elev-1), inset 0 1px 0 rgba(255, 255, 255, .18), 0 8px 18px -6px rgba(76, 92, 255, .6);
  }
  .btn.primary:active:not(:disabled), .sym-btn--primary:active:not(:disabled) { --btn-bg-hover: var(--accent-press); }
  /* soft / tonal */
  .sym-btn--soft, .btn.soft, .btn.tonal {
    --btn-bg: var(--accent-soft);
    --btn-fg: var(--accent-fg);
    --btn-border: transparent;
    --btn-bg-hover: var(--accent-soft-2);
    --btn-border-hover: transparent;
    box-shadow: none;
  }
  /* ghost */
  .btn.ghost, .sym-btn--ghost, .icon-btn, .btn.link {
    --btn-bg: transparent;
    --btn-border: transparent;
    --btn-bg-hover: var(--surface-3);
    --btn-border-hover: transparent;
    --btn-fg: var(--text-2);
    box-shadow: none;
  }
  /* danger */
  .btn.danger, .sym-btn--danger, .btn-danger {
    --btn-fg: var(--danger-fg);
    --btn-border: var(--danger-line);
    --btn-bg-hover: var(--danger-soft);
    --btn-border-hover: var(--danger);
  }
  .btn.primary.danger, .sym-btn--primary.sym-btn--danger {
    --btn-bg: var(--danger-fg); --btn-fg: #fff; --btn-border: var(--danger-fg);
    --btn-bg-hover: #912018; --btn-border-hover: #912018;
  }
  /* sizes */
  .btn.small, .btn-compact, .sym-btn--sm, .btn.sm, .budget-act {
    height: var(--control-sm); padding: 0 var(--space-2-5); font-size: var(--text-xs);
  }
  .btn.small svg, .btn-compact svg, .sym-btn--sm svg { width: 14px; height: 14px; }
  .btn.large, .sym-btn--lg { height: var(--control-lg); padding: 0 var(--space-4); font-size: var(--text-md); }
  .sym-btn--block, .btn.block { display: flex; width: 100%; }
  /* icon-only */
  .btn.icon-only, .btn-icon-only, .icon-btn, .btn-utility, .help-btn.icon-only {
    width: var(--control-md); padding: 0; gap: 0;
  }
  .btn.small.icon-only, .btn-compact.icon-only { width: var(--control-sm); }
  .icon-btn { font-size: 20px; line-height: 1; color: var(--muted); }
  /* utility buttons (report exports / AI) — quiet squares around brand glyphs */
  .btn-utility { --btn-bg: var(--surface); }
  .btn-utility--ai { --btn-fg: var(--accent-fg); }
  .btn-utility .office-export-icon, .btn-export-glyph { display: inline-flex; }
  .btn.is-working, .sym-btn.is-working { position: relative; color: transparent !important; pointer-events: none; }
  .btn.is-working::after, .sym-btn.is-working::after {
    content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid currentColor; border-color: var(--btn-fg) transparent var(--btn-fg) transparent;
    animation: sym-spin .7s linear infinite;
  }
  @keyframes sym-spin { to { transform: rotate(360deg); } }
  /* phones: a long label wraps inside its button instead of pushing the page wider */
  @media (max-width: 640px) {
    .btn:not(.icon-only):not(.btn-icon-only):not(.btn-utility), .sym-btn {
      max-width: 100%; white-space: normal; height: auto; min-height: var(--control-md);
      padding-top: 6px; padding-bottom: 6px; line-height: 1.25; text-align: center;
    }
  }

  /* button groups / segmented controls */
  .btn-group, .segmented, .report-scope-toggle, .rtb-seg, .budget-segment, .cashflow-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
  }
  .report-scope-toggle button, .segmented button, .btn-group > .btn, .rtb-seg button {
    height: calc(var(--control-sm) - 2px);
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
    box-shadow: none;
    transition: background-color var(--dur-2), color var(--dur-2), box-shadow var(--dur-2);
  }
  .report-scope-toggle button:hover, .segmented button:hover, .btn-group > .btn:hover { color: var(--text); background: transparent; }
  .report-scope-toggle button[aria-selected="true"], .segmented button.is-active, .segmented button[aria-pressed="true"],
  .btn-group > .btn.active, .btn-group > .btn.is-active, .rtb-seg button.is-active {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--elev-1), 0 0 0 1px var(--border);
  }

  /* ------------------------------------------------------------- form bits */
  .form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3) var(--space-4);
  }
  .form-grid > label, .field, .sym-field, .form-field {
    display: flex; flex-direction: column; gap: var(--space-1-5);
    font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--text-2);
    min-width: 0;
  }
  .form-grid > label > span { font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--text-2); }
  .form-grid > label input, .form-grid > label select, .form-grid > label textarea { width: 100%; }
  .form-grid .span-2, .form-grid > .full { grid-column: 1 / -1; }
  /* group members: pick + the share the group owns */
  .group-members-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-1-5); }
  .group-members { display: flex; flex-direction: column; gap: var(--space-1); max-height: 280px; overflow: auto; margin-bottom: var(--space-2); }
  .group-member { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 32px; }
  .group-member__pick { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text); font-weight: var(--fw-regular); min-width: 0; }
  .group-member__own { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-2); font-size: var(--text-sm); flex-shrink: 0; }
  .group-member__own input { width: 84px; text-align: right; font-variant-numeric: tabular-nums; }
  .sym-field label { font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--text-2); text-transform: none; letter-spacing: 0; }
  .sym-input { width: 100%; }
  .sym-input-wrap { position: relative; display: flex; align-items: center; }
  .sym-input-wrap .sym-input { padding-right: 38px; }
  .sym-reveal {
    position: absolute; right: 4px; width: 30px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--subtle); border-radius: var(--radius-sm);
  }
  .sym-reveal:hover { color: var(--text); background: var(--surface-3); }
  .sym-reveal svg { width: 16px; height: 16px; }
  .field-hint, .sym-hint, .form-hint { font-size: var(--text-xs); color: var(--muted); font-weight: var(--fw-regular); }
  .field-error, .sym-error { font-size: var(--text-xs); color: var(--danger-fg); }
  .search-input, input[type="search"] {
    padding-left: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237683a0' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 10px center;
  }

  /* ------------------------------------------------------------------- tabs */
  .settings-tabbar, .tabbar, .sym-tabs {
    display: flex; align-items: flex-end; gap: var(--space-1);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-4);
    overflow-x: auto;
  }
  .settings-tab, .tab, .sym-tab {
    position: relative;
    height: 38px;
    padding: 0 var(--space-3);
    background: none; border: 0;
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    white-space: nowrap;
    transition: color var(--dur-2);
  }
  .settings-tab:hover, .tab:hover, .sym-tab:hover { color: var(--text); }
  .settings-tab.is-active, .tab.active, .tab.is-active, .sym-tab.is-active, .settings-tab[aria-selected="true"] { color: var(--text); }
  .settings-tab.is-active::after, .tab.active::after, .tab.is-active::after, .sym-tab.is-active::after {
    content: ""; position: absolute; left: var(--space-2); right: var(--space-2); bottom: -1px; height: 2px;
    border-radius: 2px 2px 0 0; background: var(--accent);
  }

  /* --------------------------------------------------------- panels / cards */
  .panel, .card, .side-box, .sym-card, .settings-card, .settings-inline-panel > .panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--elev-1), var(--inner-highlight);
    padding: var(--space-4);
    min-width: 0;
  }
  .panel + .panel, .card + .card { margin-top: var(--space-4); }
  .panel-title-row, .panel-head, .card-head, .section-head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    margin-bottom: var(--space-3);
    min-height: var(--control-md);
  }
  .panel-title, .panel h2, .panel h3:first-child, .card-title, .section-title {
    font-size: var(--text-md); line-height: var(--lh-md); font-weight: var(--fw-semibold); color: var(--text); margin: 0;
  }
  .panel-subtitle, .panel-desc, .section-desc { font-size: var(--text-xs); color: var(--muted); }
  .directory-heading { display: flex; align-items: center; gap: var(--space-2); }

  /* stat / KPI tiles */
  .stats-grid, .kpi-grid, .overview-stats, .gl-preview-metrics {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: var(--space-3);
  }
  .stat-card, .kpi, .kpi-card, .metric {
    position: relative;
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    min-width: 0;
  }
  .stat-value, .kpi-value, .metric-value {
    font-size: var(--text-2xl); line-height: var(--lh-2xl); font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-tight); color: var(--text);
    font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .stat-label, .kpi-label, .metric-label { font-size: var(--text-xs); color: var(--muted); font-weight: var(--fw-medium); }
  .stat-hint { font-size: var(--text-xs); color: var(--subtle); }

  /* empty states */
  .empty-state, .sym-empty, .preview-empty, .report-empty, .mapping-empty, .overview-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
    padding: var(--space-8) var(--space-4);
    color: var(--muted); text-align: center; font-size: var(--text-sm);
    border: 1px dashed var(--border-strong); border-radius: var(--radius-md);
    background: var(--surface-2);
  }
  .empty-state strong, .empty-state h3, .report-empty strong { color: var(--text); font-weight: var(--fw-semibold); font-size: var(--text-md); }

  /* --------------------------------------------------------- badges & pills */
  .pill, .badge, .status-badge, .sym-badge, .status, .chip, .co-chip, .tag,
  .coa-statement-pill, .coa-category-pill, .coa-fsli-pill, .cashflow-category-pill, .cashflow-stats-pill,
  .cashflow-status-badge, .gl-column-pill, .report-freshness, .mapping-status-button {
    display: inline-flex; align-items: center; gap: 5px;
    height: 22px; padding: 0 8px;
    border: 1px solid var(--neutral-line);
    border-radius: var(--radius-pill);
    background: var(--neutral-soft);
    color: var(--neutral-fg);
    font-size: var(--text-2xs);
    line-height: 1;
    font-weight: var(--fw-medium);
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
  }
  .pill::before, .status-badge::before, .report-freshness__dot, .mapping-status-dot, .cashflow-status-badge::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; flex: none;
  }
  .report-freshness::before { content: none; }
  .pill:empty::before { display: none; }
  /* tones */
  .is-success, .status-badge.success, .status-badge.approved, .status-badge.mapped, .badge-success, .pill.success, .pill.good,
  .cashflow-status-mapped, .status.ok, .status.approved, .report-freshness {
    border-color: var(--success-line); background: var(--success-soft); color: var(--success-fg);
  }
  .is-warning, .status-badge.warning, .status-badge.pending, .status-badge.unmapped, .badge-warning, .pill.warning, .pill.warn,
  .cashflow-status-unmapped, .status.warn, .status.pending, .status.draft, .report-freshness--empty {
    border-color: var(--warning-line); background: var(--warning-soft); color: var(--warning-fg);
  }
  .is-danger, .status-badge.error, .status-badge.danger, .badge-danger, .pill.danger, .pill.error, .status.error, .status.fail {
    border-color: var(--danger-line); background: var(--danger-soft); color: var(--danger-fg);
  }
  .is-info, .status-badge.info, .badge-info, .pill.info, .status.info, .pill.is-accent {
    border-color: var(--info-line); background: var(--info-soft); color: var(--info-fg);
  }
  .status-badge.editable { border-color: var(--success-line); background: var(--success-soft); color: var(--success-fg); }
  .status-badge.locked, .status.locked { border-color: var(--neutral-line); background: var(--neutral-soft); color: var(--neutral-fg); }
  .pill.is-neutral { border-color: var(--neutral-line); background: var(--neutral-soft); color: var(--neutral-fg); }
  .co-chip, .chip { padding: 0 8px 0 6px; font-weight: var(--fw-medium); }
  .co-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
  .co-chip--blue::before { background: var(--chart-1); }
  .co-chip--purple::before { background: var(--chart-5); }
  .co-chip--teal::before { background: var(--chart-2); }
  .co-chip--amber::before { background: var(--chart-3); }

  /* avatar / monogram */
  .sym-avatar, .co-badge, .avatar {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 28px; height: 28px; border-radius: var(--radius-sm);
    background: var(--accent-soft); color: var(--accent-fg);
    font-size: var(--text-2xs); font-weight: var(--fw-semibold); letter-spacing: .02em;
  }
  .sym-avatar { border-radius: 50%; background: linear-gradient(135deg, #3b6cf6, #6f8bff); color: #fff; }
  .co-badge--purple { background: rgba(124, 58, 237, .1); color: #6d28d9; }
  .co-badge--blue { background: var(--accent-soft); color: var(--accent-fg); }
  .co-badge--teal { background: rgba(13, 148, 136, .1); color: #0f766e; }
  .co-badge--amber { background: rgba(217, 119, 6, .12); color: #b45309; }
  :root[data-theme="dark"] .co-badge--purple { color: #c4b5fd; background: rgba(167, 139, 250, .14); }
  :root[data-theme="dark"] .co-badge--teal { color: #5eead4; }
  :root[data-theme="dark"] .co-badge--amber { color: #fcd34d; }

  /* ----------------------------------------------------------------- tables */
  .table-scroll, .table-wrap, .grid-wrap, .sym-table-wrap {
    width: 100%; overflow: auto;
    border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--surface);
  }
  .panel > .table-scroll:last-child, .panel > .table-wrap:last-child { margin-bottom: 0; }
  table.grid, table.simple, table.mapping-table, table.sym-users-table, .sym-table, table.data, table.coa-grid,
  table.coa-global-grid, table.budget-grid, .cashflow-workbench-table, .settings-inline-panel table, .modal table:not(.report) {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--text-sm);
    background: var(--surface);
  }
  table.grid th, table.simple th, table.mapping-table th, table.sym-users-table th, .sym-table th, table.data th,
  table.coa-grid th, table.coa-global-grid th, table.budget-grid th, .cashflow-workbench-table th,
  .settings-inline-panel table th, .modal table:not(.report) th {
    position: sticky; top: 0; z-index: 1;
    height: 34px;
    padding: 0 var(--space-3);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    color: var(--muted);
    font-size: var(--text-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
    vertical-align: middle;
  }
  table.grid td, table.simple td, table.mapping-table td, table.sym-users-table td, .sym-table td, table.data td,
  table.coa-grid td, table.coa-global-grid td, table.budget-grid td, .cashflow-workbench-table td,
  .settings-inline-panel table td, .modal table:not(.report) td {
    height: var(--row-h);
    padding: var(--space-1-5) var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text);
    vertical-align: middle;
  }
  table.grid tbody tr:last-child td, table.simple tbody tr:last-child td, .sym-table tbody tr:last-child td,
  table.coa-global-grid tbody tr:last-child td, .cashflow-workbench-table tbody tr:last-child td { border-bottom: 0; }
  table.grid tbody tr, table.simple tbody tr, .sym-table tbody tr, table.coa-global-grid tbody tr,
  .cashflow-workbench-table tbody tr, table.mapping-table tbody tr { transition: background-color var(--dur-1); }
  table.grid tbody tr:hover td, table.simple tbody tr:hover td, .sym-table tbody tr:hover td,
  table.coa-global-grid tbody tr:hover td, .cashflow-workbench-table tbody tr:hover td, table.mapping-table tbody tr:hover td {
    background: var(--row-hover);
  }
  tr[onclick], tr[role="button"] { cursor: pointer; }
  table.grid.compact td, table.compact td { height: var(--row-h-compact); padding-top: 3px; padding-bottom: 3px; }
  table td.right, table th.right, table td.num, table th.num { text-align: right; white-space: nowrap; }
  table td input, table td select { height: var(--control-sm); font-size: var(--text-xs); }
  table td .btn + .btn { margin-left: var(--space-1); }
  .action-cell { white-space: nowrap; text-align: right; width: 1%; }
  .action-cell .btn + .btn { margin-left: var(--space-1); }

  /* ------------------------------------------------------------ modals */
  .modal-backdrop, .sym-modal-backdrop, .cf-breakdown-backdrop {
    position: fixed; inset: 0; z-index: var(--z-overlay);
    background: var(--scrim);
    backdrop-filter: blur(2px);
    animation: sym-fade-in var(--dur-3) var(--ease-out);
  }
  .modal-shell {
    position: fixed; inset: 0; z-index: var(--z-modal);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 8vh var(--space-4) var(--space-6);
    overflow-y: auto;
    background: var(--scrim);
    animation: sym-fade-in var(--dur-3) var(--ease-out);
  }
  .modal-shell.hidden, .modal-backdrop.hidden { display: none !important; }
  .modal, .sym-modal, .cf-breakdown-modal {
    position: relative;
    width: min(640px, 100%);
    max-height: calc(100vh - 12vh - var(--space-6));
    display: flex; flex-direction: column;
    background: var(--surface-overlay);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--elev-3), var(--inner-highlight);
    overflow: hidden;
    animation: sym-pop-in var(--dur-3) var(--ease-out);
  }
  .modal.wide, .modal-wide, .sym-modal--wide, .modal.large, .unmapped-accounts-modal { width: min(1040px, 100%); }
  .modal.xl, .modal-xl { width: min(1280px, 100%); }
  .modal.small, .modal-sm, .sym-modal--sm { width: min(440px, 100%); }
  .modal-head, .sym-modal__head, .sym-modal-head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--border);
    min-height: 52px;
  }
  .modal-head h3, .modal-head h2, .sym-modal__title { font-size: var(--text-md); font-weight: var(--fw-semibold); margin: 0; color: var(--text); }
  .modal-body, .sym-modal__body, .sym-modal-body { padding: var(--space-5); overflow: auto; flex: 1 1 auto; min-height: 0; }
  .modal-foot, .sym-modal__foot, .sym-modal-foot {
    display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--border);
    background: var(--surface-2);
  }
  @keyframes sym-fade-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes sym-pop-in { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }
  @media (max-width: 640px) {
    .modal-shell { padding: var(--space-3); align-items: flex-end; }
    .modal, .sym-modal { width: 100%; max-height: calc(100vh - 24px); border-radius: var(--radius-lg) var(--radius-lg) var(--radius-md) var(--radius-md); }
    .form-grid { grid-template-columns: 1fr; }
  }

  /* ------------------------------------------------------------ toasts */
  .toast-viewport, #symmetra-auth-toasts, .sym-toasts {
    position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: var(--z-toast);
    display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-end;
    pointer-events: none; max-width: min(420px, calc(100vw - 32px));
  }
  .toast, .sym-toast {
    pointer-events: auto;
    display: flex; align-items: flex-start; gap: var(--space-2-5);
    min-width: 260px; max-width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--surface-inverse);
    color: var(--text-inverse);
    border-radius: var(--radius-md);
    box-shadow: var(--elev-3);
    font-size: var(--text-sm);
    line-height: var(--lh-sm);
    animation: sym-toast-in var(--dur-3) var(--ease-out);
  }
  .toast::before, .sym-toast::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--info); }
  .toast-success::before, .sym-toast--success::before { background: var(--success); }
  .toast-error::before, .sym-toast--error::before { background: var(--danger); }
  .toast-warning::before, .sym-toast--warning::before { background: var(--warning); }
  .toast-body { flex: 1; min-width: 0; }
  .toast .icon-btn, .sym-toast .icon-btn { color: inherit; opacity: .6; height: 20px; width: 20px; }
  @keyframes sym-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

  /* ---------------------------------------------------- menus / popovers */
  .menu, .dropdown-menu, .sym-menu, .popover, .ai-menu, .context-menu {
    background: var(--surface-overlay);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--elev-2);
    padding: var(--space-1);
    min-width: 200px;
    z-index: var(--z-dropdown);
  }
  .menu-item, .dropdown-item, .sym-menu__item, .ai-menu-item {
    display: flex; align-items: center; gap: var(--space-2); width: 100%;
    height: var(--control-md); padding: 0 var(--space-2-5);
    border-radius: var(--radius-sm); color: var(--text); font-size: var(--text-sm); text-align: left;
  }
  .menu-item:hover, .dropdown-item:hover, .sym-menu__item:hover, .ai-menu-item:hover { background: var(--surface-3); }

  /* ----------------------------------------------------- notices / banners */
  .notice, .banner, .alert, .callout, .warning-box, .info-box, .error-box, .sym-login-error.is-shown, .sym-banner {
    display: flex; align-items: flex-start; gap: var(--space-2-5);
    padding: var(--space-2-5) var(--space-3);
    border: 1px solid var(--info-line);
    border-radius: var(--radius-md);
    background: var(--info-soft);
    color: var(--info-fg);
    font-size: var(--text-sm);
  }
  .notice.warning, .banner.warning, .alert-warning, .warning-box, .notice.warn { border-color: var(--warning-line); background: var(--warning-soft); color: var(--warning-fg); }
  .notice.error, .banner.error, .alert-error, .alert-danger, .error-box, .sym-login-error.is-shown { border-color: var(--danger-line); background: var(--danger-soft); color: var(--danger-fg); }
  .notice.success, .banner.success, .alert-success { border-color: var(--success-line); background: var(--success-soft); color: var(--success-fg); }

  /* tooltips via title stay native; the help coach */
  .coach, .sym-coach { font-size: var(--text-sm); }

  /* progress */
  progress, .progress { width: 100%; height: 6px; border-radius: 999px; overflow: hidden; background: var(--surface-3); appearance: none; border: 0; }
  progress::-webkit-progress-bar { background: var(--surface-3); }
  progress::-webkit-progress-value { background: var(--accent); border-radius: 999px; }
  .progress > span, .progress-bar { display: block; height: 100%; background: var(--accent); border-radius: inherit; }

  /* skeleton */
  .skeleton, .sym-skeleton {
    background: linear-gradient(90deg, var(--surface-3) 0%, var(--surface-2) 50%, var(--surface-3) 100%);
    background-size: 200% 100%; animation: sym-shimmer 1.4s linear infinite; border-radius: var(--radius-sm);
  }
  @keyframes sym-shimmer { to { background-position: -200% 0; } }

  /* key–value lists */
  dl.kv, .kv-list { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1-5) var(--space-4); font-size: var(--text-sm); }
  dl.kv dt, .kv-list dt { color: var(--muted); }
  dl.kv dd, .kv-list dd { margin: 0; color: var(--text); }
}

@layer components {
  /* an icon with no size of its own never renders at the width of its container */
  button svg:not([width]), label.btn svg:not([width]), a.btn svg:not([width]) { width: 16px; height: 16px; }

  /* AI tool cards (report AI menu, smart AI menus) */
  .ai-menu-modal .modal-body { display: flex; flex-direction: column; gap: var(--space-2); }
  .ai-menu-card {
    display: flex; align-items: flex-start; gap: var(--space-3); width: 100%; text-align: left;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface);
    transition: border-color var(--dur-2), background-color var(--dur-2), transform var(--dur-1);
  }
  .ai-menu-card:hover { border-color: var(--accent-soft-2); background: var(--accent-soft); }
  .ai-menu-card__icon {
    width: 36px; height: 36px; flex: none; border-radius: var(--radius-md);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent-fg);
  }
  .ai-menu-card__icon svg { width: 18px !important; height: 18px !important; }
  .ai-menu-card__icon .office-export-icon { --export-icon-size: 20px !important; width: 20px; height: 20px; }
  .ai-menu-card__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .ai-menu-card__title { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text); }
  .ai-menu-card__desc { font-size: var(--text-xs); color: var(--muted); line-height: 1.45; }
}

@layer components {
  /* every dialog-header close button gets the same drawn icon, whatever character the markup carries */
  .modal-head .icon-btn, .cf-breakdown-modal .icon-btn.close, .coach-close {
    width: 30px; height: 30px; padding: 0; font-size: 0; color: var(--muted); position: relative; flex: none;
  }
  .modal-head .icon-btn::before, .coach-close::before {
    content: ""; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .modal-head .icon-btn:hover, .coach-close:hover { color: var(--text); }
  .modal-head .icon-btn svg { display: none; }

  /* dialogs that hold a data table get room for it */
  .modal:has(table):not(.small):not(.modal-sm) { width: min(1040px, 100%); }
  .modal table td input:not([type="checkbox"]):not([type="radio"]) { width: 100%; min-width: 90px; }
  .modal table td input[type="number"], .modal table td input[inputmode="decimal"], .modal table td.right input { text-align: right; font-variant-numeric: tabular-nums; }

  /* inline meta strips ("Company · 16 approved mappings …") */
  .company-meta-strip, .meta-strip { display: flex; flex-wrap: wrap; gap: var(--space-1-5) var(--space-3); font-size: var(--text-xs); color: var(--muted); margin-bottom: var(--space-2); }
  .company-meta-strip > span + span::before, .meta-strip > span + span::before { content: "·"; margin-right: var(--space-3); color: var(--subtle); }
}

/* ---- the app's dropdown list (scripts/modules/symmetra-select.js) ------------------------------------- */
@layer components {
  .sym-select {
    position: fixed; z-index: calc(var(--z-modal) + 1); display: flex; flex-direction: column; /* body-level list: must clear dialogs (--z-modal) it opens from */
    max-height: min(360px, 60vh); padding: 4px;
    background: var(--surface-overlay); border: 1px solid var(--border); border-radius: var(--radius-md);
    box-shadow: var(--elev-3); font-size: var(--text-sm); color: var(--text);
    animation: sym-select-in var(--dur-2) var(--ease-out);
  }
  @keyframes sym-select-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
  .sym-select__search { padding: 2px 2px 6px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 4px; }
  .sym-select__search input { width: 100%; height: 28px; font-size: var(--text-sm); }
  .sym-select__list { overflow-y: auto; overscroll-behavior: contain; }
  .sym-select__opt {
    display: flex; align-items: center; gap: var(--space-2); min-height: 30px; padding: 0 var(--space-2) 0 var(--space-1);
    border-radius: var(--radius-sm); cursor: pointer; line-height: 1.3; white-space: nowrap;
  }
  .sym-select__opt.is-active { background: var(--accent-soft); color: var(--accent-fg); }
  .sym-select__opt.is-selected { font-weight: var(--fw-semibold); }
  .sym-select__opt.is-disabled { opacity: .45; cursor: default; }
  .sym-select__check { width: 16px; flex: none; text-align: center; color: var(--accent); font-size: var(--text-xs); }
  .sym-select__text { overflow: hidden; text-overflow: ellipsis; }
  .sym-select__group { padding: var(--space-2) var(--space-2) 2px; font-size: var(--text-2xs); font-weight: var(--fw-semibold);
    color: var(--subtle); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
  .sym-select__empty { padding: var(--space-2); color: var(--muted); font-size: var(--text-xs); }
  select.sym-select-open { border-color: var(--focus-border); box-shadow: var(--focus-ring); }
}