/* FastVet Help Centre — self-contained styles.
   Tokens mirror VetLanding/css/main.css so the help centre reads as part of fastvet.net. */

:root {
  --brand-teal: #16a3a8;
  --brand-teal-600: #118b90;
  --brand-teal-700: #0d7478;
  --bg: #f6f8f9;
  --surface: #ffffff;
  --surface-2: #f1f5f6;
  --text: #0f172a;
  --muted: #566274;
  --line: #e2e8ec;
  --radius: 14px;
  --shadow-sm: 0 6px 18px rgba(15, 23, 42, .07);
  --shadow-md: 0 14px 30px rgba(15, 23, 42, .10);
  --maxw: 820px;
}

html[data-theme="dark"] {
  --bg: #0b1223;
  --surface: #111c30;
  --surface-2: #16233a;
  --text: #e6edf5;
  --muted: #9aa9bd;
  --line: #22314b;
  --shadow-sm: 0 6px 18px rgba(0, 0, 0, .35);
  --shadow-md: 0 14px 30px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand-teal-700); }
html[data-theme="dark"] a { color: #5ed4d8; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brand-teal); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 16px;
  padding: 10px 20px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar__brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; color: var(--text); text-decoration: none; white-space: nowrap;
}
.topbar__brand img { border-radius: 6px; }
.topbar__menu {
  display: none; flex-direction: column; gap: 4px; justify-content: center;
  width: 38px; height: 38px; padding: 0 9px;
  background: none; border: 1px solid var(--line); border-radius: 9px; cursor: pointer;
}
.topbar__menu span { display: block; height: 2px; background: var(--text); border-radius: 2px; }
.topbar__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.topbar__app {
  padding: 8px 14px; border-radius: 999px; background: var(--brand-teal); color: #fff;
  text-decoration: none; font-weight: 600; font-size: .88rem; white-space: nowrap;
}
.topbar__app:hover { background: var(--brand-teal-600); }
/* Screenshot-size switch. Only pages that actually carry a phone capture render it — otherwise it
   would offer a choice that changes nothing on screen. */
.theme-toggle {
  width: 38px; height: 38px; display: grid; place-items: center;
  background: none; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; color: var(--text);
}
.theme-toggle .moon { display: none; }
html[data-theme="dark"] .theme-toggle .sun { display: none; }
html[data-theme="dark"] .theme-toggle .moon { display: block; }

/* ---------- search ---------- */
.search { position: relative; flex: 1 1 auto; max-width: 460px; }
.search input {
  width: 100%; padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text);
  font: inherit; font-size: .92rem;
}
.search input:focus { outline: 2px solid var(--brand-teal); outline-offset: 1px; }
.search__results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
  max-height: 62vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-md);
  padding: 6px;
}
.search__results a {
  display: block; padding: 9px 12px; border-radius: 8px; text-decoration: none; color: var(--text);
}
.search__results a:hover, .search__results a.is-active { background: var(--surface-2); }
.search__results strong { display: block; font-size: .93rem; }
.search__results small { color: var(--muted); font-size: .8rem; }
.search__results .no-hits { padding: 12px; color: var(--muted); font-size: .9rem; }

/* ---------- layout ---------- */
.layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; max-width: 1280px; margin: 0 auto; padding: 28px 20px 60px; }
.sidebar { position: sticky; top: 76px; align-self: start; max-height: calc(100vh - 100px); overflow-y: auto; padding-right: 6px; }
.nav-group { margin-bottom: 6px; }
.nav-group__title {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  font: inherit; font-weight: 700; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); padding: 8px 10px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center;
}
.nav-group__title::after { content: "▸"; transition: transform .15s; font-size: .8rem; }
.nav-group.is-open .nav-group__title::after { transform: rotate(90deg); }
.nav-group__title:hover { background: var(--surface-2); }
.nav-group ul { list-style: none; margin: 0 0 8px; padding: 0 0 0 6px; display: none; }
.nav-group.is-open ul { display: block; }
.nav-group li a {
  display: block; padding: 6px 12px; border-radius: 8px; font-size: .92rem;
  color: var(--text); text-decoration: none; border-left: 2px solid transparent;
}
.nav-group li a:hover { background: var(--surface-2); }
.nav-group li a.is-current { color: var(--brand-teal-700); font-weight: 650; border-left-color: var(--brand-teal); background: var(--surface-2); }
html[data-theme="dark"] .nav-group li a.is-current { color: #5ed4d8; }

main { min-width: 0; }

/* ---------- index page ---------- */
.hero { text-align: center; padding: 32px 0 26px; }
.hero h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: 0 0 8px; letter-spacing: -.02em; }
.hero > p { color: var(--muted); max-width: 620px; margin: 0 auto 22px; }
.search--hero { max-width: 560px; margin: 0 auto; }
.search--hero input { padding: 13px 20px; font-size: 1rem; box-shadow: var(--shadow-sm); background: var(--surface); }
.hero__quick { font-size: .88rem; color: var(--muted); margin-top: 16px; }
.hero__quick a { margin: 0 6px; white-space: nowrap; }

.group { margin-top: 30px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 14px; }
.card {
  display: block; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); text-decoration: none; color: var(--text); box-shadow: var(--shadow-sm);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--brand-teal); }
.card__icon { font-size: 1.4rem; display: block; margin-bottom: 8px; line-height: 1; }
.card__group {
  display: block; font-size: .68rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--brand-teal-700); margin-bottom: 3px;
}
html[data-theme="dark"] .card__group { color: #5ed4d8; }
.card__title { display: block; font-weight: 700; margin-bottom: 5px; font-size: 1.02rem; }
.card__text { display: block; font-size: .86rem; color: var(--muted); line-height: 1.5; }

/* ---------- topic page ---------- */
.topic { max-width: var(--maxw); }
.crumb, .trail { font-size: .84rem; color: var(--muted); margin: 0 0 10px; }
.crumb i, .trail i { font-style: normal; opacity: .55; margin: 0 6px; }
.trail {
  display: inline-flex; flex-wrap: wrap; align-items: center;
  background: var(--surface-2); border: 1px solid var(--line);
  padding: 6px 12px; border-radius: 999px; font-weight: 600; color: var(--text);
}
.topic h1 { font-size: clamp(1.7rem, 3.4vw, 2.25rem); margin: 0 0 10px; letter-spacing: -.02em; line-height: 1.2; }
.summary { font-size: 1.06rem; color: var(--muted); margin: 0 0 26px; }
.topic-section { scroll-margin-top: 88px; padding-top: 10px; }
.topic h2 {
  font-size: 1.32rem; margin: 40px 0 12px; padding-top: 18px; border-top: 1px solid var(--line);
  letter-spacing: -.01em;
}
.topic h3 { font-size: 1.05rem; margin: 26px 0 8px; }
.topic p { margin: 0 0 14px; }
.anchor { opacity: 0; margin-left: 8px; text-decoration: none; color: var(--muted); font-weight: 400; }
.topic h2:hover .anchor { opacity: 1; }

.toc {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 18px; margin: 0 0 8px;
}
.toc__title { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 8px; }
.toc ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 24px; }
.toc li { margin: 0 0 5px; break-inside: avoid; }
.toc a { font-size: .9rem; text-decoration: none; }
.toc a:hover { text-decoration: underline; }

.steps { counter-reset: step; list-style: none; margin: 0 0 18px; padding: 0; }
.steps > li {
  counter-increment: step; position: relative; padding: 0 0 4px 42px; margin-bottom: 14px;
}
.steps > li::before {
  content: counter(step); position: absolute; left: 0; top: -1px;
  width: 27px; height: 27px; border-radius: 50%;
  background: var(--brand-teal); color: #fff;
  display: grid; place-items: center; font-size: .84rem; font-weight: 700;
}
.bullets { margin: 0 0 16px; padding-left: 22px; }
.bullets li { margin-bottom: 7px; }

.ui {
  display: inline-block; padding: 1px 7px; border-radius: 6px;
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: .88em; font-weight: 600; white-space: nowrap;
}

.callout {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: start;
  padding: 13px 16px; margin: 0 0 18px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface); border-left: 4px solid var(--muted);
}
.callout strong { grid-row: 1; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.callout div { grid-column: 1 / -1; font-size: .95rem; }
.callout div > :last-child { margin-bottom: 0; }
.callout--note { border-left-color: #3b82f6; } .callout--note strong { color: #2563eb; }
.callout--tip  { border-left-color: var(--brand-teal); } .callout--tip strong { color: var(--brand-teal-700); }
.callout--warn { border-left-color: #f59e0b; } .callout--warn strong { color: #b45309; }
.callout--role { border-left-color: #8b5cf6; } .callout--role strong { color: #7c3aed; }
html[data-theme="dark"] .callout--note strong { color: #7aa9ff; }
html[data-theme="dark"] .callout--tip strong { color: #5ed4d8; }
html[data-theme="dark"] .callout--warn strong { color: #fbbf24; }
html[data-theme="dark"] .callout--role strong { color: #b49bff; }

/* ---------- media ---------- */
.media { margin: 0 0 22px; }
.media__link { display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); background: var(--surface-2); }
.media img { display: block; width: 100%; height: auto; }
.media figcaption { font-size: .85rem; color: var(--muted); margin-top: 8px; text-align: center; }
.media--wide { margin-left: calc(-1 * min(90px, 6vw)); margin-right: calc(-1 * min(90px, 6vw)); }
.media__badge {
  display: inline-block; padding: 1px 8px; border-radius: 999px; margin-right: 6px;
  background: var(--brand-teal); color: #fff; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; vertical-align: 1px;
}
.media-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.media-pair .media { margin-bottom: 18px; }

/* Desktop/phone toggle, under each screenshot that has both captures.
   Hidden until the inline head script sets data-shots-ui — without help.js it does nothing, and an
   inert control is worse than none. Centred under the image so it stays put when phone mode caps
   the picture at 390px and centres it. */
.shottoggle { display: none; }
html[data-shots-ui="on"] .shottoggle {
  display: flex; width: fit-content; margin: 10px auto 0; padding: 2px; gap: 2px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2);
}
.shottoggle__btn {
  padding: 4px 12px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font: inherit; font-size: .78rem; font-weight: 600; color: var(--muted); white-space: nowrap;
}
.shottoggle__btn:hover { color: var(--text); }
.shottoggle__btn[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.shottoggle__btn:focus-visible { outline: 2px solid var(--brand-teal); outline-offset: 1px; }
/* The caption follows the toggle, so it needs less of a gap than it did against the image. */
.media[data-has-mobile] figcaption { margin-top: 6px; }

/* Missing media shouldn't leave a broken-image icon in a shipped page. */
.media img:not([src]) { display: none; }

/* A phone screenshot is 390px wide. Stretched to the full column it is a wall of soft pixels, so
   cap it near its natural size and centre it — it should read like a phone held up beside the text.
   The cap applies whenever the phone image is the one showing: either because the reader chose it,
   or, with no choice stored, because the viewport is narrow enough for the <picture> to pick it. */
html[data-shots="mobile"] .media[data-has-mobile] .media__link { max-width: 390px; margin: 0 auto; }
@media (max-width: 640px) {
  html:not([data-shots="desktop"]) .media[data-has-mobile] .media__link { max-width: 390px; margin: 0 auto; }
  /* This is the only way to switch on a phone now that the header control is gone, so give it a
     real tap target — 28px tall is a thumb-sized miss. */
  .shottoggle__btn { padding: 10px 18px; font-size: .82rem; }
}
/* A wide figure has negative side margins to break out of the column; a phone shot inside one must
   not keep them or it sits off-centre. */
html[data-shots="mobile"] .media--wide[data-has-mobile] { margin-left: 0; margin-right: 0; }

/* Say so rather than silently showing a desktop shot: not every screen has a phone capture. */
html[data-shots="mobile"] .media[data-no-mobile] figcaption::after {
  content: " · shown on desktop";
  color: var(--muted); font-size: .8rem; font-style: italic;
}

.table-wrap { overflow-x: auto; margin: 0 0 20px; border: 1px solid var(--line); border-radius: 12px; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; background: var(--surface); }
th, td { text-align: left; padding: 9px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--surface-2); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
tbody tr:last-child td { border-bottom: 0; }

.lead { font-size: 1rem; }

.pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); }
.pager a {
  flex: 0 1 46%; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); text-decoration: none; color: var(--text); font-weight: 650;
}
.pager a:hover { border-color: var(--brand-teal); }
.pager span { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; margin-bottom: 2px; }
.pager__next { text-align: right; }

.sitefoot { border-top: 1px solid var(--line); padding: 22px 20px; text-align: center; color: var(--muted); font-size: .87rem; background: var(--surface); }

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  background: rgba(8, 14, 26, .88); padding: 24px; cursor: zoom-out;
}
.lightbox img { max-width: 96vw; max-height: 92vh; border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.lightbox[hidden] { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .layout { grid-template-columns: 1fr; gap: 0; }
  .topbar__menu { display: flex; }
  .sidebar {
    position: fixed; inset: 58px 0 auto 0; z-index: 35; max-height: calc(100vh - 58px);
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: 14px 20px 20px; display: none;
  }
  .sidebar.is-open { display: block; }
  .toc ul { columns: 1; }
  .media--wide { margin-left: 0; margin-right: 0; }
  .media-pair { grid-template-columns: 1fr; }
  .topbar__app { display: none; }
}
@media (max-width: 620px) {
  .search { max-width: none; }
  .pager { flex-direction: column; }
  .pager a { flex: 1 1 auto; }

  /* Adding the screenshot switch put the top bar over a phone's width — 444px on a 390px screen —
     which widened the whole page. Two things were needed, and the second is the non-obvious one:
     a flex item will not shrink below its content's intrinsic width unless min-width is cleared,
     so the search box was holding the bar open however narrow the screen got. */
  /* The top bar overflowed a phone's width — 444px on a 390px screen — which widened the whole
     page. The space comes from the wordmark rather than from the search box: a flex item will not
     shrink below its content's intrinsic width unless min-width is cleared, and clearing it
     collapsed the search to a stub you could not type in. The logo alone still identifies the bar,
     and search stays usable.

     The screenshot switch that originally caused the overflow has since moved out of the header and
     under each screenshot. That did give the space back — measured at 390px, showing the wordmark
     again no longer overflows the bar. It is still hidden on purpose: the wordmark takes its 104px
     from the search box, which drops from 232px to 136px. Branding the bar twice is not worth
     halving the one control on it people actually use. */
  .topbar { gap: 10px; padding: 10px 12px; }
  .topbar__actions { gap: 8px; }
  .topbar__brand span { display: none; }
  .search, .search input { min-width: 0; }
}

@media print {
  /* The toggle is interactive and prints as a pair of dead pills, so drop it — the sheet keeps
     whichever screenshot was on screen when the reader pressed print. */
  .topbar, .sidebar, .pager, .sitefoot, .toc, .shottoggle { display: none; }
  html[data-shots-ui="on"] .shottoggle { display: none; }
  .layout { display: block; padding: 0; }
  .media__link { break-inside: avoid; }
}