/* Reuse the support list's surfaces and typography for order navigation. */
.order-topic{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto auto 18px;gap:18px;padding:22px;min-height:104px}
.order-topic .support-topic-copy b{font-size:14px}
.order-topic .order-topic-items{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.order-topic .order-topic-total{font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.3px}
.order-topic>.state-badge{white-space:normal;max-width:150px;line-height:1.5}
.order-topic>time{line-height:1.7;text-align:right}
.order-topic:focus-visible{outline:2px solid var(--accent-text);outline-offset:4px}
.order-detail{margin-top:22px}
@media(max-width:1150px){
 .order-topic{grid-template-columns:44px minmax(0,1fr) auto 18px;gap:10px 16px}
 .order-topic>.support-topic-icon{grid-column:1;grid-row:1/3}
 .order-topic>.support-topic-copy{grid-column:2;grid-row:1/3}
 .order-topic>.order-topic-total{grid-column:3;grid-row:1;text-align:right}
 .order-topic>.state-badge{grid-column:3;grid-row:2;justify-self:end}
 .order-topic>time{grid-column:2;grid-row:3;text-align:left}
 .order-topic>svg:last-child{grid-column:4;grid-row:1/3}
}
@media(max-width:700px){
 .order-topic{grid-template-columns:36px minmax(0,1fr) auto;padding:16px;gap:10px 12px}
 .order-topic>.support-topic-icon{grid-row:1;align-self:start}
 .order-topic>.support-topic-copy{grid-column:2/-1;grid-row:1;min-width:0}
 .order-topic>.support-topic-copy b{font-size:13px}
 .order-topic .order-topic-items{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-clamp:2}
 .order-topic>.order-topic-total{grid-column:2;grid-row:2;text-align:left;font-size:16px}
 .order-topic>.state-badge{grid-column:3;grid-row:2;margin-left:0;max-width:125px;font-size:9px}
 .order-topic>time{grid-column:2/-1;grid-row:3;margin:0;text-align:left}
}