/* style.css — LAB.KLMN.TV consolidated
   Single grid system (grid.js v2), glass buttons, KLMN brand.
   All hero layout handled by grid.js — no media queries for hero. */

/* ── 1. Reset + Base ── */

*, *::before, *::after { box-sizing: border-box }

html, body {
  margin: 0; padding: 0;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

body {
  font-family: 'IBM Plex Mono', monospace;
  background: #fff;
  color: #000;
  -webkit-text-size-adjust: 100%;
}

a { color: inherit; text-decoration: none }
a:hover { opacity: 0.8 }

/* ── 2. Fonts — ONLY Extended Variable ── */

@font-face {
  font-family: 'OnlyExtended';
  src: url('/fonts/only/OnlyExtendedVF-Roman.woff2') format('woff2-variations'),
       url('/fonts/only/OnlyExtendedVF-Roman.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'OnlyExtended';
  src: url('/fonts/only/OnlyExtendedVF-Italic.woff2') format('woff2-variations'),
       url('/fonts/only/OnlyExtendedVF-Italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ── 3. Hero — full viewport, grid.js positioned ── */

.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  color: #fff;
}

/* Light background mode */
.hero.lt { color: #000 }

/* ── 4. Grid Elements ── */

/* Corners — sized + positioned by grid.js layFrame() */
.corner {
  position: absolute;
  z-index: 10;
}
.corner svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Lab logo — centered horizontally, top positioned by grid.js */
.logo {
  position: absolute;
  z-index: 10;
  left: 50%;
  transform: translateX(-50%);
}
.logo img {
  height: 100%;
  width: auto;
  display: block;
}

/* OnlyExtended letter-spacing: 0 at content sizes (<40px).
   Only the large hero headline (.hl) gets tight -0.04em tracking. */
.bigbtn { letter-spacing: 0; }

/* ── Canonical OnlyExtended size classes — used by index, output, date ── */
.ohl-lg {
  font-family: 'OnlyExtended', sans-serif;
  font-weight: 900;
  font-size: 40px;
  line-height: 0.88;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.ohl-sm {
  font-family: 'OnlyExtended', sans-serif;
  font-weight: 900;
  font-size: 20px;
  line-height: 0.88;
  letter-spacing: 0;
  text-transform: uppercase;
}
@media (orientation: portrait) {
  .ohl-lg { font-size: 36px; }
  .ohl-sm { font-size: 18px; }
}

/* Hero headline text — layout complement to .ohl-lg.
   Typography (font/size/weight/tracking) comes from .ohl-lg.
   Used by index.php and date.php. */
.hero-hl-text {
  overflow-wrap: break-word;
  word-break: break-word;
  width: 100%;
  text-align: center;
  color: inherit;
}

/* Responsive line breaks inside .ohl-lg headlines — index.php + date.php.
   All hidden by default; media queries activate the correct set. */
br.br-m, br.br-p, br.br-l { display: none; }
@media (orientation: portrait) and (max-width: 600px)  { br.br-m { display: block; } }
@media (orientation: portrait) and (min-width: 601px)  { br.br-p { display: block; } }
@media (orientation: landscape)                        { br.br-l { display: block; } }

/* Headline wrapper — positioned by grid.js */
.hl {
  position: absolute;
  z-index: 10;
  font-family: 'OnlyExtended', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: -0.04em; /* large size only: 40px+ */
}
.hero.lt .hl { color: #000acb }
.hl span {
  display: block;
}

/* Generic content cell — positioned by grid.js */
.cell {
  position: absolute;
  z-index: 10;
  overflow: hidden;
}

/* Foot mark — centered bottom, sized by grid.js */
.foot-mark {
  position: absolute;
  z-index: 10;
  overflow: hidden;
}
.foot-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Edge labels — positioned by grid.js layEdgeLabels() */
.elbl {
  position: absolute;
  z-index: 10;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: inherit;
}

/* ── 5. Mono Typography ── */

.mono-sm {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mono {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: normal;
  word-break: break-word;
  overflow: visible;
}
.mono b { font-weight: 700 }

.mono-lg {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 16px;
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── 6. Buttons — Glass Rectangle ── */

.btn {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  margin: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.0;
  padding: 6px 8px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  white-space: nowrap;
}

/* Glass on dark backgrounds */
.btn.glass-dark {
  border: 1px solid rgba(255,255,255,0.35);
  background:
    radial-gradient(ellipse 60% 80% at 25% 15%, rgba(255,255,255,0.25) 0%, transparent 50%),
    rgba(255,255,255,0.18);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 0 12px rgba(0,255,255,0.35),
    0 0 32px rgba(0,255,255,0.2);
  color: #fff;
}
.btn.glass-dark:hover {
  border-color: rgba(255,255,255,0.55);
  background:
    radial-gradient(ellipse 60% 80% at 25% 15%, rgba(255,255,255,0.3) 0%, transparent 50%),
    rgba(255,255,255,0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    0 0 16px rgba(0,255,255,0.5),
    0 0 40px rgba(0,255,255,0.3),
    0 0 88px rgba(0,255,255,0.12);
}

/* Glass on light backgrounds */
.btn.glass-light {
  border: 1px solid rgba(0,0,0,0.06);
  background:
    radial-gradient(ellipse 60% 80% at 25% 15%, rgba(255,255,255,0.85) 0%, transparent 50%),
    rgba(255,255,255,0.78);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 0 12px rgba(0,255,255,0.2),
    0 0 32px rgba(0,255,255,0.08);
  color: #000acb;
}
.btn.glass-light:hover {
  border-color: rgba(0,0,0,0.1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 0 16px rgba(0,255,255,0.35),
    0 0 40px rgba(0,255,255,0.15),
    0 0 88px rgba(0,255,255,0.05);
}

/* Solid on dark backgrounds */
.btn.solid-dark {
  background:
    radial-gradient(ellipse 60% 80% at 25% 15%, rgba(255,255,255,0.2) 0%, transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 40%),
    #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 0 16px rgba(0,255,255,0.3),
    0 0 40px rgba(0,255,255,0.1);
  color: #000acb;
}
.btn.solid-dark:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 0 22px rgba(0,255,255,0.45),
    0 0 56px rgba(0,255,255,0.15);
}

/* Solid on light backgrounds */
.btn.solid-light {
  background:
    radial-gradient(ellipse 60% 80% at 25% 15%, rgba(255,255,255,0.25) 0%, transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 40%),
    #000acb;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    0 0 16px rgba(0,255,255,0.2),
    0 0 40px rgba(0,255,255,0.06);
  color: #fff;
}
.btn.solid-light:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    0 0 22px rgba(0,255,255,0.35),
    0 0 56px rgba(0,255,255,0.1);
}

/* Dim state for disabled pill-buttons */
.btn.dim {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

/* ── 7. Big Round Button ── */

.bigbtn {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  font-family: 'OnlyExtended', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.88;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  /* Dark bg default: solid-dark = WHITE fill, blue text, cyan glow */
  background:
    radial-gradient(
      ellipse 60% 80% at 25% 15%,
      rgba(255,255,255,0.2) 0%,
      transparent 50%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,0.08) 0%,
      transparent 40%
    ),
    #fff;
  color: #000acb;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 0 16px rgba(0,255,255,0.3),
    0 0 40px rgba(0,255,255,0.12),
    0 0 80px rgba(0,255,255,0.05);
}
.bigbtn:hover {
  transform: scale(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 0 24px rgba(0,255,255,0.45),
    0 0 56px rgba(0,255,255,0.2),
    0 0 100px rgba(0,255,255,0.08);
}
.bigbtn:active { transform: scale(0.97) }
/* Light bg: solid-light = BLUE fill, white text, cyan glow */
.hero.lt .bigbtn {
  background:
    radial-gradient(
      ellipse 60% 80% at 25% 15%,
      rgba(255,255,255,0.25) 0%,
      transparent 50%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,0.12) 0%,
      transparent 40%
    ),
    #000acb;
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    0 0 16px rgba(0,255,255,0.2),
    0 0 40px rgba(0,255,255,0.06);
}

/* ── 8. Content Section (below hero) ── */

.content-section {
  padding: 40px 16px 64px;
  background: #fff;
}

.content-inner {
  max-width: 960px;
  margin: 0 auto;
}

/* ── 9. Form Elements ── */

form:not(.cell) { display: flex; flex-direction: column; gap: 18px }

/* Form used as grid cell: zero visual, child .btn fills it */
form.cell {
  margin: 0; padding: 0;
  border: none; background: none; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  display: flex;
}
form.cell .btn { width: 100%; height: 100% }

.field-row-two {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.field-row-two .field { width: 100%; max-width: 420px }

.field { position: relative }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"] {
  width: 100%;
  padding: 10px 12px;
  border-radius: 5px;
  border: 1px solid #ddd;
  background: #fff;
  color: #000;
  font-size: 14px;
  font-family: 'IBM Plex Mono', monospace;
}
.field input::placeholder { color: #777 }

.contact-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.contact-row .field { width: 100%; max-width: 420px }

/* Hero select dropdowns — index.php + date.php, select inline in .ohl-lg headline */

/* Wrapper: inline-block sized to cap-height of surrounding OnlyExtended text.
   vertical-align: baseline aligns the bottom of the box to the text baseline,
   so top of box = cap-height. The select fills it exactly. */
.hero-select-wrapper {
  display: inline-block;
  height: 1cap;
  vertical-align: baseline;
}

/* The select itself: fills the wrapper, all px, appearance:auto preserves native arrow */
.hero-select {
  -webkit-appearance: auto;
  appearance: auto;
  box-sizing: border-box;
  width: auto;
  height: 100%;
  padding: 0 12px 2.5px;
  border-radius: 5px;
  border: 1px solid #000acb;
  background: #000acb;
  color: #fff;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transform: translateY(2.5px);
  vertical-align: top;
}
.hero-select:focus { outline: none; box-shadow: 0 0 0 2px rgba(255,255,255,0.5); }

/* Lang select sits outside .ohl-lg context — fixed height */
#langWrap .hero-select-wrapper { height: 26.5px; }
#langWrap .hero-select { font-size: 16px; transform: none; }

/* ── 10. (index.php-only styles moved to index.php inline style) ── */

/* ── 11. (index.php-only styles moved to index.php inline style) ── */

/* ── 12. (output.php-only styles moved to output.php inline style) ── */

/* ── 13. Messages ── */

.error { color: #e63946; font-size: 13px; margin-top: 6px }
.success { margin-top: 18px; font-size: 14px }
.small-note { margin-top: 16px; font-size: 11px; opacity: 0.7; text-align: center }

/* ── 14. (output.php-only responsive styles moved to output.php inline style) ── */

/* ── 15. Mobile hero text scaling ── */

@media (max-width: 500px) {
  .mono-sm { font-size: 8px }
  .mono:not(#contentSection *) { font-size: 10px }
  .mono-lg { font-size: 12px }
  .btn     { font-size: 10px; padding: 4px 8px; letter-spacing: 0.02em }
  .elbl    { font-size: 8px }
}