/* =====================================================================
   Glasshouse · landing page
   Signal's layout and components (brand/signal/signal.css, unchanged),
   tailored: the light table becomes the glass box, a preflight that checks
   this browser, with the four layers on the left and a phone showing the
   boot mark on the right. The table's light is cyan: light through glass.
   ===================================================================== */

/* ---- the mark (inline <svg><use href="#gh-mark"></svg>) ---- */
.gh-mark { --gh-frame: currentColor; --gh-phone: var(--accent); --gh-glass: color-mix(in srgb, var(--accent) 14%, transparent); }
.brand .gh-mark { width: 30px; height: 30px; margin-top: -3px; }

/* Signal's table borders and command ink are blue-grey; tint them to the glass. */
.lt-cmd { color: #cdeee8; }
.gh-lt .lt-cmd { white-space: normal; overflow-wrap: anywhere; }
.form input, .form select, .toggles button, .lt .seg, .lt .switch .sw { border-color: #213a3d; }

/* ---------------------------------------------------------------- the glass box (hero instrument) */
.gh-lt { --sweep-c: var(--glow); --sweep-a: 16%; }
.gh-stage { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-5); align-items: center; margin-top: var(--s-3); padding: var(--s-2) 2px; }
.gh-stack { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: layer; }
.gh-stack li { position: relative; }
/* The thread between layers: each one runs on the one before. */
.gh-stack li + li::before { content: ""; position: absolute; left: 22px; top: -10px; height: 10px; width: 1.5px; background: color-mix(in srgb, var(--glow) 45%, transparent); }
.gh-layer {
  width: 100%; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-areas: "n t st" "n s st"; column-gap: 12px; row-gap: 1px; align-items: center;
  padding: 10px 12px; border: 0; border-radius: var(--r-s); text-align: left; cursor: pointer; color: var(--table-ink);
  background: var(--table-glass); box-shadow: 0 0 0 1px rgba(143, 227, 255, 0.18) inset, 0 10px 24px -14px rgba(0, 0, 0, 0.7);
  transition: box-shadow var(--d-move), background-color var(--d-move);
}
.gh-layer:hover { box-shadow: 0 0 0 1.5px rgba(143, 227, 255, 0.5) inset, 0 10px 24px -14px rgba(0, 0, 0, 0.7); }
.gh-layer[aria-pressed="true"] { background: color-mix(in srgb, var(--table-glass) 80%, var(--glow)); box-shadow: 0 0 0 1.5px var(--glow) inset, 0 14px 28px -14px rgba(0, 0, 0, 0.75); }
.gh-layer:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.gh-n { grid-area: n; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 13px var(--display); font-variant-numeric: tabular-nums; color: var(--table); background: var(--glow); }
.gh-t { grid-area: t; font: 600 15px/1.25 var(--body); }
.gh-s { grid-area: s; font: 12px/1.35 var(--mono); color: var(--table-muted); overflow-wrap: anywhere; }
.gh-layer .st { grid-area: st; font-size: 12.5px; color: var(--table-ink); }
.gh-layer .st-no { color: var(--table-muted); }
.lt .st-ok::before { background: #3ccf8e; }
.lt .st-built::before { border-color: #f0b43c; }

/* A generic phone on the table, showing the boot mark. Its glass catches the table's light. */
.gh-device { position: relative; width: 132px; aspect-ratio: 9 / 19.5; padding: 7px; border-radius: 24px; background: #020607; box-shadow: 0 0 0 1.5px rgba(143, 227, 255, 0.28), 0 24px 40px -18px rgba(0, 0, 0, 0.8); }
.gh-screen { position: relative; height: 100%; border-radius: 18px; background: #000; overflow: hidden; display: grid; place-items: center; align-content: center; gap: 18px; }
.gh-boot { width: 34%; height: auto; --gh-frame: #fff; --gh-phone: #fff; --gh-glass: transparent; }
.gh-line { display: block; width: 34%; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.16); position: relative; overflow: hidden; }
.gh-line::after { content: ""; position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, transparent, #fff, transparent); animation: gh-shimmer 2.4s ease-in-out infinite; }
@keyframes gh-shimmer { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
/* The reflection: a soft diagonal band that follows the sweep (--glint is set by landing.js). */
.gh-device::after { content: ""; position: absolute; inset: 7px; border-radius: 18px; pointer-events: none; background: linear-gradient(115deg, transparent calc(var(--glint, 30%) - 14%), rgba(255, 255, 255, 0.10) var(--glint, 30%), transparent calc(var(--glint, 30%) + 10%)); transition: background 0.9s linear; }
html.calm .gh-line::after { animation: none; transform: translateX(60%); }

/* ---------------------------------------------------------------- sections */
.feat h3 .step { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 10px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font: 700 14px var(--display); vertical-align: 2px; font-variant-numeric: tabular-nums; }
#how .proof { margin-top: var(--s-7); }
.table-scroll th[scope="row"] { min-width: 13em; }
.table-scroll td .st { white-space: nowrap; }

/* ---------------------------------------------------------------- closing: the launch card on the table */
.gh-launch { display: grid; gap: var(--s-4); justify-items: start; }
.gh-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; color: var(--table-ink); }
.gh-steps li { display: flex; gap: 12px; align-items: baseline; font-size: 16px; }
.gh-steps b { flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--glow); color: var(--table); font: 700 13px var(--display); transform: translateY(-1px); }
.gh-launch .fine { margin: 0; font-size: 13px; color: var(--table-muted); }
/* On the always-dark table the primary button uses the dark-mode accent so it stays bright. */
.closing .btn-primary, .gh-lt .btn-primary { background: #5fd6c4; color: #04201c; }

/* ---------------------------------------------------------------- footer */
.foot-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font: 700 17px var(--display); }
.foot-brand .gh-mark { width: 22px; height: 22px; }
.foot-legal { flex-basis: 100%; font-size: 13.5px; max-width: 46em; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1100px) and (min-width: 901px) {
  .gh-device { width: 108px; }
}
@media (max-width: 560px) {
  .gh-stage { gap: 12px; align-items: start; }
  .gh-device { width: 78px; padding: 4px; border-radius: 16px; }
  .gh-device::after { inset: 4px; border-radius: 12px; }
  .gh-screen { border-radius: 12px; gap: 10px; }
  .gh-layer { padding: 9px 10px; column-gap: 10px; }
  .gh-stack li + li::before { left: 20px; }
  .gh-layer { grid-template-columns: 26px minmax(0, 1fr); grid-template-areas: "n t" "n s" "n st"; }
  .gh-layer .st { margin-top: 4px; }
  .table-scroll th[scope="row"] { min-width: 0; }
  /* Stacked rows of prose read better left-aligned, with the column label above. */
  .table-scroll.stack td { display: block; text-align: left; padding: 2px 0 6px; }
  .table-scroll.stack td::before { display: block; max-width: none; font-size: 12.5px; }
  .table-scroll.stack td:has(.st) { display: flex; text-align: right; }
  .table-scroll.stack td:has(.st)::before { display: inline; }
}