/* Engineering tools.
 *
 * Only what system.css does not already carry. Every class is prefixed
 * `.tools-`, every colour and measure comes from a token, and separation is
 * done with tone and space rather than with drawn hairlines. There is no
 * motion here at all: nothing transitions, lifts, glows or fades, so there is
 * nothing for a reduced-motion query to switch off.
 */

/* --- Tool index ---------------------------------------------------------- */

.tools-index {
  display: grid;
  gap: calc(var(--gutter) * 2.4);
}

.tools-group-heading {
  margin: 0 0 0.35em;
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  line-height: 1.1;
  color: var(--metal);
}

.tools-group-lead {
  margin: 0 0 calc(var(--gutter) * 1.1);
  max-width: var(--measure-width);
  color: var(--metal-2);
}

.tools-index-list {
  display: grid;
  gap: calc(var(--gutter) * 1.4);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 60rem) {
  .tools-index-list {
    grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
    align-items: start;
  }
}

.tools-index-entry {
  display: grid;
  align-content: start;
  gap: 0.4em;
  min-width: 0;
}

.tools-entry-name {
  font-family: var(--display);
  font-size: 1.15rem;
  line-height: 1.15;
  color: var(--metal);
  text-decoration: none;
}

.tools-entry-name:hover,
.tools-entry-name:focus-visible {
  color: var(--copper);
}

.tools-entry-question {
  margin: 0;
  color: var(--metal);
}

.tools-entry-line {
  margin: 0;
  font-size: 0.92rem;
  color: var(--metal-2);
}

.tools-entry-label {
  display: block;
}

.tools-entry-links {
  margin: 0.15em 0 0;
  font-size: 0.88rem;
  color: var(--metal-3);
}

.tools-entry-links a {
  color: var(--copper);
}

/* --- The working area ---------------------------------------------------- */

.tools-work {
  display: grid;
  gap: calc(var(--gutter) * 1.6);
  align-items: start;
}

@media (min-width: 66rem) {
  .tools-work {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: calc(var(--gutter) * 2);
  }
}

.tools-form {
  min-width: 0;
}

.tools-segment-grid {
  display: grid;
  gap: calc(var(--gutter) * 0.6);
}

@media (min-width: 34rem) {
  .tools-segment-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- The result region ---------------------------------------------------
 * A surface step, not an outlined box: the panel sits a shade off the band it
 * is on and takes its separation from tone.
 */

.tools-result {
  min-width: 0;
  padding: calc(var(--gutter) * 1.2);
  background: var(--carbon-2);
}

.tools-result > * + * {
  margin-top: calc(var(--gutter) * 0.95);
}

.tools-result-title {
  margin: 0 0 calc(var(--gutter) * 0.8);
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--metal-2);
}

.tools-result-lead {
  max-width: var(--measure-width);
  color: var(--metal-2);
}

.tools-subhead {
  margin: calc(var(--gutter) * 1.3) 0 0.4em;
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--metal);
}

.tools-headline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4em;
  margin: 0;
}

.tools-headline-value {
  font-family: var(--mono);
  font-size: clamp(2rem, 6vw, 3.1rem);
  line-height: 1.05;
  color: var(--metal);
  font-variant-numeric: tabular-nums;
}

.tools-headline-unit {
  font-family: var(--mono);
  font-size: 1.1rem;
  color: var(--copper);
}

.tools-headline-label {
  flex-basis: 100%;
  margin-top: 0.15em;
  font-size: 0.88rem;
  color: var(--metal-3);
}

/* --- Printable summary and share link ------------------------------------ */

.tools-summary-wrap > summary {
  cursor: pointer;
  font-size: 0.92rem;
  color: var(--metal-2);
}

.tools-summary-wrap > summary:hover,
.tools-summary-wrap > summary:focus-visible {
  color: var(--metal);
}

.tools-summary {
  overflow-x: auto;
  margin: calc(var(--gutter) * 0.7) 0 0;
  padding: calc(var(--gutter) * 0.9);
  background: var(--carbon-3);
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--metal);
  white-space: pre;
  tab-size: 2;
}

.tools-share {
  display: grid;
  gap: 0.2em;
  margin: 0;
  overflow-wrap: anywhere;
}

.tools-share-label {
  font-size: 0.88rem;
  color: var(--metal-3);
}

.tools-share-link {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--copper);
}