/* ============================================================
   The Universal Orlando Packing List (upk-), layered over packing-list.css (pk-).
   A storm night over the lagoon. Deep teal sky, slanting rain, a lightning flicker behind a
   coaster skyline, and a glowing ride pass that reads one month at a time. Below, the same
   cream page and checklist as the Disney lists, recolored for Orlando's other resort.
   Electric cyan for the locker run, storm violet for the scanners, gold for the paid cubbies.
   Every rule is scoped under .guide--upk.
   ============================================================ */

.guide--upk {
  --pk-lagoon: oklch(25% 0.06 220);
  --pk-lagoon-2: oklch(33% 0.08 205);
  --pk-brass: oklch(86% 0.15 95);
  --pk-coral: oklch(63% 0.17 35);
  --pk-plum: oklch(50% 0.15 290);
  --pk-sky: oklch(60% 0.12 225);
  --upk-cyan: oklch(84% 0.13 195);
  --upk-bolt: oklch(92% 0.16 100);
  --upk-scan: oklch(58% 0.19 20);
  --upk-free: oklch(60% 0.12 190);
  --upk-paid: oklch(72% 0.14 80);
}

/* ---------------------------------------------------------------- hero, a storm night */
.guide--upk .upk-hero {
  padding-bottom: clamp(90px, 12vw, 130px);
  background:
    radial-gradient(60% 40% at 78% 18%, oklch(55% 0.1 230 / 0.55), transparent 70%),
    radial-gradient(70% 45% at 20% 100%, oklch(55% 0.12 195 / 0.5), transparent 70%),
    linear-gradient(180deg, oklch(17% 0.04 245) 0%, oklch(23% 0.06 230) 45%, oklch(30% 0.08 210) 80%, oklch(36% 0.09 200) 100%);
}
.guide--upk .upk-hero::before { display: none; }
.guide--upk .upk-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.guide--upk .upk-flash {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(50% 45% at 72% 22%, oklch(95% 0.06 240 / 0.55), transparent 70%);
}
.guide--upk .upk-rain {
  position: absolute; inset: -40px 0 0 0; opacity: 0.35;
  background-image:
    repeating-linear-gradient(105deg, transparent 0 18px, oklch(90% 0.03 220 / 0.5) 18px 19px, transparent 19px 46px),
    repeating-linear-gradient(105deg, transparent 0 31px, oklch(90% 0.03 220 / 0.35) 31px 32px, transparent 32px 71px);
  background-size: 100% 140px, 100% 220px;
}
/* a coaster skyline, a loop, a lift hill and a castle-free row of show buildings */
.guide--upk .upk-skyline {
  position: absolute; left: 0; right: 0; bottom: 34px; height: 120px; opacity: 0.95;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%230c1f2c' stroke-width='3.2'%3E%3Cpath d='M0 92C30 92 40 30 62 30s30 62 60 62'/%3E%3Ccircle cx='170' cy='62' r='24'/%3E%3Cpath d='M120 92c20 0 30-6 50-6s30 6 50 6M260 92l40-74 40 74'/%3E%3Cpath d='M270 74h60M282 52h36M293 32h14' stroke-width='2'/%3E%3C/g%3E%3Cg fill='%230c1f2c'%3E%3Cpath d='M0 120V96h28V84h22v12h40V78h18v18h46v-6h24v6h52V86h20v10h44V70h16v26h44v-8h26v8h20v24z'/%3E%3C/g%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
}
.guide--upk .upk-lagoon {
  position: absolute; left: 0; right: 0; bottom: 0; height: 36px;
  background:
    repeating-linear-gradient(180deg, oklch(70% 0.1 200 / 0.18) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, oklch(20% 0.05 220), oklch(16% 0.04 230));
}
.guide--upk .pk-kicker { color: var(--upk-cyan); }
.guide--upk .pk-standfirst { color: oklch(90% 0.02 220); }

/* the ride pass card */
.guide--upk .upk-pass {
  position: relative; margin: 28px 0 0; max-width: 470px; padding: 14px 16px 0; border-radius: 20px; overflow: hidden;
  background: oklch(16% 0.04 230 / 0.62); border: 1px solid oklch(84% 0.13 195 / 0.35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 22px 44px oklch(10% 0.04 230 / 0.5), 0 0 0 1px oklch(84% 0.13 195 / 0.08), 0 0 40px oklch(84% 0.13 195 / 0.12);
}
.guide--upk .upk-pass-head { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.guide--upk .upk-pass-head span { font-size: 11.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--upk-cyan); }
.guide--upk .upk-pass-head i { font-style: normal; color: oklch(98% 0.01 200); }
.guide--upk .upk-pass-head small { font-family: var(--pk-serif); font-size: 22px; line-height: 1.15; color: oklch(97% 0.01 200); }
.guide--upk .upk-chips { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; margin: 12px 0 4px; }
.guide--upk .upk-chip {
  appearance: none; cursor: pointer; height: 28px; padding: 0; border: 1px solid oklch(95% 0.02 200 / 0.16); border-radius: 8px;
  font: 800 12px/1 var(--pk-sans); color: oklch(86% 0.03 210); background: oklch(98% 0 0 / 0.06); transition: background .15s, color .15s;
}
.guide--upk .upk-chip:hover { background: oklch(98% 0 0 / 0.14); }
.guide--upk .upk-chip[aria-pressed="true"] { color: var(--pk-ink); background: var(--upk-cyan); border-color: var(--upk-cyan); box-shadow: 0 0 14px oklch(84% 0.13 195 / 0.55); }
.guide--upk .upk-chip:focus-visible { outline: 2px solid var(--upk-cyan); outline-offset: 2px; }

.guide--upk .upk-meters { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 8px; margin: 12px 0 0; }
.guide--upk .upk-ring, .guide--upk .upk-meter {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 10px 6px; border-radius: 14px; background: oklch(98% 0 0 / 0.05); border: 1px solid oklch(95% 0.02 200 / 0.1);
}
.guide--upk .upk-ring svg { width: 74px; height: 74px; transform: rotate(-90deg); }
.guide--upk .upk-ring-track { fill: none; stroke: oklch(95% 0.02 200 / 0.14); stroke-width: 7; }
.guide--upk .upk-ring-fill { fill: none; stroke: var(--upk-cyan); stroke-width: 7; stroke-linecap: round; transition: stroke-dasharray .5s cubic-bezier(.3,.7,.2,1); filter: drop-shadow(0 0 4px oklch(84% 0.13 195 / 0.8)); }
.guide--upk .upk-ring b { position: absolute; top: 31px; left: 0; right: 0; text-align: center; font: 700 26px/1 var(--pk-num); color: oklch(98% 0.01 200); }
.guide--upk .upk-ring b small { font-size: 14px; margin-left: 1px; color: var(--upk-cyan); }
.guide--upk .upk-meter-svg { width: 22px; height: 22px; }
.guide--upk .upk-meter--hi .upk-meter-svg { color: var(--upk-bolt); }
.guide--upk .upk-meter--lo .upk-meter-svg { color: oklch(78% 0.1 280); }
.guide--upk .upk-meter b { font: 700 38px/1 var(--pk-num); color: oklch(98% 0.01 200); }
.guide--upk .upk-meter-label { font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: oklch(80% 0.03 210); }

.guide--upk .upk-pass-adds { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0; }
.guide--upk .upk-pass-adds > span:first-child { font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: oklch(80% 0.03 210); margin-right: 2px; }
.guide--upk .upk-pass-list { display: contents; }
.guide--upk .upk-pass-list b { padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; color: var(--pk-ink); background: var(--upk-cyan); }

/* the perforated stub with the three tests */
.guide--upk .upk-stub {
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px;
  margin: 14px -16px 0; padding: 12px 12px 13px; background: oklch(98% 0 0 / 0.06);
  border-top: 2px dashed oklch(84% 0.13 195 / 0.35);
}
.guide--upk .upk-stub::before, .guide--upk .upk-stub::after {
  content: ""; position: absolute; top: -10px; width: 18px; height: 18px; border-radius: 50%; background: oklch(26% 0.07 215);
}
.guide--upk .upk-stub::before { left: -9px; }
.guide--upk .upk-stub::after { right: -9px; }
.guide--upk .upk-stub-item { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 12px; font-weight: 700; color: oklch(88% 0.02 210); white-space: nowrap; }
.guide--upk .upk-stub-item b { font: 700 19px/1 var(--pk-num); color: oklch(98% 0.01 200); }
.guide--upk .upk-stub-svg { width: 17px; height: 17px; flex: none; }
.guide--upk .upk-stub--scan .upk-stub-svg { color: oklch(72% 0.16 20); }
.guide--upk .upk-stub--lock .upk-stub-svg { color: var(--upk-cyan); }
.guide--upk .upk-stub--soak .upk-stub-svg { color: oklch(78% 0.1 230); }

@media (prefers-reduced-motion: no-preference) {
  .guide--upk .upk-rain { animation: upk-pour 0.9s linear infinite; }
  .guide--upk .upk-flash { animation: upk-flash 9s ease-out infinite 2s; }
  .guide--upk .upk-ring-fill { animation: upk-fill 1.4s cubic-bezier(.3,.7,.2,1) both .3s; }
}
@keyframes upk-pour { to { background-position: -38px 140px, -60px 220px; } }
@keyframes upk-flash { 0%, 90%, 100% { opacity: 0; } 91% { opacity: 1; } 92% { opacity: 0.2; } 93.5% { opacity: 0.85; } 96% { opacity: 0; } }
@keyframes upk-fill { from { stroke-dasharray: 0 100; } }

.guide--upk .pk-hero-count {
  padding: 8px 14px; border-radius: 999px; color: oklch(92% 0.02 210);
  background: oklch(16% 0.04 230 / 0.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.guide--upk .pk-hero-count b { color: var(--upk-cyan); }

.guide--upk .pk-answer::before { background: linear-gradient(90deg, var(--upk-scan) 0 33%, var(--upk-free) 33% 66%, var(--upk-paid) 66%); }
.guide--upk .pk-progress-fill { background: linear-gradient(90deg, var(--upk-free), var(--upk-cyan)); }

/* ---------------------------------------------------------------- the locker run */
.guide--upk .upk-k--scan { --k: var(--upk-scan); }
.guide--upk .upk-k--free { --k: var(--upk-free); }
.guide--upk .upk-k--paid { --k: var(--upk-paid); }
.guide--upk .upk-tally { display: flex; gap: 3px; height: 38px; margin: 0 0 12px; border-radius: 12px; overflow: hidden; }
.guide--upk .upk-tally-seg {
  display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; padding: 0 6px;
  font-size: 12px; font-weight: 800; color: #fff; background: var(--k); white-space: nowrap; overflow: hidden;
}
.guide--upk .upk-tally-seg b { font: 700 19px/1 var(--pk-num); }
@media (prefers-reduced-motion: no-preference) {
  .guide--upk .upk-tally-seg { animation: upk-grow .9s cubic-bezier(.3,.7,.2,1) both; transform-origin: left; }
}
@keyframes upk-grow { from { transform: scaleX(0); } }

.guide--upk .upk-lockers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.guide--upk .upk-locker {
  position: relative; padding: 14px 14px 12px; border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in oklch, var(--k) 9%, white), var(--pk-card) 70%); border: 1px solid var(--pk-line);
}
.guide--upk .upk-locker::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--k); }
.guide--upk .upk-locker-head { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; margin: 0 0 10px; }
.guide--upk .upk-locker-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #fff; background: var(--k); }
.guide--upk .upk-locker-svg { width: 22px; height: 22px; }
.guide--upk .upk-locker-name { margin: 0; font-family: var(--pk-serif); font-size: 20px; line-height: 1.1; color: var(--pk-ink); }
.guide--upk .upk-locker-rule { margin: 2px 0 0; font-size: 12.5px; font-weight: 700; line-height: 1.35; color: color-mix(in oklch, var(--k) 70%, black); }
.guide--upk .upk-locker-rides { list-style: none; margin: 0; padding: 0; }
.guide--upk .upk-locker-rides li { display: flex; flex-direction: column; padding: 7px 0; border-top: 1px dashed var(--pk-line); }
.guide--upk .upk-locker-rides span { font-size: 14.5px; font-weight: 700; line-height: 1.3; color: var(--pk-ink); }
.guide--upk .upk-locker-rides small { font-size: 12px; font-weight: 600; color: var(--pk-ink-3); }

.guide--upk .upk-where {
  margin: 12px 0 0; padding: 16px; border-radius: 18px; color: oklch(95% 0.01 210);
  background: linear-gradient(135deg, var(--pk-lagoon-2), var(--pk-lagoon));
}
.guide--upk .upk-where-head { margin: 0 0 10px; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--upk-cyan); }
.guide--upk .upk-where-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.guide--upk .upk-where-list li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; }
.guide--upk .upk-where-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--pk-ink); background: var(--upk-cyan); }
.guide--upk .upk-where-svg { width: 22px; height: 22px; }
.guide--upk .upk-where-list b { display: block; font-family: var(--pk-serif); font-weight: 400; font-size: 19px; line-height: 1.15; color: oklch(98% 0.01 200); }
.guide--upk .upk-where-list span { display: block; margin-top: 2px; font-size: 14.5px; line-height: 1.5; color: oklch(86% 0.02 210); }

/* ---------------------------------------------------------------- the soak meter */
.guide--upk .upk-soaks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.guide--upk .upk-soak {
  display: grid; grid-template-columns: 78px 1fr; gap: 14px; align-items: start; padding: 14px; border-radius: 16px;
  background: var(--pk-card); border: 1px solid var(--pk-line);
}
.guide--upk .upk-soak--3 { background: linear-gradient(90deg, oklch(93% 0.04 225), var(--pk-card) 55%); border-color: oklch(82% 0.06 225); }
.guide--upk .upk-soak--2 { background: linear-gradient(90deg, oklch(95.5% 0.025 220), var(--pk-card) 55%); }
.guide--upk .upk-drops { display: flex; gap: 2px; padding-top: 3px; }
.guide--upk .upk-drops i { display: block; color: oklch(86% 0.02 220); }
.guide--upk .upk-drops i.is-on { color: oklch(56% 0.14 235); }
.guide--upk .upk-drops i.is-on .upk-drop-svg { fill: oklch(70% 0.11 225 / 0.55); }
.guide--upk .upk-drop-svg { width: 24px; height: 24px; }
.guide--upk .upk-soak-name { margin: 0; font-family: var(--pk-serif); font-size: 20px; line-height: 1.15; color: var(--pk-ink); }
.guide--upk .upk-soak-meta { margin: 3px 0 6px; font-size: 12.5px; font-weight: 600; color: var(--pk-ink-3); }
.guide--upk .upk-soak-meta b { color: oklch(48% 0.13 235); font-weight: 800; }
.guide--upk .upk-soak-note { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--pk-ink-2); }
@media (prefers-reduced-motion: no-preference) {
  .guide--upk .upk-drops i.is-on { animation: upk-drip .6s cubic-bezier(.3,1.4,.5,1) both; }
  .guide--upk .upk-drops i.is-on:nth-child(2) { animation-delay: .12s; }
  .guide--upk .upk-drops i.is-on:nth-child(3) { animation-delay: .24s; }
}
@keyframes upk-drip { from { opacity: 0; transform: translateY(-8px); } }

/* ---------------------------------------------------------------- the storm clock */
.guide--upk .upk-clock {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; align-items: end;
  height: 170px; padding: 16px 12px 10px; border-radius: 18px;
  background: linear-gradient(180deg, oklch(22% 0.05 235), oklch(28% 0.07 215));
}
.guide--upk .upk-clock-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.guide--upk .upk-clock-col i { display: block; width: 100%; max-width: 22px; border-radius: 6px 6px 3px 3px; background: linear-gradient(0deg, oklch(50% 0.1 230), oklch(72% 0.1 215)); }
.guide--upk .upk-clock-col.is-peak i { background: linear-gradient(0deg, oklch(70% 0.13 195), var(--upk-cyan)); box-shadow: 0 0 14px oklch(84% 0.13 195 / 0.6); }
.guide--upk .upk-clock-peak { font: 700 13px/1 var(--pk-num); color: var(--upk-cyan); white-space: nowrap; }
.guide--upk .upk-clock-col small { font-size: 10px; font-weight: 800; color: oklch(80% 0.03 210); }
.guide--upk .upk-clock-col.is-peak small { color: var(--upk-cyan); }
@media (prefers-reduced-motion: no-preference) {
  .guide--upk .upk-clock-col i { animation: upk-rise 1s cubic-bezier(.3,.7,.2,1) both; transform-origin: bottom; }
}
@keyframes upk-rise { from { transform: scaleY(0); } }

.guide--upk .upk-indoor {
  display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; margin: 12px 0 0; padding: 16px; border-radius: 16px;
  background: oklch(96% 0.035 95); border: 1px solid oklch(86% 0.08 95);
}
.guide--upk .upk-indoor-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: var(--pk-ink); background: var(--upk-bolt); }
.guide--upk .upk-indoor-title { margin: 0 0 4px; font-family: var(--pk-serif); font-size: 21px; line-height: 1.15; color: var(--pk-ink); }
.guide--upk .upk-indoor-text { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--pk-ink-2); }

/* ---------------------------------------------------------------- your month */
.guide--upk .pk-month.is-on { background: var(--pk-lagoon); }
.guide--upk .pk-month.is-on .pk-month-col i { background: linear-gradient(0deg, oklch(70% 0.13 195), var(--upk-cyan)); }
.guide--upk .pk-month-card { background-image: none; background: linear-gradient(135deg, oklch(95% 0.03 200), oklch(95% 0.035 95)); }

/* ---------------------------------------------------------------- week board + park links */
.guide--upk .pk-week { background: linear-gradient(180deg, var(--pk-lagoon-2), var(--pk-lagoon) 70%, oklch(20% 0.05 240)); }
.guide--upk .upk-parks { margin-top: 14px; }

/* ---------------------------------------------------------------- picks */
.guide--upk .pk-pick--phone { --c: oklch(56% 0.14 235); }
.guide--upk .pk-pick--sling { --c: var(--upk-free); }
.guide--upk .pk-pick--poncho { --c: var(--pk-plum); }
.guide--upk .pk-pick--battery { --c: oklch(60% 0.15 145); }
.guide--upk .pk-pick--towel { --c: var(--pk-coral); }
.guide--upk .pk-pick--socks { --c: oklch(62% 0.14 70); }
.guide--upk .upk-pick-when {
  align-self: flex-start; margin: 0 0 8px; padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800; color: var(--c); background: color-mix(in oklch, var(--c) 10%, white);
}
.guide--upk .affiliate-note { background: oklch(95.5% 0.025 200); }

@media (max-width: 560px) {
  .guide--upk .upk-pass { padding: 12px 12px 0; }
  .guide--upk .upk-stub { margin: 14px -12px 0; }
  .guide--upk .upk-meter b { font-size: 32px; }
  .guide--upk .upk-ring svg { width: 66px; height: 66px; }
  .guide--upk .upk-ring b { top: 28px; font-size: 23px; }
  .guide--upk .upk-stub-item { flex-direction: column; gap: 2px; font-size: 11px; }
  .guide--upk .upk-lockers { grid-template-columns: 1fr; }
  .guide--upk .upk-soak { grid-template-columns: 1fr; gap: 6px; }
  .guide--upk .upk-clock { gap: 2px; padding: 14px 8px 8px; }
  .guide--upk .upk-clock-col small { font-size: 8.5px; }
  .guide--upk .upk-skyline { height: 80px; }
}

@media print {
  .guide--upk .upk-hero, .guide--upk .upk-pass, .guide--upk .upk-parks { display: none !important; }
}