/* /guides hub v2 (manifest "hub_v2", v12+): loads after hub.css and only adds to it, so v11's hub.css stays as shipped.
   Holds no words. The one bold element: the hero problem finder (chips that lift on hover, press in on click, fill ink when picked).
   Behavior lives in hub.js; without JS every chip is a plain link to its guide's card. */

/* hero: title + intro left, the finder right at 960px+; a slow lilac wash drifts behind it */
.hub__head{position:relative;isolation:isolate;overflow:hidden}
.hub__head::before{content:"";position:absolute;inset:-40% -20%;z-index:-1;pointer-events:none;
  background:radial-gradient(32% 42% at 18% 28%,rgb(229 206 255/.85),transparent 70%),radial-gradient(28% 40% at 82% 74%,rgb(99 16 195/.10),transparent 70%)}
@media (min-width:960px){
  .hub__head{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:1fr auto auto 1fr;column-gap:clamp(40px,5vw,72px);align-items:start;
    padding-top:36px;padding-bottom:32px}
  /* h1 + intro stay together, centered beside the finder however tall it grows (no empty band between them) */
  .hub__head h1{grid-column:1;grid-row:2;max-width:11ch;font-size:clamp(44px,3.9vw,56px)}
  .hub__intro{grid-column:1;grid-row:3;font-size:18px}
  .hub-finder{grid-column:2;grid-row:1/-1;align-self:center}
}

/* the finder panel */
.hub-finder{margin-top:clamp(20px,4vw,32px);padding:clamp(16px,2vw,24px);border:2px solid var(--ink);border-radius:20px;background:var(--white);box-shadow:6px 6px 0 var(--lilac)}
@media (min-width:960px){.hub-finder{margin:0}}
.hub-finder__label{margin:0;font:700 clamp(20px,1.9vw,24px)/1.2 var(--serif);color:var(--ink)}
.hub-finder__hint{margin:4px 0 14px;font-size:15px;color:var(--muted)}
@media (min-width:960px){.hub-finder__hint{margin-bottom:12px}}
.hub-finder__list{display:flex;flex-wrap:wrap;gap:8px}
.hub-finder__status{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin:0;font-size:15px;font-weight:600;color:var(--ink)}
.hub-finder__status:has(span:not(:empty)){margin-top:14px}
.hub-finder__reset{min-height:40px;padding:0 4px;border:0;background:none;color:var(--purple);font:inherit;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.hub-finder__reset[hidden]{display:none}

/* a problem chip (hero and band columns): a link that feels like a button. Until Inter 700 loads, chips draw in Arial Bold scaled to
   Inter 700's advances (size-adjust = the 8 hero chips' total Inter 700 width / Arial Bold width at 15px; ascent/descent = Inter's,
   divided by size-adjust), so the font swap moves no chip more than ~7px and never rewraps the rows (h44) */
@font-face{font-family:"Inter Chip Fallback";font-weight:600 700;font-display:swap;src:local("Arial Bold"),local("Arial-BoldMT");
  size-adjust:102.85%;ascent-override:94.19%;descent-override:23.45%;line-gap-override:0%}
.hub-chip{display:inline-flex;font-family:"Inter","Inter Chip Fallback",system-ui,sans-serif;align-items:center;min-height:40px;padding:0 15px;border:1.5px solid var(--ink);border-radius:var(--r-pill);background:var(--white);color:var(--ink);font-size:15px;font-weight:600;line-height:1.2;text-decoration:none}
.hub-chip:hover{background:var(--wash);box-shadow:3px 3px 0 var(--ink);transform:translate(-1px,-1px)}
.hub-chip:active{box-shadow:none;transform:translate(1px,1px)}
.hub-chip:focus-visible{outline:2px solid var(--purple-2);outline-offset:3px}
.hub-chip[aria-current]{background:var(--ink);color:var(--white);box-shadow:none;transform:none}
@media (min-width:960px){.hub-chip{min-height:38px}}

/* 390: the hero stays short so the featured card's short answer starts inside the first screen */
@media (max-width:719px){
  .hub__head{padding-top:28px;padding-bottom:24px}
  .hub__head h1{font-size:36px}
  .hub__intro{margin-top:10px;font-size:16px}
  .hub-finder__hint{display:none}
  .hub-finder__label{margin-bottom:12px}
  /* two rows of content-sized chips that scroll sideways and run to the panel border, fading out at the right edge
     (no JS: 960px wraps today's 8 chips into 4 + 4, as does any width from 880 to 1040 at Inter 700 or the chip fallback; the height is pinned to 2 rows of
     40px chips, so neither hub.js trimming the width nor the font swap moves anything below. Re-check the width when hub.json "finder" changes) */
  .hub-finder__rows{overflow-x:auto;margin:0 calc(-1 * clamp(16px,2vw,24px));padding:0 clamp(16px,2vw,24px) 4px;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .hub-finder__rows::-webkit-scrollbar{display:none}
  .hub-finder__list{width:var(--rows-w,960px);height:88px}
  .hub-finder__list li{white-space:nowrap}
  .hub-group{padding-top:28px;gap:16px}
  .hub-group__head p{margin-top:6px}
  .hub-card--featured .hub-card__q{font-size:24px}
}
.hub-card--featured .hub-card__title{display:none}
.hub-card--featured .hub-card__flag{margin-bottom:8px}
.hub-card--featured .hub-card__answer{margin-top:10px}
@media (min-width:960px){
  .hub__head + .hub-group{padding-top:40px}
  .hub-card--featured{padding:28px}
}

/* band column: its problems under the heading (fills the left column at 1440; the hero already lists them on phones) */
.hub-group__head .hub-group__k{margin:24px 0 10px;font-weight:700;color:var(--ink)}
.hub-group__problems{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:959px){.hub-group__k,.hub-group__problems{display:none}}

/* 1440: the featured card's sticker shadow (11px right) stays inside the content edge */
@media (min-width:960px){.hub-card--featured{margin-right:11px}}

/* a picked problem: its guides stand out, the rest step back */
.hub-card{scroll-margin-top:96px}
.hub-card.is-match{border-color:var(--purple);box-shadow:0 0 0 3px var(--lilac)}
/* the featured card already wears the sticker: a match only turns its border purple (one effect, no ring) */
.hub-card--featured.is-match{box-shadow:var(--sticker)}
/* the match marks the picked card, so the focus ring only shows for keyboard focus, not after a mouse pick */
.hub-card.is-match:not(:has(:focus-visible)){outline:none}
.hub-card.is-dim{opacity:.45}

/* a lone card on a band's last row (hub-card--wide, set by the build) takes the full row, facts in one row like the featured card */
.hub-card--wide{grid-column:1/-1}
@media (min-width:720px){
  .hub-card--wide .hub-card__meta{grid-template-columns:repeat(3,auto);justify-content:start;gap:8px 40px}
  .hub-card--wide .hub-card__meta div{flex-direction:column;gap:2px}
  .hub-card--wide .hub-card__meta dt{min-width:0}
  .hub-card--wide .hub-card__meta dd{max-width:30ch}
}

/* motion (all off under prefers-reduced-motion): drifting hero wash, chip lift/press, cards rising in on scroll, the pick fade */
@media (prefers-reduced-motion:no-preference){
  .hub__head::before{animation:hub-drift 22s ease-in-out infinite alternate}
  @keyframes hub-drift{to{transform:translate3d(6%,-5%,0) rotate(8deg)}}
  .hub-chip{transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease,color .15s ease}
  .hub-card{transition:opacity .45s ease,transform .55s cubic-bezier(.2,.8,.2,1),border-color .2s ease,box-shadow .2s ease}
  .hub-card.is-wait{opacity:0;transform:translateY(20px)}
}