/* ============================================================
   Program prototyper (tool id: sim) — styles scoped to #view-sim.
   Adapted from the former standalone embed page; the prototyper's
   tokens are mapped onto the app palette so it renders native
   inside the SPA. Light-theme / print / appbar rules from the
   standalone page are intentionally dropped (browser-only).
   ============================================================ */
#view-sim{
  --accent: var(--amber);
  --border: var(--hairline);
  --input:  var(--bg);
}

#view-sim .wrap{
  display:flex; flex-wrap:wrap; gap:16px;
  margin:0; padding:0; max-width:none;
}
#view-sim .panel{
  background:var(--panel); border:1px solid var(--border);
  border-radius:8px; padding:14px 14px 10px; flex:1; min-width:280px;
}
#view-sim .panel h2{ margin:0 0 8px; font-size:17px; font-weight:600; }
#view-sim .panel h3{ margin:10px 0 4px; font-size:14px; font-weight:600; }
#view-sim .panel p{ margin:0 0 8px; color:var(--muted); font-size:13px; }

#view-sim button{
  border-radius:4px; border:1px solid var(--accent); background:var(--accent);
  color:#14171c; cursor:pointer; padding:5px 9px; font-size:13px; font-weight:600;
}
#view-sim button.secondary{ background:transparent; color:var(--accent); border-color:var(--border); }
#view-sim button.small{ padding:3px 6px; font-size:11px; }
#view-sim button:disabled{ opacity:.4; cursor:default; }

#view-sim table{ width:100%; border-collapse:collapse; font-size:12px; }
#view-sim th, #view-sim td{ border-bottom:1px solid var(--hairline); padding:4px 4px; text-align:left; }
#view-sim th{ font-weight:500; color:var(--muted); font-size:11px; }
#view-sim td input, #view-sim td select{
  width:100%; background:var(--input); border:1px solid var(--border);
  border-radius:4px; padding:3px 4px; color:var(--text); font-size:12px;
  font-family:var(--mono);
}
#view-sim td input:focus, #view-sim td select:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 1px rgba(255,180,84,0.45);
}
#view-sim .line-row-error, #view-sim .groove-row-error{ background:#2c1414; }
#view-sim .small{ font-size:11px; color:var(--muted); }

#view-sim #log{
  margin-top:6px; max-height:140px; overflow-y:auto; background:#050505;
  border-radius:4px; border:1px solid var(--border); padding:4px 6px;
  font-family:var(--mono); font-size:11px; white-space:pre-wrap;
}
#view-sim .log-line{ margin-bottom:1px; }
#view-sim .log-ok{ color:var(--ok); }
#view-sim .log-err{ color:var(--danger); }

#view-sim canvas{
  width:100%; max-width:100%; border-radius:4px; background:#050505;
  border:1px solid var(--border); display:block;
}

#view-sim .btn-row{ margin-top:6px; display:flex; gap:8px; flex-wrap:wrap; }
#view-sim .section{ margin-top:8px; padding-top:4px; border-top:1px dashed var(--hairline); }
#view-sim #scaleSlider{ width:140px; }

#view-sim .panel-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
#view-sim .panel-head h2{ margin:0; }
#view-sim details.help{ margin:2px 0 8px; }
#view-sim details.help summary{ cursor:pointer; color:var(--accent); font-size:12px; list-style:none; width:max-content; }
#view-sim details.help summary::-webkit-details-marker{ display:none; }
#view-sim details.help summary::before{ content:"\24D8  "; }
#view-sim details.help ul{ margin:6px 0 0; padding-left:18px; line-height:1.65; font-size:12px; color:var(--muted); }
#view-sim details.help li{ margin:3px 0; }
#view-sim .section h3{ margin:10px 0 4px; }

#view-sim .controls{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:10px; font-size:13px; color:var(--muted); }
#view-sim .controls .ctl{ display:inline-flex; align-items:center; gap:6px; }
#view-sim .controls input[type=checkbox]{ width:auto; }
#view-sim .btn-row #btnSolvePreview{ flex:1; font-weight:600; }

#view-sim #savesSection{ margin-top:10px; }
#view-sim .save-row{ display:flex; gap:8px; align-items:center; margin-top:6px; flex-wrap:wrap; }
#view-sim .save-row input[type=text], #view-sim .save-row select{
  flex:1; min-width:120px; background:var(--input); color:var(--text);
  border:1px solid var(--border); border-radius:6px; padding:7px 8px; font-size:16px;
}
#view-sim .save-row input[type=text]:focus, #view-sim .save-row select:focus{ outline:none; border-color:var(--accent); }
#view-sim #pasteBox{
  width:100%; margin-top:6px; background:var(--input); color:var(--text);
  border:1px solid var(--border); border-radius:6px; padding:8px;
  font-family:var(--mono); font-size:16px;
}

@media (max-width:800px){ #view-sim #previewPanel{ order:-1; } }
@media (min-width:621px){ #view-sim #previewPanel{ position:sticky; top:8px; align-self:flex-start; } }
@media (max-width:620px){
  #view-sim .wrap{ flex-direction:column; gap:12px; }
  #view-sim .panel{ min-width:0; width:100%; }
  #view-sim .section{ overflow-x:auto; }
  #view-sim .panel-head{ flex-wrap:wrap; }
  #view-sim table{ font-size:11px; }
  #view-sim th{ font-size:10px; }
  #view-sim th, #view-sim td{ padding:3px 2px; }
  #view-sim td input, #view-sim td select{ padding:3px 2px; font-size:11px; }
  #view-sim #scaleSlider{ width:120px; }
}