/* VetsLearn tools design system (2026-10 redesign, matches vetslearn.com).
   Canonical source: services/gateway/assets/sd-tools.css. After editing, run
   `node services/scripts/sync-design.mjs` to copy it into every tool's public/
   folder; services/gateway/test/tokens-sync.test.js fails if a copy drifts.
   Light theme only. Fonts are self-hosted: the @font-face rules below load
   Hanken Grotesk and IBM Plex Mono from files that sit next to this stylesheet
   (sync-design.mjs copies them into every tool). Newsreader is used by the hub
   only and is declared in gateway/lib/index-page.js. Latin subset, SIL OFL 1.1;
   licence texts are the *-license.txt files in the same folder.
   This file loads AFTER each tool's own stylesheet, so its tokens win. */
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url("hanken-grotesk-latin.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url("ibm-plex-mono-400-latin.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url("ibm-plex-mono-500-latin.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
:root {
  /* Core tokens: same names and values as vetslearn.com src/styles/tokens.css. */
  --bg: #F4F2ED;
  --bg-2: #FBFAF7;
  --bg-3: #ECE8DF;
  --bg-4: #E3DED2;
  /* The site's faintest hairline is called --line. Nine tools already use
     --line in their own stylesheets as their border colour, so here the
     faint hairline is --line-1 and --line is left to those tools. */
  --line-1: rgb(23 26 31 / .08);
  --line-2: rgb(23 26 31 / .15);
  --line-3: rgb(23 26 31 / .26);
  --ink: #15181D;
  --ink-2: #474E59;
  --ink-3: #646B76;
  --ink-4: #A4AAB3;
  --accent: #2F5278;
  --accent-2: #3F6690;
  --accent-3: #7E9BBB;
  --on-accent: #F7F5F0;
  --tint: color-mix(in oklch, var(--accent) 8%, var(--bg-2));
  --tint-2: color-mix(in oklch, var(--accent) 14%, var(--bg-2));
  --ok: #4E6B4A;
  --ok-bg: color-mix(in oklch, var(--ok) 12%, var(--bg-2));
  --warn: #7E6230;
  --warn-bg: color-mix(in oklch, var(--warn) 12%, var(--bg-2));
  --bad: #8C4A40;
  --bad-bg: color-mix(in oklch, var(--bad) 12%, var(--bg-2));
  --hi: rgb(255 255 255 / .6);
  --shadow-1: 0 1px 1px rgb(23 26 31 / .04), 0 2px 6px -2px rgb(23 26 31 / .06);
  --shadow-2: 0 1px 1px rgb(23 26 31 / .05), 0 8px 24px -12px rgb(23 26 31 / .18), 0 24px 60px -30px rgb(23 26 31 / .22);
  --font: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Newsreader', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.3, 1.4, .4, 1);
  --r-sm: 10px;
  --r: 14px;
  --r-lg: 22px;
  --r-xl: 28px;
  --nav-h: 64px;
  --tool-wrap: 1040px;

  /* Names the tool stylesheets already use, pointed at the palette above. */
  --bone: var(--bg);
  --bone-deep: var(--bg-3);
  --bone-line: var(--line-2);
  --panel: var(--bg-2);
  --ink-soft: var(--ink-2);
  /* A hair darker than the site's --ink-3: many tools set muted text on the
     deeper --bone-deep (--bg-3) surface, where --ink-3 measures 4.40:1.
     #5C636E keeps AA there (4.96:1) and on --bg (5.4:1). */
  --ink-mute: #5C636E;
  --accent-deep: var(--accent-2);
  --good: var(--ok);
  --olive: var(--ok);
  /* Form-control borders need 3:1 against the ground (WCAG 1.4.11). */
  --control-border: #7F858F;
  --radius: var(--r-sm);
  --font-display: var(--font);
  --font-sans: var(--font);
  --font-mono: var(--mono);
  --sans: var(--font);
  color-scheme: light;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px);}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-sans);font-size:17px;line-height:1.6;font-feature-settings:'ss01','cv11';-webkit-font-smoothing:antialiased;}
[hidden]{display:none!important;}
a{color:var(--accent);text-underline-offset:4px;}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--accent)!important;outline-offset:4px;}
:where(a,summary):focus-visible{border-radius:6px;}
button,input,select,textarea{font-family:var(--font-sans);}
button{cursor:pointer;transition:background-color .3s var(--ease),box-shadow .4s var(--ease),transform .5s var(--spring);}
button:disabled{cursor:not-allowed;}
code,kbd,samp,pre{font-family:var(--font-mono);}
::selection{background:color-mix(in oklch,var(--accent) 22%,transparent);}
@media screen {
  .wrap{width:100%;max-width:var(--tool-wrap);margin-inline:auto;padding-inline:24px;}

  /* Header: sticky blurred paper bar, small logo, link pill (mirrors the site nav). */
  .sd-strip{position:sticky;top:0;z-index:40;min-height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px max(24px,calc((100% - var(--tool-wrap))/2 + 24px));background:color-mix(in srgb,var(--bg) 78%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);border-bottom:1px solid var(--line-1);color:var(--ink-2);font-family:var(--font-sans);font-size:15px;letter-spacing:0;}
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.sd-strip{background:var(--bg);}}
  .sd-strip>span{display:flex;align-items:center;gap:14px;min-width:0;font-size:0;}
  .sd-strip>span::after{content:"Field tools";font:500 12px/1 var(--font-mono);letter-spacing:.02em;white-space:nowrap;color:var(--ink-2);background:var(--bg-3);border-radius:999px;padding:6px 10px;}
  .sd-strip>span>a{width:142px;height:24px;display:inline-block;flex:none;font-size:0;border-radius:6px;background:url("vetslearn-logo.svg") left center/contain no-repeat;}
  .sd-strip>a,.sd-links a{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 14px;border-radius:999px;font:500 14px/1.2 var(--font-sans);letter-spacing:.04em;color:var(--ink-2);text-decoration:none;white-space:nowrap;background:color-mix(in srgb,var(--bg-2) 60%,transparent);box-shadow:inset 0 0 0 1px var(--line-3);transition:color .3s var(--ease),background-color .3s var(--ease),box-shadow .3s var(--ease);}
  .sd-strip>a:hover,.sd-links a:hover{color:var(--ink);background:var(--bg-3);}
  .sd-links{display:flex;align-items:center;gap:2px;margin-inline-start:auto;}
  .sd-links a:not(.sd-cta){background:transparent;box-shadow:none;letter-spacing:0;font-weight:400;font-size:15px;padding-inline:12px;}
  .sd-links a:not(.sd-cta):hover{box-shadow:inset 0 0 0 1px var(--line-1);}
  .sd-links .sd-cta{margin-inline-start:10px;letter-spacing:0;font-size:15px;padding-inline:16px;}

  .skip-link{position:absolute;top:8px;left:-10000px;z-index:1000;background:var(--accent);color:var(--on-accent);padding:10px 14px;border-radius:8px;}
  .skip-link:focus{left:16px;}

  /* Page intro */
  .masthead,.site-header{padding:56px 0 32px;background:transparent;border-bottom:0;}
  h1,.masthead h1,.site-header h1{font-family:var(--font-display);font-size:clamp(32px,4vw,46px);font-weight:500;letter-spacing:-.024em;line-height:1.12;color:var(--ink);max-width:24ch;margin:14px 0 18px;text-wrap:balance;}
  h2{font-family:var(--font-display);font-weight:500;letter-spacing:-.018em;line-height:1.2;color:var(--ink);text-wrap:balance;}
  h3{font-family:var(--font-display);font-weight:500;letter-spacing:-.012em;line-height:1.3;}
  p,li{text-wrap:pretty;}
  .eyebrow,.mark{font-family:var(--font-sans);font-size:12.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);line-height:1.5;}
  .eyebrow::before,.mark::before{content:"";display:inline-block;vertical-align:middle;width:20px;height:1px;margin:-2px 12px 0 0;background:var(--accent);}
  .mark span{color:var(--ink-3);letter-spacing:.09em;}
  .subtitle,.lede,.masthead .lede{font-size:18px;line-height:1.6;color:var(--ink-2);max-width:62ch;}
  main.wrap{padding:8px 24px 56px;}

  /* Work surfaces */
  .panel{background:var(--bg-2);border:1px solid var(--line-1);border-radius:var(--r-lg);padding:32px;box-shadow:var(--shadow-2),inset 0 1px 0 var(--hi);}
  .panel h2{font-size:24px;margin-bottom:24px;}
  .grid{gap:24px;}
  .field{min-width:0;}
  .methodology{max-width:760px;} .methodology p{font-size:18px;line-height:1.65;} .methodology h2{font-size:28px;} .methodology h3{font-size:22px;} .methodology code:not(.formula){overflow-wrap:anywhere;white-space:normal;} .methodology .back{font-size:16px;min-height:44px;}
  .field label,.field>span:first-child,.field>label{font-size:16px;font-weight:500;line-height:1.45;color:var(--ink);text-transform:none;letter-spacing:0;}
  body :is(select,textarea,input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=file])){font-family:var(--font-sans);font-size:16px;line-height:1.5;min-height:48px;border:1px solid var(--control-border);border-radius:var(--r-sm);color:var(--ink);background:#FFFFFF;padding:11px 14px;max-width:100%;transition:border-color .3s var(--ease),box-shadow .3s var(--ease);}
  body :is(select,textarea,input):hover:not(:disabled):not(:focus){border-color:var(--ink-3);}
  body input::placeholder,body textarea::placeholder{color:var(--ink-3);opacity:1;}
  body input:focus,body textarea:focus,body select:focus{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in oklch,var(--accent) 12%,transparent);}
  body :is(select,textarea,input):disabled{background:var(--bg-3);color:var(--ink-3);}
  input[type=checkbox],input[type=radio],input[type=range]{accent-color:var(--accent);}
  input[type=checkbox],input[type=radio]{width:20px;height:20px;flex:none;}
  .field.checkbox label{min-height:44px;}
  .field .hint,.hint,.field-note,.key-help,.help-text,.mha-note{font-size:14px;line-height:1.55;color:var(--ink-3);}
  .char-count,.data-vintage,.editions{font-size:13px;line-height:1.55;font-variant-numeric:tabular-nums;}

  /* Actions: pill buttons, accent gradient for primary, quiet ring for secondary.
     The shared control rule below carries high specificity (its :not() list),
     so the pill rules use !important for shape and text colour. */
  body button:not(.linklike):not(.link-btn):not(.remove-btn):not(.chip):not(.tag):not(.tab),body .file-label{min-height:44px;font-family:var(--font-sans);font-size:16px;font-weight:500;letter-spacing:0;border-radius:var(--r-sm);padding:11px 20px;}
  button.primary,#submit-btn,#convert-btn,#practice-submit-btn,#storybank-submit-btn,button[type=submit],.btn-primary{border:0;border-radius:999px!important;padding-inline:24px!important;color:var(--on-accent)!important;background:linear-gradient(180deg,color-mix(in oklch,var(--accent) 80%,white) 0%,var(--accent) 60%,color-mix(in oklch,var(--accent) 92%,black) 100%);box-shadow:inset 0 1px 0 rgb(255 255 255 / .26),inset 0 -1px 0 rgb(0 0 0 / .1),0 1px 2px rgb(0 0 0 / .1),0 10px 26px -14px color-mix(in oklch,var(--accent) 60%,transparent);}
  button.primary:hover:not(:disabled),#submit-btn:hover:not(:disabled),#convert-btn:hover:not(:disabled),#practice-submit-btn:hover:not(:disabled),#storybank-submit-btn:hover:not(:disabled),button[type=submit]:hover:not(:disabled),.btn-primary:hover{background:linear-gradient(180deg,color-mix(in oklch,var(--accent) 80%,white) 0%,var(--accent) 60%,color-mix(in oklch,var(--accent) 92%,black) 100%);box-shadow:inset 0 1px 0 rgb(255 255 255 / .28),inset 0 -1px 0 rgb(0 0 0 / .14),0 2px 4px rgb(0 0 0 / .16),0 18px 36px -14px color-mix(in oklch,var(--accent) 85%,transparent);}
  button.primary:active:not(:disabled),#submit-btn:active:not(:disabled),#convert-btn:active:not(:disabled),#practice-submit-btn:active:not(:disabled),#storybank-submit-btn:active:not(:disabled),button[type=submit]:active:not(:disabled){transform:scale(.97);transition-duration:.1s;}
  button.primary:disabled,#submit-btn:disabled,#convert-btn:disabled,#practice-submit-btn:disabled,#storybank-submit-btn:disabled,button[type=submit]:disabled{opacity:.55;box-shadow:none;}
  /* !important on radius: the shared control rule above is more specific. */
  button.secondary,button.ghost,.file-label.secondary{border:0;border-radius:999px!important;color:var(--ink);background:color-mix(in srgb,var(--bg-2) 60%,transparent);box-shadow:inset 0 0 0 1px var(--line-3),inset 0 1px 0 var(--hi);}
  button.secondary:hover:not(:disabled),button.ghost:hover:not(:disabled),.file-label.secondary:hover{background:var(--bg-3);}
  button.danger{color:var(--bad);}
  button:disabled{box-shadow:none;}
  summary{min-height:44px;cursor:pointer;font-family:var(--font-sans);font-size:16px;font-weight:500;color:var(--accent);padding-block:10px;}
  .adjustments summary,.coverage summary,.field-group summary{font-size:16px;}
  .field-group,.adjustments{border-color:var(--line-2);}
  .coverage{background:transparent;border:1px solid var(--line-2);border-radius:var(--r);padding:8px 20px;}
  .coverage .hint{font-size:14px;}

  /* Notices keep their wording; only the look changes. */
  .opsec-notice,.opsec-note,.localstorage-notice,.localstorage-note,.sd-ai-notice{font-family:var(--font-sans);font-size:14px;line-height:1.6;}
  .opsec-notice,.sd-ai-notice{background:var(--warn-bg);border:0;border-left:3px solid var(--warn);color:var(--ink);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:12px 16px;}
  /* Standard AI notice: sits immediately before an input whose text goes to the AI provider. */
  .sd-ai-notice{margin:0 0 12px;max-width:84ch;}
  .sd-ai-notice[hidden]{display:none;}
  /* D10: the data date the gateway adds at the top of <main>, and the notice when a review is due. */
  .vl-checked{font-family:var(--font-mono);font-size:12.5px;line-height:1.5;letter-spacing:.01em;color:var(--ink-3);margin:0 0 12px;}
  .vl-stale{font-family:var(--font-sans);font-size:14px;line-height:1.6;background:var(--warn-bg);border-left:3px solid var(--warn);color:var(--ink);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:12px 16px;margin:0 0 16px;max-width:84ch;}
  .error-msg,.error,.form-error,.import-error{color:var(--bad);}

  /* Results */
  .card,.result-card,.benefit-card,.program-card{border-radius:var(--r);background:var(--bg-2);border-color:var(--line-2);}
  .result,.results,.results-section,.results-wrap{scroll-margin-top:calc(var(--nav-h) + 16px);}
  .result .range,.salary-range{border-radius:var(--r);}
  .result h2{font-size:26px;}
  .breakdown{font-size:16px;font-variant-numeric:tabular-nums;}
  .breakdown td{padding-block:12px;}
  .typeahead-list{background:var(--bg-2);border-color:var(--control-border);border-radius:var(--r-sm);box-shadow:var(--shadow-2);}

  /* Related tools: chip row */
  .sd-next{max-width:calc(var(--tool-wrap) - 48px);margin:24px auto 0;display:flex;flex-wrap:wrap;gap:10px;align-items:center;border-top:1px solid var(--line-1);padding:28px 0;}
  .sd-next>span{font-family:var(--font-sans);font-size:12.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-right:8px;}
  .sd-next a{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;font-family:var(--font-sans);font-size:15px;font-weight:500;color:var(--ink);background:var(--bg-2);border-radius:999px;text-decoration:none;box-shadow:inset 0 0 0 1px var(--line-2),inset 0 1px 0 var(--hi);transition:box-shadow .3s var(--ease),background-color .3s var(--ease),transform .5s var(--spring);}
  .sd-next a:hover{box-shadow:inset 0 0 0 1px var(--line-3);transform:translateY(-1px);}
  /* Tool-to-lesson link, added by /design/vl-tools.js after a run. */
  .sd-lesson-check{max-width:calc(var(--tool-wrap) - 48px);margin:24px auto 0;padding:20px 24px;background:var(--tint);border-radius:var(--r);box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--accent) 14%,transparent);}
  .sd-lesson-check h2{font-size:20px;line-height:1.3;margin:0 0 6px;}
  .sd-lesson-check p{font-size:16px;color:var(--ink-2);margin:0 0 12px;max-width:70ch;}
  .sd-lesson-check a{display:inline-flex;align-items:center;min-height:44px;font-weight:500;color:var(--accent);}

  /* Footer: quiet, hairline above, entity line and site links. */
  .foot,.site-footer{border-top:1px solid var(--line-1);padding:40px 0 calc(48px + env(safe-area-inset-bottom,0px));background:transparent;margin-top:0;color:var(--ink-3);font-size:15px;}
  .foot p,.site-footer p{max-width:84ch;}
  .foot .disclaimer,.site-footer .disclaimer,.disclaimer,.attribution,.foot .localstorage-note,.sd-data-note{font-size:14px;line-height:1.6;color:var(--ink-3);max-width:84ch;}
  .disclaimer+.disclaimer{margin-top:12px;}
  .sd-foot-links{display:flex;flex-wrap:wrap;align-items:center;gap:4px 24px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line-1);font-size:14px;color:var(--ink-3);}
  .sd-foot-links a{display:inline-flex;align-items:center;min-height:32px;color:var(--ink-2);text-decoration:none;}
  .sd-foot-links a:hover{color:var(--ink);text-decoration:underline;}

  .controls{position:static;border-bottom:1px solid var(--line-1);background:transparent;}
  .controls>.wrap{padding-top:8px;padding-bottom:32px;}
  .keyblock{background:var(--bg-2);border:1px solid var(--line-1);border-radius:var(--r);padding:24px;box-shadow:var(--shadow-1);}
  .filters{gap:20px;}
  [aria-busy=true]{cursor:progress;}
  @keyframes tool-surface-in{from{transform:translateY(8px);}to{transform:translateY(0);}}
  @media(prefers-reduced-motion:no-preference){.result:not([hidden]),#results-section:not([hidden]){animation:tool-surface-in .32s var(--ease);}}
  @media(max-width:1040px){.sd-next,.sd-lesson-check{margin-inline:24px;}}
  @media(max-width:900px){.sd-links a:not(.sd-cta){display:none;}}
  @media(max-width:640px){
    .wrap{padding-inline:20px;}main.wrap{padding:0 20px 40px;}
    .sd-strip{min-height:60px;padding:8px 20px;gap:10px;}.sd-strip>span{gap:10px;}.sd-strip>span>a{width:130px;height:22px;}
    .sd-strip>a,.sd-links a{padding-inline:12px;font-size:13px;}.sd-links .sd-cta{margin-inline-start:0;font-size:14px;}
    .masthead,.site-header{padding:36px 0 24px;}h1,.masthead h1,.site-header h1{font-size:32px;margin-bottom:14px;}
    .subtitle,.lede,.masthead .lede{font-size:17px;}.panel{padding:22px;border-radius:var(--r);}
    .grid,.filters{gap:20px;}.sd-next{margin-inline:20px;gap:8px;}.sd-lesson-check{margin-inline:20px;}.sd-next>span{flex-basis:100%;}
    .keyblock{padding:20px;}.foot,.site-footer{padding:32px 0 calc(36px + env(safe-area-inset-bottom,0px));}
  }
  @media(max-width:420px){.sd-strip>span::after{display:none;}}
  /* Touch: 44px targets for every shell link. */
  @media(pointer:coarse){.sd-strip>a,.sd-links a,.sd-foot-links a,summary{min-height:44px;}.sd-strip>span>a{height:44px;}input[type=range],input[type=file]{min-height:44px;}}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*,*::before,*::after{animation:none!important;transition:none!important;}}
@media print{.sd-lesson-check{display:none!important;}}