/* ============================================================================
   Divisionsgliederung — field-worn staff document skin
   ----------------------------------------------------------------------------
   TYPOGRAPHY
   Display type is DIN 1451 — standardised in 1931 by the Deutsches Institut
   für Normung and used on German road signs, vehicle stencils and Wehrmacht
   equipment plates. It's set here in DINish (self-hosted, assets/fonts/, SIL
   OFL 1.1 — see assets/CREDITS.md), a proper reconstruction of the road-sign
   face itself, rather than left to whatever the visitor's OS happens to
   substitute — "Bahnschrift" on Windows, an ordinary system sans everywhere
   else — which is what made the whole interface read as an undifferentiated
   default-UI face rather than a period one, no matter what the fallback
   stack listed.

   Body prose is set in Spectral (self-hosted, same terms), a serif built for
   sustained on-screen reading with a bookish, early-20th-century character —
   closer to a period staff report or field manual than the web's usual
   default serif substitute, Georgia, without giving up legibility to get
   there.

   Data and tables are set in a typewriter face, as the original returns were.

   Fraktur is an optional accent (the .fraktur class on <html>, toggled by the
   checkbox in the context bar), using two self-hosted blackletter faces
   (assets/fonts/, SIL OFL 1.1 — see assets/CREDITS.md) so it renders the
   same everywhere rather than depending on what happens to be installed.
   With it on, Fraktur reaches every structural heading and label in the page
   — panel titles, sub-headings, catalogue and stat-group dividers, the army
   tree's echelon tags, card headings, the masthead stamp, the About page's
   headings — anywhere text is a label for content rather than content itself.
   It never touches body prose, data values, tables, form inputs, buttons, or
   anything read at speed under pressure: the Normalschrifterlaß of 3 January
   1941 abolished Fraktur for official use precisely because it was hard to
   read quickly, and this tool agrees for exactly that class of text. Labels
   you glance at once are fair game; numbers and running text you have to
   actually read are not.
   ========================================================================== */

:root{
  /* paper — dirtier and darker than a clean sheet */
  --paper:      #cabd9f;
  --paper-hi:   #d8cdb2;
  --paper-dark: #b6a988;
  --paper-edge: #948a6c;

  --ink:        #1b1d16;
  --ink-soft:   #3f4335;
  --ink-faint:  #63664f;

  --field:      #414734;      /* feldgrau */
  --field-dk:   #2a2e20;
  --field-dkr:  #1a1d13;

  --rule-c:     #7c785e;
  --red:        #7d2317;
  --red-lt:     #a5361f;
  --blue:       #24405e;
  --amber:      #946620;
  --amber-s:    #8a6220;
  --green:      #47613a;

  --shadow:     0 1px 0 rgba(255,255,255,.22), 0 2px 5px rgba(0,0,0,.35);

  /* DINish first (self-hosted DIN 1451 reconstruction), then the closest
     widely-installed grotesks if the local font somehow fails to load. */
  --f-head: "DINish", "Bahnschrift", "DIN Alternate", "DIN Condensed",
            "Franklin Gothic Medium", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Spectral", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-mono: "Consolas", "Lucida Console", "Courier New", ui-monospace, monospace;
  --f-frak:      var(--f-head);
  --f-frak-bold: var(--f-head);

  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

/* Self-hosted DIN 1451 reconstruction (headings, labels, controls) and a
   self-hosted book serif (body prose) — assets/fonts/, SIL OFL 1.1, see
   assets/CREDITS.md. Same reasoning as the Fraktur faces below: render the
   same everywhere rather than depending on the visitor's OS defaults. */
@font-face{
  font-family:"DINish"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../assets/fonts/DINish-Regular.woff2") format("woff2");
}
@font-face{
  font-family:"DINish"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../assets/fonts/DINish-SemiBold.woff2") format("woff2");
}
@font-face{
  font-family:"DINish"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../assets/fonts/DINish-Bold.woff2") format("woff2");
}
@font-face{
  font-family:"Spectral"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../assets/fonts/Spectral-Regular.woff2") format("woff2");
}
@font-face{
  font-family:"Spectral"; font-style:italic; font-weight:400; font-display:swap;
  src:url("../assets/fonts/Spectral-Italic.woff2") format("woff2");
}
@font-face{
  font-family:"Spectral"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../assets/fonts/Spectral-SemiBold.woff2") format("woff2");
}
@font-face{
  font-family:"Spectral"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../assets/fonts/Spectral-Bold.woff2") format("woff2");
}

/* Self-hosted Fraktur (blackletter) faces — assets/fonts/, SIL OFL 1.1, see
   assets/CREDITS.md. Bundled locally rather than left to chance on whether
   the visitor happens to have a Fraktur face installed, which is why the
   toggle previously only visibly changed the masthead (the one place large
   and bold enough that Bahnschrift-as-a-substitute still looked "styled").
   Maguntia is the elegant display cut, used for the big masthead title.
   Cook is the heavier "fette" cut, far more legible at the small sizes used
   for panel headings and labels — real historical Fraktur signage did the
   same thing, using a bolder book-face for anything dense or small. */
@font-face{
  font-family:"UnifrakturMaguntia"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../assets/fonts/UnifrakturMaguntia.woff2") format("woff2");
}
@font-face{
  font-family:"UnifrakturCook"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../assets/fonts/UnifrakturCook-Bold.woff2") format("woff2");
}

/* Optional Fraktur accent, toggled by the checkbox in the context bar. */
html.fraktur{
  --f-frak:      "UnifrakturMaguntia", var(--f-head);
  --f-frak-bold: "UnifrakturCook", var(--f-head);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

body{
  font-family:var(--f-body);
  color:var(--ink);
  background-color:#a1957a;
  background-image:
    /* coffee rings and damp stains */
    radial-gradient(ellipse 220px 60px at 78% 14%, rgba(84,58,24,.16), transparent 70%),
    radial-gradient(ellipse 160px 130px at 12% 62%, rgba(60,52,28,.14), transparent 70%),
    radial-gradient(circle at 92% 78%, rgba(40,34,18,.13), transparent 55%),
    /* map grid */
    linear-gradient(rgba(0,0,0,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.055) 1px, transparent 1px),
    /* light falloff */
    radial-gradient(circle at 25% 8%, rgba(255,252,240,.20), transparent 60%);
  background-size: auto, auto, auto, 26px 26px, 26px 26px, 100% 100%;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* grain + vignette over everything */
.paper-grain{
  position:fixed; inset:0; pointer-events:none; z-index:60;
  background-image:var(--noise);
  opacity:.30; mix-blend-mode:multiply;
}
.paper-grain::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at center, transparent 52%, rgba(24,20,10,.30) 100%);
}

main, header, footer{ position:relative; z-index:1; }

/* ---------------- Masthead ---------------- */
.masthead{
  background:
    var(--noise),
    linear-gradient(180deg, #474d39 0%, var(--field-dk) 100%);
  background-blend-mode:overlay, normal;
  color:var(--paper-hi);
  border-bottom:3px solid #12140c;
  box-shadow:0 4px 16px rgba(0,0,0,.5), inset 0 -14px 26px rgba(0,0,0,.34);
}
.masthead-inner{
  max-width:1680px; margin:0 auto; padding:13px 22px 9px;
  display:flex; align-items:center; gap:20px;
}
.masthead-mark{ color:var(--paper-hi); flex:0 0 auto; opacity:.82; }
.balkenkreuz{ width:50px; height:50px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.masthead-text{ flex:1 1 auto; }
.masthead h1{
  font-family:var(--f-frak); font-size:2rem; margin:0; letter-spacing:.2em;
  text-transform:uppercase; font-weight:600; color:#e3d9bd;
  text-shadow:0 2px 0 rgba(0,0,0,.55), 0 0 22px rgba(0,0,0,.35);
}
html.fraktur .masthead h1{ text-transform:none; letter-spacing:.04em; font-size:2.5rem; }
.subtitle{
  margin:2px 0 0; font-family:var(--f-head); font-size:.84rem;
  letter-spacing:.12em; color:#a8a288; text-transform:uppercase;
}
.subtitle em{ color:#cabd9f; font-style:normal; }
/* Second masthead line: keeps the original German term (and the tool's own
   vocabulary) visible without making it the name people have to remember. */
.subtitle--terms{ font-size:.62rem; letter-spacing:.18em; color:#7f7a66; margin-top:4px; }

.masthead-stamp{ flex:0 0 auto; }
.stamp{
  display:block; border:3px solid #a03d28; color:#c05f45; padding:5px 12px;
  transform:rotate(-7deg); text-align:center; opacity:.72;
  font-family:var(--f-head); line-height:1.1; border-radius:2px;
  box-shadow:inset 0 0 12px rgba(160,61,40,.25);
  text-decoration:none; cursor:pointer;
  transition:opacity .15s, transform .15s;
}
.stamp:hover{ opacity:1; transform:rotate(-7deg) scale(1.04); color:#e08464; }
.stamp span{ display:block; }
.stamp-l1{ font-size:.6rem; letter-spacing:.3em; }
.stamp-l2{ font-size:.9rem; letter-spacing:.11em; font-weight:700; }
.stamp-l3{ font-size:.54rem; letter-spacing:.15em; opacity:.85; margin-top:2px; }

/* ---------------- Tabs ---------------- */
.tabs{
  max-width:1680px; margin:0 auto; padding:0 22px; display:flex; gap:2px;
  flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin;
}
.tab{
  font-family:var(--f-head); font-size:.84rem; letter-spacing:.14em; text-transform:uppercase;
  background:rgba(0,0,0,.3); color:#a8a288; border:none; border-bottom:3px solid transparent;
  padding:10px 17px; cursor:pointer; transition:.14s; flex:0 0 auto; white-space:nowrap;
}
.tab:hover{ background:rgba(0,0,0,.45); color:#e3d9bd; }
.tab.is-active{
  background:var(--paper); color:var(--ink); border-bottom-color:var(--red);
  font-weight:600; box-shadow:inset 0 3px 8px rgba(0,0,0,.14);
}

/* ---------------- Context bar ---------------- */
.context-bar{
  max-width:1680px; margin:0 auto; padding:11px 22px;
  display:flex; gap:18px; align-items:flex-end; flex-wrap:wrap;
  background:linear-gradient(180deg, rgba(255,250,235,.16), rgba(0,0,0,.09));
  border-bottom:1px solid var(--rule-c);
  box-shadow:inset 0 -6px 12px rgba(0,0,0,.06);
}
.ctx-field{ display:flex; flex-direction:column; gap:4px; min-width:150px; }
.ctx-field--wide{ flex:1 1 320px; min-width:280px; }
.ctx-field label{
  font-family:var(--f-head); font-size:.68rem; letter-spacing:.19em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:600;
}
.ctx-actions{ flex-direction:row; align-items:center; gap:6px; margin-left:auto; }

select, input[type=text], input[type=search]{
  font-family:var(--f-body); font-size:.92rem; color:var(--ink);
  background:rgba(255,251,238,.36); border:1px solid var(--ink-soft);
  padding:6px 8px; border-radius:1px; box-shadow:inset 0 1px 3px rgba(0,0,0,.22);
}
select:focus, input:focus{ outline:2px solid var(--red); outline-offset:1px; }
input[type=range]{ accent-color:var(--red); width:100%; }
.readout{ font-family:var(--f-mono); color:var(--red); letter-spacing:.05em; font-size:.72rem; }
.year-scale{
  display:flex; justify-content:space-between;
  font-family:var(--f-mono); font-size:.6rem; color:var(--ink-faint); margin-top:-2px;
}

/* ---------------- Buttons ---------------- */
.btn{
  font-family:var(--f-head); font-size:.76rem; letter-spacing:.13em; text-transform:uppercase;
  font-weight:600;
  background:linear-gradient(180deg,#d3c8ab,#b3a789); color:var(--ink);
  border:1px solid #6f6a52; padding:7px 13px; cursor:pointer; border-radius:1px;
  box-shadow:var(--shadow); transition:.1s;
}
.btn:hover{ background:linear-gradient(180deg,#e0d6b9,#bfb394); }
a.btn{ display:inline-block; text-decoration:none; }
.btn:active{ transform:translateY(1px); box-shadow:none; }
.btn-primary{ background:linear-gradient(180deg,var(--red-lt),var(--red)); color:#efe0c4; border-color:#4d1409; }
.btn-primary:hover{ background:linear-gradient(180deg,#b94427,#8e2a1b); }
.btn-ghost{ background:rgba(0,0,0,.05); border-style:dashed; box-shadow:none; }
.btn-sm{ font-size:.66rem; padding:4px 8px; letter-spacing:.09em; }
.linklike{ background:none; border:none; color:var(--red); text-decoration:underline; cursor:pointer; font:inherit; padding:0; }

/* ---------------- Views & panels ---------------- */
main{ max-width:1680px; margin:0 auto; padding:16px 22px 60px; }
.view{ display:none; }
.view.is-active{ display:block; animation:fade .18s ease-out; }
@keyframes fade{ from{ opacity:0; transform:translateY(4px);} to{ opacity:1; transform:none; } }

.panel{
  background:
    var(--noise),
    linear-gradient(180deg, rgba(255,250,236,.26), rgba(255,250,236,0) 140px),
    linear-gradient(180deg, var(--paper-hi), var(--paper) 40%, var(--paper-dark));
  background-blend-mode:multiply, normal, normal;
  border:1px solid var(--paper-edge);
  border-top:3px solid var(--field-dk);
  box-shadow:0 4px 14px rgba(0,0,0,.34), inset 0 0 40px rgba(90,70,36,.12);
  padding:14px 16px 18px;
  position:relative;
}
/* dog-eared corner */
.panel::after{
  content:""; position:absolute; right:0; bottom:0; width:24px; height:24px;
  background:linear-gradient(135deg, transparent 47%, rgba(0,0,0,.26) 50%, var(--paper-dark) 53%);
}
.panel-title{
  font-family:var(--f-head); font-size:.98rem; letter-spacing:.19em; text-transform:uppercase;
  font-weight:700;
  margin:0 0 8px; padding-bottom:6px; border-bottom:2px solid var(--ink);
  display:flex; justify-content:space-between; align-items:baseline; gap:8px;
}
.panel-sub{ font-size:.76rem; color:var(--ink-soft); margin-bottom:8px; line-height:1.45; }
.panel-sub .rs-name{ display:block; font-family:var(--f-head); letter-spacing:.04em; }
.mini-title{
  font-family:var(--f-head); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  font-weight:600;
  color:var(--ink-soft); margin:16px 0 6px; border-bottom:1px dashed var(--rule-c); padding-bottom:4px;
}
.mini-note{ color:var(--ink-faint); letter-spacing:.06em; font-family:var(--f-mono); font-size:.66rem; }
.mini-title .mini-note{ float:right; }

.layout-3{ display:grid; grid-template-columns:250px minmax(0,1fr) 300px; gap:14px; align-items:start; }
@media (max-width:1320px){ .layout-3{ grid-template-columns:230px minmax(0,1fr); } }
@media (max-width:1020px){ .layout-3{ grid-template-columns:1fr; } }

/* ---------------- Catalogue ---------------- */
.field-row{ display:flex; gap:8px; align-items:center; margin-bottom:8px; flex-wrap:wrap; }
.field-row input[type=search]{ flex:1 1 120px; min-width:0; }
.chk{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.04em; color:var(--ink-soft); display:flex; align-items:center; gap:4px; cursor:pointer; white-space:nowrap; }

.tier-target{
  font-family:var(--f-mono); font-size:.66rem; line-height:1.35;
  background:rgba(125,35,23,.10); border:1px dashed var(--red);
  padding:5px 7px; margin-bottom:8px; color:var(--ink-soft);
}
.tier-head{
  font-family:var(--f-head); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; color:var(--ink);
  margin:14px 0 6px; padding-bottom:3px; border-bottom:2px solid var(--ink);
  display:flex; align-items:center; gap:7px;
}
.tier-badge{
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.06em;
  background:var(--field-dk); color:var(--paper-hi); padding:1px 6px; border-radius:1px;
}
.tier-badge--bt{ background:var(--amber-s); }
.tier-badge--sup{ background:var(--blue); }

.cat-head{
  font-family:var(--f-head); font-size:.66rem; letter-spacing:.19em; text-transform:uppercase;
  background:rgba(0,0,0,.12); color:var(--ink-soft); padding:2px 7px; margin:8px 0 4px;
  border-left:3px solid var(--rule-c);
}
.unit-chip{
  display:flex; align-items:center; gap:7px; width:100%; text-align:left;
  background:rgba(255,250,236,.26); border:1px solid var(--paper-edge); border-left:3px solid var(--ink-soft);
  padding:4px 6px; margin-bottom:3px; cursor:pointer; font-family:var(--f-body); font-size:.8rem;
  transition:.09s;
}
.unit-chip:hover{ background:rgba(255,252,240,.62); border-left-color:var(--red); transform:translateX(2px); }
.unit-chip.tier-bt{ border-left-color:var(--amber-s); padding:2px 6px; font-size:.75rem; }
.unit-chip.tier-sup{ border-left-color:var(--blue); }
.unit-chip .usym{ flex:0 0 auto; width:30px; height:20px; }
.unit-chip.tier-bt .usym{ width:24px; height:16px; }
.unit-chip .uname{ flex:1 1 auto; line-height:1.12; }
.unit-chip .uname small{ display:block; font-family:var(--f-mono); font-size:.59rem; color:var(--ink-faint); }
.unit-chip .uwidth{ font-family:var(--f-mono); font-size:.61rem; color:var(--ink-faint); }
.unit-chip[data-locked="1"]{ opacity:.4; }
.unit-chip[data-locked="1"]:hover{ border-left-color:var(--amber-s); }
.unit-chip[data-catlocked="1"]{ opacity:.35; }
.unit-chip[data-catlocked="1"]:hover{ border-left-color:var(--rule-c); transform:none; background:rgba(255,252,240,.3); }

/* ---------------- Division header ---------------- */
.canvas-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap; margin-bottom:12px; }
.canvas-ident{ display:flex; gap:12px; align-items:center; }
.unit-symbol-large{ width:82px; height:54px; flex:0 0 auto; }
.unit-sign-large{
  width:46px; height:46px; flex:0 0 auto; color:var(--field-dk);
  border:1px solid var(--paper-edge); background:rgba(255,250,236,.3); padding:2px;
}
.unit-sign-large svg{ width:100%; height:100%; display:block; }
.template-name{
  font-family:var(--f-head); font-size:1.3rem; font-weight:700; letter-spacing:.03em;
  background:transparent; border:none; border-bottom:2px solid var(--ink); padding:2px 2px;
  width:min(460px, 56vw); box-shadow:none;
}
.canvas-meta{
  font-family:var(--f-mono); font-size:.65rem; color:var(--ink-soft);
  letter-spacing:.05em; margin-top:5px; text-transform:uppercase; line-height:1.5;
}
.canvas-meta i{ color:var(--rule-c); font-style:normal; margin:0 3px; }
.canvas-tools{ display:flex; gap:6px; flex-wrap:wrap; }

/* ---------------- Regiment / battalion / battery grid ---------------- */
.regiment-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(178px,1fr)); gap:8px;
  background:
    var(--noise),
    repeating-linear-gradient(45deg, rgba(0,0,0,.045) 0 9px, transparent 9px 18px);
  background-blend-mode:multiply, normal;
  padding:9px; border:1px solid var(--rule-c);
  box-shadow:inset 0 0 22px rgba(0,0,0,.12);
}

.reg{
  display:flex; flex-direction:column; min-width:0;
  background:rgba(255,250,236,.20);
  border:1px solid var(--paper-edge); border-top:3px solid var(--rule-c);
  padding:0 0 4px;
}
.reg.is-active{ border-top-color:var(--red); box-shadow:0 0 0 2px rgba(125,35,23,.32); background:rgba(255,252,240,.42); }
.reg-head{
  display:flex; align-items:center; gap:5px; padding:4px 5px;
  background:linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.04));
  border-bottom:1px solid var(--rule-c); cursor:pointer;
}
.reg.is-active .reg-head{ background:linear-gradient(180deg, rgba(125,35,23,.20), rgba(125,35,23,.06)); }
.reg-ech{
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.1em;
  color:var(--paper-hi); background:var(--field-dk); padding:1px 5px; flex:0 0 auto;
}
.reg-name{
  font-family:var(--f-head); font-weight:700; font-size:.76rem; letter-spacing:.02em;
  background:transparent; border:none; border-bottom:1px solid transparent;
  flex:1 1 auto; min-width:0; padding:1px 2px; box-shadow:none; color:var(--ink);
}
.reg-name:hover{ border-bottom-color:var(--rule-c); }
.reg-del{ position:static; flex:0 0 auto; }
.reg-bns{ padding:5px 5px 0; display:flex; flex-direction:column; gap:4px; }
.reg-bts-h{
  font-family:var(--f-head); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint); margin:7px 5px 3px; padding-top:4px; border-top:1px dashed var(--rule-c);
  display:flex; justify-content:space-between;
}
.reg-bts-h em{ font-style:normal; font-family:var(--f-mono); }
.reg-bts{ padding:0 5px; display:flex; flex-direction:column; gap:3px; }
.reg-foot{
  font-family:var(--f-mono); font-size:.58rem; color:var(--ink-faint);
  margin:7px 5px 0; padding-top:4px; border-top:1px solid var(--rule-c); letter-spacing:.02em;
}
.reg-foot i{ color:var(--rule-c); font-style:normal; }
.reg--add{
  border:1px dashed var(--rule-c); background:rgba(0,0,0,.04); color:var(--ink-faint);
  font-family:var(--f-head); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer; min-height:110px; align-items:center; justify-content:center;
}
.reg--add:hover{ border-color:var(--red); color:var(--red); background:rgba(125,35,23,.07); }

.slot{
  min-height:34px; border:1px dashed var(--rule-c); background:rgba(255,255,255,.09);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-mono); font-size:.56rem; color:var(--ink-faint); letter-spacing:.1em;
}
.slot--bty{ min-height:22px; font-size:.53rem; }
.slot.is-drop{ border-color:var(--red); background:rgba(125,35,23,.16); }

.bn{
  position:relative; width:100%; min-height:50px; cursor:grab;
  background:linear-gradient(180deg,#ded3b4,#c2b697); border:1px solid #6f6a52;
  border-left:4px solid var(--field); box-shadow:var(--shadow);
  padding:4px 6px 3px; display:flex; flex-direction:column; gap:2px;
}
.bn:hover{ border-left-color:var(--red); }
.bn[data-cat="armor"]{ border-left-color:#453a5e; }
.bn[data-cat="mobile"]{ border-left-color:var(--blue); }
.bn[data-cat="artillery"]{ border-left-color:var(--red); }
.bn[data-cat="special"]{ border-left-color:var(--green); }
.bn[data-cat="support"]{ border-left-color:var(--amber-s); }
.bn-top{ display:flex; align-items:center; gap:5px; }
.bn .usym{ width:28px; height:19px; flex:0 0 auto; }
.bn-name{ font-size:.7rem; line-height:1.08; flex:1 1 auto; font-family:var(--f-body); }
.bn-stats{ font-family:var(--f-mono); font-size:.55rem; color:var(--ink-faint); letter-spacing:.02em; display:flex; gap:5px; flex-wrap:wrap; }
.bn-x{
  position:absolute; top:1px; right:2px; border:none; background:none; color:var(--red);
  font-family:var(--f-mono); font-size:.7rem; cursor:pointer; line-height:1; padding:2px;
}
.bn-x:hover{ color:#000; }
.bn.dragging{ opacity:.35; }

/* battery chips — visibly a smaller tier than a battalion */
.bty{
  position:relative; display:flex; align-items:center; gap:5px;
  background:rgba(148,102,32,.16); border:1px solid var(--paper-edge);
  border-left:3px solid var(--amber-s); padding:2px 16px 2px 4px; min-height:22px;
}
.bty .usym{ width:22px; height:15px; flex:0 0 auto; }
.bty-name{ font-family:var(--f-body); font-size:.63rem; line-height:1.05; flex:1 1 auto; min-width:0; }
.bty[data-cat="armor"]{ border-left-color:#453a5e; }
.bty[data-cat="mobile"]{ border-left-color:var(--blue); }
.bty .bn-x{ font-size:.62rem; }

.support-row{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:6px;
  padding:8px; border:1px solid var(--rule-c); background:rgba(36,64,94,.09);
}
.bn--sup{ border-left-color:var(--blue); cursor:default; }

.historical-note{
  margin-top:16px; border-left:4px solid var(--amber-s); background:rgba(148,102,32,.12);
  padding:11px 15px; font-size:.84rem; line-height:1.55;
}
.historical-note h4{
  font-family:var(--f-head); margin:0 0 6px; letter-spacing:.14em; text-transform:uppercase;
  font-size:.84rem; font-weight:700;
}
.historical-note .kv{
  font-family:var(--f-mono); font-size:.69rem; color:var(--ink-soft);
  columns:2; column-gap:22px; margin:8px 0;
}
.historical-note ul{ margin:6px 0 0 0; padding-left:18px; }
.historical-note li{ margin-bottom:2px; }
.hn-note{ margin-top:8px; }

/* object-fit:contain, not cover — a real archival photo's composition is the
   point, so the whole frame always shows rather than being cropped to fill a
   box. A portrait-oriented source just renders narrower, never zoomed into a
   meaningless sliver of itself. */
.hist-photo{ margin:8px 0 10px; }
.hist-photo img{
  display:block; margin:0 auto; width:auto; height:auto;
  max-width:100%; max-height:280px; object-fit:contain;
  border:1px solid var(--ink-soft); background:#1c1a14; filter:sepia(.15) contrast(1.02);
}
.hist-photo figcaption{ font-family:var(--f-mono); font-size:.62rem; color:var(--ink-faint); line-height:1.5; margin-top:4px; }
.hist-photo figcaption .photo-credit{ display:block; opacity:.8; }
.hist-photo--wide{ margin:10px 0 14px; }
.hist-photo--wide img{ max-height:260px; }

/* Design / combat / gameplay / highlights — four short labelled sub-notes,
   set apart from the establishment summary above by a rule so the reader
   can tell "what it was" from "why the tool built it this way". "How it
   fought" runs full width; the design-rationale and in-game-use notes sit
   side by side as their own boxes; the highlight list runs full width again. */
.hn-detail{ margin-top:12px; padding-top:10px; border-top:1px dashed var(--amber-s); }
.hn-sub{
  font-family:var(--f-head); font-size:.66rem; letter-spacing:.15em; text-transform:uppercase;
  font-weight:700; color:var(--ink-soft); margin:10px 0 3px;
}
.hn-detail > .hn-sub:first-child{ margin-top:0; }
.hn-detail p{ margin:0; font-size:.82rem; line-height:1.5; }
.hn-cols{ display:grid; grid-template-columns:1fr 1fr; gap:0 22px; margin-top:2px; }
.hn-col .hn-sub{ margin-top:0; }
.hn-highlights{ margin:10px 0 0; padding-left:18px; font-size:.82rem; }
.hn-highlights li{ margin-bottom:3px; }
.src-list{ font-family:var(--f-mono); font-size:.62rem; color:var(--ink-faint); margin-top:8px; line-height:1.5; }

/* ---------------- Stats ---------------- */
.statline{
  display:flex; justify-content:space-between; align-items:baseline; gap:8px;
  font-family:var(--f-mono); font-size:.73rem; padding:3px 0; border-bottom:1px dotted var(--rule-c);
}
.statline span:first-child{ color:var(--ink-soft); letter-spacing:.02em; }
.statline b{ font-size:.85rem; }
.statline.is-key b{ color:var(--red); }
.stat-group-h{
  font-family:var(--f-head); font-size:.64rem; letter-spacing:.22em; text-transform:uppercase;
  font-weight:700;
  background:var(--field-dk); color:var(--paper-hi); padding:2px 7px; margin:11px 0 4px;
}
.bar{ height:3px; background:rgba(0,0,0,.16); margin-top:2px; }
.bar > i{ display:block; height:100%; background:var(--field); }

.width-tbl{ width:100%; border-collapse:collapse; font-family:var(--f-mono); font-size:.65rem; }
.width-tbl th{ text-align:left; color:var(--ink-soft); font-weight:400; letter-spacing:.08em; border-bottom:1px solid var(--rule-c); padding:2px 3px; }
.width-tbl td{ padding:2px 3px; border-bottom:1px dotted var(--rule-c); }
.equip-tbl{ width:100%; border-collapse:collapse; font-family:var(--f-mono); font-size:.68rem; }
.equip-tbl .equip-cat th{
  text-align:left; font-family:var(--f-head); font-size:.62rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint); font-weight:700; padding:8px 0 2px;
  border-bottom:1px solid var(--rule-c);
}
.equip-tbl .equip-cat:first-child th{ padding-top:0; }
.equip-tbl td{ padding:2px 3px; border-bottom:1px dotted var(--rule-c); }
.equip-tbl .equip-name{ color:var(--ink); }
.equip-tbl .equip-qty{ text-align:right; font-variant-numeric:tabular-nums; color:var(--ink-soft); white-space:nowrap; }

.ok{ color:var(--green); font-weight:700; }
.warn{ color:var(--amber-s); font-weight:700; }
.bad{ color:var(--red); font-weight:700; }

.plaus-item{ font-size:.75rem; line-height:1.42; padding:5px 0 5px 16px; position:relative; border-bottom:1px dotted var(--rule-c); }
.plaus-item::before{ content:"■"; position:absolute; left:0; font-size:.6rem; top:6px; }
.plaus-item.p-ok::before{ color:var(--green); }
.plaus-item.p-warn::before{ color:var(--amber-s); }
.plaus-item.p-bad::before{ color:var(--red); }

/* ---------------- Divisional signs ---------------- */
.divsign{ width:100%; height:100%; display:block; color:inherit; }
.divsign.is-placeholder{ opacity:.45; }
.divsign.is-generic{ opacity:.62; }
/* real historical emblems: shown in their own colours, not tinted to the UI */
span.divsign.is-real{
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  border:1px solid var(--green);
}
span.divsign.is-real img{ width:88%; height:88%; object-fit:contain; }

.portrait.is-real{ display:block; overflow:hidden; border:1px solid var(--green); }
.portrait.is-real img{ width:100%; height:100%; object-fit:cover; object-position:center 18%; display:block; }
.branchmark{ width:24px; height:24px; display:block; color:var(--ink-soft); }
.dl-sign{ width:26px; height:26px; flex:0 0 auto; color:var(--field-dk); display:block; }

/* ---------------- Library ---------------- */
.library-head{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:12px; margin-bottom:12px; }
.library-head .panel-title{ border-bottom:none; margin:0; }
.lib-filters{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }

/* ---------------- Compare Units ---------------- */
.compare-tiers, .compare-cats{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.chip-toggle{
  font-family:var(--f-head); font-size:.68rem; letter-spacing:.06em;
  background:rgba(255,250,236,.3); border:1px solid var(--paper-edge); color:var(--ink-soft);
  padding:4px 10px; cursor:pointer; border-radius:1px; transition:.1s;
}
.chip-toggle:hover{ background:rgba(255,252,240,.55); }
.chip-toggle.is-on{ background:var(--field-dk); color:var(--paper-hi); border-color:var(--field-dk); }

.compare-wrap{
  overflow-x:auto; border:1px solid var(--paper-edge); background:rgba(255,250,236,.24);
  box-shadow:inset 0 0 20px rgba(0,0,0,.08); margin-top:6px;
}
.compare-tbl{ width:max-content; min-width:100%; border-collapse:collapse; font-size:.76rem; white-space:nowrap; }
.compare-tbl thead th{
  position:sticky; top:0; z-index:2; background:var(--field-dk); color:var(--paper-hi);
  font-family:var(--f-head); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:700; text-align:left; padding:7px 9px; border-bottom:2px solid var(--ink);
  cursor:default;
}
.compare-tbl th.is-sortable{ cursor:pointer; user-select:none; }
.compare-tbl th.is-sortable:hover{ background:var(--field); }
.compare-tbl th.is-sorted{ color:#f0e6c8; }
.compare-tbl td{ padding:5px 9px; border-bottom:1px dotted var(--rule-c); font-family:var(--f-mono); }
.compare-tbl tbody tr:hover{ background:rgba(255,252,240,.5); }
.compare-tbl tr.is-late{ opacity:.55; }
.compare-tbl td.c-icon{ padding:3px 6px; }
.compare-tbl td.c-icon .usym{ width:30px; height:20px; display:block; }
.compare-tbl td.c-name{ font-family:var(--f-body); font-size:.8rem; color:var(--ink); white-space:normal; min-width:170px; }
.compare-tbl td.c-name-en{ font-family:var(--f-body); font-size:.74rem; color:var(--ink-soft); white-space:normal; min-width:140px; }
.compare-tbl td.c-tier, .compare-tbl td.c-cat{ font-family:var(--f-head); font-size:.66rem; letter-spacing:.04em; color:var(--ink-soft); }
.compare-tbl td.c-num{ text-align:right; font-variant-numeric:tabular-nums; }
.compare-note{
  font-family:var(--f-mono); font-size:.66rem; color:var(--ink-faint); margin-top:8px; line-height:1.5;
}

.library-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(330px,1fr)); gap:14px; }
.card{
  background:
    var(--noise),
    linear-gradient(180deg, var(--paper-hi), var(--paper) 55%, var(--paper-dark));
  background-blend-mode:multiply, normal;
  border:1px solid var(--paper-edge); border-top:3px solid var(--field-dk);
  box-shadow:0 3px 10px rgba(0,0,0,.3); padding:12px 14px; display:flex; flex-direction:column; gap:8px;
  position:relative; transition:.13s;
}
.card:hover{ transform:translateY(-2px); box-shadow:0 7px 18px rgba(0,0,0,.36); }
.card-head{ display:flex; gap:9px; align-items:center; }
.card-head .usym{ width:50px; height:33px; flex:0 0 auto; }
.card-sign{
  display:block; width:32px; height:32px; flex:0 0 auto; color:var(--field-dk);
  border:1px solid var(--paper-edge); background:rgba(255,250,236,.34); padding:2px;
}
.card-sign svg{ width:100%; height:100%; display:block; }
.card h3{ font-family:var(--f-head); font-size:.98rem; margin:0; line-height:1.18; font-weight:700; flex:1 1 auto; min-width:0; }
.card .card-sub{ font-family:var(--f-mono); font-size:.61rem; color:var(--ink-faint); letter-spacing:.07em; text-transform:uppercase; margin-top:2px; }

/* Branch/date tags. In normal flow above the title, so a long branch name
   can never sit on top of the division name. */
.card-tags{ display:flex; flex-wrap:wrap; gap:4px; margin-bottom:2px; }
.tag{
  font-family:var(--f-head); font-size:.58rem; letter-spacing:.13em; text-transform:uppercase;
  font-weight:600; padding:2px 7px; color:#f0e6d0; background:var(--field-dk);
  border:1px solid rgba(0,0,0,.35);
}
.tag.t-heer{ background:var(--field-dk); }
.tag.t-pz  { background:#3c3350; }
.tag.t-ss  { background:#1e1d18; }
.tag.t-lw  { background:var(--blue); }
.tag.t-geb { background:var(--green); }
.tag.t-res { background:#5d5a48; }
.tag.t-mod { background:var(--amber-s); }
.tag.t-own { background:var(--red); }
.tag.t-date{
  background:transparent; color:var(--ink-soft); border:1px solid var(--rule-c);
  font-family:var(--f-mono); letter-spacing:.04em; text-transform:none; font-weight:400;
}
.card p{ margin:0; font-size:.8rem; line-height:1.5; }
.card-regs{ display:flex; flex-wrap:wrap; gap:3px; }
.card-reg{
  font-family:var(--f-mono); font-size:.57rem; letter-spacing:.02em;
  background:rgba(0,0,0,.07); border:1px solid var(--rule-c); padding:1px 5px; color:var(--ink-soft);
}
.card-reg em{ font-style:normal; color:var(--red); }
.card-facts{ display:grid; grid-template-columns:repeat(2,1fr); gap:2px 10px; font-family:var(--f-mono); font-size:.64rem; color:var(--ink-soft); }
.card-facts b{ color:var(--ink); }
.card-actions{ display:flex; gap:6px; margin-top:auto; padding-top:6px; }
/* (the old absolutely-positioned ribbon was replaced by .card-tags above) */

.saved-section{ margin-top:28px; }
.empty-note{ font-family:var(--f-mono); font-size:.72rem; color:var(--ink-faint); padding:18px; border:1px dashed var(--rule-c); text-align:center; }

/* ---------------- Army designer ---------------- */
.army-toolbar{
  display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin-bottom:14px;
  background:rgba(255,250,236,.20); border:1px solid var(--paper-edge); padding:10px 12px;
  box-shadow:inset 0 0 20px rgba(90,70,36,.10);
}
.divider-v{ width:1px; align-self:stretch; background:var(--rule-c); margin:0 4px; }
.army-layout{ display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:14px; align-items:start; }
@media (max-width:1100px){ .army-layout{ grid-template-columns:1fr; } }

/* ---------------- Production Planner ---------------- */
.planner-layout{ display:grid; grid-template-columns:300px minmax(0,1fr); gap:14px; align-items:start; }
@media (max-width:1100px){ .planner-layout{ grid-template-columns:1fr; } }
.panel--plannerside .panel-title:not(:first-child){ margin-top:18px; }
.radio-row{ display:flex; align-items:center; gap:7px; font-size:.82rem; margin-bottom:6px; cursor:pointer; }
.planner-target{ margin-bottom:4px; }
.planner-sub{ margin:0 0 12px 22px; display:flex; align-items:center; gap:8px; }
.planner-sub label{ font-family:var(--f-mono); font-size:.66rem; color:var(--ink-faint); }
.planner-field{ margin-bottom:10px; }
.planner-field label{ display:block; font-family:var(--f-head); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:3px; }
.planner-field select, .planner-field input, .planner-sub input{
  width:100%; font-family:var(--f-mono); font-size:.8rem; padding:5px 7px;
  background:rgba(255,255,255,.5); border:1px solid var(--paper-edge); color:var(--ink);
}
.planner-note{ font-family:var(--f-mono); font-size:.64rem; color:var(--ink-faint); line-height:1.5; margin-top:10px; }
.planner-summary{ margin-bottom:14px; }
.planner-sum-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px 18px;
  background:rgba(255,250,236,.3); border:1px solid var(--paper-edge); padding:12px 14px;
}
.planner-sum-grid div{ display:flex; flex-direction:column; gap:2px; }
.planner-sum-grid span{ font-family:var(--f-head); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }
.planner-sum-grid b{ font-family:var(--f-mono); font-size:.95rem; color:var(--ink); }
.planner-tbl{ width:100%; border-collapse:collapse; font-size:.74rem; }
.planner-tbl th{
  text-align:left; font-family:var(--f-head); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:700; border-bottom:2px solid var(--ink); padding:5px 8px;
}
.planner-tbl td{ padding:6px 8px; border-bottom:1px dotted var(--rule-c); vertical-align:top; }
.planner-tbl td.num{ text-align:right; font-family:var(--f-mono); font-variant-numeric:tabular-nums; white-space:nowrap; }
.planner-tbl .planner-items{ font-size:.68rem; color:var(--ink-soft); }
.planner-tbl tfoot td{ border-top:2px solid var(--ink); border-bottom:none; font-weight:700; font-family:var(--f-mono); }
.planner-tbl tfoot td:first-child{ font-family:var(--f-head); letter-spacing:.06em; text-transform:uppercase; font-size:.66rem; }

.oob-head{ display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:10px; border-bottom:2px solid var(--ink); padding-bottom:8px; margin-bottom:12px; }
.oob-summary{ font-family:var(--f-mono); font-size:.68rem; color:var(--ink-soft); letter-spacing:.04em; }

.oob-equip-wrap{
  margin-bottom:14px; border:1px solid var(--paper-edge); background:rgba(255,250,236,.24);
}
.oob-equip-wrap summary{
  font-family:var(--f-head); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft); cursor:pointer; padding:8px 12px; list-style:none;
}
.oob-equip-wrap summary::-webkit-details-marker{ display:none; }
.oob-equip-wrap summary::before{ content:"▸ "; }
.oob-equip-wrap[open] summary::before{ content:"▾ "; }
.oob-equip-wrap[open] summary{ border-bottom:1px solid var(--rule-c); }
.oob-equip-wrap #oob-equip{ padding:8px 12px 12px; max-height:340px; overflow-y:auto; }

.oob-tree{ font-size:.86rem; }
.node{ margin:0 0 8px 0; border-left:2px solid var(--rule-c); padding-left:10px; }
.node--hg{ border-left:4px solid var(--field-dk); padding-left:12px; margin-bottom:18px; }
.node--army{ border-left:3px solid var(--blue); }
.node--corps{ border-left:2px solid var(--amber-s); }

.node-head{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:rgba(255,250,236,.26); border:1px solid var(--paper-edge); padding:6px 8px;
}
.node--hg > .node-head{ background:linear-gradient(90deg, var(--field-dk), rgba(65,71,52,.2)); color:var(--paper-hi); border-color:var(--field-dk); }
.node--hg > .node-head input{ color:var(--paper-hi); border-bottom-color:rgba(255,255,255,.32); }
.node--hg > .node-head .node-kind{ color:#a8a288; }
.node--army > .node-head{ background:rgba(36,64,94,.13); }
.node--corps > .node-head{ background:rgba(148,102,32,.13); }
.node.is-target > .node-head{ outline:2px solid var(--red); }

.node-kind{ font-family:var(--f-mono); font-size:.57rem; letter-spacing:.17em; text-transform:uppercase; color:var(--ink-faint); }
.node-name{ font-family:var(--f-head); font-weight:700; font-size:.95rem; background:transparent; border:none; border-bottom:1px solid transparent; min-width:170px; flex:1 1 auto; box-shadow:none; }
.node-name:hover{ border-bottom-color:var(--rule-c); }
.node-tools{ display:flex; gap:4px; align-items:center; margin-left:auto; }
.node-body{ padding:6px 0 0 6px; }

.cmdr{
  display:flex; align-items:center; gap:6px; font-family:var(--f-mono); font-size:.66rem;
  background:rgba(0,0,0,.09); padding:2px 6px; border:1px solid var(--rule-c);
}
.cmdr select{ font-size:.72rem; padding:2px 4px; max-width:230px; }
.cmdr .rank-ins{ width:26px; height:16px; }
.cmdr.is-bad{ border-color:var(--red); background:rgba(125,35,23,.16); }
.cmdr-src-flag{
  display:inline-flex; align-items:center; justify-content:center;
  width:14px; height:14px; border-radius:50%; font-size:.58rem; font-weight:700;
  background:var(--rule-c); color:var(--paper); cursor:help; flex:none;
}

.div-line{
  display:flex; align-items:center; gap:8px; padding:3px 6px; border-bottom:1px dotted var(--rule-c);
  font-size:.8rem;
}
.div-line:hover{ background:rgba(255,252,240,.30); }
.div-line .usym{ width:30px; height:20px; flex:0 0 auto; }
.div-line .dl-name{ flex:1 1 auto; }
.div-line .dl-meta{ font-family:var(--f-mono); font-size:.59rem; color:var(--ink-faint); }
.div-line .dl-stats{
  font-family:var(--f-mono); font-size:.61rem; color:var(--ink-soft); white-space:nowrap;
  flex:0 0 auto; cursor:help; border-left:1px dotted var(--rule-c); padding-left:8px;
}
.div-line .dl-stats b{ color:var(--ink); font-weight:600; }

.oob-target{
  font-family:var(--f-mono); font-size:.68rem; padding:6px 8px; margin-bottom:8px;
  background:rgba(125,35,23,.12); border:1px dashed var(--red); color:var(--ink-soft);
}
.oob-div-list{ max-height:420px; overflow-y:auto; padding-right:4px; }
.warnings{ font-size:.75rem; }
.warn-item{ border-left:3px solid var(--amber-s); background:rgba(148,102,32,.13); padding:5px 8px; margin-bottom:5px; line-height:1.4; }
.warn-item.w-bad{ border-left-color:var(--red); background:rgba(125,35,23,.13); }

/* ---------------- Generals ---------------- */
.general-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(310px,1fr)); gap:14px; }
.gcard{
  background:
    var(--noise),
    linear-gradient(180deg, var(--paper-hi), var(--paper) 55%, var(--paper-dark));
  background-blend-mode:multiply, normal;
  border:1px solid var(--paper-edge); border-top:3px solid var(--field-dk);
  box-shadow:0 3px 10px rgba(0,0,0,.3); padding:12px 14px; display:flex; gap:12px;
}
.gcard .portrait{ width:74px; height:96px; flex:0 0 auto; border:1px solid var(--ink-soft); background:#b6a988; }
.gcard-main{ flex:1 1 auto; min-width:0; }
.gcard h3{ font-family:var(--f-head); font-size:.98rem; margin:0 0 1px; line-height:1.15; font-weight:700; }
.gcard .grank{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); }
.gcard .glife{ font-family:var(--f-mono); font-size:.6rem; color:var(--ink-faint); margin-bottom:5px; }
.gcard .gskills{ display:flex; gap:8px; font-family:var(--f-mono); font-size:.62rem; margin:5px 0; flex-wrap:wrap; }
.suggested-cmd{
  font-family:var(--f-head); font-size:.66rem; letter-spacing:.04em; color:var(--ink-soft);
  background:rgba(36,64,94,.1); border-left:3px solid var(--blue); padding:3px 7px; margin:5px 0;
}
.suggested-cmd b{ color:var(--blue); }
.gcard .gskills i{ font-style:normal; color:var(--ink-soft); }
.gcard .gskills b{ color:var(--red); }
.traits{ display:flex; gap:4px; flex-wrap:wrap; margin-top:4px; }
.trait{
  font-family:var(--f-head); font-size:.58rem; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--ink-soft); padding:1px 5px; background:rgba(255,250,236,.3);
}
.cmd-list{ font-family:var(--f-mono); font-size:.62rem; color:var(--ink-soft); margin-top:6px; line-height:1.5; }
.cmd-list .cur{ color:var(--red); font-weight:700; }
.note-flag{
  margin-top:7px; font-size:.66rem; line-height:1.4; border-left:3px solid var(--red);
  background:rgba(125,35,23,.11); padding:4px 7px; color:var(--ink-soft);
}
.flag-toggle{
  display:inline-block; vertical-align:middle; margin-left:5px; font-size:.68rem; line-height:1;
  background:none; border:none; color:var(--red); opacity:.55; cursor:pointer; padding:2px;
  transition:opacity .12s;
}
.flag-toggle:hover, .flag-toggle.is-open{ opacity:1; }
.gcard.is-unavailable{ opacity:.48; }

/* ---------------- About ---------------- */
/* Two columns: the prose, and a narrow reading-list rail. The rail is a
   genuine sidebar — it sticks while you read the long left column — and it
   drops below the prose under 1180px rather than squeezing, because a
   240px-wide book list is unreadable. */
.about-layout{
  display:grid; gap:24px; align-items:start;
  grid-template-columns:minmax(0,900px) minmax(260px,330px);
  justify-content:start;
}
.about-rail{ position:sticky; top:14px; }
.rail-card{
  background:
    var(--noise),
    linear-gradient(180deg, var(--paper-hi), var(--paper) 60%, var(--paper-dark));
  background-blend-mode:multiply, normal;
  border:1px solid var(--paper-edge); border-top:3px solid var(--field-dk);
  box-shadow:0 4px 14px rgba(0,0,0,.32); padding:16px 18px 18px;
  max-height:calc(100vh - 28px); overflow-y:auto;
}
.rail-title{
  font-family:var(--f-head); letter-spacing:.17em; text-transform:uppercase;
  font-size:.86rem; font-weight:700; border-bottom:2px solid var(--ink);
  padding-bottom:5px; margin:0 0 8px;
}
.rail-intro{ font-size:.78rem; line-height:1.55; color:var(--ink-soft); margin:0 0 4px; }
.rail-intro .linklike{ font-size:inherit; }
.rail-group{
  font-family:var(--f-head); font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; font-weight:700; color:var(--ink);
  margin:16px 0 6px; padding-top:8px; border-top:1px solid var(--rule-c);
}
ul.shelf{ list-style:none; margin:0; padding:0; }
.shelf-item{
  margin:0 0 12px; padding-left:10px; border-left:2px solid var(--rule-c);
}
.shelf-item:last-child{ margin-bottom:0; }
.shelf-author{
  display:block; font-family:var(--f-head); font-size:.72rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);
}
.shelf-title{ display:block; font-style:italic; font-size:.83rem; line-height:1.35; margin:1px 0 3px; }
.shelf-why{ display:block; font-size:.74rem; line-height:1.5; color:var(--ink-soft); }
.shelf-item .aff-link{
  display:inline-block; margin-top:4px; color:var(--red);
  font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
}
.rail-foot{
  font-size:.7rem; line-height:1.5; color:var(--ink-soft);
  margin:14px 0 0; padding-top:8px; border-top:1px solid var(--rule-c);
}
@media (max-width:1180px){
  .about-layout{ grid-template-columns:minmax(0,900px); }
  .about-rail{ position:static; max-width:900px; }
  .rail-card{ max-height:none; }
  ul.shelf{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; }
  .shelf-item{ margin:0; }
}
@media print{ .about-rail{ display:none !important; } }

.about-wrap{
  background:
    var(--noise),
    linear-gradient(180deg, var(--paper-hi), var(--paper) 60%, var(--paper-dark));
  background-blend-mode:multiply, normal;
  border:1px solid var(--paper-edge); border-top:3px solid var(--field-dk);
  box-shadow:0 4px 14px rgba(0,0,0,.32); padding:22px 28px; max-width:900px; line-height:1.65;
}
.about-wrap h2{ font-family:var(--f-head); letter-spacing:.17em; text-transform:uppercase; font-size:1rem; font-weight:700; border-bottom:2px solid var(--ink); padding-bottom:6px; margin-top:26px; }
.about-wrap h2:first-child{ margin-top:0; }
.about-wrap h3{ font-family:var(--f-head); font-size:.92rem; letter-spacing:.06em; margin:18px 0 4px; font-weight:700; }
.about-wrap code{ font-family:var(--f-mono); font-size:.82em; background:rgba(0,0,0,.09); padding:1px 4px; }
.about-wrap ul{ padding-left:20px; }
.about-wrap li{ margin-bottom:5px; }
/* Historical 1:1 ↔ Playable — the project's central distinction, shown rather
   than described. Collapses to a single column on narrow screens. */
.variant-compare{
  display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:stretch;
  margin:14px 0 16px;
}
.variant-card{
  background:rgba(0,0,0,.05); border:1px solid var(--rule-c);
  border-top:3px solid var(--red); padding:12px 14px;
}
.variant-card h3{ margin:0 0 6px; font-size:.95rem; }
.variant-card p{ margin:0 0 6px; font-size:.86rem; line-height:1.45; }
.variant-note{ color:var(--ink-soft); font-size:.8rem !important; }
.variant-arrow{
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; color:var(--red); opacity:.65;
}
@media (max-width:760px){
  .variant-compare{ grid-template-columns:1fr; }
  .variant-arrow{ transform:rotate(90deg); padding:2px 0; }
}

/* Progressive disclosure for the deep-detail sections (typography, technical
   notes) — kept, but one level down so they don't sit between a new reader and
   the methodology. */
.about-details{
  border:1px solid var(--rule-c); border-left:3px solid var(--rule-c);
  background:rgba(0,0,0,.03); padding:0 14px; margin:16px 0;
}
.about-details[open]{ padding-bottom:8px; }
.about-details > summary{
  cursor:pointer; padding:10px 0; font-family:var(--f-head);
  font-size:.92rem; letter-spacing:.06em; font-weight:700; color:var(--ink);
}
.about-details > summary:hover{ color:var(--red); }
html.fraktur .about-details > summary{ font-family:var(--f-frak); text-transform:none; letter-spacing:.01em; }

.about-wrap .lede{
  font-size:1.02rem; line-height:1.5; color:var(--ink);
  border-left:3px solid var(--red); padding-left:12px; margin:0 0 14px;
}
.about-wrap a{ color:var(--red); }
.about-wrap a.btn-primary{ color:#efe0c4; }
.about-wrap a.btn-primary:hover{ color:#efe0c4; }

/* ---------------- Toast & footer ---------------- */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%, 20px);
  background:var(--field-dkr); color:var(--paper-hi); font-family:var(--f-mono); font-size:.74rem;
  padding:9px 18px; border:1px solid #000; box-shadow:0 5px 18px rgba(0,0,0,.55);
  opacity:0; pointer-events:none; transition:.2s; z-index:70; letter-spacing:.05em;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }

.colophon{
  max-width:1680px; margin:0 auto; padding:18px 22px 40px; border-top:1px solid var(--rule-c);
  font-size:.72rem; color:var(--ink-soft); line-height:1.6;
}
.colophon p{ margin:0 0 5px; }

/* ---------------- commercial & imprint -----------------------------------
   Deliberately quiet: the affiliate mark is a small currency sign, not a
   badge; the disclosure is set in the same size as the prose it explains;
   the publisher line is plain text. Nothing here is allowed to compete with
   the tool itself for attention.
*/
.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.aff-mark{ font-size:.85em; opacity:.75; }
.about-wrap a.aff-link{
  font-size:.86em; letter-spacing:.04em; text-transform:uppercase;
  white-space:nowrap; opacity:.8;
}
.about-wrap a.aff-link:hover{ opacity:1; }
.about-wrap .aff-note{
  font-size:.86rem; color:var(--ink-soft); line-height:1.6;
  border-left:2px solid var(--rule-c); padding:2px 0 2px 12px; margin:10px 0 0;
}
.imprint{
  margin:10px 0 0 !important; padding-top:8px; border-top:1px solid var(--rule-c);
  font-size:.72rem; color:var(--ink-soft); letter-spacing:.02em;
}
.about-wrap .imprint{ font-size:.86rem; }
.sponsor-slot{
  margin:6px 0 0 !important; font-size:.72rem; color:var(--ink-soft);
}
.sponsor-label{
  text-transform:uppercase; letter-spacing:.14em; font-size:.9em;
  margin-right:7px; opacity:.75;
}
@media print{ .aff-link, .aff-note, .sponsor-slot{ display:none !important; } }

/* ---------------- Fraktur accent (opt-in, headings/labels only) ----------
   Applies the self-hosted faces above to structural headings and one-glance
   labels across every view — never to body prose, data values, tables,
   buttons, or editable fields; see the rationale in the file header.

   Blackletter reads worst set in tight-tracked ALL CAPS — the opposite of
   how it was ever actually set — so every selector below also drops back to
   the element's normal mixed-case source text and loosens the letter-spacing
   that the DIN styling relies on but blackletter doesn't need. Source text
   was already normal case underneath the CSS text-transform, so this is a
   free switch, not a content change. */

/* larger "display" headings: the elegant Maguntia cut */
html.fraktur .panel-title,
html.fraktur .about-wrap h2,
html.fraktur .historical-note h4,
html.fraktur .stamp{
  font-family: var(--f-frak);
  text-transform: none;
  letter-spacing: .01em;
}
html.fraktur .panel-title{ font-size:1.05rem; }
html.fraktur .about-wrap h2{ font-size:1.15rem; }
html.fraktur .historical-note h4{ font-size:.92rem; }

/* small, dense labels: the heavier "fette" Cook cut holds up at this size
   where Maguntia's fine strokes would blur together */
html.fraktur .mini-title,
html.fraktur .cat-head,
html.fraktur .tier-head,
html.fraktur .stat-group-h,
html.fraktur .node-kind,
html.fraktur .about-wrap h3,
html.fraktur .reg-ech{
  font-family: var(--f-frak-bold);
  text-transform: none;
  letter-spacing: 0;
}
html.fraktur .mini-title{ font-size:.82rem; }
html.fraktur .cat-head{ font-size:.76rem; }
html.fraktur .tier-head{ font-size:.84rem; }
html.fraktur .stat-group-h{ font-size:.74rem; }
html.fraktur .node-kind{ font-size:.68rem; letter-spacing:.02em; }
html.fraktur .about-wrap h3{ font-size:1rem; }

/* ---------------- Small screens ---------------- */
@media (max-width:720px){
  html, body{ overflow-x:hidden; }
  .masthead-inner{ padding:10px 12px 8px; gap:10px; flex-wrap:wrap; }
  .masthead h1{ font-size:1.2rem; letter-spacing:.08em; }
  html.fraktur .masthead h1{ font-size:1.5rem; }
  .subtitle{ font-size:.7rem; }
  .balkenkreuz{ width:34px; height:34px; }
  .masthead-stamp{ display:none; }
  .tabs{ padding:0 8px; }
  .tab{ font-size:.66rem; padding:8px 9px; letter-spacing:.06em; text-align:center; }
  .context-bar{ padding:10px 12px; gap:12px; }
  .ctx-field{ min-width:0; flex:1 1 100%; }
  .ctx-actions{ margin-left:0; }
  main{ padding:12px 10px 40px; }
  .panel{ padding:12px 11px 14px; }
  .library-head{ align-items:flex-start; }
  .library-head .panel-title{ display:block; }
  .library-grid, .general-grid{ grid-template-columns:1fr; }
  .regiment-grid{ grid-template-columns:1fr; }
  .template-name{ width:100%; }
  .canvas-ident{ flex-wrap:wrap; }
  .historical-note .kv{ columns:1; }
  .hn-cols{ grid-template-columns:1fr; }
  .gcard{ flex-direction:column; }
  .gcard .portrait{ width:60px; height:78px; }
  .army-layout{ grid-template-columns:1fr; }
  .node-head{ flex-wrap:wrap; }
  .node-name{ min-width:120px; }
  .cmdr select{ max-width:150px; }
  .node-tools{ margin-left:0; }
  .oob-tree{ overflow-x:auto; }
  .about-wrap{ padding:14px 14px; }
}

/* ---------------- Print (OOB sheet) ---------------- */
@media print{
  body{ background:#fff; }
  .masthead, .context-bar, .army-toolbar, .panel--oobside, .colophon, .paper-grain, .tabs{ display:none !important; }
  .view{ display:none !important; }
  .view#view-army{ display:block !important; }
  .army-layout{ grid-template-columns:1fr; }
  .panel{ box-shadow:none; border:none; background:#fff; }
  .node-tools{ display:none; }
  .node-name, .cmdr select{ border:none; }
  main{ padding:0; }
}