/* ==========================================================================
   PseudoForge — design tokens
   Palette: graphite control-panel body, cream paper for code, amber LED
   accent, muted python-blue secondary, brass knurled knob as the signature.
   Type: Space Grotesk (display/labels), Inter (body/UI), JetBrains Mono (code)
   ========================================================================== */
:root{
  --graphite-900:#1c1e22;
  --graphite-800:#25282d;
  --graphite-700:#2f3339;
  --graphite-600:#3b3f46;
  --steel-300:#aab0ba;
  --steel-100:#dde1e6;
  --paper:#f4efe4;
  --paper-line:#ddd3ba;
  --paper-shadow:#c9bd9c;
  --ink:#211d17;
  --amber:#ffb020;
  --amber-dark:#c97f00;
  --amber-glow:rgba(255,176,32,.55);
  --py-blue:#4b8bbe;
  --py-yellow:#ffd43b;
  --led-green:#49e08a;
  --led-red:#ff5c5c;
  --led-off:#4a4d52;
  --radius-panel:14px;
  --radius-sm:8px;
  --shadow-deep: 0 10px 30px rgba(0,0,0,.45), 0 2px 0 rgba(255,255,255,.03) inset;
  --font-display:'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body:'Inter', 'Segoe UI', sans-serif;
  --font-mono:'JetBrains Mono', 'Consolas', monospace;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--steel-100);
  background:
    radial-gradient(circle at 20% -10%, #33373e 0%, transparent 45%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.015) 0 2px, transparent 2px 4px),
    var(--graphite-900);
  min-height:100vh;
}

.app{display:flex;flex-direction:column;min-height:100vh;}

/* ---------- header / toolbar plate ---------- */
.toolbar-plate{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px;
  background:linear-gradient(180deg,var(--graphite-700),var(--graphite-800));
  border-bottom:1px solid rgba(0,0,0,.5);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 6px 16px rgba(0,0,0,.35);
}
.brand{display:flex;align-items:center;gap:12px;}
.brand-badge{
  font-family:var(--font-display);font-weight:700;color:var(--graphite-900);
  background:linear-gradient(160deg,var(--amber),var(--amber-dark));
  width:38px;height:38px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 0 var(--amber-dark), 0 6px 10px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5);
  letter-spacing:.5px;
}
.brand-text h1{
  font-family:var(--font-display);font-size:1.15rem;margin:0;letter-spacing:.3px;color:#f2f0ea;
}
.brand-sub{margin:0;font-size:.72rem;color:var(--steel-300);letter-spacing:.4px;text-transform:uppercase;}

.header-controls{display:flex;align-items:center;gap:14px;}
.plate-btn{
  font-family:var(--font-display);font-size:.78rem;letter-spacing:.3px;
  background:linear-gradient(180deg,var(--graphite-600),var(--graphite-700));
  color:var(--steel-100);border:1px solid rgba(0,0,0,.4);
  border-radius:8px;padding:8px 14px;cursor:pointer;
  box-shadow:0 2px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .08s ease, box-shadow .08s ease;
}
.plate-btn:hover{color:var(--amber);}
.plate-btn:active{transform:translateY(2px);box-shadow:none;}
.badge{
  display:inline-block;min-width:16px;padding:0 4px;margin-left:6px;
  background:var(--amber);color:#20180a;border-radius:999px;font-size:.68rem;font-weight:700;
}

/* rocker switch (skeuomorphic toggle) */
.rocker-switch{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;font-size:.75rem;color:var(--steel-300);}
.rocker-switch input{display:none;}
.rocker-track{
  width:38px;height:20px;border-radius:999px;position:relative;
  background:linear-gradient(180deg,#15161a,#26282d);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.7), inset 0 -1px 0 rgba(255,255,255,.05);
  transition:background .2s ease;
}
.rocker-knob{
  position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:linear-gradient(160deg,#e9ebee,#9ea3ab);
  box-shadow:0 1px 2px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.2);
  transition:left .18s cubic-bezier(.4,1.4,.6,1), background .18s ease;
}
.rocker-switch input:checked + .rocker-track{background:linear-gradient(180deg,#7a4a06,#3f2a05);box-shadow:inset 0 2px 4px rgba(0,0,0,.6), 0 0 8px var(--amber-glow);}
.rocker-switch input:checked + .rocker-track .rocker-knob{left:20px;background:linear-gradient(160deg,var(--amber),var(--amber-dark));}
.rocker-label{white-space:nowrap;}

/* ---------- workbench grid ---------- */
.workbench{
  flex:1;display:grid;
  grid-template-columns:1.3fr .8fr 1.3fr;
  gap:18px;padding:20px;
  align-items:start;
}
@media (max-width:1080px){
  .workbench{grid-template-columns:1fr;}
}

.panel{
  background:linear-gradient(180deg,var(--graphite-700),var(--graphite-800));
  border-radius:var(--radius-panel);
  border:1px solid rgba(0,0,0,.5);
  box-shadow:var(--shadow-deep);
  padding:16px;
  display:flex;flex-direction:column;gap:14px;
  position:relative;
}
.panel::before{ /* brushed metal texture */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.015) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;
}
.panel-header{
  font-family:var(--font-display);font-size:.72rem;letter-spacing:1.5px;color:var(--steel-300);
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:8px;border-bottom:1px dashed rgba(255,255,255,.12);
  text-transform:uppercase;
}
.header-actions{display:flex;gap:8px;}

/* ---------- mode tabs (rocker-style tab strip) ---------- */
.mode-tabs{display:flex;gap:6px;background:var(--graphite-900);padding:4px;border-radius:10px;box-shadow:inset 0 2px 5px rgba(0,0,0,.6);}
.mode-tab{
  flex:1;padding:8px 10px;border:none;border-radius:7px;background:transparent;color:var(--steel-300);
  font-family:var(--font-display);font-size:.75rem;letter-spacing:.3px;cursor:pointer;
  transition:all .15s ease;
}
.mode-tab.active{
  background:linear-gradient(180deg,var(--graphite-600),var(--graphite-700));
  color:var(--amber);box-shadow:0 2px 4px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
}
.mode-body.hidden{display:none;}
.mode-body{flex:1;display:flex;flex-direction:column;min-height:280px;}

/* pseudocode editor */
.editor{display:flex;flex:1;background:var(--graphite-900);border-radius:var(--radius-sm);overflow:hidden;box-shadow:inset 0 2px 6px rgba(0,0,0,.6);}
.line-numbers{
  padding:12px 8px;text-align:right;color:#5b6068;font-family:var(--font-mono);font-size:.8rem;
  user-select:none;background:rgba(0,0,0,.15);border-right:1px solid rgba(255,255,255,.05);
  white-space:pre;line-height:1.55;
}
.code-textarea{
  flex:1;resize:none;border:none;outline:none;background:transparent;color:#e8e6df;
  font-family:var(--font-mono);font-size:.85rem;line-height:1.55;padding:12px;
}
.plain-textarea{
  flex:1;resize:none;border:none;outline:none;border-radius:var(--radius-sm);
  background:var(--graphite-900);color:#e8e6df;font-family:var(--font-body);
  font-size:.9rem;line-height:1.6;padding:14px;box-shadow:inset 0 2px 6px rgba(0,0,0,.6);
  min-height:280px;
}
.code-textarea::placeholder, .plain-textarea::placeholder{color:#565b62;}

/* ---------- flowchart builder ---------- */
.flow-toolbar{display:flex;flex-wrap:wrap;gap:6px;}
.tool-btn{
  font-family:var(--font-body);font-size:.72rem;padding:6px 10px;border-radius:7px;cursor:pointer;
  background:linear-gradient(180deg,var(--graphite-600),var(--graphite-700));color:var(--steel-100);
  border:1px solid rgba(0,0,0,.4);box-shadow:0 2px 0 rgba(0,0,0,.5);
}
.tool-btn:active{transform:translateY(1px);box-shadow:none;}
.tool-btn.toggle.active{background:linear-gradient(180deg,var(--amber),var(--amber-dark));color:#241a04;}
.tool-btn.danger{color:#ffb0ab;}
.flow-canvas-wrap{
  position:relative;flex:1;min-height:320px;background:var(--graphite-900);
  border-radius:var(--radius-sm);box-shadow:inset 0 2px 8px rgba(0,0,0,.65);
  background-image:radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:18px 18px;overflow:hidden;
}
.flow-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.flow-nodes{position:absolute;inset:0;}
.flow-node{
  position:absolute;min-width:110px;padding:10px 14px;font-size:.78rem;text-align:center;
  background:linear-gradient(180deg,#3a3e45,#2b2e33);color:#eee;
  border:1px solid rgba(0,0,0,.5);box-shadow:0 3px 8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
  cursor:grab;user-select:none;
}
.flow-node.selected{outline:2px solid var(--amber);}
.flow-node[data-type="terminal"]{border-radius:999px;}
.flow-node[data-type="process"]{border-radius:6px;}
.flow-node[data-type="decision"]{
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);padding:22px 26px;background:linear-gradient(180deg,#3d3b2a,#2b2a1e);
}
.flow-node[data-type="io"]{clip-path:polygon(10% 0,100% 0,90% 100%,0 100%);}
.flow-hint{position:absolute;bottom:8px;left:10px;right:10px;font-size:.68rem;color:#6b7078;margin:0;pointer-events:none;}

/* ---------- console panel ---------- */
.console-panel{align-items:center;text-align:center;}
.dial-group{display:flex;flex-direction:column;align-items:center;gap:10px;}
.knob{
  width:84px;height:84px;border-radius:50%;cursor:ns-resize;position:relative;
  background:
    conic-gradient(from 210deg, #4a4030, #d9b25a 8%, #4a4030 16%, #4a4030 22%, #d9b25a 30%, #4a4030 38%,
     #4a4030 44%, #d9b25a 52%, #4a4030 60%, #4a4030 66%, #d9b25a 74%, #4a4030 82%, #4a4030 88%, #d9b25a 96%, #4a4030 100%);
  box-shadow:0 6px 14px rgba(0,0,0,.55), inset 0 2px 3px rgba(255,255,255,.25), inset 0 -3px 6px rgba(0,0,0,.5);
}
.knob-face{
  position:absolute;inset:10px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #726038, #2c2413 75%);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.6);
}
.knob-notch{position:absolute;top:6px;left:50%;width:3px;height:16px;background:var(--amber);border-radius:2px;transform-origin:50% 34px;transform:translateX(-50%) rotate(-108deg);box-shadow:0 0 6px var(--amber-glow);}
.dial-caption{font-family:var(--font-display);font-size:.68rem;letter-spacing:1px;color:var(--steel-300);display:flex;flex-direction:column;gap:2px;}
.dial-caption strong{color:var(--amber);font-size:.95rem;}

.toggle-group{display:flex;flex-direction:column;gap:10px;align-items:flex-start;width:100%;padding:0 6px;}

.push-button{
  width:120px;height:120px;border-radius:50%;border:none;cursor:pointer;position:relative;
  background:radial-gradient(circle at 35% 30%, #ff6a4d, #b32a1c 70%, #7c1c11 100%);
  box-shadow:0 10px 0 #5c140b, 0 16px 24px rgba(0,0,0,.55), inset 0 3px 6px rgba(255,255,255,.35);
  transition:transform .06s ease, box-shadow .06s ease;
}
.push-button-face{
  font-family:var(--font-display);font-weight:700;color:#3a0d05;letter-spacing:1px;font-size:.95rem;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.push-button:hover{filter:brightness(1.05);}
.push-button:active, .push-button.pressed{
  transform:translateY(8px);
  box-shadow:0 2px 0 #5c140b, 0 6px 10px rgba(0,0,0,.5), inset 0 3px 6px rgba(0,0,0,.3);
}
.push-button.busy{animation:pulseBtn 1s infinite ease-in-out;}
@keyframes pulseBtn{0%,100%{filter:brightness(1);}50%{filter:brightness(1.25);}}

.led-strip{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--steel-300);}
.led{
  width:11px;height:11px;border-radius:50%;background:var(--led-off);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.6);
}
.led[data-state="idle"]{background:var(--led-off);}
.led[data-state="busy"]{background:var(--amber);box-shadow:0 0 8px var(--amber-glow);animation:blink 1s infinite;}
.led[data-state="ok"]{background:var(--led-green);box-shadow:0 0 8px var(--led-green);}
.led[data-state="error"]{background:var(--led-red);box-shadow:0 0 8px var(--led-red);}
@keyframes blink{50%{opacity:.35;}}

.meter{width:100%;height:6px;border-radius:4px;background:var(--graphite-900);box-shadow:inset 0 1px 3px rgba(0,0,0,.7);overflow:hidden;}
.meter-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--amber-dark),var(--amber));transition:width .25s ease;}

/* ---------- output panel ---------- */
.paper-sheet{
  position:relative;background:var(--paper);color:var(--ink);border-radius:6px;
  box-shadow:0 8px 18px rgba(0,0,0,.4), inset 0 0 0 1px var(--paper-shadow);
  min-height:260px;max-height:420px;overflow:auto;
}
.paper-sheet::before{ /* perforated edge */
  content:"";position:absolute;left:0;top:0;bottom:0;width:14px;
  background-image:radial-gradient(circle, var(--graphite-800) 3px, transparent 3.2px);
  background-size:100% 16px;background-repeat:repeat-y;background-position:center;
}
#codeOutput{
  margin:0;padding:16px 16px 16px 30px;font-family:var(--font-mono);font-size:.82rem;line-height:1.6;
  white-space:pre-wrap;word-break:break-word;
}
.tok-kw{color:#8f3ea0;font-weight:600;}
.tok-str{color:#2c7a3d;}
.tok-com{color:#8a8168;font-style:italic;}
.tok-num{color:#b45a1c;}
.tok-fn{color:#1b5fa8;}

.ask-popover{
  position:absolute;background:var(--graphite-800);color:var(--steel-100);border-radius:8px;padding:8px;
  box-shadow:0 8px 20px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:6px;z-index:20;width:220px;
  border:1px solid rgba(255,255,255,.08);
}
.ask-popover.hidden{display:none;}
.ask-popover button{
  background:var(--graphite-700);color:var(--steel-100);border:none;border-radius:6px;padding:7px 8px;
  font-size:.75rem;text-align:left;cursor:pointer;
}
.ask-popover button:hover{color:var(--amber);}
.ask-custom{display:flex;gap:4px;margin-top:2px;}
.ask-custom input{flex:1;font-size:.72rem;border-radius:5px;border:none;padding:6px;background:var(--graphite-900);color:#fff;}
.ask-custom button{background:var(--amber);color:#241a04;font-weight:600;}

.run-row{display:flex;gap:10px;align-items:center;}
.run-button{
  font-family:var(--font-display);font-weight:600;letter-spacing:.4px;
  padding:10px 18px;border-radius:8px;border:none;cursor:pointer;color:#0b2c12;
  background:linear-gradient(180deg,#6adf94,#28a85b);
  box-shadow:0 3px 0 #1c7a41,0 6px 10px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.4);
}
.run-button:active{transform:translateY(3px);box-shadow:0 0 0 #1c7a41;}
.stdin-input{
  flex:1;padding:10px 12px;border-radius:8px;border:none;background:var(--graphite-900);color:#eee;
  font-family:var(--font-mono);font-size:.78rem;box-shadow:inset 0 2px 5px rgba(0,0,0,.6);
}

.crt-panel{
  background:#0c1410;border-radius:8px;padding:10px 12px;box-shadow:inset 0 0 24px rgba(0,0,0,.7);
  border:2px solid #05100a;
}
.crt-header{font-family:var(--font-display);font-size:.68rem;letter-spacing:1.5px;color:#4fdc86;margin-bottom:6px;}
.crt-header.amber{color:var(--amber);}
.crt-text{
  margin:0;font-family:var(--font-mono);font-size:.78rem;line-height:1.5;color:#7CFC9A;
  white-space:pre-wrap;word-break:break-word;max-height:160px;overflow:auto;
  text-shadow:0 0 4px rgba(124,252,154,.5);
}
.diagnostics .crt-panel, .diagnostics{background:transparent;}
.diagnostics.hidden{display:none;}
.diagnostics .crt-text{color:var(--amber);text-shadow:0 0 4px var(--amber-glow);}

.chip-btn{
  font-size:.7rem;padding:5px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.15);
  background:var(--graphite-600);color:var(--steel-100);cursor:pointer;
}
.chip-btn:hover{color:var(--amber);border-color:var(--amber);}

/* ---------- footer ---------- */
.statusbar{
  display:flex;justify-content:space-between;padding:8px 20px;font-size:.7rem;color:var(--steel-300);
  border-top:1px solid rgba(255,255,255,.06);
}
.statusbar code{color:var(--amber);}

/* ---------- drawers ---------- */
.drawer{
  position:fixed;top:0;right:-360px;width:340px;height:100%;background:var(--graphite-800);
  box-shadow:-8px 0 24px rgba(0,0,0,.5);transition:right .25s ease;z-index:50;display:flex;flex-direction:column;
  border-left:1px solid rgba(255,255,255,.08);
}
.drawer.open{right:0;}
.drawer-header{
  padding:14px 16px;font-family:var(--font-display);font-size:.78rem;letter-spacing:1px;
  border-bottom:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;align-items:center;
}
.drawer-close{background:none;border:none;color:var(--steel-300);font-size:1.1rem;cursor:pointer;}
.drawer-body{padding:14px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:12px;}
.drawer-empty{color:#6b7078;font-size:.8rem;}
.insight-item, .history-item{
  background:var(--graphite-700);border-radius:8px;padding:10px;font-size:.78rem;
  border:1px solid rgba(255,255,255,.06);
}
.insight-item .q{color:var(--amber);font-weight:600;margin-bottom:4px;}
.insight-item .snippet{font-family:var(--font-mono);font-size:.68rem;color:#9aa0a8;margin-bottom:6px;white-space:pre-wrap;}
.history-item{cursor:pointer;}
.history-item:hover{border-color:var(--amber);}
.history-item .meta{color:#9aa0a8;font-size:.68rem;margin-top:4px;}

.scrim{
  position:fixed;inset:0;background:rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:40;
}
.scrim.show{opacity:1;pointer-events:auto;}

/* lamp mode: warm ambient glow toggle (functional, applied via body class) */
body.lamp-on{
  background:
    radial-gradient(circle at 22% 8%, rgba(255,176,32,.16) 0%, transparent 40%),
    radial-gradient(circle at 20% -10%, #33373e 0%, transparent 45%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.015) 0 2px, transparent 2px 4px),
    var(--graphite-900);
}
body.lamp-on .panel{box-shadow:var(--shadow-deep), 0 0 40px rgba(255,176,32,.05);}

::selection{background:var(--amber);color:#241a04;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}