/* Page-scoped CSS for personalization.css, lifted verbatim out of the inline <style> block
   theme-builder.html carried (#7007). A plain file rather than an inline block or a
   .razor.css: the selectors below use sibling and descendant combinators that
   Blazor's CSS isolation rewriter would silently change the meaning of, and a
   file caches while an inline block is re-sent with every page. */

  /* page-local: the Personalization page (#6892). Vanilla CSS only — the family
     filter and the light/dark control are radio inputs plus sibling selectors,
     so the gallery works with JavaScript switched off. The only script on the
     page is the shared currency module. */
  .page-hero{padding:4.5rem 0 2rem;text-align:center}
  .page-hero h1{margin:.6rem 0 0}
  .page-hero .lede{max-width:44rem;margin:1.1rem auto 0}

  /* --- gallery ---------------------------------------------------------- */
  .gal{margin-top:1.5rem}
  .gal-radio{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .gal-bar{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;
    padding:.85rem 0;margin-bottom:1.4rem;background:var(--bg);border-bottom:1px solid var(--border)}
  .chip{display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;font-size:.82rem;font-weight:600;
    color:var(--text);background:var(--surface);border:1px solid var(--border);
    padding:.32rem .7rem;border-radius:var(--pill);white-space:nowrap;
    transition:border-color var(--duration-fast) var(--easing),background var(--duration-fast) var(--easing)}
  .chip:hover{border-color:var(--border-strong);background:var(--surface-strong)}
  .chip b{font-weight:700;opacity:.65;font-variant-numeric:tabular-nums}
  .gal-radio:focus-visible ~ .gal-bar label[for]{outline:2px solid var(--accent);outline-offset:2px}
  .gal-scheme{display:inline-flex;gap:.35rem;margin-left:auto;padding-left:.6rem}
  .gal-scheme .chip{text-transform:uppercase;letter-spacing:.04em;font-size:.72rem}
  .gal-grid{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fill,minmax(18rem,1fr))}
  .tc{display:flex;flex-direction:column;gap:.7rem;min-width:0;
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:.8rem;
    transition:border-color var(--duration-fast) var(--easing),transform var(--duration-fast) var(--easing)}
  .tc:hover{border-color:var(--border-strong);transform:translateY(-2px)}
  .tc-shots{display:grid;gap:.5rem;grid-template-columns:1fr;min-width:0}
  .tc-shot{min-width:0}
  .tc-meta{display:flex;flex-direction:column;gap:.25rem;min-width:0}
  .tc-name{margin:0;font-size:.98rem;font-weight:700;color:var(--text-strong);
    display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
  .tc-tagline{margin:0;font-size:.82rem;line-height:1.45;color:var(--muted)}
  .tc-chips{display:flex;align-items:center;gap:.45rem;margin:.15rem 0 0}
  .tc-chips .theme-swatch-chip{width:2.2rem;height:1.3rem;flex:none}
  .tc-family{font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-strong)}

  /* the family filter and the scheme switch, both pure CSS */
  #fam-editors:checked ~ .gal-grid .tc:not([data-family="editors"]){display:none}
  #fam-desktops:checked ~ .gal-grid .tc:not([data-family="desktops"]){display:none}
  #fam-retro-systems:checked ~ .gal-grid .tc:not([data-family="retro-systems"]){display:none}
  #fam-terminals:checked ~ .gal-grid .tc:not([data-family="terminals"]){display:none}
  #fam-paper-and-ink:checked ~ .gal-grid .tc:not([data-family="paper-and-ink"]){display:none}
  #fam-quiet-and-legible:checked ~ .gal-grid .tc:not([data-family="quiet-and-legible"]){display:none}
  #fam-art-movements:checked ~ .gal-grid .tc:not([data-family="art-movements"]){display:none}
  #fam-neon-and-retro-future:checked ~ .gal-grid .tc:not([data-family="neon-and-retro-future"]){display:none}
  #fam-nature-and-calm:checked ~ .gal-grid .tc:not([data-family="nature-and-calm"]){display:none}
  #fam-playful:checked ~ .gal-grid .tc:not([data-family="playful"]){display:none}
  #fam-all:checked ~ .gal-bar label[for="fam-all"]{color:var(--text-on-accent);background:var(--accent);border-color:var(--accent)}
  #fam-editors:checked ~ .gal-bar label[for="fam-editors"]{color:var(--text-on-accent);background:var(--accent);border-color:var(--accent)}
  #fam-desktops:checked ~ .gal-bar label[for="fam-desktops"]{color:var(--text-on-accent);background:var(--accent);border-color:var(--accent)}
  #fam-retro-systems:checked ~ .gal-bar label[for="fam-retro-systems"]{color:var(--text-on-accent);background:var(--accent);border-color:var(--accent)}
  #fam-terminals:checked ~ .gal-bar label[for="fam-terminals"]{color:var(--text-on-accent);background:var(--accent);border-color:var(--accent)}
  #fam-paper-and-ink:checked ~ .gal-bar label[for="fam-paper-and-ink"]{color:var(--text-on-accent);background:var(--accent);border-color:var(--accent)}
  #fam-quiet-and-legible:checked ~ .gal-bar label[for="fam-quiet-and-legible"]{color:var(--text-on-accent);background:var(--accent);border-color:var(--accent)}
  #fam-art-movements:checked ~ .gal-bar label[for="fam-art-movements"]{color:var(--text-on-accent);background:var(--accent);border-color:var(--accent)}
  #fam-neon-and-retro-future:checked ~ .gal-bar label[for="fam-neon-and-retro-future"]{color:var(--text-on-accent);background:var(--accent);border-color:var(--accent)}
  #fam-nature-and-calm:checked ~ .gal-bar label[for="fam-nature-and-calm"]{color:var(--text-on-accent);background:var(--accent);border-color:var(--accent)}
  #fam-playful:checked ~ .gal-bar label[for="fam-playful"]{color:var(--text-on-accent);background:var(--accent);border-color:var(--accent)}
  #sch-light:checked ~ .gal-grid .tc-dark{display:none}
  #sch-dark:checked ~ .gal-grid .tc-light{display:none}
  #sch-light:checked ~ .gal-bar label[for="sch-light"],
  #sch-dark:checked ~ .gal-bar label[for="sch-dark"],
  #sch-both:checked ~ .gal-bar label[for="sch-both"]{color:var(--text-on-accent);background:var(--accent);border-color:var(--accent)}
  @media (min-width:48rem){
    /* Two schemes side by side need a wider card, or the miniature's status bar
       runs out of room — so Both widens the column track as well. */
    #sch-both:checked ~ .gal-grid{grid-template-columns:repeat(auto-fill,minmax(26rem,1fr))}
    #sch-both:checked ~ .gal-grid .tc-shots{grid-template-columns:1fr 1fr}
  }

  /* --- the light/dark pair, the studio, workspaces ----------------------- */
  .pair{display:grid;gap:1rem;grid-template-columns:1fr 1fr;max-width:46rem;margin:0 auto}
  @media (max-width:40rem){.pair{grid-template-columns:1fr}}
  .pair-label{display:block;margin-bottom:.4rem;font-size:.72rem;letter-spacing:.06em;
    text-transform:uppercase;color:var(--muted)}
  .pair-caption{text-align:center;margin:1rem 0 0;color:var(--muted);font-size:.9rem}
  .steps{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));margin-top:1.6rem}
  .steps .card p{margin:.4rem 0 0}
  .note{max-width:var(--content-narrow);margin:1.4rem auto 0;color:var(--muted);font-size:.92rem}
  .trademark{max-width:52rem;margin:1rem auto 0;font-size:.82rem;line-height:1.6;color:var(--muted-strong)}
  .bundle-wrap{max-width:30rem;margin:0 auto}
  .soon-card{max-width:var(--content-narrow);margin:0 auto}
  .band{background:var(--bg-alt);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}