/* ============================================================
   The Disneyland Packing List (dpk-), layered over packing-list.css (pk-).
   An Anaheim dusk. A violet to gold sky with palm silhouettes on the horizon and an
   arc that walks one day from the cool gray morning to the warm afternoon and down into
   the fireworks night. Below, the same cream page and checklist as the Disney World list,
   recolored for California. Marigold for the park bag, violet for the hotel, Pacific
   blue for travel day. Every rule is scoped under .guide--dpk.
   ============================================================ */

.guide--dpk {
  --pk-lagoon: oklch(29% 0.08 290);
  --pk-lagoon-2: oklch(37% 0.1 300);
  --pk-brass: oklch(84% 0.14 75);
  --pk-kraft: oklch(92% 0.04 70);
  --pk-coral: oklch(64% 0.17 45);
  --pk-plum: oklch(52% 0.15 295);
  --pk-sky: oklch(58% 0.12 230);
  --pk-paper: oklch(97.8% 0.012 75);
  --dpk-dusk: oklch(66% 0.16 30);
  --dpk-gold: oklch(86% 0.13 80);
  --dpk-gray: oklch(80% 0.02 240);
}

/* ---------------------------------------------------------------- hero, an Anaheim dusk */
.guide--dpk .dpk-hero {
  padding-bottom: clamp(84px, 11vw, 120px);
  background:
    radial-gradient(70% 40% at 50% 100%, oklch(80% 0.14 60 / 0.75), transparent 70%),
    radial-gradient(45% 35% at 85% 92%, oklch(70% 0.17 25 / 0.5), transparent 70%),
    linear-gradient(180deg, oklch(22% 0.07 280) 0%, oklch(32% 0.11 300) 38%, oklch(52% 0.15 340) 68%, oklch(70% 0.15 45) 100%);
}
.guide--dpk .dpk-hero::before { display: none; }
.guide--dpk .dpk-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.guide--dpk .dpk-glow {
  position: absolute; left: 50%; bottom: -120px; width: 420px; height: 420px; margin-left: -210px; border-radius: 50%;
  background: radial-gradient(circle, oklch(92% 0.12 85 / 0.9), oklch(80% 0.15 60 / 0.35) 40%, transparent 68%);
}
.guide--dpk .dpk-stars {
  position: absolute; inset: 0 0 55% 0; opacity: 0.7;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, #fff, transparent),
    radial-gradient(1px 1px at 28% 8%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 47% 22%, #fff, transparent),
    radial-gradient(1px 1px at 63% 12%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 78% 28%, #fff, transparent),
    radial-gradient(1px 1px at 90% 10%, #fff, transparent),
    radial-gradient(1px 1px at 6% 40%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 70% 44%, #fff, transparent);
}
/* palm silhouettes along the horizon, drawn in an inline SVG background */
.guide--dpk .dpk-palms {
  position: absolute; left: 0; right: 0; bottom: 0; height: 120px; opacity: 0.9;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cg fill='%23251a3d'%3E%3Cpath d='M0 120V104c40-6 80-4 120 2s90 6 140-2 100-6 140 0v16z'/%3E%3Cpath d='M46 106l3-62h3l2 62z'/%3E%3Cpath d='M50 46c-10-8-24-8-32-2 10-2 20 0 30 6-12-2-22 4-26 12 8-6 18-8 28-6-6 4-8 12-6 18 4-8 8-12 8-14 2 4 6 8 10 14 0-8-4-14-8-18 10 0 18 4 24 10-4-8-12-12-22-14 10-4 20-2 28 2-6-8-18-10-30-6 6-6 16-8 24-6-10-4-22-2-28 4z'/%3E%3Cpath d='M318 108l2-48h3l1 48z'/%3E%3Cpath d='M321 62c-8-6-20-6-26-2 8-1 16 0 24 5-10-1-18 3-21 10 6-5 15-6 22-5-5 3-6 10-5 14 3-6 6-9 6-11 2 3 5 6 8 11 0-6-3-11-6-14 8 0 15 3 19 8-3-6-10-10-18-11 8-3 16-2 22 2-5-6-14-8-24-5 5-5 13-6 19-5-8-3-17-1-22 3z'/%3E%3Cpath d='M366 110l1-34h2l1 34z'/%3E%3Cpath d='M368 78c-6-4-14-4-18-1 6 0 11 1 16 4-7 0-12 2-14 7 4-3 10-4 15-3-3 2-4 6-3 9 2-4 4-6 4-7 1 2 3 4 5 7 0-4-2-7-4-9 6 0 10 2 13 5-2-4-7-6-12-7 5-2 11-1 15 1-3-4-10-5-16-3 3-3 9-4 13-3-5-2-11-1-14 2z'/%3E%3C/g%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
}
.guide--dpk .pk-kicker { color: var(--dpk-gold); }
.guide--dpk .pk-standfirst { color: oklch(92% 0.025 330); }

/* the day arc card */
.guide--dpk .dpk-arc {
  margin: 28px 0 0; max-width: 470px; padding: 14px 16px 12px; border-radius: 20px;
  background: oklch(18% 0.05 285 / 0.55); border: 1px solid oklch(90% 0.05 80 / 0.22);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 22px 44px oklch(12% 0.05 285 / 0.45);
}
.guide--dpk .dpk-arc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; }
.guide--dpk .dpk-arc-head span { font-size: 11.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dpk-gold); }
.guide--dpk .dpk-arc-head b { flex: none; white-space: nowrap; font: 700 30px/1 var(--pk-num); color: oklch(98% 0.01 85); }
.guide--dpk .dpk-arc-head small { font: 800 11px var(--pk-sans); letter-spacing: 0.1em; text-transform: uppercase; color: oklch(85% 0.04 320); }
.guide--dpk .dpk-arc-svg { display: block; width: 100%; height: auto; margin: 4px 0 0; overflow: visible; }
.guide--dpk .dpk-arc-head i { font-style: normal; }
.guide--dpk .dpk-chips { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; margin: 10px 0 2px; }
.guide--dpk .dpk-chip {
  appearance: none; cursor: pointer; height: 28px; padding: 0; border: 1px solid oklch(95% 0.02 300 / 0.16); border-radius: 8px;
  font: 800 12px/1 var(--pk-sans); color: oklch(88% 0.03 320); background: oklch(98% 0 0 / 0.06); transition: background .15s, color .15s;
}
.guide--dpk .dpk-chip:hover { background: oklch(98% 0 0 / 0.14); }
.guide--dpk .dpk-chip[aria-pressed="true"] { color: var(--pk-ink); background: var(--dpk-gold); border-color: var(--dpk-gold); }
.guide--dpk .dpk-chip:focus-visible { outline: 2px solid var(--dpk-gold); outline-offset: 2px; }
.guide--dpk .dpk-arc-grid { stroke: oklch(95% 0.02 300 / 0.16); stroke-width: 1; stroke-dasharray: 2 4; }
.guide--dpk .dpk-arc-area { transition: d .5s cubic-bezier(.3,.7,.2,1); }
.guide--dpk .dpk-arc-line { fill: none; stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; transition: d .5s cubic-bezier(.3,.7,.2,1); }
.guide--dpk .dpk-stop { transition: transform .5s cubic-bezier(.3,.7,.2,1); }
.guide--dpk .dpk-stop circle { stroke: oklch(18% 0.05 285); stroke-width: 3; }
.guide--dpk .dpk-stop text { font: 700 19px var(--pk-num); fill: oklch(98% 0.01 85); text-anchor: middle; }
.guide--dpk .dpk-stop--am circle { fill: var(--dpk-gray); }
.guide--dpk .dpk-stop--pm circle { fill: var(--dpk-gold); filter: drop-shadow(0 0 8px oklch(88% 0.14 85 / 0.9)); }
.guide--dpk .dpk-stop--nt circle { fill: oklch(70% 0.13 290); }
.guide--dpk .dpk-arc-time { font: 800 10.5px var(--pk-sans); letter-spacing: 0.08em; text-transform: uppercase; fill: oklch(85% 0.04 320); text-anchor: middle; }
.guide--dpk .dpk-arc-adds { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed oklch(90% 0.05 80 / 0.3); }
.guide--dpk .dpk-arc-adds > span:first-child { font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: oklch(85% 0.04 320); margin-right: 2px; }
.guide--dpk .dpk-arc-time--start { text-anchor: start; }
.guide--dpk .dpk-arc-time--end { text-anchor: end; }
.guide--dpk .dpk-arc-list { display: contents; }
.guide--dpk .dpk-arc-list b { padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; color: var(--pk-ink); background: var(--dpk-gold); }

@media (prefers-reduced-motion: no-preference) {
  .guide--dpk .dpk-arc-line { animation: dpk-draw 1.6s cubic-bezier(.3,.7,.2,1) both .2s; }
  .guide--dpk .dpk-stop { animation: dpk-pop .5s cubic-bezier(.3,1.4,.5,1) both; }
  .guide--dpk .dpk-stop--am { animation-delay: .4s; }
  .guide--dpk .dpk-stop--pm { animation-delay: .9s; }
  .guide--dpk .dpk-stop--nt { animation-delay: 1.4s; }
  .guide--dpk .dpk-glow { animation: dpk-breathe 8s ease-in-out infinite; }
}
@keyframes dpk-draw { from { stroke-dashoffset: 100; } }
@keyframes dpk-pop { from { opacity: 0; } }
@keyframes dpk-breathe { 0%, 100% { opacity: 0.85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }

/* the item count sits on the bright horizon glow, so it gets its own dark pill */
.guide--dpk .pk-hero-count {
  padding: 8px 14px; border-radius: 999px; color: oklch(92% 0.02 320);
  background: oklch(20% 0.06 285 / 0.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.guide--dpk .pk-hero-count b { color: var(--dpk-gold); }

.guide--dpk .pk-answer::before { background: linear-gradient(90deg, var(--pk-coral) 0 33%, var(--pk-plum) 33% 66%, var(--pk-sky) 66%); }
.guide--dpk .pk-progress-fill { background: linear-gradient(90deg, var(--pk-coral), var(--pk-brass)); }

/* ---------------------------------------------------------------- the layer plan */
.guide--dpk .dpk-acts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.guide--dpk .dpk-act {
  --a: var(--dpk-gray);
  position: relative; display: flex; flex-direction: column; padding: 16px 14px 14px; border-radius: 18px; overflow: hidden;
  background: var(--pk-card); border: 1px solid var(--pk-line);
}
.guide--dpk .dpk-act::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--a); }
.guide--dpk .dpk-act--am { --a: oklch(66% 0.04 240); background: linear-gradient(180deg, oklch(95% 0.012 240), var(--pk-card) 60%); }
.guide--dpk .dpk-act--pm { --a: var(--pk-coral); background: linear-gradient(180deg, oklch(95% 0.05 80), var(--pk-card) 60%); }
.guide--dpk .dpk-act--nt { --a: var(--pk-plum); color: oklch(96% 0.01 300); background: linear-gradient(180deg, oklch(32% 0.1 295), oklch(24% 0.07 280)); border-color: transparent; }
.guide--dpk .dpk-act-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: var(--a); background: color-mix(in oklch, var(--a) 14%, white); }
.guide--dpk .dpk-act--nt .dpk-act-icon { color: var(--dpk-gold); background: oklch(98% 0 0 / 0.1); }
.guide--dpk .dpk-act-svg { width: 22px; height: 22px; }
.guide--dpk .dpk-act-time { margin: 12px 0 0; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--a); }
.guide--dpk .dpk-act--nt .dpk-act-time { color: var(--dpk-gold); }
.guide--dpk .dpk-act-temp { margin: 2px 0 10px; font: 700 clamp(38px, 8vw, 52px)/1 var(--pk-num); color: var(--pk-ink); }
.guide--dpk .dpk-act--nt .dpk-act-temp { color: oklch(98% 0.01 85); }
.guide--dpk .dpk-act-wear, .guide--dpk .dpk-act-bag { margin: 0; font-size: 14px; line-height: 1.45; color: var(--pk-ink-2); }
.guide--dpk .dpk-act-bag { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--pk-line); }
.guide--dpk .dpk-act--nt .dpk-act-wear, .guide--dpk .dpk-act--nt .dpk-act-bag { color: oklch(88% 0.02 300); border-color: oklch(98% 0 0 / 0.15); }
.guide--dpk .dpk-act b { display: block; font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pk-ink-3); }
.guide--dpk .dpk-act--nt b { color: oklch(78% 0.05 300); }

.guide--dpk .dpk-lately {
  margin: 12px 0 0; padding: 14px 16px; border-radius: 16px;
  background: var(--pk-kraft); border: 1px solid oklch(84% 0.05 70);
}
.guide--dpk .dpk-lately-head { margin: 0 0 8px; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: oklch(45% 0.08 55); }
.guide--dpk .dpk-lately-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 8px; }
.guide--dpk .dpk-lately-stats dt { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: oklch(45% 0.05 60); }
.guide--dpk .dpk-lately-stats dd { margin: 2px 0 0; font: 700 28px/1 var(--pk-num); color: var(--pk-ink); }
.guide--dpk .dpk-lately-stats span { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 700; color: oklch(45% 0.05 60); }
.guide--dpk .dpk-lately-note { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--pk-ink-2); }

.guide--dpk .dpk-hop {
  display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; margin: 12px 0 0; padding: 16px; border-radius: 16px;
  color: oklch(96% 0.01 300); background: linear-gradient(135deg, var(--pk-lagoon-2), var(--pk-lagoon));
}
.guide--dpk .dpk-hop-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: var(--pk-ink); background: var(--dpk-gold); }
.guide--dpk .dpk-hop-title { margin: 0 0 4px; font-family: var(--pk-serif); font-size: 21px; line-height: 1.15; color: oklch(98% 0.01 85); }
.guide--dpk .dpk-hop-text { margin: 0; font-size: 14.5px; line-height: 1.55; color: oklch(88% 0.02 300); }

/* ---------------------------------------------------------------- your month, range bars */
.guide--dpk .pk-month.is-rain { background: oklch(94.5% 0.025 230); }
.guide--dpk .pk-month.is-cool { background: oklch(94.5% 0.03 295); }
.guide--dpk .pk-month.is-on { background: var(--pk-lagoon); }
.guide--dpk .pk-month-high { color: var(--pk-coral); }
.guide--dpk .dpk-range i {
  top: auto; bottom: var(--lo); height: calc(var(--hi) - var(--lo));
  background: linear-gradient(0deg, oklch(62% 0.14 290), oklch(80% 0.14 75));
}
.guide--dpk .pk-month.is-on .dpk-range i { background: linear-gradient(0deg, oklch(75% 0.12 290), var(--dpk-gold)); }
@media (prefers-reduced-motion: no-preference) {
  .guide--dpk .dpk-range i { animation: dpk-rise 1s cubic-bezier(.3,.7,.2,1) both; }
}
@keyframes dpk-rise { from { opacity: 0; transform: translateY(14px); } }
.guide--dpk .dpk-month-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.guide--dpk .pk-month-card { background-image: none; background: linear-gradient(135deg, oklch(95% 0.04 75), oklch(93% 0.035 320)); }
.guide--dpk .dpk-key--range { background: linear-gradient(0deg, oklch(62% 0.14 290), oklch(80% 0.14 75)); }

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

/* ---------------------------------------------------------------- picks */
.guide--dpk .pk-pick--jacket { --c: var(--pk-plum); }
.guide--dpk .pk-pick--battery { --c: oklch(60% 0.15 145); }
.guide--dpk .pk-pick--sun { --c: oklch(68% 0.16 65); }
.guide--dpk .pk-pick--poncho { --c: var(--pk-sky); }
.guide--dpk .pk-pick--bottle { --c: oklch(58% 0.11 200); }
.guide--dpk .pk-pick--blister { --c: var(--pk-coral); }
.guide--dpk .dpk-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--dpk .affiliate-note { background: oklch(95.5% 0.03 70); }

@media (max-width: 560px) {
  .guide--dpk .dpk-arc { padding: 12px 12px 10px; }
  /* the three acts become a timeline down the left edge */
  .guide--dpk .dpk-acts { position: relative; grid-template-columns: 1fr; gap: 12px; padding-left: 22px; }
  .guide--dpk .dpk-acts::before {
    content: ""; position: absolute; left: 6px; top: 18px; bottom: 18px; width: 3px; border-radius: 3px;
    background: linear-gradient(180deg, oklch(66% 0.04 240), var(--pk-coral) 50%, var(--pk-plum));
  }
  .guide--dpk .dpk-act { display: grid; grid-template-columns: 96px 1fr; grid-template-rows: auto auto auto; column-gap: 14px; align-items: start; overflow: visible; }
  .guide--dpk .dpk-act::after {
    content: ""; position: absolute; left: -22px; top: 26px; width: 15px; height: 15px; border-radius: 50%;
    background: var(--a); box-shadow: 0 0 0 3px var(--pk-paper);
  }
  .guide--dpk .dpk-act::before { border-radius: 18px 18px 0 0; }
  .guide--dpk .dpk-act-icon { display: none; }
  .guide--dpk .dpk-act-time { margin: 0; grid-column: 1; grid-row: 1; }
  .guide--dpk .dpk-act-temp { margin: 2px 0 0; grid-column: 1; grid-row: 2 / span 2; font-size: 46px; }
  .guide--dpk .dpk-act-wear { grid-column: 2; grid-row: 1 / span 2; }
  .guide--dpk .dpk-act-bag { grid-column: 2; grid-row: 3; }
  .guide--dpk .dpk-month-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide--dpk .dpk-palms { height: 80px; }
}

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