/* ==========================================================================
   Clae Pest Control — base.css (owned by task 04)

   Reset, type scale, and the full shared component vocabulary from
   handoffs/phase1/PLAN.md §7. Tasks 03, 05 and 06 write markup against
   these classes and cannot add to them — every class named in PLAN.md §7
   is defined below and is safe to use in combinations this file's author
   never saw (a .card inside a .grid--2, a .chip inside a .table, etc).

   Cascade order (linked from the layout): tokens, base, portal, signup,
   office. Nothing in here reaches into portal.css/signup.css/office.css.
   ========================================================================== */

/* -----------------------------------------------------------------------
   1. Reset
   ----------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--clae-paper);
  color: var(--clae-ink);
  font: 400 16px/1.55 var(--clae-font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* belt and suspenders: nothing may scroll the page body sideways */
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, dl, dd { margin: 0; }
table { border-collapse: collapse; width: 100%; }
fieldset { margin: 0; border: 0; padding: 0; }
.pet-form { margin-top: 20px; }
.pet-form:has(select option:checked:not([value="present"])) .pet-form__details { display: none; }
.pet-form__types { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 20px; }
.pet-profile__notes { white-space: pre-line; overflow-wrap: anywhere; margin-block: 14px; }

:focus-visible {
  outline: 2px solid var(--clae-ink);
  outline-offset: 2px;
}

/* On a night surface the ink ring is invisible — lime signals it instead
   (task 11, rule 3: lime is a signal, never a fill behind text). */
.card--night :focus-visible,
.office-topbar :focus-visible,
.login-split__dark :focus-visible { outline-color: var(--clae-signal); }

/* -----------------------------------------------------------------------
   2. Type scale
   ----------------------------------------------------------------------- */

h1 {
  font: 500 clamp(32px, 4vw, 44px) / 1.1 var(--clae-font-sans);
  letter-spacing: -0.025em;
}
h2 { font: 500 26px / 1.25 var(--clae-font-sans); letter-spacing: -0.01em; }
h3 { font: 500 19px / 1.35 var(--clae-font-sans); }

a.link, .inline-link {
  color: var(--clae-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* -----------------------------------------------------------------------
   3. Layout skeleton — .app, .site-head, .brand, .site-nav, .site-foot
   ----------------------------------------------------------------------- */

.app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.site-head {
  display: flex;
  align-items: center;
  gap: var(--clae-gap-md);
  padding: 18px 20px;
  border-bottom: var(--clae-hairline-rule);
  flex-wrap: wrap;
  row-gap: 10px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.brand__mark { width: 26px; height: 26px; color: var(--clae-ink); flex-shrink: 0; }
.brand__mark svg { width: 100%; height: 100%; display: block; }
.brand__word {
  font: 700 20px / 1 var(--clae-font-sans);
  letter-spacing: -0.03em;
}

.site-nav {
  display: flex;
  gap: var(--clae-gap-md);
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1 1 auto;
  min-width: 0;
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a {
  white-space: nowrap;
  padding-block: 4px;
  border-bottom: 2px solid transparent;
  font-weight: 500;
}
.site-nav a.is-active { border-bottom-color: var(--clae-ink); }

.site-head__end {
  display: flex;
  align-items: center;
  gap: var(--clae-gap-md);
  margin-left: auto;
  flex-shrink: 0;
}
.phone {
  font: 400 12px / 1 var(--clae-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.site-foot {
  margin-top: auto;
  border-top: var(--clae-hairline-rule);
  padding-block: var(--clae-gap-lg);
  color: var(--clae-stone);
}
.site-foot strong { color: var(--clae-ink); }
.site-foot p { margin: 0 0 4px; }

/* The bare layout used by the signed pay link: no nav, no sign-out. */
.app--bare .site-nav,
.app--bare .site-head__end form { display: none; }

/* -----------------------------------------------------------------------
   4. Page frame — .wrap, .page, .page__head, .section
   ----------------------------------------------------------------------- */

.wrap {
  max-width: var(--clae-max-width);
  margin-inline: auto;
  padding-inline: 20px;
  width: 100%;
}

.page {
  padding-block: var(--clae-gap-xl) 64px;
  display: flex;
  flex-direction: column;
  gap: var(--clae-gap-lg);
}

.page__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px var(--clae-gap-md);
  flex-wrap: wrap;
}
/* An eyebrow inside the head owns the first row, so the title starts at the
   left edge beneath it; the space-between split still serves title + action. */
.page__head > .eyebrow { flex-basis: 100%; }
.page__title { margin: 0; }
.page__lede { color: var(--clae-stone); font-size: 17px; margin-top: 6px; }

.section { display: flex; flex-direction: column; gap: var(--clae-gap-md); }
.section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--clae-gap-sm);
  flex-wrap: wrap;
}

/* -----------------------------------------------------------------------
   5. Buttons — every button is a pill
   ----------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--clae-radius-pill);
  font: 500 15px / 1 var(--clae-font-sans);
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background var(--clae-ease), color var(--clae-ease), border-color var(--clae-ease), opacity var(--clae-ease);
}

/* Primary action on a light ground (was .btn--lime — lime is a signal now,
   never a fill behind text; see the amendment, rule 2/3). */
.btn--primary { background: var(--clae-cta); color: var(--clae-cta-fg); }
.btn--primary:hover { background: var(--clae-olive-2); }

/* Secondary dark action on a light ground (was .btn--ink — ink is text
   only now, never a fill; see the amendment, rule 1). */
.btn--night { background: var(--clae-night); color: var(--clae-paper); }
.btn--night:hover { background: var(--clae-night-2); }

/* Primary action sitting on a night surface: flips to bone fill, ink text.
   Nothing in the portal uses this yet as of task 11 (the one candidate —
   Home's "Pay $X" button — turned out to sit on the page's second, light
   card) but tasks 13/14 may need it on a dark surface of their own. */
.btn--on-dark { background: var(--clae-cta-on-dark); color: var(--clae-cta-on-dark-fg); }
.btn--on-dark:hover { opacity: 0.85; }

.btn--ghost { background: transparent; color: var(--clae-ink); border-color: var(--clae-ink); }
.btn--ghost:hover { background: var(--clae-night); color: var(--clae-paper); }

.btn--peri { background: var(--clae-periwinkle); color: var(--clae-ink); }
.btn--peri:hover { background: var(--clae-periwinkle-2); }

.btn--sm { padding: 8px 16px; font-size: 13px; }
.btn--block { width: 100%; }

.btn:disabled, .btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* -----------------------------------------------------------------------
   6. Chips — outlined pills, 1px
   ----------------------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 12px;
  border-radius: var(--clae-radius-pill);
  border: 1px solid var(--clae-ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}
.chip--ok { border-color: var(--clae-teal); color: var(--clae-teal); }
.chip--warn { border-color: var(--clae-bark); color: var(--clae-bark); }
.chip--alert { border-color: var(--clae-coral); color: var(--clae-coral); background: rgb(var(--clae-coral-rgb) / 0.1); }
.chip--muted { border-color: var(--clae-stone); color: var(--clae-stone); }
/* Sand fill, ink text, sand border (task 11 — new). */
.chip--sand { background: var(--clae-sand); color: var(--clae-ink); border-color: var(--clae-sand); }
/* Kept, but legal only inside a night surface now — lime is a signal, never
   a fill behind text on a light ground (amendment rule 3). */
.chip--lime { border-color: var(--clae-ink); background: var(--clae-lime); color: var(--clae-ink); }

/* -----------------------------------------------------------------------
   7. Eyebrow
   ----------------------------------------------------------------------- */

.eyebrow {
  font: 400 12px / 1 var(--clae-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--clae-bark);
  margin: 0 0 8px;
}
.eyebrow::before { content: "• "; }

/* -----------------------------------------------------------------------
   8. Cards
   ----------------------------------------------------------------------- */

.card {
  background: var(--clae-paper);
  border: 1px solid var(--clae-sand);
  border-radius: var(--clae-radius-card);
  padding: 24px;
  box-shadow: var(--clae-shadow-card);
}
.card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--clae-gap-sm);
  margin-bottom: var(--clae-gap-sm);
}
.card__title { margin: 0; font-size: 19px; font-weight: 500; }
.card__body { display: flex; flex-direction: column; gap: var(--clae-gap-sm); }
.card__foot {
  margin-top: var(--clae-gap-md);
  padding-top: var(--clae-gap-sm);
  border-top: 1px solid var(--clae-sand);
  display: flex;
  align-items: center;
  gap: var(--clae-gap-sm);
  flex-wrap: wrap;
}

.card--sand { background: var(--clae-sand); border-color: var(--clae-sand); }

/* Night fill, bone text (was .card--ink — ink is text only now, never a
   fill; see the amendment, rule 1). */
.card--night { background: var(--clae-night); border-color: var(--clae-night); color: var(--clae-paper); }
/* Periwinkle passes fine here (12:1) but reads a little cold next to olive;
   paper-rgb keeps every on-dark muted label the same warm grey (task 11 —
   see the Report for the full reasoning). */
.card--night .eyebrow { color: rgb(var(--clae-paper-rgb) / 0.62); }
.card--night .muted { color: rgb(var(--clae-paper-rgb) / 0.62); }
.card--night .card__foot { border-top-color: rgb(var(--clae-paper-rgb) / 0.18); }
/* A chip's border is drawn in ink by default, which disappears on a dark
   card — follow the chip's own (already-colored) text instead so every
   modifier stays legible and keeps its meaning on a dark surface. */
.card--night .chip { border-color: currentColor; }

/* .card--lime deleted (task 11): a lime fill behind text, which rule 3
   forbids. Nothing used it. */

.card--peri { background: var(--clae-sand); border-left: 3px solid var(--clae-olive); /* was periwinkle: clashed with the olive/bone family */ border-color: var(--clae-periwinkle); color: var(--clae-ink); }

/* -----------------------------------------------------------------------
   9. Stat
   ----------------------------------------------------------------------- */

.stat { display: flex; flex-direction: column; gap: 4px; }
.stat__label {
  font-size: 13px;
  color: var(--clae-stone);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.stat__value { font: 500 34px / 1.1 var(--clae-font-sans); }

/* -----------------------------------------------------------------------
   10. Tabular numerals — every money figure and every date figure
   ----------------------------------------------------------------------- */

.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* -----------------------------------------------------------------------
   11. Forms
   ----------------------------------------------------------------------- */

.fieldset {
  border: 1px solid var(--clae-sand);
  border-radius: var(--clae-radius-sm);
  padding: var(--clae-gap-md);
  display: flex;
  flex-direction: column;
  gap: var(--clae-gap-md);
}
.fieldset legend {
  padding: 0 6px;
  font-weight: 500;
  font-size: 15px;
}

.field { display: flex; flex-direction: column; gap: 6px; }
/* Self-sufficient (not just a .field modifier) — it also shows up alone,
   combined only with .switch, to lay out one checkbox + its label in a row. */
.field--inline { display: flex; flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; }

.field__label { font-size: 14px; font-weight: 500; }

.field__control {
  font: inherit;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--clae-sand);
  border-radius: var(--clae-radius-sm);
  background: var(--clae-paper);
  color: var(--clae-ink);
}
.field__control:focus-visible { outline-offset: 1px; }

.field__hint { font-size: 13px; color: var(--clae-stone); }
.field__error { font-size: 13px; color: var(--clae-coral); }

/* Checkbox rendered as a pill toggle. .switch goes on the wrapping <label>
   around a plain checkbox + its text (<label class="switch"><input
   type="checkbox">Text</label>) — that is the shape every other task's
   markup already uses. The rules below also match a checkbox carrying
   .switch directly, so either shape renders correctly. */
.switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
/* .switch alone shrinks to fit (several sit side by side); combined with
   .field--inline on the same label it is meant to be a full-width row
   (a lone toggle plus a submit button below it), so this wins over the
   plain .switch rule above regardless of which class comes first. */
.switch.field--inline { display: flex; }

.switch input[type="checkbox"],
input[type="checkbox"].switch {
  appearance: none;
  -webkit-appearance: none;
  width: 40px;
  height: 24px;
  margin: 0;
  border-radius: var(--clae-radius-pill);
  background: var(--clae-paper);
  border: 1px solid var(--clae-stone);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--clae-ease), border-color var(--clae-ease);
}
.switch input[type="checkbox"]::before,
input[type="checkbox"].switch::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--clae-stone);
  transition: transform var(--clae-ease), background var(--clae-ease);
}
.switch input[type="checkbox"]:checked,
input[type="checkbox"].switch:checked {
  background: var(--clae-olive);
  border-color: var(--clae-olive);
}
.switch input[type="checkbox"]:checked::before,
input[type="checkbox"].switch:checked::before {
  transform: translateX(16px);
  background: var(--clae-paper);
}

/* -----------------------------------------------------------------------
   12. Tables
   ----------------------------------------------------------------------- */

.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th, .table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--clae-sand);
  text-align: left;
  vertical-align: top;
}
.table th {
  font-weight: 500;
  color: var(--clae-stone);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.table--money td:last-child, .table--money th:last-child { text-align: right; }

/* -----------------------------------------------------------------------
   13. Layout utilities
   ----------------------------------------------------------------------- */

.stack > * + * { margin-top: var(--clae-gap-md); }
.stack--tight > * + * { margin-top: var(--clae-gap-xs); }

.row { display: flex; align-items: center; gap: var(--clae-gap-sm); flex-wrap: wrap; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: var(--clae-gap-sm); flex-wrap: wrap; }

.grid { display: grid; gap: var(--clae-gap-md); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

/* -----------------------------------------------------------------------
   14. Empty state
   ----------------------------------------------------------------------- */

.empty {
  border: 1px dashed var(--clae-sand);
  border-radius: var(--clae-radius-sm);
  padding: var(--clae-gap-lg);
  text-align: center;
  color: var(--clae-stone);
}

/* -----------------------------------------------------------------------
   15. Banners
   ----------------------------------------------------------------------- */

.banner {
  padding: 14px 18px;
  border-radius: var(--clae-radius-sm);
  font-size: 15px;
}
/* A night band, not a lime fill behind text (rule 3 forbids the latter —
   this was the one place a lime fill carried text). The code itself reads
   in bone (inherited from the banner's own color); the left border is the
   one place in the portal where lime gets to do its actual job, a signal
   rather than a fill. */
.banner--demo {
  background: var(--clae-night);
  color: var(--clae-paper);
  border-left: 3px solid var(--clae-signal);
}
.banner--demo .eyebrow { color: rgb(var(--clae-paper-rgb) / 0.62); }
.banner--notice { background: var(--clae-sand); border-left: 3px solid var(--clae-olive); color: var(--clae-ink); }
.banner--alert {
  background: rgb(var(--clae-coral-rgb) / 0.12);
  color: var(--clae-coral-ink);
  border: 1px solid rgb(var(--clae-coral-rgb) / 0.4);
}

/* -----------------------------------------------------------------------
   16. Disclosure — <details class="disclose"><summary class="disclose__head">
   ----------------------------------------------------------------------- */

.disclose {
  border: 1px solid var(--clae-sand);
  border-radius: var(--clae-radius-sm);
  padding: 16px 18px;
}
.disclose + .disclose { margin-top: var(--clae-gap-sm); }

.disclose__head {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--clae-gap-sm);
  font-weight: 500;
}
.disclose__head::-webkit-details-marker { display: none; }
.disclose__head::after {
  content: "+";
  color: var(--clae-stone);
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}
.disclose[open] .disclose__head::after { content: "\2013"; } /* en dash */

.disclose__body {
  margin-top: var(--clae-gap-sm);
  padding-top: var(--clae-gap-sm);
  border-top: 1px solid var(--clae-sand);
}

/* -----------------------------------------------------------------------
   17. Text utilities
   ----------------------------------------------------------------------- */

.muted { color: var(--clae-stone); }
.warm { color: var(--clae-bark); }
.small { font-size: 13px; }
.lede { font-size: 17px; color: var(--clae-stone); }

/* -----------------------------------------------------------------------
   18. Responsive — one column under 760px, nothing scrolls the page body
   ----------------------------------------------------------------------- */

@media (max-width: 760px) {
  .wrap { padding-inline: 16px; }
  .card { padding: 18px; }
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
  .site-head { padding: 14px 16px; }
  .site-nav { order: 3; width: 100%; }
}