/* My Pool Removal, global entry. GENERATED: the concatenation of
   tokens/{fonts,colors,typography,spacing,borders,elevation,motion,layout,base}.css
   in that order. Edit the files in tokens/, then regenerate this file.
   It cannot use @import: the serve route requires an auth token on every
   request and CSS @import cannot carry one, so imported files 401. */

/* ===== fonts ===== */
/* Webfonts. Served from Google Fonts CDN, see readme.md "Fonts are not vendored".
   Source Serif 4, headlines, decks, pull quotes, prose on guide pages.
   Archivo, body, UI, all interface text, tabular figures.
   IBM Plex Mono, machine data only: permit codes, timestamps, methodology stamps. */
@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&family=Archivo:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root{
  --font-display:"Source Serif 4",Georgia,"Times New Roman",serif;
  --font-body:"Archivo","Helvetica Neue",Helvetica,system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;

  /* Every price, range, table figure and count uses lining tabular numerals so
     columns of numbers align. Never let figures fall back to proportional. */
  --numeric-tabular:tabular-nums lining-nums; /* @kind other */
}

/* ===== colors ===== */
/* ============================================================
   COLOR, a civic reference palette.
   Structural anchor: deep ink teal. Ground: cool paper.
   Option triad (ochre / rust / umber) exists for ONE job: coding
   fill-in vs partial vs full removal. Never use it decoratively.
   ============================================================ */
:root{
  /* --- Paper: cool, blue-grey tinted neutrals ---------------- */
  --paper-0:#ffffff;
  --paper-1:#f8f9fa;
  --paper-2:#f1f4f5;
  --paper-3:#e7ecee;
  --paper-4:#dbe2e5;

  /* --- Ink: cool near-black through mid greys ---------------- */
  --ink-0:#0b1214;
  --ink-1:#131c1f;
  --ink-2:#3b4a4f;
  --ink-3:#61727a;
  --ink-4:#8b9aa1;
  --ink-5:#b3c0c5;

  /* --- Line: hairlines and rules ----------------------------- */
  --line-1:#e2e8ea;
  --line-2:#cdd7db;
  --line-3:#a9b7bd;
  --line-4:#6d7f86;

  /* --- Teal: the structural / action colour ------------------ */
  --teal-950:#041d21;
  --teal-900:#062a2f;
  --teal-800:#0a383e;
  --teal-700:#0e474d;
  --teal-600:#135b63;
  --teal-500:#1a747d;
  --teal-400:#3d949c;
  --teal-300:#7fb4ba;
  --teal-200:#b3d3d7;
  --teal-100:#d6e6e8;
  --teal-050:#eef5f6;

  /* --- Option triad. Reserved. One warm earth run, light to deep, so the
     three options read as increasing scope and never as a stoplight. --- */
  --ochre-800:#4a3510;
  --ochre-700:#6d5015;
  --ochre-600:#8a6516;
  --ochre-500:#a8802f;
  --ochre-200:#e3d3ab;
  --ochre-100:#eee4c9;
  --ochre-050:#f8f4e8;

  --rust-800:#472119;
  --rust-700:#6f3a29;
  --rust-600:#8c4a34;
  --rust-500:#a45f45;
  --rust-200:#e0c6bc;
  --rust-100:#ecd9d1;
  --rust-050:#f9f1ee;

  --umber-800:#2e1a12;
  --umber-700:#43281c;
  --umber-600:#5c3a29;
  --umber-200:#d5c6bd;
  --umber-100:#e6dcd5;
  --umber-050:#f6f2ef;

  /* --- Signals ----------------------------------------------- */
  --signal-positive:#2f6042;
  --signal-positive-bg:#e6efe9;
  --signal-caution:var(--ochre-600);
  --signal-caution-bg:var(--ochre-050);
  --signal-critical:#8c2f2a;
  --signal-critical-bg:#f7ebea;
  --signal-info:var(--teal-700);
  --signal-info-bg:var(--teal-050);

  /* ============ SEMANTIC ALIASES, use these ================= */
  --text-strong:var(--ink-0);
  --text-body:var(--ink-1);
  --text-secondary:var(--ink-2);
  /* Held one step darker than the ink ramp they sit next to: this audience reads
     captions and source stamps, and #8b9aa1 on paper is about 2.6:1. Both of these
     clear 4.5:1 on --surface-page while keeping three distinct steps of hierarchy. */
  --text-muted:#4f5f65;
  --text-faint:#66757b;
  --text-inverse:var(--paper-0);
  --text-accent:var(--teal-700);
  --text-link:var(--teal-700);
  --text-link-hover:var(--teal-900);

  --surface-page:var(--paper-1);
  --surface-card:var(--paper-0);
  --surface-sunken:var(--paper-2);
  --surface-inset:var(--paper-3);
  --surface-invert:var(--teal-900);
  --surface-accent-soft:var(--teal-050);
  /* Section wash. A pale tint of the SAME deep ink teal the dark bands are cut
     from, so a light band and a dark band read as one family. Blue-leaning, not
     green. Full-bleed bands behind whole sections; never a card or text colour. */
  --surface-wash:#e4eef0;
  --border-wash:#c9dde1;
  /* Second, lighter wash so alternating bands do not read as one flat tint.
     Paler, same hue. Same rule: full-bleed bands only. */
  --surface-wash-soft:#f2f8f9;
  --border-wash-soft:#dceaec;

  --border-subtle:var(--line-1);
  --border-default:var(--line-2);
  --border-strong:var(--line-3);
  --border-emphasis:var(--ink-1);
  --border-accent:var(--teal-700);

  --action-bg:var(--teal-700);
  --action-bg-hover:var(--teal-800);
  --action-bg-active:var(--teal-900);
  --action-fg:var(--paper-0);
  --action-quiet-fg:var(--teal-700);
  --action-quiet-bg-hover:var(--teal-050);
  --focus-ring:var(--teal-500);

  /* Option coding, the only sanctioned use of the triad. */
  --opt-fill-fg:var(--ochre-700);
  --opt-fill-bg:var(--ochre-050);
  --opt-fill-edge:var(--ochre-500);
  --opt-partial-fg:var(--rust-700);
  --opt-partial-bg:var(--rust-050);
  --opt-partial-edge:var(--rust-600);
  --opt-full-fg:var(--umber-800);
  --opt-full-bg:var(--umber-050);
  --opt-full-edge:var(--umber-800);
}

/* ===== typography ===== */
/* Type scale, ~1.22 ratio, tuned for reading numbers at arm's length.
   Body sits at 17px, not 16: this is a reference document, not an app chrome. */
:root{
  --text-3xs:0.6875rem; /* 11, legal, stamps */
  --text-2xs:0.8125rem; /* 13, micro labels, table meta, mono stamps */
  --text-xs:0.875rem;   /* 14, captions, hints. Not 13: captions carry the sourcing. */
  --text-sm:0.9375rem;  /* 15, dense UI, table body */
  --text-base:1.0625rem;/* 17, body */
  --text-md:1.1875rem;  /* 19, lede, large body */
  --text-lg:1.375rem;   /* 22, card titles */
  --text-xl:clamp(1.5rem,calc(1.15rem + 1.1vw),1.6875rem);  /* 24→27, h3 */
  --text-2xl:clamp(1.75rem,calc(1.25rem + 1.6vw),2.0625rem); /* 28→33, h2 */
  --text-3xl:clamp(2rem,calc(1.3rem + 2.2vw),2.5625rem); /* 32→41, h1 */
  --text-4xl:clamp(2.25rem,calc(1.35rem + 2.9vw),3.25rem);   /* 36→52, page display */
  --text-5xl:clamp(2.5rem,calc(1.4rem + 3.5vw),4rem);      /* 40→64, hero display */
  --text-6xl:clamp(2.875rem,calc(1.5rem + 4.4vw),5rem);      /* 46→80, the estimate figure */

  --leading-flat:1; /* @kind font */
  --leading-tight:1.1;
  --leading-snug:1.25;
  --leading-normal:1.45;
  --leading-body:1.55;
  --leading-relaxed:1.68;

  --tracking-display:-0.022em;
  --tracking-tight:-0.012em;
  --tracking-normal:0em;
  --tracking-label:0.085em;
  --tracking-wide:0.14em;

  /* Composed roles */
  --type-display:var(--weight-semibold) var(--text-5xl)/var(--leading-tight) var(--font-display);
  --type-h1:var(--weight-semibold) var(--text-3xl)/var(--leading-tight) var(--font-display);
  --type-h2:var(--weight-semibold) var(--text-2xl)/var(--leading-snug) var(--font-display);
  --type-h3:var(--weight-semibold) var(--text-xl)/var(--leading-snug) var(--font-display);
  --type-h4:var(--weight-semibold) var(--text-lg)/var(--leading-snug) var(--font-body);
  --type-lede:var(--weight-regular) var(--text-md)/var(--leading-relaxed) var(--font-body);
  --type-body:var(--weight-regular) var(--text-base)/var(--leading-body) var(--font-body);
  --type-small:var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-body);
  --type-caption:var(--weight-regular) var(--text-xs)/var(--leading-normal) var(--font-body);
  --type-legal:var(--weight-regular) var(--text-3xs)/var(--leading-normal) var(--font-body);
  --type-label:var(--weight-semibold) var(--text-2xs)/var(--leading-normal) var(--font-body);
  --type-figure:var(--weight-semibold) var(--text-4xl)/var(--leading-flat) var(--font-body);
  --type-mono:var(--weight-regular) var(--text-2xs)/var(--leading-normal) var(--font-mono);

  --measure-prose:66ch; /* @kind spacing */
  --measure-lede:52ch; /* @kind spacing */
  --measure-caption:44ch; /* @kind spacing */
}

/* ===== spacing ===== */
/* 4px base. Civic layouts breathe: sections separate at --space-11 and up. */
:root{
  --space-0:0;
  --space-1:0.25rem;  /* 4  */
  --space-2:0.5rem;   /* 8  */
  --space-3:0.75rem;  /* 12 */
  --space-4:1rem;     /* 16 */
  --space-5:1.25rem;  /* 20 */
  --space-6:1.5rem;   /* 24 */
  --space-7:2rem;     /* 32 */
  --space-8:2.5rem;   /* 40 */
  --space-9:3rem;     /* 48 */
  --space-10:4rem;    /* 64 */
  --space-11:5rem;    /* 80 */
  --space-12:6rem;    /* 96 */
  --space-13:8rem;    /* 128 */

  /* Roles */
  --pad-control-y:0.6875rem;
  --pad-control-x:1rem;
  --pad-card:var(--space-6);
  --pad-card-lg:var(--space-8);
  --pad-cell-y:var(--space-3);
  --pad-cell-x:var(--space-4);
  --gap-inline:var(--space-2);
  --gap-stack:var(--space-4);
  --gap-grid:var(--space-6);
  --gap-section:var(--space-11);
}

/* ===== borders ===== */
/* Radii are near-zero on purpose. A document has corners, not pills.
   The only pill in the system is the status badge. */
:root{
  --radius-0:0px;
  --radius-sm:2px;
  --radius-md:3px;
  --radius-lg:5px;
  --radius-pill:999px;
  /* Buttons only. Softer than --radius-sm so the primary actions feel less clinical
     than the tables and inputs around them. */
  --radius-control:7px;

  --border-width-hair:1px;
  --border-width-rule:1px;
  --border-width-heavy:2px;
  --border-width-marker:3px;

  --rule-hair:1px solid var(--border-subtle);
  --rule-default:1px solid var(--border-default);
  --rule-strong:1px solid var(--border-strong);
  --rule-emphasis:2px solid var(--border-emphasis);
  --rule-accent:2px solid var(--border-accent);
}

/* ===== elevation ===== */
/* Almost everything sits flat on the page and is separated by a rule.
   Shadow is reserved for things that genuinely float above the document. */
:root{
  --shadow-none:none;
  --shadow-raise:0 1px 2px rgba(11,18,20,.05),0 1px 1px rgba(11,18,20,.04);
  --shadow-lift:0 2px 4px rgba(11,18,20,.06),0 6px 14px -6px rgba(11,18,20,.10);
  --shadow-overlay:0 2px 6px rgba(11,18,20,.08),0 18px 40px -12px rgba(11,18,20,.20);
  --shadow-focus:0 0 0 3px color-mix(in srgb,var(--focus-ring) 32%,transparent);
  --shadow-inset-hair:inset 0 0 0 1px var(--border-subtle);
}

/* ===== motion ===== */
/* No bounce, no spring, no scale-up. Movement is 2-6px and quick,
   because a reference document should not feel like it is performing. */
:root{
  --dur-instant:80ms; /* @kind other */
  --dur-fast:130ms; /* @kind other */
  --dur-base:190ms; /* @kind other */
  --dur-slow:300ms; /* @kind other */
  --ease-out:cubic-bezier(.16,.84,.44,1); /* @kind other */
  --ease-in-out:cubic-bezier(.65,0,.35,1); /* @kind other */
  --ease-entrance:cubic-bezier(.22,.72,.28,1); /* @kind other */
  --transition-control:color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out); /* @kind other */
  --lift-hover:-1px; /* @kind spacing */
  --press-shift:1px; /* @kind spacing */
}

/* ===== layout ===== */
:root{
  --container-narrow:44rem;   /* 704, forms, funnel steps */
  --container-text:54rem;     /* 864, guide articles */
  --container-wide:72rem;     /* 1152, home, city pages */
  --container-max:84rem;      /* 1344, full-bleed frames */
  --gutter-sm:1.25rem;
  --gutter-md:2rem;
  --gutter-lg:2.5rem;
  --header-height:4.25rem;
  --z-base:0; /* @kind other */
  --z-sticky:100; /* @kind other */
  --z-header:200; /* @kind other */
  --z-overlay:300; /* @kind other */
  --z-toast:400; /* @kind other */
}

/* ===== base ===== */
/* Minimal element defaults so consumers inherit the voice without importing components. */
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--type-body);font-feature-settings:"kern" 1;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-display);color:var(--text-strong);letter-spacing:var(--tracking-tight);margin:0}
h1{font:var(--type-h1)}h2{font:var(--type-h2)}h3{font:var(--type-h3)}
h4,h5,h6{font-family:var(--font-body);color:var(--text-strong);margin:0}
p{margin:0;text-wrap:pretty}
a{color:var(--text-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;transition:var(--transition-control)}
a:hover{color:var(--text-link-hover);text-decoration-thickness:2px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--radius-sm)}
::placeholder{color:var(--text-faint);opacity:1}
table{border-collapse:collapse}
[data-numeric],.numeric{font-variant-numeric:var(--numeric-tabular)}
::selection{background:var(--teal-100);color:var(--teal-950)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}