/* =====================================================================================
   Trendsic Dynamics — App Shell (Signal design language). Verbatim translation of
   docs/design/appShell/App Shell.dc.html. One persistent frame (.ash) wrapping a single
   content slot (the Durandal router). Namespaced .ash; tokens live here (light default +
   .ash.dark), matching the .pm3/.cr/.rf/.vs modules so the chrome and the pages agree.
   ===================================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

.ash, .ash * { box-sizing: border-box; }
.ash ::selection { background: #C2CCFB; }

/* ---- tokens : shared + light (default) ---- */
.ash {
  --brand-50:#EEF1FE; --brand-100:#DDE3FD; --brand-200:#C2CCFB; --brand-400:#7B8FF3; --brand-500:#5E76EE;
  --brand-600:#4C63E6; --brand-700:#3D4FC9; --brand-800:#3340A0; --brand-900:#28297A;
  --brand-grad:linear-gradient(135deg,#5E76EE,#8A63E8);
  --success:#15A06B; --danger:#E04646; --warning:#EE8A2E; --gold:#D99B12; --purple:#8B5CF6; --info:#4C6EF5;
  --r-md:12px; --r-lg:16px;
  --e1:0 1px 2px rgba(20,25,55,.06); --e2:0 8px 28px rgba(20,25,55,.14);
  --ease:cubic-bezier(.2,.8,.2,1);

  --bg:#F5F6FB; --surface:#FFFFFF; --surface-2:#FAFBFE; --border:#E5E8F2; --border-strong:#D2D7E6;
  --text:#1A1D2E; --text-2:#4A4F63; --muted:#767C92; --faint:#A2A7BC;
  --info-bg:#ECEFFB; --info-fg:#3D4FC9; --ok-bg:#E2F6EE; --ok-fg:#0E6B47;
  --warn-bg:#FCEEDD; --warn-fg:#B5651A; --gold-bg:#FBF1D6; --gold-fg:#8A6A0C;
  --bad-bg:#FCE7E7; --bad-fg:#B3262B; --pur-bg:#EFE9FD; --pur-fg:#6D45C9;
  --neutral-bg:#F1F2F6; --neutral-fg:#6B7080;

  font-family:'Plus Jakarta Sans',system-ui,sans-serif; -webkit-font-smoothing:antialiased;
  position:fixed; inset:0; height:100vh; height:100dvh; width:100vw; background:var(--bg); color:var(--text); overflow:hidden;
  display:flex; flex-direction:column;   /* header (60px) + body row fill the viewport; required for the
                                            content-area height chain so in-slot pages (e.g. .pm3 absolute
                                            inset:0 anchored to <main>) actually get height. */
}

/* ---- tokens : dark ---- */
.ash.dark {
  --bg:#0E1430; --surface:#161E3C; --surface-2:#1B2446; --border:#2A335C; --border-strong:#38436F;
  --text:#EEF1FB; --text-2:#B9C2E0; --muted:#8590B5; --faint:#6B7596;
  --info-bg:rgba(94,118,238,.16); --info-fg:#C2CCFB; --ok-bg:rgba(52,211,153,.15); --ok-fg:#5FE3B0;
  --warn-bg:rgba(238,138,46,.16); --warn-fg:#F0A961; --gold-bg:rgba(217,155,18,.16); --gold-fg:#F2C14E;
  --bad-bg:rgba(224,70,70,.16); --bad-fg:#F58A8A; --pur-bg:rgba(139,92,246,.18); --pur-fg:#C3A8FB;
  --neutral-bg:rgba(255,255,255,.06); --neutral-fg:#8590B5;
}

.ash .scrl::-webkit-scrollbar { width:9px; height:9px; }
.ash .scrl::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:99px; border:2px solid transparent; background-clip:content-box; }
.ash .scrl::-webkit-scrollbar-track { background:transparent; }
.ash .nv { transition:background .12s,color .12s; }
.ash .nv:hover { background:var(--surface-2); }
.ash .ash-btn { transition:background .12s,border-color .12s,filter .12s; }
.ash .ash-btn:hover { background:var(--surface-2); }

@keyframes ash-scrim { from{opacity:0} to{opacity:1} }
@keyframes ash-drawer { from{transform:translateX(100%)} to{transform:translateX(0)} }
@keyframes ash-drawerL { from{transform:translateX(-100%)} to{transform:translateX(0)} }
@keyframes ash-pop { from{opacity:0;transform:translateY(-6px) scale(.99)} to{opacity:1;transform:none} }
@keyframes ash-sk { 0%{opacity:.5} 50%{opacity:1} 100%{opacity:.5} }
.ash .sk { animation:ash-sk 1.3s ease-in-out infinite; background:var(--neutral-bg); border-radius:7px; }

/* the router content slot fills the <main>; pages (incl. full-bleed modules) render here */
.ash #content-wrapper { min-height:100%; }
.ash a { text-decoration:none; }