/* ═══════════════════════════════════════════════════════════════════
   theme: meshtastic
   Emcomm, taken from the paperwork rather than the radio. The icon of
   emergency comms is not a glowing panel, it is an ICS-213 message form:
   manila stock, typewriter ink, a red precedence stamp, boxed fields,
   and a signal report written in by hand.

   Deliberately the only warm-light theme on the site, so it reads as a
   different medium from the phosphor and 8-bit pages rather than a
   recolour of them.
   ═══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&family=Courier+Prime:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  --stock:  #E9E1CF;   /* manila */
  --stock2: #DFD5BF;
  --carbon: #D3C8AE;
  --ink:    #241F18;   /* typewriter black, warm */
  --ink-2:  #4C4539;
  /* Both of these are set against the stock once the working underneath has
     darkened it, not against bare stock. --ink-3 was under AA even before
     the working went in (3.60:1); --stamp carries the links, so it has to
     clear 4.5:1 too. The napkin costs at most 13/255 inside the column. */
  --ink-3:  #625B4D;   /* 4.56:1 over the working, 5.17:1 on bare stock */
  --rule:   #B6A98F;
  --rule-2: #CCC0A6;
  --stamp:  #9E3322;   /* precedence red, a shade down for contrast */
  --olive:  #4B5433;   /* OD green, structural */
  --pad: clamp(1.2rem, 5vw, 3rem);
  --max: 56rem;
  --type: "Special Elite", "Courier New", monospace;
  --body: "Courier Prime", "Courier New", monospace;
}

body {
  background: var(--stock);
  color: var(--ink);
  font: 400 clamp(1rem, .3vw + .95rem, 1.08rem)/1.72 var(--body);
  /* faint ruled lines and a fibre tooth, so it reads as stock not screen */
  background-image:
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(120,105,75,.07) 27px 28px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  background-blend-mode: normal, multiply;
}
body::before {                     /* perforated tear edge along the top */
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 7px;
  z-index: 40; pointer-events: none;
  background: radial-gradient(circle at 50% 100%, var(--stock) 0 3px, transparent 3.5px);
  background-size: 12px 7px; background-repeat: repeat-x;
  filter: drop-shadow(0 1px 0 rgba(120,105,75,.35));
}

/* ── the working underneath ──────────────────────────────────────────
   Generated by assets/_napkingen.py; regenerate from there rather than
   editing the SVG. Path loss, link budget, radio horizon, Fresnel
   clearance, a dimensioned quarter-wave ground plane, feeder loss,
   airtime against the 400 ms dwell limit, and the mesh sketched as who
   hears whom. Ballpoint with a correcting pass in red, and two mug rings.

   It sits in the margins either side of the form. The mask stops it
   crossing the text: stops are in rem, not percentages, because the
   column is a fixed 56rem centred, so percentage stops would only line
   up at one window width. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("/assets/napkin.svg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: min(1600px, 132%) auto;
  opacity: .85;
  mask-image: var(--napkin-mask);
  -webkit-mask-image: var(--napkin-mask);
}
:root {
  /* Full strength right across the margins, then a short fade into a low
     trough under the column. The first version ramped the whole way from the
     viewport edge to the column, which meant the working was already down to
     16% by the time it reached the left-hand blocks: legible in principle,
     barely visible in practice. The margins carry no text, so there is no
     reason to hold anything back out there. */
  --napkin-mask: linear-gradient(90deg,
    #000 0,
    #000 calc(50% - 32.5rem),
    rgba(0,0,0,.13) calc(50% - 28.5rem),
    rgba(0,0,0,.13) calc(50% + 28.5rem),
    #000 calc(50% + 32.5rem),
    #000 100%);
}
/* lift the form off the working, or the fixed layer paints over the text */
.band, .pr, .pr__foot { position: relative; z-index: 1; }

a { color: var(--stamp); text-underline-offset: 3px; }
::selection { background: rgba(168,55,37,.22); }
:focus-visible { outline: 2px solid var(--stamp); outline-offset: 2px; }

/* band: the form header strip */
.band {
  background: var(--olive);
  border-bottom: 3px double #2E3520;
  font: 400 .78rem/1.5 var(--body);
}
.band a { color: #DCD6C2; text-decoration: none; }
.band a:hover { color: #fff; }
.band__home {
  font: 400 1rem/1 var(--type) !important;
  letter-spacing: .1em; text-transform: uppercase; color: #F0EAD6 !important;
}

/* head: title block of the form */
.pr__name {
  font: 400 clamp(1.9rem, 5vw, 3rem)/1.14 var(--type);
  color: var(--ink); letter-spacing: -.005em;
}
.pr__sum { color: var(--ink-2); font-size: 1.02em; }
.pr__meta { border-top: 1px solid var(--rule); font: 400 .8rem/1.6 var(--body); }
.pr__fields { color: var(--ink-3); }
.pr__links a { font: 400 .82rem/1 var(--body); }

.pr > section { border-top: 3px double var(--rule); }
/* section headings as boxed form-field labels */
.pr > section > h2 {
  display: inline-block;
  font: 400 .78rem/1 var(--body); font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink); background: var(--carbon);
  padding: .4rem .7rem;
  border: 1px solid var(--rule);
  box-shadow: 2px 2px 0 0 var(--rule-2);
}

/* status: a rubber-stamped precedence marking, off true by a degree */
.st {
  font: 400 .72rem/1 var(--body); font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--stamp); border: 2px solid var(--stamp);
  padding: .32rem .55rem; transform: rotate(-1.6deg);
  opacity: .88;
}
.st::before { display: none; }
.st--run { color: var(--olive); border-color: var(--olive); }
.st--dead { color: var(--ink-3); border-color: var(--ink-3); }

/* figures: written into boxed fields, the way a form gets filled in */
.figs { gap: 1.4rem 1.8rem; }
.figs b { gap: .25rem; align-items: stretch; }
.figs b i {
  display: grid; place-items: center;
  min-width: 1.7rem; padding: .45rem .3rem;
  font: 400 1.3rem/1 var(--type); color: var(--ink);
  background: rgba(255,255,255,.35);
  border: 1px solid var(--rule);
}
.figs li span {
  font: 400 .7rem/1.5 var(--body); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}

/* reference */
.pr__ref p, .pr__ref li { color: var(--ink-2); }
.pr__ref h4 {
  font: 400 .8rem/1.4 var(--body); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
  border-bottom: 1px solid var(--rule); padding-bottom: .3rem;
}
.tbl table { font-size: .94em; }
.tbl th, .tbl td { border: 1px solid var(--rule); }
.tbl th {
  background: var(--carbon); color: var(--ink);
  font: 400 .72rem/1.4 var(--body); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.tbl td { color: var(--ink-2); background: rgba(255,255,255,.22); }

/* files: attachment lines on a form */
.dl li { border-bottom: 1px dashed var(--rule); }
.dl a { text-decoration: none; }
.dl__label { font-weight: 700; color: var(--stamp); }
.dl__size { font: 400 .78rem/1 var(--body); color: var(--ink-3); }
.dl__desc { color: var(--ink-3); font-size: .93em; }

/* log: each entry is a logged message, dated as a date-time group */
.ent { border-bottom: 1px solid var(--rule-2); }
.ent__when time {
  display: inline-block; padding: .35rem .5rem;
  font: 400 .8rem/1.4 var(--body); font-weight: 700;
  letter-spacing: .04em; color: var(--ink);
  background: rgba(255,255,255,.4); border: 1px solid var(--rule);
  box-shadow: 2px 2px 0 0 var(--rule-2);
}
.ent__body h3 { font: 400 clamp(1.16rem, 2vw, 1.42rem)/1.3 var(--type); }
.ent__body h3 a { color: var(--ink); }
.ent__body h3 a:hover { color: var(--stamp); }
.ent__body p, .ent__body li { color: var(--ink-2); }
.ent__body strong { color: var(--ink); font-weight: 700; }
.ent__body h4 {
  font: 400 .78rem/1.4 var(--body); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
}
.ent__body li::marker { color: var(--stamp); }
code {
  font: 400 .95em/1.4 var(--body); font-weight: 700;
  color: var(--ink); background: rgba(255,255,255,.5);
  border: 1px solid var(--rule-2); padding: .04em .3em;
}
pre { background: rgba(255,255,255,.42); border: 1px solid var(--rule); }
pre code { border: 0; background: none; padding: 0; font-size: .9rem; font-weight: 400; }
.pr__empty { color: var(--ink-3); font-style: italic; }

/* index */
.all { border-top: 1px solid var(--rule); }
.all li { border-bottom: 1px solid var(--rule-2); }
.all a { color: var(--ink); }
.all a:hover { background: rgba(255,255,255,.35); }
.all__name { font-weight: 700; }
.all__fields, .all__notes, .all__when { font-size: .86em; color: var(--ink-3); }

.pr__foot {
  border-top: 3px double var(--rule);
  font: 400 .8rem/1.6 var(--body); color: var(--ink-3);
}
.pr__foot a { color: var(--ink-2); }