/* The help guides — CommissionIQ by Delmatic.

   One stylesheet for all three guides. They used to carry a copy of their own
   styling each, from an unrelated template: Source Sans 3, a blue that appears
   nowhere in the application, and their own greys. They read as somebody
   else's documents. This is the same token system, the same typefaces and the
   same panel treatment as `webapp/styles.css`, so a guide looks like part of
   the product it documents.

   Three rules govern this file.

   1. ONE COPY. Three inline copies would drift the moment one is edited.
      Anything a single guide needs alone stays in that guide's own <style>
      block; anything two of them share belongs here.

   2. PRINT IS NOT SCREEN. Each guide is also rendered to a PDF by headless
      Chrome (scripts/build-help-pdf.ps1). The @media print block at the foot
      re-declares the LIGHT tokens whatever theme the reader chose, because
      print-color-adjust is exact and a dark ground would really be inked —
      a charcoal A4 page, every page.

   3. A DRAWING IS A PICTURE, NOT CHROME. The drawing legend depicts text as
      Lightscape actually draws it, in Lightscape's own blues. Those colours
      are evidence, not decoration, and they are NOT tokenised. They live in
      that guide's own <style> block and must stay as they are.

   Paths here are relative on purpose. The PDF build opens each page as a
   file:// URL, and an absolute path silently loads nothing — which is how a
   verification tool in this project once measured an unstyled page through
   five phases without failing. */

/* ── Typefaces ───────────────────────────────────────────────────────────
   The same files the application uses, held locally rather than fetched. An
   engineer opens a guide on site with no signal; a font asked for over the
   network would fall back and the layout would shift with it. Every stack
   keeps a real fallback for the same reason. */
@font-face {
  font-family:'Archivo'; font-style:normal; font-weight:400 700;
  font-display:swap; src:url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family:'Archivo'; font-style:normal; font-weight:400 700;
  font-display:swap; src:url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:'Public Sans'; font-style:normal; font-weight:400 700;
  font-display:swap; src:url('../fonts/public-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family:'Public Sans'; font-style:normal; font-weight:400 700;
  font-display:swap; src:url('../fonts/public-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:400;
  font-display:swap; src:url('../fonts/plex-mono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokens ──────────────────────────────────────────────────────────────
   Lifted from webapp/styles.css so a guide and the page it documents cannot
   drift apart. A guide follows the theme the reader chose in the application
   — same origin, same saved key — and light is the answer when nothing is
   stored, which is also what the PDF renderer gets. */
:root {
  --page:#f6f6f6; --card:#ffffff; --card2:#f2f2f2;
  --ink:#2f2f2f; --ink2:#555555; --muted:#6d6d6d;
  --line:#ececec; --line2:#d7d6d5;
  --accent:#96d045; --accent-ink:#637525; --focus:#006b56;
  --btn-ink:#263311;
  --fail:#d03b3b; --progress-mid:#b88c31;
  --shadow:0 1px 3px rgba(0,0,0,.06);
  --sheet-shadow:0 2px 18px rgba(0,0,0,.10);
  color-scheme:light;
}
:root[data-theme="dark"] {
  --page:#171717; --card:#202020; --card2:#282828;
  --ink:#ededed; --ink2:#b5b5b5; --muted:#969696;
  --line:#2f2f2f; --line2:#3d3d3d;
  --accent:#96d045; --accent-ink:#a8db60; --focus:#6ee7b7;
  --btn-ink:#1c2408;
  --fail:#e66767; --progress-mid:#e8c274;
  --shadow:0 1px 3px rgba(0,0,0,.4);
  --sheet-shadow:0 2px 18px rgba(0,0,0,.45);
  color-scheme:dark;
}
:root[data-theme="delmatic"] {
  --page:#10140c; --card:#181e12; --card2:#212a19;
  --ink:#eef3e6; --ink2:#bcc7af; --muted:#8e9982;
  --line:#28321d; --line2:#3a4728;
  --accent:#96d045; --accent-ink:#b6e276; --focus:#b6e276;
  --btn-ink:#131d09;
  --fail:#f08282; --progress-mid:#ecc673;
  --shadow:0 1px 3px rgba(0,0,0,.55);
  --sheet-shadow:0 2px 18px rgba(0,0,0,.6);
  color-scheme:dark;
}

/* ── The page ────────────────────────────────────────────────────────── */
body {
  margin:0; background:var(--page); color:var(--ink);
  font-family:'Public Sans', "Segoe UI", system-ui, sans-serif;
  font-size:14px; line-height:1.55;
  display:flex; flex-direction:column; align-items:center;
  padding:26px 16px 60px;
}

/* ── The bar above the sheet ─────────────────────────────────────────────
   Same hierarchy as the application's toolbar: the action that produces
   something is the accent button, the way back is the quiet one. 44px stays,
   because these are read on a phone on site. */
.bar {
  width:900px; max-width:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-bottom:16px; flex-wrap:wrap;
}
.bar a {
  display:inline-flex; align-items:center; gap:7px;
  min-height:44px; padding:8px 15px; box-sizing:border-box;
  border:1px solid transparent; border-radius:8px;
  background:var(--accent); color:var(--btn-ink);
  font:inherit; font-weight:650; font-size:13.5px; text-decoration:none;
}
.bar a:hover { filter:brightness(1.04); }
.bar a:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.bar .back {
  background:var(--card2); color:var(--ink2); border-color:var(--line2);
  font-weight:600;
}
.bar .back:hover { background:var(--card); color:var(--ink); filter:none; }
.bar svg { width:15px; height:15px; flex:0 0 auto; }

/* ── The sheet ───────────────────────────────────────────────────────── */
.sheet {
  width:900px; max-width:100%; box-sizing:border-box;
  background:var(--card); color:var(--ink);
  border:1px solid var(--line);
  padding:48px 56px 54px;
  box-shadow:var(--sheet-shadow);
}

/* ── The mark ────────────────────────────────────────────────────────────
   Delmatic, and only Delmatic. These files get sent to clients and to other
   trades, and CommissionIQ has not been released — the drawing legend in
   particular travels with every drawing pack. This is the same wordmark the
   printed report carries, for the same reason and in the same green, so a
   guide and a report arriving together look like they came from one company.

   When CommissionIQ is released this is the one place to change, and the
   three guides must change together: tests/test_help_guide_styling.py holds
   them to the same lockup. */
.wordmark {
  display:flex; align-items:center; gap:11px;
  font-family:'Archivo', "Segoe UI", system-ui, sans-serif;
}
.wordmark-name {
  color:var(--accent); font:700 27px/1 'Archivo', "Segoe UI", system-ui, sans-serif;
  letter-spacing:-.035em;
}
.rule { width:220px; height:2px; background:var(--line2); margin:18px 0 4px; }

/* ── Reading ─────────────────────────────────────────────────────────── */
h1, h2, h3, .title {
  font-family:'Archivo', "Segoe UI", system-ui, sans-serif;
  color:var(--ink); letter-spacing:-.02em;
}
h1 { font-size:25px; margin:14px 0 6px; }
.eyebrow {
  margin:0; color:var(--muted);
  font-family:'Archivo', "Segoe UI", system-ui, sans-serif;
  font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
}
.lede { color:var(--ink2); font-size:14.5px; margin:0 0 6px; }
h2 {
  font-size:17px; margin:34px 0 10px; padding-top:16px;
  border-top:1px solid var(--line);
}
h3 { font-size:14.5px; margin:20px 0 4px; }
p, li { font-size:14px; color:var(--ink2); }
p { margin:0 0 10px; }
ul { margin:0 0 12px; padding-left:20px; }
li { margin-bottom:5px; }
b, strong { color:var(--ink); font-weight:650; }
a { color:var(--accent-ink); }

/* Codes, paths and device names are set in the mono face for the same reason
   they are in the application: an address should look like an address, and a
   column of them should line up. */
/* Only genuine codes. `td.sw` was tried here and put "Admin", "Manager" and
   "Device testing" into the mono face, which made plain English look like
   identifiers. A name column is a name column. */
code, .path, .mono {
  font-family:'IBM Plex Mono', ui-monospace, "Cascadia Mono", Consolas, monospace;
}
code { font-size:12.5px; color:var(--ink); overflow-wrap:anywhere; }
.path {
  font-size:12.5px; color:var(--ink); background:var(--card2);
  border:1px solid var(--line); border-radius:4px;
  padding:2px 7px; white-space:nowrap;
}

/* ── Tables ──────────────────────────────────────────────────────────── */
table { border-collapse:collapse; width:100%; margin:6px 0 14px; }
th, td {
  text-align:left; vertical-align:top; font-size:13.5px;
  padding:9px 12px 9px 0; border-bottom:1px solid var(--line);
  color:var(--ink2);
}
th {
  color:var(--muted); font-weight:700; font-size:11px;
  letter-spacing:.06em; text-transform:uppercase;
  font-family:'Archivo', "Segoe UI", system-ui, sans-serif;
}

/* On and off keep the application's meanings: green is the switched-on,
   working state; amber is the one that wants attention. */
.on { color:var(--accent-ink); font-weight:650; }
.off { color:var(--progress-mid); font-weight:650; }

/* ── The callout ─────────────────────────────────────────────────────────
   The application marks a row that matters with a stripe down its leading
   edge. A callout is the same idea at document scale. */
.callout {
  background:var(--card2); border:1px solid var(--line);
  border-left:3px solid var(--accent-ink);
  border-radius:0 8px 8px 0;
  padding:12px 16px; margin:14px 0 16px;
}
.callout p:last-child { margin-bottom:0; }
.updated {
  margin-top:34px; padding-top:14px; border-top:1px solid var(--line);
  color:var(--muted); font-size:12px;
}

/* ── Print ───────────────────────────────────────────────────────────────
   The PDF beside each guide is rendered from this page. print-color-adjust
   is exact, so anything left dark here is really inked: a reader in the dark
   theme would print a charcoal page, every page. The light tokens are
   re-declared unconditionally, which is the same thing webapp/styles.css
   does for the report. */
@media print {
  :root, :root[data-theme="dark"], :root[data-theme="delmatic"] {
    --page:#ffffff; --card:#ffffff; --card2:#f4f4f4;
    --ink:#1f1f1f; --ink2:#454545; --muted:#6d6d6d;
    --line:#dcdcdc; --line2:#c4c4c4;
    --accent:#96d045; --accent-ink:#4e5d1d;
    --fail:#c23434; --progress-mid:#a97c22;
    --shadow:none; --sheet-shadow:none;
    color-scheme:light;
  }
  * { -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
  html, body { background:#fff; }
  body { padding:0; display:block; }
  .bar { display:none; }
  .sheet { width:auto; box-shadow:none; border:0; padding:0; }
  h2 { break-after:avoid; }
  .callout, tr { break-inside:avoid; }
  thead { display:table-header-group; }
}