/* ═══════════════════════════════════════════════════════════════════════════
   csa-shell.css — rev_1186
   THE VISUAL CHANGE. Applies the approved material shell across the apps.

   WHAT THIS IS
   ────────────
   The approved mock (cassandra-material-design-audit.html) defines one page
   shape for every app:

       topbar  →  subhead (title + subtitle + actions)  →  tabs  →  card grid

   rev_1159 defined the primitives for that (.csa-tabs/.csa-tab with an accent
   underline, .csa-card, .csa-sec, .csa-pill) and rev_1161 adopted them in People
   as the reference app. But NO OTHER APP adopted them — which is exactly why
   Vincent said "so far I doid not see much redesign except the header". The
   tokens changed; the appearance largely did not.

   Rewriting sixteen apps' markup to use .csa-tab is weeks of risk. This file does
   the same job by MAPPING each app's existing tab/header/card classes onto the
   approved treatment. Same DOM, same behaviour, new appearance.

   WHAT CHANGES, DELIBERATELY
   ──────────────────────────
   Tabs stop being pills/boxes and become MATERIAL UNDERLINE tabs: muted label,
   accent label + 2px accent underline when active, count badge in a soft chip.
   That is the single most recognisable difference between old and new Cassandra,
   and it is layout-safe — nothing moves, the box just reads differently.

   Headers gain the subhead treatment: larger title, muted subtitle beside it, a
   hairline beneath, consistent breathing room.

   Cards gain one radius, one border, one hover elevation.

   THE RULE I AM HOLDING TO
   ────────────────────────
   Type, colour, weight, radius, border, shadow and the active-state treatment are
   fair game — that is the redesign. Anything that moves or resizes a layout BOX
   (width, flex-basis, grid-template, position, overflow) is NOT, because that is
   how a restyle silently breaks a dense screen. Tab padding is the one exception
   and is kept close to the old values.

   Loaded AFTER each app's stylesheet and BEFORE csa-normalize.css, so app rules
   are overridden here while normalize keeps the last word on controls.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tab rows ──────────────────────────────────────────────────────────────── */
/* One flex row, hairline underneath, wrapping rather than scrolling — a hidden
   horizontal scroll means tabs the user cannot see (the rev_1181 lesson). */
.ld-tabs, .mk-tabs, .pe-tabs, .usr-tabs, .ep-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:2px;
  border-bottom:1px solid var(--csa-line);
  padding:0;
}

/* ── Tabs themselves ──────────────────────────────────────────────────────── */
.ld-tab, .mk-tab, .pe-tab, .usr-tab, .ep-tab,
.pr-topic{
  position:relative;
  background:transparent;
  border:0;
  border-bottom:2px solid transparent;
  border-radius:0;
  padding:9px 14px;
  font-family:inherit;
  font-size:var(--csa-f-md);
  font-weight:500;
  line-height:1.2;
  color:var(--csa-muted);
  cursor:pointer;
  white-space:nowrap;
  transition:color var(--csa-t-fast) var(--csa-ease),
             border-color var(--csa-t-fast) var(--csa-ease);
}
.ld-tab:hover, .mk-tab:hover, .pe-tab:hover, .usr-tab:hover, .ep-tab:hover,
.pr-topic:hover{
  color:var(--csa-text);
  background:transparent;              /* kill the old hover fill */
}

/* Active: accent label + accent underline. `.on` everywhere except equipment,
   which uses `.active` — both listed rather than normalised, because renaming a
   state class means touching JS in every app for no visual gain. */
.ld-tab.on, .mk-tab.on, .pe-tab.on, .usr-tab.on, .ep-tab.active,
.pr-topic.on{
  color:var(--csa-accent-text);
  border-bottom-color:var(--csa-accent);
  background:transparent;
  font-weight:600;
}

/* Sub-tabs stay pills: they are a second level, and making them underlines too
   would leave two identical rows with no hierarchy between them. */
.pr-subtab{
  border-radius:var(--csa-r-full);
  font-size:var(--csa-f-sm);
  color:var(--csa-muted);
  border:1px solid var(--csa-line);
  background:transparent;
  transition:color var(--csa-t-fast) var(--csa-ease),
             border-color var(--csa-t-fast) var(--csa-ease);
}
.pr-subtab:hover{ color:var(--csa-text); border-color:var(--csa-line-2); }
.pr-subtab.on{
  color:var(--csa-accent-text);
  border-color:var(--csa-accent);
  background:var(--csa-accent-soft);
}

/* ── Counts on tabs ───────────────────────────────────────────────────────── */
/* Soft chip, tabular figures so a count changing 9 -> 10 does not shift the tab. */
.ld-tab-badge, .pr-topic-hint, .csa-tab__count{
  display:inline-block;
  margin-left:6px;
  padding:1px 6px;
  border-radius:var(--csa-r-full);
  background:var(--csa-surface-2);
  color:var(--csa-muted);
  font-size:var(--csa-f-2xs);
  font-weight:600;
  font-variant-numeric:tabular-nums;
  vertical-align:baseline;
}
.ld-tab.on .ld-tab-badge,
.pr-topic.on .pr-topic-hint{
  background:var(--csa-accent-bg);
  color:var(--csa-accent-text);
}

/* ── Subheads ─────────────────────────────────────────────────────────────── */
/* The app's own title block. Padding/hairline only — the flex layout each app
   already has is left alone. */
.pr-head, .ib-head, .eq-subheader{
  border-bottom:1px solid var(--csa-line);
}
.pr-head-title, .ib-head-title-row h1, .ib-head-title-row h2{
  font-size:var(--csa-f-2xl);
  font-weight:650;
  letter-spacing:-.01em;
  color:var(--csa-text);
}
/* Event name / client line reads as a subtitle, not a second title. */
.pr-head-event, .pr-head-clientline{
  font-size:var(--csa-f-sm);
  color:var(--csa-muted);
  font-weight:400;
}

/* Admin + Manager list heads: micro-label, which is what they actually are. */
.list-head{
  font-size:var(--csa-f-2xs);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--csa-muted);
  border-bottom:1px solid var(--csa-line);
}

/* ── Cards ────────────────────────────────────────────────────────────────── */
/* One radius, one border, one hover lift. Backgrounds are NOT set here: several
   apps tint cards by state (overdue, unpaid, internal) and flattening those would
   destroy information. */
.ld-card, .mk-card, .eq-card, .res-card, .pr-card, .ib-card{
  border-radius:var(--csa-r-md);
  border:1px solid var(--csa-line);
  transition:border-color var(--csa-t-fast) var(--csa-ease),
             box-shadow var(--csa-t-fast) var(--csa-ease);
}
.ld-card:hover, .mk-card:hover, .eq-card:hover, .res-card:hover,
.pr-card:hover, .ib-card:hover{
  border-color:var(--csa-line-2);
  box-shadow:var(--csa-shadow-1);
}

/* ── Section headings ─────────────────────────────────────────────────────── */
/* Every app had its own idea of a section label. One micro-label treatment. */
.ld-sec-title, .mk-sec-title, .eq-sec-title, .pr-sec-title, .res-sec-title,
.bs-sec-hd{
  font-size:var(--csa-f-2xs);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--csa-muted);
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .ld-tab, .mk-tab, .pe-tab, .usr-tab, .ep-tab, .pr-topic, .pr-subtab,
  .ld-card, .mk-card, .eq-card, .res-card, .pr-card, .ib-card{
    transition:none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   rev_1188 — the three apps that had no mock until rev_1187.
   Built to the approved mock (cassandra-planner-equipment-scene-mocks.html),
   taking its defaults as the decision: Planner keeps both axes visible, Scene
   panels float, Equipment's Owned/Catalog stays a subhead toggle.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── PLANNER ───────────────────────────────────────────────────────────────
   Planner is TWO AXES, not a view list: scope (day/week/month/year/custom) x
   render (list/timeline/calendar) = 15 legal states, plus three group modes.
   Both axes stay visible — the mock's call — because collapsing one into a
   dropdown costs a click AND hides which state you are in.

   These are SEGMENTED controls, deliberately not the underline tabs used
   elsewhere: underline tabs mean "navigate to a different place", segments mean
   "same data, different shape". Using one treatment for both would flatten a
   real distinction. */
.pl-bar{
  border-bottom:1px solid var(--csa-line);
}
.pl-title{
  font-size:var(--csa-f-2xl);
  font-weight:650;
  letter-spacing:-.01em;
  color:var(--csa-text);
}
.pl-views, .pl-scopes{
  border:1px solid var(--csa-line);
  border-radius:var(--csa-r-sm);
  overflow:hidden;
  background:transparent;
  padding:0;
  gap:0;
}
.pl-view, .pl-scopebtn{
  background:transparent;
  border:0;
  border-right:1px solid var(--csa-line);
  border-radius:0;
  color:var(--csa-muted);
  font-weight:500;
  transition:background var(--csa-t-fast) var(--csa-ease),
             color var(--csa-t-fast) var(--csa-ease);
}
.pl-view:last-child, .pl-scopebtn:last-child{ border-right:0; }
.pl-view:hover, .pl-scopebtn:hover{ color:var(--csa-text); background:var(--csa-hover); }
.pl-view.on, .pl-scopebtn.on{
  background:var(--csa-accent-soft);
  color:var(--csa-accent-text);
  font-weight:600;
}
/* Compare has its own tab strip inside its modal — that one IS navigation, so it
   gets the underline treatment to match the rest of Cassandra. */
.pl-cmp-tabs{
  display:flex; flex-wrap:wrap; gap:2px;
  border-bottom:1px solid var(--csa-line);
}
.pl-cmp-tab{
  background:transparent; border:0; border-bottom:2px solid transparent; border-radius:0;
  padding:9px 14px; font:500 var(--csa-f-md)/1.2 inherit; color:var(--csa-muted); cursor:pointer;
}
.pl-cmp-tab:hover{ color:var(--csa-text); }
.pl-cmp-tab.on{
  color:var(--csa-accent-text); border-bottom-color:var(--csa-accent); font-weight:600;
}
/* Lane and phase headers were six different label styles. One micro-label. */
.pl-lane-head, .pl-lane-nm, .pl-list-dayhead, .pl-aggrp-hd, .pl-ressec-head{
  font-size:var(--csa-f-2xs);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--csa-muted);
}

/* ── EQUIPMENT ─────────────────────────────────────────────────────────────
   Owned / Catalog is one shell over two datasets, so it stays a toggle in the
   subhead rather than becoming tabs — tabs would imply two places. */
.eq-subheader{ border-bottom:1px solid var(--csa-line); }
/* Brand groupings in the rail are labels, not rows. */
.eq-list-brand-header{
  font-size:var(--csa-f-2xs);
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--csa-muted);
  background:var(--csa-surface-2);
  border-bottom:1px solid var(--csa-line);
}
.eq-list-item{
  border-bottom:1px solid var(--csa-line);
  border-left:2px solid transparent;
  transition:background var(--csa-t-fast) var(--csa-ease),
             border-color var(--csa-t-fast) var(--csa-ease);
}
.eq-list-item:hover{ background:var(--csa-hover); }
/* Selected reads as accent-on-the-edge, matching the list-row treatment
   csa-normalize already uses elsewhere, so selection means one thing app-wide. */
.eq-list-item.on, .eq-list-item.active, .eq-list-item.selected{
  background:var(--csa-accent-soft);
  border-left-color:var(--csa-accent);
}
.eq-list-name{ font-size:var(--csa-f-md); color:var(--csa-text); }
.eq-device-name{ font-size:var(--csa-f-md); font-weight:600; }
.eq-device-sub{ font-size:var(--csa-f-xs); color:var(--csa-hint); }

/* ── SCENE BUILDER ─────────────────────────────────────────────────────────
   Deliberately NO tabs. It is a canvas tool with a map, live collaborators, a
   floor-plan overlay and calibration — applying the tab pattern here would be
   pattern for its own sake. The chrome becomes floating accordion panels so the
   canvas keeps the screen, which is the mock's call.

   Note scene.html loads the legacy theme.css vocabulary; these rules land after
   it, so the panels pick up Cassandra surfaces without touching that file. */
.acc{
  background:var(--csa-surface-1);
  border:1px solid var(--csa-line);
  border-radius:var(--csa-r-md);
  box-shadow:var(--csa-shadow-2);
  overflow:hidden;
}
.acc-hd{
  border-bottom:1px solid var(--csa-line);
  background:transparent;
}
.acc-title{
  font-size:var(--csa-f-2xs);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--csa-muted);
}
.acc-chevron{ color:var(--csa-hint); }
.acc.open > .acc-hd .acc-title{ color:var(--csa-text); }
/* Readouts are numbers you compare — tabular figures stop them jittering. */
.bstat-val, .bstat-label{ font-variant-numeric:tabular-nums; }
.bstat-label{ font-size:var(--csa-f-2xs); color:var(--csa-hint); letter-spacing:.06em; text-transform:uppercase; }

@media (prefers-reduced-motion: reduce){
  .pl-view, .pl-scopebtn, .eq-list-item{ transition:none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   rev_1189 — the pages the shell had not reached.
   Vincent: "so do the untouched pages to!"

   These are SCOPED with [data-page="…"] rather than styled by class name, and
   that is the whole point. The classes these pages use — .card, .btn, .field,
   .sub, .hint, .brand, .done — are shared with 5 to 26 other pages each,
   including apps already styled. Restyling .card bare would fire a shotgun
   across the product. A per-page hook on <body> keeps every rule below exactly
   as wide as intended.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The auth family: login, forgot / reset / change password, set credential ──
   The first screen anyone sees, and until now the least considered. One card
   treatment across all of them so the entry to Cassandra matches the inside. */
[data-page="login"] .card,
[data-page="forgot-password"] .card,
[data-page="reset-password"] .card,
[data-page="change-password"] .card,
[data-page="set-credential"] .sc-card,
[data-page="pin-login"] .pl-card{
  background:var(--csa-surface-1);
  border:1px solid var(--csa-line);
  border-radius:var(--csa-r-lg);
  box-shadow:var(--csa-shadow-2);
}
[data-page="login"] .logo-text,
[data-page="forgot-password"] .logo-text,
[data-page="reset-password"] .logo-text,
[data-page="change-password"] .logo-text{
  font-size:var(--csa-f-xl);
  font-weight:650;
  letter-spacing:-.01em;
  color:var(--csa-text);
}
[data-page="login"] .sub, [data-page="forgot-password"] .hint,
[data-page="reset-password"] .hint, [data-page="change-password"] .sub,
[data-page="set-credential"] .sc-sub, [data-page="pin-login"] .pl-sub{
  color:var(--csa-muted); font-size:var(--csa-f-sm);
}
/* Errors read as danger, not as body text — on a login screen that matters. */
[data-page="login"] .err, [data-page="forgot-password"] .err,
[data-page="reset-password"] .err, [data-page="change-password"] .err,
[data-page="set-credential"] .sc-msg.err, [data-page="pin-login"] .pl-msg.err{
  color:var(--csa-danger-text); font-size:var(--csa-f-sm);
}
[data-page="login"] .forgot, [data-page="forgot-password"] .back,
[data-page="reset-password"] .back, [data-page="pin-login"] .pl-link{
  color:var(--csa-accent-text); text-decoration:none;
}
[data-page="login"] .forgot:hover, [data-page="forgot-password"] .back:hover,
[data-page="reset-password"] .back:hover, [data-page="pin-login"] .pl-link:hover{
  text-decoration:underline;
}
/* PIN keypad: tabular figures and one radius. A keypad with drifting digit
   widths feels cheap, and this is the screen crew use on site. */
[data-page="pin-login"] .pl-key{
  border-radius:var(--csa-r-md);
  border:1px solid var(--csa-line);
  background:var(--csa-surface-1);
  font-variant-numeric:tabular-nums;
  font-size:var(--csa-f-xl);
  color:var(--csa-text);
}
[data-page="pin-login"] .pl-key:hover{ border-color:var(--csa-accent); background:var(--csa-accent-soft); }
[data-page="pin-login"] .pl-dot{ border-color:var(--csa-line-2); }
[data-page="pin-login"] .pl-lbl{
  font-size:var(--csa-f-2xs); letter-spacing:.08em; text-transform:uppercase; color:var(--csa-muted);
}

/* ── Launcher: the front door ──────────────────────────────────────────────── */
[data-page="launcher"] .tile-name{
  font-size:var(--csa-f-md); font-weight:600; color:var(--csa-text); letter-spacing:-.005em;
}
[data-page="launcher"] .tile-desc{ font-size:var(--csa-f-xs); color:var(--csa-hint); }
[data-page="launcher"] .tile-tag{
  font-size:var(--csa-f-2xs); font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--csa-muted); background:var(--csa-surface-2);
  border-radius:var(--csa-r-full); padding:1px 7px;
}
[data-page="launcher"] .tile-tag-feature{
  background:var(--csa-accent-bg); color:var(--csa-accent-text);
}

/* ── Wiki ─────────────────────────────────────────────────────────────────── */
[data-page="wiki"] .wk-btn{
  border-radius:var(--csa-r-sm); border:1px solid var(--csa-line-2);
  background:transparent; color:var(--csa-text); font-weight:500;
}
[data-page="wiki"] .wk-btn:hover{ background:var(--csa-hover); }
[data-page="wiki"] .wk-btn.primary{
  background:var(--csa-accent); border-color:var(--csa-accent); color:var(--csa-on-accent);
}

/* ── Items catalog ────────────────────────────────────────────────────────── */
[data-page="items"] .csa-sidebar{ border-right:1px solid var(--csa-line); }
[data-page="items"] .field-row{ gap:var(--csa-s-3); }

/* ── Sales: a retirement notice, so make it read as one ───────────────────── */
[data-page="sales"] .retired-card{
  background:var(--csa-surface-1); border:1px solid var(--csa-line);
  border-radius:var(--csa-r-lg);
}
[data-page="sales"] .retired-card-title{
  font-size:var(--csa-f-lg); font-weight:600; color:var(--csa-text);
}
[data-page="sales"] .retired-card-text, [data-page="sales"] .retired-note{
  color:var(--csa-muted); font-size:var(--csa-f-sm);
}
[data-page="sales"] .retired-icon{ color:var(--csa-hint); }

/* ── Client-facing pages: portal, public form, closeout ────────────────────
   A client sees these and nothing else of Cassandra, so they carry the brand
   alone. Same surfaces and hairlines as the inside of the product. */
[data-page="portal"] .po-brand{
  font-size:var(--csa-f-lg); font-weight:650; letter-spacing:-.01em; color:var(--csa-text);
}
/* public-form and closeout-public deliberately do NOT load cassandra-theme.css.
   They declare their own standalone :root (--bg/--text/--border/--accent/--card)
   so a client-facing page cannot break when the app theme changes — a good call,
   so it is respected rather than overridden. These rules therefore use THEIR
   token names, and only the scale tokens from csa-tokens.css (--csa-f-*,
   --csa-r-*), which those pages DO load. Using --csa-text here would resolve to
   nothing and the rule would silently do less than it appears to. */
[data-page="public-form"] .brand, [data-page="closeout-public"] .brand{
  font-size:var(--csa-f-lg); font-weight:650; letter-spacing:-.01em; color:var(--text);
}
[data-page="portal"] .po-page-title{
  font-size:var(--csa-f-2xl); font-weight:650; letter-spacing:-.01em;
}
[data-page="portal"] .po-row{ border-bottom:1px solid var(--csa-line); }
[data-page="portal"] .po-muted{ color:var(--csa-muted); font-size:var(--csa-f-sm); }
[data-page="public-form"] .field-lbl{ color:var(--muted); font-size:var(--csa-f-sm); }
[data-page="public-form"] .card{
  background:var(--accent-bg); border:1px solid var(--border); border-radius:var(--csa-r-lg);
}
[data-page="closeout-public"] .card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--csa-r-lg);
}
/* public-form has no warning token of its own; --danger is its only alert colour,
   so the alert uses that rather than inventing a hue this page does not define. */
[data-page="public-form"] .alert{
  border:1px solid var(--danger); color:var(--danger);
  border-radius:var(--csa-r-sm); font-size:var(--csa-f-sm);
}
[data-page="public-form"] .done-icon, [data-page="closeout-public"] .done{
  color:var(--accent);
}

/* ── Export ───────────────────────────────────────────────────────────────── */
[data-page="export"] .xp-app{
  border:1px solid var(--csa-line); border-radius:var(--csa-r-md); background:var(--csa-surface-1);
}
[data-page="export"] .xp-empty{ color:var(--csa-hint); font-size:var(--csa-f-sm); }
[data-page="export"] .xp-btn-sm{
  border-radius:var(--csa-r-sm); border:1px solid var(--csa-line-2);
  background:transparent; color:var(--csa-text);
}

/* ── rev_1190: Admin → Workflows (workflow cycles editor) ─────────────────── */
.wf-card{
  background:var(--csa-surface-1); border:1px solid var(--csa-line);
  border-radius:var(--csa-r-md); padding:var(--csa-s-3) var(--csa-s-4);
  margin-bottom:var(--csa-s-3);
}
.wf-card-hd{ display:flex; align-items:center; gap:var(--csa-s-2); flex-wrap:wrap; margin-bottom:var(--csa-s-2); }
.wf-flex{ flex:1; }
.wf-name{
  font-size:var(--csa-f-lg); font-weight:650; letter-spacing:-.01em;
  background:transparent; border:1px solid transparent; border-radius:var(--csa-r-sm);
  color:var(--csa-text); padding:3px 6px; min-width:9rem;
}
.wf-name:hover, .wf-name:focus{ border-color:var(--csa-line); background:var(--csa-bg3); }
.wf-key{
  font-size:var(--csa-f-2xs); letter-spacing:.08em; text-transform:uppercase;
  color:var(--csa-hint); font-variant-numeric:tabular-nums;
}
.wf-inline{ display:inline-flex; align-items:center; gap:6px; font-size:var(--csa-f-sm); color:var(--csa-muted); }
.wf-inline input[type=text], .wf-focus{ width:8rem; }
.wf-notes{
  font-size:var(--csa-f-sm); color:var(--csa-muted);
  border-left:2px solid var(--csa-line); padding-left:10px; margin-bottom:var(--csa-s-2);
}
/* One row per participating app. Fixed columns so the app / role / param / map
   values line up down the list and can be compared at a glance. */
.wf-approw{
  display:grid; grid-template-columns:11rem 7rem 8rem 1fr 2rem;
  gap:var(--csa-s-2); align-items:center; padding:4px 0;
}
.wf-map{ font-family:var(--csa-mono, ui-monospace, monospace); font-size:var(--csa-f-sm); }
.wf-msg{ font-size:var(--csa-f-sm); min-height:1.2em; margin-bottom:var(--csa-s-2); }
.wf-msg.ok{ color:var(--csa-accent-text); }
.wf-msg.err{ color:var(--csa-danger-text); }
@media (max-width: 900px){
  .wf-approw{ grid-template-columns:1fr 1fr; }
}

/* ── rev_1190: workflow-cycle app row in the topbar ───────────────────────── */
/* rev_1198: this lives in the topbar's CENTRED, absolutely-positioned slot, so it
   must NOT wrap — a second line would grow upward out of a 64px bar and overlap
   the brand and the app name. Scroll instead, and keep it on one line. */
.csa-tb-cycle{
  display:flex; align-items:center; gap:var(--csa-s-1);
  flex-wrap:nowrap; min-width:0; max-width:100%;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none;
}
.csa-tb-cycle::-webkit-scrollbar{ display:none; }
/* rev_1196: now a link back to workspace switching, since the pills are hidden
   while a cycle row is showing. */
.csa-tb-cycle-lab{
  font-size:var(--csa-f-2xs); font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--csa-hint);
  padding-right:var(--csa-s-2); margin-right:var(--csa-s-1);
  border-right:1px solid var(--csa-line); white-space:nowrap;
  text-decoration:none;
}
.csa-tb-cycle-lab:hover{ color:var(--csa-accent-text); }
.csa-tb-cyapp{
  padding:3px 9px; border-radius:var(--csa-r-full);
  font-size:var(--csa-f-sm); color:var(--csa-muted);
  text-decoration:none; white-space:nowrap;
  border:1px solid transparent;
  transition:color var(--csa-t-fast) var(--csa-ease),
             border-color var(--csa-t-fast) var(--csa-ease);
}
.csa-tb-cyapp:hover{ color:var(--csa-text); border-color:var(--csa-line); }
.csa-tb-cyapp.on{
  color:var(--csa-accent-text); border-color:var(--csa-accent);
  background:var(--csa-accent-soft);
}
/* Dim = reachable, but context is dropped when you go there. Deliberately still a
   real link with a tooltip explaining why, rather than disabled: "you may go, it
   just will not carry your project" is information, not a blocked door. */
.csa-tb-cyapp.dim{ color:var(--csa-hint); opacity:.62; }
.csa-tb-cyapp.dim:hover{ color:var(--csa-muted); opacity:1; }
/* The centre slot is a fixed-width overlay between the brand and the right-hand
   controls, so cap it rather than let it run under either. */
/* Class rather than :has() — a layout cap this load-bearing should not depend on
   selector support, and the renderer knows when it applies. */
.csa-topbar-new #csa-topbar-mid.csa-tb-has-cycle{ max-width:min(62vw, 780px); }
/* First thing to go on a narrow screen — the app name matters more than the aid. */
@media (max-width: 1100px){ .csa-tb-cycle{ display:none; } }

/* rev_1196: workspace default-app picker in the workspace editor. */
.mgr-ws-default{
  display:flex; align-items:center; gap:var(--csa-s-2);
  flex-wrap:wrap; margin-bottom:var(--csa-s-3);
}
.mgr-ws-default label{
  font-size:var(--csa-f-2xs); letter-spacing:.08em; text-transform:uppercase;
  color:var(--csa-muted);
}
.mgr-ws-hint{ font-size:var(--csa-f-xs); color:var(--csa-hint); }