/* Phone reels (reels.js). Family colour = --fc (the catalog's --d-<domain>); white logo tiles; ~20% text. */
#reels{position:fixed;inset:0;z-index:9000;background:#111;color:#fff;display:flex;flex-direction:column;height:100dvh;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
#reels[hidden]{display:none}
html.reels-on,html.reels-on body{overflow:hidden}
#reels .rb{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:calc(env(safe-area-inset-top) + 8px) 12px 8px;background:linear-gradient(#0008,#0000);pointer-events:none}
#reels .rb-path{font-size:12px;font-weight:600;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#reels .rb-full{pointer-events:auto;font:600 11px/1 system-ui,sans-serif;color:#fff;background:#0006;border:1px solid #fff6;border-radius:999px;padding:6px 10px}
#reels .rl-track{flex:1;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;touch-action:pan-y;outline:none;scrollbar-width:none}
#reels .rl-track::-webkit-scrollbar{display:none}
#reels .rc{position:relative;height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;box-sizing:border-box;display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top) + 44px) 18px calc(env(safe-area-inset-bottom) + 34px);
  background:linear-gradient(165deg,var(--fc) 0%,color-mix(in srgb,var(--fc) 55%,#000) 100%);overflow:hidden;cursor:pointer;user-select:none}
#reels .rc-top{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.04em;text-transform:uppercase;opacity:.8;margin-bottom:12px}
#reels .rc-head{display:flex;align-items:center;gap:14px}
#reels .rc-name{font-size:20px;font-weight:800;line-height:1.15}
#reels .rc-title{font-size:13px;opacity:.85;margin-top:3px;line-height:1.3}
/* logo tiles */
#reels .rt{flex:none;display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:16px;box-shadow:0 4px 14px #0004;width:56px;height:56px}
#reels .rt img{width:72%;height:72%;object-fit:contain}
#reels .rt b{color:#222;font:800 12px/1.05 system-ui,sans-serif;text-align:center;padding:2px;word-break:break-word}
#reels .rt.lg{width:72px;height:72px;border-radius:20px}
#reels .rt.sm{width:46px;height:46px;border-radius:12px}
/* picture area: most of the card */
#reels .rc-pic{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;margin:16px 0 10px;background:#ffffff14;border-radius:18px;padding:16px;overflow:hidden}
#reels .rc-text{font-size:17px;line-height:1.35;font-weight:600;margin:0 46px 0 0}
#reels .rc-text b{color:#ffd54a;font-weight:800}
#reels .rc-like{position:absolute;right:14px;bottom:calc(env(safe-area-inset-bottom) + 40px);width:44px;height:44px;border-radius:50%;border:0;background:#0005;color:#fff;font-size:24px;line-height:44px;padding:0}
#reels .rc-like.on{color:#ff5a7a;background:#fff2}
#reels .rc-hint{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 10px);text-align:center;font-size:11px;opacity:.7}
/* NOT */
#reels .rp-not{display:flex;flex-direction:column;gap:18px}
#reels .rp-row{display:flex;align-items:center;gap:10px}
#reels .rp-line{flex:1;height:0;border-top:4px dashed currentColor;opacity:.9}
#reels .rp-row.bad{color:#ff6b6b}#reels .rp-row.good{color:#7dffa1}
#reels .rp-line.ok{border-top-style:solid}
#reels .rp-badge{flex:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:900;background:currentColor}
#reels .rp-badge.x::first-letter,#reels .rp-badge.ok::first-letter{color:#fff}
#reels .rp-badge.x{color:#e5484d}#reels .rp-badge.x{background:#e5484d;color:#fff}
#reels .rp-badge.ok{background:#2fa85a;color:#fff}
#reels .rp-cap{font-size:13px;opacity:.9;text-align:right;margin-top:-8px}
/* conditions */
#reels .rp-cond{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:15px;line-height:1.3}
#reels .rp-cond li{display:flex;gap:10px;align-items:flex-start}
#reels .rp-cond i{flex:none;width:22px;height:22px;border-radius:50%;font-style:normal;font-weight:900;font-size:13px;display:flex;align-items:center;justify-content:center}
#reels .rp-cond li.ok i{background:#2fa85a}#reels .rp-cond li.no i{background:#e5484d}
#reels .rp-cond li.no{opacity:.85}
#reels .rp-ans{display:flex;align-items:center;gap:12px;margin-top:16px;padding-top:14px;border-top:2px solid #fff5;font-size:16px;font-weight:800}
/* pattern: app's patternSVG re-coloured for a dark card */
#reels .rp-pat svg{width:100%;height:auto;max-height:100%}
#reels .rp-pat{display:flex;justify-content:center}
/* connection */
#reels .rp-link{display:flex;align-items:center;justify-content:center;gap:8px}
#reels .rp-link .rt{width:76px;height:76px;border-radius:20px}
#reels .rp-arrow{flex:1;max-width:150px;display:flex;flex-direction:column;align-items:center;gap:6px}
#reels .rp-arrow i{display:block;width:100%;height:6px;border-radius:3px;background:var(--m,#fff);position:relative}
#reels .rp-arrow i::after{content:"";position:absolute;right:-4px;top:-7px;border:10px solid transparent;border-left:14px solid var(--m,#fff);border-right:0}
#reels .rp-arrow em{font:700 11px/1 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em;font-style:normal}
#reels .rp-link.none .rp-arrow i{background:repeating-linear-gradient(90deg,#e5484d 0 10px,transparent 10px 16px)}
#reels .rp-link.none .rp-arrow i::after{display:none}
#reels .rp-link.none .rp-arrow em{color:#ffb3b3}
/* reopen button (phones, when reels are closed) */
#reels-open{position:fixed;right:12px;bottom:calc(env(safe-area-inset-bottom) + 12px);z-index:8000;font:700 13px/1 system-ui,sans-serif;color:#fff;background:#3a78ad;border:0;border-radius:999px;padding:11px 15px;box-shadow:0 4px 14px #0005}
html.reels-on #reels-open{display:none}
@media (min-width:701px){#reels .rc{max-width:460px;margin:0 auto}#reels .rl-track{background:#111}}
#reels .rp-not{gap:34px}#reels .rp-not .rt.sm{width:64px;height:64px;border-radius:16px}
/* lab: the lab's own animated picture + a switch that flips by itself + the numbers it changes */
#reels .rp-lab{display:flex;flex-direction:column;gap:12px}
#reels .rc-lab .rc-pic{padding:10px}
#reels .lb-fig{background:var(--panel,#fff);border-radius:12px;padding:4px;box-shadow:0 4px 14px #0004}
#reels .lb-fig svg{display:block;width:100%;height:auto}
#reels .lb-sw{display:flex;align-items:center;gap:12px;background:#fff;color:#111;border-radius:14px;padding:10px 14px;box-shadow:0 4px 14px #0004;transition:box-shadow .3s}
#reels .lb-sw.after{box-shadow:0 0 0 3px #ffd54a,0 4px 14px #0004}
#reels .lb-sw .lb-ic{font-size:24px;line-height:1;color:var(--fc)}
#reels .lb-box{flex:none;width:26px;height:26px;border:3px solid #444;border-radius:6px;position:relative;transition:background .2s,border-color .2s}
#reels .lb-sw.tick .lb-box{background:var(--fc);border-color:var(--fc)}
#reels .lb-sw.tick .lb-box::after{content:"";position:absolute;left:6px;top:1px;width:7px;height:13px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg)}
#reels .lb-sw span:nth-child(2){display:flex;flex-direction:column;flex:1;min-width:0;font-size:15px;line-height:1.2}
#reels .lb-sw em{font-style:normal;font-weight:700;font-size:10px;letter-spacing:.06em;text-transform:uppercase;opacity:.6;margin-bottom:2px}
#reels .lb-ph{font:700 10px/1 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em;padding:4px 7px;border-radius:999px;background:#eee;color:#555}
#reels .lb-sw.after .lb-ph{background:#ffd54a;color:#111}
#reels .lb-k{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px}
#reels .lb-k li{display:flex;flex-direction:column;gap:3px;background:#0002;border-radius:12px;padding:8px 10px}
#reels .lk-l{font-size:10px;letter-spacing:.04em;text-transform:uppercase;opacity:.8;line-height:1.2}
#reels .lk-v{font-size:17px;font-weight:800;line-height:1.15}
#reels .lk-v.good{color:#8dffb0}#reels .lk-v.bad{color:#ffb0b0}#reels .lk-v.warn{color:#ffe08a}
#reels .lk-v.flash{animation:lkflash .6s ease}
@keyframes lkflash{0%{transform:scale(1.25)}100%{transform:scale(1)}}
/* lab picture: the whole picture, still, edge to edge; labels ~1.35× (box text wraps sooner in reels.js) */
#reels .rc-lab .rc-pic{padding:8px 0 10px;background:none}
#reels .lb-fig{border-radius:10px;padding:2px 0;margin:0}
#reels .lb-fig svg{width:100%;height:auto}
#reels .lb-fig .lbt{font-size:19px}#reels .lb-fig .lbs{font-size:15.5px}
#reels .rc-lab .lb-sw,#reels .rc-lab .lb-k{margin:0 2px}
/* mixed-conditions cards: the checklist panel fits its content and sits centred (no big empty box) */
#reels .rc-cond .rc-pic{flex:0 1 auto;margin:auto 0;padding:20px 18px}
#reels .rc-cond .rp-cond{font-size:18px;gap:13px}
#reels .rc-cond .rp-cond i{width:26px;height:26px;font-size:14px}
#reels .rb-fb{margin-left:auto}