/* Games In Class shared components (1.139.2). Built only from the --ds-* tokens in tokens.css; see DESIGN-RULES.md.
   Each component has ONE look. Pages do not restyle it; they only fill it.
   1) Page header: icon + H1 + one-line lead (+ the page's main action). Used by .page-head, .lib-head, .hub-head, .pg-head and the dashboard greeting. */
:root{--ds-head-gap:var(--ds-s4)}
@media (min-width:600px){:root{--ds-head-gap:var(--ds-s5)}}

.page-content :is(.page-head,.lib-head,.hub-head,.pg-head,.dash-me) h1{
  font-family:var(--ds-font-head);font-weight:800;font-size:var(--ds-fs-h1);line-height:var(--ds-lh-head);
  margin:0;display:flex;align-items:center;gap:.4em;text-wrap:balance;overflow:visible;padding-top:0}
.page-content :is(.page-head,.lib-head,.hub-head,.pg-head,.dash-me) h1>i,
.page-content :is(.page-head,.lib-head,.hub-head,.pg-head,.dash-me) h1>svg{flex:none;font-size:.82em;line-height:1}
.page-content :is(.page-head,.lib-head,.hub-head) :is(h1)+p,
.page-content .page-head>p,.page-content .dash-me p{
  margin:var(--ds-s1) 0 0;color:var(--muted);font-size:15px;line-height:var(--ds-lh-text);max-width:68ch}
@media (min-width:900px){.page-content :is(.page-head,.lib-head,.hub-head) h1+p,.page-content .page-head>p{font-size:var(--ds-fs-body)}}
.page-content :is(.page-head,.lib-head,.hub-head){margin-bottom:var(--ds-head-gap)}
.page-content .page-head.row.between{align-items:center;gap:var(--ds-s3) var(--ds-s4)}
@media (max-width:600px){
  .page-content .page-head.row.between{flex-direction:column;align-items:stretch}
  .page-content .page-head>.btn{width:100%;justify-content:center;min-height:var(--ds-tap)}
}

/* 2) Buttons (1.139.3). Four kinds: primary (blue, ONE per screen), default, quiet (.btn-ghost), danger. Sizes: default 44px, small 36px. */
.btn{font:800 15px/1.15 var(--ds-font-head);border-width:var(--ds-bw);border-radius:var(--ds-r-ctl);min-height:var(--ds-tap);padding:0 var(--ds-s4);gap:var(--ds-s2);box-shadow:var(--shadow-sm)}
.btn-sm{font-size:14px;min-height:var(--ds-tap-sm);padding:0 var(--ds-s3);border-width:2px;border-radius:var(--ds-r-sm)}
.btn-primary{background:var(--ds-brand);color:var(--ds-brand-ink)}
.btn-primary:hover{background:var(--ds-brand);color:var(--ds-brand-ink);filter:brightness(1.08)}
.btn-ghost{box-shadow:none;border-color:transparent}
.btn-ghost:hover{box-shadow:none;border-color:var(--hard)}
.btn:focus-visible,.chip:focus-visible,.tab:focus-visible,.type-tab:focus-visible,.pg-pill:focus-visible,.jb-tab:focus-visible{outline:var(--ds-focus);outline-offset:2px}

/* 3) Pills pick or filter (chip, pg-pill, jb-tab). Selected = brand blue. Never used for actions. */
:root{--ds-pill-h:36px}@media (max-width:599px){:root{--ds-pill-h:40px}}
.chip,.pg-pill,.jb-tab{display:inline-flex;align-items:center;gap:var(--ds-s2);min-height:var(--ds-pill-h);padding:0 14px;border:2px solid var(--hard);border-radius:var(--ds-r-pill);font:700 14px/1.15 var(--ds-font-body);box-sizing:border-box}
.chip:hover,.pg-pill:hover,.jb-tab:hover{background:var(--ds-raised);color:var(--text)}
.chip.active,.chip.active:hover,.pg-pills .pg-pill.on,.pg-pills .pg-pill.on:hover,.pg-pill.on,.jb-tab[aria-selected=true]{background:var(--ds-brand);color:var(--ds-brand-ink)}
.chip.active i,.jb-tab[aria-selected=true] i{color:inherit}
html[data-theme=light][data-lstyle=sky] :is(.chip.active,.chip.active:hover,.pg-pill.on,.pg-pill.on:hover,.jb-tab[aria-selected=true]){color:var(--ds-brand-ink)}
html[data-theme=light] a.pg-pill.on{color:var(--ds-brand-ink)}

/* 4) Tabs act as a bar of rounded rectangles (.tab, .type-tab). One row if it fits; a 2-column grid on phones; text wraps, nothing is clipped. */
.tab,.type-tab{font:800 15px/1.15 var(--ds-font-head);border-width:var(--ds-bw);border-radius:var(--ds-r-ctl);min-height:var(--fbh,var(--ds-tap));padding:0 var(--ds-s4);display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-s2);box-sizing:border-box;text-align:center}
.tab.active,.type-tab[aria-pressed=true]{background:var(--ds-brand);color:var(--ds-brand-ink)}
.type-tab:hover:not([aria-pressed=true]){background:var(--ds-raised);color:var(--text)}
html[data-theme=light][data-lstyle=sky] :is(.tab.active,.type-tab[aria-pressed=true]){color:var(--ds-brand-ink)}
@media (max-width:599px){
  .page-content .tabs:not(.hub-tabs){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ds-s2)}
  .page-content .tabs:not(.hub-tabs) .tab{min-width:0;padding:0 var(--ds-s2)}
}
/* Header "Join a game": the link colour rule was winning over its hover/active text (blue on blue, 1.5:1 in light mode). */
html[data-theme=light][data-lstyle=sky] a.hdr-join:is(:hover,.active){color:var(--ds-brand-ink)}

/* 5) Cards and panels (1.139.4): frame, corner and padding come from the page tokens, so phone, tablet and desktop step together. */
.panel,.card,.stat,.modal-box,.menu-panel{border-width:var(--ds-bw);border-radius:var(--ds-r-panel)}
.panel{padding:var(--ds-pad);margin-bottom:var(--ds-s4)}
.stat{padding:var(--ds-pad)}
.stats{gap:var(--ds-gap)}
.modal-box{padding:var(--ds-pad)}
.table-wrap{border-width:var(--ds-bw);border-radius:var(--ds-r-panel)}
@media (min-width:600px){.panel{margin-bottom:var(--ds-s5)}}

/* 6) Phones (1.139.5): hover and press lifts are flat so a tap never leaves a heavy shadow behind; library cards follow the page tokens and cannot be wider than the screen. */
@media (max-width:600px){
  html[data-theme=light][data-lstyle=sky] :is(.card,.card:hover,.howto li){box-shadow:0 2px 0 var(--hard)}
  .btn:hover,.card:hover{box-shadow:var(--shadow)}
}
.btn:active{box-shadow:none}
.ml-grid{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
.ml-card{border-width:var(--ds-bw);border-radius:var(--ds-r-panel);padding:var(--ds-s3);min-width:0;max-width:100%;box-sizing:border-box}
.ml-main,.ml-main .aa-t{min-width:0}
/* Page header with an action: the title block takes the free space, the action sits at its right whenever there is room (tablet included). */
@media (min-width:601px){.page-content .page-head.row.between>div:first-child{flex:1 1 320px;min-width:0}}
.page-content .page-head.row.between>.btn{flex:none}
/* a small link line under the lead (Recently deleted) gets its own breathing room */
.page-content .page-head p.small{margin:var(--ds-s3) 0 0;font-size:14px;color:var(--soft)}
.page-content .page-head p.small i{margin-right:var(--ds-s2)}

/* 7) Space picker (1.139.10): one small button per activity opens a card of shared folders (in these / add to). */
.spp{display:inline-block;position:relative;max-width:100%}
.spp>summary{list-style:none;cursor:pointer;white-space:nowrap;max-width:100%;user-select:none}
.spp>summary::-webkit-details-marker{display:none}
.spp .spp-car{font-size:.7em;margin-left:2px;transition:transform .15s}.spp[open] .spp-car{transform:rotate(180deg)}
.spp.has>summary{background:var(--ds-raised)}
.spp-pop{position:fixed;z-index:1200;width:min(300px,calc(100vw - 24px));max-height:min(60vh,420px);overflow:auto;background:var(--panel);border:var(--ds-bw) solid var(--hard);border-radius:var(--ds-r-panel);box-shadow:var(--shadow);padding:var(--ds-s2);text-align:left;white-space:normal}
.spp-h{font:700 12px var(--ds-font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:6px 8px 2px}
.spp-row{display:flex;align-items:center;gap:var(--ds-s2);margin:0}
.spp-row>a,.spp-add{flex:1;min-width:0;display:flex;gap:8px;align-items:center;padding:9px 10px;border-radius:8px;color:var(--text);text-decoration:none;font:700 14px/1.2 var(--ds-font-body);background:none;border:0;cursor:pointer;text-align:left;overflow-wrap:anywhere}
.spp-row>a:hover,.spp-add:hover{background:var(--panel2)}
.spp-row form{margin:0}
.spp-x{width:36px;height:36px;flex:none;border-radius:50%;border:2px solid var(--hard);background:var(--panel2);color:var(--text);cursor:pointer;display:inline-grid;place-items:center;padding:0}
.spp-x:hover{background:var(--rose);color:var(--on-rose)}
.spp-bd{position:fixed;inset:0;background:rgba(2,6,23,.5);z-index:1190}
@media (max-width:600px){.spp[open] .spp-pop{left:12px;right:12px;top:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px));width:auto;max-height:70vh;max-height:70dvh}}

/* 8. Filter rows (Community) and library search bar: full width stacked on phones */
.filter-form{padding:var(--ds-pad)}
.filter-form .f-wide{flex:2 1 200px;min-width:0}
.filter-form .f-mid{flex:1 1 160px;min-width:0}
.filter-form .f-go{align-self:flex-end}
.filter-form select,.filter-form input{width:100%;min-width:0}
@media (max-width:600px){
  .filter-form .f-wide,.filter-form .f-mid{flex:1 1 100%}
  .filter-form .f-go{align-self:stretch;width:100%}
  .ml-bar input[type=search]{flex:1 1 100%;min-width:0;width:100%}
}

/* 9. Admin tables on phones and small tablets: keep readable column widths and scroll sideways inside the box,
      instead of squeezing every column to a few letters (Users email, Free APIs, System check, Database check). */
@media (max-width:900px){
  .page-content:has(.admin-menu) .table-wrap:not(:has(.stack-sm)) :is(.data-table,.table){min-width:600px}
  .page-content:has(.admin-menu) .data-table td:first-child code{white-space:nowrap}
  .page-content:has(.admin-menu) .data-table :is(.badge,.status,.pill){white-space:nowrap}
}