/* AIRouter primitives — web/app/globals.css `@layer base` + `@layer components` + the
   unlayered touch/iOS block, @ 257104f3 (first extracted at 4c5a0778), with every Tailwind @apply expanded to plain CSS.
   Requires tokens.css. `hover:` utilities are wrapped in @media (hover: hover) because the
   app sets future.hoverOnlyWhenSupported. Showcase helpers are NOT in here. */

/* ── base ─────────────────────────────────────────────────────────────────── */
*, ::before, ::after { box-sizing: border-box; border: 0 solid var(--color-border); }
html { background-color: var(--color-bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, p { margin: 0; font-size: inherit; font-weight: inherit; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { background: transparent; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: inherit; }
table { border-collapse: collapse; text-indent: 0; }
code, kbd, pre, samp { font-family: var(--font-mono); }
* { scrollbar-width: thin; scrollbar-color: var(--color-border-strong) transparent; }

/* Tailwind default `transition-colors`. */
.card, .table-row, .btn-primary, .btn-secondary, .btn-danger, .btn-danger-outline, .btn-warning,
.btn-ghost, .link, .link-danger, .segmented > :is(button, a) {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* ── surfaces ─────────────────────────────────────────────────────────────── */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-raised);
  min-width: 0;
  overflow-wrap: break-word;
}

/* ── tables ───────────────────────────────────────────────────────────────── */
.table-container {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
}
.table-scroll { position: relative; overflow-x: auto; overscroll-behavior-x: contain; }
:where(.table-container, .table-scroll) :where(td, th) { overflow-wrap: normal; }
@media (max-width: 1023.98px) {
  :where(.table-container, .table-scroll) :where(td:not(:last-child)) { min-width: 5.5rem; }
}
.table-head { background: var(--color-surface); border-bottom: 1px solid var(--color-border); color: var(--color-muted); }
.table-head :is(th, td) { font-weight: 400; }
.table-row { border-bottom: 1px solid var(--color-divider); }
.table-row:last-child { border-bottom: 0; }
@media (hover: hover) { .table-row:hover { background: var(--color-surface-2); } }
@media (max-width: 1023.98px) {
  .table-scroll-sticky :is(th, td):first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: var(--color-surface);
    box-shadow: inset 0 -1px 0 var(--color-divider), inset -1px 0 0 var(--color-border);
  }
  :where(.table-scroll-sticky) :where(tr) { background-color: var(--color-surface); }
  .table-scroll-sticky thead :is(th, td):first-child { background-color: var(--color-surface); }
}

/* ── forms ────────────────────────────────────────────────────────────────── */
.field { display: grid; gap: 6px; min-width: 0; }
.form-label { font-size: 0.875rem; line-height: 1.25rem; font-weight: 400; color: var(--color-muted); }
.form-input, .form-select {
  border: 1px solid var(--color-border-control);
  background-color: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-control);
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  transition-property: border-color, box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  min-height: 44px;
}
.form-input::placeholder { color: var(--color-faint); opacity: 1; }
.form-input[type="search"] { border-radius: 9999px; }
textarea.form-input { min-height: 80px; }
.form-input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.form-input[type="number"]::-webkit-inner-spin-button,
.form-input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.form-file { font-size: 0.875rem; line-height: 1.25rem; color: var(--color-muted); max-width: 100%; }
.form-file::file-selector-button {
  margin-right: 0.75rem; display: inline-flex; min-height: 2.25rem; cursor: pointer; align-items: center;
  border-radius: var(--radius-pill); border: 1px solid var(--color-border-control);
  background: var(--color-surface); padding: 0 1rem; font-size: 0.875rem; font-weight: 500;
  color: var(--color-text); font-family: inherit;
}
@media (hover: hover) { .form-file:hover::file-selector-button { background: var(--color-surface-2); } }
.form-input:focus, .form-select:focus {
  outline: none;
  border-color: var(--color-focus);
  box-shadow: 0 0 0 2px var(--color-focus), 0 0 0 5px color-mix(in srgb, var(--color-focus) 22%, transparent);
}
.form-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.25rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-muted) 50%),
    linear-gradient(135deg, var(--color-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

/* ── type roles ───────────────────────────────────────────────────────────── */
.page-title { font-weight: 300; font-size: clamp(1.875rem, 6vw, 2.5rem); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
.eyebrow { font-size: 13px; color: var(--color-muted); margin-bottom: 4px; }
.page-sub { font-size: 0.875rem; line-height: 1.25rem; color: var(--color-muted); margin-top: 6px; max-width: 60ch; text-wrap: pretty; }
.card-title { font-size: 19px; line-height: 1.3; letter-spacing: -0.01em; font-weight: 400; color: var(--color-text); text-wrap: balance; }
.stat-label { font-size: 13px; color: var(--color-muted); letter-spacing: 0.005em; }
.stat-value {
  font-family: var(--font-num); font-weight: 300; color: var(--color-text);
  line-height: 1.15; letter-spacing: -0.02em; font-size: clamp(24px, 7vw, 30px);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.hint { color: var(--color-faint); font-size: 12.5px; letter-spacing: 0.01em; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
/* <Amount> — globals.css @ 257104f3; the only place money typography lives */
.amount { font-family: var(--font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.amount-sep { font-size: 0.5em; }
.amount-frac { font-size: 0.75em; }
.amount-ccy { font-size: 0.75em; color: var(--color-muted); letter-spacing: 0.02em; }

/* ── buttons ──────────────────────────────────────────────────────────────── */
.btn-primary, .btn-secondary, .btn-danger, .btn-danger-outline, .btn-warning, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 2.25rem; padding: 0.375rem 18px;
  border-radius: var(--radius-pill); border: 1px solid transparent;
  font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; white-space: nowrap;
}
:is(.btn-primary, .btn-secondary, .btn-danger, .btn-danger-outline, .btn-warning, .btn-ghost):focus-visible {
  outline: none; box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-focus);
}
:is(.btn-primary, .btn-secondary, .btn-danger, .btn-danger-outline, .btn-warning, .btn-ghost):disabled { opacity: 0.45; cursor: default; }
.btn-primary { background: var(--color-primary-solid); color: var(--color-primary-fg); }
.btn-secondary { background: var(--color-surface); border-color: var(--color-border-control); color: var(--color-text); }
.btn-danger { background: var(--color-danger-solid); color: #fff; }
.btn-danger-outline { background: var(--color-surface); border-color: var(--color-danger-border); color: var(--color-danger-fg); }
.btn-warning { background: var(--color-warning-solid); color: var(--color-warning-solid-fg); }
.btn-ghost { background: transparent; color: var(--color-text); padding-left: 0.75rem; padding-right: 0.75rem; }
@media (hover: hover) {
  .btn-primary:hover:not(:disabled) { background: var(--color-primary-solid-hover); }
  .btn-secondary:hover:not(:disabled), .btn-ghost:hover:not(:disabled) { background: var(--color-surface-2); }
  .btn-danger:hover:not(:disabled) { background: var(--color-danger-solid-hover); }
  .btn-danger-outline:hover:not(:disabled) { background: var(--color-danger-tint); }
  .btn-warning:hover:not(:disabled) { opacity: 0.9; }
}

/* ── links ────────────────────────────────────────────────────────────────── */
.link, .link-danger {
  display: inline-flex; align-items: center; gap: 0.25rem; border-radius: 0.125rem;
  background: transparent; padding: 0; font-size: 0.875rem; line-height: 1.25rem;
  text-underline-offset: 3px;
}
.link { color: var(--color-primary); }
.link-danger { color: var(--color-danger-fg); }
@media (hover: hover) { :is(.link, .link-danger):hover:not(:disabled) { text-decoration: underline; } }
:is(.link, .link-danger):focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-focus); }
:is(.link, .link-danger):disabled { cursor: default; opacity: 0.45; }

/* ── segmented ────────────────────────────────────────────────────────────── */
.segmented {
  display: inline-flex; max-width: 100%; gap: 0.125rem; border-radius: var(--radius-pill);
  background: var(--color-surface-2); padding: 3px 0 3px 3px; overflow-x: auto; scrollbar-width: none;
}
.segmented::after { content: ""; flex: none; width: 1px; }
.segmented::-webkit-scrollbar { display: none; }
.segmented > :is(button, a) {
  display: inline-flex; min-height: 38px; align-items: center; white-space: nowrap;
  border-radius: var(--radius-pill); padding: 0 0.875rem; font-size: 0.875rem; line-height: 1.25rem;
  color: var(--color-muted);
}
@media (hover: hover) { .segmented > :is(button, a):hover { color: var(--color-text); } }
.segmented > :is([aria-pressed="true"], [aria-selected="true"], [aria-current="page"]) {
  background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-raised);
}

/* ── badges ───────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 0.375rem; white-space: nowrap;
  border-radius: var(--radius-pill); padding: 0.125rem 0.625rem;
  font-size: 12.5px; line-height: 1.5; letter-spacing: 0.01em;
}
.badge-success { background: var(--color-success-tint); color: var(--color-success-fg); }
.badge-warning { background: var(--color-warning-tint); color: var(--color-warning-fg); }
.badge-error, .badge-danger { background: var(--color-danger-tint); color: var(--color-danger-fg); }
.badge-info { background: var(--color-info-tint); color: var(--color-info-fg); }
.badge-neutral { background: var(--color-surface-2); color: var(--color-muted); }
:is(.badge-success, .badge-warning, .badge-danger, .badge-error, .badge-info, .badge-dot):not(.badge-plain):not(select)::before {
  content: ""; width: 7px; height: 7px; border-radius: 9999px; background: currentColor; flex-shrink: 0;
}

/* ── modal / sheet ────────────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0; background: var(--color-scrim); z-index: 50;
  display: flex; align-items: flex-end; justify-content: center; padding: 0;
}
.modal-dialog {
  background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-modal);
  width: 100%; border-top-left-radius: var(--radius-sheet); border-top-right-radius: var(--radius-sheet);
  overflow-y: auto; max-height: 92vh; max-height: 92dvh; overscroll-behavior: contain;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  animation: sheet-up 0.28s var(--ease-standard);
}
.modal-dialog::before {
  content: ""; display: block; width: 36px; height: 4px; border-radius: 2px;
  background: var(--color-border-strong); margin: 8px auto 0;
}
@media (min-width: 640px) {
  .modal-backdrop { align-items: center; padding: 1rem; }
  .modal-dialog { width: auto; border-radius: 20px; padding-bottom: 0; }
  .modal-dialog::before { display: none; }
}
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── touch and iOS WebKit (unlayered in the app) ──────────────────────────── */
.h-dvh { height: 100vh; height: 100dvh; }
.min-h-dvh { min-height: 100vh; min-height: 100dvh; }
.pt-safe { padding-top: env(safe-area-inset-top, 0px); }
.pb-safe { padding-bottom: env(safe-area-inset-bottom, 0px); }
.pl-safe { padding-left: env(safe-area-inset-left, 0px); }
.px-safe { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
@media (pointer: coarse) {
  input:not([hidden]):not([type="checkbox"]):not([type="radio"]), select:not([hidden]), textarea:not([hidden]) { font-size: 16px; }
  .form-input.form-input, .form-select.form-select, .btn-primary.btn-primary, .btn-secondary.btn-secondary,
  .btn-danger.btn-danger, .btn-danger-outline.btn-danger-outline, .btn-warning.btn-warning,
  .btn-ghost.btn-ghost, .link.link, .link-danger.link-danger { min-height: 44px; }
  select:not([hidden]):not([multiple]):not([size]) { height: 44px; }
  thead button:not([role="switch"]), th button:not([role="switch"]), td button:not([role="switch"]), td a { min-height: 44px; min-width: 24px; }
  [role="switch"] { position: relative; }
  .segmented > :is(button, a) { min-height: 44px; }
  [role="switch"]::before { content: ""; position: absolute; inset: -8px 0; }
}
button, a, label, select, summary, [role="button"], [role="tab"] { touch-action: manipulation; }
@media (hover: none) { .hover-reveal { opacity: 1 !important; visibility: visible !important; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ── component recipes (Tailwind class strings from components/*.tsx, named) ─ */
/* Toggle — components/toggle.tsx */
.toggle {
  position: relative; display: inline-flex; height: 1.75rem; width: 46px; flex-shrink: 0; align-items: center;
  border-radius: 9999px; transition: background-color 200ms; cursor: pointer;
  background: var(--color-surface-3); box-shadow: inset 0 0 0 1px var(--color-faint);
}
.toggle[aria-checked="true"] { background: var(--color-info-solid); box-shadow: none; }
.toggle::after {
  content: ""; pointer-events: none; position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
  height: 22px; width: 22px; border-radius: 9999px; background: var(--color-surface);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.2); transition: transform 200ms;
}
.toggle[aria-checked="true"]::after { transform: translate(18px, -50%); }
.toggle:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-focus); }
.toggle:disabled { opacity: 0.5; cursor: not-allowed; }
/* Dot — components/ui/status.tsx */
.dot { display: inline-block; width: 7px; height: 7px; flex-shrink: 0; border-radius: 9999px; background: var(--color-border-strong); }
.dot-success { background: var(--color-success-solid); }
.dot-warning { background: var(--color-warning-solid); }
.dot-danger { background: var(--color-danger-solid); }
.dot-info { background: var(--color-info-solid); }
/* OverflowMenu panel + item — components/ui/overflow-menu.tsx */
.menu-panel { z-index: var(--z-overlay); min-width: 220px; max-width: calc(100vw - 16px); border-radius: 14px; border: 1px solid var(--color-border); background: var(--color-surface); padding: 0.375rem; box-shadow: var(--shadow-popover); }
.menu-item { display: flex; width: 100%; min-height: 2.75rem; align-items: center; gap: 0.625rem; border-radius: 10px; padding: 0 0.75rem; text-align: left; font-size: 0.875rem; color: var(--color-text); }
.menu-item:focus-visible { outline: none; background: var(--color-surface-2); }
.menu-item.is-danger { color: var(--color-danger-fg); }
@media (hover: hover) { .menu-item:hover { background: var(--color-surface-2); } .menu-item.is-danger:hover { background: var(--color-danger-tint); } }
/* Status strips — overview alert banner / inline success (role="status") */
.banner-danger { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1rem; border-radius: var(--radius-control); background: var(--color-danger-tint); color: var(--color-danger-fg); padding: 0.625rem 1rem; font-size: 0.875rem; line-height: 1.25rem; }
.banner-danger a { display: inline-flex; min-height: 2.75rem; align-items: center; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1024px) { .banner-danger a { min-height: 0; } }
.status-success { border-radius: var(--radius-control); background: var(--color-success-tint); color: var(--color-success-fg); padding: 0.75rem 0.875rem; font-size: 0.875rem; line-height: 1.25rem; }
/* 3px share / progress bar — overview, model-breakdown */
.bar { height: 3px; overflow: hidden; border-radius: 9999px; background: var(--color-surface-2); }
.bar > span { display: block; height: 100%; border-radius: 9999px; background: var(--color-primary-solid); }
/* Skeleton — DataTable.Loading */
.skeleton { height: 0.75rem; border-radius: 0.25rem; background: var(--color-surface-2); animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes pulse { 50% { opacity: 0.5; } }

/* «Columns» — components/table-columns-menu.tsx (Tailwind strings translated) */
.cols-wrap { position: relative; min-width: 0; }
.cols-wrap table tr > .is-last { padding-right: 3rem; }
.cols-btn { position: absolute; right: 1px; top: 1px; z-index: 3; display: inline-flex; height: 2.25rem; width: 2.25rem; align-items: center; justify-content: center; border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-muted); transition: color 150ms; }
.cols-btn:hover, .cols-btn:focus-visible { color: var(--color-text); }
.cols-btn[aria-expanded="true"] { color: var(--color-primary); }
.cols-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
@media (pointer: coarse) { .cols-btn { height: 2.75rem; width: 2.75rem; } .cols-wrap thead th { height: 2.75rem; } }
.cols-panel { z-index: var(--z-overlay); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); padding: 0.375rem; box-shadow: var(--shadow-popover); }
.cols-panel.is-pop { width: 280px; max-height: calc(100dvh - 16px); overflow-y: auto; border-radius: 14px; }
.cols-panel.is-sheet { max-height: 80dvh; overflow-y: auto; border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; padding-bottom: max(0.375rem, env(safe-area-inset-bottom)); }
.cols-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.375rem 0.75rem 0; }
.cols-head > span { font-size: 0.875rem; font-weight: 500; }
.cols-reset { min-height: 2.75rem; padding: 0 0.25rem; font-size: 0.875rem; color: var(--color-primary); }
.cols-reset:hover { color: var(--color-primary-hover); }
.cols-hint { padding: 0 0.75rem 0.375rem; font-size: 0.75rem; line-height: 1rem; color: var(--color-muted); }
.cols-row { display: flex; align-items: center; border-radius: 10px; }
.cols-row.is-drag { background: var(--color-surface-2); }
.cols-grip { display: inline-flex; height: 2.75rem; width: 2.75rem; flex-shrink: 0; align-items: center; justify-content: center; color: var(--color-faint); cursor: grab; touch-action: none; }
.cols-grip:hover { color: var(--color-text); }
.cols-grip:active { cursor: grabbing; }
.cols-grip:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -4px; border-radius: 10px; }
.cols-row label { display: flex; min-height: 2.75rem; min-width: 0; flex: 1; cursor: pointer; align-items: center; gap: 0.625rem; padding-right: 0.75rem; font-size: 0.875rem; }
.cols-row label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-drop { box-shadow: inset 2px 0 0 var(--color-primary); }
@media (pointer: fine) { th[draggable="true"] { cursor: grab; } }

/* NotificationStack — components/ui/notification-stack.tsx */
.nstack { position: relative; z-index: var(--z-dropdown); outline: none; }
.nstack ul, .cols-panel ul { list-style: none; margin: 0; padding: 0; }
.nstack > ul { position: relative; }
.nb { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1rem; border-radius: var(--radius-control); padding: 0.625rem 1rem; font-size: 0.875rem; line-height: 1.25rem; }
.nb.t-danger { background: var(--color-danger-tint); color: var(--color-danger-fg); }
.nb.t-warning { background: var(--color-warning-tint); color: var(--color-warning-fg); }
.nb.t-info { background: var(--color-info-tint); color: var(--color-info-fg); }
.nb > p, .nb > div { display: flex; align-items: center; transition: opacity var(--duration-slow) var(--ease-standard); }
.nb > p { min-width: 0; gap: 0.5rem; }
.nb > div { flex-shrink: 0; gap: 0 1rem; }
.nb.is-faded > p, .nb.is-faded > div { opacity: 0; }
.nb-link { display: inline-flex; min-height: 2.75rem; flex-shrink: 0; align-items: center; text-decoration: underline; text-underline-offset: 3px; }
.nb-link:hover { text-decoration: none; }
.nb-x { margin: 0 -0.5rem; display: inline-flex; min-height: 2.75rem; min-width: 2.75rem; align-items: center; justify-content: center; border-radius: 9999px; opacity: 0.8; }
.nb-x:hover { opacity: 1; }
@media (min-width: 1024px) { .nb-link { min-height: 0; } .nb-x { min-height: 1.75rem; min-width: 1.75rem; } }
.nstack li.layer { position: absolute; left: 0; right: 0; top: 0; transform-origin: bottom; padding-top: 8px; transition: transform var(--duration-slow) var(--ease-standard), opacity var(--duration-slow) var(--ease-standard); }
.nstack li.layer > div { overflow: hidden; border-radius: var(--radius-control); transition: height var(--duration-slow) var(--ease-standard), box-shadow var(--duration-slow) var(--ease-standard); }
.nstack[data-expanded="true"] li.layer { background: var(--color-bg); }
.nstack[data-expanded="true"] li.layer > div { box-shadow: var(--shadow-popover); }
.nstack[data-expanded="false"] li.layer { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .nstack *, .nb > * { transition: none !important; } }

/* TrendKey — components/ui/trend-key.tsx */
.trend-key { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; line-height: 1rem; color: var(--color-muted); }