/* Phase 2 reference surfaces only. Loaded after the existing page styles.
   The shared navbar reserves a fixed 54px in navbar.css, including without JS. */
.lo-wrap,.ttk-wrap,.sg-wrap,.cb-light .cb-wrap{padding:32px 28px 60px}
.lo-hero,.ttk-hero,.sg-hero,.cb-light .cb-hero{padding:24px 0}
.lo-sub,.ttk-sub,.sg-sub,.cb-sub{max-width:66ch;margin:10px 0 16px;color:var(--ink-1);font-size:1rem;line-height:1.6}
.lo-herometa,.ttk-herometa,.sg-herometa,.cb-light .cb-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0}
.lo-chip,.ttk-chip,.sg-chip-meta,.cb-light .cb-chip{display:inline-flex;flex:0 1 auto;flex-direction:row;align-items:baseline;gap:7px;padding:0;border:0;background:none;border-radius:0;font-size:.68rem;letter-spacing:.04em;box-shadow:none}
.lo-chip strong,.ttk-chip strong,.sg-chip-meta strong,.cb-light .cb-chip strong{font-size:.8rem;line-height:1.5}
.lo-chip:hover,.ttk-chip:hover,.sg-chip-meta:hover,.cb-light .cb-chip:hover{transform:none;background:none;border-color:transparent}

/* The primary class links stay visible together, including on a phone. */
.lo-jumps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 0 24px}
.lo-jumps a{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 10px;min-height:44px;padding:10px 12px;background:var(--surface);border:1px solid var(--line-2);border-radius:10px;color:var(--text);font-weight:700}
.lo-jumps span{font:500 .7rem/1.4 'JetBrains Mono',monospace;color:var(--dim)}
.lo-jumps a:hover{border-color:var(--accent);background:var(--surface2)}
.lo-class-block{margin-top:24px}
.lo-class-title{margin-bottom:0}
.lo-guide{display:inline-flex;align-items:center;min-height:44px;margin-bottom:12px;gap:8px;font-size:.88rem}
.lo-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));align-items:start}
.lo-card,.cb-light .cb-card{padding:24px;min-width:0;will-change:auto}
.lo-card-head,.cb-light .cb-card-head{align-items:flex-start}
.lo-playstyle,.cb-light .cb-playstyle{color:var(--ink-1)}
.lo-spec>div,.cb-light .cb-spec>div{grid-template-columns:112px minmax(0,1fr);gap:12px}
.lo-spec dd,.cb-light .cb-spec dd{overflow-wrap:anywhere}
.lo-equipment,.cb-equipment{display:block;line-height:1.7}
.lo-card-actions,.cb-light .cb-card-actions{justify-content:stretch;margin-top:16px;padding-top:16px}
.lo-build-cta,.cb-light .cb-build-cta{width:100%}
.lo-details,.cb-details{margin-top:12px;border-top:1px solid var(--line);font-size:.9rem;line-height:1.65}
.lo-details summary,.cb-details summary{min-height:44px;padding:12px 0;cursor:pointer;color:var(--ink-1);font-weight:600}
.lo-details p,.cb-details p{margin:0 0 12px;color:var(--ink-1)}
.lo-details summary:focus-visible,.cb-details summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.lo-glance,.ttk-glance,.sg-glance,.cb-light .cb-answer{margin-top:32px;padding:24px;background:var(--surface);box-shadow:none}
.lo-glance::before,.ttk-glance::before,.sg-glance::before,.cb-light .cb-answer::before{display:none}
.lo-wrap [id],.ttk-wrap [id],.cb-light .cb-wrap [id]{scroll-margin-top:78px}
.cb-light .cb-crumbs{margin:0;color:var(--ink-2)}
.cb-light .cb-crumbs a{color:var(--ink-2);display:inline-flex;align-items:center;min-height:44px}
.cb-light .cb-grid{align-items:start}
.cb-light .cb-builds{margin-top:0}
.ttk-assumptions{margin:0 0 16px;font-size:.88rem;color:var(--ink-1)}
.ttk-tablewrap{margin-top:0}
.ttk-scroll-hint{margin:0 0 12px}

/* Compatibility first. Keep the catalog artwork at a supporting scale. */
.sg-hero{grid-template-columns:minmax(0,1fr) 160px;gap:24px;min-height:0}
.sg-hero-art{height:160px;min-height:0}
.sg-hero-optic{max-height:160px;width:100%;object-fit:contain}
.sg-subnav{top:54px;margin:0 0 24px}
.sg-subnav-in{padding:8px 0;gap:4px}
.sg-subnav a{padding:8px 10px}
.sg-weapons{margin-top:24px}
.sg-wcard{padding:20px;align-items:stretch;gap:16px;will-change:auto}
.sg-wcard-body{min-width:0;padding:0}
.sg-wshot{border-radius:8px;overflow:hidden}
.sg-wnote{margin:12px 0 0}
.sg-compat{margin-top:8px}
.sg-wcard-head{flex-wrap:wrap;gap:8px}
.sg-wrap [id]{scroll-margin-top:132px}
.sg-compat{line-height:1.8}

@media(max-width:768px){
  .lo-wrap,.ttk-wrap,.sg-wrap,.cb-light .cb-wrap{padding:18px 18px 48px}
  .lo-hero,.ttk-hero,.sg-hero,.cb-light .cb-hero{padding:24px 0}
  .lo-jumps{gap:16px}
  .lo-jumps a{padding:10px 6px;flex-direction:column}
  .sg-hero{display:block}
  .sg-hero-art{display:none}
  .sg-subnav{margin-left:0;margin-right:0}
  .sg-subnav-in{padding-right:76px}
  .lo-card,.cb-light .cb-card{padding:24px}
  .lo-spec>div,.cb-light .cb-spec>div{grid-template-columns:112px minmax(0,1fr)}
}
@media(max-width:360px){
  .lo-spec>div,.cb-light .cb-spec>div{grid-template-columns:1fr;gap:2px}
}
@media(prefers-reduced-motion:reduce){
  .lo-wrap *,.ttk-wrap *,.sg-wrap *,.cb-light .cb-wrap *{transition:none;animation:none;scroll-behavior:auto}
}