/* TMW Bend Deduction Calculator
   "Shop Instrument" design system, matched to the TMW free fab-tools line:
   gunmetal surfaces, torch-orange weld-heat accent, DRO readouts,
   Space Grotesk + JetBrains Mono + Inter. */

.tmw{
  --bg:#0E1115; --bg2:#14181E; --panel:#1A1F27; --panel2:#20262F;
  --line:#2C333D; --line2:#39424E; --inset:#0A0D11;
  --ink:#EDF1F6; --ink2:#AEB7C4; --ink3:#6E7884;
  --heat:#FF6A2C; --heat2:#FF8A3D; --ember:#FFB23E;
  --blue:#56A8FF; --green:#3FD08B; --red:#FF5C5C; --violet:#A78BFA;
  --glow:rgba(255,106,44,.38); --bluglow:rgba(86,168,255,.30);
  --r:14px; --r2:10px; --r3:8px;
  --disp:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --body:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono','Cascadia Code',Consolas,monospace;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 18px 40px -24px rgba(0,0,0,.8);

  /* Aliases consumed by the inline SVG diagram builder in the JS. */
  --bed:var(--inset); --bed-line:var(--line2);
  --amber:var(--heat); --cyan:var(--blue);
  --steel:#C2CBD6; --steel-edge:#8A94A2;
  --ink-soft:var(--ink2); --warn:var(--ember); --good:var(--green);
}
.tmw[data-theme="light"]{
  color-scheme:light;
  --bg:#EEF0F3; --bg2:#E6E9ED; --panel:#FFFFFF; --panel2:#F6F7F9;
  --line:#E0E4EA; --line2:#CDD3DC; --inset:#11151B;
  --ink:#161A20; --ink2:#4A535F; --ink3:#7B848F;
  --shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 14px 32px -22px rgba(20,30,50,.35);
}

/* ---- Container -------------------------------------------------------- */
.tmw{
  position:relative; display:block; color:var(--ink);
  color-scheme:dark;
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(255,106,44,.06), transparent 60%),
    radial-gradient(900px 400px at -5% 0%, rgba(86,168,255,.05), transparent 55%),
    var(--bg);
  border:1px solid var(--line); border-radius:var(--r);
  max-width:1140px; margin:0 auto; overflow:hidden; box-shadow:var(--shadow);
  container-type:inline-size; line-height:1.5; font-size:16px;
  font-family:var(--body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.tmw *{box-sizing:border-box; font-family:var(--body)}
.tmw h1,.tmw h2,.tmw h3,.tmw h4{font-family:var(--disp); margin:0; font-weight:600; letter-spacing:-.01em; color:var(--ink)}
.tmw p{margin:0}
.tmw a{color:var(--heat2); text-decoration:none}
.tmw a:hover{text-decoration:underline}

/* ---- Header chrome ---------------------------------------------------- */
.t-head{display:flex; flex-direction:column; gap:9px;
  padding:18px 24px 18px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--bg2),transparent)}
.t-topbar{display:flex; align-items:center; justify-content:space-between; gap:14px}
.t-eyebrow{display:inline-flex; align-items:center; gap:8px; font:600 11px/1 var(--mono);
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink3)}
.t-eyebrow b{color:var(--ink2); font-weight:600}
.t-spark{width:8px; height:8px; border-radius:2px; background:var(--heat);
  box-shadow:0 0 10px var(--glow); transform:rotate(45deg)}
.t-title{font-size:clamp(22px,3.4cqi,30px); font-weight:700; letter-spacing:-.02em; line-height:1.08}
.t-sub{color:var(--ink2); font-size:15px; line-height:1.55; margin-top:2px}
.t-tools{display:flex; align-items:center; gap:8px; flex:0 0 auto}
.t-icon{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; cursor:pointer; padding:0;
  border:1px solid var(--line2); border-radius:var(--r3); background:var(--panel); color:var(--ink2)}
.t-icon:hover{color:var(--ink); border-color:var(--heat); box-shadow:0 0 0 1px var(--heat) inset}
.t-icon svg{display:block; width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* INCH / MM segmented control, relocated into the toolbar */
.bdc-units{display:inline-flex; border:1px solid var(--line2); border-radius:var(--r3); overflow:hidden; margin-right:2px}
.bdc-units button{font:600 12px/1 var(--mono); letter-spacing:.05em; padding:9px 12px; cursor:pointer;
  background:var(--panel); color:var(--ink3); border:0}
.bdc-units button[aria-pressed="true"]{background:var(--heat); color:#10131a}

/* ---- Body ------------------------------------------------------------- */
.bdc-body{padding:22px 24px 24px}

/* layout grid */
.bdc-grid{display:grid; grid-template-columns:minmax(0,360px) 1fr; gap:20px; align-items:start}
@container (max-width:760px){ .bdc-grid{grid-template-columns:1fr} }

/* cards */
.bdc-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r2); padding:18px}
.bdc-card h2{display:flex; align-items:center; gap:9px; font:600 19px/1.1 var(--disp); letter-spacing:-.01em;
  color:var(--ink); margin:0 0 16px; padding-bottom:12px; border-bottom:1px solid var(--line)}
.bdc-card h2::before{content:""; width:11px; height:11px; border-radius:2px; background:var(--heat);
  box-shadow:0 0 8px var(--glow); transform:rotate(45deg); flex:0 0 auto}

/* fields */
.bdc-field{margin-bottom:16px}
.bdc-field:last-child{margin-bottom:0}
.bdc-field>label{display:block; font:600 14px/1.3 var(--body); color:var(--ink); margin-bottom:7px}
.bdc-hint{display:block; font-size:13px; color:var(--ink2); font-weight:400; margin-top:4px; line-height:1.5}
.bdc-row{display:flex; gap:8px}

.bdc input[type="number"], .bdc select{
  width:100%; font:500 16px/1 var(--mono); color:var(--ink);
  background:var(--bg2); border:1px solid var(--line2); border-radius:var(--r3); padding:11px 12px}
.bdc input[type="number"]:focus, .bdc select:focus{
  outline:none; border-color:var(--heat); box-shadow:0 0 0 2px var(--glow)}
.bdc select{cursor:pointer}
.bdc select option{background:var(--panel2); color:var(--ink)}

/* segmented material control */
.bdc-seg{display:flex; gap:6px; flex-wrap:wrap}
.bdc-seg button{flex:1 1 auto; min-width:84px; font:600 14px/1 var(--body); padding:11px 8px; cursor:pointer;
  border:1px solid var(--line2); border-radius:var(--r3); background:var(--bg2); color:var(--ink2)}
.bdc-seg button:hover{border-color:var(--line2); color:var(--ink)}
.bdc-seg button[aria-pressed="true"]{background:var(--heat); color:#10131a; border-color:var(--heat)}

/* K mode toggle */
.bdc-kmode{display:flex; gap:6px; margin-bottom:8px}
.bdc-kmode button{flex:1; font:600 13px/1 var(--mono); letter-spacing:.04em; padding:10px; cursor:pointer;
  border:1px solid var(--line2); border-radius:var(--r3); background:var(--bg2); color:var(--ink2)}
.bdc-kmode button[aria-pressed="true"]{background:var(--heat); color:#10131a; border-color:var(--heat)}
.bdc-knote{font-size:13px; color:var(--ember); margin:8px 0 0; min-height:1.2em; line-height:1.45}
.bdc-err{color:var(--red); font:600 12px/1.4 var(--mono); min-height:1.2em; margin-top:8px}

/* diagram bed */
.bdc-bed{background:var(--inset); border:1px solid var(--line); border-radius:var(--r2); padding:6px}
.bdc-bed svg{display:block; width:100%; height:auto}
.bdc-legend{display:flex; flex-wrap:wrap; gap:14px; padding:10px 12px 4px;
  font:500 13px/1.3 var(--mono); color:var(--ink2); letter-spacing:.02em}
.bdc-legend span{display:inline-flex; align-items:center; gap:6px}
.bdc-swatch{width:16px; height:0; border-top-width:2px; border-top-style:solid}

/* DRO readout panel */
.bdc-dro{margin-top:20px; background:var(--inset); border:1px solid var(--line); border-radius:var(--r2);
  display:grid; grid-template-columns:repeat(5,1fr); gap:1px; overflow:hidden}
@container (max-width:680px){ .bdc-dro{grid-template-columns:repeat(2,1fr)} }
.bdc-dro .cell{background:var(--inset); padding:15px 14px; position:relative}
.bdc-dro .cell+.cell{box-shadow:-1px 0 0 var(--line)}
.bdc-dro .lab{font:600 11px/1.1 var(--mono); letter-spacing:.13em; text-transform:uppercase; color:var(--ink2)}
.bdc-dro .val{font:700 26px/1 var(--mono); color:var(--ink); margin-top:8px; font-variant-numeric:tabular-nums}
.bdc-dro .val.amber{color:var(--heat); text-shadow:0 0 16px var(--glow)}
.bdc-dro .uom{font:500 12px/1 var(--mono); color:var(--ink2); margin-top:4px}

/* cut length */
.bdc-flat{margin-top:20px}
.bdc-flat-intro{font-size:15px; color:var(--ink2); margin:0 0 18px; line-height:1.55}
.bdc-shape{display:flex; gap:12px; margin-bottom:18px}
.bdc-shape button{flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer;
  padding:14px 10px; border:1px solid var(--line2); border-radius:var(--r2); background:var(--bg2); color:var(--ink2)}
.bdc-shape button svg{width:40px; height:40px}
.bdc-shape button span{font:700 14px/1 var(--body); color:var(--ink)}
.bdc-shape button em{font:500 11px/1 var(--mono); font-style:normal; letter-spacing:.03em}
.bdc-shape button[aria-pressed="true"]{border-color:var(--heat); background:var(--panel2);
  box-shadow:0 0 0 1px var(--heat) inset}
.bdc-shape button[aria-pressed="true"] span{color:var(--heat2)}

.bdc-sides{display:flex; gap:12px; margin-bottom:18px; flex-wrap:wrap}
.bdc-side{flex:1 1 120px}
.bdc-side label{display:block; font:700 14px/1.3 var(--body); color:var(--ink); margin-bottom:7px}
.bdc-side input{width:100%; font:600 17px/1 var(--mono); color:var(--ink); padding:12px; text-align:center;
  background:var(--bg2); border:1px solid var(--line2); border-radius:var(--r3)}
.bdc-side input:focus{outline:none; border-color:var(--heat); box-shadow:0 0 0 2px var(--glow)}
.bdc-side.hidden{display:none}

.bdc-cut{background:var(--inset); border:1px solid var(--line); border-radius:var(--r2); padding:18px 22px;
  display:flex; align-items:baseline; gap:18px; flex-wrap:wrap}
.bdc-cut-lab{font:700 13px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--ink3)}
.bdc-cut-val{font:700 42px/1 var(--mono); color:var(--heat); font-variant-numeric:tabular-nums;
  text-shadow:0 0 18px var(--glow)}
.bdc-cut-meta{flex-basis:100%; font:500 12px/1.5 var(--mono); color:var(--ink2); margin-top:2px}

/* formulas disclosure */
.bdc-body details{margin-top:20px; border:1px solid var(--line); border-radius:var(--r2); background:var(--panel)}
.bdc-body summary{cursor:pointer; padding:15px 18px; font:600 13px/1 var(--mono);
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink2)}
.bdc-body details[open] summary{border-bottom:1px solid var(--line)}
.bdc-formulas{padding:6px 18px 18px; font-size:15px; color:var(--ink2); line-height:1.55}
.bdc-formulas code{font:500 14px/1.7 var(--mono); background:var(--bg2); color:var(--ink);
  padding:1px 6px; border-radius:4px}
.bdc-formulas p{margin:12px 0}
.bdc-formulas ul{margin:8px 0; padding-left:20px}
.bdc-formulas li{margin:4px 0}
.bdc-formulas strong{color:var(--ink)}

.bdc-foot{margin-top:18px; font-size:13px; color:var(--ink2); line-height:1.55}

/* ---- Print ------------------------------------------------------------ */
@media print{
  .tmw{ font-size:10px !important; line-height:1.3 !important; }
  .t-head{ padding:0 0 5px !important; margin:0 0 8px !important; border-bottom:1px solid #000 !important; }
  .t-title{ font-size:15px !important; }
  .t-sub,.bdc-flat-intro,.bdc-body details,.bdc-foot,.bdc-knote,.bdc-hint,.bdc-err,
  .bdc-bed,.bdc-legend{ display:none !important; }
  .bdc-body{ padding:0 !important; }
  .bdc-grid{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:8px !important; align-items:start !important; }
  .bdc-card{ border:1px solid #999 !important; padding:7px !important; break-inside:avoid !important; }
  .bdc-card h2{ font-size:13px !important; margin:0 0 6px !important; padding-bottom:5px !important; }
  .bdc-field{ margin-bottom:7px !important; }
  .bdc-seg button,.bdc-kmode button,.bdc input[type=number],.bdc select,.bdc-field>label{ font-size:10px !important; }
  .bdc-dro{ margin-top:8px !important; grid-template-columns:repeat(5,1fr) !important; border:1px solid #999 !important; break-inside:avoid !important; }
  .bdc-dro .cell{ border:1px solid #ccc !important; padding:5px !important; }
  .bdc-dro .val{ font-size:13px !important; }
  .bdc-dro .lab{ font-size:7.5px !important; }
  .bdc-dro .uom{ font-size:8px !important; }
  .bdc-flat{ margin-top:8px !important; break-inside:avoid !important; }
  .bdc-shape,.bdc-sides{ gap:6px !important; margin-bottom:8px !important; }
  .bdc-cut{ border:1px solid #999 !important; padding:8px 12px !important; }
  .bdc-cut-val{ font-size:20px !important; }
  .bdc-cut-lab,.bdc-cut-meta{ font-size:8px !important; }
}