/* AD30 members - sign-in screen + account box for the full timeline page.
   Everything is scoped (#gate, #ended, .acct, .mstrip, .toast) so the timeline's own styles are untouched. */
#gate, #ended{
  --bg:#0e1116; --panel:#171b22; --line:#2a303a; --text:#ece8df; --muted:#9a9fa8; --gold:#d9b870; --gold-soft:rgba(217,184,112,.14);
  position:fixed; inset:0; z-index:50; overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:var(--bg); color:var(--text);
  font:18px/1.55 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#gate[hidden], #ended[hidden], #page[hidden]{display:none !important}
#gate *, #ended *{box-sizing:border-box}
#gate .in, #ended .in{max-width:440px; margin:0 auto; padding:64px 28px 48px; text-align:center}
#gate h1, #ended h1{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; font-weight:500; font-size:34px; line-height:1.12; margin:0; color:var(--text)}
#gate h1 small{display:block; font-size:17px; color:var(--gold); margin-top:8px; letter-spacing:.02em}
#gate .lead, #ended .lead{color:var(--muted); font-size:17px; margin:14px 0 0}
#gate form{margin:32px 0 0; text-align:left}
#gate label{display:block; font-size:15px; color:var(--muted); margin:0 0 8px}
#gate .field{width:100%; min-height:56px; border-radius:14px; border:1px solid var(--line); background:var(--panel); color:var(--text);
  font:inherit; font-size:18px; padding:0 16px; -webkit-appearance:none; appearance:none}
#gate .field:focus{outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold)}
#gate .field.code{letter-spacing:.3em; font-variant-numeric:tabular-nums; text-align:center; font-size:24px}
#gate .btn, #ended .btn{margin:14px 0 0; width:100%; min-height:56px; border-radius:14px; border:1px solid var(--gold);
  background:var(--gold); color:#1a1507; font:inherit; font-size:18px; font-weight:600; cursor:pointer}
#ended .btn.ghost{background:var(--gold-soft); color:var(--text); font-weight:400}
#gate .btn:disabled{opacity:.55; cursor:default}
#gate .linkbtn{background:none; border:0; color:var(--muted); font:inherit; font-size:14px; min-height:44px; padding:0 14px;
  margin-top:10px; opacity:.8; text-decoration:underline; text-underline-offset:3px; cursor:pointer}
#gate .msg, #ended .msg{margin:16px 0 0; font-size:15px; line-height:1.45; color:var(--muted); text-align:left}
#gate .msg.err{color:#f0a58f}
#gate .msg.ok, #ended .msg.ok{color:var(--text)}
#gate .privacy{margin:30px 0 0; font-size:13px; line-height:1.5; color:var(--muted); text-align:left}
#gate .setup-note{margin:20px 0 0; padding:12px 14px; border:1px dashed var(--line); border-radius:12px; font-size:13px; color:var(--muted); text-align:left}
#gate a{color:var(--gold)}
#gate code{font-size:13px}

/* members strip above the timeline header */
.mstrip{max-width:760px; margin:0 auto; padding:10px 14px 0; display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center;
  font-family:var(--sans); font-size:13.5px; color:#7a6a58}
.mstrip a{color:var(--brown); font-weight:700; text-decoration:none; border:1px solid #cbbfae; background:var(--cream);
  border-radius:16px; padding:6px 12px; min-height:34px; display:inline-flex; align-items:center}
.mstrip a[hidden], .acct [hidden]{display:none !important}
.mstrip .who{margin-left:auto; overflow-wrap:anywhere}
/* [simple-rework] "Teacher view" label (this page) next to the "Member view" link */
.mstrip .vw-cur{font-weight:800; color:#fff; background:var(--brown); border:1px solid var(--brown); border-radius:16px;
  padding:6px 12px; min-height:34px; display:inline-flex; align-items:center}

/* account box inside the timeline footer */
.acct{margin:18px auto 0; max-width:520px; font-family:var(--sans); font-size:14px; color:#555; text-align:center}
.acct p{margin:8px 0}
.acct .switch{display:flex; align-items:center; justify-content:center; gap:10px; min-height:44px; cursor:pointer; font-size:15px; color:var(--brown); font-weight:600}
.acct .switch input{width:22px; height:22px; accent-color:var(--V)}
.acct .days{color:var(--V); font-weight:700}
.acct button.lk{background:none; border:0; color:var(--brown); font:inherit; text-decoration:underline; text-underline-offset:3px; cursor:pointer; min-height:36px; padding:0 6px}
.acct a{color:var(--brown); font-weight:700}
.acct details{text-align:left; margin:12px 0 0}
.acct details .in{font-size:13.5px; color:#555}

/* Sheet videos + watched marks on the timeline */
.sheetvid .ytbox{position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:8px; overflow:hidden}
.sheetvid .ytbox iframe, .sheetvid .ytbox > div{position:absolute; inset:0; width:100%; height:100%; border:0}
.sheetvid .src{font-family:var(--sans); font-size:12px; color:#777; margin:4px 0 0}
.sheetvid .ln{margin-top:6px}
.hasv{display:inline-block; font-family:var(--sans); font-weight:800; font-size:10.5px; letter-spacing:.4px; padding:0 7px; border-radius:10px; color:var(--V); background:#fff; border:1.5px solid var(--V); margin-right:5px; vertical-align:1px; white-space:nowrap}
.ev.watched .ttl::after{content:" ✓"; color:var(--V); font-family:var(--sans)}

.toast{position:fixed; z-index:60; left:50%; bottom:calc(24px + env(safe-area-inset-bottom)); transform:translateX(-50%);
  background:#2a303a; color:#ece8df; padding:10px 18px; border-radius:22px; font:15px -apple-system,Helvetica,Arial,sans-serif;
  opacity:0; pointer-events:none; transition:opacity .2s ease; white-space:nowrap}
.toast.show{opacity:1}
@media (prefers-reduced-motion: reduce){ .toast{transition:none} }