.tool-page {
  max-width: 72rem;
  padding-block: var(--space-5) var(--space-9);
}

.tools-masthead {
  border-bottom: 1px solid var(--hairline);
  padding-block: var(--space-6) var(--space-5);
}

.tools-masthead__grid {
  display: grid;
  gap: var(--space-4);
}

.tools-masthead h1,
.tool-detail__header h1 {
  font-size: var(--text-display);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  margin: 0;
  max-width: 13ch;
}

.tools-masthead__grid > p,
.tool-detail__header > p:last-child {
  color: var(--muted);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  margin: 0;
  max-width: 38rem;
}

.tools-catalog { padding-block: var(--space-7); }

.tools-section-heading {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.tools-section-heading h2,
.tools-standard h2,
.tool-notes h2,
.hts-results h2 {
  font-size: var(--text-h2);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

.tools-section-heading > p { color: var(--muted); margin: 0; max-width: var(--measure); }
.tool-card-grid { display: grid; gap: var(--space-3); }

.tool-card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  min-height: 14rem;
  padding: var(--space-5);
  text-decoration: none;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.tool-card:hover,
.tool-card:focus-visible {
  border-color: var(--brand-700);
  box-shadow: 0 8px 24px rgb(0 0 0 / 8%);
  transform: translateY(-2px);
}

.tool-card--featured { background: var(--brand-50); }
.tool-card__kind { color: var(--muted); font-size: var(--text-caption); font-weight: 700; text-transform: uppercase; }
.tool-card h3 { font-size: var(--text-h3); margin-block: var(--space-4) var(--space-2); }
.tool-card p { color: var(--muted); line-height: var(--leading-body); margin-top: 0; }
.tool-card__action { font-weight: 700; margin-top: auto; }

.tools-standard {
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: var(--space-5);
  padding-block: var(--space-6);
}

.tools-standard ul { list-style: none; margin: 0; padding: 0; }
.tools-standard { background: var(--muted-bg); border: 1px solid var(--hairline); padding: var(--space-5); }
.tools-standard li { border-top: 1px solid var(--hairline); display: grid; gap: var(--space-1); padding-block: var(--space-3); }
.tools-standard li span { color: var(--muted); }

.tool-detail__header {
  border-bottom: 1px solid var(--hairline);
  padding-block: var(--space-6);
}

.tool-workspace {
  display: grid;
  gap: var(--space-4);
  padding-block: var(--space-6);
}

.tool-workspace--single { max-width: 42rem; }
.tool-panel { border: 1px solid var(--hairline); border-radius: var(--radius); padding: var(--space-5); }
.tool-form { background: var(--muted-bg); display: grid; gap: var(--space-4); }
.tool-form .form-field { margin: 0; }
.tool-form input,
.tool-form select,
.tool-search input { width: 100%; }
.tool-form__pair { align-items: end; display: grid; gap: var(--space-2); grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.tool-form__triple { display: grid; gap: var(--space-3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tool-facts { display: grid; gap: var(--space-2); margin: 0; }
.tool-facts div { border-top: 1px solid var(--hairline); display: grid; gap: var(--space-1); padding-block: var(--space-2); }
.tool-facts dt { color: var(--muted); font-size: var(--text-caption); font-weight: 700; }
.tool-facts dd { margin: 0; }
.carrier-fallback { margin-block: var(--space-2) 0; padding-left: var(--space-4); }
.tool-swap { align-items: center; background: var(--paper); border: 1px solid var(--hairline); border-radius: 999px; display: inline-flex; height: 2.75rem; justify-content: center; margin-bottom: var(--space-1); width: 2.75rem; }
.tool-swap:hover,
.tool-swap:focus-visible { border-color: var(--brand-700); }

.tool-result { align-content: start; background: var(--paper); display: grid; gap: var(--space-3); }
.tool-result__label { color: var(--muted); font-size: var(--text-caption); font-weight: 700; margin: 0; text-transform: uppercase; }
.tool-result__value { font-size: clamp(2.4rem, 6vw, 4.5rem); font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: var(--tracking-tight); overflow-wrap: anywhere; }
.tool-result > p:not(.tool-result__label, .form-error) { color: var(--muted); margin: 0; }
.tool-result .btn { justify-self: start; }

.tool-notes { border-top: 1px solid var(--hairline); display: grid; gap: var(--space-3); padding-block: var(--space-5); }
.tool-notes p { color: var(--muted); line-height: var(--leading-body); margin: 0; max-width: var(--measure); }

.tool-search { background: var(--muted-bg); border: 1px solid var(--hairline); border-radius: var(--radius); display: grid; gap: var(--space-2); margin-block: var(--space-6); padding: var(--space-5); }
.tool-search > label { font-weight: 700; }
.tool-search > div { display: grid; gap: var(--space-2); }
.tool-search .form-hint { margin: 0; }

.hts-results { margin-block: var(--space-6); }
.hts-results__header { align-items: baseline; border-bottom: 2px solid var(--ink); display: flex; gap: var(--space-3); justify-content: space-between; padding-bottom: var(--space-3); }
.hts-results__header span { color: var(--muted); white-space: nowrap; }
.hts-result { border-bottom: 1px solid var(--hairline); padding: var(--space-4) 0 var(--space-4) calc(var(--hts-indent) * 0.75rem); }
.hts-result__heading { align-items: baseline; display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: space-between; }
.hts-result h3 { font-family: var(--font-mono); font-size: var(--text-body); margin: 0; }
.hts-result--heading { background: var(--muted-bg); padding-left: calc(var(--hts-indent) * 0.75rem + var(--space-2)); }
.hts-result__kind { font-size: var(--text-caption); font-weight: 700; text-transform: uppercase; }
.hts-result__heading span { color: var(--muted); font-size: var(--text-caption); }
.hts-result > p { line-height: var(--leading-body); margin-block: var(--space-2); }
.hts-result dl { display: grid; gap: var(--space-2); margin: var(--space-3) 0 0; }
.hts-result dl div { background: var(--muted-bg); display: grid; gap: var(--space-1); padding: var(--space-2) var(--space-3); }
.hts-result dt { color: var(--muted); font-size: var(--text-caption); font-weight: 700; }
.hts-result dd { margin: 0; }

.tool-source { align-items: center; border-block: 1px solid var(--hairline); display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; margin-top: var(--space-6); padding-block: var(--space-4); }
.tool-source div { display: grid; gap: var(--space-1); }
.tool-source div span { color: var(--muted); font-size: var(--text-caption); text-transform: uppercase; }
.tool-source a { font-weight: 700; }

.hts-record__heading-code { font-family: var(--font-mono); }
.hts-record { border-bottom: 1px solid var(--hairline); display: grid; gap: var(--space-3); padding-block: var(--space-5); }
.hts-record__rates { display: grid; gap: var(--space-2); margin: 0; }
.hts-record__rates div { background: var(--muted-bg); display: grid; gap: var(--space-1); padding: var(--space-2) var(--space-3); }
.hts-record__rates dt { color: var(--muted); font-size: var(--text-caption); font-weight: 700; }
.hts-record__rates dd { margin: 0; }
.hts-program-details { margin-top: var(--space-2); }
.hts-program-details summary { cursor: pointer; font-size: var(--text-small); font-weight: 700; }
.hts-programs { font-size: var(--text-small); list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.hts-programs li { border-top: 1px solid var(--hairline); padding-block: var(--space-1); }
.hts-programs strong { font-family: var(--font-mono); font-weight: 700; margin-right: var(--space-2); }
.hts-record__source-notes { border-top: 1px solid var(--hairline); display: grid; gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-4); }
.hts-record__source-notes h2 { font-size: var(--text-h3); margin: 0; }
.hts-related { display: grid; gap: var(--space-3); padding-block: var(--space-5); }
.hts-related ul { display: grid; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }

@media (min-width: 42rem) {
  .tool-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-card--featured { grid-column: span 2; }
  .tool-search > div { grid-template-columns: minmax(0, 1fr) auto; }
  .hts-result dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hts-record__rates { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .tools-masthead__grid,
  .tools-section-heading,
  .tools-standard,
  .tool-notes { grid-template-columns: minmax(0, 1.2fr) minmax(20rem, 0.8fr); }
  .tool-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tool-card--featured { grid-column: auto; }
  .tool-workspace:not(.tool-workspace--single) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 30rem) {
  .tool-form__pair { grid-template-columns: 1fr; }
  .tool-form__triple { grid-template-columns: 1fr; }
  .tool-swap { margin: 0; transform: rotate(90deg); }
  .hts-result { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tool-card { transition: none; }
  .tool-card:hover { transform: none; }
}

@media print {
  .tool-form,
  .tool-result .btn,
  .tool-search { display: none; }
  .tool-panel,
  .hts-result { break-inside: avoid; }
}

/* ---- CSP-clean HTS indent levels (replaces inline --hts-indent) ----
   tools.py clamps indent to 0-9. Ten classes replace the inline custom
   property; the padding rule consumes --hts-indent unchanged. */
.hts-result--indent-0 { --hts-indent: 0; }
.hts-result--indent-1 { --hts-indent: 1; }
.hts-result--indent-2 { --hts-indent: 2; }
.hts-result--indent-3 { --hts-indent: 3; }
.hts-result--indent-4 { --hts-indent: 4; }
.hts-result--indent-5 { --hts-indent: 5; }
.hts-result--indent-6 { --hts-indent: 6; }
.hts-result--indent-7 { --hts-indent: 7; }
.hts-result--indent-8 { --hts-indent: 8; }
.hts-result--indent-9 { --hts-indent: 9; }