/*
 * gml-ui.css: player control styles.
 *
 * Set --ink, --paper, --mute and --rule on an ancestor to match the page theme.
 */

.gml-transport button,
.gml-switches button {
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  line-height: normal;
  padding: 5px 9px;
  background: var(--paper, #fff);
  color: var(--mute, #6b6b6b);
  border: 1px solid var(--rule, #d9d9d9);
  border-radius: 4px;
  cursor: pointer;
}

/* Larger switches make the main controls easier to reach. */
.gml-switches button {
  min-height: 30px;
  padding: 7px 12px;
  font-size: 11.5px;
}
.gml-transport button:hover:not(:disabled),
.gml-switches button:hover:not(:disabled) { border-color: var(--ink, #000); color: var(--ink, #000); }
.gml-transport button:disabled,
.gml-switches button:disabled { opacity: 0.4; cursor: default; }

/* --- transport --------------------------------------------------------- */

.gml-transport {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  container-type: inline-size;
}

.gml-transport button { min-width: 62px; flex: 0 0 auto; }

/* The button and its SVG both have the public class "play". Only the
   button gets the minimum height; applying it to the SVG made Pause shorter. */
.gml-transport button.play { display: grid; place-items: center; min-height: 25px; }
.gml-transport button.play svg { grid-area: 1 / 1; width: 12px; height: 12px; }
.gml-transport button.play .pause,
.gml-transport button.play[data-playing] .play { visibility: hidden; }
.gml-transport button.play[data-playing] .pause { visibility: visible; }

.gml-transport .clock {
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--mute, #6b6b6b);
  white-space: nowrap;
}

/* Reserve space for the full duration and every rate.
   Hide the sizing copies from view and screen readers. */
.gml-transport .clock,
.gml-transport .rate { display: grid; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.gml-transport .clock > span,
.gml-transport .rate > span { grid-area: 1 / 1; }
.gml-transport .clock > [aria-hidden="true"],
.gml-transport .rate > [aria-hidden="true"] { visibility: hidden; }

.gml-transport .timeline { position: relative; flex: 1 1 auto; min-width: 0; height: 20px; }
.gml-transport .rail,
.gml-transport .fill { position: absolute; top: 9px; height: 2px; }
.gml-transport .rail { left: 0; right: 0; background: var(--rule, #d9d9d9); }
.gml-transport .fill { left: 0; width: 0; background: var(--ink, #000); }
.gml-transport .ticks { position: absolute; inset: 0; pointer-events: none; }
.gml-transport .ticks i {
  position: absolute; top: 4px; width: 1px; height: 12px;
  background: var(--ink, #000); opacity: 0.45;
}

.gml-transport input[type="range"] {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  -webkit-appearance: none; appearance: none; background: none; cursor: pointer;
}
.gml-transport input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--ink, #000); border: 2px solid var(--paper, #fff); cursor: grab;
}
.gml-transport input[type="range"]::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--ink, #000); border: 2px solid var(--paper, #fff); cursor: grab;
}
.gml-transport input[type="range"]::-moz-range-track { background: none; }

/* Give the timeline its own row in narrow hosts so it stays easy to scrub. */
@container (max-width: 480px) {
  .gml-transport .timeline { order: -1; flex: 1 0 100%; }
}

/* --- switches ---------------------------------------------------------- */

.gml-switches { display: grid; gap: 8px; }
/* A renderer without options must not leave an empty settings panel. */
.gml-switches:empty { display: none; }
/* 70px is INK MODE on one line, the widest of the three labels. */
.gml-switches .row { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 12px; align-items: start; }
.gml-switches .label {
  padding-top: 6px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute, #6b6b6b);
}
.gml-switches .set { display: flex; flex-wrap: wrap; gap: 8px 6px; }

/* :not(:disabled) is for specificity, not state. Without it :hover wins
   and a pressed button under the cursor goes black on black. */
.gml-switches button[aria-pressed="true"]:not(:disabled) {
  background: var(--ink, #000); border-color: var(--ink, #000); color: var(--paper, #fff);
}

/* The filled state marks the selected mode without joining the buttons. */
.gml-switches .segmented { gap: 8px 6px; }

/* Shared cells reserve the longest description's wrapped height without clipping. */
.gml-switches .about {
  margin: 2px 0 0;
  display: grid;
  min-height: 2.6em;
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--mute, #6b6b6b);
}
.gml-switches .about > span { grid-area: 1 / 1; min-width: 0; overflow-wrap: anywhere; }
.gml-switches .about > [aria-hidden="true"] { visibility: hidden; }