/* The phone half of the demo store: an iPhone-style app. Loaded after demo.css. */
.phones { background: var(--ground); padding: 32px 16px; }
.phones-wrap, .ip-wrap { display: flex; flex-wrap: wrap; gap: 32px; justify-content: center; align-items: center; }
.ip-cap { max-width: 320px; line-height: 1.55; color: var(--body); }
.ip-cap ul { margin: 12px 0 0; padding-left: 18px; }
.ip-cap li { margin-top: 6px; }
.ip-cap-t { font-family: var(--display); font-size: 30px; font-weight: 700; color: var(--ink); line-height: 1.1; margin-bottom: 10px; }

.ip-phone { width: 366px; max-width: 100%; background: #0B1626; border-radius: 52px; padding: 10px; box-shadow: 0 24px 48px rgba(15,30,51,.25); }
.ip-screen { position: relative; height: 740px; max-height: 86vh; min-height: 560px; border-radius: 42px; overflow: hidden; background: #F2F2F7; display: flex; flex-direction: column; color: #111; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif; font-size: 15px; }
.ip-screen button { font-family: inherit; }
.ip-status { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 14px 26px 4px; font-weight: 600; font-size: 14px; background: #F2F2F7; }
.ip-status-r { display: inline-flex; align-items: center; gap: 4px; }
.ip-status-r i { width: 3px; background: #111; border-radius: 1px; display: block; }
.ip-status-r i:nth-child(1) { height: 4px; } .ip-status-r i:nth-child(2) { height: 6px; } .ip-status-r i:nth-child(3) { height: 8px; } .ip-status-r i:nth-child(4) { height: 10px; }
.ip-bat { width: 22px; height: 11px; border: 1.5px solid #111; border-radius: 3px; position: relative; margin-left: 4px; display: block; }
.ip-bat::after { content: ''; position: absolute; inset: 1.5px; background: #111; border-radius: 1px; }
.ip-sync { flex: 0 0 auto; display: flex; justify-content: space-between; gap: 8px; padding: 5px 16px; font-size: 12px; color: #555; background: #E9E9EE; }
.ip-out { color: #1D4ED8; font-weight: 600; }
.ip-scroll { flex: 1 1 auto; overflow-y: auto; padding: 0 14px 18px; -webkit-overflow-scrolling: touch; outline: none; }
.ip-scroll::-webkit-scrollbar { width: 0; }

.ip-nav { display: flex; justify-content: space-between; align-items: center; min-height: 40px; margin: 0 -4px; }
.ip-back, .ip-lead, .ip-gear { background: none; border: 0; color: #0A5BD6; font-size: 15px; display: inline-flex; align-items: center; gap: 2px; min-height: 40px; padding: 0 4px; cursor: pointer; }
.ip-lead.light { color: #9CC3FF; }
.ip-large { margin: 0 0 4px; font-size: 30px; font-weight: 700; letter-spacing: -.3px; }
.ip-sub { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 2px 0 10px; color: #555; font-size: 13px; flex-wrap: wrap; }
.ip-sample { font: 500 10px var(--mono); border: 1px dashed #98A3B3; border-radius: 4px; padding: 1px 6px; color: #5B6B82; white-space: nowrap; }
.ip-ic { flex: 0 0 auto; }

.ip-card { background: #fff; border-radius: 12px; padding: 12px 14px; margin-top: 10px; display: block; width: 100%; text-align: left; border: 0; }
.ip-card.accent { box-shadow: inset 0 0 0 1.5px #1D4ED8; }
.ip-card.dark { background: #14233B; color: #fff; }
.ip-card.ip-link { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.ip-ch { display: flex; justify-content: space-between; margin-bottom: 6px; }
.ip-ch span { color: #666; font-size: 13px; }
.ip-small { font-size: 13px; color: #555; margin: 2px 0; line-height: 1.4; }
.ip-small.light, .light { color: #C9D4E3; }
.ip-pad { padding: 0 4px; }
.ip-h { margin: 16px 4px 0; font-size: 13px; font-weight: 600; color: #666; text-transform: uppercase; letter-spacing: .4px; }
.ip-kick { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #1D4ED8; }
.ip-kick.light { color: #A9B8CC; }
.ip-name { font-size: 20px; font-weight: 700; margin: 2px 0; }
.ip-ask { font-size: 16px; font-weight: 500; line-height: 1.4; }
.ip-note { background: #EEF3FB; border-radius: 8px; padding: 10px; font-size: 13px; line-height: 1.45; color: #1A2F55; margin: 8px 0; }
.ip-ok { color: #15803D; font-size: 13px; font-weight: 600; margin: 8px 4px 0; }
.ok { color: #15803D !important; font-weight: 600; }
.warnt { color: #8A4B00 !important; }
.ip-up { text-transform: uppercase; font-weight: 700; letter-spacing: .4px; }

.ip-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.ip-tile { background: #fff; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.ip-tile span { font-size: 12px; color: #666; }
.ip-tile b { font-size: 18px; font-variant-numeric: tabular-nums; }
.ip-tile.warn b { color: #8A4B00; }

.ip-row, .ip-link2 { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; border-top: 1px solid #ECECF0; padding: 10px 0; text-align: left; color: inherit; cursor: pointer; }
.ip-card > .ip-row:first-of-type, .ip-card > .ip-row2:first-child .ip-row, .ip-card > .ip-ch + .ip-row:first-of-type { border-top: 0; }
.ip-ch + .ip-row, .ip-ch + .ip-check, .ip-ch + .ip-chk { border-top: 0; }
.ip-row2 { display: flex; align-items: center; border-top: 1px solid #ECECF0; }
.ip-row2:first-child { border-top: 0; }
.ip-row2 .ip-row { border-top: 0; flex: 1 1 auto; min-width: 0; }
.ip-row small, .ip-link2 small { display: block; color: #666; font-size: 12px; line-height: 1.35; }
.ip-row b, .ip-link2 b { display: block; font-weight: 600; font-size: 15px; }
.ip-grow { flex: 1 1 auto; min-width: 0; display: block; }
.ip-desc { display: block; font-size: 13px; }
.ip-time { flex: 0 0 62px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ip-mark { flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-style: normal; font-weight: 700; font-size: 13px; background: #6B7280; }
.ip-mark.g { background: #1F7A4D; } .ip-mark.a { background: #B45F06; } .ip-mark.r { background: #B42318; } .ip-mark.b { background: #1E4FA3; } .ip-mark.n { background: #A8B0BD; }
.ip-chk { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid #ECECF0; }
.ip-chk.wait { opacity: .6; }
.ip-chk small { display: block; font-size: 12px; color: #555; }
.ip-no { flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #E5E7EB; font-style: normal; font-weight: 700; font-size: 13px; }
.ip-no.now { background: #1D4ED8; color: #fff; } .ip-no.done { background: #1F7A4D; color: #fff; }
.ip-nav-b { flex: 0 0 44px; height: 44px; background: none; border: 0; color: #0A5BD6; cursor: pointer; display: grid; place-items: center; }
.ip-av { flex: 0 0 34px; height: 34px; border-radius: 50%; background: #DCE6F5; color: #14233B; font-weight: 700; font-size: 12px; display: grid; place-items: center; }
.ip-acts { display: inline-flex; gap: 6px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.ip-bring { padding: 6px 0; font-size: 14px; border-top: 1px solid #ECECF0; }
.ip-ch + .ip-bring { border-top: 0; }
.ip-bring small { display: block; color: #666; font-size: 12px; }
.ip-line { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid #ECECF0; font-size: 14px; }
.ip-ch + .ip-line { border-top: 0; }
.ip-line small { display: block; color: #666; font-size: 12px; }
.ip-line b { font-variant-numeric: tabular-nums; text-align: right; }
.ip-big { font-size: 22px; }
.ip-itemno { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.mono { font-family: var(--mono); }

.ip-prim, .ip-sec, .ip-quick, .ip-more, .ip-mini, .ip-f, .ip-scanb { cursor: pointer; font-weight: 600; }
.ip-prim { display: block; width: 100%; margin-top: 10px; min-height: 46px; border: 0; border-radius: 12px; background: #1D4ED8; color: #fff; font-size: 16px; }
.ip-card .ip-prim { margin-top: 12px; }
.ip-prim.off { background: #A9B4C8; }
.ip-sec { display: block; width: 100%; margin-top: 8px; min-height: 42px; border: 1px solid #1D4ED8; border-radius: 12px; background: #fff; color: #1D4ED8; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.ip-two, .ip-presets { display: flex; gap: 8px; margin-top: 6px; }
.ip-two .ip-sec, .ip-presets .ip-sec { flex: 1 1 0; }
.ip-quick { min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid #1D4ED8; background: #1D4ED8; color: #fff; font-size: 13px; white-space: nowrap; }
.ip-quick.ghost { background: #fff; color: #1D4ED8; }
.ip-quick.on { background: #E5E7EB; color: #333; border-color: #E5E7EB; }
.ip-more { background: none; border: 0; color: #0A5BD6; padding: 8px 0 0; font-size: 14px; }
.ip-mini { width: 36px; height: 36px; border: 1px solid #D1D5DB; background: #fff; border-radius: 8px; }
.ip-f { min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid #C7CDD8; background: #fff; font-size: 13px; white-space: nowrap; color: #222; }
.ip-f[aria-pressed="true"] { background: #14233B; border-color: #14233B; color: #fff; }
.ip-filters { display: flex; gap: 6px; overflow-x: auto; padding: 8px 0 4px; scrollbar-width: none; }
.ip-filters::-webkit-scrollbar { display: none; }
.ip-segs, .ip-quicks, .ip-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ip-check { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 0; background: none; border: 0; border-top: 1px solid #ECECF0; text-align: left; cursor: pointer; font-size: 14px; color: inherit; }
.ip-ch + .ip-check { border-top: 0; }
.ip-check i { flex: 0 0 22px; height: 22px; border-radius: 50%; border: 2px solid #A8B0BD; display: grid; place-items: center; color: #fff; font-style: normal; font-size: 13px; font-weight: 700; }
.ip-check i.on { background: #1F7A4D; border-color: #1F7A4D; }
.ip-check .done { color: #777; text-decoration: line-through; }

.ip-search { margin-top: 4px; }
.ip-search input, .ip-sheet input, .ip-sheet textarea { width: 100%; min-height: 40px; border: 0; border-radius: 10px; background: #E3E3E8; padding: 8px 12px; font: inherit; font-size: 15px; color: #111; }
.ip-search2 { display: flex; gap: 8px; }
.ip-scanb { flex: 0 0 44px; height: 40px; border: 0; border-radius: 10px; background: #1D4ED8; color: #fff; display: grid; place-items: center; }
.ip-sheet .ip-scanb { height: 40px; }
.ip-sale { display: flex; gap: 8px; margin-bottom: 6px; }

.ip-tabs { flex: 0 0 auto; display: flex; background: #F9F9FB; border-top: 1px solid #D5D5DB; padding: 6px 2px 14px; }
.ip-tabs button { position: relative; flex: 1 1 0; background: none; border: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; color: #6B7280; min-height: 44px; cursor: pointer; }
.ip-tabs button[aria-current="page"] { color: #1D4ED8; font-weight: 600; }
.ip-tabs em { position: absolute; top: -2px; left: 56%; background: #D92D20; color: #fff; font-style: normal; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: grid; place-items: center; padding: 0 4px; }

.ip-bar { margin: 8px 0; }
.ip-bar-t { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; }
.ip-track { height: 8px; background: #E5E7EB; border-radius: 4px; overflow: hidden; }
.ip-track div { height: 100%; background: #1F7A4D; }
.ip-wk { display: grid; grid-template-columns: 40px 1fr 1fr 40px; gap: 6px; padding: 6px 0; border-top: 1px solid #ECECF0; font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }
.ip-wk b, .ip-wk span:first-child { text-align: left; }
.ip-wk-h { border-top: 0; color: #666; font-size: 11px; }

.ip-call { padding: 8px 0; border-top: 1px solid #ECECF0; }
.ip-ch + .ip-call, .ip-card > .ip-call:first-child { border-top: 0; }
.ip-call .ip-acts { justify-content: flex-start; margin-top: 6px; }
.ip-call.done .ip-link2 { opacity: .5; text-decoration: line-through; }
.ip-link2 { border-top: 0; padding: 0; }

.ip-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.35); z-index: 4; }
.ip-scrim.dark { background: rgba(0,0,0,.7); }
.ip-sheet { position: absolute; left: 0; right: 0; bottom: 0; top: 36px; z-index: 5; background: #F2F2F7; border-radius: 16px 16px 0 0; display: flex; flex-direction: column; }
.ip-sheet-h { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-bottom: 1px solid #D5D5DB; }
.ip-sheet-h small { display: block; color: #666; font-size: 12px; }
.ip-sheet-b { flex: 1 1 auto; overflow-y: auto; padding: 8px 16px 12px; }
.ip-sheet-f { padding: 8px 16px 16px; border-top: 1px solid #D5D5DB; }
.ip-lab { margin: 12px 0 4px; font-size: 12px; font-weight: 600; color: #666; text-transform: uppercase; }
.ip-amt { display: flex; align-items: center; gap: 6px; background: #E3E3E8; border-radius: 10px; padding-left: 12px; margin-bottom: 6px; }
.ip-amt input { background: transparent; }
.ip-cam { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; color: #fff; padding: 20px 16px 16px; }
.ip-view { flex: 1 1 auto; margin: 8px 0; border: 2px solid rgba(255,255,255,.5); border-radius: 18px; position: relative; display: grid; place-items: end center; padding-bottom: 16px; }
.ip-laser { position: absolute; left: 10%; right: 10%; top: 50%; height: 2px; background: #F87171; box-shadow: 0 0 8px #F87171; animation: ipscan 1.6s ease-in-out infinite alternate; }
@keyframes ipscan { from { transform: translateY(-50px); } to { transform: translateY(50px); } }
.ip-cam .ip-sec { background: rgba(255,255,255,.95); }
.ip-toast { position: absolute; left: 14px; right: 14px; bottom: 76px; z-index: 6; background: rgba(20,35,59,.95); color: #fff; border-radius: 12px; padding: 10px 14px; font-size: 13px; line-height: 1.4; }
@media (prefers-reduced-motion: reduce) { .ip-laser { animation: none; } }
@media (max-width: 420px) { .ip-phone { border-radius: 40px; padding: 6px; } .ip-screen { border-radius: 34px; } }