/* ── csa-tokens.css — rev_1159 ───────────────────────────────────────────────
   THE design-token layer. Every visual constant in Cassandra resolves here.
   Loaded BEFORE cassandra-theme.css on every page, so themes can override any
   token by redeclaring it under their [data-theme] selector.

   WHY this file exists
   ───────────────────
   Before rev_1159 the palette lived only in cassandra-theme.css and the
   non-colour constants (font sizes, spacing, radii, shadows) lived nowhere —
   they were typed inline, per app, hundreds of times. The People-app rebuild
   (rev_1161) is the first consumer of a real token system; this file is that
   system. Nothing here changes how anything looks at rev_1159: the colour
   values are copied verbatim from the existing dark-minimal theme, and the
   type/space/radius scales simply NAME the values already in use.

   NAMING LAW
   ──────────
   - Colour   : --csa-*          (existing names kept; new semantic aliases added)
   - Type     : --csa-f-*        (font size), --csa-lh-*  (line height)
   - Space    : --csa-s-*        (4px multiples)
   - Radius   : --csa-r-*
   - Elevation: --csa-shadow-*
   - Z-layers : --csa-z-*        (already existed since rev_937 — kept as-is)

   NEVER hardcode a hex, a px font-size, or a px gap in app CSS again. If a
   value isn't here, add it here first.

   ACCENT NOTE (Vincent, 2026-07-24)
   ─────────────────────────────────
   Cassandra's accent is green (#1d9e75). The design mocks used a warm orange.
   Switching the platform accent is a deliberate call, not a side effect of the
   token refactor — so rev_1159 keeps green. To try orange later, change ONLY
   the four --csa-accent* lines under each theme; everything downstream follows.
   ────────────────────────────────────────────────────────────────────────── */

:root {

  /* ═══ COMPATIBILITY ALIASES (rev_1442, Audit 2·F5) ═══════════════════════
     These names were referenced via var() across the apps but never defined,
     so they silently fell back to nothing (the same class of bug as the
     rev_1418 Sales-font issue). Each is aliased to its real counterpart; the
     var() resolves per-theme automatically. bin/check-css-tokens.js now fails
     the build if a new undefined token appears. */
  --card:            var(--csa-surface-1);
  --csa-hair:        var(--csa-hairline);
  --csa-text2:       var(--csa-muted);
  --csa-warn:        var(--csa-warning);
  --csa-warning-bg:  var(--csa-warn-bg);
  --csa-z-modal:     var(--csa-z-pop);
  --fw-accent:       var(--csa-accent);

  /* ═══ TYPOGRAPHY ═════════════════════════════════════════════════════════
     A 7-step scale. Ratio ~1.2. Chosen to match what the apps already use, so
     naming them changes nothing visually.
       xs  10.5 — micro-labels, uppercase section keys, chip text
       sm  12   — secondary text, table cells, hints
       md  13   — DEFAULT body size across Cassandra
       lg  15   — card titles, emphasised rows
       xl  18   — panel titles, brand wordmark
       2xl 22   — page titles inside an app
       3xl 28   — hero / launcher headings                                    */
  --csa-f-2xs:  9.5px;    /* rev_1164: badge/counter text — the 9-10px band the
                             apps were already using in a dozen variants */
  --csa-f-xs:   10.5px;
  --csa-f-sm:   12px;
  --csa-f-md:   13px;
  --csa-f-lg:   15px;
  --csa-f-xl:   18px;
  --csa-f-2xl:  22px;
  --csa-f-3xl:  28px;

  /* Line heights. tight for headings, normal for UI, loose for prose blocks. */
  --csa-lh-tight:  1.25;
  --csa-lh-normal: 1.5;
  --csa-lh-loose:  1.7;

  /* Weights — only three are ever needed. */
  --csa-fw-normal: 400;
  --csa-fw-medium: 500;
  --csa-fw-bold:   600;

  /* Letter-spacing for the uppercase micro-label pattern used everywhere. */
  --csa-ls-label: .06em;
  --csa-ls-wide:  .08em;

  /* Monospace stack for code / IDs / storage paths. */
  --csa-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;  /* rev_1522: single sans stack — see the audit */
  --csa-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;


  /* ═══ SPACING ════════════════════════════════════════════════════════════
     4px multiples. Use these for padding, gap, margin — never raw px.        */
  --csa-s-1:  4px;
  --csa-s-2:  8px;
  --csa-s-3:  12px;
  --csa-s-4:  16px;
  --csa-s-5:  20px;
  --csa-s-6:  24px;
  --csa-s-8:  32px;
  --csa-s-10: 40px;
  --csa-s-12: 48px;

  /* Page gutters — the horizontal inset an app's content keeps from the edge. */
  --csa-gutter:       24px;
  --csa-gutter-tight: 16px;


  /* ═══ RADIUS ═════════════════════════════════════════════════════════════ */
  --csa-r-xs:   4px;    /* rev_1164: tight chips, inline code, mini-badges     */
  --csa-r-sm:   6px;    /* inputs, chips, small buttons                       */
  --csa-r-md:   8px;    /* cards, buttons, panels — the default              */
  --csa-r-lg:   12px;   /* modals, large containers                          */
  --csa-r-xl:   16px;   /* hero surfaces                                     */
  --csa-r-full: 9999px; /* pills, avatars                                    */


  /* ═══ ELEVATION ══════════════════════════════════════════════════════════
     Three tiers only. 1 = resting card, 2 = hover/dropdown, 3 = modal.       */
  --csa-shadow-1: 0 1px 2px rgba(0,0,0,.30);
  --csa-shadow-2: 0 4px 12px rgba(0,0,0,.40);
  --csa-shadow-3: 0 12px 32px rgba(0,0,0,.50);


  /* ═══ MOTION ═════════════════════════════════════════════════════════════ */
  --csa-t-fast:   .12s;
  --csa-t-normal: .2s;
  --csa-t-slow:   .35s;
  --csa-ease:     cubic-bezier(.4, 0, .2, 1);


  /* ═══ Z-LAYERS — one addition ════════════════════════════════════════════
     rev_937 defined raise / sticky / overlay / toast in cassandra-theme.css.
     planner.css referenced a fifth, --csa-z-pop, that was never declared — it
     only worked because of an inline `,60` fallback. Defining it properly so
     the phantom stops being load-bearing. Sits between raise (dropdowns inside
     content) and sticky (toolbars): a popover that must clear sibling content
     but never the topbar. */
  --csa-z-pop: 60;

  /* ═══ LAYOUT CONSTANTS ═══════════════════════════════════════════════════ */
  /* Measured from topbar.js, not invented — 64px desktop, collapsing to 52px
     at phone width (rev_1160). */
  --csa-topbar-h:        64px;
  --csa-topbar-h-mobile: 52px;
  --csa-content-max:   1400px; /* max readable width for centred app content  */
  --csa-modal-max:     1200px; /* wide detail overlays (People, Artworks)     */
  --csa-modal-max-sm:  620px;  /* confirmations, small forms                  */

  /* Responsive breakpoint the apps agree on. Mobile below this. */
  --csa-bp-mobile: 760px;


  /* ═══ SEMANTIC COLOUR ALIASES ════════════════════════════════════════════
     The existing --csa-bg / --csa-bg2 / --csa-bg3 names describe DEPTH, not
     PURPOSE. These aliases give the same values a purpose-name so new code
     reads better. Both sets stay valid — no migration needed.

       surface-0 = page background        (was --csa-bg)
       surface-1 = resting card          (was --csa-bg2 / --csa-card)
       surface-2 = nested card, chip bg  (was --csa-bg3)
       line      = default hairline      (was --csa-border)
       line-2    = emphasised hairline   (was --csa-border2)

     Defined per theme below so they follow the theme, not this block.        */
}


/* ═══ DARK-MINIMAL — semantic aliases ══════════════════════════════════════
   Values copied verbatim from cassandra-theme.css dark-minimal. Zero change. */
:root,
[data-theme="dark-minimal"] {
  --csa-surface-0: #111111;
  --csa-surface-1: #1c1c1c;
  --csa-surface-2: #262626;
  --csa-surface-3: #303030;   /* NEW tier — a third nesting level for the
                                 People-app overlay (card inside card inside
                                 modal). Sits between bg3 and border. */
  --csa-line:      #2e2e2e;
  --csa-line-2:    #3a3a3a;

  /* Status backgrounds as solid tints (the *-soft tokens are rgba overlays;
     these are opaque, for use on top of surface-1 where alpha would muddy). */
  --csa-ok-bg:     #0f2a1a;
  --csa-warn-bg:   #2a2414;
  --csa-info-bg:   #14202e;
  /* --csa-danger-bg + --csa-accent-bg already exist in the theme file. */
}

/* ═══ LIGHT-MINIMAL — semantic aliases ═════════════════════════════════════ */
[data-theme="light-minimal"] {
  --csa-surface-0: #f2f2f0;
  --csa-surface-1: #ffffff;
  --csa-surface-2: #e8e8e6;
  --csa-surface-3: #dededa;
  --csa-line:      #d4d4d2;
  --csa-line-2:    #c0c0be;

  --csa-ok-bg:     #e3f5ec;
  --csa-warn-bg:   #fbf2dc;
  --csa-info-bg:   #e6effb;

  /* Light theme needs softer shadows — dark shadows read as dirt on white. */
  --csa-shadow-1: 0 1px 2px rgba(0,0,0,.08);
  --csa-shadow-2: 0 4px 12px rgba(0,0,0,.12);
  --csa-shadow-3: 0 12px 32px rgba(0,0,0,.18);
}


/* ═══ PRIMITIVE UTILITY CLASSES ════════════════════════════════════════════
   A deliberately SMALL set — six primitives that cover most new UI. Apps keep
   their own component CSS; these exist so a new panel doesn't need 40 lines of
   bespoke styling to look like Cassandra.

   All are prefixed .csa- and are safe to adopt incrementally. Nothing existing
   uses these class names (verified by grep at rev_1159), so adding them
   changes nothing until a template opts in.                                  */

/* ── Button ───────────────────────────────────────────────────────────────── */
.csa-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--csa-s-2);
  background:transparent;
  border:1px solid var(--csa-line);
  color:var(--csa-text);
  border-radius:var(--csa-r-md);
  padding:8px 14px;
  font:inherit; font-size:var(--csa-f-md);
  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);
}
.csa-btn:hover{ background:var(--csa-hover); border-color:var(--csa-line-2); }
.csa-btn:focus-visible{ outline:2px solid var(--csa-accent); outline-offset:2px; }
.csa-btn:disabled{ opacity:.45; cursor:default; }
.csa-btn:disabled:hover{ background:transparent; border-color:var(--csa-line); }

/* Primary. Three selectors because admin.html already ships two legacy
   spellings in markup (.csa-btn-primary and .csa-btn.primary) — aliasing them
   here means those buttons finally render correctly instead of falling through
   to the browser default. See the rev_1159 note at the bottom of this file. */
.csa-btn--primary,
.csa-btn-primary,
.csa-btn.primary{
  background:var(--csa-accent); border-color:var(--csa-accent);
  color:var(--csa-on-accent); font-weight:var(--csa-fw-bold);
}
.csa-btn--primary:hover,
.csa-btn-primary:hover,
.csa-btn.primary:hover{ background:var(--csa-accent-hover); border-color:var(--csa-accent-hover); }

.csa-btn--ghost{ border-color:transparent; color:var(--csa-muted); }
.csa-btn--ghost:hover{ color:var(--csa-text); background:var(--csa-hover); border-color:transparent; }

.csa-btn--danger{ color:var(--csa-danger-text); border-color:var(--csa-danger); }
.csa-btn--danger:hover{ background:var(--csa-danger); color:#fff; border-color:var(--csa-danger); }

.csa-btn--sm{ padding:4px 10px; font-size:var(--csa-f-sm); }
.csa-btn--block{ width:100%; }

/* ── Pill / chip ──────────────────────────────────────────────────────────── */
.csa-pill{
  display:inline-flex; align-items:center; gap:var(--csa-s-1);
  padding:3px 10px;
  border-radius:var(--csa-r-full);
  background:var(--csa-surface-2);
  border:1px solid var(--csa-line);
  font-size:var(--csa-f-xs);
  color:var(--csa-text);
  white-space:nowrap;
}
.csa-pill--accent{ background:var(--csa-accent-bg); color:var(--csa-accent-text); border-color:var(--csa-accent); }
.csa-pill--ok    { background:var(--csa-ok-bg);     color:var(--csa-success);      border-color:var(--csa-success); }
.csa-pill--warn  { background:var(--csa-warn-bg);   color:var(--csa-warning-text); border-color:var(--csa-warning); }
.csa-pill--info  { background:var(--csa-info-bg);   color:var(--csa-info);         border-color:var(--csa-info); }
.csa-pill--danger{ background:var(--csa-danger-bg); color:var(--csa-danger-text);  border-color:var(--csa-danger); }
.csa-pill--muted { color:var(--csa-muted); }

/* ── Card ─────────────────────────────────────────────────────────────────── */
.csa-card{
  background:var(--csa-surface-1);
  border:1px solid var(--csa-line);
  border-radius:var(--csa-r-md);
  padding:var(--csa-s-4);
}
.csa-card--nested{ background:var(--csa-surface-2); }
.csa-card--hover:hover{ border-color:var(--csa-line-2); box-shadow:var(--csa-shadow-1); }
.csa-card--interactive{ cursor:pointer; }
.csa-card--interactive:hover{ border-color:var(--csa-accent); }

.csa-card__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--csa-s-2);
  margin-bottom:var(--csa-s-3);
}
.csa-card__title{
  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);
  margin:0;
}

/* ── Tabs ─────────────────────────────────────────────────────────────────── */
.csa-tabs{
  display:flex; gap:2px; flex-wrap:wrap;
  border-bottom:1px solid var(--csa-line);
}
.csa-tab{
  background:transparent; border:none;
  padding:10px 14px;
  font:inherit; font-size:var(--csa-f-md);
  color:var(--csa-muted);
  cursor:pointer;
  border-bottom:2px solid transparent;
  display:inline-flex; align-items:center; gap:var(--csa-s-1);
  transition:color var(--csa-t-fast) var(--csa-ease);
}
.csa-tab:hover{ color:var(--csa-text); }
.csa-tab.is-on{ color:var(--csa-accent-text); border-bottom-color:var(--csa-accent); }
.csa-tab__count{
  font-size:var(--csa-f-xs);
  padding:1px 7px;
  background:var(--csa-surface-2);
  border-radius:var(--csa-r-full);
  color:var(--csa-muted);
}
.csa-tab.is-on .csa-tab__count{ background:var(--csa-accent-bg); color:var(--csa-accent-text); }

/* ── Field (label + value, read mode) ─────────────────────────────────────── */
.csa-fld{ display:flex; flex-direction:column; gap:2px; padding:var(--csa-s-1) 0; }
.csa-fld__key{
  font-size:var(--csa-f-xs);
  text-transform:uppercase;
  letter-spacing:var(--csa-ls-label);
  color:var(--csa-muted);
}
.csa-fld__val{ font-size:var(--csa-f-md); color:var(--csa-text); }
.csa-fld__val--muted{ color:var(--csa-muted); font-style:italic; }
.csa-fld__val a{ color:var(--csa-accent-text); text-decoration:none; }
.csa-fld__val a:hover{ text-decoration:underline; }
.csa-fld-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:var(--csa-s-2) var(--csa-s-5);
}

/* ── Section header inside a panel ────────────────────────────────────────── */
.csa-sec{ margin-bottom:var(--csa-s-5); }
.csa-sec__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--csa-s-2);
  margin-bottom:var(--csa-s-2);
}
.csa-sec__title{
  margin:0;
  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);
}
.csa-sec__action{
  background:transparent; border:none;
  color:var(--csa-muted);
  font:inherit; font-size:var(--csa-f-xs);
  cursor:pointer; padding:2px 4px; border-radius:var(--csa-r-sm);
}
.csa-sec__action:hover{ color:var(--csa-text); background:var(--csa-hover); }

/* ── Search bar ───────────────────────────────────────────────────────────── */
.csa-search{
  display:flex; align-items:center; gap:var(--csa-s-3);
  padding:12px 14px;
  background:var(--csa-surface-1);
  border:1px solid var(--csa-line);
  border-radius:var(--csa-r-md);
}
.csa-search:focus-within{ border-color:var(--csa-accent); }
.csa-search input{
  flex:1; min-width:0;
  background:transparent; border:none; outline:none;
  color:var(--csa-text);
  font:inherit; font-size:var(--csa-f-md);
}
.csa-search input::placeholder{ color:var(--csa-hint); }
.csa-search kbd{
  font-size:var(--csa-f-xs);
  font-family:var(--csa-font-mono);
  color:var(--csa-muted);
  background:var(--csa-surface-0);
  padding:2px 6px;
  border:1px solid var(--csa-line);
  border-radius:4px;
}

/* ── Empty state ──────────────────────────────────────────────────────────── */
.csa-empty{
  padding:var(--csa-s-5);
  color:var(--csa-muted);
  font-size:var(--csa-f-md);
  text-align:center;
  border:1px dashed var(--csa-line);
  border-radius:var(--csa-r-md);
}

/* ── Divider ──────────────────────────────────────────────────────────────── */
.csa-rule{ border:none; border-top:1px solid var(--csa-line); margin:var(--csa-s-3) 0; }

/* ── Avatar ───────────────────────────────────────────────────────────────── */
.csa-avatar{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px;
  border-radius:var(--csa-r-full);
  background:var(--csa-surface-2);
  border:1px solid var(--csa-line);
  color:var(--csa-muted);
  font-size:var(--csa-f-sm);
  font-weight:var(--csa-fw-bold);
  overflow:hidden;
  flex-shrink:0;
}
.csa-avatar img{ width:100%; height:100%; object-fit:cover; }
.csa-avatar--sm{ width:28px; height:28px; font-size:var(--csa-f-xs); }
.csa-avatar--lg{ width:52px; height:52px; font-size:var(--csa-f-lg); }
.csa-avatar--xl{ width:96px; height:96px; font-size:26px; }
.csa-avatar--accent{ background:var(--csa-accent-bg); color:var(--csa-accent-text); border-color:var(--csa-accent); }

/* ── Grid helpers ─────────────────────────────────────────────────────────── */
.csa-grid-auto{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:var(--csa-s-3); }
.csa-grid-auto--sm{ grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); }
.csa-grid-auto--lg{ grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); }

/* ── Screen-reader-only ───────────────────────────────────────────────────── */
.csa-sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}


/* ═══ REV_1159 — the one intentional visual change ═════════════════════════
   Everything in this file was designed to be visually inert: colour values are
   copied verbatim from the existing dark-minimal theme, and the type / space /
   radius scales only NAME values already in use.

   ONE exception, deliberately taken:

   `.csa-btn` was used bare in 33 places in admin.html (plus admin-legacy.html)
   but NO stylesheet ever defined it — those buttons have been rendering as raw
   browser-default buttons. Defining `.csa-btn` here styles them correctly for
   the first time. Two legacy spellings (`.csa-btn-primary`, `.csa-btn.primary`)
   are aliased onto the primary variant for the same reason.

   Colliding names avoided rather than fought:
     .csa-field   -> owned by csa-fields.js (label+input). Ours is .csa-fld.
     .csa-divider -> owned by scene.html (<div>). Ours is .csa-rule.

   Everything else (.csa-pill, .csa-card, .csa-tab, .csa-sec, .csa-search,
   .csa-empty, .csa-avatar, .csa-grid-auto) is unused in existing markup - those
   rules are dormant until a template opts in. Verified by grep at rev_1159.
   ------------------------------------------------------------------------- */

/* ═══════════════════════════════════════════════════════════════════════════
   rev_1205 — THE BREAKPOINT LADDER
   ═══════════════════════════════════════════════════════════════════════════
   Vincent: "most users will use a full hd to 4k screen. it should work on all,
   even an older 1024 screen."

   READ THIS BEFORE ADDING A MEDIA QUERY, because there is a limitation you
   cannot design around: CSS custom properties DO NOT WORK inside an @media
   condition. `@media (max-width: var(--csa-bp-lg))` is invalid and silently
   never matches. There is no build step here to expand @custom-media, so the
   ladder cannot be enforced by the cascade. It is enforced by bin/check-breakpoints.js
   instead, which fails on any value not on this list. The custom properties below
   exist so JS (matchMedia, the layout harness) reads the same numbers, and so
   there is one place to look them up.

   THE RUNGS, and what each one is actually about:
     560   phone
     720   large phone / small tablet          ← most used boundary in the app
     900   tablet / narrow desktop window
    1100   a fixed sidebar + content stops fitting comfortably
    1440   comfortable desktop
    1920   FHD
    2560   QHD and up

   1024 IS NOT A RUNG, and that distinction matters. 1024 is a screen width that
   must WORK; a rung is a width where the layout must CHANGE. They are different
   things and conflating them is what produced the bug this rev fixes: a rule at
   1100 hid the topbar's workspace app row, and because 1024 < 1100, the exact
   screen Vincent named lost the entire feature. 1100 was right for sidebars and
   wrong for that row. Test AT 1024; put boundaries ON rungs.

   Off-ladder values that survive on purpose, each with its reason:
     360 / 480  (topbar.js)  small-phone specifics below the lowest rung
     640        (planner)    one grid's own column maths, not a shell boundary
     760 / 800 / 820         a genuine 760–860 cluster; snapping these up to 900
                             would restyle 760–900 screens with no way to check
                             it here, so they are reported, not moved
    1240        (planner)    ditto
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --csa-bp-sm:   560px;
  --csa-bp-md:   720px;
  --csa-bp-lg:   900px;
  --csa-bp-rail: 1100px;
  --csa-bp-xl:   1440px;
  --csa-bp-fhd:  1920px;
  --csa-bp-qhd:  2560px;
  /* Not a rung — the smallest screen that must work. Used by the layout harness. */
  --csa-test-floor: 1024px;
}

/* rev_1213: detail overlays widen on big screens. 1200px is right on a laptop and
   leaves two thirds of a 4K display as empty scrim — the same waste the Planner had
   before rev_1204. Stepped rather than uncapped: a form field 3000px wide is worse
   than a narrow one, because the label and its value end up too far apart to pair. */
@media (min-width:1440px){ :root{ --csa-modal-max: 1400px } }
@media (min-width:1920px){ :root{ --csa-modal-max: 1680px } }
@media (min-width:2560px){ :root{ --csa-modal-max: 1920px } }

/* rev_1418: per-user text size. Small (default) = the compact scale above.
   Big = a more readable scale, midway between Small and the old (accidentally
   ~16px) Rental & Sales look. Applied via body[data-fontscale="big"] from the
   shared shell (topbar.js applyFontScale ← user_settings.font_scale / localStorage).
   Custom properties inherit, so redefining them on <body> cascades to every app. */
body[data-fontscale="big"]{
  --csa-f-2xs: 10.5px;
  --csa-f-xs:  11.5px;
  --csa-f-sm:  13px;
  --csa-f-md:  14.5px;
  --csa-f-lg:  17px;
  --csa-f-xl:  20px;
  --csa-f-2xl: 24px;
  --csa-f-3xl: 30px;
}

/* rev_1449: shared contact chips (CsaContact) */
.csa-cc{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.csa-cc-name{font-weight:600;color:var(--csa-text)}
.csa-cc-co{color:var(--csa-muted);font-size:var(--csa-f-sm)}
.csa-cc-chips{display:inline-flex;gap:6px;align-items:center}
.csa-cc-chip{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;border:.5px solid var(--csa-border);color:var(--csa-muted);text-decoration:none;font-size:var(--csa-f-lg)}
.csa-cc-chip:hover{background:var(--csa-accent-bg);border-color:var(--csa-accent);color:var(--csa-accent)}

/* rev_1453: user-dropdown icons align with the item text */
.csa-um-item svg{vertical-align:-3px;margin-right:5px;opacity:.85}

/* rev_1464: PIN confirmation modal */
.csa-pin-bg{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:var(--csa-z-pop,12000)}
.csa-pin{background:var(--csa-bg2);border:.5px solid var(--csa-border2);border-radius:14px;padding:20px;width:320px;max-width:92vw;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.csa-pin__title{font-weight:600;font-size:var(--csa-f-lg);color:var(--csa-text);margin-bottom:6px}
.csa-pin__msg{font-size:var(--csa-f-md);color:var(--csa-muted);line-height:1.45;margin-bottom:12px}
.csa-pin__inp{width:100%;box-sizing:border-box;background:var(--csa-input-bg,var(--csa-bg3));border:.5px solid var(--csa-border);border-radius:8px;color:var(--csa-text);padding:10px 12px;font-size:var(--csa-f-xl);letter-spacing:.3em;text-align:center}
.csa-pin__inp:focus{outline:none;border-color:var(--csa-accent)}
.csa-pin__err{color:var(--csa-danger);font-size:var(--csa-f-sm);margin-top:6px}
.csa-pin__row{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.csa-pin__cancel,.csa-pin__ok{border-radius:8px;padding:8px 14px;font:inherit;font-size:var(--csa-f-md);cursor:pointer;border:.5px solid var(--csa-border)}
.csa-pin__cancel{background:transparent;color:var(--csa-muted)}
.csa-pin__ok{background:var(--csa-accent);color:var(--csa-accent-text,#fff);border-color:var(--csa-accent)}