/* =========================================================
   az-common.css — the site chrome, defined ONCE.

   #az-bar     the sticky 46px top bar
   #sl-strip   the brand strip
   #sl-foot    the footer

   These three components are identical on every page that carries them, so
   they live here and nowhere else. Before this file they were copied inline
   into 36 pages (313 KB of duplication) and changing the bar meant 36 edits.

   HOW TO EDIT
   Change a rule here and every page changes. There is no per-page copy to
   keep in step, and no page may redefine these selectors -- the build fails
   if one does.

   COLOUR
   No literal appears in this file. Every colour resolves from az-theme.css
   tokens, so the admin panel reaches the chrome like everything else.
   ========================================================= */
#az-bar{align-items:center;--az-bar-h:46px;display:flex;background:var(--chrome-bg);line-height:var(--lh-tight);box-sizing:border-box;--ok:var(--success,#4ade80);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;border-bottom:1px solid var(--chrome-line);min-height:46px;top:0;z-index:9998;padding:0 12px;gap:10px;position:sticky;font-size:var(--text-md);color:var(--chrome-text)}
#az-bar *{box-sizing:border-box}
#az-bar .az-acts{align-items:center;display:flex;gap:6px}
#az-bar .az-acts button{border:1px solid var(--chrome-line);background:var(--chrome-raised);cursor:pointer;white-space:nowrap;font-weight:650;border-radius:7px;padding:6px 11px;font:inherit;font-size:var(--text-sm);color:var(--chrome-text)}
#az-bar .az-acts button.primary:not(:disabled), #az-bar .az-acts button#zipBtn:not(:disabled){background:var(--chrome-accent);border-color:var(--chrome-accent);color:var(--chrome-ink)}
#az-bar .az-acts button:disabled{color:var(--chrome-muted);background:var(--chrome-raised);opacity:1;cursor:default}
#az-bar .az-acts svg{height:14px;width:14px;vertical-align:-2px}
#az-bar .az-actsep{flex:0 0 auto}
#az-bar .az-all{color:var(--chrome-muted);padding:5px 9px;border:1px solid var(--chrome-line);white-space:nowrap;border-radius:var(--radius-sm);font-size:var(--text-sm)}
#az-bar .az-all:hover{border-color:var(--chrome-line);color:var(--chrome-text)}
#az-bar .az-brand{align-items:center;display:flex;gap:8px;min-width:0}
#az-bar .az-grow{flex:1 1 auto}
#az-bar .az-here{align-items:center;display:flex;gap:7px;white-space:nowrap;font-weight:650;font-size:var(--text-md);color:var(--chrome-text)}
#az-bar .az-lock{align-items:center;gap:6px;color:var(--chrome-muted);white-space:nowrap;display:inline-flex;font-size:var(--text-sm)}
#az-bar .az-lock i{width:7px;height:7px;display:inline-block;border-radius:50%;font-style:normal;background:var(--ok)}
#az-bar .az-mark{color:var(--chrome-ink);place-items:center;display:grid;font-weight:800;width:22px;flex:0 0 auto;height:22px;background:var(--chrome-accent);border-radius:var(--radius-xs);font-size:var(--text-sm)}
#az-bar .az-menu{box-shadow:0 14px 34px color-mix(in srgb,var(--chrome-base) 70%,transparent);border:1px solid var(--chrome-line);left:0;min-width:290px;position:absolute;top:calc(100% + 6px);max-height:min(70vh,460px);background:var(--chrome-raised);overflow-y:auto;border-radius:var(--radius-sm);max-width:min(88vw,340px);z-index:9999;padding:6px}
#az-bar .az-menu a{display:flex;padding:8px 10px;gap:9px;border-radius:7px;align-items:flex-start}
#az-bar .az-menu a:hover{background:var(--chrome-hover)}
#az-bar .az-menu a[aria-current]{background:var(--chrome-hover)}
#az-bar .az-menu b{font-weight:650;font-size:var(--text-md);display:block}
#az-bar .az-menu em{flex:0 0 18px;text-align:center;font-style:normal}
#az-bar .az-menu span{color:var(--chrome-muted);font-size:var(--text-xs);line-height:1.35;display:block}
#az-bar .az-pick{position:relative}
#az-bar .az-pick>summary{align-items:center;border:1px solid var(--chrome-line);max-width:min(52vw,290px);display:flex;list-style:none;gap:7px;cursor:pointer;white-space:nowrap;background:var(--chrome-raised);padding:6px 11px;font-weight:600;overflow:hidden;border-radius:var(--radius-sm);text-overflow:ellipsis}
#az-bar .az-pick>summary::-webkit-details-marker{display:none}
#az-bar .az-pick>summary::after{border-right:4px solid transparent;content:"";width:0;height:0;flex:0 0 auto;border-top:5px solid var(--chrome-muted);border-left:4px solid transparent}
#az-bar .az-pick[open]>summary{border-color:var(--chrome-line)}
#az-bar .az-sep{flex:0 0 auto;background:var(--chrome-line);width:1px;height:20px}
#az-bar .az-tabs{display:flex;gap:3px}
#az-bar .az-tabs button{color:var(--chrome-muted);border:1px solid transparent;padding:5px 10px;cursor:pointer;white-space:nowrap;background:none;border-radius:7px;font-weight:600;font:inherit}
#az-bar .az-tabs button:hover{color:var(--chrome-text)}
#az-bar .az-tabs button[aria-pressed=true]{background:var(--chrome-accent);border-color:var(--chrome-accent);color:var(--chrome-ink)}
#az-bar .az-title{color:var(--chrome-text);white-space:nowrap;overflow:hidden;font-weight:700;font-size:var(--text-md);text-overflow:ellipsis}
#az-bar .az-title i{color:var(--chrome-muted);font-weight:600;font-style:normal}
#az-bar .az-undobar{left:auto;padding:0;box-shadow:none;position:static;background:none;bottom:auto;z-index:auto;gap:4px;border:0}
#az-bar .az-undobar button{padding:5px 9px;background:var(--chrome-raised);font-size:var(--text-sm);color:var(--chrome-text);border-radius:7px;border:1px solid var(--chrome-line)}
#az-bar .az-undobar button:disabled{color:var(--chrome-muted);background:var(--chrome-raised);opacity:1}
#az-bar .az-undoslot{align-items:center;flex:0 0 auto;display:flex;gap:4px}
#az-bar .az-undoslot button,#az-bar .az-undobar button{border:1px solid var(--chrome-line);padding:5px 9px;background:var(--chrome-raised);cursor:pointer;white-space:nowrap;font-weight:600;font-size:var(--text-sm);font:inherit;border-radius:7px;color:var(--chrome-text)}
#az-bar .az-undoslot button:disabled,#az-bar .az-undobar button:disabled{color:var(--chrome-muted);background:var(--chrome-raised);opacity:1;cursor:default}
#az-bar a{text-decoration:none;color:inherit}
#sl-foot{font-family:var(--sl-body);color:var(--muted);padding:24px 20px;margin-top:40px;border-top:1px solid var(--line);background:var(--paper);font-size:var(--text-md)}
#sl-foot .sl-copy{font-size:var(--text-md);color:var(--muted)}
#sl-foot .sl-disc{color:var(--muted);padding-top:14px;flex-basis:100%;border-top:1px solid var(--surface-2);margin-top:4px;font-size:var(--text-sm);line-height:var(--lh-base)}
#sl-foot .sl-disc strong{color:var(--muted)}
#sl-foot .sl-flinks{flex-wrap:wrap;display:flex;gap:16px;margin-left:auto}
#sl-foot .sl-fwrap{align-items:center;display:flex;flex-wrap:wrap;gap:18px;margin:0 auto;max-width:1400px}
#sl-foot a{transition:.15s;text-decoration:none;color:var(--muted)}
#sl-foot a:hover{color:var(--warning)}
#sl-strip{align-items:center;position:relative;display:flex;font-family:var(--sl-body);background:var(--bg);gap:14px;padding:9px 20px;border-bottom:1px solid var(--line);z-index:9999;color:var(--text);font-size:var(--text-md)}
#sl-strip .sl-all{border:1px solid var(--line);color:var(--muted);transition:.15s;font-family:var(--sl-mono);text-decoration:none;padding:6px 11px;border-radius:var(--radius-sm);font-size:var(--text-sm)}
#sl-strip .sl-all:hover{color:var(--text);border-color:var(--line)}
#sl-strip .sl-brand{align-items:center;display:flex;gap:9px;letter-spacing:-.01em;font-weight:800;font-family:var(--sl-display);text-decoration:none;font-size:17px;color:var(--text)}
#sl-strip .sl-brand svg{flex:none;display:block}
#sl-strip .sl-here{color:var(--muted);white-space:nowrap;font-family:var(--sl-mono);padding-left:14px;font-size:var(--text-sm);border-left:1px solid var(--line)}
#sl-strip .sl-here b{color:var(--focus)}
#sl-strip .sl-lock{align-items:center;border-radius:var(--radius-pill);border:1px solid var(--line);padding:5px 10px;gap:7px;white-space:nowrap;font-family:var(--sl-mono);font-size:var(--text-xs);display:inline-flex;color:var(--focus)}
#sl-strip .sl-lock::before{content:'';width:6px;background:var(--focus);box-shadow:0 0 8px var(--focus);border-radius:50%;height:6px}
#sl-strip .sl-lock:before{content:'';width:6px;background:var(--focus);box-shadow:0 0 8px var(--focus);border-radius:50%;height:6px}
#sl-strip .sl-spring{flex:1}
#sl-strip .sl-wm{-webkit-background-clip:text;background:linear-gradient(96deg,var(--wordmark-1) 0%,var(--wordmark-2) 48%,var(--wordmark-3) 100%);color:transparent;background-clip:text;-webkit-text-fill-color:transparent}
#sl-strip a:focus-visible{outline:2px solid var(--warning);outline-offset:2px}

@media (max-width:1100px){
  #az-bar .az-lock{display:none}
}

@media (max-width:640px){
  #az-bar .az-actsep{display:none}
}

@media (max-width:760px){
  #az-bar{overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;overflow-x:auto}
  #az-bar .az-grow{min-width:8px;flex:1 0 8px}
  #az-bar::-webkit-scrollbar{display:none}
  #az-bar>*{flex:0 0 auto}
}

@media (max-width:820px){
  #az-bar .az-all{display:none}
}

@media (max-width:900px){
  #az-bar{overflow-x:auto}
  #az-bar .az-lock,#az-bar .az-sep,#az-bar .az-title{display:none}
}

@media(max-width:470px){
  #sl-strip .sl-here,#sl-strip .sl-lock{display:none}
}

@media(max-width:520px){
  #sl-strip .sl-here{display:none}
}

@media(max-width:640px){
  #sl-strip{flex-wrap:wrap;gap:8px 12px}
  #sl-strip .sl-here{border-left:0;padding-left:0}
  #sl-strip .sl-here,#sl-strip .sl-lock span{display:none}
}

@media(max-width:700px){
  #sl-strip .sl-here{display:none}
}

@media(max-width:720px){
  #az-bar .az-lock,#az-bar .az-sep,#az-bar .az-title{display:none}
}

@media(max-width:820px){
  #sl-strip{position:relative}
}

/* ======================================================================
   HUB CARD GRID — narrow screens
   ----------------------------------------------------------------------
   The five studio hubs lay their cards out with
   grid-template-columns:repeat(var(--cols,5),minmax(0,1fr)) and set
   --cols:5 as an INLINE STYLE on the section. An inline custom property
   cannot be overridden by a media query, so every attempt to reduce the
   column count was ignored and a phone got five columns about eighty
   pixels wide, one word per line.

   There is a media query at 900px that sets .gc-grid to auto-fit, but
   .gc-wide .gc-grid is more specific and sits outside it, so that lost too.

   Setting grid-template-columns directly, at a specificity that beats
   both, is what actually works: the declaration wins regardless of what
   --cols says.
   ====================================================================== */
@media (max-width: 1200px){
  .gc .gc-grid,
  .gc .gc-wide .gc-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}
@media (max-width: 980px){
  .gc .gc-grid,
  .gc .gc-wide .gc-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width: 720px){
  .gc .gc-grid,
  .gc .gc-wide .gc-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 460px){
  /* One card per row. Below this a two-column layout leaves roughly 190px
     per card, which is where the headings start breaking mid-phrase. */
  .gc .gc-grid,
  .gc .gc-wide .gc-grid{ grid-template-columns:1fr; }
  .gc .card{ min-height:0; }
}