/* Period strip (last 6 periods as mini bars + "Older…" month picker). OWNER: pace worker (period strip).
   Lives in the top bar's [data-slot=periods]. Fixed geometry: 6 x 47px + 54px "Older…" = 336px (+ 8px margin). */
.slot-periods { --month-min: 47px; width: 344px; position: relative; display: flex; align-items: center; }
.months { display: flex; gap: 0; position: relative; touch-action: pan-y; user-select: none; margin-left: 8px; flex: none; }
.month {
  position: relative;
  display: grid; grid-template-rows: 16px 16px; justify-items: center; align-items: end;
  padding: 8px 0; width: 47px; height: 52px;
  font: 500 var(--t-xs) var(--f-mono); color: var(--grey-t);
  transition: color .3s var(--ease);
}
.month:hover { color: var(--ink); }
.month[aria-checked="true"] { color: var(--ink); }
.month:disabled { cursor: default; color: var(--hair); }
.month .mini { width: 3px; height: 16px; background: var(--mute); display: block; transform-origin: 50% 100%; transform: scaleY(var(--mh, .125)); transition: transform .6s var(--expo), background .3s; }
.month[aria-checked="true"] .mini { background: var(--ink); }
.month .mini.over { background: var(--red); }
.month .ml { line-height: 16px; height: 16px; margin-top: 4px; white-space: nowrap; }
.months-ind {
  position: absolute; bottom: 0; left: 0; width: 1px; height: 2px; background: var(--red);
  transform-origin: 0 50%;
  transition: transform .55s var(--expo), opacity .3s;
  pointer-events: none; opacity: 0;
}
html[data-motion="off"] .months-ind, html[data-motion="off"] .month .mini { transition: none; }

/* "Older…": same box as a period, the label sits on the label row */
.month.older { width: 54px; flex: none; grid-template-rows: 16px 16px; }
.month.older .ml { grid-row: 2; }
.month.older.on { color: var(--ink); }
.month.older.on::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; background: var(--red); }
.month.older[aria-expanded="true"] { color: var(--ink); }

/* month/year picker (Relay controls.ts behaviour, Pulse look). Absolutely placed: opening it moves nothing. */
.month-picker {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 40;
  width: 236px; padding: 12px;
  background: var(--paper); border: 1px solid var(--ink); box-shadow: 0 10px 30px rgba(13, 13, 13, .12);
  font: 400 var(--t-xs) var(--f-mono); color: var(--ink);
}
.month-picker[hidden] { display: none; }
.picker-title { margin: 0 0 8px; height: 16px; line-height: 16px; color: var(--grey-t); }
.month-year { display: grid; grid-template-columns: 32px 1fr 32px; align-items: center; gap: 8px; height: 32px; }
.year-step { height: 32px; font-size: 18px; line-height: 1; border: 1px solid var(--hair); border-radius: 16px; }
.year-step:hover { border-color: var(--ink); }
.year-field { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--grey-t); }
.picker-year {
  width: 7ch; height: 28px; border: 0; border-bottom: 1px solid var(--ink); background: transparent;
  font: 500 var(--t-sm) var(--f-mono); color: var(--ink); text-align: center; border-radius: 0; -moz-appearance: textfield; appearance: textfield;
}
.picker-year::-webkit-outer-spin-button, .picker-year::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.month-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 12px; }
.month-option { height: 32px; border-radius: 16px; border: 1px solid transparent; font: 500 var(--t-xs) var(--f-mono); }
.month-option:hover { border-color: var(--hair); }
.month-option[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.month[hidden] { display: none; }

/* Narrow bars: the slot is flexible (viewport-dependent only). periodstrip.ts shows floor(room / --month-min) periods
   (at most 6) and the visible ones share the room equally; "Older…" keeps its fixed box. */
@media (max-width: 760px) {
  .slot-periods { --month-min: 40px; width: auto; }
  .months { margin: 0 0 0 -6px; width: auto; flex: 1 1 0; min-width: 0; }
  .month { width: auto; min-width: 0; flex: 1 1 0; padding: 8px 0; }
  .month.older { width: 56px; flex: none; }
}