/*
 * templates/tool.css -- page-type-specific rules for the 'tool' entity type
 * (docs/CONTRACT.md §3): the interactive-calculator widget shell that
 * assets/js/tools.js attaches behaviour to. Loads after tokens.css/
 * base.css/components.css; only adds rules, every value references a
 * tokens.css variable.
 */

.tool-widget{
  border:1px solid var(--navy);background:var(--white);padding:28px;
  box-shadow:var(--shadow);
}
.tool-widget-tabs{display:flex;gap:1px;margin-bottom:22px;border:1px solid var(--navy)}
.tool-tab{
  flex:1;border:0;background:var(--paper-2);color:var(--ink-2);
  padding:12px 14px;font-size:11px;font-weight:750;
}
.tool-tab.active{background:var(--navy);color:#fff}
.tool-inputs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:22px}
.tool-field{display:flex;flex-direction:column;gap:8px;font-size:11px;font-weight:650;color:var(--ink-2)}
.tool-field input{
  min-height:46px;border:1px solid var(--line-dark);background:var(--paper);color:var(--ink);
  padding:0 12px;font-size:14px;font-family:inherit;
}
.tool-field input:focus{outline:0;border-color:var(--cobalt);box-shadow:0 0 0 2px var(--ice)}
.tool-outputs{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--navy);border-left:1px solid var(--navy)}
.tool-output{padding:16px;border-right:1px solid var(--navy);border-bottom:1px solid var(--navy);background:var(--ice)}
.tool-output span{display:block;font-size:8px;font-weight:850;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.tool-output strong{display:block;font-family:Georgia,serif;font-weight:500;font-size:24px;margin-top:6px;letter-spacing:-.02em}
.tool-note{font-size:10px;color:var(--muted);margin:18px 0 0;line-height:1.6}

.tool-spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.em-col-head{font-size:12px;font-weight:750;margin:0 0 12px}

@media(max-width:720px){
  .tool-inputs,.tool-outputs{grid-template-columns:1fr}
  .tool-output{border-right:0}
  .tool-spec-grid{grid-template-columns:1fr}
  .tool-widget-tabs{flex-direction:column}
}