/* Tool page frame: shared skeleton for every tool page. Spec: docs/agents/TOOL-FRAME.md.
   Class vocabulary: .tf-hero (stage) > .ks-wrap > .tf-hero-grid > .tf-copy + .tf-summary;
   .tf-work (paper) > .tf-panel; .tf-related (hairline rows). Tool-specific rules live in css/v2/tools/<tool>.css. */

/* 1. Tool hero (stage) */
.tf-hero { background: var(--stage); color: var(--parchment); padding: calc(var(--header-h) + 56px) 0 64px; position: relative; }
.tf-hero-grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
@media (min-width: 1024px) { .tf-hero-grid { grid-template-columns: 1.05fr .95fr; gap: 64px; } }
@media (max-width: 760px) { .tf-hero { padding: calc(var(--header-h) + 32px) 0 48px; } }
.tf-crumb { display: flex; justify-content: flex-start; gap: 8px; align-items: center; font: 400 14px/1.3 var(--font-sans); color: var(--parchment-2); margin: 0 0 24px; }
.tf-crumb a { color: var(--parchment-2); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; margin: -12px 0; }
.tf-crumb a:hover { color: var(--parchment); }
.tf-crumb [aria-current] { color: var(--parchment); }
.tf-hero h1, .tf-h1 { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-display-l); line-height: 1; letter-spacing: -0.028em; font-variation-settings: 'opsz' 72; margin: 0; color: var(--parchment); text-wrap: balance; }
.tf-hero h1 .ks-dim, .tf-h1 .ks-dim { color: var(--parchment-3); }
.tf-lead { font: 400 clamp(18px, 1.5vw, 20px)/1.55 var(--font-sans); color: var(--parchment-2); max-width: 34em; margin: 24px 0 0; }
.tf-facts { font: 400 14px/1.5 var(--font-sans); color: var(--parchment-2); margin: 20px 0 0; }
.tf-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* Live summary panel */
.tf-summary { background: var(--stage-2); border: 1px solid var(--hair-stage); border-radius: var(--r-panel); padding: 32px; color: var(--parchment); }
.tf-summary-label { font: 400 13px/1.4 var(--font-sans); color: var(--parchment-2); margin: 0; }
.tf-figure { font: 300 clamp(48px, 6vw, 72px)/1 var(--font-sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--parchment); margin: 12px 0 0; }
.tf-figure--kesef { color: var(--kesef); }
.tf-subs { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 20px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--hair-stage); }
.tf-sub-label { font: 400 13px/1.4 var(--font-sans); color: var(--parchment-2); margin: 0; }
.tf-sub { font: 400 24px/1.2 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--parchment); margin: 6px 0 0; }

/* 2. Work area (paper) */
.tf-work { background: var(--paper); color: var(--ink); padding: 72px 0 112px; }
.tf-panel { background: var(--paper-2); border: 1px solid var(--hair); border-radius: var(--r-panel); box-shadow: none; padding: clamp(22px, 3vw, 36px); }
.tf-panel--primary { box-shadow: var(--shadow-lg); }
.tf-panel-eyebrow { font: 500 14px/1.3 var(--font-sans); color: var(--ink-2); margin: 0 0 8px; text-transform: none; letter-spacing: 0; }
.tf-panel-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 2.2vw, 30px); line-height: 1.15; letter-spacing: -0.015em; margin: 0; color: var(--ink); }
.tf-work :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select) { min-height: 48px; border-radius: var(--r-chip); border: 1px solid var(--hair-strong); background: var(--paper-2); color: var(--ink); font: 400 16px/1.2 var(--font-sans); font-variant-numeric: tabular-nums; box-shadow: none; }
.tf-work :is(input, select, textarea):focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--kesef-soft); }
.tf-work label { font: 500 13px/1.3 var(--font-sans); color: var(--ink-2); }
.tf-result { font: 300 clamp(40px, 4.4vw, 56px)/1 var(--font-sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.tf-work table td, .tf-work table th { font-variant-numeric: tabular-nums; }
.tf-up { color: var(--up); }
.tf-down { color: var(--down); }

/* 3. Bottom of page: related guides/tools */
.tf-related { background: var(--paper); padding: 0 0 112px; }
.tf-related-title { font: 500 14px/1.3 var(--font-sans); color: var(--ink-2); margin: 0 0 16px; }
.tf-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.tf-rows li { border-bottom: 1px solid var(--hair); }
.tf-rows a { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; color: var(--ink); text-decoration: none; font: 300 clamp(22px, 2vw, 28px)/1.2 var(--font-display); letter-spacing: -0.015em; }
.tf-rows a span { font: 400 14px/1.4 var(--font-sans); color: var(--ink-2); margin-left: auto; text-align: right; }
.tf-rows a svg { width: 18px; height: 18px; flex: none; transition: transform .3s var(--ease); }
.tf-rows a:hover svg { transform: translateX(4px); }
@media (max-width: 600px) { .tf-rows a span { display: none; } }
.tf-hero-grid > * { min-width: 0; }

/* 4. Live results (js/v2/tool-kit.js): a "what this means" sentence under the main number; out-of-range inputs */
.tf-means { font: 400 15px/1.5 var(--font-sans); color: var(--ink-2); margin: 10px 0 0; max-width: 34em; text-wrap: pretty; }
.ks-stage .tf-means, .tf-summary .tf-means { color: var(--parchment-2); }
.tf-means strong { color: inherit; font-weight: 500; }
.tf-work input[aria-invalid="true"], .tf-work .tk-affix:has(input[aria-invalid="true"]) { border-color: var(--down); }