/* Pilot is intentionally isolated: the host chooses where to render it. */ .sd-mobile-list-pilot { display: none; } .sd-mobile-list__hint { margin: 4px 0 8px; color: #64748b; font-size: 11px; line-height: 1.5; } @media (max-width: 767px) { .sd-mobile-list-pilot { display: block; box-sizing: border-box; width: 100%; color: #24344e; font-family: var(--sd-font, -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif); } .sd-mobile-list__head, .sd-mobile-daily__row { display: grid; grid-template-columns: .82fr .9fr 1.28fr; align-items: center; gap: 7px; } .sd-mobile-list__head { padding: 0 2px 6px; color: #71819a; font-size: 10px; } .sd-mobile-list__head span:not(:first-child), .sd-mobile-daily__row > span:not(:first-child) { text-align: right; } .sd-mobile-list__detail { border-top: 1px solid #edf1f6; } .sd-mobile-list__detail summary { list-style: none; cursor: pointer; min-height: 48px; } .sd-mobile-list__detail summary::-webkit-details-marker { display: none; } .sd-mobile-daily__row > span { display: flex; min-width: 0; align-items: baseline; justify-content: flex-end; gap: 3px; } .sd-mobile-daily__row > span:first-child { justify-content: flex-start; } .sd-mobile-daily__row strong { color: #1e3556; font-size: 13px; font-variant-numeric: tabular-nums; } .sd-mobile-daily__row small { color: #75859c; font-size: 9px; } .sd-mobile-list-pilot .is-zero { color: #94a3b8; } .sd-mobile-list__expanded { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 0 0 10px; color: #64748b; font-size: 11px; } .sd-mobile-list__expanded span:last-of-type { grid-column: 1 / -1; } .sd-mobile-list__expanded button { grid-column: 1 / -1; min-height: 44px; border: 1px solid #bfdbfe; border-radius: 8px; background: #eff6ff; color: #2563eb; font: inherit; font-weight: 700; } .sd-mobile-list__state { margin: 0; color: #64748b; font-size: 12px; text-align: center; } .sd-mobile-list__state.is-error { color: #b42318; } .sd-mobile-customer__controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .sd-mobile-customer__controls select, .sd-mobile-customer__controls input, .sd-mobile-customer__metric button { min-width: 0; min-height: 44px; border: 1px solid #d8e2ef; border-radius: 8px; background: #fff; color: #34445f; font: inherit; font-size: 12px; } .sd-mobile-customer__metric { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } .sd-mobile-customer__metric button.is-active { border-color: #2563eb; background: #eff6ff; color: #2563eb; font-weight: 700; } .sd-mobile-customer__controls > strong, .sd-mobile-customer__controls input { grid-column: 1 / -1; } .sd-mobile-customer__controls > strong { color: #1e3556; font-size: 12px; } .sd-mobile-customer__controls input { box-sizing: border-box; padding: 0 10px; } .sd-mobile-customer__detail summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; } .sd-mobile-customer__detail summary span { display: -webkit-box; overflow: hidden; color: #263650; font-size: 12px; font-weight: 650; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .sd-mobile-customer__detail summary strong { color: #1e3556; font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; } .sd-mobile-customer__trend { display: grid; gap: 4px; padding: 0 0 10px; } .sd-mobile-customer__trend > div { display: grid; grid-template-columns: 50px minmax(0, 1fr) 82px; align-items: center; gap: 6px; color: #71819a; font-size: 10px; } .sd-mobile-customer__trend i { display: block; height: 5px; min-width: 0; border-radius: 99px; background: #60a5fa; } .sd-mobile-customer__trend i.is-zero { width: 0 !important; } .sd-mobile-customer__trend strong { color: #51627b; font-size: 10px; font-variant-numeric: tabular-nums; text-align: right; } }