/* Worldbuilding: Games for International Relations — shared styles for The Timeline.
   Tokens match the portal and the Blackboard kit: Verdana, Lapis plates on Paper, the four thread colours. */
:root{
  --paper:#F6F7FA; --panel:#FFFFFF; --ink:#1B1E2B; --muted:#4A5068; --rule:#DCE0EA;
  --lapis:#233A8C; --lapis-deep:#1A2C6E; --lapis-soft:#DDE3F4; --plate:#233A8C; --on-plate:#FFFFFF; --on-plate-muted:#C9D2F0;
  --tyrian:#6B2D5C; --tyrian-soft:#F3E6EF; --orpiment:#8F6200; --orpiment-soft:#FFF3CF; --malachite:#2A7560; --malachite-soft:#E1F1EB;
  --gold:#E2B350;
  --g-circle:#B37A00; --g-triangle:#2F7FB0; --g-square:#007A5C; --g-star:#B84A00;
  --f:Verdana,"DejaVu Sans",system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#11131A; --panel:#191C26; --ink:#E4E7F0; --muted:#A2A8BC; --rule:#2D3243;
  --lapis:#AEBDF4; --lapis-deep:#C9D2F0; --lapis-soft:#28315A; --plate:#1B2A66; --on-plate:#FFFFFF; --on-plate-muted:#B8C3EA;
  --tyrian:#E59ACD; --tyrian-soft:#3A2233; --orpiment:#E2B350; --orpiment-soft:#3B3114; --malachite:#72D1B0; --malachite-soft:#18332B;
  --g-circle:#E69F00; --g-triangle:#56B4E9; --g-square:#2FC39A; --g-star:#FF7A3D;
  color-scheme:dark;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font:16px/1.55 var(--f);min-height:100vh}
button,input,textarea,select{font:inherit;color:inherit}
a{color:var(--lapis);text-underline-offset:.18em}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* The Lapis plate: the band that heads every screen */
.plate{background:var(--plate);color:var(--on-plate);padding:12px 16px;padding-top:calc(12px + env(safe-area-inset-top,0px));display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:3}
.plate svg.mark{width:34px;height:34px;flex:none;color:var(--on-plate)}
.plate .who{min-width:0;flex:1}
.plate .who b{display:block;font-size:1.05em;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plate .who span{display:block;font-size:.8em;color:var(--on-plate-muted)}
.plate .clock{font-variant-numeric:tabular-nums;font-weight:700;font-size:1.15em;text-align:right;white-space:nowrap}
.plate .clock small{display:block;font-weight:400;font-size:.65em;color:var(--on-plate-muted)}
.plate .clock.urgent{color:var(--gold)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:46px;padding:.55em 1.1em;border-radius:6px;border:2px solid var(--lapis);background:var(--lapis);color:var(--panel);font-weight:700;cursor:pointer;text-decoration:none;line-height:1.2;text-align:center}
@media (prefers-color-scheme:dark){.btn{color:#11131A}}
.btn.ghost{background:transparent;color:var(--lapis)}
.btn.quiet{background:var(--panel);color:var(--ink);border-color:var(--rule)}
.btn.break{background:var(--tyrian);border-color:var(--tyrian)}
.btn.keep{background:var(--malachite);border-color:var(--malachite)}
.btn.wide{width:100%}
.btn:disabled{opacity:.5;cursor:default}
.btn.big{min-height:56px;font-size:1.1em;padding:.6em 1.4em}

/* Goods: each has its own drawing (the shape is the code); colour only helps */
svg.gi{width:1.45em;height:1.45em;flex:none;vertical-align:-.32em;--hi:var(--panel)}
.hi{stroke:var(--hi,#fff);opacity:.75}
.hi-dot{fill:var(--hi,#fff)}
.good{display:inline-flex;align-items:center;gap:.18em;white-space:nowrap;font-weight:700}
.good.circle{color:var(--g-circle)} .good.triangle{color:var(--g-triangle)} .good.square{color:var(--g-square)} .good.star{color:var(--g-star)}
.good b{color:var(--ink)}
.good .gname-t{color:var(--ink);font-weight:400;margin-left:.15em}
.goods{display:inline-flex;flex-wrap:wrap;gap:.25em .8em;align-items:center}
.goods .none{color:var(--muted);font-weight:400}
.oath{display:inline-flex;align-items:center;gap:.15em;font-weight:700;white-space:nowrap;color:var(--tyrian)}
.oath b{color:var(--ink)}
.oath .oath-w{font-size:.72em;letter-spacing:.08em;color:var(--muted);margin-left:.2em}

/* Token tiles: what you hold, what you need */
.tokens{display:grid;grid-template-columns:repeat(auto-fill,minmax(5.6em,1fr));gap:8px}
.tok{display:grid;justify-items:center;gap:2px;padding:10px 6px 8px;border-radius:10px;background:var(--paper);border:1px solid var(--rule);text-align:center;position:relative}
.tok svg.gi{width:2.4em;height:2.4em;--hi:var(--paper)}
.tok .n{font-size:1.3em;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.tok .l{font-size:.74em;color:var(--muted);line-height:1.2}
.tok.zero{opacity:.45}
.tok.circle svg{color:var(--g-circle)} .tok.triangle svg{color:var(--g-triangle)} .tok.square svg{color:var(--g-square)} .tok.star svg{color:var(--g-star)} .tok.oathtok svg{color:var(--tyrian)}
.tok.need.met{background:var(--malachite-soft);border-color:var(--malachite)}
.tok.need.short{background:var(--panel);border:2px dashed var(--tyrian)}
.tok.need.met svg.gi{--hi:var(--malachite-soft)}
.tok .tag{position:absolute;top:-8px;right:-4px;font-size:.66em;font-weight:700;padding:1px 6px;border-radius:999px;background:var(--malachite);color:var(--panel)}
.tok.short .tag{background:var(--tyrian)}

/* The coach line: what to do now, under the plate */
.coach{position:sticky;top:calc(58px + env(safe-area-inset-top,0px));z-index:2;background:var(--gold);color:#1B1E2B;padding:10px 16px;font-weight:700;line-height:1.4;display:flex;gap:10px;align-items:center;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.coach:empty{display:none}
.coach .now{font-size:.7em;letter-spacing:.12em;text-transform:uppercase;background:#1B1E2B;color:var(--gold);padding:2px 7px;border-radius:4px;flex:none}
.coach svg.gi{--hi:var(--gold)}
.coach .good b,.coach .good .gname-t{color:#1B1E2B}

/* Walkthrough cards */
.walk{display:grid;gap:14px}
.walk .dots{display:flex;gap:6px;justify-content:center}
.walk .dots i{width:9px;height:9px;border-radius:50%;background:var(--rule)}
.walk .dots i.on{background:var(--lapis)}
.walk .card{background:var(--panel);border:1px solid var(--rule);border-top:8px solid var(--lapis);border-radius:10px;padding:18px 18px 16px;display:grid;gap:10px;min-height:16em;align-content:start}
.walk .card h2{margin:0;font-size:1.3em}
.walk .card p{margin:0}
.walk .step{font-size:.75em;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.walk .nav{display:flex;gap:8px}
.walk .nav .btn{flex:1}
.how{display:flex;gap:8px;flex-wrap:wrap}

/* The slip: the one memorable thing. A treaty looks like a treaty: a sealed document. */
.slip{background:linear-gradient(180deg,var(--panel),var(--slip-tint,var(--panel)));border:5px double var(--lapis);border-radius:4px;padding:14px 16px 12px;position:relative;box-shadow:0 1px 0 var(--rule),0 6px 14px -10px rgba(0,0,0,.35)}
.slip .wax{position:absolute;right:-10px;bottom:-12px;width:54px;height:54px;color:var(--lapis);filter:drop-shadow(0 2px 2px rgba(0,0,0,.25));--hi:var(--panel)}
.slip.kept .wax{color:var(--malachite)} .slip.broken .wax{color:var(--tyrian);transform:rotate(14deg)}
.slip .formula{margin:0 0 .7em;padding-right:5.8em;font-style:italic;color:var(--muted);font-size:.95em}
.slip .terms{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin:0}
.slip .terms dt{font-size:.85em;color:var(--muted)}
.slip .terms dd{margin:0}
.slip .later{display:block;font-size:.85em;color:var(--muted);margin-top:.2em}
.slip .note{margin:.8em 0 0;font-size:.9em;border-left:3px solid var(--rule);padding-left:10px}
.slip .clauses{margin:.8em 0 0;padding:0;list-style:none;display:grid;gap:4px}
.slip .clauses li{font-size:.9em;padding-left:1.3em;position:relative}
.slip .clauses li::before{content:"§";position:absolute;left:0;color:var(--lapis);font-weight:700}
.slip.private{border-style:solid;border-width:1px;background:var(--panel);box-shadow:none;padding:10px 14px}
.slip.private .formula{padding-right:0;margin:0}
/* Table letters: big, tappable */
.picker{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.picker button{font:inherit;font-size:1.5em;font-weight:700;padding:14px 0;border-radius:10px;border:2px solid var(--lapis);background:var(--panel);color:var(--lapis);cursor:pointer;position:relative}
.picker button[aria-pressed="true"]{background:var(--lapis);color:#fff}
.picker button small{display:block;font-size:.45em;font-weight:400;opacity:.8}
.picker button:disabled{opacity:.35;cursor:default}
.slip .seal{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-top:.9em;padding-top:.7em;border-top:1px solid var(--rule);font-size:.88em;color:var(--muted)}
.slip .seal .num{font-weight:700;color:var(--lapis)}
.slip .stamp{position:absolute;top:10px;right:12px;font-weight:700;font-size:.78em;padding:.15em .55em;border:2px solid currentColor;border-radius:3px;transform:rotate(-3deg)}
.stamp.kept{color:var(--malachite)} .stamp.broken{color:var(--tyrian)} .stamp.active{color:var(--lapis)} .stamp.waiting{color:var(--orpiment)} .stamp.closed{color:var(--muted)}
.slip.offer{border-style:dashed;border-width:3px}
.slip.broken{border-color:var(--tyrian)}
.slip.kept{border-color:var(--malachite)}

/* Panels and lists */
.panel{background:var(--panel);border:1px solid var(--rule);padding:14px 16px}
.panel h2,.panel h3{margin:0 0 .5em}
.panel>p:first-child{margin-top:0}
.call{border-left:6px solid var(--orpiment);background:var(--orpiment-soft);padding:12px 14px}
.call.lapis{border-left-color:var(--lapis);background:var(--lapis-soft)}
.call.tyrian{border-left-color:var(--tyrian);background:var(--tyrian-soft)}
.call.malachite{border-left-color:var(--malachite);background:var(--malachite-soft)}
.call p{margin:.2em 0}
.muted{color:var(--muted)}
.err{color:var(--tyrian);font-weight:700}
.ok{color:var(--malachite);font-weight:700}
h1,h2,h3{line-height:1.25}
h2{font-size:1.15em;color:var(--lapis)}
:root{--slip-tint:#F7F3EA}
@media (prefers-color-scheme:dark){:root{--slip-tint:#1F2230}}
h3{font-size:1em}

/* Steppers for building a treaty */
.stepper{display:inline-grid;grid-template-columns:44px 2.6em 44px;align-items:center;border:1px solid var(--rule);border-radius:6px;background:var(--panel)}
.stepper button{height:44px;border:0;background:transparent;font-size:1.3em;font-weight:700;color:var(--lapis);cursor:pointer}
.stepper button:disabled{color:var(--rule);cursor:default}
.stepper output{text-align:center;font-weight:700;font-variant-numeric:tabular-nums}

/* Bottom sheet */
.sheet{position:fixed;inset:0;background:rgba(12,14,22,.55);display:flex;align-items:flex-end;justify-content:center;z-index:10}
.sheet .box{background:var(--paper);width:100%;max-width:560px;max-height:92vh;overflow:auto;border-top:8px solid var(--lapis);padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px));display:grid;gap:14px}
@media (min-width:640px){.sheet{align-items:center}.sheet .box{border-radius:8px}}
@media (prefers-reduced-motion:no-preference){.sheet .box{animation:rise .2s ease-out both}@keyframes rise{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}}

/* Toast */
.toast{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:6px;max-width:calc(100% - 32px);z-index:20;font-weight:700}
.toast.bad{background:var(--tyrian);color:#fff}

/* The compass, faint, behind projector and landing plates */
.rose{position:absolute;right:-10vmin;top:50%;transform:translateY(-50%);width:80vmin;height:80vmin;color:#fff;opacity:.07;pointer-events:none}

/* Settings form (setup page and tutor screen) */
.sgroup{border:1px solid var(--rule);border-radius:10px;padding:12px 14px 14px;display:grid;gap:14px;margin:0}
.sgroup legend{font-weight:700;color:var(--lapis);padding:0 6px}
.sgroup .field{display:grid;gap:6px}.sgroup .field label{font-weight:700}.sgroup .field small{color:var(--muted)}
.sgroup select{width:100%;padding:10px;border:1px solid var(--rule);border-radius:6px;background:var(--panel);font:inherit;max-width:100%}
.sgroup select:disabled{opacity:.5}
.sgroup .check{display:flex;gap:10px;align-items:flex-start}.sgroup .check input{width:22px;height:22px;margin-top:2px;accent-color:var(--lapis);flex:none}
.sgroup .grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}

/* ---------- The Timeline ---------- */
svg.ic{width:1.25em;height:1.25em;flex:none;vertical-align:-.25em}
/* An item of evidence: a catalogue card, with the date tab at the top */
.item{background:linear-gradient(180deg,var(--panel),var(--slip-tint));border:1px solid var(--rule);border-left:6px solid var(--lapis);border-radius:6px;padding:12px 14px;display:grid;gap:6px;box-shadow:0 6px 14px -12px rgba(0,0,0,.4)}
.item header{display:grid;gap:2px}
.item h3{margin:0;font-size:1.05em;line-height:1.3}
.item .when{font-size:.8em;font-weight:700;letter-spacing:.06em;color:var(--lapis);font-variant-numeric:tabular-nums}
.item .nodate{color:var(--orpiment);font-weight:700;letter-spacing:0;text-transform:none}
.item .claim{margin:0}
.item .src{margin:0;font-size:.85em;color:var(--muted);border-top:1px dashed var(--rule);padding-top:6px}
.item .rev{margin-top:4px;background:var(--malachite-soft);border-left:4px solid var(--malachite);padding:8px 10px;border-radius:4px;font-size:.92em}
.item .rev p{margin:.15em 0}
.item.isaside{border-left-color:var(--muted)}
.lchip,.achip{display:inline-flex;align-items:center;gap:.3em;font-size:.78em;font-weight:700;padding:.12em .55em;border-radius:999px;white-space:nowrap}
.lchip.event{background:var(--lapis-soft);color:var(--lapis)}
.lchip.account{background:var(--tyrian-soft);color:var(--tyrian)}
.lchip.aside{background:var(--paper);color:var(--muted);border:1px solid var(--rule)}
.achip{background:var(--orpiment-soft);color:var(--orpiment);border:1px dashed var(--orpiment)}
/* The timeline: a numbered spine */
.lane{background:var(--panel);border:1px solid var(--rule);border-radius:10px;padding:10px 12px 12px;display:grid;gap:8px}
.lane>h2{margin:0;display:flex;align-items:center;gap:8px;font-size:1.05em}
.lane>h2{color:var(--lapis)} .lane.aside>h2{color:var(--muted)}
.lane>p.help{margin:0;font-size:.85em;color:var(--muted)}
.spine{list-style:none;margin:0;padding:0 0 0 22px;display:grid;gap:8px;position:relative}
.spine::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;border-left:3px solid var(--lapis-soft)}
.spine>li{position:relative}
.spine>li::before{content:"";position:absolute;left:-19px;top:14px;width:11px;height:11px;border-radius:50%;background:var(--panel);border:3px solid var(--lapis)}
.spine>li.account::before{border-color:var(--tyrian);border-radius:3px}
.spine>li.assumed::before{border-style:dashed}
.row.account{border-left:4px solid var(--tyrian)} .row.event{border-left:4px solid var(--lapis)}
.kindsw{display:inline-flex;border:1px solid var(--rule);border-radius:999px;overflow:hidden;flex:none}
.kindsw button{min-height:36px;border:0;background:var(--panel);font:inherit;font-size:.8em;font-weight:700;padding:0 10px;cursor:pointer;color:var(--muted);display:inline-flex;gap:4px;align-items:center}
.kindsw button[aria-pressed="true"].event{background:var(--lapis-soft);color:var(--lapis)}
.kindsw button[aria-pressed="true"].account{background:var(--tyrian-soft);color:var(--tyrian)}
.row{background:var(--paper);border:1px solid var(--rule);border-radius:8px;padding:8px 10px;display:grid;gap:6px}
.row .top{display:flex;gap:8px;align-items:flex-start}
.row .top .t{flex:1;min-width:0}
.row .top .t b{display:block;line-height:1.3}
.row .top .t small{color:var(--muted)}
.row .moves{display:flex;gap:6px;flex:none}
.row .moves button,.ctl button{min-width:44px;min-height:44px;border-radius:6px;border:1px solid var(--rule);background:var(--panel);color:var(--lapis);font:inherit;font-weight:700;cursor:pointer;padding:0 10px}
.row .moves button:disabled,.ctl button:disabled{opacity:.35;cursor:default}
.ctl{display:flex;flex-wrap:wrap;gap:6px}
.ctl button[aria-pressed="true"]{background:var(--orpiment-soft);border-color:var(--orpiment);color:var(--orpiment)}
.row details{border:0;padding:0;background:none}
.row details summary{font-size:.85em;color:var(--lapis);cursor:pointer;font-weight:700}
.row details .claim{margin:.4em 0 .2em}
.row details .src{margin:0;font-size:.85em;color:var(--muted)}
.empty{color:var(--muted);font-style:italic;margin:0}
.sealbox{border:5px double var(--lapis);border-radius:6px;padding:14px;background:var(--panel);display:grid;gap:8px}
.sealbox.sealed{border-color:var(--malachite)}
.sealbox .seal-ic{width:2.4em;height:2.4em;color:var(--malachite);--hi:var(--panel)}
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.checklist li{display:flex;gap:8px;align-items:baseline}
.checklist li::before{content:"○";color:var(--tyrian);font-weight:700}
.checklist li.done::before{content:"✓";color:var(--malachite)}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs button{flex:1;min-height:44px;border-radius:999px;border:2px solid var(--rule);background:var(--panel);font:inherit;font-weight:700;cursor:pointer;color:var(--ink)}
.tabs button[aria-pressed="true"]{border-color:var(--lapis);background:var(--lapis-soft);color:var(--lapis)}
.tabs button small{font-weight:400;color:var(--muted)}

/* How sharp a date is: four pips, century to full date */
.sharp{display:inline-flex;align-items:center;gap:6px}
.sharp .pips{display:inline-flex;gap:2px}
.sharp .pips i{width:6px;height:10px;border-radius:2px;background:var(--rule)}
.sharp .pips i.on{background:var(--lapis)}
.sharp.l0{color:var(--muted);font-style:italic}
.sharp.l3{color:var(--malachite)}
.sharp.l3 .pips i.on{background:var(--malachite)}
.research{display:grid;gap:8px;background:var(--lapis-soft);border:1px solid var(--lapis);border-radius:10px;padding:12px 14px}
.research p{margin:0}
.research .tok{display:inline-flex;gap:4px;vertical-align:middle}
.research .tok i{width:14px;height:14px;border-radius:50%;border:2px solid var(--lapis);background:var(--lapis)}
.research .tok i.used{background:transparent;opacity:.45}