/* The ART/GTO taste for /tools: the calculators as windows on paper (rules: /DESIGN.md). Loads after /taste.css and tools.css. */
:root { --serif: "Hanken Grotesk", system-ui, sans-serif; }

/* the calculator itself is the solver window: ink title bar, brass-grey frame, paper-raised body */
.tool { position: relative; background: var(--paper-raised); border: var(--win-frame) solid var(--brd-strong); border-top: 0; border-radius: 0; padding: calc(var(--win-bar) + 16px) 16px 16px; margin: 0 0 var(--s4); }
.tool::before { content: "Calculator"; position: absolute; left: calc(-1 * var(--win-frame)); right: calc(-1 * var(--win-frame)); top: 0; height: var(--win-bar); padding: 0 10px;
  background: var(--ink); color: var(--paper-raised); font: 500 var(--t-label)/var(--win-bar) var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.fields label, .field { font: 600 12px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-dim); }
.fields small, .field small { text-transform: none; letter-spacing: .01em; font-family: var(--sans); font-weight: 400; }
input[type=text], input[type=number], textarea, select { border-radius: 0; background: var(--paper); border: 1px solid var(--brd-strong); font-family: var(--mono); }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--brass); border-color: var(--brass); }
button.ghost { border-radius: 0; border-color: var(--brd-strong); font-family: var(--sans); }
button.ghost:hover { background: var(--brass); border-color: var(--brass); color: var(--paper-raised); }

/* results: big figures in the claim face, labels as solver output */
.stat { background: var(--paper); border: 0; border-left: 3px solid var(--brd-strong); border-radius: 0; padding: 10px 14px; }
.stat span { font: 500 var(--t-label)/1.2 var(--mono); letter-spacing: .08em; }
.stat b { font: 600 clamp(28px, 3.4vw, 40px)/1 var(--sans); letter-spacing: -.03em; margin-top: 6px; }
.res th { font-family: var(--mono); letter-spacing: .08em; }
.res td { font-family: var(--mono); font-size: 13px; }
.bar { border-radius: 0; }
.chart { border-radius: 0; background: var(--paper); border-color: var(--brd-strong); }
.formula { border-radius: 0; font-family: var(--mono); }
.prose p, .prose li { font-size: 16px; }
.prose h2 { font-size: clamp(26px, 3.6vw, 40px); }

/* the tool index: each tool is a window you can open */
.toolgrid { gap: var(--s4); }
.toolgrid a { position: relative; border: var(--win-frame) solid var(--brd-strong); border-top: 0; border-radius: 0; padding: calc(var(--win-bar) + 16px) 16px 18px; background: var(--paper-raised); }
.toolgrid a::before { content: "Free tool"; position: absolute; left: calc(-1 * var(--win-frame)); right: calc(-1 * var(--win-frame)); top: 0; height: var(--win-bar); padding: 0 10px;
  background: var(--ink); color: var(--paper-raised); font: 500 var(--t-label)/var(--win-bar) var(--mono); letter-spacing: .08em; text-transform: uppercase;
  transition: background-color .5s var(--ease-link); }
.toolgrid a:hover { border-color: var(--brd-strong); color: var(--ink); }
.toolgrid a:hover::before { background: var(--brass); }
.toolgrid b { font: 600 24px/1 var(--sans); letter-spacing: -.02em; margin-bottom: 8px; }
.toolgrid small { font-family: var(--sans); font-size: 15px; }
.examples button { color: var(--felt-mid); }
.examples button:hover { color: var(--brass-text); }