/* hub/antislop.css - R2 restyle (TN 2026-10-18 anti-slop). Plan: CLARITY/docs/design/2026-10-18-R2-design-plan.md.
   Inert unless <html data-look="r2"> (switch in index.html: R2_DEFAULT_ON, or ?look=r2). Rollback = leave the attribute off.
   Tokens: Sleeve Paper #eee7d4, Night Ink #101a30, Booth Dark #0e1226, Blue Note Blue #0a56b3, Ember #f4581c, Holodeck Teal #0f8f86. */
html[data-look="r2"]{--r2-paper:#eee7d4;--r2-ink:#101a30;--r2-dim:#46506b;--r2-stage:#0e1226;--r2-blue:#0a56b3;--r2-ember:#f4581c;--r2-teal:#0f8f86;--r2-rule:rgba(16,26,48,.22)}

/* ── type: one body face, no ALL-CAPS tracked labels, 14px floor ── */
html[data-look="r2"] body{font-size:16px;line-height:1.55}
html[data-look="r2"] .hub-kicker,html[data-look="r2"] .nr-kicker,html[data-look="r2"] .picker-eyebrow,html[data-look="r2"] .crate-eyebrow,
html[data-look="r2"] .hub-worktabs button,html[data-look="r2"] .site-nav a,html[data-look="r2"] .wall-view-switch button,
html[data-look="r2"] .vibe-pick small,html[data-look="r2"] .rack-look .look-meta,html[data-look="r2"] .hub-rackhead .nr-btn,
html[data-look="r2"] .mode-toggle,html[data-look="r2"] .hub-dial h3,html[data-look="r2"] .hub-door b,
html[data-look="r2"] .hub-rail,html[data-look="r2"] .rail-item,html[data-look="r2"] .hub-wearing{
  text-transform:none !important;letter-spacing:0 !important;font-family:'Archivo','Space Grotesk',system-ui,sans-serif !important}
html[data-look="r2"],html[data-look="r2"] body{overflow-x:hidden;max-width:100vw}
html[data-look="r2"] .hub-rail{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
html[data-look="r2"] #shelfTop8{display:none !important}
html[data-look="r2"] .hub-kicker,html[data-look="r2"] .nr-kicker,html[data-look="r2"] .picker-eyebrow,html[data-look="r2"] .crate-eyebrow{font-size:14px !important;font-weight:600;opacity:1;color:var(--r2-dim) !important}
/* the kicker above the stage card only repeats the card; drop it */
html[data-look="r2"] .hub-cardzone > .hub-kicker{display:none}
html[data-look="r2"] .hub-sub{font-size:14px !important;color:var(--r2-dim);max-width:34ch}
html[data-look="r2"] .hub-copy{max-width:60ch;font-size:16px}

/* ── the ONE bold place: Anton hero line + the lit stage ── */
html[data-look="r2"] .hub-title{font-family:'Anton','Archivo',sans-serif;font-weight:400;font-size:clamp(34px,4.6vw,54px);line-height:1.02;text-transform:none;letter-spacing:0;margin:2px 0 10px}
html[data-look="r2"] .profile-hero h1{font-family:'Anton','Archivo',sans-serif;font-weight:400;font-size:clamp(34px,5vw,56px);line-height:1.02;text-transform:none;letter-spacing:0}
html[data-look="r2"] .hub-door b,html[data-look="r2"] .hub-dial h3,html[data-look="r2"] .shelf-title{font-weight:700;font-size:17px}
html[data-look="r2"] body[data-vibe="blue-note"]{--hub-ground:var(--r2-paper);--void:var(--r2-paper)}
html[data-look="r2"] .hub-cardstage,html[data-look="r2"] .public-card-stage{
  background:radial-gradient(70% 90% at 50% 118%,rgba(244,88,28,.42),rgba(244,88,28,0) 62%),var(--r2-stage);
  border:0 !important;border-radius:18px;padding:28px 22px;box-shadow:none;min-height:190px;display:flex;align-items:center;justify-content:center}
html[data-look="r2"] .hub-cardstage .msg,html[data-look="r2"] .hub-cardstage .nr-card{width:100%}
html[data-look="r2"] .hub-cardzone{display:flex;flex-direction:column;gap:10px}
html[data-look="r2"] .hub-wearing{color:var(--r2-dim);font-size:14px !important}
/* single orchestrated moment: the stage card answers a change the rider just made */
@keyframes r2-answer{0%{transform:scale(.985);filter:brightness(1.25)}100%{transform:none;filter:none}}
html[data-look="r2"] .hub-cardstage.r2-answer .nr-card{animation:r2-answer .5s cubic-bezier(.16,1,.3,1)}

/* ── structure means something: rules, not boxes; a hierarchy of radii ── */
html[data-look="r2"] body[data-vibe="blue-note"] .hub-door{background:transparent;border:0;border-top:2px solid var(--r2-ink);border-radius:0;box-shadow:none;padding:12px 4px 14px;transition:background .2s}
html[data-look="r2"] body[data-vibe="blue-note"] .hub-door:hover{background:rgba(16,26,48,.06)}
html[data-look="r2"] .hub-door small{font-size:14px;opacity:1;color:var(--r2-dim)}
html[data-look="r2"] .hub-doors{gap:18px}
html[data-look="r2"] .hub-dial .dnum{display:none}
html[data-look="r2"] .hub-dials{border:0 !important;border-top:2px solid var(--r2-ink) !important;gap:0}
html[data-look="r2"] .hub-dial{border-right:1px solid var(--r2-rule) !important;border-bottom:0 !important;padding:16px 18px 18px}
html[data-look="r2"] .hub-dial:last-child{border-right:0 !important}
html[data-look="r2"] .hub-worktabs{gap:22px;border-bottom:1px solid var(--r2-rule);margin-bottom:16px}
html[data-look="r2"] .hub-worktabs button{background:none !important;border:0 !important;border-bottom:3px solid transparent !important;border-radius:0;padding:8px 2px;font-size:16px !important;font-weight:600;color:var(--r2-dim) !important;margin-bottom:-1px}
html[data-look="r2"] .hub-worktabs button.active{color:var(--r2-ink) !important;border-bottom-color:var(--r2-ember) !important}
html[data-look="r2"] .hub-rackhead{display:flex;align-items:baseline;gap:14px;margin:22px 0 10px}
html[data-look="r2"] .hub-rackhead .hub-kicker::before{content:"Looks to try on";}
html[data-look="r2"] .hub-rackhead .hub-kicker{font-size:0 !important}
html[data-look="r2"] .hub-rackhead .hub-kicker::before{font-size:17px;font-weight:700;color:var(--r2-ink)}
html[data-look="r2"] .rack-look{border-radius:10px;border:1px solid var(--r2-rule);background:rgba(255,255,255,.4)}
html[data-look="r2"] .rack-look b{font-size:15px;text-transform:none;letter-spacing:0}
html[data-look="r2"] .rack-look .look-meta{font-size:14px !important}
html[data-look="r2"] .is-wearing{outline:3px solid var(--r2-teal) !important}
html[data-look="r2"] .wall-list li,html[data-look="r2"] .wall-item{border-radius:0;border-width:0 0 1px;border-color:var(--r2-rule);background:transparent}
html[data-look="r2"] .shelf{border:0;border-top:1px solid var(--r2-rule);padding-top:18px;margin-top:26px}
html[data-look="r2"] .shelf-head .nr-kicker{font-size:17px !important;font-weight:700;color:var(--r2-ink) !important}
html[data-look="r2"] .trophy-chip{border-radius:999px;font-size:14px !important;color:#5d3e00;background:#f2dfae;border-color:transparent}

/* ── controls: one primary (ember, ink text for AA), ghosts are plain ── */
html[data-look="r2"] body[data-vibe="blue-note"] .nr-btn,html[data-look="r2"] body[data-vibe="blue-note"] .btn{border-radius:8px;font-weight:600;font-size:15px;text-transform:none;letter-spacing:0;min-height:40px}
html[data-look="r2"] body[data-vibe="blue-note"] .nr-btn:not(.ghost){background:var(--r2-ember);color:var(--r2-ink)}
html[data-look="r2"] body[data-vibe="blue-note"] .nr-btn.ghost,html[data-look="r2"] body[data-vibe="blue-note"] .btn.ghost{border:1.5px solid var(--r2-ink);color:var(--r2-ink);background:transparent}
html[data-look="r2"] a{color:var(--r2-blue)}
html[data-look="r2"] a.twitch-btn,html[data-look="r2"] a.twitch-btn:visited{color:#fff}
html[data-look="r2"] :focus-visible{outline:3px solid var(--r2-blue);outline-offset:2px;border-radius:4px}
html[data-look="r2"] .hub-door:focus-visible,html[data-look="r2"] .rack-look:focus-visible{border-radius:8px}

/* ── Vibes picker + the Crate: same language ── */
html[data-look="r2"] .picker,html[data-look="r2"] section.crate{background:transparent;border:0;border-top:2px solid var(--r2-ink);border-radius:0;padding:18px 0;color:var(--r2-ink);max-width:none}
html[data-look="r2"] .picker-title{font:700 24px/1.15 'Archivo',sans-serif}
html[data-look="r2"] .picker-why,html[data-look="r2"] .picker-lead,html[data-look="r2"] .picker-note,html[data-look="r2"] .crate-note,html[data-look="r2"] .crate-empty{color:var(--r2-dim);opacity:1;font-size:15px}
html[data-look="r2"] .picker-status,html[data-look="r2"] .picker-field,html[data-look="r2"] .picker-toggle{font-family:'Archivo','Space Grotesk',system-ui,sans-serif !important;color:var(--r2-dim) !important;letter-spacing:0 !important;text-transform:none !important;font-size:14px !important}
html[data-look="r2"] .picker-status{font-style:italic}
html[data-look="r2"] .vibe-pick{border-radius:10px}
html[data-look="r2"] .vibe-pick b{font-size:15px;letter-spacing:0}
html[data-look="r2"] .vibe-pick small{font-size:14px !important;opacity:1}
html[data-look="r2"] .vibe-pick[aria-pressed="true"]{outline:3px solid var(--r2-teal)}
html[data-look="r2"] section.crate .crate-kind,html[data-look="r2"] section.crate .crate-text{background:#fbf8ee;border:1.5px solid var(--r2-ink);border-radius:8px;color:var(--r2-ink)}
html[data-look="r2"] section.crate .crate-send{background:var(--r2-ember);border-color:var(--r2-ember);color:var(--r2-ink);font-weight:600;border-radius:999px}
html[data-look="r2"] section.crate .crate-remove,html[data-look="r2"] section.crate .crate-modbtn{border-color:var(--r2-ink);color:var(--r2-ink)}
html[data-look="r2"] .crate-item{border-top-color:var(--r2-rule)}
html[data-look="r2"] .crate-item span,html[data-look="r2"] .crate-item em{opacity:1;color:var(--r2-dim);font-size:14px}
html[data-look="r2"] .crate-picked{background:#d6efe9;color:#0b5f58;border-radius:8px}
html[data-look="r2"] .crate-mod-flagged strong{color:#a3200f}

/* ── phone ── */
@media (max-width:760px){
  html[data-look="r2"] .hub-dial{border-right:0 !important;border-bottom:1px solid var(--r2-rule) !important}
  html[data-look="r2"] .hub-cardstage,html[data-look="r2"] .public-card-stage{padding:20px 12px;min-height:150px}
  html[data-look="r2"] .hub-worktabs{gap:16px;overflow-x:auto}
}
@media (prefers-reduced-motion:reduce){html[data-look="r2"] *{animation:none !important;transition:none !important}}