/* missions/dossier.css — shared HUD + dossier styles for every mission (host.js is the only file that reads
   these class names; a mission's own dossier.js only ever adds children inside .md-body). Tokens match
   style.css's :root (warm parchment, deep ink, copper accent, IBM Plex) so a mission never needs its own palette. */
:root{
  --md-ink:#1f2328; --md-muted:#5d6570; --md-line:#d9d4c9; --md-paper:#fbf8f2; --md-accent:#b8643a; --md-ok:#3f7a4f;
  --md-sans:"IBM Plex Sans",system-ui,sans-serif; --md-mono:"IBM Plex Mono",ui-monospace,monospace;
}
.mission-hud,.mission-hud *,.mission-dossier,.mission-dossier *{box-sizing:border-box}

/* ---------------- mission HUD: title, one-line instruction, dossier + close ---------------- */
.mission-hud{position:fixed;inset:0;z-index:9;pointer-events:none;font:15px/1.5 var(--md-sans);color:var(--md-ink)}
.mission-hud .mh-card{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);pointer-events:auto;
  width:min(560px,calc(100% - 32px));background:var(--md-paper);border:1px solid var(--md-line);border-radius:14px;
  padding:14px 18px 12px;box-shadow:0 18px 44px rgba(30,25,15,.24);text-align:center}
.mh-title{margin:0;font:600 16px var(--md-sans);letter-spacing:-.01em}
.mh-line{margin:4px 0 10px;font-size:13.5px;color:var(--md-muted)}
.mh-actions{display:flex;gap:8px;justify-content:center}
.mh-actions button{min-height:40px;padding:0 16px;border-radius:8px;font:500 14px var(--md-sans);border:1px solid var(--md-ink);background:transparent;color:var(--md-ink);cursor:pointer}
.mh-actions .mh-dossier{background:var(--md-ink);color:#fff}
.mh-actions .mh-dossier[hidden]{display:none}

/* the completion seal — a stamp dropped on the table, not a modal; sits above the HUD card */
.mh-seal{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);pointer-events:none;text-align:center;
  padding:18px 28px;border-radius:12px;background:rgba(27,24,20,.88);color:#f3efe6;box-shadow:0 20px 50px rgba(0,0,0,.35);
  border:1px solid rgba(184,100,58,.55)}
.mh-seal-title{margin:0;font:600 20px var(--md-sans);letter-spacing:.01em}
.mh-seal-title::before{content:"◆ ";color:var(--md-accent)}
.mh-seal-line{margin:4px 0 0;font-size:13px;color:#cfc6b6}

/* ---------------- dossier sheet ---------------- */
.mission-dossier{position:fixed;z-index:10;top:16px;right:16px;bottom:16px;width:min(440px,calc(100% - 32px));
  overflow:auto;background:var(--md-paper);color:var(--md-ink);border:1px solid var(--md-line);border-radius:14px;
  padding:26px 26px 28px;box-shadow:0 20px 50px rgba(30,25,15,.24);font:15px/1.55 var(--md-sans)}
.mission-dossier .grab{display:none}
.mission-dossier .md-close{position:absolute;top:14px;right:14px;min-height:32px;padding:4px 10px;border-radius:6px;
  border:0;background:none;color:var(--md-muted);font:500 13px var(--md-sans);cursor:pointer}
.mission-dossier .md-close:hover{background:#efe8da;color:var(--md-ink)}
.md-body{margin-top:6px}
.md-body h2{margin:0 0 10px;font:600 22px/1.2 var(--md-sans);letter-spacing:-.01em;text-wrap:balance}
.md-body h3{margin:20px 0 8px;font:500 11px var(--md-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--md-muted)}
.md-body p{margin:0 0 10px}
.md-body hr{border:0;border-top:1px solid var(--md-line);margin:18px 0}

/* one sourced figure: value + unit, with its citation directly beneath it (never a bare number) */
.md-figures{display:grid;gap:12px;margin:0 0 14px}
.md-figure{padding:10px 12px;background:#f3ecdf;border-radius:8px}
.md-figure .v{font:600 22px var(--md-mono);color:var(--md-ink)}
.md-figure .v span{font:500 12px var(--md-sans);color:var(--md-muted);margin-left:4px}
.md-figure .label{display:block;font-size:12.5px;color:var(--md-muted);margin-bottom:2px}
.md-source{display:block;margin-top:4px;font-size:11.5px;color:var(--md-muted)}
.md-source a{color:var(--md-accent)}

/* the one anime.js-driven interactive every dossier carries */
.md-interactive{margin:16px 0;padding:14px;border:1px solid var(--md-line);border-radius:10px;background:#fffdf8}

.md-body a{color:var(--md-accent)}
.md-body button{min-height:40px;padding:0 14px;border-radius:8px;border:1px solid var(--md-ink);background:transparent;
  color:var(--md-ink);font:500 14px var(--md-sans);cursor:pointer}
.md-body button.primary{background:var(--md-ink);color:#fff}
.md-body input,.md-body select{min-height:40px;font-size:16px}   /* 16px stops iOS auto-zoom on focus */

/* ---------------- mobile: bottom sheet ---------------- */
@media (max-width:640px){
  .mission-hud .mh-card{bottom:16px;width:calc(100% - 24px);padding:12px 14px 10px}
  .mission-dossier{top:auto;left:0;right:0;bottom:0;width:100%;max-height:82vh;max-height:82dvh;border-radius:18px 18px 0 0;
    padding:10px 20px 24px;box-shadow:0 -14px 40px rgba(30,25,15,.3)}
  .mission-dossier .grab{display:block;width:36px;height:4px;border-radius:3px;background:var(--md-line);margin:6px auto 14px}
  .mission-dossier .md-close{top:8px}
  .md-body h2{font-size:20px}
}