/* tank.tektology.com - the field manual at /manual/.

   Layered on app.css, which owns the panel, the buttons, the icons and the
   keycaps. Everything here is local to this page: the picture across its
   head, the contents rail, the numbered sections, the keyboard, the pinned
   screenshot, the map legend and the three catalogue grids manual.js fills. */

.manual { max-width: 1200px; }

/* ------------------------------------------------------------------ the head */

/* The base shot with the page's name over it. A real <img> under the words and
   a shadow for them to be read against, the same construction as the home
   page's hero. */
.m-hero {
  position: relative;
  display: flex;
  min-height: 300px;
  margin-bottom: 20px;
  overflow: hidden;
  --cut: 16px;
  --panel-edge: var(--line-hard);
  border: 1px solid var(--panel-edge);
  clip-path: var(--notch);
  background: #0b0c0d;
}

.m-hero-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
}

/* The diagonals ride on the overlay, in front of the picture - see the same
   construction in home.css. */
.m-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    var(--notch-lines),
    linear-gradient(90deg, rgba(8, 9, 10, 0.93) 0%, rgba(8, 9, 10, 0.6) 42%, rgba(8, 9, 10, 0.05) 78%),
    linear-gradient(0deg, rgba(8, 9, 10, 0.8) 0%, rgba(8, 9, 10, 0) 50%);
  background-repeat: no-repeat;
  background-position: var(--notch-pos), 0 0, 0 0;
  background-size: var(--cut) var(--cut), var(--cut) var(--cut), var(--cut) var(--cut), var(--cut) var(--cut),
                   100% 100%, 100% 100%;
}

.m-hero-in {
  position: relative;
  z-index: 1;
  align-self: flex-end;
  padding: 30px;
  max-width: 600px;
}

.m-hero .eyebrow { color: var(--accent); }

.m-title {
  margin: 4px 0 10px;
  font-size: clamp(38px, 6vw, 66px);
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.75);
}

.m-lede { margin: 0; font-size: 16px; color: #dcdad4; max-width: 50ch; }

/* ------------------------------------------------------------------ the body */

/* Contents on the left, sections on the right; the contents stay put while the
   sections scroll. One column under 980px, contents first as a wrapped row of
   links. */
.m-body {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.m-toc {
  position: sticky;
  top: calc(var(--bar-h) + 16px);
  padding: 14px 0 14px 14px;
  border-left: 2px solid var(--accent-line);
}

.m-toc ol {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  counter-reset: toc;
}

.m-toc li { counter-increment: toc; }

.m-toc a {
  display: flex;
  gap: 9px;
  padding: 6px 8px 6px 0;
  font-size: 13.5px;
  color: var(--fg-2);
}

.m-toc a::before {
  content: counter(toc, decimal-leading-zero);
  flex: none;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.75;
  color: var(--fg-3);
}

.m-toc a:hover { color: var(--accent-hi); }
.m-toc a:hover::before { color: var(--accent); }

@media (max-width: 980px) {
  .m-body { grid-template-columns: minmax(0, 1fr); }
  .m-toc { position: static; padding: 0 0 0 12px; }
  .m-toc ol { flex-direction: row; flex-wrap: wrap; gap: 0 18px; }
}

.m-sections { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* A section is a panel. Its anchor has to clear the sticky bar. */
.m-sec { scroll-margin-top: calc(var(--bar-h) + 14px); }

.m-sec .card-head { align-items: center; }
.m-sec h2 { display: flex; align-items: center; gap: 12px; font-size: 15px; }

/* The section number, stencilled in a lit box - the same mark the garage's
   steps and the home page's paragraphs wear. */
.m-n {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 5px;
  border: 1px solid var(--accent-line);
  background: var(--accent-dim);
  color: var(--accent);
  font-family: var(--stencil);
  font-size: 19px;
  letter-spacing: 0;
  line-height: 1;
}

.m-sec-ico { color: var(--fg-3); }

.m-say { margin: 0 0 16px; font-size: 15.5px; color: var(--fg-2); max-width: 74ch; }
.m-say b, .m-facts b, .m-steps b, .m-pins b, .m-legend b, .m-trio-i b { color: var(--fg); font-weight: 600; }

.m-sec h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 11px;
  color: var(--accent);
}

/* Facts: a short rule each, marked with a small amber square. */
.m-facts {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 14.5px;
  color: var(--fg-2);
  max-width: 80ch;
}
.m-facts li { position: relative; padding-left: 17px; }
.m-facts li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.58em;
  width: 5px;
  height: 5px;
  background: var(--accent);
}

/* Steps: a sequence, numbered in the stencil face. */
.m-steps {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  counter-reset: mstep;
  font-size: 14.5px;
  color: var(--fg-2);
  max-width: 80ch;
}
.m-steps li { position: relative; padding-left: 38px; counter-increment: mstep; min-height: 26px; }
.m-steps li::before {
  content: counter(mstep);
  position: absolute;
  left: 0;
  top: -1px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: #0d0f11;
  border: 1px solid var(--line-hard);
  font-family: var(--stencil);
  font-size: 15px;
  color: var(--fg);
}

/* The three scores, big. */
.m-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 8px;
  margin: 0 0 18px;
  max-width: 620px;
}
.m-points div {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  padding: 11px 13px;
  background: #0d0f11;
  border: 1px solid #000;
  border-left: 2px solid var(--accent);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.7);
}
.m-points .ico { grid-row: 1 / 3; color: var(--fg-3); }
.m-points dd {
  margin: 0;
  font-family: var(--stencil);
  font-size: 34px;
  line-height: 1;
  color: var(--accent);
}
.m-points dt {
  font-family: var(--label);
  font-size: 7.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
}

/* ------------------------------------------------------------- the keyboard */

/* Drawn by manual.js: five rows of caps on a dark well, with the bound keys
   lit by what they are for. 30 columns to a row so a key can be one, one and a
   half or two keys wide with whole numbers; widths are classes because the CSP
   allows no style attribute to carry one. Hidden under 700px, where a keyboard
   is a row of specks and the lists below say it better. */
.kb {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0 0 8px;
  padding: 12px;
  background: #0b0c0e;
  border: 1px solid #000;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.05);
  max-width: 860px;
}
.kb:empty { display: none; }

.kb-row { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 5px; }

.kb-k {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  height: 42px;
  padding: 2px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-3);
  background: linear-gradient(180deg, #25292d, #181b1e);
  border: 1px solid #000;
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.kb-w3  { grid-column: span 3; }
.kb-w4  { grid-column: span 4; }
.kb-w5  { grid-column: span 5; }
.kb-w10 { grid-column: span 10; }
.kb-gap { grid-column: span 1; visibility: hidden; }

/* What the key DOES, under its letter. */
.kb-k small {
  max-width: 100%;
  font-family: var(--label);
  font-size: 5.5px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: inherit;
  opacity: 0.85;
}

/* One colour a job. These are not the reserved status colours doing a second
   job: they are a key to a diagram, and the legend under it says what each
   means. */
.kb-k.is-drive,   .kb-lg.is-drive::before   { --k: #ff9a2a; }
.kb-k.is-turret,  .kb-lg.is-turret::before  { --k: #7fc4ff; }
.kb-k.is-weapons, .kb-lg.is-weapons::before { --k: #ff7d6e; }
.kb-k.is-modules, .kb-lg.is-modules::before { --k: #7fe0a3; }
.kb-k.is-game,    .kb-lg.is-game::before    { --k: #d9d6cf; }

.kb-k[class*="is-"] {
  color: var(--k);
  border-color: var(--k);
  background: linear-gradient(180deg, #33383d, #1d2125);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -2px 0 var(--k);
}

.kb-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 18px; }
.kb-lg {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--label);
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.kb-lg::before { content: ""; width: 9px; height: 9px; background: var(--k); }

@media (max-width: 700px) {
  .kb, .kb-legend { display: none; }
}

/* The same bindings in words, four groups, two across where there is room.
   `auto-fit` against a floor, not a media query: how wide this column is
   depends on the contents rail and on the battle log panel down the side of
   the window, and the window's own width says nothing about either. Every
   grid on this page is written that way for the same reason. */
.m-keygrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: 18px 28px;
  margin-bottom: 18px;
}

.m-keys dl { margin: 0; display: flex; flex-direction: column; }
.m-keys dl > div {
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 7px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 14px;
}
.m-keys dt { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.m-keys dt .ico { color: var(--fg-2); }
.m-keys dd { margin: 0; color: var(--fg-2); }

/* ------------------------------------------------------ the pinned screenshot */

.m-shot { margin: 0 0 16px; }
.m-shot-frame {
  position: relative;
  border: 1px solid var(--line-hard);
  background: #000;
  line-height: 0;
}
.m-shot-frame img { width: 100%; height: auto; display: block; }

/* A pin: a lit square with its number, centred on the instrument it names.
   Placed as a percentage of the PICTURE, so it holds at any width. */
.m-pin {
  position: absolute;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid #000;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.55), 0 0 14px rgba(255, 154, 42, 0.6);
  font-family: var(--stencil);
  font-size: 16px;
  line-height: 1;
}
.m-pin-1 { left: 28.5%; top: 4%; }       /* the score */
.m-pin-2 { left: 22%;   top: 45.5%; }    /* the battle log */
.m-pin-3 { left: 50%;   top: 30%; }      /* announcements */
.m-pin-4 { left: 83.2%; top: 14%; }      /* the map */
.m-pin-5 { left: 92.6%; top: 32%; }      /* settings */
.m-pin-6 { left: 53.2%; top: 55%; }      /* the crosshair */
.m-pin-7 { left: 28.6%; top: 79.5%; }    /* armour, shield, charge, speed */
.m-pin-8 { left: 73.6%; top: 83%; }      /* modules */
.m-pin-9 { left: 83.8%; top: 92.5%; }    /* guns */

@media (max-width: 620px) {
  .m-pin { width: 19px; height: 19px; margin: -10px 0 0 -10px; font-size: 12px; }
}

/* The same nine in words. The list's own numbers are the pins' numbers, drawn
   the same way so the eye matches them. */
.m-pins {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: 11px 26px;
  counter-reset: pin;
  font-size: 14px;
  color: var(--fg-2);
}
.m-pins li { position: relative; padding-left: 34px; counter-increment: pin; min-height: 24px; }
.m-pins li::before {
  content: counter(pin);
  position: absolute;
  left: 0;
  top: 0;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--stencil);
  font-size: 14px;
}

/* -------------------------------------------------------------------- the map */

.m-split {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  align-items: center;
}
.m-split > .m-radar { flex: 0 1 260px; }
.m-split > .m-legend { flex: 1 1 300px; min-width: 0; }

.m-radar { width: 100%; height: auto; max-width: 280px; display: block; }

.m-legend { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.m-legend > div { display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start; }
.m-legend dt svg { width: 26px; height: 26px; display: block; }
.m-legend dd { margin: 2px 0 0; font-size: 14.5px; color: var(--fg-2); }

/* ------------------------------------------------------------------- pictures */

.m-fig { margin: 0 0 18px; }
.m-fig img {
  width: 100%;
  height: auto;
  max-height: 440px;
  object-fit: cover;
  display: block;
  border: 1px solid var(--line-hard);
}
.m-fig figcaption {
  margin-top: 7px;
  font-size: 12.5px;
  color: var(--fg-3);
}

.m-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px 30px; }

/* Three things side by side, each under its plate. */
.m-trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.m-trio-i {
  padding: 14px;
  background: #0d0f11;
  border: 1px solid #000;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.7);
}
.m-trio-i h3 { margin: 11px 0 6px; color: var(--fg); }
.m-trio-i p { margin: 0; font-size: 14px; color: var(--fg-2); }

/* ------------------------------------------------ the catalogue, by manual.js */

/* THE TANKS: photograph, name, role, blurb, and the same five bars the garage
   draws - SVG rects, because a proportional width is otherwise a style. */
.m-tanks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 12px; }

.m-tank {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-hard);
}
.m-tank-shot { aspect-ratio: 16 / 9; background: #0c0d0f; border-bottom: 1px solid var(--line-hard); overflow: hidden; }
.m-tank-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-tank-in { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 8px; }
.m-tank-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.m-tank-name { font-family: var(--stencil); font-size: 24px; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; }
.m-tank-role { font-family: var(--label); font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.m-tank-blurb { margin: 0; font-size: 13.5px; color: var(--fg-2); }
.m-tank-built { margin: 0; font-size: 12.5px; color: var(--gold); display: flex; align-items: center; gap: 7px; }

.m-stats { display: flex; flex-direction: column; gap: 5px; }
.m-stat { display: grid; grid-template-columns: 62px 1fr 46px; align-items: center; gap: 8px; }
.m-stat-l { font-family: var(--label); font-size: 7.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); }
.m-stat-t { width: 100%; height: 8px; display: block; border: 1px solid #000; }
.m-stat-bg { fill: #0d0f11; }
.m-stat-f { fill: var(--accent); }
.m-stat-f.is-hp { fill: var(--ok); }
.m-stat-f.is-tn { fill: #b7a6ff; }
.m-stat-f.is-bt { fill: var(--warn); }
.m-stat-f.is-by { fill: #d9d6cf; }
.m-stat-v { font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--fg-2); text-align: right; font-variant-numeric: tabular-nums; }

/* WEAPONS AND MODULES: a plate, a name, what it costs, what it does. */
.m-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 10px; }

.m-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 13px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
}
.m-item-head { display: flex; align-items: center; gap: 11px; }
.m-item-n { flex: 1; min-width: 0; font-size: 15px; font-weight: 620; color: var(--fg); }
.m-item-n small { display: block; margin-top: 1px; font-family: var(--label); font-size: 7.5px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }
.m-item-blurb { margin: 0; font-size: 13.5px; color: var(--fg-2); }
.m-item-facts { display: flex; flex-wrap: wrap; gap: 4px 12px; font-family: var(--mono); font-size: 11px; color: var(--fg-3); }
.m-item-facts b { color: var(--accent); font-weight: 600; }
.m-item-how { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--fg-2); }
.m-item-how.is-auto { color: var(--ok); }

.m-go { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 14px; }