:root {
    --paper: #F2EDE3;
    --paper-dark: #E8E0D0;
    --ink: #2B2620;
    --ink-soft: #4A443A;
    --pencil: #6B655A;
    --pencil-light: #A39C8C;
    --soil: #8C4A2F;
    --soil-dark: #6B3720;
    --string: #2E5F55;
    --string-light: #C9DAD5;
    --amber: #B4791F;
    --amber-light: #F3E2C4;
    --line: #C9C0AC;
    --card-bg: #FBF9F4;
    --speaker-a: #2E5F55;
    --font-body: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
    --font-mono: 'Courier New', Courier, monospace;
    --font-hand: var(--font-body);
  }

  :root[data-theme="dark"] {
    --paper: #211D18;
    --paper-dark: #2A251E;
    --ink: #ECE6D9;
    --ink-soft: #C9C0AC;
    --pencil: #9C9384;
    --pencil-light: #6B655A;
    --soil: #D08858;
    --soil-dark: #E8A473;
    --string: #6FB8A8;
    --string-light: #24413B;
    --amber: #E0A752;
    --amber-light: #3A2E1C;
    --line: #4A443A;
    --card-bg: #2A251E;
    --speaker-a: #6FB8A8;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --paper: #211D18;
      --paper-dark: #2A251E;
      --ink: #ECE6D9;
      --ink-soft: #C9C0AC;
      --pencil: #9C9384;
      --pencil-light: #6B655A;
      --soil: #D08858;
      --soil-dark: #E8A473;
      --string: #6FB8A8;
      --string-light: #24413B;
      --amber: #E0A752;
      --amber-light: #3A2E1C;
      --line: #4A443A;
      --card-bg: #2A251E;
      --speaker-a: #6FB8A8;
    }
  }

  * { box-sizing: border-box; }

  html, body {
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    line-height: 1.6;
  }

  body {
    background-image:
      repeating-linear-gradient(0deg, transparent, transparent 27px, rgba(107,101,90,0.07) 28px);
  }

  #app {
    max-width: 900px;
    margin: 0 auto;
    padding: 2.5rem 1.75rem 5rem;
    min-height: 100vh;
  }

  .theme-toggle {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 50;
    border: 1px solid var(--line);
    background: var(--card-bg);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    padding: 0.4rem 0.7rem;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .theme-toggle:hover { border-color: var(--soil); }

  /* ---------- Spoken quotes: real <blockquote> ----------
     Two consistent voices throughout the whole project:
     .you  = something the player says or thinks aloud (teal,
             matching the player's own presence elsewhere in
             the UI, e.g. the role-card stance line).
     (default) = anyone else being quoted \u2014 a colleague, a
             supervisor, a specialist, or the source research
             itself (amber, matching the lesson-box accent used
             for material that comes from outside the player). */
  blockquote.notegroup {
    margin: 1rem 0;
    padding: 0.15rem 0 0.15rem 0.9rem;
    border-left: 3px solid var(--amber);
    font-size: 0.95rem;
    color: var(--amber);
    font-style: italic;
  }
  blockquote.notegroup.you {
    border-left-color: var(--string);
    color: var(--string);
  }
  blockquote.notegroup cite {
    display: block;
    font-style: normal;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pencil);
    margin-top: 0.3rem;
  }

  /* ---------- Foldable (details/summary) figures ---------- */
  .fold {
    border: 1px solid var(--line);
    margin: 1.1rem 0;
  }
  .fold > summary {
    cursor: pointer;
    padding: 0.6rem 0.9rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--string);
    background: var(--paper-dark);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .fold > summary::-webkit-details-marker { display: none; }
  .fold > summary::after {
    content: "show";
    color: var(--pencil);
  }
  .fold[open] > summary::after { content: "hide"; }
  .fold > summary:hover { color: var(--soil); }
  .fold-body { padding: 0.9rem; }

  /* ---------- Hand-scrawled scribble (Unicode strikethrough, for crossed-out text) ---------- */
  .scribble-unicode { color: var(--pencil); font-style: italic; margin: 0 0.15em; display: inline-block; transform: rotate(-3deg); }
  .strike-wavy {
    position: relative;
    display: inline;
  }
  .strike-wavy::after {
    content: "";
    position: absolute;
    left: -0.1em;
    right: -0.1em;
    top: 48%;
    height: 0.5em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 14' preserveAspectRatio='none'%3E%3Cpath d='M0,7 C 8,1 12,13 20,7 C 28,1 32,13 40,7 C 48,1 52,13 60,7' fill='none' stroke='%236B655A' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 32px 100%;
    pointer-events: none;
  }

  /* ---------- Handwritten-look text ---------- */
  .handwritten {
    font-family: var(--font-body);
    font-style: italic;
    color: var(--ink-soft);
  }

  /* ---------- Playing-card style role cards for print ---------- */
  .card-deck-note {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--pencil);
    margin: 0.6rem 0 1.2rem;
  }

  /* ---------- Typography ---------- */
  h1, h2, h3, h4 {
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 0.5rem;
    line-height: 1.25;
  }
  h1 { font-size: 1.9rem; letter-spacing: -0.01em; }
  h2 { font-size: 1.4rem; }
  h3 { font-size: 1.1rem; font-family: var(--font-mono); font-weight: 700; text-transform: none; }
  p { margin: 0 0 1rem; }
  .lede { font-size: 1.05rem; color: var(--ink-soft); }
  .small { font-size: 0.85rem; color: var(--pencil); }
  .mono { font-family: var(--font-mono); }
  a { color: var(--string); }

  /* ---------- Field-sheet header ---------- */
  .masthead {
    border: 1px solid var(--ink);
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.75rem;
    background: var(--card-bg);
    position: relative;
  }
  .masthead::before {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px solid var(--line);
    pointer-events: none;
  }
  .masthead-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--pencil);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.6rem;
  }
  .masthead h1 { margin-bottom: 0.3rem; }
  .masthead .sub { color: var(--pencil); font-size: 0.95rem; }

  /* ---------- Nav / breadcrumb ---------- */
  .crumb {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--pencil);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
  }
  .crumb button {
    background: none;
    border: none;
    color: var(--string);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
  }

  /* ---------- Cards / menu ---------- */
  .menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
  }
  .case-card {
    border: 1px solid var(--line);
    background: var(--card-bg);
    padding: 1.1rem 1.25rem;
    cursor: pointer;
    text-align: left;
    display: block;
    width: 100%;
    font-family: var(--font-body);
    transition: border-color 0.15s ease, transform 0.1s ease;
    position: relative;
  }
  .case-card:hover { border-color: var(--soil); }
  .case-card:active { transform: scale(0.997); }
  .case-tag {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--soil);
    display: block;
    margin-bottom: 0.35rem;
  }
  .case-card h3 { font-family: var(--font-body); font-size: 1.15rem; margin-bottom: 0.3rem; }
  .case-card p { margin-bottom: 0.5rem; color: var(--ink-soft); font-size: 0.95rem; }
  .case-meta {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--pencil);
    display: flex;
    gap: 1rem;
  }

  /* ---------- Buttons ---------- */
  .btn {
    display: inline-block;
    border: 1px solid var(--ink);
    background: var(--card-bg);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    padding: 0.55rem 1rem;
    cursor: pointer;
    text-align: left;
    text-transform: none;
  }
  .btn:hover { background: var(--paper-dark); }
  .btn-primary {
    background: var(--string);
    color: var(--paper);
    border-color: var(--string);
  }
  .btn-primary:hover { background: #244d45; }
  .choice-list { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.5rem; }
  .choice-btn {
    display: block;
    width: 100%;
    text-align: left;
    border: 1px solid var(--line);
    background: var(--card-bg);
    padding: 0.85rem 1rem;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--ink);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
  }
  .choice-btn:hover { border-color: var(--soil); background: var(--amber-light); }
  .choice-btn .cprefix {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--soil);
    margin-right: 0.5rem;
  }

  /* ---------- Scene body ---------- */
  .scene {
    border-left: 3px solid var(--string);
    padding-left: 1.1rem;
    margin-bottom: 1.5rem;
  }
  .scene-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--string);
    margin-bottom: 0.4rem;
  }
  .scene-body p { font-size: 1.02rem; }
  .scene-body em { color: var(--soil-dark); font-style: italic; }

  /* ---------- Field note / quote box ---------- */
  .fieldnote {
    background: var(--paper-dark);
    border: 1px dashed var(--pencil-light);
    padding: 0.9rem 1.1rem;
    margin: 1rem 0;
    font-size: 0.92rem;
    font-family: var(--font-mono);
    color: var(--ink-soft);
    position: relative;
  }
  .fieldnote::before {
    content: "field note";
    position: absolute;
    top: -0.6rem;
    left: 0.8rem;
    background: var(--paper);
    padding: 0 0.4rem;
    font-size: 0.62rem;
    letter-spacing: 0.05em;
    color: var(--pencil);
    text-transform: uppercase;
  }

  /* ---------- Consequence / record panel ---------- */
  .record-panel {
    border: 1px solid var(--soil);
    background: var(--paper-dark);
    padding: 1rem 1.2rem;
    margin: 1.25rem 0;
  }
  .record-panel .rp-label {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--soil-dark);
    margin-bottom: 0.4rem;
  }

  .lesson-box {
    border: 1px solid var(--string);
    background: var(--string-light);
    padding: 1.1rem 1.25rem;
    margin: 1.5rem 0;
  }
  .lesson-box .lb-label {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--string);
    margin-bottom: 0.4rem;
  }

  /* ---------- Figures / diagrams ---------- */
  .figure {
    border: 1px solid var(--ink);
    background: var(--card-bg);
    padding: 0.9rem;
    margin: 1.25rem 0;
    position: relative;
  }
  .figure::before {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid var(--line);
    pointer-events: none;
  }
  .figure svg { display: block; width: 100%; height: auto; }
  .figure-caption {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--pencil);
    margin-top: 0.6rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--line);
  }
  .figure-caption strong { color: var(--ink-soft); }
  .figure-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
  }
  .figure-pair .figure-half {
    display: flex;
    flex-direction: column;
  }
  .figure-pair .fh-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--soil);
    text-align: center;
    margin-bottom: 0.4rem;
  }
  @media (max-width: 560px) {
    .figure-pair { grid-template-columns: 1fr; }
  }
  .figure-photo {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--line);
  }
  .figure-photo-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--soil-dark);
    background: var(--amber-light);
    padding: 0.15rem 0.5rem;
    margin-bottom: 0.6rem;
  }

  /* ---------- End screen ---------- */
  .ending-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--paper);
    background: var(--soil);
    padding: 0.25rem 0.6rem;
    margin-bottom: 0.8rem;
  }

  /* ---------- Divider ---------- */
  .divider {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 2rem 0 1.5rem;
    color: var(--pencil-light);
  }
  .divider::before, .divider::after {
    content: "";
    flex: 1;
    border-top: 1px dashed var(--line);
  }
  .divider span { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; }

  /* ---------- Role cards (facilitator modules) ---------- */
  .role-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
  }
  .role-card {
    border: 1px solid var(--ink);
    background: var(--card-bg);
    padding: 1rem 1.1rem;
  }
  .role-card h4 { font-family: var(--font-mono); font-size: 0.85rem; text-transform: uppercase; margin-bottom: 0.4rem; color: var(--soil); }
  .role-card p { font-size: 0.9rem; margin-bottom: 0.5rem; }
  .role-card .role-position { font-size: 0.85rem; color: var(--ink-soft); }
  .crop-mark { display: none; }

  @media print {
    body { background: white; color: black; }
    .no-print { display: none !important; }
    .role-grid {
      display: block;
    }
    /* Height is intentionally NOT fixed: some browsers' print/PDF
       pipelines don't honour overflow:hidden on a fixed-height
       inline-block the way screen rendering does, which silently
       let content overflow past the card's edge with no clipping
       and no warning. Letting height grow to fit content is the
       reliable option; a printed border marks each card's edge for
       cutting instead of crop marks calibrated to a height that
       can't be guaranteed. */
    .role-card {
      width: 5in;
      height: 3in;
      overflow: hidden;
      border: none;
      padding: 0.2in 0.18in;
      margin: 0.18in 0.22in 0.18in 0.22in;
      break-inside: avoid;
      page-break-inside: avoid;
      display: inline-block;
      vertical-align: top;
      position: relative;
      color: black;
      background: white;
    }
    .role-card h4 {
      font-size: 13.5pt;
      font-weight: 700;
      letter-spacing: 0.02em;
      line-height: 1.12;
      color: black;
      border-bottom: 1.2pt solid black;
      padding-bottom: 0.05in;
      margin-bottom: 0.09in;
      white-space: nowrap;
    }
    /* This one title is intentionally allowed to break \u2014 forced onto
       two lines at the comma via a <br> in the source text \u2014 since it
       doesn't fit on one line at any reasonable size. white-space must
       be reset to normal here, or the <br> itself gets suppressed. */
    .role-card h4 .allow-break {
      white-space: normal;
    }
    .role-card p, .role-card li { font-size: 9.5pt; line-height: 1.26; color: black; }
    .role-card p { margin: 0 0 0.1in; }
    .role-card ul {
      margin: 0;
      padding-left: 0;
      list-style-position: outside;
    }
    .role-card li {
      margin-left: 0.13in;
      padding-left: 0.02in;
      margin-bottom: 0.05in;
      text-wrap: balance;
    }
    .role-card .role-position {
      font-size: 11pt;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: black !important;
      margin-bottom: 0.05in;
      display: block;
      white-space: nowrap;
    }
    .crop-mark { display: none; }
  }

  @media (max-width: 480px) {
    #app { padding: 1.5rem 1rem 4rem; }
    h1 { font-size: 1.5rem; }
  }