/* Two readable records per row when their actual container has room. */
:root[data-theme] body #app .record-grid-host{container-type:inline-size}
:root[data-theme] body #app .record-grid{display:grid!important;grid-template-columns:minmax(0,1fr);gap:18px;align-items:stretch;min-width:0;margin-block:16px}
@container (min-width:640px){:root[data-theme] body #app .record-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
:root[data-theme] body #app .record-grid>*{min-width:0;max-width:100%;width:auto;box-sizing:border-box;margin:0!important;overflow-wrap:anywhere}
:root[data-theme] body #app .record-grid>[hidden]{display:none!important}
:root[data-theme] body #app .record-grid :is(.order-top,.order-actions,.hero-actions,.bike-facts,.review-top,.review-meta){min-width:0;flex-wrap:wrap;gap:10px}
:root[data-theme] body #app .record-grid .order-top{align-items:flex-start}
:root[data-theme] body #app .record-grid :is(b,h3,p,small,span){max-width:100%;white-space:normal;overflow-wrap:anywhere;min-width:0}
:root[data-theme] body #app .record-grid :is(a.button,button,.secondary){max-width:100%;white-space:normal;overflow-wrap:anywhere;min-width:0;line-height:1.8}
:root[data-theme] body #app .record-grid .history-bike{flex-direction:column;align-items:stretch;justify-content:space-between;padding:20px;gap:16px}
:root[data-theme] body #app .record-grid .history-bike>span{align-self:flex-end;white-space:normal}
:root[data-theme] body #app .record-grid .history-bike .bike-facts{display:flex;flex-direction:column;align-items:flex-start}
:root[data-theme] body #app .record-grid .finance-payment-item{display:flex;flex-direction:column;align-items:stretch;gap:16px}
:root[data-theme] body #app .record-grid .finance-payment-item>.button{align-self:flex-start}
:root[data-theme] body #app .record-grid .order-actions{display:flex;align-items:stretch}
:root[data-theme] body #app .record-grid .order-actions>*{flex:1 1 160px}
:root[data-theme] body #app .record-grid .mobile-order-more{flex:1 1 100%;min-width:0}
/* The section title already identifies the account; don't repeat role badges. */
:root[data-theme] body #app .sidebar>h3,:root[data-theme] body #app .panel-toolbar{display:none!important}
@media(max-width:1023px){
 :root[data-theme] body:not(.gateway-view)>header{grid-template-columns:minmax(0,1fr) 44px!important}
 :root[data-theme] body>header .header-account-actions,:root[data-theme] body>header .header-account-actions>.button,:root[data-theme] body>header .header-mobile-toggle{display:none!important}
 :root[data-theme] body>header .display-preference{grid-column:2!important}
 :root[data-theme] body #app .workspace{grid-template-columns:minmax(0,1fr)!important}
 :root[data-theme] body #app .sidebar,:root[data-theme] body #app .panel-nav-toggle{display:none!important}
 /* Bottom account destination opens the complete role-specific account hub. */
 :root[data-theme] body.account-home #app .sidebar{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:24px;padding:12px;position:static;width:100%;max-height:none;overflow:visible;box-sizing:border-box}
 :root[data-theme] body.account-home #app .sidebar a{display:flex;align-items:center;gap:8px;min-height:56px;margin:0;padding:10px;min-width:0;font-size:14px;white-space:normal;overflow-wrap:anywhere;border:1px solid var(--ui-line);background:var(--ui-raised);line-height:1.8}
 :root[data-theme] body.account-home #app .sidebar .nav-icon{flex:0 0 22px;width:22px;height:22px}
 :root[data-theme] body.account-home #app .sidebar .mobile-logout{display:block;grid-column:1/-1;width:100%;min-height:48px;margin-top:8px;color:var(--ui-negative)!important}
 :root[data-theme] body.account-home #app .sidebar a[href='#/']{display:none!important}
}
@media(max-width:360px){:root[data-theme] body.account-home #app .sidebar{grid-template-columns:minmax(0,1fr)}}
:root[data-theme] body #app .record-only-host{display:block!important}
:root[data-theme] body #app .record-grid-host[hidden]{display:none!important}
:root[data-theme] body #app .collection-duplicate-title,:root[data-theme] body #app .collection-duplicate-heading{display:none!important}
@media(max-width:1023px){
 :root[data-theme] body.account-home #app .role-shortcuts,:root[data-theme] body.account-home #app .sidebar a[aria-current=page]{display:none!important}
}
/* Stretch the record, then spend remaining row height before its action area.
   Expanded offers/documents remain after their controls in normal DOM order. */
:root[data-theme] body #app .record-grid>:is(.order,.history-entry,.finance-payment-item,.review-moderation){display:flex;flex-direction:column;align-items:stretch}
:root[data-theme] body #app .record-grid>:is(.order,.history-entry,.review-moderation)>.order-actions{margin-top:auto!important;padding-top:18px}
:root[data-theme] body #app .record-grid>:is(.order,.history-entry,.finance-payment-item,.review-moderation)>:is(a.button,a.link,button):last-of-type{margin-top:auto!important;align-self:stretch}
:root[data-theme] body #app .record-grid>.actual-order>.order-offers:empty{display:none}
:root[data-theme] body #app .record-grid>.history-bike>span{margin-top:auto;padding-top:16px}
:root[data-theme] body #app .record-grid>.place-numbered{display:flex;flex-direction:column}
:root[data-theme] body #app .record-grid>.place-numbered>.place-card{display:flex;flex-direction:column;flex:1;min-width:0}
:root[data-theme] body #app .record-grid>.place-numbered>.place-card>.place-card-actions{margin-top:auto;padding-top:16px}