/* joycevarb time-jump pass (cc3, 2026-11-03). Loads after jv-extras.css.
   Matt: keep cc3's build; swap the cartoon sky for Gemini's DeLorean / clock tower scene and the
   hoverboard chase; boxes opaque in our colors; Gemini's pills and lettering; Matt's icon only.
   Switches (TWEAKS > Time jump): html.jvx-opaque, .jvx-look-slate, .jvx-type-gemini, .jvx-stage, .jvx-oldsky */

/* ---------- 1. scene layer ---------- */
#jvx-tj{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:0}
html.jvx-sky-off #jvx-tj{display:none}
html.jvx-tj:not(.jvx-oldsky) #jvx-sky{display:none}            /* old cast: birds, balloons, saucers, bats, blimp */
html.jvx-tj body{background-image:none !important}

/* keep side margins for the scene; at 1860px and wider nothing changes */
@media (min-width:1300px){
  html.jvx-stage .jv-shell{max-width:clamp(1200px,calc(100vw - 380px),1480px) !important}
}

/* ---------- 2. opaque reading surfaces ---------- */
/* ours: the locked palette's own surface mix, alpha removed */
html.jvx-opaque{
  --jv-surface:color-mix(in srgb,var(--color-surface) 90%,#ffc083) !important;
  --jv-surface2:color-mix(in srgb,color-mix(in srgb,var(--color-surface) 93%,#fff) 90%,#ffc083) !important}
/* Gemini slate */
html.jvx-opaque.jvx-look-slate{--jv-surface:#282c32 !important;--jv-surface2:#22262b !important}
html.jvx-opaque :is(.jv-flatlist,.jv-grouplist ol) > li{background:#202328 !important}
html.jvx-opaque :is(.jv-spectrum,.jv-brandcard,#docket,.jv-whylawful,.jv-whoruns,.jv-whoruns-foot,.jv-rail-box){
  border-color:color-mix(in srgb,var(--jv-cyan) 36%,transparent) !important;
  box-shadow:0 0 14px color-mix(in srgb,var(--jv-cyan) 11%,transparent),0 6px 20px rgba(0,0,0,.45) !important}
html.jvx-opaque .jv-spectrum{-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
html.jvx-opaque :is(.jv-flatlist,.jv-grouplist ol) > li{
  border-color:color-mix(in srgb,var(--jv-cyan) 36%,transparent) !important;
  box-shadow:0 0 14px color-mix(in srgb,var(--jv-cyan) 9%,transparent),0 6px 18px rgba(0,0,0,.4) !important}
html.jvx-opaque :is(.jv-flatlist,.jv-grouplist ol) > li:hover{border-color:color-mix(in srgb,var(--jv-cyan) 65%,transparent) !important}

/* ---------- 3. Gemini pills ---------- */
html.jvx-type-gemini :is(.jv-rail-ranges,.jv-ranges,.jv-topbar,.jv-pin-ranges,.jv-bottom-ranges,.jv-jump) button{
  font-family:var(--jv-mono) !important;font-size:12.2px !important;font-weight:600 !important;letter-spacing:.01em;
  padding:5px 11px !important;border-radius:5px !important;color:var(--jv-court) !important;background:#2b3037 !important;
  border:1px solid color-mix(in srgb,var(--jv-cyan) 24%,transparent) !important;transition:all .15s ease !important}
html.jvx-type-gemini :is(.jv-rail-ranges,.jv-ranges,.jv-topbar,.jv-pin-ranges,.jv-bottom-ranges,.jv-jump) button:hover:not(:disabled){
  border-color:var(--jv-cyan) !important;color:#fff !important;background:#353c46 !important}
html.jvx-type-gemini :is(.jv-rail-ranges,.jv-ranges,.jv-topbar,.jv-pin-ranges,.jv-bottom-ranges,.jv-jump) button:is([aria-current="page"],[aria-current="true"],.on,[aria-pressed="true"]){
  background:color-mix(in srgb,var(--jv-cyan) 18%,transparent) !important;color:var(--jv-cyan) !important;
  border-color:var(--jv-cyan) !important;box-shadow:0 0 10px color-mix(in srgb,var(--jv-cyan) 28%,transparent) !important}

/* ---------- 4. Gemini lettering ---------- */
html.jvx-type-gemini :is(.jv-flatlist,.jv-grouplist ol) > li{padding:16px 18px !important;border-radius:8px !important;grid-template-columns:58px minmax(0,1fr) !important}
html.jvx-type-gemini :is(.jv-flatlist,.jv-grouplist ol) > li > span:first-child{
  font-weight:700 !important;font-size:17px !important;line-height:1.45 !important;color:var(--jv-cyan) !important}
html.jvx-type-gemini :is(.jv-flatlist,.jv-grouplist ol) > li > div > div:first-child > span:first-child{
  font-family:var(--jv-mono) !important;font-size:11px !important;border-radius:4px !important;padding:2px 7px !important}
html.jvx-type-gemini :is(.jv-flatlist,.jv-grouplist ol) > li > div > div:first-child > span:not(:first-child){
  font-family:var(--jv-mono) !important;font-weight:600 !important;font-size:12.5px !important;color:var(--jv-yellow) !important}
html.jvx-type-gemini :is(.jv-flatlist,.jv-grouplist ol) > li p{
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif !important;
  font-size:15.2px !important;line-height:1.62 !important;color:var(--jv-court) !important}
html.jvx-type-gemini :is(.jv-flatlist,.jv-grouplist ol) > li > div > div:last-child :is(button,a){
  font-weight:600 !important;border-radius:4px !important}
html.jvx-type-gemini :is(.jv-box-h,.jv-tools-h,.jv-rail-h){
  font-family:var(--jv-mono) !important;font-weight:600 !important;letter-spacing:.1em !important;text-transform:uppercase;color:var(--jv-cyan) !important}
html.jvx-type-gemini .jv-partybox{border-radius:6px !important}
html.jvx-type-gemini .jv-pb-name{font-weight:600}
html.jvx-type-gemini .jv-pb-n{font-family:var(--jv-mono);font-weight:700;color:var(--jv-yellow)}

/* ---------- 5. Matt 2026-11-03: "Who runs this" only in the middle column; left and right boxes align ----------
   The left column carried a second copy under the party box, so it ran taller than the screen and its sticky
   top drifted away from the case box. With the copy gone both columns are one box each, pinned at the same top;
   jv-extras.js equalize() gives them one height. */
@media (min-width:1101px){
  html.jvx-layout-sides .jv-rail-extra .jv-whoruns{display:none !important}
  html.jvx-layout-sides.jvx-logo-top .jv-rail-extra{display:none !important}
  html.jvx-layout-sides .jv-whoruns-foot{display:grid !important}
}

/* ---------- 6. Matt 2026-11-03: street scene along the bottom; it shows through the side boxes, never the center ---------- */
html.jvx-tj :is(.jv-rail-box,.jv-brandcard,.jv-spectrum){
  background:color-mix(in srgb,var(--jv-surface) var(--jvx-side-pct,80%),transparent) !important}

/* Keep range controls even; the animation stays subordinate to the docket. */
html.jvx-type-gemini .jv-rail-ranges button{
  white-space:nowrap;min-height:30px;padding:5px 4px !important}

/* The template's inline two-column grid otherwise reduces the docket to 0px
   on phones. Reading takes the full width; no animation margin is reserved. */
@media (max-width:760px){
  html.jvx-tj .jv-cols{grid-template-columns:minmax(0,1fr) !important}
  html.jvx-tj :is(.jv-main,.jv-aside){min-width:0;grid-column:1}
}

/* Matt's 03:57 pick: retain surfaces and palette; reduce wide-screen outside
   gutters by approximately 15%, giving the docket and side cards more room. */
html.jvx-layout-sides .jv-shell{max-width:calc(1264px + 15vw) !important;box-sizing:border-box}
@media (min-width:1600px){
  html.jvx-layout-sides .jv-cols{grid-template-columns:minmax(300px,340px) minmax(0,1fr) minmax(300px,340px) !important}
}
@media (min-width:1101px){
  html.jvx-layout-sides .jv-brandcard > .jv-caption{font-size:14px !important;line-height:1.5 !important}
  html.jvx-layout-sides .jv-official{font-size:13.3px;line-height:1.45}
  html.jvx-layout-sides .jv-official dt{font-size:11.5px}
  html.jvx-layout-sides .jv-official-src{font-size:12px;line-height:1.45}
  html.jvx-layout-sides .jv-pb-name{font-size:12.5px}
}
.jv-smallcard{display:grid;gap:10px;align-content:start;padding:13px 15px;border-radius:12px;
  background:color-mix(in srgb,var(--jv-surface) var(--jvx-side-pct,80%),transparent);
  border:1px solid color-mix(in srgb,var(--jv-cyan) 36%,transparent);font-size:12px;line-height:1.45}
.jv-smallcard h2{margin:0;font:600 11px/1.3 var(--jv-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--jv-cyan)}
.jv-smallcard nav{display:grid;gap:6px}
.jv-smallcard a{text-underline-offset:3px}
.jv-smallcard p{margin:0;color:var(--jv-muted);font-size:11px}
.jv-smallcard .jv-colours{padding-top:8px;border-top:1px solid var(--jv-line)}
.jv-smallcard .jv-colours [role="group"]{flex-wrap:wrap}