/* Vetfluence · theme.css · v3.1
   No dark theme. Two light ones.

   The palette is deliberately veterinary rather than generically "tech":
   · cream paper, the colour of a paper chart
   · deep petrol-teal in place of black — the colour of scrubs and of every
     clinical sign a vet has ever read, and far kinder to read than #161513
   · clinical blue for action
   · a soft surgical mint for confirmation and care
   No pure black, no pure white, no blue-violet gradient, nothing that looks
   like it came out of a default component library.

   "Evening" is the second theme. It does not go dark: it goes cool and pale,
   like a practice at dusk with the lights on. A visitor whose system is set
   to dark gets evening, not a black page. */

/* ---------------------------------------------------------------- day */
:root {
  color-scheme: light;

  /* ink: deep petrol, never black */
  --ink: #16323c;
  --ink-2: #1e414e;
  --ink-soft: #566f7a;

  /* paper: warm chart cream, with a cooler second surface */
  --paper: #f7f3ea;
  --paper-2: #eaf0f1;
  --paper-3: #dde8ec;

  /* action: clinical blue */
  --slate: #3f7fa0;
  --slate-deep: #2a5f7c;
  --slate-light: #9cc2d4;

  /* care: surgical mint, used for anything that means "done" or "safe" */
  --mint: #6da894;
  --mint-soft: #dbeae3;

  --line: rgba(22, 50, 60, .15);
  --line-ink: rgba(247, 243, 234, .20);
  --muted-ink: rgba(247, 243, 234, .74);

  --ok: #4f8f6d;
  --no: #b3564a;

  --raise: #fffdf7;
  --raise-2: #f0eade;
  --shadow-1: 0 1px 2px rgba(22, 50, 60, .07), 0 4px 14px rgba(22, 50, 60, .07);
  --shadow-2: 0 2px 6px rgba(22, 50, 60, .09), 0 18px 48px rgba(22, 50, 60, .14);

  --invert-bg: var(--ink);
  --invert-fg: var(--paper);
  --invert-line: var(--line-ink);
  --invert-muted: var(--muted-ink);
  --cta-bg: var(--slate);
  --cta-fg: var(--paper);

  --grain: .03;
  --focus: var(--slate-deep);
}

/* ---------------------------------------------------------------- evening
   Cooler, paler, still light. The page a practice looks like at dusk. */
:root[data-theme="evening"] {
  --ink: #14303d;
  --ink-2: #1c3f4e;
  --ink-soft: #4e6b78;

  --paper: #eef3f7;
  --paper-2: #e2ebf1;
  --paper-3: #d4e2ea;

  --slate: #37738f;
  --slate-deep: #27596f;
  --slate-light: #8fb6cb;

  --mint: #5f9c88;
  --mint-soft: #d5e7e0;

  --line: rgba(20, 48, 61, .17);

  --raise: #f8fbfd;
  --raise-2: #e7eff4;

  --cta-bg: var(--slate-deep);
  --grain: .022;
  color-scheme: light;
}

/* A visitor whose system asks for dark gets evening, not a black page.
   They asked for less glare, not for unreadable text. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="day"]):not([data-theme="evening"]) {
    --ink: #14303d;
    --ink-2: #1c3f4e;
    --ink-soft: #4e6b78;
    --paper: #eef3f7;
    --paper-2: #e2ebf1;
    --paper-3: #d4e2ea;
    --slate: #37738f;
    --slate-deep: #27596f;
    --slate-light: #8fb6cb;
    --mint: #5f9c88;
    --mint-soft: #d5e7e0;
    --line: rgba(20, 48, 61, .17);
    --raise: #f8fbfd;
    --raise-2: #e7eff4;
    --cta-bg: var(--slate-deep);
    --grain: .022;
    color-scheme: light;
  }
}

/* ------------------------------------------------- the inverted blocks
   .sec--ink is now a deep petrol panel rather than a black one. Cream text
   on petrol is the single most veterinary-looking combination available,
   and it is what makes the site read as a clinic rather than as a startup. */
.sec--ink, .card--ink, .site-footer, .site-header.is-solid { background: var(--ink); }
.cta { background: var(--cta-bg); color: var(--paper); }
.cta .h2, .cta p { color: var(--paper); }

/* ------------------------------------------------- buttons with a shape
   A flat rounded rectangle in a default blue is the most generic object on
   the web. These sit on a hard offset edge instead of a soft shadow, which
   is a print convention and reads as drawn rather than generated. */
.btn--primary {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 3px 3px 0 0 var(--slate);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), background-color .2s;
}
.btn--primary:hover {
  background: var(--slate-deep);
  box-shadow: 1px 1px 0 0 var(--slate);
  transform: translate(2px, 2px);
}
.btn--primary:active { box-shadow: 0 0 0 0 var(--slate); transform: translate(3px, 3px); }
.btn--ink { box-shadow: 3px 3px 0 0 var(--slate-light); }
.btn--ink:hover { box-shadow: 1px 1px 0 0 var(--slate-light); transform: translate(2px, 2px); }
.btn--light { box-shadow: 3px 3px 0 0 var(--mint); }
.btn--light:hover { box-shadow: 1px 1px 0 0 var(--mint); transform: translate(2px, 2px); }
.btn--ghost { border-color: var(--ink); }
.btn--ghost:hover { background: var(--paper-3); }
@media (prefers-reduced-motion: reduce) {
  .btn--primary, .btn--ink, .btn--light { transition: background-color .2s; }
  .btn--primary:hover, .btn--ink:hover, .btn--light:hover,
  .btn--primary:active { transform: none; }
}

/* The highlighter under emphasised text sat across the middle of the line,
   which read as a strikethrough once the decode rows started striking their
   own headings. Dropped to the baseline and warmed to mint, it reads as a
   marker pen again. */
.decode__row dd strong {
  background-image: linear-gradient(var(--mint-soft), var(--mint-soft));
  background-position: 0 100%;
  background-size: 0% 32%;
}
.decode__row.is-in dd strong,
.decode__row:not(.pre) dd strong { background-size: 100% 32%; }

/* mint earns its place on the things that mean "handled" */
.st--open, .done__tick, .cs-book { --accent: var(--mint); }
.done__tick { background: var(--mint); }

/* the clinic mock-ups stay exactly as they are: a clinic's own site, lit */
.phone, .frame, .fsite, .cs-top, .scr--light { color-scheme: light; }

/* ---------------------------------------------------------------- grain
   A single 120px tile of value noise. No request, about 700 bytes, and it is
   the difference between "beige background" and "paper". */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 0;
  pointer-events: none;
  opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
body > * { position: relative; z-index: 1; }
@media (prefers-reduced-transparency: reduce) { body::after { display: none; } }

/* ------------------------------------------------- cross-document transitions */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .18s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-in .32s cubic-bezier(0, 0, .2, 1) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
.site-header { view-transition-name: vf-header; }
.site-footer { view-transition-name: vf-footer; }
.stickybar { view-transition-name: vf-sticky; }
::view-transition-group(vf-header),
::view-transition-group(vf-footer),
::view-transition-group(vf-sticky) { animation-duration: .001s; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---------------------------------------------------------------- focus */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}
.focus-ring {
  position: absolute;
  z-index: 200;
  pointer-events: none;
  border: 2px solid var(--focus);
  border-radius: 10px;
  opacity: 0;
  transition: opacity .15s, transform .22s var(--ease), width .22s var(--ease), height .22s var(--ease);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 20%, transparent);
}
.focus-ring.is-on { opacity: 1; }
body.using-ring :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible { outline-color: transparent; }
@media (prefers-reduced-motion: reduce) {
  .focus-ring { transition: opacity .1s; }
  body.using-ring :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible { outline-color: var(--focus); }
}

/* ---------------------------------------------------------------- anchors */
/* scroll-padding on the scroller covers anchor jumps, in-page links and
   anything calling scrollIntoView; :target alone only covered the first. */
html { scroll-padding-top: calc(var(--head-h) + 24px); }
/* in-page links glide rather than jump; reduced motion keeps the jump */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
:target { scroll-margin-top: 0; }
.arrive { animation: arrive 1.6s var(--ease) both; }
@keyframes arrive {
  0%, 70% { box-shadow: inset 0 0 0 3px var(--slate); }
  100% { box-shadow: inset 0 0 0 3px transparent; }
}
.h-anchor {
  margin-left: .4em;
  font: 600 .6em/1 var(--f-mono);
  color: var(--ink-soft);
  text-decoration: none;
  opacity: 0;
  transition: opacity .15s;
  vertical-align: middle;
}
:is(h2, h3):hover > .h-anchor, .h-anchor:focus-visible { opacity: 1; }
.h-anchor:hover { color: var(--slate-deep); }

/* ---------------------------------------------------------------- theme switch */
.themeswitch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid var(--invert-line);
  color: inherit;
  border-radius: 999px;
  padding: 7px 14px;
  font: 600 13px/1 var(--f-body);
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.themeswitch:hover { background: var(--invert-line); }
.themeswitch svg { width: 15px; height: 15px; }
.themeswitch__eve { display: none; }
:root[data-theme="evening"] .themeswitch__eve { display: block; }
:root[data-theme="evening"] .themeswitch__day { display: none; }

/* the one-time note when the site cools itself because it is late there */
.nightfall {
  position: fixed;
  left: 50%;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 20px);
  z-index: 140;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(520px, calc(100vw - 32px));
  padding: 12px 16px;
  border-radius: 999px;
  background: var(--raise);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  font-size: 14.5px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility 0s .4s;
}
.nightfall.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.nightfall b { font-weight: 700; }
.nightfall button { background: none; border: 0; color: var(--ink-soft); font: 600 13px/1 var(--f-body); cursor: pointer; text-decoration: underline; padding: 4px; }
@media (max-width: 560px) { .nightfall { font-size: 13.5px; padding: 10px 14px; } }

/* ---------------------------------------------------------------- print */
@media print {
  @page { margin: 16mm; }
  :root { --ink: #10272f; --paper: #fff; --ink-soft: #445; --line: #bbb; }
  body { background: #fff !important; font-size: 11pt; }
  body::after, .site-header, .mmenu, .stickybar, .nightfall,
  .themeswitch, .skip, .cta, .cta-quiet, .site-footer .fgrid > div:nth-child(n+2),
  .shortcuts, .focus-ring, .ecgbar { display: none !important; }
  main { padding-top: 0 !important; }
  .sec, .phero { padding-block: 12pt !important; }
  .sec--ink, .card--ink { background: #fff !important; color: #10272f !important; border: 1pt solid #bbb; }
  a { text-decoration: underline; color: #10272f; }
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; word-break: break-all; }
  .ck__item { break-inside: avoid; page-break-inside: avoid; border: 1pt solid #bbb; padding: 8pt; margin-bottom: 6pt; }
  .ck__box { border: 1.5pt solid #10272f !important; background: #fff !important; }
  .print-only { display: block !important; }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
}
.print-only { display: none; }

/* ---------------------------------------------------------------- no JS */
.no-js .pre { opacity: 1 !important; transform: none !important; }
.no-js [hidden].js-only { display: none !important; }
.no-js .nojs-note {
  display: block;
  margin: 12px 0 0;
  padding: 12px 14px;
  border-left: 3px solid var(--slate);
  background: var(--paper-2);
  font-size: 14.5px;
}
.nojs-note { display: none; }