/* Controls for the interactive answers. Only the widgets live here; every
   colour, size and space is a token from system-tokens.css. Every control is
   at least 44px tall so it clears the tap-target floor. */

.controls{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:var(--block-gap) var(--gutter);
  margin:0 0 var(--gutter);
}
.control{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.control > label,.control > .control-label{
  font-family:var(--font-display);
  font-weight:var(--w-display);
  font-size:var(--text-small);
  color:var(--on-surface);
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);
}
.control output,.control .readout{
  font-family:var(--font-display);
  font-weight:var(--w-display);
  font-variant-numeric:tabular-nums;
  color:var(--accent);
}
.control .hint{font-size:var(--text-meta);color:var(--on-surface-soft);margin:0}

/* Range slider: a 44px hit area around a thin track. */
input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:44px;margin:0;background:transparent;cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:var(--r-pill);background:var(--border)}
input[type=range]::-moz-range-track{height:6px;border-radius:var(--r-pill);background:var(--border)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:28px;height:28px;margin-top:-11px;border-radius:50%;
  background:var(--accent);border:3px solid var(--surface);box-shadow:0 0 0 1px var(--accent);
}
input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;
  background:var(--accent);border:3px solid var(--surface);box-shadow:0 0 0 1px var(--accent);
}

/* Text and number fields. */
.field{
  display:flex;align-items:center;
  min-height:44px;border:var(--line-ink);border-radius:var(--r);
  background:var(--surface);
}
.field:focus-within{outline:2px solid var(--focus);outline-offset:2px}
.field .affix{padding-inline:var(--s3);color:var(--on-surface-soft);font-variant-numeric:tabular-nums}
.field input{
  flex:1;min-width:0;min-height:42px;border:0;background:transparent;
  font:inherit;font-variant-numeric:tabular-nums;color:var(--on-surface);
  padding-inline:var(--s3);
}
.field .affix + input{padding-left:0}
.field input:focus{outline:none}

/* Stepper: minus, value, plus. */
.stepper{display:inline-flex;align-items:stretch;border:var(--line-ink);border-radius:var(--r);width:max-content;max-width:100%}
.stepper button{
  min-width:44px;min-height:44px;border:0;background:var(--surface-raised);
  font:inherit;font-size:var(--text-h4);font-weight:var(--w-display);color:var(--on-surface);cursor:pointer;
}
.stepper button:first-child{border-right:var(--line);border-radius:var(--r) 0 0 var(--r)}
.stepper button:last-child{border-left:var(--line);border-radius:0 var(--r) var(--r) 0}
.stepper button:hover{background:var(--accent-tint)}
.stepper button:disabled{color:var(--on-surface-faint);cursor:not-allowed;background:var(--surface)}
.stepper .stepper-value{
  min-width:5.5rem;display:flex;align-items:center;justify-content:center;padding-inline:var(--s3);
  font-family:var(--font-display);font-weight:var(--w-display);font-variant-numeric:tabular-nums;
}

/* Segmented choice: a row of buttons, one pressed. */
.segmented{display:flex;flex-wrap:wrap;gap:var(--s2)}
.segmented button{
  min-height:44px;min-width:44px;padding-inline:var(--s4);
  border:var(--line-ink);border-radius:var(--r);background:var(--surface);
  font:inherit;font-variant-numeric:tabular-nums;color:var(--on-surface);cursor:pointer;
}
.segmented button:hover{background:var(--accent-tint)}
.segmented button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

/* A plain action button. */
.btn{
  min-height:44px;padding-inline:var(--s4);border:var(--line-ink);border-radius:var(--r);
  background:var(--structure);color:var(--on-structure);font:inherit;font-weight:var(--w-medium);cursor:pointer;
}
.btn:hover{background:var(--accent);border-color:var(--accent)}
.btn--quiet{background:var(--surface);color:var(--on-surface)}
.btn--quiet:hover{background:var(--accent-tint);color:var(--on-surface);border-color:var(--structure)}

/* A switch row: a checkbox with a 44px hit area. */
.switch{display:flex;align-items:center;gap:var(--s3);min-height:44px;cursor:pointer;font-weight:var(--w-medium)}
.switch input{width:22px;height:22px;accent-color:var(--accent);margin:0}

/* The frame an interactive figure sits in. */
.widget{border:var(--line);border-radius:var(--r-lg);padding:var(--gutter);margin:0 0 var(--block-gap)}
.widget > :last-child{margin-bottom:0}

/* Updated numbers flash once so the eye finds what changed. */
@keyframes changed{from{background:var(--accent-tint)}to{background:transparent}}
.changed{animation:changed .6s ease-out}

@media (max-width:820px){
  .widget{padding:var(--s4)}
}

/* Live numbers change width as they update, so they use proportional
   figures; the display face's tabular period reads as a gap at stat size. */
.stat-value,.control output,.control .readout,.stepper .stepper-value{font-variant-numeric:proportional-nums lining-nums}

/* The bar back to the article, at the very top of each example page. */
.backbar{display:flex;align-items:center;min-height:44px;margin-block:0;font-size:var(--text-small)}
.backbar a{display:inline-flex;align-items:center;min-height:44px;color:var(--on-surface-soft);text-decoration:none}
.backbar a:hover{color:var(--link);text-decoration:underline}