/* The sixteen service reference pages. Same shape on every one, because a
   reader is doing the same thing on every one: working out how to buy a trade
   they do not know. */

/* ---------- typographic head ----------
   Not a photographic band. The site's photographs were spent on the nine main
   pages, and repeating one sixteen times would be worse than not having one.
   Deliberately shorter than --bandh too: these are reference pages, and a
   reader should not pay a full screen before the first fact. */
.svchead{
  background:var(--navy);
  border-bottom:3px solid var(--copper);
  padding-block:clamp(38px,5vw,60px) clamp(30px,4vw,46px);
  color:#F2F5FA;
}
.svchead .crumb{
  font-family:var(--f-display);font-size:.74rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(242,245,250,.6);margin-bottom:14px;
}
.svchead .crumb a{color:#F2F5FA;text-decoration:none;border-bottom:1px solid rgba(242,245,250,.4)}
.svchead .crumb a:hover{border-color:#F2F5FA}
.svchead .crumb span{margin-inline:8px;opacity:.5}
.svchead h1{
  font-size:clamp(2rem,4.6vw,3.2rem);max-width:20ch;color:#F2F5FA;
}
.svchead .lede{
  margin-top:12px;max-width:62ch;color:rgba(242,245,250,.84);
  font-size:clamp(.98rem,1.28vw,1.12rem);line-height:1.4;
}

.opener{font-size:1.1rem;line-height:1.62}

/* ---------- a sourced reference list ---------- */
.reflist{margin:0;padding:0;list-style:none;display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.reflist li{
  background:var(--surface);padding:15px 17px;
  font-size:.97rem;line-height:1.55;color:var(--ink-2);
}
.reflist b{font-family:var(--f-display);font-weight:700;color:var(--ink)}
.reflist a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule-strong)}
.reflist a:hover{color:var(--copper);border-color:var(--copper)}
/* A coloured edge per kind, so the four lists are distinguishable at a glance. */
.reflist.reg li{border-left:3px solid var(--copper)}
.reflist.std li{border-left:3px solid var(--patina)}
.reflist.cred li{border-left:3px solid var(--steel)}
.reflist.find li{border-left:3px solid var(--rule-strong)}

/* ---------- figures, each with its source on it ---------- */
.figgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.figgrid .fig{background:var(--surface);padding:19px 18px;min-width:0;display:flex;flex-direction:column}
.figgrid .n{
  font-family:var(--f-display);font-weight:800;font-size:clamp(1.15rem,2.1vw,1.55rem);
  line-height:1.15;letter-spacing:-.02em;color:var(--copper);overflow-wrap:break-word;
}
/* A figure that is a clause, not a numeral, steps down so it reads as a lede
   rather than a headline. Set by string length in svc_pages.py. */
.figgrid .n.mid{font-size:clamp(1rem,1.5vw,1.14rem);letter-spacing:0;line-height:1.3}
.figgrid .n.long{font-family:var(--f-display);font-weight:700;font-size:.99rem;letter-spacing:0;line-height:1.42}
.figgrid .l{margin-top:9px;font-size:.92rem;line-height:1.5;color:var(--ink-2)}
.figgrid .src{
  margin-top:auto;padding-top:10px;
  font-family:var(--f-display);font-size:.7rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);text-decoration:none;
  border-bottom:1px solid var(--rule-strong);align-self:flex-start;
}
.figgrid .src:hover{color:var(--copper);border-color:var(--copper)}

/* ---------- traps and questions ---------- */
ul.traps,ul.asks{margin:0;padding-left:1.15em;max-width:76ch}
ul.traps li,ul.asks li{
  margin-bottom:11px;font-size:1rem;line-height:1.58;color:var(--ink-2);
}
ul.traps li::marker{color:var(--copper)}
ul.asks li::marker{color:var(--patina)}

/* the link from a category card into its page */
.svc .more{margin-top:12px;font-size:.9rem;line-height:1.45}
.svc .more a{
  font-family:var(--f-display);font-weight:600;color:var(--copper);
  text-decoration:none;border-bottom:1px solid currentColor;
}
.svc .more a:hover{color:var(--copper-2)}

/* ---------- contents strip -------------------------------------------------
   These pages carry sixteen methods, seven protocols and twenty-five glossary
   terms. Without a map at the top, a reader cannot tell whether the thing they
   came for is on the page at all. It is navigation, not argument, so it takes
   its own ground rather than a turn in the band alternation. */
.tocwrap{padding-block:0;background:var(--surface-2)}
.tocwrap .wrap{padding-block:16px}
.toc{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.toc .lab{
  font-family:var(--f-display);font-size:.7rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);margin-right:4px;
}
.toc a{
  font-family:var(--f-display);font-size:.84rem;font-weight:600;
  color:var(--ink-2);text-decoration:none;
  padding:6px 12px;border:1px solid var(--rule-strong);border-radius:999px;
  background:var(--surface);transition:color .12s,border-color .12s;
}
.toc a:hover{color:var(--copper);border-color:var(--copper)}

/* ---------- methods and protocols ------------------------------------------
   Purpose is always visible; the specification and the failure modes sit in a
   native disclosure. Sixteen methods with 1,500 characters of spec each would
   be four screens of prose nobody reads; sixteen one-line purposes with the
   spec a click away is a reference. No script — <details> works published. */
.meths{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.meth{background:var(--surface);padding:19px 20px;border-left:3px solid var(--copper)}
.meth.prot{border-left-color:var(--patina)}
.meth h3{
  font-family:var(--f-display);font-weight:700;font-size:1.06rem;line-height:1.3;
  color:var(--ink);letter-spacing:-.01em;overflow-wrap:break-word;
}
.meth .u{margin-top:8px;font-size:.97rem;line-height:1.58;color:var(--ink-2);max-width:78ch}
.meth details.more{margin-top:12px}
.meth details.more > summary{
  font-family:var(--f-display);font-size:.78rem;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--copper);cursor:pointer;list-style:none;
  display:inline-flex;align-items:center;gap:7px;
  border-bottom:1px solid var(--rule-strong);padding-bottom:2px;
}
.meth.prot details.more > summary{color:var(--patina)}
.meth details.more > summary::-webkit-details-marker{display:none}
.meth details.more > summary::before{content:"+";font-size:1rem;line-height:1;font-weight:700}
.meth details.more[open] > summary::before{content:"\2212"}
.meth details.more > summary:hover{border-color:currentColor}
.meth .d{
  margin-top:13px;padding:14px 16px;background:var(--paper);
  border:1px solid var(--rule);max-width:82ch;
}
.meth .d p{font-size:.94rem;line-height:1.65;color:var(--ink-2)}
.meth .d p + p{margin-top:13px}
.meth .d .k{
  display:block;font-family:var(--f-display);font-size:.68rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px;
}
.meth .d .src,.meth > .src{
  display:inline-block;margin-top:12px;
  font-family:var(--f-display);font-size:.7rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);text-decoration:none;
  border-bottom:1px solid var(--rule-strong);
}
.meth .d .src:hover,.meth > .src:hover{color:var(--copper);border-color:var(--copper)}

/* ---------- technical specifications ---------------------------------------
   Same job as .figgrid, different material: these figures are sentences, not
   numerals, so they get a list with the figure set as the lede rather than a
   grid of big numbers that would wrap to five lines each. */
ul.specs{margin:0;padding:0;list-style:none;display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
ul.specs li{background:var(--surface);padding:17px 19px;border-left:3px solid var(--steel)}
ul.specs b{
  display:block;font-family:var(--f-display);font-weight:700;
  font-size:1.02rem;line-height:1.4;color:var(--copper);overflow-wrap:break-word;
}
ul.specs span{display:block;margin-top:7px;font-size:.94rem;line-height:1.58;color:var(--ink-2);max-width:82ch}
ul.specs .src{
  display:inline-block;margin-top:10px;
  font-family:var(--f-display);font-size:.7rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);text-decoration:none;
  border-bottom:1px solid var(--rule-strong);
}
ul.specs .src:hover{color:var(--copper);border-color:var(--copper)}

/* ---------- glossary -------------------------------------------------------
   Two columns where there is room. Each entry is a grid cell so a term and its
   definition can never be split across a column break. */
.gloss{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.gloss .g{background:var(--surface);padding:16px 18px;min-width:0}
.gloss dt{
  font-family:var(--f-display);font-weight:700;font-size:.98rem;line-height:1.35;
  color:var(--ink);overflow-wrap:break-word;
}
.gloss dd{margin:6px 0 0;font-size:.92rem;line-height:1.56;color:var(--ink-2)}

/* The inset panel uses --paper, which is a shade below --surface in all three
   grounds — light, charcoal band and dark theme — so it reads as inset on each
   without a special case. */

/* Emphasis the research carried as ALL CAPS, set as weight instead. The scope
   warnings — "surface coal mining only" — are the load-bearing ones, so they
   take the accent rather than plain bold. */
.meth .em,ul.specs .em,.gloss .em,.figgrid .em,.reflist .em{
  font-family:var(--f-display);font-weight:700;color:var(--ink);
}
.meth .d .em{color:var(--copper)}

/* A source address written into the prose. It has to be allowed to break, or
   one 128-character link takes the whole page off the side of a phone. */
.meth .u,.meth .d p,ul.specs span,.gloss dd{overflow-wrap:break-word}
a.bare{
  color:var(--ink-3);text-decoration:none;word-break:break-all;
  border-bottom:1px solid var(--rule-strong);font-size:.92em;
}
a.bare:hover{color:var(--copper);border-color:var(--copper)}

/* ---------- the firms working in a trade -----------------------------------
   Alphabetical, because nobody paid to be here and any other order would imply
   a ranking that does not exist. Three facts per row and a link the reader can
   check: who, where, and what they do in this category. */
.firms{margin:0;padding:0;list-style:none;display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}
.firms li{background:var(--surface);padding:16px 18px;min-width:0;display:flex;flex-direction:column}
.firms .who{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.firms b{font-family:var(--f-display);font-weight:700;font-size:1rem;line-height:1.3;color:var(--ink);overflow-wrap:break-word}
.firms .where{
  font-family:var(--f-display);font-size:.72rem;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap;
}
.firms .does{margin-top:7px;font-size:.92rem;line-height:1.52;color:var(--ink-2)}
.firms .visit{
  margin-top:auto;padding-top:11px;align-self:flex-start;
  font-family:var(--f-display);font-size:.78rem;font-weight:600;
  color:var(--copper);text-decoration:none;border-bottom:1px solid currentColor;
  overflow-wrap:anywhere;
}
.firms .visit:hover{color:var(--copper-2)}