/* ═══════════════════════════════════════════════════════════════
   EALATIS.COM — Doctor's Note
   Geometry is calibrated against docs/mock-site/mock-site.png.
   The mock document measures 958px wide; ours is 1020px, so every
   mock measurement below was scaled by k = 1.0647 and expressed in
   em against the document's own root size (13.62px at 1020px wide).

    0. Fonts          6. Title + certified stamp   12. Share cards
    1. Tokens         7. Rows / fields / ink       13. Site footer
    2. Reset          8. Diagnosis                 14. Toast
    3. Toolbar        9. Recommendation            15. Responsive
    4. Paper shell   10. Signature + clinic stamp  16. Print
    5. Letterhead    11. Disclaimer
   ═══════════════════════════════════════════════════════════════ */

/* ── 0. FONTS (self-hosted, SIL Open Font License 1.1) ───────── */
/* Anton — display · Roboto Mono — form copy · Caveat — patient ink */
@font-face {
  font-family: "Anton";
  src: url("fonts/anton-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Roboto Mono";
  src: url("fonts/robotomono-latin.woff2") format("woff2");
  font-weight: 100 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Oswald";
  src: url("fonts/oswald-latin.woff2") format("woff2");
  font-weight: 200 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Caveat";
  src: url("fonts/caveat-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}

/* ── 1. TOKENS ───────────────────────────────────────────────── */
:root {
  --paper:      #F7F3E8;
  --paper-edge: #EFE9DA;
  --navy:       #0B347F;
  --navy-deep:  #102C63;
  --red:        #C61D2C;
  --yellow:     #F5C400;
  --hand:       #173E97;
  --gray:       #D8D3C7;

  --mono:  "Roboto Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;
  --sans:  "Helvetica Neue", Arial, system-ui, sans-serif;
  --heavy:   "Anton", "Arial Narrow", "Arial Black", Impact, sans-serif;
  --display: "Oswald", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --ink:   "Caveat", "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive;

  /* fibrous paper grain */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  /* speckle mask — erodes stamp edges into distressed rubber-stamp ink */
  --distress: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='3' seed='11'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 1 1 1 1 1 1 1 0 1 1 1 1 1 0 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23d)'/%3E%3C/svg%3E");
}

/* ── 2. RESET & BASE ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding: clamp(16px, 2.6vw, 40px) clamp(12px, 3vw, 40px) 0;
  background: #E9E3D5 var(--grain);
  color: var(--navy-deep);
  font-family: var(--mono);
  overflow-x: hidden;
}
p, h1, h2, dl, dd, dt, ul, blockquote, figure { margin: 0; }
h1, h2 { font-size: inherit; font-weight: inherit; }
ul { list-style: none; padding: 0; }
svg { display: block; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:where(a, button, input, textarea):focus-visible {
  outline: 2.5px solid var(--red);
  outline-offset: 2px;
}

/* ── 3. TOOLBAR ──────────────────────────────────────────────── */
.toolbar {
  max-width: 1020px;
  margin: 0 auto 14px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.tb-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font: 700 11px/1 var(--mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--navy); background: var(--paper);
  border: 1.5px solid var(--navy);
  padding: 9px 13px; cursor: pointer;
  transition: background .13s, color .13s;
}
.tb-btn:hover { background: var(--navy); color: var(--paper); }
.tb-btn--solid { background: var(--red); border-color: var(--red); color: #fff; }
.tb-btn--solid:hover { background: var(--navy); border-color: var(--navy); }
.tb-btn[aria-pressed="true"] { background: var(--navy); color: var(--paper); }
.tb-ico {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.tb-hint {
  font: 400 11px/1.3 var(--mono);
  letter-spacing: .03em; color: #6F6A5C; margin-left: auto;
}

/* ── 4. PAPER / DOCUMENT SHELL ───────────────────────────────── */
.sheet-wrap { max-width: 1020px; margin: 0 auto; container: sheet / inline-size; }

.doc {
  /* every dimension inside the certificate is em-relative to this,
     so the whole document scales as a single object */
  font-size: clamp(9.6px, 1.335cqw, 13.62px);
  position: relative;
  background: var(--paper) var(--grain);
  background-blend-mode: multiply;
  border: 3px solid var(--navy);
  box-shadow: 0 2px 20px rgba(60, 50, 30, .18), 0 0 0 1px var(--paper-edge);
}
.doc-fields { border: 0; margin: 0; padding: 0; min-width: 0; }
.doc-inner {
  position: relative;
  outline: 1px solid var(--navy);
  outline-offset: -8px;
  padding: 2.35em 3.77em 1.35em;
}

/* ── 5. LETTERHEAD ───────────────────────────────────────────── */
.letterhead {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  column-gap: 1.88em;
}
.ph-sun { color: var(--yellow); }
.lh-sun { width: 6.5em; height: 6.5em; margin-left: -1.8em; }

.lh-id { padding-top: .95em; }
.lh-brand {
  font: 900 2.25em/1 var(--sans);
  letter-spacing: .135em;
  color: var(--navy);
  margin-bottom: .5em;
}
.lh-dept {
  font: 700 1.37em/1.31 var(--mono);
  letter-spacing: -.005em;
  text-transform: uppercase;
  color: var(--navy-deep);
  white-space: nowrap;
}
.lh-meta {
  border-left: 1.6px solid var(--navy);
  padding: .55em 0 .3em 2.4em;
  align-self: start;
  margin-top: .35em;
}
.lh-meta p {
  font: 700 1.3em/1.55 var(--mono);
  letter-spacing: -.005em;
  text-transform: uppercase;
  color: var(--navy-deep);
  white-space: nowrap;
}
.lh-meta .is-red { color: var(--red); }

/* ── 6. TITLE + CERTIFIED STAMP ──────────────────────────────── */
.title-area { margin: 1.75em 0 .95em; }
.title { line-height: 1; }
.title-fit {
  display: block;
  font: 400 6.31em/.86 var(--heavy);
  letter-spacing: .038em;
  color: var(--navy);
  text-transform: uppercase;
  white-space: nowrap;
}
/* absolutely placed so it overlaps the letterhead exactly as in the mock */
.stamp-cert {
  position: absolute;
  left: 44.6em; top: 10.6em;
  width: 26.14em; height: 8.88em;
  color: var(--red);
  transform: rotate(8deg);
  transform-origin: 50% 50%;
  -webkit-mask-image: var(--distress);
  mask-image: var(--distress);
  -webkit-mask-size: 300px; mask-size: 300px;
  pointer-events: none;
}
.cert-l1, .cert-l2 { font: 400 36px/1 var(--heavy); letter-spacing: .5px; fill: currentColor; }

/* ── 7. ROWS / FIELDS / INK ──────────────────────────────────── */
.kicker {
  font: 400 1.29em/1.4 var(--mono);
  letter-spacing: -.005em;
  color: var(--navy-deep);
  margin-bottom: .5em;
}
.kicker--caps {
  font-weight: 700;
  font-size: 1.55em;
  text-transform: uppercase;
  margin-bottom: .55em;
}
.ftext {
  font: 400 1.35em/1 var(--mono);
  letter-spacing: -.005em;
  color: var(--navy-deep);
  white-space: nowrap;
  flex: none;
}
.row { display: flex; align-items: flex-end; gap: .55em; }
.field { position: relative; display: block; flex: none; }
.field--grow { flex: 1 1 auto; min-width: 3em; }
.field--date { flex: 0 0 15em; }

.ink { font-family: var(--ink); color: var(--hand); }
input.ink, textarea.ink {
  display: block; width: 100%;
  background: none; border: 0;
  border-bottom: 1.5px solid var(--navy);
  padding: 0 .3em .05em;
  color: var(--hand);
  font: 500 1.92em/1.1 var(--ink);
  letter-spacing: .005em;
}
input.ink { height: 1.42em; }
.doc-fields:disabled input.ink,
.doc-fields:disabled textarea.ink {
  color: var(--hand); -webkit-text-fill-color: var(--hand); opacity: 1;
}
.is-editing input.ink:hover, .is-editing textarea.ink:hover { background: rgba(23,62,151,.06); }

.field-note {
  position: absolute; left: 0; right: 0; top: 100%;
  margin-top: .1em; text-align: center;
  font: 400 1.05em/1.3 var(--mono);
  letter-spacing: -.005em; color: var(--navy-deep);
  pointer-events: none;
}

/* ── 8. DIAGNOSIS ────────────────────────────────────────────── */
.row--intro { margin-bottom: 2.2em; }
.row--dx { align-items: baseline; margin-bottom: .85em; }
.dx-word {
  font: 700 2.69em/1 var(--mono);
  letter-spacing: .13em;
  color: var(--red);
  margin-left: 1.5em;
}
.dx-icd {
  margin-left: auto;
  font: 400 1.2em/1 var(--mono);
  letter-spacing: -.005em; color: var(--navy-deep);
  white-space: nowrap;
}
.dx-box { border: 2px solid var(--navy); padding: .32em 1.7em .38em; margin-bottom: 1.45em; }
.dx-box p {
  font: 400 1.27em/1.85 var(--mono);
  letter-spacing: -.005em; color: var(--navy-deep);
}

/* ── 9. RECOMMENDATION ───────────────────────────────────────── */
.rec {
  display: grid;
  grid-template-columns: .424fr .576fr;
  padding-left: 1.56em;
  margin-bottom: 1.2em;
}
.rec-col--period { border-left: 1.6px solid var(--navy); padding-left: 2.5em; }
.collabel {
  font: 700 1.2em/1 var(--mono);
  letter-spacing: -.005em; text-transform: uppercase;
  color: var(--navy-deep);
  margin-bottom: 1.15em;
}
.collabel-hint { text-transform: none; font-weight: 400; }
.collabel--inline { margin-bottom: 0; padding-bottom: .42em; align-self: flex-end; }

.checklist li { display: flex; align-items: center; gap: .78em; margin-bottom: .72em; }
.checklist label, .chk label {
  font: 400 1.32em/1 var(--mono);
  letter-spacing: -.005em; color: var(--navy-deep); cursor: default;
}
.is-editing .checklist label, .is-editing .chk label,
.is-editing .cbox { cursor: pointer; }

/* square form box with a hand-inked tick that overshoots it, as in the mock */
.cbox {
  appearance: none; -webkit-appearance: none;
  position: relative; flex: none;
  width: 1.42em; height: 1.42em; margin: 0;
  border: 1.8px solid var(--navy); border-radius: 0;
  background: none; cursor: default;
}
.cbox::after {
  content: "";
  position: absolute; left: .02em; top: -.62em;
  width: 1.62em; height: 1.62em;
  background: var(--hand); opacity: 0;
  -webkit-mask: no-repeat center/contain var(--tick);
  mask: no-repeat center/contain var(--tick);
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M2.5 17c3.3 1.4 6.2 4.8 8 9.4C14.8 15 21.3 6.2 30 1.4' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cbox:checked::after { opacity: 1; }

.rec-col--period .row { margin-bottom: .32em; }
.rec-col--period .row:last-of-type { margin-bottom: .1em; }
.field-note--period { position: static; text-align: left; padding-left: 4.2em; }

.row--excuse { gap: 1.55em; align-items: flex-end; padding-left: 1em; margin-bottom: 1.8em; }
.chk { display: flex; align-items: center; gap: .66em; flex: none; padding-bottom: .32em; }

/* ── ADDITIONAL NOTES ────────────────────────────────────────── */
/* full-width ruled lines; the label masks the first rule, as in the mock */
.row--notes { position: relative; display: block; margin-bottom: 1.15em; }
.notes-label {
  position: absolute; left: 0; top: .18em; z-index: 1;
  background: var(--paper) var(--grain);
  background-blend-mode: multiply;
  padding-right: .5em;
  font: 400 1.35em/1 var(--mono);
  letter-spacing: -.005em; color: var(--navy-deep);
}
.notes-area {
  display: block; width: 100%;
  border: 0; resize: none; overflow: hidden;
  padding: 0 .3em;
  text-indent: 8.15em;
  font: 500 1.92em/1.38em var(--ink);
  color: var(--hand); background-color: transparent;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0, transparent calc(1.38em - 1.5px),
    var(--navy) calc(1.38em - 1.5px), var(--navy) 1.38em);
  background-size: 100% 2.76em;
  height: 2.76em;
}

/* ── 10. SIGNATURE + CLINIC STAMP ────────────────────────────── */
.sig {
  display: grid;
  grid-template-columns: .38fr .40fr .22fr;
  align-items: center;
  margin: -2.2em 0 .8em;
}
.rx-value {
  display: flex; align-items: center; gap: .55em;
  font: 700 1.62em/1 var(--mono);
  letter-spacing: -.005em; text-transform: uppercase;
  color: var(--red);
  margin: .45em 0 1.1em;
}
.ball { width: 1.1em; height: 1.1em; flex: none; }
.ball--rx { color: var(--red); }
.row--refills { gap: .55em; padding-right: 3.5em; }

.sig-sign { border-left: 1.6px solid var(--navy); padding-left: 2.4em; text-align: center; }
.signature { color: var(--hand); width: 97%; max-width: 26em; margin: 0 auto .1em; }
.sig-rule { height: 0; border-top: 1.3px solid var(--navy); margin: 0 auto .5em; width: 100%; }
.sig-name { font: 400 1.32em/1.5 var(--mono); letter-spacing: -.005em; color: var(--navy-deep); }
.sig-sub  { font: 700 1.32em/1.5 var(--mono); letter-spacing: -.005em; color: var(--navy-deep); }
.sig-sub--caps { text-transform: uppercase; }

.sig-stamp {
  justify-self: end; margin-right: .4em;
  /* paper backing so the ruled line stops at the stamp instead of striking through */
  background: radial-gradient(circle, var(--paper) 0 49.5%, transparent 50%);
}
.stamp-round {
  color: var(--red);
  width: 13.9em; height: 13.9em;
  transform: rotate(-2deg);
  -webkit-mask-image: var(--distress);
  mask-image: var(--distress);
  -webkit-mask-size: 170px; mask-size: 170px;
}
.arc-text { font: 700 17px/1 var(--mono); letter-spacing: .2px; fill: currentColor; }
.arc-text--mini { font-size: 15px; letter-spacing: 0; }
.stamp-brand { font: 400 46px/1 var(--heavy); letter-spacing: 1.5px; fill: currentColor; }
.stamp-tld { font: 400 33px/1 var(--heavy); letter-spacing: 1.5px; fill: currentColor; }
.stamp-star { font-size: 19px; fill: currentColor; }

/* ── 11. DISCLAIMER ──────────────────────────────────────────── */
.disclaimer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  border: 1.6px solid var(--navy);
  margin: 0 -2.8em;
  padding: .68em 1.35em;
}
.disc-label {
  font: 700 1.32em/1 var(--mono);
  letter-spacing: -.005em; text-transform: uppercase;
  color: var(--navy-deep);
  padding-right: 1.35em;
  border-right: 1.4px solid var(--navy);
}
.disc-body {
  font: 400 1.08em/1.6 var(--mono);
  letter-spacing: -.005em; color: var(--navy-deep);
  padding: 0 1.35em;
}
.disc-end { border-left: 1.4px solid var(--navy); padding-left: 1.35em; text-align: center; }
.disc-mabuhay {
  font: 700 1.32em/1.15 var(--mono);
  letter-spacing: -.005em; text-transform: uppercase; color: var(--navy);
}
.disc-stars { font-size: 1.35em; letter-spacing: .32em; margin-top: .1em; }
.s-y { color: var(--yellow); } .s-n { color: var(--navy); } .s-r { color: var(--red); }

/* ── 12. SHARE SECTION + CARDS ───────────────────────────────── */
.share { max-width: 1020px; margin: clamp(30px, 4.5vw, 56px) auto 0; }
.share-head {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: clamp(14px, 3vw, 36px);
  text-align: center; margin-bottom: clamp(18px, 3vw, 30px);
}
.share-rule { height: 1.8px; background: var(--navy); }
.share-title {
  font: 700 clamp(14px, 1.55vw, 19px)/1.4 var(--mono);
  letter-spacing: .08em; text-transform: uppercase; color: var(--navy);
}
.share-sub {
  font: 400 clamp(11px, 1.15vw, 14px)/1.5 var(--mono);
  letter-spacing: .06em; text-transform: uppercase; color: var(--navy-deep);
}

.cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2.2vw, 26px);
}
.card {
  container: card / inline-size;
  position: relative; display: flex; flex-direction: column;
  aspect-ratio: 1 / 1;
  padding: 6% 6% 0;
  border-radius: 9px; overflow: hidden;
  background: var(--paper) var(--grain);
  background-blend-mode: multiply;
  box-shadow: 0 3px 15px rgba(60, 50, 30, .17);
  isolation: isolate;
}
/* watercolour washes: yellow sun bloom top-left, navy/red drift bottom */
.card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(40cqw 36cqw at 4cqw 16cqw, rgba(245,196,0,.34), transparent 68%),
    linear-gradient(196deg, transparent 63%, rgba(11,52,127,.13) 75%, transparent 85%),
    linear-gradient(188deg, transparent 75%, rgba(198,29,44,.14) 89%, transparent 98%);
}

.card-head {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: start; column-gap: 2cqw; margin-bottom: 5cqw;
}
.card-sun { width: 6.2cqw; height: 6.2cqw; margin-top: .2cqw; }
.card-brand { font: 900 3.4cqw/1.15 var(--sans); letter-spacing: .114em; color: var(--navy); }
.card-brand span {
  display: block;
  font: 700 2.35cqw/1.7 var(--mono);
  letter-spacing: .1em; text-transform: uppercase; color: var(--navy-deep);
}
.stamp-cert--mini {
  position: static;
  width: 31cqw; height: 10.6cqw;
  transform: rotate(-5deg); margin-top: -.6cqw;
  -webkit-mask-size: 78px; mask-size: 78px;
}

.card-rx dt {
  font: 700 2.9cqw/1 var(--mono);
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--navy-deep); margin-bottom: 1.2cqw;
}
.card-rx dd { margin: 0 0 3.4cqw; }
.cd-navy { color: var(--navy); }
.cd-red  { color: var(--red); }
.cd-xl { font: 700 21.5cqw/.95 var(--display); letter-spacing: 0; }
.cd-lg { font: 700 11.3cqw/1 var(--display); letter-spacing: .09em; display: flex; align-items: baseline; gap: 1.6cqw; flex-wrap: wrap; }
.cd-lg .ink { font: 500 6.4cqw/1 var(--ink); color: var(--hand); letter-spacing: 0; }
.cd-md { font: 900 5.5cqw/1.15 var(--sans); letter-spacing: .045em; text-transform: uppercase; display: flex; align-items: center; gap: 2.2cqw; }
.ball--yellow { color: var(--yellow); width: 4.2cqw; height: 4.2cqw; }

.card-strip {
  margin: auto -6.82cqw 0; padding: 3.4cqw 6.82cqw;
  background: var(--navy); color: #fff;
  font: 700 3.9cqw/1.2 var(--mono);
  letter-spacing: .04em; text-transform: uppercase;
}
.card-strip--split {
  background: linear-gradient(100deg, var(--navy) 0%, var(--navy) 66%, var(--red) 84%, var(--red) 100%);
}

.card--quote .card-head { margin-bottom: 6cqw; }
.card-quote p { font: 500 10cqw/1.32 var(--ink); color: var(--hand); }
.card-quote-by { font: 500 7.6cqw/1 var(--ink); color: var(--hand); margin-top: 5cqw; }
.stamp-round--mini {
  position: absolute; right: 5cqw; bottom: 14cqw;
  width: 26cqw; height: 26cqw; transform: rotate(-7deg);
  -webkit-mask-size: 66px; mask-size: 66px;
}

.card--positive { padding: 6%; justify-content: center; }
.card--positive::before {
  background:
    conic-gradient(from 32deg at -4cqw 38cqw,
      rgba(245,196,0,.30) 0 4deg, transparent 4deg 10deg,
      rgba(245,196,0,.30) 10deg 14deg, transparent 14deg 20deg,
      rgba(245,196,0,.30) 20deg 24deg, transparent 24deg 30deg,
      rgba(245,196,0,.30) 30deg 34deg, transparent 34deg 360deg),
    radial-gradient(26cqw 26cqw at -2cqw 38cqw, rgba(245,196,0,.34), transparent 72%),
    linear-gradient(190deg, transparent 76%, rgba(11,52,127,.10) 86%, transparent 94%),
    linear-gradient(184deg, transparent 84%, rgba(198,29,44,.12) 94%, transparent 100%);
  -webkit-mask-image: radial-gradient(120% 120% at 0 38%, #000 55%, transparent 88%);
  mask-image: radial-gradient(120% 120% at 0 38%, #000 55%, transparent 88%);
}
.card-declare { text-align: center; }
.cd-kicker {
  font: 700 6.4cqw/1 var(--display);
  letter-spacing: .2em; text-transform: uppercase; color: var(--navy);
  margin-bottom: 2.4cqw;
}
.cd-hero { font: 700 22.2cqw/1.02 var(--display); letter-spacing: .066em; text-transform: uppercase; }
.cd-hero--2 { font-size: 19.65cqw; letter-spacing: .052em; }
.stamp-cert--flat {
  position: static;
  width: 54cqw; height: 18.3cqw;
  margin: 4.2cqw auto 3.8cqw;
  transform: rotate(-1deg);
  -webkit-mask-size: 128px; mask-size: 128px;
}
.cd-tag { font: 700 7.3cqw/1 var(--display); letter-spacing: .2em; color: var(--navy); }

.card-share {
  position: absolute; right: 2.2cqw; bottom: 2.2cqw; z-index: 3;
  font: 700 10px/1 var(--mono);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--navy); background: rgba(247,243,232,.94);
  border: 1.2px solid var(--navy);
  padding: 6px 8px; cursor: pointer;
  opacity: 0; transition: opacity .15s;
}
.card:hover .card-share, .card-share:focus-visible { opacity: 1; }

/* ── 13. SITE FOOTER ─────────────────────────────────────────── */
.sitefoot {
  max-width: 1020px;
  margin: clamp(24px, 3.5vw, 42px) auto 0;
  padding: clamp(12px, 2vw, 20px) 0 clamp(28px, 5vw, 56px);
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 16px; color: var(--navy);
}
.sf-brand, .sf-tag, .sf-handle {
  font: 700 clamp(11.5px, 1.15vw, 14.5px)/1 var(--mono);
  letter-spacing: .06em; text-transform: uppercase;
}
.sf-brand { display: flex; align-items: center; gap: 10px; }
.sf-tag { justify-self: end; text-align: right; }
.sf-social { display: flex; align-items: center; gap: 13px; justify-self: center; }
.sf-ico {
  width: 23px; height: 23px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.sf-link { color: var(--navy); }
.sf-link:hover { color: var(--red); }
.sf-handle { margin-left: 5px; }

/* ── 14. TOAST ───────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  background: var(--navy); color: var(--paper);
  font: 700 12px/1 var(--mono);
  letter-spacing: .06em; text-transform: uppercase;
  padding: 12px 18px; z-index: 50;
}
.toast[hidden] { display: none; }

/* ── 15. RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .cards { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
  .sitefoot { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 14px; }
  .sf-tag { justify-self: center; text-align: center; }
  .card-share { opacity: 1; }
}

/* the certificate keeps its proportions and only re-flows when truly narrow */
@container sheet (max-width: 640px) {
  .doc-inner { padding: 2.2em 2.4em 1.6em; }
  .letterhead { grid-template-columns: auto 1fr; row-gap: .8em; }
  .lh-sun { margin-left: -1em; }
  .lh-meta {
    grid-column: 1 / -1;
    border-left: 0; border-top: 1.4px solid var(--navy);
    padding: .5em 0 0; margin-top: 0;
    display: flex; flex-wrap: wrap; gap: 0 1.4em;
  }
  .title-fit { font-size: 5.2em; }
  .stamp-cert { position: static; width: 18em; height: 6.12em; margin: .55em 0 1em auto; transform: rotate(6deg); }
  .row--intro, .row--excuse { flex-wrap: wrap; row-gap: 1.6em; }
  .field--date { flex: 1 1 8em; }
  .row--dx { flex-wrap: wrap; }
  .dx-word { margin-left: .8em; }
  .dx-icd { margin-left: 0; width: 100%; }
  .rec { grid-template-columns: 1fr; gap: 1.4em; padding-left: 0; }
  .rec-col--period { border-left: 0; padding-left: 0; border-top: 1.4px solid var(--navy); padding-top: 1.2em; }
  .notes-area { text-indent: 0; }
  .notes-label { position: static; display: block; margin-bottom: .3em; background: none; }
  .sig { grid-template-columns: 1fr; gap: 1.5em; justify-items: center; text-align: center; }
  .sig-rx { width: 100%; }
  .sig-sign { border-left: 0; padding-left: 0; width: 100%; border-top: 1.4px solid var(--navy); padding-top: 1.2em; }
  .sig-stamp { justify-self: center; margin-right: 0; }
  .disclaimer { grid-template-columns: 1fr; gap: .7em; text-align: center; justify-items: center; margin: 0; }
  .disc-label { border-right: 0; padding-right: 0; }
  .disc-body { padding: 0; }
  .disc-end { border-left: 0; padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ── 16. PRINT ───────────────────────────────────────────────── */
@page { size: letter portrait; margin: 0.38in; }

@media print {
  html, body {
    background: #fff; padding: 0; margin: 0;
    print-color-adjust: exact; -webkit-print-color-adjust: exact;
  }
  .toolbar, .share, .sitefoot, .toast, .card-share { display: none !important; }
  .sheet-wrap { max-width: none; margin: 0; }
  /* the container query already sizes the document to the page width —
     overriding font-size here would decouple the em layout from the sheet */
  .doc {
    box-shadow: none; border-width: 2.5px;
    break-inside: avoid; page-break-inside: avoid;
  }
  input.ink, textarea.ink { background: none; }
}