/* ── Web tools on blog pages (assets/tools/*.js) ──
   Uses the site's tokens from /style.css (--surface, --input, --amber, --white, --text-sec, --divider, --radius).
   Loaded only by the tool pages, after /style.css. */

.tool [hidden], .tool-figure [hidden] { display: none !important; }

.tool {
  background: var(--surface, #1E1E1E);
  border: 1px solid var(--divider, #333);
  border-radius: var(--radius, 12px);
  padding: 22px 20px 20px;
  margin: 28px 0 12px;
}
.tool-title { font-size: 21px; font-weight: 800; letter-spacing: -0.3px; line-height: 1.25; margin: 0 0 4px; }
.tool-sub { color: var(--text-sec, #AAA); font-size: 14px; line-height: 1.5; margin: 0 0 18px; }

.tool-nojs {
  color: var(--text-body, #D4D4D4); font-size: 15.5px; line-height: 1.6;
  background: var(--surface2, #252525); border-left: 3px solid var(--amber, #F5A623);
  border-radius: 8px; padding: 12px 14px; margin: 0;
}

/* Mode switch: real radio buttons, drawn as the app's segmented toggle. */
.tool-modes { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }
.tool-modes legend { font-size: 14px; font-weight: 600; color: var(--white, #FFF); margin: 0 0 8px; padding: 0; }
.tool-seg { display: flex; flex-wrap: wrap; gap: 4px; background: var(--input, #2A2A2A); border-radius: 10px; padding: 4px; }
.tool-seg label { flex: 1 1 0; min-width: 0; position: relative; display: flex; cursor: pointer; }
.tool-seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tool-seg span {
  display: flex; align-items: center; justify-content: center; width: 100%;
  text-align: center; padding: 10px 6px; border-radius: 7px;
  font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--text-sec, #AAA);
}
.tool-seg input:checked + span { background: var(--amber, #F5A623); color: #111; }
.tool-seg label:hover input:not(:checked) + span { color: var(--white, #FFF); }
.tool-seg input:focus-visible + span { outline: 2px solid var(--white, #FFF); outline-offset: 1px; }

/* Fields */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px 16px; }
.tool-field { min-width: 0; }
.tool-field-wide { grid-column: 1 / -1; }
.tool-field-wide select { max-width: 32em; }
.tool-field > label { display: block; font-size: 14px; font-weight: 600; color: var(--white, #FFF); margin: 0 0 6px; line-height: 1.35; }
.tool-input { position: relative; }
.tool-field input, .tool-field select {
  width: 100%; min-height: 46px; margin: 0;
  background: var(--input, #2A2A2A); color: var(--white, #FFF);
  border: 1px solid var(--divider, #333); border-radius: 8px;
  padding: 10px 12px; font: 600 16px/1.2 var(--font, system-ui, sans-serif);
}
.tool-input input { padding-right: 52px; }
.tool-unit {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-sec, #AAA); font-size: 14px; font-weight: 500; pointer-events: none;
}
.tool-field select { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, #AAA 50%), linear-gradient(135deg, #AAA 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.tool-field input:focus, .tool-field select:focus { outline: 2px solid var(--amber, #F5A623); outline-offset: 1px; border-color: var(--amber, #F5A623); }
.tool-field input[aria-invalid="true"] { border-color: #FF8A80; }
.tool-hint { color: var(--text-sec, #AAA); font-size: 13px; line-height: 1.45; margin: 6px 0 0; }
.tool-error { color: #FF8A80; font-size: 13.5px; font-weight: 600; line-height: 1.45; margin: 6px 0 0; }

/* Results, laid out like the app's result card */
.tool-results { margin-top: 20px; border-top: 1px solid var(--divider, #333); padding-top: 6px; }
.tool-empty { color: var(--text-sec, #AAA); font-size: 15px; line-height: 1.6; margin: 10px 0 0; }
.tool-out { margin: 0; }
.tool-row {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 14px;
  padding: 10px 0; border-bottom: 1px solid var(--divider, #333);
}
.tool-row:last-child { border-bottom: 0; }
.tool-row dt { color: var(--text-sec, #AAA); font-size: 14.5px; line-height: 1.4; }
.tool-row dd { margin: 0 0 0 auto; color: var(--white, #FFF); font-size: 16.5px; font-weight: 700; text-align: right;
  font-variant-numeric: tabular-nums; }
.tool-row.tool-hero dd { color: var(--amber, #F5A623); font-size: 22px; font-weight: 800; }
.tool-row .tool-small { display: block; width: 100%; color: var(--text-sec, #AAA); font-size: 13px; font-weight: 500; text-align: right; }

.tool-verdict { border-radius: 10px; padding: 12px 14px; margin: 12px 0 6px; line-height: 1.55; font-size: 15px; color: var(--text-body, #D4D4D4); }
.tool-verdict strong { display: block; font-size: 17px; color: var(--white, #FFF); margin-bottom: 2px; }
.tool-verdict.tool-ok { background: rgba(102, 187, 106, 0.12); border: 1px solid rgba(102, 187, 106, 0.5); }
.tool-verdict.tool-warn { background: rgba(245, 166, 35, 0.10); border: 1px solid rgba(245, 166, 35, 0.45); }

.tool-sub-h { font-size: 14px; font-weight: 700; color: var(--white, #FFF); margin: 18px 0 6px; }
.tool-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tool-table th, .tool-table td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--divider, #333); }
.tool-table th { color: var(--text-sec, #AAA); font-weight: 600; background: var(--surface2, #252525); }
.tool-table td { color: var(--white, #FFF); font-variant-numeric: tabular-nums; }
.tool-table td:last-child, .tool-table th:last-child { text-align: right; }
.tool-note { color: var(--text-sec, #AAA); font-size: 13.5px; line-height: 1.55; margin: 12px 0 0; }
.tool-note a { color: var(--amber, #F5A623); }

/* Short question-and-answer blocks on tool pages */
.tool-faq h3 { font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--white, #FFF); margin: 22px 0 6px; }
.tool-faq h3:first-child { margin-top: 8px; }

/* Explanatory diagrams (inline SVG in the posts) */
.tool-figure svg { display: block; width: 100%; height: auto; max-width: 560px; background: var(--surface, #1E1E1E);
  border: 1px solid var(--divider, #333); border-radius: var(--radius, 12px); }
.dg-line { fill: none; stroke: var(--text-sec, #AAA); stroke-width: 2; }
.dg-thin { fill: none; stroke: var(--text-sec, #AAA); stroke-width: 1; stroke-dasharray: 4 4; }
.dg-accent { fill: none; stroke: var(--amber, #F5A623); stroke-width: 3; }
.dg-fill { fill: rgba(245, 166, 35, 0.10); stroke: var(--text-sec, #AAA); stroke-width: 2; }
.dg-side { fill: rgba(245, 166, 35, 0.22); stroke: var(--text-sec, #AAA); stroke-width: 2; }
.dg-text { fill: var(--white, #FFF); font: 600 15px var(--font, system-ui, sans-serif); }
.dg-muted { fill: var(--text-sec, #AAA); font: 500 13px var(--font, system-ui, sans-serif); }
.dg-amber { fill: var(--amber, #F5A623); font: 700 15px var(--font, system-ui, sans-serif); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Rule tables (What / Fall / Source) on tool pages */
.prose table.tool-rules td:nth-child(2) { color: var(--white, #FFF); }
@media (max-width: 520px) {
  .prose table.tool-rules { font-size: 14px; }
  .prose table.tool-rules th, .prose table.tool-rules td { padding: 9px 6px; }
  .prose table.tool-rules td:first-child { width: 30%; }
  .prose table.tool-rules td:last-child { width: 30%; }
}

@media (max-width: 420px) {
  .tool { padding: 18px 14px 16px; margin-left: -4px; margin-right: -4px; }
  .tool-row.tool-hero dd { font-size: 20px; }
  .tool-seg span { font-size: 13px; padding: 9px 4px; }
}