/* EOTAK, solutions / military.  "The field manual."
   A technical document, not a cinematic page: ruled grids, section numbering in
   the margin, mono-set specification blocks, dense tables, footnote apparatus and
   a drawn diagram instead of a photograph carrying the argument.

   Loads on top of core.css ONLY. It shares no rule, no class and no layout with
   style.css or product.css, every primitive it needs is restated here so the
   page cannot drift back toward the cinematic grammar the rest of the site uses.
   US English throughout, in the copy and in these comments. */

/* =========================================================
   1. PAGE GROUND
   No bloom, no glow, no moving field. The page is paper.
   Every color comes from the core token contract, so both
   themes are covered by definition.
   ========================================================= */
body.fm-page{background:var(--bg);color:var(--fg)}

.fm{max-width:var(--wrap);margin:0 auto;padding:0 var(--sp7)}

/* the manual's own type scale, deliberately smaller than the site's display
   sizes. Authority here comes from precision, not from scale. */
.fm h1{font-family:var(--font-display);font-size:clamp(29px,3.3vw,45px);
  line-height:1.08;letter-spacing:-.03em;font-weight:700;color:var(--fg)}
.fm h2{font-family:var(--font-display);font-size:clamp(21px,1.9vw,27px);
  line-height:1.16;letter-spacing:-.022em;font-weight:650;color:var(--fg)}
.fm p{font-size:15.5px;line-height:1.68;color:var(--fg2);font-weight:350}
.fm .measure{max-width:64ch}

/* small copper is ALWAYS --accent-txt: 6.68:1 on the dark ground, 7.01:1 on
   paper. The brand copper --accent is 3.88:1 on dark and appears below only as
   a rule, a fill or a diagram stroke, never as type. */
.lbl{font-family:var(--font-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent-txt);
  font-variant-numeric:tabular-nums}
.lbl.q{color:var(--fg3)}

/* the masthead rule: a 2px copper bar over a hairline. Used at the top of the
   document, under the masthead and above the closer, and nowhere else. */
.fm-rule{height:5px;border-top:2px solid var(--accent);
  border-bottom:1px solid var(--line2)}

/* =========================================================
   2. MASTHEAD, title block and contents
   ========================================================= */
.fm-mast{display:grid;grid-template-columns:minmax(0,1fr) 330px;
  gap:64px;padding:46px 0 40px;align-items:start}
.fm-crumb{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  color:var(--fg3);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.fm-crumb a{color:var(--fg3)}
.fm-crumb a:hover{color:var(--accent-txt)}
.fm-mast .doc{margin-top:26px}
.fm-mast h1{margin-top:14px;max-width:19ch}
.fm-mast .lede{font-size:17px;line-height:1.62;color:var(--fg2);
  font-weight:350;margin-top:22px;max-width:58ch}
.fm-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}

/* the title block, key/value pairs, hairline ruled, the way a document
   identifies itself on its first page. Every field states something the page
   goes on to prove; there are no document numbers here because we do not
   have any. */
.fm-block{border-top:1px solid var(--line2)}
.fm-block .row{display:grid;grid-template-columns:88px minmax(0,1fr);
  gap:16px;padding:11px 0;border-bottom:1px solid var(--hair);align-items:baseline}
.fm-block .k{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fg3)}
.fm-block .v{font-family:var(--font-mono);font-size:12.5px;line-height:1.5;
  color:var(--fg);font-variant-numeric:tabular-nums}

/* contents, with dotted leaders */
.fm-toc{margin-top:32px}
.fm-toc .cap{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--fg3);padding-bottom:9px;
  border-bottom:1px solid var(--line2)}
.fm-toc a{display:flex;align-items:baseline;gap:9px;padding:8px 0;
  border-bottom:1px solid var(--hair);color:var(--fg2);font-size:13px}
.fm-toc a:hover{color:var(--accent-txt)}
.fm-toc .n{font-family:var(--font-mono);font-size:11px;color:var(--accent-txt);
  font-variant-numeric:tabular-nums;flex:none;width:30px}
.fm-toc .lead{flex:1;border-bottom:1px dotted var(--line2);
  transform:translateY(-4px);min-width:12px}

/* =========================================================
   3. THE PLATE, the page's one photograph
   Framed like an illustration in a manual: hairline box, corner ticks,
   a ruled caption underneath. Letterbox, so it never dominates.
   ========================================================= */
.fm-plate{margin:8px 0 4px;position:relative}
.fm-plate .frame{position:relative;border:1px solid var(--line2);
  padding:8px;background:var(--tint)}
.fm-plate .img{position:relative;overflow:hidden;aspect-ratio:21/7}
.fm-plate img{width:100%;height:100%;object-fit:cover;object-position:center 42%;
  filter:var(--img-filter)}
.fm-plate .tick{position:absolute;width:11px;height:11px;border:0 solid var(--accent)}
.fm-plate .tl{top:-1px;left:-1px;border-top-width:2px;border-left-width:2px}
.fm-plate .tr{top:-1px;right:-1px;border-top-width:2px;border-right-width:2px}
.fm-plate .bl{bottom:-1px;left:-1px;border-bottom-width:2px;border-left-width:2px}
.fm-plate .br{bottom:-1px;right:-1px;border-bottom-width:2px;border-right-width:2px}
.fm-cap{display:flex;gap:14px;align-items:baseline;margin-top:10px;
  padding-top:9px;border-top:1px solid var(--hair)}
.fm-cap .n{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-txt);flex:none}
.fm-cap .t{font-size:13px;line-height:1.6;color:var(--fg3);max-width:78ch}

/* =========================================================
   4. THE DOCUMENT GRID
   Section number and running label sit in the left margin; the content
   column is separated from it by a vertical hairline. A rule closes the
   top of every section. That is the whole layout.
   ========================================================= */
.fm-sec{display:grid;grid-template-columns:168px minmax(0,1fr);
  border-top:1px solid var(--line2);position:relative}
.fm-mark{position:sticky;top:96px;align-self:start;
  padding:24px 26px 40px 0}
.fm-mark::before{content:"";position:absolute;top:-1px;left:0;
  width:38px;height:2px;background:var(--accent)}
.fm-mark .no{font-family:var(--font-mono);font-size:15px;font-weight:500;
  color:var(--accent-txt);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.fm-mark .rl{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.19em;
  text-transform:uppercase;color:var(--fg3);margin-top:7px;line-height:1.5}
.fm-body{border-left:1px solid var(--hair);padding:24px 0 54px 34px;min-width:0}
.fm-body > .intro{margin-top:13px}

/* numbered subsections, ruled rows, never cards */
.fm-items{margin-top:26px;border-top:1px solid var(--hair)}
.fm-item{display:grid;grid-template-columns:56px minmax(0,1fr);gap:0;
  padding:18px 0;border-bottom:1px solid var(--hair)}
.fm-item .no{font-family:var(--font-mono);font-size:11.5px;color:var(--accent-txt);
  font-variant-numeric:tabular-nums;padding-top:2px}
.fm-item h3{font-size:15.5px;font-weight:650;letter-spacing:-.012em;color:var(--fg)}
.fm-item p{margin-top:7px;max-width:70ch}

/* key / description rows, mono key in a fixed column */
.fm-defs{margin-top:26px;border-top:1px solid var(--hair)}
.fm-def{display:grid;grid-template-columns:190px minmax(0,1fr);gap:26px;
  padding:17px 0;border-bottom:1px solid var(--hair);align-items:baseline}
.fm-def dt{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg);font-variant-numeric:tabular-nums}
.fm-def dd{margin:0;font-size:15px;line-height:1.66;color:var(--fg2);
  font-weight:350;max-width:68ch}

/* a bordered aside for a statement that has to be read exactly as written */
.fm-note{margin-top:28px;border-left:2px solid var(--accent);
  background:var(--tint);padding:18px 22px}
.fm-note .h{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-txt)}
.fm-note p{margin-top:9px;font-size:14.5px;max-width:76ch}

/* =========================================================
   5. TABLES
   Dense, tabular-nums, hairline ruled. Each one scrolls inside its own
   container so a narrow viewport never widens the document.
   ========================================================= */
.fm-scroll{margin-top:26px;overflow-x:auto;border:1px solid var(--hair);
  background:var(--bg2)}
.fm-tbl{border-collapse:collapse;width:100%;min-width:720px;
  font-variant-numeric:tabular-nums}
.fm-tbl th,.fm-tbl td{text-align:left;vertical-align:top;
  padding:12px 16px;border-bottom:1px solid var(--hair)}
.fm-tbl thead th{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-txt);font-weight:500;
  border-bottom:1px solid var(--line2);white-space:nowrap;
  position:sticky;top:0;background:var(--bg2)}
.fm-tbl tbody th{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--fg3);font-weight:500;white-space:nowrap}
.fm-tbl td{font-size:13.5px;line-height:1.56;color:var(--fg2)}
.fm-tbl td.f{color:var(--fg);font-family:var(--font-mono);font-size:13px;white-space:nowrap}
.fm-tbl tbody tr:last-child th,.fm-tbl tbody tr:last-child td{border-bottom:0}
.fm-tbl tr:hover td,.fm-tbl tr:hover th{background:var(--surf)}
.fm-hint{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg3);margin-top:10px}

/* =========================================================
   6. FIGURE 1, the reporting path, drawn
   Inline SVG so it themes from the token contract with no second asset.
   Every fill and stroke below is a token; nothing is hard-coded.
   The chain is exactly three nodes: weapon sensor, ATAK, EOTAK Server.
   MARS hangs off the server on a dashed line because it reads the record
   afterwards; it is not a hop. EOTAK Stack is deliberately absent, it
   pairs with a module and shows its readout, but it never relays, so it
   must never appear on a reporting-path drawing.
   ========================================================= */
.fm-figure{margin-top:28px;border:1px solid var(--line2);background:var(--bg2);
  padding:18px 20px 14px}
.fm-figure svg{width:100%;height:auto;display:block}
.fm-figure .fm-cap{margin-top:14px}

.dg-frame{fill:none;stroke:var(--hair)}
.dg-box{fill:var(--bg);stroke:var(--line2);stroke-width:1}
.dg-box-lead{fill:var(--bg);stroke:var(--accent);stroke-width:1.4}
.dg-wire{stroke:var(--accent);stroke-width:1.4;fill:none}
.dg-wire-d{stroke:var(--line2);stroke-width:1.2;fill:none;stroke-dasharray:5 4}
.dg-head{fill:var(--accent)}
.dg-head-d{fill:var(--line2)}
.dg-t{font-family:var(--font-mono);font-size:13px;font-weight:600;
  letter-spacing:.06em;fill:var(--fg)}
.dg-s{font-family:var(--font-mono);font-size:10.5px;fill:var(--fg3)}
.dg-loc{font-family:var(--font-mono);font-size:9px;letter-spacing:.17em;
  fill:var(--accent-txt)}
.dg-link{font-family:var(--font-mono);font-size:9px;letter-spacing:.17em;
  fill:var(--fg3)}
.dg-hd{font-family:var(--font-mono);font-size:9px;letter-spacing:.22em;
  fill:var(--accent-txt)}

/* =========================================================
   7. NOTES, the footnote apparatus
   ========================================================= */
.fnref{font-family:var(--font-mono);font-size:10px;color:var(--accent-txt);
  vertical-align:super;line-height:0;padding-left:1px;
  font-variant-numeric:tabular-nums}
.fm-notes{margin-top:20px;border-top:1px solid var(--hair);
  list-style:none;padding:0;margin-bottom:0}
.fm-notes li{display:grid;grid-template-columns:44px minmax(0,1fr);
  padding:14px 0;border-bottom:1px solid var(--hair)}
.fm-notes .n{font-family:var(--font-mono);font-size:11px;color:var(--accent-txt);
  font-variant-numeric:tabular-nums}
.fm-notes p{font-size:14px;line-height:1.65;max-width:78ch}

/* =========================================================
   8. CLOSER
   Left-aligned, ruled, no plate and no glow. The document simply ends.
   ========================================================= */
.fm-close{padding:44px 0 76px;border-top:1px solid var(--line2)}
.fm-close .fm-rule{margin-bottom:34px}
.fm-close h2{max-width:16ch}
.fm-close p{margin-top:16px;max-width:56ch}
.fm-close .sig{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--fg3);margin-top:34px;
  padding-top:16px;border-top:1px solid var(--hair)}

/* =========================================================
   9. RESPONSIVE
   The margin rail folds above the content; the grid becomes one column.
   Nothing here is allowed to widen the document, the tables scroll
   inside .fm-scroll instead.
   ========================================================= */
@media (max-width:1040px){
  .fm-mast{grid-template-columns:minmax(0,1fr);gap:38px;padding-top:34px}
  .fm-mast h1{max-width:none}
}
@media (max-width:900px){
  .fm{padding:0 var(--sp5)}
  .fm-sec{grid-template-columns:minmax(0,1fr)}
  .fm-mark{position:static;padding:20px 0 0;display:flex;align-items:baseline;gap:14px}
  .fm-mark .rl{margin-top:0}
  .fm-body{border-left:0;padding:14px 0 40px}
  .fm-def{grid-template-columns:minmax(0,1fr);gap:8px}
  .fm-plate .img{aspect-ratio:16/8}
}
@media (max-width:560px){
  .fm-item{grid-template-columns:minmax(0,1fr);gap:6px}
  .fm-block .row{grid-template-columns:minmax(0,1fr);gap:4px}
  .fm-notes li{grid-template-columns:minmax(0,1fr);gap:4px}
  .fm-plate .img{aspect-ratio:3/2}
}

/* Reduced motion: this page has no animation of its own to disable, the only
   movement is the shared .rv reveal, which core.css already switches off. The
   sticky margin number is position, not motion. Nothing else moves. */