/* Customer app layer (JCC-120). Linked only from the customer pages:
   booking, request-service, emergency, quote, quote-draft, request-estimate, billing-inquiry.
   Layout follows the "CUSTOMER APP" reference: a navy welcome screen (logo, wordmark, house photo,
   orange Schedule Service button, 2x2 dark tiles) and a white Schedule Service screen with a
   1 Service / 2 Details / 3 Confirm stepper. Every field, id, endpoint and script stays as it was. */

.app-page {
  --app-navy: #071330;
  --app-navy-2: #0b1f44;
  --app-tile: #10264f;
  --app-blue: #2f86ff;
  --app-blue-d: #1d64d8;
  --app-orange: #f26a1b;
  --app-orange-2: #e2560c;
  --app-muted: #9fb2d4;
  background: var(--color-bg);
}

/* ======================= Stage (holds the two screens) ======================= */
.app-stage { background: var(--app-navy); color: #fff; }
.app-stage-inner { display: flex; flex-direction: column; }
.app-screen { position: relative; scroll-margin-top: 84px; }
.app-screen:focus { outline: none; }
.app-stage :focus-visible { outline: 2px solid #ffb27a; outline-offset: 3px; }

/* ---------- Welcome screen ---------- */
.app-screen--welcome {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 26px 16px 22px;
  background: radial-gradient(130% 70% at 50% 0%, #12306a 0%, var(--app-navy) 70%);
}
.app-logo { display: inline-flex; align-items: center; gap: 10px; }
.app-logo-mark { width: 54px; height: 54px; flex: none; background: url("../assets/sfp-mark.svg") center / contain no-repeat; }
.app-logo-text { display: flex; flex-direction: column; align-items: flex-start; line-height: .92; text-transform: uppercase; }
.app-logo-l1 { color: #fff; font-weight: 800; font-size: 15px; letter-spacing: .03em; }
.app-logo-l2 { color: var(--app-blue); font-weight: 900; font-size: 25px; letter-spacing: .01em; }

.app-page .app-wordmark { display: flex; flex-direction: column; align-items: center; margin: 18px 0 0; max-width: none; text-transform: uppercase; line-height: .98; letter-spacing: -.005em; color: #fff; }
.app-wordmark .app-welcome { display: block; margin-bottom: 8px; font-size: 1.125rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: #fff; }
.app-wordmark .app-wm-l1 { display: block; font-size: clamp(1.9rem, 8.6vw, 2.25rem); font-weight: 800; color: #fff; }
.app-wordmark .app-wm-l2 { display: block; font-size: clamp(2.6rem, 12.4vw, 3.2rem); font-weight: 900; color: var(--app-blue); letter-spacing: .005em; }
.app-tagline { margin: 10px 0 0; font-size: 1.0625rem; font-weight: 600; color: #fff; }

.app-house { position: relative; align-self: stretch; height: 200px; margin: 14px -16px 0; overflow: hidden; }
.app-house::before { content: ""; position: absolute; inset: 0; background: url("../assets/sunset-900.webp") 52% 30% / cover no-repeat; filter: brightness(1.1) saturate(1.2) contrast(1.08); }
.app-house::after { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, var(--app-navy) 0%, rgba(7,19,48,.35) 26%, rgba(7,19,48,0) 46%, rgba(7,19,48,.25) 72%, var(--app-navy) 100%),
    linear-gradient(90deg, rgba(7,19,48,.55) 0%, rgba(7,19,48,0) 22%, rgba(7,19,48,0) 78%, rgba(7,19,48,.55) 100%),
    linear-gradient(0deg, rgba(25,60,140,.28), rgba(25,60,140,.28)); }

.app-cta {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: 60px; margin-top: -26px; padding: 12px 20px;
  border-radius: 12px; background: linear-gradient(180deg, #f6782a 0%, var(--app-orange) 45%, var(--app-orange-2) 100%);
  color: #fff; font-size: 1.1875rem; font-weight: 700; text-decoration: none;
  box-shadow: 0 10px 26px rgba(242,106,27,.35), inset 0 1px 0 rgba(255,255,255,.25);
  transition: filter var(--transition-interactive), transform var(--transition-interactive);
}
.app-page a.app-cta, .app-page a.app-cta:hover { color: #fff; text-decoration: none; }
.app-cta:hover { filter: brightness(1.06); }
.app-cta:active { transform: translateY(1px); }
.app-cta svg { width: 26px; height: 26px; flex: none; }

.app-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; margin-top: 14px; }
.app-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 98px; padding: 14px 8px; border-radius: 12px; text-align: center;
  background: linear-gradient(180deg, #15305f 0%, var(--app-tile) 100%);
  border: 1px solid rgba(120,160,230,.18); box-shadow: 0 6px 16px rgba(0,0,0,.25);
  color: #fff; text-decoration: none; transition: border-color var(--transition-interactive), transform var(--transition-interactive);
}
.app-page a.app-tile, .app-page a.app-tile:hover { color: #fff; text-decoration: none; }
.app-tile:hover { border-color: rgba(120,170,255,.55); transform: translateY(-1px); }
.app-tile-icon { display: inline-flex; color: #fff; }
.app-tile-icon svg { width: 32px; height: 32px; }
.app-tile-icon--alert { color: #ff8a5c; }
.app-tile-title { font-size: .9375rem; font-weight: 600; line-height: 1.2; }
.app-tile-sub { font-size: .8125rem; color: var(--app-muted); line-height: 1.3; }
.app-welcome-note { margin: 16px 0 0; font-size: .75rem; line-height: 1.45; color: var(--app-muted); max-width: 40ch; }

/* ---------- Schedule Service screen ---------- */
.app-screen--flow { padding: 0 0 20px; background: var(--app-navy); }
.app-flow-head { position: relative; display: flex; align-items: center; justify-content: center; min-height: 58px; padding: 6px 56px; }
.app-page .app-flow-title { margin: 0; font-size: 1.125rem; font-weight: 600; color: #fff; letter-spacing: 0; }
.app-back { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; }
.app-back:hover { background: rgba(255,255,255,.1); }
.app-back svg { width: 24px; height: 24px; }

.app-stepper, .app-flow-body { background: var(--color-surface); color: var(--color-text); margin-inline: 10px; }
.app-stepper { display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; margin-block: 0; padding: 20px 12px 10px; border-radius: 20px 20px 0 0; }
.app-stepper[hidden] { display: none; }
.app-stepper[hidden] + .app-flow-body { border-radius: 20px; padding-top: 16px; }
.app-stepper li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 500; color: var(--color-text-muted); text-align: center; }
.app-stepper li + li::before { content: ""; position: absolute; top: 15px; right: calc(50% + 20px); width: calc(100% - 40px); height: 2px; background: var(--color-divider); }
.app-stepper-dot { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #e7ecf4; color: #4a5a75; font-weight: 700; font-size: .9375rem; }
.app-stepper li[data-state="current"] { color: var(--app-blue-d); font-weight: 600; }
.app-stepper li[data-state="current"] .app-stepper-dot { background: var(--app-blue-d); color: #fff; box-shadow: 0 0 0 4px rgba(47,134,255,.22); }
.app-stepper li[data-state="done"] { color: var(--color-text); }
.app-stepper li[data-state="done"] .app-stepper-dot { background: #dceaff; color: var(--app-blue-d); }
.app-stepper li[data-state="done"]::before, .app-stepper li[data-state="current"]::before { background: var(--app-blue-d); }

.app-page .app-flow-body { display: flex; flex-direction: column; gap: 12px; padding: 6px 16px 20px; border-radius: 0 0 20px 20px; }
.app-page .app-flow-body > .workflow-status:empty { display: none; }
.app-page .app-flow-body .workflow-status:not(:empty) { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--color-bg); font-size: .875rem; color: var(--color-text-muted); }
.app-page .app-flow-body .contact-form { padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; gap: 14px; }
.app-page .app-flow-body .contact-form label { font-size: .9375rem; font-weight: 600; }
.app-page .app-flow-body .contact-form input:not([type="radio"]):not([type="checkbox"]),
.app-page .app-flow-body .contact-form textarea,
.app-page .app-flow-body .contact-form select { min-height: 50px; font-size: 1rem; border-radius: 10px; padding: 12px 14px; }
.app-page .app-flow-body .form-note { margin: 4px 0 0; font-size: .75rem; line-height: 1.45; color: var(--color-text-muted); }
.app-page .app-flow-body .btn-ghost { align-self: flex-start; }

.app-step { display: flex; flex-direction: column; gap: 14px; }
.app-step[hidden] { display: none; }
.app-page .app-step-label { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); }
.app-step-error { margin: 0; font-size: .875rem; font-weight: 600; color: var(--color-error); }
.app-step-error[hidden] { display: none; }

/* Service rows (built by customer-app.js; each row sets the real <select> value) */
.app-service-rows { display: flex; flex-direction: column; margin: 0 -4px; }
.app-service-row { position: relative; display: flex; align-items: center; gap: 14px; min-height: 62px; padding: 9px 8px; border-radius: 12px; cursor: pointer; font-size: 1rem; font-weight: 500; color: var(--color-text); -webkit-tap-highlight-color: transparent; transition: background var(--transition-interactive); }
.app-service-row + .app-service-row::before { content: ""; position: absolute; top: 0; left: 66px; right: 8px; height: 1px; background: var(--color-divider); }
.app-service-row[aria-checked="true"]::before, .app-service-row[aria-checked="true"] + .app-service-row::before { display: none; }
.app-service-row:hover { background: var(--color-bg); }
.app-service-row:focus-visible { outline: 2px solid var(--app-blue-d); outline-offset: -2px; }
.app-row-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #eef2f8; color: #33405a; flex: none; }
.app-row-icon svg { width: 24px; height: 24px; }
.app-row-text { flex: 1; min-width: 0; }
.app-row-chev { width: 20px; height: 20px; color: #8a96ab; flex: none; }
.app-service-row[aria-checked="true"] { background: #eaf2ff; }
.app-service-row[aria-checked="true"] .app-row-icon { background: var(--app-blue-d); color: #fff; }
.app-service-row[aria-checked="true"] .app-row-text { font-weight: 700; color: var(--app-blue-d); }
.app-service-row[aria-checked="true"] .app-row-chev { color: var(--app-blue-d); }
.app-service-row[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }
/* The native select stays the real field (value, validation, submission); visually replaced by the rows. */
.app-native-select { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Big orange actions: Next and the real submit */
.app-next, .app-page .app-flow-body .contact-form button[type="submit"] {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; margin-top: 8px;
  border: 0; border-radius: 12px; background: linear-gradient(180deg, #f6782a 0%, var(--app-orange) 45%, var(--app-orange-2) 100%);
  color: #fff; font: inherit; font-size: 1.125rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 8px 20px rgba(242,106,27,.3);
}
.app-next:hover, .app-page .app-flow-body .contact-form button[type="submit"]:hover { filter: brightness(1.06); transform: none; }
.app-page .app-flow-body .contact-form button[type="submit"]:disabled { filter: grayscale(.6); opacity: .7; cursor: progress; }
.contact-form:not(.app-steps-on) .app-next { display: none; }

/* Review (step 3) */
.app-review { margin: 0; border: 1px solid var(--color-divider); border-radius: 12px; overflow: hidden; }
.app-review:empty { display: none; }
.app-review-row { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; align-items: center; padding: 10px 14px; }
.app-review-row + .app-review-row { border-top: 1px solid var(--color-divider); }
.app-review-row dt { grid-column: 1; margin: 0; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); }
.app-review-row dd { grid-column: 1; margin: 2px 0 0; font-size: .9375rem; font-weight: 500; overflow-wrap: anywhere; white-space: pre-wrap; }
.app-review-row dd:last-child { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.app-review-row dd small { display: block; margin-top: 2px; font-size: .75rem; color: var(--color-text-muted); font-weight: 400; white-space: normal; }
.app-review-edit { border: 0; background: none; padding: 4px; font: inherit; font-size: .8125rem; font-weight: 600; color: var(--app-blue-d); cursor: pointer; }

/* Success states */
.app-page .workflow-status.app-success { display: flex; gap: 10px; align-items: flex-start; border: 2px solid var(--color-success); background: color-mix(in oklab, var(--color-success) 9%, var(--color-surface)); color: var(--color-text); font-weight: 600; }
.app-page .workflow-status.app-success::before, .app-page .request-confirmation:not([hidden])::before { content: ""; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--color-success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px no-repeat; }
.app-page .request-confirmation { border: 2px solid var(--color-success); border-radius: 16px; }
.app-page .request-confirmation:not([hidden])::before { display: block; width: 44px; height: 44px; background-size: 26px; margin-bottom: 12px; }
.app-page .form-error:not([hidden]) { border-radius: 10px; font-size: .875rem; font-weight: 600; }

/* Records below the screens */
.app-page .app-records { padding-block: 32px 48px; }
.app-records .payment-copy { max-width: 760px; margin-inline: auto; }
.app-page .payment-copy h2 { font-size: 1.125rem; font-weight: 700; margin-top: 24px; }
.app-page .payment-copy h2:first-child, .app-page .payment-copy > section + h2 { margin-top: 0; }
.app-page .booking-list li { border-radius: 12px; }

/* ======================= Desktop: the two screens side by side ======================= */
@media (min-width: 960px) {
  .app-stage { position: relative; overflow: hidden; }
  .app-stage::before { content: ""; position: absolute; inset: -30px; background: url("../assets/sunset-900.webp") 50% 50% / cover no-repeat; filter: blur(16px) brightness(.42) saturate(1.1); }
  .app-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,19,48,.5), rgba(7,19,48,.85)); }
  .app-stage-inner { position: relative; z-index: 1; flex-direction: row; justify-content: center; align-items: flex-start; gap: 40px; padding: 48px 24px 56px; }
  .app-screen { width: 400px; flex: none; border-radius: 44px; border: 10px solid #0b1324; box-shadow: 0 30px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.1); overflow: hidden; }
  .app-screen--welcome { padding: 32px 22px 26px; min-height: 800px; }
  .app-house { margin-inline: -22px; }
  .app-screen--flow { min-height: 800px; padding-top: 16px; }
  .app-wordmark .app-wm-l1 { font-size: 2.125rem; }
  .app-wordmark .app-wm-l2 { font-size: 3rem; }
}

/* ======================= Other customer pages (navy screen header + white card) ======================= */
.app-page .page-intro {
  background: radial-gradient(130% 90% at 50% 0%, #12306a 0%, var(--app-navy) 70%); color: #fff; border-bottom: 0;
}
.app-page .page-intro::before { background: none !important; }
.app-page .page-intro h1 { color: #fff; font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; line-height: 1.02; font-size: clamp(1.875rem, 1.3rem + 2.4vw, 3rem); }
.app-page .page-intro p { color: #c9d5ea; }
.app-page .page-intro p strong { color: #fff; }
.app-page .page-intro a:not(.app-cta):not(.app-tile) { color: #ffb27a; }
.app-page .page-intro .breadcrumb { color: #d7e1f3; text-decoration: none; }
.app-page .page-intro .app-welcome { display: none; }
.app-page .page-intro .wrap { max-width: 760px; }
.app-page .page-intro .app-cta { margin-top: 24px; max-width: 460px; }
.app-page .page-intro .app-tiles { max-width: 560px; }
.app-page .section .contact-form { border-radius: 20px; border: 0; box-shadow: 0 16px 40px rgba(7,19,48,.12); }
.app-page .section .contact-form button[type="submit"] { width: 100%; min-height: 56px; border: 0; border-radius: 12px; background: linear-gradient(180deg, #f6782a 0%, var(--app-orange) 45%, var(--app-orange-2) 100%); color: #fff; font-size: 1.0625rem; font-weight: 700; }

/* ---------- Emergency call card ---------- */
.app-call-card { margin-top: 24px; max-width: 560px; padding: 20px; border-radius: 20px; background: #fff; color: var(--app-navy); box-shadow: 0 10px 28px rgba(0,0,0,.25); }
.app-page .page-intro .app-call-card .app-call-kicker { margin: 0; color: #a22b26; font-weight: 700; font-size: 1rem; }
.app-page .page-intro .app-call-card p { color: #4a5a75; font-size: .9375rem; margin-top: 12px; }
.app-call-card .app-cta { margin-top: 12px !important; max-width: none !important; }
.app-page .page-intro .app-call-card p strong { color: var(--app-navy); }

/* ---------- Phones ---------- */
.app-sticky-call { display: none; }
@media (max-width: 720px) {
  .app-page .page-intro { padding-block: 20px 32px; }
  .app-page .page-intro h1 { font-size: 2rem; }
  .app-sticky-call { display: flex; position: fixed; left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); z-index: 40; }
  .app-sticky-call .app-cta { margin: 0; min-height: 56px; }
  .app-page #sfpAssistOpen { bottom: calc(env(safe-area-inset-bottom, 0px) + 84px) !important; }
  .app-has-sticky-call .site-footer { padding-bottom: calc(var(--space-24) + env(safe-area-inset-bottom, 0px)); }
}

/* Dark theme: the sheet follows the surface tokens; dots and icon discs stay legible. */
[data-theme="dark"] .app-page .app-stepper-dot { background: #1d3363; color: #c9d5ea; }
[data-theme="dark"] .app-page .app-row-icon { background: #1d3363; color: #dbe5f7; }
[data-theme="dark"] .app-page .app-service-row[aria-checked="true"] { background: #13305f; }
[data-theme="dark"] .app-page .app-service-row[aria-checked="true"] .app-row-text { color: #8fc0ff; }
@media (prefers-reduced-motion: reduce) {
  .app-tile, .app-cta, .app-service-row { transition: none; }
  .app-tile:hover { transform: none; }
}
/* My Appointment (sample) — Jason's picture, third customer-app phone */
.apt-page{background:#071330}
.apt-wrap{padding:24px 16px 120px;display:flex;justify-content:center}
.apt-phone{width:100%;max-width:430px;background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.apt-bar{display:flex;align-items:center;gap:12px;background:#0b1f44;color:#fff;padding:14px 16px}
.apt-bar h1{flex:1;margin:0;font-size:17px;font-weight:800;text-align:center;color:#fff;font-family:var(--font-body)}
.apt-back{color:#fff;text-decoration:none;font-size:22px;min-width:32px}
.apt-sample{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#ffd8bf;border:1px solid rgba(242,106,27,.6);border-radius:999px;padding:2px 8px}
.apt-map svg{display:block;width:100%;height:180px}
.apt-card{padding:18px;color:#0b1730;border-top:1px solid #e3e9f2}
.apt-card h2{margin:0 0 10px;font-size:16px;font-family:var(--font-body)}
.apt-when strong{display:block;font-size:20px;font-weight:900}.apt-when span{color:#4a5a75;font-size:13px}.apt-when{margin:0 0 14px}
.apt-tech{display:flex;gap:14px;align-items:center}
.apt-avatar{width:58px;height:58px;border-radius:50%;background:#0b1f44;color:#fff;display:grid;place-items:center;font-weight:800}
.apt-tech div{display:flex;flex-direction:column}.apt-tech span{color:#4a5a75;font-size:13px}.apt-stars{color:#f5a623!important;letter-spacing:2px}
.apt-actions{display:flex;gap:14px;justify-content:center;margin:14px 0}
.apt-round{width:44px;height:44px;border-radius:50%;border:2px solid #1d64d8;color:#1d64d8;display:grid;place-items:center;text-decoration:none;font-size:18px}
.apt-timeline{list-style:none;margin:0;padding:0 0 0 6px}
.apt-step{position:relative;display:flex;gap:12px;align-items:center;padding:8px 0 8px 22px;color:#8a97ad}
.apt-step::before{content:"";position:absolute;left:6px;top:0;bottom:0;width:2px;background:#d8e0ec}
.apt-dot{position:absolute;left:0;width:14px;height:14px;border-radius:50%;border:2px solid #b6c2d4;background:#fff}
.apt-done,.apt-now{color:#0b1730}.apt-done .apt-dot,.apt-now .apt-dot{background:#14967f;border-color:#14967f}
.apt-step strong{flex:1;font-size:14px}.apt-step span{font-size:12px}
.apt-history{list-style:none;margin:0;padding:0;display:grid;gap:10px}.apt-history li{display:flex;flex-direction:column}.apt-history span{color:#4a5a75;font-size:12px}
.apt-phone .app-cta{display:flex;margin:6px 18px 20px}
body.app-page main{display:flex;flex-direction:column}
body.app-page main>.test-note,body.app-page main>.emergency-banner{order:99}
/* Accessibility (WCAG 2.2 AA), 2026-10-06: the appointment page's cards sit on the navy page, so they
   carry their own white panel and light-theme colours (their text is navy in either theme).  */
.apt-page .wrap > .apt-card { background: #fff; border-radius: 16px; border-top: 0; max-width: 640px; margin: 0 auto 16px;
  --color-text: #0b1730; --color-text-muted: #44506a; --color-border: #c7d0de; --color-surface-offset: #eef2f8;
  --color-accent: #b8430a; --color-accent-hover: #a63c07; --color-accent-contrast: #ffffff; color-scheme: light; }
/* Contrast (2026-10-06): the avatar initials were picking up the grey caption colour (2.3:1 on navy),
   and the not-yet-reached timeline steps measured 2.95:1 on white. */
.apt-tech .apt-avatar{color:#fff}
.apt-step.apt-todo{color:#5f6b80}
/* Contrast (2026-10-06): white words on the light-to-bright orange gradient measured 2.75:1 at its
   top. The orange buttons keep the gradient in the deeper accent orange: every point of it is at
   least 4.9:1 with white (WCAG AA). */
.app-cta, .app-next, .app-page .app-flow-body .contact-form button[type="submit"], .app-page .section .contact-form button[type="submit"] {
  background: linear-gradient(180deg, #c4480a 0%, #b8430a 45%, #a63c07 100%);
}
/* Dark theme: the current step's name uses a lighter blue on the dark card (#1d64d8 measured 3.1:1). */
[data-theme="dark"] .app-stepper li[data-state="current"]{color:#7fb0ff}
@media (prefers-color-scheme: dark){:root:not([data-theme]) .app-stepper li[data-state="current"]{color:#7fb0ff}}

/* Phone text floor (2026-10-06): on phones nothing reads under 14px. Generated from the rules in
   this file that set a smaller size; desktop sizes above are unchanged. */
@media (max-width:760px){.app-page .app-flow-body .form-note,.app-page .app-step-label,.app-review-edit,.app-review-row dd small,.app-review-row dt,.app-stepper li,.app-tile-sub,.app-welcome-note,.apt-history span,.apt-sample,.apt-step span,.apt-tech span,.apt-when span{font-size:0.875rem!important}}