/* ═══ THE COMMAND DECK'S FOUR IDEAS (2026-10-24) — only under html.cd. See showcase-command.js. ═══ */

/* 1 · THE BILLBOARD: the header's name + readout give way to one LED strip between the logo and the header's buttons,
   its glass and its lines blurring away at both ends (the deck's "full digital billboard, edges blurred") */
html.cd #brandbar.cd-bar #hdrInfo{display:none !important}
#cdBoard{position:relative;display:flex;align-items:center;min-width:0;height:52px;pointer-events:auto}
#cdBoard::before{content:"";position:absolute;inset:0;pointer-events:none;border-block:1px solid rgba(215,223,229,.18);
  background:linear-gradient(180deg,rgba(215,223,229,.08),rgba(215,223,229,.015) 60%),rgba(10,12,13,.5);-webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
#cdBoard .cd-view{position:absolute;top:0;bottom:0;left:0;right:46px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
#cdBoard .cd-view::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(rgba(255,255,255,.05) .8px,transparent 1.2px) 0 0/4px 4px}   /* the LED grain */
#cdBoard .cd-track{position:absolute;top:0;bottom:0;left:0;display:flex;align-items:center;white-space:nowrap;animation:cdRun var(--cd-dur,40s) linear infinite;will-change:transform}
#cdBoard:hover .cd-track,#cdBoard:focus-within .cd-track,#cdBoard.is-paused .cd-track{animation-play-state:paused}
@keyframes cdRun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
#cdBoard .cd-item{display:block;white-space:pre;padding:0 30px;color:#e3e9ef;font:700 18px/1 "Doto",var(--mono,monospace);letter-spacing:.06em;text-transform:uppercase;text-shadow:0 0 6px rgba(var(--accent-rgb,215,223,229),.45)}
#cdBoard .cd-item b{color:#fff;font-weight:900}
#cdBoard .cd-sep{flex:none;width:5px;height:5px;border:1px solid var(--accent,#d7dfe5);transform:rotate(45deg);opacity:.7}
#cdBoard .cd-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
#cdBoard .cd-pause{position:absolute;right:0;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:10px;background:none;color:rgba(255,255,255,.62);cursor:pointer;transition:color .2s cubic-bezier(.16,1,.3,1)}
#cdBoard .cd-pause:hover{color:#fff}
#cdBoard .cd-pause svg{width:14px;height:14px}
#cdBoard .cd-pause:focus-visible{outline:2px solid var(--accent,#d7dfe5);outline-offset:-2px}
@media (min-width:900px){
  /* the board takes the readout's column (logo · board · buttons) */
  html[data-showcase-ui="glass"] body #brandbar.hdr-left.cd-bar{grid-template-columns:auto minmax(0,1fr) auto}
  #brandbar.hdr-left.cd-bar #cdBoard{order:1;margin:0 8px}
  html[data-showcase-ui="glass"] body #brandbar.hdr-left.cd-bar #collectionBar{display:none}
}
@media (max-width:899px){
  /* phones: a slim strip under the logo row, full width, so the header buttons keep their room */
  #brandbar.cd-bar #cdBoard{position:absolute;left:0;right:0;top:100%;height:38px;margin-top:4px}
  #cdBoard .cd-item{font-size:14px;padding:0 18px}
  /* the strip is Home's: inner pages start right under the logo row, so there it lay across their top bar (Overview's chapters,
     25 Oct 2026). Absolute, so hiding it moves nothing. */
  body:not(.on-main) #brandbar.cd-bar #cdBoard{display:none}
}
@media (prefers-reduced-motion:reduce){#cdBoard .cd-track{animation:none}}
/* THE HEADER AS THE BILLBOARD (2026-10-28, SONO: experience.headerStyle 'billboard'). Owner: "kinda bummed to remove the billboard
   because it felt Immersive and LIVE. That said, looked weird on header with logo and website links on each side. Should we remove
   those and just have on footer". The logo and Website step out (the footer bar shows both); the strip spans the bar. */
/* desktop and tablet only: phones have no footer bar, so there the logo row stays and the strip runs under it as before */
@media (min-width:900px){
  html.hdr-board #brandbar.cd-bar :is(.brand-center,#hdrAct){display:none!important}
  html.hdr-board[data-showcase-ui="glass"] body #brandbar.hdr-left.cd-bar,html.hdr-board body #brandbar.hdr-left.cd-bar{grid-template-columns:minmax(0,1fr)}
  html.hdr-board #brandbar.hdr-left.cd-bar #cdBoard{order:1;margin:0}
}

/* 2 · THE FOUR WAYS: alike — no framed main option (10-23 rule), four in a row under the title */
html.v3w.cd #isHome .v3-center .is-acts.cd-ways{grid-template-columns:repeat(4,auto);gap:18px 34px}
html.v3w.cd #isHome .v3-center .is-acts.cd-ways li:first-child{grid-column:auto}
html.v3w.cd #isHome .v3-center .is-acts.cd-ways button{flex-direction:column;gap:12px;font-size:11px;letter-spacing:.2em}
html.v3w.cd #isHome .v3-center .is-acts.cd-ways .main{padding:2px 4px;border:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;font-size:11px;letter-spacing:.2em;color:rgba(255,255,255,.88)}
html.v3w.cd #isHome .v3-center .is-acts.cd-ways button i,html.v3w.cd #isHome .v3-center .is-acts.cd-ways .main i{width:48px;height:48px;border:1px solid rgba(215,223,229,.28);border-radius:50%;background:rgba(8,11,16,.42);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:grid;place-items:center;color:#fff}
html.v3w.cd #isHome .v3-center .is-acts.cd-ways button svg{width:20px;height:20px}
html.v3w.cd #isHome .v3-center .is-acts.cd-ways button:hover i{border-color:rgba(215,223,229,.6);background:rgba(215,223,229,.12)}
html.v3w.cd #isHome .v3-center .is-acts.cd-ways .main:hover{transform:translateY(-2px);border:0;box-shadow:none}
.is-acts.cd-ways .main>b{display:none}   /* the main option's arrow: no option is the featured one now */

/* the four ways on phones and small screens (the classic Home's grid): a 2 × 2 of equals, the first no longer the white main button */
html.cd:not(.v3w) .is-acts.cd-ways li{grid-column:auto !important;display:flex}
html.cd:not(.v3w) .is-acts.cd-ways li>button{flex:1;width:100%}   /* each row's two cards one height, whatever their label's lines */
html.cd:not(.v3w) .is-acts.cd-ways .main{background:rgba(10,13,16,.52) !important;border:1px solid rgba(238,242,246,.2) !important;color:#fff !important;font-size:10.5px !important;letter-spacing:.12em !important;min-height:52px}
html.cd:not(.v3w) .is-acts.cd-ways .main i{display:none}   /* the classic Home shows no icon on the others: four text cards alike */
/* 4 · SEE IT LIVE: beside ← All spaces (same pill, a step brighter: it is the page's point), and the card's one primary action */
.iv-toolbar .cd-live-top{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px 0 14px;border:1px solid rgba(var(--accent-rgb,215,223,229),.55);border-radius:999px;
  background:rgba(10,14,18,.7);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);color:#fff;font:500 9.5px var(--mono,monospace);letter-spacing:.18em;text-transform:uppercase;cursor:pointer;
  transition:background .2s cubic-bezier(.16,1,.3,1),border-color .2s cubic-bezier(.16,1,.3,1)}
.iv-toolbar .cd-live-top:hover{background:rgba(var(--accent-rgb,215,223,229),.16);border-color:var(--accent,#d7dfe5)}
.iv-toolbar .cd-live-top svg{width:12px;height:12px;flex:none}
.iv-toolbar .cd-live-top:focus-visible{outline:2px solid var(--accent,#d7dfe5);outline-offset:3px}
.ml-convert .cd-live{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.ml-convert .cd-live svg{width:13px;height:13px;flex:none}
/* the demo plays in a framed WINDOW under the header, clear of the menu and above the strip — a whole Showcase with its own header
   must never sit full-bleed under ours (two interfaces on one screen) */
html.cd.cd[data-showcase-ui] body #assetStage.iv-stage.iv-interactive.cd-demo #ivCanvas,.iv-stage.cd-demo #ivCanvas{inset:calc(var(--sales-header-h,112px) + 62px) 28px 100px 120px !important;width:auto !important;height:auto !important;
  border:1px solid rgba(var(--accent-rgb,215,223,229),.35);border-radius:18px;overflow:hidden;box-shadow:0 30px 80px -30px #000;background:#05080f}
.iv-stage.cd-demo #ivCanvas iframe{width:100%;height:100%;border:0}
.iv-stage.cd-demo .iv-rail{display:none}   /* the demo has the window; Photos & video (beside ← All spaces) brings the strip back */
@media (max-width:899px){html.cd.cd[data-showcase-ui] body #assetStage.iv-stage.iv-interactive.cd-demo #ivCanvas,.iv-stage.cd-demo #ivCanvas{inset:calc(var(--sales-header-h,96px) + 96px) 10px 96px 10px !important}}