/* Worldbuilding: Games for International Relations — shared styles for Credentials.
   Tokens match the portal and the other games: 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; --slip-tint:#F7F3EA;
  --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;
  --slip-tint:#1F2230;
  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}
h1,h2,h3{line-height:1.25}
h2{font-size:1.15em;color:var(--lapis)}
h3{font-size:1em}

/* 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);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.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)}
.plate .myseal{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--panel);color:var(--lapis)}
.plate .myseal svg{width:28px;height:28px}

/* 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.warn{background:var(--tyrian);border-color:var(--tyrian)}
.btn.keep{background:var(--malachite);border-color:var(--malachite)}
.btn.wide{width:100%}
.btn.small{min-height:38px;padding:.3em .8em;font-size:.88em}
.btn:disabled{opacity:.5;cursor:default}
.btn.big{min-height:56px;font-size:1.1em;padding:.6em 1.4em}
.btn svg.ic{width:1.3em;height:1.3em}

/* The coach line: what to do now, under the plate */
.coach{position:sticky;top:calc(66px + 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.alert{background:var(--tyrian);color:#fff}
.coach.alert .now{background:#fff;color:var(--tyrian)}

/* 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:14em;align-content:start}
.walk .card.saboteur{border-top-color:var(--tyrian)} .walk .card.observer{border-top-color:var(--malachite)}
.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}

/* Panels */
.panel{background:var(--panel);border:1px solid var(--rule);padding:14px 16px;border-radius:8px}
.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;border-radius:0 6px 6px 0}
.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}
.empty{color:var(--muted);font-style:italic;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}
.picker button[aria-pressed="true"]{background:var(--lapis);color:var(--panel)}
.picker button small{display:block;font-size:.45em;font-weight:400;opacity:.8}

/* Tabs */
.tabs{display:flex;gap:6px}
.tabs button{flex:1;min-width:0;min-height:48px;border-radius:999px;border:2px solid var(--rule);background:var(--panel);font:inherit;font-size:.88em;font-weight:700;cursor:pointer;color:var(--ink);padding:2px 4px;line-height:1.15}
.tabs button[aria-pressed="true"]{border-color:var(--lapis);background:var(--lapis-soft);color:var(--lapis)}
.tabs button small{display:block;font-weight:400;color:var(--muted);font-size:.85em}
.tabs button .dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--tyrian);margin-left:4px;vertical-align:1px}

/* 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 .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}

/* ---------- Credentials ---------- */
svg.ic{width:1.25em;height:1.25em;flex:none;vertical-align:-.25em}

/* A seal: the drawn symbol first, its name beside it; colour is only a second cue */
.seal{display:inline-flex;align-items:center;gap:.3em;font-weight:700;white-space:nowrap}
.seal svg{width:1.4em;height:1.4em;flex:none}
.seal.c-lapis svg{color:var(--lapis)} .seal.c-tyrian svg{color:var(--tyrian)} .seal.c-orpiment svg{color:var(--orpiment)} .seal.c-malachite svg{color:var(--malachite)}
.seal.big{font-size:1.4em}
.seal.big svg{width:2.2em;height:2.2em}

/* The delegation's banner */
.banner{background:var(--plate);color:var(--on-plate);border-radius:10px;padding:14px 16px 12px;position:relative;overflow:hidden;border-bottom:6px solid var(--gold)}
.banner .st{display:block;font-size:.72em;letter-spacing:.12em;text-transform:uppercase;color:var(--on-plate-muted);font-weight:700}
.banner h1{margin:.1em 0 0;font-size:1.45em;line-height:1.2}
.banner p{margin:.4em 0 0;color:var(--on-plate-muted);font-size:.88em}
.banner svg.bg{position:absolute;right:-26px;top:-24px;width:130px;height:130px;color:#fff;opacity:.09}

/* A dispatch: a paper card, ruled like a telegram form */
.dispatch{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;position:relative;box-shadow:0 6px 14px -12px rgba(0,0,0,.4)}
.dispatch .meta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:.8em;color:var(--muted)}
.dispatch h3{margin:0;font-size:1.05em;padding-right:5.5em}
.dispatch p.t{margin:0}
.dispatch .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.dispatch .acts .btn{flex:1 1 auto}
.dispatch.new{border-left-color:var(--gold);animation:none}
.dispatch.isforged{border-left-color:var(--tyrian)}
.dispatch.pick{outline:3px solid var(--lapis);outline-offset:-1px}
.dispatch .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(-4deg);background:var(--panel)}
.stamp.forged{color:var(--tyrian)} .stamp.genuine{color:var(--malachite)} .stamp.late{color:var(--orpiment);transform:none;font-size:.7em}
.chip{display:inline-flex;align-items:center;gap:.3em;font-size:.78em;font-weight:700;padding:.12em .55em;border-radius:999px;white-space:nowrap;background:var(--paper);border:1px solid var(--rule);color:var(--muted)}
.chip.late{background:var(--orpiment-soft);border-color:var(--orpiment);color:var(--orpiment)}
.chip.power{background:var(--tyrian-soft);border-color:var(--tyrian);color:var(--tyrian)}
.chip.ok{background:var(--malachite-soft);border-color:var(--malachite);color:var(--malachite)}

/* The Private card: press and hold to read */
.private{border:2px dashed var(--rule);border-radius:10px;background:var(--panel);display:grid;gap:10px;padding:14px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
.private .hold{min-height:120px;border-radius:8px;background:repeating-linear-gradient(135deg,var(--lapis-soft) 0 12px,var(--paper) 12px 24px);display:grid;place-items:center;text-align:center;font-weight:700;color:var(--lapis);cursor:pointer;padding:12px}
.private.open .hold{display:none}
.private .inside{display:none;gap:10px}
.private.open .inside{display:grid}
.private.open{border-style:solid;border-color:var(--lapis)}
.private.open.saboteur{border-color:var(--tyrian);background:var(--tyrian-soft)}
.private.open.observer{border-color:var(--malachite);background:var(--malachite-soft)}
.private .rolename{font-size:1.4em;font-weight:700;margin:0}
.private .fiction{font-size:.8em;color:var(--muted);border-top:1px dashed var(--rule);padding-top:6px;margin:0}

/* The brief: a sealed document, double-bordered */
.brief{border:5px double var(--lapis);border-radius:4px;padding:14px 16px;background:linear-gradient(180deg,var(--panel),var(--slip-tint));display:grid;gap:8px;position:relative}
.brief.sent{border-color:var(--malachite)}
.brief h2{margin:0}
.brief ol{margin:0;padding-left:1.4em;display:grid;gap:6px}
.brief .wax{position:absolute;right:-8px;bottom:-10px;width:50px;height:50px;color:var(--malachite)}

/* A Summit */
.summit{background:var(--tyrian-soft);border:3px solid var(--tyrian);border-radius:10px;padding:14px;display:grid;gap:10px}
.summit h2{color:var(--tyrian);margin:0}
.summit .votes{display:flex;gap:8px}
.summit .votes .btn{flex:1}
.timerbar{height:8px;border-radius:4px;background:var(--rule);overflow:hidden}
.timerbar i{display:block;height:100%;background:var(--tyrian)}

/* The delegation list */
.people{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5em,1fr));gap:6px}
.people li{background:var(--panel);border:1px solid var(--rule);border-radius:8px;padding:6px 8px;display:grid;gap:2px;font-size:.92em}
.people li.me{border-color:var(--lapis);border-width:2px}
.people li small{color:var(--muted);font-size:.8em}
.people li.caught{background:var(--tyrian-soft);border-color:var(--tyrian)}
.people li.confirmed{background:var(--malachite-soft)}
.people li.observer{border-style:dashed}
.seals-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(7.5em,1fr));gap:8px}
.seals-grid button{min-height:56px;border-radius:8px;border:2px solid var(--rule);background:var(--panel);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-weight:700;color:var(--ink)}
.seals-grid button:disabled{opacity:.4;cursor:default}
.seals-grid button[aria-pressed="true"]{border-color:var(--lapis);background:var(--lapis-soft)}