/* Lesson Shuffle card site. Phone-first, brand palette, light + dark. */
:root{
  --band:#9cefa0; --bg:#fbfcf9; --surface:#ffffff; --ink:#26384a; --muted:#5b6b78;
  --rule:#dfe7e0; --head:#3f7d5c; --link:#305f82; --say:#fff6d6; --say-edge:#e0b42a;
  --suit:#6ca9d8; --line:#4a8cc0; --title:#305f82; --suit-soft:#e6f1fa; --on-suit:#fff;
  --k0:#6ca9d8; --k1:#ffd54f; --k2:#e57373; --k3:#80c783;
  --display:"Days One","Arial Black",system-ui,sans-serif;
  --body:"Rubik","Segoe UI",system-ui,sans-serif;
  --r:.6rem;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --band:#2f5a39; --bg:#141b20; --surface:#1b252c; --ink:#e6edf1; --muted:#a3b2bc;
  --rule:#2c3a43; --head:#8fd39a; --link:#8fc3ec; --say:#3a3420; --say-edge:#e0b42a; color-scheme:dark}}
:root[data-theme="dark"]{
  --band:#2f5a39; --bg:#141b20; --surface:#1b252c; --ink:#e6edf1; --muted:#a3b2bc;
  --rule:#2c3a43; --head:#8fd39a; --link:#8fc3ec; --say:#3a3420; --say-edge:#e0b42a; color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:1rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
html.no-scroll{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.65 var(--body)}
a{color:var(--link)}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--line);outline-offset:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--surface);padding:.5rem 1rem;z-index:50}
.skip:focus{left:1rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.muted{color:var(--muted)}
.wrap{max-width:44rem;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.band{background:var(--band)}
.band .wrap{display:flex;justify-content:center;padding-block:.4rem}
.band a{display:block}
.band img{height:6rem;width:auto;display:block}

/* header */
header.card{border-top:.5rem solid var(--suit);background:var(--surface);padding-block:1.6rem 1.4rem;border-bottom:1px solid var(--rule)}
.eyebrow{font:500 .78rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;flex-wrap:wrap;gap:.5rem 1rem}
.eyebrow .suit{color:var(--title)}
h1{font:400 clamp(2rem,7vw,2.75rem)/1.08 var(--display);text-transform:uppercase;color:var(--title);margin:.6rem 0 .4rem;text-wrap:balance;overflow-wrap:anywhere}
.tagline{font:400 1rem/1.3 var(--display);text-transform:uppercase;letter-spacing:.04em;color:var(--ink);margin:0}
.badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.badge{font:500 .8rem/1 var(--body);padding:.45rem .7rem;border-radius:999px;background:var(--suit-soft);color:var(--title)}
.actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.btn-main,.btn-ghost{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:.55rem 1rem;border-radius:999px;font:500 .95rem/1 var(--body);text-decoration:none;cursor:pointer;border:2px solid var(--title)}
.btn-main{background:var(--title);color:var(--surface)}
.btn-ghost{background:transparent;color:var(--title)}
.btn-main:hover{filter:brightness(1.1)}
.btn-ghost:hover{background:var(--suit-soft)}
.btn-main svg,.btn-ghost svg{width:1.1em;height:1.1em;fill:currentColor}

main{padding-block:.5rem 3rem}
.jump{display:flex;flex-wrap:wrap;gap:.25rem 1rem;padding-top:1rem;font-size:.9rem}
.jump a{text-decoration:none;font-weight:500}
section{padding-top:1.75rem}
h2{font:700 1.15rem/1.2 var(--body);color:var(--head);margin:0 0 .7rem;text-transform:uppercase;letter-spacing:.05em}
h3{font:700 1rem/1.3 var(--body);margin:1.1rem 0 .5rem;color:var(--ink)}
p{margin:0 0 .75rem}
.h-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;margin-bottom:.7rem}
.h-row h2{margin:0}
.move p{font:500 1.2rem/1.5 var(--body);border-left:.3rem solid var(--suit);padding-left:1rem}
dl.glance{display:grid;grid-template-columns:max-content 1fr;gap:.55rem 1.25rem;margin:0;padding:1rem 1.1rem;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r)}
dl.glance dt{font:500 .8rem/1.6 var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
dl.glance dd{margin:0;min-width:0}
@media (max-width:460px){dl.glance{grid-template-columns:1fr;gap:.1rem}dl.glance dd{margin-bottom:.55rem}}

/* steps */
ol.steps{list-style:none;counter-reset:s;padding:0;margin:0 0 .5rem;display:grid;gap:1rem}
ol.steps li{counter-increment:s;display:grid;grid-template-columns:2.2rem 1fr;gap:.75rem}
ol.steps li::before{content:counter(s);font:400 1rem/2.2rem var(--display);text-align:center;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--suit);color:var(--on-suit)}
ol.steps li>div{min-width:0}
ol.steps strong{display:block}
.when{display:block;color:var(--muted);font-size:.9rem}
.txt{display:block}
.say{display:block;margin:.45rem 0;background:var(--say);border-left:.25rem solid var(--say-edge);padding:.5rem .75rem;border-radius:0 .4rem .4rem 0;font-style:italic}
.step-note{background:var(--suit-soft);padding:.6rem .8rem;border-radius:.5rem;margin:.5rem 0}
ul.list{padding-left:1.1rem;margin:0 0 .5rem;display:grid;gap:.45rem}
ul.list.sub{margin-top:.45rem}

/* lesson flow bar */
.lflow{margin:0 0 1.25rem;padding:.9rem 1rem;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r)}
.lflow-h{font:500 .8rem/1 var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 .6rem}
.lflow ol{list-style:none;margin:0;padding:0;display:flex;gap:3px;min-height:3.2rem}
.lflow li{min-width:2.4rem;background:var(--suit-soft);border-top:.3rem solid var(--suit);border-radius:.3rem;padding:.3rem .35rem;display:flex;flex-direction:column;overflow:hidden}
.lflow .n{font:400 .85rem/1 var(--display);color:var(--title)}
.lflow .lab{font-size:.75rem;line-height:1.2;margin-top:.2rem;overflow-wrap:anywhere}
.lflow .dur{font-size:.7rem;color:var(--muted);line-height:1.2;margin-top:auto}
@media (max-width:560px){.lflow ol{flex-direction:column}.lflow li{flex:none!important;flex-direction:row;align-items:baseline;gap:.5rem;border-top:0;border-left:.3rem solid var(--suit)}.lflow .lab{margin:0;font-size:.85rem}.lflow .dur{margin-left:auto;white-space:nowrap}}
.flow-prep{font-size:.88rem;margin:.6rem 0 0;color:var(--muted)}

/* tabs */
.tabs [role=tablist]{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:.6rem}
.tabs [role=tab]{border:1px solid var(--rule);background:var(--surface);border-radius:999px;padding:.45rem .9rem;min-height:40px;cursor:pointer;font-weight:500}
.tabs [role=tab][aria-selected=true]{background:var(--title);border-color:var(--title);color:var(--surface)}
.ex-panel{background:var(--surface);border:1px solid var(--rule);border-left:.3rem solid var(--suit);border-radius:var(--r);padding:.9rem 1rem}
.ex-panel p:last-child{margin:0}

/* resources */
.res-grid{display:grid;gap:1rem}
.res h3{margin-top:0}
.linklist{padding-left:1.1rem;margin:0;display:grid;gap:.35rem}
.relcards{list-style:none;padding:0;margin:0 0 .6rem;display:flex;flex-wrap:wrap;gap:.5rem}
.relcards a{display:inline-flex;gap:.45rem;align-items:center;padding:.45rem .75rem;border:1px solid var(--rule);border-left:.3rem solid var(--suit);border-radius:.5rem;background:var(--surface);text-decoration:none;font-weight:500;color:var(--ink)}
.relcards span{font-size:.75rem;color:var(--muted)}
.triple{font-size:.95rem}

/* reflect */
.reflect{border-top:1px solid var(--rule);margin-top:1.75rem}
.tried{display:flex;align-items:center;gap:.6rem;font-weight:500;margin:.75rem 0;cursor:pointer;min-height:44px}
.tried input{width:1.35rem;height:1.35rem;accent-color:var(--line)}
.tried-date{font-weight:400;color:var(--muted);font-size:.9rem}
.note-l{display:block;font-weight:500;margin-bottom:.35rem}
textarea{width:100%;font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:.7rem .8rem}
.note-saved{font-size:.85rem;min-height:1.2em;margin-top:.3rem}

.evidence{font-size:.92rem;color:var(--muted)}
.evidence .lvl{display:inline-block;font:500 .78rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--head);border:1px solid var(--head);padding:.3rem .55rem;border-radius:.3rem;margin-bottom:.6rem}
.scholar{font-size:.9rem}
nav.pager{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:1px solid var(--rule);padding-block:1.25rem;font-weight:500}
footer{border-top:1px solid var(--rule);padding-block:1.5rem 2.5rem;color:var(--muted);font-size:.9rem;text-align:center}
footer a{font-weight:500}

/* ---------- diagrams ---------- */
figure.dg{margin:0;padding:1rem;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r)}
figure.dg figcaption{font-size:.9rem;color:var(--muted);margin-top:.75rem}
.dg-svg{display:block;width:100%;max-width:30rem;height:auto;margin:0 auto;font-family:var(--body)}
.dg-svg .box{fill:var(--surface);stroke:var(--line);stroke-width:2}
.dg-svg .box.accent{fill:var(--suit-soft)}
.dg-svg .dot{fill:var(--suit-soft);stroke:var(--line);stroke-width:1.5}
.dg-svg .dot.accent{fill:var(--suit)}
.dg-svg .ln{stroke:var(--line);stroke-width:2;fill:none}
.dg-svg .thin{stroke-width:1.5}
.dg-svg .dash{stroke-dasharray:6 5}
.dg-svg .fill-suit{fill:var(--line)}
.dg-svg .lbl{fill:var(--surface);stroke:var(--rule)}
.dg-svg .lava{fill:#e57373;opacity:.3}
.dg-svg text{fill:var(--ink)}
.dg-svg .t{font-size:13.5px}
.dg-svg .tb{font-size:14px;font-weight:700}
.dg-svg .ts{font-size:12.5px;fill:var(--muted)}
.dg-svg .tc{font-size:14px;fill:var(--muted);font-style:italic}
.dg-svg .tl{font-size:12px;fill:var(--title);font-weight:500}
.dg-svg .k0{fill:var(--k0)}.dg-svg .k1{fill:var(--k1)}.dg-svg .k2{fill:var(--k2)}.dg-svg .k3{fill:var(--k3)}

.dg-flow{list-style:none;margin:0;padding:0;display:flex;gap:1.6rem;flex-wrap:wrap;counter-reset:f}
.dg-flow li{flex:1 1 7.5rem;position:relative;background:var(--suit-soft);border:2px solid var(--line);border-radius:.6rem;padding:.6rem .7rem;counter-increment:f}
.dg-flow li b{display:block;color:var(--title);line-height:1.25}
.dg-flow li span{display:block;font-size:.85rem;line-height:1.35;margin-top:.2rem}
.dg-flow li:not(:last-child)::after{content:"";position:absolute;right:-1.35rem;top:50%;width:.9rem;height:.9rem;border-top:3px solid var(--line);border-right:3px solid var(--line);transform:translateY(-50%) rotate(45deg)}
@media (max-width:560px){.dg-flow{flex-direction:column;gap:1.4rem}.dg-flow li{flex:none}.dg-flow li:not(:last-child)::after{right:auto;left:50%;top:auto;bottom:-1.15rem;transform:translateX(-50%) rotate(135deg)}}
.dg-loopnote,.dg-note{font-size:.9rem;color:var(--muted);margin:.75rem 0 0}
.dg-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.6rem}
.dg-cols div{background:var(--suit-soft);border-top:.35rem solid var(--suit);border-radius:.5rem;padding:.7rem .8rem}
.dg-cols b{display:block;font:400 1.05rem/1.2 var(--display);text-transform:uppercase;color:var(--title)}
.dg-cols span{display:block;font-size:.9rem;margin-top:.3rem}
.dg-funnel{display:grid;gap:.4rem;justify-items:center}
.dg-funnel div{width:var(--w);background:var(--suit-soft);border:2px solid var(--line);border-radius:.6rem;padding:.55rem .8rem;text-align:center}
.dg-funnel b{display:block;color:var(--title)}
.dg-funnel span{font-size:.85rem}
.dg-dec-q{background:var(--suit-soft);border:2px solid var(--line);border-radius:.6rem;padding:.6rem .8rem;font-weight:700;text-align:center;color:var(--title)}
.dg-dec ul{list-style:none;padding:0;margin:.8rem 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.6rem;position:relative}
.dg-dec li{border:1px solid var(--rule);border-top:.3rem solid var(--suit);border-radius:.5rem;padding:.55rem .7rem;background:var(--surface)}
.dg-dec .c{display:block;font-weight:700}
.dg-dec .a{display:block;font-size:.9rem}
.dg-cmp .row{display:grid;grid-template-columns:5.5rem 1fr;gap:.25rem .75rem;align-items:center;margin-bottom:.75rem}
.dg-cmp .row>span{grid-column:2;font-size:.85rem;color:var(--muted)}
.dg-cmp .cells{display:flex;gap:3px;flex-wrap:wrap}
.dg-cmp i,.dg-legend i{display:inline-grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:.3rem;font:700 .8rem/1 var(--body);font-style:normal;color:#26384a}
.k0{background:var(--k0)}.k1{background:var(--k1)}.k2{background:var(--k2)}.k3{background:var(--k3)}
.dg-legend{font-size:.85rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:.35rem .9rem;align-items:center;margin:.4rem 0 0}
.dg-legend i{width:1.2rem;height:1.2rem;font-size:.7rem;margin-right:.1rem}
.dg-bar{display:flex;gap:3px;min-height:4rem}
.dg-bar .seg{border-radius:.35rem;padding:.4rem .45rem;display:flex;flex-direction:column;justify-content:space-between;min-width:3.6rem}
.dg-bar .seg b{font-size:.78rem;line-height:1.2;hyphens:auto}
.dg-bar .seg span{font-size:.75rem}
.dg-bar .t{background:var(--title);color:var(--surface)}
.dg-bar .s{background:var(--suit-soft);border:2px solid var(--line)}
.dg-legend .sw{width:1rem;height:1rem;border-radius:.2rem}
.dg-legend .sw.t{background:var(--title)}.dg-legend .sw.s{background:var(--suit-soft);border:2px solid var(--line)}
.dg-tl ol{list-style:none;margin:0;padding:0;position:relative;height:5.8rem;border-bottom:4px solid var(--line)}
.dg-tl li{position:absolute;left:var(--p);bottom:-.55rem;transform:translateX(-50%);width:0}
.dg-tl li::before{content:"";position:absolute;bottom:0;left:-.5rem;width:1rem;height:1rem;border-radius:50%;background:var(--suit);border:2px solid var(--line)}
.dg-tl li span{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);width:6.5rem;text-align:center;font-size:.8rem;line-height:1.25;font-weight:500}
.dg-tl li:first-child span{left:0;transform:none;text-align:left}
.dg-tl li:last-child span{left:auto;right:0;transform:none;text-align:right}
.dg-tl .ends{display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted);margin-top:.7rem}
.dg-paths{display:grid;grid-template-columns:1fr auto 1fr;gap:.75rem;align-items:center}
.dg-paths h4{margin:0 0 .3rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.dg-paths ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.dg-paths li{background:var(--suit-soft);border-radius:.4rem;padding:.35rem .55rem;font-size:.88rem}
.dg-paths .goal{border:3px solid var(--line);border-radius:50%;width:7.5rem;height:7.5rem;display:grid;place-content:center;text-align:center;padding:.5rem}
.dg-paths .goal span{font-size:.7rem;color:var(--muted)}
.dg-paths .goal b{color:var(--title);line-height:1.2}
@media (max-width:520px){.dg-paths{grid-template-columns:1fr}.dg-paths .goal{margin:0 auto}}
.dg-fade{display:flex;align-items:center;gap:.6rem;margin-top:.9rem;font-size:.8rem;color:var(--muted)}
.dg-fade i{flex:1;height:.6rem;border-radius:999px;background:linear-gradient(90deg,var(--title),var(--suit-soft))}

/* ---------- overlays ---------- */
.ov{position:fixed;inset:0;z-index:40;background:var(--bg);display:flex;flex-direction:column;overflow:auto}
.ov[hidden]{display:none}
.ov-close{border:0;background:transparent;font-size:2rem;line-height:1;width:48px;height:48px;cursor:pointer;color:var(--ink);border-radius:50%}
.ov-close:hover{background:var(--suit-soft)}
.timer-in{margin:auto;width:min(30rem,100%);padding:1rem 16px 2rem;text-align:center;position:relative}
.timer-in .ov-close{position:absolute;right:8px;top:8px}
.t-face{position:relative;width:min(80vw,22rem);aspect-ratio:1;margin:2.5rem auto 1rem}
.t-ring{width:100%;height:100%}
.t-ring-bg{fill:none;stroke:var(--suit-soft);stroke-width:8}
.t-ring-fg{fill:none;stroke:var(--line);stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset .2s linear}
.t-display{position:absolute;inset:0;display:grid;place-items:center;font:400 clamp(3rem,16vw,6rem)/1 var(--display);color:var(--title);font-variant-numeric:tabular-nums}
.ov.done .t-display,.ov.done .r-time{animation:pulse 1s ease-in-out 3}
@keyframes pulse{50%{opacity:.25}}
.t-presets{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;margin:1rem 0}
.t-presets button{border:1px solid var(--rule);background:var(--surface);border-radius:999px;padding:.45rem .9rem;min-height:40px;cursor:pointer}
.t-presets button[aria-pressed=true]{background:var(--suit-soft);border-color:var(--line);font-weight:700}
.t-ctrl{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap}
.t-ctrl button:not(.btn-main){border:2px solid var(--title);background:transparent;color:var(--title);border-radius:999px;padding:.55rem 1rem;min-height:44px;cursor:pointer;font-weight:500}
.t-hint{font-size:.85rem;color:var(--muted);margin-top:1rem}
.run{background:var(--bg)}
.r-top{display:flex;align-items:center;gap:.75rem;padding:.5rem max(16px,env(safe-area-inset-left,0px));border-bottom:.4rem solid var(--suit);background:var(--surface)}
.r-card{font:400 1rem/1.2 var(--display);text-transform:uppercase;color:var(--title)}
.r-count{font-size:.85rem;color:var(--muted)}
.r-sp{flex:1}
.r-fs{border:1px solid var(--rule);background:transparent;border-radius:999px;padding:.35rem .8rem;cursor:pointer;font-size:.85rem}
.r-main{flex:1;width:min(56rem,100%);margin:0 auto;padding:clamp(1.5rem,5vh,4rem) 16px 2rem}
.r-when{font:500 1rem/1.2 var(--body);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:0 0 .5rem}
.r-title{font:400 clamp(1.8rem,5.5vw,3.4rem)/1.1 var(--display);text-transform:uppercase;color:var(--title);margin:0 0 1.25rem;letter-spacing:0}
.r-body{font-size:clamp(1.15rem,2.6vw,1.6rem);line-height:1.5}
.r-say{background:var(--say);border-left:.4rem solid var(--say-edge);padding:.7rem 1rem;border-radius:0 .6rem .6rem 0;font-style:italic;font-size:clamp(1.3rem,3.4vw,2.1rem);line-height:1.35}
.r-timer{display:flex;align-items:center;gap:1rem;margin-top:1.5rem;flex-wrap:wrap}
.r-timer[hidden]{display:none}
.r-time{font:400 clamp(2.5rem,8vw,4.5rem)/1 var(--display);color:var(--title);font-variant-numeric:tabular-nums}
.r-foot{display:flex;align-items:center;gap:.75rem;padding:.75rem 16px calc(.75rem + env(safe-area-inset-bottom,0px));border-top:1px solid var(--rule);background:var(--surface)}
.r-foot button:not(.btn-main){border:2px solid var(--title);background:transparent;color:var(--title);border-radius:999px;padding:.55rem 1.1rem;min-height:44px;cursor:pointer;font-weight:500}
.r-foot button:disabled{opacity:.35;cursor:default}
.r-dots{flex:1;display:flex;justify-content:center;gap:.35rem;flex-wrap:wrap}
.r-dots span{width:.65rem;height:.65rem;border-radius:50%;background:var(--rule)}
.r-dots span.past{background:var(--suit)}
.r-dots span.on{background:var(--line);transform:scale(1.35)}

/* ---------- index ---------- */
.intro{padding-block:1.5rem .5rem}
.intro h1{color:#305f82}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .intro h1{color:#8fc3ec}}
.intro-actions{display:flex;flex-wrap:wrap;gap:.5rem}
.dealt{margin-top:1rem;background:var(--surface);border:1px solid var(--rule);border-top:.5rem solid var(--suit);border-radius:var(--r);padding:1rem 1.1rem}
.dealt.flip{animation:deal .45s ease-out}
@keyframes deal{from{transform:rotateY(80deg) scale(.95);opacity:.2}to{transform:none;opacity:1}}
.d-idx{font:500 .75rem/1 var(--body);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:0 0 .4rem}
.d-name{font:400 1.6rem/1.1 var(--display);text-transform:uppercase;color:var(--ink);margin:0 0 .25rem}
.d-tag{font:400 .9rem/1.2 var(--display);text-transform:uppercase;color:var(--muted)}
.filters{position:sticky;top:0;z-index:5;background:var(--bg);padding:.75rem 0 .25rem;margin-top:1rem;border-bottom:1px solid var(--rule)}
.filters input{width:100%;font:inherit;padding:.65rem .9rem;border:1px solid var(--rule);border-radius:999px;background:var(--surface);color:var(--ink);min-height:44px}
.chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.5rem}
.chip{display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--rule);background:var(--surface);border-radius:999px;padding:.35rem .75rem;min-height:36px;cursor:pointer;font-size:.88rem}
.chip i{width:.7rem;height:.7rem;border-radius:50%;background:var(--suit)}
.chip[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.count{font-size:.85rem;margin:.4rem 0 0}
.suitblock{margin-top:1.5rem;border-top:.4rem solid var(--suit);padding-top:1rem}
.suitblock[hidden]{display:none}
.suitblock h2{color:var(--title)}
ul.cards{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:.5rem}
ul.cards li[hidden]{display:none}
ul.cards a{display:block;height:100%;padding:.65rem .85rem;background:var(--surface);border:1px solid var(--rule);border-radius:.5rem;text-decoration:none;color:var(--ink)}
ul.cards a:hover,ul.cards a:focus-visible{border-color:var(--suit)}
ul.cards .idx{font:500 .75rem/1 var(--body);color:var(--muted);display:flex;justify-content:space-between;margin-bottom:.3rem}
ul.cards .nm{font-weight:700;color:var(--title);display:block}
ul.cards .tg{display:block;font-size:.82rem;color:var(--muted);line-height:1.3;margin-top:.15rem}
.tick{display:none;font-style:normal}
.is-tried .tick{display:inline}
.is-tried .tick::after{content:"✓ Tried";color:var(--head);font-weight:700}
.suitdot::before{content:"";display:inline-block;width:.75rem;height:.75rem;border-radius:50%;background:var(--suit);margin-right:.4rem;vertical-align:baseline}
ol.plain{padding-left:1.3rem;margin:0;display:grid;gap:.45rem}

/* ---------- print ---------- */
@media print{
  .band,.actions,.jump,.pager,.ov,footer,.h-row button,.reflect .tried,.reflect textarea,.note-l,.note-saved,.skip,.tabs [role=tablist]{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  header.card{border-bottom:0;padding-top:.5rem}
  .tabs [role=tabpanel][hidden]{display:block!important}
  .ex-panel{margin-bottom:.4rem;border-left-width:3px}
  section{padding-top:.9rem;break-inside:avoid-page}
  figure.dg,.lflow{break-inside:avoid}
  a{color:#000;text-decoration:none}
  .res a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;word-break:break-all}
}