/* Wargame kit page shell and shared controls. Built on /spi.css tokens, which this file reads and never edits.
   Tab files own their own tab-*.css and reuse the .kit-* controls below. */
.kit-page { --k-bg: var(--spi-paper, #f4f4f0); --k-panel: var(--spi-panel, #fefefe); --k-ink: var(--spi-ink, #262326); --k-muted: var(--spi-muted, #535353);
  --k-rule: var(--spi-rule, #777); --k-teal: var(--spi-teal, #066a7a); --k-field: var(--spi-source-field, #dce1d8); --k-warm: var(--spi-warm, #ece5dd); --k-lime: var(--spi-input-stock, #c9d277);
  margin: 0; background: var(--k-bg); color: var(--k-ink); font-family: var(--spi-body, Georgia, serif); font-size: 17px; line-height: 1.5; }
.kit-bar { display: flex; align-items: center; gap: 16px; padding: 10px 16px; background: var(--k-bg); border-bottom: 3px solid var(--k-ink); font-family: var(--spi-ui, Arial, sans-serif); }
.kit-bar a { color: var(--k-ink); text-decoration: none; font-weight: 700; }
.kit-bar-title { flex: 1; color: var(--k-muted); font-size: 14px; }
.kit-bar-links { display: flex; gap: 16px; } .kit-bar-links a { font-weight: 500; }
.kit-wrap { max-width: 1280px; margin: 0 auto; padding: 16px 16px 64px; }
.kit-h1 { margin: 8px 0 4px; font: 400 2rem var(--spi-display, Georgia, serif); }
.kit-status, .kit-note { color: var(--k-muted); font-family: var(--spi-ui, Arial, sans-serif); font-size: 14px; margin: 4px 0 8px; }
.kit-status.kit-error { color: #8a1f11; font-weight: 600; }
.kit-panel { background: var(--k-panel); border: 1px solid var(--k-rule); border-radius: var(--spi-radius-md, 8px); padding: 16px; margin: 12px 0; font-family: var(--spi-ui, Arial, sans-serif); }
.kit-panel h2, .kit-panel h3 { margin: 0 0 8px; font: 800 1.05rem var(--spi-ui, Arial, sans-serif); }
.kit-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.kit-form label, .kit-field { display: block; font: 600 13px var(--spi-ui, Arial, sans-serif); color: var(--k-ink); }
.kit-form input, .kit-form select, .kit-form textarea, .kit-field input, .kit-field select, .kit-field textarea,
.kit-gate input, #kit-gate input { display: block; width: 100%; box-sizing: border-box; min-height: 40px; margin: 4px 0 10px; padding: 6px 8px; font: 15px var(--spi-ui, Arial, sans-serif); border: 1px solid var(--k-rule); border-radius: var(--spi-radius-sm, 4px); background: #fff; color: var(--k-ink); }
.kit-form input[type=color], .kit-field input[type=color] { padding: 2px; width: 64px; }
.kit-row { display: flex; gap: 12px; flex-wrap: wrap; } .kit-row > label { flex: 1 1 120px; } .kit-row > .kit-colour { flex: 0 0 80px; }
.kit-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.kit-btn { box-sizing: border-box; min-height: 40px; padding: 6px 14px; font: 600 14px var(--spi-ui, Arial, sans-serif); color: var(--k-ink); background: var(--k-panel); border: 1px solid var(--k-ink); border-radius: var(--spi-radius-sm, 4px); cursor: pointer; }
.kit-btn-primary { background: var(--k-ink); color: var(--k-bg); }
.kit-btn-small { min-height: 34px; padding: 4px 10px; font-size: 13px; }
.kit-btn[aria-pressed=true], .kit-btn.is-active { background: var(--k-teal); color: #fff; border-color: var(--k-teal); }
.kit-btn:disabled { opacity: .5; cursor: default; }
.kit-btn:focus-visible, .kit-tabs button:focus-visible, .kit-wrap input:focus-visible, .kit-wrap select:focus-visible, .kit-wrap textarea:focus-visible { outline: 3px solid var(--k-teal); outline-offset: 2px; }
.kit-list { list-style: none; margin: 0; padding: 0; } .kit-list li { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--k-field); }
.kit-list .kit-list-title { font-weight: 700; } .kit-list .kit-list-meta { color: var(--k-muted); font-size: 12px; }
.kit-editor-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.kit-title-input { flex: 1 1 260px; min-height: 38px; font: 400 1.4rem var(--spi-display, Georgia, serif); border: 0; border-bottom: 2px solid var(--k-ink); background: transparent; color: var(--k-ink); padding: 2px 4px; }
.kit-savestate { font: 13px var(--spi-ui, Arial, sans-serif); color: var(--k-muted); min-width: 120px; }
.kit-banner { margin: 8px 0; padding: 10px 14px; background: var(--k-warm); border-left: 4px solid var(--k-teal); font: 14px var(--spi-ui, Arial, sans-serif); }
.kit-banner.kit-banner-warn { border-left-color: #8a1f11; }
.kit-tabs { display: flex; gap: 2px; border-bottom: 3px solid var(--k-ink); margin: 8px 0 0; overflow-x: auto; }
.kit-tabs button { min-height: 42px; padding: 8px 18px; font: 700 14px var(--spi-ui, Arial, sans-serif); color: var(--k-ink); background: var(--k-field); border: 1px solid var(--k-rule); border-bottom: 0; border-radius: var(--spi-radius-sm, 4px) var(--spi-radius-sm, 4px) 0 0; cursor: pointer; }
.kit-tabs button[aria-selected=true] { background: var(--k-ink); color: var(--k-bg); }
.kit-tabpanel { padding: 12px 0; }
.kit-tabpanel[hidden], .kit-wrap [hidden] { display: none !important; }
.kit-cost { font: 13px var(--spi-ui, Arial, sans-serif); color: var(--k-muted); }
.kit-swatch { display: inline-block; width: 14px; height: 14px; border: 1px solid var(--k-ink); vertical-align: -2px; margin-right: 6px; }
@media print { .kit-noprint { display: none !important; } .kit-page { background: #fff; } .kit-wrap { padding: 0; max-width: none; } }
a.kit-btn { display: inline-flex; align-items: center; text-decoration: none; }
.kit-quickstart { margin: 4px 0 0; gap: 12px; }
.kit-quickstart .kit-note { margin: 0; }
#kit-projects .kit-h1 { margin-top: 0; }
#kit-projects .kit-panel { margin-top: 8px; }
#kit-projects .kit-form input, #kit-projects .kit-form select { margin-bottom: 6px; }
@font-face { font-family: "Kit Counter"; src: url('/fonts/kit-counter.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* "More": internal words (rules version, draft cost, file formats) behind one plain line (HAI-KIT-WIZARD-4) */
.kit-more { margin: 10px 0 0; }
.kit-more > summary { display: inline-block; cursor: pointer; padding: 4px 10px; border: 1px solid var(--k-ink, #262326); border-radius: 4px; font: 600 13px var(--spi-ui, Arial, sans-serif); background: var(--k-field, #dce1d8); }
.kit-more[open] > summary { margin-bottom: 8px; }
.kit-more > summary:focus-visible { outline: 3px solid var(--spi-teal, #066a7a); outline-offset: 2px; }