/* Workshop single-page app — chrome/layout only.
   Each demo fragment ships its own component styles, scoped to #sN-NN, so there
   are no cross-demo collisions. This file = tokens + reset + shell + shared bits. */

:root{
  --ink:#1e3050;--ink-soft:#5d6a82;--paper:#fbfaf6;--panel:#f3f1ea;--card:#fff;--line:#e3e0d6;
  --gold:#b8472a;--good:#1f7a4d;--bad:#8a3a3a;--blue:#2f6fb0;
  /* added for chrome readability/polish — a mid slate that clears AA comfortably,
     a pale terracotta tint for the active row, and an ease curve matched to the main site */
  --ink-mid:#42506b;--gold-tint:#f7ece8;--gold-line:#e6cfc7;
  /* deep rust for small uppercase tile labels + "open" links: AA-safe on white cards (8.2:1) */
  --rust:#8a3318;
  --ease:cubic-bezier(.22,.61,.36,1);
  --display:"Schibsted Grotesk",system-ui,sans-serif;--body:"Manrope",system-ui,sans-serif;--mono:"JetBrains Mono",monospace;
  --sidebar:290px;--maxpane:820px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* keyboard focus is visible everywhere in the shell (was absent app-wide) */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- top bar ---- */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;height:60px;padding:0 18px;background:rgba(251,250,246,.92);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}
.topbar .brand{min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;font-family:var(--display);font-weight:800;letter-spacing:-.02em;font-size:1.08rem;color:var(--ink);text-decoration:none;white-space:nowrap}
.topbar .brand span{color:var(--ink)}
.topbar .spacer{flex:1}
.topbar .home{flex:0 0 auto;font-family:var(--mono);font-size:.74rem;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--ink);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:7px 14px;background:var(--card);transition:background .15s var(--ease),border-color .15s var(--ease)}
.topbar .home:hover{background:var(--panel);border-color:#d3cdbf}
.menu-btn{display:none;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:var(--card);cursor:pointer;font-size:1.2rem;line-height:1;color:var(--ink);transition:background .15s var(--ease)}
.menu-btn:hover{background:var(--panel)}

/* ---- layout ---- */
.layout{display:flex;align-items:flex-start}
.sidebar{position:sticky;top:60px;flex:0 0 var(--sidebar);width:var(--sidebar);height:calc(100vh - 60px);overflow-y:auto;border-right:1px solid var(--line);padding:20px 12px 60px;background:var(--paper)}
.sidebar .grp{margin:0 0 6px}
.grp-head{display:flex;align-items:center;gap:8px}
/* session heading: the exec's "where am I" map — sentence-case display type,
   full ink contrast, comfortably sized. No longer tiny grey uppercase mono. */
.grp-toggle{flex:1;min-width:0;display:flex;align-items:center;gap:.55em;background:none;border:0;cursor:pointer;text-align:left;font-family:var(--display);font-size:.92rem;letter-spacing:-.01em;color:var(--ink);font-weight:700;padding:9px 10px;border-radius:9px;transition:background .15s var(--ease)}
.grp-toggle:hover{background:var(--panel)}
.grp-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.caret{display:inline-block;transition:transform .15s var(--ease);font-size:.7em;color:var(--ink-soft);flex:0 0 auto}
.caret::before{content:"\25B8"}
.grp:not(.collapsed) .caret{transform:rotate(90deg)}
.grp.collapsed .grp-list{display:none}
.grp-list{padding:2px 0 8px}
/* the tick is its own clear control, pushed to the far edge with a real hit area,
   so an "open this session" click can't land on it by accident */
.grp-tick{flex:0 0 auto;width:18px;height:18px;margin:0 4px;cursor:pointer;accent-color:var(--good)}
.grp.done .grp-name{color:var(--ink-soft)}
.grp.done .grp-toggle{color:var(--good)}
.grp.done .caret{color:var(--good)}
.sidebar a{display:flex;gap:.6em;align-items:baseline;text-decoration:none;color:var(--ink);font-size:.95rem;padding:8px 12px 8px 26px;border-radius:9px;line-height:1.35;transition:background .12s var(--ease),color .12s var(--ease)}
.sidebar a:hover{background:var(--panel)}
.sidebar a.active{background:var(--gold-tint);color:var(--gold);font-weight:700;box-shadow:inset 3px 0 0 var(--gold)}
.sidebar a .n{font-family:var(--mono);font-size:.74rem;color:var(--ink-soft);flex:0 0 auto;font-feature-settings:"tnum"}
.sidebar a.active .n{color:var(--gold)}
.sidebar a.ext{color:var(--ink-mid)}
.sidebar a.ext:hover{color:var(--ink)}

/* ---- content pane ---- */
.pane{flex:1;min-width:0;padding:36px 34px 80px;width:100%;max-width:calc(var(--maxpane) + 68px);margin:0 auto}
.crumb{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mid);margin:0 0 18px;line-height:1.5}
.crumb b{color:var(--gold)}

/* demo sections: visible by default (no-JS fallback); JS shows one at a time */
.demo{display:block}
body.js .demo{display:none}
body.js .demo.active{display:block;animation:fade .24s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.demo>.foot{display:none} /* per-demo footers are redundant inside the app */

/* ---- prev / next ---- */
.prevnext{display:flex;justify-content:space-between;gap:14px;margin:48px 0 0;padding-top:24px;border-top:1px solid var(--line)}
.prevnext a{flex:1 1 0;max-width:48%;text-decoration:none;border:1px solid var(--line);border-radius:14px;padding:14px 18px;background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(20,20,20,.04);transition:transform .15s var(--ease),box-shadow .15s var(--ease),border-color .15s var(--ease)}
.prevnext a:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(30,48,80,.12);border-color:#d3cdbf}
.prevnext a.next{text-align:right}
.prevnext .dir{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mid);display:block;margin:0 0 4px}
.prevnext .ttl{font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:-.01em;color:var(--ink);line-height:1.2}
.prevnext a[aria-disabled="true"]{opacity:.35;pointer-events:none}

/* ---- shared download button (demos that hand out sample files) ---- */
.dl-btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--body);font-weight:650;font-size:.94rem;text-decoration:none;color:var(--ink);background:var(--card);border:1.5px solid var(--ink);border-radius:999px;padding:.55em 1.25em;transition:background .15s var(--ease),color .15s var(--ease),transform .15s var(--ease)}
.dl-btn:hover{background:var(--ink);color:#fff;transform:translateY(-1px)}
.dl-btn::before{content:"\2193";font-family:var(--mono);font-weight:700}
.dl-note{font-size:.88rem;color:var(--ink-mid);margin:10px 0 0;max-width:60ch;line-height:1.55}
.dl-note strong{color:var(--ink)}

/* ---- shared: screenshot + lightbox (used by the Research-team demo) ---- */
.shot{margin:14px 0 0;border:1px solid #d4d9e4;border-radius:12px;overflow:hidden;background:#eef0f5}
.shot img{display:block;width:100%;height:auto;cursor:zoom-in}
.shot figcaption{font-family:var(--mono);font-size:.76rem;letter-spacing:.02em;color:var(--ink-mid);padding:9px 13px}
.lightbox{position:fixed;inset:0;background:rgba(15,20,35,.9);display:none;align-items:center;justify-content:center;padding:24px;z-index:60;cursor:zoom-out}
.lightbox.open{display:flex}
.lightbox img{max-width:96vw;max-height:92vh;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.5)}

/* ---- mobile ---- */
.scrim{display:none}
@media(max-width:900px){
  .menu-btn{display:inline-flex}
  .sidebar{position:fixed;top:60px;left:0;z-index:45;transform:translateX(-100%);transition:transform .2s ease;box-shadow:0 20px 50px rgba(20,20,20,.18);width:min(86vw,320px);flex-basis:auto;height:calc(100vh - 60px)}
  body.nav-open .sidebar{transform:none}
  .scrim{position:fixed;inset:60px 0 0;background:rgba(20,20,30,.35);z-index:44}
  body.nav-open .scrim{display:block}
  .pane{padding:24px 18px 70px}
  /* roomier sidebar rows on touch */
  .sidebar a{padding:11px 12px 11px 28px}
  .grp-toggle{padding:11px 10px}
}

/* very small phones: the redundant home pill (brand already links home) is the
   first thing to drop so the brand never collides with it in the 60px bar */
@media(max-width:480px){
  .topbar{gap:10px;padding:0 14px}
  .topbar .home{display:none}
}

/* ---- print: hide the app chrome (take-home sheets are separate printables) ---- */
@media print{
  .topbar,.sidebar,.prevnext,.crumb,.menu-btn,.scrim{display:none !important}
  body.js .demo{display:block !important}
  .pane{max-width:none;padding:0;margin:0}
}