/* Shared Shelf Life identity, page rails, navigation and controls. Load after mode styles. */
:root {
  --bg: #0e1419; --ink: #0e1419; --surface: #172027;
  --text: #f5ede2; --paper: #f5ede2; --copper: #e59371;
  --muted: #b3b8ba; --line: #647079; --control: #647079;
  --accent: #e59371; --text-secondary: #b3b8ba; --text-muted: #b3b8ba;
  --font: "Geist", sans-serif; --sans: "Geist", sans-serif;
  --display: "Instrument Serif", Georgia, serif; --serif: "Instrument Serif", Georgia, serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  --sl-rail: max(22px, calc((100vw - 1344px) / 2));
  --pad-side: var(--sl-rail);
}
[hidden] { display: none !important; }
#app { max-width: none; padding-inline: var(--sl-rail); }
.sl-page { margin: 0; background: var(--bg); color: var(--text); font: 18px/1.5 var(--font); }
.sl-page > main { padding: 36px var(--sl-rail) 24px; }
.sl-header { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; border-bottom: 1px solid #364149; }
.sl-page > .sl-header { margin-inline: var(--sl-rail); padding-inline: 0; }
.sl-brand { flex-shrink: 0; }
.sl-header .sl-wordmark { display: block; font: 32px/1.1 var(--display); color: var(--text); letter-spacing: -.02em; text-decoration: none; }
.sl-header .sl-parent { display: inline-block; margin-top: 9px; color: var(--muted); font: 10px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.sl-header nav { display: flex; align-items: center; gap: 24px; font: 14px/1.4 var(--font); }
.sl-header nav a, .sl-header .nav-button { color: var(--text); font: inherit; text-decoration: none; padding: 0; border: 0; background: none; width: auto; }
.sl-header a:hover, .sl-header .nav-button:hover { color: var(--copper); text-decoration: underline; }
.sl-footer { margin-top: 42px; padding: 24px 0 36px; color: var(--muted); font: 14px/1.5 var(--font); border-top: 1px solid #364149; }
.sl-page > .sl-footer { margin-inline: var(--sl-rail); padding-inline: 0; }
.sl-footer-links { display: flex; justify-content: space-between; gap: 20px; width: 100%; }
.sl-footer a { display: inline; margin: 0; color: inherit; text-decoration: underline; text-underline-offset: 5px; }
.sl-footnote { font-size: 14px; max-width: 70ch; margin: 0 0 18px; }
.sl-storage { margin: 0 0 22px; max-width: 70ch; }
.sl-storage summary { cursor: pointer; padding: 0; color: var(--muted); font: inherit; }
.sl-storage p { font: inherit; margin: 12px 0; }
.sl-storage button { width: auto; padding: 0; background: transparent; border: 0; color: var(--muted); text-decoration: underline; font: inherit; }
.sl-footer a:hover, .sl-storage summary:hover { color: var(--copper); }
.sl-page :is(h1,h2,h3) { font-family: var(--display); font-weight: 400; letter-spacing: -.025em; text-wrap: balance; }
.sl-page h1 { font-size: clamp(46px, 6vw, 76px); line-height: 1.04; margin: 14px 0 18px; }
.sl-page h2 { font-size: clamp(30px, 4vw, 44px); line-height: 1.12; margin: 0 0 18px; }
.sl-page h3 { font-size: clamp(26px, 3vw, 34px); line-height: 1.15; }
.sl-page p { text-wrap: pretty; }
.sl-page .eyebrow { color: var(--copper); font: 12px/1.5 var(--mono); letter-spacing: .08em; margin: 0 0 12px; }
.sl-page .introduction { padding: 0; margin: 0 0 24px; }
.sl-page .lead { max-width: 620px; font: 20px/1.45 var(--font); margin: 0 0 10px; text-wrap: balance; }
.sl-page .intro-note { max-width: 620px; font: 18px/1.5 var(--font); color: var(--muted); margin: 8px 0 0; text-wrap: balance; }
.sl-page .meta, .sl-page .save-note, .sl-page #save-status { font-size: 14px; line-height: 1.5; color: var(--muted); }
.sl-page #save-status { margin: 14px 0; }
.sl-page :is(button.primary, a.primary, form button[type="submit"]), #app .primary { background: var(--paper); color: var(--ink); border: 1px solid var(--paper); border-radius: 3px; padding: 15px 22px; font: 600 16px/1.4 var(--font); width: auto; }
.sl-page :is(button.primary, a.primary, form button[type="submit"]):hover, #app .primary:hover { background: var(--copper); border-color: var(--copper); }
.sl-page :is(.secondary,.text-button,.quiet) { font-size: 14px; }
.sl-page :is(button,input,textarea,a,summary):focus-visible, .sl-header :focus-visible { outline: 3px solid var(--copper); outline-offset: 4px; }
.sl-page :is(button,textarea,.option,.choice,.pick) { border-radius: 3px; }
.sl-page textarea { background: var(--surface); border-color: var(--control); color: var(--text); font: 18px/1.5 var(--font); }
.sl-page .sl-help { max-width: 620px; margin: 22px 0; font-size: 16px; }
.sl-help summary { color: var(--muted); font: 14px/1.5 var(--font); padding: 0; cursor: pointer; }
.sl-help p { margin: 14px 0; }
.sl-page .practice-navigation, .sl-page .session-tools { margin: 24px 0 36px; padding: 0; max-width: 880px; }
.sl-page .progress-line { margin-bottom: 12px; }
.sl-page #progress-text { font-size: 14px; color: var(--muted); margin: 0 0 12px; }
.sl-page :is(#case-nav,#episode-nav) { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0; }
.sl-page :is(.case-link,.episode-tab) { padding: 12px 16px; min-height: 48px; font: 500 16px/1.4 var(--font); color: var(--text); border: 1px solid var(--control); background: transparent; text-align: left; }
.sl-page :is(.case-link,.episode-tab)[aria-current] { box-shadow: none; }
.sl-page .case-link[aria-current="step"], .sl-page .episode-tab[aria-current="page"] { border-color: var(--copper); color: var(--copper); }
.sl-page .case-link small { font-size: 13px; }
.sl-page #episode-area, .sl-page #case-area { padding: 10px 0 24px; max-width: 980px; scroll-margin-top: 24px; }
.sl-page :is(.case-heading,#episode-area h2) { font-size: clamp(34px,5vw,54px); }
.sl-page .facts { margin: 26px 0; gap: 18px 32px; }
.sl-page .facts dd { font-size: 17px; line-height: 1.5; }
.sl-page .facts dt { font-size: 14px; }
.sl-page .ledger { margin: 26px 0; }
.sl-page .ledger dl { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px 20px; align-items: baseline; }
.sl-page .ledger dt { font-size: 14px; }
.sl-page .ledger dd { font-size: 17px; margin: 0; }
.sl-page .button-row { margin-top: 16px; }
.sl-page .decision-form { margin-top: 28px; }
.sl-page :is(.expert,.feedback) { margin-top: 32px; max-width: 980px; }
.sl-page .expert p, .sl-page .feedback p { max-width: 72ch; }
.sl-investigate #investigate-app { max-width: none; }
.sl-investigate #investigate-app > :not(.sl-mode-intro) { max-width: 880px; }
.sl-investigate #investigate-app.sl-mode-intro > .primary { display: inline-block; margin: 24px 0 12px; }
.sl-investigate #investigate-app .brief, .sl-investigate #investigate-app .questions, .sl-investigate #investigate-app .actions { margin-top: 28px; }
.sl-investigate .choice { max-width: 880px; margin: 10px 0; padding: 14px 18px; line-height: 1.45; }
.sl-investigate .primary { display: inline-block; margin: 24px 0; }
.sl-challenge .intro { max-width: 880px; margin-bottom: 24px; }
.sl-challenge .sl-case-question { font: 500 22px/1.45 var(--font); letter-spacing: 0; margin: 26px 0 12px; text-wrap: pretty; }
.sl-challenge .choices { max-width: 1040px; gap: 28px; margin: 24px 0; }
.sl-challenge .brand h3 { margin: 0 0 6px; }
.sl-challenge .brand p { font-size: 15px; margin: 0 0 12px; }
.sl-challenge .brand dl { margin: 16px 0 0; }
.sl-challenge .stat { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px 20px; align-items: baseline; margin: 0 0 12px; }
.sl-challenge .stat dt { font-size: 14px; }
.sl-challenge .stat dd { font-size: 18px; margin: 0; max-width: 19ch; }
.sl-challenge #decision-form { max-width: 880px; }
.sl-challenge .share, .sl-challenge .result { margin-top: 36px; max-width: 880px; }
.sl-privacy .sl-privacy-content { max-width: none; margin: 0; padding-top: 36px; }
.sl-privacy main > :not(h1) { max-width: 72ch; }
.sl-privacy h1 { font-size: clamp(44px,6vw,68px); }
.sl-privacy h2 { color: var(--text); font-size: 28px; margin-top: 32px; margin-bottom: 12px; letter-spacing: -.02em; }
.sl-privacy p, .sl-privacy li { font: 17px/1.65 var(--font); color: var(--muted); }
.sl-privacy a { color: var(--copper); text-decoration: underline; }
.sl-privacy .subtitle { font-size: 12px; margin-bottom: 28px; }
.sl-privacy .updated { font-size: 13px; margin-top: 28px; }
.sl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 24px; }
.sl-empty .case-question { max-width: 620px; text-wrap: balance; }
@media (min-width: 961px) {
  :root { --sl-rail: max(48px, calc((100vw - 1344px) / 2)); }
  .sl-page :is(#case-nav,#episode-nav) { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 480px) {
  .sl-header { align-items: flex-start; padding-block: 18px; gap: 16px; }
  .sl-header nav { flex-direction: column; align-items: flex-end; gap: 10px; font-size: 12px; }
  .sl-header .sl-wordmark { font-size: 30px; }
  .sl-page > main { padding-top: 28px; }
  .sl-page h1 { font-size: 46px; }
  .sl-page .lead { font-size: 18px; }
  .sl-page .intro-note { font-size: 17px; }
  .sl-page .introduction { margin-bottom: 20px; }
  .sl-page .practice-navigation, .sl-page .session-tools { margin-top: 20px; }
  .sl-page .ledger dl { gap: 8px 12px; }
  .sl-page .ledger dd { font-size: 16px; }
  .sl-challenge .sl-case-question { font-size: 20px; }
  .sl-challenge .stat { grid-template-columns: minmax(0,1fr) minmax(0,.85fr); }
  .sl-challenge .stat dd { font-size: 17px; }
  .sl-footer { margin-top: 30px; }
}
@media print {
  :root { --bg: #fff; --ink: #fff; --text: #141414; --paper: #141414; --muted: #444; --copper: #793e29; --line: #bbb; }
  .sl-header, .sl-footer { display: none; }
  .sl-page > main { padding: 0; }
  .sl-page { background: white; color: black; }
}
.sl-page .intro-details { margin: 14px 0 0; max-width: 620px; }
.sl-page .intro-details summary { font: 14px/1.5 var(--font); color: var(--muted); padding: 0; }
.sl-page .intro-details p { font: 16px/1.5 var(--font); color: var(--muted); margin-top: 12px; }

.calm-home + .sl-footer { margin-top: 0; }