/* ============================================================================
   COSE chrome-only overlay (v0.2) — for pages that have their OWN colour
   tokens (tools / apps with a bespoke palette). Unlike cose-theme.css it does
   NOT touch the page's :root, so it never clobbers the page's own colours.
   It only styles the CoSE chrome (rail, brand, map/theme toggles), which gets
   its colours from tokens scoped to the chrome elements themselves.

   Pair this with a small per-page mapping (cose-map on each page) that maps the
   page's own tokens to the CoSE light/dark palette so the page itself follows
   the theme and the light/dark toggle works.
   ========================================================================== */

:root{ --rail:288px; }

/* ---- top bar: brand + map toggle + theme toggle ---- */
.topbar{position:fixed;top:12px;left:12px;z-index:40;display:flex;align-items:center;gap:8px}
.cose-brand{display:inline-flex;align-items:center;line-height:0}
.cose-brand img{height:30px;width:30px;display:block;border-radius:7px}
.cose-brand:hover{filter:brightness(1.05)}

.map-toggle{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:8px;cursor:pointer;
  border:1px solid var(--line);background:var(--card);color:var(--fg);
  font:600 .85rem/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  box-shadow:0 1px 2px rgba(0,0,0,.04)}
.map-toggle:hover{filter:brightness(.98)}
.map-toggle .bars{display:inline-block;width:16px;height:12px;position:relative}
.map-toggle .bars::before,.map-toggle .bars::after,.map-toggle .bars span{
  content:"";position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor}
.map-toggle .bars::before{top:0}.map-toggle .bars span{top:5px}.map-toggle .bars::after{top:10px}
.map-toggle .lbl{display:none}
@media (min-width:900px){ .map-toggle .lbl{display:inline} }

.cose-theme-btn{display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:34px;border-radius:8px;cursor:pointer;
  border:1px solid var(--line);background:var(--card);color:var(--fg);
  box-shadow:0 1px 2px rgba(0,0,0,.04)}
.cose-theme-btn:hover{filter:brightness(.98)}
.cose-theme-btn svg{display:block}
@media (min-width:1180px){
  body.map-open .map-toggle,
  body.map-open .cose-theme-btn{background:transparent;border-color:transparent;box-shadow:none}
}

/* ---- the rail ---- */
.sitebar{
  position:fixed;top:0;left:0;bottom:0;width:var(--rail);z-index:39;
  background:var(--card);border-right:1px solid var(--line);
  transform:translateX(-100%);transition:transform .22s ease;
  overflow-y:auto;padding:64px 0 24px;
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
body.map-open .sitebar{transform:translateX(0)}
.sitebar .cose-panel{padding:14px 20px}
.sitebar h4{margin:0 0 4px;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.sitebar .cose-switch{display:flex;gap:4px;margin:0 20px 6px;
  background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:3px}
.sitebar .cose-switch button{flex:1;border:0;background:transparent;color:var(--muted);
  font:600 .82rem/1 inherit;padding:7px 6px;border-radius:6px;cursor:pointer}
.sitebar .cose-switch button[aria-selected="true"]{background:var(--accent);color:#fff}

.docmap{list-style:none;margin:6px 0 0;padding:0}
.docmap li{margin:0}
.docmap a{display:block;padding:6px 20px;color:var(--muted);
  font-size:.9rem;border-left:2px solid transparent;line-height:1.35;text-decoration:none}
.docmap a:hover{color:var(--fg)}
.docmap a.cose-active{color:var(--accent);border-left-color:var(--accent);
  background:linear-gradient(90deg,rgba(59,110,165,.08),transparent)}
.docmap a.lvl-3{padding-left:34px;font-size:.85rem}

.sitemap{list-style:none;margin:6px 0 0;padding:0}
.sitemap li{margin:0}
.sitemap a{display:block;padding:9px 20px;color:var(--fg);font-size:.9rem;line-height:1.25;text-decoration:none}
.sitemap a:hover{background:rgba(59,110,165,.06)}
.sitemap a.cose-current{border-left:2px solid var(--accent2);background:rgba(63,182,168,.08)}
.sitemap a small{display:block;color:var(--muted);font-size:.78rem;font-weight:400;margin-top:2px}
.sitemap span.pending{color:var(--muted);cursor:default}
.sitemap .cose-group{padding:14px 20px 4px;font-size:.7rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);font-weight:700}

.map-scrim{position:fixed;inset:0;background:rgba(10,15,22,.38);z-index:38;
  opacity:0;visibility:hidden;transition:opacity .2s}
body.map-open .map-scrim{opacity:1;visibility:visible}

.cose-foot{display:inline-flex;align-items:center;gap:6px;vertical-align:middle;margin-right:9px;
  font-weight:600;color:#4f8fc9}
.cose-foot img{height:20px;width:20px;display:block;border-radius:5px}
.cose-foot:hover{text-decoration:none;filter:brightness(1.05)}

@media (min-width:1180px){
  body.map-open .page{margin-left:var(--rail)}
  body.map-open .map-scrim{display:none}
}
@media (prefers-reduced-motion:reduce){
  .sitebar{transition:none}.map-scrim{transition:none}
}

/* Chrome palette — scoped to the chrome only (theme.js sets cose-dark/cose-light
   from the page's brightness or the toggle). Never leaks to the page. */
.sitebar.cose-light, .topbar.cose-light{
  --bg:#ffffff; --fg:#1a2230; --muted:#5a6473; --line:#e5e9f0;
  --card:#f7f9fc; --accent:#3B6EA5; --accent2:#3FB6A8; }
.sitebar.cose-dark, .topbar.cose-dark{
  --bg:#0f141b; --fg:#e6ebf2; --muted:#9aa6b6; --line:#2b3543;
  --card:#161d27; --accent:#6ea3d8; --accent2:#54c9ba; }
.sitebar.cose-dark{background:#161d27;border-right-color:#2b3543}

/* draggable resize handle on the rail edge */
.cose-resize{position:absolute;top:0;right:0;bottom:0;width:12px;cursor:ew-resize;z-index:3;display:flex;align-items:center;justify-content:flex-end}
.cose-resize::before{content:"";width:4px;height:38px;margin-right:1px;border-radius:3px;background:var(--line);transition:background .15s,height .15s}
.cose-resize:hover::before,.cose-resize:active::before{background:var(--accent);height:56px}

/* ---- reusable summary hero (for app/tool pages that lack the content-page hero) ---- */
.cose-hero{max-width:1000px;margin:0 auto;padding:52px 20px 6px}
.cose-hero .cose-eyebrow{color:var(--accent);font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;font-size:.72rem;margin:0 0 8px}
.cose-hero h1{font-size:1.85rem;line-height:1.15;margin:0 0 10px;color:var(--fg)}
.cose-hero .cose-lede{font-size:1.05rem;color:var(--muted);margin:0 0 16px;max-width:72ch;line-height:1.55}
.cose-btns{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 6px}
.cose-btn{display:inline-block;padding:8px 15px;border-radius:8px;font-weight:600;font-size:.9rem;
  border:1px solid var(--line);background:var(--card);color:var(--fg);text-decoration:none}
.cose-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.cose-btn:hover{filter:brightness(1.05);text-decoration:none}

/* "all projects" hub link button */
.cose-hub-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:34px;
  border-radius:8px;cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--fg);
  box-shadow:0 1px 2px rgba(0,0,0,.04);text-decoration:none}
.cose-hub-btn:hover{filter:brightness(.98);text-decoration:none}
.cose-hub-btn svg{display:block}
@media (min-width:1180px){ body.map-open .cose-hub-btn{background:transparent;border-color:transparent;box-shadow:none} }