/* Meta Ray-Ban Display: additive display, so black is see-through and only light shows.
   Sized in vmin so it fills whatever viewport the glasses give it (600 x 600 today). */
:root {
  --ink: #fff;
  --dim: #9a9a9a;
  --faint: #4a4a4a;
  --eye: #ffb347;          /* the anchor letter, warm so it reads against daylight */
  --c1: #9fd3ff;           /* cast colors for full-cast editions */
  --c2: #ffd27a;
  --serif: Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: #000; color: var(--ink); font-family: var(--sans); }
main { height: 100vh; overflow: hidden; }
.screen { height: 100%; padding: 6vmin 7vmin; display: flex; flex-direction: column; gap: 3vmin; }
.screen[hidden] { display: none; }

header h1 { margin: 0; font: 600 9vmin/1 var(--serif); letter-spacing: .08em; }
header h2 { margin: 0; font: 600 6vmin/1 var(--sans); }
header p { margin: 1vmin 0 0; color: var(--dim); font-size: 3.6vmin; }

.list { display: flex; flex-direction: column; gap: 2vmin; overflow-y: auto; min-height: 0; }
.row {
  display: grid; gap: .6vmin; text-align: left; width: 100%;
  padding: 3vmin 4vmin; border: .5vmin solid var(--faint); border-radius: 3vmin;
  background: transparent; color: var(--ink); font: inherit; font-size: 4.2vmin; cursor: pointer;
}
.row b { font-weight: 600; }
.row span { color: var(--dim); font-size: 3.4vmin; }
.row .val { color: var(--eye); }
#rows .row { display: flex; justify-content: space-between; align-items: baseline; padding: 2.4vmin 4vmin; }
#rows .row .val { font-size: 4vmin; }
.row.quiet { margin-top: auto; }
.row:focus { outline: none; border-color: var(--ink); }
.row:focus-visible { outline: none; }
.help { margin: auto 0 0; color: var(--dim); font-size: 3.2vmin; line-height: 1.4; }

/* reader */
#read { justify-content: center; position: relative; }
.top, .bottom { position: absolute; left: 7vmin; right: 7vmin; }
.top { top: 7vmin; display: flex; justify-content: space-between; font-size: 3.6vmin; color: var(--dim); }
.bottom { bottom: 7vmin; }
#who.c1 { color: var(--c1); } #who.c2 { color: var(--c2); }
.bar { height: .7vmin; background: var(--faint); border-radius: 1vmin; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--dim); }
#status { margin-top: 2vmin; font-size: 3.4vmin; color: var(--dim); text-align: center; }

/* the word sits on its anchor letter, which never moves */
.word {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: baseline;
  font: 500 9vmin/1.1 var(--serif); white-space: pre; min-height: 1.2em;
}
.word .l { text-align: right; overflow: hidden; }
.word .p { color: var(--eye); }
.word .r { text-align: left; overflow: hidden; }
.word.chunk { font-size: 7vmin; }
.word.emph { font-weight: 700; font-size: 11vmin; }
.word.recap { font-style: italic; color: var(--dim); }
.word.recap .p { color: var(--dim); }
.word.c1 { color: var(--c1); } .word.c2 { color: var(--c2); }

#plate { text-align: center; display: grid; gap: 2vmin; }
#plate small { color: var(--dim); font-size: 3.6vmin; letter-spacing: .2em; text-transform: uppercase; }
#plate strong { font: 600 8vmin/1.15 var(--serif); }
#walk { text-align: center; color: var(--dim); font-size: 4.4vmin; }
#toast {
  position: absolute; left: 50%; top: 20%; transform: translateX(-50%);
  padding: 1.6vmin 4vmin; border: .5vmin solid var(--faint); border-radius: 6vmin; font-size: 4vmin; white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
  #plate:not([hidden]) { animation: fade .5s ease; }
  @keyframes fade { from { opacity: 0; } }
}