/* Shared components: music bar, action dock, Yaad modal, carousel.
   Loaded by both index.html and yaadein.html. */

:root{
  --bg:#080b12; --panel:#101725; --panel-2:#141d2e; --line:#1e2a3f; --line-soft:#182335;
  --ink:#f3f6fb; --ink-2:#a9b6cc; --ink-3:#6b7a94;
  --accent:#c9962f; --accent-2:#e8bd5c; --blue:#2f7fd4; --blue-2:#7fb4ea;
  --ui:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ---------------- bottom-right action dock ---------------- */
#dock{position:fixed;right:20px;bottom:20px;z-index:70;display:flex;flex-direction:column;gap:9px;
  align-items:stretch;width:246px}
#dock.hid{display:none}
.dock-btn{display:flex;align-items:center;gap:10px;width:100%;padding:12px 17px;border-radius:12px;
  font-family:var(--ui);font-size:13.5px;font-weight:700;letter-spacing:-.01em;cursor:pointer;
  border:1px solid var(--line);background:#0c1220e0;color:var(--ink);backdrop-filter:blur(14px);
  box-shadow:0 12px 34px #0008;transition:.22s;text-decoration:none;text-align:left}
.dock-btn:hover{transform:translateY(-2px);border-color:#3a4a6a}
.dock-btn .ic{font-size:15px;line-height:1}
.dock-btn small{display:block;font-size:10.5px;font-weight:500;color:var(--ink-3);margin-top:1px}
.dock-btn.gold{background:linear-gradient(135deg,#e0761c,#f5a623);color:#1a1004;border-color:#f7b64a;
  box-shadow:0 12px 30px #e0761c40}
.dock-btn.gold small{color:#1a1004;opacity:.75}
.dock-btn.gold:hover{filter:brightness(1.07)}
/* ---- the music chip: a small record player that lives in the dock ----
   One press on the disc starts or pauses. The vinyl turns only while sound is
   actually playing, which is the whole feedback mechanism, so the control never
   looks like it did nothing. */
.mchip{display:flex;align-items:center;gap:11px;width:100%;padding:8px 10px 8px 8px;
  border-radius:14px;border:1px solid var(--line);background:#0c1220e8;backdrop-filter:blur(14px);
  box-shadow:0 12px 34px #0008;transition:.22s}
.mchip:hover{border-color:#3a4a6a}
.mchip.playing{border-color:#c9962f4d;background:#120f0be8}

.mchip .disc{position:relative;flex:none;width:42px;height:42px;border-radius:50%;border:none;
  padding:0;cursor:pointer;background:none;display:flex;align-items:center;justify-content:center}
.mchip .vinyl{position:absolute;inset:0;border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%,
    #1a2131 0 2px,#141a27 2px 3.5px);
  border:1px solid #2f3b52;box-shadow:0 4px 12px #0007;transition:.25s}
.mchip .vinyl i{position:absolute;inset:34%;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),#8a6420);border:1px solid #00000040}
.mchip.playing .vinyl{animation:spin 3.4s linear infinite;border-color:#c9962f66}
@keyframes spin{to{transform:rotate(360deg)}}
.mchip .glyph{position:relative;z-index:2;font-size:12px;color:#fff;
  text-shadow:0 1px 4px #000c;pointer-events:none;transition:.2s}
.mchip .disc:hover .glyph{transform:scale(1.12)}
.mchip.playing .glyph{opacity:0}
.mchip.playing .disc:hover .glyph{opacity:1}

.mchip .chipinfo{flex:1;min-width:0;background:none;border:none;padding:0;cursor:pointer;
  text-align:left;font-family:var(--ui)}
.mchip .chipinfo b{display:block;font-size:12.5px;font-weight:700;color:var(--ink);
  letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mchip .chipinfo small{display:block;margin-top:1px;font-size:10.5px;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mchip .chipexp{flex:none;width:26px;height:26px;border-radius:7px;border:none;cursor:pointer;
  background:#ffffff0a;color:var(--ink-3);font-size:11px;font-family:var(--ui);transition:.18s}
.mchip .chipexp:hover{background:#ffffff16;color:var(--ink)}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
/* Close and minimise both silence the music, so both are given the same red.
   The old close was a 21px grey dot that nobody found, which is why the music
   felt like it could not be turned off. */
#dockX{position:absolute;top:-11px;right:-9px;width:30px;height:30px;border-radius:50%;
  border:1px solid #e8695f7a;background:#2a1310;color:#ff8f84;font-size:14px;font-weight:700;
  line-height:1;cursor:pointer;font-family:var(--ui);transition:.18s;
  box-shadow:0 4px 14px #0009}
#dockX:hover{background:#e8695f;color:#1a0b09;border-color:#ff8f84;transform:scale(1.08)}

/* ---------------- music player ---------------- */
#music{position:fixed;right:20px;bottom:20px;z-index:71;width:336px;border-radius:18px;overflow:hidden;
  background:linear-gradient(168deg,#131b2c,#0b101b);border:1px solid #26334d;
  box-shadow:0 26px 70px #000c,0 0 0 1px #ffffff08 inset;display:none;font-family:var(--ui)}
#music.on{display:block}

#music .mhd{display:flex;align-items:center;gap:9px;padding:13px 15px 4px}
#music .mhd .eq{display:flex;gap:2.5px;align-items:flex-end;height:13px}
#music .mhd .eq i{width:2.5px;background:var(--ink-3);border-radius:2px;height:4px;transition:background .3s}
#music.playing .mhd .eq i{background:var(--accent-2)}
#music.playing .mhd .eq i:nth-child(1){animation:eq .9s ease-in-out infinite}
#music.playing .mhd .eq i:nth-child(2){animation:eq .9s ease-in-out .2s infinite}
#music.playing .mhd .eq i:nth-child(3){animation:eq .9s ease-in-out .4s infinite}
#music.playing .mhd .eq i:nth-child(4){animation:eq .9s ease-in-out .1s infinite}
@keyframes eq{0%,100%{height:3px}50%{height:13px}}
#music .mhd b{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3)}
#music .mhd .sp{flex:1}
#music .mhd button{background:none;border:none;color:var(--ink-3);cursor:pointer;font-size:15px;
  font-family:var(--ui);padding:2px 4px;line-height:1;border-radius:6px;transition:.18s}
#music .mhd button:hover{color:var(--ink);background:#ffffff0d}
/* minimise stops the music too, so it wears the same red as close */
#music .mhd #mMin{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:700;border-radius:9px;border:1px solid #e8695f66;
  background:#2a131099;color:#ff8f84;padding:0}
#music .mhd #mMin:hover{background:#e8695f;color:#1a0b09;border-color:#ff8f84}

/* record-style art that turns only while sound is playing */
#music .mbody{display:flex;align-items:center;gap:13px;padding:8px 15px 12px}
#music .art{position:relative;width:56px;height:56px;flex:none;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#1b2436 0 22%,#0e1522 23% 100%);
  border:1px solid #2c3a56;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px #0007}
#music .art:after{content:"";position:absolute;inset:24px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),#8a6420)}
#music .art .note{position:relative;z-index:2;font-size:19px;color:var(--accent-2);opacity:.9}
#music.playing .art{animation:spin 4.5s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#music .artplay{position:absolute;inset:0;z-index:3;border:none;border-radius:50%;cursor:pointer;
  background:#080b12b8;color:#fff;font-size:14px;opacity:0;transition:.2s;font-family:var(--ui)}
#music .art:hover .artplay{opacity:1}
#music .minfo{flex:1;min-width:0}
#music .tt{font-size:14.5px;font-weight:700;letter-spacing:-.015em;line-height:1.28;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#music .sub{margin-top:2px;font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
#music .times{display:flex;justify-content:space-between;margin-top:6px;font-size:10.5px;
  color:var(--ink-3);font-variant-numeric:tabular-nums}

/* seekable progress */
#music .bar{height:4px;background:#ffffff10;position:relative;cursor:pointer;margin:0 15px;
  border-radius:3px;overflow:hidden}
#music .bar:hover{height:6px}
#music .bar i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));width:0;transition:width .45s linear}
#music .bar u{position:absolute;inset:0}

#music .ctl{display:flex;align-items:center;gap:7px;padding:12px 15px 10px}
#music .ctl button{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid transparent;
  background:#ffffff0a;color:var(--ink-2);cursor:pointer;font-size:12px;display:flex;
  align-items:center;justify-content:center;transition:.18s;font-family:var(--ui)}
#music .ctl button:hover{background:#ffffff16;color:var(--ink)}
#music .ctl button.pp{width:42px;height:42px;background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#0b0d12;font-size:14px;box-shadow:0 6px 18px #c9962f3d}
#music .ctl button.pp:hover{filter:brightness(1.08);transform:scale(1.04)}
#music .ctl .sp{flex:1}
#music .ctl .trk{font-size:10.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;
  letter-spacing:.04em}

/* quiet secondary route to his channel */
#music .hearmore{display:flex;align-items:center;justify-content:center;gap:7px;
  margin:0 15px 14px;padding:9px 12px;border-radius:9px;text-decoration:none;
  background:#ffffff07;border:1px solid var(--line);color:var(--ink-2);font-size:11.8px;
  font-weight:600;transition:.2s}
#music .hearmore:hover{border-color:#c0271d80;color:#ff6b5e;background:#c0271d12}
#music .hearmore .ar{opacity:.7}
#ytwrap{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;left:-9999px}
@media(max-width:640px){
  #music{left:10px;right:10px;width:auto;bottom:10px}
  #music .tt{font-size:14px}
  /* Anchor to the right edge only. Setting left AND right pinned the dock to a
     250px box on the left of a 375px screen, so half of it sat off-frame. */
  #dock{left:auto;right:10px;bottom:10px;width:auto;
    max-width:calc(100vw - 20px);gap:8px;align-items:flex-end}
  .mchip{padding:7px 9px 7px 7px;gap:9px}
  .mchip .disc{width:38px;height:38px}
  .dock-btn{padding:11px 12px;font-size:12.5px;justify-content:center;text-align:center;gap:7px}
  .dock-btn small{display:none}
  #dockX{top:-12px;right:-6px;width:32px;height:32px;font-size:15px}
  .mod{padding:0;align-items:flex-end}
  .mod .box{max-width:none;border-radius:18px 18px 0 0;padding:24px 20px 28px;max-height:92vh;overflow-y:auto}
  .mod h3{font-size:21px}
  .mod textarea{min-height:104px}
  #songLb{align-items:center;padding:16px}
  #songLb .cls{top:-32px}
}

/* song video lightbox */
#songLb .vbox{width:100%;max-width:920px;position:relative;margin:auto}
#songLb .vframe{width:100%;aspect-ratio:16/9;border-radius:13px;overflow:hidden;background:#000;
  box-shadow:0 30px 90px #000c}
#songLb .vframe iframe{width:100%;height:100%;border:0;display:block}
#songLb .vcap{margin-top:14px;text-align:center;font-family:var(--ui)}
#songLb .vcap b{display:block;font-size:17px;font-weight:700;color:var(--ink)}
#songLb .vcap span{display:block;margin-top:3px;font-size:13px;color:var(--ink-3)}
#songLb .cls{position:absolute;top:-38px;right:0;background:none;border:none;color:var(--ink-2);
  font-size:22px;cursor:pointer;font-family:var(--ui)}
#songLb .cls:hover{color:var(--ink)}

/* ---------------- modal (Yaad form) ---------------- */
.mod{position:fixed;inset:0;z-index:120;background:#05070ce6;backdrop-filter:blur(7px);
  display:none;align-items:center;justify-content:center;padding:22px;overflow-y:auto}
.mod.on{display:flex}
.mod .box{width:100%;max-width:560px;background:linear-gradient(168deg,var(--panel),var(--panel-2));
  border:1px solid var(--line);border-radius:18px;padding:32px;font-family:var(--ui);
  box-shadow:0 34px 100px #000b;position:relative;margin:auto}
.mod .cls{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--ink-3);
  font-size:20px;cursor:pointer;line-height:1;font-family:var(--ui)}
.mod .cls:hover{color:var(--ink)}
.mod .k{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.mod h3{margin-top:9px;font-size:25px;font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1.15}
.mod .sb{margin-top:9px;font-size:15px;color:var(--ink-2);line-height:1.55}
.mod label{display:block;margin-top:16px;margin-bottom:6px;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.mod label span{font-weight:500;color:var(--ink-3)}
.mod input,.mod textarea{width:100%;background:#0a0f1a;border:1px solid var(--line);border-radius:10px;
  color:var(--ink);font-family:var(--ui);font-size:15.5px;padding:12px 14px;outline:none;transition:.18s}
.mod input:focus,.mod textarea:focus{border-color:var(--accent);background:#0c111c}
.mod textarea{min-height:128px;resize:vertical;line-height:1.6}
.mod .send{width:100%;margin-top:20px;padding:15px;border:none;border-radius:11px;cursor:pointer;
  background:linear-gradient(135deg,#e0761c,#f5a623);color:#1a1004;font-family:var(--ui);
  font-size:15.5px;font-weight:800;letter-spacing:-.01em;transition:.18s}
.mod .send:hover{filter:brightness(1.07)}
.mod .send:disabled{opacity:.55;cursor:default}
.mod .note{margin-top:13px;font-size:12.5px;color:var(--ink-3);text-align:center;line-height:1.5}
.mod .msg{margin-top:12px;text-align:center;font-size:14.5px;color:var(--accent-2);min-height:20px}
.mod .done{text-align:center;padding:26px 8px}
.mod .done .tk{font-size:44px}
.mod .done h4{margin-top:14px;font-size:22px;font-weight:800;color:var(--ink)}
.mod .done p{margin-top:10px;font-size:15px;color:var(--ink-2);line-height:1.6}
.mod .sharebox{display:flex;gap:9px;margin-top:20px;justify-content:center;flex-wrap:wrap}
.mod .sharebox .wa{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:10px;
  background:#25d366;color:#042a14;font-size:14.5px;font-weight:800;text-decoration:none;transition:.18s}
.mod .sharebox .wa:hover{filter:brightness(1.06);transform:translateY(-1px)}
.mod .sharebox .cp{padding:12px 18px;border-radius:10px;border:1px solid var(--line);
  background:#ffffff06;color:var(--ink-2);font-family:var(--ui);font-size:14px;font-weight:700;
  cursor:pointer;transition:.18s}
.mod .sharebox .cp:hover{border-color:var(--accent);color:var(--accent-2)}
.mod .linkline{margin-top:13px;font-size:11.5px;color:var(--ink-3);word-break:break-all;
  font-family:var(--ui)}

/* ---------------- yaadein carousel (home peek) ---------------- */
.ycar{position:relative;max-width:1240px;margin:0 auto}
/* No scroll-snap: mandatory snapping pinned scrollLeft at 0 and killed both the
   drift and the arrows, the same way it did on the journey rail. */
.ytrack{display:flex;gap:18px;overflow-x:auto;padding:6px 0 20px;
  scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}
.ytrack::-webkit-scrollbar{display:none}
.ycard{flex:0 0 246px;border-radius:15px;overflow:hidden;position:relative;
  border:1px solid var(--line);background:var(--panel);cursor:pointer;
  transition:transform .45s cubic-bezier(.2,.7,.3,1),opacity .45s,filter .45s,border-color .25s}
.ycard:hover{border-color:#3a4a6a}
.ycard .th{position:relative;aspect-ratio:16/10;background:#0a1018;overflow:hidden}
.ycard .th img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.ycard:hover .th img{transform:scale(1.05)}
.ycard .pl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ycard .pl i{width:50px;height:50px;border-radius:50%;background:#080b12b0;border:1.5px solid #ffffff40;
  backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;font-style:normal;
  font-size:16px;color:#fff;padding-left:3px;transition:.25s}
.ycard:hover .pl i{background:var(--accent);border-color:var(--accent-2);color:#0b0d12;transform:scale(1.08)}
.ycard .meta{padding:13px 15px 15px}
.ycard .meta b{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
.ycard .meta span{display:block;margin-top:3px;font-size:11.5px;color:var(--ink-3)}
.ycard .kind{position:absolute;top:10px;left:10px;font-size:10px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;padding:4px 9px;border-radius:5px;background:#080b12c4;color:var(--accent-2);
  backdrop-filter:blur(6px);border:1px solid #c9962f38}
/* text tribute cards */
.ycard.txt .th{aspect-ratio:16/10;padding:20px;display:flex;align-items:center;
  background:linear-gradient(160deg,#141d2e,#0e1521)}
.ycard.txt .th p{font-size:14.5px;line-height:1.6;color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
/* the blur-at-the-edges effect */
.ycar .fade{position:absolute;top:0;bottom:20px;width:130px;pointer-events:none;z-index:3}
.ycar .fade.l{left:0;background:linear-gradient(90deg,var(--bg) 12%,transparent)}
.ycar .fade.r{right:0;background:linear-gradient(270deg,var(--bg) 12%,transparent)}
.ycar .arw{position:absolute;top:38%;z-index:4;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line);background:#0c1220e6;color:var(--ink);cursor:pointer;font-size:15px;
  backdrop-filter:blur(10px);transition:.2s;font-family:var(--ui)}
.ycar .arw:hover{border-color:var(--accent);color:var(--accent-2)}
.ycar .arw.l{left:-6px}
.ycar .arw.r{right:-6px}
@media(max-width:820px){
  .ycar .fade{width:52px}
  .ycar .arw{display:none}
  .ycard{flex:0 0 78vw}
}

/* view counter pill */
.views{display:inline-flex;align-items:center;gap:7px;font-family:var(--ui);font-size:12px;
  font-weight:600;color:var(--ink-3);padding:5px 12px;border-radius:999px;border:1px solid var(--line);
  background:#ffffff06}
.views i{width:6px;height:6px;border-radius:50%;background:#4ade80;font-style:normal;
  box-shadow:0 0 8px #4ade8099}

/* ---------------- the headline film ----------------
   Its own full-width stage, centred, 16:9. Plays from YouTube when
   SITE.mainFilm.yt is set, otherwise from the Drive copy. */
#film{width:min(1500px,94%);margin:0 auto 52px;display:flex;flex-direction:column;
  align-items:center}
#film .fwrap{position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;
  background:#000;cursor:pointer;border:1px solid #2a3852;
  box-shadow:0 34px 110px #000c,0 0 0 1px #ffffff08 inset;transition:border-color .25s}
#film .fwrap:hover{border-color:#3d537d}
#film .fthumb{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 42%,#1c2942,#0a0f18);background-size:cover;
  background-position:center}
#film .fplay{position:relative;z-index:2}
#film .fplay i{width:84px;height:84px;border-radius:50%;background:#e0761ce8;color:#1a1004;
  display:flex;align-items:center;justify-content:center;font-size:27px;font-style:normal;
  padding-left:5px;box-shadow:0 14px 40px #e0761c66;transition:.25s}
#film .fwrap:hover .fplay i{transform:scale(1.07);background:#f5a623}
#film .fbadge{position:absolute;top:14px;left:14px;z-index:3;font-size:10.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;padding:6px 12px;border-radius:7px;
  background:#080b12cc;color:var(--accent-2);border:1px solid #c9962f45;backdrop-filter:blur(6px)}
#film iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
#film .fmeta{margin-top:22px;text-align:center;max-width:58em}
#film .fmeta b{display:block;font-size:25px;font-weight:800;letter-spacing:-.028em;color:var(--ink)}
#film .fmeta span{display:block;margin-top:10px;font-size:16px;color:var(--ink-2);line-height:1.6}
#film .ytlink{display:inline-block;margin-top:15px;font-size:13.5px;font-weight:700;
  color:var(--blue-2);border-bottom:1px solid #2f7fd44d;padding-bottom:2px}
#film .ytlink:hover{color:#a9d0f5}
@media(max-width:820px){
  #film{width:calc(100% - 24px);margin-bottom:38px}
  #film .fwrap{border-radius:12px}
  #film .fmeta{margin-top:16px}
  #film .fmeta b{font-size:19px}
  #film .fmeta span{font-size:14.5px}
  #film .fplay i{width:58px;height:58px;font-size:19px}
}

/* ---------------- Reels: a full-screen vertical feed ----------------
   Playback is a Drive /preview iframe, because Drive refuses to serve media to
   a native <video>. Swiping, labelling and fullscreen are ours; play/pause
   belongs to Drive's player inside the frame. */
#reels{position:fixed;inset:0;z-index:200;background:#000;display:none;overscroll-behavior:contain}
#reels.on{display:block}
#reelTrack{height:100%;overflow-y:auto;scroll-snap-type:y mandatory;
  scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
#reelTrack::-webkit-scrollbar{display:none}
.reel{position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;
  display:flex;align-items:center;justify-content:center;background:#000;overflow:hidden}
.reel .poster{position:absolute;inset:0;background-size:cover;background-position:center;
  filter:blur(30px) brightness(.3);transform:scale(1.2)}
.reel .frame{position:relative;z-index:2;width:100%;max-width:min(560px,100vw);
  aspect-ratio:9/16;max-height:82vh;background:#000;border-radius:12px;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.reel .frame iframe{width:100%;height:100%;border:0;display:block}
.reel.idle .frame:after{content:"";width:34px;height:34px;border-radius:50%;
  border:2.5px solid #ffffff26;border-top-color:#fff;animation:rspin .8s linear infinite}
@keyframes rspin{to{transform:rotate(360deg)}}
.reel .shade{position:absolute;left:0;right:0;bottom:0;height:34%;pointer-events:none;z-index:3;
  background:linear-gradient(180deg,transparent,#000000e8)}

.reel .who{position:absolute;left:0;right:0;bottom:0;padding:18px 20px 26px;z-index:4;
  pointer-events:none;text-align:center}
.reel .who b{display:block;font-size:17px;font-weight:800;letter-spacing:-.02em;color:#fff;
  text-shadow:0 2px 12px #000;line-height:1.25}
.reel .who span{display:block;margin-top:4px;font-size:13.5px;color:#ffffffc4;
  text-shadow:0 2px 10px #000}
.reel .who i{display:inline-block;margin-top:9px;font-style:normal;font-size:10.5px;
  font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#e8bd5c;
  background:#00000066;border:1px solid #e8bd5c4d;border-radius:5px;padding:3px 9px}
.reel .fsbtn{position:absolute;right:14px;bottom:96px;z-index:6;width:40px;height:40px;
  border-radius:50%;border:none;background:#00000080;color:#fff;font-size:15px;cursor:pointer;
  backdrop-filter:blur(8px)}
.reel .fsbtn:hover{background:#000000b3}

/* Tapping the letterbox strips the screen back to the video alone, and the
   chrome also retires itself after a moment. Everything that is ours fades;
   nothing inside the frame is touched, because that is Drive's player. */
#reels.bare #reelClose,#reels.bare #reelCount,#reels.bare #reelUp,
#reels.bare #reelDown,#reels.bare .who,#reels.bare .shade,#reels.bare .fsbtn{
  opacity:0;pointer-events:none}
#reelClose,#reelCount,#reelUp,#reelDown,.reel .who,.reel .shade,.reel .fsbtn{
  transition:opacity .28s ease}

#reelClose{position:absolute;top:14px;left:14px;z-index:20;height:42px;padding:0 17px 0 14px;
  border-radius:999px;display:inline-flex;align-items:center;gap:8px;
  border:1px solid #ffffff40;background:#000000b8;color:#fff;font-family:var(--ui);
  font-size:16px;font-weight:800;cursor:pointer;backdrop-filter:blur(10px);
  box-shadow:0 6px 22px #000a}
#reelClose span{font-size:13.5px;font-weight:700;letter-spacing:.01em}
#reelClose:hover{background:#000;border-color:#fff9;transform:translateY(-1px)}
#reelCount{position:absolute;top:20px;right:16px;z-index:20;font-family:var(--ui);font-size:12.5px;
  font-weight:700;color:#ffffffcc;background:#00000066;padding:5px 11px;border-radius:999px;
  backdrop-filter:blur(8px)}
#reelUp,#reelDown{position:absolute;right:14px;z-index:20;width:44px;height:44px;border-radius:50%;
  border:none;background:#00000080;color:#fff;font-size:17px;cursor:pointer;backdrop-filter:blur(8px);
  transition:.18s}
#reelUp{top:50%;margin-top:-58px}
#reelDown{top:50%;margin-top:14px}
#reelUp:disabled,#reelDown:disabled{opacity:.25;cursor:default}
#reelUp:hover:not(:disabled),#reelDown:hover:not(:disabled){background:#000000b8}
#reelHint{position:absolute;left:0;right:0;bottom:150px;z-index:12;text-align:center;
  font-family:var(--ui);font-size:12.5px;font-weight:600;color:#ffffffa8;pointer-events:none;
  transition:opacity .6s}
#reelHint.gone{opacity:0}
#reelHint em{display:block;font-style:normal;font-size:22px;margin-bottom:2px;
  animation:swipeUp 1.7s ease-in-out infinite}
@keyframes swipeUp{0%,100%{transform:translateY(4px);opacity:.55}50%{transform:translateY(-6px);opacity:1}}
/* Fullscreen holds the whole feed, so the slides must fill it, not the window. */
#reels:fullscreen .reel .frame,#reels:-webkit-full-screen .reel .frame{
  max-width:none;max-height:none;height:100%;aspect-ratio:auto;border-radius:0}

@media(max-width:640px){
  /* Full bleed on a phone. A letterboxed 9/16 frame left Drive's own control
     bar floating in the middle of the screen instead of at the bottom, because
     the bar sits at the bottom of the FRAME, not of the viewport. */
  .reel .frame{max-width:none;width:100%;height:100%;max-height:none;
    aspect-ratio:auto;border-radius:0}
  #reelUp,#reelDown{display:none}
  .reel .fsbtn{bottom:104px}
  .reel .who{padding:16px 18px 30px}
  #reelClose{top:10px;left:10px;height:40px}
}

/* ---------------- back to the start, on every page ---------------- */
#homeLink{position:fixed;top:14px;left:14px;z-index:80;display:inline-flex;align-items:center;gap:7px;
  padding:9px 15px;border-radius:999px;font-family:var(--ui);font-size:13px;font-weight:700;
  color:var(--ink);background:#0c1220d9;border:1px solid var(--line);backdrop-filter:blur(14px);
  box-shadow:0 8px 24px #0007;text-decoration:none;transition:.2s}
#homeLink:hover{border-color:var(--accent);color:var(--accent-2);transform:translateY(-1px)}
#homeLink span{font-size:14px;line-height:1}
@media(max-width:640px){#homeLink{top:10px;left:10px;padding:8px 13px;font-size:12.5px}}

/* the dock is two things now, and no wider than it needs to be */
#dock{width:auto;max-width:250px}
.mchip{width:auto}
/* collapsed, the player is just the disc */
#dock.compact .mchip .chipinfo,#dock.compact .mchip .chipexp{display:none}
#dock.compact .mchip{padding:6px;border-radius:50%}
#dock.compact{align-items:flex-end}

/* the music panel's two links, side by side */
#music .mlinks{display:flex;gap:8px;margin:0 15px 14px}
#music .mlinks a{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 10px;border-radius:8px;text-decoration:none;font-size:11.8px;font-weight:700;
  border:1px solid var(--line);background:#ffffff07;color:var(--ink-2);transition:.2s;
  white-space:nowrap}
#music .mlinks .hearmore:hover{border-color:#c0271d80;color:#ff6b5e;background:#c0271d12}
#music .mlinks .mailme:hover{border-color:var(--accent);color:var(--accent-2);background:#c9962f12}

/* The dock, on a phone. This block sits last on purpose: the `#dock` rules
   further up have the same specificity, and a media query adds none, so the
   later rule is the only one that reliably wins. */
@media(max-width:640px){
  #dock{left:auto;right:10px;bottom:10px;width:auto;
    max-width:min(250px,calc(100vw - 20px));align-items:flex-end}
  #dock .dock-btn{width:100%}
}

/* ---------------- The Safar, as a feed ----------------
   Same content as the horizontal rail, read one stop per screen. Built by
   journey.js, which clones the stops and rebuilds the legs from their data. */
#jreel{position:fixed;inset:0;z-index:200;background:#080b12;display:none;
  overscroll-behavior:contain}
#jreel.on{display:block}
#jrTrack{height:100%;overflow-y:auto;scroll-snap-type:y mandatory;
  scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
#jrTrack::-webkit-scrollbar{display:none}

.jrs{position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;
  display:flex;align-items:center;justify-content:center;padding:64px 20px 40px;
  overflow-y:auto;scrollbar-width:none}
.jrs::-webkit-scrollbar{display:none}
.jrs .jrin{width:100%;max-width:640px;margin:auto;
  opacity:.35;transform:translateY(10px) scale(.985);
  transition:opacity .45s ease,transform .45s ease}
.jrs.cur .jrin{opacity:1;transform:none}

.jrs .jryr{font-family:var(--ui);font-size:26px;font-weight:800;letter-spacing:-.03em;
  color:var(--accent-2);margin-bottom:14px;line-height:1.1}
.jrs .jryr small{display:block;margin-top:4px;font-size:12.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
/* the cloned card already carries the rail's styling; it only needs to sit flat */
.jrs .jrcard .card{width:100%}
.jrs.leg .jn{flex:none;width:100%;padding:0}

#jrClose{position:absolute;top:14px;left:14px;z-index:20;height:42px;padding:0 17px 0 14px;
  border-radius:999px;display:inline-flex;align-items:center;gap:8px;
  border:1px solid #ffffff30;background:#0c1220e8;color:var(--ink);font-family:var(--ui);
  font-size:16px;font-weight:800;cursor:pointer;backdrop-filter:blur(12px);
  box-shadow:0 8px 26px #000a;transition:.2s}
#jrClose span{font-size:13.5px;font-weight:700}
#jrClose:hover{border-color:var(--accent);color:var(--accent-2)}
#jrCount{position:absolute;top:20px;right:16px;z-index:20;font-family:var(--ui);font-size:12.5px;
  font-weight:700;color:var(--ink-2);background:#0c1220cc;padding:5px 12px;border-radius:999px;
  border:1px solid var(--line);backdrop-filter:blur(10px)}
#jrUp,#jrDown{position:absolute;right:16px;z-index:20;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line);background:#0c1220d9;color:var(--ink);font-size:17px;cursor:pointer;
  backdrop-filter:blur(10px);transition:.18s}
#jrUp{top:50%;margin-top:-58px}
#jrDown{top:50%;margin-top:14px}
#jrUp:disabled,#jrDown:disabled{opacity:.25;cursor:default}
#jrUp:hover:not(:disabled),#jrDown:hover:not(:disabled){border-color:var(--accent);color:var(--accent-2)}
#jrBar{position:absolute;left:0;right:0;bottom:0;height:3px;background:#ffffff0d;z-index:20}
#jrBar i{display:block;height:100%;width:0;transition:width .35s ease;
  background:linear-gradient(90deg,var(--accent),var(--accent-2))}

/* the floating shortcut to a posting's own upload folder, on a story slide */
.jrphoto{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:15;
  display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;
  border:1px solid #ffffff30;background:#0c1220d9;color:var(--ink);font-family:var(--ui);
  font-size:12.5px;font-weight:700;text-decoration:none;backdrop-filter:blur(10px);
  box-shadow:0 8px 22px #000a;transition:.2s}
.jrphoto:hover{border-color:var(--accent);color:var(--accent-2);transform:translateX(-50%) translateY(-2px)}

@media(max-width:640px){
  .jrs{padding:58px 14px 28px}
  .jrs .jryr{font-size:22px}
  #jrUp,#jrDown{display:none}
  #jrClose{top:10px;left:10px;height:40px}
  .jrphoto{bottom:14px;padding:9px 15px;font-size:12px}
}