/* ==========================================================================
   CENTRAL COMMAND — REFERENCE MATCH

   A presentation-only pass for the command canvas. The dashboard keeps its
   saved widget geometry and all existing behaviour; this layer makes the
   resting view read like a dense black-glass instrument deck.
   ========================================================================== */

/* The reference gives the dashboard the window, not a wide application moat. */
body:has(#eoCommandPanel.visible) .topbar{
  min-height:40px;
  padding:5px 12px;
  gap:12px;
  background:rgba(var(--bg-rgb),.96);
  border-bottom-color:rgba(var(--accent-rgb),.22);
  box-shadow:none;
}
body:has(#eoCommandPanel.visible) .topbar::after{
  left:12px;
  right:12px;
  opacity:.55;
}
body:has(#eoCommandPanel.visible) .topbar .hbtn,
body:has(#eoCommandPanel.visible) .topbar .nav-toggle-btn{
  width:30px;
  height:30px;
}
body:has(#eoCommandPanel.visible) .save-indicator,
body:has(#eoCommandPanel.visible) .cloud-sync-chip{
  min-height:28px;
  padding:3px 8px;
  background:rgba(var(--accent-rgb),.025);
  border:1px solid var(--line-soft);
}

#eoCommandPanel{
  padding:8px 12px 20px;
  background:
    linear-gradient(rgba(var(--accent-rgb),.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(var(--accent-rgb),.018) 1px,transparent 1px);
  background-size:48px 48px;
  background-position:-1px -1px;
}

#eoCommandPanel .eo-command-deck{
  --command-gap:10px;
  --command-gutter:10px;
  gap:8px;
}
#eoCommandPanel .eo-command-grid{ margin-top:2px; }

/* Zoom remains available but no longer consumes a permanent strip of canvas. */
#eoCommandPanel .eo-command-settings{
  position:sticky;
  top:4px;
  z-index:24;
  height:0;
  overflow:visible;
}
#eoCommandPanel .eo-command-settings-btn{
  transform:translateY(2px);
  opacity:.38;
  background:rgba(var(--bg-rgb),.84);
  backdrop-filter:blur(8px);
}
#eoCommandPanel .eo-command-settings:hover .eo-command-settings-btn,
#eoCommandPanel .eo-command-settings.is-open .eo-command-settings-btn,
#eoCommandPanel .eo-command-settings-btn:focus-visible{ opacity:1; }

/* One consistent instrument-panel material across the mixed widget library. */
#eoCommandPanel :is(
  .eo-rail-card,
  .eo-cmd-hero,
  .eo-levels-card,
  .eo-dir-card,
  .eo-count-tile,
  .eo-ltf-card,
  .pg-banner-wrap
){
  border:1px solid rgba(var(--accent-rgb),.3);
  border-radius:7px !important;
  background:
    linear-gradient(180deg,rgba(9,21,37,.94),rgba(3,9,18,.98));
  box-shadow:
    inset 0 0 0 1px rgba(var(--accent-rgb),.025),
    0 1px 0 rgba(0,0,0,.55);
}
#eoCommandPanel :is(
  .eo-rail-card,
  .eo-levels-card,
  .eo-dir-card,
  .eo-count-tile,
  .eo-ltf-card
):hover{
  border-color:rgba(var(--accent-rgb),.5);
  background:
    linear-gradient(180deg,rgba(11,27,46,.96),rgba(4,12,23,.99));
}

/* Supporting modules stay compact; the day hero is the single focal surface. */
#eoCommandPanel .eo-rail-card{ padding:12px 14px; }
/* The to-do card is a list with no heading, so it carries no left inset of its
   own: the scroll box's padding-left is the drag-grip gutter and doubles as
   the row inset (see eo-operator.css). Without this the skin's 14px would sit
   on top of that gutter and put the checkbox 25px off the border — the exact
   dead space the gutter exists to remove. */
#eoCommandPanel .eo-todo-card{ padding:8px 9px 8px 0; }
#eoCommandPanel .eo-levels-card{ padding:12px 14px; }
#eoCommandPanel .eo-dir-card{ padding:13px 15px; }
#eoCommandPanel .eo-cmd-hero{
  padding:16px 19px;
  border-color:rgba(var(--accent-rgb),.46);
  box-shadow:
    inset 0 0 0 1px rgba(var(--accent-rgb),.04),
    0 0 22px -18px rgba(var(--accent-rgb),.48);
}
#eoCommandPanel .eo-cmd-hero::before{
  width:2px;
  box-shadow:0 0 10px rgba(var(--accent-rgb),.34);
}
#eoCommandPanel .eo-cmd-hero-date{
  margin-top:9px;
  font-size:28px;
  font-weight:600;
  letter-spacing:-.035em;
  text-wrap:balance;
}
#eoCommandPanel .eo-cmd-hero-actions{
  gap:8px;
  margin-top:13px;
}
#eoCommandPanel .eo-cmd-hero-clock{ margin-top:11px; }
#eoCommandPanel .eo-cmd-hero-quote{
  color:var(--muted);
  border-left-width:1px;
}

/* Technical labels and reported values get the crisp hierarchy in the image. */
#eoCommandPanel :is(
  .eo-rail-kicker,
  .eo-levels-scale,
  .eo-dir-kicker,
  .eo-count-label,
  .eo-cal-title,
  .eo-money-label
){
  color:#91A6D5;
  font-family:var(--font-mono);
  font-weight:650;
  letter-spacing:.16em;
  text-transform:uppercase;
}
#eoCommandPanel :is(
  .eo-count-num,
  .eo-funds-total,
  .eo-money-total,
  .eo-inbox-count
){
  font-variant-numeric:tabular-nums;
  text-shadow:none;
}

/* Outlined command keys: dark at rest, cyan only when action is earned. */
#eoCommandPanel :is(
  .eo-cmd-btn,
  .eo-pill-toggle,
  .eo-count-btn,
  .eo-ltf-add,
  .eo-inbox-capture button
){
  border-radius:5px !important;
  border-color:rgba(var(--accent-rgb),.34);
  background:rgba(var(--bg-rgb),.35);
  box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.018);
}
#eoCommandPanel :is(
  .eo-cmd-btn,
  .eo-pill-toggle,
  .eo-count-btn,
  .eo-ltf-add,
  .eo-inbox-capture button
):hover{
  color:var(--accent-soft);
  border-color:rgba(var(--accent-rgb),.68);
  background:rgba(var(--accent-rgb),.085);
}
#eoCommandPanel .eo-cmd-btn{ height:34px; padding:0 14px; }

/* Inset cells keep lists and direction copy visibly below their parent panel. */
#eoCommandPanel :is(.eo-dir-box,.eo-inbox-item){
  background:rgba(var(--bg-rgb),.68);
  border-color:rgba(var(--accent-rgb),.12);
}
#eoCommandPanel .eo-levels-grid{ gap:10px; margin-top:10px; }
#eoCommandPanel .eo-level{
  padding:10px 12px;
  background:rgba(var(--bg-rgb),.25);
  border-color:rgba(var(--accent-rgb),.12);
}
#eoCommandPanel .eo-level:hover{ background:rgba(var(--accent-rgb),.055); }

/* Images should look mounted into the deck, not pasted onto blue cards. */
#eoCommandPanel :is(.eo-cslot-bleed,.eo-cslot-banner,.eo-cslot-wide,.eo-cslot-tile){
  background:#02060d;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
#eoCommandPanel :is(.eo-cslot-bleed,.eo-cslot-banner,.eo-cslot-wide,.eo-cslot-tile) img{
  filter:saturate(.9) contrast(1.04) brightness(.88);
}

/* Keep the audio dock, but reduce it to the slim control rail absent from the
   reference crop instead of letting it dominate the bottom of the screen. */
body:has(#eoCommandPanel.visible) .playerbar{
  min-height:58px;
  background:rgba(var(--bg-rgb),.97) !important;
  border-top-color:rgba(var(--accent-rgb),.28);
}
body:has(#eoCommandPanel.visible) .playerbar .pb{ padding:7px 14px; }
body:has(#eoCommandPanel.visible) .playerbar .play-btn,
body:has(#eoCommandPanel.visible) .playerbar .circle-btn,
body:has(#eoCommandPanel.visible) .playerbar .cb-play{
  width:40px;
  height:40px;
}
body:has(#eoCommandPanel.visible) .playerbar .play-btn svg,
body:has(#eoCommandPanel.visible) .playerbar .cb-play svg{
  width:19px;
  height:19px;
}

@media (max-width:900px){
  #eoCommandPanel{ padding-inline:8px; }
  #eoCommandPanel .eo-command-deck{
    --command-gap:8px;
    --command-gutter:8px;
  }
  #eoCommandPanel .eo-cmd-hero-date{ font-size:24px; }
}

@media (prefers-reduced-motion:reduce){
  #eoCommandPanel .eo-command-settings-btn{ transition:none; }
}