/* Pick a time (talk.html): steps, days, times, recap. */

.meter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.meter i { height: 8px; border-radius: 99px; background: var(--panel); border: 1px solid var(--line); }
.meter i.on { background: var(--sky); border-color: var(--sky); }
.tz-note { margin: 0 0 18px; }
.tz-247 { font-weight: 700; margin-top: -8px; }

.days { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 10px; }
.day { display: grid; justify-items: center; gap: 0; padding: 10px 4px; min-height: 84px; background: var(--surface); border: 2px solid var(--ink); border-radius: var(--r-sm); line-height: 1.15; }
.day .dw, .day .dm { font-weight: 700; font-size: .85rem; }
.day .dn { font-family: var(--display); font-weight: 700; font-size: 1.7rem; line-height: 1.1; }
.day:hover { background: var(--panel); }
.day[aria-pressed="true"] { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
.more-days { margin-top: 14px; }
.none { margin: 0; padding: 18px; border: 2px dashed var(--ink); border-radius: var(--r-sm); font-weight: 700; }
.slots-title { font-size: 1.25rem; margin: 26px 0 12px; }
.slot { display: grid; gap: 0; justify-items: center; align-content: center; min-height: 56px; padding: 6px 8px; background: var(--surface); border: 2px solid var(--ink); border-radius: 999px; font-weight: 700; line-height: 1.15; }
.slot .t { font-size: 1.05rem; }
.slot .eat { font-size: .82rem; font-weight: 400; }
.slot .z { font-weight: 400; font-size: .85rem; }
.slot:hover { background: var(--panel); }
.slot[aria-pressed="true"] { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }

/* Times grouped by part of the day */
.slot-grp { margin-top: 14px; }
.slot-grp-title { font-size: 1rem; margin: 0 0 8px; }
.slot-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }

fieldset.how { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.how legend { font-weight: 700; padding: 0; margin-bottom: 6px; }
.how-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pill { position: relative; }
.pill input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pill span { display: inline-flex; align-items: center; min-height: 48px; padding: .4rem 1.1rem; border: 2px solid var(--ink); border-radius: 999px; font-weight: 700; }
.pill input:checked + span { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
.pill input:focus-visible + span { outline: var(--focus); outline-offset: 3px; }

.recap { border-top: 2px solid var(--ink); margin-top: 14px; }
.recap div { display: grid; gap: 2px 18px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.recap dt { font-weight: 700; }
.recap dd { margin: 0; overflow-wrap: anywhere; }
@media (min-width: 640px) { .recap div { grid-template-columns: 7rem 1fr; } }
.done-when { font-family: var(--display); font-weight: 700; font-size: 1.5rem; line-height: 1.2; }