/* Ticket (Page Lemon app template): Stoneygate IT, a one-person IT support business, and its client offices.
   Art direction 2026-10-26 (docs/templates/app-art-direction-2026-10-23.md, Family D): a 19-inch server rack.
   Every open ticket is a rack unit with a printed asset label (barcode, area code, subject, raised date) and a five-LED
   status panel (New, Look, Wait, Visit, Fixed) that steps green as the ticket moves; the current LED pulses once.
   The rack, its units, the nav, the public poster and the app room are all dark (the terminal) in both schemes; the only
   paper is the printed labels and the privacy sheet. JetBrains Mono for display, refs, labels and figures; Inter for text.
   kit.css (never edited here) gives behaviour, layout and accessibility; every colour, font, radius and surface is set here. */
:root {
  /* the rack: fixed in both schemes */
  --t-term: #0D1117;
  --t-bezel: #161B22;
  --t-bezel-2: #21262D;
  --t-bezel-line: #3D444D;
  --t-label: #F6F8FA;
  --t-dim: #9DA7B3;
  --t-led-g: #3FB950;
  --t-led-a: #F0B429;
  --t-led-b: #58A6FF;
  --t-led-off: #2D333B;
  --t-rail: #8B949E;
  --t-error-on-dark: #FF7B72;
  --t-button-hover: #56D364;
  --t-console-bg: #010409;
  --t-paper-muted: #4A5361;
  --t-screw-mid: #6E7681;
  --t-screw-edge: #484F58;
  --t-paper-line: #C3CAD3;
  --t-service-line: #1F6FEB;
  --t-grid-line: #30363D;
  --t-black: #000000;
  --t-white: #FFFFFF;
  --t-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23F6F8FA' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  /* the room: the terminal in both schemes (dark-first, no light page) */
  --t-page: #0D1117;
  --t-plate: #161B22;
  --t-plate-2: #21262D;
  --t-ink: #F6F8FA;
  --t-muted: #9DA7B3;
  --t-line: #30363D;
  --t-green: #3FB950;
  --t-blue: #58A6FF;
  --t-amber: #F0B429;
  /* form fields: on the terminal, with a rail-grey edge that reads at 3:1 or more */
  --t-input-bg: #0D1117;
  --t-input-line: #8B949E;
  --t-placeholder: #9DA7B3;
  --t-tip-bg: #010409;
  /* paper (the privacy sheet, the printed labels) keeps its own ink */
  --t-paper-link: #0550AE;
  --t-paper-warning: #F7E9C6;
  --t-paper-warning-line: #9A6700;
  --t-danger-paper: #B42318;
  --t-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --t-sans: Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --k-brand: var(--t-green);
  --k-brand-ink: var(--t-term);
  --k-brand-soft: rgba(63, 185, 80, .14);
  --k-hero: var(--t-term);
  --k-hero-ink: var(--t-label);
  --k-gold: var(--t-led-a);
  --k-bg: var(--t-page);
  --k-surface: var(--t-plate);
  --k-surface-2: var(--t-plate-2);
  --k-line: var(--t-line);
  --k-line-strong: #4A535E;
  --k-text: var(--t-ink);
  --k-muted: var(--t-muted);
  --k-faint: var(--t-muted);
  --k-ok: var(--t-green);
  --k-ok-soft: rgba(63, 185, 80, .14);
  --k-warn: var(--t-amber);
  --k-warn-soft: rgba(240, 180, 41, .14);
  --k-danger: #FF7B72;
  --k-info: var(--t-blue);
  --k-info-soft: rgba(88, 166, 255, .14);
  --k-font: var(--t-sans);
  --k-font-display: var(--t-mono);
  --k-font-mono: var(--t-mono);
  --k-r-s: 3px; --k-r-m: 4px; --k-r-l: 6px; --k-r-xl: 8px; --k-r-pill: 4px;
  --k-shadow-1: none;
  --k-shadow-2: none;
  --k-shadow-3: 0 18px 48px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

/* ---------- base ---------- */
body.k-app { font-family: var(--t-sans); background: var(--t-page); color: var(--t-ink); }
.k-app :focus-visible { outline: 3px solid var(--t-led-b); outline-offset: 2px; }
.k-app ::selection { background: var(--t-led-g); color: var(--t-term); }
.k-app :is(h1, h2, h3) { font-family: var(--t-mono); letter-spacing: -.03em; }
.s-gap { margin-top: 24px; }
.s-gap-s { margin-top: 12px; }
.s-wrap { white-space: normal; }
.k-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Buttons: a green key on a black faceplate, pressed in on click */
.k-app .k-btn { border-radius: 4px; font: 700 .875rem/1.1 var(--t-mono); letter-spacing: .01em; background: var(--t-led-g); color: var(--t-term); box-shadow: inset 0 -3px 0 rgb(from var(--t-term) r g b / .28); transition: transform .1s ease; }
.k-app .k-btn:hover { filter: none; background: var(--t-button-hover); }
.k-app .k-btn:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 rgb(from var(--t-term) r g b / .28); }
.k-app .k-btn-2, .k-app .k-btn-line { background: transparent; color: var(--t-ink); box-shadow: inset 0 0 0 2px var(--t-ink); }
.k-app .k-btn-2:hover, .k-app .k-btn-line:hover { background: var(--t-plate-2); }
.k-app .k-btn-s { font-size: .8125rem; }

/* ---------- app shell: the rack head and its front bar ---------- */
.t-app .k-top { background: var(--t-term); color: var(--t-label); border-bottom: 1px solid var(--t-bezel-line); backdrop-filter: none; -webkit-backdrop-filter: none; }
.k-app .k-brand { font: 800 1rem/1 var(--t-mono); letter-spacing: -.02em; color: var(--t-label); }
.k-app .k-brand img { border-radius: 6px; box-shadow: none; }
.k-app .k-top a.k-signin { border-radius: 4px; background: var(--t-led-g); color: var(--t-term); font: 700 .8125rem/1 var(--t-mono); }
.k-app .k-avatar { background: var(--t-bezel); color: var(--t-label); border: 1px solid var(--t-bezel-line); font-family: var(--t-mono); font-weight: 800; border-radius: 4px; }
/* phone: a 1U blanking panel along the bottom, a LED over each port */
.t-app .k-tabs { background: var(--t-bezel); border-top: 1px solid var(--t-bezel-line); backdrop-filter: none; -webkit-backdrop-filter: none; }
.t-app .k-tabs a { position: relative; color: var(--t-dim); font: 700 .6875rem/1.1 var(--t-mono); text-transform: uppercase; letter-spacing: .04em; border-radius: 4px; min-height: 48px; }
.t-app .k-tabs a::after { content: ""; position: absolute; top: 4px; right: calc(50% - 18px); width: 6px; height: 6px; border-radius: 50%; background: var(--t-led-off); }
.t-app .k-tabs a[aria-current="page"] { color: var(--t-label); background: var(--t-bezel-2); }
.t-app .k-tabs a[aria-current="page"]::after { background: var(--t-led-g); box-shadow: 0 0 6px var(--t-led-g); }
@media (min-width: 1024px) {
  .t-app[data-k-nav="top"] .k-top { min-height: 64px; }
  .t-app[data-k-nav="top"] .k-tabs { background: var(--t-bezel); border-bottom: 1px solid var(--t-bezel-line); border-top: 0; gap: 0; position: sticky; }
  .t-app[data-k-nav="top"] .k-tabs a { min-height: 52px; padding: 0 22px 0 20px; gap: 10px; color: var(--t-dim); font-size: .75rem; letter-spacing: .08em; border-left: 1px solid var(--t-bezel-line); border-radius: 0; background: none; }
  .t-app[data-k-nav="top"] .k-tabs a:last-of-type { border-right: 1px solid var(--t-bezel-line); }
  .t-app[data-k-nav="top"] .k-tabs a::after { position: static; order: -1; flex: none; }
  .t-app[data-k-nav="top"] .k-tabs a .k-i { width: 18px; height: 18px; }
  .t-app[data-k-nav="top"] .k-tabs a:hover { color: var(--t-label); background: var(--t-bezel-2); }
  .t-app[data-k-nav="top"] .k-tabs a[aria-current="page"] { color: var(--t-label); background: var(--t-bezel-2); box-shadow: inset 0 -3px 0 var(--t-led-g); }
  .t-app[data-k-nav="top"] .k-main { padding-top: 28px; }
}

/* page heads: mono, tight, the member's situation as the h1 */
.k-app .k-pagehead { align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.k-app .k-kicker { color: var(--t-green); font: 700 .75rem/1.3 var(--t-mono); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 8px; }
.k-app .k-pagehead h1 { font: 800 clamp(2.25rem, 4.45vw, 4rem)/1 var(--t-mono); letter-spacing: -.045em; }
.t-h1 b { color: var(--t-green); font-weight: 800; }
.t-h1 .t-amb { color: var(--t-led-a); background: var(--t-term); padding: 0 .14em; border-radius: 3px; }
.t-h1 [data-pl-view="numbers"] { display: inline; }
.k-app .k-help { color: var(--t-muted); font-size: .8125rem; }
.k-app .k-back { font-family: var(--t-mono); font-size: .8125rem; color: var(--t-muted); }

/* plates (panels and cards) in the room */
.k-app .k-panel, .k-app .k-card { background: var(--t-plate); border: 1px solid var(--t-line); border-radius: 6px; box-shadow: none; }
.k-app .k-panel-head { border-bottom: 1px solid var(--t-line); }
.k-app .k-panel-head h2, .k-app .k-section-head h2, .t-h2 { font: 800 .8125rem/1.2 var(--t-mono); text-transform: uppercase; letter-spacing: .1em; }
.k-app .k-section-head { flex-wrap: wrap; }
.k-app .k-section-head a, .k-app .k-panel-head a { font-family: var(--t-mono); font-size: .8125rem; color: var(--t-blue); }
.k-app .k-badge { font-family: var(--t-mono); font-size: .6875rem; letter-spacing: .04em; text-transform: uppercase; border-radius: 3px; height: auto; min-height: 22px; padding: 3px 7px; white-space: normal; line-height: 1.2; }
.k-app .k-empty h3 { font-family: var(--t-mono); }
.k-app .k-empty-art { background: var(--t-bezel); color: var(--t-led-g); border-radius: 4px; }

/* forms: fields on a printed label */
.k-app .k-field > label, .k-app .k-label { font: 700 .6875rem/1.2 var(--t-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--t-muted); }
.k-app :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) { border-radius: 3px; border: 1.5px solid var(--t-input-line); background: var(--t-input-bg); color: var(--t-label); font-family: var(--t-sans); }
.k-app select { background-image: var(--t-select-arrow); }
.k-app :is(input, select, textarea):focus { border-color: var(--t-led-b); }
.k-app ::placeholder { color: var(--t-muted); opacity: 1; }

/* toasts: a console line */
.k-app [data-pl-status]:not(:empty), .k-app .k-toast { background: var(--t-term); color: var(--t-label); font-family: var(--t-mono); border: 1px solid var(--t-led-g); border-radius: 4px; }

/* ---------- the rack ---------- */
.t-rack { position: relative; background: var(--t-term); border-radius: 8px; padding: 14px 30px; box-shadow: 0 0 0 1px var(--t-bezel-line), 0 24px 48px -24px rgb(from var(--t-term) r g b / .55); }
.t-rack::before, .t-rack::after {
  content: ""; position: absolute; top: 8px; bottom: 8px; width: 18px; border-radius: 2px;
  background-color: var(--t-rail);
  background-image: linear-gradient(180deg, var(--t-term) 0 7px, transparent 7px 15px), linear-gradient(90deg, rgb(from var(--t-white) r g b / .25), transparent 40%, rgb(from var(--t-black) r g b / .25));
  background-size: 7px 15px, 100% 100%; background-repeat: repeat-y, no-repeat; background-position: center 6px, 0 0;
}
.t-rack::before { left: 6px; }
.t-rack::after { right: 6px; }
.t-rack-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 4px 2px 12px; color: var(--t-dim); font: 700 .6875rem/1.3 var(--t-mono); text-transform: uppercase; letter-spacing: .12em; }
.t-rack-head b { color: var(--t-label); }
.t-units { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: u; }
/* unit numbers: each rack counts its own units; on Tickets the stack is the container and .t-racks counts on through the racks (a container scopes counters, so the racks inside it cannot be containers) */
.t-stack { container-type: inline-size; }
.t-racks { display: grid; gap: 22px; counter-reset: u; }
.t-stack .t-rack { container-type: normal; }
.t-stack .t-units { counter-reset: none; }
/* the unit number, printed down the left rail (U1 is the top unit) */
.t-u { position: absolute; left: -24px; top: 50%; width: 18px; margin-top: -8px; padding: 2px 0; text-align: center; background: var(--t-term); border-radius: 2px; font: 800 .5rem/1.2 var(--t-mono); letter-spacing: .02em; color: var(--t-led-b); }
.t-u::before { counter-increment: u; content: "U" counter(u); }
/* one unit */
.t-unit { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 10px 26px; background: linear-gradient(180deg, var(--t-bezel-2), var(--t-bezel) 70%); border: 1px solid var(--t-bezel-line); border-radius: 3px; color: var(--t-label); }
.t-unit::before, .t-unit::after { content: ""; position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: radial-gradient(circle, var(--t-term) 0 1.5px, var(--t-rail) 2px 3.5px, var(--t-screw-edge) 4px); }
.t-unit::before { left: 8px; }
.t-unit::after { right: 8px; }
.t-unit[hidden] { display: none; }
/* the printed asset label */
.t-label { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "tag tag" "bars subj" "bars when"; gap: 2px 12px; align-items: center; padding: 8px 12px 9px; background: var(--t-label); color: var(--t-term); border-radius: 2px; text-decoration: none; box-shadow: 0 1px 0 rgb(from var(--t-black) r g b / .4); }
a.t-label:hover .t-subj { text-decoration: underline; }
.t-tag { grid-area: tag; display: flex; align-items: center; gap: 8px; font: 800 .6875rem/1.2 var(--t-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--t-paper-muted); border-bottom: 1px dashed var(--t-paper-line); padding-bottom: 4px; margin-bottom: 4px; }
.t-code { background: var(--t-term); color: var(--t-label); padding: 2px 5px; border-radius: 2px; letter-spacing: .06em; }
.t-code::before { content: "TKT"; }
[data-k-state="prn"] > .t-code::before { content: "PRN"; }
[data-k-state="wifi"] > .t-code::before { content: "WIFI"; }
[data-k-state="mail"] > .t-code::before { content: "MAIL"; }
[data-k-state="pc"] > .t-code::before { content: "PC"; }
[data-k-state="tel"] > .t-code::before { content: "TEL"; }
[data-k-state="key"] > .t-code::before { content: "KEY"; }
[data-k-state="oth"] > .t-code::before { content: "OTH"; }
.t-bars { grid-area: bars; align-self: stretch; width: 46px; min-height: 34px;
  background-image: repeating-linear-gradient(90deg, var(--t-term) 0 2px, transparent 2px 3px, var(--t-term) 3px 4px, transparent 4px 6px, var(--t-term) 6px 9px, transparent 9px 10px), repeating-linear-gradient(90deg, transparent 0 5px, var(--t-label) 5px 6px, transparent 6px 13px); }
.t-subj { grid-area: subj; font: 700 1rem/1.25 var(--t-sans); letter-spacing: -.01em; overflow-wrap: anywhere; }
.t-when { grid-area: when; font: 500 .75rem/1.3 var(--t-mono); color: var(--t-paper-muted); }
/* the LED status panel */
.t-panel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.t-state { font: 800 .75rem/1.2 var(--t-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--t-led-g); }
.t-leds { display: flex; gap: 12px; }
.t-led { display: grid; justify-items: center; gap: 5px; min-width: 30px; font: 700 .625rem/1 var(--t-mono); text-transform: uppercase; letter-spacing: .08em; color: rgb(from var(--t-label) r g b / .7); }
.t-led i { width: 11px; height: 11px; border-radius: 50%; background: var(--t-led-off); box-shadow: inset 0 1px 2px rgb(from var(--t-black) r g b / .6); }
/* lit: steps already passed (green), the current one (its own colour, pulses once) */
[data-k-state="s2"] .t-l1 i, [data-k-state="s3"] :is(.t-l1, .t-l2) i, [data-k-state="s4"] :is(.t-l1, .t-l2) i, [data-k-state="s5"] :is(.t-l1, .t-l2) i, [data-k-state="s6"] :is(.t-l1, .t-l2, .t-l5) i { background: var(--t-led-g); box-shadow: 0 0 6px rgb(from var(--t-led-g) r g b / .7); }
[data-k-state="s6"] :is(.t-l1, .t-l2, .t-l5) i { opacity: .45; box-shadow: none; }
[data-k-state="s1"] .t-l1 i, [data-k-state="s2"] .t-l2 i, [data-k-state="s5"] .t-l5 i { background: var(--t-led-g); box-shadow: 0 0 10px 2px rgb(from var(--t-led-g) r g b / .8); animation: t-blink 1.3s ease-out .3s 1 both; }
[data-k-state="s3"] .t-l3 i { background: var(--t-led-a); box-shadow: 0 0 10px 2px rgb(from var(--t-led-a) r g b / .8); animation: t-blink 1.3s ease-out .3s 1 both; }
[data-k-state="s4"] .t-l4 i { background: var(--t-led-b); box-shadow: 0 0 10px 2px rgb(from var(--t-led-b) r g b / .8); animation: t-blink 1.3s ease-out .3s 1 both; }
[data-k-state="s1"] .t-l1, [data-k-state="s2"] .t-l2, [data-k-state="s3"] .t-l3, [data-k-state="s4"] .t-l4, [data-k-state="s5"] .t-l5 { color: var(--t-label); }
[data-k-state="s3"] .t-state { color: var(--t-led-a); }
[data-k-state="s4"] .t-state { color: var(--t-led-b); }
[data-k-state="s6"] .t-state { color: var(--t-dim); }
@keyframes t-blink { 0% { opacity: .25; } 25% { opacity: 1; transform: scale(1.35); } 45% { opacity: .4; transform: scale(1); } 70%, 100% { opacity: 1; } }
/* the unit's whole state: waiting on you is ringed amber, closed is powered down */
.t-unit[data-k-state="off"] { border-color: var(--t-led-a); box-shadow: inset 4px 0 0 var(--t-led-a); }
.t-unit[data-k-state="done"] { opacity: 1; }
.t-unit[data-k-state="done"] .t-led i { opacity: .45; }
/* Ossie's latest word, and the row actions */
.t-said { margin: 0; font: 400 .875rem/1.5 var(--t-mono); color: var(--t-dim); quotes: none; overflow-wrap: anywhere; }
.t-said::before { content: "ossie> "; color: var(--t-led-g); font-weight: 700; }
.t-said:empty { display: none; }
.t-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.t-acts .k-btn-2 { color: var(--t-label); box-shadow: inset 0 0 0 2px var(--t-label); }
.t-acts .k-btn-2:hover { background: var(--t-bezel-2); }
.i-act-reply, .i-act-again { display: none; }
[data-k-state="off"] .i-act-reply, [data-k-state="ok"] .i-act-again { display: inline-flex; }
.t-acts:not(:has(.k-btn)) { display: none; }
.t-thumb { display: none; }
.t-thumb[src] { display: block; width: 72px; height: 45px; object-fit: cover; border-radius: 3px; border: 3px solid var(--t-bezel-2); background: var(--t-console-bg); box-shadow: 0 0 0 1px var(--t-bezel-line); }
.t-thumb[src=""] { display: none; }
.t-main { display: grid; gap: 8px; min-width: 0; }
.t-rack { container-type: inline-size; }
.t-unit .t-mid { display: grid; gap: 10px; min-width: 0; }
@container (min-width: 560px) {
  .t-unit { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 18px; padding: 10px 30px; }
  .t-unit .t-mid { grid-column: 1 / -1; grid-row: 2; }
  .t-unit .t-panel { flex-direction: column; align-items: flex-end; justify-content: center; }
}
@container (min-width: 900px) {
  .t-unit { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto; }
  .t-unit .t-mid { grid-column: auto; grid-row: auto; }
}
/* a blank panel when the rack is empty */
.t-blank { padding: 22px 26px; border: 1px dashed var(--t-bezel-line); border-radius: 3px; color: var(--t-dim); display: grid; gap: 8px; background: repeating-linear-gradient(90deg, transparent 0 10px, rgb(from var(--t-white) r g b / .025) 10px 12px); }
.t-blank h3 { color: var(--t-label); font-size: 1rem; }
.t-blank p { margin: 0; font-size: .875rem; }
.t-blank .k-btn { justify-self: start; }

/* status display unit (counts per stage) at the top of the rack */
.t-display { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 26px; margin-bottom: 6px; background: var(--t-console-bg); border: 1px solid var(--t-bezel-line); border-radius: 3px; position: relative; }
.t-display::before, .t-display::after { content: ""; position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: radial-gradient(circle, var(--t-term) 0 1.5px, var(--t-rail) 2px 3.5px, var(--t-screw-edge) 4px); }
.t-display::before { left: 8px; } .t-display::after { right: 8px; }
.t-display > div { display: flex; align-items: baseline; gap: 8px; padding: 4px 12px 4px 0; margin-right: 6px; border-right: 1px solid var(--t-bezel-line); font: 600 .6875rem/1.2 var(--t-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--t-dim); }
.t-display > div:last-of-type { border-right: 0; }
.t-display b { font: 800 1.5rem/1 var(--t-mono); color: var(--t-led-g); text-shadow: 0 0 10px rgb(from var(--t-led-g) r g b / .45); font-variant-numeric: tabular-nums; }
.t-display .k-note { margin: 0; color: var(--t-dim); font: 600 .8125rem/1.3 var(--t-mono); }

/* alarm lines: waiting on you, fixed */
.t-alarm { display: grid; gap: 8px; }
.t-alarm:not(:has(a)) { display: none; }
.t-alarm a { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 10px 16px; border-radius: 4px; background: var(--t-term); color: var(--t-label); text-decoration: none; border: 1px solid var(--t-led-a); }
.t-alarm.t-ok a { border-color: var(--t-led-g); }
.t-alarm a > span:nth-child(2) { flex: 1; min-width: 0; display: grid; gap: 2px; }
.t-alarm b { font: 800 .75rem/1.2 var(--t-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--t-led-a); }
.t-alarm.t-ok b { color: var(--t-led-g); }
.t-alarm a span span { font-weight: 600; overflow-wrap: anywhere; }
.t-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--t-led-a); box-shadow: 0 0 10px 2px rgb(from var(--t-led-a) r g b / .7); animation: t-blink 1.3s ease-out .3s 1 both; }
.t-ok .t-dot { background: var(--t-led-g); box-shadow: 0 0 10px 2px rgb(from var(--t-led-g) r g b / .7); }
.t-alarm .k-chev { color: var(--t-dim); }

/* ---------- terminal log (updates, the ticket conversation) ---------- */
.t-term { background: var(--t-term); color: var(--t-label); border-radius: 6px; border: 1px solid var(--t-bezel-line); overflow: hidden; }
.t-term-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 10px 16px; background: var(--t-bezel); border-bottom: 1px solid var(--t-bezel-line); font: 700 .6875rem/1.2 var(--t-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--t-dim); }
.t-term-bar > span { min-width: 0; overflow-wrap: anywhere; }
.t-term-bar a { color: var(--t-led-b); text-transform: none; letter-spacing: 0; font-size: .8125rem; }
.t-term-bar b { color: var(--t-led-g); }
.t-log { list-style: none; margin: 0; padding: 8px 0; font-family: var(--t-mono); }
.t-log > li { display: grid; gap: 4px; min-width: 0; overflow-wrap: anywhere; padding: 12px 16px; border-bottom: 1px dashed var(--t-bezel-line); }
.t-log > li:last-child { border-bottom: 0; }
.t-log .i-meta, .t-log .t-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; font-size: .75rem; color: var(--t-dim); }
.t-log .i-meta b, .t-log .t-meta b { color: var(--t-led-g); }
.t-log time::before { content: "["; } .t-log time::after { content: "]"; }
.t-log .t-meta time, .t-log .i-meta time { color: var(--t-dim); }
/* status chips take the colour of their LED (the label always shows too): Waiting amber, Visit blue, New and Fixed green, Closed grey */
.t-log .k-badge { background: transparent; color: var(--t-label); box-shadow: inset 0 0 0 1px currentColor; }
.t-log .i-update { min-width: 0; }
.t-log .i-update[data-k-state="new"] .k-badge, .t-log .i-update[data-k-state="ok"] .k-badge { color: var(--t-led-g); background: rgb(from var(--t-led-g) r g b / .14); }
.t-log .i-update[data-k-state="off"] .k-badge { color: var(--t-led-a); background: rgb(from var(--t-led-a) r g b / .14); }
.t-log .i-update[data-k-state="visit"] .k-badge { color: var(--t-led-b); background: rgb(from var(--t-led-b) r g b / .14); }
.t-log .i-update[data-k-state="done"] .k-badge { color: var(--t-dim); background: transparent; }
.t-log .i-on { margin: 0; font-size: .8125rem; }
.t-log .i-on a { color: var(--t-label); }
.t-log .i-memo, .t-log .i-msgtext { margin: 0; font: 400 .9375rem/1.55 var(--t-sans); color: var(--t-label); }
.t-log :is(.i-on, .i-memo, .i-msgtext) { min-width: 0; overflow-wrap: anywhere; }
.t-log .i-visit { margin: 2px 0 0; display: flex; align-items: center; gap: 8px; font-size: .8125rem; color: var(--t-led-b); }
.t-log .i-visit:not(:has(time:not(:empty))) { display: none; }
.t-log time::before, .t-log time::after { color: var(--t-dim); }
.t-log .i-you .i-meta b { color: var(--t-led-a); }
.t-log .i-you { background: rgb(from var(--t-led-a) r g b / .05); }
.t-log .i-mine { display: block; padding: 0; background: none; border: 0; }
.t-log .i-mine .k-row-main { display: grid; gap: 4px; }
.t-log .k-empty { color: var(--t-dim); }
.t-log .k-empty h3 { color: var(--t-label); }
.t-cursor::after { content: "_"; color: var(--t-led-g); animation: t-caret 1s steps(1) infinite; }
@keyframes t-caret { 50% { opacity: 0; } }

/* ---------- service tags (visits, cable blue) ---------- */
.t-svc { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.t-svc .k-row, .t-svc > div:not(.k-empty) { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 14px; background: var(--t-term); border: 1px solid var(--t-service-line); border-left: 4px solid var(--t-led-b); border-radius: 4px; color: var(--t-label); }
.t-cal { display: grid; justify-items: center; gap: 4px; width: 96px; min-width: 96px; padding: 6px 8px; background: var(--t-led-b); color: var(--t-term); border-radius: 3px; font-family: var(--t-mono); text-align: center; }
.t-cal::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--t-term); box-shadow: 0 0 4px var(--t-term); }
.t-cal b { font-size: 1.0625rem; font-weight: 800; line-height: 1.1; }
.t-cal time:last-child { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.t-svc .k-row-main { display: grid; gap: 4px; min-width: 0; }
.t-svc .k-row-title { color: var(--t-label); font-weight: 700; }
.t-svc .k-row-sub { color: var(--t-dim); font-family: var(--t-mono); font-size: .8125rem; }
.t-svc .k-row-sub b { color: var(--t-led-b); }
.t-svc .k-btn-2 { color: var(--t-label); box-shadow: inset 0 0 0 2px var(--t-led-b); justify-self: start; }
.t-svc .k-row + .k-row::before { content: none; }
.t-svc .k-row-title { display: block; white-space: normal; -webkit-line-clamp: unset; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.t-svc .k-row-sub { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.t-svc .i-move { grid-column: 2; justify-self: start; }
@media (max-width: 639px) { .t-svc .i-move { grid-column: 1 / -1; justify-self: start; max-width: 100%; white-space: normal; } }
.k-app .t-svc .k-btn-2:hover, .k-app .i-visithead .k-btn-2:hover { background: var(--t-bezel-2); }
@media (min-width: 640px) {
  .t-svc .k-row, .t-svc > div:not(.k-empty) { grid-template-columns: auto minmax(0, 1fr) auto; }
  .t-svc .i-move { grid-column: 3; grid-row: 1; justify-self: end; }
}
.t-svc .k-empty { background: var(--t-plate); border: 1px dashed var(--t-line); border-radius: 6px; }

/* ---------- Home ---------- */
.t-home { display: grid; gap: 20px; }
.t-under { display: grid; gap: 20px; }
@media (min-width: 1024px) { .t-under { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }
.t-side { display: grid; gap: 16px; }
.t-nextvisit { background: var(--t-term); border: 1px solid var(--t-service-line); border-radius: 6px; color: var(--t-label); padding: 16px; display: grid; gap: 12px; }
.t-nextvisit .t-h2 { color: var(--t-led-b); }
.t-nextvisit .k-note { margin: 0; color: var(--t-label); font-size: .9375rem; }
.t-nextvisit .k-note b { font-family: var(--t-mono); color: var(--t-led-b); font-size: 1.125rem; display: block; margin-bottom: 4px; }
.t-nextvisit .t-svc .k-row { border-color: var(--t-bezel-line); border-left-color: var(--t-led-b); background: var(--t-bezel); }
.t-phone { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 6px; background: var(--t-plate); border: 2px solid var(--t-ink); color: var(--t-ink); text-decoration: none; }
.t-phone > span:nth-child(2) { flex: 1; min-width: 0; display: grid; gap: 2px; }
.t-phone b { font: 800 .8125rem/1.2 var(--t-mono); text-transform: uppercase; letter-spacing: .08em; }
.t-phone span span { font-size: .875rem; color: var(--t-muted); }
.t-phone .t-num { font: 800 1.125rem/1.2 var(--t-mono); color: var(--t-ink); letter-spacing: -.02em; }
.t-phone .k-tile { background: var(--t-led-g); color: var(--t-term); border-radius: 4px; }

/* ---------- Tickets ---------- */
.t-stack { display: grid; gap: 22px; }
.t-sec-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; margin-bottom: 10px; }
.t-sec-h .t-h2 { margin: 0; }
.t-sec-h span { font: 500 .8125rem/1.3 var(--t-mono); color: var(--t-muted); }
.t-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.t-legend li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 2px 12px; font-size: .875rem; color: var(--t-muted); }
.t-legend li b { color: var(--t-ink); font: 800 .75rem/1.4 var(--t-mono); text-transform: uppercase; letter-spacing: .08em; grid-column: 2; }
.t-legend li span { grid-column: 2; }
.t-legend i { grid-row: 1 / span 2; width: 12px; height: 12px; margin: 3px 0 0 4px; border-radius: 50%; background: var(--t-led-g); box-shadow: 0 0 0 3px var(--t-term); }
.t-legend .t-la i { background: var(--t-led-a); }
.t-legend .t-lb i { background: var(--t-led-b); }
.t-legend .t-lo i { background: var(--t-led-off); }
.t-closed > summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 16px; border: 1px solid var(--t-line); border-radius: 6px; background: var(--t-plate); font: 700 .8125rem/1.2 var(--t-mono); text-transform: uppercase; letter-spacing: .08em; list-style: none; }
.t-closed > summary::-webkit-details-marker { display: none; }
.t-closed > summary [data-pl-view="numbers"] { display: inline; }
.t-closed .i-hide, .t-closed[open] .i-show { display: none; }
.t-closed[open] .i-hide { display: inline; }
.t-closed em { font-style: normal; color: var(--t-blue); }
.t-closed[open] > summary { margin-bottom: 10px; }
.i-sent { margin-bottom: 12px; }

/* ---------- Ticket: one unit pulled out ---------- */
.t-pulled { position: relative; padding: 18px 18px 20px; background: linear-gradient(180deg, var(--t-bezel-2), var(--t-bezel) 50%); border: 1px solid var(--t-bezel-line); border-radius: 6px; color: var(--t-label); display: grid; gap: 16px; box-shadow: 0 12px 24px rgb(from var(--t-black) r g b / .4); }
.t-pulled .t-label { grid-template-columns: auto minmax(0, 1fr); padding: 14px 16px; }
.t-pulled .t-bars { width: 72px; min-height: 64px; }
.t-pulled .t-subj { font: 800 clamp(1.375rem, 3.4vw, 2.25rem)/1.1 var(--t-mono); letter-spacing: -.04em; }
.t-pulled .t-when { font-size: .8125rem; }
.t-pulled .t-leds { gap: clamp(14px, 3vw, 30px); }
.t-pulled .t-led { font-size: .6875rem; min-width: 40px; }
.t-pulled .t-led i { width: 18px; height: 18px; }
.t-pulled .t-state { font-size: .9375rem; }
.t-pulled .t-panel { padding: 12px 14px; background: var(--t-console-bg); border-radius: 4px; border: 1px solid var(--t-bezel-line); }
.t-details { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--t-label); }
.i-shot-big { display: block; width: 100%; height: auto; border-radius: 4px; border: 1px solid var(--t-bezel-line); background: var(--t-label); }
.i-shot-big:not([src]), .i-shot-big[src=""] { display: none; }
.t-flag { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border-radius: 4px; font: 600 .875rem/1.4 var(--t-mono); }
.t-flag[hidden] { display: none; }
.i-waitline.t-flag { background: rgb(from var(--t-led-a) r g b / .1); color: var(--t-led-a); border: 1px solid rgb(from var(--t-led-a) r g b / .5); }
.i-waitline b { color: var(--t-label); }
.i-visithead.t-flag { background: rgb(from var(--t-led-b) r g b / .1); color: var(--t-led-b); border: 1px solid rgb(from var(--t-led-b) r g b / .5); }
.i-visithead .k-btn-2 { color: var(--t-label); box-shadow: inset 0 0 0 2px var(--t-led-b); }
.t-pulled .k-empty { color: var(--t-dim); }
.t-pulled .k-empty h3 { color: var(--t-label); }
.t-console { display: grid; gap: 12px; }
#reply .t-console textarea { background: var(--t-term); color: var(--t-label); border-color: var(--t-bezel-line); font-family: var(--t-mono); font-size: .9375rem; }
.t-console textarea::placeholder { color: var(--t-dim); }
.t-console label { color: var(--t-dim) !important; }
.t-console .k-help { color: var(--t-dim); }
.t-console h2 { color: var(--t-label); font: 800 .8125rem/1.2 var(--t-mono); text-transform: uppercase; letter-spacing: .1em; }
.t-reply { padding: 16px; }
.i-exits h2, .i-closednote h2 { font: 800 .8125rem/1.2 var(--t-mono); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 4px; }
.i-exits, .i-closednote { display: grid; gap: 10px; }
.i-exits > * + *, .i-closednote > * + * { margin-top: 0; }
.i-exit { margin: 0; }
.i-exit[hidden], .i-closednote[hidden], .k-help[hidden] { display: none; }

/* ---------- New: a blank asset label, areas as patch-panel ports ---------- */
.t-sheet { background: var(--t-bezel); color: var(--t-label); border-radius: 6px; padding: 0; overflow: hidden; border: 1px solid var(--t-bezel-line); }
.t-sheet-top { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--t-term); color: var(--t-label); }
.t-sheet-top .t-bars { background-image: repeating-linear-gradient(90deg, var(--t-label) 0 2px, transparent 2px 3px, var(--t-label) 3px 4px, transparent 4px 6px, var(--t-label) 6px 9px, transparent 9px 10px); width: 56px; min-height: 30px; }
.t-sheet-top b { display: block; font: 800 1rem/1.2 var(--t-mono); }
.t-sheet-top span span { font: 500 .75rem/1.3 var(--t-mono); color: var(--t-dim); }
.t-sheet .k-form { padding: 18px; gap: 18px; }
#ticket-form :is(input:not([type="hidden"]), select, textarea) { background: var(--t-input-bg); color: var(--t-label); border-color: var(--t-input-line); }
.t-sheet .k-field > label, .t-sheet .k-label { color: var(--t-dim); }
.t-sheet .k-help { color: var(--t-dim); }
.t-sheet ::placeholder { color: var(--t-placeholder); }
.t-ports { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px; background: var(--t-term); border-radius: 4px; }
.t-ports .k-item:last-child { grid-column: 1 / -1; }
@media (min-width: 560px) { .t-ports { grid-template-columns: repeat(4, minmax(0, 1fr)); } .t-ports .k-item:last-child { grid-column: span 2; } }
.t-ports .k-item { display: grid; justify-items: center; gap: 6px; min-height: 92px; padding: 10px 6px 8px; background: var(--t-bezel); color: var(--t-dim); border: 1px solid var(--t-bezel-line); border-radius: 3px; box-shadow: none; text-align: center; cursor: pointer; }
.t-ports .k-item:hover { color: var(--t-label); box-shadow: none; }
.t-port { position: relative; display: grid; place-items: center; width: 44px; height: 36px; background: var(--t-console-bg); color: var(--t-dim); clip-path: polygon(0 0, 100% 0, 100% 78%, 72% 78%, 72% 100%, 28% 100%, 28% 78%, 0 78%); }
.t-port .k-i { width: 18px; height: 18px; margin-top: -6px; }
.t-ports .k-item-name { font: 700 .6875rem/1.2 var(--t-mono); text-transform: uppercase; letter-spacing: .06em; }
.t-ports .k-item::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--t-led-off); }
.t-ports .k-item[aria-pressed="true"] { color: var(--t-label); border-color: var(--t-led-g); box-shadow: inset 0 0 0 1px var(--t-led-g); }
.t-ports .k-item[aria-pressed="true"] .t-port { color: var(--t-led-g); }
.t-ports .k-item[aria-pressed="true"]::after { background: var(--t-led-g); box-shadow: 0 0 8px var(--t-led-g); }
.t-tips .k-row { background: var(--t-tip-bg); border: 1px solid var(--t-bezel-line); border-radius: 4px; padding: 10px 12px; display: flex; gap: 12px; color: var(--t-label); }
.t-tips .k-row[hidden] { display: none; }
.t-tips .k-tile { background: var(--t-term); color: var(--t-led-g); border-radius: 3px; flex: none; }
.t-tips .k-row-title { font: 800 .75rem/1.3 var(--t-mono); text-transform: uppercase; letter-spacing: .08em; }
.t-tips .k-row-sub { color: var(--t-dim); font-size: .875rem; }
.t-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: s; }
.t-steps li { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 2px 12px; padding: 0 0 18px; }
.t-steps li::before { content: ""; grid-row: 1 / span 2; width: 12px; height: 12px; margin: 4px 0 0 5px; border-radius: 50%; background: var(--t-led-g); box-shadow: 0 0 0 3px var(--t-term); }
.t-steps li:not(:last-child)::after { content: ""; position: absolute; left: 10px; top: 20px; bottom: 2px; width: 2px; background: var(--t-line); }
.t-steps li:nth-child(3)::before { background: var(--t-led-b); }
.t-steps b { font: 800 .8125rem/1.4 var(--t-mono); text-transform: uppercase; letter-spacing: .06em; }
.t-steps span { color: var(--t-muted); font-size: .875rem; grid-column: 2; }

/* ---------- Account: the member's asset label ---------- */
.t-me { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; align-items: center; padding: 18px 20px; background: var(--t-label); color: var(--t-term); border-radius: 6px; border: 1px solid var(--t-paper-line); box-shadow: 0 0 0 8px var(--t-term); margin: 8px 0 24px; }
.t-role { display: inline; }
.t-me > * { grid-column: 2; }
.t-me .t-bars { grid-column: 1; grid-row: 1 / span 3; width: 64px; min-height: 72px; }
.t-me .t-tag { grid-area: auto; margin: 0; }
.t-me b { font: 800 clamp(1.5rem, 4vw, 2.25rem)/1.1 var(--t-mono); letter-spacing: -.04em; overflow-wrap: anywhere; }
.t-me span.t-sub { font-size: .875rem; color: var(--t-paper-muted); }
.t-list { display: grid; }
.t-list a { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 10px 16px; color: var(--t-ink); text-decoration: none; border-top: 1px solid var(--t-line); }
.t-list a:first-child { border-top: 0; }
.t-list a > span:nth-child(2) { flex: 1; min-width: 0; display: grid; gap: 2px; }
.t-list b { font: 700 .875rem/1.3 var(--t-mono); }
.t-list span span { color: var(--t-muted); font-size: .875rem; overflow-wrap: anywhere; }
.t-list .k-tile { background: var(--t-term); color: var(--t-led-g); border-radius: 4px; flex: none; }
.t-list .k-chev { color: var(--t-muted); }
.k-app .k-account button { border-radius: 4px; font-family: var(--t-mono); }

/* ---------- signed-out welcome: a dark terminal screen ---------- */
.k-app .k-welcome { background: var(--t-term); color: var(--t-label); border-radius: 8px; padding: 18px; border: 1px solid var(--t-bezel-line); align-items: center; }
.k-app .k-welcome-art { border-radius: 4px; box-shadow: none; aspect-ratio: 1 / 1; max-height: 420px; border: 1px solid var(--t-bezel-line); }
.k-app .k-welcome-art img { object-fit: contain; background: #0D1117; }
.k-app .k-welcome-art::after { background: linear-gradient(180deg, transparent 60%, rgb(from var(--t-console-bg) r g b / .85)); }
.k-app .k-welcome-art figcaption { font-family: var(--t-mono); font-size: .8125rem; color: var(--t-label); }
.k-app .k-welcome .k-kicker { color: var(--t-led-g); }
.k-app .k-welcome h1 { font: 800 clamp(1.875rem, 5vw, 3.25rem)/1.02 var(--t-mono); letter-spacing: -.045em; color: var(--t-label); }
.k-app .k-welcome .k-lead { color: var(--t-dim); }
.k-app .k-welcome .k-help { color: var(--t-dim); }
.k-app .k-welcome .k-btn-line { color: var(--t-label); box-shadow: inset 0 0 0 2px var(--t-label); }
.k-app .k-welcome .k-btn-line:hover { background: var(--t-bezel-2); }
.t-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-family: var(--t-mono); font-size: .875rem; color: var(--t-label); }
.t-perks li { display: flex; gap: 10px; align-items: baseline; }
.t-perks li::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--t-led-g); box-shadow: 0 0 6px var(--t-led-g); }
.t-perks li:nth-child(2)::before { background: var(--t-led-a); box-shadow: 0 0 6px var(--t-led-a); }
.t-perks li:nth-child(3)::before { background: var(--t-led-b); box-shadow: 0 0 6px var(--t-led-b); }
@media (min-width: 1024px) { .k-app .k-welcome { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; padding: 32px; } }

/* footer */
.k-app .k-foot { font-family: var(--t-mono); font-size: .75rem; color: var(--t-muted); border-top: 1px solid var(--t-line); }
.k-app .k-foot a { color: var(--t-muted); }

/* ---------- public pages (index.html, privacy.html) ---------- */
.p-pub { background: var(--t-term); color: var(--t-label); }
.p-pub .k-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: rgb(from var(--t-term) r g b / .94); border-bottom: 1px solid var(--t-bezel-line); }
.p-pub .k-top .k-brand { display: flex; }
.p-links { display: none; gap: 22px; font: 600 .8125rem/1 var(--t-mono); }
.p-links a { color: var(--t-dim); text-decoration: none; }
.p-links a:hover { color: var(--t-label); }
@media (min-width: 900px) { .p-links { display: flex; } }
.p-pub .k-top-end { display: flex; align-items: center; gap: 22px; }
.p-main { display: block; }
.p-wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 1024px) { .p-wrap { padding: 0 40px; } .p-pub .k-top { padding: 14px max(40px, calc((100% - 1240px) / 2)); } }
.p-pub .k-btn-line { color: var(--t-label); box-shadow: inset 0 0 0 2px var(--t-label); }
.p-pub .k-btn-line:hover { background: var(--t-bezel-2); }
.p-pub .k-btn-lg { min-height: 52px; padding: 0 22px; font-size: .9375rem; }
/* poster */
.p-poster { position: relative; overflow: hidden; padding: 28px 0 40px; background-image: linear-gradient(rgb(from var(--t-grid-line) r g b / .45) 1px, transparent 1px), linear-gradient(90deg, rgb(from var(--t-grid-line) r g b / .45) 1px, transparent 1px); background-size: 48px 48px; background-position: -1px -1px; }
.p-grid { display: grid; gap: 28px; align-items: start; }
.p-more { margin: 10px 0 0; font: 700 .6875rem/1.3 var(--t-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--t-dim); }
.p-kit-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; margin-top: 32px; }
.p-kit-strip img { display: block; width: 300px; max-width: 100%; height: auto; }
@media (max-width: 639px) { .p-kit-strip { flex-direction: column; } .p-kit-strip img { width: 100%; } }
.p-kick { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 14px; font: 700 .75rem/1.3 var(--t-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--t-led-g); }
.p-kick span + span { color: var(--t-dim); }
.p-title { margin: 0; font: 800 clamp(3.5rem, 8.2vw, 8rem)/.92 var(--t-mono); letter-spacing: -.065em; color: var(--t-label); }
.p-title span { display: block; }
.p-title .p-g { color: var(--t-led-g); text-shadow: 0 0 28px rgb(from var(--t-led-g) r g b / .35); }
.p-lead { margin: 18px 0 0; max-width: 44ch; font-size: 1.0625rem; line-height: 1.55; color: var(--t-dim); }
.p-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.p-read { display: flex; flex-wrap: wrap; gap: 0; margin: 26px 0 0; padding: 0; list-style: none; border: 1px solid var(--t-bezel-line); border-radius: 4px; background: var(--t-console-bg); max-width: 560px; }
.p-read li { flex: 1 1 33%; padding: 10px 14px; border-left: 1px solid var(--t-bezel-line); font: 600 .6875rem/1.3 var(--t-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--t-dim); }
.p-read li:first-child { border-left: 0; }
.p-read b { display: block; font: 800 1.5rem/1.1 var(--t-mono); letter-spacing: -.03em; text-transform: none; color: var(--t-led-g); text-shadow: 0 0 12px rgb(from var(--t-led-g) r g b / .35); }
.p-rackwrap { position: relative; }
.p-rack { padding: 16px 30px 18px; }
.p-rack .t-unit { padding-top: 12px; padding-bottom: 12px; }
.p-rack .t-said { font-size: .8125rem; }
/* the active unit carries one glow light down its rail, readable at thumbnail size */
.p-rack .t-unit[data-k-state="active"] { box-shadow: inset 6px 0 0 var(--t-led-g), 0 0 22px rgb(from var(--t-led-g) r g b / .22); }
@media (min-width: 1024px) { .p-rack .t-label { grid-column: 1; grid-row: 1; } .p-rack .t-panel { grid-column: 2; grid-row: 1 / span 2; } .p-rack .t-mid { grid-column: 1; grid-row: 2; } }
.p-cable { display: none; }
@media (min-width: 1024px) {
  .p-poster { padding: 56px 0 72px; }
  .p-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 56px; }
  .p-rack { transform: perspective(1600px) rotateY(-8deg); transform-origin: left center; }
  .p-rack .t-unit { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; }
  .p-rack .t-panel { flex-direction: column; align-items: flex-end; }
}
@media (min-width: 1280px) { .p-grid { grid-template-columns: minmax(0, 1fr) 560px; } }
/* sections */
.p-sec { padding: 56px 0; border-top: 1px solid var(--t-bezel-line); }
.p-eyebrow { margin: 0 0 10px; font: 700 .75rem/1.3 var(--t-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--t-led-g); }
.p-h2 { margin: 0; font: 800 clamp(1.875rem, 5.6vw, 3.75rem)/1 var(--t-mono); letter-spacing: -.05em; color: var(--t-label); max-width: 18ch; }
.p-sub { margin: 14px 0 0; max-width: 56ch; color: var(--t-dim); font-size: 1rem; line-height: 1.6; }
.p-screens { display: grid; gap: 22px; margin-top: 32px; align-items: start; }
@media (min-width: 1024px) { .p-screens { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; } }
.p-cap { margin: 10px 0 0; font: 500 .8125rem/1.4 var(--t-mono); color: var(--t-dim); }
.p-ledkey { display: grid; gap: 0; margin-top: 32px; padding: 0; list-style: none; border: 1px solid var(--t-bezel-line); border-radius: 6px; overflow: hidden; }
.p-ledkey li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px 14px; padding: 16px 18px; background: var(--t-bezel); border-top: 1px solid var(--t-bezel-line); }
.p-ledkey li:first-child { border-top: 0; }
.p-ledkey i { grid-row: 1 / span 2; width: 14px; height: 14px; margin-top: 3px; border-radius: 50%; background: var(--t-led-g); box-shadow: 0 0 10px rgb(from var(--t-led-g) r g b / .7); }
.p-ledkey .t-la i { background: var(--t-led-a); box-shadow: 0 0 10px rgb(from var(--t-led-a) r g b / .7); }
.p-ledkey .t-lb i { background: var(--t-led-b); box-shadow: 0 0 10px rgb(from var(--t-led-b) r g b / .7); }
.p-ledkey b { font: 800 .8125rem/1.3 var(--t-mono); text-transform: uppercase; letter-spacing: .1em; }
.p-ledkey span { color: var(--t-dim); font-size: .9375rem; }
@media (min-width: 900px) { .p-ledkey { grid-template-columns: repeat(5, minmax(0, 1fr)); } .p-ledkey li { border-top: 0; border-left: 1px solid var(--t-bezel-line); grid-template-columns: minmax(0, 1fr); } .p-ledkey li:first-child { border-left: 0; } .p-ledkey i { grid-row: auto; } }
.p-shot { display: grid; gap: 24px; align-items: start; margin-top: 32px; }
.p-shot figure { margin: 0; padding: 12px; background: var(--t-label); border-radius: 6px; }
.p-shot figure::before { content: ""; display: block; width: 64px; height: 20px; margin: 0 0 10px; background-image: repeating-linear-gradient(90deg, var(--t-term) 0 2px, transparent 2px 3px, var(--t-term) 3px 4px, transparent 4px 6px, var(--t-term) 6px 9px, transparent 9px 10px); }
.p-shot img { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--t-bezel-line); box-shadow: 0 30px 60px -30px rgb(from var(--t-black) r g b / .8); }
.p-shot ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: p; }
.p-shot li { counter-increment: p; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; padding: 14px 16px; background: var(--t-label); color: var(--t-term); border-radius: 4px; }
.p-shot li::before { content: "0" counter(p); grid-row: 1 / span 2; font: 800 1.75rem/1 var(--t-mono); letter-spacing: -.04em; }
.p-shot li b { font: 800 .875rem/1.3 var(--t-mono); text-transform: uppercase; letter-spacing: .06em; }
.p-shot li span { color: var(--t-paper-muted); font-size: .9375rem; }
@media (min-width: 1024px) { .p-shot { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; } }
/* price and sign-in */
.p-deal { display: grid; gap: 22px; margin-top: 32px; }
@media (min-width: 1024px) { .p-deal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; } }
.p-price { background: var(--t-label); color: var(--t-term); border-radius: 6px; padding: 22px; display: grid; gap: 14px; align-content: start; }
.p-price .t-tag { color: var(--t-paper-muted); }
.p-amt { margin: 0; font: 800 clamp(3.5rem, 12vw, 6rem)/.9 var(--t-mono); letter-spacing: -.06em; }
.p-amt small { font-size: 1rem; letter-spacing: 0; font-weight: 600; color: var(--t-paper-muted); }
.p-price ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .9375rem; }
.p-price li { display: flex; gap: 10px; align-items: baseline; }
.p-price li::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--t-green); }
.p-ossie { background: var(--t-bezel); border: 1px solid var(--t-bezel-line); border-radius: 6px; padding: 22px; display: grid; gap: 14px; align-content: start; }
.p-ossie h3 { margin: 0; font: 800 1.75rem/1.1 var(--t-mono); letter-spacing: -.04em; color: var(--t-label); }
.p-ossie p { margin: 0; color: var(--t-dim); line-height: 1.6; }
.p-ossie .p-cta { margin-top: 4px; }
.p-pub .k-foot { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 28px 16px 40px; max-width: 1320px; margin: 0 auto; font-family: var(--t-mono); font-size: .75rem; color: var(--t-dim); border-top: 1px solid var(--t-bezel-line); }
.p-pub .k-foot a { color: var(--t-dim); }
@media (min-width: 1024px) { .p-pub .k-foot { padding: 28px 40px 48px; } }
/* privacy */
.p-prose { max-width: 760px; margin: 32px auto 56px; padding: 26px 22px; background: var(--t-label); color: var(--t-term); border-radius: 6px; }
.p-prose h1 { margin: 0 0 12px; font: 800 clamp(2rem, 6vw, 3rem)/1 var(--t-mono); letter-spacing: -.05em; }
.p-prose h2 { margin: 28px 0 6px; font: 800 .875rem/1.3 var(--t-mono); text-transform: uppercase; letter-spacing: .1em; }
.p-prose p, .p-prose li { font-size: .9375rem; line-height: 1.65; color: var(--t-term); }
.p-prose ul { padding-left: 20px; margin: 8px 0; }
.p-prose a { color: var(--t-paper-link); }
.p-prose .tip { padding: 12px 14px; border-radius: 4px; background: var(--t-paper-warning); color: var(--t-term); font-family: var(--t-mono); font-size: .8125rem; }
.blank { background: var(--t-paper-warning); box-shadow: inset 0 -2px 0 var(--t-paper-warning-line); border-radius: 2px; padding: 0 3px; }

/* reduced motion: the LEDs light without the pulse; the kit's own animations stop too */
@media (prefers-reduced-motion: reduce) {
  .k-app *, .k-app *::before, .k-app *::after { animation: none !important; transition: none !important; }
  .p-rack { transform: none; }
}

/* ---------- odds and ends ---------- */
@media (min-width: 1024px) { body.k-app.k-public { display: block; } }
.t-pad { padding: 14px 16px; }
.t-link { font: 600 .8125rem/1.2 var(--t-mono); color: var(--t-led-b); }
.t-code.t-usr::before { content: "USER"; }
.t-code.t-svcp::before { content: "SVC"; }
@media (min-width: 640px) { .t-term .t-cal { width: 120px; min-width: 120px; } }
.t-next { display: grid; gap: 6px; padding: 12px 14px; background: var(--t-console-bg); border: 1px solid var(--t-led-b); border-radius: 4px; color: var(--t-label); }
.t-next-item { display: grid; gap: 4px; margin: 0; }
.t-next-k { font: 800 .6875rem/1.2 var(--t-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--t-led-b); }
.t-next b { font: 800 1.25rem/1.2 var(--t-mono); color: var(--t-led-b); font-variant-numeric: tabular-nums; }
.t-nowrap { white-space: nowrap; }
.t-next, .t-next-item, .k-app .k-account > p:first-child b { min-width: 0; overflow-wrap: anywhere; }
.t-next > .k-note { margin: 0; color: var(--t-dim); }
.t-nextvisit .k-empty { background: transparent; border-color: var(--t-bezel-line); color: var(--t-dim); }
.t-nextvisit .k-empty h3 { color: var(--t-label); }
.t-term .t-svc .k-empty { background: transparent; border-color: var(--t-bezel-line); color: var(--t-dim); }
.t-term .t-svc .k-empty h3 { color: var(--t-label); }
.t-term > .k-help { color: var(--t-dim); }
.t-reply .k-form { gap: 12px; }
.t-leds { flex-wrap: wrap; }
@media (max-width: 480px) {
  .t-pulled { padding: 14px 12px 16px; }
  .t-pulled .t-leds { gap: 10px; }
  .t-pulled .t-led { min-width: 30px; font-size: .625rem; }
  .t-pulled .t-led i { width: 15px; height: 15px; }
  .t-pulled .t-panel { padding: 10px; }
  .t-leds { gap: 8px; }
}
.t-sec-h a, .k-section-head a, .t-term-bar a { display: inline-flex; align-items: center; min-height: 32px; }
/* the public pages are a dark poster in both schemes */
body.k-app.p-pub {
  --t-page: var(--t-term); --t-plate: var(--t-bezel); --t-plate-2: var(--t-bezel-2); --t-ink: var(--t-label); --t-muted: var(--t-dim); --t-line: var(--t-bezel-line);
  --t-green: var(--t-led-g); --t-blue: var(--t-led-b); --t-amber: var(--t-led-a);
  --k-bg: var(--t-term); --k-surface: var(--t-bezel); --k-surface-2: var(--t-bezel-2); --k-text: var(--t-label); --k-muted: var(--t-dim); --k-line: var(--t-bezel-line); --k-brand: var(--t-led-g); --k-brand-ink: var(--t-term);
  background: var(--t-term); color: var(--t-label); color-scheme: dark;
}
.p-price .t-tag, .p-pulled .t-tag { grid-area: auto; }
.p-price .t-tag { margin: 0; }
.p-price .p-amt small { display: block; margin-top: 6px; }
.t-unit .t-said { display: block; -webkit-line-clamp: unset; overflow: visible; }
/* A ticket the client just raised has no stage or reply until Ossie answers: it shows as New, with no empty prompt. */
.t-unit .t-said:empty { display: none; }
.t-panel:not([data-k-state]) .t-l1 i { background: var(--t-led-g); box-shadow: 0 0 10px 2px rgb(from var(--t-led-g) r g b / .8); }
.t-panel:not([data-k-state]) .t-l1 { color: var(--t-label); }
.s-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .9375rem; }
.s-checks li { display: flex; gap: 10px; align-items: flex-start; color: var(--t-ink); }
.s-checks .k-i { flex: none; color: var(--t-green); margin-top: 3px; }
.t-sheet .k-pair { grid-template-columns: minmax(0, 1fr); }
.t-sheet .k-pair select { width: 100%; }

/* a fixed dark error line stays readable in both schemes; the kit's red is for light paper only */
.k-app [data-pl-status][data-state="error"]:not(:empty)::after { color: var(--t-error-on-dark); }
/* Save profile: the Signal Green key, like every other primary button */
.k-app .k-account form:has(input[type="text"], select, textarea) button { background: var(--t-led-g); color: var(--t-term); }

/* ---------- round 3: account panel, sticky side panels, narrow labels ---------- */
/* Account: sign-in, devices and profile sit in a dark rack panel; leaving is a light danger box */
.k-app .k-account { padding: 12px; background: var(--t-term); border: 1px solid var(--t-bezel-line); border-radius: 6px; }
.k-app .k-account > p:first-child, .k-app .k-account ul, .k-app .k-account form:has(input[type="text"], select, textarea) { background: var(--t-bezel); color: var(--t-label); border: 1px solid var(--t-bezel-line); box-shadow: none; }
.k-app .k-account > p:first-child { font: 600 .8125rem/1.4 var(--t-mono); letter-spacing: .02em; }
.k-app .k-account > p:first-child b { color: var(--t-label); }
.k-app .k-account li + li { border-top-color: var(--t-bezel-line); }
.k-app .k-account > form:not(:has(input:not([type="hidden"]), select, textarea)) > button { background: var(--t-bezel); color: var(--t-label); border: 1px solid var(--t-bezel-line); font: 700 .8125rem/1.2 var(--t-mono); text-transform: uppercase; letter-spacing: .08em; }
.k-app .k-account > form:not(:has(input:not([type="hidden"]), select, textarea)) > button::after { border-color: var(--t-dim); }
.k-app .k-account > form:not(:has(input:not([type="hidden"]), select, textarea)) > button:hover { background: var(--t-bezel-2); }
.k-app .k-account form:has(input[type="text"], select, textarea) label { color: var(--t-dim); }
.k-app .k-account form:has(input[type="checkbox"]) { background: var(--t-term); color: var(--t-label); border: 1px solid var(--t-error-on-dark); }
.k-app .k-account form:has(input[type="checkbox"]) small, .k-app .k-account form:has(input[type="checkbox"]) label { color: var(--t-dim); }
.k-app .k-account form:has(input[type="checkbox"]) button { color: var(--t-error-on-dark); box-shadow: inset 0 0 0 1.5px currentColor; background: transparent; line-height: 1.3; padding: 12px 16px; white-space: normal; }
/* side panels stay in view beside a long main column (desktop only) */
@media (min-width: 1024px) { .k-app .k-sticky { position: sticky; top: 24px; align-self: start; } }
@media (max-width: 479px) { .t-role { display: none; } }
@media (max-width: 479px) { .t-urg { display: none; } }
/* the app is dark in both schemes: the terminal tokens above apply either way; this only tells the browser its scheme */
@media (prefers-color-scheme: dark) { :root { color-scheme: dark; } }