/* PodcastHub Design Lab · shell (v0.1). Phone-first; every option sits in a 390px column. */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--canvas);color:var(--fg);font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
body{margin:0;min-height:100dvh}
[dir="rtl"] body{font-family:var(--font-arabic)}
h1,h2,h3{font-family:var(--font-display);font-stretch:var(--font-display-stretch);font-weight:700;letter-spacing:-0.01em;margin:0}
h1{font-size:var(--fs-h1);line-height:var(--lh-h1)} h2{font-size:var(--fs-h2);line-height:var(--lh-h2)} h3{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:600}
.lab-bar{position:sticky;top:0;z-index:50;display:flex;gap:6px;align-items:center;flex-wrap:nowrap;overflow-x:auto;padding:8px 12px;background:var(--glass-fill);backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));border-bottom:1px solid var(--glass-stroke)}
.lab-bar .title{font-family:var(--font-display);font-stretch:var(--font-display-stretch);font-weight:700;font-size:16px;margin-inline-end:auto;white-space:nowrap}
.lab-bar button{min-height:var(--t-min);padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);color:var(--fg);font:600 var(--fs-ui)/1 var(--font-body);cursor:pointer}
.lab-bar button[aria-pressed="true"]{background:var(--primary-fill);color:var(--primary-on);border-color:transparent}
.options{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(390px,100%),390px));gap:24px;justify-content:center;padding:16px 0 80px}
@media (min-width:440px){.options{padding:24px 16px 80px}}
.option{width:min(390px,100%);display:flex;flex-direction:column;gap:12px}
.option .frame{width:100%;min-height:360px;padding:20px 16px;background:var(--canvas);border:1px solid var(--line);border-radius:28px;overflow:hidden;position:relative}
.option .label{font-size:var(--fs-ui);line-height:1.4;color:var(--fg-muted);padding:0 4px}
.option .label b{color:var(--fg);display:block;font-size:var(--fs-h3)}
.option .label code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;color:var(--fg-subtle)}
.card{background:var(--surface);border:1px solid var(--line-subtle);border-radius:var(--r-card);box-shadow:var(--shadow-1);padding:16px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2px solid var(--line-focus);outline-offset:2px;border-radius:inherit;transition:outline-color var(--d-120)}
/* the hex tap ripple (rules 29–34) */
[data-ripple]{position:relative;overflow:hidden;isolation:isolate}
.ph-ripple{position:absolute;pointer-events:none;width:var(--rs);height:calc(var(--rs) / var(--hex-ratio));left:var(--rx);top:var(--ry);transform:translate(-50%,-50%) scale(0.2);opacity:0.35;clip-path:var(--hex-clip);background:transparent;border:0}
.ph-ripple::before{content:"";position:absolute;inset:2px;clip-path:var(--hex-clip);background:var(--canvas-ripple-mask, transparent)}
.ph-ripple{background:var(--ripple-color)}
.ph-ripple.run{animation:ph-ripple 520ms var(--ease-brand) forwards}
.ph-ripple.run.second{animation-delay:90ms}
@keyframes ph-ripple{to{transform:translate(-50%,-50%) scale(1.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.ph-ripple{display:none}}