/* ==========================================================================
   tools.css — the step pages and the members' tools, on the restyle (Oct 2026).

   Load after /assets/pks.css. It carries over what the old toolkit.css gave
   these pages (the short step-page header, the narrower column, cards, field
   rows, tables, status pills, the toast, the print theme), drawn in the new
   colours and type, under the class names those pages already used.

   ========================================================================== */

:root {
  /* toolkit.css's status names */
  --good: var(--ok);
  /* --warn and --bad are already pks.css names */
}
/* The tools' scripts write figures and notes in var(--gold-light) as TEXT; on
   these pages it is the readable gold, not pks.css's fill. (Set on body, so it
   follows the light and dark --gold-text.) */
body { --gold-light: var(--gold-text); }
/* Some tool scripts write inline styles meant for the old dark page: gold text
   (live-tracker, release-planner, income-planner) and a white hairline border
   (operator/ladder). The scripts stay as they are; these catch what they write. */
[style^="color:var(--gold)"], [style^="color: var(--gold)"], [style*=";color:var(--gold)"], [style*="; color:var(--gold)"], [style*="; color: var(--gold)"] { color: var(--gold-text) !important; }
[style*="rgba(255,255,255,0.07)"], [style*="rgba(255, 255, 255, 0.07)"] { border-color: var(--line) !important; }

/* ── The step-page header: the logo, a small label, and the page's actions ── */
.nav-logo span {
  font: 500 .68rem/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-left: 4px;
}
.nav-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.nav-actions .btn, .nav-actions .btn-gold { padding: 8px 16px; font-size: .88rem; }
@media (max-width: 560px) {
  .nav-logo span { display: none; }
  /* Two or three action buttons don't fit beside the logo on a small phone:
     they take their own line instead of running off the edge. */
  body > nav:has(.nav-actions) { flex-wrap: wrap; row-gap: 8px; padding-block: 10px; }
  .nav-actions { margin-left: 0; }
}

/* ── Layout: a reading-width column ── */
.wrap {
  max-width: 1000px;
  padding-block: clamp(36px, 6vw, 64px) 80px;
}
.wrap-wide { max-width: 1240px; }
.page-head { margin-bottom: 36px; display: flex; flex-direction: column; gap: 14px; }
.page-head .eyebrow, .eyebrow { margin-bottom: 0; }

/* Headings on a tool page are working headings, not posters. */
h1 { font-size: clamp(2.4rem, 6vw, 3.8rem); }
h2 { font-weight: 800; font-size: clamp(1.45rem, 3vw, 1.8rem); line-height: 1.02; }
h3 { font-size: 1.25rem; }
.lede { font-size: 1.1rem; }
.muted { color: var(--muted); font-size: .9rem; line-height: 1.6; }

/* ── Cards and panels ── */
.card {
  display: block;
  padding: 28px;
  margin-bottom: 22px;
  gap: 0;
}
.card-gold { border-top: 4px solid var(--gold); }
.section-head {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.section-head h2 { margin-bottom: 0; }
.section-key {
  font: 500 .72rem/1.3 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-text);
}

/* ── Buttons: toolkit.css's .btn-gold was the main action, so it is green here ── */
.btn { padding: 11px 20px; font-size: .94rem; border-width: 1.5px; }
.btn-gold { background: var(--green); border-color: var(--green); color: var(--on-green); }
.btn-gold:hover { background: var(--green); }
.btn svg { width: 15px; height: 15px; }

/* ── Form controls ── */
label.field {
  display: block;
  font: 500 .74rem/1.3 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.field-row { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.field-row > div { flex: 1 1 200px; min-width: 0; }
:where(select) {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E5B52' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 15px;
  padding-right: 40px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
:where(input[type="number"])::-webkit-outer-spin-button,
:where(input[type="number"])::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
:where(input[type="number"]) { -moz-appearance: textfield; }

/* Long tokens and addresses in code (scopes, URLs) wrap instead of pushing the
   page wider on a phone; a text span beside a step number may shrink. */
:where(code) { overflow-wrap: anywhere; }
li > span:last-child { min-width: 0; }

/* ── Tables ── */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}
table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left;
  font: 500 .7rem/1.3 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 12px 14px;
  border-bottom: 2px solid var(--ink);
  white-space: nowrap;
}
tbody td {
  padding: 10px 14px;
  font-size: .92rem;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
tbody tr:last-child td { border-bottom: none; }
tbody th[scope="row"] {
  text-align: left;
  padding: 10px 14px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

/* ── Status pills ── */
.pill {
  display: inline-block;
  font: 500 .7rem/1.2 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1.5px solid currentColor;
}
.pill-good { color: var(--ok); }
.pill-warn { color: var(--warn); }
.pill-bad { color: var(--bad); }

/* ── Toast ── */
.toast {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(200%);
  background: var(--ink);
  color: var(--bg);
  font-size: .9rem;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: 999px;
  z-index: 500;
  transition: transform .3s ease, visibility 0s linear .3s;
  box-shadow: var(--shadow);
  visibility: hidden;
}
.toast.show { transform: translateX(-50%) translateY(0); visibility: visible; transition: transform .3s ease, visibility 0s; }

/* ── Footer: one centred line ── */
body > footer { text-align: center; }
body > footer p { margin: 0; }

@media (max-width: 680px) {
  .card { padding: 22px 18px; }
}

/* ── Print: the members print their plan and scorecard ── */
@media print {
  body { background: #fff; color: #111; }
  nav, footer, .no-print { display: none !important; }
  .wrap { padding: 0; max-width: none; }
  .card { border: 1px solid #ccc; break-inside: avoid; page-break-inside: avoid; margin-bottom: 1rem; padding: 1.25rem; box-shadow: none; }
  .table-wrap { border: 1px solid #ccc; overflow: visible; }
  thead th { background: #f2f2f2; color: #111; border-bottom: 1px solid #999; }
}