/* ============================================================
   H&H Tools calculators — layout v2 (2026-11-02, redesign brief _workspace/20261102_hh-tools_redesign_brief.md).
   Ask (find bar) -> numbered input steps -> one large answer with a drawing and four key values ->
   all results folded into groups -> tabs below (accordion on phones) -> one-line disclaimer.
   Existing tokens only (no new colours, shadows or gradients).
   ============================================================ */
:root { --navy-05: #EDF1F6; }   /* design-system navy-05; styles.css dropped it with the 2026-11-02 menu redesign, the calculators still use it */
.hh2 { background: var(--cream); }
.hh2 > section { padding: 0; }   /* beats the global `section { padding }` */
.hh2 > section.conversion { padding: 56px 0; }
.hh2 .container { max-width: 1320px; }
.hh2 > .hh2-head { padding: 32px 0 0; }
.hh2-head__in { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.hh2-crumb { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.hh2-crumb a { color: var(--hero-navy); }
.hh2-head h1 { margin: 0 0 6px; font: 600 34px/1.15 "Inter Tight", "Inter", sans-serif; color: var(--hero-navy); }
.hh2-lede { margin: 0; max-width: 64ch; color: var(--body); }
.hh2-units { display: inline-flex; padding: 3px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 4px; }
.hh2-units button { min-height: 40px; padding: 0 14px; border: 0; border-radius: 3px; background: none; font: 500 14px "Inter", sans-serif; color: var(--body); cursor: pointer; }
.hh2-units button[aria-pressed="true"] { background: var(--hero-navy); color: var(--surface); }

/* Find bar */
.hh2-find { padding: 18px 0 0; }
.hh2-find__label { margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hero-navy); }
.hh2-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.hh2-seg button, .hh2-shapes button { cursor: pointer; border: 1px solid var(--hairline); border-radius: 4px; background: var(--surface); color: var(--ink); font: 500 15px "Inter", sans-serif; }
.hh2-seg button { min-height: 44px; padding: 0 16px; }
.hh2-seg button[aria-pressed="true"], .hh2-shapes button[aria-pressed="true"] { border-color: var(--hero-navy); outline: 1px solid var(--hero-navy); outline-offset: -2px; color: var(--hero-navy); font-weight: 600; }
.hh2-seg button:hover, .hh2-shapes button:hover { border-color: var(--hero-navy); }

/* Phone answer strip */
.hh2-mini { display: none; }

/* Calculator grid */
.hh2-calc { display: grid; gap: 24px; padding: 20px 0 28px; }
@media (min-width: 1024px) { .hh2-calc { grid-template-columns: 380px minmax(0, 1fr); align-items: start; } }
.hh2-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 4px; }
.hh2-inputs { padding: 4px 0; }
.hh2-step { margin: 0; padding: 16px 20px; border: 0; border-bottom: 1px solid var(--hairline); min-width: 0; }
.hh2-step legend { display: flex; align-items: center; gap: 10px; float: left; width: 100%; margin: 0 0 12px; padding: 0; font: 600 15px "Inter", sans-serif; color: var(--hero-navy); }
.hh2-step legend ~ * { clear: both; }   /* every field clears the floated legend, also when the first field is hidden (2026-11-02) */
.hh2-num { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--hero-navy); color: var(--surface); font-size: 12px; font-weight: 600; }
.hh2-field { margin-bottom: 12px; }
.hh2-field:last-child { margin-bottom: 0; }
.hh2-row { display: grid; grid-template-columns: minmax(0, 1fr) 136px; align-items: center; gap: 6px 12px; }
.hh2-row label, .hh2-field--wide > label { font-size: 14px; color: var(--ink); }
.hh2-field--wide > label { display: block; margin-bottom: 6px; }
.hh2-sub { display: block; font-size: 12px; color: var(--muted); }
.hh2-sub:empty { display: none; }
.hh2-opt { font-size: 12px; color: var(--muted); }
.hh2-in { display: flex; align-items: center; height: 42px; background: var(--surface); border: 1px solid var(--muted); border-radius: 4px; }
.hh2-in:focus-within { border-color: var(--hero-navy); outline: 2px solid var(--hero-orange); outline-offset: 1px; }
.hh2-in input { width: 100%; min-width: 0; height: 100%; padding: 0 8px; border: 0; background: none; font: 500 16px "Inter", sans-serif; font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); }
.hh2-in input:focus { outline: none; }
.hh2-u { padding: 0 10px 0 2px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.hh2-u:empty { display: none; }
.hh2-field--calc .hh2-in { background: var(--navy-05); border-style: dashed; }
.hh2-field--calc input { color: var(--hero-navy); font-weight: 600; }
.hh2-field--calc input::placeholder { color: var(--muted); font-weight: 400; }
.hh2 [aria-invalid="true"] { border-color: var(--orange-90); }
.hh2-in:has([aria-invalid="true"]) { border: 2px solid var(--orange-90); }
.hh2 textarea { width: 100%; padding: 10px 12px; font: 15px/1.5 ui-monospace, "SFMono-Regular", Consolas, monospace; color: var(--ink); background: var(--surface); border: 1px solid var(--muted); border-radius: 4px; resize: vertical; }
.hh2 .fmap-select { width: 100%; min-height: 44px; font-size: 16px; }
.hh2-hint { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.hh2-tlabel--show { display: block; margin: 0 0 8px; }
.hh2-tlabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* the step title says it */
.hh2-shapes { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; }
.hh2-shapes button { display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 60px; padding: 8px 2px 6px; font-size: 11px; line-height: 1.2; color: var(--body); hyphens: auto; }
.hh2-shapes button[aria-pressed="true"] { background: var(--navy-05); }
.hh2-shapes svg { width: 30px; height: 22px; }
.hh2-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.hh2-chip { min-height: 32px; padding: 0 12px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--surface); font: 500 13px "Inter", sans-serif; color: var(--body); cursor: pointer; }
.hh2-chip[aria-pressed="true"], .hh2-chip[aria-expanded="true"] { border-color: var(--hero-navy); background: var(--navy-05); color: var(--hero-navy); font-weight: 600; }
.hh2-npick { margin-top: 10px; }
.hh2-npick label { display: block; margin-bottom: 6px; font-size: 13px; color: var(--body); }
.hh-src { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.hh-src:empty { display: none; }
/* Place box (stage 2, 2026-11-02): address or coordinates, Find, up to five Texas matches. */
.hh2-place { display: flex; gap: 8px; }
.hh2-place input { flex: 1; min-width: 0; height: 42px; padding: 0 10px; border: 1px solid var(--muted); border-radius: 4px; background: var(--surface); font: 400 16px "Inter", sans-serif; color: var(--ink); }
.hh2-place__go { min-height: 42px; padding: 0 16px; }
.hh2-place__list { margin: 8px 0 0; padding: 0; list-style: none; border: 1px solid var(--hairline); border-radius: 4px; }
.hh2-place__list li + li { border-top: 1px solid var(--hairline); }
.hh2-place__list button { display: block; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; background: var(--surface); font: 400 14px "Inter", sans-serif; color: var(--ink); text-align: left; cursor: pointer; }
.hh2-place__list button:hover, .hh2-place__list button:focus-visible { background: var(--navy-05); }
/* Next-step links under a hydrology answer; the highlighted cell of a frequency table. */
.hh2-next { margin: 12px 0 0; font-size: 14px; color: var(--body); }
.hh-idf td, .hh-idf th { text-align: right; font-variant-numeric: tabular-nums; }
.hh-idf th[scope="row"], .hh-idf thead th:first-child { text-align: left; }
.hh-idf__on, tr.hh-idf__on > * { background: var(--navy-05); font-weight: 600; color: var(--hero-navy); }
.hh-err { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: var(--orange-90); }
.hh-err:empty { display: none; }
.hh2-linkbtn { padding: 0; border: 0; background: none; font: inherit; color: var(--hero-navy); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.hh2-pair { margin-top: 4px; }
.hh2-more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 20px; font-size: 14px; }
.hh2-more .hh2-linkbtn, .hh2-open span { font-size: 14px; font-weight: 600; }
.hh2-open { position: relative; display: inline-block; }
.hh2-open span { color: var(--hero-navy); text-decoration: underline; text-underline-offset: 3px; }
.hh2-open input[type="file"] { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.hh2-open:focus-within span { outline: 2px solid var(--hero-orange); outline-offset: 2px; }
.hh-notice { margin: 0 20px 12px; }

/* Answer card */
.hh2-out { display: grid; gap: 16px; align-content: start; min-width: 0; }
.hh2-answer__main { display: grid; gap: 20px; padding: 22px 24px; align-items: center; }
@media (min-width: 640px) { .hh2-answer__main { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }
.hh2-answer--empty { padding: 22px 24px; }
.hh2-answer__k { margin: 0; font: 600 13px "Inter", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.hh2-big { margin: 6px 0 6px; font: 600 52px/1.05 "Inter Tight", "Inter", sans-serif; color: var(--hero-navy); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hh2-big small { margin-left: 6px; font-size: 22px; font-weight: 500; color: var(--body); }
.hh2-state { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 4px 10px; border-radius: 999px; background: var(--navy-05); font-size: 13px; font-weight: 600; color: var(--hero-navy); }
.hh2-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--hero-navy); }
.hh2-plain { margin: 12px 0 0; max-width: 46ch; font-size: 15px; color: var(--body); }
.hh2-warn { margin: 0 24px 12px; }
.hh2-keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--hairline); }
@media (min-width: 640px) { .hh2-keys { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hh2-keys div { padding: 14px 18px; border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.hh2-keys dt { margin: 0; font-size: 12px; color: var(--muted); }
.hh2-keys dd { margin: 2px 0 0; font: 600 20px "Inter Tight", "Inter", sans-serif; color: var(--hero-navy); font-variant-numeric: tabular-nums; }
.hh2-keys dd small { margin-left: 3px; font: 500 12px "Inter", sans-serif; color: var(--muted); }
.hh2-extra { padding: 4px 24px 12px; }
.hh2-extra h3 { margin: 12px 0 6px; font-size: 15px; color: var(--hero-navy); }
.hh2-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 24px; border-top: 1px solid var(--hairline); }
.hh2-acts .btn { min-height: 44px; padding: 0 18px; font-size: 15px; }
.hh2-acts .hh2-linkbtn { font-size: 14px; font-weight: 500; }
.hh2-acts__note { flex: 1 1 100%; font-size: 12px; color: var(--muted); }
.hh2-fig { margin: 0; }
.hh2-fig svg { display: block; width: 100%; height: auto; }
.hh2-fig figcaption { margin-top: 4px; }
.hh-sec__water { fill: var(--navy-05); }
.hh-sec__ws { stroke: var(--hero-navy); stroke-width: 2; }
.hh-sec__ground { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.hh-sec__crit { stroke: var(--hero-orange); stroke-width: 1.5; stroke-dasharray: 5 4; }
.hh-dim { fill: none; stroke: var(--muted); stroke-width: 1; }
.hh-dim__t { font: 500 12px "Inter", sans-serif; fill: var(--body); }
.hh-dim__t--y { font-weight: 600; font-size: 13px; fill: var(--hero-navy); }
.hh-dim__t--crit { font-size: 11px; fill: var(--orange-90); }
.hh-stale { opacity: 0.55; transition: opacity 150ms ease-out; }

/* All results */
.hh2-all summary { display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 0 24px; font-weight: 600; font-size: 15px; color: var(--hero-navy); cursor: pointer; list-style: none; }
.hh2-all summary::-webkit-details-marker { display: none; }
.hh2-all summary span { margin-right: auto; margin-left: 6px; font-weight: 500; color: var(--muted); }
.hh2-all summary::after { content: "+"; font-size: 20px; line-height: 1; }
.hh2-all[open] summary::after { content: "\2212"; }
.hh2-groups { display: grid; border-top: 1px solid var(--hairline); }
@media (min-width: 768px) { .hh2-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hh2-groups section + section { border-left: 1px solid var(--hairline); } }
.hh2-groups section { padding: 12px 20px 16px; min-width: 0; }
.hh2-groups h3 { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.hh2-groups table { width: 100%; border-collapse: collapse; font-size: 14px; }
.hh2-groups th { padding: 5px 8px 5px 0; font-weight: 400; text-align: left; color: var(--body); border-bottom: 1px solid var(--hairline); }
.hh2-groups td { padding: 5px 0; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 500; border-bottom: 1px solid var(--hairline); }
.hh2-groups td small { font-weight: 400; color: var(--muted); }
.hh-scroll { overflow-x: auto; }

/* Tabs below (accordion on phones) */
.hh2 > .hh2-below { padding: 8px 0 40px; }
.hh2-tablist { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--hairline); }
.hh2-tablist button { min-height: 44px; padding: 0 16px; border: 0; border-bottom: 2px solid transparent; background: none; font: 500 15px "Inter", sans-serif; color: var(--body); cursor: pointer; }
.hh2-tablist button[aria-selected="true"] { color: var(--hero-navy); font-weight: 600; border-bottom-color: var(--hero-orange); }
.hh-verify-badge { margin-left: 6px; font-size: 12px; font-weight: 600; color: var(--hero-navy); }
.hh2-panel { background: var(--surface); border: 1px solid var(--hairline); border-top: 0; border-radius: 0 0 4px 4px; }
.hh2-panel__body { padding: 20px 24px; font-size: 15px; color: var(--body); }
.hh2-panel__body h3 { margin: 0 0 8px; font-size: 16px; color: var(--hero-navy); }
.hh2-acc { display: none; margin: 0; }
.hh2-acc button { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 16px; border: 0; background: none; font: 600 15px "Inter", sans-serif; color: var(--hero-navy); text-align: left; cursor: pointer; }
.hh2-acc button::after { content: "+"; font-size: 20px; line-height: 1; }
.hh2-acc button[aria-expanded="true"]::after { content: "\2212"; }
@media (min-width: 768px) {
  .hh2-panel:not([data-active]) { display: none; }
  .hh2-panel:focus-visible { outline: 2px solid var(--hero-orange); outline-offset: 2px; }
}
@media (max-width: 767px) {
  .hh2-tablist { display: none; }
  .hh2-panel { margin-bottom: 8px; border-top: 1px solid var(--hairline); border-radius: 4px; }
  .hh2-acc { display: block; }
  .hh2-panel:not([data-open]) .hh2-panel__body { display: none; }
  .hh2-panel__body { padding: 4px 16px 16px; }
}
.hh2-panel .fmap-dl { margin: 0; }
.hh-verify td:nth-child(4), .hh-verify td:nth-child(5) { white-space: nowrap; }
.hh2-panel .fmap-chart { max-width: 640px; margin: 0; }
.hh-data { margin-top: 6px; font-size: 13px; }
.hh-data summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--hero-navy); font-weight: 600; }
.hh-key { display: inline-block; width: 22px; height: 0; margin-right: 6px; vertical-align: middle; border-top: 2px solid var(--hero-navy); }
.hh-key--2 { border-top-style: dashed; }

/* Fine print */
.hh2 > .hh2-fine { padding: 24px 0 40px; font-size: 13px; color: var(--muted); }
.hh2-fine p { margin: 0 0 8px; max-width: 90ch; }
.hh2-fine summary { display: inline-flex; min-height: 44px; align-items: center; color: var(--hero-navy); font-weight: 600; cursor: pointer; }
.hh2-fine .fmap-disclaimer { max-width: 90ch; font-size: 14px; color: var(--body); }

/* Phones: the answer rides above the inputs */
@media (max-width: 1023px) {
  .hh2-mini { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin: 14px 0 0; padding: 12px 16px; border-radius: 4px; background: var(--hero-navy); color: var(--surface); }
  .hh2-mini p { margin: 0; }
  .hh2-mini__k { flex: 1 1 100%; font-size: 12px; opacity: 0.85; }
  .hh2-mini__v { font: 600 28px/1.1 "Inter Tight", "Inter", sans-serif; font-variant-numeric: tabular-nums; }
  .hh2-mini__v small { font-size: 15px; font-weight: 500; opacity: 0.85; }
  .hh2-mini__s { font-size: 12px; }
}
@media (max-width: 767px) {
  .hh2 .container { padding: 0 16px; }
  .hh2 > .hh2-head { padding-top: 20px; }
  .hh2-head h1 { font-size: 26px; }
  .hh2-seg--find { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .hh2-seg--find button { white-space: nowrap; padding: 0 12px; font-size: 14px; }
  .hh2-row { grid-template-columns: minmax(0, 1fr) 132px; }
  .hh2-big { font-size: 42px; }
  .hh2-answer__main, .hh2-acts { padding-left: 16px; padding-right: 16px; }
  .hh2-acts .btn { flex: 1 1 40%; justify-content: center; }
}

/* Print: only the calculation sheet (#hh-print) */
.hh-print { display: none; }
@media print {
  body > *:not(main), main.hh2 > *:not(.hh-print) { display: none !important; }
  .hh-print { display: block; font-size: 10pt; color: var(--ink); }
  .hh-sheet__title { margin: 4px 0 2px; font: 600 16pt/1.25 "Inter Tight", "Inter", sans-serif; color: var(--hero-navy); }
  .hh-sheet__meta { margin-bottom: 8px; font-size: 9pt; color: var(--body); }
  .hh-print h2 { margin: 12px 0 4px; font-size: 11pt; break-after: avoid; }
  .hh-print .fmap-table { font-size: 9.5pt; }
  .hh-print .fmap-table td, .hh-print .fmap-table th { padding: 3px 6px; }
  .hh-print .hh-sheet__table th[scope="row"] { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink); }
  .hh-print .hh2-fig, .hh-print .hh-chart { max-width: 5.5in; margin: 8px 0; break-inside: avoid; }
  .hh-sheet__list { margin: 0 0 0 16px; font-size: 9pt; }
  .hh-sheet__list li { margin-bottom: 2px; }
  .hh-print tr { break-inside: avoid; }
}

/* Manning's n page: the table by source (above the calculator) */
.hh-nt { padding: 32px 0 8px; }
.hh-nt h2 { margin: 0 0 8px; font: 600 26px/1.2 "Inter Tight", "Inter", sans-serif; color: var(--hero-navy); }
.hh-nt-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 16px 0 8px; }
.hh-nt-bar label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--ink); }
.hh-nt-bar > div { flex: 1 1 240px; min-width: 0; max-width: 380px; }
.hh-nt-bar .fmap-select, .hh-nt-bar input[type="text"] { width: 100%; min-width: 0; }
.hh-nt-bar input[type="text"] { min-height: 44px; padding: 0 12px; font-size: 16px; border: 1px solid var(--hairline); border-radius: 4px; background: var(--surface); color: var(--ink); }
.hh-nt-source { margin-top: 32px; }
.hh-nt-kicker { margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange-90); }
.hh-nt-title { margin: 0 0 6px; font: 600 26px/1.25 "Inter Tight", "Inter", sans-serif; color: var(--hero-navy); }
.hh-nt-cite { margin: 0 0 14px; max-width: 90ch; font-size: 14px; line-height: 1.55; color: var(--body); }
.hh-nt-table th:nth-child(2) { text-align: left; }
.hh-nt-table td:first-child { white-space: nowrap; }
.hh-nt-table td:nth-child(2) { text-align: left; white-space: normal; min-width: 18em; color: var(--ink); }
.hh-nt-table .hh-nt-group th { padding-top: 18px; font-size: 13px; letter-spacing: 0.04em; color: var(--hero-navy); text-transform: none; }
.hh2 .fmap-table tbody th[scope="row"] { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--body); font-size: 14px; }
.hh2-find:empty { display: none; }
.hh2-sec { margin: 8px 0 0; font: 600 26px/1.2 "Inter Tight", "Inter", sans-serif; color: var(--hero-navy); }
.hh2-groups td.hh2-txt { white-space: normal; text-align: right; }
.hh2-groups section:only-child { grid-column: 1 / -1; }
.hh2-out > *, .hh2-calc > * { min-width: 0; }
@media (max-width: 767px) {
  .hh2 > section.conversion { padding: 32px 0; }
  .hh2 > section.conversion h2 { font-size: 22px; }
  .hh2-shapes { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
  .hh2-shapes button { min-height: 54px; }
  .hh2-step { padding: 14px 16px; }
  .hh2-answer__main { gap: 12px; padding-top: 16px; padding-bottom: 12px; }
  .hh2-answer__fig { max-width: 340px; }
  .hh2-keys div { padding: 10px 14px; }
}

/* /hh-tools/ list page */
.hh2 > .hh2-hub__tools { padding: 24px 0 8px; }
.hh2-hub__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.hh2-hub__group { margin: 24px 0 4px; font: 600 24px/1.2 "Inter Tight", "Inter", sans-serif; color: var(--hero-navy); }
.sr-only + .hh2-hub__group { margin-top: 0; }
.hh2-hub__gline { margin: 0 0 14px; font-size: 15px; color: var(--body); }
.hh2-hub__card { display: grid; align-content: start; gap: 6px; height: 100%; padding: 20px 22px; color: var(--body); text-decoration: none; }
.hh2-hub__card:hover, .hh2-hub__card:focus-visible { border-color: var(--hero-navy); }
.hh2-hub__icon { width: 40px; height: 40px; color: var(--hero-navy); }
.hh2-hub__name { font: 600 20px/1.25 "Inter Tight", "Inter", sans-serif; color: var(--hero-navy); }
.hh2-hub__line { font-size: 15px; color: var(--ink); }
.hh2-hub__meta { font-size: 13px; color: var(--muted); }
.hh2-hub__ver { font-size: 12px; font-weight: 600; color: var(--hero-navy); }
.hh2 > .hh2-hub__about, .hh2 > .hh2-hub__next { padding: 40px 0 8px; }
.hh2-hub__about h2, .hh2-hub__next h2 { margin: 0 0 16px; font: 600 26px/1.2 "Inter Tight", "Inter", sans-serif; color: var(--hero-navy); }
.hh2-hub__by { margin: 16px 0 0; font-size: 15px; color: var(--body); }
.hh2-hub__soon { margin: 0; padding-left: 20px; color: var(--body); }
.hh2-hub__soon li { margin-bottom: 8px; }
.hh2-hub__soon strong { color: var(--ink); }
.hh2 > .hh2-hub__next + .conversion { margin-top: 40px; }

/* Texas Drainage Criteria Directory (2026-11-04): text columns, left aligned and wrapping; one card per document on phones. */
.fmap-table.hh-crit { width: 100%; table-layout: fixed; }
.fmap-table.hh-crit th, .fmap-table.hh-crit td { text-align: left; white-space: normal; vertical-align: top; overflow-wrap: anywhere; }
.fmap-table.hh-crit thead th:nth-child(1) { width: 20%; }
.fmap-table.hh-crit thead th:nth-child(2) { width: 30%; }
.fmap-table.hh-crit thead th:nth-child(3) { width: 18%; }
.fmap-table.hh-crit small { color: var(--muted); }
@media (max-width: 720px) {
  .fmap-table.hh-crit thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .fmap-table.hh-crit, .fmap-table.hh-crit tbody, .fmap-table.hh-crit tr, .fmap-table.hh-crit th, .fmap-table.hh-crit td { display: block; width: auto; }
  .fmap-table.hh-crit tr { padding: 12px 0; border-bottom: 1px solid var(--hairline); }
  .fmap-table.hh-crit th, .fmap-table.hh-crit td { padding: 2px 12px; border: 0; }
  .fmap-table.hh-crit td:empty { display: none; }
}

/* Road Drainage Calculators (2026-11-04): numbered steps. */
.hh-steps { margin: 0 0 20px; padding-left: 22px; }
.hh-steps li { margin: 0 0 10px; line-height: 1.55; }

/* Criteria directory: values by document. */
.hh-crit-d { margin: 0 0 8px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 4px; }
.hh-crit-d summary { cursor: pointer; font-weight: 500; color: var(--hero-navy); }
.hh-crit-d summary small { display: block; font-weight: 400; color: var(--muted); }
.hh-crit-d .fmap-dl { margin: 12px 0 0; }
.hh-crit-d small { color: var(--muted); }