/* --- DealArena redesigned chrome -------------------------------------------
   Phase 1 of the visual redesign: the rail, the topbar, the console button
   plate, the popovers and the page plate. Shared by every page that extends
   templates/base_arena.html.

   Loaded AFTER app-shell.css on purpose. Both files define --bg-0 / --ink /
   --brand, and [data-da-root] and :root have identical specificity, so source
   order is what decides. The warm palette has to win.

   Geometry here is not approximate. Every number comes from
   design_handoff_dealarena_redesign/assets/chrome-keys.js or 01_DESIGN_SYSTEM.md
   and is an approved decision, not a guess.

   THE LAYER SCALE. Keep to it. Anything that opens a stacking context between
   two of these bands breaks every band above it, which is exactly how the
   notification popover ended up painting under the page.

        0   .da-plate            the ghosted war plate, fixed, behind everything
       --   .da-topbar/.da-page  NO z-index and no stacking context. The topbar
                                 is a flex sibling of the page, not a layer over
                                 it, so its popovers can rise past page content.
       40   .da-rail
       50   .da-tip              the one rail tooltip
       60   .da-notif, .da-live-menu
       70   .da-um               avatar popup
       80   .da-ws-menu          workspace switcher
      120   the Forge scrim
      121   the Forge card

   Page-level surfaces (modals, drawers, the command palette) sit at 500, set in
   base.html. Nothing in the chrome may exceed that.
   -------------------------------------------------------------------------- */

/* --- Tokens --------------------------------------------------------------- */
/* Copied verbatim from 01_DESIGN_SYSTEM.md. Do not derive new colours here;
   if a shade is missing, mix it from a token with color-mix(in oklab, ...). */
[data-da-root] {
  --bg-0:#f7f5f1; --bg-1:#ffffff; --bg-2:#f1eee8; --bg-3:#e8e4db;
  --line:#e7e3da; --line-2:#d7d2c6;
  --ink:#1c1915; --ink-2:#4c463d; --ink-3:#7b7466; --ink-4:#aaa294;
  --brand: #ef5920; --brand-2: #c4471a; --brand-soft:rgba(239, 89, 32,.06); --on-brand: #201009;
  --link:#000000; --link-hover:#111827;
  --green:#0a8754; --green-soft:rgba(10,135,84,.10);
  --warn:#d63060; --warn-soft:rgba(214,48,96,.09);
  --amber:#c79100; --amber-soft:rgba(199,145,0,.10);
  --blue:#2c7be5; --purple:#8b5cf6;
  --sauce:#8b5cf6; --sauce-soft:rgba(139,92,246,.12);
}
[data-da-root][data-da-theme="dark"] {
  --bg-0:#171412; --bg-1:#1e1b18; --bg-2:#272320; --bg-3:#322d28;
  --line:#2e2a25; --line-2:#3c362f;
  --ink:#f1ede6; --ink-2:#c6bfb2; --ink-3:#8e8779; --ink-4:#5a544a;
  --brand-soft:rgba(249,250,251,.10);
  --link:#f9fafb; --link-hover:#ffffff;
  --green:#34b27b; --green-soft:rgba(52,178,123,.13);
  --warn:#ff3860; --warn-soft:rgba(255,56,96,.12);
  --amber:#ffd23f; --amber-soft:rgba(255,210,63,.12);
  --blue:#5cb0ff; --purple:#a78bfa;
  --sauce:#a78bfa; --sauce-soft:rgba(167,139,250,.16);
}
/* theme = system. The server cannot read prefers-color-scheme, so it renders
   the attribute and the browser decides here. This is the only way to honour
   "system" without a pre-paint script, and script-src has no unsafe-inline. */
@media (prefers-color-scheme: dark) {
  [data-da-root][data-da-theme="system"] {
    --bg-0:#171412; --bg-1:#1e1b18; --bg-2:#272320; --bg-3:#322d28;
    --line:#2e2a25; --line-2:#3c362f;
    --ink:#f1ede6; --ink-2:#c6bfb2; --ink-3:#8e8779; --ink-4:#5a544a;
    --brand-soft:rgba(239, 89, 32,.16);
    --link:var(--brand); --link-hover:#ff7a45;
    --green:#34b27b; --green-soft:rgba(52,178,123,.13);
    --warn:#ff3860; --warn-soft:rgba(255,56,96,.12);
    --amber:#ffd23f; --amber-soft:rgba(255,210,63,.12);
    --blue:#5cb0ff; --purple:#a78bfa;
    --sauce:#a78bfa; --sauce-soft:rgba(167,139,250,.16);
  }
}
/* The dark orange under a primary plate. Product-coloured plates override it. */
[data-da-root] { --edge:#a83a12; }
[data-da-root] a { color: var(--link); }
[data-da-root] a:hover { color: var(--link-hover); }

/* --- Motion --------------------------------------------------------------- */
/* The named keyframe block from designs/Dashboard.dc.html. Every page in the
   redesign references these names, so they live here once. */
@keyframes da-pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes da-flicker { 0%,100% { transform: scale(1) rotate(-2.5deg); } 50% { transform: scale(1.1) rotate(2.5deg); } }
@keyframes da-rise { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-46px); opacity: 0; } }
@keyframes da-smoke { 0% { transform: translateY(0) scale(.7); opacity: 0; } 25% { opacity: .45; } 100% { transform: translateY(-42px) scale(1.7); opacity: 0; } }
@keyframes da-blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
@keyframes da-drawer-in { 0% { transform: translateX(40px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
@keyframes da-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes da-orbit { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes da-glowpulse { 0%,100% { box-shadow: none; } 50% { box-shadow: none; } }
@keyframes da-glowpulse-green { 0%,100% { box-shadow: none; } 50% { box-shadow: none; } }
@keyframes da-eq { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.62); } }
@keyframes da-scanx { 0% { left: -4%; } 100% { left: 102%; } }
@keyframes da-ledblink { 0%, 72%, 100% { opacity: 1; } 82% { opacity: .25; } }
@keyframes da-ring { 0%, 78%, 100% { transform: rotate(0); } 82% { transform: rotate(-16deg) scale(1.15); } 85% { transform: rotate(13deg) scale(1.15); } 88% { transform: rotate(-10deg) scale(1.1); } 91% { transform: rotate(6deg); } 94% { transform: rotate(-3deg); } 97% { transform: rotate(0); } }
@keyframes da-wmshine { 0%, 37% { background-position: -160% 0; opacity: 0; } 41% { opacity: 1; } 57% { background-position: 160% 0; opacity: 1; } 58%, 100% { background-position: 160% 0; opacity: 0; } }
@keyframes da-glitch { 0%, 88%, 100% { opacity: 1; transform: none; } 90% { opacity: .35; transform: translateX(1px); } 92% { opacity: 1; transform: translateX(-1px) skewX(-6deg); } 94% { opacity: .7; transform: none; } }
@keyframes da-goalglow { 0%,100% { opacity: .15; transform: translateY(0); } 50% { opacity: .75; transform: translateY(-5px); } }
@keyframes da-flash { 0%, 76%, 100% { box-shadow: 0 0 0 rgba(139,92,246,0); } 84% { box-shadow: none; } 92% { box-shadow: none; } }
/* The design file declares da-liquid twice; this second one is the live rule. */
@keyframes da-liquid { 0% { transform: translateY(102%); } 40% { transform: translateY(6%); } 62% { transform: translateY(6%); } 100% { transform: translateY(102%); } }
@keyframes da-liquidglow { 0%, 100% { box-shadow: none; } 48% { box-shadow: none; } }
@keyframes da-pop { 0% { opacity: 0; transform: translateY(9px) scale(.985); } 100% { opacity: 1; transform: translateY(0) scale(1); } }

@media (prefers-reduced-motion: reduce) {
  [data-da-root] *,
  [data-da-root] *::before,
  [data-da-root] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* --- Shell ---------------------------------------------------------------- */
/* Onest everywhere. The selector beats base.html's inline body{Inter} rule on
   specificity, so nothing in base.html needs editing to change the face. */
[data-da-root] body { font-family: 'Onest', system-ui, sans-serif; background: var(--bg-0); color: var(--ink); transition: background 220ms; }
[data-da-root] { background: var(--bg-0); }
[data-da-root] .da-mono,
[data-da-root] [data-da-avatar-popup] input { font-family: ui-monospace, monospace; }

[data-app-shell][data-chrome="arena"] { display: flex; height: 100vh; overflow: hidden; }
.da-main { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; }
/* The page body. The padding matches what app-shell.css's .page gave every
   legacy body (24px 28px 40px) -- those bodies were authored against it and
   render flush to the rail without it. A page that has had its own redesign
   brings its own layout and opts out with {% set arena_bare = true %}. */
/* position:relative so the plate's fixed layer sits behind page content, but no
   z-index: giving it one made it a sibling of .da-topbar at the same level, and
   later in the DOM, so it painted over the topbar's dropdowns. The design's
   scroll wrapper has no z-index either. */
.da-page { position: relative; flex: 1; overflow-y: auto; padding: 24px 28px 40px; }
.da-page.is-bare { padding: 0; }

/* The page plate. Fixed so the illustration holds while the page scrolls, at
   z-index 0 so it sits above the body colour and below every control.

   Size, repeat and opacity are per PAGE, not per image: bg-mill runs at cover
   on Analytics and bg-castillon tiles at 780px on Agents but runs at cover on
   the contact card. Keying the table on the page rather than the file is the
   only way to keep both, and it is how the designs are drawn. Values read off
   designs/*.dc.html one by one. */
.da-plate {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  filter: grayscale(1) sepia(.62) saturate(1.45) hue-rotate(-12deg) contrast(1.04);
  -webkit-mask-image: repeating-linear-gradient(to bottom, rgba(0,0,0,.95) 0px, rgba(0,0,0,.5) 300px, rgba(0,0,0,.28) 520px, rgba(0,0,0,.55) 760px, rgba(0,0,0,.95) 1080px);
  mask-image: repeating-linear-gradient(to bottom, rgba(0,0,0,.95) 0px, rgba(0,0,0,.5) 300px, rgba(0,0,0,.28) 520px, rgba(0,0,0,.55) 760px, rgba(0,0,0,.95) 1080px);
}
.da-plate[data-plate="dashboard"] { background: url('../../images/arena/bg-cavalry.jpg') top center / 1500px auto repeat-y; opacity: .075; }
.da-plate[data-plate="notifications"] { background: url('../../images/arena/bg-cavalry.jpg') top center / 1500px auto repeat-y; opacity: .075; }
.da-plate[data-plate="pipeline"] { background: url('../../images/arena/bg-pikes.jpg') top center / 860px auto repeat-y; opacity: .085; }
.da-plate[data-plate="database"] { background: url('../../images/arena/bg-march.jpg') top center / 1600px auto repeat-y; opacity: .038; }
.da-plate[data-plate="lists"] { background: url('../../images/arena/bg-march.jpg') top center / 760px auto repeat; opacity: .038; }
.da-plate[data-plate="contact-card"] { background: url('../../images/arena/bg-castillon.jpg') top center / cover no-repeat; opacity: .078; }
.da-plate[data-plate="company-card"] { background: url('../../images/arena/bg-templars.jpg') top center / 720px auto repeat; opacity: .05; }
.da-plate[data-plate="deal-card"] { background: url('../../images/arena/army-mist.jpg') top center / cover no-repeat; opacity: .055; }
.da-plate[data-plate="sequences"] { background: url('../../images/arena/bg-samurai.jpg') top center / 780px auto repeat-y; opacity: .08; }
.da-plate[data-plate="meetings"] { background: url('../../images/arena/bg-agincourt.jpg') top center / 1500px auto repeat-y; opacity: .075; }
.da-plate[data-plate="tasks"] { background: url('../../images/arena/duel.jpg') top center / cover no-repeat; opacity: .072; }
.da-plate[data-plate="analytics"] { background: url('../../images/arena/bg-mill.jpg') top center / cover no-repeat; opacity: .072; }
.da-plate[data-plate="arena"] { background: url('../../images/arena/bg-siege.jpg') top center / 1100px auto repeat-y; opacity: .075; }
.da-plate[data-plate="console"] { background: url('../../images/arena/bg-agincourt.jpg') top center / cover no-repeat; opacity: .085; }
.da-plate[data-plate="coffee"] { background: url('../../images/arena/bg-mill.jpg') top center / cover no-repeat; opacity: .08; }
.da-plate[data-plate="sauce"] { background: url('../../images/arena/bg-ravens.jpg') top center / 620px auto repeat-y; opacity: .075; }
.da-plate[data-plate="agents"] { background: url('../../images/arena/bg-castillon.jpg') top center / 780px auto repeat; opacity: .05; }
.da-plate[data-plate="legion"] { background: url('../../images/arena/bg-castillon.jpg') top center / 780px auto repeat; opacity: .05; }
.da-plate[data-plate="enrichment"] { background: url('../../images/arena/bg-mill.jpg') top center / cover no-repeat; opacity: .078; }
.da-plate[data-plate="settings"] { background: url('../../images/arena/shieldwall.jpg') top center / cover no-repeat; opacity: .085; }

/* --- Rail ----------------------------------------------------------------- */
/* Every derived value from assets/chrome-keys.js lives in these custom
   properties, which is what lets hover expansion be pure CSS: setting them on
   .da-rail:hover reaches the rail's own width as well as its children. */
.da-rail {
  --da-rail-w: 64px; --da-rail-row-h: 32px; --da-rail-row-r: 12px; --da-rail-ic: 21px;
  --da-rail-just: center; --da-rail-pad: 0; --da-rail-label: none;
  --da-rail-group: none; --da-rail-shadow: none; --da-rail-brand-pad: 0; --da-rail-ws-pad: 0;
  width: var(--da-rail-w); flex: none; z-index: 40;
  background: var(--bg-1); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 12px; gap: 2px; overflow: hidden;
  box-shadow: var(--da-rail-shadow);
  transition: width 160ms ease;
}
[data-da-rail="wide"] .da-rail,
[data-da-rail="auto"] .da-rail:hover {
  --da-rail-w: 236px; --da-rail-row-h: 30px; --da-rail-row-r: 9px; --da-rail-ic: 19px;
  --da-rail-just: flex-start; --da-rail-pad: 0 8px; --da-rail-label: inline;
  --da-rail-group: flex; --da-rail-brand-pad: 3px; --da-rail-ws-pad: 0 7px;
}
/* Shadow only when hover expanded the rail over the page, never when pinned. */
[data-da-rail="auto"] .da-rail:hover { --da-rail-shadow: 18px 0 40px rgba(0,0,0,.14); }

.da-rail-brand { display: flex; align-items: center; justify-content: var(--da-rail-just); gap: 10px; height: 34px; flex: none; padding-left: var(--da-rail-brand-pad); }
.da-rail-logo { display: flex; flex: none; }
.da-rail-word { display: var(--da-rail-label); font-size: 15px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; color: var(--ink); }

.da-ws { display: flex; align-items: center; justify-content: var(--da-rail-just); gap: 9px; height: 38px; flex: none; margin: 6px 0; padding: var(--da-rail-ws-pad); width: 100%; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line-2); color: inherit; font: inherit; cursor: pointer; }
.da-ws-av { width: 26px; height: 26px; flex: none; border-radius: 7px; background: var(--bg-1); border: 1px solid var(--line-2); color: var(--ink-2); display: flex; align-items: center; justify-content: center; font-size: 10px; }
.da-ws-name { display: var(--da-rail-label); flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.da-ws-chev { display: var(--da-rail-label); color: var(--ink-4); }
.da-ws-chev svg { width: 11px; height: 11px; }
.da-ws-empty .da-ws-av { background: var(--bg-3); color: var(--ink-3); }
.da-ws-empty .da-ws-name { color: var(--ink-3); font-weight: 500; }

/* padding-bottom matches the mask's fade depth: scrolled to the end, the fade
   covers empty padding, never the last row (Settings lived inside it before). */
.da-rail-nav { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; padding-bottom: 26px; scrollbar-width: none; -ms-overflow-style: none; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), rgba(0,0,0,0.06)); mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), rgba(0,0,0,0.06)); }
.da-rail-nav::-webkit-scrollbar { width: 0; height: 0; display: none; }
.da-rail-group { height: 16px; flex: none; display: var(--da-rail-group); align-items: center; font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: .08em; color: var(--ink-4); padding-left: 8px; margin-top: 4px; }

.da-rail-row { display: flex; align-items: center; justify-content: var(--da-rail-just); gap: 11px; height: var(--da-rail-row-h); flex: none; padding: var(--da-rail-pad); border-radius: var(--da-rail-row-r); background: transparent; color: var(--ink-2); font-size: 13.5px; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; }
.da-rail-row:hover { background: var(--bg-2); color: var(--ink-2); }
.da-rail-row.is-active { background: var(--brand-soft); color: var(--brand-2); font-weight: 700; }
.da-rail-ic { flex: none; width: var(--da-rail-ic); height: var(--da-rail-ic); color: var(--ink-3); }
.da-rail-row.is-active .da-rail-ic { color: var(--brand); }
.da-rail-label { display: var(--da-rail-label); }

.da-rail-foot { flex: none; display: flex; flex-direction: column; gap: 1px; padding-top: 8px; border-top: 1px solid var(--line); margin-top: 6px; }

/* The width control. Both faces render; CSS picks one, so the swap costs no JS
   and no layout thrash mid-hover. */
.da-railw-plate { display: flex; align-items: center; justify-content: center; height: 32px; flex: none; margin: 3px 0 5px; border: 0; border-radius: 10px; background: var(--bg-2); color: var(--ink-2); box-shadow: 0 4px 0 var(--line-2); cursor: pointer; user-select: none; transition: background 130ms; }
.da-railw-plate:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line-2); }
/* Pinned in either direction, the plate lights up: the rail is under manual
   control and the control says so. */
[data-da-rail="wide"] .da-railw-plate,
[data-da-rail="small"] .da-railw-plate { background: var(--brand); color: var(--on-brand); box-shadow: 0 4px 0 var(--edge); }
[data-da-rail="wide"] .da-railw-plate:active,
[data-da-rail="small"] .da-railw-plate:active { box-shadow: 0 1px 0 var(--edge); }
.da-railw-col { width: 4.4px; }
[data-da-rail="wide"] .da-railw-col { width: 8.4px; }
.da-railw-arrow { display: none; }
[data-da-rail="auto"] .da-railw-arrow { display: inline; }

.da-railw-tiles { display: none; flex: none; gap: 3px; padding: 3px; margin: 3px 0 5px; border-radius: 11px; background: var(--bg-2); border: 1px solid var(--line-2); }
.da-railw-tile { flex: 1 1 0%; display: flex; align-items: center; justify-content: center; height: 26px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-3); cursor: pointer; user-select: none; font-size: 9.5px; letter-spacing: .04em; font-weight: 500; }
[data-da-rail="auto"]  .da-railw-tile[data-da-rail-set="auto"]  { background: var(--bg-1); color: var(--ink); box-shadow: 0 2px 0 var(--line-2); }
[data-da-rail="small"] .da-railw-tile[data-da-rail-set="small"] { background: var(--brand); color: var(--on-brand); box-shadow: 0 2px 0 var(--edge); }
[data-da-rail="wide"]  .da-railw-tile[data-da-rail-set="wide"]  { background: var(--brand); color: var(--on-brand); box-shadow: 0 2px 0 var(--edge); }
/* Expanded, the plate gives way to the three tiles. */
[data-da-rail="wide"] .da-railw-plate,
[data-da-rail="auto"] .da-rail:hover .da-railw-plate { display: none; }
[data-da-rail="wide"] .da-railw-tiles,
[data-da-rail="auto"] .da-rail:hover .da-railw-tiles { display: flex; }

.da-rail-me { display: flex; align-items: center; justify-content: var(--da-rail-just); gap: 11px; height: 34px; padding: var(--da-rail-pad); white-space: nowrap; }
.da-me-av { position: relative; width: 30px; height: 30px; flex: none; border: 0; padding: 0; border-radius: 50%; background: #e8e4db; overflow: hidden; cursor: pointer;  }
.da-me-liquid { position: absolute; left: -12%; bottom: 0; width: 124%; height: 118%; border-radius: 44% 48% 6px 6px / 22% 24% 4px 4px; background: var(--brand);  }
.da-me-initials { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #ffffff; }
.da-me-name { font-size: 12.5px; color: var(--ink-2); }

/* One tooltip for the whole rail, parked until JS positions it. Hidden while
   the rail is expanded: the labels are already readable there. */
.da-tip { position: fixed; left: 74px; top: 0; z-index: 50; background: var(--ink); color: var(--bg-0); font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity 120ms; white-space: nowrap; }
.da-tip.is-on { opacity: 1; }

/* --- Topbar --------------------------------------------------------------- */
/* No position and no z-index, matching the design. Both were added during the
   port and both were load-bearing in the wrong direction: a positioned element
   with a z-index opens a stacking context, which trapped .da-notif and
   .da-live-menu (z-index 60) inside a bar that itself painted at z-index 1 --
   tied with .da-page and losing to it on document order. The dropdowns rendered
   underneath the page. .da-bell-wrap and .da-live-wrap carry their own
   position:relative, so the panels still anchor correctly. */
.da-topbar { height: 64px; flex: none; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; padding: 0 24px; }
.da-crumb { font-size: 13.5px; color: var(--ink-3); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.da-crumb-sep { color: var(--ink-4); }
.da-crumb-here { color: var(--ink); font-weight: 600; }

.da-search-wrap { flex: 1; display: flex; justify-content: center; padding: 0 12px; min-width: 0; overflow: hidden; }
.da-search { display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 16px; width: 100%; max-width: 560px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-1); color: var(--ink-4); font-family: inherit; font-size: 13px; cursor: text; }
.da-search-ic { width: 14px; height: 14px; flex: none; }
.da-search-ph { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.da-search-kbd { margin-left: auto; font-size: 10.5px; border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; flex: none; cursor: pointer; }

.da-icbtn { width: 36px; height: 36px; flex: none; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-1); color: var(--ink-2); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.da-icbtn:hover { border-color: var(--line-2); color: var(--ink); }
.da-theme svg { width: 16px; height: 16px; }
/* One button, two glyphs: show the theme you would switch TO. */
.da-ic-sun { display: none; }
[data-da-theme="dark"] .da-ic-sun { display: block; }
[data-da-theme="dark"] .da-ic-moon { display: none; }
@media (prefers-color-scheme: dark) {
  [data-da-theme="system"] .da-ic-sun { display: block; }
  [data-da-theme="system"] .da-ic-moon { display: none; }
}

.da-bell-wrap, .da-live-wrap { position: relative; flex: none; }
.da-bell { position: relative; }
.da-bell-ic { width: 16px; height: 16px; }
.da-bell-count { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--brand); color: var(--on-brand); font-size: 9.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg-0); box-sizing: border-box; }
.da-bell-count[hidden] { display: none; }

.da-live { display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 17px; border: none; border-radius: 999px; background: var(--brand); color: var(--on-brand); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: filter 120ms; }
.da-live:hover { filter: brightness(1.06); }
.da-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--on-brand);  }
.da-live-chev { width: 11px; height: 11px; margin-right: -2px; }

.da-forge { display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 15px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-1); color: var(--ink); font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: .08em; white-space: nowrap; flex: none; text-decoration: none; box-shadow: 0 6px 16px rgba(0,0,0,.12); transition: transform 120ms, box-shadow 120ms; }
.da-forge:hover { transform: translateY(-1px); box-shadow: 0 9px 22px rgba(0,0,0,.16); border-color: var(--line-2); color: var(--ink); }
.da-forge-led { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); box-shadow: none;  }

/* --- Console button plate ------------------------------------------------- */
/* The approved button: a chunky plate with a 4px darker bottom edge that
   collapses when you press it. Label in DM Mono, no // prefix (retired
   2026-08-18). Product-coloured variants set their own --edge. */
.da-plate-btn {
  display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 16px;
  border: 0; border-radius: 10px; cursor: pointer; user-select: none;
  font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: .06em;
  background: var(--brand); color: var(--on-brand); box-shadow: 0 4px 0 var(--edge);
  transition: transform 90ms, box-shadow 90ms, filter 120ms;
}
.da-plate-btn:hover { filter: brightness(1.05); }
.da-plate-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--edge); }
.da-plate-btn .da-plate-led { width: 6px; height: 6px; border-radius: 50%; background: currentColor;  flex: none; }
.da-plate-btn .da-plate-caret { display: inline-block; width: 5px; height: 11px; background: currentColor; animation: da-blink 1.1s step-end infinite; }
.da-plate-btn.is-secondary { background: var(--bg-1); color: var(--ink-2); box-shadow: 0 4px 0 var(--line-2); border: 1px solid var(--line-2); }
.da-plate-btn.is-secondary:active { box-shadow: 0 1px 0 var(--line-2); }
.da-plate-btn.is-console { background: #241f1b; color: #f1ede6; border: 1px solid #3c362f; box-shadow: 0 4px 0 #16120f; }
.da-plate-btn.is-console:active { box-shadow: 0 1px 0 #16120f; }

/* --- Popovers ------------------------------------------------------------- */
.da-notif, .da-live-menu, .da-ws-menu, .da-um {
  background: var(--bg-1); border: 1px solid var(--line); overflow: hidden;
  
}
.da-notif[hidden], .da-live-menu[hidden], .da-ws-menu[hidden], .da-um[hidden] { display: none; }

.da-notif { position: absolute; right: 0; top: 46px; width: 340px; border-radius: 14px; z-index: 60; box-shadow: 0 16px 40px rgba(0,0,0,.16); }
.da-notif-head { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.da-notif-tab { height: 28px; padding: 0 12px; border: none; border-radius: 999px; background: transparent; color: var(--ink-3); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: color 120ms; }
.da-notif-tab:hover { color: var(--ink); }
.da-notif-tab.is-on { background: var(--brand-soft); color: var(--link); }
.da-notif-pill { font-size: 10px; background: var(--brand); color: var(--on-brand); border-radius: 99px; padding: 1px 6px; }
.da-notif-pill[hidden] { display: none; }
.da-notif-spacer { flex: 1; }
.da-notif-read { border: none; background: none; font-family: ui-monospace, monospace; font-size: 11px; color: var(--link); cursor: pointer; padding: 4px 0; font-weight: 500; }
.da-notif-body { max-height: 380px; overflow-y: auto; }
.da-notif-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; transition: background 120ms; }
.da-notif-row:hover { background: var(--bg-2); color: inherit; }
.da-notif-row.is-unread { box-shadow: inset 3px 0 0 var(--brand); }
.da-notif-ic { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-family: ui-monospace, monospace; font-size: 14px; background: var(--bg-2); color: var(--ink-3); }
/* Product colour correlations: purple is The Sauce, green is a reply landing,
   brand is pipeline movement, amber is attention, cyan is a finished call. */
.da-notif-ic.is-sauce { background: var(--sauce-soft); color: var(--sauce); }
.da-notif-ic.is-green { background: var(--green-soft); color: var(--green); }
.da-notif-ic.is-brand { background: var(--brand-soft); color: var(--brand); }
.da-notif-ic.is-amber { background: var(--amber-soft); color: var(--amber); }
.da-notif-ic.is-cyan  { background: rgba(6,182,212,.12); color: #06b6d4; }
.da-notif-ic.is-warn  { background: var(--warn-soft); color: var(--warn); }
.da-notif-row.is-sauce.is-unread { box-shadow: inset 3px 0 0 var(--sauce); }
.da-notif-line { display: block; font-size: 13px; font-weight: 600; color: var(--ink); }
.da-notif-sub { display: block; font-family: ui-monospace, monospace; font-size: 10.5px; color: var(--ink-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.da-notif-when { font-family: ui-monospace, monospace; font-size: 10.5px; color: var(--ink-4); white-space: nowrap; }
.da-notif-empty { padding: 22px 14px; text-align: center; font-size: 11px; color: var(--ink-3); line-height: 1.6; }
.da-notif-all { display: block; text-align: center; padding: 11px; font-size: 12.5px; font-weight: 600; border-top: 1px solid var(--line); text-decoration: none; }

.da-live-menu { position: absolute; right: 0; top: 46px; width: 236px; border-radius: 14px; padding: 6px; z-index: 60; box-shadow: 0 16px 40px rgba(0,0,0,.16); }
.da-live-row { display: flex; align-items: center; gap: 11px; padding: 10px 11px; width: 100%; border: 0; border-radius: 9px; background: transparent; font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink); text-decoration: none; cursor: pointer; text-align: left; }
.da-live-row:hover { background: var(--bg-2); color: var(--ink); }
.da-live-ic { color: var(--ink-3); display: flex; }
.da-live-ic svg { width: 15px; height: 15px; }

.da-ws-menu { position: fixed; width: 262px; z-index: 80; border-radius: 12px; box-shadow: 0 16px 38px rgba(0,0,0,.20); }
.da-ws-menu-head { padding: 10px 14px; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line); }
.da-ws-menu-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; width: 100%; border: 0; background: transparent; font-family: inherit; cursor: pointer; text-align: left; color: var(--ink); }
.da-ws-menu-row:hover { background: var(--bg-2); }
.da-ws-menu-row.is-active { background: var(--bg-2); }
.da-ws-menu-name { flex: 1; font-size: 13px; font-weight: 600; }
.da-ws-menu-flag { font-size: 10px; color: var(--brand); }
.da-ws-menu-foot { display: block; border-top: 1px solid var(--line); padding: 11px 14px; font-size: 12.5px; text-decoration: none; }

/* --- Avatar popup --------------------------------------------------------- */
.da-um { position: fixed; left: 74px; bottom: 8px; z-index: 70; width: 272px; border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 18px 44px rgba(28,20,12,.16), 0 4px 12px rgba(28,20,12,.08); }
.da-um-head { display: flex; align-items: center; gap: 11px; padding: 13px 14px 11px; }
.da-um-av { width: 34px; height: 34px; cursor: default; display: block; }
.da-um-av .da-me-initials { font-size: 12px; }
.da-um-id { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.da-um-name { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.da-um-handle { font-size: 10px; color: var(--green); margin-top: 1px; }
.da-um-email { font-size: 9.5px; color: var(--ink-4); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; }
.da-um-led { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--green); box-shadow: none;  }
.da-um-led.is-heads { background: var(--warn); box-shadow: none; }
.da-um-led.is-meeting { background: var(--blue); box-shadow: none; }
.da-um-led.is-lunch { background: var(--amber); box-shadow: none; }
.da-um-led.is-dog { background: var(--ink-4); box-shadow: none; }
.da-um-lvl { font-size: 9.5px; padding: 3px 7px; border-radius: 99px; background: var(--bg-2); border: 1px solid var(--line-2); color: var(--ink-2); flex: none; }
.da-um-rule { height: 1px; background: var(--line); margin: 0 6px; }
.da-um-sect { padding: 4px 0; }
.da-um-label { font-size: 9.5px; letter-spacing: .08em; color: var(--ink-4); padding: 4px 14px 3px; }
.da-um-row { display: flex; align-items: center; gap: 10px; height: 33px; margin: 0 6px; padding: 0 8px; width: calc(100% - 12px); border: 0; border-radius: 9px; background: transparent; font-family: inherit; font-size: 13px; font-weight: 500; color: var(--ink-2); text-decoration: none; cursor: pointer; text-align: left; box-sizing: border-box; }
.da-um-row:hover { background: var(--bg-2); color: var(--ink); }
.da-um-row-t { flex: 1; }
.da-um-hint { font-size: 9.5px; color: var(--ink-4); white-space: nowrap; flex: none; }
.da-um-chev { width: 9px; color: var(--ink-4); font-size: 9px; }
.da-um-tile { position: relative; width: 16px; height: 16px; flex: none; border-radius: 4px; border: 1px solid rgba(239, 89, 32,.35); background: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 7px; font-weight: 800; color: #ffffff; overflow: hidden; }
.da-um-tile.is-cloaked { border-color: var(--line-2); background: repeating-linear-gradient(45deg, transparent 0 3px, rgba(123,116,102,.5) 3px 5px); }
.da-um-chip { font-size: 9.5px; padding: 3px 7px; border-radius: 6px; background: var(--bg-2); border: 1px solid var(--line-2); color: var(--ink-2); white-space: nowrap; flex: none; }
.da-um-chip.is-named { background: var(--brand-soft); border-color: rgba(239, 89, 32,.35); color: var(--brand-2); }
.da-um-pres { margin: 1px 6px 3px; padding: 3px; border-radius: 9px; background: var(--bg-2); border: 1px solid var(--line); }
.da-um-pres[hidden] { display: none; }
.da-um-pres-row { display: flex; align-items: center; gap: 9px; height: 28px; padding: 0 7px; width: 100%; border: 0; border-radius: 7px; background: transparent; font-family: inherit; font-size: 12px; font-weight: 500; color: var(--ink-2); cursor: pointer; text-align: left; box-sizing: border-box; }
.da-um-pres-row:hover { background: var(--bg-1); color: var(--ink); }
.da-um-pres-row.is-on { background: var(--bg-3); }
.da-um-pres-row .da-um-hint { font-size: 8.5px; }
.da-um-pres-note { margin: 4px 7px 3px; font-size: 8.5px; color: var(--ink-4); }
.da-um-flair { cursor: default; }
.da-um-flair input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; text-align: right; font-size: 10px; color: var(--brand-2); cursor: text; }
.da-um-foot { position: relative; background: #171412; margin-top: 4px; padding: 4px 6px 6px; overflow: hidden; }
.da-um-scan { position: absolute; inset: 0; background: repeating-none; pointer-events: none; }
.da-um-logout { position: relative; display: flex; align-items: center; gap: 10px; padding: 0 8px; height: 34px; border-radius: 8px; text-decoration: none; }
.da-um-logout:hover { background: rgba(255,56,96,.12); }
.da-um-logout-cmd { font-size: 11.5px; color: #ff3860; flex: 1; }
.da-um-sess { font-size: 9.5px; color: #5a544a; }
.da-um-caret { display: inline-block; width: 5px; height: 9px; background: #5a544a; margin-left: 4px; vertical-align: -1px; animation: da-blink 1.1s step-end infinite; }