/* PestRoute — the field notebook and the treatment tag.
   Paper, ink and one ochre. Self-hosted type: Spectral for reading, Courier Prime for anything
   that would be typed onto a form (labels, numbers, the log). See docs/identity.md. */

@font-face {
  font-family: "Spectral";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/spectral-400.woff2") format("woff2");
}
@font-face {
  font-family: "Spectral";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/spectral-600.woff2") format("woff2");
}
@font-face {
  font-family: "Courier Prime";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/courier-prime-400.woff2") format("woff2");
}
@font-face {
  font-family: "Courier Prime";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/courier-prime-700.woff2") format("woff2");
}

:root {
  --paper: #f1e9d7;        /* manila ledger paper */
  --sheet: #fffdf6;        /* a fresh form off the pad */
  --ink: #241f12;          /* 13.7:1 on paper */
  --pencil: #5b5540;       /* 6.1:1 on paper — secondary text, never below this */
  --rule: #d9cba6;         /* the ruled line */
  --rule-soft: #e7dcc0;
  --ochre: #7d5a12;        /* the accent: 5.25:1 on paper, white on it 6.28:1 */
  --ochre-deep: #5b400a;   /* hover / focus */
  --ochre-wash: #f6ecd3;
  --tag: #e8cd8e;          /* tag card stock */
  --tag-edge: #c2a05a;
  --tag-ink: #3a2f14;      /* 8.4:1 on the card */
  --margin-rule: #c0603f;  /* the printer's red margin line */
  --ok-bg: #e3edd2; --ok-ink: #2f5417;
  --bad-bg: #f7ded1; --bad-ink: #8a2c11;
  --warn-bg: #f7e8c4; --warn-ink: #6f4304;
  --info-bg: #dfe6e8; --info-ink: #274450;
  --mut-bg: #ece3cd;
  --radius: 6px;
  --shadow: 0 1px 2px rgba(60, 46, 18, 0.08);
  --serif: "Spectral", "Iowan Old Style", Palatino, "Book Antiqua", Georgia, serif;
  --mono: "Courier Prime", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --label: 0.74rem;        /* pre-printed form label size */
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

img { max-width: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font: 400 1.06rem/1.62 var(--serif);
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

h1 { font-size: clamp(2rem, 4.1vw, 2.75rem); line-height: 1.1; margin: 0 0 0.6rem; letter-spacing: -0.012em; font-weight: 600; }
h2 { font-size: 1.5rem; line-height: 1.2; margin: 0 0 0.7rem; font-weight: 600; }
h3 { font-size: 1.14rem; margin: 1.1rem 0 0.4rem; font-weight: 600; }
p { margin: 0 0 0.85rem; }
a { color: var(--ochre); }
:focus-visible { outline: 3px solid var(--ochre-deep); outline-offset: 2px; border-radius: 3px; }
code { font-family: var(--mono); font-size: 0.9em; background: var(--mut-bg); padding: 0.05em 0.35em; border-radius: 3px; }

main { max-width: 1120px; margin: 0 auto; padding: 0 20px 64px; }

/* A form label: small, uppercase, typed. Used for kicks, legends and table heads. */
.kicker, .form legend, table.table th, .label {
  font-family: var(--mono); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.13em; font-size: var(--label); color: var(--pencil);
}

/* ---------- top bar ---------- */
.top {
  display: flex; align-items: center; gap: 18px;
  padding: 14px 20px 12px; max-width: 1120px; margin: 0 auto;
  border-bottom: 1px solid var(--rule);
}
.brand { font-family: var(--mono); font-weight: 700; font-size: 1.06rem; text-decoration: none; color: var(--ink); letter-spacing: 0.01em; }
.brand span { color: var(--ochre); }
.top nav { display: flex; gap: 16px; margin-left: auto; flex-wrap: wrap; }
.top nav a { text-decoration: none; color: var(--pencil); font-size: 1rem; }
.top nav a.on, .top nav a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ochre); text-underline-offset: 3px; }

/* ---------- buttons & badges ---------- */
.btn {
  display: inline-block; background: var(--ochre); color: #fff; text-decoration: none;
  border: 0; border-radius: var(--radius); padding: 10px 16px 11px;
  font-family: var(--mono); font-weight: 700; font-size: 0.86rem; letter-spacing: 0.01em;
  cursor: pointer;
}
.btn:hover { background: var(--ochre-deep); }
.btn.ghost { background: transparent; color: var(--ochre); border: 1px solid var(--ochre); }
.btn.ghost:hover { background: var(--ochre-wash); }
.btn.small { padding: 6px 11px 7px; font-size: 0.78rem; }
.btn.ghost.small { border-color: var(--rule); color: var(--ink); }
.btn.ghost.small:hover { background: var(--sheet); }
.btn:disabled { opacity: 0.55; cursor: default; }
a.btn:focus-visible { outline-color: var(--ink); outline-offset: 3px; }

.badge {
  display: inline-block; font-family: var(--mono); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.04em; border-radius: 3px; padding: 1px 6px 2px;
  background: var(--mut-bg); color: var(--pencil); vertical-align: middle;
  border: 1px solid rgba(36, 31, 18, 0.12);
}
.badge::before { font-weight: 400; margin-right: 4px; }
.badge.ok { background: var(--ok-bg); color: var(--ok-ink); }
.badge.ok::before { content: "✓"; }
.badge.bad { background: var(--bad-bg); color: var(--bad-ink); }
.badge.bad::before { content: "✕"; }
.badge.warn { background: var(--warn-bg); color: var(--warn-ink); }
.badge.warn::before { content: "•"; }
.badge.info { background: var(--info-bg); color: var(--info-ink); }
.badge.info::before { content: "›"; }
.badge.mut::before { content: "·"; }
.badge.test { background: var(--ochre-wash); color: var(--ochre-deep); border-color: var(--rule); }
.badge.test::before { content: "✎"; margin-right: 5px; }

/* ---------- the treatment tag (the signature detail) ---------- */
.tag {
  position: relative; background: var(--tag); color: var(--tag-ink);
  --hole: var(--paper);
  border: 1px solid var(--tag-edge); border-radius: 2px;
  padding: 13px 16px 12px 34px; max-width: 340px;
  font-family: var(--mono); font-size: 0.82rem; line-height: 1.45;
  clip-path: polygon(0 0, 86% 0, 100% 14%, 100% 100%, 0 100%);
  box-shadow: 0 2px 0 rgba(120, 95, 40, 0.18), 0 6px 14px rgba(60, 46, 18, 0.14);
  transform: rotate(-1.4deg);
}
.tag::before {
  content: ""; position: absolute; left: 11px; top: 13px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--hole); box-shadow: inset 0 1px 2px rgba(58, 47, 20, 0.5), 0 0 0 1px var(--tag-edge);
}
.tag-head { font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.66rem; margin: 0 0 6px; }
.tag-no { font-weight: 700; font-size: 1.34rem; letter-spacing: 0.02em; margin: 0 0 2px; font-variant-numeric: tabular-nums; }
.tag-no small { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; display: block; font-weight: 700; }
.tag dl { margin: 9px 0 0; border-top: 1px dashed rgba(58, 47, 20, 0.35); padding-top: 7px; }
.tag dl > div { display: flex; gap: 8px; justify-content: space-between; padding: 1px 0; }
.tag dt { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.64rem; color: #5c4813; padding-top: 2px; }
.tag dd { margin: 0; text-align: right; max-width: 62%; }
.tag-foot { margin: 9px 0 0; font-size: 0.68rem; color: #5c4813; }
.sheet .tag, .notebook .tag--on-sheet { --hole: var(--sheet); }
.tag--flat { transform: none; }
@media print { .tag { transform: none; box-shadow: none; } }

/* ---------- hero & sections ---------- */
.hero { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 34px; align-items: start; padding: 32px 0 12px; }
.kicker { margin-bottom: 12px; color: var(--ochre); }
.lede { font-size: 1.14rem; color: #2e2a1a; max-width: 46ch; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 20px 0 12px; }
.fine { font-size: 0.85rem; color: var(--pencil); }
.small { font-size: 0.9rem; }
.mut { color: var(--pencil); }
.strong { font-weight: 600; }
.num { font-variant-numeric: tabular-nums; }
.ts, td.ts { font-family: var(--mono); font-size: 0.82rem; }
.no { font-family: var(--mono); color: var(--ochre); font-weight: 700; letter-spacing: 0.08em; }

/* A page torn out of the notebook: ruled paper, a red margin line, things clipped to it. */
.notebook {
  position: relative; background: var(--sheet); border: 1px solid var(--rule);
  border-radius: 3px; padding: 20px 20px 22px 40px;
  background-image: repeating-linear-gradient(to bottom, transparent 0 25px, var(--rule-soft) 25px 26px);
  box-shadow: 0 1px 0 #fff inset, 0 6px 18px rgba(60, 46, 18, 0.1);
}
.notebook::before { content: ""; position: absolute; left: 26px; top: 0; bottom: 0; width: 1px; background: var(--margin-rule); opacity: 0.55; }
.notebook-head { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--pencil); margin: 0 0 14px; }
.notebook .tag { margin: 0 auto 20px; }
.notebook figure { margin: 0; }
.notebook img { width: 100%; height: auto; display: block; border: 5px solid #fff; box-shadow: 0 3px 10px rgba(60, 46, 18, 0.18); }

.hero-shot img, .shot-grid img { width: 100%; height: auto; display: block; border: 1px solid var(--rule); box-shadow: var(--shadow); }
figure { margin: 0; }
figcaption { font-size: 0.86rem; color: var(--pencil); margin-top: 8px; }

.band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 30px 0 6px; }
.stat { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); padding: 14px 16px; }
.stat .n { font-family: var(--mono); font-size: 1.32rem; font-weight: 700; letter-spacing: -0.01em; }
.stat .l { font-size: 0.98rem; font-weight: 600; }
.stat .s { font-size: 0.85rem; color: var(--pencil); }

.section { padding: 22px 0; }
.section.narrow { max-width: 760px; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; padding: 26px 0 6px; }
/* every section head sits on its own ruled line, numbered like a ledger entry */
h2.ruled { border-bottom: 1px solid var(--rule); padding-bottom: 8px; margin-bottom: 14px; }
h2.ruled .no { margin-right: 10px; }
.steps { padding-left: 0; margin: 0; list-style: none; counter-reset: step; }
.steps li { margin-bottom: 12px; padding-left: 34px; position: relative; }
.steps li::before {
  counter-increment: step; content: counter(step) ".";
  position: absolute; left: 0; top: 0; font-family: var(--mono); font-weight: 700; color: var(--ochre);
}
.checks { list-style: none; padding: 0; margin: 0; }
.checks li { padding-left: 24px; position: relative; margin-bottom: 9px; }
.checks li::before { content: "✓"; position: absolute; left: 0; color: var(--ochre); font-family: var(--mono); font-weight: 700; }

.shots { padding: 20px 0 30px; }
.shot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.pricing { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); padding: 30px 24px; margin: 20px 0; text-align: center; }
.pricing h2 { font-size: 1.7rem; }
.pricing p { max-width: 62ch; margin: 0 auto 16px; }
.pricing .fine { text-align: left; max-width: 62ch; border-top: 1px dashed var(--rule); padding-top: 12px; }

/* ---------- panels, tables, cards ---------- */
.grid2 { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; align-items: start; }
.panel { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px; margin-bottom: 18px; overflow-x: auto; }
.panel.side { max-height: none; }
.row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.row label { font-size: 0.9rem; color: var(--pencil); display: flex; flex-direction: column; gap: 4px; }
.grow { flex: 1; }

.stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 14px; }

table.table { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
table.table th { text-align: left; border-bottom: 1px solid var(--rule); padding: 7px 8px; white-space: nowrap; color: var(--pencil); }
table.table td { border-bottom: 1px solid var(--rule-soft); padding: 9px 8px; vertical-align: top; overflow-wrap: break-word; }
table.table tr:last-child td { border-bottom: 0; }
table.compact td, table.compact th { padding: 5px 6px; }
td.seq { font-family: var(--mono); font-weight: 700; color: var(--ochre); font-variant-numeric: tabular-nums; }
td.ts, .ts { font-variant-numeric: tabular-nums; color: var(--pencil); white-space: nowrap; }
.access { font-family: var(--mono); font-size: 0.8rem; color: var(--info-ink); background: var(--info-bg); display: inline-block; border-radius: 3px; padding: 1px 7px 2px; margin-top: 3px; }
.refused { color: var(--bad-ink); font-weight: 600; }
.record-no { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.callout { border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px; border: 1px solid var(--rule); background: var(--paper); }
.callout.ok { background: var(--ok-bg); border-color: #c3d3ab; }
.callout.bad { background: var(--bad-bg); border-color: #e0b6a3; }
.callout h3 { margin-top: 0; }
.timeline { list-style: none; padding: 0; margin: 8px 0 0; }
.timeline li { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; flex-wrap: wrap; border-bottom: 1px dashed var(--rule); }
.timeline li:last-child { border-bottom: 0; }

.daybar { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 0 4px; }
.tab {
  text-decoration: none; color: var(--pencil); background: var(--sheet); border: 1px solid var(--rule);
  border-radius: 3px; padding: 5px 12px 6px; font-family: var(--mono); font-size: 0.84rem;
}
.tab.on { color: #fff; background: var(--ochre); border-color: var(--ochre); font-weight: 700; }

/* ---------- field app ---------- */
.field .panel { margin-bottom: 0; }
.stoplist { list-style: none; padding: 0; margin: 0; }
.stop { display: grid; grid-template-columns: 34px 1fr auto auto; gap: 10px; align-items: start; padding: 10px 8px; border-radius: 4px; cursor: pointer; border: 1px solid transparent; }
.stop:hover { background: var(--ochre-wash); }
.stop.on { border-color: var(--ochre); background: var(--ochre-wash); }
.stop .seq { font-family: var(--mono); font-weight: 700; color: var(--ochre); }
.stoplist li + li { border-top: 1px solid var(--rule-soft); }

.form label { display: block; font-size: 0.9rem; color: var(--pencil); margin-bottom: 10px; }
.form input, .form select, .form textarea {
  width: 100%; font: inherit; font-size: 1rem; padding: 8px 10px; border: 1px solid var(--rule);
  border-radius: 4px; background: var(--sheet); color: var(--ink);
}
.form input[type="file"] { font-family: var(--mono); font-size: 0.84rem; padding: 6px; }
.form fieldset { border: 1px solid var(--rule); border-radius: 4px; padding: 10px 12px; margin: 0 0 12px; }
.form legend { padding: 0 5px; }
.checks-inline { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--rule); border-radius: 3px; padding: 3px 9px 4px; font-size: 0.9rem; color: var(--ink); margin: 0; background: var(--sheet); }
.chip input { width: auto; margin: 0; }
.sigpad { width: 100%; max-width: 520px; height: auto; border: 1px dashed var(--tag-edge); border-radius: 4px; background: var(--sheet); touch-action: none; }
.switch { display: inline-flex; gap: 6px; align-items: center; font-size: 0.94rem; color: var(--pencil); }
.switch input { width: auto; }

.queuelist { list-style: none; padding: 0; margin: 0; }
.queue-item { padding: 9px 0; border-bottom: 1px dashed var(--rule); display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.queue-item:last-child { border-bottom: 0; }

/* ---------- report sheet ---------- */
.sheet { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); }
.sheet-head { display: flex; justify-content: space-between; gap: 22px; align-items: flex-start; border-bottom: 2px solid var(--ochre); padding-bottom: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.sheet-head .tag { margin-top: 2px; }
.sheet-firm { text-align: right; }
.sheet-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 22px; margin-bottom: 12px; }
.sheet-grid .l { font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--pencil); }
.sheet-media { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; margin-top: 16px; }
.sheet-media img { width: 100%; height: auto; border: 1px solid var(--rule); background: var(--sheet); }
.sheet-foot { border-top: 1px dashed var(--rule); margin-top: 20px; padding-top: 12px; }
.download { background: var(--sheet); }
.download .sheet { border: 0; box-shadow: none; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--rule); background: var(--sheet); margin-top: 30px; padding: 22px 20px 34px; }
.foot { max-width: none; }
.foot > * { max-width: 1120px; margin-left: auto; margin-right: auto; }
.foot .links { display: flex; gap: 16px; flex-wrap: wrap; margin: 10px auto; }
.foot a { color: var(--ochre); }
.foot .fine { max-width: 1120px; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .stats { grid-template-columns: repeat(3, 1fr); }
  .shot-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding-top: 20px; }
  .cols, .grid2 { grid-template-columns: 1fr; }
  .band { grid-template-columns: repeat(2, 1fr); }
  .sheet-media { grid-template-columns: 1fr; }
  .sheet-grid { grid-template-columns: 1fr; }
  h1 { font-size: 1.9rem; }
  .notebook { padding-left: 34px; }
  .notebook::before { left: 22px; }
  body { font-size: 1.02rem; }
}
@media (max-width: 560px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .shot-grid { grid-template-columns: 1fr; }
  .top { flex-wrap: wrap; gap: 10px; }
  .top nav { order: 3; width: 100%; }
  .stop { grid-template-columns: 28px 1fr; }
  main { padding: 0 14px 48px; }
  .tag { transform: none; }
}