/*
  Aerodesk — Sub-menu drill-down + bento cards (BETA-ONLY).
  ========================================================================
  EVERY rule is scoped under `html.submenu-nav` (bootstrap.js adds it only on
  beta hosts). On production no selector matches, so this file is inert even
  though the <link> is present. Two parts:

    1. LANDING — curved dashed "traces" + category sub-nodes that fan out of
       the Command Center core when a dashboard node is clicked.
    2. VIEW — when a category is picked, the dashboard view is filtered to
       that category's cards and laid out as a responsive BENTO grid, with a
       breadcrumb back to the sub-menu.

  Colors fall back to literals so it reads even if a HUD token is missing.
*/

html.submenu-nav {
  --bento-accent: var(--accent, #38bdf8);
  --bento-line: var(--line, rgba(255, 255, 255, 0.12));
  --bento-panel: var(--panel, #131c27);
  --bento-text: var(--text, #e8eef5);
  --bento-muted: var(--muted, #8da0b3);
}

/* ====================================================================== */
/* LANDING — traces + sub-nodes                                           */
/* ====================================================================== */

/* SVG overlay sits over the whole stage; never eats pointer events (the
   sub-node buttons sit on top of it and handle clicks). */
html.submenu-nav .cc-trace-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 6; overflow: visible;
}
html.submenu-nav .cc-trace {
  fill: none;
  stroke: var(--bento-accent);
  stroke-width: 2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--bento-accent) 60%, transparent));
  opacity: .9;
}
/* After the draw-out, the trace marches gently as a dashed circuit line. */
html.submenu-nav .cc-trace.cc-trace-live { animation: cc-march 1.1s linear infinite; }
@keyframes cc-march { to { stroke-dashoffset: -48; } }

/* Dim (but keep) the top-level dashboard nodes while a sub-menu is fanned out. */
html.submenu-nav .cc-nodes.cc-nodes-dim { opacity: .08; filter: blur(1px); pointer-events: none; transition: opacity .35s, filter .35s; }

/* Fade the bright landing chrome (core clock/reactor, footer gauges, brand)
   back when a sub-menu populates, so the new traces + sub-nodes are the only
   thing in focus. They restore when the menu closes. NOTE: we deliberately do
   NOT touch .cc-grid-bg — it's the opaque backdrop that hides the app view.
   `!important` is required because .cc-core carries the ccCoreIn entrance
   animation (fill: both), which otherwise wins over a plain opacity. */
html.submenu-nav .cc-core,
html.submenu-nav .cc-stats,
html.submenu-nav .cc-header { transition: opacity .4s ease, filter .4s ease; }
html.submenu-nav .cc-root.cc-submenu-active .cc-core,
html.submenu-nav .cc-root.cc-submenu-active .cc-stats,
html.submenu-nav .cc-root.cc-submenu-active .cc-header {
  opacity: .2 !important;
  filter: blur(1.5px);
  pointer-events: none;
}

/* Tap/click-anywhere-to-close backdrop for the radial fan (below traces +
   sub-nodes). Essential on touch devices that have no Esc key. */
html.submenu-nav .cc-submenu-backdrop {
  position: absolute; inset: 0; z-index: 5; background: transparent; cursor: pointer;
}
/* Visible close button for the fan (top-right of the stage). 44px tap target. */
html.submenu-nav .cc-submenu-close {
  position: absolute; top: 14px; right: 14px; z-index: 8;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--bento-panel) 92%, transparent);
  color: var(--bento-text); border: 1px solid var(--bento-line);
  font-size: 17px; cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .45);
  -webkit-tap-highlight-color: transparent;
}
html.submenu-nav .cc-submenu-close:hover { border-color: var(--bento-accent); color: var(--bento-accent); }

/* Category sub-nodes — positioned absolutely at each trace's endpoint. */
html.submenu-nav .cc-subnode {
  position: absolute; transform: translate(-50%, -50%) scale(.6);
  z-index: 7;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: none; border: 0; cursor: pointer; padding: 0;
  color: var(--bento-text); font: inherit;
  opacity: 0; transition: opacity .32s ease, transform .32s cubic-bezier(.2,.9,.3,1.3);
}
html.submenu-nav .cc-subnode.cc-subnode-in { opacity: 1; transform: translate(-50%, -50%) scale(1); }
html.submenu-nav .cc-subnode-ring {
  width: 58px; height: 58px; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--bento-accent) 70%, transparent);
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--bento-accent) 26%, transparent), color-mix(in srgb, var(--bento-panel) 92%, transparent));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bento-accent) 12%, transparent), 0 8px 26px rgba(0,0,0,.45);
  position: relative;
}
html.submenu-nav .cc-subnode-ring::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 9px; height: 9px; border-radius: 50%; background: var(--bento-accent);
  box-shadow: 0 0 10px var(--bento-accent);
}
html.submenu-nav .cc-subnode:hover .cc-subnode-ring { border-color: var(--bento-accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--bento-accent) 20%, transparent), 0 10px 30px rgba(0,0,0,.55); }
html.submenu-nav .cc-subnode-label {
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-align: center;
  max-width: 130px; text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
/* "new requests" count badge on a sub-node (e.g. Requests). */
html.submenu-nav .cc-subnode-badge {
  position: absolute; top: -6px; right: -6px; z-index: 2;
  min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box;
  border-radius: 10px; background: #f87171; color: #160606;
  font-size: 11px; font-weight: 800; line-height: 20px; text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .55);
}

@media (prefers-reduced-motion: reduce) {
  html.submenu-nav .cc-trace.cc-trace-live { animation: none; }
  html.submenu-nav .cc-subnode { transition: none; }
}

/* ---- narrow-screen list mode (replaces the radial fan) --------------- */
html.submenu-nav .cc-submenu-list {
  position: absolute; inset: 0; z-index: 8;
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
  padding: 22px clamp(16px, 6vw, 40px);
  background: color-mix(in srgb, #04090f 72%, transparent);
  backdrop-filter: blur(5px);
}
html.submenu-nav .cc-sl-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
html.submenu-nav .cc-sl-title {
  font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--bento-accent);
}
html.submenu-nav .cc-sl-close {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--bento-panel); color: var(--bento-text);
  border: 1px solid var(--bento-line); cursor: pointer; font-size: 15px; line-height: 1;
}
html.submenu-nav .cc-sl-item {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: color-mix(in srgb, var(--bento-panel) 94%, transparent);
  border: 1px solid var(--bento-line); border-left: 3px solid var(--bento-accent);
  border-radius: 14px; padding: 18px 16px; cursor: pointer;
  color: var(--bento-text); font: inherit; font-size: 16px; font-weight: 600;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  animation: cc-sl-in .34s cubic-bezier(.2,.9,.3,1.2) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}
html.submenu-nav .cc-sl-item:active { transform: scale(.98); }
html.submenu-nav .cc-sl-dot {
  width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto;
  background: var(--bento-accent); box-shadow: 0 0 10px var(--bento-accent);
}
html.submenu-nav .cc-sl-label { flex: 1; }
html.submenu-nav .cc-sl-badge {
  min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box;
  border-radius: 11px; background: #f87171; color: #160606;
  font-size: 12px; font-weight: 800; line-height: 22px; text-align: center;
}
html.submenu-nav .cc-sl-go { font-size: 22px; color: var(--bento-muted); }
@keyframes cc-sl-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
html.submenu-nav .cc-sl-noanim .cc-sl-item { animation: none; }

/* ====================================================================== */
/* VIEW — breadcrumb + filtered bento grid                                */
/* ====================================================================== */

/* Hide the cards that don't belong to the active category. */
html.submenu-nav .card.cc-cat-hide { display: none !important; }

/* Breadcrumb bar, mounted as the view's first child when filtered. */
html.submenu-nav .view.active[data-active-cat] .cc-breadcrumb {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 4px;
}
html.submenu-nav .cc-breadcrumb { display: none; }   /* only shows under [data-active-cat] */
html.submenu-nav .cc-bc-back {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bento-panel); color: var(--bento-text);
  border: 1px solid var(--bento-line); border-radius: 999px;
  padding: 6px 14px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
}
html.submenu-nav .cc-bc-back:hover { border-color: var(--bento-accent); color: var(--bento-accent); }
html.submenu-nav .cc-bc-trail { font-size: 13px; color: var(--bento-muted); font-weight: 600; }
html.submenu-nav .cc-bc-sep { color: var(--bento-accent); margin: 0 2px; }

/* The bento grid. Applies to any view once a category is active. The
   `column-count` masonry only kicks in WITHOUT [data-active-cat], so this
   override fully replaces it while filtered. */
html.submenu-nav .view.active[data-active-cat] {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
  grid-auto-flow: dense;
  column-count: auto !important;   /* defeat the masonry rule */
}
/* Flatten the legacy .grid-two wrapper so its cards join the bento grid. */
html.submenu-nav .view.active[data-active-cat] .grid-two { display: contents; }
/* Title row spans the full width. */
html.submenu-nav .view.active[data-active-cat] > .title-row { grid-column: 1 / -1; }

/* Cards become fluid bento items — drop the old fixed sizing + masonry cap. */
html.submenu-nav .view.active[data-active-cat] .card {
  width: auto !important;
  max-height: none !important;
  height: auto;
  break-inside: auto;
  column-span: none;
}

/* Importance tiers -> column spans (12-col). */
html.submenu-nav .view.active[data-active-cat] .card[data-tier="hero"]     { grid-column: span 12; }
html.submenu-nav .view.active[data-active-cat] .card[data-tier="wide"]     { grid-column: span 8;  min-height: 240px; }
html.submenu-nav .view.active[data-active-cat] .card[data-tier="standard"] { grid-column: span 6;  min-height: 200px; }
html.submenu-nav .view.active[data-active-cat] .card[data-tier="compact"]  { grid-column: span 4;  min-height: 160px; }
/* Cards with no tier assigned default to a sensible mid width. */
html.submenu-nav .view.active[data-active-cat] .card:not([data-tier]) { grid-column: span 6; }

/* ---- responsive ------------------------------------------------------ */
@media (max-width: 1100px) {
  html.submenu-nav .view.active[data-active-cat] { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  html.submenu-nav .view.active[data-active-cat] .card[data-tier="hero"],
  html.submenu-nav .view.active[data-active-cat] .card[data-tier="wide"]     { grid-column: span 8; }
  html.submenu-nav .view.active[data-active-cat] .card[data-tier="standard"] { grid-column: span 4; }
  html.submenu-nav .view.active[data-active-cat] .card[data-tier="compact"]  { grid-column: span 4; }
}
@media (max-width: 700px) {
  html.submenu-nav .view.active[data-active-cat] { grid-template-columns: 1fr; gap: 12px; }
  html.submenu-nav .view.active[data-active-cat] .card { grid-column: 1 / -1 !important; min-height: 0; }
  /* sub-nodes shrink a touch so the fan fits a phone */
  html.submenu-nav .cc-subnode-ring { width: 48px; height: 48px; }
  html.submenu-nav .cc-subnode-label { font-size: 11px; max-width: 100px; }
}