/* Phase 4: production scheduling (public booking, plan notices) and the admin schedule and
   appointments. Status is never shown by color alone: every state also has an icon, a pattern
   or a text label. */

/* ---------- Public: schedule ---------- */
.sch .flow-head { margin-bottom: var(--s-5); }
.sch-sessions { display: flex; gap: var(--s-2); margin-bottom: var(--s-4); overflow-x: auto; scrollbar-width: none; }
.sch-sessions button { display: flex; align-items: center; gap: var(--s-2); min-height: 48px; padding: var(--s-2) var(--s-4) var(--s-2) var(--s-2); border: 1.5px solid var(--border); border-radius: var(--r-pill); background: var(--surface); text-align: left; font-size: var(--fs-sm); font-weight: var(--fw-semibold); white-space: nowrap; }
.sch-sessions small { display: block; font-size: var(--fs-cap); font-weight: var(--fw-medium); color: var(--text-3); }
.sch-sessions .pdot { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-3); color: var(--text-2); display: flex; align-items: center; justify-content: center; font-size: var(--fs-cap); flex: none; }
.sch-sessions .pdot .i { width: 14px; height: 14px; stroke-width: 2.6; }
.sch-sessions .is-cur button { border-color: var(--accent-bright); box-shadow: inset 0 0 0 1px var(--accent-bright); }
.sch-sessions .is-cur .pdot { background: var(--accent); color: #fff; }
.sch-sessions .is-done .pdot { background: var(--accent-tint); color: var(--accent); }
.sch-summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); padding: var(--s-4) var(--s-5); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border); margin-bottom: var(--s-4); }
.sch-summary .eyebrow { margin-bottom: var(--s-2); }
.sch-services { display: grid; gap: var(--s-2); }
.sch-services li { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--fs-sm); }
.sch-services .i { color: var(--accent); margin-top: 2px; flex: none; }
.sch-services b { font-weight: var(--fw-semibold); }
.sch-services small { display: block; font-size: var(--fs-xs); color: var(--text-2); }
.sch-duration { text-align: right; flex: none; }
.sch-duration small { display: block; font-size: var(--fs-cap); color: var(--text-3); text-transform: uppercase; letter-spacing: var(--track-caps); font-weight: var(--fw-semibold); }
.sch-duration b { font-size: 22px; font-weight: var(--fw-bold); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.sch-banner { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-4); border-radius: var(--r-lg); margin-bottom: var(--s-4); background: var(--accent-tint); border: 1px solid transparent; animation: om-enter var(--t-base) var(--ease); }
.sch-banner > .i { flex: none; margin-top: 2px; color: var(--accent); }
.sch-banner b { display: block; font-size: var(--fs-sm); }
.sch-banner p { font-size: var(--fs-xs); color: var(--text-2); margin: 2px 0 0; }
.sch-banner .btn { margin-top: var(--s-3); }
.sch-banner.is-warn { background: #FFF7E8; border-color: #F2D49B; }
.sch-banner.is-warn > .i { color: #9A5B00; }
.sch-banner.is-error { background: var(--danger-tint); }
.sch-banner.is-error > .i, .sch-banner.is-error b { color: var(--danger); }
.sch-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-areas: "date review" "time review"; gap: var(--s-4) var(--s-6); align-items: start; }
.sch-date { grid-area: date; }
.sch-time { grid-area: time; }
.sch-review { grid-area: review; }
.sch-num { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); }
.sch-num span { width: 22px; height: 22px; border-radius: 50%; background: var(--bg-3); color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; letter-spacing: 0; }
.sch-step.is-current .sch-num span { background: var(--accent); color: #fff; }
.sch-step-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.sch-step-head .sch-num { margin-bottom: 0; }
.sch-review .sch-step-head { margin-bottom: calc(var(--s-2) * -1); }
.cal .d.is-off { color: var(--n-300); }
.sch-cal button.d:focus-visible { box-shadow: var(--focus-ring); }
.sch-skel-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.sch-skel-grid .skel { height: 40px; border-radius: 50%; }
.sch-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: var(--s-2); }
.sch-time-btn { min-height: 52px; border-radius: var(--r-md); border: 1.5px solid var(--border-strong); background: var(--surface); font-size: var(--fs-body); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
.sch-time-btn:hover { border-color: var(--accent-bright); }
.sch-time-btn[aria-checked="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.sch-time-btn[aria-checked="true"]::before { content: "✓ "; }
.sch-when { display: grid; gap: 2px; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--bg-2); }
.sch-when b { font-size: var(--fs-body); }
.sch-when span { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.sch-when small { font-size: var(--fs-xs); color: var(--text-2); }
.sch-loc { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-sm); }
.sch-loc .badge { flex: none; }
.sch-held { padding: var(--s-6); display: grid; gap: var(--s-4); max-width: 720px; }
.sch-held-top { display: flex; align-items: center; gap: var(--s-4); }
.done-check.sm { width: 44px; height: 44px; box-shadow: 0 0 0 6px var(--accent-tint); flex: none; }
.done-check.sm .i { width: 22px; height: 22px; }
.hold-left { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: var(--fs-xs); color: var(--text-2); font-variant-numeric: tabular-nums; }
.hold-left::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px dashed var(--accent); }
.sch-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.sch-mcta .mcta-row .hold-left { margin-top: 0; }
.sch-mcta .btn-ghost { margin-top: var(--s-1); }

/* ---------- Public: plan notices, checkout appointment ---------- */
.pnote { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--accent-tint); font-size: var(--fs-xs); }
.pnote > .i { flex: none; margin-top: 2px; color: var(--accent); }
.pnote b { display: block; font-size: var(--fs-sm); }
.pnote span { display: block; color: var(--text-2); }
.pnote .btn-link { margin-top: 6px; }
.pnote.is-warn { background: #FFF7E8; }
.pnote.is-warn > .i { color: #9A5B00; }
.pnote.is-error { background: var(--danger-tint); }
.pnote.is-error > .i { color: var(--danger); }
.appt { display: grid; gap: var(--s-2); }
.appt .srow b { max-width: 60%; }

/* ---------- Admin: schedule ---------- */
.as-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s-5); align-items: start; }
.as-cal { padding: var(--s-4); display: grid; gap: var(--s-3); min-width: 0; }
.as-bar { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.as-nav { display: flex; gap: 4px; }
.as-range { font-size: var(--fs-body); font-weight: var(--fw-semibold); display: flex; align-items: center; gap: var(--s-2); margin-right: auto; }
.as-legend { display: flex; gap: var(--s-3); flex-wrap: wrap; font-size: var(--fs-cap); color: var(--text-2); }
.as-legend li { display: inline-flex; align-items: center; gap: 6px; }
.sw { display: inline-block; width: 14px; height: 10px; border-radius: 3px; flex: none; }
.sw-win { background: var(--accent-tint); box-shadow: inset 3px 0 0 var(--accent-bright); }
.sw-appt { background: var(--accent); }
.sw-held { background: var(--surface); border: 1.5px dashed var(--accent); }
.sw-block { background: repeating-linear-gradient(135deg, var(--n-300) 0 2px, var(--bg-3) 2px 5px); }
.as-empty { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--bg-2); font-size: var(--fs-xs); color: var(--text-2); }
.as-empty span { flex: 1; min-width: 180px; }
.as-view { transition: opacity var(--t-fast) var(--ease); }
.as-view.is-busy { opacity: 0.55; }

/* Week and day: a time grid. Availability is the tinted band, appointments sit on top. */
.tg { display: grid; grid-template-columns: 56px repeat(var(--cols), minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.tg-head, .tg-allday, .tg-body { display: contents; }
.tg-head > span, .tg-day { border-bottom: 1px solid var(--border); background: var(--bg-2); }
.tg-day { display: grid; justify-items: center; gap: 0; padding: 6px 0; border-left: 1px solid var(--border); }
.tg-day small { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; font-weight: var(--fw-semibold); }
.tg-day b { font-size: var(--fs-body); }
.tg-day:hover b { color: var(--accent); }
.tg-day.is-today b { background: var(--accent); color: #fff; border-radius: var(--r-pill); padding: 0 8px; }
.tg-allday > span { font-size: 10.5px; color: var(--text-3); padding: 6px; border-bottom: 1px solid var(--border); }
.tg-allday > div { border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 4px; display: grid; gap: 4px; }
.tg-hours { display: grid; grid-auto-rows: var(--hour); }
.tg-hours span { font-size: 10.5px; color: var(--text-3); text-align: right; padding: 2px 6px 0 0; border-top: 1px solid var(--border); }
.tg-hours span:first-child { border-top: 0; }
.tg-col { position: relative; border-left: 1px solid var(--border); background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--hour) - 1px), var(--border) calc(var(--hour) - 1px) var(--hour)); }
.tg-col.is-today { background-color: rgba(10, 147, 245, 0.03); }
.tg-col.is-blocked { background-color: var(--bg-2); }
.ev { position: absolute; left: 2px; right: 2px; display: grid; align-content: start; gap: 1px; padding: 3px 6px; border-radius: 6px; font-size: 11px; line-height: 1.25; text-align: left; overflow: hidden; }
.ev span { display: flex; align-items: center; gap: 4px; font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev small { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev .i { width: 11px; height: 11px; flex: none; stroke-width: 2.4; }
.ev-win { z-index: 1; background: var(--accent-tint); color: var(--accent); box-shadow: inset 3px 0 0 var(--accent-bright); }
.ev-win small { color: var(--text-2); }
.ev-win:hover { background: var(--accent-tint-2); }
.ev-block { z-index: 2; color: var(--text-2); background: repeating-linear-gradient(135deg, var(--n-200) 0 3px, var(--bg-2) 3px 8px); border: 1px solid var(--border-strong); }
.ev-appt { z-index: 3; left: 8px; background: var(--accent); color: #fff; box-shadow: var(--sh-1); }
.ev-appt small { color: rgba(255, 255, 255, 0.85); }
.ev-appt:hover { background: var(--accent-hover); }
.ev-held { background: var(--surface); color: var(--accent); border: 1.5px dashed var(--accent); box-shadow: none; }
.ev-held small { color: var(--text-2); }
.ev-held:hover { background: var(--accent-tint); }
.ev-completed { background: var(--n-500); }
.ev-chip { display: flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 6px; font-size: 11px; font-weight: var(--fw-semibold); text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ev-chip .i { width: 11px; height: 11px; flex: none; }
.ev-chip.ev-block { position: static; }

/* Month: a grid of days with chips. */
.mg { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.mg-dow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--bg-2); border-bottom: 1px solid var(--border); }
.mg-dow span { padding: 6px 8px; font-size: 11px; font-weight: var(--fw-semibold); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; }
.mg-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mg-cell { min-height: 104px; display: flex; flex-direction: column; align-items: stretch; gap: 3px; padding: 6px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); text-align: left; min-width: 0; }
.mg-cell:nth-child(7n) { border-right: 0; }
.mg-cell:hover { background: var(--n-25); }
.mg-cell > b { font-size: var(--fs-xs); font-weight: var(--fw-semibold); align-self: flex-start; min-width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-pill); padding: 0 5px; }
.mg-cell.is-today > b { background: var(--accent); color: #fff; }
.mg-cell.is-out { background: var(--bg-2); }
.mg-cell.is-out > b { color: var(--text-3); }
.mg-chips { display: grid; gap: 2px; min-width: 0; }
.chip { display: flex; align-items: center; gap: 3px; padding: 1px 5px; border-radius: 5px; font-size: 10.5px; font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.chip .i { width: 10px; height: 10px; flex: none; stroke-width: 2.6; }
.chip-win { background: var(--accent-tint); color: var(--accent); }
.chip-block { background: repeating-linear-gradient(135deg, var(--n-200) 0 3px, var(--bg-2) 3px 7px); color: var(--text-2); }
.chip-appt { background: var(--accent); color: #fff; }
.chip-held { background: var(--surface); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.chip-completed { background: var(--n-500); }
.chip-more { color: var(--text-3); font-weight: var(--fw-medium); }
.mg-dots { display: none; gap: 3px; }
.mg-dots .sw { width: 8px; height: 8px; border-radius: 50%; }

/* Agenda: week and month on phones. */
.agenda { display: grid; gap: var(--s-4); }
.ag-day h3 { font-size: var(--fs-sm); font-weight: var(--fw-semibold); display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
.ag-day .help { padding: 0 0 var(--s-2); }
.ag-row { display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 52px; padding: var(--s-2) var(--s-3); border-radius: var(--r-md); text-align: left; margin-bottom: 4px; }
.ag-row > .i { flex: none; }
.ag-row span { flex: 1; min-width: 0; }
.ag-row b { display: block; font-size: var(--fs-sm); }
.ag-row small { display: block; font-size: var(--fs-xs); color: var(--text-2); }
.ag-row .ag-go { flex: none; font-size: var(--fs-xs); color: var(--accent); font-weight: var(--fw-semibold); }
.ag-win { background: var(--accent-tint); box-shadow: inset 3px 0 0 var(--accent-bright); }
.ag-win > .i { color: var(--accent); }
.ag-block { background: repeating-linear-gradient(135deg, var(--n-200) 0 3px, var(--bg-2) 3px 8px); }
.ag-appt { background: var(--surface); border: 1px solid var(--border); }
.ag-appt > .i { color: var(--accent); }
.ag-held { border: 1.5px dashed var(--accent); }

/* Side panels */
.as-side { display: grid; gap: var(--s-4); position: sticky; top: 84px; }
.as-panel { padding: var(--s-4); display: grid; gap: var(--s-3); }
.as-panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.as-panel h2 { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.as-list { display: grid; }
.as-list li + li { border-top: 1px solid var(--border); }
.as-li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); width: 100%; padding: var(--s-2) 0; text-align: left; }
.as-li > span:first-child { min-width: 0; }
.as-li b { display: block; font-size: var(--fs-xs); }
.as-li small { display: block; font-size: var(--fs-cap); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; }
button.as-li:hover b { color: var(--accent); }
.as-li .row-actions .btn-icon { width: 30px; min-height: 30px; }

/* Appointment status: icon + word, with a shape per state. */
.ap-st { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: var(--fw-semibold); white-space: nowrap; flex: none; }
.ap-st .i { width: 12px; height: 12px; stroke-width: 2.4; }
.ap-st-held { color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); background: var(--surface); border: 0; outline: 1.5px dashed transparent; }
.ap-st-scheduled { background: var(--accent-tint); color: var(--accent); }
.ap-st-confirmed { background: var(--accent); color: #fff; }
.ap-st-completed { background: var(--bg-3); color: var(--text); }
.ap-st-cancelled { background: var(--danger-tint); color: var(--danger); }
.ap-st-rescheduled { background: var(--bg-3); color: var(--text-2); }
.ad-ph h1 .ap-st { font-family: var(--font); letter-spacing: 0; }

/* Modals */
.as-modal { width: min(560px, calc(100% - 32px)); max-height: calc(100% - 48px); overflow-y: auto; }
.as-modal-lg { width: min(680px, calc(100% - 32px)); }
.as-modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.as-modal .ad-actions { justify-content: flex-end; }
.as-spacer { flex: 1; }
.as-danger { color: var(--danger); }
.as-danger:hover { background: var(--danger-tint); color: var(--danger); }
.as-conflict { display: grid; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: #FFF7E8; border: 1px solid #F2D49B; font-size: var(--fs-xs); }
.as-conflict b { display: flex; gap: var(--s-2); align-items: flex-start; color: #7A4800; }
.as-conflict b .i { flex: none; margin-top: 1px; }
.as-conflict li { display: flex; justify-content: space-between; gap: var(--s-3); padding: 4px 0; border-top: 1px solid #F2D49B; }
.as-note { display: flex; gap: var(--s-2); align-items: flex-start; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--accent-tint); font-size: var(--fs-sm); }
.as-note > .i { flex: none; margin-top: 3px; color: var(--accent); }
.as-note.is-warn { background: #FFF7E8; }
.as-note.is-warn > .i { color: #9A5B00; }
.check { display: flex; align-items: center; gap: var(--s-2); min-height: 36px; font-size: var(--fs-sm); }
.check input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }

/* Admin: appointments */
.ap-tbl { min-width: 760px; }
.ap-svcs { max-width: 280px; font-size: var(--fs-xs); }
.ap-card { text-align: left; }
.ap-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s-5); align-items: start; }
.ap-main, .ap-side { display: grid; gap: var(--s-4); }
.ap-sec { padding: var(--s-5); display: grid; gap: var(--s-3); }
.ap-sec h2 { font-size: var(--fs-body); font-weight: var(--fw-semibold); }
.ap-kv { font-size: var(--fs-sm); }
.ap-kv dd small { display: block; font-size: var(--fs-xs); color: var(--text-2); font-weight: var(--fw-regular); }
.ap-svc { display: grid; }
.ap-svc li { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) 0; border-top: 1px solid var(--border); font-size: var(--fs-sm); }
.ap-svc li:first-child { border-top: 0; }
.ap-svc li > span:nth-child(2) { flex: 1; }
.ap-svc .i { color: var(--accent); }
.ap-svc small { display: block; font-size: var(--fs-xs); color: var(--text-2); }
.ap-hist { display: grid; gap: 0; }
.ap-hist li { display: grid; grid-template-columns: 16px 1fr; gap: var(--s-3); padding-bottom: var(--s-3); position: relative; }
.ap-hist li:not(:last-child)::before { content: ""; position: absolute; left: 7px; top: 14px; bottom: 0; width: 2px; background: var(--border); }
.ap-hist .dot { width: 12px; height: 12px; margin: 3px 2px 0; border-radius: 50%; border: 2px solid var(--accent); background: var(--surface); }
.ap-hist b { display: block; font-size: var(--fs-sm); }
.ap-hist span { display: block; font-size: var(--fs-xs); color: var(--text); }
.ap-hist small { display: block; font-size: var(--fs-cap); color: var(--text-3); }
.ap-prev { display: grid; gap: 4px; justify-items: start; padding-top: var(--s-2); border-top: 1px solid var(--border); }

/* Admin: settings sections and inputs with units */
.st-sec > div:first-child { display: grid; gap: 4px; }
.st-sec h2 { font-size: var(--fs-h3); }
.unit-in { display: flex; align-items: center; gap: var(--s-2); }
.unit-in .input { max-width: 120px; }
.unit-in span { font-size: var(--fs-sm); color: var(--text-2); }
.qo-row.dur3 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }

@container dev (max-width: 1100px) {
  .sch-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s-4); }
  .as-grid { grid-template-columns: minmax(0, 1fr); }
  .as-side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-grid { grid-template-columns: minmax(0, 1fr); }
}
@container dev (max-width: 700px) {
  /* One step at a time; the sticky bar carries the step's action. */
  .sch-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
  .sch-grid > .sch-step { grid-area: auto; }
  .sch-grid[data-step="date"] .sch-time, .sch-grid[data-step="date"] .sch-review,
  .sch-grid[data-step="time"] .sch-date, .sch-grid[data-step="time"] .sch-review,
  .sch-grid[data-step="review"] .sch-date, .sch-grid[data-step="review"] .sch-time { display: none; }
  .sch-summary { padding: var(--s-3) var(--s-4); gap: var(--s-3); }
  .sch-duration b { font-size: 18px; }
  .sch-times { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sch-time-btn { min-height: 56px; }
  .sch-held { padding: var(--s-4); }
  .sch-held .sch-actions { display: none; }
  .cal .d { height: 42px; }
  .as-side { grid-template-columns: minmax(0, 1fr); }
  .as-bar { gap: var(--s-2); }
  .as-range { order: -1; width: 100%; }
  .as-legend { width: 100%; }
  .mg-cell { min-height: 64px; padding: 4px; }
  .mg-chips { display: none; }
  .mg-dots { display: flex; }
  .as-modal { width: calc(100% - 16px); max-height: calc(100% - 16px); padding: var(--s-5) var(--s-4); }
  .as-conflict li { flex-direction: column; gap: 0; }
  .ap-sec { padding: var(--s-4); }
  .qo-row.dur3 { grid-template-columns: minmax(0, 1fr) 84px 84px; }
}