/* Components this site has and the blog does not.
 *
 * Structure comes from fleet-ui/site.css and colour comes entirely from the
 * theme's twelve tokens, so there is not one hardcoded colour in this file.
 * That is what lets the same calculator render as Gray Wedding's elegant serif
 * and LAN Surf's terminal green without a per-site stylesheet.
 */

/* ── Tool index ─────────────────────────────────────────────────────── */

.tool-grid {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}

.tool-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  background: var(--surface);
}

.tool-card-title { margin: 0 0 .5rem; font-size: var(--step-1, 1.25rem); }
.tool-card-title a { text-decoration: none; }
.tool-card-summary { margin: 0 0 .75rem; color: var(--muted); }
.tool-card-meta { margin: 0; color: var(--muted); font-size: .85em; }

/* ── The form ───────────────────────────────────────────────────────── */

.tool-header { margin-bottom: 1.5rem; }

.tool-inputs {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
}

.field { display: flex; flex-direction: column; gap: .35rem; }
.field-label { font-weight: 600; font-size: .95em; }
.field-help { margin: 0; color: var(--muted); font-size: .85em; line-height: 1.45; }
.input-check { width: 1.15rem; height: 1.15rem; }

.tool-actions { margin-top: 1.25rem; display: flex; gap: .75rem; align-items: center; }
.btn-quiet { color: var(--muted); text-decoration: underline; }

/* ── Results ────────────────────────────────────────────────────────── */

.tool-results { margin-top: 2rem; }

.headline-row {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  margin-bottom: 2rem;
}

.headline {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.headline-value {
  font-family: var(--font-heading);
  font-size: var(--step-3, 1.9rem);
  line-height: 1.1;
  color: var(--accent);
  /* Tabular figures so a number changing as you type does not shift the
     layout under the cursor — the single most distracting thing a live
     calculator can do. */
  font-variant-numeric: tabular-nums;
}

.headline-label { font-weight: 600; }
.headline-help { color: var(--muted); font-size: .85em; line-height: 1.45; }

.result-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.75rem;
}

.result-table caption {
  text-align: left;
  font-weight: 600;
  padding-bottom: .5rem;
  font-family: var(--font-heading);
}

.result-table th,
.result-table td {
  text-align: left;
  padding: .55rem .5rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.result-table td {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.result-table th { font-weight: 500; }
.row-help { display: block; color: var(--muted); font-size: .85em; font-weight: 400; }

/* ── Share ──────────────────────────────────────────────────────────── */

.tool-share {
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.tool-share .input { font-size: .9em; }

.tool-notes { margin-top: 2.5rem; }

@media (max-width: 32rem) {
  .result-table th, .result-table td { padding: .5rem .25rem; }
}