/* ============================================================
   OllieCraft — planner styles
   Blocky / pixel-inspired, but deliberately calmer and airier
   than the quest board: whitespace is the point. Original
   shapes only — no Minecraft UI assets.
   ============================================================ */

/* ---- sub navigation (Today / Tomorrow / Week) --------------- */
.pl-subnav { display: flex; gap: 8px; margin: 4px 0 14px; }
.pl-sub {
  flex: 1; text-align: center; padding: 12px 6px 10px;
  background: var(--panel); border: 3px solid #000;
  box-shadow: inset -3px -3px 0 rgba(0,0,0,.35), inset 3px 3px 0 rgba(255,255,255,.06);
  font-family: 'PressStart', monospace; font-size: 10px; color: var(--ink-dim);
  cursor: pointer; line-height: 1.5;
}
.pl-sub .ico { display: block; font-size: 22px; margin-bottom: 5px; }
.pl-sub.active { background: var(--grass-dark); color: #fff; box-shadow: inset 0 0 0 3px var(--grass), inset -3px -3px 0 rgba(0,0,0,.3); }
.pl-sub:active { transform: translateY(2px); }

/* ---- day heading -------------------------------------------- */
.pl-wrap { padding-bottom: 90px; } /* clear the floating parent tool button */
.pl-head { margin: 6px 4px 4px; }
.pl-head .pl-day { font-family: 'PressStart', monospace; font-size: 18px; color: var(--ink); text-shadow: 0 3px 0 #000; }
.pl-head .pl-date { font-size: 21px; color: var(--ink-dim); margin-top: 6px; }

.pl-offline {
  margin: 10px 4px 0; padding: 9px 12px; font-size: 18px; color: var(--ink-dim);
  background: rgba(0,0,0,.25); border-left: 5px solid var(--stone);
}

/* ---- event card (a signpost) --------------------------------- */
.pl-event {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel-2); border: 3px solid #000; padding: 12px;
  box-shadow: inset -3px -3px 0 rgba(0,0,0,.35), inset 3px 3px 0 rgba(255,255,255,.07);
  margin-bottom: 10px; cursor: pointer;
}
.pl-event:active { transform: translateY(2px); }
.pl-event .pl-when {
  flex: 0 0 74px; text-align: center; align-self: center;
  display: flex; align-items: center; justify-content: center;
  font-family: 'PressStart', monospace; font-size: 10px; line-height: 1.5;
  color: var(--gold); background: rgba(0,0,0,.35); border: 2px solid #000; padding: 8px 2px;
}
.pl-event .pl-eico { font-size: 34px; line-height: 1; }
.pl-event .pl-ebody { flex: 1; min-width: 0; }
.pl-event .pl-etitle { font-size: 25px; color: var(--ink); line-height: 1.25; }
.pl-event .pl-where { font-size: 18px; color: var(--ink-dim); margin-top: 5px; }
.pl-event .pl-note { font-size: 18px; color: var(--gold); margin-top: 6px; }
.pl-event .pl-chev { font-size: 26px; color: var(--stone); flex: 0 0 auto; }

/* ---- quest / prep rows --------------------------------------- */
.pl-quest, .pl-prep {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel); border: 3px solid #000; padding: 11px 12px;
  box-shadow: inset -3px -3px 0 rgba(0,0,0,.3); margin-bottom: 9px; cursor: pointer;
}
.pl-prep { background: #3a3320; box-shadow: inset -3px -3px 0 rgba(0,0,0,.3), inset 3px 3px 0 rgba(255,207,63,.12); }
.pl-quest:active, .pl-prep:active { transform: translateY(2px); }
.pl-qico { font-size: 30px; line-height: 1; flex: 0 0 auto; }
.pl-qbody { flex: 1; min-width: 0; }
.pl-qname { font-size: 23px; color: var(--ink); }
.pl-mini { height: 10px; background: rgba(0,0,0,.45); border: 2px solid #000; margin-top: 7px; overflow: hidden; }
.pl-minifill { height: 100%; background: var(--xp); box-shadow: inset 0 2px 0 rgba(255,255,255,.35); transition: width .4s; }
.pl-qcount { font-family: 'PressStart', monospace; font-size: 11px; color: var(--ink-dim); flex: 0 0 auto; }
.pl-quest.done, .pl-prep.done { filter: saturate(.6) brightness(.85); }
.pl-quest.done .pl-qcount, .pl-prep.done .pl-qcount { color: var(--xp); font-size: 16px; }

/* ---- "remember" notes ---------------------------------------- */
.pl-remember { display: flex; flex-direction: column; gap: 8px; }
.pl-rem {
  display: flex; gap: 12px; align-items: flex-start;
  background: rgba(255,207,63,.1); border-left: 5px solid var(--gold);
  padding: 11px 12px; font-size: 21px; color: var(--ink);
}
.pl-rem span { font-size: 26px; line-height: 1; }

/* ---- week list ----------------------------------------------- */
.pl-week { display: flex; flex-direction: column; gap: 8px; }
.pl-wday {
  display: flex; gap: 12px; align-items: stretch;
  background: var(--panel); border: 3px solid #000; padding: 10px;
  box-shadow: inset -3px -3px 0 rgba(0,0,0,.3);
}
.pl-wday.quiet { opacity: .62; }
.pl-wday.today { box-shadow: inset 0 0 0 3px var(--grass), inset -3px -3px 0 rgba(0,0,0,.3); }
.pl-wcol {
  flex: 0 0 54px; text-align: center; background: rgba(0,0,0,.3);
  border: 2px solid #000; padding: 7px 2px; align-self: flex-start;
}
.pl-wdn { font-family: 'PressStart', monospace; font-size: 10px; color: var(--gold); }
.pl-wdd { font-size: 24px; color: var(--ink); margin-top: 3px; }
.pl-wbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.pl-wquiet { font-size: 19px; color: var(--stone); }
.pl-chip {
  display: flex; align-items: center; gap: 9px;
  background: var(--panel-2); border: 2px solid #000; padding: 7px 9px; cursor: pointer;
}
.pl-chip:active { transform: translateY(2px); }
.pl-chip .ci { font-size: 22px; line-height: 1; flex: 0 0 auto; }
.pl-chip .ct { flex: 1; font-size: 20px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-chip .cw { font-family: 'PressStart', monospace; font-size: 9px; color: var(--gold); flex: 0 0 auto; }
.pl-flag { font-size: 17px; color: var(--gold); margin-top: 2px; }
.pl-flag.ready { color: var(--xp); }
.pl-legend { font-size: 16px; color: var(--stone); text-align: center; margin-top: 14px; }

/* ---- misc ---------------------------------------------------- */
.pl-empty { font-size: 21px; color: var(--ink-dim); padding: 16px 6px 20px; line-height: 1.5; }
.pl-peek { font-size: 19px; color: var(--gold); padding: 4px 6px 8px; cursor: pointer; }

/* ---- child event sheet --------------------------------------- */
.pl-modal .pl-mhero { font-size: 56px; text-align: center; line-height: 1; margin: 4px 0 10px; }
.pl-modal h2 { text-align: center; }
.pl-mline { display: flex; gap: 12px; font-size: 21px; padding: 9px 0; border-bottom: 2px solid rgba(255,255,255,.07); }
.pl-mline b { flex: 0 0 68px; color: var(--ink-dim); font-weight: normal; }
.pl-mline span { color: var(--ink); }
.pl-mnote { margin-top: 12px; padding: 11px 12px; font-size: 20px; background: rgba(255,207,63,.1); border-left: 5px solid var(--gold); }

/* ---- today strip on the quest board -------------------------- */
.today-strip {
  display: flex; gap: 8px; align-items: center; overflow-x: auto;
  background: var(--panel); border: 3px solid #000; padding: 9px 10px; margin: 10px 4px 2px;
  box-shadow: inset -3px -3px 0 rgba(0,0,0,.3); cursor: pointer; -webkit-overflow-scrolling: touch;
}
.today-strip .ts-chip { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; background: rgba(0,0,0,.25); border: 2px solid #000; padding: 6px 9px; }
.today-strip .ci { font-size: 21px; line-height: 1; }
.today-strip .ct { font-size: 19px; color: var(--ink); white-space: nowrap; }
.today-strip .cw { font-family: 'PressStart', monospace; font-size: 9px; color: var(--gold); }
.today-strip .ts-more { margin-left: auto; font-size: 24px; color: var(--stone); flex: 0 0 auto; padding-left: 6px; }

/* ---- parent-area helpers ------------------------------------- */
.phelp { font-size: 18px; color: var(--ink-dim); line-height: 1.5; margin-bottom: 10px; }
.pdim { color: var(--stone); }
.prow .psub { font-size: 17px; color: var(--stone); margin-top: 4px; }

/* ============================================================
   Phase 2 — inventory, support levels, generated prep
   ============================================================ */

/* ---- inventory check sheet ---------------------------------- */
.pl-invmodal .pl-invhead { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.pl-invmodal .pl-invico { font-size: 46px; line-height: 1; }
.pl-invmodal h2 { margin: 0; }
.pl-invsub { font-size: 19px; color: var(--ink-dim); margin-top: 4px; }
.pl-invbar { height: 14px; background: rgba(0,0,0,.5); border: 3px solid #000; overflow: hidden; }
.pl-invfill { height: 100%; background: var(--xp); box-shadow: inset 0 3px 0 rgba(255,255,255,.35); transition: width .35s; }
.pl-invcount { font-size: 20px; color: var(--ink-dim); margin: 8px 0 14px; }
.pl-invlabel { font-size: 18px; color: var(--stone); margin: 14px 0 8px; }
.pl-invhint { font-size: 18px; color: var(--stone); text-align: center; margin-top: 12px; }

/* blocky slots — original shapes, deliberately not Minecraft's own UI */
.pl-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.pl-slot {
  background: #1f1b18; border: 3px solid #000; padding: 10px 6px; text-align: center; cursor: pointer;
  box-shadow: inset -3px -3px 0 rgba(0,0,0,.5), inset 3px 3px 0 rgba(255,255,255,.06);
}
.pl-slot:active { transform: translateY(2px); }
.pl-slotico { font-size: 32px; line-height: 1; filter: grayscale(1) brightness(.7); }
.pl-slotname { font-size: 18px; color: var(--ink-dim); margin-top: 7px; line-height: 1.3; }
.pl-slotstate { font-family: 'PressStart', monospace; font-size: 8px; color: var(--stone); margin-top: 7px; line-height: 1.5; }
.pl-slot.packed { background: #23361f; box-shadow: inset 0 0 0 3px var(--grass), inset -3px -3px 0 rgba(0,0,0,.4); }
.pl-slot.packed .pl-slotico { filter: none; }
.pl-slot.packed .pl-slotname { color: var(--ink); }
.pl-slot.packed .pl-slotstate { color: var(--xp); }
.pl-slot.skip { opacity: .45; }
.pl-slot.skip .pl-slotstate { color: var(--stone); }
.pl-slot.opt { border-style: dashed; }

/* ---- inventory task row in a quest -------------------------- */
.task.inv .check { color: var(--gold); opacity: 1; font-size: 30px; }
.pl-packbadge {
  display: inline-block; font-family: 'PressStart', monospace; font-size: 9px;
  color: var(--gold); background: rgba(0,0,0,.35); border: 2px solid #000;
  padding: 4px 7px; margin-left: 10px; vertical-align: middle; white-space: nowrap;
}
.pl-packbadge.full { color: var(--xp); }

/* rest blocks: present, calm, no pressure */
.task.rest { background: #2a2b33; box-shadow: inset -4px -4px 0 rgba(0,0,0,.3), inset 4px 4px 0 rgba(255,255,255,.05); }
.task.rest .tname { color: #cfd3e6; font-style: italic; }

/* ---- prep that belongs to a later day ----------------------- */
.pl-prep.soon { opacity: .72; cursor: default; }
.pl-prep.soon:active { transform: none; }
.pl-soonnote { font-size: 18px; color: var(--stone); margin-top: 6px; }

/* ---- support level picker (parent) -------------------------- */
.pl-levels { display: flex; flex-direction: column; gap: 8px; }
.pl-level {
  background: var(--panel); border: 3px solid #000; padding: 11px 12px; cursor: pointer;
  box-shadow: inset -3px -3px 0 rgba(0,0,0,.3);
}
.pl-level:active { transform: translateY(2px); }
.pl-level.on { background: var(--grass-dark); box-shadow: inset 0 0 0 3px var(--grass), inset -3px -3px 0 rgba(0,0,0,.3); }
.pl-lvlnum { font-family: 'PressStart', monospace; font-size: 10px; color: var(--gold); }
.pl-level.on .pl-lvlnum { color: #fff; }
.pl-lvlname { font-size: 22px; color: var(--ink); margin-top: 5px; }
.pl-lvldesc { font-size: 18px; color: var(--ink-dim); margin-top: 4px; }
.pl-lvlchecks { display: flex; gap: 14px; }
.pl-lvlcheck { display: flex; align-items: center; gap: 7px; font-size: 21px; color: var(--ink-dim); }
.pl-lvlcheck input { width: auto; transform: scale(1.5); }

/* ---- routine step grouping (parent) ------------------------- */
.pl-timinggroup {
  font-family: 'PressStart', monospace; font-size: 9px; color: var(--gold);
  margin: 14px 0 6px; text-transform: uppercase;
}

/* ---- "why has this appeared?" ------------------------------- */
.pl-why { display: flex; flex-direction: column; gap: 0; }
.pl-whyrow {
  display: flex; gap: 12px; background: var(--panel); border: 3px solid #000;
  padding: 11px 12px; box-shadow: inset -3px -3px 0 rgba(0,0,0,.3);
}
.pl-whyrow b { flex: 0 0 92px; color: var(--ink-dim); font-weight: normal; font-size: 19px; }
.pl-whyrow span { flex: 1; font-size: 21px; color: var(--ink); line-height: 1.4; }
.pl-whyrow em { color: var(--gold); font-style: normal; }
.pl-whyarrow { font-size: 18px; color: var(--stone); padding: 7px 0 7px 14px; }
.pl-slot.settled { cursor: default; }
.pl-slot.settled:active { transform: none; }

/* a step hidden at the current support level — dimmed, not struck out:
   it is not deleted, it just is not being shown to Ollie right now */
.prow.dim { opacity: .45; }
.prow.dim .pname { text-decoration: none; }

/* ============================================================
   Shop tiers
   ============================================================ */
.shop-sub { font-size: 19px; color: var(--ink-dim); margin: -4px 4px 12px; }

/* the one thing worth saving for right now */
.shop-goal {
  display: flex; gap: 14px; align-items: center; margin: 0 0 14px;
  background: linear-gradient(160deg, #3a3320, #2a2519); border: 3px solid #000; padding: 12px;
  box-shadow: inset -3px -3px 0 rgba(0,0,0,.35), inset 3px 3px 0 rgba(255,207,63,.14);
}
.shop-goal .sg-ico { font-size: 40px; line-height: 1; }
.shop-goal .sg-lab { font-family: 'PressStart', monospace; font-size: 9px; color: var(--gold); }
.shop-goal .sg-name { font-size: 24px; color: var(--ink); margin-top: 6px; }
.shop-goal .sg-need { font-size: 19px; color: var(--ink-dim); margin-top: 5px; display: flex; align-items: center; gap: 7px; }

/* collapsible tier headers */
.tier-head {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  background: var(--panel); border: 3px solid #000; padding: 12px;
  box-shadow: inset -3px -3px 0 rgba(0,0,0,.3); margin-bottom: 10px;
}
.tier-head:active { transform: translateY(2px); }
.tier-head.open { background: var(--panel-2); box-shadow: inset 0 0 0 3px var(--wood), inset -3px -3px 0 rgba(0,0,0,.3); }
.tier-head .th-ico { font-size: 28px; line-height: 1; flex: 0 0 auto; }
.tier-head .th-name { font-family: 'PressStart', monospace; font-size: 12px; color: var(--gold); flex: 0 0 auto; }
.tier-head .th-meta { flex: 1; font-size: 18px; color: var(--ink-dim); text-align: right; }
.tier-head .th-chev { font-size: 22px; color: var(--stone); flex: 0 0 auto; }
.tier-body { margin: 0 0 16px; padding-left: 10px; border-left: 3px solid rgba(255,255,255,.08); }

/* something he cannot afford yet — visible and aspirational, never scolding */
.shop-item.cant { opacity: .62; }
.shop-item .cost .need {
  font-family: 'PressStart', monospace; font-size: 9px; color: var(--stone);
  margin-left: 10px; white-space: nowrap;
}

/* ============================================================
   Reward budget (parent only)
   ============================================================ */
.rb-tabs { display: flex; gap: 8px; margin-bottom: 6px; }
.rb-tab {
  flex: 1; text-align: center; padding: 10px 6px; cursor: pointer;
  background: var(--panel); border: 3px solid #000; font-size: 18px; color: var(--ink-dim);
  box-shadow: inset -3px -3px 0 rgba(0,0,0,.3);
}
.rb-tab.on { background: var(--wood); color: #fff; box-shadow: inset -3px -3px 0 #6d4a26, inset 3px 3px 0 #b98a56; }
.rb-tab:active { transform: translateY(2px); }

.rb-earned { display: flex; gap: 10px; }
.rb-stat {
  flex: 1; text-align: center; background: var(--panel); border: 3px solid #000; padding: 12px 6px;
  box-shadow: inset -3px -3px 0 rgba(0,0,0,.3);
}
.rb-stat b { display: block; font-family: 'PressStart', monospace; font-size: 18px; color: var(--gold); }
.rb-stat span { display: block; font-size: 17px; color: var(--ink-dim); margin-top: 7px; }

.rb-bar { margin-bottom: 12px; }
.rb-barlab { display: flex; justify-content: space-between; align-items: baseline; font-size: 19px; color: var(--ink-dim); margin-bottom: 5px; }
.rb-barlab b { font-family: 'PressStart', monospace; font-size: 13px; color: var(--ink); }
.rb-track { height: 16px; background: rgba(0,0,0,.5); border: 3px solid #000; overflow: hidden; }
.rb-fill { height: 100%; background: var(--stone); box-shadow: inset 0 3px 0 rgba(255,255,255,.25); transition: width .35s; }
.rb-fill.warn { background: var(--gold); }
.rb-fill.good { background: var(--xp); }

.rb-cap { font-size: 19px; color: var(--ink-dim); line-height: 1.5; padding: 10px 12px; background: rgba(0,0,0,.25); border-left: 5px solid var(--stone); }
.rb-cap.over { color: var(--gold); border-left-color: var(--gold); }
.rb-cap b { color: var(--gold); }

.rb-rate { font-size: 19px; color: var(--ink-dim); padding: 8px 0; line-height: 1.5; }
.rb-rate b { font-family: 'PressStart', monospace; font-size: 13px; color: var(--gold); }
.rb-rate em { color: var(--stone); font-style: normal; }
.rb-cash { font-family: 'PressStart', monospace; font-size: 12px; color: var(--gold); flex: 0 0 auto; }

/* ============================================================
   Calendar feeds (parent only)
   ============================================================ */
.pl-syncing {
  font-size: 20px; color: var(--gold); text-align: center;
  padding: 12px; background: rgba(255,207,63,.08); border-left: 5px solid var(--gold); margin-bottom: 10px;
}
.prow.bad { box-shadow: inset 0 0 0 3px var(--danger), inset -3px -3px 0 rgba(0,0,0,.3); }
.pl-feedstat { display: flex; flex-direction: column; gap: 2px; margin: 12px 0; }
.pl-feedstat > div {
  display: flex; gap: 12px; background: var(--panel); border: 3px solid #000; padding: 10px 12px;
  box-shadow: inset -3px -3px 0 rgba(0,0,0,.3);
}
.pl-feedstat b { flex: 0 0 108px; font-weight: normal; font-size: 18px; color: var(--ink-dim); }
.pl-feedstat span { flex: 1; font-size: 20px; color: var(--ink); line-height: 1.4; word-break: break-word; }
.pl-feedstat .bad span { color: var(--danger); }

/* ============================================================
   Parent: event rows and the preparation screen
   ============================================================ */
.pev {
  background: var(--panel); border: 3px solid #000; padding: 11px 12px; margin-bottom: 9px;
  box-shadow: inset -3px -3px 0 rgba(0,0,0,.3);
}
.pev-top { display: flex; align-items: center; gap: 10px; }
.pev-ico { font-size: 26px; line-height: 1; flex: 0 0 auto; }
.pev-title { font-size: 22px; color: var(--ink); line-height: 1.3; }
.pev-when { font-size: 17px; color: var(--stone); margin-top: 6px; line-height: 1.45; }
.pev-warn { font-size: 17px; color: var(--gold); margin-top: 5px; }
.pev-acts { display: flex; align-items: center; gap: 10px; margin-top: 10px; }

/* the routine attached to an event — a control, not a footnote */
.pev-prep {
  flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: rgba(35,198,101,.12); border: 2px solid var(--grass-dark);
  padding: 8px 10px; font-size: 19px; color: var(--ink); cursor: pointer;
}
.pev-prep:active { transform: translateY(2px); }
.pev-prep.none { background: rgba(255,207,63,.1); border-color: var(--gold); }
.pev-change { font-family: 'PressStart', monospace; font-size: 9px; color: var(--ink-dim); white-space: nowrap; }

/* preparation screen header */
.pl-evhead { display: flex; gap: 12px; align-items: center; margin-bottom: 6px; }
.pl-evico { font-size: 38px; line-height: 1; }
.pl-evtitle { font-size: 23px; color: var(--ink); line-height: 1.3; }
.pl-evsub { font-size: 18px; color: var(--ink-dim); margin-top: 5px; }

/* "this is managed by the calendar" notice on an imported event */
.pl-feednote {
  font-size: 18px; color: var(--ink-dim); line-height: 1.5; margin-bottom: 14px;
  background: rgba(0,0,0,.25); border-left: 5px solid var(--wood); padding: 11px 12px;
}
.pl-feednote b { color: var(--ink); }
.field input:disabled, .field select:disabled { opacity: .5; }

/* a step the parent wrote for one event only */
.prow.mine {
  background: rgba(255,207,63,.1);
  box-shadow: inset 0 0 0 2px rgba(255,207,63,.35), inset -3px -3px 0 rgba(0,0,0,.3);
}
.prow.mine .psub { color: var(--gold); }
.pl-addstep {
  background: rgba(0,0,0,.22); border: 3px solid #000; padding: 12px; margin-top: 12px;
  box-shadow: inset -3px -3px 0 rgba(0,0,0,.25);
}

/* ---- child event sheet: the actual jobs, not a list of card titles ---- */
.pl-jobbar { height: 12px; background: rgba(0,0,0,.5); border: 3px solid #000; overflow: hidden; }
.pl-jobfill { height: 100%; background: var(--xp); box-shadow: inset 0 2px 0 rgba(255,255,255,.35); transition: width .4s; }
.pl-jobcount { font-size: 18px; color: var(--ink-dim); margin: 6px 0 4px; }
.pl-jobday {
  font-family: 'PressStart', monospace; font-size: 9px; color: var(--gold);
  margin: 14px 0 7px; text-transform: uppercase;
}
.pl-job { display: flex; gap: 10px; align-items: flex-start; padding: 8px 2px; font-size: 21px; color: var(--ink); }
.pl-jobtick { flex: 0 0 auto; color: var(--stone); font-size: 20px; }
.pl-job.done .pl-jobtick { color: var(--xp); }
.pl-job.done .pl-jobname { color: var(--stone); text-decoration: line-through; }
.pl-job.locked { opacity: .6; }
.pl-jobname { flex: 1; line-height: 1.35; }
.pl-jobinv {
  display: inline-block; font-family: 'PressStart', monospace; font-size: 8px;
  color: var(--gold); background: rgba(0,0,0,.35); border: 2px solid #000;
  padding: 3px 6px; margin-left: 8px; vertical-align: middle; white-space: nowrap;
}
.pl-packlist { display: flex; flex-direction: column; gap: 4px; }
.pl-packrow {
  display: flex; gap: 10px; align-items: center; font-size: 20px; color: var(--ink-dim);
  padding: 7px 9px; background: rgba(0,0,0,.22); border-left: 4px solid var(--stone);
}
.pl-packrow.packed { border-left-color: var(--xp); color: var(--ink); }
.pl-packrow.skip { opacity: .45; }
.pl-packname { flex: 1; }
.pl-packstate { font-family: 'PressStart', monospace; font-size: 9px; color: var(--xp); }
.pl-packrow.skip .pl-packstate, .pl-packrow.todo .pl-packstate { color: var(--stone); }

/* ============================================================
   Independence bonus & fading scaffolding
   ============================================================ */
.ind-chips { display: flex; flex-direction: column; gap: 7px; }
.ind-chip {
  display: flex; align-items: center; gap: 11px; cursor: pointer;
  background: var(--panel); border: 3px solid #000; padding: 10px 12px;
  box-shadow: inset -3px -3px 0 rgba(0,0,0,.3);
}
.ind-chip:active { transform: translateY(2px); }
.ind-chip.on { background: var(--grass-dark); box-shadow: inset 0 0 0 3px var(--grass), inset -3px -3px 0 rgba(0,0,0,.3); }
.ind-emoji { font-size: 26px; line-height: 1; flex: 0 0 auto; }
.ind-label { flex: 1; font-size: 20px; color: var(--ink); line-height: 1.3; }
.ind-xp { font-family: 'PressStart', monospace; font-size: 10px; color: var(--xp); flex: 0 0 auto; }
.ind-chip.on .ind-xp { color: #fff; }

.ind-form {
  background: rgba(0,0,0,.22); border: 3px solid #000; padding: 12px; margin-top: 12px;
  box-shadow: inset -3px -3px 0 rgba(0,0,0,.25);
}
.ind-chosen { font-size: 22px; color: var(--gold); margin-bottom: 12px; }

/* a suggestion to reduce prompting */
.ind-sugg {
  background: linear-gradient(160deg,#3a3320,#2a2519); border: 3px solid #000; padding: 13px;
  margin-bottom: 10px; box-shadow: inset -3px -3px 0 rgba(0,0,0,.35), inset 3px 3px 0 rgba(255,207,63,.14);
}
.ind-sugghead { font-size: 23px; color: var(--ink); }
.ind-suggbody { font-size: 19px; color: var(--ink-dim); margin-top: 7px; line-height: 1.45; }
.ind-suggmove { font-size: 20px; color: var(--gold); margin-top: 9px; }
.ind-suggmove b { color: #fff; }
.ind-suggacts { display: flex; gap: 9px; margin-top: 12px; }

/* Ollie's own history of nice things */
.ind-feed { display: flex; flex-direction: column; gap: 8px; }
.ind-item {
  display: flex; gap: 12px; align-items: flex-start;
  background: rgba(255,207,63,.09); border-left: 5px solid var(--gold); padding: 11px 12px;
}
.ind-iemoji { font-size: 28px; line-height: 1; flex: 0 0 auto; }
.ind-itext { font-size: 21px; color: var(--ink); line-height: 1.35; }
.ind-iwhen { font-size: 17px; color: var(--ink-dim); margin-top: 5px; }

/* ---- "when was the calendar last checked" footer ---- */
.pl-refresh {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 18px; padding: 10px 12px; cursor: pointer;
  background: rgba(0,0,0,.22); border-left: 5px solid var(--stone);
  font-size: 18px; color: var(--ink-dim);
}
.pl-refresh:active { transform: translateY(2px); }
.pl-refreshgo { font-family: 'PressStart', monospace; font-size: 9px; color: var(--gold); white-space: nowrap; }
.pl-refresh.busy { border-left-color: var(--gold); color: var(--gold); cursor: default; }
.pl-refresh.busy:active { transform: none; }
.pl-refresh.off { cursor: default; }
.pl-refresh.off:active { transform: none; }
.pl-refresh.bad { border-left-color: var(--danger); color: var(--gold); }

/* ---- borrowing steps from other routines ---- */
.prow.lib { cursor: pointer; }
.prow.lib:active { transform: translateY(2px); }
.prow.lib .lib-tick { font-size: 24px; color: var(--stone); flex: 0 0 auto; margin-right: 4px; }
.prow.lib.picked {
  background: var(--grass-dark);
  box-shadow: inset 0 0 0 3px var(--grass), inset -3px -3px 0 rgba(0,0,0,.3);
}
.prow.lib.picked .lib-tick { color: #fff; }
.prow.lib.picked .psub { color: rgba(255,255,255,.75); }
.prow.lib.dim { opacity: .5; }

/* ============================================================
   Weekly momentum — consistency without punishment
   ============================================================ */
.week-pill, .totem-pill {
  display: flex; align-items: center; gap: 6px; font-size: 22px;
  background: rgba(0,0,0,.28); border: 2px solid #000; padding: 4px 9px;
}
.totem-pill { color: var(--gold); }

.momentum {
  background: var(--panel); border: 3px solid #000; padding: 12px; margin: 0 4px 14px;
  box-shadow: inset -3px -3px 0 rgba(0,0,0,.3);
}
.mo-row { display: flex; gap: 7px; flex-wrap: wrap; }
.mo-cell {
  font-size: 26px; line-height: 1; width: 30px; text-align: center;
  filter: saturate(.9);
}
.mo-cell.todo { color: var(--stone); font-size: 30px; }
.mo-cell.missed { opacity: .5; }
.mo-cell.today { text-shadow: 0 0 10px var(--gold); }
.mo-note { font-size: 21px; color: var(--ink); margin-top: 10px; }
.mo-totem {
  font-size: 19px; color: var(--gold); margin-top: 8px;
  background: rgba(255,207,63,.1); border-left: 4px solid var(--gold); padding: 8px 10px;
}
.mo-meta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.mo-run { font-size: 19px; color: var(--xp); }
.mo-best { font-size: 19px; color: var(--ink-dim); }

/* ============================================================
   Day Complete — the biggest ordinary moment in OllieCraft
   ============================================================ */
#celebrate-root:empty { display: none; }
.dc-back {
  position: fixed; inset: 0; z-index: 80; overflow-y: auto;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.72); padding: 20px 12px;
  animation: dcFade .25s ease-out;
}
@keyframes dcFade { from { opacity: 0 } to { opacity: 1 } }
.dc-panel {
  width: 100%; max-width: 420px; text-align: center;
  background: linear-gradient(165deg, #3d5c2a, #24361a);
  border: 4px solid #000; padding: 22px 18px 18px;
  box-shadow: inset -5px -5px 0 rgba(0,0,0,.35), inset 5px 5px 0 rgba(255,255,255,.10),
              0 8px 0 rgba(0,0,0,.35);
  animation: dcPop .32s cubic-bezier(.2,1.3,.4,1);
}
@keyframes dcPop { from { transform: scale(.86); opacity: 0 } to { transform: scale(1); opacity: 1 } }
.dc-back.still, .dc-back.still .dc-panel { animation: none; }

.dc-crew { display: flex; align-items: flex-end; justify-content: center; gap: 12px; margin-bottom: 12px; }
.dc-avatar {
  width: 52px; height: 52px; border: 3px solid #000;
  background: linear-gradient(var(--grass-light) 0 32%, var(--dirt) 32% 100%);
  display: flex; align-items: center; justify-content: center; font-size: 30px;
}
.dc-pet { font-size: 40px; line-height: 1; animation: bob 1.3s ease-in-out infinite; }
.dc-back.still .dc-pet { animation: none; }

.dc-title {
  font-family: 'PressStart', monospace; font-size: 20px; color: var(--gold);
  text-shadow: 0 3px 0 #000; letter-spacing: 1px;
}
.dc-when { font-size: 20px; color: rgba(255,255,255,.8); margin-top: 8px; }
.dc-lines { margin: 16px 0 4px; display: flex; flex-direction: column; gap: 9px; }
.dc-line {
  display: flex; align-items: center; gap: 11px; font-size: 23px; color: #fff;
  background: rgba(0,0,0,.28); border: 2px solid #000; padding: 9px 12px; text-align: left;
}
.dc-i { font-size: 24px; line-height: 1; flex: 0 0 auto; }
.dc-lvl { font-family: 'PressStart', monospace; font-size: 12px; color: var(--gold); margin-top: 16px; }
.dc-bar { height: 16px; background: rgba(0,0,0,.5); border: 3px solid #000; margin-top: 8px; overflow: hidden; }
.dc-fill { height: 100%; background: var(--xp); box-shadow: inset 0 3px 0 rgba(255,255,255,.4); transition: width .9s ease-out; }
.dc-back.still .dc-fill { transition: none; }
.dc-xp { font-size: 19px; color: rgba(255,255,255,.75); margin-top: 7px; }
.dc-btn { margin-top: 18px; width: 100%; }

/* ---- advancements: a discovery board rather than a flat grid ---- */
.adv-total { font-family: 'PressStart', monospace; font-size: 13px; color: var(--gold); margin: 14px 4px 8px; }
.adv-totalbar { height: 12px; background: rgba(0,0,0,.45); border: 3px solid #000; margin: 0 4px 4px; overflow: hidden; }
.adv-totalfill { height: 100%; background: var(--gold); box-shadow: inset 0 2px 0 rgba(255,255,255,.4); transition: width .5s; }
.adv.mystery { filter: none; opacity: .55; border-style: dashed; }
.adv.mystery .aname { color: var(--stone); }
.agoal { margin-top: 8px; }
.agoal-bar { height: 8px; background: rgba(0,0,0,.5); border: 2px solid #000; overflow: hidden; }
.agoal-fill { height: 100%; background: var(--xp); transition: width .4s; }
.agoal-num { font-family: 'PressStart', monospace; font-size: 8px; color: var(--ink-dim); margin-top: 5px; }
.arew { font-family: 'PressStart', monospace; font-size: 8px; color: var(--xp); margin-top: 7px; }

/* ============================================================
   Collection — things to discover
   ============================================================ */
.col-note { font-size: 18px; color: var(--ink-dim); margin: -4px 4px 10px; }
.col-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; margin-bottom: 6px; }
.col-item {
  background: var(--panel); border: 3px solid #000; padding: 11px 7px; text-align: center;
  box-shadow: inset -3px -3px 0 rgba(0,0,0,.3), inset 0 0 0 2px var(--rar, #555);
}
.col-item[data-equip] { cursor: pointer; }
.col-item[data-equip]:active { transform: translateY(2px); }
.ci-ico { font-size: 36px; line-height: 1; }
.ci-name { font-size: 19px; color: var(--ink); margin-top: 7px; line-height: 1.25; }
.ci-when { font-size: 15px; color: var(--stone); margin-top: 5px; }
.ci-rar {
  font-family: 'PressStart', monospace; font-size: 7px; color: var(--rar, #999);
  margin-top: 7px; letter-spacing: .5px;
}
.ci-use { font-size: 15px; color: var(--ink-dim); margin-top: 6px; }
.ci-on { font-family: 'PressStart', monospace; font-size: 8px; color: #fff; margin-top: 6px; }
.col-item.on { background: var(--grass-dark); box-shadow: inset 0 0 0 3px var(--grass), inset -3px -3px 0 rgba(0,0,0,.3); }
.col-item.locked { opacity: .62; }
.col-item.locked .ci-ico { color: var(--stone); font-family: 'PressStart', monospace; font-size: 30px; }
.col-item.locked .ci-name { color: var(--stone); }
.ci-hint { font-size: 15px; color: var(--ink-dim); margin-top: 6px; line-height: 1.35; font-style: italic; }

/* ---- mystery drop chest ---- */
.drop-panel { background: linear-gradient(165deg, #4a3d20, #2b2418); max-width: 340px; }
.drop-chest { font-size: 46px; line-height: 1; margin-bottom: 6px; animation: dcPop .4s cubic-bezier(.2,1.4,.4,1); }
.dc-back.still .drop-chest { animation: none; }
.drop-what {
  font-size: 62px; line-height: 1; margin: 14px 0 6px;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,.4));
}
.drop-name { font-size: 25px; color: #fff; }
.drop-rar { font-family: 'PressStart', monospace; font-size: 9px; color: var(--rar, #999); margin-top: 8px; letter-spacing: .5px; }
.drop-note { font-size: 19px; color: rgba(255,255,255,.75); margin-top: 10px; }

/* ── how close is it ─────────────────────────────────────────────
   The same card, dialled up as the day approaches: far off it is
   dim and flat, by the day itself it is lit and unmissable. The
   change is carried by brightness and weight, never by colour
   alone, and never by anything that flashes or demands. */
.pl-event.hz { align-items: flex-start; }
.pl-event.hz .pl-when {
  font-size: 15px; letter-spacing: .04em; text-transform: lowercase;
  padding-top: 4px;
}
.hz-badge {
  font-size: 12px; letter-spacing: .12em; font-weight: 700;
  color: var(--stone); margin-bottom: 3px;
}
.hz-note { font-size: 17px; color: var(--ink-dim); margin-top: 5px; line-height: 1.35; }

/* far off — present, but quiet enough to ignore */
.pl-event.hz-far { opacity: .62; }
.pl-event.hz-far .pl-eico { font-size: 26px; }
.pl-event.hz-far .pl-etitle { font-size: 21px; }

/* prep is on its way */
.pl-event.hz-soon { opacity: .82; }
.pl-event.hz-soon .pl-eico { font-size: 30px; }
.pl-event.hz-soon .pl-etitle { font-size: 23px; }

/* there is something he can do now */
.pl-event.hz-ready { border-color: var(--gold); }
.pl-event.hz-ready .hz-badge { color: var(--gold); }

.pl-event.hz-tomorrow { border-color: var(--gold); }
.pl-event.hz-tomorrow .hz-badge { color: var(--gold); }

/* today — the headline */
.pl-event.hz-today {
  border-color: var(--grass);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.25);
}
.pl-event.hz-today .hz-badge { color: var(--grass); }
.pl-event.hz-today .pl-etitle { font-size: 27px; }

/* ── doing tomorrow a favour ─────────────────────────────────── */
.pl-future {
  font-size: 19px; line-height: 1.4; color: var(--ink-dim);
  background: rgba(0,0,0,.18); border-left: 4px solid var(--gold);
  padding: 10px 12px; margin: 0 0 8px; border-radius: 3px;
}
.pl-future.done { border-left-color: var(--grass); color: var(--grass); }

/* ── time as distance, not dates ─────────────────────────────── */
.pl-band {
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--stone); padding: 12px 4px 4px;
}
.pl-band:first-child { padding-top: 2px; }

/* ── the packing sheet, faded ────────────────────────────────────
   Prompted names the bag and stands back; Independent asks one
   question. "Show me the list" is styled exactly like every other
   button on purpose — reaching for it is a choice, not an
   admission, and it must never look like the lesser option. */
.pl-faded { padding: 18px 4px 6px; text-align: center; }
.pl-fadedq { font-size: 24px; color: var(--ink); line-height: 1.3; }
.pl-fadedsub { font-size: 18px; color: var(--ink-dim); margin: 6px 0 16px; }
.pl-faded .btn { display: block; margin: 8px 0; }
.pl-allpacked { background: var(--grass); }