/* ============================================================
   LEFT-NAVIGATION GOVERNANCE  ·  sitewide standard
   ------------------------------------------------------------
   The single source of truth for every LEFT-SIDE publication
   rail on the site. Do NOT restyle left rails inside individual
   pages — add the rail markup and let this file govern it.

   This file does NOT touch the top global navigation (.nav).

   WHO USES THIS FILE
     • Thinking publication rail .......... .cos-nav  (loaded via @import in thinking.css)
     • Victory / Journey publication rail .. .jside / .js-*  (linked directly on victory-*.html / case-victory.html)
     • Any FUTURE left rail ............... reuse the .cos-* pattern, or follow the layer roles below.

   EDITORIAL GOVERNANCE — the rail is a quiet guide, not the subject.
   Calm, structured, legible, easy to scan, clearly hierarchical,
   editorial rather than app-like. No filled pills, no tab bars.

   THE SIX HIERARCHY LAYERS (each gets a DISTINCT visual role —
   different size / weight / spacing, never uniform):
     1. Back link / publication return  — quiet accent link
     2. Publication map (title)         — uppercase eyebrow + rule
     3. Current section / chapter       — section label, accent when current
     4. Current page                    — strong: accent + weight (+ left indicator)
     5. Local article / chapter list    — readable items, faint dividers
     6. Previous / next                 — handled by the page read-bar / pager

   STATE LANGUAGE (consistent everywhere):
     passive — readable, never faint           (--lnav-passive)
     active  — accent + weight + subtle rule    (--lnav-active)  ·  no heavy fills
     hover   — gentle colour shift + faint bg   (--lnav-hover-bg)

   NAMING CONVENTION
     --lnav-*  tokens below drive both rails. Spacing is generous
     by design; sizes step DOWN as the hierarchy gets more local.
   ============================================================ */

:root{
  --lnav-font:        var(--font-system, 'Inter', sans-serif);
  --lnav-passive:     var(--ink-2, #4a4d68);              /* quiet but readable */
  --lnav-strong:      var(--ink, #13153f);
  --lnav-active:      var(--accent, #2f3aa3);             /* blueprint accent */
  --lnav-muted:       var(--muted, #8a8da3);
  --lnav-rule:        var(--line, rgba(19,21,63,.14));    /* restrained rule */
  --lnav-rule-faint:  rgba(19,21,63,.06);                 /* item dividers */
  --lnav-hover-bg:    var(--paper-2, rgba(19,21,63,.035));
  --lnav-eyebrow:     11px;   /* layer 2 / section labels */
  --lnav-item:        14px;   /* layer 5 list items */
  --lnav-item-sub:    13.5px; /* deeper / discipline items */
  --lnav-indent:      24px;   /* article-list indent under a section */
}

/* ============================================================
   THINKING RAIL  ·  .cos-nav  (Creative Operating System)
   Layers: cos-home = 1+2 · summary = 3 · .here = 4 · cos-arts = 5
   ============================================================ */
.cos-nav{font-family:var(--lnav-font)}

/* layer 1 + 2 — publication return + map title */
.cos-home{
  display:block;font-weight:600;font-size:var(--lnav-eyebrow);
  letter-spacing:.16em;text-transform:uppercase;color:var(--lnav-muted);
  padding:0 0 16px;margin:0 0 16px;border-bottom:1px solid var(--lnav-rule);
  transition:color .18s;
}
.cos-home:hover{color:var(--lnav-strong)}
.cos-home[aria-current="page"]{color:var(--lnav-active)}

/* top-level direct link (e.g. 00 · The Work at a Glance) — matches a chapter
   summary's rhythm but navigates immediately, with no disclosure chevron. */
.cos-toplink{
  display:flex;align-items:center;gap:12px;
  padding:13px 2px;font-weight:600;font-size:var(--lnav-item);letter-spacing:-.005em;
  color:var(--lnav-passive);border-bottom:1px solid var(--lnav-rule-faint);
  transition:color .18s;
}
.cos-toplink:hover{color:var(--lnav-strong)}
.cos-toplink[aria-current="page"]{color:var(--lnav-active)}
.cos-toplink[aria-current="page"] .cos-n{color:var(--lnav-active)}

/* layer 3 — section (a library) */
.cos-lib{border-bottom:1px solid var(--lnav-rule-faint)}
.cos-lib > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;
  padding:13px 2px;font-weight:600;font-size:var(--lnav-item);letter-spacing:-.005em;
  color:var(--lnav-passive);transition:color .18s;
}
.cos-lib > summary::-webkit-details-marker{display:none}
.cos-lib > summary:hover{color:var(--lnav-strong)}
.cos-lib > summary:focus-visible{outline:2px solid var(--lnav-active);outline-offset:3px;border-radius:3px}
.cos-lib[open] > summary,
.cos-lib > summary.cur{color:var(--lnav-active)}
.cos-n{flex:0 0 auto;color:var(--lnav-muted);font-weight:500;font-size:11px;letter-spacing:.1em}
.cos-lib[open] > summary .cos-n,
.cos-lib > summary.cur .cos-n{color:var(--lnav-active)}
/* disclosure affordance — a quiet chevron that rotates open */
.cos-chev{
  flex:0 0 auto;margin-left:auto;width:7px;height:7px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  opacity:.45;transform:rotate(-45deg);transition:transform .2s,opacity .2s;
}
.cos-lib[open] > summary .cos-chev{transform:rotate(45deg);opacity:.85}

/* layer 5 — local article list */
.cos-arts{overflow:hidden;padding:2px 0 16px var(--lnav-indent)}
details.cos-lib[open] > .cos-arts{animation:lnavOpen .22s ease}
.cos-arts a{
  display:block;padding:8px 0;font-size:var(--lnav-item-sub);line-height:1.45;
  color:var(--lnav-passive);border-bottom:1px solid var(--lnav-rule-faint);
  transition:color .18s;
}
.cos-arts a:last-child{border-bottom:0}
.cos-arts a:hover{color:var(--lnav-strong)}
/* layer 4 — current page */
.cos-arts a.here{color:var(--lnav-active);font-weight:600}

@keyframes lnavOpen{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){details.cos-lib[open] > .cos-arts{animation:none}}

/* let the rail's host column own the gutters on wrapped index/landing pages */
.ref-content .wrap{max-width:none;margin:0;padding:0}

/* ============================================================
   VICTORY / JOURNEY RAIL  ·  .jside / .js-*
   Same governance, same family. Markup + reading order unchanged.
   Layers: .js-title = 1+2 · .js-section = 3 · .js-group = 3b ·
           .js-item = 5 · [aria-current] = 4
   This block fully owns the rail (desktop + mobile) so it
   supersedes any legacy inline rail CSS on the Victory pages.
   ============================================================ */
.jside{
  position:sticky;top:128px;align-self:start;max-height:calc(100vh - 152px);
  overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:2px;
  padding:2px 8px 12px 0;scrollbar-width:thin;font-family:var(--lnav-font);
}
.jside::-webkit-scrollbar{width:6px}
.jside::-webkit-scrollbar-thumb{background:var(--lnav-rule);border-radius:3px}

/* layer 1 + 2 — publication title */
.js-title{
  font-weight:600;font-size:var(--lnav-eyebrow);letter-spacing:.16em;text-transform:uppercase;
  color:var(--lnav-muted);padding:0 0 16px;margin:0 0 8px;border-bottom:1px solid var(--lnav-rule);
}
/* layer 3 — section */
.js-section{
  font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lnav-strong);margin:30px 0 10px;padding-left:0;
}
/* layer 3b — group within a section */
.js-group{
  font-weight:600;font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--lnav-muted);margin:20px 0 6px;padding-left:14px;
}
/* layer 5 — items */
.js-item{
  display:block;font-weight:500;font-size:var(--lnav-item);line-height:1.4;
  color:var(--lnav-passive);padding:8px 10px 8px 14px;border-left:2px solid transparent;
  border-radius:0 5px 5px 0;cursor:pointer;white-space:normal;
  transition:color .18s,background .18s,border-color .18s;
}
.js-item:hover{color:var(--lnav-strong);background:var(--lnav-hover-bg)}
/* layer 4 — current page: accent + weight + quiet left indicator (no fill) */
.js-item[aria-current="true"]{color:var(--lnav-active);background:none;border-left-color:var(--lnav-active);font-weight:600}
.js-sub{padding-left:14px}
.js-disc{padding-left:28px;font-size:var(--lnav-item-sub)}

@media (min-width:901px){
  .jside .js-section{margin-top:34px}
  .jside .js-group{margin-top:22px}
  .jside .js-title{margin-bottom:14px}
}
/* mobile — the rail becomes a quiet horizontal scroller (unchanged behavior) */
@media (max-width:900px){
  .jside{
    position:sticky;top:118px;z-index:18;flex-direction:row;align-items:center;gap:6px;
    max-height:none;overflow-x:auto;overflow-y:hidden;background:var(--paper);
    border-bottom:1px solid var(--lnav-rule);padding:10px 0;margin:0 0 22px;
  }
  .jside::-webkit-scrollbar{display:none}
  .js-title{flex:0 0 auto;align-self:center;border:0;padding:0 8px 0 0;margin:0;font-size:12px}
  .js-item,.js-sub,.js-disc{flex:0 0 auto;border-left:0;border-bottom:2px solid transparent;border-radius:0;padding:8px 8px;font-size:14px;white-space:nowrap}
  .js-item[aria-current="true"]{border-left:0;border-bottom-color:var(--lnav-active);background:none}
  .js-section{flex:0 0 auto;align-self:center;margin:0 0 0 8px;padding:0 0 0 10px;border-left:1px solid var(--lnav-rule);color:var(--lnav-active);font-size:10px}
  .js-group{flex:0 0 auto;align-self:center;margin:0 0 0 6px;padding:0 0 0 8px;border-left:1px solid var(--lnav-rule);font-size:9.5px}
}

/* ============================================================
   JOURNEY RAIL CONTAINER  ·  .jrail
   Victory/Journey reuses the shared .cos-nav component (above)
   inside this sticky container. Same behaviour as Thinking's
   .ref-rail, offset for the Victory header+pnav stack, and it
   drops below the content on mobile (never a horizontal bar).
   ============================================================ */
.jrail{position:sticky;top:128px;align-self:start;max-height:calc(100vh - 152px);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}
.jrail::-webkit-scrollbar{width:6px}
.jrail::-webkit-scrollbar-thumb{background:var(--lnav-rule);border-radius:3px}
@media (max-width:900px){
  .jrail{position:static;order:2;max-height:none;overflow:visible;margin-top:40px;padding-top:24px;border-top:1px solid var(--lnav-rule)}
}
/* sub-group label inside an expanded section (e.g. Visual / Verbal Identity) */
.cos-arts .cos-group{font-family:var(--lnav-font);font-weight:600;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--lnav-muted);margin:16px 0 4px}
.cos-arts .cos-group:first-child{margin-top:2px}

/* ============================================================
   SHARED PUBLICATION LAYOUT  ·  .pub-layout / .pub-rail / .pub-doc
   ------------------------------------------------------------
   Governing in-grid rail layout for any publication adopting the
   canonical left navigation (Vitae, Radiant, future case studies).
   The rail sits INSIDE the centred reading column, close to the
   text, never a viewport-edge sidebar. Drop a .cos-nav (or .jside)
   into .pub-rail; put the article body in .pub-doc.

   Per page, set --rail-top to (sticky header height + breathing
   room) on the .pub-layout element; the mobile offset is --rail-top-m.
   ============================================================ */
:root{--rail-top:128px;--rail-top-m:64px}
.pub-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:52px;align-items:start}
.pub-doc{min-width:0}
.pub-rail{
  position:sticky;top:var(--rail-top);align-self:start;
  max-height:calc(100vh - var(--rail-top) - 24px);
  overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;
  font-family:var(--lnav-font);
}
.pub-rail::-webkit-scrollbar{width:6px}
.pub-rail::-webkit-scrollbar-thumb{background:var(--lnav-rule);border-radius:3px}
/* the reading column owns the measure; full-bleed section bands don't tint inside the grid */
.pub-doc .wrap,.pub-doc .wrap-narrow{max-width:none;margin:0;padding:0}
.pub-doc .story.alt,.pub-doc .ws-sec.alt,.pub-doc .eng-sec.alt{background:none}
@media (max-width:1080px){ .pub-layout{grid-template-columns:210px minmax(0,1fr);gap:40px} }
@media (max-width:900px){
  .pub-layout{grid-template-columns:1fr;gap:0}
  /* rail becomes a quiet contents block at the top of the publication, then scrolls away */
  .pub-rail{
    position:static;max-height:none;overflow:visible;
    margin:0 0 30px;padding-bottom:14px;border-bottom:1px solid var(--lnav-rule);
  }
}