/* BDACheck design system: practical facilities tool.
   White work surface, graphite ink, safety-amber equipment tags, deep teal actions.
   Barlow Semi Condensed for labels and headings (signage feel), Atkinson Hyperlegible for
   reading, JetBrains Mono for dates and numbers. Square corners, 2px borders. Light only. */
:root {
  --bg: #ffffff;
  --panel: #f3f4f1;
  --card: #ffffff;
  --ink: #14212b;
  --ink-2: #4b5862;
  --line: #d6dad3;
  --line-strong: #8d968c;
  --link: #0a5c55;
  --focus: #0a5c55;
  --accent: #0a5c55;
  --accent-on: #ffffff;
  --accent-hover: #084842;
  --accent-ink: #0a5c55;
  --tag: #f0a500;
  --tag-ink: #14212b;
  --ok: #1e6b35;
  --warn: #b06a00;
  --warn-ink: #7d4b00;
  --bad: #b3261e;
  --font-body: "Atkinson Hyperlegible", Verdana, sans-serif;
  --font-head: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --fw-head: 700;
  --ls-head: 0;
  --radius: 2px;
  --radius-sm: 2px;
  --radius-btn: 2px;
  --maxw: 1240px;
  --fs-h1: clamp(2.2rem, 5.5vw, 3.6rem);
}
h1, h2, h3 { text-transform: none; }
.site-header { border-bottom: 2px solid var(--ink); }
.logo { display: inline-flex; align-items: stretch; text-decoration: none; color: var(--ink); font: 700 1.35rem/1 var(--font-head); margin: 0; }
.logo__tag { background: var(--tag); color: var(--tag-ink); padding: .3rem .45rem; border: 2px solid var(--ink); letter-spacing: .04em; }
.logo__word { padding: .3rem .5rem; border: 2px solid var(--ink); border-left: 0; }
.logo--footer { margin-bottom: .75rem; font-size: 1.15rem; }
.btn--sm { min-height: 40px; padding: .45rem .9rem; font-size: .95rem; }
.site-nav .btn { color: var(--accent-on); padding: .45rem .9rem; }
.site-nav a { font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; }
.btn { font-family: var(--font-head); font-size: 1.08rem; letter-spacing: .01em; }
.btn--ghost { border-color: var(--ink); }

.eyebrow, .tag-label { display: inline-block; font: 600 .78rem/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; background: var(--tag); color: var(--tag-ink); padding: .35rem .5rem; border: 1px solid var(--ink); }
.tag-label { margin: .5rem 0 0; }

.page-head { background: var(--panel); border-bottom: 2px solid var(--ink); }
.card { border: 2px solid var(--ink); }
.split { border-top: 2px dashed var(--line); }
.split__head h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.table-wrap { border: 2px solid var(--ink); }
thead th { background: var(--ink); color: #fff; font-family: var(--font-head); font-size: .95rem; letter-spacing: .02em; }
td time, td[data-sort] { font-family: var(--font-mono); font-size: .88rem; }

/* home */
.hero { padding: clamp(2.5rem, 6vw, 4.5rem) 0; border-bottom: 2px solid var(--ink); background: var(--panel); }
.hero__grid { display: grid; gap: 2rem 3.5rem; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 960px) { .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.hero h1 { max-width: 16ch; }
.hero .lede { margin-bottom: 1.5rem; max-width: 50ch; }
.tag-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.tag-steps li + li { margin: 0; }
.tag-card { display: grid; grid-template-columns: auto 1fr; gap: .1rem 1rem; align-items: baseline; background: #fff; border: 2px solid var(--ink); padding: 1rem 1.1rem; position: relative; }
.tag-card::before { content: ""; position: absolute; left: -2px; top: -2px; bottom: -2px; width: 8px; background: var(--tag); border: 2px solid var(--ink); border-right: 0; }
.tag-card__no { grid-row: span 2; font: 600 1.4rem/1 var(--font-mono); color: var(--accent); padding-left: .5rem; }
.tag-card strong { font: 700 1.2rem/1.2 var(--font-head); }
.tag-card span:last-child { color: var(--ink-2); font-size: .95rem; }

/* reminder tool */
.form-card { border-top: 8px solid var(--tag); }
.schedule { background: var(--panel); }
@media (min-width: 960px) { .schedule { position: sticky; top: 1.5rem; align-self: start; } }
.schedule [data-reminder-preview] { font-family: var(--font-mono); font-size: .95rem; }
.late { color: var(--bad); font-weight: 700; }
.yn__opts { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.site-footer { background: var(--panel); border-top: 2px solid var(--ink); }
.site-footer__legal { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); }