/* ===== PHONE / APP VIEW ===== */
/* stylelint-disable crossroads/radius-token-only -- this file draws a phone: a
   device bezel, its inset screen, and the OS-styled cards inside it. Those
   corners are hardware and platform geometry rather than Crossroads surfaces, so
   they sit off the five-step scale on purpose — the scale tops out at 8px and a
   44px bezel drawn at 8px stops reading as a phone. Circles and pills in here
   still use --cr-radius-full. Applies to the whole file; every rule below is
   part of the mockup. */
.appwrap { display:none; min-height:100vh; padding:40px 20px 80px; align-items:flex-start; justify-content:center;
  background:
    radial-gradient(80% 60% at 50% 0%, color-mix(in srgb,var(--cr-color-action-primary-fill) 16%, transparent), transparent 70%),
    var(--cr-color-surface-background); }
.cr[data-view="app"] .webview { display:none; }
.cr[data-view="app"] .appwrap { display:flex; }
.phone { width:390px; max-width:100%; height:800px; border-radius:44px; background:var(--cr-color-surface-default);
  border:1px solid var(--cr-site-hairline); box-shadow:var(--cr-shadow-elevation-4), 0 0 0 11px color-mix(in srgb,var(--cr-color-text-primary) 88%, #000);
  padding:12px; position:relative; overflow:hidden; }
.cr[data-theme="dark"] .phone { box-shadow:var(--cr-shadow-elevation-4), 0 0 0 11px #0c0c12; }
.phone .notch { position:absolute; top:20px; left:50%; transform:translateX(-50%); width:120px; height:26px; background:color-mix(in srgb,var(--cr-color-text-primary) 88%, #000); border-radius:var(--cr-radius-full); z-index:5; }
.cr[data-theme="dark"] .phone .notch { background:#0c0c12; }
.screen { height:100%; border-radius:34px; overflow:hidden; background:var(--cr-color-surface-background); display:flex; flex-direction:column; position:relative; }
.pstatus { display:flex; justify-content:space-between; align-items:center; padding:14px 22px 6px; font-size:.72rem; font-weight:700; }
.pappbar { display:flex; align-items:center; gap:10px; padding:6px 18px 12px; border-bottom:1px solid var(--cr-site-hairline); }
.pappbar .t { font-weight:800; font-size:1.05rem; letter-spacing:-.01em; }
.pappbar .t small { display:block; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cr-color-text-secondary); font-weight:700;}
.pbody { flex:1; overflow:auto; padding:16px; }
.pbody::-webkit-scrollbar { width:0; }
.ppage { display:none; } .ppage.active { display:block; animation:pageIn .4s var(--cr-motion-ease-standard); }
.pbottom { display:flex; border-top:1px solid var(--cr-site-hairline); background:var(--cr-color-surface-default); }
.pbottom button { flex:1; padding:11px 0 16px; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:.6rem; font-weight:700; color:var(--cr-color-text-secondary); }
.pbottom button svg { width:20px; height:20px; }
.pbottom button[aria-current="page"] { color:var(--cr-color-action-tertiary-fill); }
.p-hero { padding:20px; border-radius:20px; background:linear-gradient(135deg,var(--cr-color-action-primary-state-hover),var(--cr-color-action-tertiary-state-hover)); }
.p-hero h2 { font-family:var(--cr-font-sans); font-size:1.6rem; line-height:1.1; margin-top:8px; }
.p-hero p { font-size:.82rem; color:var(--cr-color-text-secondary); margin-top:8px; }
.pstat { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.pstat .c { padding:14px; border-radius:14px; background:var(--cr-color-surface-default); border:1px solid var(--cr-site-hairline); }
.pstat .c .n { font-family:var(--cr-font-sans); font-size:1.7rem; font-weight:600; }
.pstat .c .l { font-size:.7rem; color:var(--cr-color-text-secondary); font-weight:600; }
.plist { display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.pli { display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:14px; background:var(--cr-color-surface-default); border:1px solid var(--cr-site-hairline); }
.pli svg { width:18px; height:18px; color:var(--cr-color-action-primary-fill); }
.pli .n { font-weight:700; font-size:.86rem; } .pli .m { font-size:.72rem; color:var(--cr-color-text-secondary); }
.pli .cta { margin-inline-start:auto; color:var(--cr-color-text-secondary); }
.psec-title { font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--cr-color-text-secondary); margin:18px 4px 10px; }
.papp-swatches { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.papp-swatches .s { height:64px; border-radius:12px; display:flex; align-items:flex-end; padding:8px; color:var(--cr-color-action-primary-on-fill); font-size:.66rem; font-weight:700; }
.p-toggle { display:flex; gap:8px; align-items:center; padding:12px 14px; border-radius:14px; background:var(--cr-color-surface-default); border:1px solid var(--cr-site-hairline); margin-bottom:8px; }
.p-toggle .n { font-weight:700; font-size:.84rem; flex:1; }