/* The Storied Company · shared web-first shell
   Layout: slim rail (expanded 228px / collapsed 72px) beside a parchment canvas; bottom bar below 851px.
   Each product sets the semantic tokens below in its own palette.css (loaded after this file). */
:root{
  --rail-w:228px;--rail-collapsed:72px;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--serif:Georgia,'Times New Roman',serif;
  /* semantic defaults (Deep Spruce family); products override */
  --rail-bg:var(--spruce);--rail-soft:#3C564F;--rail-line:#4A625A;--rail-text:#C9D3C6;--rail-sub:#A9B7A8;--rail-heading:#9DAE9C;--rail-mark:var(--harvest);
  --rail-active-bg:var(--parchment);--rail-active-fg:var(--spruce);
  --accent:var(--spruce);--accent-soft:#3C564F;--on-accent:var(--parchment);
  --eyebrow:#8E5643;
  --feature-bg:#EBD3C7;--feature-fg:var(--spruce);--feature-sub:#4E5A54;--feature-eyebrow:#8E5643;--feature-link-bg:var(--spruce);--feature-link-fg:var(--parchment);
  --tint-bg:#DEE4D4;--tint-eyebrow:#56664B;--tint-fg:var(--spruce);
  --path-within-bg:#EBD3C7;--path-within-fg:#8E5643;
  --path-between-bg:var(--sand);--path-between-fg:var(--spruce);
  --path-around-bg:#DEE4D4;--path-around-fg:#56664B;
  --hero-rule:var(--field-sage);
  color-scheme:light;
}
html,body{background:var(--bg);color:var(--ink)}
.eyebrow{color:var(--eyebrow)}
.side-text{min-width:0}

/* ---------- Base shell parts ----------
   Zero-specificity fallbacks via :where(), so a product's own stylesheet still wins. */
:where(.app-shell .sidebar){position:fixed;inset:0 auto 0 0;z-index:30;display:flex;flex-direction:column;color:var(--parchment)}
:where(.app-shell .workspace){display:flex;gap:11px;align-items:center;font-size:12px}
:where(.app-shell .workspace-symbol){width:28px;height:29px;display:grid;place-items:center;font-family:var(--serif);font-size:20px}
:where(.app-shell .main-nav){display:grid}
:where(.app-shell .side-footer){margin-top:auto;display:grid}
:where(.app-shell .side-footer button){border:0;background:none;text-align:left;display:flex;align-items:center}
:where(.app-shell .powered){font-size:8px;letter-spacing:1.7px}
:where(.app-shell .nav-symbol){display:grid;place-items:center}
:where(.app-shell .topbar){height:80px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 43px;gap:20px}
:where(.app-shell .breadcrumb){font-size:11px;color:var(--muted);display:flex;gap:10px}
:where(.app-shell .top-actions){display:flex;gap:22px;align-items:center}
:where(.app-shell .prototype-badge){font-size:9px;letter-spacing:1px;border:1px solid;padding:4px 8px;border-radius:3px;cursor:pointer}
:where(.app-shell .person-switch){display:flex;gap:8px;align-items:center}
:where(.app-shell .person-switch select){border:0;background:none;padding:9px 0;font-size:12px;color:var(--ink);max-width:145px}
:where(.app-shell .mobile-brand){align-items:center;gap:8px;font-family:var(--serif);font-size:22px;letter-spacing:-.6px}
:where(.app-shell .mobile-brand svg){width:26px;height:34px}
.app-shell .mobile-nav{display:none}
@media(max-width:850px){
  .app-shell .main{margin-left:0}
  .app-shell .mobile-brand{display:flex}
  .app-shell .breadcrumb{display:none}
  .app-shell .mobile-nav{display:flex;position:fixed;inset:auto 0 0;z-index:40}
}

/* ---------- Sidebar rail ---------- */
.sidebar .side-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:22px}
.sidebar .brand{border:0;background:none;color:var(--parchment);padding:0;display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:22px;line-height:1.05;letter-spacing:-.6px;text-align:left}
.sidebar .brand svg{width:26px;height:34px;color:var(--rail-mark)}
.rail-toggle{border:0;background:none;color:var(--rail-text);width:32px;height:32px;border-radius:8px;display:grid;place-items:center;flex-shrink:0}
.rail-toggle:hover{background:var(--rail-soft);color:var(--parchment)}
.sidebar .workspace{border:1px solid var(--rail-line);border-radius:10px;padding:10px;color:var(--parchment)}
.sidebar .workspace-symbol{background:var(--accent-mark,var(--clay));color:var(--parchment);border-radius:7px;flex-shrink:0}
.sidebar .workspace .tiny{color:var(--rail-text)}
.sidebar .main-nav{margin-top:20px;gap:4px}
.sidebar .rail-item{display:flex;gap:12px;align-items:center;width:100%;border:0;background:none;color:var(--rail-text);text-align:left;padding:10px;border-radius:9px;position:relative}
.sidebar .rail-item:hover{background:var(--rail-soft);color:var(--parchment)}
.sidebar .rail-item.active{background:var(--rail-active-bg);color:var(--rail-active-fg)}
.sidebar .rail-item.active .nav-sub{color:var(--muted)}
.sidebar .rail-item .nav-symbol{width:24px;flex-shrink:0}
.sidebar .nav-label{font-size:13.5px;font-weight:500;display:block}
.sidebar .nav-sub{font-size:10.5px;color:var(--rail-sub);display:block;line-height:1.35}
.nav-group{margin-top:22px;padding-top:18px;border-top:1px solid var(--rail-line);display:grid;gap:2px}
.nav-heading{font-size:9.5px;letter-spacing:1.8px;text-transform:uppercase;color:var(--rail-heading);padding:0 10px 8px}
.sidebar .journey-link{padding:8px 10px}
.sidebar .journey-link .nav-label{font-weight:400;font-size:13px}
.sidebar .side-footer{gap:4px;padding:16px 0 0}
.sidebar .side-footer button{padding:8px 10px;border-radius:8px;gap:12px;font-size:11.5px;color:var(--rail-text);width:100%}
.sidebar .side-footer button:hover{background:var(--rail-soft)}
.sidebar .powered{padding:8px 10px 0;color:var(--rail-heading)}

@media(min-width:851px){
  .app-shell .sidebar{display:flex;width:var(--rail-w);padding:22px 14px;background:var(--rail-bg);overflow-y:auto;transition:width .2s ease}
  .app-shell .main{margin-left:var(--rail-w);transition:margin-left .2s ease}
  .app-shell.rail-collapsed .sidebar{width:var(--rail-collapsed);padding:22px 12px}
  .app-shell.rail-collapsed .main{margin-left:var(--rail-collapsed)}
  .app-shell.rail-collapsed .side-text{display:none}
  .app-shell.rail-collapsed .side-head{flex-direction:column;gap:14px}
  .app-shell.rail-collapsed .workspace{padding:8px;justify-content:center}
  .app-shell.rail-collapsed .rail-item,.app-shell.rail-collapsed .side-footer button{justify-content:center;padding:10px 0}
  .app-shell.rail-collapsed .nav-group{margin-top:16px;padding-top:12px}
  .mobile-brand{display:none}
}
@media(min-width:851px) and (max-width:1150px){
  /* an expanded rail on a tablet overlays the content instead of squeezing it */
  .app-shell:not(.rail-collapsed) .sidebar{box-shadow:12px 0 40px rgba(0,0,0,.2)}
  .app-shell:not(.rail-collapsed) .main{margin-left:var(--rail-collapsed)}
}

/* ---------- Top bar ---------- */
.topbar{background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);position:sticky;top:env(safe-area-inset-top,0px);z-index:20;border-bottom-color:var(--line)}
.breadcrumb strong{color:var(--accent)}
.prototype-badge{border-color:var(--sand);color:var(--eyebrow);background:transparent}
.mobile-brand{border:0;background:none;color:var(--accent);padding:0}
.mobile-brand svg{color:var(--rail-mark)}

/* ---------- Mobile bottom bar ---------- */
@media(max-width:850px){
  .app-shell .sidebar{display:none}
  .mobile-nav{background:var(--rail-bg);border-top:0;padding:6px max(6px,env(safe-area-inset-right,0px)) max(10px,env(safe-area-inset-bottom,0px)) max(6px,env(safe-area-inset-left,0px));justify-content:space-between}
  .mobile-nav button{flex:1;border:0;background:none;padding:7px 2px 3px;color:var(--rail-text);border-radius:10px;display:grid;place-items:center;gap:3px;font-size:10.5px;letter-spacing:.2px}
  .mobile-nav button.active{color:var(--parchment)}
  .mobile-nav button.active svg{color:var(--rail-mark)}
}

/* ---------- Controls ---------- */
.btn{background:var(--accent);border-color:var(--accent);color:var(--on-accent);border-radius:999px}
.btn:hover{background:var(--accent-soft)}
.btn.secondary{background:transparent;color:var(--accent);border-color:var(--accent)}
.text-btn{color:var(--accent)}
.section-nav button.active{color:var(--accent);border-color:var(--rail-mark)}

/* ---------- More sheet ---------- */
.more-sheet{display:grid;gap:14px}
.more-who{padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--soft)}
.more-who .person-switch select{max-width:none}
.more-list{display:grid;gap:6px}
.more-item{display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:1px solid var(--line);background:var(--paper);border-radius:12px;padding:13px 14px;color:var(--accent)}
.more-item>span{flex:1;min-width:0}
.more-item strong{display:block;font-weight:500;font-size:14px}
.more-item small{display:block;color:var(--muted);font-size:12px}
.more-item:hover{border-color:var(--sand)}

/* ---------- Home ---------- */
.home-hero{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:32px;align-items:end;padding:10px 0 34px;border-bottom:1px solid var(--line);margin-bottom:28px}
.home-kicker{letter-spacing:2px}
.home-hero h1{font-size:clamp(40px,5vw,64px);letter-spacing:-1.8px;line-height:1.04;margin:14px 0 16px;text-wrap:balance;max-width:13ch;color:var(--accent)}
.home-hero p{font-size:15.5px;max-width:46ch;color:var(--muted)}
.home-hero .btn-row{margin-top:24px;flex-wrap:wrap}
.home-aside{display:grid;gap:12px;padding:18px;border-left:2px solid var(--hero-rule)}
.home-aside .portrait-row{display:flex}
.home-aside .small{font-weight:500}
.home-season{font-family:var(--serif);font-style:italic;font-size:16px;line-height:1.5;color:var(--accent);margin-top:4px}

.pathways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:22px}
.pathway{display:flex;flex-direction:column;gap:10px;text-align:left;border:1px solid var(--line);background:var(--paper);border-radius:16px;padding:22px;color:var(--accent);transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;min-width:0}
.pathway:hover{transform:translateY(-2px);border-color:var(--sand);box-shadow:0 12px 30px rgba(0,0,0,.07)}
.pathway-top{display:flex;align-items:center;gap:12px}
.pathway-icon{width:40px;height:40px;border-radius:11px;display:grid;place-items:center}
.pathway-within .pathway-icon{background:var(--path-within-bg);color:var(--path-within-fg)}
.pathway-between .pathway-icon{background:var(--path-between-bg);color:var(--path-between-fg)}
.pathway-around .pathway-icon{background:var(--path-around-bg);color:var(--path-around-fg)}
.pathway-title{font-family:var(--serif);font-size:24px;letter-spacing:-.4px;line-height:1.15}
.pathway-desc{color:var(--muted);font-size:13px;line-height:1.6;flex:1}
.pathway-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-top:12px;border-top:1px solid var(--line);font-size:11.5px;color:var(--accent);font-variant-numeric:tabular-nums}

.home-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:14px;margin-bottom:34px}
.feature-card{background:var(--feature-bg);border-radius:18px;padding:30px;display:flex;flex-direction:column;gap:12px;color:var(--feature-fg)}
.feature-card .eyebrow{color:var(--feature-eyebrow)}
.feature-card h2{font-size:clamp(28px,3vw,36px);letter-spacing:-.8px;text-wrap:balance;color:var(--feature-fg)}
.feature-card p{max-width:48ch;color:var(--feature-sub)}
.feature-link{margin-top:auto;align-self:flex-start;border:0;background:var(--feature-link-bg);color:var(--feature-link-fg);border-radius:999px;padding:10px 18px;display:inline-flex;gap:8px;align-items:center;font-size:13px}
.home-stack{display:grid;gap:14px}
.tonight-card{background:var(--tint-bg);border-radius:18px;padding:24px;display:grid;gap:8px;color:var(--tint-fg)}
.tonight-card .eyebrow{color:var(--tint-eyebrow)}
.tonight-card h3{font-size:24px}
.tonight-card p{font-family:var(--serif);font-size:17px;color:var(--tint-fg)}
.within-card{border:1px solid var(--line);background:var(--paper);border-radius:18px;padding:24px;display:grid;gap:10px}
.within-card p{color:var(--muted);font-size:13px}
.home-wall .section-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}

@media(max-width:1150px){
  .home-hero{grid-template-columns:1fr;align-items:start}
  .home-aside{border-left:0;border-top:2px solid var(--hero-rule);padding:16px 0 0}
}
@media(max-width:850px){
  .pathways{grid-template-columns:1fr}
  .home-grid{grid-template-columns:1fr}
  .pathway{padding:18px}
}
@media(max-width:600px){
  .home-hero{padding-top:0;gap:20px}
  .home-hero h1{font-size:40px}
  .feature-card,.tonight-card,.within-card{padding:22px}
}
@media(prefers-reduced-motion:reduce){.pathway,.app-shell .sidebar,.app-shell .main{transition:none}}