/* Pet Care Alliance design tokens + base components.
   ONE PLACE TO RE-BRAND: edit the token block below (light) and the dark block under it. Everything else in the app
   (shell.css, today.css, palette.css, support, ziggy, walker app, auth pages) reads these variables.
   Contrast pairs for every token are checked by docs/contrast_check.py; see docs/BRAND.md. */
:root{
  /* brand: royal blue (matches the logo) */
  --brand:#1D4ED8;--brand-hover:#1E40AF;--brand-ink:#1E3A8A;--brand-tint:#E3ECFD;--on-brand:#FFFFFF;
  --link:#1E40AF;--focus:#1D4ED8;
  /* accent: warm coral, ONLY for the single most important action and small highlights */
  --accent:#F97A2B;--accent-hover:#EE6A18;--on-accent:#1F1308;--accent-ink:#B03F06;--accent-tint:#FFE9D9;
  /* surfaces: warm sand / stone */
  --bg:#F5F8FD;--card:#FFFFFF;--sunk:#EDF2FA;--hover:#EEF3FB;--line:#D0D9E8;--line-soft:#E1E8F3;--field-line:#7A8499;
  --ink:#15203A;--muted:#4F5B73;
  /* status */
  --ok:#15803D;--ok-solid:#15803D;--ok-bg:#DCF3E4;--ok-ink:#0E5F2D;
  --warn:#9A5B00;--warn-bg:#FDEFCB;--warn-ink:#6B3F00;
  --bad:#B42318;--bad-solid:#B42318;--bad-bg:#FDE4E0;--bad-ink:#8E1B12;
  --info-bg:var(--brand-tint);--info-ink:var(--brand-ink);
  --neutral-bg:#E6EBF4;--neutral-ink:#414B62;
  /* shape + depth + type */
  --radius:12px;--radius-sm:8px;--radius-btn:10px;--radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(21,32,58,.06),0 1px 3px rgba(21,32,58,.05);
  --shadow-md:0 8px 24px rgba(21,32,58,.12);
  --font:ui-rounded,"SF Pro Rounded","Segoe UI Variable Display","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --fs-xs:12px;--fs-sm:13px;--fs-md:15px;--fs-lg:18px;--fs-xl:22px;--fs-2xl:28px;
  --panel-bg:#0B2A5B;--panel-ink:#FFFFFF;--panel-sub:#DCE8FF;
  /* legacy names kept working (other templates/CSS use them) */
  --blue:var(--brand);--tint:var(--brand-tint);--teal:var(--brand-ink);
  color-scheme:light dark;
  --m1:#0B2A5B;--m2:#1D4ED8;--m3:#0EA5E9;--m4:#5CC4FA;--wm-a:#0B2A5B;--wm-b:#1D4ED8;   /* logo colors */
}
@media (prefers-color-scheme:dark){:root{
  --brand:#2F5FD6;--brand-hover:#4372E6;--brand-ink:#A9C4FF;--brand-tint:#14264A;--on-brand:#FFFFFF;
  --link:#8FB4FF;--focus:#8FB4FF;
  --accent:#F97A2B;--accent-hover:#FB8C45;--on-accent:#1F1308;--accent-ink:#FDBA74;--accent-tint:#3A2414;
  --bg:#0B1424;--card:#111E33;--sunk:#0D1A2D;--hover:#182A47;--line:#2A3F63;--line-soft:#1E3050;--field-line:#6482AD;
  --ink:#E8EEF8;--muted:#9DB0CF;
  --ok:#4ADE80;--ok-solid:#177A43;--ok-bg:#12392A;--ok-ink:#86EFAC;
  --warn:#FBBF24;--warn-bg:#3A2D0E;--warn-ink:#FCD34D;
  --bad:#FCA5A5;--bad-solid:#C2362B;--bad-bg:#3F1B18;--bad-ink:#FCA5A5;
  --neutral-bg:#1F2F4A;--neutral-ink:#B7C6E0;
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);--shadow-md:0 10px 28px rgba(0,0,0,.5);
  --panel-bg:#0B2A5B;--panel-sub:#C7D8FF;
  --m1:#B7D0FF;--m2:#5B8CFF;--wm-a:#E8F0EE;--wm-b:#7DB7FF;   /* logo colors on dark */
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:var(--fs-md)/1.5 var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
::selection{background:var(--brand);color:var(--on-brand)}
a{color:var(--link);text-decoration:none;text-underline-offset:2px}a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.brand{font-weight:800;font-size:20px;color:var(--brand);padding:4px 10px 14px;display:block}

/* wordmark: <span class="wm"><span class="wm-a">Pet Care</span> <span class="wm-b">Alliance</span></span> */
.wm{font-weight:800;letter-spacing:-.02em;font-size:1.25em;line-height:1;white-space:nowrap}
.wm-a{color:var(--wm-a)}.wm-b{color:var(--wm-b)}
.wm.on-dark .wm-a,.wm.on-dark .wm-b{color:#fff}.wm.on-dark .wm-b{opacity:.82}

main{padding:26px 32px;max-width:1200px;width:100%}
h1{font-size:var(--fs-2xl);line-height:1.2;letter-spacing:-.015em;font-weight:750;margin:0 0 4px}
h2{font-size:var(--fs-lg);line-height:1.3;font-weight:700;margin:26px 0 10px}
h3{font-size:16px;line-height:1.35;font-weight:700}
.sub{color:var(--muted);margin:0 0 20px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.right{margin-left:auto}
.grid{display:grid;gap:14px}.g4{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}.g2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-sm)}
.stat b,.money,.num-t{font-variant-numeric:tabular-nums}
.stat b{display:block;font-size:var(--fs-2xl);line-height:1.1;font-weight:750}.stat span{color:var(--muted);font-size:var(--fs-sm)}

/* tables: no zebra, comfortable density, hover row. Add class "table-sticky" for a sticky header. */
table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line-soft);vertical-align:top}
th{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:var(--muted);background:var(--sunk);border-bottom:1px solid var(--line)}
tbody tr:hover td{background:var(--hover)}
tr:last-child td{border-bottom:0}
.table-sticky th{position:sticky;top:var(--sh-top-h,0);z-index:2}

/* buttons: primary (brand), secondary (.ghost / .secondary, outline), quiet (.quiet), accent (.accent: one per screen) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;border:1px solid transparent;background:var(--brand);color:var(--on-brand);
  padding:8px 16px;border-radius:var(--radius-btn);font:inherit;font-weight:600;line-height:1.2;cursor:pointer;text-align:center;
  transition:background-color .15s ease,border-color .15s ease,transform .05s ease}
.btn:hover{background:var(--brand-hover);text-decoration:none;color:var(--on-brand)}
.btn:active{transform:translateY(1px)}
.btn.ghost,.btn.secondary{background:transparent;color:var(--link);border-color:var(--field-line)}
.btn.ghost:hover,.btn.secondary:hover{background:var(--brand-tint);border-color:var(--brand);color:var(--link)}
.btn.quiet{background:transparent;color:var(--link);border-color:transparent}
.btn.quiet:hover{background:var(--brand-tint);color:var(--link)}
.btn.accent{background:var(--accent);color:var(--on-accent)}.btn.accent:hover{background:var(--accent-hover);color:var(--on-accent)}
.btn.danger{background:var(--bad-solid);color:#fff}.btn.danger:hover{background:var(--bad-solid);filter:brightness(1.1);color:#fff}
.btn.teal{background:var(--brand-ink);color:var(--card)}.btn.teal:hover{background:var(--brand-ink);filter:brightness(1.12);color:var(--card)}
.btn.small{min-height:32px;padding:4px 12px;font-size:var(--fs-sm);border-radius:8px}
.btn[disabled],.btn:disabled,.btn.disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;pointer-events:none;filter:none}
@media (pointer:coarse){.btn.small{min-height:40px}}

/* forms */
.input,select,textarea{width:100%;min-height:40px;padding:8px 12px;border:1px solid var(--field-line);border-radius:var(--radius-btn);font:inherit;background:var(--card);color:var(--ink);
  transition:border-color .15s ease,box-shadow .15s ease}
.input::placeholder,textarea::placeholder{color:var(--muted);opacity:.85}
.input:hover,select:hover,textarea:hover{border-color:var(--brand)}
.input:focus,select:focus,textarea:focus{outline:3px solid var(--focus);outline-offset:1px;border-color:var(--brand)}
.input:disabled,select:disabled,textarea:disabled{background:var(--sunk);color:var(--muted);cursor:not-allowed}
input[type=checkbox],input[type=radio]{accent-color:var(--brand);width:18px;height:18px}
.filter .input{width:auto}
label{display:block;font-weight:600;margin:12px 0 4px}.help{color:var(--muted);font-size:var(--fs-sm)}.err{color:var(--bad);font-size:var(--fs-sm)}
.form{max-width:640px}.form ul{list-style:none;padding:0;margin:0;columns:2}.form li label{font-weight:400;margin:2px 0}

/* status chips (pills) */
.pill{display:inline-block;padding:2px 10px;border-radius:var(--radius-pill);font-size:var(--fs-xs);font-weight:600;line-height:1.5;background:var(--brand-tint);color:var(--brand-ink)}
.pill.completed,.pill.paid{background:var(--ok-bg);color:var(--ok-ink)}
.pill.in_progress,.pill.sent{background:var(--info-bg);color:var(--info-ink)}
.pill.cancelled,.pill.void{background:var(--neutral-bg);color:var(--neutral-ink)}
.pill.overdue{background:var(--bad-bg);color:var(--bad-ink)}
.pill.scheduled,.pill.draft{background:var(--warn-bg);color:var(--warn-ink)}

/* messages */
.msg{padding:10px 14px;border-radius:var(--radius-btn);margin:0 0 10px;background:var(--brand-tint);color:var(--ink);border-left:4px solid var(--brand)}
.msg.success{background:var(--ok-bg);border-left-color:var(--ok-solid)}
.msg.warning{background:var(--warn-bg);border-left-color:var(--warn)}
.msg.error{background:var(--bad-bg);border-left-color:var(--bad-solid)}
.muted{color:var(--muted)}.nowrap{white-space:nowrap}

/* friendly empty state: <div class="empty"><div class="empty-ico">...</div><p>Nothing here yet.</p></div> */
.empty{text-align:center;padding:36px 16px;border:1.5px dashed var(--line);border-radius:var(--radius);color:var(--muted);background:transparent}
.empty-ico{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--brand-tint);color:var(--brand-ink);margin-bottom:8px}
/* empty table rows (<td colspan class=muted>) get a small paw and centred, friendlier spacing */
td.muted[colspan]{text-align:center;padding:26px 14px}
td.muted[colspan]::before{content:"";display:block;width:34px;height:34px;margin:0 auto 6px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%2314A398' fill-opacity='.55'%3E%3Cellipse cx='118' cy='252' rx='38' ry='54' transform='rotate(-28 118 252)'/%3E%3Cellipse cx='190' cy='160' rx='42' ry='58' transform='rotate(-10 190 160)'/%3E%3Cellipse cx='322' cy='160' rx='42' ry='58' transform='rotate(10 322 160)'/%3E%3Cellipse cx='394' cy='252' rx='38' ry='54' transform='rotate(28 394 252)'/%3E%3Cellipse cx='256' cy='346' rx='118' ry='96'/%3E%3C/svg%3E") no-repeat center/contain}
tbody tr:hover td.muted[colspan]{background:transparent}
.empty p{margin:4px 0 12px}

#map{height:460px;border-radius:var(--radius);border:1px solid var(--line)}
.dot{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:6px}
.pin{width:26px;height:26px;border-radius:50%;color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;border:2px solid #fff;box-shadow:0 1px 4px #0006}

/* logo + wordmark lockup (templates/brand/_lockup.html) for public pages */
.lockup{display:inline-flex;align-items:center;gap:10px;font-size:18px}.lockup svg{width:36px;height:36px;flex:none}
.pub-head{display:flex;justify-content:center;padding:28px 16px 0}.legal-head{margin-bottom:18px}
/* signed-out pages (login, signup, MFA, password reset): brand panel + form */
.auth{max-width:420px;margin:8vh auto;padding:0 16px}
.auth-shell{min-height:100vh;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.auth-brand{position:relative;overflow:hidden;background:var(--panel-bg);color:var(--panel-ink);padding:44px 48px;display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.auth-brand a{color:inherit}
.auth-logo{display:flex;align-items:center;gap:12px;font-size:22px;text-decoration:none!important}
.auth-logo svg{width:44px;height:44px;flex:none}
.auth-pitch{position:relative;z-index:1;max-width:440px}
.auth-pitch h2{font-size:34px;line-height:1.15;letter-spacing:-.02em;margin:0 0 14px;color:var(--panel-ink)}
.auth-pitch p{font-size:17px;color:var(--panel-sub);margin:0 0 18px}
.auth-points{list-style:none;margin:0;padding:0;display:grid;gap:10px;color:var(--panel-ink);font-weight:500}
.auth-points li{display:flex;gap:10px;align-items:center}
.auth-points li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.auth-foot{position:relative;z-index:1;font-size:var(--fs-sm);color:var(--panel-sub)}
.auth-deco{position:absolute;right:-70px;bottom:-60px;width:360px;height:360px;opacity:.09;pointer-events:none}
.auth-main{display:flex;flex-direction:column;justify-content:center;padding:32px 20px;background:var(--bg)}
.auth-shell .auth{width:100%;max-width:440px;margin:0 auto;padding:0}
.auth-shell .auth h1{font-size:var(--fs-2xl);margin-bottom:6px}
.auth-shell .auth .card{padding:22px;box-shadow:var(--shadow-md)}
.auth-shell .auth .btn:not(.small){width:100%}
@media (max-width:860px){
  main{padding:18px}
  .auth-shell{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .auth-brand{padding:18px 20px;flex-direction:row;align-items:center}
  .auth-pitch,.auth-foot,.auth-deco{display:none}
  .auth-main{justify-content:flex-start;padding:24px 16px 40px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* print stays plain: neutral light tokens, no shadows, no shell */
@media print{
  :root{--bg:#fff;--card:#fff;--sunk:#f3f3f3;--hover:#fff;--line:#bbb;--line-soft:#ddd;--ink:#000;--muted:#444;--link:#000;--shadow-sm:none;--shadow-md:none;--panel-bg:#fff}
  body{background:#fff;color:#000}
  .noprint{display:none}main{padding:0}
  .card,table{box-shadow:none}
  a{color:#000;text-decoration:underline}
}

/* flag chips (apps.fields): colour + contrast-safe text are set inline from validated hex values */
.flagchips{display:inline-flex;flex-wrap:wrap;gap:4px;vertical-align:middle}
.flagchip{display:inline-block;padding:1px 7px;border-radius:var(--radius-pill,999px);font-size:11px;font-weight:700;line-height:1.5;letter-spacing:.02em;white-space:nowrap;border:1px solid rgba(0,0,0,.12)}
.ca-flagwrap{display:inline-flex;align-items:center;gap:2px;margin-right:6px}
.ca-flagwrap .ca-x{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:16px;line-height:1;padding:0 2px}
.flagrow{margin:0 0 8px}
.flagpicker summary{cursor:pointer;color:var(--link);font-size:var(--fs-sm)}
.flagpicker label{margin:4px 0}
.pv-row{margin-bottom:12px}