/* TacMed Sim — shared design system.
   Derived from the eFAST landing style (navy / steel / gold), extended for the
   smoke-test toolkit. Body text is black, no micro fonts. */

:root {
  --navy:#0d2340; --steel:#1e4976; --gold:#9a7a1e; --gold-light:#e8c97a;
  --bg:#f5f7fa; --card:#ffffff; --border:#9fb0c4; --text:#111111; --ink2:#26313f;
  --green:#155d30; --red:#8c2024;
  /* kit-design action colours */
  --a-add:#1e6b3a; --a-cons:#5c1a8c; --a-red:#6b5a1e; --a-keep:#0d2340; --a-org:#b85c00;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body {
  font-family:-apple-system,system-ui,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.55;
  -webkit-font-smoothing:antialiased; font-size:17px; padding:1.6rem 1rem 3rem;
  zoom:1.5;
}
.container { max-width:1040px; margin:0 auto; }
a { color:var(--steel); }

/* ---------- header ---------- */
header.site {
  background:linear-gradient(135deg,var(--navy) 0%,var(--steel) 100%); color:#fff;
  padding:2.2rem 2.4rem 1.9rem; position:relative; overflow:visible;
  border-radius:8px 8px 0 0; min-height:210px;
}
header.site .logo {
  position:absolute; top:14px; right:18px; width:190px; height:190px;
  background:url('tom_logo.png') center/contain no-repeat;
  pointer-events:none; user-select:none;
}
.header-rule { width:60px; height:4px; background:var(--gold-light); margin-bottom:14px; border-radius:2px; }
header.site h1 { font-size:2rem; font-weight:800; line-height:1.2; margin-bottom:.45rem; color:#fff; max-width:660px; }
header.site .subtitle { font-size:1.12rem; color:#fff; max-width:660px; }
header.site .subtitle a { color:var(--gold-light); font-weight:800; }
/* never black-on-blue: bold text in the header stays light/gold, not the global black strong */
header.site strong { color:var(--gold-light); }
.tag {
  display:inline-block; background:var(--gold-light); color:var(--navy); padding:3px 12px;
  border-radius:4px; font-size:.8rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; margin-bottom:.7rem;
}

/* ---------- draft watermark ---------- */
.draftwm {
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) rotate(-32deg);
  font-size:20vw; font-weight:900; color:rgba(190,0,0,0.09); letter-spacing:.12em;
  pointer-events:none; z-index:0; user-select:none; white-space:nowrap;
}

/* ---------- content shell ---------- */
.content {
  background:var(--card); border:1px solid var(--border); border-top:none;
  padding:1.8rem 2.4rem 2.4rem; border-radius:0 0 8px 8px; position:relative; z-index:1;
}
h2 {
  font-size:1.1rem; font-weight:800; color:var(--navy); letter-spacing:.04em;
  text-transform:uppercase; border-bottom:3px solid var(--navy); padding-bottom:7px;
  margin:2rem 0 1.1rem;
}
h2:first-of-type { margin-top:.2rem; }
h3 { font-size:1.05rem; font-weight:800; color:var(--navy); margin:1.3rem 0 .5rem; }
p { margin-bottom:.7rem; }
ul,ol { margin:.4rem 0 .8rem 1.4rem; }
li { margin-bottom:.35rem; }
strong { color:#000; font-weight:700; }

/* ---------- in-site nav ---------- */
nav.tools {
  display:flex; flex-wrap:wrap; gap:6px; background:#fff; border:1px solid var(--border);
  border-top:none; padding:8px 12px; font-size:.9rem;
}
nav.tools a {
  text-decoration:none; color:var(--navy); font-weight:700; padding:5px 11px;
  border:1.5px solid var(--navy); border-radius:5px; background:#fff;
}
nav.tools a:hover { background:var(--navy); color:#fff; }
nav.tools a.here { background:var(--gold); color:#fff; border-color:var(--gold); }
nav.tools .home { margin-right:auto; }

/* ---------- tiles (landing) ---------- */
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; }
a.tile {
  display:flex; flex-direction:column; text-decoration:none; color:inherit; background:var(--card);
  border:2px solid var(--navy); border-left:7px solid var(--gold); border-radius:6px;
  padding:16px 18px; transition:box-shadow .15s, transform .15s;
}
a.tile:hover { box-shadow:0 4px 14px rgba(13,35,64,.25); transform:translateY(-2px); }
.tile .name { font-size:1.3rem; font-weight:800; color:var(--navy); }
.tile .desc { font-size:1rem; color:var(--text); margin-top:5px; margin-bottom:12px; }
.badge {
  display:inline-block; align-self:flex-start; font-size:.78rem; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; padding:3px 10px; border-radius:5px; margin-top:auto;
}
.badge.tool { background:var(--gold); color:#fff; }
.badge.live { background:var(--green); color:#fff; }

/* ---------- callouts ---------- */
.callout { border-left:5px solid var(--gold); background:#f4f7fb; padding:13px 17px; margin:1rem 0; }
.callout.walter { border-left-color:var(--steel); background:#eef3f9; }
.callout.warn { border-left-color:var(--red); background:#fbf1f1; }
.callout .lead { font-weight:800; color:var(--navy); }

/* ---------- step blocks ---------- */
.step { background:#f4f7fb; border:1px solid var(--border); border-radius:6px; margin-bottom:12px; overflow:hidden; }
.step-h { background:var(--navy); color:#fff; padding:8px 15px; display:flex; align-items:baseline; gap:10px; }
.step-h .n { font-size:.78rem; font-weight:800; letter-spacing:.06em; background:rgba(255,255,255,.16); padding:2px 9px; border-radius:3px; }
.step-h .t { font-size:1rem; font-weight:800; }
.step-b { padding:11px 16px; }
.step-b p:last-child { margin-bottom:0; }

/* ---------- tables ---------- */
table { width:100%; border-collapse:collapse; font-size:.95rem; margin:.7rem 0 1rem; }
th,td { padding:7px 10px; border:1px solid var(--border); vertical-align:top; text-align:left; }
th { background:var(--navy); color:#fff; font-weight:700; }
tbody tr:nth-child(even) { background:#f4f7fb; }
td.n { text-align:right; font-variant-numeric:tabular-nums; }

/* ---------- action tag chips ---------- */
.chip { display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:2px 8px; border-radius:4px; color:#fff; }
.chip.add{background:var(--a-add);} .chip.cons{background:var(--a-cons);} .chip.red{background:var(--a-red);}
.chip.keep{background:var(--a-keep);} .chip.org{background:var(--a-org);}
.chip.kit{background:var(--steel);} .chip.ppl{background:#7a4a10;} .chip.foot{background:#0e6b6b;}
.chip.train{background:#7a1e5c;} .chip.comms{background:#4a5a10;}

/* ---------- cue cards ---------- */
.deck { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; }
.cue {
  border:2px solid var(--navy); border-radius:9px; background:#fff; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:0 2px 8px rgba(13,35,64,.1);
}
.cue .cue-h { background:linear-gradient(135deg,var(--navy),var(--steel)); color:#fff; padding:11px 15px; }
.cue .cue-num { font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-light); }
.cue .cue-t { font-size:1.18rem; font-weight:800; line-height:1.2; margin-top:2px; }
.cue .cue-b { padding:13px 16px; flex:1; }
.cue .cue-b ul { margin:.2rem 0 .6rem 1.15rem; }
.cue .cue-b li { margin-bottom:.4rem; }
.cue .say { background:#f4f7fb; border-left:4px solid var(--gold); padding:9px 12px; margin-top:8px; font-size:.95rem; }
.cue .say b { color:var(--navy); }
.cue .gaptag { font-size:.8rem; font-weight:700; color:var(--navy); }

/* ---------- checklist / worksheet controls ---------- */
.ckgroup { border:1px solid var(--border); border-radius:6px; margin-bottom:14px; overflow:hidden; }
.ckgroup > .gh { background:var(--navy); color:#fff; padding:8px 15px; font-weight:800; font-size:1rem; display:flex; justify-content:space-between; align-items:center; }
.ckgroup .gh .cnt { font-size:.85rem; font-weight:700; color:var(--gold-light); }
.ckrow { display:flex; gap:10px; padding:9px 15px; border-top:1px solid var(--border); align-items:flex-start; }
.ckrow:first-child { border-top:none; }
.ckrow input[type=checkbox] { width:22px; height:22px; margin-top:1px; flex:none; accent-color:var(--navy); }
.ckrow label { font-size:1rem; cursor:pointer; }
.ckrow.done label { text-decoration:line-through; color:#4a5563; }

.field { margin-bottom:12px; }
.field label { display:block; font-weight:800; color:var(--navy); font-size:.95rem; margin-bottom:4px; }
.field .hint { font-weight:400; color:var(--ink2); font-size:.88rem; }
input[type=text], textarea, select {
  width:100%; font-family:inherit; font-size:1rem; padding:8px 11px; border:1.5px solid var(--border);
  border-radius:5px; background:#fff; color:#000; resize:vertical;
}
textarea { min-height:64px; }
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--steel); box-shadow:0 0 0 3px rgba(30,73,118,.2); }

.toolbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:0 0 16px; }
.btn { font-family:inherit; font-size:.95rem; font-weight:800; padding:8px 15px; border:2px solid var(--navy); background:#fff; color:var(--navy); border-radius:6px; cursor:pointer; }
.btn:hover { background:var(--navy); color:#fff; }
.btn.gold { border-color:var(--gold); color:#fff; background:var(--gold); }
.btn.gold:hover { background:#7d6318; }
.btn.danger:hover { background:var(--red); border-color:var(--red); }
.status { font-size:.9rem; color:var(--ink2); font-style:italic; }

/* ---------- prop cards ---------- */
.prop { border:1px solid var(--border); border-left:6px solid var(--steel); border-radius:6px; background:#fff; margin-bottom:14px; overflow:hidden; }
.prop .ph { background:#eef3f9; padding:10px 16px; }
.prop .ph .pn { font-size:1.12rem; font-weight:800; color:var(--navy); }
.prop .ph .sim { font-size:.9rem; color:var(--ink2); }
.prop .pb { padding:12px 16px; }
.imgprompt { background:#0d2340; color:#e8eef6; border-radius:6px; padding:11px 14px; margin-top:9px; font-size:.92rem; }
.imgprompt .il { color:var(--gold-light); font-weight:800; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; display:block; margin-bottom:5px; }
.imgprompt code { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.9rem; color:#fff; line-height:1.5; }

/* ---------- AI image prompt box (shared by props + sketcher) ---------- */
.imgprompt { position:relative; background:#0d2340; color:#e8eef6; border-radius:6px; padding:11px 14px; margin-top:9px; font-size:.92rem; }
.imgprompt .il { color:var(--gold-light); font-weight:800; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; display:block; margin-bottom:5px; }
.imgprompt code { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.9rem; color:#fff; line-height:1.5; }
.copyp { margin-top:10px; font-family:inherit; font-size:.82rem; font-weight:800; background:var(--gold-light); color:var(--navy); border:none; border-radius:5px; padding:6px 13px; cursor:pointer; }
.copyp:hover { background:#f0d98a; }
.copyp.ok { background:var(--green); color:#fff; }

footer.site { color:var(--text); font-size:.9rem; margin-top:1.6rem; text-align:center; }

@media print {
  body { background:#fff; font-size:12pt; padding:0; }
  .draftwm { color:rgba(190,0,0,0.12); }
  nav.tools, .toolbar, .noprint { display:none !important; }
  header.site, .content, nav.tools { border-radius:0; }
  header.site, th, .step-h, .cue .cue-h, .prop .ph, .imgprompt { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .cue, .prop, .step, tr, .ckgroup { page-break-inside:avoid; }
  a.tile { page-break-inside:avoid; }
}