/* HSI FCM · the access gate's own styles (T-demo-003 item 1b).

   It sits BESIDE concepts/v2/assets/system.css and adds no colour of its own: every value
   here is one of the design system's tokens, so the ink and the paper editions both come out
   right without a second palette to keep in step. Nothing is loaded from another host: this
   file, the system stylesheet, the local fonts and two marks are the whole page.

   The one thing it does that system.css cannot: the theme-toggle icon swap. system.js draws
   the prototype's icons at run time and this page does not load system.js, so both icons are
   in the markup and CSS shows the one that offers the OTHER edition. */

/* ── the card, centred ──────────────────────────────────────────────── */

.gate-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 5vw, 72px) clamp(20px, 3.5vw, 56px) 40px;
}
.gate {
  width: min(560px, 100%);
}
.gate .lab {
  margin-bottom: 14px;
}
.gate-h {
  font: 600 clamp(30px, 4.2vw, 46px) / 1.05 var(--f-d);
  letter-spacing: -0.022em;
  margin-bottom: 12px;
}
.gate-lede {
  font-size: 14px;
  margin-bottom: 26px;
  color: var(--txt2);
}

/* ── the form ───────────────────────────────────────────────────────── */

.gate-card {
  display: block;
  padding: 26px clamp(20px, 2.4vw, 30px) 24px;
}
.gate-card .field {
  margin-bottom: 18px;
}
.gate-card .field input {
  font-family: var(--f-m);
  letter-spacing: 0.12em;
  padding: 2px 0;
}
.gate-go {
  width: 100%;
  justify-content: center;
}

/* ── the one note, in its three states ──────────────────────────────── */

.gate-note {
  margin: 18px 0 0;
  font-family: var(--f-m);
  font-size: 10.5px;
  line-height: 1.9;
  color: var(--txt2);
  border-left: 2px solid var(--bd1);
  padding-left: 13px;
}
.gate-note-bad {
  color: var(--redStrong);
  border-left-color: var(--redStrong);
}

/* ── what is behind the door ────────────────────────────────────────── */

.gate-secnote {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 20px;
  border: 1px solid var(--bd);
  border-radius: 9px;
  background: var(--tintA);
  padding: 14px 16px;
  font-family: var(--f-m);
  font-size: 10px;
  line-height: 1.95;
  color: var(--txt2);
}
.gate-key {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--acc);
}

/* ── the theme toggle: show the edition the reader can move to ──────── */

.gate-theme svg {
  width: 15px;
  height: 15px;
}
.gate-theme .gate-sun {
  display: none;
}
[data-theme="dark"] .gate-theme .gate-sun {
  display: block;
}
[data-theme="dark"] .gate-theme .gate-moon {
  display: none;
}

/* ── the footer, matching the two product pages ─────────────────────── */

.live-footer {
  margin-top: 46px;
  border-top: 1px solid var(--bd0);
  background: var(--bg2);
}
.lf-in {
  padding: 30px clamp(24px, 3.5vw, 56px) 34px;
  max-width: 1100px;
}
.live-footer p {
  font-family: var(--f-m);
  font-size: 10px;
  line-height: 2;
  color: var(--txt2);
  margin-bottom: 12px;
}
.live-footer .lf-base {
  color: var(--txt2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 9px;
  margin-bottom: 0;
}