/* Design system for every owner-facing page: public site, estimate pages, signup and signed-link pages.
   This file is the source of truth for the tokens. estimate/templates/base.html carries a copy of the same tokens
   inline (estimate pages are self-contained) and rep.css uses the same palette at a denser scale.

   Direction: a careful regional accounting office, warmer and more confident. Warm paper, warm near-black ink,
   forest green for actions and links, one deep amber for the main call to action, serif headings for the letterhead voice, system sans for reading.
   Numbers are tabular so columns of dollars line up. No web fonts, no CDNs (CSP). */

:root {
  /* Color */
  --bg: #faf7f2;            /* warm paper */
  --bg-2: #f0ebe2;          /* footer band */
  --card: #ffffff;
  --fg: #1f2328;            /* warm ink, 14.8:1 on --bg */
  --muted: #5c5348;         /* 7.1:1 on --bg */
  --line: #e6dfd3;          /* warm hairlines */
  --line-strong: #857b6e;   /* field borders, 4.1:1 on white */
  --accent: #1f5a45;        /* forest green: links, primary buttons, 8.1:1 on white */
  --accent-hover: #153f31;
  --accent-soft: #e8f1ec;
  --cta: #9a5a0c;           /* deep amber for the main call to action; white text 5.5:1 */
  --cta-hover: #7a4707;
  --on-cta: #ffffff;
  --tint: #f5efe4;          /* hero band */
  --on-accent: #ffffff;
  --warn: #8a4b00;
  --warn-soft: #fbf1e3;
  --error: #a1260d;
  --error-soft: #fbebe7;
  --ok: #1d6b3a;
  --ok-soft: #e6f2ea;
  --focus: #1f5a45;

  /* Type */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Iowan Old Style", Charter, "Bitstream Charter", "Sitka Subheading", Cambria, Georgia, serif;
  --text-sm: .9rem;
  --text-base: 1.0625rem;   /* 17px */
  --text-lead: 1.1875rem;
  --text-h3: 1.0625rem;
  --text-h2: 1.375rem;
  --text-h1: 1.875rem;
  --text-figure: 1.75rem;
  --measure: 42rem;         /* about 70 characters */

  /* Space (4px base) and shape */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --r-sm: 6px;              /* buttons, fields */
  --r-md: 10px;             /* cards, panels */
  --target: 48px;           /* comfortable touch target (WCAG asks 44) */
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16130f; --bg-2: #100d0a; --card: #1f1b16; --fg: #ece8e1; --muted: #b3aa9d; --line: #353026;
    --line-strong: #8c8274; --accent: #7fc9a4; --accent-hover: #a5dcc0; --accent-soft: #1a2b23; --on-accent: #0f1a14;
    --cta: #e0a03c; --cta-hover: #f0b95c; --on-cta: #1a1206; --tint: #1c1812;
    --warn: #f0b366; --warn-soft: #2d2416; --error: #ff9a85; --error-soft: #3a201b; --ok: #7fd49b; --ok-soft: #16291e;
    --focus: #7fc9a4;
  }
}
@media (min-width: 720px) {
  :root { --text-h1: 2.25rem; --text-h2: 1.5rem; --text-figure: 2rem; }
}

/* Base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: var(--text-base)/1.6 var(--font-sans);
  font-variant-numeric: tabular-nums lining-nums; }
main { max-width: 46rem; margin: 0 auto; padding: var(--s5) var(--s4) var(--s7); }
main:focus { outline: none; }
h1, h2 { font-family: var(--font-serif); font-weight: 600; color: var(--fg); letter-spacing: -.005em; }
h1 { font-size: var(--text-h1); line-height: 1.18; margin: 0 0 var(--s2); text-wrap: balance; }
h2 { font-size: var(--text-h2); line-height: 1.25; margin: var(--s6) 0 var(--s2); text-wrap: balance; }
h3 { font-size: var(--text-h3); line-height: 1.35; font-weight: 700; margin: var(--s5) 0 var(--s1); }
p, ul, ol, dl { margin: 0 0 var(--s3); }
p, li, dd { max-width: var(--measure); }
ul, ol { padding-left: 1.3rem; }
li + li { margin-top: var(--s1); }
strong { font-weight: 650; }
.sub, .muted { color: var(--muted); }
.sub { margin: 0 0 var(--s5); }
.lead { font-size: var(--text-lead); line-height: 1.55; }
a { color: var(--accent); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

/* Cards and notes */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s4);
  margin: var(--s4) 0; }
.card > :first-child, .note > :first-child, .summary > :first-child, .summary-box > :first-child { margin-top: 0; }
.card > :last-child, .note > :last-child, .summary > :last-child, .summary-box > :last-child { margin-bottom: 0; }
@media (min-width: 560px) { .card { padding: var(--s5); } }
.note { border-left: 4px solid var(--warn); background: var(--warn-soft); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: var(--s3) var(--s4); margin: var(--s4) 0; }
.draft { color: var(--warn); font-size: var(--text-sm); }
.ok { color: var(--ok); font-weight: 600; }
p.ok[role=status] { background: var(--ok-soft); border-left: 4px solid var(--ok); padding: var(--s3) var(--s4);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.summary-box { background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--r-md);
  padding: var(--s4); margin: var(--s4) 0; }
.summary-box h2 { margin-top: 0; }
.summary-box table { background: var(--card); }
.summary-box table th:first-child, .summary-box table td:first-child { padding-left: var(--s2); }
.summary-box table th:last-child, .summary-box table td:last-child { padding-right: var(--s2); }
.status { display: inline-block; padding: 2px var(--s2); border-radius: 999px; border: 1px solid var(--line-strong);
  font-size: var(--text-sm); background: var(--card); }

/* Tables of numbers: row labels on the left, figures right-aligned in tabular digits */
table { width: 100%; border-collapse: collapse; margin: 0 0 var(--s3); }
caption { text-align: left; color: var(--muted); font-size: var(--text-sm); padding: 0 0 var(--s2); }
th, td { text-align: left; padding: 10px var(--s2); border-bottom: 1px solid var(--line); vertical-align: top; }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
thead th { font-size: var(--text-sm); color: var(--muted); font-weight: 600; border-bottom: 2px solid var(--fg);
  vertical-align: bottom; }
th { font-weight: 600; }
th[scope=row] { font-weight: 500; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
tr:last-child > th, tr:last-child > td { border-bottom: 0; }
/* A ledger: the last row is the result, ruled off like a column total */
table.ledger tr:last-child > th, table.ledger tr:last-child > td { border-top: 2px solid var(--fg); font-weight: 700; }

/* Forms */
label { display: block; font-weight: 600; margin: var(--s4) 0 var(--s1); }
.hint { display: block; color: var(--muted); font-weight: 400; font-size: var(--text-sm); line-height: 1.45; }
p.hint { margin-top: 0; }
input[type=text], input[type=email], input[type=tel], input[type=date], input[type=number], input[type=search],
input[type=password], input[type=file], select, textarea {
  display: block; width: 100%; min-height: var(--target); padding: 10px var(--s3); font: inherit; color: var(--fg);
  background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-sm); }
input[type=file] { padding: 9px var(--s2); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--focus); }
textarea { min-height: 96px; }
fieldset { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s2) var(--s4) var(--s4);
  margin: var(--s5) 0; background: var(--card); min-width: 0; }
fieldset fieldset { background: transparent; }
legend { font-weight: 700; padding: 0 var(--s2); margin-left: calc(-1 * var(--s2)); }
legend h2 { font-size: 1.25rem; margin: 0; display: inline; }
/* Questions nested inside a section: the legend sits inside the box so long questions wrap cleanly */
fieldset fieldset > legend { float: left; width: 100%; margin: 0; padding: var(--s3) 0 var(--s1); line-height: 1.4; }
fieldset fieldset > legend + * { clear: both; }
.choice { display: flex; align-items: flex-start; gap: var(--s3); margin: var(--s1) 0; font-weight: 400;
  min-height: 44px; padding: 10px 0; cursor: pointer; }
.choice input { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--accent); }
.error { color: var(--error); font-weight: 600; margin: var(--s1) 0 0; }
[aria-invalid=true] { border: 2px solid var(--error) !important; }
.summary { background: var(--error-soft); border: 2px solid var(--error); border-radius: var(--r-md);
  padding: var(--s3) var(--s4); margin: var(--s4) 0; }
.summary h2 { margin-top: 0; color: var(--error); font-size: 1.2rem; }
.summary a { color: var(--error); font-weight: 600; }

/* Actions. Primary is solid; secondary is outlined. */
.actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin: var(--s5) 0 var(--s3); }
button, .button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--target);
  min-width: 44px; padding: 10px var(--s5); border-radius: var(--r-sm); border: 2px solid var(--accent);
  background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 600; line-height: 1.25;
  text-align: center; cursor: pointer; text-decoration: none; }
button:hover, .button:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent);
  text-decoration: none; }
button.secondary, .button.secondary { background: var(--card); color: var(--accent); }
button.secondary:hover, .button.secondary:hover { background: var(--accent-soft); color: var(--accent-hover); }
button.danger { background: var(--error); border-color: var(--error); color: var(--on-accent); }
button.danger:hover { background: var(--fg); border-color: var(--fg); color: var(--bg); }
button:focus-visible, .button:focus-visible { outline-offset: 3px; }
button[aria-disabled=true], button:disabled { opacity: .6; cursor: progress; }
@media (max-width: 479px) { .actions > .button, .actions > button { flex: 1 1 100%; } }
details > summary { cursor: pointer; min-height: 44px; padding: 10px 0; }

.company-tools { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin: var(--s2) 0; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: var(--s4); top: var(--s2); background: var(--card); color: var(--accent); padding: var(--s2) var(--s3);
  z-index: 10; border: 2px solid var(--accent); border-radius: var(--r-sm); }
.visually-hidden { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
[data-autofocus]:focus, #error-summary:focus { outline: 3px solid var(--accent); outline-offset: 4px; }
@media (min-width: 640px) { .two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s4); } }

/* Identity header: the letterhead. Same on owner, estimate and site pages. */
.owner-header, .site-header { background: var(--card); border-top: 4px solid var(--accent); border-bottom: 1px solid var(--line); }
.owner-header .inner { max-width: 46rem; margin: 0 auto; padding: var(--s3) var(--s4); display: flex; flex-wrap: wrap;
  gap: 0 var(--s5); align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: var(--s3); color: var(--fg); text-decoration: none;
  min-height: 44px; }
a.brand:hover { color: var(--fg); }
.brand .mark { width: 36px; height: 36px; flex: none; }
.brand .name { display: block; font-family: var(--font-serif); font-weight: 600; font-size: 1.2rem; line-height: 1.2; }
.brand .legal { display: block; color: var(--muted); font-size: .85rem; font-weight: 400; line-height: 1.3;
  font-family: var(--font-sans); }
.verify { display: inline-flex; align-items: center; min-height: 44px; font-size: .95rem; }
.owner-header .header-links { display: inline-flex; flex-wrap: wrap; gap: 0 16px; align-items: center; }
.owner-header .call { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; white-space: nowrap; }

/* Page footer (owner flow pages) */
main > footer { color: var(--muted); font-size: var(--text-sm); margin-top: var(--s7); padding-top: var(--s4);
  border-top: 1px solid var(--line); }

/* Step indicator above signup headings ("Step 1 of 4") */
main > p.sub:first-child { margin-bottom: var(--s2); font-size: var(--text-sm); font-weight: 600; }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media print {
  body { background: #fff; color: #000; }
  .skip, .actions { display: none; }
}