/* kat-ui.css - Katalog shared component library.
   Load AFTER theme.css. Every value below resolves to a theme.css token; no
   literal colours, radii, durations or spacing should appear in this file.

   The point of this file is that a screen is ASSEMBLED, not styled. If you find
   yourself writing button or input CSS in a page's <style> block, the component
   is missing here - add it here instead so all 30 pages inherit it.

   Contents
     1  layout primitives + section heads
     2  cards + surfaces
     3  typography helpers
     4  buttons
     5  form controls
     6  chips, badges, meters
     7  tables
     8  tabs, segmented controls, popovers
     9  modals
    10  loading (skeletons) + empty states
    11  feedback (banners)
    12  scroll reveal
    13  grids + responsive
*/

/* ==========================================================================
   1 · LAYOUT PRIMITIVES + SECTION HEADS
   ========================================================================== */

.kat-screen {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  animation: katFade var(--duration-slow) var(--ease-out) both;
}

/* Page content column. Caps measure on wide monitors so dashboards don't
   stretch into unreadable 2000px rows. */
.kat-container {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-6) var(--space-9);
}
.kat-container--narrow { max-width: 880px; }
.kat-container--reading { max-width: 720px; }

/* The eyebrow + heading + lede triplet. Was hand-rolled on at least five
   pages with five different sets of margins. */
.kat-section-head { max-width: 68ch; }
.kat-section-head--center { text-align: center; margin-inline: auto; }
.kat-section-head > .kat-eyebrow { display: block; margin-bottom: var(--space-2); }
.kat-section-head h1,
.kat-section-head h2,
.kat-section-head h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-display);
  letter-spacing: -.025em;
  line-height: 1.12;
  color: var(--ink);
  margin: 0;
}
.kat-section-head h1 { font-size: var(--fs-display-lg); }
/* Newsreader italic on the emphasised span only - this is the app's editorial
   signature and it stops working the moment it's used for whole headlines. */
.kat-section-head h1 em,
.kat-section-head h2 em,
.kat-section-head h3 em {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: -.01em;
}
.kat-section-head .kat-lede {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  color: var(--ink-3);
}

/* Row of a heading on the left and actions on the right. */
.kat-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.kat-divider { height: 1px; background: var(--border-divider); border: 0; margin: 0; }

/* ==========================================================================
   2 · CARDS + SURFACES
   ========================================================================== */

.kat-card {
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  padding: var(--pad);
}
.kat-card--tight { padding: var(--space-4) var(--space-5); }
.kat-card--flush { padding: 0; overflow: hidden; }

/* Opt-in hover, for cards that are actually links. A card that lifts but
   doesn't navigate is noise. */
.kat-card--interactive {
  transition: border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.kat-card--interactive:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* The single dark "hero" surface per screen. Deliberately not a gradient
   wash - a flat near-black with one warm highlight reads more expensive than
   a two-stop gradient. */
.kat-card--dark {
  position: relative;
  overflow: hidden;
  background: var(--surface-dark);
  border: 1px solid var(--surface-dark-2);
  color: var(--ink-inverse);
  box-shadow: var(--shadow-md);
}
.kat-card--dark::after {
  content: '';
  position: absolute;
  top: -40%; right: -20%;
  width: 60%; height: 160%;
  background: radial-gradient(closest-side, rgba(232, 93, 47, .20), transparent 70%);
  pointer-events: none;
}
.kat-card--dark .kat-card-title,
.kat-card--dark .kat-stat { color: var(--ink-inverse); }
.kat-card--dark .kat-eyebrow { color: var(--ink-inverse-3); }
.kat-card--dark .kat-sub { color: var(--ink-inverse-2); }
.kat-card--dark .kat-divider { background: var(--border-inverse); }

/* ==========================================================================
   3 · TYPOGRAPHY HELPERS
   ========================================================================== */

.kat-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-5);
}

.kat-card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-title);
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0;
}
.kat-card-title--mb { margin-bottom: var(--space-4); }

/* Big number. Tabular + tight tracking so a column of these aligns and reads
   as data rather than as headlines. */
.kat-stat {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-display);
  letter-spacing: -.03em;
  line-height: 1.05;
  color: var(--ink);
  margin-top: var(--space-1);
  font-variant-numeric: tabular-nums;
}
.kat-stat--lg { font-size: var(--fs-display-lg); }
.kat-stat--xl { font-size: var(--fs-display-xl); }
.kat-stat--value { color: var(--value); }

/* A currency/unit qualifier riding alongside a big number. */
.kat-stat-unit {
  font-size: .5em;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-4);
  margin-left: .2em;
}

.kat-sub { font-size: var(--fs-sub); color: var(--ink-4); margin-top: var(--space-1); }
.kat-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.kat-num { font-variant-numeric: tabular-nums; }

/* Directional deltas. Colour alone never carries the meaning - the glyph does
   too, so it survives greyscale printing and colour-blind viewing. */
.kat-delta { font-size: var(--fs-caption); font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.kat-delta--up { color: var(--positive); }
.kat-delta--down { color: var(--danger); }
.kat-delta--flat { color: var(--ink-4); }

/* ==========================================================================
   4 · BUTTONS
   Replaces two mutually incompatible .btn systems (index.html's marketing
   button and login.html's form button) plus assorted per-page one-offs.
   ========================================================================== */

.kat-btn {
  --btn-pad-y: 10px;
  --btn-pad-x: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-family: var(--font-body);
  font-size: var(--fs-ui);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.005em;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  cursor: pointer;
  user-select: none;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.kat-btn:hover { text-decoration: none; }
.kat-btn:active { transform: translateY(1px); }
.kat-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.kat-btn:disabled,
.kat-btn[aria-disabled='true'] {
  cursor: not-allowed;
  opacity: .5;
  transform: none;
  box-shadow: none;
}

/* Primary sits on --accent-hover rather than --accent at rest: white text on
   #E85D2F is below 4.5:1, on #C24A18 it passes. Hover goes DARKER for the same
   reason - the usual "lighten on hover" would break contrast. */
.kat-btn--primary { background: var(--accent-hover); color: #fff; }
.kat-btn--primary:hover { background: var(--accent-deep); box-shadow: var(--shadow-accent); }

.kat-btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--border-input); }
.kat-btn--secondary:hover { background: var(--surface-alt-3); border-color: var(--border-strong); box-shadow: var(--shadow-sm); }

.kat-btn--ghost { background: transparent; color: var(--ink-2); }
.kat-btn--ghost:hover { background: var(--surface-alt); color: var(--ink); }

/* Realised value / export actions - see --value in theme.css. */
.kat-btn--value { background: var(--value); color: #fff; }
.kat-btn--value:hover { background: #75591A; box-shadow: var(--shadow-md); }

.kat-btn--danger { background: transparent; color: var(--danger); border-color: var(--danger-tint); }
.kat-btn--danger:hover { background: var(--danger-tint); border-color: var(--danger); }

/* --ink-inverse is always light (it's the text colour for --surface-dark
   cards), but --ink flips with the theme - pairing them collapsed to
   invisible white-on-white in dark mode, same bug as .kat-toggle.is-active
   above. --surface-dark is always dark in both themes, so it's the safe
   pairing here. */
.kat-btn--on-dark { background: var(--ink-inverse); color: var(--surface-dark); }
.kat-btn--on-dark:hover { background: #fff; box-shadow: var(--shadow-md); }

.kat-btn--sm { --btn-pad-y: 6px; --btn-pad-x: 12px; font-size: var(--fs-ui-sm); }
.kat-btn--lg { --btn-pad-y: 14px; --btn-pad-x: 26px; font-size: var(--fs-body-lg); }
.kat-btn--block { width: 100%; }

/* Marketing variant: the tracked-uppercase treatment used on the landing page.
   Kept as a modifier so it can't drift into a separate button system again. */
.kat-btn--marketing {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: var(--fs-caption);
  font-weight: 700;
}

/* Arrow that slides on hover - opt in with <span class="kat-btn-ar">→</span> */
.kat-btn-ar { transition: transform var(--duration-base) var(--ease-out); }
.kat-btn:hover .kat-btn-ar { transform: translateX(4px); }

/* Loading state: keeps the button's width so the layout doesn't jump. */
.kat-btn.is-loading { color: transparent !important; pointer-events: none; position: relative; }
.kat-btn.is-loading::after {
  content: '';
  position: absolute;
  width: 15px; height: 15px;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-top-color: transparent;
  color: #fff;
  animation: katSpin .6s linear infinite;
}
.kat-btn--secondary.is-loading::after,
.kat-btn--ghost.is-loading::after { color: var(--ink-3); }
@keyframes katSpin { to { transform: rotate(360deg); } }

/* Quiet text link with the app's underline treatment. */
.kat-link {
  color: var(--accent-hover);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--accent-tint-2);
  transition: border-color var(--duration-fast) var(--ease-out);
}
.kat-link:hover { border-bottom-color: var(--accent-hover); }
.kat-link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 2px; }

.kat-panel-link {
  font-size: var(--fs-ui-sm);
  font-weight: 600;
  color: var(--ink-3);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  transition: color var(--duration-fast) var(--ease-out), gap var(--duration-fast) var(--ease-out);
}
.kat-panel-link:hover { color: var(--accent-hover); gap: var(--space-2); }

/* ==========================================================================
   5 · FORM CONTROLS
   ========================================================================== */

.kat-field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }

.kat-field-label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.kat-input,
.kat-select,
.kat-textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-control);
  padding: 11px 13px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.kat-input::placeholder, .kat-textarea::placeholder { color: var(--ink-6); }
.kat-input:hover, .kat-select:hover, .kat-textarea:hover { border-color: var(--border-strong); }
.kat-input:focus, .kat-select:focus, .kat-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.kat-input:disabled, .kat-select:disabled, .kat-textarea:disabled {
  background: var(--surface-alt-2); color: var(--ink-5); cursor: not-allowed;
}
.kat-input.is-error, .kat-select.is-error { border-color: var(--danger); }
.kat-input.is-error:focus { box-shadow: 0 0 0 3px var(--danger-tint); }

/* Numeric/code entry - IPI numbers, ISRCs, percentages. */
.kat-input--mono { font-family: var(--font-mono); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.kat-input--lg { padding: 14px 16px; font-size: var(--fs-body-lg); }

.kat-select {
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B6660' stroke-width='2.2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}
.kat-textarea { resize: vertical; min-height: 88px; line-height: 1.55; }

.kat-help { font-size: var(--fs-caption); color: var(--ink-4); }
.kat-error-text { font-size: var(--fs-caption); color: var(--danger); font-weight: 500; }

/* Search input with a leading glyph slot. */
.kat-search { position: relative; display: flex; align-items: center; }
.kat-search > svg { position: absolute; left: 12px; color: var(--ink-5); pointer-events: none; }
.kat-search > .kat-input { padding-left: 36px; }

/* Toggle button that reads as pressed/unpressed. Used for filter switches. */
.kat-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px 13px;
  background: var(--surface);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-control);
  font-family: var(--font-body);
  font-size: var(--fs-ui-sm);
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.kat-toggle:hover { border-color: var(--border-strong); color: var(--ink); }
.kat-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.kat-toggle.is-active,
.kat-toggle[aria-pressed='true'] {
  /* --ink is a filled pill here, not the fixed dark hero surface, so its
     paired text must be --canvas (always the opposite of --ink in both
     themes) rather than --ink-inverse (paired with --surface-dark, which
     converges on --ink in dark mode and made this invisible). */
  background: var(--ink);
  border-color: var(--ink);
  color: var(--canvas);
}

/* ==========================================================================
   6 · CHIPS, BADGES, METERS
   ========================================================================== */

.kat-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-caption);
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.kat-chip--ok { color: var(--positive); background: var(--positive-tint); }
.kat-chip--warn { color: var(--warning); background: var(--warning-tint); }
.kat-chip--bad { color: var(--danger); background: var(--danger-tint); }
.kat-chip--neutral { color: var(--ink-3); background: var(--surface-alt-2); }
.kat-chip--accent { color: var(--accent-hover); background: var(--accent-tint); }
.kat-chip--value { color: var(--value); background: var(--value-tint); }

/* Count badge riding on a control (e.g. "Filters 3"). */
.kat-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  font-size: var(--fs-tiny);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.kat-toggle.is-active .kat-count { background: var(--canvas); color: var(--ink); }

.kat-meter { height: 5px; background: var(--surface-alt-2); border-radius: var(--radius-bar); overflow: hidden; }
.kat-meter__fill {
  height: 100%;
  border-radius: var(--radius-bar);
  background: var(--accent);
  transition: width var(--duration-slow) var(--ease-out);
}

.kat-rights-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; flex-shrink: 0; }
.kat-rights-dot--publishing { background: var(--rights-publishing); }
.kat-rights-dot--master { background: var(--rights-master); }
.kat-rights-dot--neighbouring { background: var(--rights-neighbouring); }
.kat-rights-dot--sync { background: var(--rights-sync); }

/* ==========================================================================
   7 · TABLES
   Dense financial data has to stay scannable without becoming a grid of boxes:
   no vertical rules, hairline row separators, sticky header, numerals right-
   aligned and tabular so magnitudes line up.
   ========================================================================== */

.kat-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.kat-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-ui); }
.kat-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-alt-3);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-4);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-card);
  white-space: nowrap;
}
.kat-table tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-divider);
  color: var(--ink-2);
  vertical-align: middle;
}
.kat-table tbody tr:last-child td { border-bottom: 0; }
.kat-table tbody tr { transition: background var(--duration-fast) var(--ease-out); }
.kat-table tbody tr:hover { background: var(--surface-alt-3); }
.kat-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.kat-table .is-primary { color: var(--ink); font-weight: 600; }
.kat-table--clickable tbody tr { cursor: pointer; }

/* ==========================================================================
   8 · TABS, SEGMENTED CONTROLS, POPOVERS
   ========================================================================== */

/* Underline tabs - for switching what a page shows. */
.kat-tabs { display: flex; gap: var(--space-5); border-bottom: 1px solid var(--border-divider); }
.kat-tab {
  position: relative;
  background: none;
  border: 0;
  padding: 0 0 var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--ink-4);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out);
}
.kat-tab::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform var(--duration-base) var(--ease-out);
}
.kat-tab:hover { color: var(--ink-2); }
.kat-tab.is-active { color: var(--ink); }
.kat-tab.is-active::after { transform: scaleX(1); }
.kat-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 3px; }
.kat-tab-count { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ink-5); margin-left: 5px; }

/* Segmented control - for switching HOW the same data is shown. Visually
   distinct from tabs on purpose; they mean different things. */
.kat-segment {
  display: inline-flex;
  padding: 2px;
  background: var(--surface-alt-2);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-control);
}
.kat-segment > button {
  background: none;
  border: 0;
  padding: 6px 13px;
  border-radius: 5px;
  font-family: var(--font-body);
  font-size: var(--fs-ui-sm);
  font-weight: 600;
  color: var(--ink-4);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.kat-segment > button:hover { color: var(--ink); }
.kat-segment > button.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.kat-segment > button:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Toolbar - one row that groups controls without becoming a wall of them. */
.kat-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.kat-toolbar__spacer { flex: 1 1 auto; }

/* Popover for progressively-disclosed secondary controls. */
.kat-pop { position: relative; }
.kat-pop__panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  min-width: 232px;
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.kat-pop__panel.is-open { opacity: 1; transform: none; pointer-events: auto; }
.kat-pop__group + .kat-pop__group { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-divider); }
.kat-pop__label {
  font-family: var(--font-mono);
  font-size: var(--fs-tiny);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-5);
  margin-bottom: var(--space-2);
}

/* Collapsible region (filter drawer). Animating max-height keeps it cheap and
   avoids the layout thrash of animating height:auto. */
.kat-collapse { overflow: hidden; max-height: 0; transition: max-height var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out); opacity: 0; }
.kat-collapse.is-open { max-height: 460px; opacity: 1; }

/* ==========================================================================
   9 · MODALS
   One shell for what were three independently-built dialog systems.
   ========================================================================== */

.kat-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: rgba(23, 19, 15, .46);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out);
}
.kat-modal-backdrop.is-open { opacity: 1; pointer-events: auto; }

.kat-modal {
  width: 100%;
  max-width: 560px;
  max-height: min(88vh, 900px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
  transform: translateY(10px) scale(.99);
  transition: transform var(--duration-base) var(--ease-spring);
}
.kat-modal-backdrop.is-open .kat-modal { transform: none; }
.kat-modal--sm { max-width: 440px; }
.kat-modal--md { max-width: 720px; }
.kat-modal--lg { max-width: 940px; }

.kat-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--border-divider);
}
.kat-modal__body { padding: var(--space-5); overflow-y: auto; flex: 1 1 auto; }
.kat-modal__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-divider);
  background: var(--surface-alt-3);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
}
.kat-modal__close {
  flex-shrink: 0;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  color: var(--ink-4);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: all var(--duration-fast) var(--ease-out);
}
.kat-modal__close:hover { background: var(--surface-alt); color: var(--ink); }
.kat-modal__close:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ==========================================================================
   10 · LOADING + EMPTY STATES
   ========================================================================== */

/* Skeletons mirror the SHAPE of what's coming, so the layout doesn't jump and
   the wait reads as progress rather than as a stall. Preferred over spinners
   for anything with predictable structure. */
.kat-skel {
  background: linear-gradient(90deg, var(--surface-alt-2) 25%, var(--surface-alt) 37%, var(--surface-alt-2) 63%);
  background-size: 200% 100%;
  animation: katShimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-bar);
}
.kat-skel--text { height: 11px; margin-bottom: var(--space-2); }
.kat-skel--title { height: 22px; width: 45%; margin-bottom: var(--space-3); }
.kat-skel--stat { height: 32px; width: 60%; margin: var(--space-2) 0; }
.kat-skel--line { height: 11px; }
.kat-skel--w40 { width: 40%; } .kat-skel--w60 { width: 60%; } .kat-skel--w80 { width: 80%; }
.kat-skel--chart { height: 168px; border-radius: var(--radius-control); }
.kat-skel--row { height: 52px; margin-bottom: var(--space-2); border-radius: var(--radius-control); }
.kat-skel--circle { border-radius: 50%; }

/* Indeterminate top-of-panel progress bar, for waits with no known duration. */
.kat-progress { height: 2px; background: var(--surface-alt-2); overflow: hidden; border-radius: var(--radius-bar); }
.kat-progress__bar { height: 100%; width: 40%; background: var(--accent); border-radius: var(--radius-bar); animation: katSlide 1.3s var(--ease-in-out) infinite; }
@keyframes katSlide { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }

/* Empty states earn their space by saying what happened, why, and what to do
   next - a shrug emoji and "No data" is a dead end. */
.kat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-5);
  max-width: 46ch;
  margin-inline: auto;
}
.kat-empty__mark {
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-card);
  background: var(--accent-tint);
  color: var(--accent-hover);
  margin-bottom: var(--space-1);
}
.kat-empty__title { font-family: var(--font-display); font-size: var(--fs-title); font-weight: 600; color: var(--ink); letter-spacing: -.015em; }
.kat-empty__body { font-size: var(--fs-ui); color: var(--ink-3); line-height: 1.6; }
.kat-empty__actions { display: flex; gap: var(--space-3); margin-top: var(--space-2); flex-wrap: wrap; justify-content: center; }
.kat-empty--inline { padding: var(--space-5); }

/* ==========================================================================
   11 · FEEDBACK BANNERS
   ========================================================================== */

.kat-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-card);
  border: 1px solid var(--border-card);
  background: var(--surface);
  font-size: var(--fs-ui);
  color: var(--ink-2);
  line-height: 1.55;
}
.kat-banner__body { flex: 1 1 auto; min-width: 0; }
.kat-banner__title { font-weight: 700; color: var(--ink); margin-bottom: 2px; }
/* A 3px leading rule carries the semantic colour - cheaper visually than
   flooding the whole banner with tint. */
/* Declaration order matters here: `border-color` must come BEFORE the
   `border-left` shorthand. Written the other way round, the longhand reset
   silently wipes the semantic left rule and the banner loses its colour. */
.kat-banner--info { border-left: 3px solid var(--ink-4); }
.kat-banner--ok { background: var(--positive-tint); border-color: transparent; border-left: 3px solid var(--positive); }
.kat-banner--warn { background: var(--warning-tint); border-color: transparent; border-left: 3px solid var(--warning); }
.kat-banner--bad { background: var(--danger-tint); border-color: transparent; border-left: 3px solid var(--danger); }

/* ==========================================================================
   12 · SCROLL REVEAL
   Paired with kat-reveal.js. The `.js` gate means content is visible when
   scripting is unavailable instead of stuck at opacity 0 forever.
   ========================================================================== */

.js .kat-reveal,
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}
.js .kat-reveal.in,
.js .reveal.in { opacity: 1; transform: none; }
/* Stagger children of a revealed group. */
.js .kat-reveal-group > * { opacity: 0; transform: translateY(14px); transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); }
.js .kat-reveal-group.in > * { opacity: 1; transform: none; }
.js .kat-reveal-group.in > *:nth-child(1) { transition-delay: 0ms; }
.js .kat-reveal-group.in > *:nth-child(2) { transition-delay: 60ms; }
.js .kat-reveal-group.in > *:nth-child(3) { transition-delay: 120ms; }
.js .kat-reveal-group.in > *:nth-child(4) { transition-delay: 180ms; }
.js .kat-reveal-group.in > *:nth-child(5) { transition-delay: 240ms; }
.js .kat-reveal-group.in > *:nth-child(6) { transition-delay: 300ms; }

/* ==========================================================================
   13 · GRIDS + RESPONSIVE
   ========================================================================== */

.kat-grid-kpi4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.kat-grid-kpi3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.kat-grid-chart-donut { display: grid; grid-template-columns: 1.9fr 1fr; gap: var(--space-5); }
.kat-grid-half { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.kat-grid-asym-a { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-5); }
.kat-grid-asym-b { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-5); }
.kat-grid-asym-c { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-5); }
.kat-grid-works { display: grid; grid-template-columns: 2.4fr 1.2fr 1fr 1.1fr 1.1fr 1fr; gap: var(--space-3); }

@media (max-width: 1100px) {
  .kat-grid-kpi4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  .kat-grid-kpi3,
  .kat-grid-chart-donut,
  .kat-grid-half,
  .kat-grid-asym-a,
  .kat-grid-asym-b,
  .kat-grid-asym-c { grid-template-columns: 1fr; }
  .kat-container { padding: var(--space-5) var(--space-4) var(--space-8); }
}
@media (max-width: 700px) {
  .kat-grid-kpi4 { grid-template-columns: 1fr; }
  :root { --fs-hero: 38px; --fs-display-xl: 32px; --fs-display-lg: 27px; --fs-display: 23px; --pad: 18px; }
  .kat-modal__head, .kat-modal__body { padding: var(--space-4); }
  .kat-tabs { gap: var(--space-4); overflow-x: auto; }
}

/* ==========================================================================
   14 · DARK-THEME COMPONENT CORRECTIONS
   The palette swap in theme.css handles nearly everything. These are the few
   places where a colour RELATIONSHIP has to change, not just a value.
   Both selectors are needed: one for the explicit toggle, one for the OS
   setting (they can't be combined - a media query can't be part of a
   selector list).
   ========================================================================== */

/* Primary button: white-on-orange is the correct pairing on a light ground, but
   against a dark ground the accent has to brighten to stay visible, and white
   text on that brighter orange drops below 4.5:1. Dark ink on bright orange
   passes comfortably and reads as more deliberate. */
:root[data-theme='dark'] .kat-btn--primary { background: var(--accent); color: #17130F; }
:root[data-theme='dark'] .kat-btn--primary:hover { background: var(--accent-deep); color: #17130F; }
:root[data-theme='dark'] .kat-btn--value { color: #17130F; }
/* A "dark card" on a dark canvas needs to read as LIFTED, not as darker. */
:root[data-theme='dark'] .kat-card--dark { background: var(--surface-alt-2); border-color: var(--border-strong); }
:root[data-theme='dark'] .kat-modal-backdrop { background: rgba(0, 0, 0, .62); }
:root[data-theme='dark'] .kat-nav-item.is-active { background: var(--surface-alt-2); }
:root[data-theme='dark'] .kat-skel {
  background: linear-gradient(90deg, var(--surface-alt) 25%, var(--surface-alt-2) 37%, var(--surface-alt) 63%);
  background-size: 200% 100%;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .kat-btn--primary { background: var(--accent); color: #17130F; }
  :root:not([data-theme='light']) .kat-btn--primary:hover { background: var(--accent-deep); color: #17130F; }
  :root:not([data-theme='light']) .kat-btn--value { color: #17130F; }
  :root:not([data-theme='light']) .kat-card--dark { background: var(--surface-alt-2); border-color: var(--border-strong); }
  :root:not([data-theme='light']) .kat-modal-backdrop { background: rgba(0, 0, 0, .62); }
  :root:not([data-theme='light']) .kat-nav-item.is-active { background: var(--surface-alt-2); }
  :root:not([data-theme='light']) .kat-skel {
    background: linear-gradient(90deg, var(--surface-alt) 25%, var(--surface-alt-2) 37%, var(--surface-alt) 63%);
    background-size: 200% 100%;
  }
}

/* Theme toggle control in the sidebar. */
.kat-theme-toggle {
  display: flex; align-items: center; gap: var(--space-2);
  width: 100%; margin-top: var(--space-2);
  padding: 8px var(--space-3);
  background: none; border: 1px solid transparent; border-radius: var(--radius-control);
  font-family: var(--font-body); font-size: var(--fs-ui-sm); font-weight: 500;
  color: var(--ink-3); cursor: pointer; text-align: left;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.kat-theme-toggle:hover { background: rgba(127, 127, 127, .10); color: var(--ink); }
.kat-theme-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.kat-theme-toggle svg { flex-shrink: 0; color: var(--ink-5); }
.kat-theme-toggle__label { flex: 1 1 auto; }

@media (prefers-reduced-motion: reduce) {
  .js .kat-reveal, .js .reveal,
  .js .kat-reveal-group > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .kat-skel { animation: none; }
  .kat-progress__bar { animation: none; width: 100%; }
  .kat-screen { animation: none; }
  * { scroll-behavior: auto !important; }
}