/* Know Your Strata — shared design system.
   Loaded before each page's own <style>, so a page can still override.

   Palette note: the ground moved off warm cream to a cool pale sage. Spruce is
   kept as the trust anchor since five tools already carry it, but it now sits
   in a cool system rather than a warm one. Citations and verified dates are set
   in mono throughout — that is the signature, not decoration. */

:root{
  /* ground + ink */
  --paper:#E9ECE8;
  --surface:#FDFDFC;
  --ink:#131B18;
  --ink-soft:#41504A;
  --rule:#CBD3CC;

  /* trust anchor */
  --spruce:#1E4A43;
  --spruce-deep:#0E2A26;
  --sage:#8CA79C;

  /* signals */
  --seal:#7A2E2E;      /* registry-seal oxblood: verified stamp accent */
  --amber:#8A6100;     /* caution, kept functional */
  --card:#FDFDFC;
  --line:#CBD3CC;

  --display:'Newsreader',Georgia,serif;
  --body:'Archivo',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{font-size:17px}
body{
  font-family:var(--body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* ── Site navigation ───────────────────────────────────────────────── */
.kys-nav{
  background:var(--spruce-deep);
  color:#E6EDE9;
  border-bottom:3px solid var(--spruce);
}
.kys-nav-inner{
  max-width:820px;margin:0 auto;padding:0 20px;
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  min-height:56px;
}
.kys-mark{
  font-family:var(--display);font-weight:600;font-size:1.06rem;
  color:#FFF;text-decoration:none;letter-spacing:.01em;
  display:inline-flex;align-items:baseline;gap:7px;
}
.kys-mark .kys-mark-rule{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sage);font-weight:400;
}
.kys-jur{display:flex;align-items:center;gap:4px;margin-left:auto;flex-wrap:wrap}
.kys-jur a{
  font-family:var(--mono);font-size:.76rem;letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none;
  color:#C6D4CC;padding:5px 10px;border-radius:5px;
  border:1px solid transparent;
}
.kys-jur a:hover{background:rgba(255,255,255,.09);color:#fff}
.kys-jur a[aria-current="true"]{
  color:#fff;border-color:var(--sage);background:rgba(255,255,255,.07);
}
.kys-jur .kys-soon{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;
  color:#8CA79C;padding:5px 2px 5px 8px;white-space:nowrap;
}
.kys-nav a:focus-visible,.kys-nav a:focus{
  outline:2px solid var(--sage);outline-offset:2px;
}

/* ── Back-to-hub link on tool pages ────────────────────────────────── */
.kys-back{
  max-width:680px;margin:0 auto;padding:16px 20px 0;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;
}
.kys-back a{color:var(--spruce);text-decoration:none}
.kys-back a:hover{text-decoration:underline}

/* ── The registry mark ─────────────────────────────────────────────
   One motif, used consistently: oxblood marks anything that is an
   official reference — a citation or a verified stamp. Spruce stays the
   primary structural colour; oxblood never carries structure, only the
   mark. Keeping it to these three classes is what stops it reading as
   scattered red. */

.cite-rail{
  font-family:var(--mono);font-size:.78rem;letter-spacing:.02em;
  color:var(--ink-soft);border-left:2px solid var(--seal);
  padding-left:10px;
}

/* Section marker: the § glyph, always oxblood, always mono. */
.sec-mark{
  font-family:var(--mono);color:var(--seal);font-weight:500;
  margin-right:5px;
}

/* A citation shown inline in a list or table cell. */
.cite-tag{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.03em;
  color:var(--seal);white-space:nowrap;
}

@media screen and (max-width:560px){
  /* A compound citation such as "O. Reg. 48/01 ss. 13.3(11), 13.4-13.7" is
     wider than a phone. Both .flag .cite-tag and .cite-line .cite-tag set
     display:block, so nowrap does not widen the box, it makes the TEXT spill
     past it, and the citation clips off the right edge. The citation is the
     point of this site, so on a narrow screen it wraps instead. */
  .cite-tag{white-space:normal}
}

/* ── Verified stamp ────────────────────────────────────────────────── */
.stamp-verified{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--seal);
  border:1px solid var(--seal);border-radius:3px;
  padding:5px 11px;background:rgba(122,46,46,.045);
}
.stamp-verified .tick{font-size:.85rem;line-height:1}

/* Low-pressure contextual link to the paid BC Starter Pack, shown after a
   tool's result/explanation and before the email capture box. Deliberately
   understated -- a text nudge, not a competing CTA -- reusing the same
   left-border/tint recipe as .buy-msg rather than inventing new styling. */
.pack-nudge{
  margin-top:28px;padding:14px 18px;border-left:3px solid var(--sage);
  background:#F1F4F2;color:#3D4C47;font-size:.9rem;border-radius:0 8px 8px 0;
}
.pack-nudge a{color:var(--spruce);font-weight:700}

/* ── Shared page furniture ─────────────────────────────────────────── */
.kys-foot{
  border-top:1px solid var(--rule);
  margin-top:56px;padding:22px 20px 60px;
  font-size:.82rem;color:var(--ink-soft);
}
.kys-foot-inner{max-width:820px;margin:0 auto}
.kys-foot a{color:var(--spruce)}
.kys-foot .kys-foot-note{font-family:var(--mono);font-size:.72rem;color:#5A6A64;margin-top:10px}

@media (prefers-reduced-motion:no-preference){
  .rise{animation:kysRise .35s ease}
  @keyframes kysRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}
@media print{
  .kys-nav,.kys-back,.no-print,.kys-sitelinks{display:none !important}
  body{background:#fff}
}

/* ── Prose pages ───────────────────────────────────────────────────
   About, Contact, Privacy and Terms. These are read, not used, so they
   get a narrower measure and serif headings rather than the mono
   section markers the tool pages use. */
.kys-prose{max-width:680px;margin:0 auto;padding:0 20px 40px}
.kys-prose header.page{padding:56px 0 6px}
.kys-prose .eyebrow{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--spruce);margin:0 0 10px;
}
.kys-prose h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.7rem,5.5vw,2.4rem);line-height:1.15;
  color:var(--spruce-deep);margin:0 0 14px;
}
.kys-prose .lede{font-size:1.04rem;line-height:1.65;color:var(--ink-soft);max-width:58ch}
.kys-prose h2{
  font-family:var(--display);font-weight:600;font-size:1.3rem;
  color:var(--spruce-deep);margin:40px 0 10px;
}
.kys-prose h3{font-size:1rem;font-weight:700;color:var(--ink);margin:24px 0 6px}
.kys-prose p{margin:0 0 12px;max-width:66ch}
.kys-prose ul,.kys-prose ol{margin:0 0 14px 22px;max-width:64ch}
.kys-prose li{margin:0 0 7px}
.kys-prose a{color:var(--spruce)}
.kys-prose dl{margin:0 0 14px;max-width:64ch}
.kys-prose dt{font-weight:700;margin-top:16px}
.kys-prose dd{margin:3px 0 0;color:var(--ink-soft)}
.kys-prose .updated{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;
  color:#5A6A64;margin:0 0 4px;
}
.kys-prose .note{
  border-left:3px solid var(--sage);background:#F1F4F2;
  padding:14px 18px;border-radius:0 8px 8px 0;margin:0 0 18px;
  color:#3D4C47;font-size:.94rem;
}
.kys-prose .note p:last-child{margin-bottom:0}
.kys-prose .contact-line{
  font-family:var(--mono);font-size:1rem;letter-spacing:.02em;
  color:var(--spruce-deep);margin:0 0 14px;
}

/* ── Site links row, shared by every footer on the site ─────────── */
.kys-sitelinks{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;
  color:#5A6A64;margin-top:10px;
}
.kys-sitelinks a{color:var(--spruce);text-decoration:none}
.kys-sitelinks a:hover{text-decoration:underline}