/* ── 10-room.css ── */
/* Foyer's own furniture.
 *
 * The material is in glass.css, which is loaded first and shared with JR!TER. Nothing in
 * this file repeats a colour, a radius, a space or a timing: it all comes from there, so
 * changing the glass changes both sites and this one has nothing to keep in step.
 *
 * Two colours are named here and both are already tokens. If you find yourself typing a
 * hex code into this file, the thing you want probably belongs in glass.css.
 */

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Something behind the glass.
 *
 * Fixed and enormous and barely there. It is in the accent so it reads as part of the
 * room rather than as a smudge, and it is the only thing that makes a translucent pane
 * on this page worth having. */
.ground {
  position: fixed;
  inset: -20vmax;
  z-index: -1;
  background:
    radial-gradient(46% 38% at 24% 14%,
      color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    radial-gradient(40% 34% at 78% 74%,
      color-mix(in srgb, var(--accent) 9%, transparent), transparent 72%);
  filter: blur(30px);
}

.room {
  max-width: 780px;
  margin: 0 auto;
  padding: var(--s8) var(--s5) var(--s7);
  display: flex;
  flex-direction: column;
  gap: var(--s6);
}

/* ── the name of the room ─────────────────────────────────────────────────── */

.hello { display: flex; flex-direction: column; gap: var(--s1); }
.mark {
  margin: 0;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.slogan { margin: 0; color: var(--text-2); font-size: 14px; }

/* ── the doors ────────────────────────────────────────────────────────────── */

.doors { display: flex; flex-direction: column; gap: var(--s3); }

.door {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  border-radius: var(--r-lg);
  border: 1px solid var(--glass-line);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-filter-thin);
  backdrop-filter: var(--glass-filter-thin);
  box-shadow: var(--edge-top), var(--shadow-1);
  color: var(--text);
  text-decoration: none;
  isolation: isolate;
  transition: background var(--fast), border-color var(--fast), transform var(--fast);
}
.door:hover,
.door:focus-visible {
  background: var(--glass-2);
  border-color: var(--accent-line);
  transform: translateY(-2px);
  outline: none;
}

.door-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent);
}
.door-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.door-name { font-size: 16px; font-weight: 650; }
.door-what { font-size: 13px; color: var(--text-2); }
.door-go {
  margin-left: auto;
  flex: none;
  color: var(--text-3);
  font-size: 18px;
  transition: color var(--fast), transform var(--fast);
}
.door:hover .door-go, .door:focus-visible .door-go {
  color: var(--accent);
  transform: translateX(3px);
}

/* ── who this is ──────────────────────────────────────────────────────────── */

/* .pane is the shared glass surface, so this only says how it is laid out. */
.pane {
  border: 1px solid var(--glass-line);
  border-radius: var(--r-lg);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-filter-thin);
  backdrop-filter: var(--glass-filter-thin);
  box-shadow: var(--edge-top), var(--shadow-1);
  isolation: isolate;
}

.who { display: flex; gap: var(--s5); padding: var(--s5); align-items: flex-start; }
.who-photo img {
  display: block;
  width: 150px; height: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--line-2);
}
.who-words { min-width: 0; }
.who-words h2 { margin: 0; font-size: 20px; font-weight: 650; }
.who-slogan { margin: 2px 0 var(--s3); color: var(--accent); font-size: 13px; }
.who-words p { margin: 0 0 var(--s3); color: var(--text-2); font-size: 14px; }
.who-links { margin: 0; }
.who-links a {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 6px var(--s3);
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-line);
  background: var(--glass);
  color: var(--text);
  font-size: 13px; font-weight: 650;
  text-decoration: none;
  transition: background var(--fast), border-color var(--fast);
}
.who-links a:hover { background: var(--glass-2); border-color: var(--accent-line); }
.who-links svg { flex: none; color: var(--accent); }

/* ── the foot ─────────────────────────────────────────────────────────────── */

.foot {
  display: flex; gap: var(--s3); align-items: baseline;
  color: var(--text-3); font-size: 12px;
}
/* --text-2, not --text-3 at 80%: that measured 2.95:1 on the page background, under
   the 4.5:1 that text this size needs. */
.foot-dim { color: var(--text-2); }

@media (max-width: 560px) {
  .room { padding: var(--s6) var(--s4) var(--s6); gap: var(--s5); }
  .who { flex-direction: column; }
  .who-photo img { width: min(180px, 60%); }
}

/* ── the wide page ────────────────────────────────────────────────────────── */

/* The timetable is five columns of real content, so it gets more room than the hub's
   reading width. Still a maximum: a grid stretched across a 34 inch monitor puts Monday
   and Friday too far apart to compare, which is the one thing a week view is for. */
.room-wide { max-width: 1180px; }

.hello-row { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: var(--s4); }
.back {
  flex: none;
  padding: 6px var(--s3);
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-line);
  background: var(--glass);
  color: var(--text-2);
  font-size: 13px; text-decoration: none;
  transition: background var(--fast), color var(--fast), border-color var(--fast);
}
.back:hover { background: var(--glass-2); color: var(--text); border-color: var(--accent-line); }

/* The line between the projects and the school pages (timetable, study). */
.doors-split { border: 0; border-top: 1px solid var(--line); margin: var(--s2) var(--s2); }

/* ── 20-jraft.css ── */
/* ── the JRAFT download room ──────────────────────────────────────────────── */

/* One job: get the right file onto a friend's computer. So the button is the biggest
   thing in the room by a wide margin, and everything else on the page is there to explain
   what happens after it is pressed. */

.get {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s4);
  padding: var(--s6) var(--s5);
  text-align: center;
}

.get-icon {
  width: 148px;
  height: 148px;
  image-rendering: auto;
}

.get-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  max-width: 420px;
  padding: var(--s5) var(--s5);
  border-radius: var(--r-lg);
  border: 1px solid var(--accent-line);
  background: var(--accent);
  box-shadow: var(--edge-top), var(--shadow-1);
  color: var(--bg);
  text-decoration: none;
  transition: transform var(--fast), background var(--fast);
}
.get-button:hover,
.get-button:focus-visible {
  background: var(--accent-hi);
  transform: translateY(-2px);
  outline: none;
}
.get-label { font-size: 26px; font-weight: 700; }
.get-file { font-size: 13px; font-weight: 500; opacity: 0.8; }

/* The secondary links are pills, not bare text: people open these rooms on a phone,
   and an 18px-tall link is too small to tap. 44px is the comfortable touch height. */
.get-others {
  margin: 0; color: var(--text-2); font-size: 13px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s2);
}
.get-others a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s4);
  border-radius: var(--r-pill); border: 1px solid var(--glass-line); background: var(--glass);
  color: var(--text); text-decoration: none;
  transition: background var(--fast), border-color var(--fast), color var(--fast);
}
.get-others a:hover, .get-others a:focus-visible {
  background: var(--glass-2); border-color: var(--accent-line); color: var(--accent);
}

.steps { padding: var(--s5); }
.steps h2 { margin: 0 0 var(--s3); font-size: 16px; font-weight: 650; }
.steps ol { margin: 0; padding-left: var(--s5); color: var(--text-2); font-size: 14px; }
.steps li { margin-bottom: var(--s2); }
.steps b { color: var(--text); font-weight: 650; }
/* --text-2: --text-3 measured 3.78:1 on the panel, under 4.5:1 for 13px text. */
.steps-note { margin: var(--s3) 0 0; color: var(--text-2); font-size: 13px; }

@media (max-width: 560px) {
  .get { padding: var(--s5) var(--s4); }
  .get-icon { width: 120px; height: 120px; }
  .get-label { font-size: 22px; }
}

/* The way back to the pack's full landing page, small, next to the Foyer pill. */
.hello-links { display: flex; align-items: center; gap: var(--s3); flex: none; }
.landing { font-size: 12px; color: var(--text-3); text-decoration: none; }
.landing:hover { color: var(--accent); }

/* ── 22-notiregx.css ── */
/* ── the NotiRegX room ────────────────────────────────────────────────────── */

/* The download room's pieces (.get, .steps) are shared from 20-jraft.css. This adds
   the row of phone screenshots, and lists inside the steps panels. */

.phones {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s3);
}
.phones figure { margin: 0; display: flex; flex-direction: column; gap: var(--s2); }
.phones figcaption { text-align: center; font-size: 13px; color: var(--text-2); }
.phones img {
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--glass-line);
  box-shadow: var(--edge-top), var(--shadow-1);
}

.steps ul { margin: 0; padding-left: var(--s5); color: var(--text-2); font-size: 14px; }
.steps code { font-size: 13px; color: var(--text); }

@media (max-width: 560px) {
  /* One phone at a time, scrolled sideways, instead of three postage stamps. */
  .phones { grid-template-columns: repeat(3, 72%); overflow-x: auto; scroll-snap-type: x mandatory; }
  .phones figure { scroll-snap-align: center; }
}

/* Shown only off Android, where the APK can't be installed. */
.get-hint { margin: 0; font-size: 13px; color: var(--text-2); text-align: center; }
.get-hint[hidden] { display: none; }

/* ── 24-privacy.css ── */
/* The privacy page: one pane per language, read top to bottom. */

.privacy-lang { display: flex; gap: var(--s2); }
.privacy-lang a,
.foot a {
  color: var(--text-2);
  text-decoration: none;
  transition: color var(--fast);
}
.privacy-lang a {
  padding: 6px var(--s3);
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-line);
  background: var(--glass);
  font-size: 13px;
  transition: background var(--fast), color var(--fast), border-color var(--fast);
}
.privacy-lang a:hover { background: var(--glass-2); color: var(--text); border-color: var(--accent-line); }
.foot a:hover { color: var(--accent); }

.privacy { padding: var(--s5); scroll-margin-top: var(--s5); }
.privacy h2 { margin: var(--s5) 0 var(--s2); font-size: 16px; font-weight: 650; }
.privacy h2:first-child { margin-top: 0; }
.privacy p,
.privacy ul { margin: 0 0 var(--s3); color: var(--text-2); font-size: 14px; }
.privacy p:last-child { margin-bottom: 0; }
.privacy ul { padding-left: var(--s5); }
.privacy li + li { margin-top: var(--s1); }
.privacy a { color: var(--accent); }
.privacy code { font-size: 13px; color: var(--text); overflow-wrap: anywhere; }