/* ════════════════════════════════════════════════════════════════
Production overrides for mobile-app.css.
The designer authored mobile-app.css for the in-canvas device frame
— `.smp` fills a fixed-size phone box via `position: absolute; inset: 0;
overflow: hidden`, and `.smp-scroll` is itself an absolute-positioned
pseudo-scroll surface. That model doesn't map to a real mobile browser,
which has a real viewport, a real status bar, and a real scrolling body.
These rules adapt the same shell to a live viewport WITHOUT touching
mobile-app.css. They only activate at the mobile breakpoint, paired with
visibility CSS that hides .smp-wrap above 720px.
════════════════════════════════════════════════════════════════ */
/* ---- Visibility split ----
`.smp-wrap` is hidden by default everywhere. Pages that ship a mobile
variant set `` — at ≤720px, those pages hide
`.desktop-wrap` and show `.smp-wrap`. Pages without a mobile variant
(e.g. /privacy, /terms) have no has-mobile class, so their desktop view
stays visible at any width. */
.smp-wrap { display: none; }
@media (max-width: 720px) {
body.has-mobile { margin: 0; background: #171918; }
:root[data-theme="light"] body.has-mobile { background: #FEFAF6; }
body.has-mobile .desktop-wrap { display: none; }
body.has-mobile .smp-wrap { display: block; }
/* .smp was `position: absolute; inset: 0; overflow: hidden` — adapt to
fill the viewport via normal flow so the page scrolls naturally. */
.smp {
position: relative;
inset: auto;
width: 100%;
min-height: 100vh;
min-height: 100dvh;
overflow: visible;
/* Lose the simulated dynamic-island padding; real iOS gets safe-area below. */
--status-pad: 0px;
--dock-bottom: 16px;
}
/* .smp-scroll was an absolute scroll pseudo-surface. We let the page
itself scroll instead. */
.smp-scroll {
position: static;
inset: auto;
overflow: visible;
padding-top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
padding-bottom: calc(var(--dock-h) + var(--dock-bottom) + env(safe-area-inset-bottom, 0px) + 24px);
}
/* Top bar + dock were absolute inside .smp; now they stick to the real
viewport. */
.smp-topbar {
position: fixed;
top: 0; left: 0; right: 0;
padding-top: env(safe-area-inset-top, 0px);
height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
}
.smp-dock {
position: fixed;
left: 14px; right: 14px;
bottom: calc(var(--dock-bottom) + env(safe-area-inset-bottom, 0px));
}
/* Index sheet / install prompt overlays cover the real viewport. */
.smp-sheet-scrim,
.smp-install-scrim,
.smp-sheet,
.smp-install {
position: fixed;
}
/* The sheet starts hidden — page.js toggles `.is-open` to reveal. */
.smp-sheet-scrim,
.smp-install-scrim { display: none; }
.smp-sheet { display: none; }
.smp.sheet-open .smp-sheet-scrim,
.smp.sheet-open .smp-sheet { display: block; }
.smp.sheet-open { /* lock background scroll while sheet is up */ }
body.smp-sheet-open { overflow: hidden; }
/* Don't try to render the canvas's install-prompt overlay on the live
site — it's PWA-install territory and needs separate wiring. */
.smp-install-scrim, .smp-install { display: none !important; }
/* Real form error / submitting states (page.js adds these). */
.smp-form .form-error {
color: var(--ink);
background: color-mix(in oklab, var(--champagne) 12%, transparent);
border: 1px solid var(--line-metal);
padding: 14px 16px;
font-size: 13.5px;
line-height: 1.5;
margin-top: 4px;
}
.smp-form .turnstile-row { margin-top: 4px; }
/* Touch polish */
.smp button { -webkit-tap-highlight-color: transparent; }
.smp .btn, .smp-dock .cta, .smp-dock .where { min-height: 44px; }
}
/* Below the smallest phones — keep type from going unreadable */
@media (max-width: 360px) {
.smp { --gutter: 16px; }
.smp .h-display { font-size: 36px; }
.smp .h-section { font-size: 24px; }
}
/* ============================================================
Architecture (04) — collapsible with a breathing chevron.
page.js wraps the chain + safety markup in `.smp-arch-collapse`
and toggles `.smp-arch.expanded` on the section. ============ */
.smp .smp-arch .sec-head {
cursor: pointer;
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
column-gap: 16px;
row-gap: 16px;
}
.smp .smp-arch .sec-head > .folio { grid-column: 1 / -1; }
.smp .smp-arch .sec-head > .h-section { grid-column: 1 / 2; align-self: end; }
.smp .smp-arch-chev {
grid-column: 2 / 3;
justify-self: end;
align-self: end;
width: 32px; height: 32px;
display: inline-grid; place-items: center;
color: var(--ink-3);
transition: transform 320ms cubic-bezier(.2,.7,.2,1), color 220ms ease;
}
.smp .smp-arch:not(.expanded) .smp-arch-chev {
animation: smpChevBreathe 1.8s ease-in-out infinite;
color: var(--champagne);
}
.smp .smp-arch.expanded .smp-arch-chev {
transform: rotate(180deg);
animation: none;
color: var(--ink);
}
.smp .smp-arch-collapse {
max-height: 0;
overflow: hidden;
transition: max-height 320ms cubic-bezier(.2,.7,.2,1);
}
.smp .smp-arch.expanded .smp-arch-collapse {
max-height: 4000px; /* tall enough for the chain + safety; not animated open beyond */
}
@keyframes smpChevBreathe {
0%, 100% { transform: translateY(0); opacity: 0.85; }
50% { transform: translateY(4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.smp .smp-arch:not(.expanded) .smp-arch-chev { animation: none; }
}
/* ============================================================
Security principles accordion — collapse body unless .open. ====== */
.smp .smp-acc .item .body { display: none; }
.smp .smp-acc .item.open .body { display: block; }
.smp .smp-acc .item .head { cursor: pointer; }
/* News rows are anchors now — keep them looking like blocks, not
default-coloured links. */
.smp .smp-news a.row {
display: grid;
color: inherit;
text-decoration: none;
}
.smp .smp-news a.row:hover h3 { color: var(--champagne); }
/* News filter chips — interactive cursor */
.smp .smp-chips .chip { cursor: pointer; user-select: none; }
/* Segmented "On its own / With approval / Never" — interactive cursor */
.smp .smp-seg .seg { cursor: pointer; user-select: none; }
/* Fix: About → "How we work" principles list collapsing into a single-word
column. The designer's CSS makes each a 2-col grid (16px bullet +
1fr text). That works for one text child, but the principles s have
... + trailing text, which CSS Grid auto-places into
separate cells — the trailing text falls into the 16px column on row 2
and wraps one word per line. Switch to block layout with an absolute
::before bullet so the content stays as natural inline flow. */
.smp .smp-about .principles li {
display: block;
position: relative;
padding: 14px 0 14px 28px;
border-top: 1px solid var(--line);
color: var(--ink-2);
font-size: 14px;
line-height: 1.55;
}
.smp .smp-about .principles li::before {
content: "—";
position: absolute;
left: 0;
top: 14px;
color: var(--champagne);
}
.smp .smp-about .principles li:last-child {
border-bottom: 1px solid var(--line);
}