/* ═══════════════════════════════════════════════════════════════════
   PHLOEM — COMPONENTS · v0.2
   Depends on tokens.css
   All class names prefixed .phl- to avoid collisions.
   ═══════════════════════════════════════════════════════════════════ */

/* ── TYPOGRAPHY UTILITIES ────────────────────────── */
.phl-display {
  font-family: var(--phl-sans); font-weight: 300;
  font-size: var(--phl-t-display); line-height: var(--phl-lh-tight);
  letter-spacing: var(--phl-tr-display); color: var(--phl-text-display);
  margin: 0;
}
.phl-display em { font-family: var(--phl-serif); font-style: italic; font-weight: 300; color: var(--phl-hi); letter-spacing: -0.015em; }

.phl-hero {
  font-family: var(--phl-sans); font-weight: 300;
  font-size: var(--phl-t-hero); line-height: 0.82;
  letter-spacing: var(--phl-tr-hero); color: var(--phl-white);
  margin: 0;
}
.phl-hero .ser, .phl-hero em {
  font-family: var(--phl-serif); font-style: italic; font-weight: 300;
  font-size: 0.82em; color: var(--phl-hi); letter-spacing: -0.02em;
}

.phl-h1 { font-family: var(--phl-sans); font-weight: 400; font-size: var(--phl-t-h1); line-height: 1; letter-spacing: -0.03em; margin: 0; color: var(--phl-white); }
.phl-h2 { font-family: var(--phl-sans); font-weight: 400; font-size: var(--phl-t-h2); line-height: 1.05; letter-spacing: -0.025em; margin: 0; color: var(--phl-text); }
.phl-h3 { font-family: var(--phl-sans); font-weight: 500; font-size: var(--phl-t-h3); line-height: 1.15; letter-spacing: -0.01em; margin: 0; color: var(--phl-text); }
.phl-lede {
  font-family: var(--phl-serif); font-style: italic; font-weight: 300;
  font-size: 34px; line-height: 1.15; letter-spacing: -0.01em;
  color: var(--phl-text); margin: 0;
}
.phl-lede b { font-family: var(--phl-sans); font-style: normal; font-weight: 500; color: var(--phl-text-display); letter-spacing: -0.02em; }
.phl-body { font-family: var(--phl-sans); font-weight: 400; font-size: var(--phl-t-body); line-height: var(--phl-lh-body); color: var(--phl-text-muted); max-width: 52ch; margin: 0; }
.phl-body-serif { font-family: var(--phl-serif); font-weight: 300; font-size: var(--phl-t-lede); line-height: var(--phl-lh-body); color: var(--phl-text-muted); }
.phl-mono { font-family: var(--phl-mono); font-size: var(--phl-t-meta); color: var(--phl-text-meta); letter-spacing: var(--phl-tr-mono); }
.phl-ui {
  font-family: var(--phl-sans); font-weight: 500; font-size: var(--phl-t-meta);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--phl-text-muted);
}
.phl-eyebrow {
  font-family: var(--phl-mono); font-size: var(--phl-t-micro);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--phl-text-meta);
}
.phl-eyebrow .dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--phl-accent); margin-right: 8px; vertical-align: middle;
}
.phl-pulse { animation: phl-tick 1.6s steps(2) infinite; }
@keyframes phl-tick { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0.3; } }

/* inline serif italic fragment inside a sans heading */
.phl-ser { font-family: var(--phl-serif); font-style: italic; font-weight: 300; color: var(--phl-hi); letter-spacing: -0.015em; }

/* ── BUTTONS ─────────────────────────────────────── */
.phl-btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--phl-sans); font-weight: 500; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 14px 20px; min-height: 44px;
  border: 1px solid var(--phl-border-hi); background: transparent; color: var(--phl-text);
  cursor: pointer;
  transition: border-color var(--phl-dur-med) var(--phl-ease),
              background var(--phl-dur-med) var(--phl-ease),
              color var(--phl-dur-med) var(--phl-ease);
}
.phl-btn:hover { border-color: var(--phl-text); color: var(--phl-text-display); }
.phl-btn::after { content: ""; width: 14px; height: 1px; background: currentColor; }
.phl-btn--prime { background: var(--phl-bone); color: var(--phl-void); border-color: var(--phl-bone); }
.phl-btn--prime:hover { background: var(--phl-accent); border-color: var(--phl-accent); color: var(--phl-void); }
.phl-btn--signal { border-color: var(--phl-accent); color: var(--phl-accent); }
.phl-btn--signal:hover { background: var(--phl-accent); color: var(--phl-void); }
.phl-btn--ghost { border-color: transparent; color: var(--phl-text-muted); padding-left: 0; padding-right: 0; }
.phl-btn--ghost:hover { color: var(--phl-text); }

/* ── INPUT / INTIMATION ─────────────────────────── */
.phl-field {
  border: 1px solid var(--phl-border-hi);
  display: grid; grid-template-columns: 1fr auto;
}
.phl-field input {
  background: transparent; border: 0; outline: 0;
  padding: 14px 16px;
  font-family: var(--phl-sans); font-size: 13px; color: var(--phl-text);
}
.phl-field input::placeholder { color: var(--phl-text-dim); }
.phl-field button {
  font-family: var(--phl-sans); font-weight: 500; font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 0 18px;
  background: var(--phl-bone); color: var(--phl-void);
  border: 0; border-left: 1px solid var(--phl-border-hi);
  cursor: pointer;
}

/* ── CHIP / STATUS ──────────────────────────────── */
.phl-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--phl-mono); font-size: 10px; letter-spacing: 0.04em;
  padding: 5px 10px; border: 1px solid var(--phl-border-hi); color: var(--phl-text-muted);
}
.phl-chip .d { width: 5px; height: 5px; border-radius: 50%; background: var(--phl-accent); }
.phl-chip .d--warn { background: var(--phl-danger); }
.phl-chip .d--mid  { background: var(--phl-mid); }

/* ── DATA ROW ─────────────────────────────────── */
.phl-row {
  display: grid; grid-template-columns: 1fr auto; gap: 16px;
  padding: 10px 0; border-bottom: 1px solid var(--phl-border);
  font-family: var(--phl-mono); font-size: 11px; color: var(--phl-text-muted);
}
.phl-row:last-child { border-bottom: 0; }
.phl-row b { color: var(--phl-text); font-weight: 400; }

/* ── TAPE / STICKY HEADER ──────────────────────── */
.phl-tape {
  border-top: var(--phl-stroke); border-bottom: var(--phl-stroke);
  display: grid;
  grid-template-columns: var(--phl-rail-l) 1fr 1fr 1fr 1fr var(--phl-rail-r);
  align-items: center;
  font-family: var(--phl-mono); font-size: 10.5px;
  letter-spacing: 0.04em; color: var(--phl-text-meta);
  position: sticky; top: 0; z-index: 50; background: var(--phl-bg);
}
.phl-tape > * { padding: 10px 14px; border-left: var(--phl-stroke); }
.phl-tape > :first-child { border-left: 0; }
.phl-tape .live { color: var(--phl-accent); }
.phl-tape nav { display: flex; gap: 18px; justify-content: flex-end; }
.phl-tape nav a { color: var(--phl-text-muted); text-transform: uppercase; }
.phl-tape nav a:hover { color: var(--phl-text); }

/* ── FILEHEAD / SECTION HEADER ─────────────────── */
.phl-filehead {
  display: grid;
  grid-template-columns: var(--phl-rail-l) 1fr 1fr 1fr 1fr var(--phl-rail-r);
  border-bottom: var(--phl-stroke);
  font-family: var(--phl-mono); font-size: 10.5px;
  color: var(--phl-text-meta);
}
.phl-filehead > * { padding: 18px 14px; border-left: var(--phl-stroke); }
.phl-filehead > :first-child { border-left: 0; color: var(--phl-text); }
.phl-filehead .k { color: var(--phl-text-dim); display: block; margin-bottom: 4px; font-size: 9.5px; }
.phl-filehead .v { color: var(--phl-text-muted); }

/* ── GRID / BAY — section body ─────────────────── */
.phl-bay {
  display: grid;
  grid-template-columns: var(--phl-rail-l) 1fr 1fr 1fr 1fr var(--phl-rail-r);
}
.phl-bay > * { border-left: var(--phl-stroke); padding: var(--phl-pad-cell); }
.phl-bay > :first-child { border-left: 0; }

/* ── IX — left index column ──────────────────── */
.phl-ix {
  font-family: var(--phl-mono); font-size: 10.5px;
  color: var(--phl-text-meta);
  display: flex; flex-direction: column; gap: 14px;
  padding: var(--phl-s-7) 14px !important;
}
.phl-ix .no {
  font-family: var(--phl-serif); font-style: italic; font-size: 40px;
  color: var(--phl-text-muted); letter-spacing: -0.02em; line-height: 1; font-weight: 200;
}
.phl-ix .ttl { color: var(--phl-text); text-transform: uppercase; letter-spacing: 0.14em; font-size: 10px; }
.phl-ix .sub { color: var(--phl-text-meta); font-size: 10px; line-height: 1.4; }

/* ── RX — right meta column ──────────────────── */
.phl-rx {
  font-family: var(--phl-mono); font-size: 10px;
  color: var(--phl-text-meta);
  display: flex; flex-direction: column; gap: 10px;
  padding: var(--phl-s-7) 14px !important;
  text-align: right;
}
.phl-rx .v { color: var(--phl-text-muted); }

/* ── SECTION WRAPPER ─────────────────────────── */
.phl-section { border-bottom: var(--phl-stroke); position: relative; }

/* ── HERO ────────────────────────────────────── */
.phl-hero-stage {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--phl-rail-l) 1fr 1fr 1fr 1fr var(--phl-rail-r);
  grid-template-rows: 1fr auto;
  position: relative;
  border-bottom: var(--phl-stroke);
}
.phl-hero-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0, transparent calc(var(--phl-rail-l) - 1px), var(--phl-border) calc(var(--phl-rail-l) - 1px), var(--phl-border) var(--phl-rail-l), transparent var(--phl-rail-l)),
    linear-gradient(90deg, transparent 0, transparent calc(100% - var(--phl-rail-r) - 1px), var(--phl-border) calc(100% - var(--phl-rail-r) - 1px), var(--phl-border) calc(100% - var(--phl-rail-r)), transparent calc(100% - var(--phl-rail-r)));
}
.phl-hero-stage .hero-left,
.phl-hero-stage .hero-right {
  grid-row: 1 / 2;
  padding: 28px 14px;
  display: flex; flex-direction: column; justify-content: space-between;
  font-family: var(--phl-mono); font-size: 10px; color: var(--phl-text-meta);
}
.phl-hero-stage .hero-left { grid-column: 1 / 2; border-right: var(--phl-stroke); }
.phl-hero-stage .hero-right { grid-column: 6 / 7; border-left: var(--phl-stroke); text-align: right; }
.phl-hero-stage .hero-center {
  grid-column: 2 / 6; grid-row: 1 / 2;
  padding: 80px 36px 40px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative;
}
.phl-hero-stage .hero-foot {
  grid-column: 1 / 7; grid-row: 2 / 3;
  border-top: var(--phl-stroke);
  display: grid;
  grid-template-columns: var(--phl-rail-l) 1fr 1fr 1fr 1fr var(--phl-rail-r);
}
.phl-hero-stage .hero-foot > * { padding: 16px 14px; border-left: var(--phl-stroke); font-family: var(--phl-mono); font-size: 10px; color: var(--phl-text-meta); }
.phl-hero-stage .hero-foot > :first-child { border-left: 0; }
.phl-hero-stage .hero-foot b { display: block; color: var(--phl-text); font-weight: 500; margin-bottom: 4px; font-size: 10.5px; letter-spacing: 0.04em; }

/* ── STAMP (vertical rail text) ───────────────── */
.phl-stamp {
  writing-mode: vertical-rl; transform: rotate(180deg);
  letter-spacing: 0.3em; color: var(--phl-text-muted);
  font-family: var(--phl-mono); font-size: 10px;
}
.phl-stamp--right { transform: none; }

/* ── TILE / IMAGERY ──────────────────────────── */
.phl-tile {
  position: relative; overflow: hidden;
  border-right: var(--phl-stroke); border-bottom: var(--phl-stroke);
}
.phl-tile img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05) brightness(0.92) saturate(0.75); transition: filter var(--phl-dur-slow); }
.phl-tile:hover img { filter: contrast(1.1) brightness(1) saturate(1); }
.phl-tile .meta {
  position: absolute; top: 10px; left: 10px;
  font-family: var(--phl-mono); font-size: 9.5px;
  color: var(--phl-text); background: var(--phl-bg);
  padding: 3px 6px; border: 1px solid var(--phl-border-hi);
  letter-spacing: 0.04em;
}
.phl-tile .meta--sig { color: var(--phl-accent); border-color: var(--phl-accent); }
.phl-tile .xhair {
  position: absolute; top: 14px; right: 14px;
  width: 14px; height: 14px;
  border-right: 1px solid var(--phl-text);
  border-top:   1px solid var(--phl-text);
  opacity: 0.6;
}
.phl-tile .scale {
  position: absolute; bottom: 10px; right: 10px;
  font-family: var(--phl-mono); font-size: 9px; color: var(--phl-text);
  opacity: 0.7;
}

/* ── CARD (lab cell) ─────────────────────────── */
.phl-card {
  min-height: 320px;
  padding: var(--phl-s-5);
  display: grid; grid-template-rows: auto 1fr auto;
  gap: 14px;
  background: var(--phl-bg);
  border: var(--phl-stroke);
  position: relative;
}
.phl-card .tag { font-family: var(--phl-mono); font-size: 9.5px; color: var(--phl-text-meta); display: flex; justify-content: space-between; }
.phl-card .art { display: grid; place-items: center; overflow: hidden; }
.phl-card .cap { font-family: var(--phl-sans); font-size: 11.5px; color: var(--phl-text-muted); line-height: 1.45; }
.phl-card .cap b { color: var(--phl-text); font-weight: 500; display: block; margin-bottom: 4px; }

/* ── LABELS pinned on diagrams ───────────────── */
.phl-label {
  position: absolute;
  font-family: var(--phl-mono); font-size: 10px;
  color: var(--phl-text-muted);
  background: var(--phl-bg); padding: 4px 8px;
  border: 1px solid var(--phl-border-hi);
  white-space: nowrap;
}
.phl-label .v { color: var(--phl-text-meta); display: block; font-size: 9.5px; margin-top: 2px; }

/* ── SLIDE SHELL (for deck-stage sections) ───── */
.phl-slide {
  width: 100%; height: 100%;
  background: var(--phl-bg); color: var(--phl-text);
  font-family: var(--phl-sans);
  position: relative;
  overflow: hidden;
}
.phl-slide.phl-slide--grid {
  display: grid;
  grid-template-columns: var(--phl-rail-l) 1fr var(--phl-rail-r);
}
.phl-slide.phl-slide--grid > * { border-left: var(--phl-stroke); padding: var(--phl-s-10) var(--phl-s-7); }
.phl-slide.phl-slide--grid > :first-child { border-left: 0; }

/* ── PRINT ───────────────────────────────────── */
@media print {
  @page { size: A3 landscape; margin: 0.6cm; }
  html, body { background: var(--phl-bg) !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  *, *::before, *::after { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; animation: none !important; transition: none !important; }
  .phl-tape { position: static !important; }
  .phl-section, .phl-slide { break-inside: avoid; page-break-inside: avoid; break-after: page; page-break-after: always; }
}