/* Basic layout */
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:#0b0f13; color:#e7edf3; }
#app { max-width: 1200px; margin: 0 auto; padding: 16px; }
header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
h1 { font-size: 20px; margin: 0; }
#progress { font-size:14px; opacity:0.9; }
main { display:grid; grid-template-columns: 280px 1fr; gap: 16px; }
#instructions { background:#121821; border:1px solid #223043; border-radius:12px; padding:12px; }
#instructions { display:flex; flex-direction:column; justify-content:space-between; }
#instructions h2 { margin: 0 0 8px 0; font-size:16px; }
.instruction-top { padding:12px; background:#121821; border:1px solid #223043; border-radius:12px 12px 0 0; max-height:280px; overflow:auto; }
.instruction-top h2 { margin-top:0; }
.instruction-text { margin: 0 0 12px 0; line-height:1.4; }
.instruction-bottom { padding:12px; background:#0f1720; border-top:1px solid #1e2a3a; border-radius:0 0 12px 12px; }
.instruction-bottom table { width:100%; border-collapse:collapse; font-size:13px; }
.instruction-bottom th, .instruction-bottom td { padding:6px; border-bottom:1px solid #213142; }
.instruction-bottom tbody tr.active { background: rgba(152,183,255,0.12); }
.hint { background:#222f45; border-left:4px solid #3aa0ff; padding:8px; border-radius:6px; margin-bottom:12px; font-size:14px; }
.hidden { display:none !important; }
.controls button { margin-right:6px; }
/* helper removable controls (temporary testing aids) */
.controls.removable { margin-top:8px; }
.controls.removable button { background:#294256; border-color:#3d5b78; }
button { background:#1d2a3a; color:#e7edf3; border:1px solid #2a3d57; padding:6px 10px; border-radius:8px; cursor:pointer; }
button:hover { background:#223247; }
#workspace { background:#0e1219; border:1px solid #223043; border-radius:12px; padding:12px; }

/* Grid background using CSS gradients to mimic graph paper */
#grid-container {
  position: relative;
  width: 100%;
  max-width: 900px;
  aspect-ratio: 3 / 2;
  margin: 0 auto;
  /* grid sizes use CSS vars so JavaScript can scale them dynamically */
  --grid-small: 10px;
  --grid-large: 50px;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(to right, rgba(255,255,255,0.2) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.2) 1px, transparent 1px);
  background-size: var(--grid-small) var(--grid-small), var(--grid-small) var(--grid-small), var(--grid-large) var(--grid-large), var(--grid-large) var(--grid-large);
  border-radius: 10px;
  overflow:hidden;
}

/* Canvas overlay */
#draw-canvas {
  position:absolute; left:0; top:0;
  width:100%; height:100%;
}

/* Ghost input fields positioned near axes */
.ghost-input {
  position:absolute;
  background:#0e1219;
  color:#e7edf3;
  border:1px dashed #4a6aa1;
  border-radius:8px;
  padding:6px 8px;
  font-size:14px;
  outline:none;
}

/* Feedback marks */
.check, .cross {
  position:absolute;
  font-size:42px;
  font-weight:700;
  top: 10px; right: 12px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.check { color:#00d084; }
.cross { color:#ff4d4f; }

footer { margin-top:10px; font-size:13px; opacity:0.85; }

/* Axis guidelines styling (drawn on canvas, but we'll keep colors here for reference)
   guideline grey: rgba(200,200,200,0.35)
   axis final: #e7edf3
*/