/* ==========================================================================
   Client tools: the Re-clean Promise (/our-promise/), client service requests (/manage/)
   and invoice payment (/pay/).
   Owner: "client" builder. Loaded via front matter "styles": ["tools.css"].
   Page layout only. Uses the design tokens from site.css; no new colors or type styles.
   ========================================================================== */

/* site.css zeroes the margin on .zone-list, which cancels the stack spacing above it (pay: "At a glance") */
.stack-lg > * + .zone-list { margin-top: var(--space-5); }
/* A note on a linen band needs an edge, or it disappears into the band */
.section--band .note { border: var(--border-hair); }

/* ---------- Split hero with the circular supplies photo (our-promise) ---------- */
.promise-hero-media { width: 100%; max-width: 24rem; justify-self: center; align-self: center; }
@media (max-width: 859px) { .promise-hero-media { max-width: 15rem; margin-top: var(--space-4); } }

/* ---------- Form sections: explanation beside the form card ---------- */
.tool-form { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.tool-form > .tool-aside { position: sticky; top: calc(var(--header-h) + 24px); }
@media (max-width: 899px) {
  .tool-form { grid-template-columns: 1fr; }
  .tool-form > .tool-aside { position: static; }
}
.form-card .form-success { margin: 0; }

/* A group of fields inside a longer form: a small eyebrow heading, and a hairline above every group after the first */
.form .fs-group { gap: var(--space-4); }
.form .fs-group > legend { float: left; width: 100%; margin: 0; padding: 0; font-size: var(--step--2); font-weight: 500; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-text-subtle); }
.form .fs-group + .fs-group { padding-top: var(--space-5); border-top: var(--border-hair); }
.form fieldset > .hint { margin-top: calc(var(--space-2) * -1); }

/* Chips used as form choices: a check mark on the selected chip, so state never relies on color alone */
.chip-row.is-choice .chip { min-height: 44px; }
.chip-row.is-choice .chip:has(input:checked)::before {
  content: ""; width: 16px; height: 16px; flex-shrink: 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Photo inputs (re-clean form): one compact row each, so the file name is never cut off */
.photo-grid { display: grid; gap: var(--space-3); }
.photo-grid input[type="file"] { max-width: 100%; }
@media (min-width: 600px) {
  .photo-grid .field { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: center; column-gap: var(--space-3); }
}

/* ---------- Two lists side by side (covered / not covered) ---------- */
.list-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) clamp(2rem, 1rem + 4vw, 5rem); }
.list-pair h3 { font-size: var(--step-2); margin-bottom: var(--space-4); }
@media (max-width: 767px) { .list-pair { grid-template-columns: 1fr; } }
/* The line under the lists, with the draft and version note */
.promise-terms-foot { display: grid; gap: var(--space-4); max-width: 46rem; margin-top: var(--space-6); }
.promise-terms-foot .legal-meta { display: block; margin-top: 2px; }

/* ---------- "What you can ask for" cards (manage): a short link line under each ---------- */
.ask-grid .card .meta { margin-top: auto; }

/* ---------- Ways to reach us beside a form: compact icon links ---------- */
.reach-list { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.reach-list a { display: inline-flex; align-items: center; gap: 0.6em; font-weight: 500; }
.reach-list .icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--color-accent); }
.reach-list .reach-label { overflow-wrap: anywhere; }
.reach-list .reach-note { display: block; padding-left: calc(20px + 0.6em); font-size: var(--step--1); color: var(--color-text-muted); }