/*! UX by Example — © 2026 Chris Daniels. All rights reserved. */
.judge{margin-block:var(--space-xl);padding:var(--space-l);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);box-shadow:var(--shadow-s)}.judge__count{color:var(--accent-strong)}.judge__prompt{font-size:var(--step-2)}.judge__options{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-m);margin-block-start:var(--space-l)}@media (max-width:34rem){.judge__options{grid-template-columns:1fr}}.judge__option{display:flex;flex-direction:column;gap:var(--space-s);align-items:stretch;padding:var(--space-s);background:var(--paper);border:1.5px solid var(--line);border-radius:var(--radius-m);transition:border-color .15s,box-shadow .15s,transform .12s}.judge__pick{width:100%}.judge.is-answered .judge__pick{pointer-events:none}.judge__option.is-correct{border-color:var(--status-supported-fg);box-shadow:0 0 0 3px var(--status-supported-bg)}.judge__option.is-wrong{border-color:var(--status-challenged-fg);box-shadow:0 0 0 3px var(--status-challenged-bg)}.judge__option.is-correct .judge__pick{--btn-bg:var(--status-supported-bg);--btn-fg:var(--status-supported-fg);--btn-border:var(--status-supported-fg)}.judge__option.is-wrong .judge__pick{--btn-bg:var(--status-challenged-bg);--btn-fg:var(--status-challenged-fg);--btn-border:var(--status-challenged-fg)}.phone{inline-size:100%;max-inline-size:15rem;margin-inline:auto;aspect-ratio:9/17;background:var(--surface-2);border:2px solid var(--divider);border-radius:1.4rem;padding:.4rem;display:flex;flex-direction:column;gap:.35rem}.phone__bar{display:flex;align-items:center;gap:.4rem;padding-inline:0.4rem;block-size:1.1rem}.phone__dot{inline-size:0.4rem;block-size:0.4rem;border-radius:50%;background:var(--accent)}.phone__time{font-size:.6rem;font-weight:600;color:var(--muted);letter-spacing:.02em}.phone__screen{position:relative;flex:1;background:var(--paper);border-radius:1rem;padding:.55rem;display:flex;flex-direction:column;gap:.4rem;overflow:hidden}.phone__topbar{display:flex;align-items:center;justify-content:space-between;gap:.4rem;margin-block-end:0.1rem}.phone__title{font-size:.62rem;font-weight:700;color:var(--ink)}.mock-line{block-size:0.32rem;border-radius:999px;background:var(--surface-2)}.mock-line--80{inline-size:80%}.mock-line--70{inline-size:70%}.mock-line--60{inline-size:60%}.mock-line--40{inline-size:40%}.mock-field{block-size:1rem;border-radius:var(--radius-s);background:var(--surface);border:1px solid var(--line)}.mock-field--half{inline-size:55%}.mock-btn{display:inline-flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:700;color:var(--on-accent);background:var(--accent);border-radius:var(--radius-s)}.mock-btn--tiny{padding:.12rem .3rem;font-size:.5rem;border-radius:3px}.mock-btn--block{margin-block-start:auto;inline-size:100%;block-size:1.5rem}.phone__thumb{position:absolute;inset-block-end:-3.2rem;inset-inline-end:-3.2rem;inline-size:7rem;block-size:7rem;border-radius:50%;border:1.5px dashed color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 7%,transparent);pointer-events:none}.judge__reveal{margin-block-start:var(--space-l);padding-block-start:var(--space-l);border-block-start:1px solid var(--divider)}.judge__verdict{font-family:var(--font-display);font-weight:700;font-size:var(--step-1)}.judge__verdict.is-correct{color:var(--status-supported-fg)}.judge__verdict.is-wrong{color:var(--status-challenged-fg)}.judge__verdict.is-neutral{color:var(--accent-strong)}.judge__why{margin-block-start:var(--space-s)}.judge__caveat{font-size:var(--step--1)}.judge__reset{margin-block-start:var(--space-m);color:var(--accent-strong)}.judge__option.is-neutral{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.judge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:var(--space-m)}.judge-card{display:flex;flex-direction:column;gap:var(--space-s);block-size:100%;padding:var(--space-m);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);text-decoration:none;color:var(--ink);transition:border-color .15s,box-shadow .15s,transform .12s}.judge-card:hover{border-color:var(--accent);box-shadow:var(--shadow-m);transform:translateY(-2px)}.judge-card__cat{color:var(--accent-strong)}.judge-card__q{font-family:var(--font-display);font-weight:700;font-size:var(--step-1);line-height:var(--leading-snug)}.judge-card__principle{margin-block-start:auto;font-size:var(--step--1);color:var(--muted)}.judge-card__principle-label{display:block;color:var(--accent-strong);margin-block-end:0.1rem}.judge-card__foot{display:inline-flex;align-items:center;gap:.5ch;color:var(--accent-strong)}.judge-card__dot{inline-size:0.5rem;block-size:0.5rem;border-radius:50%;background:var(--accent)}.judge-anchor{margin-block-start:var(--space-xl);padding:var(--space-m);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m)}.judge-anchor__list{display:flex;flex-wrap:wrap;gap:var(--space-s) var(--space-m);margin-block-start:var(--space-2xs)}.judge-anchor__list li{display:flex;align-items:baseline;gap:.5ch}.judge-anchor__cat{color:var(--muted)}.judge-run{display:flex;flex-wrap:wrap;gap:var(--space-s);margin-block-start:var(--space-xl)}.judge-run__link{flex:1 1 12rem;display:flex;flex-direction:column;gap:.15rem;padding:var(--space-s) var(--space-m);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);text-decoration:none;color:var(--ink);transition:border-color .15s}.judge-run__link:hover{border-color:var(--accent)}.judge-run__link--next{text-align:end;align-items:flex-end}.judge-run__dir{color:var(--accent-strong)}.judge-run__title{font-weight:600}.judge-run__all{margin-block-start:var(--space-m);font-size:var(--step--1);color:var(--muted)}.menu{inline-size:100%;max-inline-size:15rem;margin-inline:auto;padding:.5rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-m);text-align:start}.menu__title{font-size:.68rem;font-weight:700;color:var(--ink);padding:.2rem .3rem .4rem}.menu__group{margin-block-start:0.3rem}.menu__heading{font-size:.55rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-strong);padding:.15rem .3rem}.menu__item{font-size:.62rem;color:var(--muted);padding:.26rem .3rem;border-radius:4px}.menu__item+.menu__item{border-block-start:1px solid var(--surface)}.menu__item--target{color:var(--accent-strong);font-weight:700;background:var(--accent-soft)}.toolbar{display:flex;gap:.3rem;justify-content:center;flex-wrap:wrap;padding:.7rem .5rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-m)}.toolbar__btn{display:flex;flex-direction:column;align-items:center;gap:.25rem;inline-size:2.4rem;padding:.4rem .2rem;border-radius:6px;background:var(--surface);border:1px solid var(--line)}.toolbar__label{font-size:.5rem;color:var(--muted)}.tb-ico{position:relative;inline-size:1rem;block-size:1rem;color:var(--ink)}.tb-ico--save::before{content:"";position:absolute;inset:0;border:1.5px solid currentColor;border-radius:2px}.tb-ico--save::after{content:"";position:absolute;inset-inline:0.2rem;inset-block-end:0.12rem;block-size:0.32rem;border:1px solid currentColor;border-block-end:0}.tb-ico--share::before{content:"";position:absolute;inset-block-start:0;inset-inline-start:50%;transform:translateX(-50%);border-inline:0.22rem solid transparent;border-block-end:0.3rem solid currentColor}.tb-ico--share::after{content:"";position:absolute;inset-block-start:0.25rem;inset-inline-start:50%;transform:translateX(-50%);inline-size:1.5px;block-size:0.6rem;background:currentColor}.tb-ico--copy::after,.tb-ico--copy::before{content:"";position:absolute;inline-size:0.58rem;block-size:0.7rem;border:1.5px solid currentColor;border-radius:2px}.tb-ico--copy::before{inset-block-start:0;inset-inline-start:0}.tb-ico--copy::after{inset-block-end:0;inset-inline-end:0;background:var(--surface)}.tb-ico--print::before{content:"";position:absolute;inset-block-end:0;inset-inline-start:0.05rem;inline-size:0.9rem;block-size:0.55rem;border:1.5px solid currentColor;border-radius:2px}.tb-ico--print::after{content:"";position:absolute;inset-block-start:0;inset-inline-start:0.25rem;inline-size:0.5rem;block-size:0.32rem;border:1.5px solid currentColor;border-block-end:0}.tb-ico--more::before{content:"";position:absolute;inset-block-start:50%;inset-inline-start:0.05rem;inline-size:0.2rem;block-size:0.2rem;border-radius:50%;background:currentColor;transform:translateY(-50%);box-shadow:.35rem 0 0 currentColor,.7rem 0 0 currentColor}.promo{inline-size:100%;max-inline-size:15rem;margin-inline:auto;display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;padding:var(--space-m);background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-m)}.promo__line{block-size:0.34rem;border-radius:999px;background:var(--surface-2)}.promo__line--80{inline-size:80%}.promo__line--60{inline-size:60%}.promo__line--40{inline-size:40%}.promo__cta{margin-block-start:0.4rem;padding:.45rem .95rem;border-radius:var(--radius-s);font-size:.72rem;font-weight:700}.promo__cta--low{background:#bfe0d0;color:#a6c4b6}.promo__cta--ok{background:#0d5c3c;color:#fff}.ui-frame{position:relative;inline-size:100%;max-inline-size:15rem;margin-inline:auto;aspect-ratio:4/3;display:flex;flex-direction:column;gap:.4rem;padding:var(--space-s);background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-m);overflow:hidden}.ui-frame__line{block-size:0.34rem;border-radius:999px;background:var(--surface-2)}.ui-frame__line--80{inline-size:80%}.ui-frame__line--70{inline-size:70%}.ui-frame__line--60{inline-size:60%}.ui-frame__line--40{inline-size:40%}.ui-frame__scrim{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--ink) 38%,transparent)}.modal-mock{inline-size:78%;padding:.6rem;background:var(--paper);border-radius:8px;box-shadow:var(--shadow-m);text-align:start}.modal-mock__title{font-size:.62rem;font-weight:700;color:var(--ink)}.modal-mock__line{display:block;block-size:0.3rem;inline-size:88%;margin-block:0.35rem 0.5rem;border-radius:999px;background:var(--surface-2)}.modal-mock__actions{display:flex;justify-content:flex-end;gap:.3rem}.modal-mock__btn{font-size:.5rem;font-weight:700;padding:.22rem .45rem;border-radius:4px}.modal-mock__btn--ghost{border:1px solid var(--line);color:var(--muted)}.modal-mock__btn--danger{background:var(--status-challenged-fg);color:#fff}.toast-mock{position:absolute;inset-inline:0.6rem;inset-block-end:0.6rem;display:flex;align-items:center;justify-content:space-between;padding:.4rem .55rem;background:var(--status-revised-bg);color:var(--status-revised-fg);border-radius:6px;font-size:.58rem}.toast-mock__action{font-weight:700;color:var(--accent)}@media (prefers-reduced-motion:reduce){.judge-card,.judge-run__link,.judge__option{transition:none}.judge-card:hover{transform:none}}