/* ── csa-normalize.css — rev_1164 ────────────────────────────────────────────
   THE VISUAL UNIFICATION LAYER. Loads LAST, after each app's own stylesheet, so
   it wins on the handful of properties that should look the same everywhere.

   Why this file rather than editing 19 stylesheets
   ────────────────────────────────────────────────
   rev_1159 defined the tokens and rev_1164 snapped ~1700 font-sizes and ~790
   radii onto them. That fixed the SCALE but not the RECIPES: every app had
   grown its own button (.pe-btn, .ld-btn, .res-btn, .mk-btn, .pr-btn, .co-btn,
   .bs-btn …), each with slightly different padding, border colour and hover.
   Nine near-identical buttons is what made Cassandra read as nine apps rather
   than one product.

   Rewriting each app's rule in place would mean 19 files of churn and a real
   chance of breaking a layout. Instead this layer restates ONLY the shared
   visual contract — border, padding, hover, focus, transition — and leaves
   everything structural (widths, grid, positioning) to the app.

   RULE OF THUMB for anything added here: if it changes SIZE or POSITION of a
   layout box, it does not belong. If it changes how something READS as a
   Cassandra control, it does.
   ────────────────────────────────────────────────────────────────────────── */

/* ═══ 1. HAIRLINES ════════════════════════════════════════════════════════
   The apps were split between `.5px` and `1px` borders. Sub-pixel borders are a
   lottery: they render at 1px on a 1x display, vanish or double on fractional
   DPI, and differ between engines. One honest 1px everywhere. */
.pe-btn, .ld-btn, .res-btn, .mk-btn, .pr-btn, .co-btn, .bs-btn,
.pe-row, .ld-row, .res-list-row,
.pe-fld input, .pe-fld select, .pe-fld textarea,
.csa-input, .mk-select, .ld-select, .res-input {
  border-width: 1px;
}

/* ═══ 2. BUTTONS ══════════════════════════════════════════════════════════
   One recipe. Padding settles on the token scale (8px/14px) — the apps had
   6px/7px vertical, a difference nobody chose deliberately. */
.pe-btn, .ld-btn, .res-btn, .mk-btn, .pr-btn, .co-btn, .ci-btn {
  padding: 8px 14px;
  border-radius: var(--csa-r-md);
  border-style: solid;
  border-color: var(--csa-border);
  background: transparent;
  color: var(--csa-text);
  font: inherit;
  font-size: var(--csa-f-sm);
  cursor: pointer;
  transition: background var(--csa-t-fast) var(--csa-ease),
              border-color var(--csa-t-fast) var(--csa-ease),
              color var(--csa-t-fast) var(--csa-ease);
}
.pe-btn:hover, .ld-btn:hover, .res-btn:hover, .mk-btn:hover,
.pr-btn:hover, .co-btn:hover, .ci-btn:hover {
  background: var(--csa-hover);
  border-color: var(--csa-border2);
}

/* Primary — the one action a panel actually wants you to take. */
.pe-btn.primary, .ld-btn.primary, .res-btn.primary, .mk-btn.primary,
.pr-btn.primary, .co-btn.primary, .ci-btn.primary {
  background: var(--csa-accent);
  border-color: var(--csa-accent);
  color: var(--csa-on-accent);
  font-weight: var(--csa-fw-bold);
}
.pe-btn.primary:hover, .ld-btn.primary:hover, .res-btn.primary:hover,
.mk-btn.primary:hover, .pr-btn.primary:hover, .co-btn.primary:hover,
.ci-btn.primary:hover {
  background: var(--csa-accent-hover);
  border-color: var(--csa-accent-hover);
}

/* Danger — outline until you commit to it, then it fills. Destructive actions
   should not look pre-armed. */
.pe-btn.danger, .ld-btn.danger, .res-btn.danger, .mk-btn.danger,
.pr-btn.danger, .co-btn.danger, .ci-btn.danger {
  color: var(--csa-danger-text);
  border-color: var(--csa-danger);
  background: transparent;
}
.pe-btn.danger:hover, .ld-btn.danger:hover, .res-btn.danger:hover,
.mk-btn.danger:hover, .pr-btn.danger:hover, .co-btn.danger:hover,
.ci-btn.danger:hover {
  background: var(--csa-danger);
  color: #fff;
  border-color: var(--csa-danger);
}

/* Disabled reads the same everywhere, and stops pretending to be hoverable. */
.pe-btn:disabled, .ld-btn:disabled, .res-btn:disabled, .mk-btn:disabled,
.pr-btn:disabled, .co-btn:disabled, .ci-btn:disabled, .csa-btn:disabled {
  opacity: .45;
  cursor: default;
}
.pe-btn:disabled:hover, .ld-btn:disabled:hover, .res-btn:disabled:hover,
.mk-btn:disabled:hover, .pr-btn:disabled:hover, .co-btn:disabled:hover,
.ci-btn:disabled:hover, .csa-btn:disabled:hover {
  background: transparent;
  border-color: var(--csa-border);
}

/* ═══ 3. FOCUS ════════════════════════════════════════════════════════════
   Nothing in Cassandra had a visible keyboard-focus state. Anyone navigating by
   Tab was flying blind. One ring, accent-coloured, on every interactive thing.
   :focus-visible (not :focus) so mouse users never see it. */
.pe-btn:focus-visible, .ld-btn:focus-visible, .res-btn:focus-visible,
.mk-btn:focus-visible, .pr-btn:focus-visible, .co-btn:focus-visible,
.ci-btn:focus-visible, .csa-btn:focus-visible, .bs-btn:focus-visible,
.csa-tab:focus-visible, .pe2-pcard:focus-visible, .pe2-lcard:focus-visible,
.pe2-ocard:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--csa-accent);
  outline-offset: 2px;
  border-radius: var(--csa-r-sm);
}

/* ═══ 4. INPUTS ═══════════════════════════════════════════════════════════
   Consistent resting and focused states. The accent border on focus is the
   same signal the search bar and the token .csa-search already use. */
.pe-fld input, .pe-fld select, .pe-fld textarea,
.csa-input, .mk-select, .res-input, .ld-select, .ld-search, .pe-search {
  background: var(--csa-input-bg);
  border-color: var(--csa-border);
  border-radius: var(--csa-r-sm);
  color: var(--csa-text);
  font: inherit;
  font-size: var(--csa-f-md);
  transition: border-color var(--csa-t-fast) var(--csa-ease);
}
.pe-fld input:focus, .pe-fld select:focus, .pe-fld textarea:focus,
.csa-input:focus, .mk-select:focus, .res-input:focus, .ld-select:focus {
  border-color: var(--csa-accent);
  outline: none;
}
::placeholder { color: var(--csa-hint); opacity: 1; }

/* ═══ 5. CARDS + PANELS ═══════════════════════════════════════════════════
   Surface, border and corner only — never padding or width, which are each
   app's business. */
.pe-card, .ld-card, .res-card, .mk-card, .pr-ov-card, .co-card,
.pe-client-card, .pr-mod {
  background: var(--csa-card);
  border: 1px solid var(--csa-line, var(--csa-border));
  border-radius: var(--csa-r-md);
}

/* ═══ 6. LIST ROWS ════════════════════════════════════════════════════════
   Every app's list had its own hover and selected treatment. One of each:
   hover tints, selected gets an accent left edge. The left edge is used rather
   than a filled background so the row's own content colours stay readable. */
.pe-row, .ld-row, .res-list-row, .co-row {
  transition: background var(--csa-t-fast) var(--csa-ease),
              border-color var(--csa-t-fast) var(--csa-ease);
}
.pe-row:hover, .ld-row:hover, .res-list-row:hover, .co-row:hover {
  background: var(--csa-hover);
}
.pe-row.on, .ld-row.on, .res-list-row.on, .co-row.on,
.pe-row.selected, .ld-row.selected, .res-list-row.selected {
  background: var(--csa-accent-bg);
  box-shadow: inset 2px 0 0 var(--csa-accent);
}

/* ═══ 7. SCROLLBARS ═══════════════════════════════════════════════════════
   Default chrome scrollbars are bright grey slabs on a dark UI — the single
   most obvious "unfinished" tell. Thin, themed, and they fade until hovered. */
* { scrollbar-width: thin; scrollbar-color: var(--csa-border2) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--csa-border);
  border-radius: var(--csa-r-full);
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--csa-border2); background-clip: content-box; }
*::-webkit-scrollbar-corner { background: transparent; }

/* ═══ 8. SELECTION ════════════════════════════════════════════════════════ */
::selection { background: var(--csa-accent); color: var(--csa-on-accent); }

/* ═══ 9. TABLES ═══════════════════════════════════════════════════════════
   Consistent header treatment wherever a raw <table> is used. */
table th {
  font-size: var(--csa-f-xs);
  text-transform: uppercase;
  letter-spacing: var(--csa-ls-label);
  color: var(--csa-muted);
  font-weight: var(--csa-fw-bold);
  text-align: left;
}

/* ═══ 10. MODAL SCRIMS ════════════════════════════════════════════════════
   Every app rolled its own backdrop, at opacities from .35 to .75. One depth,
   one blur, so a dialog always feels like the same kind of interruption. */
.pe-modal-bg, .ld-modal-bg, .res-modal-bg, .mk-modal-bg, .pr-modal-bg,
.co-modal-bg, .pe-lbl-pop-bg, .ci-modal-overlay {
  background: var(--csa-overlay);
  backdrop-filter: blur(3px);
}
.pe-modal, .ld-modal, .res-modal, .mk-modal, .pr-modal, .co-modal {
  background: var(--csa-bg2);
  border: 1px solid var(--csa-border2);
  border-radius: var(--csa-r-lg);
  box-shadow: var(--csa-shadow-3);
}

/* ═══ 11. REDUCED MOTION ══════════════════════════════════════════════════
   Respect the OS setting. Cassandra has transitions on hovers, tabs and the FS
   orb; someone who asked the system for less movement should get it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}