/* 40k Cheat Sheet: neutral greys, one blue accent, Figtree (a free Proxima Nova lookalike).
   Colours are design tokens (CSS variables): light values on :root, dark values in the two
   dark blocks below (system dark mode, or an explicit data-theme="dark"). */
:root{
  --font:"Figtree","Proxima Nova",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Consolas,monospace;
  --bg:#f7f7f8; --panel:#ffffff; --raised:#f0f1f3; --ink:#17191c; --sub:#5c636b; --line:#e3e5e8;
  --accent:#2f5fd0; --accent-ink:#ffffff; --accent-soft:#e8eefc; --warn:#a14d00; --warn-soft:#fff4e5; --warn-edge:#f0c48a; --kw:#1f3f8a;
  --banner-bg:#eceef1; --banner-ink:#17191c; --banner-num:#2f5fd0; --banner-edge:#d5d9df;
  --radius:8px; color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#121417; --panel:#1b1e22; --raised:#22262b; --ink:#e6e8eb; --sub:#9aa1a9; --line:#2c3036;
  --accent:#7aa7ff; --accent-ink:#0d1420; --accent-soft:#1d2a44; --warn:#f0a85c; --warn-soft:#2a2014; --warn-edge:#6b4a1f; --kw:#a9c4ff;
  --banner-bg:#1b1e22; --banner-ink:#e6e8eb; --banner-num:#7aa7ff; --banner-edge:#2c3036;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#121417; --panel:#1b1e22; --raised:#22262b; --ink:#e6e8eb; --sub:#9aa1a9; --line:#2c3036;
  --accent:#7aa7ff; --accent-ink:#0d1420; --accent-soft:#1d2a44; --warn:#f0a85c; --warn-soft:#2a2014; --warn-edge:#6b4a1f; --kw:#a9c4ff;
  --banner-bg:#1b1e22; --banner-ink:#e6e8eb; --banner-num:#7aa7ff; --banner-edge:#2c3036;
  color-scheme:dark;
}

*{box-sizing:border-box;}
html,body{min-height:100%;}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.5 var(--font);
  -webkit-font-smoothing:antialiased;padding-top:env(safe-area-inset-top,0);padding-bottom:env(safe-area-inset-bottom,0);}
a{color:var(--accent);text-underline-offset:2px;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

.wrap{max-width:820px;margin:0 auto;padding:24px 18px 64px;}
.wrap.wide{max-width:1180px;}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:22px;padding-bottom:14px;border-bottom:1px solid var(--line);font-size:.9rem;}
.topbar a.brand{color:var(--ink);text-decoration:none;font-weight:700;letter-spacing:.2px;}
.topbar nav{display:flex;gap:16px;align-items:center;}
.topbar nav a{color:var(--sub);text-decoration:none;font-weight:500;}
.topbar nav a:hover{color:var(--ink);}

h1{font-size:1.75rem;font-weight:700;line-height:1.2;margin:0 0 6px;letter-spacing:-.01em;}
p.lead{color:var(--sub);margin:0 0 22px;font-size:1rem;line-height:1.55;}
.meta{color:var(--sub);font-size:.9rem;margin:0 0 6px;line-height:1.5;}
.meta b{color:var(--ink);font-weight:600;}
.helptext{font-size:.8rem;color:var(--sub);}
label{display:block;font-size:.875rem;font-weight:600;color:var(--ink);margin:16px 0 6px;}

/* Form controls */
textarea,select,input[type=file]{width:100%;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;font:inherit;font-size:.9rem;}
textarea{min-height:240px;font-family:var(--mono);font-size:.85rem;line-height:1.45;resize:vertical;}
textarea:focus,select:focus,input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
input[type=file]::file-selector-button{font:600 .85rem var(--font);color:var(--ink);background:var(--raised);border:1px solid var(--line);border-radius:6px;padding:5px 12px;margin-right:10px;cursor:pointer;}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:560px){.row{grid-template-columns:1fr;}}

button,.button{display:inline-block;font:600 .925rem/1.2 var(--font);padding:10px 18px;border-radius:var(--radius);border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);cursor:pointer;margin-top:14px;margin-right:8px;text-decoration:none;transition:filter .15s,background .15s;}
button:hover,.button:hover{filter:brightness(1.08);}
button.secondary,.button.secondary{background:transparent;color:var(--ink);border-color:var(--line);}
button.secondary:hover,.button.secondary:hover{background:var(--raised);filter:none;}
button.small{font-size:.8rem;padding:6px 11px;margin:0;}

.errors{border:1px solid var(--warn);color:var(--warn);border-radius:var(--radius);padding:10px 12px;font-size:.9rem;margin:10px 0;}
.errors ul{margin:0;padding-left:18px;}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin:16px 0;}
.panel h2{font-size:.95rem;font-weight:700;margin:0 0 8px;color:var(--ink);}
.notice{border-left:3px solid var(--warn);background:var(--panel);border-radius:0 var(--radius) var(--radius) 0;padding:8px 12px;font-size:.875rem;color:var(--sub);margin:10px 0;}
.empty{color:var(--sub);font-size:.875rem;}
/* Alerts (validation-style): tinted background, coloured left edge, icon + bold title. */
.alert{display:flex;align-items:flex-start;gap:10px;margin:14px 0;padding:10px 14px;border:1px solid var(--warn-edge);border-left-width:4px;border-radius:var(--radius);font-size:.875rem;line-height:1.45;}
.alert-warn{background:var(--warn-soft);border-color:var(--warn-edge);border-left-color:var(--warn);}
.alert-ok{background:var(--accent-soft);border-color:var(--line);border-left-color:var(--accent);}
.alert-ok .alert-title{color:var(--accent);}
.alert-icon{flex:none;width:18px;height:18px;margin-top:1px;color:var(--warn);}
.alert-title{display:block;color:var(--warn);font-weight:700;}
.alert-body{color:var(--ink);}

/* Phase banner: number, name, summary, icon (cut-corner bar). */
.phase{margin-top:34px;break-inside:auto;}
.phase-banner{--cut:12px;display:flex;align-items:center;gap:14px;margin:0 0 14px;padding:8px 18px 8px 12px;
  background:var(--banner-bg);color:var(--banner-ink);box-shadow:inset 0 0 0 1px var(--banner-edge);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
  -webkit-print-color-adjust:exact;print-color-adjust:exact;break-after:avoid;page-break-after:avoid;}
.phase-banner .num{flex:none;min-width:1.1em;text-align:center;font:800 2.5rem/1 var(--font);color:var(--banner-num);}
.phase-banner .titles{flex:1;min-width:0;}
.phase-banner h2{margin:0;font:800 1.15rem/1.2 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--banner-ink);}
.phase-banner h2 small{font-weight:500;font-size:.72rem;letter-spacing:0;text-transform:none;color:var(--sub);margin-left:6px;}
.phase-banner p{margin:2px 0 0;font:500 .8rem/1.4 var(--font);color:var(--sub);}
.phase-banner .icon{flex:none;width:30px;height:30px;color:var(--banner-num);}
@media (max-width:480px){.phase-banner .num{font-size:2rem;}.phase-banner .icon{width:24px;height:24px;}.phase-banner h2{font-size:1rem;}}

/* By-rule view */
.ability{margin:0 0 14px;padding-left:12px;border-left:2px solid var(--line);break-inside:avoid;}
.ability.k-army,.ability.k-detachment{border-left-color:var(--accent);}
.ability.k-export{border-left-style:dashed;}
.ability b.name{display:block;font-size:.975rem;font-weight:700;}
.ability .src{color:var(--sub);font-size:.8rem;}
.ability .tag{font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--sub);background:var(--raised);border-radius:4px;padding:1px 5px;margin-left:6px;vertical-align:1px;}
.ability p{margin:3px 0 0;font-size:.9rem;line-height:1.5;max-width:80ch;} /* readable line length on the wide page */

/* Controls above the sheet */
.detachment-pick{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 0;font-size:.875rem;}
.detachment-pick label{margin:0;}
.detachment-pick select{width:auto;max-width:100%;padding:6px 10px;}
.detachment-pick button{margin:0;}
.detachment-pick.missing label{color:var(--warn);}
/* By unit / By rule: centred on the page in its own row, two equal halves. */
.viewtoggle{display:flex;width:fit-content;margin:20px auto 6px;background:var(--raised);border-radius:var(--radius);padding:3px;font-size:.9rem;}
.viewtoggle a{min-width:7.5em;text-align:center;padding:7px 16px;border-radius:6px;text-decoration:none;color:var(--sub);font-weight:600;}
.viewtoggle a.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12);}
details.panel summary{cursor:pointer;font-weight:600;font-size:.9rem;color:var(--ink);}
.toc{font-size:.85rem;display:flex;flex-wrap:wrap;gap:6px 16px;margin:12px 0;}
.toc a{color:var(--sub);text-decoration:none;}
.toc a:hover{color:var(--accent);}
/* Print · Download PDF · Copy link */
.actions{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px;}
.actions button{margin:0;}
/* Debugging notes at the bottom of a sheet */
.parser-notes summary{color:var(--sub);font-weight:600;font-size:.85rem;}
.parser-notes ul{margin:8px 0 0;padding-left:18px;font-size:.8rem;color:var(--sub);font-family:var(--mono);}

/* By-unit view: cards in two packed columns */
.cards{column-gap:12px;}
@media (min-width:760px){
  .cards{columns:2;}
  /* Only one unit card in the phase: full width, its rules in two columns inside it. */
  .cards.solo{columns:1;}
  .cards.solo .ucard-body{columns:2;column-gap:28px;}
  .cards.solo .ucard-body .rule,.cards.solo .ucard-body .reminders{break-inside:avoid;}
}
.ucard{--uc:var(--accent);display:block;margin:0 0 12px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;break-inside:avoid;page-break-inside:avoid;}
.ucard header{display:flex;align-items:center;gap:8px;background:var(--uc);color:#fff;padding:7px 12px;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
/* Army-wide card: a tinted surface rather than a big block of accent colour (glare in dark mode). */
.ucard.army{--uc:var(--accent-soft);}
.ucard.army header{color:var(--ink);}
.ucard.army header b{color:var(--accent);}
.ucard header b{display:block;font-size:.9rem;font-weight:700;line-height:1.25;}
.ucard header small{display:block;font-size:.72rem;opacity:.9;line-height:1.3;}
.ucard header img{flex:none;width:30px;height:30px;border-radius:50%;object-fit:cover;border:1.5px solid rgba(255,255,255,.6);}
.ucard-body{padding:8px 12px 6px;}
.ucard .rule{margin:0 0 8px;}
.ucard .rule b{font-size:.875rem;font-weight:700;}
.ucard .rule .src{font-size:.72rem;color:var(--sub);}
.ucard .rule p{margin:1px 0 0;font-size:.84rem;line-height:1.45;}
.reminders{margin:2px 0 4px;display:flex;flex-wrap:wrap;gap:4px;font-size:.72rem;}
.reminders span{background:var(--raised);border-radius:4px;padding:1px 6px;color:var(--sub);}

/* Stratagem reminders under each phase banner */
.stratagems{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 8px;margin:-4px 0 14px;font-size:.8rem;}
.stratagems .lbl{font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.7rem;color:var(--sub);margin-right:2px;}
.stratagem{border:1px solid var(--line);border-radius:6px;padding:2px 8px;background:var(--panel);white-space:nowrap;}
.stratagem a{color:var(--ink);font-weight:600;text-decoration:none;}
.stratagem a:hover{color:var(--accent);}
.stratagem b{color:var(--accent);font-weight:700;margin-left:2px;}
.stratagem i{color:var(--sub);font-style:normal;}
.stratagem.core{border-style:dashed;}
/* End of the sheet: divider line so the last phase doesn't run into the page bottom. */
.sheet-foot{margin-top:40px;padding-top:14px;border-top:1px solid var(--line);}
.sheet-foot .credit{margin:0 0 10px;}
.sheet-foot .parser-notes{margin-top:0;}
.credit{font-size:.78rem;color:var(--sub);margin:24px 0 0;}

.kw{font-weight:600;color:var(--kw);}
table.units{width:100%;border-collapse:collapse;font-size:.85rem;}
table.units th,table.units td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top;}
table.units th{color:var(--sub);font-weight:600;}
.table-scroll{overflow-x:auto;}
.ok{color:var(--accent);} .bad{color:var(--warn);}

.view[hidden]{display:none !important;}  /* the view not currently shown (also when printing) */
/* Phase pop-up (native <dialog>): wide, scrolls inside, dimmed page behind. */
.phase-modal{width:min(1100px,94vw);max-height:88vh;padding:0;border:1px solid var(--line);border-radius:12px;
  background:var(--bg);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.35);overflow:hidden;}
.phase-modal::backdrop{background:rgba(10,12,15,.6);}
.phase-modal .modal-body{max-height:88vh;overflow-y:auto;padding:20px 22px 22px;}
.phase-modal .modal-body .phase{margin-top:0;}
.phase-modal .modal-close{position:absolute;top:10px;right:12px;z-index:1;width:32px;height:32px;padding:0;
  border-radius:50%;background:var(--panel);font-size:.9rem;line-height:1;}
.phase-modal .phase-banner{margin-right:36px;}  /* room for the close button */
/* "Report a problem" pop-up */
.report-modal{width:min(560px,94vw);padding:20px 22px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.35);}
.report-modal::backdrop{background:rgba(10,12,15,.6);}
.report-modal h2{margin:0 0 6px;font-size:1.1rem;}
.report-modal textarea{min-height:130px;font-family:var(--font);font-size:.9rem;margin-top:8px;}
.report-modal .actions{margin-top:12px;}
#reportBtn{margin-top:4px;}
.print-only{display:none !important;}
@media print{
  .print-only{display:block !important;}
  /* White paper, black text whatever the screen theme (selectors match the dark-theme ones' specificity). */
  :root,:root:not([data-theme="light"]),:root[data-theme]{--bg:#fff;--panel:#fff;--raised:#f2f2f2;--ink:#000;--sub:#444;--accent:#2f5fd0;--accent-ink:#fff;--line:#bbb;--kw:#000;--banner-bg:#eceef1;--banner-ink:#000;--banner-num:#2f5fd0;--banner-edge:#c9cdd3;color-scheme:light;}
  body{background:#fff;color:#000;font-size:10.5pt;}
  .no-print,.topbar,form,footer .no-print{display:none !important;}
  .wrap,.wrap.wide{max-width:none;padding:0;}
  .phase{page-break-before:auto;break-inside:avoid;page-break-inside:avoid;}
  .phase-banner{break-after:avoid;page-break-after:avoid;}
  .cards{columns:2;column-gap:6pt;}
  .cards.solo{columns:1;}
  .cards.solo .ucard-body{columns:2;column-gap:14pt;}
  .cards.solo .ucard-body .rule{break-inside:avoid;}
  .ucard{border-color:#bbb;}
  a{color:inherit;text-decoration:none;}
}