/* my-store.css: /my-store (lane PA1-public-app-shopify-1018, 18 Oct 2026). The web twin of the phone app's store door.
   Builds on site.css tokens (MM Grotesk, teal for actions, colour only where it means something). No inline styles (CSP). */
.ms [hidden] { display: none !important; }
.ms-hero { padding: var(--s1) 0 var(--s6); }
.ms-hero .crumbs { padding-top: var(--s1); margin: 0 0 var(--s4); }
.ms-hero h1 { margin: 0 0 var(--s2); }
.ms-hero .lede { margin: 0; color: var(--ink-2); max-width: 680px; }
.ms-main .wrap { max-width: 980px; }
.ms-load { margin: 0; }

/* connect */
.ms-connect { max-width: 620px; }
.ms-steps { list-style: none; counter-reset: ms; margin: 0 0 var(--s4); padding: 0; display: grid; gap: 14px; }
.ms-steps li { counter-increment: ms; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; }
.ms-steps li::before { content: counter(ms); grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; background: var(--teal); color: #fff;
  font: 650 13px/26px var(--font); text-align: center; }
.ms-steps b { font-size: 17px; }
.ms-steps span { font-size: var(--fs-small); color: var(--slate); }
.ms-box { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s3) var(--s2); display: grid; gap: 10px; }
@media (min-width: 640px) { .ms-box { padding: var(--s4); } }
.ms-box label { margin: 0; font-weight: 600; }
#ms-code { font: 600 28px/1.2 var(--mono); letter-spacing: 4px; text-align: center; text-transform: uppercase; min-height: 60px; }
.ms-box .btn { width: 100%; }
.ms-err { margin: 0; padding: 10px 12px; border-radius: var(--r); background: #FBE9E5; color: #8E2F1C; font-size: var(--fs-small); font-weight: 550; }
.ms-ok { color: var(--teal); font-weight: 600; }
.ms-demo { margin: var(--s2) 0 0; text-align: center; }
.ms-link { padding: 6px 4px; min-height: 40px; border: 0; background: none; font: inherit; color: var(--teal); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ms-link:hover { color: var(--teal-d); }
.ms-danger { color: var(--rust); }
.ms-note { margin: var(--s2) 0 0; text-align: center; }

/* store */
.ms-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: var(--s3); }
.ms-head h2 { margin: 0 0 4px; }
.ms-head p { margin: 0; }
.ms-pill { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 10px; border-radius: var(--r-pill); background: var(--grey); color: var(--slate);
  font-size: 13px; font-weight: 650; white-space: nowrap; }
.ms-pill.ms-ok { background: var(--ok-t); color: var(--ok); }
.ms-pill.ms-warn, .ms-sample { background: var(--warn-bg); color: var(--warn); }
.ms-pill.ms-bad { background: #FBE9E5; color: var(--rust); }
.ms-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: var(--s3); }
@media (min-width: 760px) { .ms-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ms-kpi { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); padding: 14px 16px; }
.ms-kpi b { display: block; font-size: 22px; line-height: 1.2; overflow-wrap: anywhere; }
.ms-kpi span { font-size: 13px; color: var(--slate); }
.ms-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 760px) { .ms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ms-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s3) var(--s2); margin-bottom: 12px; min-width: 0; }
.ms-grid .ms-card { margin-bottom: 0; }
.ms-grid + .ms-card, .ms-card + .ms-grid { margin-top: 12px; }
@media (min-width: 640px) { .ms-card { padding: var(--s3); } }
.ms-ch { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ms-ch h3 { margin: 0; font-size: 18px; }
.ms-score { margin: 0 0 6px; }
.ms-score b { font-size: 36px; line-height: 1; }
.ms-score span { color: var(--slate); }
.ms-find { margin: 0 0 8px; padding-left: 20px; }
.ms-find li { margin-bottom: 6px; }
.ms-find span { color: var(--slate); }
.ms-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); }
.ms-row:first-child { border-top: 0; }
.ms-row span:first-child { text-transform: capitalize; overflow-wrap: anywhere; }
.ms-order { padding: 10px 0; border-top: 1px solid var(--line); }
.ms-order:first-child { border-top: 0; }
.ms-order .ms-ch { margin: 0; align-items: flex-start; }
.ms-order .ms-ch > div { min-width: 0; }
.ms-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ms-file { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; max-width: 100%; padding: 0 12px; border: 1px solid var(--teal-l); border-radius: var(--r);
  background: var(--teal-t); color: var(--teal-d); font-weight: 650; font-size: 14px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-file span { font-weight: 400; color: var(--slate); }
.ms-cht { border-top: 1px solid var(--line); padding: 10px 0; }
.ms-cht:first-child { border-top: 0; }
.ms-cht summary { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; cursor: pointer; list-style: none; min-height: 32px; }
.ms-cht summary::-webkit-details-marker { display: none; }
.ms-cht summary b { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.ms-cht > p { margin: 4px 0 0; }
.ms-chat { display: grid; gap: 8px; margin: 10px 0; }
.ms-b { max-width: 88%; }
.ms-b p { margin: 2px 0 0; padding: 8px 12px; border-radius: 14px; background: var(--grey); white-space: pre-wrap; overflow-wrap: anywhere; }
.ms-u { justify-self: end; text-align: right; }
.ms-u p { background: var(--teal); color: #fff; text-align: left; }
.ms-who { font-size: 12px; color: var(--slate); }
.ms-sys { margin: 0; text-align: center; font-size: 13px; color: var(--slate); font-style: italic; }
.ms-askf { display: flex; gap: 8px; margin: 8px 0; }
.ms-askf input { flex: 1; min-width: 0; min-height: 44px; }
.ms-askf .btn { flex: none; }
.ms-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ms-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: var(--s3); }