/* ============================================================
   The Limi Hospital — how-to guides, illustrations, interactives
   Loaded only on pages whose fragment declares `assets: guides`.
   Illustration palette is the Children's Hospital secondary set
   from the brand guidelines.
   ============================================================ */

:root{
  --kid-blue:#057DC2;
  --kid-green:#00A859;
  --kid-orange:#F58633;
  --kid-yellow:#FEC32E;
  --kid-purple:#A8508A;
  --kid-indigo:#3F4196;
  --skin:#A9703F;
  --skin-d:#8D5524;
  --skin-l:#C08A56;
  --cloth:#F3EFEB;
  --ok:#0B7A4B;
  --warn:#B23A00;
}

/* ── guide meta strip ──────────────────────── */
.gmeta{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.gmeta span{
  display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  font-size:.76rem;font-weight:600;color:rgba(255,255,255,.88);
}
.gmeta span b{color:#fff;font-weight:700}

/* ── step player ───────────────────────────── */
/* Stage above, steps beneath in one column. Side by side, a 4:3 illustration
   runs out long before a six-step list does, which left the illustration
   stranded at the top of a tall empty column. */
.player{
  display:grid;gap:clamp(18px,2.4vw,26px);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(20px,3vw,32px);margin-top:26px;
}
.stage{
  position:relative;background:var(--paper-2);border-radius:12px;overflow:hidden;
  aspect-ratio:4/3;display:grid;place-items:center;
  width:100%;max-width:520px;margin-inline:auto;
}
.stage svg{width:100%;height:100%;display:block}

/* Illustrated stages: the artwork fills the frame and its caption sits under it
   in normal flow, never over it. */
/* An illustrated stage is not the plain 4:3 box: each figure carries its own
   rounded artwork with the caption beneath it, so the wrapper keeps no
   background, ratio or clipping of its own. Nested inside the box, the caption
   sat outside the ratio and overflow:hidden ate it. */
.stage--art{background:none;display:block;aspect-ratio:auto;overflow:visible;border-radius:0}
.stage--art figure{margin:0;display:block;width:100%}
/* height:auto matters: the <img> carries width/height attributes, and without it
   the attribute height wins over the ratio and the artwork renders double height. */
.stage--art img{
  width:100%;height:auto;display:block;
  background:var(--paper-2);border-radius:12px;
}
.stage--art figcaption{
  padding:12px 8px 0;text-align:center;font-size:.86rem;font-weight:600;
  color:var(--ink-70);line-height:1.4;
}
/* No overlay caption: every step illustration carries its own label along the
   bottom of the artwork, and an absolutely-positioned caption landed on top of
   it. The active step is named in the list beside the stage. */
.player__side{display:flex;flex-direction:column;gap:14px;min-width:0}
/* The step list is an <ol> living inside .prose, which numbers every ordered
   list itself. Left alone, .prose paints its own red number beside each step and
   its `counter-reset:n` outranks this rule's reset, so the player's own counter
   never restarts. Opt the player out of .prose's list styling entirely. */
.plist,.prose .plist{list-style:none;margin:0;padding:0;display:grid;gap:2px;counter-reset:s}
.plist li,.prose .plist li{margin:0;position:static;padding-left:0;counter-increment:none}
.prose .plist li::before{content:none}
.plist button{
  width:100%;text-align:left;display:grid;grid-template-columns:30px 1fr;gap:12px;
  align-items:start;background:none;border:0;border-top:1px solid var(--line);
  padding:14px 6px;cursor:pointer;font:inherit;color:var(--ink-70);
  transition:background .25s var(--ease),padding-left .25s var(--ease);
}
.plist li:last-child button{border-bottom:1px solid var(--line)}
.plist button:hover{background:var(--paper-2)}
/* Three items in two columns: the number holds column one across both rows, and
   the title and its description stack in column two. Without the explicit
   placement the description wraps into the 30px number column. */
.plist button::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  grid-column:1;grid-row:1 / span 2;
  font-family:var(--display);font-weight:700;font-size:.82rem;color:var(--ink-45);
  transition:color .25s var(--ease);
}
.plist button b{grid-column:2;grid-row:1;
  display:block;font-family:var(--display);font-size:1.04rem;font-weight:700;
  color:var(--ink);letter-spacing:-.015em;margin-bottom:3px}
.plist button span{grid-column:2;grid-row:2;display:block;font-size:.88rem;line-height:1.55}
.plist button[aria-current="step"]{background:var(--paper-2);padding-left:14px}
.plist button[aria-current="step"]::before{color:var(--red)}
.plist button[aria-current="step"] b{color:var(--red)}

.pctl{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.pctl button{
  display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);
  background:var(--white);border-radius:999px;padding:10px 18px;cursor:pointer;
  font:600 .84rem var(--body);color:var(--ink);
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.pctl button:hover{border-color:var(--ink);background:var(--paper-2)}
.pctl button[data-play]{background:var(--red);border-color:var(--red);color:#fff}
.pctl button[data-play]:hover{background:var(--red-deep);border-color:var(--red-deep)}
.pctl__c{font-size:.8rem;color:var(--ink-45);margin-left:auto}

/* ── breath counter ────────────────────────── */
.breath{
  background:var(--ink);color:#fff;border-radius:var(--r);
  padding:clamp(24px,4vw,40px);margin-top:26px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(24px,4vw,44px);align-items:center;
}
.breath h3{font-size:1.4rem;margin-bottom:10px}
.breath p{color:rgba(255,255,255,.74);font-size:.92rem}
.breath__ages{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}
.breath__ages button{
  border:1px solid rgba(255,255,255,.26);background:transparent;color:rgba(255,255,255,.8);
  border-radius:999px;padding:9px 16px;cursor:pointer;font:600 .8rem var(--body);
  transition:all .25s var(--ease);
}
.breath__ages button:hover{border-color:#fff;color:#fff}
.breath__ages button[aria-pressed="true"]{background:#fff;border-color:#fff;color:var(--ink)}

.breath__dial{position:relative;display:grid;place-items:center;aspect-ratio:1;max-width:280px;
  margin-inline:auto;width:100%}
.breath__dial svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.breath__ring{fill:none;stroke:rgba(255,255,255,.14);stroke-width:7}
.breath__prog{fill:none;stroke:var(--red);stroke-width:7;stroke-linecap:round;
  transition:stroke-dashoffset .3s linear}
.breath__mid{position:relative;text-align:center;z-index:2}
.breath__n{font-family:var(--display);font-size:clamp(2.8rem,7vw,4.2rem);font-weight:700;
  line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.breath__l{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-top:6px}
.breath__tap{
  margin-top:16px;width:100%;border:0;border-radius:999px;padding:18px 24px;cursor:pointer;
  background:var(--red);color:#fff;font:700 1rem var(--body);
  transition:background .2s var(--ease),transform .08s var(--ease);
}
.breath__tap:hover{background:var(--red-deep)}
.breath__tap:active{transform:scale(.97)}
.breath__tap[disabled]{background:rgba(255,255,255,.14);color:rgba(255,255,255,.45);cursor:default}
.breath__reset{
  margin-top:10px;width:100%;border:1px solid rgba(255,255,255,.26);background:transparent;
  color:rgba(255,255,255,.8);border-radius:999px;padding:12px;cursor:pointer;
  font:600 .84rem var(--body);
}
.breath__reset:hover{border-color:#fff;color:#fff}
.breath__out{
  margin-top:16px;padding:16px 18px;border-radius:10px;font-size:.92rem;line-height:1.55;
  display:none;
}
.breath__out.is-on{display:block}
.breath__out--ok{background:rgba(0,168,89,.16);border:1px solid rgba(0,168,89,.5)}
.breath__out--bad{background:rgba(237,34,36,.18);border:1px solid rgba(237,34,36,.6)}
.breath__out b{display:block;font-family:var(--display);font-size:1.1rem;margin-bottom:5px}
.breath__out a{color:#fff;font-weight:700}

/* animated demo baby */
.demo{display:grid;gap:10px;margin-top:20px}
.demo__row{display:flex;gap:12px;align-items:center}
.demo__row figure{margin:0;flex:none;width:110px;background:rgba(255,255,255,.07);
  border-radius:10px;padding:8px}
.demo__row svg{width:100%;height:auto;display:block}
.demo__row div{font-size:.84rem;color:rgba(255,255,255,.74)}
.demo__row b{display:block;color:#fff;font-family:var(--display);font-size:1rem;margin-bottom:2px}
.chest{transform-box:fill-box;transform-origin:center;
  animation:breathe var(--bpm,2s) ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.09)}}

/* ── danger panel ──────────────────────────── */
.danger{
  background:var(--red);color:#fff;border-radius:var(--r);
  padding:clamp(24px,3.5vw,38px);margin-top:30px;
}
.danger h3{font-size:1.36rem;margin-bottom:8px;display:flex;align-items:center;gap:11px}
.danger h3::before{
  content:"!";flex:none;width:30px;height:30px;border-radius:50%;background:#fff;color:var(--red);
  display:grid;place-items:center;font-family:var(--display);font-weight:900;font-size:1.05rem;
}
.danger>p{color:rgba(255,255,255,.9);font-size:.95rem;margin-bottom:18px;max-width:64ch}
.danger ul{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.danger li{position:relative;padding-left:26px;font-size:.93rem;line-height:1.5}
.danger li::before{content:"";position:absolute;left:3px;top:.55em;width:8px;height:8px;
  background:#fff;border-radius:2px;transform:rotate(45deg)}
.danger .btn{background:#fff;color:var(--red)}
.danger .btn:hover{background:var(--ink);color:#fff}

/* ── clinical review note ──────────────────── */

/* ── guide index cards ─────────────────────── */
.gcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:16px;
  margin-top:clamp(26px,4vw,42px)}
.gcard{
  display:flex;flex-direction:column;text-decoration:none;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;position:relative;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.gcard:hover{transform:translateY(-6px);box-shadow:0 26px 50px -30px rgba(11,11,12,.4);
  border-color:transparent}
.gcard__art{aspect-ratio:16/10;background:var(--paper-2);display:grid;place-items:center;
  overflow:hidden}
.gcard__art svg{width:100%;height:100%}
.gcard__b{padding:22px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.gcard h3{font-size:1.14rem}
.gcard p{font-size:.87rem;color:var(--ink-70);flex:1}
.gcard__go{font-size:.83rem;font-weight:600;color:var(--red);display:inline-flex;gap:.45em;
  align-items:center;margin-top:4px}
.gcard__go::after{content:"→";transition:transform .3s var(--ease)}
.gcard:hover .gcard__go::after{transform:translateX(5px)}
.gcard__t{position:absolute;top:12px;left:12px;z-index:2;background:var(--ink);color:#fff;
  font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px}

/* ── Q&A bank ──────────────────────────────── */
.qfilter{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0 6px}
.qfilter button{
  border:1px solid var(--line);background:var(--white);border-radius:999px;padding:9px 16px;
  cursor:pointer;font:600 .8rem var(--body);color:var(--ink-70);
  transition:all .25s var(--ease);
}
.qfilter button:hover{border-color:var(--ink);color:var(--ink)}
.qfilter button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.qsearch{width:100%;margin-top:12px;padding:14px 18px;border:1px solid var(--line);
  border-radius:10px;font:400 .95rem var(--body);background:var(--white);color:var(--ink)}
.qsearch:focus{outline:none;border-color:var(--red)}
.qcount{margin-top:14px;font-size:.82rem;color:var(--ink-45)}
.qa details[hidden]{display:none}
.qa .qtag{
  display:inline-block;margin-left:9px;padding:3px 9px;border-radius:999px;
  background:var(--paper-2);color:var(--ink-45);font-family:var(--body);
  font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  vertical-align:middle;
}
.qask{background:var(--ink);color:#fff;border-radius:var(--r);padding:clamp(24px,3.5vw,38px);
  margin-top:30px;display:grid;gap:14px}
.qask h3{font-size:1.32rem}
.qask p{color:rgba(255,255,255,.76);font-size:.94rem;max-width:62ch}
.qask form{display:grid;gap:12px;max-width:520px;margin-top:4px}
.qask textarea,.qask input{
  font:400 .95rem var(--body);padding:13px 15px;border:1px solid rgba(255,255,255,.22);
  border-radius:9px;background:rgba(255,255,255,.07);color:#fff;width:100%;
}
.qask textarea::placeholder,.qask input::placeholder{color:rgba(255,255,255,.4)}
.qask textarea:focus,.qask input:focus{outline:none;border-color:#fff}
.qask .btn{justify-self:start}
.qask small{color:rgba(255,255,255,.5);font-size:.78rem;line-height:1.55}

/* ── monthly theme ─────────────────────────── */
.month{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px;
  margin-top:22px}
.mcard{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:22px 20px;
  transition:border-color .3s var(--ease),transform .3s var(--ease)}
.mcard:hover{border-color:var(--ink-45);transform:translateY(-3px)}
.mcard.is-now{border-color:var(--red);box-shadow:0 0 0 1px var(--red) inset}
.mcard b{display:block;font-family:var(--display);font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--red);margin-bottom:9px}
.mcard h3{font-size:1.08rem;margin-bottom:7px}
.mcard p{font-size:.86rem;color:var(--ink-70)}
.mcard em{display:block;margin-top:10px;font-style:normal;font-size:.78rem;color:var(--ink-45)}

/* ── plate diagram ─────────────────────────── */

/* ── map ───────────────────────────────────── */
.map{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:20px;
  background:var(--paper-2)}
.map iframe{width:100%;height:340px;border:0;display:block}
.map__f{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;
  padding:14px 18px;background:var(--white);border-top:1px solid var(--line);font-size:.86rem}
.map__f a{color:var(--red);font-weight:600;text-decoration:none;white-space:nowrap}
.map__f a:hover{text-decoration:underline;text-underline-offset:3px}

/* ── responsive ────────────────────────────── */
@media (max-width:900px){
  .player,.breath,.plate{grid-template-columns:1fr}
  .breath__dial{max-width:240px}
}
@media (max-width:560px){
  .demo__row figure{width:84px}
  .map iframe{height:260px}
}

/* ── reduced motion ────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .chest{animation:none}
  .stage svg *{animation:none!important;transition:none!important}
}