/* [REQ-331] VETCARE HEALTH'S THEME — every page in the integrated landing's design.

   Owner, 2026-10-02: *"change the design of the care room page, join and all other pages
   for VetCare Health so that they all match color, fonts, design, look and feel of this
   new landing page. Make sure you won't affect vets.wikipropedia!"*

   HOW IT CANNOT REACH WIKIPROPEDIA. Two locks, and either one is enough:
     1. This is a static file that only VetCare Health's pages link (the server adds the
        <link> on that host; client/src/lib/brand.js does in development). A Wikipropedia
        page never requests it.
     2. Every rule below is written under `html[data-brand="vetcare"]`, an attribute only
        VetCare Health's pages carry.
   test/vetcare-theme.test.mjs asserts the second for every selector in this file.

   HOW IT WORKS. The app's stylesheet (client/src/styles.css) draws nearly everything from
   a dozen custom properties. Redefining those for this brand re-colours every page at
   once; the rules after them handle what a property cannot — the typeface, the serif
   headlines, and the handful of surfaces with a colour written straight in.

   THE VALUES ARE THE LANDING'S OWN (client/src/pages/integrated-flow.css, the `.vcflow`
   block, from the vetcare.health style guide): brand green #087F6D, Deep Green #056354,
   Care Mint #E8F6F2, Mint White #F5FBF9, ink #171717 / #666666 / #8C8C8C, rule #E3E5E4,
   14px radius, Inter. Composition target: mostly white, some grey, a little green.

   THE LANDING ITSELF IS LEFT ALONE. Pages drawn inside `.vcflow` — the integrated
   landing, the pay page, the join page — ARE the design this file copies, and they dress
   the same chat component in their own stylesheet. A rule here that could match inside
   one of them carries `:not(.vcflow *)`, so it styles the app's other pages and never
   repaints the original (it once did: a box and a shadow appeared around the landing's
   chat, and the message box lost its green border — owner, 2026-10-02). */

/* [REQ-379] Inter, SELF-HOSTED — one variable file for every weight (400–800), latin.
   Was an @import of Google Fonts: a chain the browser had to walk (this file → Google's
   CSS → the font) before it would paint anything, measured at seconds on a phone. The
   page preloads this same URL (server/content/brand.js brandThemeHtml), so it is usually
   in hand before this rule is even read. `swap`: text paints at once in the fallback. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/inter-latin-var.woff2') format('woff2');
}

/* ------------------------------------------------------------------ the tokens */

html[data-brand="vetcare"] {
  --green: #087F6D;
  --green-dark: #056354;
  --green-light: #E8F6F2;
  /* ONE ACCENT. The default brand pairs its green with an orange call to action; this
     design has no second colour, so every orange becomes the brand green. */
  --orange: #087F6D;
  --orange-dark: #056354;
  --orange-button: #087F6D;
  --orange-button-hover: #056354;
  --ink: #171717;
  --ink-2: #666666;
  --bg: #ffffff;
  --border: #E3E5E4;
  --radius: 14px;
  --shadow: 0 4px 14px rgba(0, 0, 0, 0.06);

  /* The landing's own names, for the rules below. */
  --vc-brand: #087F6D;
  --vc-brand-dark: #056354;
  --vc-mint: #E8F6F2;
  --vc-mint-white: #F5FBF9;
  --vc-ink: #171717;
  --vc-ink-2: #666666;
  --vc-ink-3: #8C8C8C;
  --vc-line: #E3E5E4;
  --vc-line-2: #EDEFEE;
  --vc-urgent: #D92D20;
  --vc-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------------------------------------------------------------- the typeface */

html[data-brand="vetcare"],
html[data-brand="vetcare"] body,
html[data-brand="vetcare"] #root {
  font-family: var(--vc-font);
  background: var(--bg);
  color: var(--ink);
}
html[data-brand="vetcare"] input,
html[data-brand="vetcare"] textarea,
html[data-brand="vetcare"] select,
html[data-brand="vetcare"] button {
  font-family: inherit;
}

/* THE SERIF HEADLINES BECOME THE LANDING'S: Inter, bold, tightly tracked. The default
   brand sets its display type in a book serif; this design has one family. */
html[data-brand="vetcare"] .hero h1,
html[data-brand="vetcare"] .welcome-h1,
html[data-brand="vetcare"] .welcome-transfer-title,
html[data-brand="vetcare"] .onb-h1,
html[data-brand="vetcare"] .onb-h2,
html[data-brand="vetcare"] .onb-intake-text,
html[data-brand="vetcare"] .onb-rec-headrow h3,
html[data-brand="vetcare"] .onb-path-t,
html[data-brand="vetcare"] .onb-vicky-body h3,
html[data-brand="vetcare"] .la-wordmark,
html[data-brand="vetcare"] .legal-page h1,
html[data-brand="vetcare"] .section h2,
html[data-brand="vetcare"] .auth-card h1 {
  font-family: var(--vc-font);
  font-weight: 700;
  letter-spacing: -0.02em;
}
html[data-brand="vetcare"] .welcome-step-n:not(.vcflow *),
html[data-brand="vetcare"] .onb-path-n {
  font-family: var(--vc-font);
  font-weight: 600;
}
html[data-brand="vetcare"] .hero h1 { line-height: 1.12; }
html[data-brand="vetcare"] .welcome-h1 { line-height: 1.2; }

/* ------------------------------------------------------------------ the buttons */

/* The landing's button: brand green, no glow, the field's radius on a full-width
   button and a pill on a small one. The default brand's orange drop shadow goes. */
html[data-brand="vetcare"] .btn {
  font-weight: 500;
  line-height: 1.2;
}
html[data-brand="vetcare"] .btn-primary,
html[data-brand="vetcare"] .btn-green {
  background: var(--vc-brand);
  color: #fff;
  box-shadow: none;
}
html[data-brand="vetcare"] .btn-primary:hover,
html[data-brand="vetcare"] .btn-green:hover {
  background: var(--vc-brand-dark);
}
html[data-brand="vetcare"] .btn-ghost {
  background: #fff;
  border-color: var(--vc-line);
  color: var(--vc-ink);
}
html[data-brand="vetcare"] .btn-ghost:hover { border-color: var(--vc-brand); color: var(--vc-brand); }

html[data-brand="vetcare"] a:not(.vcflow *) { color: var(--vc-brand); }
/* [REQ-699] …except a button-styled link: green text on a green button left the label
   invisible ("Ask about your pet" on /advice, "Ask a vet now" on every article). */
html[data-brand="vetcare"] a.btn-primary:not(.vcflow *),
html[data-brand="vetcare"] a.btn-primary:not(.vcflow *):hover { color: #fff; }

/* visible keyboard focus, as the landing draws it */
html[data-brand="vetcare"] :not(.vcflow *):focus-visible {
  outline: 2px solid var(--vc-brand);
  outline-offset: 2px;
}

/* ------------------------------------------------------------- the conversation */

/* The landing's two bubbles, wherever the app draws a conversation — the intake chat on
   a landing page and the Care Room alike: the care team speaks on Care Mint with the
   notch on the corner it speaks from, the owner on white inside a hairline. The default
   brand's solid green owner bubble would put the page's one accent on every message. */
html[data-brand="vetcare"] .bubble:not(.vcflow *) {
  border-radius: 14px;
  line-height: 1.5;
}
html[data-brand="vetcare"] .bubble.bot:not(.vcflow *) {
  background: var(--vc-mint);
  border: 1px solid var(--vc-mint);
  border-radius: 14px;
  border-top-left-radius: 3px;
  color: var(--vc-ink);
}
html[data-brand="vetcare"] .bubble.user:not(.vcflow *) {
  background: #fff;
  border: 1px solid var(--vc-line);
  border-radius: 14px;
  border-top-right-radius: 3px;
  color: var(--vc-ink);
}
html[data-brand="vetcare"] .bubble.user a:not(.vcflow *) { color: var(--vc-brand); }
html[data-brand="vetcare"] .bubble.bot a:not(.vcflow *) { color: var(--vc-brand); text-decoration: underline; text-underline-offset: 2px; }
/* Vicky typing: the landing's dots on its mint. */
html[data-brand="vetcare"] .bubble.pulse:not(.vcflow *) { background: var(--vc-mint); border-color: var(--vc-mint); }
html[data-brand="vetcare"] .bubble.pulse .dot:not(.vcflow *) { background: var(--vc-ink-3); }
/* A file inside a mint bubble sits on white, so it still reads as a separate object. */
html[data-brand="vetcare"] .bubble.bot .msg-att-file:not(.vcflow *) { background: #fff; }

/* The chat card on a landing page: a hairline box, no drop shadow, the header in Deep
   Green rather than a gradient. */
html[data-brand="vetcare"] .chat-card:not(.vcflow *) {
  border: 1px solid var(--vc-line);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
html[data-brand="vetcare"] .chat-header:not(.vcflow *) {
  background: var(--vc-brand-dark);
  color: #fff;
}
html[data-brand="vetcare"] .chat-body:not(.vcflow *) { background: #fff; }

/* Every box you type in: the landing's field — hairline, 14px corners, a green ring on
   focus. */
html[data-brand="vetcare"] .chat-input textarea:not(.vcflow *),
html[data-brand="vetcare"] .cr-input textarea,
html[data-brand="vetcare"] .conv-input textarea,
html[data-brand="vetcare"] .conv-input input,
html[data-brand="vetcare"] .field input,
html[data-brand="vetcare"] .field textarea,
html[data-brand="vetcare"] .field select,
html[data-brand="vetcare"] .welcome-field input {
  border: 1px solid var(--vc-line);
  border-radius: 14px;
  color: var(--vc-ink);
  background: #fff;
}
html[data-brand="vetcare"] .chat-input textarea:not(.vcflow *):focus,
html[data-brand="vetcare"] .cr-input textarea:focus,
html[data-brand="vetcare"] .conv-input textarea:focus,
html[data-brand="vetcare"] .conv-input input:focus,
html[data-brand="vetcare"] .field input:focus,
html[data-brand="vetcare"] .field textarea:focus,
html[data-brand="vetcare"] .field select:focus,
html[data-brand="vetcare"] .welcome-field input:focus {
  outline: none;
  border-color: var(--vc-brand);
  box-shadow: 0 0 0 3px rgba(8, 127, 109, 0.16);
}
html[data-brand="vetcare"] .chat-input textarea:not(.vcflow *)::placeholder,
html[data-brand="vetcare"] .cr-input textarea::placeholder,
html[data-brand="vetcare"] .field input::placeholder,
html[data-brand="vetcare"] .welcome-field input::placeholder { color: var(--vc-ink-3); }

/* The send button and the attach button, as the landing's composer draws them. */
html[data-brand="vetcare"] .chat-input button[type="submit"]:not(.vcflow *),
html[data-brand="vetcare"] .cr-input button[type="submit"],
html[data-brand="vetcare"] .conv-input button[type="submit"] {
  background: var(--vc-brand);
  color: #fff;
  border-radius: 100px;
  font-weight: 500;
  box-shadow: none;
}
html[data-brand="vetcare"] .chat-input button[type="submit"]:not(.vcflow *):hover:not(:disabled),
html[data-brand="vetcare"] .cr-input button[type="submit"]:hover:not(:disabled),
html[data-brand="vetcare"] .conv-input button[type="submit"]:hover:not(:disabled) {
  background: var(--vc-brand-dark);
}
html[data-brand="vetcare"] .chat-input .attach-btn:not(.vcflow *),
html[data-brand="vetcare"] .cr-input .attach-btn {
  background: #fff;
  border: 1px solid var(--vc-line);
  color: var(--vc-ink-2);
}
html[data-brand="vetcare"] .chat-input .attach-btn:not(.vcflow *):hover:not(:disabled),
html[data-brand="vetcare"] .cr-input .attach-btn:hover:not(:disabled) {
  background: #fff;
  border-color: var(--vc-brand);
  color: var(--vc-brand);
}

/* ---------------------------------------------------------------- the Care Room */

/* The room's header and the app's side panel sit on the landing's Mint White band; the
   conversation itself stays white, as the chat does on the landing. */
html[data-brand="vetcare"] .cr-header {
  background: var(--vc-mint-white);
  border-bottom: 1px solid var(--vc-line);
}
html[data-brand="vetcare"] .sidebar,
html[data-brand="vetcare"] .app-topbar {
  background: var(--vc-mint-white);
  border-color: var(--vc-line);
}
html[data-brand="vetcare"] .contact-item:hover,
html[data-brand="vetcare"] .contact-item.active { background: var(--vc-mint); }
html[data-brand="vetcare"] .app-burger { border-color: var(--vc-line); border-radius: 12px; }

/* Names over a bubble: the landing writes the name in ink and the role in grey. The
   default brand colours a vet's name green; here the green is kept for actions. */
html[data-brand="vetcare"] .cr-author.vet,
html[data-brand="vetcare"] .bot-author.vet { color: var(--vc-ink); }

/* Vicky's own chip and tile were the default brand's orange; here she is part of the
   same care team and wears the same mint. */
html[data-brand="vetcare"] .cr-chip-vicky {
  background: var(--vc-mint);
  color: var(--vc-brand-dark);
  border-color: var(--vc-mint);
}
html[data-brand="vetcare"] .vicky-tile { border-color: var(--vc-line); background: var(--vc-mint-white); }
html[data-brand="vetcare"] .pill.orange { background: var(--vc-mint); color: var(--vc-brand-dark); }

/* Cards inside the conversation: hairline, 14px corners, no coloured edge. */
html[data-brand="vetcare"] .cr-diagnosis-card,
html[data-brand="vetcare"] .cr-rec,
html[data-brand="vetcare"] .cr-consilium {
  border-color: var(--vc-line);
  border-radius: 14px;
}
html[data-brand="vetcare"] .cr-diagnosis-head { border-bottom-color: var(--vc-line); }
html[data-brand="vetcare"] .cr-scribe-chip,
html[data-brand="vetcare"] .cr-quick-reply,
html[data-brand="vetcare"] .cr-card-act.is-done { border-color: var(--vc-mint); }
html[data-brand="vetcare"] .cr-card-preset { border-color: var(--vc-line); }
html[data-brand="vetcare"] .cr-diagnosis-cta { background: var(--vc-brand); border-radius: 100px; }

/* THE PAYWALL CARD — "View response". The landing's join card: white, hairline, 14px
   corners, and the one green button on the screen. */
html[data-brand="vetcare"] .cr-paywall-card {
  background: #fff;
  border: 1px solid var(--vc-line);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
html[data-brand="vetcare"] .cr-paywall-title {
  color: var(--vc-ink);
  font-weight: 700;
  letter-spacing: -0.01em;
}
html[data-brand="vetcare"] .cr-paywall-body { color: var(--vc-ink-2); }
html[data-brand="vetcare"] .cr-paywall-body strong,
html[data-brand="vetcare"] .cr-paywall-fine { color: var(--vc-ink); }
html[data-brand="vetcare"] .cr-paywall-cta {
  background: var(--vc-brand);
  color: #fff;
  border-radius: 14px;
  font-weight: 500;
  box-shadow: none;
}
html[data-brand="vetcare"] .cr-paywall-cta:hover:not(:disabled) { background: var(--vc-brand-dark); }
html[data-brand="vetcare"] .cr-paywall-error { color: var(--vc-urgent); }
html[data-brand="vetcare"] .cr-send-lock {
  background: var(--vc-mint-white);
  border-color: var(--vc-line);
}
html[data-brand="vetcare"] .cr-send-lock-text { color: var(--vc-ink); }
html[data-brand="vetcare"] .cr-jump-latest { background: var(--vc-brand); }

/* ----------------------------------------- /welcome, the hand-off, sign in, account */

/* The same page the join design dresses (pages/join-integrated.css), for the states
   that page does not cover: the payment check, "you're all set", a refused card. A white
   page and one centred column, with no aurora and no glass card. */
html[data-brand="vetcare"] .welcome-page {
  background: var(--vc-mint-white);
}
html[data-brand="vetcare"] .welcome-aurora { display: none; }
html[data-brand="vetcare"] .welcome-shell {
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--vc-line);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
html[data-brand="vetcare"] .welcome-eyebrow {
  color: var(--vc-brand);
  font-weight: 600;
  letter-spacing: 0.08em;
}
html[data-brand="vetcare"] .welcome-eyebrow-warn { color: var(--vc-urgent); }
html[data-brand="vetcare"] .welcome-h1 { color: var(--vc-ink); }
html[data-brand="vetcare"] .welcome-sub { color: var(--vc-ink-2); }
html[data-brand="vetcare"] .welcome-cta {
  border-radius: 14px;
  font-weight: 500;
}
html[data-brand="vetcare"] .welcome-pill { background: var(--vc-mint); color: var(--vc-brand-dark); }
html[data-brand="vetcare"] .welcome-error {
  background: none;
  border: 0;
  padding: 0;
  color: var(--vc-urgent);
}
html[data-brand="vetcare"] .welcome-tick svg { stroke: var(--vc-brand); }
/* "What happens next" on /welcome: the landing's tinted section, not a green slab. */
html[data-brand="vetcare"] .welcome-aside {
  background: var(--vc-mint-white);
  color: var(--vc-ink);
  border: 1px solid var(--vc-line);
  border-radius: 14px;
  box-shadow: none;
}
html[data-brand="vetcare"] .welcome-aside-label { color: var(--vc-ink-3); }
html[data-brand="vetcare"] .welcome-step { opacity: 1; }
html[data-brand="vetcare"] .welcome-step-n {
  color: var(--vc-ink-2);
  background: #fff;
  border-color: var(--vc-line);
}
html[data-brand="vetcare"] .welcome-step-current .welcome-step-n {
  color: #fff;
  background: var(--vc-brand);
  border-color: var(--vc-brand);
}
html[data-brand="vetcare"] .welcome-step-t { color: var(--vc-ink); }
html[data-brand="vetcare"] .welcome-step-d { color: var(--vc-ink-2); }
html[data-brand="vetcare"] .welcome-trust { border-top-color: var(--vc-line); }
html[data-brand="vetcare"] .welcome-trust-row { color: var(--vc-ink-2); }
html[data-brand="vetcare"] .welcome-trust-row .check { color: var(--vc-brand); }
html[data-brand="vetcare"] .welcome-trust-row a { color: var(--vc-brand); }

/* Sign in, reset, the account-setup notice: a white card on Mint White. */
html[data-brand="vetcare"] .auth-page { background: var(--vc-mint-white); }
html[data-brand="vetcare"] .auth-card,
html[data-brand="vetcare"] .acct-hold-card {
  border: 1px solid var(--vc-line);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

/* ------------------------------------------------------------- the landing pages */

/* The classic landing, in this design's colours: the highlight in the headline is the
   brand green, the strips and alternate sections are Mint White, and nothing glows. */
html[data-brand="vetcare"] .hero h1 .hl { color: var(--vc-brand); }
html[data-brand="vetcare"] .hero-eyebrow { color: var(--vc-brand); }
html[data-brand="vetcare"] .pill { background: var(--vc-mint); color: var(--vc-brand-dark); }
html[data-brand="vetcare"] .faq-q:hover { background: var(--vc-mint-white); }
html[data-brand="vetcare"] .expert-tile { border-radius: 14px; }

/* ------------------------------------------------------- member pages on a phone */

/* THE PAGE IS AS WIDE AS THE SCREEN, NOT AS WIDE AS ITS LONGEST LINE. "Your
   conversations", Account, My pets and the care hub are centred columns (a max-width
   and auto side margins) inside a flex column — and an item with auto margins on the
   cross axis is not stretched, so it takes the width of its content, up to that
   max-width. On a desktop the two are the same; on a phone the page came out up to 780px
   wide and ran off the right edge (owner, 2026-10-02: "why is it not responsive?").
   Saying the width outright fixes it: full width of the screen, capped as before. */
html[data-brand="vetcare"] .onb,
html[data-brand="vetcare"] .care-page,
html[data-brand="vetcare"] .pets-page,
html[data-brand="vetcare"] .pet-detail,
html[data-brand="vetcare"] .acct-page {
  width: 100%;
}

/* ------------------------------------------------ the Care Room on a wide screen */

/* ONE COLUMN, THE LANDING'S WIDTH. The conversation's rows are already a centred 720px
   column, but the room's header and the box you type in ran the full width of the window
   — and on this brand the side panel is held back until the member has paid, so that was
   the whole screen: a title in the far left corner and a text box a metre wide (owner,
   2026-10-02: "it is full screen width and is too wide. the content has to be narrow as
   on other pages"). Both now sit in the same 720px column as the messages. Their bands
   and rules still run edge to edge; only what is inside them is brought in.
   Desktop only: on a phone the column is the screen and the app's own padding stands. */
@media (min-width: 801px) {
  html[data-brand="vetcare"] .cr-header,
html[data-brand="vetcare"] .cr-input {
    padding-left: max(24px, calc((100% - 720px) / 2));
    padding-right: max(24px, calc((100% - 720px) / 2));
  }
  /* The transcript keeps the same side padding, so its rows line up with both. */
  html[data-brand="vetcare"] .cr-messages {
    padding-left: max(24px, calc((100% - 720px) / 2));
    padding-right: max(24px, calc((100% - 720px) / 2));
  }
  /* Anything in the transcript that is not a row — a recommendation card, a consult in
     progress — fills that column rather than a share of the window. */
  html[data-brand="vetcare"] .cr-messages > .cr-rec,
html[data-brand="vetcare"] .cr-messages > .cr-consilium,
html[data-brand="vetcare"] .cr-messages > .cr-diagnosis-card { max-width: 100%; }
}

/* ------------------------------------------------- the member menu on a phone */

/* THE BURGER IS ON THE RIGHT (owner, 2026-10-02), with the logo on the left where every
   other page of this brand has it. The app's top bar draws the button first and the
   logo after it; here the two swap ends. The menu it opens slides in from the same side
   as the button, so it appears under the thumb that pressed it rather than across the
   screen from it. Phones only: on a desktop there is no burger, and the menu is the
   panel down the left side of the page as before. */
@media (max-width: 800px) {
  html[data-brand="vetcare"] .app-topbar { justify-content: space-between; }
  html[data-brand="vetcare"] .app-burger { order: 2; }
  html[data-brand="vetcare"] .sidebar {
    left: auto;
    right: 0;
    transform: translateX(100%);
    box-shadow: -6px 0 34px rgba(0, 0, 0, 0.16);
  }
  html[data-brand="vetcare"] .sidebar.open { transform: translateX(0); }
}

/* -------------------------------------------------------- the team page on a phone */

/* THE PAGE SCROLLS TO ITS END (owner, 2026-10-02: "can't scroll below the first Nurse
   Tess to see the entire team on mobile"). On a phone the app is a column exactly one
   screen tall, and the view inside it scrolls. The team page clips its own overflow (for
   its background), and an item that clips may be squeezed below its content's height —
   so it was squeezed to one screen and everything under the first card was cut off, with
   nothing left to scroll to. Told not to shrink, it keeps its full height and the view
   scrolls through all of it. Its background is this design's plain white. */
html[data-brand="vetcare"] .onb-pro {
  flex-shrink: 0;
  background: #fff;
}