/* Four May Play It. Light is the paper of a 1570s quarto: warm rag, iron-gall ink, the red of a
   rubricated pilcrow. Dark is the tiring-house behind the stage at night, a candle on dark oak.
   Roles are drawn in ink, a player's alternate roles in a paler ink so neighbours part; red is
   kept for one meaning only, no time to change, and always comes with a cross and words. */
:root {
  --paper:#f4eee2; --paper-2:#ebe3d3; --paper-3:#e2d8c4; --ink:#211b15; --ink-soft:#5e5446; --ink-faint:#8a7d6a;
  --rule:#d6cab4; --rule-strong:#a8987d;
  --bar:#2f271e; --bar-alt:#958569; --pick:#a8650a; --pick-soft:rgba(168,101,10,.16);
  --none:#a3231d; --none-soft:rgba(163,35,29,.12); --short:#8a5a00;
  --link:#7a2a12;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#15120e; --paper-2:#1d1914; --paper-3:#26211a; --ink:#ece4d6; --ink-soft:#ab9f8d; --ink-faint:#7f7464;
    --rule:#30291f; --rule-strong:#54493a;
    --bar:#eadcc4; --bar-alt:#9a8a70; --pick:#f0b44c; --pick-soft:rgba(240,180,76,.18);
    --none:#ff7466; --none-soft:rgba(255,116,102,.13); --short:#e8b85c;
    --link:#f0a77e;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper:#15120e; --paper-2:#1d1914; --paper-3:#26211a; --ink:#ece4d6; --ink-soft:#ab9f8d; --ink-faint:#7f7464;
  --rule:#30291f; --rule-strong:#54493a;
  --bar:#eadcc4; --bar-alt:#9a8a70; --pick:#f0b44c; --pick-soft:rgba(240,180,76,.18);
  --none:#ff7466; --none-soft:rgba(255,116,102,.13); --short:#e8b85c;
  --link:#f0a77e;
  color-scheme: dark;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Crimson Pro","Fraunces",Georgia,serif; font-size:1.2rem; line-height:1.55; }
main { max-width:44rem; margin:0 auto; padding:4.4rem 1rem 3rem; }
a { color:var(--link); text-underline-offset:2px; }
:focus-visible { outline:2px solid var(--pick); outline-offset:2px; }
p { margin:0 0 1rem; }
q { quotes:"\201C" "\201D" "\2018" "\2019"; }
.kicker, .mono, figcaption, table, .cap, .controls, .readout, .chips, .tip { font-family:"Martian Mono",ui-monospace,monospace; }
.kicker { font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 .9rem; }
h1 { font-family:"Fraunces",Georgia,serif; font-size:clamp(2.6rem,10.5vw,4.6rem); line-height:.96; margin:0 0 1rem; letter-spacing:-.02em; font-weight:600; }
h1 .old { font-style:italic; font-weight:400; }
.dek { font-size:1.28rem; margin:0 0 2.2rem; }
h2 { font-family:"Fraunces",Georgia,serif; font-size:1.6rem; line-height:1.2; margin:3.2rem 0 1rem; font-weight:600; letter-spacing:-.01em; }
h3 { font-size:1.1rem; margin:0 0 .5rem; }
.v { font-variant-numeric:lining-nums tabular-nums; }
blockquote { margin:1.2rem 0 1.4rem; padding:.2rem 0 .2rem 1.1rem; border-left:3px solid var(--rule-strong); }
blockquote p { margin:0 0 .4rem; }
blockquote .src { font-size:.95rem; color:var(--ink-soft); }
.pilcrow { color:var(--none); }

/* the title page, set as printed */
.tp { margin:1.8rem auto 2.2rem; max-width:24rem; padding:1.6rem 1.4rem 1.4rem; background:var(--paper-2); border:1px solid var(--rule); text-align:center; line-height:1.3; box-shadow:0 1px 0 var(--rule); }
.tp .t1 { font-family:"Fraunces",Georgia,serif; font-size:1.5rem; letter-spacing:.04em; text-transform:uppercase; margin:0 0 .5rem; }
.tp .t2 { font-style:italic; margin:0 0 .8rem; }
.tp .promise { font-size:1.12rem; margin:.9rem 0 .7rem; }
.tp ol { list-style:none; margin:0; padding:0; text-align:left; font-size:1rem; }
.tp ol li { padding:.18rem 0 .18rem 1.8rem; text-indent:-1.8rem; border-top:1px solid var(--rule); }
.tp ol li:first-child { border-top:0; }
.tp .imp { font-size:.88rem; color:var(--ink-soft); margin:.9rem 0 0; }
.tp-cap { text-align:center; font-size:.68rem; color:var(--ink-soft); margin:-1.2rem auto 2rem; max-width:30rem; }

/* instruments */
.instrument { margin:1.6rem -1rem 2.2rem; padding:1.1rem 1rem 1rem; background:var(--paper-2); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); position:relative; }
@media (min-width:820px) { .instrument { margin-left:-6rem; margin-right:-6rem; padding:1.3rem 1.6rem 1.2rem; border:1px solid var(--rule); border-radius:6px; } }
.instrument h3 { font-family:"Martian Mono",ui-monospace,monospace; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; }
.instrument .lede { font-size:1.06rem; }
.controls { display:flex; flex-wrap:wrap; gap:.5rem .9rem; align-items:center; font-size:.72rem; margin:.6rem 0 .7rem; }
.controls select, .controls button { font:inherit; color:var(--ink); background:var(--paper); border:1px solid var(--rule-strong); border-radius:4px; padding:.38rem .55rem; min-height:2.2rem; }
.controls select { max-width:100%; }
.controls button[aria-pressed="true"] { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.controls button:disabled { opacity:.45; }
.controls .grp { display:inline-flex; gap:.3rem; align-items:center; flex-wrap:wrap; }
.controls input[type=range] { width:9.5rem; accent-color:var(--pick); }
#board { position:relative; }
#board-head { margin:.2rem 0 .3rem; }
#board-title { font-family:"Fraunces",Georgia,serif; font-size:1.12rem; font-weight:600; }
#board-promise { display:block; font-style:italic; color:var(--ink-soft); }
.boardwrap { width:100%; overflow:hidden; }
#board-svg { display:block; width:100%; }
#board-svg .grid line { stroke:var(--rule); stroke-width:1; }
#board-svg .grid text { fill:var(--ink-faint); font:9px "Martian Mono",ui-monospace,monospace; }
#board-svg .lane-bg { fill:transparent; }
#board-svg .lane:nth-of-type(odd) .lane-bg { fill:var(--paper-3); opacity:.5; }
#board-svg .lane.tray .lane-bg { fill:var(--pick-soft); opacity:1; }
#board-svg .lane-n { fill:var(--ink-soft); font:600 11px "Martian Mono",ui-monospace,monospace; }
#board-svg .lane-w { fill:var(--ink-soft); font:10px "Martian Mono",ui-monospace,monospace; }
#board-svg .lane-w.bad { fill:var(--none); font-weight:600; }
#board-svg .bar { fill:var(--bar); cursor:pointer; }
#board-svg .bar.alt { fill:var(--bar-alt); }
#board-svg .bar.mark { fill:var(--ink-soft); }
#board-svg .bar.picked, #board-svg .bar.hl { fill:var(--pick); }
#board-svg .tight { fill:none; stroke:var(--pick); stroke-width:1.2; }
#board-svg .tight.bad { stroke:var(--none); }
#board-svg .clash line { stroke-width:2; }
#board-svg .clash.none line { stroke:var(--none); }
#board-svg .clash.short line { stroke:var(--short); }
#board-svg .clash text { font:9px "Martian Mono",ui-monospace,monospace; }
#board-svg .clash.none text { fill:var(--none); }
#board-svg .clash.short text { fill:var(--short); }
.chips { font-size:.7rem; margin:.7rem 0 .2rem; }
.chiprow { display:flex; flex-wrap:wrap; gap:.3rem; align-items:center; padding:.4rem 0; border-top:1px solid var(--rule); }
.chiprow.tray { background:var(--pick-soft); padding-left:.4rem; padding-right:.4rem; border-radius:4px; }
.lanehead { font:inherit; font-weight:600; background:none; border:0; color:var(--ink); padding:.35rem .4rem .35rem 0; min-height:2rem; cursor:pointer; text-decoration:underline; text-decoration-color:var(--rule-strong); text-underline-offset:3px; }
.chip { font:inherit; color:var(--ink); background:var(--paper); border:1px solid var(--rule-strong); border-radius:999px; padding:.28rem .62rem; min-height:2rem; cursor:grab; }
.chip.picked { background:var(--pick); border-color:var(--pick); color:var(--paper); }
.chip.silent { border-style:dotted; color:var(--ink-soft); }
.chipstat { margin-left:auto; color:var(--ink-soft); }
.chipstat.bad { color:var(--none); font-weight:600; }
.readout { font-size:.76rem; line-height:1.6; margin:.8rem 0 .2rem; min-height:3.2em; }
#board-say { font-size:.68rem; color:var(--ink-soft); min-height:1.2em; margin:.2rem 0 0; }
.tip { position:absolute; z-index:5; max-width:16rem; background:var(--ink); color:var(--paper); padding:.5rem .6rem; border-radius:4px; font-size:.66rem; line-height:1.45; pointer-events:none; }
.tip strong { font-weight:600; }
.cap { font-size:.68rem; color:var(--ink-soft); line-height:1.55; }
.nojs { font-size:.8rem; }
html.live .nojs { display:none; }

/* tables */
.tablewrap { overflow-x:auto; margin:1.4rem -1rem 2rem; padding:0 1rem; position:relative; }
table { border-collapse:collapse; font-size:.68rem; width:100%; }
caption { text-align:left; font-size:.68rem; color:var(--ink-soft); padding:0 0 .6rem; line-height:1.55; caption-side:top; }
th, td { text-align:left; vertical-align:top; padding:.42rem .5rem; border-top:1px solid var(--rule); }
thead th { border-top:0; border-bottom:1px solid var(--rule-strong); font-weight:600; }
td.n, th.n { text-align:right; font-variant-numeric:tabular-nums; }
td .bad { color:var(--none); font-weight:600; }
.open { font:inherit; color:var(--link); background:none; border:0; padding:0; text-decoration:underline; cursor:pointer; }

/* small multiples: players needed against lines allowed for a change */
.multiples { display:grid; grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr)); gap:.9rem .8rem; margin:.8rem 0 .4rem; }
.mult { font-family:"Martian Mono",ui-monospace,monospace; font-size:.62rem; }
.mult .mt { font-weight:600; display:block; margin-bottom:.15rem; line-height:1.3; }
.mult svg { display:block; width:100%; height:auto; }
.mult .ax { stroke:var(--rule-strong); stroke-width:1; }
.mult .gl { stroke:var(--rule); stroke-width:1; }
.mult .stepl { fill:none; stroke:var(--bar); stroke-width:2; stroke-linejoin:round; }
.mult .promise { stroke:var(--pick); stroke-width:1.5; }
.mult text { fill:var(--ink-soft); font:8px "Martian Mono",ui-monospace,monospace; }
.mult .ok { fill:var(--pick-soft); }
sup { font-size:.7em; line-height:0; }
.sources li { margin-bottom:.5rem; font-size:1rem; }

/* the page around the board */
.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.facs-pair { display:grid; gap:1.2rem; margin:1.6rem 0 2rem; align-items:start; }
@media (min-width:760px) { .facs-pair { grid-template-columns:1fr 1fr; margin-left:-4rem; margin-right:-4rem; } }
.facs { margin:1.4rem 0 1.8rem; }
.facs-pair .facs, .facs-pair .tp { margin:0; }
.facs img { display:block; width:100%; height:auto; max-width:24rem; margin:0 auto; border:1px solid var(--rule); background:var(--paper-3); }
:root[data-theme="dark"] .facs img { filter:brightness(.86) contrast(1.05); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .facs img { filter:brightness(.86) contrast(1.05); } }
.facs figcaption, .tp figcaption { font-size:.64rem; color:var(--ink-soft); line-height:1.55; margin:.6rem auto 0; max-width:24rem; text-align:left; }
.tp figcaption { margin-top:1rem; }
.tp .t2 + .t2 { margin-top:-.4rem; font-style:normal; }
ul.model, ul.limits { padding-left:1.2rem; }
ul.model li, ul.limits li { margin-bottom:.5rem; }
table.cert { width:auto; min-width:min(100%,30rem); }
table.cert th[scope=row] { white-space:nowrap; font-weight:400; padding-right:.9rem; }
table.cert td { text-align:center; min-width:2.6rem; font-variant-numeric:tabular-nums; }
table.cert td.self { background:var(--paper-3); }
table.cert td.back span[aria-hidden], table.cert td.on span[aria-hidden] { color:var(--none); margin-right:.2rem; }
#promises td:first-child { min-width:10rem; }
#promises td:nth-child(2) { min-width:12rem; font-style:italic; }
#promises td:nth-child(6), #promises td:nth-child(7) { min-width:10rem; }
.check { margin:3rem 0 1rem; padding:1.1rem 1rem .6rem; background:var(--paper-2); border:1px solid var(--rule); border-radius:6px; }
.check h2 { margin-top:0; }
.check pre { overflow-x:auto; font-size:.72rem; background:var(--paper); padding:.7rem .8rem; border:1px solid var(--rule); border-radius:4px; }
ul.tcp { margin:.5rem 0 0; padding-left:1.1rem; font-size:.95rem; }
ul.tcp li { margin-bottom:.25rem; }
.foot { margin-top:3rem; font-family:"Martian Mono",ui-monospace,monospace; font-size:.72rem; }
@media (min-width:1100px) { .tablewrap.wide { margin-left:-11rem; margin-right:-11rem; } }