/* Interactive pieces in case-study galleries (three.js and the like): one control UI for every
   case study, in the ONETOO design system, not the client's brand (the client's brand is the
   artwork). Pills are the nav pills (.nav-item): 45px, --colour--gray, --type--0-833, 30px round,
   1px inset outline on hover. Hint text is the dark-page label grey (.black .case-label).

   Markup: the piece is `.ot-ix` (fills its gallery item); /js/interactive-ui-*.js adds
   `.ot-ix-ui` > `.ot-ix-hint` + `.ot-ix-controls` > `.ot-ix-btn` | `.ot-ix-seg` | `.ot-ix-range`,
   and the piece gets `.is-live` when it runs (the UI shows only then). */

.ot-ix {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  container-type: inline-size;
  font-family: var(--type, Beausite, Arial, sans-serif);
}

/* Each gallery's CSS is `.work-content :nth-child(n)` with a space, which styles every nth
   descendant: the piece and its UI opt out (doubled class: outranks .content-1 rules, any order). */
.work-content .ot-ix.ot-ix,
.work-content .ot-ix.ot-ix * { grid-area: auto; aspect-ratio: auto; }
@media (max-width: 767px) {
  .work-content .ot-ix.ot-ix { width: 100% !important; }
  .work-content .ot-ix-ui.ot-ix-ui,
  .work-content .ot-ix-ui.ot-ix-ui * { width: auto !important; }
  .work-content .ot-ix-ui.ot-ix-ui { left: var(--spacing--small, 15px) !important; right: var(--spacing--small, 15px) !important; }
}

.ot-ix-ui {
  position: absolute;
  left: var(--spacing--small, 15px);
  right: var(--spacing--small, 15px);
  bottom: var(--spacing--small, 15px);
  z-index: 2;
  display: none;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing--tiny, 7.5px);
  pointer-events: none;
}
.ot-ix.is-live > .ot-ix-ui { display: flex; }

.ot-ix .ot-ix-hint {
  padding: 0 0 15px 15px;
  color: #b4b4b4;
  font-size: var(--type--0-833, .833rem);
  font-weight: 300;
  line-height: 1;
}

.ot-ix-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--spacing--tiny, 7.5px);
  margin-left: auto;
  pointer-events: auto;
}
.ot-ix-seg { display: flex; gap: var(--spacing--tiny, 7.5px); }

.ot-ix-btn,
.ot-ix-range {
  height: var(--spacing--medium, 45px);
  padding: 0 15px;
  border: 0;
  border-radius: 30px;
  display: flex;
  align-items: center;
  gap: 10px;
  font: inherit;
  font-size: var(--type--0-833, .833rem);
  line-height: 1;
  white-space: nowrap;
}
/* Actions, and the chosen option of a set: filled, as the nav pills */
.ot-ix .ot-ix-btn,
.ot-ix .ot-ix-btn[aria-pressed="true"] {
  background-color: var(--colour--gray, #f4f4f4);
  color: var(--colour--black, #121212);
  cursor: pointer;
}
/* The other options of a set, and the slider: outlined on the stage */
.ot-ix .ot-ix-btn[aria-pressed="false"],
.ot-ix .ot-ix-range {
  background-color: transparent;
  color: var(--colour--white, #fbfbfb);
  box-shadow: inset 0 0 0 1px rgba(251, 251, 251, .24);
}
.ot-ix .ot-ix-btn:hover { outline: 1px solid var(--colour--black, #121212); outline-offset: -1px; }
.ot-ix .ot-ix-btn[aria-pressed="false"]:hover { outline: 0; box-shadow: inset 0 0 0 1px var(--colour--white, #fbfbfb); }
.ot-ix .ot-ix-btn:focus-visible,
.ot-ix .ot-ix-range:focus-within { outline: 2px solid var(--colour--white, #fbfbfb); outline-offset: 2px; }

.ot-ix-range input {
  -webkit-appearance: none;
  appearance: none;
  width: 96px;
  height: 20px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.ot-ix-range input:focus-visible { outline: 0; }
.ot-ix-range input::-webkit-slider-runnable-track { height: 1px; background: rgba(251, 251, 251, .4); }
.ot-ix-range input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; margin-top: -7px; border: 0; border-radius: 50%; background: var(--colour--gray, #f4f4f4); }
.ot-ix-range input::-moz-range-track { height: 1px; background: rgba(251, 251, 251, .4); }
.ot-ix-range input::-moz-range-thumb { width: 15px; height: 15px; border: 0; border-radius: 50%; background: var(--colour--gray, #f4f4f4); }

/* Phones and small pieces: no hint (touch says itself), no fine-tuning sliders, controls centred */
@container (max-width: 560px) {
  .ot-ix-hint, .ot-ix-range { display: none; }
  .ot-ix-controls { margin: 0 auto; justify-content: center; }
}