/* ============================================================================
   MISSION CONTROL — GLASS LED BUTTONS v2
   Faithful port of the status.ebotservers.com/tasks/ button treatment.
   Link AFTER themes.css so these rules win on equal specificity.

   Status-page anatomy (from the TASK OPS screenshot):
     - square corners, dark glass panel, 1px state-colored edge ring
     - UPPERCASE label, letter-spaced, state-colored, with text glow
     - colored outer glow around the whole button
   Glow color follows each theme via var(--acc).
   ============================================================================ */

/* ---- the full LED treatment: top-right controls + board/action buttons ---- */
.theme-btn, .send-btn, .vt-btn, .nav-chip {
  position: relative;
  border-radius: 0;
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid var(--glass-line);
  color: var(--acc);
  /* Capitalise the first letter only, not the whole label. ALL CAPS on every button
     read as shouting and made the header heavy. */
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
  font-weight: 700;
  padding: .5rem .8rem .5rem .7rem;
  text-shadow: 0 0 9px color-mix(in srgb, var(--acc) 65%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 0 0 1px color-mix(in srgb, var(--acc) 42%, transparent),
    0 0 18px color-mix(in srgb, var(--acc) 30%, transparent);
  transition: box-shadow .18s ease, border-color .18s ease,
              text-shadow .18s ease, transform .12s ease, filter .18s ease;
  cursor: pointer;
  white-space: nowrap;
}

/* LED gem dot — pure CSS, no markup change required */
.theme-btn:hover, .send-btn:hover:not(:disabled),
.vt-btn:hover, .nav-chip:hover {
  color: var(--fg2);
  border-color: color-mix(in srgb, var(--acc) 75%, transparent);
  text-shadow: 0 0 12px color-mix(in srgb, var(--acc) 85%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 0 0 1px color-mix(in srgb, var(--acc) 68%, transparent),
    0 0 30px color-mix(in srgb, var(--acc) 48%, transparent);
}
.theme-btn:active, .send-btn:active:not(:disabled),
.vt-btn:active, .nav-chip:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 0 1px color-mix(in srgb, var(--acc) 55%, transparent),
    0 0 14px color-mix(in srgb, var(--acc) 35%, transparent);
}
.send-btn:disabled {
  opacity: .45;
  filter: saturate(.4) brightness(.75);
  box-shadow: none;
  text-shadow: none;
  cursor: not-allowed;
}

/* destructive keeps its red identity, tinted by the theme */
.logout-btn, .theme-btn.danger, .send-btn.danger {
  color: var(--red);
  text-shadow: 0 0 9px color-mix(in srgb, var(--red) 65%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 0 0 1px color-mix(in srgb, var(--red) 42%, transparent),
    0 0 18px color-mix(in srgb, var(--red) 30%, transparent);
}

/* ---- sidebar nav: glass hover, LED active --------------------------------- */
.side .nav-item:hover {
  background: color-mix(in srgb, var(--acc) 10%, transparent);
  /* GLOW REMOVED on operator request. This rule was the only place the sidebar rows got an
     outer halo (0 0 16px accent @30%) plus an inner highlight; the rows are navigation, not
     controls, and the halo competed with the fluid pill that slides underneath them.
     Kept the tint so hover is still legible — removed only the shadow. The inner top
     highlight went too: without the outer glow it read as a stray bright line. */
  box-shadow: none;
}

/* ---- per-theme tuning ------------------------------------------------------ */
/* Obsidian is monochrome: glow in white/silver, not color. */
html[data-theme="obsidian"] .theme-btn,
html[data-theme="obsidian"] .send-btn,
html[data-theme="obsidian"] .vt-btn,
html[data-theme="obsidian"] .nav-chip {
  color: #e8e8e8;
  text-shadow: 0 0 9px rgba(255,255,255,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16),
              0 0 0 1px rgba(255,255,255,.30),
              0 0 18px rgba(255,255,255,.14);
}
/* Terminal CRT: stronger phosphor glow. */
html[data-theme="terminal"] .theme-btn,
html[data-theme="terminal"] .send-btn,
html[data-theme="terminal"] .vt-btn,
html[data-theme="terminal"] .nav-chip {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12),
              0 0 0 1px color-mix(in srgb, var(--acc) 55%, transparent),
              0 0 26px color-mix(in srgb, var(--acc) 48%, transparent);
  text-shadow: 0 0 12px var(--acc);
}
/* Daybreak (light): paper-friendly light touch, no dark glow. */
html[data-theme="daybreak"] .theme-btn,
html[data-theme="daybreak"] .send-btn,
html[data-theme="daybreak"] .vt-btn,
html[data-theme="daybreak"] .nav-chip {
  color: var(--acc);
  text-shadow: 0 0 6px color-mix(in srgb, var(--acc) 30%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85),
              0 0 0 1px color-mix(in srgb, var(--acc) 30%, transparent),
              0 2px 10px rgba(74,55,25,.14);
}
html[data-theme="daybreak"] .theme-btn:hover,
html[data-theme="daybreak"] .send-btn:hover:not(:disabled),
html[data-theme="daybreak"] .vt-btn:hover,
html[data-theme="daybreak"] .nav-chip:hover {
  color: var(--fg2);
  text-shadow: 0 0 8px color-mix(in srgb, var(--acc) 45%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9),
              0 0 0 1px color-mix(in srgb, var(--acc) 55%, transparent),
              0 4px 18px color-mix(in srgb, var(--acc) 30%, transparent);
}


/* ============================================================================
   COLLAPSIBLE CONTROL GROUP (top-right).
   Five appearance buttons live inside .ctl-more behind one icon-only toggle.
   Transitioned on `max-width` + `opacity` rather than `display` because `display`
   cannot animate — that swap is what makes a reveal look like it snaps. Both
   properties move together so the buttons fade WHILE they slide, which reads as
   fluid instead of a two-stage jump. overflow:hidden is what lets max-width clip
   the row while collapsed.
   State lives on .ctl[data-more] so ONE selector drives the whole group.
   ============================================================================ */
.ctl-more {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  /* translate + scale so the row SLIDES AND GROWS out of the toggle rather than only
     widening — max-width alone eases a container, which reads as a mechanical stretch.
     Easing is a slight overshoot curve: it settles with weight instead of stopping dead. */
  transform: translateX(10px) scale(.94);
  transform-origin: right center;
  visibility: hidden;
  pointer-events: none;
  will-change: max-width, opacity, transform;
  transition:
    max-width .34s cubic-bezier(.22, 1.12, .36, 1),
    opacity .20s ease,
    transform .34s cubic-bezier(.22, 1.12, .36, 1),
    visibility 0s linear .34s;
}
.ctl[data-more="open"] .ctl-more,
html[data-ctl-more="1"] .ctl-more {
  max-width: 900px;
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition:
    max-width .34s cubic-bezier(.22, 1.12, .36, 1),
    opacity .26s ease .04s,
    transform .34s cubic-bezier(.22, 1.12, .36, 1),
    visibility 0s;
}
/* Reduced motion: keep the reveal, drop the travel. */
@media (prefers-reduced-motion: reduce) {
  .ctl-more, .ctl[data-more="open"] .ctl-more, html[data-ctl-more="1"] .ctl-more {
    transform: none;
    transition: max-width .12s linear, opacity .12s linear, visibility 0s;
  }
}
/* The toggle sits at the END of the strip so the group expands to its LEFT and the
   toggle itself never moves — a control that shifts under the cursor on click is the
   classic way to make a toggle feel broken. `order` does that without reordering the
   markup, so the DOM keeps toggle-then-controls reading order for screen readers. */
.ctl { display: flex; align-items: center; gap: 6px; }
.ctl .ctl-toggle { order: 2; }
.ctl .ctl-more { order: 1; }
.ctl .ctl-more > * { flex: 0 0 auto; }
/* the toggle carries the open state so it is obvious whether the group is out */
.ctl[data-more="open"] .ctl-toggle,
html[data-ctl-more="1"] .ctl-toggle {
  color: var(--acc); border-color: var(--acc);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 0 0 1px color-mix(in srgb, var(--acc) 68%, transparent),
    0 0 30px color-mix(in srgb, var(--acc) 48%, transparent);
}
/* Icon-only: this button must never grow a label or a text-sized min-width. */
.ctl .ctl-toggle { min-width: 34px; width: 34px; padding: 0; }
.ctl .ctl-toggle .btn-lbl { display: none; }