/* The visual language is in ../DESIGN.md: the SCEAT's engraved plan of the
   company's lands — cream paper, iron-gall ink, hairlines, double rules,
   hatching, a Didone, one red for the library stamp. */
@font-face { font-family:"Bodoni Moda"; font-style:normal; font-weight:400 900;
             font-display:swap; src:url(bodoni-moda-normal.woff2) format("woff2"); }
@font-face { font-family:"Bodoni Moda"; font-style:italic; font-weight:400 900;
             font-display:swap; src:url(bodoni-moda-italic.woff2) format("woff2"); }

:root { --paper:#e9dfc9; --plate:rgba(252,249,241,.98); --ink:#2b211a; --faint:#857765;
        --rule:#b4a68f; --stamp:#c0402a; --ghost:.36; }
@media (prefers-color-scheme: dark) {
  :root { --paper:#18140f; --plate:rgba(28,23,18,.93); --ink:#eadfca; --faint:#9d907b;
          --rule:#4d4336; --stamp:#e07058; --ghost:.13; }
  body::before { filter:invert(1); }
}

* { box-sizing:border-box; }
/* horizontal swipes turn the plates, not the browser's history */
html, body { overscroll-behavior-x:none; }
body { margin:0; background:var(--paper); color:var(--ink);
       font:17px/1.55 "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif;
       font-optical-sizing:auto; font-variant-numeric:oldstyle-nums; }
/* The plan, ghosted behind every plate (doc/maps/plan_de_texas_la_reunion.jpg,
   2400px copy). */
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
       background:url(plan.jpg) center / cover no-repeat; opacity:var(--ghost); }

.caps, header, .yrs, .eyebrow, .kind, .choice h3, summary, caption, th, nav .n,
button { font-variant:small-caps; letter-spacing:.14em; font-variant-numeric:lining-nums; }

header { padding:.7rem 1rem; border-bottom:1px solid var(--rule); background:var(--paper);
         font-size:14px; color:var(--faint); text-transform:lowercase; }
header a { color:var(--ink); text-decoration:none; }
main { padding:1.5rem 1.5rem 3rem; }
main:has(.title) { max-width:64rem; margin:0 auto; }

/* Title: the cartouche, centered on the plate */
.title { min-height:calc(100vh - 7rem); display:flex; align-items:center; justify-content:center; }
/* sized in em so the whole card scales together: 1.225 = 1.5× the area */
.cartouche { font-size:1.225em; text-align:center; max-width:34em; padding:2.6em 3em;
             background:var(--plate); border:4px double var(--ink);
             outline:1px solid var(--rule); outline-offset:8px; }
.cartouche h1 { font-size:2.5em; line-height:1.15; font-weight:500; margin:.4em 0; }
.cartouche .yrs { font-size:.88em; }
.cartouche button { font-size:.88em; }
.yrs { color:var(--faint); font-size:15px; }
.rule { width:9em; border:0; border-top:3px double var(--ink); margin:1.1em auto; }
.cartouche .mode { font-style:italic; color:var(--faint); }

button { font:inherit; font-size:15px; font-variant:small-caps; cursor:pointer;
         padding:.55rem 1.6rem; color:var(--ink); background:transparent;
         border:1px solid var(--ink); outline:1px solid var(--rule); outline-offset:3px; }
button:hover { background:var(--ink); color:var(--paper); }
button:disabled { visibility:hidden; }

/* A plate: the event or decision, framed */
/* centered in the space the Légende leaves */
main:has(.screen) { padding-right:calc(21rem + 1.5rem); min-height:calc(100vh - 2.45rem);
                    display:flex; align-items:center; }
.screen { width:100%; max-width:48rem; margin:0 auto; }
.beat { background:var(--plate); padding:1.8rem 2rem 1.4rem;
        border:3px double var(--ink); outline:1px solid var(--rule); outline-offset:5px; }
.head { display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
        border-bottom:1px solid var(--rule); padding-bottom:.4rem; }
.eyebrow { color:var(--faint); font-size:13px; }
.kind { font-size:13px; color:var(--faint); white-space:nowrap; }
.kind.decision { color:var(--stamp); }
.kind.ending { color:var(--ink); border-bottom:3px double var(--ink); }
.date { font-size:2.1rem; line-height:1.2; margin:.9rem 0 .7rem; text-align:center; }
.recorded { text-align:center; margin:-.6rem 0 .7rem; font-size:.85rem; font-style:italic;
            color:var(--faint); }
.text { font-size:1.12rem; }

.choice { margin:1.4rem 0 0; }
.choice h3 { font-size:13px; font-weight:normal; color:var(--faint); margin:0 0 .3rem;
             text-align:center; }
.options { list-style:none; margin:0; padding:0; border-top:3px double var(--ink); }
.options li { padding:.6rem .4rem .6rem 2rem; border-bottom:1px solid var(--rule);
              position:relative; font-style:italic; }
.options li.taken::before { content:"☞"; position:absolute; left:.3rem; font-style:normal;
              color:var(--stamp); }
.options li.locked { color:var(--faint); }
.options li.locked::after { content:" — not yet playable"; font-style:normal; font-size:13px;
              font-variant:small-caps; letter-spacing:.1em; }

.lines { border-collapse:collapse; width:100%; margin-top:.4rem; }
.lines td { padding:.45rem .5rem; border-bottom:1px solid var(--rule); vertical-align:top; }
.lines .when { white-space:nowrap; font-style:italic; color:var(--faint); width:7rem;
               border-right:1px solid var(--rule); }

details { margin-top:1.2rem; font-size:.9rem; color:var(--faint); }
summary { cursor:pointer; font-size:13px; }
details p { margin:.5rem 0; }
details .note.open { color:var(--stamp); }

/* The controls: pinned to the foot of the window, always in the same place */
.controls { position:fixed; left:0; right:21rem; bottom:0; z-index:4; display:flex; align-items:center;
      justify-content:center; gap:1rem; padding:.8rem 1.5rem;
      background:var(--paper); border-top:3px double var(--ink); }
main:has(.screen) { padding-bottom:6rem; }
button.go { background:var(--ink); color:var(--paper); padding:.65rem 1.8rem; font-size:16px;
            white-space:nowrap; }
button.go:hover { background:var(--stamp); border-color:var(--stamp); }
nav .bar { flex:0 1 20rem; min-width:4rem; height:7px; border:1px solid var(--ink); }
nav .bar span { display:block; height:100%;
       background:repeating-linear-gradient(135deg, var(--ink) 0 1px, transparent 1px 4px); }
nav .n { font-size:13px; color:var(--faint); white-space:nowrap; }

/* The Légende: ruled tables, as on the plan, pinned to the right edge */
aside { position:fixed; top:2.45rem; right:0; bottom:0; width:21rem; overflow-y:auto;
        background:var(--plate); padding:1rem 1.1rem 2rem; border-left:3px double var(--ink); }
.since { text-align:center; margin:-.4rem 0 0; font-size:.8rem; font-style:italic; color:var(--faint); }
.legende { font-size:1.9rem; font-weight:500; text-align:center; margin:0; }
.seat { text-align:center; margin:.1rem 0 .6rem; font-size:.92rem; color:var(--faint); }
.seat i { color:var(--ink); }
.leg { width:100%; border-collapse:collapse; margin:1rem 0 0; font-size:.9rem; }
.leg caption { font-size:14px; padding-bottom:.25rem; }
.leg caption small { font-size:11px; color:var(--faint); letter-spacing:.1em; }
.leg th { font-size:11px; font-weight:normal; color:var(--faint);
          border-top:1px solid var(--ink); border-bottom:1px solid var(--rule); padding:.2rem .3rem; }
.leg td { padding:.28rem .35rem; border-bottom:1px solid var(--rule); vertical-align:top; }
.leg td:first-child { font-style:italic; }
.leg td:last-child { text-align:right; border-left:1px solid var(--rule); white-space:nowrap; }
.leg tbody tr:last-child td { border-bottom:1px solid var(--ink); }
.leg tfoot td { border-top:3px double var(--ink); border-bottom:0; font-style:normal; }
.leg tr.changed td:first-child, .leg tr.neg td { color:var(--stamp); }
.leg sup { font-size:.62em; font-style:italic; margin-left:.1em; }
.leg .src { display:block; font-size:11px; color:var(--faint); font-style:italic; white-space:normal; }
.leg i { font-style:normal; font-size:11px; }
.leg i.up { color:var(--faint); } .leg i.down { color:var(--stamp); } .leg i.nil { color:var(--rule); }
.leg.moves td:nth-child(2) { text-align:right; border-left:1px solid var(--rule); white-space:nowrap; }
.leg.moves td:last-child { width:3.6rem; }
.meter { display:inline-block; width:3.4rem; height:8px; border:1px solid var(--ink);
         vertical-align:middle; margin-right:.4rem; }
.meter span { display:block; height:100%;
         background:repeating-linear-gradient(135deg, var(--ink) 0 1px, transparent 1px 3.5px); }
.num { display:inline-block; min-width:1.4rem; }

@media (max-width:760px) {
  aside { position:static; width:auto; border-left:0; border-top:3px double var(--ink); margin-top:1.5rem; }
  main:has(.screen) { padding-right:1rem; display:block; min-height:0; }
  .controls { right:0; padding:.6rem 1rem; }
  .beat { padding:1.1rem 1rem; }
  .cartouche { font-size:1em; padding:1.8rem 1.2rem; }
  .date { font-size:1.6rem; }
}

/* The log: everything so far, as a ruled register over the plate */
.log-open { overflow:hidden; }
.log { position:fixed; inset:0; background:rgba(43,33,26,.35); display:flex;
       align-items:flex-start; justify-content:center; padding:4vh 1rem; z-index:5; }
.log .beat { width:100%; max-width:46rem; max-height:92vh; overflow:auto; }
.log .when { width:8rem; }
.log .rec { display:block; font-size:.8em; }
.log .chosen { display:block; font-style:italic; color:var(--faint); }
.log .chosen::before { content:"☞ "; color:var(--stamp); font-style:normal; }
.log .quiet td { color:var(--faint); }
.log .close { display:block; margin:1.2rem auto 0; }
.leg tr.sub td { font-style:normal; font-variant:small-caps; letter-spacing:.12em; font-size:11px;
         color:var(--faint); text-align:center; border-left:0; padding-top:.6rem; }

/* The ending: the score, in the title's cartouche */
.score h1 { font-size:3.2em; margin:.1em 0 0; }
.score .leg { font-size:.8em; text-align:left; margin:0 0 1.4em; }
.score .leg td { text-align:right; border-left:1px solid var(--rule); white-space:nowrap; }
.score .leg td:first-child { text-align:left; border-left:0; }
.score .leg td:nth-child(3) { color:var(--faint); font-style:italic; }
/* the wage ratio, 0–150% of Dallas wages, drawn as a slider track */
.meter.slider span { background:repeating-linear-gradient(135deg, var(--stamp) 0 1px, transparent 1px 3.5px); }
.leg tr.wage-ratio td:first-child { font-size:.92em; }
.leg tr.total td { border-top:3px double var(--ink); font-style:normal; }
aside .rule { margin:1.3rem auto .2rem; }

/* The Légende's tabs */
.tabs { display:flex; margin:-.4rem 0 1rem; border-bottom:3px double var(--ink); }
.tabs .tab { flex:1; font-size:12px; padding:.4rem 0; border:0; outline:0; background:none;
             color:var(--faint); border-bottom:2px solid transparent; margin-bottom:-3px; }
.tabs .tab:hover { background:none; color:var(--ink); }
.tabs .tab.on { color:var(--ink); border-bottom-color:var(--stamp); }
.stars { color:var(--stamp); letter-spacing:.1em; font-size:.9em; }
.stars span { color:var(--rule); }
.leg.people td:not(:first-child) { text-align:center; border-left:1px solid var(--rule); }
.leg.people .stars { font-size:.78em; letter-spacing:0; }