/* =====================================================================
   OpenGAF — the vocabulary walk (c43.org/opengaf/)
   One phone screen: a dark band, the glass, a paper drawer on the hem.
   Self-contained, no CDN, no framework — the words are all in the pocket
   (data/axes.js rides along and the service worker keeps it offline).
   ===================================================================== */

html, body { height: 100%; }

.room-page {
  margin: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
}

/* ---------- slimmer dark greeting band — the phone is one screen ---------- */

.band-room {
  background: linear-gradient(165deg, var(--band), var(--band-2) 62%, #0e2a33);
  color: var(--band-ink);
  padding: clamp(.9rem, 3vw, 1.6rem) clamp(1.1rem, 4vw, 1.75rem) clamp(.8rem, 2.5vw, 1.4rem);
}

.room-brand {
  display: flex; align-items: center; gap: .55rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--band-muted);
  margin-bottom: .5rem;
}
.room-brand .brand-dot { width: 10px; height: 10px; }

.room-greet {
  margin: 0;
  font-size: clamp(1.5rem, 6vw, 2.2rem);
  font-weight: 300; letter-spacing: -.03em; line-height: 1.08;
  color: #fff;
}
.room-lede {
  margin: .5rem 0 0; max-width: 54ch;
  font-size: clamp(.95rem, 2.6vw, 1.05rem);
  color: var(--band-muted);
}
.room-lede em { color: var(--band-ink); font-style: normal; }

/* ---------- the glass ---------- */

.room {
  position: relative;
  flex: 1;
  min-height: 0;
  background:
    radial-gradient(120% 100% at 50% 118%, #0e2a33 0%, #0c1a2b 62%),
    var(--band);
  overflow: hidden;
  touch-action: none;   /* the room owns every gesture */
  user-select: none;
  -webkit-user-select: none;
}

.room-ping {
  position: absolute; left: 0; top: 0;
  width: 72px; height: 72px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgb(14 116 144 / .55) 0%, rgb(14 116 144 / 0) 70%);
  transform: translate(-50%, -50%);
  opacity: 0;
  will-change: transform;
}
.room-ping.on { opacity: 1; }

.pads { position: absolute; inset: 0; }

.pad {
  position: absolute;
  width: 46vw; max-width: 15rem;
  min-height: 92px;
  transform: translate(-50%, -50%);
  color: var(--band-ink);
}
.pad-away { /* not currently reached by any finger — the far shelf */
  opacity: .5;
  filter: blur(1px);
  transition: opacity .25s ease, filter .25s ease;
}
.pad-near {
  opacity: 1;
  filter: none;
}

.pad-q {
  position: relative;
  padding: .8rem 1rem .7rem;
  border: 1px solid rgb(238 244 247 / .22);
  border-radius: 18px;
  background: rgb(255 253 251 / .06);
  backdrop-filter: blur(3px);
  transition: border-color .18s ease, background .18s ease;
}
.pad-near .pad-q {
  border-color: rgb(14 116 144 / .65);
  background: rgb(255 253 251 / .1);
}

.pad-q:before {
  content: "\201C";              /* an opening quote — the question is held */
  position: absolute; top: -.55rem; left: .85rem;
  font-size: 2.1rem; line-height: 1; color: var(--accent);
}

.pad-words {
  margin: 0 0 .35rem;
  font-size: clamp(.92rem, 3vw, 1rem);
  font-weight: 600; line-height: 1.35;
  color: var(--band-ink);
}

.pad-tag {
  font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--band-muted);
}

/* the layers: revealed from mild to deep as a finger presses closer */
.pad-layers {
  margin-top: .45rem;
  display: grid; gap: .2rem;
}
.pad-layer {
  font-size: .74rem; line-height: 1.3;
  color: var(--band-ink);
  opacity: 0;
  max-height: 0; overflow: hidden;
  transition: opacity .3s ease, max-height .3s ease;
}
.pad-layer .n { color: var(--accent); font-size: .62rem; letter-spacing: .08em; }
.pad-layer.on { opacity: .85; max-height: 3.2rem; }

.room-hint {
  position: absolute; left: 50%; bottom: 14%;
  transform: translateX(-50%);
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--band-muted);
  text-align: center;
  pointer-events: none;
  background: rgb(14 26 43 / .55);
  padding: .5rem 1.1rem; border-radius: 999px;
}
.room-hint.hushed { opacity: 0; transition: opacity .4s ease; }

/* ---------- the hem: a paper drawer on the room's hem ---------- */

.hem {
  position: relative;
  background: var(--paper);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 22px rgb(12 26 43 / .22);
  z-index: 2;
  flex-shrink: 0;
}

.hem-grip {
  position: absolute; top: -34px; left: 50%; transform: translateX(-50%);
  width: 92px; height: 26px;
  border: 1px solid rgb(238 244 247 / .25);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  background: var(--paper);
  color: var(--muted);
  cursor: pointer;
  font-size: .8rem;
}
.hem-grip:after { content: "\25BE lift"; letter-spacing: .1em; font-size: .66rem; }

.hem-strip {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem clamp(1rem, 4vw, 1.75rem);
  min-height: 44px;
  flex-wrap: wrap;
}
.hem-spacer { flex: 1; }

.read-chip {
  font-size: .78rem; color: var(--muted);
  padding: .3rem .8rem; border: 1px solid var(--line); border-radius: 999px;
  white-space: nowrap;
}

.btn-ink {
  border: 1px solid var(--line); background: var(--paper);
  color: var(--ink); border-radius: 999px;
  padding: .55rem 1.1rem; font-weight: 700; font-size: .95rem;
  min-height: 44px; cursor: pointer; transition: border-color .15s ease;
}
.btn-ink:hover { border-color: var(--accent); }
.btn-ink:disabled { opacity: .45; cursor: default; }

.hem-body { overflow: hidden; max-height: 0; transition: max-height .3s ease; }
.hem-body.lifted { max-height: 46dvh; overflow-y: auto; }
.hem-body.lifted::-webkit-scrollbar { width: 0; }
.hem-inner { padding: .4rem clamp(1rem, 4vw, 1.75rem) 1.4rem; }

/* ---------- the shape sheet ---------- */

.shape-rule {
  display: flex; align-items: center; gap: 1rem;
  font-size: .8rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); margin: .6rem 0 1rem;
}
.shape-rule::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.crisis {
  border: 1px solid #e9cba6;
  background: #fdf6ec;
  color: #7a4a12;
  border-radius: 12px;
  padding: .8rem 1rem;
  font-size: .92rem;
  margin-bottom: 1rem;
}

.shape-row {
  border: 1px solid var(--line); border-radius: 14px;
  padding: .8rem .9rem; margin-bottom: .7rem;
}
.shape-head { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; }
.shape-words {
  margin: 0; font-weight: 600; font-size: .98rem; line-height: 1.35; color: var(--ink);
}
.shape-pct { font-size: .78rem; color: var(--accent); font-weight: 700; white-space: nowrap; }

.shape-bar { height: 6px; border-radius: 3px; background: #eee9df; overflow: hidden; margin: .45rem 0 .4rem; }
.shape-bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 3px; }

.shape-note { font-size: .84rem; color: var(--muted); line-height: 1.45; }
.shape-note .axis-name { color: var(--ink); font-weight: 700; }
.shape-meta { font-size: .72rem; color: var(--muted); margin-top: .5rem; letter-spacing: .04em; }

/* ---------- the shelf — swapping the questions ---------- */

.shelf-search {
  width: 100%;
  border: 1px solid var(--line); border-radius: 999px;
  padding: .8rem 1.2rem; font-size: 1rem; min-height: 52px;
  margin-bottom: 1rem; background: #fffefb;
}
.shelf-search:focus { outline: 3px solid rgb(14 116 144 / .25); border-color: var(--accent); }

.shelf-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
@media (max-width: 480px) { .shelf-grid { grid-template-columns: 1fr; } }

.shelf-item {
  border: 1px solid var(--line); border-radius: 999px;
  padding: .7rem 1.1rem; cursor: pointer; text-align: left;
  background: var(--paper); color: var(--ink); font-size: .92rem; line-height: 1.3;
  transition: border-color .12s ease;
}
.shelf-item:hover { border-color: var(--accent); }
.shelf-item.on { border-color: var(--accent); background: #eef6f8; }

.shelf-sub { font-size: .78rem; color: var(--muted); display: block; margin-top: .18rem; }

/* ---------- toast + fine print ---------- */

.toast {
  position: fixed; left: 50%; bottom: 18%;
  transform: translate(-50%, 20px);
  background: var(--band); color: var(--band-ink);
  border-radius: 999px; padding: .7rem 1.4rem; font-size: .92rem;
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
  max-width: 86vw; z-index: 40;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.fine-note { font-size: .86rem; color: var(--muted); line-height: 1.6; margin-top: .6rem; }
.fine-note .mono { display: block; margin-top: .4rem; font-size: .78rem; }

.room-foot { flex-shrink: 0; padding: .7rem 0 .9rem; }
.room-foot .wrap { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

@media (max-width: 600px) {
  .room-foot { display: none; }          /* the phone keeps one screen */
  .pads .pad { width: 40vw; }            /* even denser on a narrow glass */
}

@media (max-height: 760px) {
  .room-lede { display: none; }          /* keep the glass big on short phones */
}