/* The Shop · lathe simulator. Machine-grey, with the cut in coolant blue and rapids in warning red. */
:root { --bg: #0c0d0f; --bg2: #14161a; --bg3: #1b1e23; --ink: #e8ebef; --dim: #9aa1ab; --mute: #626a75; --line: rgba(232,235,239,.1); --feed: #4fc3f7; --rapid: #ff5a4a; --steel: #8e99a6; --ok: #6be08a; --warn: #ffcf4a; color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font: 14.5px/1.45 ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif; }
body { display: flex; flex-direction: column; }
button, input, select, textarea { font: inherit; color: inherit; }
.top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; border-bottom: 1px solid var(--line); }
.logo { letter-spacing: .2em; } .logo span { color: var(--feed); } .sub { color: var(--mute); font: 500 12px/1 ui-monospace, monospace; } .grow { flex: 1; }
select { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; height: 36px; padding: 0 10px; }
main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); }
.left { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-right: 1px solid var(--line); min-height: 0; }
.stock { display: flex; gap: 12px; align-items: center; color: var(--dim); font-size: 13px; } .stock input { width: 70px; background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; margin-left: 4px; }
.editor { flex: 1; min-height: 220px; display: flex; border: 1px solid var(--line); border-radius: 12px; background: #0a0b0d; overflow: hidden; }
.gut { margin: 0; padding: 10px 6px 10px 10px; color: var(--mute); text-align: right; font: 13px/1.6 ui-monospace, Menlo, Consolas, monospace; user-select: none; overflow: hidden; min-width: 38px; }
.gut .cur { color: #0c0d0f; background: var(--feed); border-radius: 3px; }
textarea { flex: 1; resize: none; border: 0; outline: none; background: transparent; padding: 10px 10px 10px 6px; font: 13px/1.6 ui-monospace, Menlo, Consolas, monospace; white-space: pre; overflow: auto; color: #cfe3f2; }
.ctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .ctl button { height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg2); cursor: pointer; font-weight: 600; }
.ctl .pri { background: #1f8f4a; border-color: transparent; } .ctl .pri.running { background: #b8392c; }
.ctl label { display: flex; align-items: center; gap: 8px; color: var(--dim); font-size: 12.5px; } .ctl b { color: var(--ink); min-width: 44px; }
.right { position: relative; min-height: 0; display: flex; flex-direction: column; }
#cv { flex: 1; min-height: 240px; width: 100%; display: block; background: radial-gradient(120% 90% at 60% 40%, #15181d, #0b0c0e); }
.dro { position: absolute; top: 10px; right: 12px; display: grid; grid-template-columns: auto auto; gap: 2px 12px; padding: 10px 12px; border-radius: 12px; background: rgba(10,11,13,.85); border: 1px solid var(--line); font: 600 13px/1.4 ui-monospace, monospace; }
.dro span { color: var(--mute); } .dro b { text-align: right; color: var(--ok); font-weight: 600; }
.msgs { max-height: 34%; overflow-y: auto; border-top: 1px solid var(--line); padding: 8px 12px; font: 12.5px/1.5 ui-monospace, monospace; }
.msgs p { margin: 0 0 3px; color: var(--dim); } .msgs .w { color: var(--warn); } .msgs .e { color: var(--rapid); } .msgs .ok { color: var(--ok); }
@media (max-width: 860px) { main { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .left { border-right: 0; border-bottom: 1px solid var(--line); } .editor { min-height: 180px; max-height: 36vh; } .right { min-height: 62vh; } .sub { display: none; } }