/*
  Gener8 style kit — controls.

  .btn        tool button: icon + label. aria-pressed="true" shows it as on.
  .btn.primary   the one main action in a group (dark ink button)
  .btn.quiet     outlined, for secondary actions on cards
  .iconbtn    round icon-only button (close ×)
  .seg        segmented control: a row of buttons, one chosen (Male / Female, views)
  .pill       small outlined toggle inside a list row ("Only")
  .tick       round tick box tinted with the row's colour (--c): layer on / off
  .range      slider block: heading + value, slider, and words at each end

  All sizes are in --u so they scale with the screen (see tokens.css).
  No hover styles: pressed states only.
*/

/* ---- Tool button ------------------------------------------------------------ */
.btn {
  display: flex; align-items: center; gap: calc(var(--u) * 1); width: 100%;
  min-height: calc(var(--u) * 5.4); padding: 0 calc(var(--u) * 1.3);
  border-radius: var(--r); background: var(--well);
  font-size: calc(var(--tu) * 1.45); font-weight: 400; text-align: left; text-decoration: none; color: var(--ink);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.btn.primary { background: var(--ink); color: var(--panel); justify-content: center; }
.btn.quiet { background: transparent; border: 1px solid var(--line); justify-content: center; }
.btn.quiet[aria-pressed="true"] { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.btn.center { justify-content: center; }

/* ---- Round icon button ------------------------------------------------------ */
.iconbtn {
  width: calc(var(--u) * 4.8); height: calc(var(--u) * 4.8); flex: none;
  display: grid; place-items: center; border-radius: 50%;
  color: var(--muted); background: transparent;
}
.iconbtn:active { background: var(--press); }

/* ---- Segmented control ------------------------------------------------------ */
.seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: calc(var(--u) * .3);
  padding: calc(var(--u) * .35); border-radius: var(--r); background: var(--well);
}
.seg.wrap { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
.seg button {
  min-height: calc(var(--u) * 4.6); padding: 0 calc(var(--u) * .8);
  border-radius: calc(var(--r) * .8); font-size: calc(var(--tu) * 1.35); font-weight: 400; color: var(--muted);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.seg button[aria-pressed="true"] { background: var(--raised); color: var(--ink); box-shadow: 0 1px 3px rgba(28, 24, 18, .14); }

/* ---- Small toggle in a list row ----------------------------------------------- */
.pill {
  min-height: calc(var(--u) * 4.2); padding: 0 calc(var(--u) * 1.2);
  border-radius: 99px; border: 1px solid var(--line);
  font-size: calc(var(--tu) * 1.2); font-weight: 400; color: var(--muted);
}
.pill[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--panel); }

/* ---- Round tick box, tinted with the row's colour ------------------------------ */
/* --c is the fill colour (the layer's colour); --tk the tick colour, set by the
   viewer to dark or white depending on how light --c is (see tickInk in kit/js/colour.js). */
.tick {
  --c: var(--ink); --tk: #fff;
  width: calc(var(--u) * 5.4); height: calc(var(--u) * 5.4); flex: none;
  display: grid; place-items: center; border-radius: 50%;
}
.tick::before, .tick::after { content: ''; grid-area: 1 / 1; width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); border-radius: 50%; }
.tick::before {
  box-shadow: inset 0 0 0 1.5px var(--faint);
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* The tick mark itself: an SVG used as a mask, so it can take any colour */
.tick::after {
  background: var(--tk); opacity: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 80% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 80% no-repeat;
}
.tick[aria-pressed="true"]::before { background-color: var(--c); box-shadow: inset 0 0 0 1px rgba(28, 24, 18, .3); }
.tick[aria-pressed="true"]::after { opacity: 1; }
.tick:active { transform: scale(.94); }
/* Still downloading: gentle pulse */
.tick.loading::before { animation: tick-load 1s ease-in-out infinite alternate; }
@keyframes tick-load { from { opacity: 1; } to { opacity: .35; } }

/* ---- Slider block ------------------------------------------------------------- */
.range { display: flex; flex-direction: column; gap: calc(var(--u) * .2); padding: calc(var(--u) * .4) calc(var(--u) * .4) 0; }
.range-head { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 1); font-size: calc(var(--tu) * 1.4); font-weight: 400; }
.range-val {
  font-family: var(--font-mono); font-size: calc(var(--tu) * 1.2); color: var(--muted);
  background: var(--well); border-radius: var(--r-sm); padding: calc(var(--u) * .25) calc(var(--u) * .6);
}
.range-ends { display: flex; justify-content: space-between; font-size: calc(var(--tu) * 1.2); color: var(--faint); margin-top: calc(var(--u) * -.6); }

/* The slider itself: thin line, ring thumb, big invisible touch area */
input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: calc(var(--u) * 5);
  background: transparent; margin: 0; touch-action: none; cursor: pointer;
}
input[type=range]::-webkit-slider-runnable-track {
  height: calc(var(--u) * .35); border-radius: 99px;
  background: linear-gradient(90deg, var(--ink) var(--p, 0%), var(--line) var(--p, 0%));
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: calc(var(--u) * 3.2); height: calc(var(--u) * 3.2);
  margin-top: calc(var(--u) * -1.425); border-radius: 50%;
  background: var(--panel); border: 2px solid var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}
input[type=range]::-moz-range-track { height: calc(var(--u) * .35); border-radius: 99px; background: var(--line); }
input[type=range]::-moz-range-progress { height: calc(var(--u) * .35); border-radius: 99px; background: var(--ink); }
input[type=range]::-moz-range-thumb { width: calc(var(--u) * 3.2); height: calc(var(--u) * 3.2); border-radius: 50%; background: var(--panel); border: 2px solid var(--ink); }

/* Thin divider between groups of controls */
.rule { height: 1px; background: var(--line); margin: calc(var(--u) * .6) 0; border: 0; }

/* ---- Size (kit/js/size.js): Small / Medium / Room for this screen ---------------- */
.g8-size { display: grid; gap: calc(var(--u) * .6); }

/* Reset when left alone (kit/js/idle.js): a tick box in the Tools panel */
.g8-idle { display: flex; align-items: center; gap: calc(var(--u) * .8); min-height: calc(var(--u) * 5); font-size: calc(var(--tu) * 1.35); color: var(--ink); cursor: pointer; }
.g8-idle input { width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); accent-color: var(--accent); margin: 0; }