/* ============ tokens ============ */
  :root {
    --oak: #1C1712; --oak-2: #241E16; --oak-3: #2E261C;
    --chrome-ink: #C9BBA0; --chrome-dim: #8A7C63;
    --paper: #EAE0C6; --paper-edge: #D9CCA9;
    --ink: #2C2113; --ink-dim: #6B5A41;
    --slip: #E4E9E0; --slip-edge: #C2CCC0; --slip-ink: #22312C;
    --verdigris: #3E8674; --verdigris-deep: #2E6656;
    --flame: #D98B2B; --flame-dim: #A66A22;
    --wax: #B4462F; --ok: #5E8C4A;
    --id-gm:#3A4E6E; --id-rook:#9A6215; --id-mira:#93365C; --id-bram:#55703B; --id-npc:#63467A;
    --idc-gm:#7E9AC8; --idc-rook:#D98B2B; --idc-mira:#CC7AA0; --idc-bram:#8FAE6B; --idc-npc:#A487C2;
    --shadow: 0 2px 14px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.5);
    --slip-shadow: 0 1px 8px rgba(0,0,0,.35);
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  @media (prefers-color-scheme: light) {
    :root {
      --oak: #CEC4AE; --oak-2: #DBD2BE; --oak-3: #B9AD93;
      --chrome-ink: #3A2F1E; --chrome-dim: #6E5F45;
      --paper: #F2EAD4; --paper-edge: #DCCFAC;
      --slip: #EDF1EA; --slip-edge: #B9C6B8;
      --verdigris: #2E6656; --verdigris-deep: #24523F;
      --flame: #B06A14; --flame-dim: #8F5711;
      --wax: #9C3524; --ok: #4A7239;
      --id-gm:#3A4E6E; --id-rook:#9A6215; --id-mira:#93365C; --id-bram:#55703B; --id-npc:#63467A;
      --idc-gm:#3A4E6E; --idc-rook:#9A6215; --idc-mira:#93365C; --idc-bram:#55703B; --idc-npc:#63467A;
      --shadow: 0 2px 10px rgba(60,45,20,.18), 0 1px 2px rgba(60,45,20,.22);
      --slip-shadow: 0 1px 6px rgba(60,45,20,.16);
    }
  }
  :root[data-theme="dark"] {
    --oak: #1C1712; --oak-2: #241E16; --oak-3: #2E261C;
    --chrome-ink: #C9BBA0; --chrome-dim: #8A7C63;
    --paper: #EAE0C6; --paper-edge: #D9CCA9;
    --slip: #E4E9E0; --slip-edge: #C2CCC0;
    --verdigris: #3E8674; --verdigris-deep: #2E6656;
    --flame: #D98B2B; --flame-dim: #A66A22;
    --wax: #B4462F; --ok: #5E8C4A;
    --id-gm:#3A4E6E; --id-rook:#9A6215; --id-mira:#93365C; --id-bram:#55703B; --id-npc:#63467A;
    --idc-gm:#7E9AC8; --idc-rook:#D98B2B; --idc-mira:#CC7AA0; --idc-bram:#8FAE6B; --idc-npc:#A487C2;
    --shadow: 0 2px 14px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.5);
    --slip-shadow: 0 1px 8px rgba(0,0,0,.35);
  }
  :root[data-theme="light"] {
    --oak: #CEC4AE; --oak-2: #DBD2BE; --oak-3: #B9AD93;
    --chrome-ink: #3A2F1E; --chrome-dim: #6E5F45;
    --paper: #F2EAD4; --paper-edge: #DCCFAC;
    --slip: #EDF1EA; --slip-edge: #B9C6B8;
    --verdigris: #2E6656; --verdigris-deep: #24523F;
    --flame: #B06A14; --flame-dim: #8F5711;
    --wax: #9C3524; --ok: #4A7239;
      --id-gm:#3A4E6E; --id-rook:#9A6215; --id-mira:#93365C; --id-bram:#55703B; --id-npc:#63467A;
      --idc-gm:#3A4E6E; --idc-rook:#9A6215; --idc-mira:#93365C; --idc-bram:#55703B; --idc-npc:#63467A;
    --shadow: 0 2px 10px rgba(60,45,20,.18), 0 1px 2px rgba(60,45,20,.22);
    --slip-shadow: 0 1px 6px rgba(60,45,20,.16);
  }

  /* ============ portraits (generated once per campaign, cached) ============ */
  .pic { display:inline-block; width:44px; height:44px; flex:none;
         background-size:cover; background-position:center top;
         border:1px solid var(--paper-edge); border-radius:2px; }
  .pic.sm { width:20px; height:20px; border-radius:2px; }
  .pic.rail { width:40px; height:40px; }

  /* ============ base ============ */
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    background: var(--oak); background-image: var(--grain);
    color: var(--chrome-ink);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Cascadia Mono", monospace;
    font-size: 13px; line-height: 1.5;
  }
  button { font: inherit; cursor: pointer; }
  :focus-visible { outline: 2px solid var(--flame); outline-offset: 2px; }

  /* ============ mockup strip ============ */
  .mockstrip {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 6px 14px; font-size: 11px; letter-spacing: .08em;
    color: var(--chrome-dim); border-bottom: 1px solid var(--oak-3);
  }
  .mockstrip .grow { flex: 1; }
  .statebtn {
    background: none; border: 1px solid var(--oak-3); color: var(--chrome-dim);
    padding: 3px 12px; border-radius: 2px; letter-spacing: .08em; font-size: 11px;
  }
  .statebtn[aria-pressed="true"] { color: var(--flame); border-color: var(--flame-dim); }

  /* ============ header ============ */
  header.session {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    padding: 12px 18px 11px; border-bottom: 1px solid var(--oak-3);
  }
  .session h1 {
    margin: 0; font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    font-variant-caps: small-caps; letter-spacing: .14em; font-weight: 600;
    font-size: 21px; color: var(--chrome-ink);
  }
  .session .meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--chrome-dim); letter-spacing: .06em; }
  .session .meta b { color: var(--chrome-ink); font-weight: 500; }
  .presence { display: flex; gap: 6px; margin-left: auto; align-items: center; flex-wrap: wrap; }
  .pchip {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid var(--oak-3); border-radius: 12px; padding: 2px 10px 2px 3px;
    font-size: 11px; color: var(--chrome-ink);
  }
  .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
  .dot.away { background: var(--chrome-dim); }
  .pchip .gm { color: var(--idc-gm); padding-left: 5px; }

  /* ============ shell ============ */
  .shell { display: grid; grid-template-columns: 240px minmax(0,1fr) 244px; min-height: calc(100vh - 104px); }
  @media (max-width: 1120px) { .shell { grid-template-columns: 240px minmax(0,1fr); } .ledger { display: none; } }
  @media (max-width: 820px)  { .shell { grid-template-columns: minmax(0,1fr); } .party { display: none; } }

  /* ============ party rail ============ */
  .party { border-right: 1px solid var(--oak-3); padding: 14px 12px; }
  .railhead { font-size: 10px; letter-spacing: .22em; color: var(--chrome-dim); margin: 4px 2px 10px; text-transform: uppercase; }
  .sheet { border: 1px solid var(--oak-3); border-radius: 3px; background: var(--oak-2); padding: 10px 10px 12px; margin-bottom: 12px; }
  .sheet .id { display: flex; gap: 9px; align-items: center; margin-bottom: 8px; }
  .sheet h3 {
    margin: 0; font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    font-variant-caps: small-caps; letter-spacing: .1em; font-weight: 600; font-size: 15px; color: var(--chrome-ink);
  }
  .sheet .kicker { font-size: 10px; color: var(--chrome-dim); letter-spacing: .06em; }
  .abil { display: flex; gap: 6px; margin-bottom: 8px; }
  .abil div { flex: 1; text-align: center; border: 1px solid var(--oak-3); border-radius: 2px; padding: 3px 0 4px; font-variant-numeric: tabular-nums; }
  .abil b { display: block; font-size: 14px; font-weight: 600; color: var(--chrome-ink); }
  .abil span { font-size: 9px; letter-spacing: .18em; color: var(--chrome-dim); }
  .hpline { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 8px; color: var(--chrome-dim); }
  .hpline b { color: var(--chrome-ink); font-weight: 500; font-variant-numeric: tabular-nums; }
  .hp-low b.hp { color: var(--wax); }
  .slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
  .slot { border: 1px solid var(--oak-3); border-radius: 2px; min-height: 26px; font-size: 9px; line-height: 1.25; padding: 2px 3px; color: var(--chrome-ink); overflow: hidden; }
  .slot.empty { border-style: dashed; }
  .slot.fatigue { color: var(--wax); border-color: var(--wax); background: rgba(180,70,47,.07); }
  .slot.bulky { grid-column: span 2; }
  .cond { display: inline-block; margin-top: 8px; font-size: 10px; letter-spacing: .1em; color: var(--wax); border: 1px solid var(--wax); border-radius: 2px; padding: 1px 7px; }
  .npc-row { display: flex; gap: 9px; align-items: center; }
  .npc-row .st { font-size: 10px; color: var(--chrome-dim); line-height: 1.5; }
  .npc-row .st b { color: var(--chrome-ink); font-weight: 500; }

  /* ============ the table ============ */
  .table { display: flex; flex-direction: column; min-width: 0; }
  .scenestrip {
    display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap;
    padding: 10px 22px; border-bottom: 1px solid var(--oak-3);
    font-size: 11px; letter-spacing: .06em; color: var(--chrome-dim);
  }
  .scenestrip .place {
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    font-variant-caps: small-caps; letter-spacing: .12em; font-size: 14px; color: var(--chrome-ink);
  }
  .torch { color: var(--flame); }
  .torch .pip { opacity: .25; }
  .combatflag { color: var(--wax); letter-spacing: .18em; }

  .stream { flex: 1; overflow-y: auto; padding: 20px 22px 10px; }
  .stream-inner { max-width: 660px; margin: 0 auto; display: flex; flex-direction: column; gap: 13px; }

  .beatline { display: flex; align-items: center; gap: 10px; color: var(--chrome-dim); font-size: 10px; letter-spacing: .14em; }
  .beatline::before, .beatline::after { content: ""; flex: 1; border-top: 1px solid var(--oak-3); }

  /* ---- unified paper material for ALL voices ---- */
  .paper-msg {
    background: var(--paper); background-image: var(--grain);
    color: var(--ink); border-radius: 2px; box-shadow: var(--shadow);
    border: 1px solid var(--paper-edge);
    padding: 14px 18px 14px;
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    font-size: 15.5px; line-height: 1.6;
  }
  .paper-msg p { margin: 0 0 .65em; } .paper-msg p:last-child { margin-bottom: 0; }
  .paper-msg .drop::first-letter { font-size: 2.5em; float: left; line-height: .84; padding: 2px 6px 0 0; color: var(--wax); }
  .speaker { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
  .speaker .who {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 9px; letter-spacing: .2em; color: var(--ink-dim);
  }
  .speaker .who b { color: var(--ink); font-weight: 600; letter-spacing: .22em; }
  .paper-msg.gm { border-left: 3px solid var(--id-gm); }
  .paper-msg.player.p-rook { border-left: 3px solid var(--id-rook); }
  .paper-msg.player.p-mira { border-left: 3px solid var(--id-mira); }
  .paper-msg.npc.n-weckel { border-left: 3px solid var(--id-npc); }
  .paper-msg.ooc.p-bram { border-left-color: var(--id-bram); border-left-width: 3px; }
  .paper-msg.ooc.p-mira { border-left-color: var(--id-mira); border-left-width: 3px; }
  .who b.nm-gm { color: var(--id-gm); } .who b.nm-rook { color: var(--id-rook); }
  .who b.nm-mira { color: var(--id-mira); } .who b.nm-bram { color: var(--id-bram); }
  .who b.nm-npc { color: var(--id-npc); }
  .who.nm-bram { color: var(--id-bram); } .who.nm-mira { color: var(--id-mira); }
  .pic.b-rook { border: 2px solid var(--id-rook); } .pic.b-mira { border: 2px solid var(--id-mira); }
  .pic.b-bram { border: 2px solid var(--id-bram); } .pic.b-weckel { border: 2px solid var(--id-npc); }
  .pchip.c-rook { color: var(--idc-rook); } .pchip.c-mira { color: var(--idc-mira); } .pchip.c-bram { color: var(--idc-bram); }
  .sheet.c-rook { border-left: 3px solid var(--idc-rook); } .sheet.c-rook h3 { color: var(--idc-rook); }
  .sheet.c-mira { border-left: 3px solid var(--idc-mira); } .sheet.c-mira h3 { color: var(--idc-mira); }
  .sheet.c-bram { border-left: 3px solid var(--idc-bram); } .sheet.c-bram h3 { color: var(--idc-bram); }
  .decl i.ic-rook { color: var(--idc-rook); } .decl i.ic-mira { color: var(--idc-mira); } .decl i.ic-bram { color: var(--idc-bram); }
  .entry b.lc-rook { color: var(--idc-rook); } .entry b.lc-mira { color: var(--idc-mira); }
  .entry b.lc-bram { color: var(--idc-bram); } .entry b.lc-npc { color: var(--idc-npc); }
  .paper-msg.player { margin-left: 26px; }
  .paper-msg.npc { margin-right: 26px; }
  .paper-msg.ooc {
    margin-left: 26px; border-style: dashed; box-shadow: none;
    background: color-mix(in srgb, var(--paper) 82%, var(--oak));
    color: var(--ink-dim); font-style: italic; font-size: 14px;
  }
  .oocchip {
    font-family: ui-monospace, "SF Mono", Menlo, monospace; font-style: normal;
    font-size: 9px; letter-spacing: .2em; color: var(--ink-dim);
    border: 1px solid var(--ink-dim); border-radius: 2px; padding: 1px 6px;
  }
  .paper-msg.map { padding-bottom: 10px; }
  .paper-msg.map img { width: 100%; height: auto; display: block; border: 1px solid var(--paper-edge); }
  .paper-msg.map .cap { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 9px; letter-spacing: .14em; color: var(--ink-dim); margin-top: 7px; }

  /* ---- engine: collapsible machine slips ---- */
  details.slip {
    margin-left: 26px; max-width: 560px;
    background: var(--slip); background-image: var(--grain);
    color: var(--slip-ink); border: 1px solid var(--slip-edge);
    border-radius: 1px; box-shadow: var(--slip-shadow);
    font-size: 12px; font-variant-numeric: tabular-nums; position: relative;
  }
  details.slip::before {
    content: ""; position: absolute; left: 10px; right: 10px; top: -1px; height: 2px;
    background-image: radial-gradient(circle at 4px 1px, var(--oak) 1.6px, transparent 1.6px);
    background-size: 9px 2px; background-repeat: repeat-x;
  }
  details.slip summary {
    list-style: none; cursor: pointer; padding: 8px 12px;
    display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  }
  details.slip summary::-webkit-details-marker { display: none; }
  details.slip summary .gear { color: var(--verdigris-deep); font-size: 10px; letter-spacing: .18em; }
  details.slip summary .line { flex: 1; min-width: 200px; }
  details.slip summary .line b { font-weight: 600; }
  details.slip summary .chev { color: var(--verdigris-deep); opacity: .7; transition: transform .15s; }
  details.slip[open] summary .chev { transform: rotate(90deg); }
  details.slip[open] summary { border-bottom: 1px dashed var(--slip-edge); }
  .slipbody { padding: 9px 14px 12px; }
  .roll { display: flex; align-items: baseline; gap: 10px; margin: 2px 0 6px; flex-wrap: wrap; }
  .roll .die { font-size: 18px; font-weight: 600; }
  .roll .vs { opacity: .65; font-size: 11px; }
  .verdict { font-weight: 700; letter-spacing: .16em; font-size: 12px; }
  .verdict.fail, .dmg { color: var(--wax); } .verdict.pass { color: var(--ok); }
  .dmg { font-weight: 600; }
  .delta { border-top: 1px dashed var(--slip-edge); margin-top: 7px; padding-top: 7px; font-size: 11.5px; line-height: 1.65; }
  .delta .arrow { color: var(--verdigris-deep); }

  /* ============ beat tray + input ============ */
  .tray { border-top: 1px solid var(--oak-3); padding: 9px 22px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 11px; }
  .tray .label { color: var(--chrome-dim); letter-spacing: .16em; font-size: 9px; margin-right: 4px; }
  .decl { border: 1px solid var(--oak-3); border-radius: 12px; padding: 3px 11px; color: var(--chrome-ink); display: inline-flex; gap: 7px; align-items: center; }
  .decl .ok { color: var(--ok); } .decl .wait { color: var(--chrome-dim); }
  .decl i { font-style: normal; color: var(--flame); font-variant-caps: small-caps; font-family: Palatino, Georgia, serif; letter-spacing: .06em; }
  .resolve { margin-left: auto; background: var(--verdigris-deep); color: var(--slip); border: 1px solid var(--verdigris); border-radius: 2px; padding: 6px 16px; letter-spacing: .14em; font-size: 11px; }
  .resolve:hover { background: var(--verdigris); }
  .inputbar { display: flex; gap: 10px; padding: 10px 22px 16px; align-items: stretch; }
  .chan { display: flex; border: 1px solid var(--oak-3); border-radius: 2px; overflow: hidden; }
  .chan button { background: none; border: 0; color: var(--chrome-dim); padding: 0 13px; font-size: 11px; letter-spacing: .12em; }
  .chan button[aria-pressed="true"] { background: var(--oak-3); color: var(--flame); }
  .inputbar input { flex: 1; background: var(--oak-2); border: 1px solid var(--oak-3); border-radius: 2px; color: var(--chrome-ink); padding: 10px 14px; font: inherit; font-size: 13px; }
  .inputbar input::placeholder { color: var(--chrome-dim); font-family: Palatino, Georgia, serif; font-style: italic; }
  .inputbar .send { background: var(--oak-3); color: var(--chrome-ink); border: 1px solid var(--oak-3); border-radius: 2px; padding: 0 18px; letter-spacing: .14em; font-size: 11px; }
  .inputbar .send:hover { color: var(--flame); border-color: var(--flame-dim); }

  /* ============ ledger ============ */
  .ledger { border-left: 1px solid var(--oak-3); padding: 14px 12px; }
  .entry { border-bottom: 1px dashed var(--oak-3); padding: 6px 2px; font-size: 10.5px; line-height: 1.55; color: var(--chrome-dim); font-variant-numeric: tabular-nums; }
  .entry b { color: var(--chrome-ink); font-weight: 500; }
  .entry .bid { color: var(--verdigris); letter-spacing: .06em; margin-right: 6px; }
  .entry .fail { color: var(--wax); } .entry .pass { color: var(--ok); }
  .ledger .foot { margin-top: 10px; font-size: 9px; letter-spacing: .1em; color: var(--chrome-dim); line-height: 1.8; }
  .ledger .foot i { color: var(--verdigris); font-style: normal; }

  /* ============ states ============ */
  .combat-only { display: none; }
  body.combat .combat-only { display: block; }
  body.combat .explore-only { display: none; }

  @media (prefers-reduced-motion: no-preference) {
    body.justswitched .stream-inner > * { animation: settle .3s ease-out backwards; }
    body.justswitched .stream-inner > *:nth-child(2) { animation-delay: .04s; }
    body.justswitched .stream-inner > *:nth-child(3) { animation-delay: .08s; }
    body.justswitched .stream-inner > *:nth-child(4) { animation-delay: .12s; }
    body.justswitched .stream-inner > *:nth-child(5) { animation-delay: .16s; }
    body.justswitched .stream-inner > *:nth-child(6) { animation-delay: .20s; }
    @keyframes settle { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
  }