/* Camarillo Carpet Care: "The plan and the marine layer" (brand kit v1), rebuilt October 28, 2026.
   The site is laid out like a set of drawings. A harbor title strip runs down the left of a wide screen (the rail) and
   becomes a bar across the top of a phone; the price tool is drawn as a room in plan, its walls in harbor and a door
   swinging open in its top wall, the one bold thing on the page; facts sit in schedules and title blocks.
   Rules kept: one bold element per screen; every number beside its label; the price range, the request button and
   counsel's partner line on the first screen of a phone, above the analytics notice (on a phone the plan card comes up
   under the heading, before the page's own sentence); 44 px targets on a phone, 24 px with a mouse; nothing fixed but
   the rail on a wide screen and the analytics notice, and nothing left under the notice: while it shows, the page gets
   room for it at the foot and a focused field is scrolled clear of it (assets/plan.js).
   Phone first: base rules are for a 375 to 390 px phone; 600, 760, 900, 1080 and 1180 px add room and columns. */

/* ---------- fonts: Archivo and Source Sans 3, SIL OFL 1.1, Latin subsets, self-hosted (licenses in /assets/fonts/) ---------- */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/archivo-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/archivo-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/source-sans-3-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: italic; font-weight: 400; font-display: swap; src: url('/assets/fonts/source-sans-3-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/source-sans-3-latin-600-normal.woff2') format('woff2'); }

/* ---------- tokens ---------- */
:root {
  --fogbank: #F2F4F3; --sheetwhite: #FFFFFF; --harbor-deep: #1C2A33; --slate-blue: #4E606B; --swell: #A8B7BE;
  --hazeline: #DCE3E6; --mistline: #C9D3D8; --berry: #B8303A; --berry-deep: #9E2731; --berry-wash: #FBEAEB;
  --face-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --face-text: 'Source Sans 3', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --rail-w: 248px; --bay-max: 1040px; --bay-read: 720px; --side: 16px; --corner: 3px;
  --size-body: 17px; --line-body: 26px; --size-lead: 18px; --line-lead: 27px; --size-note: 15px; --line-note: 22px;
  --size-h1: 28px; --line-h1: 32px; --size-h2: 24px; --line-h2: 29px; --size-h3: 19px; --line-h3: 25px;
  --size-price: 25px; --line-price: 30px;
  /* the door swing, as a list marker: the leaf in harbor, the arc in berry (the logo's own drawing) */
  --swing-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3 16V4' stroke='%231C2A33' stroke-width='2' fill='none'/%3E%3Cpath d='M3 4a12 12 0 0 1 12 12' stroke='%23B8303A' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  /* the door in the plan card's top wall: the wall cut away, its two jambs, the leaf standing open and its swing */
  --door: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' viewBox='0 0 46 46'%3E%3Crect x='2' y='0' width='42' height='2.5' fill='%23FFFFFF'/%3E%3Crect x='0' y='0' width='2' height='7' fill='%231C2A33'/%3E%3Crect x='44' y='0' width='2' height='7' fill='%231C2A33'/%3E%3Cpath d='M43 2V43' stroke='%231C2A33' stroke-width='2' fill='none'/%3E%3Cpath d='M43 43A41 41 0 0 1 2 2' stroke='%23B8303A' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C2A33' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
@media (min-width: 900px) {
  :root { --side: 32px; --size-body: 18px; --line-body: 28px; --size-lead: 20px; --line-lead: 30px; --size-h1: 40px; --line-h1: 44px;
          --size-h2: 29px; --line-h2: 35px; --size-h3: 21px; --line-h3: 27px; --size-price: 28px; --line-price: 33px; }
}
@media (min-width: 1180px) { :root { --side: 48px; --size-h1: 44px; --line-h1: 48px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body { margin: 0; background: var(--sheetwhite); color: var(--harbor-deep); font: 400 var(--size-body)/var(--line-body) var(--face-text);
       -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
img, svg { max-width: 100%; }
a { color: var(--harbor-deep); text-decoration: underline; text-decoration-color: var(--swell); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-color: var(--berry); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--harbor-deep); outline-offset: 2px; }
.rail :focus-visible, .okbar :focus-visible { outline-color: var(--sheetwhite); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
h1, h2, h3 { margin: 0 0 0.45em; font-family: var(--face-display); font-weight: 600; letter-spacing: -0.012em; text-wrap: balance; }
h1 { font-weight: 700; font-size: var(--size-h1); line-height: var(--line-h1); letter-spacing: -0.02em; }
h2 { font-size: var(--size-h2); line-height: var(--line-h2); }
h3 { font-size: var(--size-h3); line-height: var(--line-h3); }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
.nobr { white-space: nowrap; }
.ifany { font-weight: 400; color: var(--slate-blue); }
.todo-flag { background: var(--berry-wash); color: var(--berry-deep); padding: 0 0.2em; }
/* The skip link shows on white with a berry ring, so it reads over the harbor rail it covers while it has focus. */
.jumpmain { position: absolute; left: -999px; top: 8px; z-index: 70; padding: 12px 16px; background: var(--sheetwhite); color: var(--harbor-deep);
            border: 2px solid var(--harbor-deep); font-weight: 600; text-decoration: none; }
.jumpmain:focus { left: 8px; }
.jumpmain:focus-visible { outline: 3px solid var(--berry); outline-offset: 2px; }
.sym { width: 1.2em; height: 1.2em; flex: none; vertical-align: -0.22em; }
.sym-btn { width: 1.1em; height: 1.1em; margin-right: 8px; }
.sym-job { width: 1.05em; height: 1.05em; margin-right: 8px; vertical-align: -0.12em; color: var(--slate-blue); }
.smallnote { font-size: var(--size-note); line-height: var(--line-note); color: var(--slate-blue); }
.smallnote a { color: var(--harbor-deep); }
.provenance a { overflow-wrap: anywhere; }

/* ---------- buttons: berry on light grounds; on harbor the outlined white one ---------- */
.act { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 11px 20px; border: 2px solid var(--berry);
       border-radius: var(--corner); background: var(--berry); color: var(--sheetwhite); font: 600 17px/22px var(--face-display); text-align: center;
       text-decoration: none; cursor: pointer; transition: background-color 120ms ease, border-color 120ms ease; }
.act:hover { background: var(--berry-deep); border-color: var(--berry-deep); color: var(--sheetwhite); }
.act-ghost { background: transparent; border-color: var(--harbor-deep); color: var(--harbor-deep); }
.act-ghost:hover { background: var(--fogbank); border-color: var(--harbor-deep); color: var(--harbor-deep); }
.act-on-dark { background: transparent; border-color: var(--sheetwhite); color: var(--sheetwhite); }
.act-on-dark:hover { background: rgb(255 255 255 / 0.12); border-color: var(--sheetwhite); }
.act-sm { min-height: 44px; padding: 8px 16px; font-size: 16px; }
.act-wide { width: 100%; }

/* ---------- the sheet: the rail, then the desk the pages sit on ---------- */
.rail { position: relative; z-index: 40; display: flex; align-items: center; gap: 4px; min-height: 56px; padding: 6px 8px 6px var(--side);
        background: var(--harbor-deep); color: var(--sheetwhite); }
.rail-brand { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; min-height: 44px; color: var(--sheetwhite); text-decoration: none;
              font: 600 16px/19px var(--face-display); letter-spacing: -0.01em; }
.rail-brand svg { width: 32px; height: 32px; flex: none; }
.rail-brand:hover { color: var(--sheetwhite); }
.rail-nav, .rail-cta, .rail-note { display: none; }
.rail-call { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--sheetwhite); text-decoration: none;
             font: 600 17px/22px var(--face-display); border-radius: var(--corner); }
.rail-call .sym-btn { margin: 0; width: 22px; height: 22px; }
.rail-call > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rail-call:hover { background: rgb(255 255 255 / 0.1); color: var(--sheetwhite); }
.rail-fold summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px;
                     border: 1.5px solid rgb(255 255 255 / 0.55); border-radius: var(--corner); font: 600 15px/20px var(--face-display); color: var(--sheetwhite); }
.rail-fold summary::-webkit-details-marker { display: none; }
.rail-fold[open] summary { background: var(--sheetwhite); color: var(--harbor-deep); }
.rail-fold > nav { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 56px); max-height: calc(100dvh - 56px); overflow-y: auto; padding: 4px var(--side) 16px;
                   background: var(--harbor-deep); border-top: 1px solid rgb(255 255 255 / 0.16); }
/* With the analytics notice up, the open menu scrolls far enough to bring its last item above it. */
html:has([data-ok]:not([hidden])) .rail-fold > nav { padding-bottom: 150px; }
.rail-fold-list { list-style: none; margin: 0; padding: 0; }
.rail-fold-list li + li { border-top: 1px solid rgb(255 255 255 / 0.14); }
.rail-fold-list a { display: flex; align-items: center; gap: 8px; min-height: 52px; color: var(--sheetwhite); text-decoration: none; font: 600 18px/24px var(--face-display); }
.rail-fold-list a:hover { text-decoration: underline; text-decoration-color: var(--berry); }
.rail-fold-list a[aria-current] { box-shadow: inset 3px 0 0 var(--berry); padding-left: 12px; }
.rail-fold-list a[href^="tel:"] .sym-btn { margin-right: 0; }
.desk { min-width: 0; }
.bay { width: min(100% - 2 * var(--side), var(--bay-max)); margin-inline: auto; }
.bay-narrow > * { max-width: var(--bay-read); }

@media (min-width: 1080px) {
  .rail { position: fixed; top: 0; bottom: 0; left: 0; width: var(--rail-w); flex-direction: column; align-items: stretch; gap: 0; padding: 28px 24px 24px;
          overflow-y: auto; }
  .rail-brand { flex: none; align-items: flex-start; font-size: 18px; line-height: 22px; margin-bottom: 32px; }
  .rail-brand svg { width: 44px; height: 44px; }
  .rail-nav { display: block; }
  .rail-nav ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgb(255 255 255 / 0.16); }
  .rail-nav li { border-bottom: 1px solid rgb(255 255 255 / 0.16); }
  .rail-nav a { display: flex; align-items: center; min-height: 46px; padding: 0 0 0 14px; color: var(--mistline); text-decoration: none; font: 600 16px/21px var(--face-display); }
  .rail-nav a:hover { color: var(--sheetwhite); text-decoration: underline; text-decoration-color: var(--berry); text-decoration-thickness: 2px; }
  .rail-nav a[aria-current] { color: var(--sheetwhite); box-shadow: inset 3px 0 0 var(--berry); }
  .rail-call { justify-content: flex-start; gap: 8px; margin-top: auto; padding-top: 24px; font-size: 18px; }
  .rail-call .sym-btn { width: 20px; height: 20px; }
  .rail-call > span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .rail-call:hover { background: none; text-decoration: underline; text-decoration-color: var(--berry); }
  .rail-cta { display: flex; margin-top: 12px; }
  .rail-note { display: block; margin: 14px 0 0; font-size: 14px; line-height: 20px; color: var(--mistline); }
  .rail-fold { display: none; }
  .desk { margin-left: var(--rail-w); }
}

/* ---------- the heading block every page opens with ---------- */
.entry { padding: 14px 0 8px; }
.crumbline ol { list-style: none; display: flex; flex-wrap: wrap; gap: 2px 8px; margin: 0 0 12px; padding: 0; font-size: 15px; line-height: 22px; color: var(--slate-blue); }
.crumbline li + li::before { content: '/'; margin-right: 8px; color: var(--swell); }
.crumbline a { display: inline-block; padding: 1px 0; color: var(--slate-blue); }
.entry h1 { margin-bottom: 10px; max-width: 30ch; }
.lead-in { font-size: var(--size-lead); line-height: var(--line-lead); max-width: 64ch; margin-bottom: 18px; }
.room-intro { font-size: var(--size-lead); line-height: var(--line-lead); color: var(--slate-blue); max-width: 64ch; }
@media (max-width: 599px) { .entry h1 { font-size: 26px; line-height: 30px; } .entry .crumbline ol { margin-bottom: 8px; } }
@media (min-width: 900px) { .entry { padding: 36px 0 12px; } }

/* ---------- rooms: the bands a page is built from ---------- */
.room { padding: 44px 0; }
.room-fog { background: var(--fogbank); }
.room-ruled { border-top: 1px solid var(--hazeline); }
.room + .room:not(.room-fog):not(.room-ruled) { border-top: 1px solid var(--hazeline); }
.zone { padding-top: 36px; }
.zone:first-child { padding-top: 8px; }
.zone > :last-child { margin-bottom: 0; }
.readable { padding: 12px 0 48px; }
.readable h2 { margin-top: 40px; }
.readable h2:first-child { margin-top: 12px; }
.readable h3 { margin-top: 28px; }
@media (min-width: 900px) { .room { padding: 68px 0; } .readable { padding-bottom: 72px; } }

/* ---------- the plan card: a room in plan, its walls in harbor, a door in the top wall ---------- */
.plancard { position: relative; margin: 0; background: var(--sheetwhite); border: 2px solid var(--harbor-deep); border-radius: 2px; }
.plancard::before { content: ''; position: absolute; top: -2px; right: 26px; width: 46px; height: 46px; background: var(--door) no-repeat; pointer-events: none; }
.plancard-head { margin: 0; padding: 14px 84px 4px 16px; font: 600 15px/22px var(--face-display); color: var(--slate-blue); letter-spacing: 0; }
.plancard-fields { padding: 4px 16px 10px; }
.plancard-field { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); align-items: center; gap: 0 12px; padding: 6px 0; }
.plancard-field + .plancard-field { border-top: 1px solid var(--hazeline); }
.plancard-field label { font: 600 15px/20px var(--face-display); color: var(--slate-blue); }
.plancard-field select { margin: 0; }
.plancard-out { display: grid; gap: 10px; padding: 14px 16px 16px; background: var(--fogbank); border-top: 1px solid var(--hazeline); }
.plancard-range { margin: 0; font-size: 15px; line-height: 21px; font-weight: 600; color: var(--slate-blue); }
.plancard-range strong { display: block; margin-top: 2px; font: 700 var(--size-price)/var(--line-price) var(--face-display); font-variant-numeric: tabular-nums;
                         letter-spacing: -0.015em; color: var(--harbor-deep); }
.plancard-btns { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.plancard-btns .act { padding-inline: 14px; }
.plancard-line, .plancard-src { margin: 0; font-size: 14px; line-height: 20px; color: var(--slate-blue); }
.plancard-mine { margin: 0; font-size: 15px; line-height: 22px; font-weight: 600; }
.plancard-mine[hidden], .plancard-src[hidden], .plancard-water[hidden] { display: none; }
.plancard-area { padding: 8px 16px 12px; border-top: 1px solid var(--hazeline); }
.plancard-area .plancard-field { grid-template-columns: 6.5rem minmax(0, 1fr); }
.plancard-water { margin: 8px 0 0; font-size: 15px; line-height: 22px; }
.plancard-foot { margin: 0; padding: 10px 16px 14px; font-size: 14px; line-height: 20px; color: var(--slate-blue); border-top: 1px solid var(--hazeline); }
/* The side card asks one question in the job's own words, so its label sits above the list. */
.plancard-side .plancard-head { display: none; }
.plancard-side .plancard-fields { padding-top: 12px; padding-right: 84px; }
.plancard-side .plancard-field { grid-template-columns: 1fr; gap: 6px; }
@media (max-width: 599px) {
  /* "Call" alone on a phone: the number is in the bar's call button and the menu. */
  .plancard-btns .act-ghost .nobr { display: none; }
  /* The homepage's H1 sits right above the card, so its heading is read, not shown. */
  .plancard-wide .plancard-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; }
  .plancard-wide .plancard-fields { padding-top: 10px; padding-right: 72px; }
  .plancard-field { padding: 4px 0; }
  .plancard-field select { min-height: 44px; font-size: 16px; }
  .plancard-out { padding-top: 12px; }
  .plancard-range strong { font-size: 23px; line-height: 28px; }
}
@media (min-width: 900px) {
  /* On a job or area page the card runs across the page under the heading: the question, then the answer and buttons. */
  .plancard-side { display: grid; grid-template-columns: minmax(230px, 0.9fr) minmax(0, 2fr); max-width: var(--bay-max); }
  .plancard-side .plancard-fields { padding: 16px 20px; border-right: 1px solid var(--hazeline); }
  .plancard-side .plancard-out { padding: 16px 84px 18px 24px; border-top: 0; }
  .plancard-side .plancard-btns { justify-content: start; grid-template-columns: auto auto; }
  .plancard-side .plancard-foot { grid-column: 1 / -1; padding-inline: 20px; }
  .plancard-head, .plancard-fields, .plancard-out, .plancard-area, .plancard-foot { padding-left: 20px; padding-right: 20px; }
  .plancard-head { padding-right: 84px; }
}

/* On a phone the plan card comes up under the heading, before the page's own sentence (the markup keeps the sentence
   first, for screen readers and search engines), so the range, the request button and counsel's partner line stay on
   the first screen above the analytics notice. */
@media (max-width: 899px) {
  .entry .bay:has(> .plancard) { display: flex; flex-direction: column; }
  .entry .bay:has(> .plancard) > .crumbline { order: 0; }
  .entry .bay:has(> .plancard) > h1 { order: 1; }
  .entry .bay:has(> .plancard) > .plancard { order: 2; margin-bottom: 18px; }
  .entry .bay:has(> .plancard) > .lead-in { order: 3; }
  .entry .bay:has(> .plancard) > .assurances { order: 4; }
  .frontpage .bay { display: flex; flex-direction: column; }
  .frontpage-grid { display: contents; }
  .frontpage .bay > h1 { order: 0; }
  .frontpage .plancard { order: 1; margin-bottom: 18px; }
  .frontpage .bay > .lead-in { order: 2; }
  .frontpage-notes { order: 3; }
}

/* ---------- the homepage: the heading across the page, then the card beside the notes ---------- */
.frontpage { padding: 14px 0 36px; }
.frontpage h1 { margin-bottom: 8px; max-width: 24ch; }
.frontpage .lead-in { margin-bottom: 16px; }
.frontpage-grid { display: grid; gap: 28px; align-items: start; }
.frontpage-notes > p { font-size: var(--size-lead); line-height: var(--line-lead); max-width: 56ch; }
.frontpage-notes > .frontpage-line { font-size: var(--size-note); line-height: var(--line-note); color: var(--slate-blue); }
@media (max-width: 599px) { .frontpage h1 { font-size: 27px; line-height: 31px; } .frontpage .lead-in { font-size: 17px; line-height: 25px; } }
@media (min-width: 900px) {
  .frontpage { padding: 40px 0 64px; }
  .frontpage .lead-in { margin-bottom: 28px; }
  .frontpage-grid { grid-template-columns: minmax(0, 500px) minmax(0, 1fr); gap: 44px; }
  .frontpage-notes { padding-top: 6px; }
}

/* ---------- lists: the door swing marks a standing claim, a check or an area ---------- */
.assurances, .oklist { list-style: none; margin: 0 0 1em; padding: 0; display: grid; gap: 10px; }
/* The marker sits in the item's left padding, so a sentence with a link in it still runs as one line of text. */
.assurances li, .oklist li { position: relative; padding-left: 27px; }
.assurances li::before, .oklist li::before { content: ''; position: absolute; left: 0; top: 0.3em; width: 15px; height: 15px; background: var(--swing-mark) center / contain no-repeat; }
.assurances { font: 600 15px/22px var(--face-text); }
.entry .assurances { margin: 18px 0 10px; }
@media (min-width: 600px) { .entry .assurances { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; } }
@media (min-width: 1180px) { .entry .assurances { grid-template-columns: repeat(4, minmax(0, auto)); justify-content: start; } }
.frontpage-notes .assurances { padding-top: 16px; border-top: 1px solid var(--hazeline); font-size: 16px; line-height: 23px; }
.communitylist, .jobroster { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0 28px; }
.communitylist a, .jobroster a { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 0; border-bottom: 1px solid var(--hazeline);
                                 font: 600 18px/23px var(--face-display); text-decoration: none; }
.communitylist a::before, .jobroster a::before { content: ''; flex: none; width: 14px; height: 14px; background: var(--swing-mark) center / contain no-repeat; }
.communitylist a:hover, .jobroster a:hover { text-decoration: underline; text-decoration-color: var(--berry); }
.jobroster a { font-size: 16px; }
.furtherlist, .factrows { list-style: none; margin: 0 0 16px; padding: 0; border-top: 1px solid var(--hazeline); }
.furtherlist li { padding: 6px 0 12px; border-bottom: 1px solid var(--hazeline); }
.furtherlist a { display: inline-flex; align-items: center; min-height: 44px; font: 600 19px/25px var(--face-display); text-decoration: none; }
.furtherlist h3 { margin: 0; }
.furtherlist a:hover { text-decoration: underline; text-decoration-color: var(--berry); }
.furtherlist p { margin: 0; font-size: var(--size-note); line-height: var(--line-note); color: var(--slate-blue); }
.factrows li { padding: 10px 0; border-bottom: 1px solid var(--hazeline); }
.pairlists { display: grid; gap: 8px 40px; }
.pairlists ul, .lostlinks { margin: 0 0 16px; padding-left: 1.2em; }
.pairlists a, .lostlinks a, .golink a { display: inline-flex; align-items: center; min-height: 44px; }
.cellpoints { margin: 0; padding-left: 1.1em; }
.cellpoints li + li { margin-top: 3px; }
.sourcelines { padding-left: 1.2em; font-size: var(--size-note); line-height: var(--line-note); }
.sourcelines li { overflow-wrap: anywhere; }
.sourcelines li + li { margin-top: 5px; }
@media (min-width: 760px) { .pairlists { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- stages: a real sequence, numbered in square room tags ---------- */
.stages { list-style: none; counter-reset: stage; margin: 0 0 20px; padding: 0; display: grid; gap: 22px; }
.stages > li { counter-increment: stage; position: relative; padding-left: 54px; min-height: 40px; }
.stages > li::before { content: counter(stage); position: absolute; left: 0; top: 0; width: 38px; height: 38px; display: grid; place-items: center;
                       border: 2px solid var(--harbor-deep); font: 700 17px/1 var(--face-display); font-variant-numeric: tabular-nums; }
.stages h3 { margin: 6px 0 4px; font-size: 19px; line-height: 25px; }
.stages p { margin: 0; }
.stages-tight { gap: 16px; }
.stages-tight > li { padding-left: 48px; }
.stages-tight > li::before { width: 32px; height: 32px; font-size: 15px; }
.stages-tight h3 { margin-top: 3px; }
@media (min-width: 900px) { .stages:not(.stages-tight) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }

/* ---------- tables and schedules ---------- */
.tabular { overflow-x: auto; margin: 0 0 16px; }
table { width: 100%; border-collapse: collapse; }
thead th { text-align: left; vertical-align: bottom; padding: 8px 16px 8px 0; font: 600 15px/21px var(--face-display); color: var(--slate-blue); border-bottom: 2px solid var(--harbor-deep); }
tbody th, tbody td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--hazeline); font-size: 17px; line-height: 26px; }
tbody th { font-weight: 600; }
tbody tr > :last-child, thead tr > :last-child { padding-right: 0; }
caption { text-align: left; padding: 0 0 8px; font: 600 15px/22px var(--face-display); color: var(--slate-blue); }
@media (max-width: 759px) {
  .tabular-stack thead, .finish-schedule thead { display: none; }
  .tabular-stack tr, .finish-schedule tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--hazeline); }
  /* Label above value: each cell stays one block of text, so a "; " between two links can't take a line of its own. */
  .tabular-stack th, .tabular-stack td, .finish-schedule td { display: block; padding: 4px 0; border: 0; }
  .tabular-stack th::before, .tabular-stack td::before, .finish-schedule td::before { content: attr(data-th); display: block; font: 600 13px/19px var(--face-display); color: var(--slate-blue); }
}
/* The job schedule: one row a job, the job's name as its heading, the figures in Archivo. */
.finish-schedule h3 { margin: 0 0 4px; font-size: 20px; line-height: 26px; }
.finish-schedule h3 a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.finish-schedule h3 a:hover { text-decoration: underline; text-decoration-color: var(--berry); }
.finish-guide { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; line-height: 21px; }
.finish-figure { font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 759px) {
  .finish-schedule td:first-child { display: block; padding-bottom: 8px; }
  .finish-schedule td:first-child::before { content: none; }
}
@media (min-width: 760px) {
  .finish-schedule td { font-size: 16px; line-height: 24px; }
  .finish-schedule td:first-child { width: 26%; }
  .finish-schedule td:nth-child(2) { width: 38%; }
}

/* ---------- the two columns of a job, area or request page ---------- */
.twocol { display: grid; gap: 8px; grid-template-areas: 'aside' 'main'; padding-bottom: 48px; }
.twocol-main { grid-area: main; min-width: 0; }
.twocol-main > .zone > p, .twocol-main > .zone > ol, .twocol-main > .zone > ul, .twocol-main > .zone > h2 { max-width: var(--bay-read); }
.twocol-aside { grid-area: aside; min-width: 0; }
.pagejumps { padding: 10px 14px 6px; border: 1px solid var(--hazeline); background: var(--fogbank); }
.pagejumps p { margin: 0 0 4px; font: 600 14px/20px var(--face-display); color: var(--slate-blue); }
.pagejumps ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 18px; }
.pagejumps a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 600; text-decoration: none; }
.pagejumps a:hover { text-decoration: underline; text-decoration-color: var(--berry); }
.twocol-request { grid-template-areas: 'main' 'aside'; gap: 32px; padding-top: 12px; }
.twocol-request .twocol-aside { padding: 20px; background: var(--fogbank); border: 1px solid var(--hazeline); }
.twocol-request .twocol-aside h2 { font-size: 22px; line-height: 28px; }
@media (min-width: 900px) { .twocol-request { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-areas: 'main aside'; gap: 40px; align-items: start; } }
@media (min-width: 1180px) {
  .twocol:not(.twocol-request) { grid-template-columns: minmax(0, 1fr) 210px; grid-template-areas: 'main aside'; column-gap: 48px; align-items: start; padding-top: 12px; }
  .twocol:not(.twocol-request) .twocol-aside { position: sticky; top: 24px; }
  .pagejumps { padding: 4px 0 4px 16px; border: 0; border-left: 2px solid var(--harbor-deep); background: none; }
  .pagejumps ul { display: block; }
  .pagejumps a { min-height: 38px; font-size: 15px; line-height: 20px; }
}

/* ---------- the title block: an area's facts, ruled like the corner of a drawing ---------- */
.titleblock { margin: 4px 0 24px; border: 2px solid var(--harbor-deep); max-width: var(--bay-read); }
.titleblock-cap { margin: 0; padding: 8px 14px; font: 600 14px/20px var(--face-display); letter-spacing: 0; color: var(--slate-blue); border-bottom: 1px solid var(--harbor-deep); }
.titleblock dl { margin: 0; display: grid; }
.titleblock dl > div { padding: 8px 14px 10px; border-bottom: 1px solid var(--hazeline); }
.titleblock dl > div:last-child { border-bottom: 0; }
.titleblock dt { font: 600 13px/18px var(--face-display); color: var(--slate-blue); }
.titleblock dd { margin: 2px 0 0; font-size: 16px; line-height: 23px; font-weight: 600; }
@media (min-width: 600px) {
  .titleblock dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .titleblock dl > div { border-right: 1px solid var(--hazeline); }
  .titleblock dl > div:nth-child(2n) { border-right: 0; }
  .titleblock dl > div:nth-last-child(-n + 2):nth-child(2n + 1), .titleblock dl > div:last-child { border-bottom: 0; }
}

/* ---------- questions and answers: every answer in view ---------- */
.queries { border-top: 1px solid var(--hazeline); margin-bottom: 24px; }
.queries-item { padding: 18px 0 16px; border-bottom: 1px solid var(--hazeline); }
.queries-item h3 { margin: 0 0 6px; font-size: 19px; line-height: 25px; }
.queries-item p { margin: 0; max-width: 66ch; }
.queries-more { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 0; }
.queries-more a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- forms ---------- */
label { font-weight: 600; }
input, select, textarea { display: block; width: 100%; min-height: 48px; margin: 0; padding: 10px 12px; border: 1.5px solid var(--slate-blue); border-radius: var(--corner);
  background: var(--sheetwhite); color: var(--harbor-deep); font: 400 17px/24px var(--face-text); }
select { appearance: none; -webkit-appearance: none; padding-right: 40px; background: var(--sheetwhite) var(--select-arrow) right 10px center / 20px no-repeat; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--harbor-deep); outline-offset: 1px; border-color: var(--harbor-deep); }
textarea { min-height: 7rem; resize: vertical; }
.callform { display: grid; gap: 14px; padding: 18px; background: var(--sheetwhite); border: 1px solid var(--hazeline); }
.callform-field label { display: block; margin-bottom: 5px; font-size: 15px; line-height: 21px; }
.callform-pair { display: grid; gap: 14px; }
.callform-error { margin: 0; padding: 12px 14px; background: var(--berry-wash); color: var(--berry-deep); border: 1px solid var(--berry); font-weight: 600; }
.callform-error[hidden] { display: none; }
.consentline { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px; border: 1.5px solid var(--slate-blue); border-radius: var(--corner); }
.consentline input { width: 24px; height: 24px; min-height: 0; margin: 1px 0 0; padding: 0; accent-color: var(--berry); }
.consentline label { font-size: 15px; line-height: 22px; font-weight: 400; }
.callform-note { margin: 0; font-size: var(--size-note); line-height: var(--line-note); color: var(--slate-blue); }
.pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (min-width: 600px) { .callform { padding: 24px; } .callform-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- the request band: fog, a harbor wall line on top, the form on its own white sheet ---------- */
.pricecall { padding: 44px 0; background: var(--fogbank); border-top: 2px solid var(--harbor-deep); }
.pricecall-grid { display: grid; gap: 24px; align-items: start; }
.pricecall-copy p { max-width: 36rem; }
@media (min-width: 900px) { .pricecall { padding: 64px 0; } .pricecall-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 48px; } }

/* ---------- figures ---------- */
.exhibit { margin: 28px 0 8px; }
.exhibit svg, .exhibit img { display: block; width: 100%; height: auto; background: var(--sheetwhite); border: 1px solid var(--hazeline); }
.exhibit figcaption { margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--slate-blue); max-width: 64ch; }
.exhibit svg text { font-family: var(--face-text); }
.exhibit-photo img { background: var(--fogbank); }
.exhibit-plan, .exhibit-home { max-width: 640px; }
.exhibit-narrow { width: fit-content; max-width: 100%; }

/* ---------- guides ---------- */
.doc-meta { display: flex; flex-wrap: wrap; gap: 10px 36px; margin: 18px 0 8px; padding: 10px 0 0; border-top: 1px solid var(--hazeline); }
.doc-meta a { display: inline-block; padding: 2px 0; }
.doc-meta dt { font: 600 13px/18px var(--face-display); color: var(--slate-blue); }
.doc-meta dd { margin: 2px 0 0; font-size: 15px; line-height: 21px; }
.doc-grid { display: grid; gap: 20px; grid-template-areas: 'contents' 'text'; padding: 12px 0 40px; }
.doc-text { grid-area: text; min-width: 0; }
.doc-text > * { max-width: var(--bay-read); }
.doc-contents { grid-area: contents; padding: 12px 16px 6px; background: var(--fogbank); border: 1px solid var(--hazeline); }
.doc-contents-head { margin: 0 0 4px; font: 600 14px/20px var(--face-display); color: var(--slate-blue); }
.doc-contents ol { margin: 0; padding: 0 0 0 1.4em; columns: 2 12rem; column-gap: 24px; }
.doc-contents li { break-inside: avoid; }
.doc-contents a { display: inline-block; padding: 11px 0; text-decoration: none; }
.doc-contents a:hover { text-decoration: underline; text-decoration-color: var(--berry); }
.keyfacts { margin: 0 0 20px; border: 2px solid var(--harbor-deep); }
.keyfacts h2 { margin: 0; padding: 8px 14px; font: 600 14px/20px var(--face-display); color: var(--slate-blue); border-bottom: 1px solid var(--harbor-deep); }
.keyfacts dl { margin: 0; }
.keyfacts dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 14px; }
.keyfacts dl > div + div { border-top: 1px solid var(--hazeline); }
.keyfacts dt { font-size: 15px; line-height: 21px; color: var(--slate-blue); }
.keyfacts dd { margin: 0; text-align: right; font: 600 16px/22px var(--face-display); font-variant-numeric: tabular-nums; }
.doc-cover { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 8px; padding: 12px 14px; background: var(--fogbank); font-size: 15px; line-height: 22px; }
.doc-cover > .sym { width: 1.4em; height: 1.4em; margin-top: 2px; }
.doc-cover-areas { color: var(--slate-blue); }
.doc-cover-call { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; white-space: nowrap; }
.doc-cover-call .sym-btn { margin-right: 6px; }
.doc-part { padding-top: 34px; }
.doc-part h2 { margin-bottom: 0.55em; }
.doc-part h3 { margin-top: 22px; }
.doc-part > :last-child { margin-bottom: 0; }
.keynote { margin: 36px 0 4px; padding: 20px; border: 2px solid var(--harbor-deep); border-left-width: 8px; }
.keynote h2 { font-size: 22px; line-height: 28px; }
.keynote p { max-width: 52ch; }
@media (min-width: 1180px) {
  .doc-grid { grid-template-columns: minmax(0, 1fr) 230px; grid-template-areas: 'text contents'; column-gap: 48px; align-items: start; padding-top: 20px; }
  .doc-contents { position: sticky; top: 24px; padding: 4px 0 4px 16px; background: none; border: 0; border-left: 2px solid var(--harbor-deep); }
  .doc-contents ol { columns: auto; padding-left: 1.2em; font-size: 15px; line-height: 20px; }
}

/* ---------- the footing: fog, under the page ---------- */
.footing { padding: 40px 0 32px; background: var(--fogbank); border-top: 1px solid var(--hazeline); font-size: 16px; line-height: 24px; }
.footing-id p, .footing-id .postal { margin: 0 0 8px; max-width: 60ch; }
.footing-brand { display: flex; align-items: center; gap: 10px; font: 600 18px/22px var(--face-display); }
.footing-brand svg { width: 36px; height: 36px; }
.postal { font-style: normal; }
.footing-cols { display: grid; gap: 20px; margin: 28px 0; padding-top: 24px; border-top: 1px solid var(--mistline); }
.footing-cols h2 { margin: 0 0 4px; font-size: 15px; line-height: 21px; color: var(--slate-blue); }
.footing-cols ul { list-style: none; margin: 0; padding: 0; }
.footing-cols a { display: inline-block; padding: 10px 0; line-height: 24px; }
.footing-id .footing-terms { margin-top: 14px; font-size: 14px; line-height: 21px; color: var(--slate-blue); max-width: 80ch; }
.footing-legal { margin: 0; font-size: 14px; line-height: 21px; color: var(--slate-blue); }
/* While the analytics notice shows, the page ends with room for it, so its last lines can be scrolled clear. */
html:has([data-ok]:not([hidden])) .footing { padding-bottom: 150px; }
@media (min-width: 760px) { html:has([data-ok]:not([hidden])) .footing { padding-bottom: 104px; } }
@media (min-width: 760px) { .footing-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }

/* ---------- the analytics notice: harbor, across the foot of the window, never over the rail ---------- */
.okbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px;
         padding: 8px var(--side); background: var(--harbor-deep); color: var(--sheetwhite); font-size: 14px; line-height: 20px; }
.okbar[hidden] { display: none; }
.okbar p { margin: 0; max-width: 62ch; }
.okbar a { color: var(--sheetwhite); text-decoration-color: var(--mistline); }
.okbar-btns { display: flex; gap: 8px; }
.okbar .act { background: var(--sheetwhite); border-color: var(--sheetwhite); color: var(--harbor-deep); }
.okbar .act:hover { background: var(--fogbank); border-color: var(--fogbank); color: var(--harbor-deep); }
.okbar .act-on-dark { background: transparent; border-color: var(--sheetwhite); color: var(--sheetwhite); }
.okbar .act-on-dark:hover { background: rgb(255 255 255 / 0.12); color: var(--sheetwhite); }
html:has([data-ok]:not([hidden])) { scroll-padding-bottom: 8rem; }
@media (min-width: 1080px) { .okbar { left: var(--rail-w); padding: 10px 32px; font-size: 15px; line-height: 22px; } }
@media (max-height: 480px) { .okbar { flex-wrap: nowrap; padding-block: 4px; font-size: 13px; line-height: 18px; } }

/* ---------- small pieces ---------- */
.received { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.received .sym { color: var(--berry); }

/* ---------- the cost calculator: a takeoff sheet, one row an item, the totals beside it ---------- */
.sumup { display: grid; gap: 20px; margin: 0 0 28px; }
.sumup-inputs { min-width: 0; padding: 4px 16px 12px; background: var(--sheetwhite); border: 1px solid var(--hazeline); }
.sumup-sheet { table-layout: fixed; }
.sumup-sheet thead th { font-size: 14px; line-height: 20px; }
.sumup-sheet tbody th, .sumup-sheet tbody td { padding: 6px 12px 6px 0; vertical-align: middle; font-size: 16px; line-height: 22px; }
.sumup-sheet tbody th { font-weight: 600; }
.sumup-sheet tbody th label { font-weight: 600; }
.sumup-sheet .sumup-group th { padding-top: 16px; font: 600 14px/20px var(--face-display); color: var(--slate-blue); border-bottom: 1px solid var(--harbor-deep); }
.sumup-count input { width: 6rem; display: inline-block; vertical-align: middle; }
.sumup-count-unit select { display: inline-block; width: auto; min-width: 8rem; margin-left: 8px; vertical-align: middle; }
.sumup-col-item { width: 30%; } .sumup-col-count { width: 34%; } .sumup-col-nat { width: 18%; } .sumup-col-est { width: 18%; }
.sumup-option th { padding-left: 18px; font-weight: 400; }
.sumup-option th label { font-weight: 400; }
.sumup-option .sumup-count input { width: 24px; height: 24px; min-height: 0; padding: 0; accent-color: var(--berry); }
.sumup-nat, .sumup-est { font-family: var(--face-display); font-variant-numeric: tabular-nums; }
.sumup-nat { font-weight: 600; }
.sumup-sheet .sumup-est { color: var(--slate-blue); font-size: 15px; }
.sumup-more { margin-top: 6px; border-top: 1px solid var(--hazeline); }
.sumup-more summary { cursor: pointer; display: flex; align-items: center; min-height: 48px; font: 600 16px/22px var(--face-display); }
.sumup-more summary::marker { color: var(--berry); }
.sumup-result { display: grid; gap: 8px; align-content: start; padding: 18px 20px; background: var(--fogbank); border: 2px solid var(--harbor-deep); }
.sumup-label { margin: 0; font-size: 15px; line-height: 21px; font-weight: 600; color: var(--slate-blue); }
.sumup-total { margin: 0; font: 700 var(--size-price)/var(--line-price) var(--face-display); font-variant-numeric: tabular-nums; letter-spacing: -0.015em; }
.sumup-total-empty { font: 400 16px/24px var(--face-text); letter-spacing: 0; color: var(--slate-blue); }
.sumup-mine { margin: 0; font-weight: 600; }
.sumup-notes { margin: 0; font-size: 15px; line-height: 22px; color: var(--slate-blue); }
.sumup-mine[hidden], .sumup-notes[hidden] { display: none; }
.sumup-result .act { justify-self: start; margin-top: 6px; }
.sumup-fine { margin: 4px 0 0; font-size: 14px; line-height: 20px; color: var(--slate-blue); }
@media (max-width: 759px) {
  /* On a phone each row is the item and its count, with the line's figures under them once a count goes in. */
  .sumup-inputs { padding: 4px 12px 10px; }
  /* Not a table at all on a phone: the column widths would squeeze each row into the first column. */
  .sumup-sheet, .sumup-sheet tbody { display: block; width: 100%; }
  .sumup-sheet thead, .sumup-sheet colgroup { display: none; }
  .sumup-sheet tbody tr:not(.sumup-group) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--hazeline); }
  .sumup-sheet tbody tr:not(.sumup-group) > * { border: 0; padding: 0; }
  .sumup-sheet .sumup-group { display: block; }
  .sumup-sheet .sumup-group th { display: block; }
  .sumup-count { justify-self: end; text-align: right; }
  .sumup-count input { width: 5.5rem; }
  .sumup-count-unit { display: flex; justify-content: flex-end; }
  .sumup-count-unit select { min-width: 0; width: 8.25rem; }
  .sumup-nat:not(:empty), .sumup-est:not(:empty) { grid-column: 1 / -1; display: block; padding-bottom: 4px; }
  .sumup-nat:empty, .sumup-est:empty { display: none; }
  .sumup-nat::before, .sumup-est::before { content: attr(data-th) ':'; margin-right: 8px; font: 400 14px/20px var(--face-text); color: var(--slate-blue); }
}
@media (max-width: 374px) {
  .sumup-sheet tbody tr:not(.sumup-group) { grid-template-columns: 1fr; }
  .sumup-count { justify-self: start; text-align: left; }
  .sumup-count-unit { justify-content: flex-start; }
}
@media (min-width: 760px) {
  .sumup-count input { width: 5.5rem; }
}
@media (min-width: 1180px) {
  .sumup { grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
  .sumup-result { position: sticky; top: 24px; }
}

/* ---------- the water supplier lookup on the neighborhoods page (October 14, 2026): an area in, its water out ----------
   White paper with a harbor wall, like the plan card: the area on top, the answer on fog under it. The answer reads in
   three parts: what the area's page says, with its sources; each supplier it names, with figures and report; then tile
   and grout, the two links and the bill. A USGS rating is a tag with its word inside: outlined for hard, filled harbor
   for very hard, so the difference never rests on colour. Without JavaScript the form stays hidden and the open
   .waterbook-all carries every area and supplier. From 1180 px the answer's words sit left and its figures right. */
.waterbook { display: grid; margin: 0 0 28px; background: var(--sheetwhite); border: 2px solid var(--harbor-deep); }
.waterbook[hidden] { display: none; }
.waterbook-pick { padding: 14px 16px 16px; }
.waterbook-pick label { display: block; margin-bottom: 6px; font: 600 17px/22px var(--face-display); }
.waterbook-out { padding: 18px 16px 20px; background: var(--fogbank); border-top: 1px solid var(--hazeline); }
.waterbook-empty { margin: 0; font-size: 16px; line-height: 24px; color: var(--slate-blue); }
.waterbook-answer { display: grid; gap: 20px; }
.waterbook-name { margin: 0 0 6px; }
.waterbook-said { margin: 0 0 10px; font-size: var(--size-lead); line-height: var(--line-lead); }
.waterbook-src, .waterbook-scale { margin: 0; font-size: 15px; line-height: 22px; color: var(--slate-blue); }
.waterbook-scale { margin-top: 12px; }
.waterbook-label, .waterbook-areas caption { margin: 0 0 6px; padding: 0; text-align: left; font: 600 15px/22px var(--face-display); color: var(--slate-blue); }
.waterbook-supplier { padding: 12px 0 14px; border-top: 1px solid var(--hazeline); }
.waterbook-who { margin: 0 0 5px; font: 600 18px/24px var(--face-display); }
.waterbook-figs { margin: 0 0 6px; }
.waterbook-figs div { display: grid; gap: 2px; padding: 5px 0; }
.waterbook-figs dt { font-size: 15px; line-height: 22px; color: var(--slate-blue); }
.waterbook-figs dd { margin: 0; font-size: 17px; line-height: 26px; }
.waterbook-mg { font-variant-numeric: tabular-nums; }
.waterbook-grade { display: inline-block; padding: 0 7px; border: 1.5px solid var(--harbor-deep); font: 600 14px/21px var(--face-display); white-space: nowrap; }
.waterbook-grade-very { background: var(--harbor-deep); color: var(--sheetwhite); }
.waterbook-none { margin: 0; font-size: 17px; line-height: 26px; }
.waterbook-tile { margin: 0 0 6px; }
.waterbook-next { list-style: none; margin: 0 0 12px; padding: 0; }
.waterbook-next a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 0; font-weight: 600; text-decoration: none; }
.waterbook-next a::before { content: ''; flex: none; width: 14px; height: 14px; background: var(--swing-mark) center / contain no-repeat; }
.waterbook-next a:hover { text-decoration: underline; text-decoration-color: var(--berry); }
.waterbook-bill { margin: 0; padding-top: 12px; border-top: 1px solid var(--hazeline); font-weight: 600; }
.waterbook-all { border-top: 1px solid var(--hazeline); }
.waterbook-all > summary { cursor: pointer; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 0; list-style: none; }
.waterbook-all > summary::-webkit-details-marker { display: none; }
.waterbook-all > summary::before { content: '+'; flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 2px solid var(--harbor-deep); font: 700 18px/1 var(--face-display); }
.waterbook-all[open] > summary::before { content: '\2212'; }
.waterbook-all > summary h3 { margin: 0; }
.waterbook-ref { display: grid; gap: 28px; padding: 4px 0 28px; }
.waterbook-ref .tabular { margin: 0; }
.waterbook-grid { display: grid; column-gap: 40px; }
@media (prefers-reduced-motion: no-preference) {
  .waterbook-out .waterbook-answer { animation: waterbook-in 160ms ease-out; }
  @keyframes waterbook-in { from { opacity: 0; transform: translateY(4px); } }
}
@media (min-width: 760px) {
  .waterbook-pick { display: flex; align-items: center; gap: 16px; padding: 16px 20px; }
  .waterbook-pick label { margin: 0; }
  .waterbook-pick select { flex: 0 1 24rem; }
  .waterbook-out { padding: 20px 20px 24px; }
  .waterbook-figs div { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; align-items: baseline; }
  .waterbook-areas tbody th { width: 13rem; }
  .waterbook-areas td:last-child { width: 32%; font-size: 15px; line-height: 22px; }
}
@media (min-width: 1180px) {
  .waterbook-answer { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); grid-template-rows: auto 1fr; grid-template-areas: 'say figures' 'more figures'; column-gap: 40px; row-gap: 20px; }
  .waterbook-answer > .waterbook-say { grid-area: say; }
  .waterbook-answer > .waterbook-figures { grid-area: figures; }
  .waterbook-answer > .waterbook-more { grid-area: more; align-self: start; }
  .waterbook-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}