/* ════════════════════════════════════════════════════════════════════
   OS-KIT — shared foundation for the Open Summit HUD component set.
   Source of truth for the eight mockup components. Every component
   consumes THESE tokens/utilities; no component defines its own hexes.
   Palette read from the approved mockups: near-black ground, warm cream
   display, flat signal red, electric teal. Mono = machine voice,
   condensed display = headlines/numerals.
   ═══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=JetBrains+Mono:wght@400;500;600;700;800&display=swap');

:root {
  /* ground */
  --k-void: #050506;
  --k-bg: #0a0b0d;          /* component panel ground */
  --k-panel: #0e0f12;       /* raised cell */
  --k-well: #101216;        /* input wells */

  /* ink */
  --k-cream: #ece5d8;       /* big display numerals / headlines */
  --k-white: #f5f2ec;
  --k-dim: rgba(236, 229, 216, 1);      /* no grey text: standing rule */
  --k-faint: rgba(236, 229, 216, 0.9);  /* no grey text: standing rule */
  --k-ghost: rgba(236, 229, 216, 0.14);   /* ghost outline text stroke */

  /* signals */
  --k-red: #e8483f;         /* flat UI red — buttons, LIVE, alerts */
  --k-red-bright: #ff3b3b;  /* glow / accent red */
  --k-red-deep: #8f1f1c;
  --k-teal: #00e5cc;
  --k-teal-dim: rgba(0, 229, 204, 0.55);
  --k-grad: linear-gradient(90deg, var(--k-red) 0%, var(--k-teal) 100%);

  /* lines */
  --k-line: rgba(255, 255, 255, 0.16);
  --k-line-soft: rgba(255, 255, 255, 0.08);
  --k-line-strong: rgba(255, 255, 255, 0.4);

  /* type */
  --k-display: 'Anton', 'Arial Narrow', sans-serif;      /* condensed caps */
  --k-mono: 'JetBrains Mono', ui-monospace, monospace;   /* machine voice */

  /* geometry */
  --k-notch: 22px;          /* corner cut size */
  --k-notch-sm: 12px;

  --k-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ── base ─────────────────────────────────────────────────────────── */
.k-stage {
  background: var(--k-void);
  color: var(--k-cream);
  font-family: var(--k-mono);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(24px, 5vw, 72px);
}
.k-stage *, .k-stage *::before, .k-stage *::after { box-sizing: border-box; }

/* ── machine label: TRX—27 / PRT—00 / STS—00 ─────────────────────── */
.k-tag {
  font-family: var(--k-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--k-faint);
}
.k-tag--lit { color: var(--k-teal); }
.k-tag--red { color: var(--k-red); }

/* square status bullet ▪ */
.k-bit {
  display: inline-block;
  inline-size: 9px;
  block-size: 9px;
  background: var(--k-red);
  vertical-align: 1px;
}
.k-bit--teal { background: var(--k-teal); }
.k-bit--blink { animation: k-blink 1.1s steps(2, start) infinite; }
@keyframes k-blink { to { visibility: hidden; } }

/* ── condensed display type ──────────────────────────────────────── */
.k-display {
  font-family: var(--k-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.94;
  letter-spacing: 0.015em;
  color: var(--k-cream);
}

/* ghost outline type (decorative — always aria-hidden) */
.k-ghost-stroke {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--k-ghost);
}
.k-ghost-stroke--teal { -webkit-text-stroke: 1.5px rgba(0, 229, 204, 0.5); }

/* ── notched frame (top-right corner cut, mockup signature) ──────── */
.k-notch {
  clip-path: polygon(
    0 0,
    calc(100% - var(--k-notch)) 0,
    100% var(--k-notch),
    100% 100%,
    0 100%
  );
}
.k-notch-sm { --k-notch: var(--k-notch-sm); }
/* bordered notch needs a wrapper: .k-notch-frame > .k-notch */
.k-notch-frame {
  position: relative;
  background: var(--k-line);
  clip-path: polygon(0 0, calc(100% - var(--k-notch)) 0, 100% var(--k-notch), 100% 100%, 0 100%);
  padding: 1px;
}
.k-notch-frame > .k-notch { background: var(--k-bg); block-size: 100%; }
.k-notch-frame--grad { background: var(--k-grad); }

/* ── corner registration brackets ────────────────────────────────── */
.k-brackets { position: relative; }
.k-brackets::before, .k-brackets::after,
.k-brackets .k-bl, .k-brackets .k-br {
  content: "";
  position: absolute;
  inline-size: 14px;
  block-size: 14px;
  border: 1.5px solid var(--k-line-strong);
  pointer-events: none;
}
.k-brackets::before { inset-block-start: -1px; inset-inline-start: -1px; border-inline-end: 0; border-block-end: 0; }
.k-brackets::after  { inset-block-start: -1px; inset-inline-end: -1px; border-inline-start: 0; border-block-end: 0; }
.k-brackets .k-bl   { inset-block-end: -1px; inset-inline-start: -1px; border-inline-end: 0; border-block-start: 0; }
.k-brackets .k-br   { inset-block-end: -1px; inset-inline-end: -1px; border-inline-start: 0; border-block-start: 0; }
.k-brackets--red::before, .k-brackets--red::after,
.k-brackets--red .k-bl, .k-brackets--red .k-br { border-color: var(--k-red); }
.k-brackets--teal::before, .k-brackets--teal::after,
.k-brackets--teal .k-bl, .k-brackets--teal .k-br { border-color: var(--k-teal); }

/* ── pixel cluster (decorative data-dust; JS fills spans) ────────── */
.k-pixels {
  display: grid;
  grid-template-columns: repeat(var(--k-px-cols, 10), 5px);
  gap: 3px;
  pointer-events: none;
}
.k-pixels i { inline-size: 5px; block-size: 5px; background: var(--k-px, #333); }

/* ── ruler ticks ─────────────────────────────────────────────────── */
.k-ruler-x, .k-ruler-y { position: relative; pointer-events: none; }
.k-ruler-x {
  block-size: 10px;
  background: repeating-linear-gradient(90deg,
    var(--k-line) 0 1px, transparent 1px 9px);
}
.k-ruler-x--major {
  background:
    repeating-linear-gradient(90deg, var(--k-line-strong) 0 1px, transparent 1px 45px),
    repeating-linear-gradient(90deg, var(--k-line) 0 1px, transparent 1px 9px);
}
.k-ruler-y {
  inline-size: 10px;
  background: repeating-linear-gradient(0deg,
    var(--k-line) 0 1px, transparent 1px 9px);
}

/* ── scanline texture overlay ────────────────────────────────────── */
.k-scan { position: relative; }
.k-scan::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg,
    transparent 0 2px, rgba(0, 0, 0, 0.28) 2px 3px);
}

/* faint vertical pinstripe on panels (mockups show it in big letterforms) */
.k-pinstripe {
  background-image: repeating-linear-gradient(90deg,
    rgba(255,255,255,0.02) 0 1px, transparent 1px 7px);
}

/* ── gradient hairline edges ─────────────────────────────────────── */
.k-edge-grad-top { border-block-start: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--k-red), var(--k-teal)) 1; }
.k-edge-grad-bottom { border-block-end: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--k-red), var(--k-teal)) 1; }

/* ── buttons ─────────────────────────────────────────────────────── */
.k-btn {
  font-family: var(--k-mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-block-size: 52px;
  padding: 0 30px;
  cursor: pointer;
  border: 0;
  transition: filter 160ms var(--k-ease), transform 140ms var(--k-ease);
}
.k-btn:active { transform: scale(0.98); }
.k-btn:focus-visible { outline: 2px solid var(--k-teal); outline-offset: 3px; }
.k-btn--red { background: var(--k-red); color: var(--k-white); }
.k-btn--red:hover { filter: brightness(1.1); }
.k-btn--outline {
  background: transparent;
  color: var(--k-cream);
  border: 1px solid var(--k-line-strong);
}
.k-btn--outline:hover { border-color: var(--k-cream); }
.k-btn .k-arrow { font-family: var(--k-mono); letter-spacing: 0; }

/* gradient-framed button (poster REGISTER INTEREST) */
.k-btn-gradframe {
  position: relative;
  background: var(--k-grad);
  padding: 1.5px;
  display: inline-flex;
}
.k-btn-gradframe .k-btn { inline-size: 100%; background: var(--k-void); color: var(--k-white); }
.k-btn-gradframe .k-btn:hover { background: #15090a; }

/* ── split-flap cell (agenda times / countdown digits) ───────────── */
.k-flap {
  font-family: var(--k-display);
  color: var(--k-cream);
  background: #141414;
  border-radius: 4px;
  position: relative;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), inset 0 -6px 12px rgba(0,0,0,0.55);
}
.k-flap::after {              /* the horizontal split seam */
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 50%;
  block-size: 2px;
  transform: translateY(-1px);
  background: rgba(0, 0, 0, 0.75);
}
.k-flap::before {             /* side pivots */
  content: "";
  position: absolute;
  inset-block-start: calc(50% - 3px);
  inset-inline: -1px;
  block-size: 6px;
  background:
    linear-gradient(90deg, #000 0 3px, transparent 3px calc(100% - 3px), #000 calc(100% - 3px));
  z-index: 2;
}

/* ── LIVE pill ───────────────────────────────────────────────────── */
.k-live {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--k-red);
  color: var(--k-white);
  font-family: var(--k-mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.3em;
  padding: 7px 14px;
}
.k-live i {
  inline-size: 8px; block-size: 8px; background: var(--k-white);
  animation: k-blink 1s steps(2, start) infinite;
}

/* ── barcode (decorative) ────────────────────────────────────────── */
.k-barcode {
  background: repeating-linear-gradient(90deg,
    var(--k-bar, var(--k-cream)) 0 2px, transparent 2px 5px,
    var(--k-bar, var(--k-cream)) 5px 9px, transparent 9px 11px,
    var(--k-bar, var(--k-cream)) 11px 12px, transparent 12px 17px);
}

/* ── reduced motion: everything settles instantly ────────────────── */
@media (prefers-reduced-motion: reduce) {
  .k-stage *, .k-stage *::before, .k-stage *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}