/* ============================================================================
   ccam-shell.css — unified CCAM application shell + design system
   Release 1.

   Load ONCE per page, as the LAST stylesheet in <head>, after the page's own
   <style> blocks:
       <link rel="stylesheet" href="ccam-shell.css">

   Load order matters: this file re-declares :root tokens to normalise the
   platform, and needs to win over map.html's earlier :root block.

   Nothing here changes the 40px header height or the 200px/44px nav widths.
   map.html computes .app{height:calc(100vh - 40px)} and margin-left:200px off
   those numbers, so they are load-bearing and deliberately left alone.
   ========================================================================= */

/* ── §0  canonical tokens ───────────────────────────────────────────────────
   Copied verbatim from waterfall.html, which five of seven pages already
   match. Re-declared here so every page resolves identically, and so map.html
   picks up the standard palette instead of its own.                          */
:root{
  --bg:#ffffff;--bg2:#f5f5f4;--bg3:#efede8;
  --text:#1a1a1a;--text2:#6b7280;--text3:#9ca3af;
  --border:#e5e7eb;--border2:#d1d5db;
  --blue:#1a4f8a;--blue-bg:#e8f0fb;--blue-text:#0e3a6b;
  --gold:#9a7632;--gold-bg:#f7f0e0;--gold-text:#7a5c20;
  --green:#0F6E56;--green-bg:#e1f5ee;--green-text:#085041;
  --amber:#854F0B;--amber-bg:#faeeda;--amber-text:#633806;
  --purple:#533AB7;--purple-bg:#eeedfe;--purple-text:#3c3489;
  --red:#A32D2D;--red-bg:#fcebeb;--red-text:#791f1f;
  --nav-bg:#1a1a2e;--nav-bg2:#252540;--brand-gold:#e2c97a;--brand-blue:#185fa5;
  --gray-bg:#f1efe8;--gray-text:#5f5e5a;
  --radius:8px;--radius-lg:12px;
  --mono:'ui-monospace','SF Mono','Cascadia Code','Fira Code',monospace;

  /* map.html aliases — normalised (§ answer: "match other pages").
     map's --bg was #efede8 (page) and --surf was #ffffff (card). The other
     six pages use --bg for the surface, so both now resolve to #ffffff and
     map loses its warm background, as requested. Old names stay defined so
     every existing map rule that references them keeps working. */
  --surf:#ffffff;--surf2:#f5f5f4;
  --txt:#1a1a1a;--mut:#6b7280;--bdr:#e5e7eb;
  --acc:#9a7632;--acc-bg:#f7f0e0;

  /* shell chrome — the dark header band, shared by every page */
  --shell-h:40px;
  --shell-bg:rgba(10,12,28,.92);
  --shell-line:rgba(255,255,255,.08);
  --shell-txt:#ffffff;
  --shell-mut:rgba(255,255,255,.55);
  --shell-gold:rgba(201,169,110,.8);
  --shell-gold-hi:#e2c97a;
  --shell-hair:rgba(255,255,255,.12);
  --shell-menu-bg:#141829;

  /* density — overwritten by [data-ccam-density] below */
  --d-cell-y:7px;--d-cell-x:10px;--d-row:1.45;--d-nav-y:8px;--d-gap:14px;
}

@media(prefers-color-scheme:dark){
  :root{
    --bg:#1c1c1e;--bg2:#2c2c2e;--bg3:#3a3a3c;
    --text:#f2f2f7;--text2:#aeaeb2;--text3:#636366;
    --border:#3a3a3c;--border2:#48484a;
    --blue:#4d91d4;--blue-bg:#0a2540;--blue-text:#8bbee8;
    --gold:#c9a84c;--gold-bg:#2a2008;--gold-text:#e2c97a;
    --green:#1D9E75;--green-bg:#04342c;--green-text:#5dcaa5;
    --amber:#EF9F27;--amber-bg:#412402;--amber-text:#fac775;
    --purple:#7F77DD;--purple-bg:#26215c;--purple-text:#afa9ec;
    --red:#E24B4A;--red-bg:#501313;--red-text:#f09595;
    --gray-bg:#2c2c2e;--gray-text:#aeaeb2;

    --surf:#1c1c1e;--surf2:#2c2c2e;
    --txt:#f2f2f7;--mut:#aeaeb2;--bdr:#3a3a3c;
    --acc:#c9a84c;--acc-bg:#2a2008;
  }
}

/* ── §1  density (§12) ─────────────────────────────────────────────────────
   Applied to <html> so it is available before first paint. Deliberately
   scoped to generic table/nav selectors so it works on every page without
   per-page wiring.                                                          */
html[data-ccam-density="compact"]{
  --d-cell-y:3px;--d-cell-x:7px;--d-row:1.3;--d-nav-y:5px;--d-gap:9px;
}
html[data-ccam-density="compact"] table:not(.ccam-no-density) td,
html[data-ccam-density="compact"] table:not(.ccam-no-density) th{
  padding-top:var(--d-cell-y);padding-bottom:var(--d-cell-y);
  line-height:var(--d-row);
}
html[data-ccam-density="compact"] .nav-item{padding-top:var(--d-nav-y);padding-bottom:var(--d-nav-y)}
html[data-ccam-density="compact"] .card,
html[data-ccam-density="compact"] .panel{padding:var(--d-gap)}

/* ── §2  shell header ──────────────────────────────────────────────────────
   #ccam-header already exists on pipeline / map / broker / waterfall. This
   section styles the pieces the shell ADDS to it, and restates the base rules
   so dd.html and admin.html (which had no header) render identically.       */
#ccam-header{
  position:fixed;top:0;left:0;right:0;height:var(--shell-h);z-index:10000;
  background:var(--shell-bg);backdrop-filter:blur(12px);
  border-bottom:0.5px solid var(--shell-line);
  display:flex;align-items:center;padding:0 10px;gap:9px;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
#ccam-header a.ccam-home{
  font-size:11px;font-weight:600;color:var(--shell-gold);
  text-decoration:none;letter-spacing:.03em;display:flex;align-items:center;gap:5px;
  transition:color .15s;white-space:nowrap;flex:none;
}
#ccam-header a.ccam-home:hover{color:var(--shell-gold-hi)}
#ccam-header .ccam-divider{width:0.5px;height:18px;background:var(--shell-hair);flex-shrink:0}
#ccam-platform-wrap{position:relative;display:flex;align-items:center;gap:8px;min-width:0;flex:none}
#ccam-platform-btn{
  background:transparent;border:0.5px solid rgba(201,169,110,.22);border-radius:6px;
  padding:5px 10px;color:var(--shell-txt);font-size:12px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;gap:7px;font-family:inherit;white-space:nowrap;
}
#ccam-platform-btn:hover{background:rgba(201,169,110,.08);border-color:rgba(201,169,110,.5);color:var(--shell-gold-hi)}
#ccam-platform-menu{
  position:absolute;top:calc(100% + 7px);left:0;background:var(--shell-menu-bg);
  border:0.5px solid var(--shell-hair);border-radius:10px;padding:6px;min-width:235px;
  box-shadow:0 8px 32px rgba(0,0,0,.5);display:none;z-index:10002;
}
#ccam-platform-menu.open{display:block}
#ccam-platform-menu a{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:7px;
  text-decoration:none;color:var(--shell-txt);font-size:12px;font-weight:500;transition:background .12s;
}
#ccam-platform-menu a:hover{background:rgba(255,255,255,.08)}
#ccam-platform-menu a.active{background:rgba(201,169,110,.1);color:var(--shell-gold-hi)}
#ccam-platform-menu .sw-icon{font-size:15px;flex-shrink:0;width:18px;text-align:center}
#ccam-platform-menu .sw-label{flex:1}
#ccam-platform-menu .sw-sub{font-size:10px;color:rgba(255,255,255,.45);margin-top:1px}

/* Legacy single-module label. The shell replaces its contents with the
   breadcrumb trail; kept as the mount point so no page markup has to change. */
#ccam-module-label{
  font-size:11px;color:var(--shell-mut);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;min-width:0;
}

/* Push page content below the fixed header. */
body{padding-top:var(--shell-h)!important}

/* ── §3  breadcrumbs (§5) ──────────────────────────────────────────────────
   Rendered INSIDE the 40px band rather than as a second bar, so no page's
   height math changes.                                                       */
#ccam-crumbs{
  display:flex;align-items:center;gap:5px;min-width:0;flex:1;
  font-size:11px;color:var(--shell-mut);overflow:hidden;
}
#ccam-crumbs .cr{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px;
  color:var(--shell-mut);text-decoration:none;border-radius:4px;padding:2px 3px;
}
#ccam-crumbs a.cr:hover{color:var(--shell-gold-hi);background:rgba(255,255,255,.06)}
#ccam-crumbs .cr.last{color:var(--shell-txt);font-weight:600}
#ccam-crumbs .cr-sep{color:rgba(255,255,255,.28);flex:none;font-size:10px}
@media(max-width:820px){
  #ccam-crumbs .cr:not(.last):not(.cr-keep){display:none}
  #ccam-crumbs .cr-sep{display:none}
}

/* ── §4  header actions: search / create / sync / user ─────────────────────*/
#ccam-actions{display:flex;align-items:center;gap:7px;flex:none;margin-left:auto}

.ccam-hbtn{
  background:transparent;border:0.5px solid var(--shell-hair);border-radius:6px;
  color:var(--shell-txt);font-family:inherit;font-size:11px;font-weight:600;
  cursor:pointer;display:flex;align-items:center;gap:6px;padding:5px 9px;
  white-space:nowrap;transition:background .12s,border-color .12s,color .12s;
}
.ccam-hbtn:hover{background:rgba(255,255,255,.09);border-color:rgba(201,169,110,.45);color:var(--shell-gold-hi)}
.ccam-hbtn svg{width:13px;height:13px;flex:none}
.ccam-hbtn .kbd{
  font-family:var(--mono);font-size:9.5px;color:rgba(255,255,255,.42);
  border:0.5px solid rgba(255,255,255,.16);border-radius:3px;padding:1px 4px;line-height:1.35;
}

/* Search trigger reads as a field, not a button — it is the primary way in. */
/* Reads as a field rather than a button — it is the primary way into the
   platform and needs to be findable at a glance, not decoded from an icon.
   The collapse breakpoint is 760px (phones only), NOT a laptop width: at
   1080px this shrank to a bare magnifier on any half-width or 13" window,
   which is how it went missing. */
#ccam-search-trigger{
  min-width:210px;justify-content:flex-start;color:var(--shell-mut);font-weight:400;
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);
}
#ccam-search-trigger:hover{background:rgba(255,255,255,.12)}
#ccam-search-trigger .kbd{margin-left:auto}
@media(max-width:900px){#ccam-search-trigger{min-width:150px}#ccam-search-trigger .kbd{display:none}}
@media(max-width:760px){#ccam-search-trigger{min-width:0}#ccam-search-trigger .stxt{display:none}}
@media(max-width:700px){#ccam-create-btn .ctxt{display:none}}

/* Sync status (§9) — silent when idle, so it adds no persistent noise. */
#ccam-sync{
  display:none;align-items:center;gap:5px;font-size:10.5px;font-weight:600;
  padding:3px 8px;border-radius:20px;white-space:nowrap;letter-spacing:.01em;
}
#ccam-sync.on{display:flex}
#ccam-sync.s-saving{background:rgba(255,255,255,.09);color:rgba(255,255,255,.75)}
#ccam-sync.s-saved{background:rgba(29,158,117,.16);color:#7fd8b8}
#ccam-sync.s-error{background:rgba(226,75,74,.18);color:#f0a3a3;cursor:pointer}
#ccam-sync.s-offline{background:rgba(239,159,39,.16);color:#f5c883}
#ccam-sync.fade{opacity:0;transition:opacity .5s ease}
#ccam-sync .dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
#ccam-sync.s-saving .dot{animation:ccam-pulse 1s ease-in-out infinite}
@keyframes ccam-pulse{0%,100%{opacity:.35}50%{opacity:1}}

/* User chip */
#ccam-user-wrap{position:relative;flex:none}
#ccam-user-btn{
  width:26px;height:26px;border-radius:50%;border:0.5px solid rgba(201,169,110,.35);
  background:rgba(201,169,110,.14);color:var(--shell-gold-hi);
  font-family:inherit;font-size:10.5px;font-weight:700;letter-spacing:.02em;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
}
#ccam-user-btn:hover{background:rgba(201,169,110,.26)}
#ccam-user-menu{
  position:absolute;top:calc(100% + 7px);right:0;background:var(--shell-menu-bg);
  border:0.5px solid var(--shell-hair);border-radius:10px;padding:6px;min-width:210px;
  box-shadow:0 8px 32px rgba(0,0,0,.5);display:none;z-index:10002;
}
#ccam-user-menu.open{display:block}
#ccam-user-menu .um-id{padding:9px 11px 10px;border-bottom:0.5px solid var(--shell-hair);margin-bottom:5px}
#ccam-user-menu .um-name{font-size:12px;font-weight:600;color:var(--shell-txt)}
#ccam-user-menu .um-mail{font-size:10px;color:rgba(255,255,255,.45);margin-top:2px;word-break:break-all}
#ccam-user-menu .um-role{
  display:inline-block;margin-top:6px;font-size:9px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;padding:2px 6px;border-radius:4px;
  background:rgba(201,169,110,.16);color:var(--shell-gold-hi);
}
#ccam-user-menu button,#ccam-user-menu a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  padding:8px 11px;border-radius:6px;border:none;background:none;text-align:left;
  color:var(--shell-txt);font-family:inherit;font-size:12px;cursor:pointer;text-decoration:none;
}
#ccam-user-menu button:hover,#ccam-user-menu a:hover{background:rgba(255,255,255,.08)}
#ccam-user-menu .um-val{font-size:10.5px;color:rgba(255,255,255,.45);font-weight:600}

/* Create menu */
#ccam-create-wrap{position:relative;flex:none}
#ccam-create-menu{
  position:absolute;top:calc(100% + 7px);right:0;background:var(--shell-menu-bg);
  border:0.5px solid var(--shell-hair);border-radius:10px;padding:6px;min-width:230px;
  box-shadow:0 8px 32px rgba(0,0,0,.5);display:none;z-index:10002;
  max-height:min(70vh,520px);overflow-y:auto;
}
#ccam-create-menu.open{display:block}
#ccam-create-menu .cm-sec{
  padding:8px 11px 4px;font-size:9px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.35);
}
#ccam-create-menu button{
  display:flex;align-items:center;gap:9px;width:100%;padding:8px 11px;border-radius:6px;
  border:none;background:none;text-align:left;color:var(--shell-txt);
  font-family:inherit;font-size:12px;cursor:pointer;
}
#ccam-create-menu button:hover{background:rgba(255,255,255,.08)}
#ccam-create-menu button .cm-ctx{
  font-size:9.5px;color:var(--shell-gold-hi);margin-left:auto;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90px;
}
#ccam-create-menu button .cm-ico{width:15px;text-align:center;flex:none;opacity:.65;font-size:12px}

/* ── §5  search trigger ────────────────────────────────────────────────────
   No palette CSS lives here. ccam-qol.js already ships the .ccam-gs-* palette
   that CCAM.search renders; a second one would be a competing implementation.
   The header trigger below simply opens it.                                 */

/* ── §6  loading / empty / error states (§10) ──────────────────────────────
   These are NOT new. waterfall.html already shipped ccamEmpty / ccamLoading /
   ccamSkeletonRows and the matching CSS, and uses them in 13 places. The rules
   below are copied from waterfall.html verbatim so they are a no-op there, and
   promoted here so the other six pages gain the same vocabulary instead of
   growing a second one. Only the error state is genuinely new.               */
.ccam-loading{display:flex;align-items:center;gap:9px;padding:16px;color:var(--text2);font-size:12.5px}
.ccam-spinner{width:13px;height:13px;border:1.5px solid var(--border2);border-top-color:var(--text2);
  border-radius:50%;animation:ccamspin .7s linear infinite;flex-shrink:0}
@keyframes ccamspin{to{transform:rotate(360deg)}}
.ccam-skel{background:linear-gradient(90deg,var(--bg2) 25%,var(--border) 37%,var(--bg2) 63%);
  background-size:400% 100%;animation:ccamskel 1.3s ease-in-out infinite;
  border-radius:var(--radius);height:12px;margin:8px 0}
@keyframes ccamskel{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media (prefers-reduced-motion:reduce){.ccam-spinner,.ccam-skel{animation:none}}
.empty{padding:26px 20px;text-align:center}
.empty-title{font-size:13.5px;font-weight:600;color:var(--text);margin-bottom:4px}
.empty-sub{font-size:12px;color:var(--text2);line-height:1.55;max-width:400px;margin:0 auto 12px}
.empty .btn{margin:0 3px}

/* Error variant — new. Same shape as .empty, with the raw technical detail
   tucked behind a disclosure so the surface stays friendly. */
.empty.is-error .empty-title{color:var(--red-text)}
.empty.is-error:before{content:'\26A0';display:block;font-size:20px;color:var(--red);opacity:.8;margin-bottom:6px}
.ccam-err-det{margin:10px auto 0;font-size:11px;max-width:460px;text-align:left}
.ccam-err-det summary{cursor:pointer;color:var(--text2);font-weight:600;list-style:none;text-align:center}
.ccam-err-det summary::-webkit-details-marker{display:none}
.ccam-err-det summary:before{content:'\25B8 ';font-size:9px}
.ccam-err-det[open] summary:before{content:'\25BE '}
.ccam-err-det pre{margin-top:7px;background:var(--bg2);border:0.5px solid var(--border);
  border-radius:6px;padding:9px 11px;font-family:var(--mono);font-size:10.5px;
  white-space:pre-wrap;word-break:break-word;max-height:180px;overflow:auto;color:var(--text2)}

/* ── §7  design-system reconciliation (§11) ────────────────────────────────
   No new button or badge class is introduced: .btn / .btn.sm / .btn.pri and
   .badge already exist on all six application pages, so a .ccam-btn would be
   a second implementation of a solved problem.

   What IS inconsistent is the badge modifier spelling. pipeline / broker / dd
   use .badge-green (hyphen); waterfall uses .badge.green (compound). Both
   spellings are aliased below so either works platform-wide and no existing
   markup has to change.

   Status colours per the brief: blue=interaction, gold=brand, green=positive,
   amber=warning, red=critical, gray=neutral.                                */
.badge.blue,  .badge-blue  {background:var(--blue-bg);color:var(--blue-text)}
.badge.gold,  .badge-gold  {background:var(--gold-bg);color:var(--gold-text)}
.badge.green, .badge-green {background:var(--green-bg);color:var(--green-text)}
.badge.amber, .badge-amber {background:var(--amber-bg);color:var(--amber-text)}
.badge.red,   .badge-red   {background:var(--red-bg);color:var(--red-text)}
.badge.purple,.badge-purple{background:var(--purple-bg);color:var(--purple-text)}
.badge.gray,  .badge-gray  {background:var(--gray-bg);color:var(--gray-text)}

/* Never colour-only (§15): status badges carry a shape as well as a hue. */
.badge.green:before, .badge-green:before{content:'\25CF';font-size:7px;margin-right:3px}
.badge.amber:before, .badge-amber:before{content:'\25B2';font-size:7px;margin-right:3px}
.badge.red:before,   .badge-red:before  {content:'\25A0';font-size:7px;margin-right:3px}

/* ── §6b  Admin navigation (§2) ────────────────────────────────────────────
   admin.html had no sidebar of its own, so unlike the other five application
   pages it carries no nav CSS. These rules are copied from the shared nav
   styling the other pages already use, so Admin now looks like the rest of the
   platform rather than like a settings page bolted on the side. Scoped to
   .ccam-admin-nav so they cannot leak onto pages that style their own nav. */
.ccam-admin-nav .main-nav{
  position:fixed;top:var(--shell-h);left:0;bottom:0;width:200px;z-index:900;
  background:var(--bg);border-right:0.5px solid var(--border);
  display:flex;flex-direction:column;padding:8px 0;
  transition:width .18s ease;overflow-y:auto;
}
.ccam-admin-nav .main-nav.collapsed{width:44px}
.ccam-admin-nav .main-nav .nav-item{
  display:flex;align-items:center;gap:9px;padding:8px 16px;font-size:12.5px;
  color:var(--text2);cursor:pointer;border-left:2px solid transparent;
  white-space:nowrap;overflow:hidden;
}
.ccam-admin-nav .main-nav .nav-item:hover{background:var(--bg2);color:var(--text)}
.ccam-admin-nav .main-nav .nav-item.active{
  color:var(--gold);background:var(--gold-bg);border-left-color:var(--gold);font-weight:600;
}
.ccam-admin-nav .main-nav .nav-ico{width:16px;text-align:center;flex:none;font-size:11px}
.ccam-admin-nav .main-nav.collapsed .nav-item-label{display:none}
.ccam-admin-nav .main-nav.collapsed .nav-item{padding:8px 13px;justify-content:center}
.ccam-admin-nav .main-nav .nav-foot{margin-top:auto;padding:8px 10px}
.ccam-admin-nav .main-nav #nav-toggle-btn{
  color:var(--text2);border-color:var(--border);background:transparent;width:100%;
  justify-content:center;
}
.ccam-admin-nav .main-nav #nav-toggle-btn:hover{background:var(--bg2);color:var(--text)}
/* Content clears the fixed sidebar. */
.ccam-admin-nav .wrap{margin-left:200px;transition:margin-left .18s ease}
.ccam-admin-nav .main-nav.collapsed ~ .wrap,
.ccam-admin-nav:has(.main-nav.collapsed) .wrap{margin-left:44px}
/* The sidebar replaces the tab strip. The buttons stay in the DOM — the
   page's own handler and ccam_admin_tab persistence still drive off them. */
.ccam-hidden-tabs{display:none!important}
@media(max-width:760px){
  .ccam-admin-nav .wrap{margin-left:0}
  .ccam-admin-nav:has(.main-nav.collapsed) .wrap{margin-left:0}
}

/* Page-level actions (§1), left of search so they read as the page's, not the
   app's. */
#ccam-page-actions{display:flex;align-items:center;gap:6px}
#ccam-page-actions:not(:empty){margin-right:4px;padding-right:8px;border-right:0.5px solid var(--shell-hair)}
.ccam-hbtn-pri{background:rgba(201,169,110,.18);border-color:rgba(201,169,110,.45);color:var(--shell-gold-hi)}
.ccam-hbtn-pri:hover{background:rgba(201,169,110,.3)}
@media(max-width:760px){#ccam-page-actions{display:none}}

/* ── §7b  typography reconciliation (§11) ─────────────────────────────────
   All six application pages set html,body to the system stack, yet parts of
   waterfall.html ask for Inter. There is no webfont <link> anywhere, so Inter
   only ever rendered for people who happen to have it installed locally, and
   the platform read as two different products depending on the machine.

   One stack is declared here, Inter first so it is used where present and
   falls through cleanly where it is not. Deliberately NOT !important: a page
   that sets a deliberate face for a specific element still wins.            */
html, body{
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',
              'Helvetica Neue',Arial,sans-serif;
}
/* Controls do not inherit the page face by default in any browser. */
button, input, select, textarea{ font-family:inherit }

/* Financial figures line up column to column. tabular-nums only affects
   digits, so applying it table-wide is safe for text columns. */
table td, table th, .num, .money, .figure{ font-variant-numeric:tabular-nums }

/* Records that link somewhere (§13) — one affordance, used everywhere, so a
   clickable record never needs a separate "Go to" button beside it. */
.ccam-reclink{
  color:var(--blue);text-decoration:none;border-bottom:0.5px solid transparent;cursor:pointer;
}
.ccam-reclink:hover{border-bottom-color:var(--blue)}

/* ── §8  copy-to-clipboard (§14) ───────────────────────────────────────────*/
.ccam-copy{
  border:none;background:none;padding:0 3px;margin-left:4px;cursor:pointer;
  color:var(--text3);opacity:0;transition:opacity .12s,color .12s;
  font-size:11px;line-height:1;vertical-align:baseline;
}
.ccam-copyable:hover .ccam-copy,.ccam-copy:focus-visible{opacity:1}
.ccam-copy:hover{color:var(--blue)}
.ccam-copy.done{opacity:1;color:var(--green)}
@media(hover:none){.ccam-copy{opacity:.55}}

/* ── §9  accessibility polish (§15) ────────────────────────────────────────*/
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:3px}
#ccam-header :focus-visible{outline-color:var(--shell-gold-hi);outline-offset:1px}
.ccam-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
}

/* ── §10  mobile shell (§16) ───────────────────────────────────────────────
   The sidebar becomes an overlay drawer instead of a squeezed column, so the
   phone gets full width for the record itself.                              */
#ccam-nav-scrim{
  position:fixed;inset:var(--shell-h) 0 0 0;background:rgba(10,12,28,.4);
  z-index:9998;display:none;
}
body.ccam-nav-open #ccam-nav-scrim{display:block}
@media(max-width:760px){
  #ccam-header{padding:0 7px;gap:6px}
  #ccam-header a.ccam-home span.hm-txt{display:none}
  #ccam-platform-btn{padding:5px 7px}
  .main-nav{
    transform:translateX(-100%);transition:transform .2s ease;
    width:238px!important;box-shadow:0 0 34px rgba(0,0,0,.22);
  }
  body.ccam-nav-open .main-nav{transform:translateX(0)}
  /* Collapsed-width layout offsets must not apply once the nav is a drawer. */
  .main-nav.collapsed{width:238px!important}
  .main-nav.collapsed .nav-section{display:block}
  .main-nav.collapsed .nav-item{padding:8px 16px;justify-content:flex-start}
  .main-nav.collapsed .nav-item-label{display:inline}
  #ccam-mobile-nav-btn{display:flex!important}
}
#ccam-mobile-nav-btn{display:none;padding:5px 7px}


/* ── §17  focused record (arriving from an attention item or calendar) ──────
   A brief highlight so the row you were sent to is obvious, then it fades and
   gets out of the way. Honours reduced-motion via the global rule above.    */
tr.ccam-focus-row > *{
  background:var(--gold-bg)!important;
  box-shadow:inset 0 0 0 9999px rgba(154,118,50,.06);
  animation:ccam-focus-fade 2.6s ease-out forwards;
}
@keyframes ccam-focus-fade{
  0%,60%{background:var(--gold-bg)}
  100%{background:transparent}
}
