/*
 * Tool cards, shared by the home page and the tool pages: the live try (a filled-in form and the answer /live-try.js
 * draws from the tool's structured result) and the tool page's fact panels. Reads only --lt-* tokens, so it follows the
 * light and dark themes of tokens.css, and sets its own button, since a reading page loads no button styles.
 */

/* The live tries: instrument cards, two to a row, each a filled-in form over the place its answer is drawn. */
.try-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lt-space-4); align-items: start; }
.try-card { display: flex; flex-direction: column; gap: var(--lt-space-3); min-width: 0; padding: var(--lt-space-5); border: 1px solid var(--lt-line-strong); border-radius: var(--lt-radius-card); background: var(--lt-surface-2); }
.try-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--lt-space-3); }
.try-card .try-name { margin: 0; font-size: var(--lt-step-2); }
.try-name a { color: inherit; text-decoration: none; }
.try-name a:hover { color: var(--lt-glow-ink); }
.try-calls { flex: none; margin: 0; color: var(--lt-text-2); font: 600 var(--lt-step--1) / 1.4 var(--lt-font-mono); letter-spacing: 0.04em; text-transform: uppercase; }
.try-calls strong { color: var(--lt-glow-ink); font-size: var(--lt-step-0); }
.try-line { margin: 0; color: var(--lt-text-2); }
.try-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lt-space-3); margin: 0; }
.try-field { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--lt-space-1); min-width: 0; color: var(--lt-text-2); font: 600 var(--lt-step--2) / 1.4 var(--lt-font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.try-field:only-of-type,
.try-field-wide { grid-column: 1 / -1; }
.try-field .lt-input { flex: none; width: 100%; min-width: 0; font: var(--lt-step--1) / 1.5 var(--lt-font-ui); letter-spacing: 0; text-transform: none; }
.try-field textarea.lt-input { resize: vertical; }
.try-go { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lt-space-2) var(--lt-space-3); grid-column: 1 / -1; margin: 0; }
.try-card .try-run {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 0 var(--lt-space-5);
  border: 1px solid var(--lt-glow-fill);
  border-radius: var(--lt-radius-control);
  background: var(--lt-glow-fill);
  color: var(--lt-on-glow);
  font: 600 var(--lt-step-0) / 1 var(--lt-font-ui);
  cursor: pointer;
}
/* The hover keeps the fill, whose ink passes 4.5 to 1, and marks the edge and the words in ink instead. */
.try-card .try-run:hover { border-color: var(--lt-text-1); text-decoration: underline; text-underline-offset: 3px; }
.try-card .try-run:focus-visible { outline: 2px solid var(--lt-glow-ink); outline-offset: 2px; }
.try-card .try-run[aria-disabled="true"] { opacity: 0.6; cursor: progress; }
.try-tool { color: var(--lt-text-3); font-size: var(--lt-step--2); }

/* The answer: drawn by live-try.js from the tool's structured result. */
.try-result { display: flex; flex-direction: column; gap: var(--lt-space-3); padding-top: var(--lt-space-3); border-top: 1px solid var(--lt-line); }
.try-result[hidden] { display: none; }
.try-result p { margin: 0; }
.try-status { margin: 0; color: var(--lt-text-2); font: var(--lt-step--1) / 1.5 var(--lt-font-mono); font-variant-numeric: tabular-nums; }
/* Empty until the first press, yet kept in the page so screen readers already watch it; its gap is taken back. */
.try-status:empty { margin-top: calc(-1 * var(--lt-space-3)); }
.try-status.is-error { color: var(--lt-danger); font-family: var(--lt-font-ui); }
.try-title { color: var(--lt-text-1); font-weight: 600; overflow-wrap: anywhere; }
.try-source,
.try-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr)); gap: var(--lt-space-2); }
.try-stat { display: flex; flex-direction: column; gap: var(--lt-space-1); padding: var(--lt-space-2) var(--lt-space-3); border-radius: var(--lt-radius-control); background: var(--lt-surface-3); color: var(--lt-text-2); font: 600 var(--lt-step--2) / 1.3 var(--lt-font-mono); text-transform: uppercase; }
.try-stat strong { color: var(--lt-text-1); font-size: var(--lt-step-1); font-variant-numeric: tabular-nums; text-transform: none; overflow-wrap: anywhere; }
.try-chart { display: flex; flex-direction: column; gap: var(--lt-space-2); }
.try-meter { display: grid; grid-template-columns: minmax(4rem, 7rem) minmax(0, 1fr) auto; gap: var(--lt-space-2); align-items: center; font: var(--lt-step--1) / 1.4 var(--lt-font-mono); }
.try-meter-label { overflow: hidden; color: var(--lt-text-1); text-overflow: ellipsis; white-space: nowrap; }
.try-meter-track { height: 8px; border-radius: var(--lt-radius-pill); background: var(--lt-surface-3); overflow: hidden; }
.try-meter-fill { display: block; height: 100%; border-radius: inherit; background: var(--lt-glow-fill); transition: width var(--lt-dur-slow) var(--lt-ease); }
.try-meter-value { color: var(--lt-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.try-chips { display: flex; flex-wrap: wrap; gap: var(--lt-space-1); margin: 0; padding: 0; list-style: none; }
.try-chip { display: inline-flex; align-items: center; gap: var(--lt-space-1); max-width: none; margin: 0; padding: var(--lt-space-1) var(--lt-space-2); border: 1px solid var(--lt-line); border-radius: var(--lt-radius-pill); font: var(--lt-step--1) / 1.3 var(--lt-font-mono); }
.try-chip-mark { font-size: var(--lt-step--2); font-weight: 600; text-transform: uppercase; }
.try-chip.is-ok .try-chip-mark { color: var(--lt-success); }
.try-chip.is-blocked { background: var(--lt-danger-wash); }
.try-chip.is-blocked .try-chip-mark { color: var(--lt-danger); }
.try-findings,
.try-links,
.try-reasons { display: flex; flex-direction: column; gap: var(--lt-space-2); margin: 0; padding: 0; list-style: none; font-size: var(--lt-step--1); }
.try-findings li,
.try-links li,
.try-reasons li { max-width: none; margin: 0; }
.try-finding { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--lt-space-2); }
.try-finding p { color: var(--lt-text-2); }
.try-sev { align-self: start; padding: var(--lt-space-1) var(--lt-space-2); border-radius: var(--lt-radius-pill); background: var(--lt-surface-3); color: var(--lt-text-2); font: 600 var(--lt-step--2) / 1.5 var(--lt-font-mono); text-align: center; text-transform: uppercase; }
.try-finding.is-high .try-sev { background: var(--lt-danger-wash); color: var(--lt-danger); }
.try-finding.is-medium .try-sev { background: var(--lt-warning-wash); color: var(--lt-warning); }
.try-links a { overflow-wrap: anywhere; }
.try-excerpt { max-height: 12rem; margin: 0; padding: var(--lt-space-3); border-radius: var(--lt-radius-control); background: var(--lt-surface-3); overflow: auto; font: var(--lt-step--2) / 1.5 var(--lt-font-mono); white-space: pre-wrap; }
.try-excerpt code { padding: 0; background: none; }
.try-posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--lt-space-2); }
.try-post { display: flex; flex-direction: column; gap: var(--lt-space-2); padding: var(--lt-space-3); border: 1px solid var(--lt-line); border-radius: var(--lt-radius-control); }
.try-post-platform { color: var(--lt-text-2); font: 600 var(--lt-step--2) / 1.3 var(--lt-font-mono); text-transform: uppercase; }
.try-post-text { flex: 1; font-size: var(--lt-step--1); white-space: pre-wrap; overflow-wrap: anywhere; }
.try-post .try-meter { grid-template-columns: auto minmax(0, 1fr) auto; }
.try-post.has-issues { border-color: var(--lt-danger); }
.try-score { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--lt-space-4); align-items: center; }
/* The score as a dial: a ring filled to the score, the number in its middle. */
.try-gauge { position: relative; display: grid; place-content: center; width: 6.5rem; aspect-ratio: 1; text-align: center; }
.try-gauge svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.try-gauge circle { fill: none; stroke-width: 3; }
.try-gauge .try-gauge-track { stroke: var(--lt-surface-3); }
.try-gauge .try-gauge-fill { stroke: var(--lt-glow-fill); stroke-linecap: round; }
.try-gauge strong { font: 700 var(--lt-step-4) / 1 var(--lt-font-mono); font-variant-numeric: tabular-nums; }
.try-gauge span { color: var(--lt-text-2); font: var(--lt-step--2) / 1.3 var(--lt-font-mono); text-transform: uppercase; }
.try-action { margin: 0 0 var(--lt-space-2); color: var(--lt-glow-ink); font: 600 var(--lt-step--1) / 1.4 var(--lt-font-mono); text-transform: uppercase; }
.try-reasons li::before { content: "\2192  "; color: var(--lt-text-3); }

/* The tool page: a facts strip, the live try, the ask, then the facts as checks, function rows and chips. */
.tool-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 var(--lt-space-6); border-top: 1px solid var(--lt-line-strong); border-bottom: 1px solid var(--lt-line); }
.tool-facts div { padding: var(--lt-space-3) var(--lt-space-3) var(--lt-space-3) 0; }
.tool-facts dt { margin: 0; color: var(--lt-text-2); font: 600 var(--lt-step--2) / 1.4 var(--lt-font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.tool-facts dd { margin: var(--lt-space-1) 0 0; color: var(--lt-text-1); font: 600 var(--lt-step-0) / 1.3 var(--lt-font-mono); }
.tool-try { margin: 0 0 var(--lt-space-6); }
.tool-try .try-card { max-width: none; }
.tool-ask { margin: 0 0 var(--lt-space-6); padding: var(--lt-space-4) var(--lt-space-5); border-left: 3px solid var(--lt-glow-fill); background: var(--lt-surface-2); }
.tool-ask figcaption { color: var(--lt-text-2); font: 600 var(--lt-step--2) / 1.4 var(--lt-font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.tool-ask blockquote { margin: var(--lt-space-2) 0 0; padding: 0; border: 0; color: var(--lt-text-1); font-size: var(--lt-step-1); line-height: 1.45; }
.tool-ask blockquote::before { content: "\201C"; }
.tool-ask blockquote::after { content: "\201D"; }
.tool-caps,
.tool-fns,
.tool-chips,
.tool-index { margin: 0 0 var(--lt-space-5); padding: 0; list-style: none; }
.tool-caps li { position: relative; max-width: none; margin: 0; padding: var(--lt-space-2) 0 var(--lt-space-2) var(--lt-space-5); border-top: 1px solid var(--lt-line); }
.tool-caps li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 10px; height: 2px; background: var(--lt-glow-fill); }
.tool-fns li { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: var(--lt-space-3); max-width: none; margin: 0; padding: var(--lt-space-2) 0; border-top: 1px solid var(--lt-line); }
.tool-fns code { justify-self: start; overflow-wrap: anywhere; }
.tool-fns span { color: var(--lt-text-2); }
.tool-chips { display: flex; flex-wrap: wrap; gap: var(--lt-space-2); }
.tool-chips li { max-width: none; margin: 0; }
.tool-chips a { display: inline-flex; padding: var(--lt-space-1) var(--lt-space-3); border: 1px solid var(--lt-line-strong); border-radius: var(--lt-radius-pill); color: var(--lt-text-1); font-size: var(--lt-step--1); text-decoration: none; }
.tool-chips a:hover { border-color: var(--lt-glow-ink); color: var(--lt-glow-ink); }
/* A tool page's body is reading prose, whose list rules outrank one class: keep these lists flat. */
.lt-prose :is(.tool-caps, .tool-fns, .tool-chips, .tool-index) { padding: 0; list-style: none; }
.lt-prose :is(.tool-caps, .tool-fns, .tool-chips, .tool-index) li { margin: 0; }
.tool-more { margin: calc(-1 * var(--lt-space-3)) 0 var(--lt-space-5); color: var(--lt-text-2); font-size: var(--lt-step--1); }
.tool-addr { margin: 0 0 var(--lt-space-3); }
.tool-addr code { display: inline-block; max-width: 100%; padding: var(--lt-space-2) var(--lt-space-3); overflow-wrap: anywhere; font-size: var(--lt-step--1); }
.tool-index a { font-weight: 600; }
.tool-index-count { color: var(--lt-text-3); font: 600 var(--lt-step--1) / 1 var(--lt-font-mono); }

@media (max-width: 720px) {
  .try-grid { grid-template-columns: minmax(0, 1fr); }
  .try-card { padding: var(--lt-space-4); }
  .tool-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-fns li { grid-template-columns: minmax(0, 1fr); gap: var(--lt-space-1); }
}