/* ===========================================================================
   maintenance.css — page-scoped styles for the Coastal home maintenance guide.

   Scope rule: everything here is prefixed .csm- and lives inside .tc-tool, so
   it cannot leak into another tool. The chassis owns the shell, the form
   primitives, the fields, the honest blank, the focus ring and reduced motion.
   This file only adds what the chassis has no class for: the checklist row,
   the "applies to" tags, and the city routing grid.

   Colour rule: no hex literal appears in this file. Every colour resolves
   through a chassis or canon token (var(--tc-*) inside the tool, var(--*)
   canon names outside it). Verified with: grep -n "#[0-9a-fA-F]" maintenance.css
   =========================================================================== */

/* --------------------------------------------------------------------------
   Page frame around the tool card
   -------------------------------------------------------------------------- */

.csm-page {
  padding: clamp(28px, 5vw, 56px) 0 clamp(48px, 7vw, 88px);
  background: var(--foam-50);
}

.csm-crumb {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pacific-700);
}

.csm-crumb a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.csm-lede {
  max-width: 68ch;
  margin: 0 0 26px;
  font-size: clamp(17px, 1.5vw, 19px);
  color: var(--pacific-700);
}

.csm-h1 {
  margin: 0 0 14px;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--pacific-900);
  max-width: 20ch;
}

/* --------------------------------------------------------------------------
   Season navigation — plain in-page anchors, so it works with JS off.
   aria-current="true" marks the season the filter is showing.
   -------------------------------------------------------------------------- */

.csm-seasons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.csm-seasons a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tc-tap);
  padding: 8px 15px;
  border: 2px solid var(--tc-edge);
  border-radius: 999px;
  background: var(--tc-surface);
  color: var(--tc-ink);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.csm-seasons a:hover {
  background: var(--tc-quiet);
}

/* State is carried by aria-current, not by colour alone: the marker glyph is
   real text in the DOM, so a user who cannot see the fill still hears it. */
.csm-seasons a[aria-current="true"] {
  background: var(--tc-ink);
  border-color: var(--tc-ink);
  color: var(--tc-white);
}

.csm-seasons a[aria-current="true"]::after {
  content: " — showing";
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Checklist
   -------------------------------------------------------------------------- */

.csm-group {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
  scroll-margin-top: 96px;
}

.csm-group__legend {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tc-ink-soft);
}

.csm-group__note {
  margin: 0;
  max-width: 68ch;
  font-size: 14px;
  color: var(--tc-ink);
}

.csm-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.csm-item {
  margin: 0;
}

/* The whole row is the target and it is never shorter than 44px. */
.csm-check {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 14px;
  min-height: var(--tc-tap);
  padding: 13px 16px;
  background: var(--tc-surface);
  border: 1px solid var(--tc-edge);
  border-radius: var(--tc-radius-md);
  cursor: pointer;
  transition: background-color var(--tc-t-control) var(--tc-ease);
}

.csm-check:hover {
  background: var(--tc-quiet);
}

.csm-box {
  width: 24px;
  height: 24px;
  margin: 2px 0 0;
  flex: none;
  accent-color: var(--pacific-900);
  cursor: pointer;
}

.csm-body {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.csm-act {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--tc-ink);
}

.csm-why {
  font-size: 14px;
  line-height: 1.5;
  color: var(--tc-ink);
  text-wrap: pretty;
}

/* A ticked row is marked by a solid left edge AND by the checkbox itself.
   Nothing is dimmed, struck through or hidden: a done item is still a fact
   the homeowner may want to re-read. */
.csm-check:has(.csm-box:checked) {
  border-left: 6px solid var(--tc-live);
}

/* --------------------------------------------------------------------------
   "Applies to" tags — present in the HTML, not injected, so a reader with JS
   off can self-select the rows that match their home.
   -------------------------------------------------------------------------- */

.csm-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 3px;
}

.csm-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border: 1px solid var(--tc-edge);
  border-radius: 999px;
  background: var(--tc-quiet);
  color: var(--tc-ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

.csm-tag--land {
  background: var(--tc-warm);
}

/* --------------------------------------------------------------------------
   City routing — six markets, each a pair of honest fields
   -------------------------------------------------------------------------- */

.csm-cities {
  display: grid;
  gap: 14px;
}

.csm-city {
  display: grid;
  gap: 10px;
  padding: 16px 18px;
  background: var(--tc-ground);
  border: 1px solid var(--tc-edge);
  border-radius: var(--tc-radius-md);
  scroll-margin-top: 96px;
}

.csm-city__name {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--tc-ink);
}

.csm-city__fields {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: start;
}

.csm-city .tc-field {
  height: 100%;
}

.csm-source {
  margin: 0;
}

/* --------------------------------------------------------------------------
   Reference block — the sourced statements that ride along with the list
   -------------------------------------------------------------------------- */

.csm-facts {
  display: grid;
  gap: 12px;
}

.csm-fact__chiprow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0;
}

.csm-fact__chiprow a {
  color: var(--tc-ink);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

/* The deliberately-excluded list. Sand edge, same weight as everything else:
   this is a result, not a disclaimer. */
.csm-omitted {
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  background: var(--tc-surface);
  border: 1px solid var(--tc-edge);
  border-left: 6px solid var(--tc-warm);
  border-radius: var(--tc-radius-md);
}

.csm-omitted h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--tc-ink);
}

.csm-omitted p,
.csm-omitted li {
  margin: 0;
  font-size: 14px;
  color: var(--tc-ink);
}

.csm-omitted ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-inline-start: 20px;
}

/* --------------------------------------------------------------------------
   Small helpers
   -------------------------------------------------------------------------- */

.csm-note {
  margin: 0;
  max-width: 70ch;
  font-size: 14px;
  color: var(--tc-ink);
}

.csm-actions-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding-top: 4px;
}

@media (max-width: 620px) {
  .csm-check {
    padding: 14px;
  }

  .csm-seasons a {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* Ticked rows keep their marker when the browser has no :has() support —
   the checkbox state itself is always the primary signal, so nothing is lost. */
@supports not (selector(:has(*))) {
  .csm-check {
    border-left-width: 1px;
  }
}

/* Printing a checklist is a real use: a homeowner walks the house with it. */
@media print {
  .csm-page {
    background: none;
    padding: 0;
  }

  .tc-tool {
    border: 0;
    box-shadow: none;
    padding: 0;
  }

  .tc-input,
  .csm-seasons,
  .tc-actions,
  .csm-actions-foot,
  .tc-status {
    display: none !important;
  }

  .tc-method {
    break-inside: avoid;
  }

  .csm-check {
    break-inside: avoid;
  }
}