/* ═══════════════════════════════════════════════════════════
   CENTURY HEADQUARTERS  ·  CONTROL LANGUAGE

   Loaded after styles.css. Holds the pieces the user operates
   rather than reads: controls, the expanded panel silhouette,
   the chart tooltip, and the system entry sequence.
   ═══════════════════════════════════════════════════════════ */

/* ── controls: thin, precise, no chunky boxes ── */

.seg {
  border: 0;
  background: none;
  border-bottom: 1px solid var(--edge-1);
}
.seg__b {
  position: relative;
  border: 0;
  padding: 6px 12px 7px;
  letter-spacing: 0.17em;
  color: var(--ink-4);
  background: none;
  transition: color 200ms var(--ease-m);
}
.seg__b::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1px; background: var(--cy);
  transform: scaleX(0); transform-origin: center;
  transition: transform 260ms var(--ease), background 200ms var(--ease-m);
}
.seg__b:hover { color: var(--ink-2); }
.seg__b:hover::after { transform: scaleX(0.4); background: var(--edge-3); }
.seg__b.is-on { color: var(--ink-max); background: none; box-shadow: none; }
.seg__b.is-on::after { transform: scaleX(1); background: var(--cy); box-shadow: 0 0 7px var(--cy-glow); }
.seg__b:active { transform: translateY(1px); }

.btn {
  background: none;
  border: 1px solid var(--edge-1);
  padding: 7px 13px;
  color: var(--ink-2);
  letter-spacing: 0.18em;
  clip-path: polygon(0 5px, 5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%);
  transition: color 180ms var(--ease-m), border-color 180ms var(--ease-m), background 180ms var(--ease-m);
}
.btn__mark {
  width: 5px; height: 5px;
  border: 1px solid var(--edge-2); background: none;
  transition: border-color 180ms var(--ease-m), background 180ms var(--ease-m);
}
.btn:hover { color: var(--ink-max); border-color: var(--edge-3); background: rgba(24,52,78,0.42); }
.btn:hover .btn__mark { border-color: var(--cy); background: var(--cy); }
.btn:active { transform: translateY(1px); }

/* Reserved ARK navigation. The destination does not exist yet, so the
   control admits it on hover instead of pretending to navigate. */
.btn--open { cursor: default; }
.btn--open .btn__state {
  font-size: 7.5px; letter-spacing: 0.16em; color: var(--ink-4);
  padding-left: 10px; margin-left: 2px;
  border-left: 1px solid var(--edge-1);
  opacity: 0; max-width: 0; overflow: hidden; white-space: nowrap;
  transition: opacity 200ms var(--ease-m), max-width 260ms var(--ease);
}
.btn--open:hover { border-color: var(--edge-2); background: none; color: var(--ink-2); }
.btn--open:hover .btn__state { opacity: 1; max-width: 110px; }
.btn--open:hover .btn__mark { border-color: var(--edge-2); background: none; }
.btn--open:active { transform: none; }

.xclose { background: none; border: 1px solid var(--edge-1); padding: 6px 10px; gap: 8px; }
.xclose__g { width: 10px; height: 10px; }
.xclose__g line { stroke-width: 1.6; }
.xclose__t { font-size: 8.5px; letter-spacing: 0.18em; color: var(--ink-2); }
.xclose__k { border-left: 1px solid var(--edge-1); padding-left: 8px; letter-spacing: 0.16em; }
.xclose:hover .xclose__t { color: var(--ink-max); }
.xclose:hover { border-color: var(--edge-3); background: rgba(24,52,78,0.42); }
.xclose:active { transform: translateY(1px); }

/* ── expanded panel: an assembled surface, not one flat rectangle ── */

.xp {
  clip-path: polygon(0 18px, 18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
  background:
    linear-gradient(180deg, rgba(17,31,50,0.55) 0px, rgba(11,20,34,0) 92px),
    var(--panel);
}

/* docking marks on the left edge, where the panel meets the HQ */
.xp__dock {
  position: absolute; left: 0; top: 50%; z-index: 3;
  width: 3px; height: 86px;
  transform: translateY(-50%);
  background: repeating-linear-gradient(to bottom, var(--cy) 0 14px, transparent 14px 26px);
  opacity: 0.5;
}
body.is-simple .xp__dock { display: none; }

.xp__bar {
  position: relative;
  background: linear-gradient(180deg, rgba(20,38,60,0.92), rgba(13,24,40,0.88));
  border-bottom: 1px solid var(--edge-2);
  padding: 12px 15px 12px 0;
}
/* accent block at the head of the rail */
.xp__bar::before {
  content: ""; flex: none;
  width: 3px; height: 22px;
  background: var(--cy);
  box-shadow: 0 0 10px var(--cy-glow);
  margin-right: 13px;
}
/* segmented tail, so the rail does not read as one plain border */
.xp__bar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(to right, var(--cy) 0 92px, transparent 92px 100%);
  opacity: 0.55;
}

.xp__foot { background: linear-gradient(0deg, rgba(9,16,27,0.92), rgba(11,20,34,0.55)); }

/* internal regions read as recessed bays of one surface, not as cards */
.pf__top {
  background: linear-gradient(180deg, rgba(20,36,57,0.32), rgba(20,36,57,0));
  margin: -5px -7px 0; padding: 7px 7px 14px;
  border-bottom: 1px solid var(--edge-1);
}
.pf__bottom {
  background: linear-gradient(180deg, rgba(14,26,42,0), rgba(14,26,42,0.42));
  margin: 0 -7px -5px; padding: 14px 7px 7px;
  border-top: 1px solid var(--edge-1);
}

/* section headers gain a small docking notch */
.sec__rule { position: relative; }
.sec__rule::after {
  content: ""; position: absolute; left: -1px; top: -2px;
  width: 5px; height: 5px;
  background: var(--cy); transform: rotate(45deg);
  box-shadow: 0 0 7px var(--cy-glow);
}

/* ── chart tooltip, shared by every chart ── */

.tip {
  position: fixed; z-index: 900; pointer-events: none;
  min-width: 126px;
  background: rgba(9,17,29,0.97);
  border: 1px solid var(--edge-2);
  box-shadow: 0 14px 34px rgba(0,0,0,0.72);
  clip-path: polygon(0 6px, 6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
  opacity: 0; transform: translateY(3px);
  transition: opacity 120ms var(--ease-m), transform 140ms var(--ease);
}
.tip.is-on { opacity: 1; transform: none; }
.tip__h {
  padding: 6px 10px;
  font-size: 8.5px; letter-spacing: 0.18em; color: var(--ink-3);
  border-bottom: 1px solid var(--edge-1);
  background: rgba(20,38,60,0.6);
}
.tip__b { padding: 7px 10px 8px; display: grid; gap: 4px; }
.tip__r { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
.tip__k { font-size: 8.5px; letter-spacing: 0.13em; color: var(--ink-4); }
.tip__v { font-size: 11px; color: var(--ink-1); font-variant-numeric: tabular-nums; }
.tip__v[data-tone="hot"] { color: var(--cy-hi); }

/* ── source hover cross highlighting ── */

.lane__i { transition: opacity 200ms var(--ease-m), border-color 200ms var(--ease-m), background 200ms var(--ease-m); }
.lane__i.is-mute { opacity: 0.3; }
.lane__i.is-match { border-color: var(--edge-3); background: rgba(24,52,78,0.6); }

/* ── system entry sequence ── */

/* the card arms before anything moves */
.mod.is-arming {
  border-color: rgba(140,230,255,0.9);
  box-shadow:
    inset 0 1px 0 rgba(195,232,255,0.24),
    0 0 0 1px rgba(69,210,255,0.22),
    0 0 46px rgba(69,210,255,0.3);
}
/* the core acknowledges the command and begins receding */
body.is-arming .core { transform: scale(0.94); opacity: 0.74; }
body.is-arming .core__rot--cw { animation-duration: 55s; }
body.is-arming .c-ring--dash { stroke: rgba(140,225,255,0.6); }
body.is-arming .mod:not(.is-arming) { opacity: 0.5; }

.xp.is-settled { border-color: rgba(120,205,255,0.5); }

/* ── idle: staggered, never everything at once ── */

body.is-idle .c-ring--dash { animation: dashDrift 26s linear infinite; }
@keyframes dashDrift { to { stroke-dashoffset: -140; } }
body.is-idle .srow__bar i { animation: barBreathe 9s var(--ease-m) infinite; }
@keyframes barBreathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.74; } }
body.is-idle .trend__end { animation: endBreathe 7s var(--ease-m) infinite; }
@keyframes endBreathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* ── microtext demoted so real information wins ── */

.mod__idx, .xp__idx { font-size: 8px; color: rgba(138,168,199,0.36); }
.mod__grip { display: none; }

@media (prefers-reduced-motion: reduce) {
  body.is-idle .c-ring--dash,
  body.is-idle .srow__bar i,
  body.is-idle .trend__end { animation: none !important; }
}

/* Finish pass: precise responses, recessed surfaces, quiet atmosphere. */
:root { --response: 180ms; --ink-4: rgba(150,180,209,.65); }
.mod, .nav__b, .nav__b::after, .seg__b, .seg__b::after,
.btn, .btn__mark, .btn--open .btn__state, .xclose, .xclose__g,
.alertctl, .echo__frame, .lk, .nd, .c-ports rect {
  transition-duration: var(--response);
  transition-delay: 0ms;
}
button:focus-visible, .mod:focus-visible {
  outline: 1px solid var(--edge-3); outline-offset: -3px;
}
.nav__b:focus-visible::after, .seg__b:focus-visible::after { transform: scaleX(.65); }
.seg__b.is-on:focus-visible::after { transform: scaleX(1); }
.btn--open:focus-visible .btn__state { opacity: 1; max-width: 160px; }
.mod__idx, .xp__idx { color: var(--ink-4); }
.mod__meta span { transition-duration: 180ms; }
.mod:focus-visible .mod__meta-rest { opacity: 0; }
.mod:focus-visible .mod__meta-hover { opacity: 1; }
@media (max-width: 1340px) {
  body.is-simple .rail__sub { display: none; }
  .mod__bar { gap: 7px; padding-left: 10px; padding-right: 10px; }
  .mod__name { font-size: 11px; letter-spacing: .10em; }
  .mod__state { padding-left: 5px; padding-right: 5px; letter-spacing: .08em; }
}
.status__label, .clock__meta { white-space: nowrap; }
@media (max-height: 820px) {
  body.is-simple .mod[data-mod="youtube"] .mod__body,
  body.is-simple .mod[data-mod="fantasy"] .mod__body { gap: 5px; padding-top: 7px; padding-bottom: 6px; }
  body.is-simple .mod[data-mod="youtube"] .met--lead .met__v,
  body.is-simple .mod[data-mod="fantasy"] .met--lead .met__v { font-size: 21px; }
  body.is-simple .mod[data-mod="youtube"] .deadline,
  body.is-simple .mod[data-mod="fantasy"] .deadline { padding-top: 4px; padding-bottom: 4px; }
}
.mod__bar { box-shadow: inset 0 1px rgba(220,239,255,.035); }
.mod__name, .mod .met__v { transition: color 180ms ease; }
.mod:hover .mod__name, .mod:focus-visible .mod__name { color: #edf6ff; }
.mod:hover .met--lead .met__v { color: #e0f2ff; }
.mod:hover, .mod:focus-visible, .mod.is-arming {
  box-shadow: inset 0 1px rgba(209,233,255,.16), inset 0 0 0 1px rgba(118,169,204,.045), 0 12px 28px rgba(0,0,0,.45);
}
.mod.is-open { box-shadow: inset 0 1px rgba(209,233,255,.18); }
.lk.is-lit { stroke: rgba(164,214,242,.65); filter: none; }
.lk-pulse { stroke: #b5d9ed; stroke-width: 1.5; filter: none; opacity: .65; }
.nd.is-lit, .c-ports rect.is-lit { fill: #a0cce5; filter: none; }
.echo:focus-within .echo__frame {
  box-shadow: inset 0 -1px rgba(157,206,235,.25), 0 12px 28px rgba(0,0,0,.4);
}
.echo__input { min-width: 0; }
.xp { box-shadow: inset 0 1px rgba(205,228,247,.09), 0 24px 65px rgba(0,0,0,.65); }
.xp.is-settled, .xp.is-settled .xp__inner { will-change: auto; }
body.is-arming .core { transform: scale(.97); opacity: .7; }
body.is-expanded .core { transform: scale(.94); opacity: .18; filter: none; }
body.is-arming .core__rot--cw { animation-duration: 240s; }
body.hq-live .core__rot--cw { animation-duration: 240s; }
body.hq-live .core__rot--ccw { animation-duration: 180s; }
body.hq-live .core__rot--slow { animation: calibration 37s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes calibration {
  0%, 28%, 100% { transform: rotate(0); }
  42%, 57% { transform: rotate(7deg); }
  76%, 88% { transform: rotate(-4deg); }
}
body.is-idle .c-ring--dash, body.is-idle .srow__bar i,
body.is-idle .trend__end, body.is-idle .core__cell b.is-hot { animation: none; }
.grain { animation: none; opacity: .016; }
body.hq-live .sweep { animation: chamberPass 31s ease-in-out 7s infinite; }
@keyframes chamberPass {
  0%, 72% { transform: translateX(-300px); opacity: 0; }
  77% { opacity: .35; }
  94%, 100% { transform: translateX(100vw); opacity: 0; }
}
body:not(.is-simple) .core__rings {
  transform: translate(var(--depth-x, 0px), var(--depth-y, 0px));
  transition: transform 800ms cubic-bezier(.2,.6,.2,1);
}
body.hq-live:not(.is-simple) .env-grid--fine {
  transform: translate(var(--depth-x, 0px), var(--depth-y, 0px));
  transition: transform 1100ms ease-out, opacity 380ms ease;
  opacity: .7;
}
body.is-simple .core *, body.is-simple .sweep, body.is-simple .grain,
body.is-hidden *, body.is-hidden *::before, body.is-hidden *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0ms !important; transition-delay: 0ms !important; }
  body .core__rings, body.hq-live .env-grid--fine { transform: none !important; }
}