/* =====================================================================
   tools.css — shared styling for /tools/ generators.
   Matched to the live TNB site: Arial, #111 ground, #f97316 accent,
   #1a1a1a cards with an orange top rule. No web fonts (the rest of the
   site uses none, and skipping them keeps the page fast).

   The drawing viewport keeps its layer colors — yellow pitch circle,
   cyan centerlines, magenta roller ghost — because those carry meaning
   the way layer colors do on a real print, not because they are decor.
   ===================================================================== */

:root{
  --bg:#111;             /* page ground — matches site */
  --panel:#1a1a1a;       /* cards / control panel — matches .tool-card */
  --nav:#0a0a0a;         /* nav + footer bands */
  --model:#0d0d0d;       /* model-space viewport */
  --ink:#fff;
  --ink-dim:#aaa;
  --ink-dimmer:#777;
  --line:#2a2a2a;
  --accent:#f97316;      /* TNB orange */
  --accent-hi:#ea6a0a;
  /* drawing layers */
  --geo:#f2f5f7;
  --pitch:#e8c547;
  --center:#4fc3d9;
  --roller:#c678dd;
  --ok:#7ec87e;
  --bad:#e06c75;
  --mono:ui-monospace,Consolas,"Courier New",monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Arial,sans-serif;background:var(--bg);color:var(--ink);
     line-height:1.7;-webkit-text-size-adjust:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
a{color:var(--accent)}
a:hover{color:var(--ink)}

/* ---- site chrome: matched to the live site so the page belongs ---- */
nav{background:var(--nav);padding:1rem 2rem;display:flex;justify-content:space-between;
    align-items:center;border-bottom:2px solid var(--accent);position:sticky;top:0;z-index:100}
.logo{font-size:1.3rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.logo a{color:#fff;text-decoration:none}
.logo span{color:var(--accent)}
nav .links a{color:#ccc;text-decoration:none;font-size:.9rem;margin-left:1.5rem}
nav .links a:hover{color:var(--accent)}
@media (max-width:600px){nav .links a{display:none}}

footer{background:#000;color:#444;text-align:center;padding:1.25rem;
       font-size:.8rem;border-top:1px solid #1a1a1a}
footer a{color:#666;text-decoration:none}
footer a:hover{color:var(--accent)}
footer .foot-links{margin-bottom:.75rem;line-height:2}
footer .foot-links a{margin:0 .6rem}

/* ---- hero ---- */
.hero{padding:3.5rem 2rem 2rem;text-align:center;max-width:820px;margin:0 auto}
.hero-eyebrow{text-transform:uppercase;font-size:.75rem;letter-spacing:.2em;
              color:var(--accent);margin-bottom:1rem}
.hero h1{font-size:clamp(1.75rem,4vw,2.75rem);font-weight:900;line-height:1.15;margin-bottom:1.25rem}
.hero p{font-size:1.05rem;color:var(--ink-dim);line-height:1.7;max-width:640px;margin:0 auto}
.hero p strong{color:var(--ink);font-weight:700}

/* ---- content sections ---- */
.content{max-width:1000px;margin:0 auto;padding:0 2rem}
section.block{padding:2.5rem 0;border-top:1px solid #222}
section.block:first-child{border-top:none}
.eyebrow{text-transform:uppercase;font-size:.7rem;letter-spacing:.2em;
         color:var(--accent);font-weight:700;margin-bottom:.6rem}
section.block h2{font-size:1.5rem;font-weight:800;margin-bottom:1rem;line-height:1.25}
section.block h3{font-size:1.05rem;font-weight:700;margin:1.5rem 0 .4rem}
section.block p{max-width:72ch;margin-bottom:1rem;color:#bbb}
section.block p strong{color:var(--ink);font-weight:700}
section.block ul{max-width:72ch;margin:0 0 1rem 1.25rem;color:#bbb}
code{font-family:var(--mono);font-size:.9em;color:var(--geo);
     background:#0d0d0d;padding:.1em .35em;border-radius:2px}
var{font-family:var(--mono);font-style:normal;color:var(--pitch)}

.formulas{font-family:var(--mono);font-size:.85rem;line-height:2.1;background:#0d0d0d;
          border-left:3px solid var(--pitch);padding:1rem 1.25rem;margin:1.25rem 0;
          max-width:72ch;overflow-x:auto}
.formulas b{color:var(--pitch);font-weight:400;display:inline-block;min-width:12ch}
.formulas span{color:var(--ink-dim)}

.finding{background:#1a1a1a;border-top:3px solid var(--center);
         padding:1.25rem 1.5rem;margin:1.25rem 0;max-width:72ch}
.finding h3{margin-top:0}
.finding p:last-child{margin-bottom:0}

/* ---- chain reference table ---- */
.tbl-wrap{overflow-x:auto;margin:.5rem 0}
table.ref-table{border-collapse:collapse;width:100%;min-width:520px;
                font-family:var(--mono);font-size:.85rem}
table.ref-table th,table.ref-table td{text-align:right;padding:.55rem .9rem;
                                      border-bottom:1px solid #222}
table.ref-table th:first-child,table.ref-table td:first-child{text-align:left}
table.ref-table thead th{font-family:Arial,sans-serif;font-size:.7rem;letter-spacing:.1em;
                         text-transform:uppercase;color:var(--accent);font-weight:700;
                         border-bottom:1px solid #333}
table.ref-table tbody tr:hover{background:#1a1a1a}
.tbl-note{font-size:.9rem;color:var(--ink-dim);max-width:72ch}

/* ---- product CTA band (matches the hub page) ---- */
.product-cta{background:var(--nav);border-top:2px solid #222;padding:3rem 2rem;text-align:center}
.product-cta h2{font-size:1.5rem;margin-bottom:.5rem}
.product-cta p{color:var(--ink-dim);margin:0 auto 1.5rem;max-width:520px}
.btn-cta{display:inline-block;background:var(--accent);color:#fff;padding:.85rem 2rem;
         font-weight:700;font-size:.9rem;text-decoration:none;text-transform:uppercase;
         letter-spacing:.05em}
.btn-cta:hover{background:var(--accent-hi);color:#fff}

/* =====================================================================
   THE TOOL
   ===================================================================== */
.tool-shell{max-width:1000px;margin:0 auto 1rem;background:var(--panel);
            border-top:3px solid var(--accent)}
.tool-bar{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;
          padding:.75rem 1.25rem;border-bottom:1px solid #222}
.tool-bar b{font-size:.95rem;font-weight:700}
.tool-bar span{font-size:.75rem;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.1em}

.wrap{display:flex;min-height:520px}
.panel{width:300px;flex:0 0 300px;padding:1.25rem;border-right:1px solid #222}
.stage{flex:1;display:flex;flex-direction:column;min-width:0}
@media(max-width:820px){
  .wrap{flex-direction:column}
  .panel{width:auto;flex:none;border-right:none;border-bottom:1px solid #222}
}

.grp{margin-bottom:1rem}
.panel label{display:block;font-size:.7rem;font-weight:700;letter-spacing:.1em;
             text-transform:uppercase;color:var(--accent);margin-bottom:.3rem}
select,input[type=number]{width:100%;background:#0d0d0d;color:var(--ink);
  border:1px solid #333;padding:.55rem .6rem;border-radius:0;
  font-family:Arial,sans-serif;font-size:16px}
select:hover,input:hover{border-color:#555}
.row2{display:flex;gap:.6rem;margin-bottom:1rem}
.row2 .grp{flex:1;margin-bottom:0}
.grp .row2{margin-bottom:0}
.hint{font-size:.7rem;color:var(--ink-dimmer);margin-top:.3rem}

.units{display:flex;border:1px solid #333}
.units button{flex:1;background:none;border:none;color:var(--ink-dim);
              font-family:Arial,sans-serif;font-size:.85rem;padding:.55rem 0;cursor:pointer}
.units button.on{background:var(--accent);color:#fff;font-weight:700}

.btns{margin-top:1.25rem}
.btn{display:block;width:100%;text-align:center;padding:.85rem;font-weight:700;
     font-size:.9rem;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;
     border:none;border-radius:0;font-family:Arial,sans-serif}
.btn-dl{background:var(--accent);color:#fff}
.btn-dl:hover{background:var(--accent-hi)}

.err{display:none;margin-top:.9rem;padding:.6rem .75rem;font-size:.8rem;
     border-left:3px solid var(--bad);background:#1f1416;color:#f5a3ab}
.err.show{display:block}

.panel details{margin-top:1.25rem;border-top:1px solid #222;padding-top:.75rem}
.panel summary{cursor:pointer;font-size:.7rem;font-weight:700;letter-spacing:.1em;
               text-transform:uppercase;color:var(--ink-dim)}
.panel summary:hover{color:var(--accent)}
.ref{margin-top:.6rem;font-family:var(--mono);font-size:.75rem}
.ref div{display:flex;justify-content:space-between;padding:.15rem 0;border-bottom:1px solid #1f1f1f}
.ref span:first-child{color:var(--ink-dimmer)}
.ref .ok{color:var(--ok)}

.sheet{flex:1;margin:1rem;display:flex;min-height:400px;background:var(--model);
       border:1px solid #222;position:relative}
.sheet svg{width:100%;height:100%;display:block}
.readout{display:flex;flex-wrap:wrap;margin:0 1rem 1rem;border:1px solid #222;background:#151515}
.cell{flex:1 1 120px;padding:.5rem .8rem;border-right:1px solid #222;
      border-top:1px solid #222;min-width:110px}
.cell:last-child{border-right:none}
.cell b{display:block;font-size:.65rem;font-weight:700;letter-spacing:.1em;
        text-transform:uppercase;color:var(--ink-dimmer)}
.cell span{font-family:var(--mono);font-size:.9rem}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}