/* Turf Check design system — the ONE stylesheet the widget, the dashboard and /admin share.

   Everything a page looks like comes from here: colours, the two typefaces, the type scale,
   spacing, radii, and the pieces every screen is built from (buttons, fields, labels, cards,
   segmented tabs, pills). A page's own <style> may LAY OUT its screen; it may not invent a
   colour, a font or a font size — tests/test_design_system.py counts those and only lets the
   count go down.

   Served at /vendor/ds.css (runtime._VENDOR_ASSETS). The reference page that shows every token
   and component is the "Turf Check" design-system artifact; keep the two in step.

   Rules
   - Colour: a token, never a hex. Light is bare :root; dark is the OS default unless the page
     forces one with [data-theme]. Both blocks below must name the same tokens.
   - Type: one of the --fs-* steps. h1 is a page title, h2 a section or card title, h3 a
     sub-section, h4 the field-label style. An H2 is the same on every page.
   - Money and big numbers are the serif (--serif); everything else is Inter (--sans).
   - The widget sets --accent / --accent-ink from the tenant's branding; nothing else varies
     per tenant. */

/* ── Typefaces (self-hosted, OFL; latin subset, variable weight) ───────────────────────── */
@font-face {
  font-family: "Inter";
  src: url("/vendor/inter-4.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/vendor/source-serif-4.woff2") format("woff2");
  font-weight: 200 900; font-style: normal; font-display: swap;
}

/* ── Tokens ─────────────────────────────────────────────────────────────────────────────── */
:root {
  /* colour */
  --accent: #1f7a49; --tc-lit: #43a870; --accent-ink: #0f5a32; --accent-tint: #e8f3ec;
  --bg: #eef1ea; --card: #ffffff; --panel: #f2f5ee;
  --line: #e4e9df; --line-2: #eef2ea; --field-line: #d6ddd2;
  --ink: #17231c; --muted: #5d6d62;
  --err: #b5352b; --err-tint: #f7e7e5;
  --warn: #8a5d0e; --warn-tint: #f6efdd;
  --info: #2c5a8a; --info-tint: #e7eff8;
  --ok-tint: #e4f2e9;
  --on-accent: #ffffff;
  --scrim: rgba(23, 35, 28, .45);
  --shadow: 0 1px 2px rgba(20, 40, 28, .05), 0 12px 32px rgba(20, 40, 28, .08);

  /* type */
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs: 12px;     /* meta, pills, table heads */
  --fs-sm: 13px;     /* labels, secondary text */
  --fs-md: 14px;     /* body */
  --fs-lg: 15px;     /* h3, fields, emphasised body */
  --fs-xl: 18px;     /* h2 — section and card titles */
  --fs-2xl: 22px;    /* h1 — page titles */
  --fs-3xl: 30px;    /* big numbers (serif) */

  /* space, radius */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;

  /* legacy names, kept so each page can move over screen by screen — do not use in new code */
  --green: var(--accent); --green-dark: var(--accent-ink); --ground: var(--bg);
  --save: var(--warn); --gold-tint: var(--warn-tint); --blue: var(--info); --blue-tint: var(--info-tint);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #43a870; --tc-lit: #7fd3a2; --accent-ink: #7fd3a2; --accent-tint: #17281e;
    --bg: #0e1512; --card: #16201b; --panel: #101a14;
    --line: #26322b; --line-2: #1e2822; --field-line: #34423a;
    --ink: #e9efe9; --muted: #93a598;
    --err: #f0897d; --err-tint: #2c1a17;
    --warn: #d7b25f; --warn-tint: #2a2314;
    --info: #8fbdec; --info-tint: #16222f;
    --ok-tint: #15291d;
    --on-accent: #ffffff;
    --scrim: rgba(0, 0, 0, .6);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 34px rgba(0, 0, 0, .45);
  }
}
:root[data-theme="dark"] {
  --accent: #43a870; --tc-lit: #7fd3a2; --accent-ink: #7fd3a2; --accent-tint: #17281e;
  --bg: #0e1512; --card: #16201b; --panel: #101a14;
  --line: #26322b; --line-2: #1e2822; --field-line: #34423a;
  --ink: #e9efe9; --muted: #93a598;
  --err: #f0897d; --err-tint: #2c1a17;
  --warn: #d7b25f; --warn-tint: #2a2314;
  --info: #8fbdec; --info-tint: #16222f;
  --ok-tint: #15291d;
  --on-accent: #ffffff;
  --scrim: rgba(0, 0, 0, .6);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 34px rgba(0, 0, 0, .45);
}

/* ── Base ───────────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); }     /* iOS shows this past the page edge (overscroll, notch) */
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: var(--fs-md); line-height: 1.45;
  font-feature-settings: "cv11", "ss01";        /* Inter: single-storey a off, open digits */
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
button, input, select, textarea { font-family: inherit; }
/* `hidden` means hidden, even on an element a component rule gives a display. */
[hidden] { display: none !important; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); text-wrap: balance; }
h1 { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
h2 { font-size: var(--fs-xl);  font-weight: 650; letter-spacing: -.015em; line-height: 1.25; }
h3 { font-size: var(--fs-lg);  font-weight: 650; letter-spacing: -.01em; line-height: 1.3; }
h4 { font-size: var(--fs-sm);  font-weight: 600; color: var(--muted); line-height: 1.35; }
a { color: var(--accent-ink); }
code, kbd, pre { font-family: var(--mono); font-size: .92em; }
::placeholder { color: var(--muted); opacity: .85; }

/* ── Type roles (classes, for when the element is not a heading) ───────────────────────── */
.t-page    { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.02em; }
.t-section { font-size: var(--fs-xl);  font-weight: 650; letter-spacing: -.015em; }
.t-sub     { font-size: var(--fs-lg);  font-weight: 650; }
.t-body    { font-size: var(--fs-md); }
.t-meta    { font-size: var(--fs-xs); color: var(--muted); }
.t-number  { font-family: var(--serif); font-size: var(--fs-3xl); font-weight: 600; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em; }
.money     { font-family: var(--serif); font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
/* The one label style: above a field, a column head, a card's small caption. Sentence case. */
.slab, label.field { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); margin: 0 0 6px; }

/* ── Buttons ────────────────────────────────────────────────────────────────────────────
   .btn is primary. `.ghost` secondary, `.linkbtn` a text action, `.xbtn` the delete ×.
   On the dashboard and /admin (<body class="app">) a bare <button> is a primary button too,
   at zero specificity, so any class a page puts on it wins. */
.btn, :where(.app) button {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent); color: var(--on-accent); border: 1px solid transparent;
  border-radius: var(--r-md); padding: 10px 18px; margin: 0;
  font: inherit; font-size: var(--fs-md); font-weight: 600; letter-spacing: -.005em; line-height: 1.2;
  cursor: pointer; transition: filter .14s ease, background .14s ease, border-color .14s ease;
}
.btn:hover, :where(.app) button:hover { filter: brightness(1.07); }
.btn:active, :where(.app) button:active { filter: brightness(.96); }
.btn:disabled, :where(.app) button:disabled {
  background: var(--line-2); color: var(--muted); border-color: transparent; cursor: default; filter: none;
}
.btn.ghost, :where(.app) button.ghost { background: var(--card); color: var(--accent-ink); border-color: var(--line); }
.btn.ghost:hover, :where(.app) button.ghost:hover { background: var(--accent-tint); border-color: var(--accent-tint); filter: none; }
/* A button's label is centred — it matters once a layout stretches the button. */
.btn, :where(.app) button { justify-content: center; }
.btn.block { display: flex; width: 100%; }
.btn.lg { padding: 13px 20px; font-size: var(--fs-lg); border-radius: 12px; }
.linkbtn, :where(.app) button.linkbtn {
  background: none; border: 0; padding: 0; color: var(--accent-ink);
  font-size: var(--fs-sm); font-weight: 600;
}
.linkbtn:hover, :where(.app) button.linkbtn:hover { filter: none; text-decoration: underline; }
.xbtn, :where(.app) button.xbtn {
  width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--r-sm); background: none;
  color: var(--muted); font-size: 20px; font-weight: 400; line-height: 1;
}
.xbtn:hover, :where(.app) button.xbtn:hover { color: var(--err); background: var(--err-tint); filter: none; }
:where(button, a, input, select, textarea, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Fields ─────────────────────────────────────────────────────────────────────────────── */
.input,
:where(.app) :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), select, textarea) {
  border: 1px solid var(--field-line); border-radius: var(--r-md); padding: 10px 12px;
  font: inherit; font-size: var(--fs-lg); background: var(--card); color: var(--ink);
}
.input:focus,
:where(.app) :where(input, select, textarea):focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--accent); }

/* ── Surfaces ───────────────────────────────────────────────────────────────────────────── */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; }
.card > h2:first-child { margin: 0 0 var(--sp-3); }

/* Collapsible card: a head row (chevron, title, actions) over a body indented under the title.
   Services, batch groups and every list that folds use this one shape. */
.fold { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.fold.open { border: 2px solid var(--accent); }
.fold-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; }
.fold-toggle, :where(.app) button.fold-toggle {
  width: 28px; height: 28px; flex: none; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 6px; background: none; color: var(--muted); padding: 0;
}
.fold-toggle:hover { background: var(--panel); filter: none; }
.fold-toggle svg { transition: transform .14s ease; }
.fold.open .fold-toggle svg { transform: rotate(90deg); }
.fold-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fold-body { padding: 4px 16px 18px 56px; }

/* ── Segmented tabs, pills ──────────────────────────────────────────────────────────────── */
.seg { display: inline-flex; border: 1px solid var(--field-line); border-radius: 11px; overflow: hidden; background: var(--card); }
.seg button, :where(.app) .seg button {
  background: var(--card); color: var(--ink); border: 0; border-radius: 0; margin: 0;
  padding: 9px 15px; font-size: var(--fs-sm); font-weight: 600;
}
.seg button:hover { background: var(--panel); filter: none; }
.seg button.on, :where(.app) .seg button.on { background: var(--accent); color: var(--on-accent); }

.pill {
  display: inline-block; vertical-align: middle; border-radius: var(--r-pill); padding: 2px 9px;
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.5;
  background: var(--accent-tint); color: var(--accent-ink);
}
.pill.ok   { background: var(--ok-tint);   color: var(--accent-ink); }
.pill.warn { background: var(--warn-tint); color: var(--warn); }
.pill.err, .pill.bad { background: var(--err-tint); color: var(--err); }
.pill.info { background: var(--info-tint); color: var(--info); }
.pill.neutral { background: var(--line-2); color: var(--muted); }

/* ── Phone ──────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* 16px stops iOS zooming into a focused field. */
  .input,
  :where(.app) :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), select, textarea) { font-size: 16px; }
  .xbtn, :where(.app) button.xbtn, .fold-toggle { width: 44px; height: 44px; }
  .fold-body { padding-left: 16px; }
}

/* The Turf Check logo, inline (docs/brand/): "turf" and the check's arm in the text colour, "check"
   and the blade in the accent — so it follows light and dark without a second file. */
.tc-mark, .tc-word { display: block; flex: none; overflow: visible; }
.tc-ink { fill: currentColor; }
.tc-green { fill: var(--accent); }
.tc-lit { fill: var(--tc-lit); }