/* ============================================================ the plan view
   2026-09-25, "plan mode becomes optional". Two surfaces:
   1. The dock (#orders): bottom right, quiet. Idle it is a small pill of the
      plan chip plus the Write quill and the Speak mic. A running plan grows it
      into the glance card with the hours left.
   2. The plan view (#planview .pv): one big picture. The hours left in the
      12h check-in window, a chunky rail where the bunny hops toward the moon,
      the steps as pictures, the tallies as icons, and the reflexes as
      "when this, do that" tiles with switches. One line of copy.
   Moss and brass tokens; one gold CTA per state; no interior borders. */

/* ---- the dock ------------------------------------------------------------ */
#orders.idle { width: auto; padding: 4px; border-radius: 999px; }
#orders.idle .orders-head { gap: 4px; }
#orders.idle .orders-head > .orders-art {
  box-sizing: border-box; width: 40px; height: 40px; padding: 4px;
  background: var(--ui-well); border-radius: 50%;
}
#orders.idle .orders-left { display: none; }
.orders-talk { display: inline-flex; gap: 4px; align-items: center; }
#orders:not(.idle) .orders-talk { margin-left: 2px; }
.dockbtn {
  display: inline-grid; place-items: center; box-sizing: border-box;
  width: 40px; height: 40px; padding: 0;
  color: #e4ce7f; background: var(--ui-raised);
  border: 0; border-radius: 50%; cursor: pointer;
  transition: transform .08s ease, background .15s ease, color .15s ease;
}
.dockbtn:hover { color: #fff3c9; background: #365040; }
.dockbtn:active { transform: scale(.92); }
.dockbtn.listening { color: #fff3d2; background: #6b3d2e; animation: micpulse 1.1s ease-in-out infinite; }
#orders:not(.idle) .dockbtn { width: 34px; height: 34px; }
/* the running plan's hours left, the dock's one number */
.orders-left {
  color: #e4ce7f; font: 700 12px/1 var(--font-body); font-variant-numeric: tabular-nums;
  padding: 4px 8px; background: var(--ui-well); border-radius: 999px; white-space: nowrap;
}
.orders-left:empty { display: none; }
.orders-left.winding { color: var(--ui-violet); }
#orders:not(.idle) .orders-stop { min-height: 34px; padding: 0 10px; }

/* The running dock on a desktop (playtest 2026-09-27: "still looks a little
   awkward"). Seven controls used to crowd one header row. Now it is a small
   card with two balanced edges: the plan's name and hours on top with Stop
   at the right, the plan's words, then the step pictures flush left with
   Write/Speak flush right. The markup is unchanged: the header's children
   join the card's grid (display: contents). Phones keep their own bar. */
@media (min-width: 561px) and (min-height: 431px) {
  #orders:not(.idle) {
    display: grid;
    grid-template-columns: auto auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "icon title left . stop"
      "quote quote quote quote quote"
      "pips pips pips pips pips"
      "info info info info info"
      "acts acts acts acts talk";
    align-items: center;
    column-gap: 8px;
    row-gap: 8px;
    width: 312px;
    padding: 11px 12px 12px 13px;
    border-color: var(--ui-hairline);
    cursor: pointer;
  }
  #orders:not(.idle):hover { border-color: var(--ui-brass); box-shadow: 0 14px 44px rgba(0, 0, 0, .48), 0 0 0 1px rgba(198, 168, 91, .35); }
  #orders:not(.idle) .orders-head { display: contents; }
  #orders:not(.idle) .orders-head > .ui-icon { grid-area: icon; width: 20px; height: 20px; }
  #orders:not(.idle) .orders-title { grid-area: title; color: #f2e6bd; font-size: 15px; line-height: 1; }
  #orders:not(.idle) .orders-left { grid-area: left; padding: 4px 8px; font-size: 12px; }
  #orders:not(.idle) .orders-stop {
    grid-area: stop; justify-self: end; min-height: 28px; padding: 0 10px 0 8px; gap: 4px;
    background: transparent; border-color: rgba(231, 125, 114, .45); font-size: 11px;
  }
  #orders:not(.idle) .orders-open { display: none; }
  #orders:not(.idle) .orders-talk { grid-area: talk; justify-self: end; align-self: end; margin: 0; gap: 6px; }
  #orders:not(.idle) #rawcmd { grid-area: quote; margin: 0; color: #e6d79f; font-size: 13px; line-height: 1.35; }
  #orders:not(.idle) #planpips { grid-area: pips; }
  #orders:not(.idle) #planpips .planpips { margin: 0; }
  #orders:not(.idle) #taskinfo { grid-area: info; font-size: 11.5px; }
  #orders:not(.idle) #rules { grid-area: acts; align-self: center; margin: 0; padding: 0; }
  #orders:not(.idle) #rules .mini-acts { gap: 6px; margin: 0; }
  #orders:not(.idle) :is(#planpips, #taskinfo, #rules):empty { display: none; }
  #orders:not(.idle) .mini-act { width: 30px; height: 30px; background: var(--ui-well); }
  #orders:not(.idle) .mini-act img { width: 26px; height: 26px; }
  #orders:not(.idle) .mini-act.now { background: #24424a; }
}

/* ---- the view shell ------------------------------------------------------ */
#planview { align-items: center; }
#planview .card { width: min(700px, calc(100vw - 36px)); max-height: calc(100dvh - 32px); padding: 0; overflow-x: hidden; }
.pv { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 16px; }
.pv > section:empty, .pv > section[hidden] { display: none; }
.pv-close { position: absolute; top: 12px; right: 12px; z-index: 2; }

/* ---- the clock: the hero ------------------------------------------------- */
.pv-clock { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 4px; }
.pv-hours { display: flex; align-items: baseline; gap: 2px; color: #f6e7b0; font-family: var(--font-display); font-variant-numeric: tabular-nums; text-shadow: 0 3px 0 #0a120d, 0 0 28px rgba(241, 210, 125, .25); }
.pv-hours b { font-size: 58px; line-height: .9; font-weight: 700; }
.pv-hours i { margin: 0 8px 0 3px; color: var(--ui-brass); font-size: 24px; font-style: normal; }
.pv-hours i:last-child { margin-right: 0; }
.pv-hours.winding { color: #d9c9ff; text-shadow: 0 3px 0 #0a120d, 0 0 28px rgba(191, 166, 245, .35); }
.pv-hours.winding i { color: var(--ui-violet); }
.pv-note { margin: 0; color: var(--ui-muted); font-size: 13px; line-height: 1.4; text-align: center; }

/* the rail: twelve chunky hours that fill up as the window is used
   (playtest 2026-09-27: "fill in from gray to yellow to indicate how far
   along in the plan we are"). The JS still marks the hours LEFT as .lit, so
   here .lit is the gray still-to-come and an unlit block is a spent, gold
   hour. The bunny stands at the fill front and hops toward the moon. */
.pv-rail { --elapsed: 0; position: relative; width: 100%; height: 60px; }
.pv-segs {
  position: absolute; left: 0; right: 38px; bottom: 4px; height: 20px;
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px;
  padding: 4px; background: var(--ui-well); border-radius: 9px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .55);
}
.pv-segs i {
  display: block; border-radius: 3px; transition: background .4s ease, box-shadow .4s ease;
  background: linear-gradient(180deg, #f1d27d, #c99443); box-shadow: inset 0 -3px 0 rgba(120, 80, 20, .45), inset 0 2px 0 rgba(255, 245, 200, .5);
}
.pv-segs i.lit { background: #36443b; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .06); }
/* the hour in progress fills left to right with the minutes */
@supports (width: calc(mod(3px, 2px))) {
  .pv-segs i.lit:first-child, .pv-segs i:not(.lit) + i.lit {
    --seg-fill: calc(mod(var(--elapsed) * 12, 1) * 100%);
    background: linear-gradient(90deg, #e2bd62 var(--seg-fill), #36443b var(--seg-fill));
  }
}
.pv-rail.low .pv-segs i:not(.lit) { background: linear-gradient(180deg, #f2a36b, #c2603f); box-shadow: inset 0 -3px 0 rgba(90, 30, 10, .45), inset 0 2px 0 rgba(255, 220, 190, .5); }
.pv-rail.refill .pv-segs i.lit { animation: pvrefill .9s ease both; }
@keyframes pvrefill { 0% { filter: brightness(2.2); transform: scaleY(1.5); } 100% { filter: none; transform: none; } }
.pv-hopper {
  position: absolute; bottom: 12px; width: 60px; height: 60px;
  left: clamp(-10px, calc((100% - 38px) * var(--elapsed) - 34px), calc(100% - 96px));
  image-rendering: pixelated; pointer-events: none;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .45));
  transition: left .9s cubic-bezier(.3, 1.3, .5, 1);
}
.pv-moon {
  position: absolute; right: 0; bottom: 0; width: 32px; height: 32px;
  display: grid; place-items: center; color: #d9c9ff;
  background: radial-gradient(circle, #3a2d55, #1c1530 70%); border-radius: 50%;
  box-shadow: 0 0 14px rgba(191, 166, 245, .35);
}
.pv-moon .ui-icon { width: 17px; height: 17px; }

/* the ended plan: an empty rail, the bunny asleep by the moon */
.pv-ended { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.pv-ended-mark {
  display: grid; place-items: center; width: 64px; height: 64px; color: #e8ddff;
  background: radial-gradient(circle, #3a2d55, #1c1530 72%); border-radius: 50%;
  box-shadow: 0 0 30px rgba(191, 166, 245, .35);
}
.pv-ended-mark .ui-icon { width: 32px; height: 32px; }
.pv[data-mode="ended"] .pv-hopper { left: calc(100% - 96px); bottom: 10px; }
.pv-rail.spent .pv-segs i { filter: saturate(.75) brightness(.85); }   /* a finished window is a full rail */

/* the quiet menu: the bunny, resting, and one gold way in */
.pv-rest { display: grid; place-items: center; height: 96px; }
.pv-rest img { width: 88px; height: 88px; image-rendering: pixelated; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .4)); }

/* ---- what the plan is doing: steps as pictures --------------------------- */
.pv-now { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 10px; background: rgba(4, 12, 7, .42); border-radius: 14px; }
.pv-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pv-step {
  position: relative; display: grid; place-items: center; width: 54px; height: 54px;
  color: #eef0cc; background: var(--ui-raised); border-radius: 14px;
}
.pv-step-art { display: grid; place-items: center; }
.pv-step-art .ui-icon { width: 24px; height: 24px; }
.pv-step-art img { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; }
.pv-step.done { opacity: .45; }
.pv-step.done .pv-step-art .ui-icon { color: var(--ui-leaf); }
.pv-step.now { background: #24424a; box-shadow: 0 0 0 2px var(--ui-plan), 0 0 18px rgba(127, 200, 218, .35); animation: pvstepnow 1.2s ease-in-out infinite; }
@keyframes pvstepnow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.pv-step-n {
  position: absolute; right: -6px; bottom: -6px; padding: 2px 5px;
  color: #22170e; background: #f1d27d; border-radius: 999px;
  font: 700 11px/1 var(--font-body); font-variant-numeric: tabular-nums;
}
.pv-step-x {
  position: absolute; top: -7px; right: -7px; display: none; place-items: center;
  width: 22px; height: 22px; padding: 0; color: #f1c2a9; background: #3c261f;
  border: 0; border-radius: 50%; cursor: pointer;
}
.pv-step-x .ui-icon { width: 11px; height: 11px; }
.pv-step:hover .pv-step-x, .pv-step-x:focus-visible { display: grid; }
.pv-badges { display: flex; gap: 6px; }
.pv-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; color: var(--ui-plan); background: rgba(127, 200, 218, .12); border-radius: 999px; font: 700 12px/1.2 var(--font-body); font-variant-numeric: tabular-nums; }
.pv-badge .ui-icon { width: 13px; height: 13px; }
.pv-badge.goal { color: #f1d27d; background: rgba(241, 210, 125, .12); }
.pv-words { margin: 0; max-width: 100%; overflow: hidden; color: #cfc39a; font-size: 12px; font-style: italic; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.pv-now .plan-variable { margin: 0; padding: 0; background: none; }
.pv-now .plan-tier-strip { justify-content: center; }

/* ---- the tallies ---------------------------------------------------------- */
.pv-tally { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pv-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pv-tile {
  position: relative; display: flex; align-items: center; gap: 7px; min-width: 64px;
  padding: 6px 11px 6px 6px; color: #f2e6bd; background: var(--ui-raised); border-radius: 14px;
}
.pv-tile-art { display: grid; place-items: center; width: 32px; height: 32px; color: var(--ui-leaf-bright); background: var(--ui-well); border-radius: 50%; }
.pv-tile-art .ui-icon { width: 18px; height: 18px; }
.pv-tile b { font: 700 19px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.pv-tile.zero { opacity: .5; }
.pv-tile[data-k="kills"] .pv-tile-art { color: #f0a58c; }
.pv-tile[data-k="glimmer"] .pv-tile-art { color: #a9e69a; }
.pv-tile[data-k="levels"] .pv-tile-art, .pv-tile[data-k="xp"] .pv-tile-art { color: #f1d27d; }
.pv-tile[data-k="deaths"] .pv-tile-art { color: #e77d72; }
.pv-tiles.away .pv-tile { background: linear-gradient(160deg, #3c3a1e, #232716); }
.pv-tile.counting b { color: #fff3c4; }
.pv-tile.tick { animation: pvtick .6s cubic-bezier(.3, 1.6, .5, 1); }
.pv-tile.tick::after {
  content: ""; position: absolute; top: -6px; right: -4px; width: 14px; height: 14px; pointer-events: none;
  background: radial-gradient(circle, #fff7d0 0 2px, transparent 3px), conic-gradient(from 0deg, transparent 0 20%, #f1d27d 20% 30%, transparent 30% 45%, #f1d27d 45% 55%, transparent 55% 70%, #f1d27d 70% 80%, transparent 80%);
  border-radius: 50%; animation: pvsparkle .7s ease-out forwards;
}
@keyframes pvtick { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes pvsparkle { 0% { opacity: 0; transform: scale(.2) rotate(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6) rotate(90deg); } }
.pv-away-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; color: #e8ddff; background: rgba(92, 59, 120, .45); border-radius: 999px; font: 700 13px/1 var(--font-body); }
.pv-away-tag .ui-icon { width: 15px; height: 15px; }

/* ---- reflexes: "when this, do that" -------------------------------------- */
.pv-reflexes { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; background: rgba(4, 12, 7, .42); border-radius: 14px; }
.pv-rx-head { display: flex; align-items: center; gap: 8px; color: var(--ui-reflex); }
.pv-rx-head > .ui-icon { width: 20px; height: 20px; }
.pv-rx-title { margin: 0; color: #f2e6bd; font: 700 15px/1 var(--font-display); letter-spacing: .02em; }
.pv-rx-head .rslot-pips { margin-left: auto; }
.pv-rxgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pv-rx {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 8px 10px; background: var(--ui-raised); border-radius: 13px;
  transition: background .2s ease, opacity .2s ease;
}
/* the picture and caption are one button into the reflex's own card */
.pv-rx-open {
  display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; min-width: 0;
  padding: 0; color: inherit; background: none; border: 0; border-radius: 10px; font: inherit; cursor: pointer;
}
.pv-rx-open:hover .pv-when, .pv-rx-open:hover .pv-do { background: #1a2a20; }
.pv-rx:has(.pv-rx-open:hover) { background: #324638; }
.pv-rx-pic { position: relative; display: flex; align-items: center; gap: 4px; }
.pv-when, .pv-do { display: grid; place-items: center; width: 40px; height: 40px; background: var(--ui-well); border-radius: 11px; color: #f3d278; }
.pv-when img, .pv-do img { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; }
.pv-when .ui-icon, .pv-do .ui-icon { width: 20px; height: 20px; }
.pv-then { width: 0; height: 0; margin: 0 3px; border-style: solid; border-width: 7px 0 7px 10px; border-color: transparent transparent transparent var(--ui-reflex); opacity: .85; }
.pv-then .ui-icon { display: none; }
/* a low-health trigger is a heart draining to its threshold */
.pv-hp { position: relative; display: grid; place-items: center; color: #e77d72; }
.pv-hp .ui-icon { width: 22px; height: 22px; }
.pv-hp::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: -7px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, #e77d72 var(--pct, 40%), #2a1b18 var(--pct, 40%)); }
.pv-rx-ago {
  position: absolute; top: -8px; left: 28px; display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px 2px 4px;
  color: #22170e; background: #f1d27d; border-radius: 999px; font: 700 11px/1 var(--font-body);
}
.pv-rx-ago .ui-icon { width: 11px; height: 11px; }
.pv-rx-cap { max-width: 100%; overflow: hidden; color: var(--ui-muted); font-size: 11px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.pv-rx.off { background: #19231d; }
.pv-rx.off .pv-when, .pv-rx.off .pv-do { filter: grayscale(1) brightness(.75); }
.pv-rx.off .pv-then { opacity: .25; }
.pv-rx.fired { animation: pvfired 1s ease-out; box-shadow: 0 0 0 2px #f1d27d, 0 0 22px rgba(241, 210, 125, .35); }
@keyframes pvfired { 0% { box-shadow: 0 0 0 6px rgba(241, 210, 125, .8), 0 0 30px rgba(241, 210, 125, .6); } }
/* the switch: big, obvious, thumb-sized */
.pv-switch {
  position: relative; width: 52px; height: 30px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: #121c15; box-shadow: inset 0 2px 5px rgba(0, 0, 0, .6);
  transition: background .2s ease;
}
.pv-switch i { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #7a8674; transition: left .2s cubic-bezier(.3, 1.4, .5, 1), background .2s ease; }
.pv-switch[aria-checked="true"] { background: #3f7a4a; }
.pv-switch[aria-checked="true"] i { left: 25px; background: #f2e6bd; box-shadow: 0 0 10px rgba(169, 230, 154, .6); }
.pv-switch:disabled { opacity: .45; cursor: not-allowed; }
.pv-socket {
  display: grid; place-items: center; min-height: 72px; padding: 0; cursor: pointer;
  color: #6f7c67; background: rgba(4, 10, 6, .55); border: 0; border-radius: 13px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .6);
  transition: color .15s ease, background .15s ease;
}
.pv-socket .ui-icon { width: 22px; height: 22px; }
.pv-socket:hover { color: #e4ce7f; background: rgba(69, 57, 24, .35); }

/* ---- the footer: one gold way forward, the rest quiet --------------------- */
.pv-foot { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pv-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 200px; min-height: 48px; padding: 0 22px;
  color: #22170e; background: linear-gradient(180deg, #f1d27d, #c99443); border: 1px solid #f1d27d; border-radius: 12px;
  font: 700 15px/1 var(--font-body); cursor: pointer; box-shadow: 0 4px 0 #6d4e22;
  transition: transform .08s ease;
}
.pv-primary .ui-icon { width: 18px; height: 18px; }
.pv-primary:active { transform: translateY(3px); box-shadow: 0 1px 0 #6d4e22; }
.pv-actions { display: flex; gap: 8px; justify-content: center; }
.pv-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
  color: #e6d28f; background: transparent; border: 1px solid rgba(198, 168, 91, .35); border-radius: 10px;
  font: 700 13px/1 var(--font-body); cursor: pointer;
}
.pv-btn .ui-icon { width: 15px; height: 15px; }
.pv-btn:hover { border-color: var(--ui-brass); }
.pv-btn.stop { color: var(--ui-danger); border-color: rgba(231, 125, 114, .45); }
.pv-foot .plan-shelf { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; background: none; color: var(--ui-muted); }
.pv-foot .plan-shelf > .ui-icon { width: 18px; height: 18px; flex: none; }
.pv-foot .plan-shelf-row { justify-content: center; }

/* ---- phones: a bottom sheet ---------------------------------------------- */
@media (max-width: 560px), (max-height: 430px) and (orientation: landscape) {
  .dockbtn, #orders.idle .orders-head > .orders-art { width: 44px; height: 44px; }
  #orders.idle .orders-head > .orders-art { padding: 6px; }
  #orders:not(.idle) .dockbtn { width: 44px; height: 44px; }
  #orders:not(.idle) .orders-stop { min-height: 44px; }
  body.planlive #orders .orders-title { display: none; }
  body.planlive #orders .orders-head { gap: 6px; }
  body.stoneframe #orders.idle, body.swordsman #orders.idle { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 560px) {
  #planview { align-items: flex-end; padding: 0; }
  #planview .card {
    width: 100vw; max-width: none; max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px));
    padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    border-radius: 20px 20px 0 0; border-bottom: 0;
    animation: pvsheetin .32s cubic-bezier(.2, .9, .3, 1.05);
  }
  #planview.closing .card { animation: pvsheetout .17s ease forwards; }
  .pv { gap: 12px; padding: 18px 14px 14px; }
  .pv::before { content: ""; align-self: center; width: 42px; height: 4px; margin: -8px 0 2px; border-radius: 2px; background: rgba(198, 168, 91, .35); }
  .pv-hours b { font-size: 52px; }
  .pv-hours i { font-size: 20px; }
  .pv-step { width: 48px; height: 48px; }
  .pv-rxgrid { grid-template-columns: 1fr 1fr; }
  .pv-hopper { width: 50px; height: 50px; }
  .pv-rx-cap { display: block; }
  .pv-primary { width: 100%; }
}
@keyframes pvsheetin { from { transform: translateY(100%); } to { transform: none; } }
@keyframes pvsheetout { to { transform: translateY(100%); } }

@media (prefers-reduced-motion: reduce) {
  .pv-step.now, .pv-tile.tick, .pv-tile.tick::after, .pv-rx.fired, .pv-rail.refill .pv-segs i.lit, #planview .card { animation: none !important; }
  .pv-hopper, .pv-switch i { transition: none; }
}
/* the target toggles stay, as small portraits under the steps */
.pv-now .plan-tier { min-width: 62px; width: 62px; min-height: 0; padding: 5px 4px; }
.pv-now .plan-tier-art img { width: 34px; height: 34px; }

/* ---- the reflex card (#plancard): one reflex, big, with its switch --------- */
#plancard .rxcard {
  display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
  margin-top: 12px; padding: 14px; background: rgba(4, 12, 7, .42); border-radius: 14px;
}
#plancard .rxcard .pv-when, #plancard .rxcard .pv-do { width: 56px; height: 56px; border-radius: 14px; background: var(--ui-raised); }
#plancard .rxcard .pv-when img, #plancard .rxcard .pv-do img { width: 44px; height: 44px; }
#plancard .rxcard .pv-when .ui-icon, #plancard .rxcard .pv-do .ui-icon { width: 26px; height: 26px; }
#plancard .rxcard .pv-hp .ui-icon { width: 28px; height: 28px; }
#plancard .rxcard.off .pv-when, #plancard .rxcard.off .pv-do { filter: grayscale(1) brightness(.75); }
#plancard .rxcard.off .pv-then { opacity: .25; }
#plancard .rxcard-ago {
  display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px 3px 6px;
  color: #22170e; background: #f1d27d; border-radius: 999px; font: 700 12px/1 var(--font-body); font-variant-numeric: tabular-nums;
}
#plancard .rxcard-ago .ui-icon { width: 12px; height: 12px; }
/* entity chips sit on the text line (the header's portrait-ring img rule
   used to blow a carrot chip up into a 58px medallion above the baseline) */
#plancard .hdr .chip img.cicon, #planview .hdr .chip img.cicon {
  width: 17px; height: 17px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  vertical-align: -3px; margin-right: 3px;
}

/* Swapping between the plan view and a card on top of it: the surface that
   is leaving drops its scrim at once, because the arriving one already dims
   the world. Without this the scrim lifted for a beat (the world flashed). */
body.planviewopen #plancard.closing, body.pactreview #planview.closing { background: none; backdrop-filter: none; }