/* ================================================================ COPD Wheel — standalone web app Palette drawn from the IPCRG wheel artwork. ================================================================ */ :root { --ink: #163a4e; --ink-soft: #4b6a7a; --brand: #175b75; /* wheel centre blue */ --brand-deep: #0f4258; --accent: #2a8fb8; --accent-text: #1c7195; /* darker accent for small text: ≥4.5:1 on white */ --paper: #f4f6f7; --card: #ffffff; --line: #dce5e9; --seg-yellow: #f9e27d; --seg-blue: #b8d4ea; --seg-pink: #f5c6c6; --seg-purple: #c9a8d4; --seg-green: #77c17c; --shadow-lg: 0 24px 60px -20px rgba(15, 66, 88, 0.35); --shadow-sm: 0 2px 10px -2px rgba(15, 66, 88, 0.18); --radius: 18px; --header-h: 68px; font-size: 16px; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: "Lato", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; color: var(--ink); background: radial-gradient(1200px 700px at 85% -10%, rgba(42, 143, 184, 0.10), transparent 60%), radial-gradient(900px 600px at -10% 110%, rgba(201, 168, 212, 0.16), transparent 60%), var(--paper); display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } /* ---------------- header ---------------- */ .app-header { display: flex; align-items: center; gap: 20px; padding: 10px 22px; min-height: var(--header-h); /* the header is a flex item of ; without this, engines that resolve the body at viewport height COMPRESS the wrapped header and its rows spill over the page content (seen on Android Chrome/Samsung Internet) */ flex-shrink: 0; /* solid by default: content scrolling beneath must never show through */ background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; } .app-footer { flex-shrink: 0; } /* frosted-glass variant only where genuinely supported, desktop only */ @media (min-width: 901px) { @supports (backdrop-filter: blur(10px)) { .app-header { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); } } } .brand h1 { margin: 0; font-size: 1.35rem; letter-spacing: 0.01em; color: var(--brand-deep); line-height: 1.1; } .brand-sub { margin: 2px 0 0; font-size: 0.74rem; color: var(--ink-soft); letter-spacing: 0.04em; text-transform: uppercase; } .flip-target { opacity: 0.75; font-weight: 500; } .side-switch { display: flex; margin-inline: auto; background: #e6edf0; border-radius: 999px; padding: 4px; gap: 4px; } .side-switch button { appearance: none; border: 0; background: transparent; font: inherit; font-weight: 600; color: var(--ink-soft); padding: 8px 18px; border-radius: 999px; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: background 0.25s, color 0.25s, box-shadow 0.25s; } .side-switch button:hover { color: var(--brand-deep); } .side-switch button.active { background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); } .side-letter { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); border: 1.5px solid currentColor; font-size: 0.78rem; } .side-switch button:not(.active) .side-letter { background: transparent; } .header-actions { display: flex; align-items: center; gap: 10px; } .lang-menu { display: flex; align-items: center; gap: 6px; color: var(--ink-soft); background: #e6edf0; border-radius: 999px; padding: 6px 12px; cursor: pointer; } .lang-menu svg { width: 17px; height: 17px; flex: 0 0 auto; } .lang-menu select { appearance: none; border: 0; background: transparent; font: inherit; font-weight: 600; font-size: 0.85rem; color: var(--ink-soft); cursor: pointer; outline: none; max-width: 90px; } .lang-menu:hover { color: var(--brand-deep); } .lang-menu:hover select { color: var(--brand-deep); } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .btn-feedback { font-size: 0.85rem; font-weight: 600; color: var(--brand); text-decoration: none; border: 1.5px solid var(--brand); padding: 7px 14px; border-radius: 999px; transition: background 0.2s, color 0.2s; white-space: nowrap; } .btn-feedback:hover { background: var(--brand); color: #fff; } /* "Install app" — appears only when installation is actually possible */ .btn-install { display: inline-flex; align-items: center; gap: 7px; appearance: none; cursor: pointer; font: inherit; font-size: 0.85rem; font-weight: 600; color: #fff; background: var(--brand); border: 1.5px solid var(--brand); padding: 7px 14px; border-radius: 999px; transition: background 0.2s, transform 0.15s; white-space: nowrap; } .btn-install:hover { background: var(--brand-deep); transform: translateY(-1px); } .btn-install svg { width: 15px; height: 15px; } .btn-install[hidden] { display: none; } /* iOS add-to-home-screen instructions callout */ .install-tip { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 70; background: var(--brand-deep); color: #fff; max-width: min(420px, calc(100vw - 32px)); padding: 16px 18px; border-radius: 14px; box-shadow: var(--shadow-lg); text-align: center; } .install-tip p { margin: 0 0 12px; font-size: 0.92rem; line-height: 1.5; } .install-tip .btn-primary { background: #fff; color: var(--brand-deep); padding: 8px 22px; } .icon-btn { appearance: none; border: 0; background: transparent; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--ink-soft); cursor: pointer; transition: background 0.2s, color 0.2s; } .icon-btn:hover, .icon-btn.active { background: #e6edf0; color: var(--brand-deep); } .icon-btn svg { width: 22px; height: 22px; } /* ---------------- layout ---------------- */ .app-main { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 480px); gap: 0; align-items: stretch; max-width: 1680px; width: 100%; margin: 0 auto; padding: 18px 22px 8px; } .wheel-area { display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; min-width: 0; padding: 6px 12px; } .wheel-frame { position: relative; width: min(100%, calc(100vh - var(--header-h) - 190px)); width: min(100%, calc(100dvh - var(--header-h) - 190px)); max-width: 860px; aspect-ratio: 1; display: grid; place-items: center; } /* live label of the hovered / selected wheel element */ .hover-title { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; max-width: min(92%, 620px); margin-bottom: 8px; padding: 8px 22px; border-radius: 999px; background: #e8eef1; color: var(--ink-soft); font-size: 0.92rem; font-weight: 600; text-align: center; line-height: 1.25; transition: background 0.2s, color 0.2s, box-shadow 0.2s; } .hover-title.active { background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); } .hover-title.bump { animation: title-bump 0.28s ease-out; } @keyframes title-bump { 0% { transform: translateY(3px) scale(0.985); } 100% { transform: none; } } /* rotate buttons */ .rotate-btn { position: absolute; z-index: 5; top: 6%; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--brand); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform 0.2s, background 0.2s; } .rotate-btn:hover { background: var(--brand-deep); transform: scale(1.07); } .rotate-btn:active { transform: scale(0.96); } .rotate-btn svg { width: 26px; height: 26px; } .rotate-btn-left { left: 0; } .rotate-btn-right { right: 0; } /* ---------------- wheel ---------------- */ .wheel-stage { position: relative; width: 100%; height: 100%; perspective: 2200px; } .wheel { position: absolute; inset: 0; border-radius: 50%; transition: transform 0.65s cubic-bezier(0.5, 0, 0.28, 1), opacity 0.3s 0.15s; transform-style: preserve-3d; backface-visibility: hidden; } .wheel-a { transform: rotateY(0deg); } .wheel-b { transform: rotateY(-180deg); opacity: 0; pointer-events: none; } .wheel-flipper.show-b .wheel-a { transform: rotateY(180deg); opacity: 0; pointer-events: none; } .wheel-flipper.show-b .wheel-b { transform: rotateY(0deg); opacity: 1; pointer-events: auto; } .wheel-flipper:not(.show-b) .wheel-a { opacity: 1; pointer-events: auto; } .wheel::after { /* soft drop shadow under the disc */ content: ""; position: absolute; inset: 2.5%; border-radius: 50%; box-shadow: 0 30px 70px -25px rgba(15, 66, 88, 0.45); z-index: -1; } .wheel-rotor { position: absolute; inset: 0; will-change: transform; cursor: grab; touch-action: none; } .wheel-rotor.dragging { cursor: grabbing; } .wheel-rotor > img { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; } /* inner dials: full-size rotor layers whose visible/interactive area is clipped to the inner circle, so the ring beneath stays draggable. clip-path circle() percentages resolve against the box side for squares. */ .wheel-rotor-inner.rotor-inner-a { clip-path: circle(32.3% at 50% 50%); } .wheel-rotor-inner.rotor-inner-b { clip-path: circle(22% at 50% 50%); } /* inner wheel artwork of side A: 64.3% of full wheel diameter */ .wheel-center-fixed { position: absolute; left: 50%; top: 50%; width: 64.3%; aspect-ratio: 1; transform: translate(-50%, -50%); } .wheel-center-fixed .inner-art { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; } /* (Edition 1.4 artwork prints the exacerbation wording and the ICS QR directly in side-a-inner — the former overlay images are gone) */ /* hotspot overlays */ svg.hotspots { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; /* the svg box itself must never block the layers beneath it — only the hotspot paths take pointer events */ pointer-events: none; } .hotspot { fill: transparent; stroke: transparent; stroke-width: 3; cursor: pointer; transition: fill 0.15s, stroke 0.15s; outline: none; pointer-events: fill; /* transparent fill still hit-tests */ } /* hover: section pales + clear outline + soft glow, signalling it is clickable */ .hotspot:hover, .hotspot:focus-visible { fill: rgba(255, 255, 255, 0.45); stroke: var(--brand); stroke-width: 4; filter: drop-shadow(0 0 10px rgba(23, 91, 117, 0.45)); } .hotspot.selected { fill: rgba(23, 91, 117, 0.15); stroke: var(--brand); stroke-width: 5; filter: drop-shadow(0 0 12px rgba(23, 91, 117, 0.55)); } .hotspot:focus-visible { stroke: var(--accent); stroke-width: 6; } svg.hotspots.debug .hotspot { fill: rgba(42, 143, 184, 0.12); stroke: rgba(200, 40, 90, 0.6); stroke-width: 2; } /* flip + hint row */ .flip-btn { margin-top: 14px; appearance: none; border: 0; display: inline-flex; align-items: center; gap: 10px; background: var(--brand); color: #fff; font: inherit; font-weight: 600; padding: 11px 22px; border-radius: 999px; cursor: pointer; box-shadow: var(--shadow-sm); transition: background 0.2s, transform 0.2s; } .flip-btn:hover { background: var(--brand-deep); transform: translateY(-1px); } .flip-btn svg { width: 21px; height: 21px; } .wheel-hint { margin: 10px 0 0; font-size: 0.8rem; color: var(--ink-soft); } /* ---------------- panel ---------------- */ .panel { position: relative; min-width: 0; } .panel-inner { position: sticky; top: calc(var(--header-h) + 14px); height: calc(100vh - var(--header-h) - 96px); height: calc(100dvh - var(--header-h) - 96px); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; } /* drag handle strip — only shown on the mobile bottom sheet */ .panel-grip { display: none; appearance: none; border: 0; background: transparent; width: 100%; padding: 10px 0 6px; cursor: grab; touch-action: none; flex: 0 0 auto; } .panel-grip::before { content: ""; display: block; width: 44px; height: 5px; margin: 0 auto; border-radius: 999px; background: var(--line); } .panel-inner.grip-dragging { transition: none !important; } .panel-close { position: absolute; top: 12px; right: 12px; z-index: 2; appearance: none; border: 0; width: 36px; height: 36px; border-radius: 50%; background: #eef3f5; color: var(--ink-soft); display: grid; place-items: center; cursor: pointer; transition: background 0.2s, color 0.2s; } .panel-close:hover { background: var(--brand); color: #fff; } .panel-close svg { width: 17px; height: 17px; } .panel-scroll { overflow-y: auto; padding: 26px 28px 28px; scrollbar-width: thin; } .panel-kicker { margin: 0 0 6px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); } .panel-title { margin: 0 0 14px; font-size: 1.42rem; line-height: 1.22; color: var(--brand-deep); padding-right: 30px; } .panel-body { font-size: 0.95rem; line-height: 1.62; color: var(--ink); } .panel-body p { margin: 0 0 12px; } .panel-body ul { margin: 0 0 12px; padding-left: 20px; } .panel-body li { margin-bottom: 6px; } .panel-body a { color: var(--accent-text); font-weight: 600; } .panel-body a:hover { color: var(--brand-deep); } .panel-body .dialogue { background: #f2f7f9; border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; padding: 12px 14px; } .panel-body .try-saying { background: #fbf6e7; border-left: 3px solid #e4c65b; border-radius: 0 10px 10px 0; padding: 12px 14px; } .panel-body .copd-acronym { list-style: none; padding: 0; } .panel-body .copd-acronym li { padding: 8px 12px; border-radius: 10px; background: #f6f8f9; margin-bottom: 6px; } .panel-figure { margin: 14px 0; } .panel-figure img { width: 100%; border-radius: 12px; border: 1px solid var(--line); } /* enlarged QR code inside a popup */ .panel-qr { margin: 16px 0; text-align: center; } .panel-qr img { width: min(180px, 60%); padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; image-rendering: crisp-edges; image-rendering: -webkit-optimize-contrast; } .panel-qr figcaption { margin-top: 8px; font-size: 0.92rem; color: var(--ink-soft); } .panel-resources { margin-top: 22px; } .panel-resources h3 { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 10px; } .resource-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .resource-card { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #f6f8f9; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--ink); font-size: 0.8rem; font-weight: 600; line-height: 1.25; transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s; } a.resource-card:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); transform: translateY(-1px); } .resource-thumb { flex: 0 0 44px; height: 44px; border-radius: 8px; overflow: hidden; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; } .resource-thumb img { width: 100%; height: 100%; object-fit: cover; } .resource-ext { position: absolute; top: 8px; right: 8px; width: 13px; height: 13px; color: var(--ink-soft); opacity: 0; transition: opacity 0.2s; } a.resource-card:hover .resource-ext { opacity: 1; } /* staggered rise-in of freshly shown panel content */ .panel-scroll.content-in > * { animation: rise-in 0.4s cubic-bezier(0.2, 0.7, 0.3, 1) both; } .panel-scroll.content-in > *:nth-child(2) { animation-delay: 0.05s; } .panel-scroll.content-in > *:nth-child(3) { animation-delay: 0.10s; } .panel-scroll.content-in > *:nth-child(4) { animation-delay: 0.16s; } @keyframes rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .panel-scroll.content-in .resource-card { animation: rise-in 0.35s cubic-bezier(0.2, 0.7, 0.3, 1) both; } .panel-scroll.content-in .resource-card:nth-child(1) { animation-delay: 0.18s; } .panel-scroll.content-in .resource-card:nth-child(2) { animation-delay: 0.24s; } .panel-scroll.content-in .resource-card:nth-child(3) { animation-delay: 0.30s; } .panel-scroll.content-in .resource-card:nth-child(4) { animation-delay: 0.36s; } .panel-scroll.content-in .resource-card:nth-child(n+5) { animation-delay: 0.42s; } /* sound toggle icon states */ #sound-toggle .icon-sound-off { display: none; } #sound-toggle.muted .icon-sound-on { display: none; } #sound-toggle.muted .icon-sound-off { display: block; } /* ---------------- entrance choreography ---------------- */ body.entering .wheel-frame { opacity: 0; transform: scale(0.94) rotate(-5deg); } body.entering .panel-inner, body.entering .hover-title, body.entering .flip-btn { opacity: 0; transform: translateY(14px); } body.entering .app-header { opacity: 0; transform: translateY(-10px); } body.entered .wheel-frame, body.entered .panel-inner, body.entered .hover-title, body.entered .flip-btn, body.entered .app-header { opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.25, 1); } body.entered .panel-inner { transition-delay: 0.25s; } body.entered .flip-btn { transition-delay: 0.18s; } body.entered .hover-title { transition-delay: 0.12s; } /* ---------------- footer ---------------- */ .app-footer { padding: 12px 24px 16px; text-align: center; color: var(--ink-soft); font-size: 0.72rem; line-height: 1.5; } .app-footer p { margin: 2px 0; } .app-footer a { color: var(--accent-text); } .grants { opacity: 0.85; } .build-stamp { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #e6edf0; color: var(--ink-soft); font-size: 0.66rem; } /* ---------------- tutorial ---------------- */ .tutorial-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(15, 50, 66, 0.55); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity 0.3s; } .tutorial-overlay.open { opacity: 1; pointer-events: auto; } .tutorial-card { width: min(480px, calc(100vw - 40px)); background: var(--card); border-radius: 22px; box-shadow: var(--shadow-lg); padding: 26px 28px 24px; text-align: center; transform: translateY(14px) scale(0.98); transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2); } .tutorial-overlay.open .tutorial-card { transform: none; } .tutorial-art { width: 130px; height: 130px; margin: -70px auto 10px; border-radius: 50%; overflow: hidden; box-shadow: var(--shadow-lg); border: 5px solid #fff; background: #fff; } .tutorial-art img { width: 100%; height: 100%; animation: tut-spin 40s linear infinite; } @keyframes tut-spin { to { transform: rotate(360deg); } } .tutorial-kicker { margin: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); } .tutorial-card h2 { margin: 6px 0 8px; color: var(--brand-deep); font-size: 1.3rem; } .tutorial-body { margin: 0 auto 16px; max-width: 36ch; color: var(--ink-soft); line-height: 1.55; min-height: 3.1em; } .tutorial-dots { display: flex; justify-content: center; gap: 2px; margin-bottom: 18px; } /* the visible dot is a 9px gradient circle inside a ≥24px hit area */ .tutorial-dots .dot { appearance: none; border: 0; padding: 0; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at center, var(--line) 0 4.5px, transparent 5px); cursor: pointer; transition: background 0.2s, transform 0.2s; } .tutorial-dots .dot:hover { background: radial-gradient(circle at center, var(--accent) 0 4.5px, transparent 5px); } .tutorial-dots .dot.active { background: radial-gradient(circle at center, var(--brand) 0 5.5px, transparent 6px); } .tutorial-actions [data-action="back"]:disabled { opacity: 0.35; cursor: default; } .tutorial-actions { display: flex; justify-content: center; gap: 12px; } .btn-primary { appearance: none; border: 0; background: var(--brand); color: #fff; font: inherit; font-weight: 600; padding: 11px 26px; border-radius: 999px; cursor: pointer; transition: background 0.2s; } .btn-primary:hover { background: var(--brand-deep); } .btn-ghost { appearance: none; border: 0; background: transparent; color: var(--ink-soft); font: inherit; font-weight: 600; padding: 11px 16px; border-radius: 999px; cursor: pointer; } .btn-ghost:hover { color: var(--brand-deep); background: #eef3f5; } /* ---------------- responsive ---------------- */ @media (max-width: 1100px) { .app-main { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); } } @media (max-width: 900px) { /* the wrapped 3-row header must not stay sticky/translucent on phones: scrolled content (title chip, wheel) would show through beneath it */ .app-header { flex-wrap: wrap; gap: 10px; padding: 10px 14px; position: static; background: #fff; backdrop-filter: none; } .brand h1 { font-size: 1.15rem; } .side-switch { order: 3; width: 100%; justify-content: center; margin: 0; } /* admin pages */ .side-switch button { flex: 1; justify-content: center; } .header-actions { margin-left: auto; } .btn-feedback { display: none; } /* install matters most on phones — keep it, slightly tighter */ .btn-install { padding: 6px 11px; font-size: 0.8rem; } .app-main { grid-template-columns: 1fr; padding: 10px 10px 0; } .wheel-frame { width: min(100%, 92vw); } .rotate-btn { width: 44px; height: 44px; top: 2%; } /* bottom sheet panel — anchored with flex against the full viewport so the height cap is a plain %, which every browser honours (no dvh required and the ✕ can never leave the screen) */ .panel { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; justify-content: flex-end; pointer-events: none; } .panel-inner { position: relative; top: auto; height: auto; max-height: 78%; border-radius: 22px 22px 0 0; transform: translateY(105%); transition: transform 0.38s cubic-bezier(0.3, 0.9, 0.3, 1); pointer-events: auto; } .panel.open .panel-inner { transform: none; } .panel-scroll { padding: 6px 20px 26px; } .resource-grid { grid-template-columns: 1fr 1fr; } /* drag handle: pull down to dismiss */ .panel-grip { display: block; } .panel-close { top: 16px; width: 40px; height: 40px; } /* keep the sheet content above the home indicator on notched phones */ .panel-scroll { padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px)); } .app-footer { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } } @media (max-width: 520px) { .resource-grid { grid-template-columns: 1fr; } .panel-title { font-size: 1.2rem; } .flip-btn { padding: 10px 18px; } .wheel-hint { font-size: 0.72rem; } /* keep the affordance hint, just smaller */ } /* desktop: panel closed state just dims (panel always docked) */ @media (min-width: 901px) { .panel-inner { transition: opacity 0.25s, transform 0.25s; } .panel:not(.open) .panel-inner { opacity: 0; transform: translateX(14px); pointer-events: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ---------------- print: guidance panel as a clean handout ---------------- */ @media print { body { background: #fff; display: block; min-height: 0; } .app-header .header-actions, .rotate-btn, .flip-btn, .wheel-hint, .hover-title, .panel-close, .panel-grip, .build-stamp, #tutorial { display: none !important; } .app-main { display: block; padding: 0; } .app-header { position: static; box-shadow: none; border-bottom: 1px solid #ccc; } /* a popup is open → print it as a handout and skip the interactive wheel */ body:has(.panel.open) .wheel-area { display: none; } body:not(:has(.panel.open)) .panel { display: none; } .panel { position: static; } .panel-inner { position: static; opacity: 1 !important; transform: none !important; box-shadow: none; max-height: none; border: 0; } .panel-scroll { overflow: visible; max-height: none; padding: 12px 0; } /* show where links go on paper */ .panel-body a[href^="http"]::after, .resource-card[href]::after { content: " (" attr(href) ")"; font-size: 0.78em; color: #555; word-break: break-all; } } /* ---------------- keyboard focus (hotspots have their own ring) ---------------- */ .icon-btn:focus-visible, .flip-btn:focus-visible, .rotate-btn:focus-visible, .btn-feedback:focus-visible, .lang-menu select:focus-visible, .panel-close:focus-visible, .panel-grip:focus-visible, .btn-primary:focus-visible, .btn-ghost:focus-visible, .tutorial-dots .dot:focus-visible, .resource-card:focus-visible, .app-footer a:focus-visible, .panel-body a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }