/* ──────────────────────────────────────────────────────────────
   tool-page.css

   Bridges the standalone tool pages onto the HeyTensor v3 design
   system. Those pages shipped with their own inline palette (blue
   #0c1018 / cyan #7dd3fc) and their own nav and footer, so they
   looked like a different site. This restyles the markup they
   already use with the canonical tokens from style.css, which
   means the tool HTML does not have to be rewritten.

   Loads AFTER style.css and tools.css.
   ────────────────────────────────────────────────────────────── */

/* Reading column. Prose caps near 72ch so lines stay comfortable. */
.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

.wrap > h1 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 40px 0 14px;
}

.wrap > h2 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  margin: 48px 0 14px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}

.wrap > h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  margin: 30px 0 10px;
}

.wrap p {
  margin: 14px 0;
  color: var(--text-dim);
  max-width: 72ch;
  line-height: 1.75;
}

.wrap .intro {
  font-size: 1.06rem;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 26px;
  max-width: 68ch;
}

.wrap ul, .wrap ol { margin: 14px 0 14px 22px; max-width: 72ch; }
.wrap li { margin: 8px 0; color: var(--text-dim); line-height: 1.7; }

/* ── The calculator panel ── */
#tool {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px;
  margin: 30px 0 34px;
}

#tool .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 20px 18px;
}

.field { display: flex; flex-direction: column; gap: 7px; }

/* tools.css uppercases every label. On this site the labels ARE code
   identifiers, so that turned n_kv into N_KV and d_head into D_HEAD and made
   the reader translate them back. Keep the author's casing. */
.field label, #tool label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 0;
  line-height: 1.4;
}

/* The variable name inside a label reads better in the mono face. */
.field label code, #tool label code {
  font-family: var(--font-display);
  font-size: 0.95em;
  color: var(--text);
}

/* font-size 16px is inherited from style.css and prevents iOS auto-zoom.
   Do not drop below 16px here. */
#tool input, #tool select {
  background: var(--bg);
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: 16px;
  padding: 11px 12px;
  width: 100%;
}

#tool input:focus, #tool select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.5;
}

/* ── Result cards ── */
.out {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 16px;
}

.card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
}

.card .k {
  font-size: 0.68rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 600;
}

.card .v {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--accent);
  margin-top: 7px;
  word-break: break-word;
  line-height: 1.25;
}

/* ── Formula block ── */
.formula {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 15px 17px;
  font-family: var(--font-display);
  font-size: 0.83rem;
  color: var(--text);
  overflow-x: auto;
  line-height: 1.7;
  margin: 18px 0;
}

/* Charts ship with a fixed width attribute (600px, 400px), which pushed the
   page to 639px on a 390px screen. Let them scale down instead. */
canvas {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Nothing on a tool page may push the document wider than the screen. */
.wrap, .container, .card, .chart-container { max-width: 100%; }
img, svg, pre { max-width: 100%; }

/* ── Tables. The wrapper is what stops the 638px mobile overflow. ── */
.table-scroll { overflow-x: auto; margin: 18px 0; -webkit-overflow-scrolling: touch; }

.wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
  min-width: 460px;
}

.wrap th, .wrap td {
  border: 1px solid var(--border);
  padding: 11px 13px;
  text-align: left;
}

.wrap th {
  background: var(--bg-elev);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.wrap td { color: var(--text-dim); }

/* ── Buttons ──
   The standalone pages styled their buttons inline, so removing their <style>
   left browser defaults (grey chrome on a dark page). Cover every class they
   use, plus unclassed buttons. .mobile-toggle keeps the header's own styling. */
.wrap button:not(.mobile-toggle),
.container button:not(.mobile-toggle),
.layer-btn, .func-btn, .toggle-btn, .calculation-button {
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-hover);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 9px 15px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.wrap button:not(.mobile-toggle):hover,
.container button:not(.mobile-toggle):hover,
.layer-btn:hover, .func-btn:hover, .toggle-btn:hover, .calculation-button:hover {
  background: var(--bg-card);
  border-color: var(--border-hover);
}

/* The primary action reads amber so it is findable at a glance. */
.wrap button.btn-primary, .container button.btn-primary,
.wrap #computeBtn, .container #computeBtn,
.wrap #updateBtn, .container #updateBtn,
.toggle-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #0B0B0D;
}

.wrap button.btn-primary:hover, .container button.btn-primary:hover,
.wrap #computeBtn:hover, .container #computeBtn:hover,
.wrap #updateBtn:hover, .container #updateBtn:hover {
  background: var(--accent-dim);
  border-color: var(--accent-dim);
}

.wrap button:focus-visible, .container button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
  border-color: var(--accent);
}

/* ── Related links ── */
.related { margin: 26px 0 10px; display: flex; flex-wrap: wrap; gap: 10px 18px; }

.related a {
  color: var(--accent-link);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
}

.related a:hover { color: var(--accent); text-decoration: underline; }

.wrap a { color: var(--accent-link); }
.wrap a:hover { color: var(--accent); }

@media (max-width: 640px) {
  .wrap > h1 { margin-top: 28px; }
  #tool { padding: 20px 17px; }
  .out { gap: 13px; }
  .wrap > h2 { margin-top: 38px; }
}