/* MADE-UP CUSTOMERS (/practice-data, 7.4.4 pick "One card with a market list"):
   the card at the top (the location list, the number, one bar, the eight step
   counts), the two buttons in one bar, and the four quiet links. Only what
   the app's own frame lacks; the card, buttons and inputs are the app's. */

:root {
  --st-1: #d9d3c8; --st-2: #ecc98f; --st-3: #e3a64f; --st-4: #cf7f1f;
  --st-5: #b45309; --st-6: #7a3410; --st-7: #1f1a14; --st-8: #ece8e1;
}

.pw-dot { display: inline-block; flex: none; width: 0.625rem; height: 0.625rem; border-radius: 999px; }
.pw-dot.s1 { background: var(--st-1); } .pw-dot.s2 { background: var(--st-2); } .pw-dot.s3 { background: var(--st-3); } .pw-dot.s4 { background: var(--st-4); }
.pw-dot.s5 { background: var(--st-5); } .pw-dot.s6 { background: var(--st-6); } .pw-dot.s7 { background: var(--st-7); }
.pw-dot.s8 { background: var(--st-8); box-shadow: inset 0 0 0 1px var(--color-line-strong); }

.pw-link { display: inline-flex; align-items: center; gap: 0.25rem; min-height: var(--spacing-tap); font-size: 0.9375rem; font-weight: 600; color: var(--color-accent-strong); white-space: nowrap; }
.pw-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.pw-link svg { width: 1rem; height: 1rem; }
.pw-fine { margin-top: 0.375rem; font-size: 0.8125rem; line-height: 1.125rem; color: var(--color-muted); }

/* The card at the top */
.pw-pickrow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; padding: 1.125rem 1.25rem 0; }
.pw-pickrow .ui-location-select { flex: none; width: 15rem; max-width: 100%; }
.pw-pickrow .ui-location-select .ui-input { width: 100%; }
.pw-pickrow .pw-fine { margin: 0; }
.pw-hero-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1.5rem; padding: 0.75rem 1.25rem 0; }
.pw-big { display: flex; align-items: baseline; gap: 0.625rem; }
.pw-big b { font-size: 2.75rem; line-height: 3rem; font-weight: 700; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.pw-big span { font-size: 1.0625rem; font-weight: 600; color: var(--color-ink); }
.pw-hero-main p { font-size: 0.9375rem; line-height: 1.375rem; color: var(--color-muted); }
.pw-hero-main p b { font-weight: 600; color: var(--color-ink); }
.pw-bar { display: flex; gap: 3px; height: 0.875rem; margin: 1rem 1.25rem 0; border-radius: 999px; overflow: hidden; }
.pw-bar i { display: block; flex: 1 1 0; min-width: 4px; }
.pw-bar i.s1 { background: var(--st-1); } .pw-bar i.s2 { background: var(--st-2); } .pw-bar i.s3 { background: var(--st-3); } .pw-bar i.s4 { background: var(--st-4); }
.pw-bar i.s5 { background: var(--st-5); } .pw-bar i.s6 { background: var(--st-6); } .pw-bar i.s7 { background: var(--st-7); } .pw-bar i.s8 { background: var(--st-8); }
.pw-tiles { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0; margin: 0.5rem 0 0; padding: 0 0.75rem; }
.pw-tile { display: flex; flex-direction: column; gap: 0.125rem; padding: 0.625rem 0.5rem; border-radius: var(--radius-ui); min-width: 0; }
a.pw-tile:hover { background: #faf9f7; }
.pw-tile b { font-size: 1.5rem; line-height: 2rem; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.pw-tile span { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; line-height: 1.125rem; font-weight: 600; color: var(--color-muted); }
.pw-tile.is-arch b { color: var(--color-muted); font-weight: 600; }
.pw-hero-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1rem; padding: 0 1.25rem; border-top: 1px solid var(--color-line); margin-top: 0.5rem; min-height: 3rem; }

/* The two buttons in one bar */
.pw-two { display: grid; grid-template-columns: 1fr 1fr; }
.pw-half { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; padding: 1.125rem 1.25rem; min-width: 0; }
.pw-half + .pw-half { border-left: 1px solid var(--color-line); }
.pw-half-main { flex: 1 1 14rem; min-width: 0; }
.pw-half-main h2 { font-size: 1.0625rem; line-height: 1.5rem; font-weight: 600; letter-spacing: -0.005em; color: var(--color-ink); }
.pw-half-main p { margin-top: 0.125rem; font-size: 0.8125rem; line-height: 1.125rem; color: var(--color-muted); }
.pw-half .ui-btn { flex: none; }
.pw-half-act { display: flex; flex-direction: column; gap: 0.5rem; flex: 0 1 auto; }
.pw-half-more { flex: 1 1 100%; min-width: 0; }
.pw-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; width: 100%; }
.pw-confirm .ui-input { flex: 1 1 9rem; min-width: 0; max-width: 15rem; text-transform: uppercase; letter-spacing: 0.06em; }
.pw-confirm .ui-input::placeholder { text-transform: none; letter-spacing: 0; }
details.pw-d > summary { display: flex; align-items: center; gap: 0.25rem; min-height: var(--spacing-tap); cursor: pointer; list-style: none; font-size: 0.9375rem; font-weight: 600; color: var(--color-accent-strong); }
details.pw-d > summary::-webkit-details-marker { display: none; }
details.pw-d > summary svg { width: 1rem; height: 1rem; transition: transform 0.15s; }
details.pw-d[open] > summary svg { transform: rotate(90deg); }

/* The four quiet links */
.pw-quiet { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.25rem; margin-top: -0.25rem; }
.pw-quiet .ui-btn { min-height: var(--spacing-tap); padding: 0 0.625rem; font-size: 0.9375rem; gap: 0.375rem; }
.pw-quiet .ui-btn svg { width: 1.125rem; height: 1.125rem; }
.pw-quiet .is-bad { color: var(--color-bad); }
.pw-quiet form { display: contents; }
.pw-quiet-label { margin-right: 0.25rem; }

/* The practice-texts switch (Texts to my phone) */
.pw-phone { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.875rem 1.25rem; }
.pw-phone-main { flex: 1 1 16rem; min-width: 0; }
.pw-phone-main h2 { font-size: 1.0625rem; line-height: 1.5rem; font-weight: 600; color: var(--color-ink); }
.pw-phone-main p { margin-top: 0.125rem; font-size: 0.8125rem; line-height: 1.125rem; color: var(--color-muted); }
.pw-phone-state { display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 600; color: var(--color-ink); }
.pw-phone-state.is-off { color: var(--color-muted); }

@media (max-width: 47.99rem) {
  .pw-two { grid-template-columns: 1fr; }
  .pw-half { flex-direction: column; align-items: stretch; padding: 1rem; }
  .pw-half + .pw-half { border-left: 0; border-top: 1px solid var(--color-line); }
  .pw-half-act .ui-btn { width: 100%; }
  .pw-quiet { flex-direction: column; align-items: stretch; gap: 0; margin-top: 0; background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-ui); box-shadow: var(--shadow-card); }
  .pw-quiet .pw-quiet-label { display: none; }
  .pw-quiet .ui-btn { justify-content: flex-start; min-height: 3rem; padding: 0 1rem; border-radius: 0; width: 100%; }
  .pw-quiet .ui-btn + .ui-btn, .pw-quiet form + .ui-btn, .pw-quiet .ui-btn + form { border-top: 1px solid var(--color-line); }
  .pw-quiet form { display: block; border-top: 1px solid var(--color-line); }
  .pw-pickrow { padding: 0.875rem 1rem 0; gap: 0.375rem; }
  .pw-pickrow .ui-location-select { width: 100%; }
  .pw-hero-main { padding: 0.5rem 1rem 0; }
  .pw-big b { font-size: 2.25rem; line-height: 2.5rem; }
  .pw-bar { margin: 0.875rem 1rem 0; }
  .pw-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 0.5rem; margin-top: 0.375rem; }
  .pw-tile { flex-direction: column-reverse; padding: 0.5rem 0.5rem; }
  .pw-tile b { font-size: 1.25rem; line-height: 1.5rem; }
  .pw-hero-foot { padding: 0 1rem; }
  .pw-phone { padding: 0.875rem 1rem; }
}