/* ============================================================
   MACHINIST TOOLBOX — design tokens
   Gunmetal panels, hairline "engraved" rules, DRO-amber readouts
   ============================================================ */
:root{
  --bg:        #14171c;
  --panel:     #1d2229;
  --panel-2:   #232a33;
  --hairline:  #2e3640;
  --text:      #dde3ea;
  --muted:     #8b97a5;
  --amber:     #ffb454;   /* DRO readout */
  --amber-dim: #b97f33;
  --steel:     #5d6b7a;
  --danger:    #e5604c;
  --ok:        #7fd07f;
  --radius:    10px;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --disp: 'Chakra Petch', system-ui, sans-serif;
  --body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent; touch-action:manipulation;}
html,body{margin:0; padding:0;}
body{
  background:var(--bg); color:var(--text); font-family:var(--body);
  font-size:16px; line-height:1.45; min-height:100vh;
  padding-bottom:env(safe-area-inset-bottom);
}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:10;
  background:linear-gradient(var(--bg) 80%, rgba(20,23,28,.92));
  backdrop-filter:blur(6px);
  padding:calc(10px + env(safe-area-inset-top)) 16px 10px;
  border-bottom:1px solid var(--hairline);
  display:flex; align-items:center; gap:12px;
}
header .back{
  display:none; border:1px solid var(--hairline); background:var(--panel);
  color:var(--text); border-radius:8px; width:40px; height:40px;
  font-size:20px; line-height:1; cursor:pointer; flex:0 0 auto;
}
header .back:active{background:var(--panel-2);}
body.in-tool header .back{display:block;}
header h1{
  font-family:var(--disp); font-weight:700; font-size:17px; margin:0;
  letter-spacing:.14em; text-transform:uppercase;
}
header h1 small{
  display:block; font-family:var(--mono); font-weight:400; font-size:11px;
  letter-spacing:.08em; color:var(--muted); text-transform:none; margin-top:1px;
}

main{max-width:560px; margin:0 auto; padding:16px;}

/* ---------- home: search ---------- */
.search{position:relative; margin:2px 0 4px;}
.search input{
  width:100%; background:var(--panel); color:var(--text);
  border:1px solid var(--hairline); border-radius:10px;
  padding:12px 38px 12px 14px; font-size:16px; font-family:var(--body);
}
.search input:focus{outline:2px solid var(--amber-dim); outline-offset:1px; border-color:transparent;}
.search input::-webkit-search-cancel-button{display:none;}
.search-clear{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:30px; height:30px; border:none; background:none; color:var(--muted);
  font-size:22px; line-height:1; cursor:pointer; border-radius:6px;
}
.search-clear:active{background:var(--panel-2);}

/* ---------- home: tool grid ---------- */
.tool-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.tool-card{
  position:relative;
  background:var(--panel); border:1px solid var(--hairline); border-radius:var(--radius);
  padding:12px 13px; cursor:pointer; text-align:left; color:var(--text);
  display:flex; flex-direction:column; gap:5px; min-height:96px;
  transition:border-color .15s;
}
.tool-card:active{border-color:var(--amber-dim); background:var(--panel-2);}
.tool-card .glyph{font-family:var(--mono); color:var(--amber); font-size:17px; letter-spacing:.05em;}
.tool-card .name{font-family:var(--disp); font-weight:600; font-size:14.5px; line-height:1.2;}
.tool-card .sub{color:var(--muted); font-size:12px; line-height:1.3;}
.tool-card.soon{opacity:.45; cursor:default;}
.tool-card.soon:active{border-color:var(--hairline); background:var(--panel);}

/* favorite star — overlay inside the card */
.tool-card .star{
  position:absolute; top:6px; right:6px; width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; line-height:1; color:var(--steel); border-radius:6px;
}
.tool-card .star.on{color:var(--amber);}
.tool-card .star:active{background:var(--panel-2);}

/* ---------- collapsible section header ---------- */
.section-label{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); margin:20px 2px 10px; display:flex; align-items:center; gap:10px;
}
.section-label::after{content:''; flex:1; height:1px; background:var(--hairline);}
button.section-label{
  width:100%; background:none; border:none; cursor:pointer; text-align:left;
}
.section-label .chev{transition:transform .15s; color:var(--steel); font-size:10px;}
.section-label .count{color:var(--steel); letter-spacing:.05em;}
.section-label.collapsed .chev{transform:rotate(-90deg);}
.group-grid{overflow:hidden;}
.group-grid.collapsed{display:none;}

/* ---------- tool view ---------- */
.tool-view{display:none;}
.tool-view.active{display:block; animation:rise .18s ease-out;}
@keyframes rise{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion:reduce){ .tool-view.active{animation:none;} }

.card{
  background:var(--panel); border:1px solid var(--hairline);
  border-radius:var(--radius); padding:16px; margin-bottom:14px;
}
.card h2{
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); margin:0 0 12px;
}

/* inputs */
.field{margin-bottom:12px;}
.field:last-child{margin-bottom:0;}
.field label{display:block; font-size:13px; color:var(--muted); margin-bottom:5px;}
.field input, .field select{
  width:100%; background:var(--bg); color:var(--text);
  border:1px solid var(--hairline); border-radius:8px;
  padding:12px; font-size:17px; font-family:var(--mono);
}
.field input:focus, .field select:focus{outline:2px solid var(--amber-dim); outline-offset:1px; border-color:transparent;}
.field .hint{font-size:11.5px; color:var(--steel); margin-top:4px;}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.inline-btn{
  margin-top:6px; background:none; border:1px solid var(--hairline); color:var(--amber);
  font-family:var(--mono); font-size:12px; padding:6px 10px; border-radius:6px; cursor:pointer;
}
.inline-btn:active{background:var(--panel-2);}

/* segmented control */
.seg{display:flex; border:1px solid var(--hairline); border-radius:8px; overflow:hidden;}
.seg button{
  flex:1; background:var(--bg); border:none; color:var(--muted);
  font-family:var(--mono); font-size:15px; padding:11px 0; cursor:pointer;
  border-right:1px solid var(--hairline);
}
.seg button:last-child{border-right:none;}
.seg button.on{background:var(--panel-2); color:var(--amber); font-weight:600;}

/* DRO readout — the signature element */
.dro{border-top:1px solid var(--hairline); margin-top:4px;}
.dro-row{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:9px 2px; border-bottom:1px solid var(--hairline); cursor:pointer;
}
.dro-row:active .val{color:#ffd9a0;}
.dro-row .lbl{font-size:13px; color:var(--muted); padding-right:10px; min-width:0; overflow-wrap:anywhere;}
.dro-row .lbl em{font-style:normal; font-family:var(--mono); font-size:11px; color:var(--steel); display:block;}
.dro-row .val{
  font-family:var(--mono); font-size:19px; font-weight:600; color:var(--amber);
  font-variant-numeric:tabular-nums; letter-spacing:.02em; white-space:nowrap;
}
.dro-row .val.ref{color:var(--text); font-weight:400; font-size:16px;}
.dro-row .val.ok{color:var(--ok);}
.dro-row .val.bad{color:var(--danger);}
.dro-row .val small{font-size:11px; color:var(--steel); font-weight:400; margin-left:4px;}
.callout{
  font-family:var(--mono); font-size:14px; color:var(--text);
  background:var(--bg); border:1px dashed var(--hairline); border-radius:8px;
  padding:10px 12px; margin-bottom:12px; text-align:center; letter-spacing:.03em;
}
.err{color:var(--danger); font-size:13px; padding:4px 2px; min-height:0;}

/* canvas visualizers + embedded iframe tools */
.viz{display:block; width:100%; background:var(--bg);
  border:1px solid var(--hairline); border-radius:8px; margin-bottom:10px;}
.embed-frame{display:block; width:100%; height:78vh; min-height:520px;
  border:0; border-radius:var(--radius); background:var(--bg);}
input[type=checkbox]{accent-color:var(--amber);}
input[type=range]{accent-color:var(--amber);}
.note{font-size:12px; color:var(--steel); line-height:1.5; margin-top:10px;}
.note strong{color:var(--amber-dim);}

/* first-run disclaimer overlay */
.overlay{
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  padding:24px; padding-bottom:max(24px, env(safe-area-inset-bottom));
  background:rgba(10,12,15,.82); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.overlay[hidden]{display:none;}
.overlay-card{
  background:var(--panel); border:1px solid var(--hairline); border-radius:var(--radius);
  max-width:440px; width:100%; padding:22px 20px; box-shadow:0 12px 40px rgba(0,0,0,.5);
}
.overlay-card h2{
  font-family:var(--disp); font-size:18px; color:var(--amber); margin:0 0 12px; letter-spacing:.04em;
}
.overlay-card p{font-size:13.5px; color:var(--text); line-height:1.55; margin:0 0 12px;}
.overlay-card p strong{color:var(--amber);}
.primary-btn{
  width:100%; margin-top:6px; padding:12px; border:1px solid var(--amber-dim);
  background:var(--panel-2); color:var(--amber); font-family:var(--disp);
  font-size:14px; font-weight:600; border-radius:8px; cursor:pointer; letter-spacing:.03em;
}
.primary-btn:active{background:var(--hairline);}
.toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(8px);
  background:var(--panel-2); border:1px solid var(--amber-dim); color:var(--amber);
  font-family:var(--mono); font-size:13px; padding:8px 16px; border-radius:8px;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:50;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* scientific calculator keypad */
.calc-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:10px;}
.calc-grid button{
  background:var(--bg); border:1px solid var(--hairline); color:var(--text);
  font-family:var(--mono); font-size:16px; padding:12px 0; border-radius:8px; cursor:pointer;
}
.calc-grid button:active{background:var(--panel-2);}
.calc-grid button.op{color:var(--amber);}
.calc-grid button.fn{font-size:12.5px; color:var(--muted);}

@media (min-width:480px){ .tool-grid{grid-template-columns:1fr 1fr 1fr;} }