/* Worldbuilding: Games for International Relations — shared styles for The Treaty Table.
   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: symbols first, colour second */
.good{display:inline-flex;align-items:baseline;gap:.15em;white-space:nowrap;font-weight:700}
.good i{font-style:normal;font-size:1.15em;line-height:1}
.good.circle i{color:var(--g-circle)} .good.triangle i{color:var(--g-triangle)} .good.square i{color:var(--g-square)} .good.star i{color:var(--g-star)}
.goods{display:inline-flex;flex-wrap:wrap;gap:.2em .7em;align-items:baseline}
.goods .none{color:var(--muted);font-weight:400}
.oath{display:inline-block;border:3px double currentColor;padding:0 .35em;font-size:.8em;font-weight:700;line-height:1.5}

/* The slip: the one memorable thing. A treaty looks like a treaty. */
.slip{background:var(--panel);border:5px double var(--lapis);padding:14px 16px 12px;position:relative}
.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 .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)}
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}