/* ---------- Widget House Style v0.1 ---------- */
:root{
  --wgt-gap: 12px;
  --wgt-radius: 10px;
  --wgt-border: 1.5px solid #0000001a;
  --wgt-shadow: 0 1px 10px rgba(0,0,0,.06);
  --wgt-accent: #1f7a6b; /* tweak to match your book theme */
  --wgt-pad: 10px 12px;
  --wgt-panel-min-h: 120px;
  --wgt-title-size: 0.95rem;
  --wgt-small: 0.85rem;
  --wgt-muted: #666;
}

.widget, .wgt { display: grid; gap: var(--wgt-gap); }
.wgt {
  grid-template-areas:
    "canvas canvas"
    "controls output";
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* equal widths, no overflow */;
  align-items: stretch; /* <-- key: make items fill the row height */
  gap: var(--wgt-gap);
}

/* Areas */
.wgt__canvas   { grid-area: canvas; }
.wgt__controls { grid-area: controls; }
.wgt__output   { grid-area: output; }
.wgt__controls, .wgt__output { min-height: var(--wgt-panel-min-h); }

.wgt__panel{
  background: #fff;
  border: var(--wgt-border);
  border-radius: var(--wgt-radius);
  box-shadow: var(--wgt-shadow);
  padding: var(--wgt-pad);
  box-sizing: border-box;
  height: 100%;                 /* <-- fill the track height */
  display: flex; flex-direction: column; /* optional: tidy inner layout */
}

@media (prefers-color-scheme: dark){
  .wgt__panel{ background:#111; border-color:#ffffff22; }
}

/* Mobile stacks to one column */
@media (max-width: 720px){
  .wgt {
    grid-template-areas:
      "canvas"
      "controls"
      "output";
    grid-template-columns: 1fr;
  }
}

/* Canvas niceties + touch support */
.wgt__canvas canvas{
  max-width: 100%;
  height: auto;
  border-radius: var(--wgt-radius);
  border: 2px solid #333;
  touch-action: none;    /* <- enables pointer events on mobile */
  user-select: none;
  -webkit-user-select: none;
}

/* Forms */
.wgt label{ font-weight: 600; display:flex; align-items:center; gap:8px; }
.wgt input[type="number"]{ width: 6.5em; }
.wgt input[type="range"]{ width: 100%; }
.wgt button{ padding: 6px 10px; border-radius: 6px; border: 1px solid #ccc; cursor: pointer; }
.wgt button:hover{ background: #f2f2f2; }

/* Figure-style caption if you keep using .figure wrappers */
.figure > p:first-of-type { margin-top: 6px; color: #555; }

/* Section title inside a panel */
.wgt__title{
  font-weight: 700;
  font-size: var(--wgt-title-size);
  margin-bottom: 6px;
}

/* One labeled control block */
.wgt__field{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

/* Horizontal row for label/value lines (telemetry) */
.wgt__row{
  display: flex;
  align-items: baseline;
  justify-content: start;
  gap: 8px;
}

/* Subtle hint text */
.wgt__hint{
  color: var(--wgt-muted);
  font-size: var(--wgt-small);
}

/* Monospace-ish numeric readout, nicely aligned */
.wgt__out{
  font-variant-numeric: tabular-nums;
}

/* Buttons (optional variants; base .wgt button already styled) */
.wgt__btn--accent{
  background: var(--wgt-accent);
  color: #fff;
  border-color: transparent;
}
.wgt__btn--ghost{
  background: transparent;
}

.wgt--pool .wgt__canvas canvas{
  background:#35654d;
  border:2px solid #333;
  border-radius: var(--wgt-radius);
}