/* Hallmark · macrostructure: Workbench · genre: modern-minimal · theme: studied-DNA (PVRack) · tone: technical-austere · anchor hue: warm-gold · nav: N1b retained · footer: Ft3 retained · enrichment: none · contrast/slop/honesty/chrome/tokens/responsive/icons/mobile: pass */
/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4 */

html,
body {
  overflow-x: clip;
}

body.tools-page {
  padding-top: var(--header-height);
  color: var(--color-ink);
  background: var(--color-paper);
  font-family: var(--font-body);
}

.tools-page h1,
.tools-page h2,
.tools-page h3 {
  min-width: 0;
  overflow-wrap: anywhere;
}

.tool-shell {
  width: min(100% - (2 * var(--page-gutter)), var(--page-max));
  margin-inline: auto;
}

.tools-intro {
  color: var(--color-night-ink);
  background: var(--color-night);
  border-bottom: var(--rule-hair) solid var(--color-night-2);
}

.tools-intro .tool-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(17rem, 0.85fr);
  gap: var(--space-xl);
  align-items: end;
  padding-block: var(--space-xl) var(--space-2xl);
}

.tools-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-bottom: var(--space-md);
  color: var(--color-night-muted);
  font-size: var(--text-sm);
}

.tools-breadcrumb a,
.tools-breadcrumb span {
  white-space: nowrap;
}

.tools-breadcrumb a:hover {
  color: var(--color-accent);
}

.tools-intro h1 {
  max-width: 17ch;
  color: var(--color-night-ink);
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 5vw, var(--text-3xl));
  font-style: normal;
  font-weight: 400;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.tools-intro-copy {
  max-width: 58ch;
  color: var(--color-night-muted);
  font-size: var(--text-md);
  line-height: 1.65;
}

.tools-principle {
  display: grid;
  gap: var(--space-xs);
  padding-block: var(--space-md);
  border-block: var(--rule-hair) solid var(--color-night-2);
}

.tools-principle strong {
  color: var(--color-accent);
  font-size: var(--text-sm);
}

.tools-principle p {
  color: var(--color-night-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.tool-directory {
  padding-block: var(--space-2xl) var(--space-3xl);
}

.tool-directory-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.75fr);
  gap: var(--space-xl);
  align-items: end;
  margin-bottom: var(--space-lg);
}

.tool-directory h2,
.tool-method h2,
.tool-limits h2 {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 3vw, var(--text-2xl));
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
}

.tool-directory-head p,
.tool-method p,
.tool-limits p,
.tool-method li,
.tool-limits li {
  color: var(--color-muted);
  line-height: 1.7;
}

.tool-list {
  display: grid;
  border-top: var(--rule-hair) solid var(--color-rule);
}

.tool-card {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(13rem, 0.8fr) auto;
  gap: var(--space-lg);
  align-items: center;
  min-height: 9rem;
  padding: var(--space-lg) var(--space-sm);
  color: var(--color-ink);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.tool-card strong {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
}

.tool-card p {
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.tool-card b {
  color: var(--color-accent-strong);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.tool-card b::after {
  content: " →";
}

.tool-card:active {
  transform: translateX(var(--space-2xs));
}

.tool-workbench-wrap {
  padding-block: var(--space-xl) var(--space-3xl);
}

.tool-workbench {
  display: grid;
  grid-template-columns: minmax(18rem, 0.92fr) minmax(0, 1.08fr);
  min-height: 38rem;
  border: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper);
  box-shadow: var(--shadow-soft);
}

.tool-input-panel,
.tool-result-panel {
  min-width: 0;
  padding: clamp(var(--space-md), 4vw, var(--space-xl));
}

.tool-input-panel {
  border-inline-end: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper-2);
}

.tool-panel-head {
  display: grid;
  gap: var(--space-2xs);
  margin-bottom: var(--space-lg);
}

.tool-panel-head h2 {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-style: normal;
  font-weight: 400;
}

.tool-panel-head p {
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.tool-form {
  display: grid;
  gap: var(--space-sm);
}

.tool-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
}

.tool-field {
  display: grid;
  gap: var(--space-3xs);
  min-width: 0;
}

.tool-field.tool-field-wide {
  grid-column: 1 / -1;
}

.tool-field label {
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  font-weight: 700;
}

.tool-field input,
.tool-field select {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0 var(--space-sm);
  color: var(--color-ink);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-input);
  outline: 2px solid var(--color-transparent);
  outline-offset: 1px;
  font: inherit;
}

.tool-field small {
  min-height: 1lh;
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: 1.4;
}

.tool-action:focus-visible,
.tool-secondary:focus-visible,
.tool-card:focus-visible,
.tools-breadcrumb a:focus-visible,
.tool-method a:focus-visible,
.tool-limits a:focus-visible {
  outline: 3px solid var(--color-tool-focus);
  outline-offset: 3px;
}

.tool-field input:focus-visible,
.tool-field select:focus-visible {
  outline: 2px solid var(--color-tool-focus);
  outline-offset: 1px;
}

.tool-field input[aria-invalid="true"],
.tool-field select[aria-invalid="true"] {
  border-color: var(--color-error);
}

.tool-field input:disabled,
.tool-field select:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.tool-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.tool-action,
.tool-secondary {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding-inline: var(--space-md);
  border: var(--rule-hair) solid var(--color-ink);
  border-radius: var(--radius-input);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

.tool-action {
  color: var(--color-night-ink);
  background: var(--color-ink);
}

.tool-secondary {
  color: var(--color-ink);
  background: var(--color-transparent);
}

.tool-action:active,
.tool-secondary:active,
.tool-action[data-state="active"],
.tool-secondary[data-state="active"] {
  transform: translateY(1px);
}

.tool-action:disabled,
.tool-secondary:disabled,
.tool-action[data-state="disabled"],
.tool-secondary[data-state="disabled"] {
  cursor: not-allowed;
  opacity: 0.5;
}

.tool-action[data-state="loading"] {
  cursor: progress;
  opacity: 0.72;
}

.tool-action[data-state="success"],
.tool-secondary[data-state="success"] {
  color: var(--color-night-ink);
  background: var(--color-success);
  border-color: var(--color-success);
}

.tool-action[data-state="error"],
.tool-secondary[data-state="error"] {
  color: var(--color-night-ink);
  background: var(--color-error);
  border-color: var(--color-error);
}

.tool-form-error {
  min-height: 1.5rem;
  padding: var(--space-xs) var(--space-sm);
  color: var(--color-error);
  background: color-mix(in oklch, var(--color-error) 8%, var(--color-paper));
  border-inline-start: 0.25rem solid var(--color-error);
  font-size: var(--text-sm);
}

.tool-form-error[hidden] {
  display: block;
  visibility: hidden;
}

.tool-result-panel {
  display: flex;
  flex-direction: column;
  background: var(--color-paper);
}

.tool-result-head {
  display: flex;
  gap: var(--space-md);
  align-items: start;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
}

.tool-result-head h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-style: normal;
  font-weight: 400;
}

.tool-results {
  min-height: 20rem;
  outline: none;
}

.tool-results[data-state="error"] {
  opacity: 0.55;
}

.tool-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: var(--rule-hair) solid var(--color-rule);
  border-inline-start: var(--rule-hair) solid var(--color-rule);
}

.tool-metric {
  display: grid;
  align-content: start;
  min-height: 9rem;
  padding: var(--space-md);
  border-inline-end: var(--rule-hair) solid var(--color-rule);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.tool-metric span {
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tool-metric strong {
  margin-block: var(--space-xs) var(--space-3xs);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  overflow-wrap: anywhere;
}

.tool-metric small {
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: 1.45;
}

.tool-equation {
  display: grid;
  gap: var(--space-xs);
  margin-top: var(--space-md);
}

.tool-formula {
  display: block;
  padding: var(--space-xs) var(--space-sm);
  overflow-wrap: anywhere;
  color: var(--color-night-ink);
  background: var(--color-night);
  border-radius: var(--radius-xs);
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.foundation-ranking {
  display: grid;
  gap: var(--space-md);
  list-style: none;
}

.foundation-ranking li {
  display: grid;
  gap: var(--space-xs);
  padding-bottom: var(--space-md);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.foundation-ranking li > div {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: var(--space-xs);
  align-items: center;
}

.foundation-ranking span {
  color: var(--color-accent-strong);
  font-family: var(--font-display);
  font-size: var(--text-lg);
}

.foundation-ranking b {
  color: var(--color-muted);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.foundation-ranking p,
.tool-missing {
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.foundation-ranking meter {
  width: 100%;
  height: var(--space-2xs);
  accent-color: var(--color-accent-strong);
}

.tool-missing {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  color: var(--color-night-ink);
  background: var(--color-night);
  border-block-start: 0.25rem solid var(--color-accent);
}

.tool-missing strong {
  color: var(--color-accent);
}

.tool-missing ul {
  margin: var(--space-xs) 0 0;
  padding-inline-start: var(--space-md);
}

.tool-disclaimer {
  margin-top: auto;
  padding-top: var(--space-lg);
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: 1.55;
}

.tool-notes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.72fr);
  gap: var(--space-2xl);
  padding-block: 0 var(--space-3xl);
}

.tool-method,
.tool-limits {
  padding-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
}

.tool-method h2,
.tool-limits h2 {
  margin-bottom: var(--space-sm);
}

.tool-method ul,
.tool-limits ul {
  margin-top: var(--space-sm);
  padding-inline-start: var(--space-md);
}

.tool-method a,
.tool-limits a {
  color: var(--color-accent-strong);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media (hover: hover) and (pointer: fine) {
  .tool-card:hover {
    background: var(--color-paper-2);
  }

  .tool-field input:hover,
  .tool-field select:hover {
    background: var(--color-paper-2);
  }

  .tool-action:hover {
    opacity: 0.84;
  }

  .tool-secondary:hover {
    background: var(--color-paper-2);
  }
}

@media (max-width: 64rem) {
  .tool-workbench {
    grid-template-columns: minmax(0, 1fr);
  }

  .tool-input-panel {
    border-inline-end: 0;
    border-bottom: var(--rule-hair) solid var(--color-rule);
  }
}

@media (max-width: 48rem) {
  .tools-intro .tool-shell,
  .tool-directory-head,
  .tool-notes {
    grid-template-columns: minmax(0, 1fr);
  }

  .tool-card {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-xs);
  }

  .tool-card p {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .tool-result-head {
    align-items: stretch;
    flex-direction: column;
  }

  .tool-result-head .tool-secondary {
    align-self: start;
  }
}

@media (max-width: 32rem) {
  .tool-fields,
  .tool-metrics {
    grid-template-columns: minmax(0, 1fr);
  }

  .tool-card {
    min-height: 0;
    padding-block: var(--space-md);
  }

  .tool-card b {
    grid-column: 1 / -1;
  }

  .tool-form-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .tool-action,
  .tool-secondary {
    width: 100%;
  }

  .foundation-ranking li > div {
    grid-template-columns: 2rem minmax(0, 1fr);
  }

  .foundation-ranking b {
    grid-column: 2;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tool-card,
  .tool-action,
  .tool-secondary {
    transition-duration: var(--dur-fast);
    transition-property: opacity;
  }

  .tool-card:active,
  .tool-action:active,
  .tool-secondary:active,
  .tool-action[data-state="active"],
  .tool-secondary[data-state="active"] {
    transform: none;
  }
}