@import url("../tokens/fonts.css");

/* ==========================================================================
   Phosphor — a CRT text-mode UI as a modern system.
   Colours, type, spacing, shadows, durations and easings come from tokens.css.
   Rules: transform/opacity for anything that moves; colour changes only on one
   element's state. Phosphor ignites fast (40ms, stepped) and decays slow (280ms).
   Entrance animations fill BACKWARDS only. No blur filters, no backdrop-filter.
   ========================================================================== */

:root {
  --ph-line: 2px;
  --ph-surface: var(--screen);           /* what is behind me: frame titles knock out to this */
  --ph-ignite: var(--dur-ignite, 40ms);
  --ph-decay: var(--dur-decay, 280ms);
  --ph-ease-decay: var(--ease-decay, cubic-bezier(.05, .7, .1, 1));
  --ph-ease-power: var(--ease-power, cubic-bezier(.2, .9, .1, 1));
  --ph-focus: 2px dashed var(--phosphor-hi);
  color-scheme: dark;
}
[data-theme="paper"] { color-scheme: light; }

[class^="ph-"], [class*=" ph-"], [class^="ph-"]::before, [class*=" ph-"]::before, [class^="ph-"]::after, [class*=" ph-"]::after { box-sizing: border-box; }

html { background: var(--screen); }
body {
  margin: 0;
  background: var(--screen);
  color: var(--phosphor);
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 22px;
  text-shadow: var(--glow-text);
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  scrollbar-color: var(--phosphor-faint) transparent;
}
/* the raster: a static scanline overlay over everything (never animated) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 2147483000; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, var(--scanline) 2px 3px);
}
::selection { background: var(--selection); color: var(--phosphor-hi); }
:focus-visible { outline: var(--ph-focus); outline-offset: 3px; }

/* ---------- utilities ---------- */
.ph-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ph-label { font: 400 12px/16px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--phosphor-dim); }
.ph-display { font-family: var(--font-display); font-weight: 400; color: var(--phosphor-hi); text-shadow: var(--glow-text-hi); }
.ph-dim { color: var(--phosphor-dim); }
.ph-hi { color: var(--phosphor-hi); text-shadow: var(--glow-text-hi); }
.ph-alert { color: var(--alert); text-shadow: 0 0 6px var(--alert-glow); }
.ph-stage { padding: 24px; display: flex; flex-wrap: wrap; gap: 16px 20px; align-items: center; }
.ph-stack { display: flex; flex-direction: column; gap: 16px; }
.ph-overline { width: 100%; font: 400 12px/16px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--phosphor-dim); }
.ph-overline::before { content: "// "; color: var(--phosphor-faint); }
.ph-rule { border: 0; border-top: 2px dashed var(--phosphor-faint); margin: 0; width: 100%; }
.ph-screen { border-radius: var(--radius-tube); box-shadow: var(--shadow-vignette); }
.ph-icon { display: inline-block; flex: none; vertical-align: -2px; overflow: visible; }
.ph-icon path { filter: none; }

/* ---------- caret + type-on ---------- */
.ph-caret {
  display: inline-block; width: .58em; height: 1.02em; margin-right: -.58em; vertical-align: -.16em;
  background: var(--phosphor-hi); box-shadow: var(--glow-box); border-radius: var(--radius-cell);
}
.ph-caret--done { animation: ph-blink 530ms steps(1, end) 3; }
.ph-caret--idle { animation: ph-blink var(--dur-blink, 1060ms) steps(1, end) infinite; }
.ph-typer__rest { visibility: hidden; }
@keyframes ph-blink { 50% { opacity: 0; } }

/* ---------- box-drawing frame: four strokes that draw themselves ---------- */
.ph-framed { position: relative; isolation: isolate; }
.ph-frame { position: absolute; inset: 0; pointer-events: none; z-index: 0; --ph-fc: var(--phosphor-dim); }
.ph-frame i { position: absolute; display: block; background: var(--ph-fc); box-shadow: var(--glow-line); transition: background-color var(--ph-decay) var(--ph-ease-decay); }
.ph-frame__t { left: 0; right: 0; top: 0; height: var(--ph-line); transform-origin: left; }
.ph-frame__r { top: 0; bottom: 0; right: 0; width: var(--ph-line); transform-origin: top; }
.ph-frame__b { left: 0; right: 0; bottom: 0; height: var(--ph-line); transform-origin: right; }
.ph-frame__l { top: 0; bottom: 0; left: 0; width: var(--ph-line); transform-origin: bottom; }
.ph-frame::before { content: ""; position: absolute; inset: 4px; border: var(--ph-line) solid var(--ph-fc); opacity: 0; transition: opacity var(--ph-decay) var(--ph-ease-decay); }
.is-pending > .ph-frame .ph-frame__t, .is-pending > .ph-frame .ph-frame__b { transform: scaleX(0); }
.is-pending > .ph-frame .ph-frame__r, .is-pending > .ph-frame .ph-frame__l { transform: scaleY(0); }
.is-pending > .ph-frame::before { opacity: 0 !important; }
.is-drawing > .ph-frame .ph-frame__t { animation: ph-drawx 140ms steps(14, end) backwards; }
.is-drawing > .ph-frame .ph-frame__r { animation: ph-drawy 100ms steps(8, end) 140ms backwards; }
.is-drawing > .ph-frame .ph-frame__b { animation: ph-drawx 140ms steps(14, end) 240ms backwards; }
.is-drawing > .ph-frame .ph-frame__l { animation: ph-drawy 100ms steps(8, end) 380ms backwards; }
.is-drawing > .ph-frame::before { transition-delay: 480ms; }
@keyframes ph-drawx { from { transform: scaleX(0); } }
@keyframes ph-drawy { from { transform: scaleY(0); } }
@keyframes ph-ignite { from { opacity: 0; } }
@keyframes ph-flash { 0% { opacity: .3; } 40% { opacity: 1; } 60% { opacity: .55; } 100% { opacity: 1; } }

/* floating surfaces: shade (offset ▒ dither) then face, both under the content */
.ph-floating { background: none !important; }
.ph-shade { position: absolute; inset: 10px -10px -10px 10px; z-index: -1; pointer-events: none; background: conic-gradient(at 1px 1px, var(--shade) 25%, transparent 0 50%, var(--shade) 0 75%, transparent 0) 0 0 / 2px 2px; }
.ph-face { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--ph-surface); }
.ph-pop > .ph-shade { inset: 8px -8px -8px 8px; }

/* the highlight bar: jumps instantly, the old spot decays (afterglow) */
.ph-bar { position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none; background: var(--phosphor); box-shadow: var(--glow-box); opacity: 0; }
.ph-bar.is-on { opacity: 1; }
.ph-bar--ghost { opacity: .9; transition: opacity var(--ph-decay) var(--ph-ease-decay); }
.ph-bar--ghost.is-fading { opacity: 0; }

/* ================================================================ Button */
.ph-btn {
  --b-fg: var(--phosphor); --b-bg: transparent; --b-hover-bg: var(--phosphor); --b-hover-fg: var(--on-phosphor); --b-press-bg: var(--phosphor-hi);
  position: relative; display: inline-flex; align-items: stretch; height: 36px; padding: 0; margin: 0;
  border: 0; background: none; color: var(--b-fg); cursor: pointer; text-decoration: none; white-space: nowrap;
  font: 400 13px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  -webkit-tap-highlight-color: transparent; user-select: none; vertical-align: middle;
}
.ph-btn::after { content: ""; position: absolute; inset: -2px -4px -4px -2px; z-index: -1; }
.ph-btn__in {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 8px;
  background: var(--b-bg); color: inherit;
  transition: background-color var(--ph-decay) var(--ph-ease-decay), color var(--ph-decay) var(--ph-ease-decay), box-shadow var(--ph-decay) var(--ph-ease-decay);
}
.ph-btn__br, .ph-btn__chev { display: inline-flex; align-items: center; font-family: var(--font-display); font-size: 1.9em; line-height: 1; transition: transform var(--ph-decay) var(--ph-ease-decay); }
.ph-btn__kbd { margin-left: 4px; padding-left: 8px; border-left: 1px solid currentColor; opacity: .75; letter-spacing: .04em; }
.ph-btn__spin { display: none; width: 1ch; }
.ph-btn.is-loading .ph-btn__spin { display: inline-block; }
.ph-btn.is-loading { cursor: progress; }
.ph-btn:hover .ph-btn__in, .ph-btn:focus-visible .ph-btn__in {
  background: var(--b-hover-bg); color: var(--b-hover-fg); text-shadow: none; box-shadow: var(--glow-box);
  transition-duration: var(--ph-ignite); transition-timing-function: steps(2, end);
}
.ph-btn:hover .ph-btn__br--l { transform: translateX(-3px); transition-duration: 120ms; }
.ph-btn:hover .ph-btn__br--r { transform: translateX(3px); transition-duration: 120ms; }
.ph-btn:active .ph-btn__in { background: var(--b-press-bg); color: var(--on-phosphor); transition-duration: 0s; }
.ph-btn:active .ph-btn__br--l { transform: translateX(2px); transition-duration: 40ms; }
.ph-btn:active .ph-btn__br--r { transform: translateX(-2px); transition-duration: 40ms; }
.ph-btn:focus-visible { outline: var(--ph-focus); outline-offset: 3px; }
/* primary: lit at rest; hover overdrives; press inverts back to an outline */
.ph-btn--primary { --b-bg: var(--phosphor); --b-fg: var(--phosphor); --b-hover-bg: var(--phosphor-hi); --b-press-bg: transparent; }
.ph-btn--primary .ph-btn__in { color: var(--on-phosphor); text-shadow: none; box-shadow: var(--glow-box); }
.ph-btn--primary:active .ph-btn__in { color: var(--phosphor-hi); box-shadow: inset 0 0 0 2px var(--phosphor-hi); text-shadow: var(--glow-text-hi); }
.ph-btn--danger { --b-fg: var(--alert); --b-hover-bg: var(--alert); --b-hover-fg: var(--on-alert); --b-press-bg: var(--alert); text-shadow: 0 0 6px var(--alert-glow); }
.ph-btn--danger:active .ph-btn__in { color: var(--on-alert); }
.ph-btn--ghost { --b-hover-bg: var(--selection); --b-hover-fg: var(--phosphor-hi); --b-press-bg: var(--phosphor); }
.ph-btn--ghost .ph-btn__chev { opacity: 0; transform: translateX(-6px); margin-right: -4px; color: var(--phosphor-hi); }
.ph-btn--ghost:hover .ph-btn__chev, .ph-btn--ghost:focus-visible .ph-btn__chev { opacity: 1; transform: none; transition-duration: 120ms; }
.ph-btn--ghost:hover .ph-btn__in { box-shadow: none; text-shadow: var(--glow-text-hi); }
.ph-btn--sm { height: 28px; font-size: 12px; }
.ph-btn--sm .ph-btn__in { padding: 0 6px; gap: 6px; }
.ph-btn--lg { height: 48px; font: 400 26px/1 var(--font-display); letter-spacing: .06em; }
.ph-btn--lg .ph-btn__in { padding: 0 14px; gap: 10px; }
.ph-btn--lg .ph-btn__br { font-size: 1.5em; }
.ph-btn--lg .ph-btn__kbd { font: 400 13px/1 var(--font-mono); }
.ph-btn--block { display: flex; width: 100%; }
.ph-btn--block .ph-btn__in { flex: 1; }
.ph-btn:disabled, .ph-btn[aria-disabled="true"] { cursor: not-allowed; opacity: .42; }
.ph-btn:disabled .ph-btn__in, .ph-btn:disabled:hover .ph-btn__in { background: var(--b-bg); color: inherit; box-shadow: none; }
.ph-btn--primary:disabled .ph-btn__in { color: var(--on-phosphor); }
.ph-btn:disabled .ph-btn__br { transform: none !important; }

/* ================================================================ IconButton */
.ph-iconbtn {
  position: relative; display: inline-flex; align-items: center; height: 32px; padding: 0; border: 0; background: none;
  color: var(--phosphor); cursor: pointer; vertical-align: middle; -webkit-tap-highlight-color: transparent;
}
.ph-iconbtn .ph-btn__br { font-size: 26px; }
.ph-iconbtn .ph-icon { box-sizing: content-box; padding: 6px; transition: background-color var(--ph-decay) var(--ph-ease-decay), color var(--ph-decay) var(--ph-ease-decay); }
.ph-iconbtn:hover .ph-icon { background: var(--phosphor); color: var(--on-phosphor); box-shadow: var(--glow-box); transition-duration: var(--ph-ignite); }
.ph-iconbtn:hover .ph-btn__br--l { transform: translateX(-2px); transition-duration: 120ms; }
.ph-iconbtn:hover .ph-btn__br--r { transform: translateX(2px); transition-duration: 120ms; }
.ph-iconbtn:active .ph-icon { background: var(--phosphor-hi); transition-duration: 0s; }
.ph-iconbtn[aria-pressed="true"] .ph-icon { background: var(--phosphor); color: var(--on-phosphor); box-shadow: var(--glow-box); }
.ph-iconbtn[aria-pressed="true"]:hover .ph-icon { background: var(--phosphor-hi); }
.ph-iconbtn--ghost .ph-icon { padding: 7px; }
.ph-iconbtn--sm { height: 26px; }
.ph-iconbtn--sm .ph-icon { padding: 4px; }
.ph-iconbtn--sm .ph-btn__br { font-size: 22px; }
.ph-iconbtn:disabled { opacity: .42; cursor: not-allowed; }
.ph-iconbtn:disabled .ph-icon { background: none !important; color: inherit !important; box-shadow: none !important; }
.ph-iconbtn__count { position: absolute; top: -6px; right: -8px; min-width: 18px; height: 16px; padding: 0 3px; background: var(--phosphor-hi); color: var(--on-phosphor); text-shadow: none; font: 400 15px/16px var(--font-display); text-align: center; }

/* ================================================================ Choices */
.ph-choice { position: relative; display: inline-flex; align-items: flex-start; gap: 10px; padding: 4px 6px; margin: -4px -6px; cursor: pointer; color: var(--phosphor); transition: background-color var(--ph-decay) var(--ph-ease-decay); -webkit-tap-highlight-color: transparent; }
.ph-choice:hover { background: var(--selection); transition-duration: var(--ph-ignite); }
.ph-choice__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.ph-choice__box { display: inline-flex; flex: none; white-space: pre; font-family: var(--font-mono); color: var(--phosphor); }
.ph-choice__cell { position: relative; display: inline-block; width: 1ch; text-align: center; }
.ph-choice__cell::before { content: "\00a0"; }
.ph-choice__mark, .ph-choice__dash { position: absolute; inset: 0; opacity: 0; color: var(--phosphor-hi); text-shadow: var(--glow-text-hi); transition: opacity var(--ph-decay) var(--ph-ease-decay); }
.ph-choice.is-checked .ph-choice__mark { opacity: 1; transition-duration: var(--ph-ignite); transition-timing-function: steps(2, end); }
.ph-choice.is-mixed .ph-choice__mark { opacity: 0; }
.ph-choice.is-mixed .ph-choice__dash { opacity: 1; }
.ph-choice.is-igniting .ph-choice__box { animation: ph-flash 220ms steps(3, end); }
.ph-choice__input:focus-visible + .ph-choice__box { outline: var(--ph-focus); outline-offset: 2px; }
.ph-choice__text { display: flex; flex-direction: column; min-width: 0; }
.ph-choice__hint { font-size: 13px; line-height: 18px; color: var(--phosphor-dim); }
.ph-choice.is-disabled { opacity: .42; cursor: not-allowed; }
.ph-choice.is-disabled:hover { background: none; }
.ph-choice--toggle { display: flex; align-items: baseline; }
.ph-toggle__leader { flex: 1; min-width: 16px; align-self: flex-start; height: 0; border-bottom: 2px dotted var(--phosphor-faint); margin-top: 15px; }
.ph-toggle__state { flex: none; min-width: 3ch; text-align: right; white-space: pre; color: var(--phosphor-dim); letter-spacing: .08em; }
.ph-choice--toggle.is-checked .ph-toggle__state { color: var(--phosphor-hi); text-shadow: var(--glow-text-hi); }
.ph-radiogroup { display: flex; flex-direction: column; gap: 12px; border: 0; margin: 0; padding: 0; }
.ph-radiogroup--inline { flex-direction: row; flex-wrap: wrap; gap: 12px 24px; }
.ph-radiogroup__label { width: 100%; }

/* ================================================================ TextField + Select trigger */
.ph-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ph-field__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-height: 16px; }
.ph-field__count { font-size: 12px; color: var(--phosphor-dim); white-space: pre; }
.ph-field__box, .ph-select__trigger {
  position: relative; display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 12px;
  background: var(--screen-sunk); border: var(--ph-line) solid var(--phosphor-dim); color: var(--phosphor-hi);
  transition: border-color var(--ph-decay) var(--ph-ease-decay), box-shadow var(--ph-decay) var(--ph-ease-decay);
}
.ph-field__box:hover, .ph-select__trigger:hover { border-color: var(--phosphor); transition-duration: var(--ph-ignite); }
.ph-field__box:focus-within, .ph-select__trigger[aria-expanded="true"], .ph-select__trigger:focus-visible {
  border-color: var(--phosphor); outline: none;
  box-shadow: inset 0 0 0 2px var(--screen-sunk), inset 0 0 0 4px var(--phosphor), var(--glow-line);
  transition-duration: var(--ph-ignite);
}
.ph-field__input {
  flex: 1; min-width: 0; margin: 0; padding: 9px 0; border: 0; outline: 0; background: transparent;
  color: var(--phosphor-hi); font: 400 15px/22px var(--font-mono); text-shadow: var(--glow-text);
  caret-color: var(--phosphor-hi); caret-shape: block;
}
textarea.ph-field__input { resize: vertical; min-height: 66px; }
.ph-field__input::placeholder { color: var(--phosphor-dim); opacity: 1; }
.ph-field__prefix, .ph-field__suffix { flex: none; color: var(--phosphor-dim); }
.ph-field__msg { min-height: 18px; font-size: 13px; line-height: 18px; color: var(--phosphor-dim); }
.ph-field__err { color: var(--alert); letter-spacing: .06em; }
.ph-field.is-error .ph-field__box { border-color: var(--alert); }
.ph-field.is-error .ph-field__box:focus-within { box-shadow: inset 0 0 0 2px var(--screen-sunk), inset 0 0 0 4px var(--alert); }
.ph-field.is-error .ph-field__msg { color: var(--alert); text-shadow: 0 0 6px var(--alert-glow); }
.ph-field.is-disabled { opacity: .42; }
.is-glitch { animation: ph-glitch 240ms steps(1, end); }
@keyframes ph-glitch { 0% { transform: translateX(4px); } 25% { transform: translateX(-3px); } 50% { transform: translateX(2px); } 75% { transform: none; } }
.ph-select__trigger { width: 100%; cursor: pointer; text-align: left; font: 400 15px/22px var(--font-mono); text-shadow: var(--glow-text); }
.ph-select__prefix { color: var(--phosphor-dim); }
.ph-select__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: pre; }
.ph-select__chev { color: var(--phosphor-dim); transition: transform 120ms steps(2, end); }
.ph-select__trigger[aria-expanded="true"] .ph-select__chev { transform: scaleY(-1); }
.ph-select__trigger:disabled { opacity: .42; cursor: not-allowed; }

/* ================================================================ Menu + popover */
.ph-dropdown { position: relative; display: inline-block; }
.ph-dropdown--block { display: block; }
.ph-pop {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 50; min-width: 100%; width: max-content;
  max-width: min(380px, calc(100vw - 32px)); padding: 4px; background: var(--screen-raised); --ph-surface: var(--screen-raised);
}
.ph-pop > .ph-frame { --ph-fc: var(--phosphor); }
.ph-pop--end { left: auto; right: 0; }
.ph-pop.is-opening > .ph-frame .ph-frame__t { animation: ph-drawx 90ms steps(8, end) backwards; }
.ph-pop.is-opening > .ph-frame .ph-frame__r { animation: ph-drawy 70ms steps(5, end) 90ms backwards; }
.ph-pop.is-opening > .ph-frame .ph-frame__b { animation: ph-drawx 90ms steps(8, end) 160ms backwards; }
.ph-pop.is-opening > .ph-frame .ph-frame__l { animation: ph-drawy 70ms steps(5, end) 250ms backwards; }
.ph-pop.is-opening > .ph-menu { animation: ph-ignite 80ms steps(2, end) 100ms backwards; }
.ph-pop.is-opening > .ph-shade { animation: ph-ignite 60ms steps(2, end) 300ms backwards; }
.ph-menu { position: relative; display: flex; flex-direction: column; padding: 4px; max-height: 320px; overflow: auto; outline: none; isolation: isolate; scrollbar-width: thin; }
.ph-menu:focus-visible { outline: none; }
.ph-menu:focus-visible .ph-bar.is-on { box-shadow: var(--glow-box), 0 0 0 1px var(--phosphor-hi); }
.ph-menu__item {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 5px 10px;
  color: var(--phosphor); cursor: pointer; white-space: nowrap; user-select: none;
  transition: color var(--ph-decay) var(--ph-ease-decay);
}
.ph-menu__item.is-active { color: var(--on-phosphor); text-shadow: none; transition-duration: 0s; }
.ph-menu__label { white-space: pre; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ph-menu__mark { flex: none; width: 1ch; color: var(--phosphor-hi); }
.ph-menu__item.is-active .ph-menu__mark { color: inherit; }
.ph-menu__key { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ph-menu__hint { margin-left: auto; padding-left: 24px; color: var(--phosphor-dim); font-size: 13px; }
.ph-menu__item.is-active .ph-menu__hint { color: inherit; opacity: .8; }
.ph-menu__item.is-danger { color: var(--alert); }
.ph-menu__item.is-danger.is-active { color: var(--on-phosphor); }
.ph-menu__item.is-disabled { opacity: .42; cursor: not-allowed; }
.ph-menu__item.is-chosen { animation: ph-chosen 240ms steps(1, end); }
@keyframes ph-chosen { 25% { opacity: .2; } 50% { opacity: 1; } 75% { opacity: .2; } }
.ph-menu__sep { flex: none; height: 0; margin: 6px 6px; border-top: 2px dashed var(--phosphor-faint); }
.ph-menu__empty { padding: 10px; color: var(--phosphor-dim); }
.ph-menu--static { border: var(--ph-line) solid var(--phosphor-dim); background: var(--screen-raised); }

/* ================================================================ Tabs + Segmented */
.ph-tabs { min-width: 0; }
.ph-tabs__list { position: relative; display: flex; gap: 2px; isolation: isolate; overflow-x: auto; scrollbar-width: none; border-bottom: var(--ph-line) solid var(--phosphor-faint); }
.ph-tabs__list::-webkit-scrollbar { display: none; }
.ph-tabs__tab, .ph-seg__opt {
  position: relative; display: inline-flex; align-items: baseline; gap: 6px; padding: 9px 14px; margin: 0; border: 0; background: none;
  color: var(--phosphor-dim); font: 400 13px/18px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; cursor: pointer;
  transition: color var(--ph-decay) var(--ph-ease-decay);
}
.ph-tabs__tab:hover, .ph-seg__opt:hover { color: var(--phosphor-hi); transition-duration: var(--ph-ignite); }
.ph-tabs__tab.is-active, .ph-seg__opt.is-active { color: var(--on-phosphor); text-shadow: none; transition-duration: 0s; }
.ph-tabs__tab:focus-visible, .ph-seg__opt:focus-visible { outline: var(--ph-focus); outline-offset: -4px; }
.ph-tabs__num { opacity: .75; }
.ph-tabs__count { opacity: .8; }
.ph-tabs__panel { padding-top: 18px; outline: none; }
.ph-tabs__panel.is-entering { animation: ph-ignite 120ms steps(2, end) backwards; }
.ph-seg { display: inline-flex; align-items: center; gap: 2px; color: var(--phosphor); vertical-align: middle; max-width: 100%; }
.ph-seg__br { font: 400 30px/1 var(--font-display); }
.ph-seg__track { position: relative; display: inline-flex; align-items: center; isolation: isolate; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ph-seg__opt { padding: 7px 10px; gap: 6px; align-items: center; }
.ph-seg__sep { color: var(--phosphor-faint); padding: 0 1px; }
.ph-seg--sm .ph-seg__opt { padding: 4px 7px; font-size: 12px; }
.ph-seg--sm .ph-seg__br { font-size: 24px; }

/* ================================================================ Slider */
.ph-slider { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ph-slider__out { font: 400 24px/16px var(--font-display); color: var(--phosphor-hi); text-shadow: var(--glow-text-hi); white-space: pre; }
.ph-slider__track { position: relative; height: 26px; border: var(--ph-line) solid var(--phosphor-dim); background: var(--screen-sunk); transition: border-color var(--ph-decay) var(--ph-ease-decay); }
.ph-slider__track:hover, .ph-slider__track:focus-within { border-color: var(--phosphor); transition-duration: var(--ph-ignite); }
.ph-slider__track:has(.ph-slider__input:focus-visible) { outline: var(--ph-focus); outline-offset: 3px; }
.ph-slider__empty { position: absolute; inset: 3px; --ph-dc: var(--phosphor-faint); background: conic-gradient(at 1px 1px, var(--ph-dc, var(--phosphor)) 25%, transparent 0) 0 0 / 2px 2px; }
.ph-slider__fill { position: absolute; inset: 3px; background: repeating-linear-gradient(90deg, var(--phosphor) 0 6px, transparent 6px 8px); }
.ph-slider__thumb { position: absolute; top: -6px; left: 0; width: 10px; height: 34px; background: var(--phosphor-hi); box-shadow: var(--glow-box); pointer-events: none; }
.ph-slider__thumb.is-flash { animation: ph-flash 260ms steps(3, end); }
.ph-slider__input { position: absolute; inset: -8px 0; width: 100%; height: calc(100% + 16px); margin: 0; opacity: 0; cursor: ew-resize; }
.ph-slider__ticks { display: flex; justify-content: space-between; font-size: 12px; color: var(--phosphor-dim); }
.ph-slider.is-disabled { opacity: .42; }

/* ================================================================ Card */
.ph-card {
  position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 0; padding: 20px 20px 18px;
  background: var(--screen-raised); --ph-surface: var(--screen-raised); color: var(--phosphor);
  font: inherit; text-align: left; text-decoration: none; border: 0; text-shadow: var(--glow-text);
}
.ph-card > .ph-frame { --ph-fc: var(--phosphor-faint); }
.ph-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ph-card__title { margin: 0; font: 400 26px/26px var(--font-display); letter-spacing: .02em; color: var(--phosphor-hi); text-shadow: var(--glow-text-hi); }
.ph-card__chev { display: none; margin-right: 6px; }
.ph-card__meta { flex: none; font-size: 13px; color: var(--phosphor-dim); }
.ph-card__body { min-width: 0; }
.ph-card__body > p { margin: 0; }
.ph-card__foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 12px; border-top: 2px dashed var(--phosphor-faint); }
.ph-card--link { cursor: pointer; }
.ph-card--link .ph-card__chev { display: inline-block; opacity: 0; transform: translateX(-6px); transition: opacity var(--ph-decay) var(--ph-ease-decay), transform 160ms steps(2, end); }
.ph-card--link:hover > .ph-frame, .ph-card--link:focus-visible > .ph-frame { --ph-fc: var(--phosphor); }
.ph-card--link:hover > .ph-frame i { transition-duration: var(--ph-ignite); }
.ph-card--link:hover .ph-card__chev, .ph-card--link:focus-visible .ph-card__chev { opacity: 1; transform: none; transition-duration: 120ms; }
.ph-card--inset { background: var(--screen-sunk); --ph-surface: var(--screen-sunk); }

/* ================================================================ Badge, Tag, Kbd */
.ph-badge {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; vertical-align: middle; white-space: nowrap;
  font: 400 12px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
}
.ph-badge--outline { color: var(--phosphor); box-shadow: inset 0 0 0 1.5px var(--phosphor-dim); }
.ph-badge--solid { background: var(--phosphor); color: var(--on-phosphor); text-shadow: none; box-shadow: var(--glow-box); }
.ph-badge--hi { color: var(--phosphor-hi); box-shadow: inset 0 0 0 1.5px var(--phosphor); text-shadow: var(--glow-text-hi); }
.ph-badge--dim { color: var(--phosphor-dim); box-shadow: inset 0 0 0 1.5px var(--phosphor-faint); text-shadow: none; }
.ph-badge--alert { background: var(--alert); color: var(--on-alert); text-shadow: none; }
.ph-badge--alert-outline { color: var(--alert); box-shadow: inset 0 0 0 1.5px var(--alert); text-shadow: 0 0 6px var(--alert-glow); }
.ph-badge__dot { width: 6px; height: 6px; flex: none; background: currentColor; border-radius: var(--radius-cell); }
.ph-badge__dot.is-live { animation: ph-blink var(--dur-blink, 1060ms) steps(1, end) infinite; }
.ph-tag {
  display: inline-flex; align-items: center; gap: 2px; height: 26px; padding: 0 4px 0 8px; vertical-align: middle;
  color: var(--phosphor); font-size: 13px; box-shadow: inset 0 0 0 1.5px var(--phosphor-faint);
  transition: opacity 220ms var(--ph-ease-decay), transform 220ms steps(3, end);
}
.ph-tag:not(:has(.ph-tag__x)) { padding-right: 8px; }
.ph-tag__hash { color: var(--phosphor-dim); }
.ph-tag__x { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 4px; padding: 0; border: 0; background: none; color: var(--phosphor-dim); cursor: pointer; }
.ph-tag__x .ph-icon { width: 10px; height: 10px; }
.ph-tag__x:hover { background: var(--alert); color: var(--on-alert); }
.ph-tag.is-removing { opacity: 0; transform: scaleX(.2); }
.ph-kbd {
  display: inline-block; min-width: 22px; padding: 1px 5px 3px; text-align: center; vertical-align: middle;
  font: 400 12px/16px var(--font-mono); letter-spacing: .04em; color: var(--phosphor);
  box-shadow: inset 0 0 0 1.5px var(--phosphor-dim), inset 0 -3px 0 var(--phosphor-faint);
}

/* ================================================================ Avatar */
.ph-avatar {
  position: relative; display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; vertical-align: middle;
  background: var(--screen-sunk); color: var(--phosphor); box-shadow: inset 0 0 0 2px var(--phosphor-dim);
}
.ph-avatar--sm { width: 26px; height: 26px; }
.ph-avatar--lg { width: 56px; height: 56px; }
.ph-avatar--xl { width: 84px; height: 84px; }
.ph-avatar__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ph-avatar__on { fill: var(--phosphor); }
.ph-avatar__dim { fill: var(--phosphor-dim); }
.ph-avatar__ini { font: 400 22px/1 var(--font-display); color: var(--phosphor-hi); letter-spacing: .04em; }
.ph-avatar--sm .ph-avatar__ini { font-size: 16px; }
.ph-avatar--lg .ph-avatar__ini { font-size: 32px; }
.ph-avatar--xl .ph-avatar__ini { font-size: 48px; }
.ph-avatar__status { position: absolute; right: -4px; bottom: -4px; width: 10px; height: 10px; background: var(--phosphor-hi); box-shadow: 0 0 0 2px var(--ph-surface), var(--glow-box); }
.ph-avatar__status--away { background: conic-gradient(at 1px 1px, var(--ph-dc, var(--phosphor)) 25%, transparent 0 50%, var(--ph-dc, var(--phosphor)) 0 75%, transparent 0) 0 0 / 2px 2px; background-color: var(--ph-surface); }
.ph-avatar__status--busy { background: var(--alert); }
.ph-avatar__status--offline { background: var(--ph-surface); box-shadow: 0 0 0 2px var(--ph-surface), inset 0 0 0 2px var(--phosphor-dim); }
.ph-avatars { display: inline-flex; align-items: center; }
.ph-avatars > .ph-avatar { box-shadow: inset 0 0 0 2px var(--phosphor-dim), 0 0 0 2px var(--ph-surface); transition: transform 160ms steps(2, end); }
.ph-avatars > .ph-avatar + .ph-avatar { margin-left: -6px; }
.ph-avatars > .ph-avatar:hover { transform: translateY(-3px); z-index: 1; }
.ph-avatars > .ph-avatar::after { content: ""; position: absolute; inset: 0 0 -4px 0; }
.ph-avatar--more { font: 400 16px/1 var(--font-display); color: var(--phosphor-hi); }

/* ================================================================ Tooltip */
.ph-tipwrap { position: relative; display: inline-flex; }
.ph-tip {
  position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 60; padding: 4px 8px; transform: translateX(calc(-50% + var(--ph-tip-dx, 0px)));
  background: var(--phosphor); color: var(--on-phosphor); text-shadow: none; box-shadow: var(--glow-box);
  font: 400 13px/18px var(--font-mono); white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity var(--ph-decay) var(--ph-ease-decay);
}
.ph-tip.is-on { opacity: 1; transition-duration: var(--ph-ignite); transition-timing-function: steps(2, end); }
.ph-tip::after { content: ""; position: absolute; left: calc(50% - 1px - var(--ph-tip-dx, 0px)); top: 100%; width: 2px; height: 8px; background: var(--phosphor); }
.ph-tip--bottom { bottom: auto; top: calc(100% + 10px); }
.ph-tip--bottom::after { top: auto; bottom: 100%; }
.ph-tip .ph-caret { background: var(--on-phosphor); box-shadow: none; }

/* ================================================================ Toast */
.ph-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 90; display: flex; flex-direction: column; gap: 14px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.ph-toast {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start;
  padding: 14px 12px 16px 14px; pointer-events: auto; background: var(--screen-raised); --ph-surface: var(--screen-raised);
  animation: ph-toast-in 280ms var(--ph-ease-power) backwards;
  transition: opacity 200ms linear, transform 220ms var(--ph-ease-power); transform-origin: 50% 50%;
}
.ph-toast > .ph-frame { --ph-fc: var(--phosphor); }
.ph-toast > .ph-frame .ph-frame__t { animation: ph-drawx 120ms steps(12, end) 60ms backwards; }
.ph-toast > .ph-frame .ph-frame__r { animation: ph-drawy 60ms steps(4, end) 180ms backwards; }
.ph-toast > .ph-frame .ph-frame__b { animation: ph-drawx 120ms steps(12, end) 240ms backwards; }
.ph-toast > .ph-frame .ph-frame__l { animation: ph-drawy 60ms steps(4, end) 360ms backwards; }
@keyframes ph-toast-in { 0% { opacity: 0; transform: translateY(10px); } 30% { opacity: 1; } 100% { transform: none; } }
.ph-toast.is-leaving { opacity: 0; transform: scaleY(.03); }
.ph-toast__tag { white-space: pre; color: var(--phosphor-hi); text-shadow: var(--glow-text-hi); }
.ph-toast--alert > .ph-frame { --ph-fc: var(--alert); }
.ph-toast--alert .ph-toast__tag { color: var(--alert); text-shadow: 0 0 6px var(--alert-glow); }
.ph-toast__title { color: var(--phosphor-hi); text-shadow: var(--glow-text-hi); }
.ph-toast__msg { margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--phosphor-dim); }
.ph-toast__act { margin: 6px 0 0 -10px; }
.ph-toast__x { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; color: var(--phosphor-dim); cursor: pointer; }
.ph-toast__x:hover { background: var(--phosphor); color: var(--on-phosphor); }
.ph-toast__life { position: absolute; left: 6px; right: 6px; bottom: 6px; height: 2px; background: repeating-linear-gradient(90deg, var(--phosphor-dim) 0 2px, transparent 2px 4px); transform-origin: left; transform: scaleX(0); animation: ph-life 4800ms linear backwards; }
@keyframes ph-life { from { transform: scaleX(1); } }
.ph-toast.is-held .ph-toast__life { animation-play-state: paused; }

/* ================================================================ Modal: CRT power-on */
.ph-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px 16px; }
.ph-modal[hidden] { display: none; }
.ph-modal__scrim { position: absolute; inset: 0; background: var(--screen); opacity: .86; }
.ph-modal__scrim::after { content: ""; position: absolute; inset: 0; background: conic-gradient(at 1px 1px, var(--shade) 25%, transparent 0) 0 0 / 2px 2px; }
.ph-modal__dlg {
  position: relative; display: flex; flex-direction: column; width: min(520px, 100%); max-height: calc(100vh - 40px);
  padding: 30px 24px 22px; background: var(--screen-raised); --ph-surface: var(--screen-raised); outline: none;
}
.ph-modal__dlg--lg { width: min(760px, 100%); }
.ph-modal__dlg > .ph-frame { --ph-fc: var(--phosphor); }
.ph-modal__dlg > .ph-frame::before { opacity: 1; }
.ph-modal__dlg::before { content: ""; position: absolute; inset: 0; z-index: 5; background: var(--phosphor-hi); opacity: 0; pointer-events: none; }
.ph-modal__bar { position: absolute; top: -10px; left: 18px; right: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 22px; z-index: 2; }
.ph-modal__title { margin: 0; padding: 0 10px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: var(--phosphor); color: var(--on-phosphor); text-shadow: none; font: 400 24px/22px var(--font-display); letter-spacing: .05em; text-transform: uppercase; box-shadow: var(--glow-box); }
.ph-modal__title .ph-caret { background: var(--on-phosphor); box-shadow: none; }
.ph-modal__x { display: inline-flex; align-items: center; gap: 0; height: 22px; padding: 0 4px; border: 0; background: var(--ph-surface); color: var(--phosphor); font: 400 22px/1 var(--font-display); cursor: pointer; }
.ph-modal .ph-modal__x .ph-icon { padding: 3px; box-sizing: content-box; }
.ph-modal__x:hover .ph-icon { background: var(--phosphor); color: var(--on-phosphor); }
.ph-modal__body { min-height: 0; overflow: auto; color: var(--phosphor); }
.ph-modal__body > p { margin: 0 0 12px; }
.ph-modal__actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px 14px; padding-top: 22px; }
.ph-modal__actions:empty { display: none; }
.ph-modal__dlg--alert > .ph-frame { --ph-fc: var(--alert); }
.ph-modal__dlg--alert .ph-modal__title { background: var(--alert); color: var(--on-alert); }
.ph-modal.is-opening .ph-modal__scrim { animation: ph-ignite 160ms linear backwards; }
.ph-modal.is-opening .ph-modal__dlg { animation: ph-power-on var(--dur-power, 300ms) var(--ph-ease-power) 60ms backwards; }
.ph-modal.is-opening .ph-modal__dlg::before { animation: ph-beam 420ms linear 60ms backwards; }
.ph-modal.is-opening .ph-modal__dlg > .ph-shade { animation: ph-ignite 60ms steps(2, end) 360ms backwards; }
.ph-modal.is-closing .ph-modal__scrim { opacity: 0; transition: opacity 220ms linear; }
.ph-modal.is-closing .ph-modal__dlg { animation: ph-power-off 220ms cubic-bezier(.6, 0, .9, .4) forwards; }
.ph-modal.is-closing .ph-modal__dlg::before { animation: ph-beam-off 220ms linear forwards; }
.ph-modal.is-closing .ph-modal__dlg > .ph-shade { opacity: 0; }
@keyframes ph-power-on { 0% { transform: scale(.04, .006); opacity: 0; } 10% { opacity: 1; transform: scale(.04, .006); } 45% { transform: scale(1, .006); } 100% { transform: none; } }
@keyframes ph-beam { 0%, 45% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ph-power-off { 0% { transform: none; } 55% { transform: scale(1, .006); } 100% { transform: scale(0, .006); opacity: .3; } }
@keyframes ph-beam-off { 0% { opacity: 0; } 40%, 100% { opacity: 1; } }

/* ================================================================ Progress: ▓▒░ cells */
.ph-progress { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ph-progress__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ph-progress__pct { font: 400 24px/16px var(--font-display); color: var(--phosphor-hi); text-shadow: var(--glow-text-hi); white-space: pre; }
.ph-progress__bar { display: flex; align-items: center; gap: 4px; min-width: 0; color: var(--phosphor); }
.ph-progress__br { font: 400 30px/1 var(--font-display); margin-top: -2px; }
.ph-progress__cells { display: flex; flex: 1; gap: 2px; min-width: 0; height: 16px; overflow: hidden; }
.ph-cell { flex: none; width: 8px; height: 100%; --ph-dc: var(--phosphor-faint); background: conic-gradient(at 1px 1px, var(--ph-dc, var(--phosphor)) 25%, transparent 0 50%, var(--ph-dc, var(--phosphor)) 0 75%, transparent 0) 0 0 / 2px 2px; }
.ph-cell.is-25 { --ph-dc: var(--phosphor); background: conic-gradient(at 1px 1px, var(--ph-dc, var(--phosphor)) 25%, transparent 0) 0 0 / 2px 2px; }
.ph-cell.is-50 { --ph-dc: var(--phosphor); background: conic-gradient(at 1px 1px, var(--ph-dc, var(--phosphor)) 25%, transparent 0 50%, var(--ph-dc, var(--phosphor)) 0 75%, transparent 0) 0 0 / 2px 2px; }
.ph-cell.is-75 { --ph-dc: var(--phosphor); background: conic-gradient(at 1px 1px, transparent 25%, var(--ph-dc, var(--phosphor)) 0) 0 0 / 2px 2px; }
.ph-cell.is-100 { background: var(--phosphor); }
.ph-progress.is-done .ph-cell.is-100 { background: var(--phosphor-hi); }
.ph-progress.is-done .ph-progress__cells { animation: ph-flash 420ms steps(4, end); }
.ph-progress__hint { font-size: 13px; line-height: 18px; color: var(--phosphor-dim); }
.ph-progress--sm .ph-progress__cells { height: 10px; }
.ph-progress--sm .ph-cell { width: 6px; }
.ph-progress--sm .ph-progress__br { font-size: 22px; }

/* ================================================================ Spinner */
.ph-spinner { display: inline-flex; align-items: baseline; gap: 8px; white-space: pre; }
.ph-spinner__glyph { display: inline-block; min-width: 1ch; color: var(--phosphor-hi); text-shadow: var(--glow-text-hi); }
.ph-spinner__label { color: var(--phosphor); }
.ph-spinner.is-stopped .ph-spinner__glyph { color: var(--phosphor); }

/* ================================================================ Pane */
.ph-pane {
  position: relative; display: flex; flex-direction: column; min-width: 0; padding: 24px 20px 20px;
  background: var(--screen-raised); --ph-surface: var(--screen-raised); color: var(--phosphor);
}
.ph-pane > .ph-frame { --ph-fc: var(--phosphor-dim); }
.ph-pane.is-focus > .ph-frame, .ph-pane.is-double > .ph-frame { --ph-fc: var(--phosphor); }
.ph-pane.is-focus > .ph-frame i { transition-duration: var(--ph-ignite); }
.ph-pane.is-focus > .ph-frame::before, .ph-pane.is-double > .ph-frame::before { opacity: 1; transition-duration: 120ms; }
.ph-pane--alert > .ph-frame, .ph-pane--alert.is-focus > .ph-frame { --ph-fc: var(--alert); }
.ph-pane__bar { position: absolute; top: -10px; left: 14px; right: 14px; z-index: 2; display: flex; align-items: center; gap: 8px; height: 22px; pointer-events: none; }
.ph-pane__bar > * { pointer-events: auto; }
.ph-pane .ph-pane__icon { box-sizing: content-box; padding: 4px 6px; background: var(--ph-surface); color: var(--phosphor-hi); }
.ph-pane__title {
  min-width: 0; margin: 0; padding: 0 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  background: var(--ph-surface); border-left: 2px solid var(--ph-tee, var(--phosphor-dim)); border-right: 2px solid var(--ph-tee, var(--phosphor-dim));
  font: 400 24px/20px var(--font-display); letter-spacing: .04em; text-transform: uppercase; color: var(--phosphor-hi); text-shadow: var(--glow-text-hi);
}
.ph-pane.is-focus .ph-pane__title, .ph-pane.is-double .ph-pane__title { --ph-tee: var(--phosphor); }
.ph-pane__acts { display: flex; align-items: center; gap: 6px; margin-left: auto; padding: 0 6px; background: var(--ph-surface); }
.ph-pane__ctl { display: flex; gap: 2px; margin-left: auto; background: var(--ph-surface); padding: 0 2px; }
.ph-pane__acts + .ph-pane__ctl { margin-left: 0; }
.ph-pane__ctl:empty { display: none; }
.ph-pane__btn { height: 22px; padding: 0 3px; border: 0; background: none; color: var(--phosphor); font: 400 14px/22px var(--font-mono); cursor: pointer; white-space: pre; }
.ph-pane__btn-g { display: inline-block; min-width: 1ch; }
.ph-pane__btn:hover .ph-pane__btn-g { background: var(--phosphor); color: var(--on-phosphor); text-shadow: none; }
.ph-pane__body { position: relative; flex: 1; min-width: 0; }
.ph-pane__body--flush { margin: 0 -20px -20px; }
.ph-pane__status {
  position: absolute; right: 16px; bottom: -9px; z-index: 2; max-width: calc(100% - 32px); padding: 0 8px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: var(--ph-surface);
  font-size: 12px; line-height: 18px; letter-spacing: .08em; text-transform: uppercase; color: var(--phosphor-dim);
}
.ph-pane.is-collapsed { padding-bottom: 10px; }
.ph-pane.is-closing { opacity: 0; transform: scaleY(.02); transition: opacity 200ms linear 40ms, transform 220ms var(--ph-ease-power); }
.ph-pane.is-pending > :not(.ph-frame) { opacity: 0; }
.ph-pane.is-drawing > :not(.ph-frame) { animation: ph-ignite 90ms steps(2, end) 460ms backwards; }

/* ================================================================ Prompt */
.ph-prompt {
  --ph-prompt-h: 240px; position: relative; display: flex; flex-direction: column; min-width: 0; padding: 12px 14px;
  background: var(--screen-sunk); --ph-surface: var(--screen-sunk); color: var(--phosphor);
  font: 400 14px/21px var(--font-mono); cursor: text;
}
.ph-prompt__log { max-height: var(--ph-prompt-h); overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; scrollbar-width: thin; }
.ph-prompt__out { min-height: 21px; }
.ph-prompt__out.is-dim { color: var(--phosphor-dim); }
.ph-prompt__out.is-hi { color: var(--phosphor-hi); text-shadow: var(--glow-text-hi); }
.ph-prompt__out.is-err { color: var(--alert); text-shadow: 0 0 6px var(--alert-glow); }
.ph-prompt__out .ph-caret { height: 1em; vertical-align: -.12em; }
.ph-prompt__tag { color: var(--phosphor-hi); text-shadow: var(--glow-text-hi); white-space: pre; }
.ph-prompt__tag.is-err { color: var(--alert); }
.ph-prompt__spin { display: inline-block; min-width: 6ch; color: var(--phosphor-hi); white-space: pre; }
.ph-prompt__line { display: flex; align-items: baseline; gap: 1ch; margin: 0; min-width: 0; }
.ph-prompt__ps1 { flex: none; color: var(--phosphor-hi); text-shadow: var(--glow-text-hi); white-space: nowrap; }
.ph-prompt__field { position: relative; flex: 1; min-width: 0; height: 21px; overflow: hidden; }
.ph-prompt__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; color: transparent; caret-color: transparent; font: inherit; text-shadow: none; }
.ph-prompt__input::selection { background: var(--selection); color: transparent; }
.ph-prompt__mirror { position: absolute; left: 0; top: 0; white-space: pre; pointer-events: none; color: var(--phosphor); }
.ph-prompt__caret { display: inline-block; width: auto; min-width: 1ch; height: auto; margin: 0; vertical-align: baseline; border-radius: 0; background: transparent; box-shadow: inset 0 0 0 1.5px var(--phosphor-dim); color: inherit; }
.ph-prompt.is-focus .ph-prompt__caret { background: var(--phosphor-hi); color: var(--on-phosphor); text-shadow: none; box-shadow: var(--glow-box); animation: ph-blink var(--dur-blink, 1060ms) steps(1, end) infinite 530ms; }
.ph-prompt__ghost { color: var(--phosphor-dim); }
.ph-prompt__busy { flex: none; color: var(--phosphor-hi); }
.ph-prompt.is-busy .ph-prompt__field { opacity: .45; }
.ph-prompt:focus-within { outline: none; }
.ph-prompt:has(.ph-prompt__input:focus-visible) { box-shadow: inset 0 0 0 1.5px var(--phosphor-dim); }

/* ================================================================ AsciiChart */
.ph-chart { margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; outline: none; }
.ph-chart:focus-visible { outline: var(--ph-focus); outline-offset: 6px; }
.ph-chart__head { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; }
.ph-chart__readout { font-size: 13px; line-height: 18px; color: var(--phosphor-hi); white-space: pre; min-height: 18px; }
.ph-chart__grid { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; }
.ph-chart__axis { position: relative; min-width: 5ch; font-size: 12px; color: var(--phosphor-dim); }
.ph-chart__axis span { position: absolute; right: 0; transform: translateY(-50%); line-height: 12px; white-space: pre; }
.ph-chart__plot { position: relative; min-width: 0; overflow: hidden; cursor: crosshair; }
.ph-chart__svg { display: block; }
.ph-chart__dot { fill: var(--phosphor-faint); }
.ph-chart__dith { fill: var(--phosphor); }
.ph-chart__area { opacity: .9; }
.ph-chart__line { fill: none; stroke: var(--phosphor); stroke-width: 2; stroke-linejoin: round; stroke-linecap: square; }
.ph-chart__line.is-dash { stroke: var(--phosphor-hi); stroke-dasharray: 4 4; }
.ph-chart__halo { fill: none; stroke: var(--glow); stroke-width: 7; stroke-linejoin: round; opacity: .45; }
.ph-chart__tip { fill: var(--phosphor-hi); }
.ph-chart__solid { fill: var(--phosphor); }
.ph-chart__cross { fill: var(--selection); }
.ph-chart__sweep { position: absolute; inset: 0; background: var(--ph-surface); transform: translateX(100%); pointer-events: none; }
.ph-chart__sweep::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--phosphor-hi); box-shadow: var(--glow-box); }
.ph-chart__plot.is-pending .ph-chart__sweep { transform: none; }
.ph-chart__plot.is-pending .ph-chart__sweep::before { opacity: 0; }
.ph-chart__plot.is-sweeping .ph-chart__sweep { animation: ph-sweep 900ms steps(36, end) backwards; }
@keyframes ph-sweep { from { transform: translateX(0); } to { transform: translateX(100%); } }
.ph-chart__x { position: relative; height: 18px; font-size: 12px; color: var(--phosphor-dim); }
.ph-chart__x span { position: absolute; top: 2px; transform: translateX(-50%); white-space: nowrap; }
.ph-chart__x span.is-first { transform: translateX(-4px); }
.ph-chart__x span.is-last { transform: translateX(calc(-100% + 4px)); }
.ph-chart__legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--phosphor-dim); }
.ph-chart__legend:empty { display: none; }
.ph-chart__key { display: inline-flex; align-items: center; gap: 6px; }
.ph-chart__sw { display: inline-block; width: 18px; height: 10px; }
.ph-chart__sw--line { height: 0; border-top: 2px solid var(--phosphor); }
.ph-chart__sw--dash { height: 0; border-top: 2px dashed var(--phosphor-hi); }
.ph-chart__sw--solid { background: var(--phosphor); }
.ph-chart__sw--dither { background: conic-gradient(at 1px 1px, var(--ph-dc, var(--phosphor)) 25%, transparent 0 50%, var(--ph-dc, var(--phosphor)) 0 75%, transparent 0) 0 0 / 2px 2px; }
.ph-chart__sw--sparse { background: conic-gradient(at 1px 1px, var(--ph-dc, var(--phosphor)) 25%, transparent 0) 0 0 / 2px 2px; }

/* ================================================================ Sparkline + Readout */
.ph-spark { display: inline-block; vertical-align: middle; flex: none; }
.ph-spark rect { fill: var(--phosphor-dim); }
.ph-spark .ph-spark__last { fill: var(--phosphor-hi); }
.ph-readout { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ph-readout__label { display: flex; align-items: center; gap: 8px; }
.ph-readout__row { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.ph-readout__num { font: 400 54px/46px var(--font-display); color: var(--phosphor-hi); text-shadow: var(--glow-text-hi); white-space: pre; }
.ph-readout__unit { font: 400 24px/1 var(--font-display); color: var(--phosphor-dim); }
.ph-readout__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 18px; }
.ph-readout__delta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; }
.ph-readout__delta.is-good { color: var(--phosphor); }
.ph-readout__delta.is-bad { color: var(--alert); text-shadow: 0 0 6px var(--alert-glow); }

/* ================================================================ Widget: UptimeBoard */
.ph-uptime { display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 18px; min-width: 0; }
.ph-uptime__row { display: grid; grid-template-columns: 8px minmax(80px, 150px) 4ch 7ch minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 6px 6px; transition: background-color var(--ph-decay) var(--ph-ease-decay); }
.ph-uptime__row:hover { background: var(--selection); transition-duration: var(--ph-ignite); }
.ph-uptime__pip { width: 8px; height: 8px; background: var(--phosphor); box-shadow: var(--glow-box); }
.ph-uptime__row.is-degraded .ph-uptime__pip { background: conic-gradient(at 1px 1px, var(--ph-dc, var(--phosphor)) 25%, transparent 0 50%, var(--ph-dc, var(--phosphor)) 0 75%, transparent 0) 0 0 / 2px 2px; box-shadow: inset 0 0 0 1px var(--phosphor); }
.ph-uptime__row.is-down .ph-uptime__pip { background: var(--alert); animation: ph-blink var(--dur-blink, 1060ms) steps(1, end) infinite; }
.ph-uptime__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--phosphor); }
.ph-uptime__state { white-space: pre; color: var(--phosphor-hi); letter-spacing: .06em; }
.ph-uptime__row.is-down .ph-uptime__state { color: var(--alert); text-shadow: 0 0 6px var(--alert-glow); }
.ph-uptime__pct { text-align: right; color: var(--phosphor-dim); }
.ph-uptime__cells { display: flex; gap: 2px; height: 18px; min-width: 0; overflow: hidden; }
.ph-uptime__cell { flex: 1 1 0; min-width: 3px; max-width: 9px; background: var(--phosphor-dim); }
.ph-uptime__cell.is-degraded { background: conic-gradient(at 1px 1px, var(--ph-dc, var(--phosphor)) 25%, transparent 0 50%, var(--ph-dc, var(--phosphor)) 0 75%, transparent 0) 0 0 / 2px 2px; }
.ph-uptime__cell.is-down { background: var(--alert); }
.ph-uptime__cell:hover { background: var(--phosphor-hi); box-shadow: var(--glow-box); }
.ph-uptime__lat { display: inline-flex; align-items: center; gap: 8px; white-space: pre; color: var(--phosphor-dim); }
.ph-uptime__detail { margin-top: 6px; padding: 8px 6px 0; border-top: 2px dashed var(--phosphor-faint); font-size: 12px; letter-spacing: .06em; color: var(--phosphor-dim); white-space: pre; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
  .ph-uptime__row { grid-template-columns: 8px minmax(0, 1fr) auto auto; row-gap: 6px; }
  .ph-uptime__cells { grid-column: 2 / -1; }
  .ph-uptime__lat { display: none; }
}

/* ================================================================ Widget: Pipeline */
.ph-pipe { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ph-pipe__list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ph-pipe__stage { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; color: var(--phosphor-dim); min-width: 0; }
.ph-pipe__tag { flex: none; min-width: 6ch; white-space: pre; }
.ph-pipe__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ph-pipe__lead { flex: 1; min-width: 12px; align-self: center; height: 0; margin-top: 6px; border-bottom: 2px dotted var(--phosphor-faint); }
.ph-pipe__time { flex: none; white-space: pre; }
.ph-pipe__stage.is-running { color: var(--phosphor-hi); text-shadow: var(--glow-text-hi); }
.ph-pipe__stage.is-done { color: var(--phosphor); }
.ph-pipe__stage.is-done .ph-pipe__tag { color: var(--phosphor-hi); text-shadow: var(--glow-text-hi); }
.ph-pipe__stage.is-failed { color: var(--alert); text-shadow: 0 0 6px var(--alert-glow); }
.ph-pipe__stage.is-flash { animation: ph-flash 300ms steps(3, end); }
.ph-pipe__log { min-height: 92px; padding: 8px 10px; background: var(--screen-sunk); font-size: 13px; line-height: 19px; color: var(--phosphor-dim); white-space: pre-wrap; overflow: hidden; }
.ph-pipe__log:empty::before { content: attr(data-empty); color: var(--phosphor-dim); }
.ph-pipe__line.is-ok { color: var(--phosphor-hi); }
.ph-pipe__line.is-err { color: var(--alert); }
.ph-pipe__line .ph-caret { height: 1em; }
.ph-pipe__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ph-pipe__sha { font-size: 13px; color: var(--phosphor-dim); }

/* ================================================================ Widget: SysMonitor */
.ph-sys { display: flex; flex-direction: column; gap: 14px; min-width: 0; font-size: 13px; line-height: 19px; }
.ph-sys__meters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 28px; }
.ph-sys__col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ph-meter { display: flex; align-items: center; gap: 2px; min-width: 0; white-space: pre; }
.ph-meter__label { flex: none; width: 4ch; color: var(--phosphor-hi); }
.ph-meter__br { flex: none; color: var(--phosphor-dim); }
.ph-meter__track { position: relative; flex: 1; min-width: 0; height: 12px; overflow: hidden; --ph-dc: var(--phosphor-faint); background: conic-gradient(at 1px 1px, var(--ph-dc, var(--phosphor)) 25%, transparent 0) 0 0 / 2px 2px; }
.ph-meter__fill { position: absolute; inset: 0; overflow: hidden; transform: translateX(-100%); transition: transform 700ms var(--ph-ease-decay); }
.ph-meter__bars { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--phosphor) 0 2px, transparent 2px 4px); transform: translateX(100%); transition: transform 700ms var(--ph-ease-decay); }
.ph-meter.is-hot .ph-meter__bars { background: repeating-linear-gradient(90deg, var(--alert) 0 2px, transparent 2px 4px); }
.ph-meter__val { flex: none; min-width: 6ch; text-align: right; color: var(--phosphor); }
.ph-sys__kv { display: flex; gap: 8px; white-space: pre; overflow: hidden; }
.ph-sys__k { color: var(--phosphor-hi); }
.ph-sys__table { display: flex; flex-direction: column; min-width: 0; overflow-x: auto; }
.ph-sys__th { display: flex; min-width: max-content; padding: 4px 0 4px calc(16px + 1ch); background: var(--selection); }
.ph-sys__sort { padding: 0; border: 0; background: none; color: var(--phosphor-hi); font: inherit; letter-spacing: .04em; white-space: pre; cursor: pointer; text-align: right; }
.ph-sys__sort[data-k="pid"] { width: 5ch; margin-right: 1ch; }
.ph-sys__sort[data-k="user"] { width: 7ch; text-align: left; }
.ph-sys__sort[data-k="cpu"] { width: 5ch; margin-right: 1ch; }
.ph-sys__sort[data-k="mem"] { width: 5ch; margin-right: 2ch; }
.ph-sys__sort[data-k="cmd"] { text-align: left; }
.ph-sys__sort:hover, .ph-sys__sort.is-sorted { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ph-sys__procs { max-height: 196px; padding: 2px 0; min-width: max-content; overflow: visible; }
.ph-sys__procs .ph-menu__item { min-height: 26px; padding: 3px 8px 3px 8px; gap: 8px; }
@media (max-width: 560px) { .ph-sys__meters { grid-template-columns: minmax(0, 1fr); } }

/* ================================================================ Widget: CommandPalette */
.ph-palette { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ph-palette__bar { display: flex; align-items: center; gap: 10px; padding: 2px 4px 10px; border-bottom: var(--ph-line) solid var(--phosphor-dim); }
.ph-palette__ps { color: var(--phosphor-hi); font: 400 30px/1 var(--font-display); text-shadow: var(--glow-text-hi); }
.ph-palette__q { flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; color: var(--phosphor-hi); font: 400 18px/28px var(--font-mono); caret-color: var(--phosphor-hi); text-shadow: var(--glow-text); }
.ph-palette__q::placeholder { color: var(--phosphor-dim); opacity: 1; }
.ph-palette__count { color: var(--phosphor-dim); font-size: 12px; white-space: pre; }
.ph-palette__list { max-height: 280px; padding: 2px 0; }
.ph-palette__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding-top: 10px; border-top: 2px dashed var(--phosphor-faint); font-size: 12px; color: var(--phosphor-dim); white-space: pre; }
.ph-palette--inline { position: relative; padding: 14px; background: var(--screen-raised); --ph-surface: var(--screen-raised); }
.ph-modal__dlg--palette { width: min(580px, 100%); }

/* ================================================================ theme swap: the tube re-ignites */
html.ph-degauss body { animation: ph-reignite 420ms steps(7, end); }
@keyframes ph-reignite { 0% { opacity: .1; } 25% { opacity: .85; } 40% { opacity: .55; } 100% { opacity: 1; } }

@media (max-width: 560px) {
  .ph-stage { padding: 16px; }
  .ph-pane { padding: 22px 14px 16px; }
  .ph-pane__body--flush { margin: 0 -14px -16px; }
  .ph-card { padding: 18px 16px 16px; }
  .ph-modal__dlg { padding: 28px 16px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0s !important; }
  .ph-caret--idle, .ph-prompt.is-focus .ph-prompt__caret, .ph-badge__dot.is-live, .ph-uptime__row.is-down .ph-uptime__pip { animation: none !important; }
}