/* The tool pages. Tokens, type and the nav come from front.css; this is only the calculator
   furniture, which exists nowhere else on the site. */

.tool-head { padding: 4.5rem 0 1.5rem; }
.tool-head h1 { font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1.08; letter-spacing: -.02em; margin: .4rem 0 .8rem; }
.tool-head p { color: var(--muted); max-width: 46rem; margin: 0; }

.tool-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); padding-bottom: 3rem; }
.tool-card { border: 1px solid var(--border); border-radius: 14px; padding: 1.4rem 1.5rem; background: var(--ground); display: block; text-decoration: none; color: inherit; }
.tool-card:hover { border-color: var(--line-light); }
.tool-card h2 { font-size: 1.05rem; margin: 0 0 .4rem; letter-spacing: -.01em; }
.tool-card p { color: var(--slate); margin: 0; font-size: .93rem; }

.tool-panel { border: 1px solid var(--border); border-radius: 14px; padding: 1.5rem; background: var(--ground); }
.tool-panel label { display: block; font-weight: 500; margin-bottom: .45rem; }
.tool-panel textarea, .tool-panel input[type="text"], .tool-panel input[type="number"] {
  width: 100%; font: inherit; color: var(--fg); background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; padding: .7rem .85rem;
}
.tool-panel textarea { min-height: 11rem; resize: vertical; line-height: 1.55; }
.tool-panel .hint { color: var(--slate); font-size: .86rem; margin: .5rem 0 0; }

.readout { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); margin: 1.25rem 0 0; }
.readout div { border: 1px solid var(--border); border-radius: 12px; padding: .9rem 1rem; background: var(--surface); }
.readout dt, .readout .k { color: var(--slate); font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }
.readout dd, .readout .v { margin: .3rem 0 0; font-size: 1.5rem; letter-spacing: -.02em; }
.readout .v small { font-size: .85rem; color: var(--slate); letter-spacing: 0; }

.verdict { margin: 1.25rem 0 0; padding: .9rem 1.1rem; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); }
.verdict[data-state="over"], .verdict[data-state="under"] { border-color: var(--line-light); }

.tool-foot { padding: 2.5rem 0 4rem; }
.tool-foot h2 { font-size: 1.1rem; margin: 0 0 .6rem; }
.tool-foot p { color: var(--muted); max-width: 46rem; }
.tool-note { color: var(--slate); font-size: .86rem; }