/* ==========================================================================
   Philosophy: a rack of six modules.

   Each belief is a plate in the same material as the top bar: its number in a
   small lit window, the belief, and a demo set into a recessed tray, made from
   the site's own parts. The explanation stays hidden behind "Try it" until the
   demo has been used; then the module's light comes on and the tally under
   the rack counts it. The row still slides sideways as you scroll (main.js).

   Without the sliding row (reduced motion, no JS) the cards are a plain list
   and the explanation is always shown.
   ========================================================================== */

/* ========== Shared: the same plate material as the top bar ========== */
.people {
  --pl-hi: #3f3c35;
  --pl-lo: #282621;
  --pl-edge: rgb(0 0 0 / 0.65);
  --pl-shine: rgb(255 255 255 / 0.1);
  --pl-screw: #4a463e;
  --pl-screw-edge: rgb(0 0 0 / 0.55);
  --pl-bay: #121210;
  --pl-bay-shadow: inset 0 2px 6px rgb(0 0 0 / 0.65), 0 1px 0 rgb(255 255 255 / 0.08);
  --pl-shadow:
    0 0 0 1px var(--pl-edge),
    inset 0 1px 0 var(--pl-shine),
    inset 0 -2px 0 rgb(0 0 0 / 0.25),
    0 2px 0 rgb(0 0 0 / 0.3),
    0 24px 48px -20px rgb(0 0 0 / 0.7);
  --key-cap: #26241f;
  --key-cap-lo: #1d1b17;
  --key-base: #050504;
  --key-edge: rgb(0 0 0 / 0.55);
}
[data-theme="light"] .people {
  --pl-hi: #ffffff;
  --pl-lo: #e6e5de;
  --pl-edge: rgb(32 34 29 / 0.26);
  --pl-shine: rgb(255 255 255 / 0.9);
  --pl-screw: #d6d4ca;
  --pl-screw-edge: rgb(32 34 29 / 0.35);
  --pl-bay: #e9e8e1;
  --pl-bay-shadow: inset 0 2px 5px rgb(32 34 29 / 0.18), 0 1px 0 #fff;
  --pl-shadow:
    0 0 0 1px var(--pl-edge),
    inset 0 1px 0 var(--pl-shine),
    0 2px 0 rgb(32 34 29 / 0.1),
    0 24px 48px -24px rgb(32 34 29 / 0.35);
  --key-cap: #ffffff;
  --key-cap-lo: #f1f0ea;
  --key-base: #b9b7ad;
  --key-edge: rgb(32 34 29 / 0.22);
}
.people .principle .principle-demo { box-shadow: none; }
.people .m-take { max-width: 46ch; }

/* ---------- The plate ---------- */
.rail-on .principles { align-items: stretch; }
.rail-on .principle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-rows: auto auto 1fr;
  column-gap: 32px;
  align-content: start;
  min-height: 0;
  padding: 36px 40px 40px;
  transition: filter 300ms var(--ease);
  background:
    radial-gradient(circle 4.5px at 16px 16px, var(--pl-screw) 3.4px, var(--pl-screw-edge) 3.6px 4.4px, transparent 4.6px),
    radial-gradient(circle 4.5px at calc(100% - 16px) 16px, var(--pl-screw) 3.4px, var(--pl-screw-edge) 3.6px 4.4px, transparent 4.6px),
    radial-gradient(circle 4.5px at 16px calc(100% - 16px), var(--pl-screw) 3.4px, var(--pl-screw-edge) 3.6px 4.4px, transparent 4.6px),
    radial-gradient(circle 4.5px at calc(100% - 16px) calc(100% - 16px), var(--pl-screw) 3.4px, var(--pl-screw-edge) 3.6px 4.4px, transparent 4.6px),
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.018) 0 1px, transparent 1px 3px),
    linear-gradient(170deg, var(--pl-hi), var(--pl-lo));
  box-shadow: var(--pl-shadow);
  border-radius: 16px;
}
.rail-on .principle:not(.is-current) { filter: brightness(0.72) saturate(0.7); }
.rail-on .principle::before {
  content: attr(data-n);
  grid-column: 1; grid-row: 1;
  display: block;
  width: max-content;
  padding: 7px 10px 7px 22px;
  border-radius: 6px;
  background: radial-gradient(circle 3px at 11px 50%, var(--led, #4a463c) 99%, transparent), #0d0d0b;
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.8), 0 1px 0 var(--pl-shine);
  font: 500 11px/1 var(--f-body);
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: #b9b4a6;
}
.rail-on .principle.is-current::before { --led: #c6f432; color: #c6f432; }
.rail-on .principle h3 { grid-column: 1; grid-row: 2; margin-top: var(--s3); }
.rail-on .principle-demo {
  grid-column: 2; grid-row: 1 / -1;
  max-width: none; width: auto; margin: 0; padding: 24px;
  background: var(--pl-bay);
  border-radius: 10px;
  box-shadow: var(--pl-bay-shadow);
}
@media (max-width: 767px) {
  .rail-on .principle {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    padding: 28px 24px 28px;
  }
  .rail-on .principle-demo { grid-column: 1; grid-row: auto; margin-top: var(--s2); padding: 16px; }
}

/* The number is a normal grid item, not the card's grain layer (main.css) */
.rail-on .principle::before {
  position: static;
  inset: auto;
  z-index: auto;
  background-size: auto;
  pointer-events: none;
  opacity: 1;
  height: auto;
}

.m-tally { display: none; }

.rail-on .people {
  --m-key-cap: #26241f;
  --m-key-cap-lo: #1d1b17;
  --m-key-base: #050504;
  --m-key-edge: rgb(0 0 0 / 0.55);
  --m-led-off: #4a463c;
  --m-screen: #1b1a17;
  --m-field: #0b0b0a;
}
[data-theme="light"].rail-on .people {
  --m-key-cap: #ffffff;
  --m-key-cap-lo: #f1f0ea;
  --m-key-base: #b9b7ad;
  --m-key-edge: rgb(32 34 29 / 0.22);
  --m-led-off: #cfcdc3;
  --m-screen: #ffffff;
  --m-field: #ffffff;
}

/* ---------- The module: number, belief, then "Try it" until you have ---------- */
.rail-on .principle.is-tried::before { --led: #c6f432; color: #c6f432; }
.rail-on .principle:not(.is-tried)::before { --led: var(--m-led-off, #4a463c); color: #b9b4a6; }
.rail-on .m-hint,
.rail-on .m-take { grid-column: 1; grid-row: 3; align-self: start; }
.m-hint {
  margin-top: var(--s3);
  font: 500 12px/16px var(--f-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-mute);
  transition: opacity 200ms var(--ease);
}
.m-hint span { display: inline-block; margin-left: 6px; color: var(--accent-text); animation: m-nudge 1.6s var(--ease) infinite; }
@keyframes m-nudge { 50% { transform: translateX(4px); } }
.rail-on .m-take {
  margin-top: var(--s3);
  font-size: var(--text);
  line-height: var(--text-lh);
  color: var(--paper);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 360ms var(--ease) 80ms, transform 420ms var(--ease) 80ms;
}
.rail-on .principle.is-tried .m-take { opacity: 1; transform: none; }
.rail-on .principle.is-tried .m-hint { opacity: 0; }

/* ---------- The tray ---------- */
.rail-on .m-demo {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}
.m-demo .m-ask { font: 500 15px/22px var(--f-body); color: var(--paper); }
.m-demo .m-result {
  margin-top: auto;
  min-height: 44px;
  padding-top: 4px;
  font: 400 14px/22px var(--f-body);
  color: var(--accent-text);
}
.m-demo .m-result.is-error { color: var(--paper); }
.m-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.m-row--two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
.m-row--center { justify-content: flex-start; }
.m-cap {
  display: block;
  margin-bottom: 10px;
  font: 500 11px/14px var(--f-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.m-demo .cta { margin-bottom: 4px; }

/* A key, shared by the parts below */
.m-toggle,
.m-send {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px 0 14px;
  border-radius: 10px;
  color: var(--paper);
  font: 500 13px/1 var(--f-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: linear-gradient(180deg, var(--m-key-cap), var(--m-key-cap-lo));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 0 0 1px var(--m-key-edge), 0 3px 0 var(--m-key-base);
  margin-bottom: 3px;
  transition: transform var(--press) var(--ease), box-shadow var(--press) var(--ease), filter var(--press) var(--ease);
}
.m-toggle:hover, .m-send:hover { filter: brightness(1.12); }
.m-toggle:active, .m-send:active, .m-send.is-busy {
  transform: translateY(2px);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.45), 0 0 0 1px var(--m-key-edge), 0 1px 0 var(--m-key-base);
}
.m-toggle__led, .m-send__led {
  width: 6px; height: 6px; flex: none; border-radius: 50%;
  background: var(--m-led-off);
  transition: background-color 120ms linear, box-shadow 120ms linear;
}
.m-toggle[aria-pressed="true"] .m-toggle__led,
.m-send.is-done .m-send__led {
  background: #c6f432;
  box-shadow: 0 0 6px 1px rgb(198 244 50 / 0.75);
}

/* 01 · three surfaces */
.m-flat, .m-outline {
  min-height: 48px;
  padding: 0 18px;
  font: 500 14px/1 var(--f-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--paper);
  transition: transform var(--press) var(--ease);
}
.m-flat { padding-inline: 6px; }
.m-outline { border: 1px solid var(--paper-mute); border-radius: 10px; }
.m-flat.is-hit, .m-outline.is-hit { animation: m-hit 160ms var(--ease); }
@keyframes m-hit { 50% { transform: translateY(1px); opacity: 0.7; } }

/* 02 · the settings screen */
.m-screen {
  position: relative;
  height: 156px;
  border-radius: 10px;
  background: var(--m-screen);
  box-shadow: 0 0 0 1px var(--line);
  cursor: crosshair;
  overflow: hidden;
  font: 400 14px/20px var(--f-body);
}
.m-screen:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.m-screen__top { padding: 12px 14px; font-weight: 600; box-shadow: inset 0 -1px 0 var(--line); }
.m-screen__row { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; color: var(--paper-dim); }
.m-screen__row i { width: 26px; height: 14px; border-radius: 7px; background: var(--line); }
.m-screen__save {
  position: absolute; right: 12px; bottom: 12px;
  padding: 6px 16px; border-radius: 6px;
  background: var(--paper); color: var(--ink);
  font-weight: 500;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 200ms var(--ease), transform 240ms var(--ease);
}
.m-screen.is-shown .m-screen__save { opacity: 1; transform: none; box-shadow: 0 0 0 3px rgb(198 244 50 / 0.45); }
.m-screen__mark {
  position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border: 2px solid #c6f432; border-radius: 50%;
  box-shadow: 0 0 10px rgb(198 244 50 / 0.6);
  pointer-events: none;
  animation: m-mark 260ms var(--ease);
}
@keyframes m-mark { from { transform: scale(1.8); opacity: 0; } }

/* 03 · the phone field */
.m-label { font: 500 11px/14px var(--f-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper-dim); }
.m-input {
  width: 100%;
  min-height: 48px;
  margin-top: -6px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--m-field);
  color: var(--paper);
  font: 400 16px/24px var(--f-body);
}
.m-input:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.m-input.is-wrong { border-color: var(--paper); animation: m-shake 260ms var(--ease); }
@keyframes m-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.m-toggle { align-self: flex-start; }
.m-toggle[hidden] { display: none; }
.m-toggle[data-m-fix]:not([aria-checked="true"]) { animation: m-in 260ms var(--ease); }
@keyframes m-in { from { opacity: 0; transform: translateY(4px); } }

/* 04 · two sends */
.m-send { width: 100%; justify-content: center; overflow: hidden; }
.m-send__led { position: absolute; left: 14px; top: 50%; margin-top: -3px; }
.m-send__bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: #c6f432;
  transform: scaleX(0);
  transform-origin: left;
}
.m-send[data-m-send="shows"].is-busy .m-send__bar { animation: m-fill 3s linear forwards; }
.m-send[data-m-send="shows"].is-busy .m-send__led { animation: m-blink 600ms steps(2) infinite; background: #c6f432; }
@keyframes m-fill { to { transform: scaleX(1); } }
@keyframes m-blink { 50% { opacity: 0.25; } }

/* 05 · two light switches, the same part as the one in the top bar */
.m-switch {
  --plate-hi: #5d594f; --plate-lo: #3b3830;
  --rocker-lit: #79746a; --rocker-mid: #514d44; --rocker-dark: #2c2a24;
  --plate-edge: rgb(0 0 0 / 0.6);
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  cursor: pointer;
}
[data-theme="light"] .m-switch {
  --plate-hi: #ffffff; --plate-lo: #e2e1d9;
  --rocker-lit: #ffffff; --rocker-mid: #f0efe9; --rocker-dark: #c9c7bd;
  --plate-edge: rgb(32 34 29 / 0.3);
}
.m-switch .switch { transform: scale(1.4); }
.m-switch:hover .switch { filter: brightness(1.14); }
.m-switch[aria-checked="true"] .switch__rocker { transform: rotateX(20deg); }
.m-switch[aria-checked="true"] .switch__rocker::before { opacity: 1; }
.m-switch[aria-checked="false"] .switch__locator { background: var(--m-led-off); box-shadow: none; }
.m-switch:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
/* The late one: no give when pressed, then a jump */
.m-switch--late .switch__rocker,
.m-switch--late .switch__rocker::before,
.m-switch--late .switch__locator { transition: none; }

/* ---------- The tally: one light per module you've tried ---------- */
.rail-on .m-tally {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: var(--s4);
  font: 500 12px/1 var(--f-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.m-tally i { display: flex; gap: 8px; }
.m-tally s {
  display: block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--m-led-off, #4a463c);
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 0.4);
  transition: background-color 200ms linear, box-shadow 200ms linear;
}
.m-tally s.is-on { background: #c6f432; box-shadow: 0 0 6px 1px rgb(198 244 50 / 0.7); }
.m-tally b { color: var(--accent-text); font-weight: 600; }

@media (max-width: 767px) {
  .rail-on .m-hint, .rail-on .m-take { grid-row: auto; }
  .rail-on .m-hint { display: none; }
  .rail-on .m-take { margin-top: var(--s1); }
  .rail-on .principle:not(.is-tried) .m-take { display: none; }
  .rail-on .m-tally { margin-top: 12px; }
  /* Fit a tried card, takeaway open, above the bottom keys */
  .rail-on #people .principles-invitation { display: none; }
  .rail-on .principle { padding-block: 20px; }
  .rail-on .principle h3 { margin-top: 14px; }
  .rail-on .m-demo { gap: 10px; }
  .rail-on .m-demo .m-result { min-height: 0; }
  .m-screen { height: 118px; }
  .m-screen__row { padding-block: 6px; }
}