/* atlas-browse.css — front-door "Browse the exercise library" section.
   Separate file (loaded after home.css) so it never collides with concurrent
   home.css edits. Reuses home.css :root tokens (--surface, --line-strong,
   --action-ink, --teal-ink, --mono, --r, spacing) which cascade on this page.
   Purpose: give the 227 atlas satellites real inbound links from the site's
   highest-authority page — they were an SEO island (0 front-door links). */

.atlas-browse{
  background:linear-gradient(170deg,var(--surface) 0%,var(--surface-2) 100%);
  border:1px solid var(--line-strong); border-radius:calc(var(--r) + 6px);
  padding:var(--s-4); margin:0 0 var(--s-6);
  box-shadow:0 24px 60px rgba(0,0,0,0.35), 0 0 0 1px rgba(37,99,235,0.06);
}
.atlas-browse .glance{color:var(--muted); font-size:var(--t-base); margin:0 0 var(--s-3); max-width:60ch;}
.atlas-cat{font-family:var(--mono); font-size:var(--t-cap); text-transform:uppercase; letter-spacing:0.18em; color:var(--teal-ink); margin:var(--s-3) 0 var(--s-1); font-weight:700;}
.atlas-cat:first-of-type{margin-top:0;}
.atlas-grid{
  list-style:none; margin:0 0 var(--s-2); padding:0;
  display:grid; grid-template-columns:1fr; gap:var(--s-1);
}
@media (min-width:560px){ .atlas-grid{grid-template-columns:repeat(2,1fr); gap:var(--s-2);} }
@media (min-width:860px){ .atlas-grid{grid-template-columns:repeat(4,1fr);} }
.atlas-grid a{
  display:flex; align-items:center; min-height:48px; padding:var(--s-2) var(--s-3);
  border:1px solid var(--line-strong); border-left:3px solid var(--action-ink);
  border-radius:var(--r-sm); background:var(--surface-2);
  color:var(--text); text-decoration:none;
  font-family:var(--mono); font-size:var(--t-sm); font-weight:700;
}
.atlas-grid a:hover{border-left-color:var(--teal-ink); color:var(--action-ink);}
.atlas-grid a:focus-visible{outline:var(--ring) solid var(--action-ink); outline-offset:2px;}
@media (prefers-reduced-motion:no-preference){
  .atlas-grid a{transition:color var(--dur),border-color var(--dur);}
}

/* full library grid — the /exercises hub lists all 227; denser columns. */
.atlas-grid-full{grid-template-columns:1fr;}
@media (min-width:560px){ .atlas-grid-full{grid-template-columns:repeat(2,1fr);} }
@media (min-width:860px){ .atlas-grid-full{grid-template-columns:repeat(3,1fr);} }

/* /exercises hub filter (progressive enhancement; hidden until JS reveals it) */
.ex-filter{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2); margin:0 0 var(--s-3);}
.ex-search{flex:1; min-width:200px; min-height:48px; padding:var(--s-2) var(--s-3); border:1px solid var(--line-strong); border-radius:var(--r-sm); background:var(--surface-2); color:var(--text); font-family:var(--mono); font-size:var(--t-base);}
.ex-search:focus{outline:var(--ring) solid var(--action-ink); outline-offset:2px; border-color:var(--action-ink);}
.ex-count{margin:0; font-family:var(--mono); font-size:var(--t-cap); letter-spacing:0.08em; text-transform:uppercase; color:var(--teal-ink);}
.ex-empty{color:var(--muted); font-size:var(--t-sm); margin:0 0 var(--s-3);}