/* Component adaptations — production port selectors. v1.0.1
   Re-cut of the four deferred behaviours against your class names:
     dialog.modal (native <dialog> + ::backdrop) · .modal__actions · .toasts / .toast ·
     .tabs / .tab · .card (flat)
   Load AFTER adaptive.css. Do not also load components.zs.css.

   Native <dialog> note: there is no scrim element to flex, so the bottom sheet is done with
   the dialog's own margin box — margin-block-start:auto pins it to the bottom of the viewport,
   margin-inline/block-end:0 makes it full-bleed. Works for both modal and non-modal dialogs. */

/* Bottom sheet below 480 */
@media (max-width:479px){
dialog.modal{width:100%;max-width:100%;margin:auto 0 0;border-radius:var(--sheet-radius) var(--sheet-radius) 0 0;max-height:92dvh;border-bottom:0}
dialog.modal::backdrop{background:rgb(10 16 27 / .48)}
.modal__actions{flex-direction:column-reverse;padding-bottom:calc(var(--space-4) + env(safe-area-inset-bottom))}
.modal__actions > *{width:100%}
/* Toasts sit above the bottom bar and stop being a fixed 340px */
.toasts{inset-inline:var(--space-3);width:auto;inset-block-end:calc(var(--bottombar-h) + var(--space-3) + env(safe-area-inset-bottom))}
.toast{width:auto;max-width:100%}
}
/* Toast clearance also applies on the larger phone tier, where the bottom bar exists too */
@media (min-width:480px) and (max-width:767px){
.toasts{inset-block-end:calc(var(--bottombar-h) + var(--space-3) + env(safe-area-inset-bottom))}
.toast{width:auto;max-width:100%}
}
/* Tabs scroll instead of wrapping or overflowing */
@media (max-width:767px){
.tabs{overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap;scroll-snap-type:x proximity}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto;scroll-snap-align:start}
/* P2-TRP-06: the Today board's eight-column run grid becomes one column.
   Same intent as [data-stack-rows] for tables, done by hand because a row
   here is a button, not a <tr>. */
.board__head{display:none}
.board__row{grid-template-columns:1fr;gap:var(--space-1)}
/* Flat card: one padding property instead of head/body/foot */
.card{padding:var(--space-3)}
/* Toolbar rows: your .toolbar component class, blessed — same behaviour as the data-toolbar hook */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);min-width:0}
.toolbar > *{flex:1 1 auto;min-width:0}
}
/* Tooltips do not exist on touch */
@media (hover:none){.tooltip{display:none !important}}