/* Layout classes own grid; Tachyons owns skin (see global CSS rules). */
.views-grid    { display: grid; grid-template-columns: 1fr 1fr;
                 gap: 1rem; max-width: 56rem; margin: 0 auto; }
.controls-grid { display: grid; gap: 0.5rem; justify-items: center; }
#scrub         { width: min(480px, 92%); height: 2.2rem; }
/* In tight flex rows the slider gives, not the text slots: zone label
   gets flex-shrink:0 below; the slider absorbs all the squeeze. */
#plane         { flex: 1 1 90px; min-width: 80px; width: auto; vertical-align: middle; }

/* Chip-row: play button + freeze checkboxes as wrapped pill row. */
.chip-row      { display: flex; gap: 0.4rem; justify-content: center;
                 flex-wrap: wrap; align-items: center; }
#freezes       { display: contents; }
#freezes label { border: 1px solid #ccc; border-radius: 999px;
                 padding: 0.15rem 0.7rem; white-space: nowrap; }
#freezes label:has(input:checked) { background: #fde8e6; border-color: #d64541; }
#freezes input { accent-color: #d64541; }
#play          { border-radius: 999px; padding: 0.15rem 0.7rem; }

/* Plane row: fixed-width zone label with forced line break. */
#plane-wrap    { display: flex; gap: 0.5rem; justify-content: center;
                 align-items: center; }
#plane-label   { display: inline-block; width: 17ch; text-align: left;
                 min-height: 2.8em; flex-shrink: 0; }

/* Figure captions: compact spacing. */
.views-grid figcaption { margin-top: 0.1rem; }

/* Live text reserves: fixed heights prevent reflow of phase annotation. */
#readout       { min-height: 1.4em; font-size: 0.875rem; margin-bottom: 0; }
#readout2      { min-height: 1.4em; font-size: 0.875rem; margin-top: 0.15rem; }
/* Annotation reserve must fit the longest phase text (140-180 degrees),
   which wraps to 4 lines at desktop measure width. 6em = 96px at f5 font. */
#annotation    { min-height: 6em; }

/* Portrait phones: tighten gaps, hide subtitle, adjust text reserves, squeeze header. */
@media (max-width: 40em) {
  /* Override Tachyons utilities (.pa3, .f3) with compound selectors to raise
     specificity (0,1,1) above the utility classes (0,1,0). Element selectors
     alone (0,0,1) lose to utility classes. */
  main.pa3     { padding-top: 0.4rem; }
  h1.f3        { font-size: 1.2rem; margin-bottom: 0.1rem; }
  .views-grid  { gap: 0.25rem; }
  .controls-grid { gap: 0.35rem; }
  main > h1 + p { display: none; }
  .views-grid figcaption { font-size: 0.7rem; }
  #readout     { min-height: 2.8em; }
  #annotation  { min-height: 6.5em; font-size: 0.85rem; }
}