/** * Droplets' member-page stylesheet. * * LOAD-BEARING LINK ORDER: linked AFTER `/join-view.css`. Two `#app.activity-plate` rules in * the 768 block tie join-view.css on specificity with no `!important` and win on source order * alone; linked first the desktop card silently keeps the phone's padding and clips the CTA. * `stylesheet-integrity.test.js` asserts it. Design notes: docs/design/stylesheet.md */ :root { /* `light dark` so the UA draws the caret, the selection highlight and form internals in the scheme the page is actually in — index.html declared nothing, so it got light chrome under a dark palette. */ color-scheme: light dark; --forest: var(--color-button-accent-default); --forest-tap: var(--color-button-accent-tap); --green: var(--color-accent-alt-default); --tap-firm: var(--color-button-fill-tap); --danger: var(--color-error-default); --font-heading: var(--pi-font-heading); --font-body: var(--pi-font-body); --font-mono: var(--pi-font-mono); --track-heading: var(--pi-track-heading); --track-tight: var(--pi-track-tight); --track-body: var(--pi-track-body); --lh-heading: var(--pi-lh-heading); --lh-para: var(--pi-lh-para); --lh-copy: var(--pi-lh-copy); --lh-single: var(--pi-lh-single); /* ---- Pi .colorset values, light --------------------------------------- */ --bg: #FAF3EA; --surface: #FCFAF7; --field: #FFFFFF; --tile: #FBF6EE; /* `#message/background` #F3EADE. A LITERAL, not `var(--color-message-background)`: the generated mirror's dark value differs. DECISIONS.md D-AE; `stylesheet-integrity` pins it. */ --tan: #F3EADE; /* `join-view.css` reads this with a `url(...)` fallback. That fallback was load-bearing on `guest.html`, which declared no `--watermark`; on today's one host this file supplies it, and `join-view.css` keeps the fallback by policy. `browser-plate-edge` asserts all three reads. */ --watermark: url("/img/pi-watermark.svg"); /* THE SAME MARK UNCROPPED, for the one surface that draws it whole. `pi-watermark.svg` is the PHONE's window onto it — viewBox `0 0 394 676` over geometry that runs `-378.15 … 631.95`, so two thirds of the mark is outside the file's own viewport and no `background-size` can bring it back. This variant is the SAME BYTES with the root tag re-pointed at the geometry's own box, plus `preserveAspectRatio="none"` because the frame squashes it (1010.1x775.6 drawn from artwork that is 1010.1x852). Declared beside `--watermark` at all three sites rather than switched in the rule that spends it, so dark is right by construction. */ --watermark-wide: url("/img/pi-watermark-wide.svg"); --mint: #DBEDE2; --mint-br: #BEDBCB; --ink: #3E3A35; --muted: #6B6258; --faint: #897F73; --border: #EBE3D5; --hairline: #D9D2C5; --dash: #CFC3B0; --edge-stroke: #FFFFFF; --skeleton: #C9BCA8; --tap: #F5EFE5; --av-bg: #F5EADC; --av-you-bg: #E5DCEF; --av-you-fg: #4A2E6F; --seat-held: #A79B8A; /* ONE DECLARATION, LIGHT AND DARK: `.dp-spot` and the header's waiting seats are the same designed fill (`#button/disabled-fill`), so the empty seat defers to the token the DS Avatar's `[data-state="pending"]` binds instead of restating it. The dark blocks used to carry #3E3A35 here — `--av-bg`'s dark, not this colour's — which is the divergence `miniapp-tokens.css` corrects. */ --seat-free: var(--miniapp-color-avatar-pending-fill); --shadow: rgba(14,14,12,.16); --shadow-soft: rgba(94,68,15,.11); /* `Button.disabled_fill`. THE DARK FILL DIVERGES FROM THE FRAMES AND IS LEFT ALONE: their #1F3B2E would push the dark disabled label from 1.67:1 to 1.29:1. Reported, not changed. */ --btn-off: #B7C0B3; --bg-fade: rgba(250,243,234,0); --hair-bubble: rgba(14,59,38,0.1); /* THE PAGE, AS OPPOSED TO THE CARD — spent by the `[data-presentation="fullscreen"]` rule at the foot of this palette, which is where the reasoning lives. Equal to `--bg` here on purpose: `#base/background` and this app's light page colour are the same #FAF3EA, so the rule is inert in light and stays honest rather than leaning on a `var()` fallback that would drift the day light's `--bg` moved. (doc: bg-page) */ --bg-page: #FAF3EA; --bg-page-fade: rgba(250,243,234,0); /* THE INK FOR A LABEL ON A SEAT TINT. This list is SCRAPED, not trusted (`test/unit/page-claims.test.js`), and it has been wrong twice. (doc: on-accent) WHAT READS IT NOW: nothing. PI-9852 took every letter on a seat tint to the design system Avatar's themed `#base/contrast`; dropping the declaration is its own change. `--on-accent-dim` HAS NO READER LEFT; kept declared because the untracked `docs/handoff/r6-feel-shots/verify-feel.mjs` names it. Untracked, not a guard: nothing in the repo would go red if this line went. (doc: on-accent) */ --on-accent: #FBF6EE; --on-accent-dim: #B9D4C4; --mark-plate: #FAF3EA; --paper: var(--bg); --accent: var(--green); --ink-deep: var(--forest); --ink-deep-tap: var(--forest-tap); --av-fg: var(--forest); } /* ---- dark ---------------------------------------------------------------- Two blocks deliberately: the media query is the OS fallback, `[data-theme]` is Pi's own setting and outranks it. `stylesheet-integrity.test.js`'s "app.css's two dark blocks" compares the two declaration SETS, so a token edited in one and not the other fails here. THIS LINE USED TO NAME `verify-feel.mjs` INSTEAD, and that was a claim of coverage that did not exist: `.gitignore` excludes every app's `docs/` subtree, so that script is in no clone, and no npm script or workflow runs it. (doc: dark) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* --forest, --forest-tap, --green, --tap-firm and --danger are absent from both dark blocks on purpose: they alias design-system tokens in :root, and those already carry their own dark values. */ --bg: #242322; --surface: #1A1918; --field: #2D2B29; --tile: #2D2B29; --tan: #35322E; --watermark: url("/img/pi-watermark-dark.svg"); --watermark-wide: url("/img/pi-watermark-wide-dark.svg"); --mint: #21322A; --mint-br: #2E4A3A; --ink: #FCFAF7; --muted: #B4AFA7; --faint: #8F877D; --border: #595249; --hairline: #595249; --dash: #595249; --edge-stroke: #47423B; --skeleton: #47423B; --tap: #2D2B29; --av-bg: #3E3A35; --av-you-bg: #3A3050; --av-you-fg: #CBBBE4; --seat-held: #504A42; --shadow: rgba(0,0,0,.55); --shadow-soft: rgba(0,0,0,.45); --btn-off: #3A4A40; --bg-fade: rgba(36,35,34,0); --hair-bubble: #595249; --bg-page: #131212; --bg-page-fade: rgba(19,18,18,0); /* 0.17, HALF WHAT SHIPPED, and the first number on this edge off a real device: Pi's rim peaks 58-63 over a 23 fill where .34 renders 105 over 27. A COLOUR, not an opacity -- the hue is ground-independent and the alpha is not. (doc: disc-rim) */ --disc-rim: rgba(255,255,255,.17); /* A LITERAL IN DARK, NOT `--field`, because the disc has since been photographed BESIDE PI'S OWN GLASS IN ONE FRAME rather than against a top-nav export: Pi's chevron reads 29,29,28 on this page's 36,35,34 -- BELOW it -- where `--field` at 82% composites to 43,41,40, ABOVE it. #1D1D1C at the same 82% composites to 30,30,29. (doc: disc-plate) */ --disc-plate: #1D1D1C; /* The head disc's edge is NOT a uniform rim in dark. ITS OWN TOKEN, so that retiring it here does not move `--disc-rim`, which the three iOS platters and delete mode's pill still spend through `--ios-glass-rim`. (doc: disc-spec) */ --disc-head-rim: transparent; /* THE SPECULAR that replaces it. `from 90deg` -- NOT 0 -- is what lands the .17 lobes on br/tl and the two page-colour stops on bl/tr, which is the phase measured off Pi's control; unrotated the lit arcs sit on the wrong diagonal. Masked to the outer .75px by the rule that spends it. (doc: disc-spec) */ --disc-spec: conic-gradient(from 90deg, rgba(255,255,255,.15) 0deg, rgba(255,255,255,.17) 45deg, rgba(255,255,255,.15) 90deg, rgba(255,255,255,.02) 135deg, rgba(255,255,255,.15) 180deg, rgba(255,255,255,.17) 225deg, rgba(255,255,255,.15) 270deg, rgba(255,255,255,.02) 315deg, rgba(255,255,255,.15) 360deg); } } :root[data-theme="dark"] { /* Same five omissions as the media-query block above. */ --bg: #242322; --surface: #1A1918; --field: #2D2B29; --tile: #2D2B29; --tan: #35322E; --watermark: url("/img/pi-watermark-dark.svg"); --watermark-wide: url("/img/pi-watermark-wide-dark.svg"); --mint: #21322A; --mint-br: #2E4A3A; --ink: #FCFAF7; --muted: #B4AFA7; --faint: #8F877D; --border: #595249; --hairline: #595249; --dash: #595249; --edge-stroke: #47423B; --skeleton: #47423B; --tap: #2D2B29; --av-bg: #3E3A35; --av-you-bg: #3A3050; --av-you-fg: #CBBBE4; --seat-held: #504A42; --shadow: rgba(0,0,0,.55); --shadow-soft: rgba(0,0,0,.45); --btn-off: #3A4A40; --bg-fade: rgba(36,35,34,0); --hair-bubble: #595249; --bg-page: #131212; --bg-page-fade: rgba(19,18,18,0); --disc-rim: rgba(255,255,255,.17); --disc-plate: #1D1D1C; --disc-head-rim: transparent; --disc-spec: conic-gradient(from 90deg, rgba(255,255,255,.15) 0deg, rgba(255,255,255,.17) 45deg, rgba(255,255,255,.15) 90deg, rgba(255,255,255,.02) 135deg, rgba(255,255,255,.15) 180deg, rgba(255,255,255,.17) 225deg, rgba(255,255,255,.15) 270deg, rgba(255,255,255,.02) 315deg, rgba(255,255,255,.15) 360deg); } /* ---- THE PAGE COLOUR, WHEN PI WEB GAVE THIS PAGE THE WHOLE PANEL --------- `--bg` above is the CARD value, and it is right for a card: dark `#card/default` is #242322 in both design systems (plaza `primitives.ts`, `pi-design/tokens.css`). It is the wrong colour for a PAGE, and dark is where the two part company — light's `#base/background` and `#card/default` are near enough that nobody could see it. WHAT IT LOOKED LIKE. Pi Web draws its own surfaces from `#base/background`, #131212 in dark: the sidebar's neighbour, the band under its group-chat composer, the lot. This page painted #242322 across the panel between them, so the seam showed wherever Pi's own surface met this one — reported against the composer band, which is the one place they touch on a straight edge. The frames say the panel is Pi's page: `11048:49775` binds the 1160-wide `Page` beside the 280 sidebar to `#base/background`, and `11048:49777` is the node. WHY `data-presentation` IS THE RIGHT GATE, and it is the whole of the risk here. `presentation.js` seeds that attribute from `pi_presentation` before the first paint, and `applyPresentation` re-states it on `init`. Only PI WEB ever sets it: iOS and Android build their own URLs and append no such parameter, and neither puts `presentation` in its `init` reply either — argued at length in `presentation.js`. So a native host keeps #242322, which is what its own container draws, and every value in the dark block measured against this page's 36,35,34 keeps its premise (the iOS head disc's `--disc-plate` most of all, which is composited against it by hand and is `[data-platform="ios"]`-gated). AND ONLY `fullscreen`. Pi Web's other presentation is the 705 card — its own frame and `pi.presentSheet`'s route sheet — where this page IS a card and #242322 is the answer. That arm is `data-presentation="card"` and this rule does not touch it. NOT IN THE TWO DARK BLOCKS, deliberately: they are palette lists that `stylesheet-integrity.test.js` compares set-against-set, and a conditional override belongs to neither. One rule, no media query, because the tokens it spends carry the scheme — `--bg-page` is declared in all three palettes, which is also what keeps this inert in light. `--bg-page-fade` follows for the two `linear-gradient(to bottom, var(--bg-fade), var(--bg) 12px)` masks: a fade whose transparent end still names the old page colour hazes grey through a premultiplied interpolation. (doc: bg-page) */ :root[data-presentation="fullscreen"] { --bg: var(--bg-page); --bg-fade: var(--bg-page-fade); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } /* An icon is the size it says it is (F2-17). The reset's `max-width: 100%` on a grid item resolves in WebKit against a track still being sized: a 20px mark came out 8px and painted 3.67px of ink -- present, hit-testable and INVISIBLE. Chromium is fine, so no browser test could see it. (doc: icon-size) */ .ic { max-width: none; } html { background: var(--bg); } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-weight: 500; letter-spacing: var(--track-body); line-height: var(--lh-copy); /* `var(--safe-top)`, not `env()` inline: body's padding, `.head-pinned`'s offset and the cap are ONE mechanism and must resolve the same number. The bottom inset is read again on `.bottom-cta`, which is fixed and inherits none of this -- those two are NOT one. */ padding: var(--safe-top, 0px) 0 env(safe-area-inset-bottom); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } /* Cap the status-bar strip: body's padding IS the strip and padding SCROLLS, while `.head-pinned` sticks below it, so at some offset the strip holds what passes under it. Fixed, and on `body` rather than the pinned row, so it MOVES NOTHING. (doc: safe-top-cap) */ body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: var(--safe-top, 0px); background: var(--bg); z-index: 11; pointer-events: none; } input, textarea, .link-url { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } /* TWO gutters, and this is the one statement of it (F2-12): content at 24, the BAR at 16 where Pi floats its own controls. `.head` takes the difference back. (doc: gutters) */ :root { --gutter: 24px; --bar-gutter: 16px; } :root { --dp-preview-measure: 345px; } /* `position: relative` and NOT a transform, as the desktop rule says: `.thread-foot` anchors to this foot under Pi's keyboard, and a transform would take the `fixed` bands with it. */ #app { max-width: 460px; margin: 0 auto; padding: 20px var(--gutter) 40px; position: relative; } .serif { font-family: var(--font-heading); font-weight: 400; } .eyebrow { font-family: var(--font-body); font-weight: 500; font-size: 10px; letter-spacing: 0; line-height: var(--lh-single); text-transform: uppercase; color: var(--green); } /* `--color-text-accent`, not `--forest` -- `--forest` IS a button FILL, spent as heading ink across this surface while the guest surface next door used the right token. Canonical note: four other rules cite it. (doc: heading-ink) */ h1.title { font-family: var(--font-heading); font-size: 24px; font-weight: 400; letter-spacing: var(--track-heading); color: var(--color-text-accent); margin: 0; line-height: 1.1; } .sub { font-size: 14px; color: var(--muted); letter-spacing: var(--track-body); line-height: var(--lh-copy); margin: 0; } :root { --pi-chrome-top: 0px; --pi-chrome-lead: 0px; --pi-chrome-trail: 0px; } /* Pi's group-chat composer, drawn NATIVELY OVER this web view. READ AS ITS TWO PARTS, NEVER AS THE TOTAL: the payload's `bottom` is composer PLUS keyboard, and reading it paid the keyboard TWICE once Pi stopped resizing the web view. `--kb` AND `--pi-host-kb` ARE TWO MEASUREMENTS OF ONE KEYBOARD, so `max` and never `+`; they differ by the home indicator (302 host vs 336 page on an 852pt phone). (doc: foot-room) */ :root { --pi-composer-h: 0px; --pi-host-kb: 0px; --pi-foot-room: calc(var(--pi-composer-h, 0px) + max(var(--kb, 0px), var(--pi-host-kb, 0px))); } /* THE GLASS ENDS WHERE PI'S CHROME BEGINS. All four layers are `position: fixed` over the LAYOUT viewport and Pi draws its composer natively over the bottom of it, so each put its foot -- and every control on it -- under a band the page cannot see: 96pt with the composer alone, 432 with Pi's field focused. `--kb` is 0 exactly then, so it cannot see any of it. ONE TERM for all four, the same one the two bands lift by — three spend it here and the sheet's scrim spends it through the hook below. Every wrapper takes `top/left/right` longhands: a later `inset` shorthand would re-declare this at equal specificity and win. (doc: foot-room) */ .menu-wrap, .pi-dialog-scrim, .press-wrap { bottom: var(--pi-foot-room, 0px); } /* The sheet's scrim computes its own `bottom` from `--pi-sheet-foot` and the card its plate from `--pi-sheet-surface` (pi-design `css/sheet.css`); both facts are still ours. `--bg` and not a literal, so the fullscreen rule above keeps re-pointing the plate with the page. */ .sheet-wrap { --pi-sheet-foot: var(--pi-foot-room, 0px); --pi-sheet-surface: var(--bg); } :root { --safe-top: env(safe-area-inset-top, 0px); } :root { --dt: 1; -webkit-text-size-adjust: calc(var(--dt) * 100%); } .head { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; /* Back out to `TopNavigation`'s own 16, so the page's controls and the host's floating pair sit on one line. See `--bar-gutter`. */ margin-left: calc(var(--bar-gutter) - var(--gutter)); margin-right: calc(var(--bar-gutter) - var(--gutter)); padding-left: max(0px, calc(var(--pi-chrome-lead) - var(--bar-gutter))); padding-right: max(0px, calc(var(--pi-chrome-trail) - var(--bar-gutter))); } .head .grow { flex: 1; } /* THE SETUP HEADER'S TRAILING CLOSE HAS NO RULE OF ITS OWN, AND THAT IS THE FIX (PI-9779). IF YOU EVER RE-ADD ONE, WRITE IT `.head .step-close` (0,2,0): a bare `.step-close` is (0,1,0), ties `.icon-btn` and LOSES on source order -- which is how the old `display: none` never applied while passing every desktop assertion. (doc: step-close) */ /* ---- delete mode's header row (PI-9709 P2a) ----------------------------- `1fr auto 1fr` RESERVES THE EXIT'S OWN WIDTH WITHOUT MEASURING IT. Absolutely centred, the count was drawn UNDER the word Cancel from AX1 up -- measured. (doc: delete-header) */ /* NO `position: relative` HERE, AND THAT IS A TRAP THIS ROW HAS FALLEN INTO ONCE: `.head-pinned` is already `sticky`, i.e. positioned, and `.head[data-delete-mode]` (0,2,0) would beat it (0,1,0) and quietly UNSTICK the header in delete mode. */ .head[data-delete-mode] { display: grid; grid-template-columns: 1fr auto 1fr; } .head[data-delete-mode] .grow { grid-column: 2; min-width: 0; pointer-events: none; } .head[data-delete-mode] .thread-title { font-family: var(--font-body); font-size: 18px; font-weight: 500; line-height: var(--lh-copy); color: var(--ink); text-align: center; } .head[data-delete-mode] #pick-done { grid-column: 3; margin-left: auto; color: var(--green); } /* ---- the iOS arm: Cancel is a GLASS PILL (PI-9852 item 7) --------------- THE HEIGHT IS 40 AND NOT THE FRAME'S 44, DELIBERATELY: 44 makes this header 3.1px taller on the way into the mode, moving a reader mid-thread. Two e2e cases pin it. (doc: delete-cancel) */ [data-platform="ios"] .head[data-delete-mode] #pick-done { padding: 0 16px; border-radius: 999px; /* THE TOKENS, NOT A FOURTH COPY OF THE RECIPE (PI-9835 §4.1): this plate said it was reused rather than re-derived and then drifted anyway, 30 against the menus' 40. The rim comes with it -- Pi's own control is the same `glassEffect` call as the head discs one row up -- and the lift does not. (doc: ios-glass) */ background: var(--ios-glass-fill); -webkit-backdrop-filter: var(--ios-glass-blur); backdrop-filter: var(--ios-glass-blur); box-shadow: var(--ios-glass-rim); } /* Restated because the rule above is (1,3,0) and `.text-btn:active` is (0,2,0): without it the pill is the one control on the row that does not darken, and the press cases read the TRANSITION rather than the fill, so nothing would have said so. */ [data-platform="ios"] .head[data-delete-mode] #pick-done:active, [data-platform="ios"] .head[data-delete-mode] #pick-done.pressed { background: var(--tap-firm); } .head-hosted { min-height: var(--pi-chrome-top); } .head-pinned.head-hosted { min-height: var(--pi-chrome-top); padding-top: 0; margin-bottom: 16px; } /* The painted band below the row travels with the margin it covers. */ .head-pinned.head-hosted::after { height: 16px; } /* Every wait is ONE box in ONE place, and `margin: 0` is the whole of the defect it replaced: a margin on a `fixed; inset: 0` box put the dots 33px off centre, stepped them 33px mid-wait as the inset resolved, and jumped 144px at the handover. (doc: boot-wait) */ #boot-wait, #app > .loading { position: fixed; inset: 0; margin: 0; } /* A CUSTOM PROPERTY BECAUSE A SECOND FILE DOES ARITHMETIC WITH IT: `join-view.css` states the preview's wash edge as a length from `#app`'s top and this row is what lies between. Written as a literal in both places they drift -- which is D-43. (doc: head-disc) */ :root { --head-disc: 40px; } .head .icon-btn { width: var(--head-disc); height: var(--head-disc); } /* `:not(.flat)` rather than deleting `.flat` from the list: a bare `.head .icon-btn` still MATCHES a flat button and would keep the `backdrop-filter` -- a blurred circle with no fill, i.e. the reported defect with the colour taken out. DECISIONS.md D-3. (doc: head-glass) */ .head .icon-btn:not(.flat) { background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); } /* ---- AND ON iOS THE BARE ONES ARE GLASS TOO ------------------------------ THE DIAMETER IS 48 HERE, WHICH REVERSES WHAT THIS COMMENT USED TO SAY: the 40 it cited is `RoundIconButtonStyle`, the NON-glass button's style. `TopNavigation.glassCircle` carries a literal 48, and the reference measures 48.14pt. Costs the row 8px on iOS. (doc: ios-head) */ [data-platform="ios"] { --head-disc: 48px; } /* ---- AND IT RIDES PI'S LINE, WHICH THE DIAMETER ALONE DID NOT BUY --------- Pi's own disc sits 12..60 below the safe area (`browser-chrome-band`'s 12 + 48 + 6); this row starts every head at `#app`'s 20, so the two were 8pt apart once Pi's glass filled its slot. A NEGATIVE BLOCK MARGIN and not a smaller `padding-top`: `-8 / +8` leaves the margin box 48, so `.head` stays 68 tall and `join-view.css` goes on subtracting what it subtracts (D-43). `min(8px, ...)` and not a bare 8: the lift is only correct when there is a band to lift into. (doc: ios-head) */ [data-platform="ios"] .head .icon-btn { --head-lift: min(8px, var(--pi-chrome-top)); margin-top: calc(-1 * var(--head-lift)); margin-bottom: var(--head-lift); } /* It names `:not(.flat)` too, which it did not used to: `--disc-plate` is themed, so without that dark would draw the bare disc on `--field` beside a filled one still on `--surface` -- two materials on one row. Pi's own three controls are real Liquid Glass as of apple-pudding 59f15ad65, so this row's disc is now a match rather than an approximation in isolation -- and below iOS 26 Pi's stay bare while this arm does not follow them down. (doc: ios-head) */ /* AND THE POPUPS' ✕ IS THE SAME CONTROL, so it wears the same material: `openSheet`'s head emits the ••• button's exact class list and only its ANCESTOR differs, so the four rules below take a `.sheet-wrap .sheet-head` twin rather than a second copy of the recipe. The twins land at the same specificity as the `.head` arms they join — (0,4,0), and (0,5,0) for the pressed fill, which the plate would otherwise swallow. Reported off staging: "the glass effect should be applied to all the X buttons of the popup UI". NOT the DIAMETER and not the `--head-lift` margins: those line the disc up with Pi's own floating control, which no sheet head is beside, and `.sheet-head .icon-btn`'s 40 is what `browser-frame-heads` measures. The HOSTED heads (`hostedSheetHead`, `setupSheetHead`) are NOT `.sheet-wrap` and are left bare — a separate question, raised in `evidence/63.md`. */ [data-platform="ios"] .head .icon-btn.flat, [data-platform="ios"] .head .icon-btn:not(.flat), [data-platform="ios"] .sheet-wrap .sheet-head .icon-btn { background: color-mix(in srgb, var(--disc-plate) 82%, transparent); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); } /* ---- AND THE PLATE HAS A LIT EDGE ----------------------------------------- Pi's rim is BRIGHTER in G and B than the interior, which is what says specular highlight rather than antialiasing. Two overlay ASSETS were built and both under-deliver against this one line, so none ships. `.5px`, not `1px`, which reads as a border. The light arm has since been photographed beside Pi's own glass in one frame and moves nothing. IN DARK THIS RULE PAINTS NOTHING: `--disc-head-rim` is `transparent` there and the specular below is the whole edge -- the shape was wrong in dark, not only the alpha. (doc: disc-rim) */ [data-platform="ios"] .head .icon-btn.flat, [data-platform="ios"] .head .icon-btn:not(.flat), [data-platform="ios"] .sheet-wrap .sheet-head .icon-btn { box-shadow: inset 0 0 0 .5px var(--disc-head-rim); } /* ---- AND IN DARK THE EDGE IS A SPECULAR, NOT A RING (PI-9835) -------------- Photographed in ONE FRAME against Pi's real Liquid Glass back chevron, Pi's dark edge is TWO LIT LOBES on one diagonal with the other falling to page colour, 2.27px wide at half maximum; the uniform inset above draws an even circle 1.3px wide -- the wrong shape AND 41% under on width. `::before` AND NOT A SECOND BOX-SHADOW because a conic cannot be a shadow. `@supports` BECAUSE THE MASK IS THE RING: unmasked, the conic would fill the whole disc, which is worse than no specular -- so an engine that cannot mask draws no edge on the dark disc at all, a dead branch on `[data-platform="ios"]` rather than a live gap. Light paints none of this: `--disc-spec` is `none` at `:root`. (doc: disc-spec) */ @supports ((-webkit-mask: radial-gradient(#000, #000)) or (mask: radial-gradient(#000, #000))) { [data-platform="ios"] .head .icon-btn.flat::before, [data-platform="ios"] .head .icon-btn:not(.flat)::before, [data-platform="ios"] .sheet-wrap .sheet-head .icon-btn::before { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: var(--disc-spec); -webkit-mask: radial-gradient(closest-side, #0000 calc(100% - .75px), #000 calc(100% - .75px)); mask: radial-gradient(closest-side, #0000 calc(100% - .75px), #000 calc(100% - .75px)); } } [data-platform="ios"] .head .icon-btn.flat:active, [data-platform="ios"] .head .icon-btn.flat.pressed, [data-platform="ios"] .sheet-wrap .sheet-head .icon-btn:active, [data-platform="ios"] .sheet-wrap .sheet-head .icon-btn.pressed { background: var(--tap-firm); } :root { --glass-tint: color-mix(in srgb, var(--bg) 68%, transparent); /* The radius on its own, because the plated head below spends it WITHOUT the saturation — one 18 rather than two. */ --glass-blur-radius: blur(18px); --glass-blur: saturate(150%) var(--glass-blur-radius); --disc-rim: #FFFFFF; --disc-plate: var(--surface); /* SEPARATELY NAMEABLE FROM `--disc-rim`, which in light it simply IS -- this arm does not move. A shared token would have taken the three iOS platters' rim and delete mode's pill with it, and those are not this edge. And no specular in light: Pi's light rim measures 255 against a 244 fill, a genuinely uniform opaque white. (doc: disc-spec) */ --disc-head-rim: var(--disc-rim); --disc-spec: none; /* ---- THE iOS PLATE, DECLARED ONCE (PI-9835 §2.2, §4.1) ----------------- A mini app is a WKWebView: no `pi.*` method presents a `UIMenu` and no CSS reaches `glassEffect`, so the material can only be approximated -- and the rule is that it is approximated ONCE. Six surfaces were citing "the same plate the iOS menus wear", three at `blur(40px)` and three at `blur(30px)`. The RIM was the half being invented: `2561:10794` is `Liquid Glass - Regular - Medium`, Shadow / Fill / Glass Effect with no stroke node, so a `1px solid var(--border)` on an iOS platter is a Material hairline on an iPhone. `test/unit/ios-glass-material.test.js` keeps the who-spends-what list true. (doc: ios-glass) */ --ios-glass-fill: color-mix(in srgb, var(--field) 92%, transparent); /* 40 is `2561:10794`'s own backdrop-blur; the 0.92 beside it is that frame's 0.6 declined on a measurement. Nothing may set a different radius per surface. (doc: ios-plate) */ --ios-glass-blur: blur(40px); /* The material's edge, not a drawn line: half a pixel catches light, a whole one is a border. */ --ios-glass-rim: inset 0 0 0 .5px var(--disc-rim); /* A popover's own elevation, and NOT part of the material: `#pick-done` takes none of it and the two alerts have their own. A surface's lift is the surface's; its plate is not. */ --ios-glass-lift: 0 6px 20px var(--shadow-soft), 0 1px 2px var(--shadow-soft); --confetti-z: 30; } /* A translucent plate with nothing blurred behind it is just a washed-out one, so an engine without the filter keeps the opaque token. ONE block, where there used to be four identical ones beside four copies of the recipe. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root { --glass-tint: var(--bg); --glass-blur: none; --ios-glass-fill: var(--field); --ios-glass-blur: none; } } .head-pinned { position: sticky; top: var(--safe-top, 0px); /* Over the content (`.rx-row` is 1) and under everything that covers the page: `.bottom-cta` 20, the confetti 30, `.sheet-wrap`/`.menu-wrap` 40, `.press-wrap` 45, `.pi-dialog-scrim` 50, `.toast` 60. */ z-index: 10; /* Eat `#app`'s padding-top into the painted box and give it back, so the band reaches the status bar. LONGHANDS: the shorthand would zero the `--pi-chrome-lead` padding above, which is what keeps the avatars out from under Pi's chevron. */ margin-top: -20px; padding-top: 20px; background: var(--glass-tint); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); } .head-pinned::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 18px; background: var(--glass-tint); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); } .head-pinned[data-delete-mode]::after { border-bottom: 1px solid var(--color-divider-stroke); } /* The iOS thread head is SOLID: this row carries avatars, a wrapping title AND a subtitle, and any ramp under that much text let message rows read straight through it (PI-10358; Figma 16046:74272 `I16046:74581` adds a visible "Solid Background" layer for group chats). Still no backdrop-filter -- the two stacked slabs it replaced stepped an avatar 27/255. (doc: thread-fade) `.head-thread` is the thread screen NAMING ITSELF: on iPhone Safari `stepHeadRow` draws an app-owned pinned head too, so exclusions alone took the gallery and the share error with it. */ [data-platform="ios"] #app > .head-pinned.head-thread:not([data-delete-mode]) { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; } [data-platform="ios"] #app > .head-pinned.head-thread:not([data-delete-mode])::after { /* The row's own box is the whole band; the tail keeps its 18px height (delete mode's divider hangs on it) and paints nothing, so the band does not extend past the header's content. */ background: none; backdrop-filter: none; -webkit-backdrop-filter: none; } /* ---- the same row over the activity plate (PI-9491 D8) ------------------ The glass is a slab of the PAGE's colour, which on a plated screen is not what is under it. WHY EVERY BROWSER CAPTURE MISSED IT: the plate was scored at x=4, inside `#app`'s padding and outside this row's border box. `>`, and the properties rather than the two variables, because re-pointing `--glass-blur` would reach any button nested here. (doc: plate-glass) */ @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { #app.activity-plate > .head-pinned, #app.activity-plate > .head-pinned::after { background: transparent; backdrop-filter: var(--glass-blur-radius); -webkit-backdrop-filter: var(--glass-blur-radius); } /* ITS OWN RULE RATHER THAN A FOURTH SELECTOR ON THE GROUP ABOVE: an invalid selector invalidates the WHOLE group it is in, so an engine without `:has()` would lose the pinned row's glass along with this. Glass and not `transparent` -- plated screens do scroll. */ body:has(#app.activity-plate)::before { background: transparent; backdrop-filter: var(--glass-blur-radius); -webkit-backdrop-filter: var(--glass-blur-radius); } } .grow { flex: 1; min-width: 0; } .tight > * { min-width: 0; } .accent { color: var(--forest); } /* THE DISC, THE PILL, THE TEXT BUTTON, THE FIELD AND THE CHIP ARE `pi-design`'s NOW (`css/components.css`'s `[data-size="cta"]`, `[data-size="disc"]` and `[data-variant="app"]` arms, plus `css/controls.css`). Every emitter carries the package class beside its own, so the rules below that qualify one of them still select. What stays here is what the package cannot know: where the head's disc sits, its material, and every screen-scoped override. */ /* AND THIS ONE, WHICH HAS TO STAY AT (0,2,0). As a package compound it would be (0,3,0) and outrank `.icon-btn:active` below, so a bare disc stopped darkening under a finger while drawing correctly in every screenshot -- `platform-idioms` caught it. */ .icon-btn.flat { background: transparent; } /* THE FLAT SURFACES ARE THE PACKAGE'S NOW. The card and the empty state are `[data-variant="app"]` arms of `.pi-card`/`.pi-empty` (pi-design `css/components.css`); the notice, the banner and the badge are `css/surfaces.css`; the link preview is `css/preview.css` and the roster row `css/person-row.css`. What is left in this file is what the package cannot know: where a surface sits on a screen, and this app's own content rules ON one. (doc: card, notice, badge, banner) */ .prompt { font-family: var(--font-heading); font-size: 18px; font-weight: 400; letter-spacing: var(--track-body); line-height: var(--lh-heading); } .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; margin-bottom: 10px; } /* NO `.row.on`: nothing under `public/` has ever rendered `class="row"`, and the pair was being cited as live evidence in `--on-accent`'s comment. `.row` itself is deliberately NOT deleted -- it is a box model, not a contrast claim, with its own blast radius. */ .row .name { font-size: 16px; font-weight: 500; line-height: var(--lh-single); } .row .hint { font-size: 12px; color: var(--muted); line-height: var(--lh-single); margin-top: 2px; } .tick { width: 20px; height: 20px; margin: 0 6px; border-radius: 50%; border: 1.5px solid var(--muted); flex: 0 0 auto; display: grid; place-items: center; } .tick.on { background: var(--green); border-color: var(--green); color: #fff; font-size: 12px; } /* The two STATES stay: `.pi-chip[data-variant="app"]` is the box, and these are this app's own two inks on it. Both are (0,2,0) and tie the package arm, so this file's later link order is what decides them. */ .chip.on { background: var(--tap-firm); color: var(--ink); } .chip.spent { color: var(--dash); } /* THE FREE SEAT'S FILL, AND NOTHING ELSE — the box, the face, both sizes and the seat ink are `.pi-avatar`'s now (pi-design `css/avatar.css`) and every `.av` emitter carries the class. This pair has no upstream equal, and (0,1,0) is load-bearing: `[data-ink="seat"]` is (0,2,0) and must still win a seat that is taken. */ .av { background: var(--av-bg); color: var(--av-fg); } .locked { position: relative; background: var(--surface); border: 1px solid var(--color-divider-stroke); border-radius: 10px; padding: 16px; overflow: hidden; margin-left: 32px; min-height: 139px; } .locked .blur { filter: blur(7px); opacity: .45; } .locked .badge-ghost { width: 48px; height: 25px; border-radius: 48px; background: var(--dash); margin-bottom: 14px; } .locked .bar { height: 11px; border-radius: 6px; background: var(--skeleton); margin-bottom: 9px; } .locked .bar.s { width: 58%; } .locked .over { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; text-align: center; padding: 0 20px; font-size: 12px; line-height: var(--lh-copy); color: var(--color-text-accent); } .locked .over > span { max-width: 200px; } .locked .over .lock-mark { display: inline-flex; color: var(--muted); } .countdown { margin: -4px 0 12px 44px; font-size: 12px; color: var(--muted); } /* THE SHEET IS `.pi-sheet*` NOW (pi-design `css/sheet.css`) — the scrim, the card, both `data-variant`s, the head, the handle, the title, the two motion pairs and the 768px centred modal. What is left in this file is what the package cannot know: the host's foot band (the hook below), and this app's own content rules ON a sheet. (doc: sheet-tall, action-sheet) */ .sheet-tall:has(#save) { display: flex; flex-direction: column; } .sheet-tall:has(#save) > * { flex: 0 0 auto; } .sheet-tall:has(#save) > .btn { margin-top: auto; } .sheet-actions .delete-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; } /* The panel takes focus so the Tab trap has somewhere to start; it is not a control and must not draw a ring. `openDeleteChoice` moves focus onto the real buttons from there, which keep theirs. */ .sheet-actions .delete-actions:focus { outline: none; } /* THIS PAGE'S GUTTER, NOT THE COMPONENT'S: back out from `.pi-sheet`'s 24 of padding to the bar's 16, the same expression `.head` uses on a screen. The package draws the head; where the head's controls line up with Pi's own is this app's layout. */ .sheet-head { margin-left: calc(var(--bar-gutter) - var(--gutter)); margin-right: calc(var(--bar-gutter) - var(--gutter)); } .sheet-head [data-close][aria-label="Close"] { margin-left: auto; } .sheet-head .icon-btn { width: 40px; height: 40px; } /* THE HEAD STAYS WHILE THE CARD SCROLLS. `.pi-sheet` is the scroller (pi-design `css/sheet.css`), so an overflowing sheet took the grab handle and the ✕ up with the content -- measured on Group members at 390x844 with 16 rows, the ✕ from y=311.4 to y=-221.6 on one wheel, i.e. off the card entirely. Reported off staging. STICKY AND NOT A SCROLLING BODY: the card has no body element to give `overflow-y`, and adding one moves the customize sheet's `margin-top: auto` Save and the four desktop rules that position `.sheet-title` absolutely off `.sheet` -- a bigger change than the bug. THE CARD'S TOP PADDING IS THE HEAD'S OWN BORDER, so the head's box reaches the card's top edge and there is nothing left to line up. #287 covered that 16px strip with a spread-less `box-shadow: 0 -16px 0` instead: paint over content that is still THERE -- hit testing at the strip's middle returns a `.person-row`, and one rounded edge shows a 1px line of it while scrolling, which is what Wei saw on iOS. A TRANSPARENT BORDER AND NOT PADDING: the grab is absolute against the head's PADDING box, which a border carries down with the row and padding would not. Row 63's glass head reuses this box — a `backdrop-filter` can only blur the strip the head's own box covers. Numbers: `evidence/70.md`. `z-index`, because a positioned descendant of the content would otherwise paint over the head it scrolls under — the same rung `.head-pinned` takes on a screen. */ .sheet-wrap > .sheet:has(> .sheet-head) { padding-top: 0; } .sheet-wrap > .sheet > .sheet-head { position: sticky; top: 0; z-index: 1; border-top: 16px solid transparent; background: var(--pi-sheet-surface); } /* THE OUTER CORNER AND THE INNER SCROLL, MEMBERS ONLY. `.pi-sheet` is normally both the rounded-corner clip (`border-radius` + `overflow-y: auto`) AND the element the reader scrolls, in one box -- scrolling it forces the browser to re-rasterize that corner clip on every frame along with the content. Real WebKit can momentarily lose the clip mid-scroll and let a hairline of whatever sits BEHIND THE WHOLE MODAL (the thread page, not the member list) show through the rounded corner -- reported again on a TestFlight/staging build as the thread header's own group avatar bleeding through Group members' top-left corner while scrolling the roster. `browser-sheet-swipe.test.js`'s geometry checks (this rule's sibling above) read a SETTLED `getBoundingClientRect()`, which cannot see a live rasterization glitch, so nothing there could have caught it and nothing there regresses: the head still sits flush with the card's top edge at rest, this only changes WHICH element scrolls. Splitting the two jobs across two boxes fixes it structurally rather than papering over a frame: `.sheet` keeps the rounding but never scrolls, so its clip is computed once and never touched by a scroll event again; `.sheet-scroll` does the scrolling and owns no corner of its own to lose. `min-height: 0` is the standard flex fix: without it a column flex item's minimum height is its own content, so the list would grow the 65dvh card instead of scrolling inside it. `:has(> .sheet-scroll)` AND NOT A BARE `.sheet-members`: `openSheet` only builds `.sheet-scroll` for a members sheet opened below 768px, and a members sheet opened AT that width keeps the flat structure the desktop block three rules down still expects -- a bare selector here zeroed that card's padding too and moved its ✕ 24px (measured x=368 against the frame's 344, `browser-desktop-layout.test.js`). */ .sheet-wrap > .sheet.sheet-members:has(> .sheet-scroll) { display: flex; flex-direction: column; overflow: hidden; padding: 0; } /* `overscroll-behavior: contain` OF ITS OWN, and not inherited from `.sheet, .menu` (below, line ~1894): that rule holds the limits of a box that scrolls, and for a members sheet `.sheet` no longer does -- `.sheet-scroll` is what has the overflow now, so it is what needs the containment or a second wheel past either end chains to the thread behind the modal, the exact defect `browser-sheet-scroll-contain` already exists to catch (codex, gpt-5.6-sol). */ .sheet-wrap > .sheet.sheet-members > .sheet-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 24px 26px; } .sheet-wrap > .sheet.sheet-members > .sheet-scroll:has(> .sheet-head) { padding-top: 0; } .sheet-wrap > .sheet.sheet-members > .sheet-scroll > .sheet-head { position: sticky; top: 0; z-index: 1; border-top: 16px solid transparent; background: var(--pi-sheet-surface); } .sheet-tall .sheet-title, .sheet:has(#answer) .sheet-title { font-size: 32px; } /* 36 AND NOT THE 24 THE INSPECTOR SHOWS: the frame's rows carry their own `py: 12` and ours declare `padding: 0`, so that 12 arrives folded into this step. `browser-frame-heads` asserts the two together. A class and not `:has()`, which would silently keep the bug. */ .sheet-members .sheet-title { margin-bottom: 36px; } .sheet .title-row { margin: 6px 0 16px; } .title-row .sheet-title { margin: 0; } /* The answer sheet is the only sheet in the app that draws a countdown, and since PI-9772 only its HOSTED presentation does — `answerSheetBody`'s `clock` option has the reasoning. The rule stays because that presentation is still built. */ .sheet .countdown { margin-left: 44px; } .sheet .sub { margin: -6px 0 16px; } /* That pull-up is tuned against `.sheet-title`'s 16px bottom: every OTHER `.sub` in a sheet sits directly under the title, and -6 against 16 is the 10px gap the design draws there. Nine sheets share it, so it stays theirs. */ /* AND THE ANSWER SHEET IS THE ONE THAT DOES NOT. `6302:124741` draws 24 between the title and the waiting line, not 10 — the four-row column is 24 / 24 / 8 / 24 ink to ink. #123 deleted this rule on the stated grounds that "PI-9772 removes the helper outright, so it has no subject left"; PI-9780 put the helper back on mobile web, so the rule has a subject again. Without it the line falls through to -6 against the title's 16 and collapses to 10 — 14 short. `margin-bottom: 0` because `.prompt-row`'s own 24 draws the next gap. */ .sheet .sub.answer-sub { margin: 24px 0 0; } /* ---- the answer sheet's column, which is now two columns --------------------- AND IT IS NOT ANSWER-SHEET-ONLY: an earlier draft said so and was wrong. Setup's answer step mounts the same `.prompt-row` inside `.sheet.sheet-hosted` at `?in=sheet`, where `.sheet .prompt-row` (0,2,0) beats `.ask-row` (0,1,0). (doc: answer-column) */ .sheet .prompt-row { margin: 24px 0; } .sheet .prompt-row:has(+ .countdown) { margin-bottom: 8px; } .sheet .prompt-row + .countdown { margin: 0 0 24px 44px; } .sheet:has(#enable) .sheet-head { height: 0; align-items: flex-start; } .sheet:has(#enable) .sheet-title { margin-top: 20px; max-width: 306px; } .sheet:has(#enable) .sub { font-size: 18px; letter-spacing: var(--track-tight); } /* The ••• menu: a popover under the header, dismissed by tapping past it. Longhands, not `inset` -- see the shared rule. The origin is unmoved, which `anchorMenu`'s viewport coordinates depend on; only the floor moves, and it reads that floor off this box. */ .menu-wrap { position: fixed; top: 0; left: 0; right: 0; z-index: 40; } /* THE PLATTER, ITS THREE PLATFORM SHAPES AND ITS MOTION ARE PI-DESIGN'S NOW (`css/components.css`, `.pi-menu[data-platform]`). The base was the **WEB** arm and is spelled as one there: `detectPlatform` answers `ios`, `android` or NOTHING, and `openMenu` writes what it answers — or `web` — onto the platter. Only the iOS PLATE is still here, below, because the material is this app's and is declared once. (doc: menus) */ /* Listed here rather than restated beside `.press-menu` so the two menus cannot drift again, which is exactly what happened once: every iOS rule named `.menu`, so the other popup kept a literal Material elevation on the surface iOS users reach by gesture. */ [data-platform="ios"] .menu, [data-platform="ios"] .press-menu, [data-platform="ios"] .press-bar { /* 0.92 IS THE MEASUREMENT, not a failure to read the frame's 0.6: scored per row against a real press at 18.4, this is 8.4 and 0.6 is 42.6, with the message text legible through the Mute row. THE COLOUR-DODGE LAYER CANNOT BE BUILT HERE -- as a layer it isolates, and folded into the filter WEBKIT SILENTLY DROPS IT, which `@supports` cannot see. The recipe is spent from the tokens now, never re-derived. (doc: ios-plate) */ background: var(--ios-glass-fill); -webkit-backdrop-filter: var(--ios-glass-blur); backdrop-filter: var(--ios-glass-blur); box-shadow: var(--ios-glass-lift); } /* ---- and the RIM is the material's, not a drawn hairline (PI-9835 §2.2) ---- THE TWO MENU PLATTERS ONLY: `.press-bar` is `ReactionEmojiBar`, a different component whose own frame specifies a stroke. `border: 0` AND NOT A TRANSPARENT ONE -- the 1px was paying for geometry as well as ink, and gone, the frame's own 24px icon slot arrives. The lift is restated through the same token because this rule outranks the one above on source order alone and a `box-shadow` replaces rather than adds. (doc: ios-glass) */ [data-platform="ios"] .menu, [data-platform="ios"] .press-menu { border: 0; box-shadow: var(--ios-glass-rim), var(--ios-glass-lift); } /* MULTILINE ONLY, so it stays an element rule: `.pi-field[data-variant="app"]` declares neither, and a one-line input must not be draggable. */ textarea { resize: vertical; line-height: var(--lh-copy); } .btn.ghost { background: transparent; color: var(--faint); font-size: 14px; letter-spacing: var(--track-tight); padding: 10px; min-height: auto; } .link { display: block; width: 100%; background: none; border: none; font-family: inherit; font-size: 14px; font-weight: 500; letter-spacing: var(--track-tight); line-height: var(--lh-single); color: var(--faint); padding: 10px; } #answer { display: block; } #count { margin: 5px 0 14px; } /* AT THE PACKAGE'S DEPTH, AND THAT IS THE WHOLE OF THIS EDIT: the invalid ring used to be `input.bad` (0,1,1), which the field arm's `border` shorthand (0,2,0) now outranks -- so a renamed-too-long field would have kept its ordinary border with nothing to say so. */ .pi-field[data-variant="app"].bad { border-color: var(--danger); } .rename-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 16px; } .rename-actions .btn { flex: 0 0 96px; width: 96px; min-height: 40px; margin-top: 0; border-radius: 10px; padding: 8px 16px; font-size: 16px; line-height: 1.1; letter-spacing: var(--track-body); } .btn.tertiary { background: none; color: var(--green); } .btn.tertiary:active, .btn.tertiary.pressed { background: var(--tap); } /* The title against the frame's 24 top gutter: `.sheet`'s own padding-top is 16 and `head: false` leaves the heading first in the box, so 8. BODY/M AND NOT `.sheet-title`'s Grenette 24: `6121:111283` letters this dialog's title in the body face at all breakpoints, which is what QA filed against Web and Android. Scoped to the rename sheet alone — every other sheet is still headed in Grenette. The iOS arm below is (0,3,0) and redeclares every one of these properties, so its system face is untouched. */ .sheet-rename .sheet-title { font-family: var(--font-body); font-size: 18px; font-weight: 500; line-height: var(--lh-copy); letter-spacing: var(--track-tight); margin: 8px 0 16px; } /* ---- THE ANDROID/WEB CONTAINER IS A CENTRED CARD, NOT A BOTTOM SHEET ------- THE FLAG COMES DOWN. The `rename, ios-alert` section of `stylesheet.md` recorded this as "the CONTAINER stays this app's bottom sheet ... Flagged for design, not silently redrawn": `6121:111283` is the shared Pi dialog, i.e. a CENTRED 345 card, and the build kept `openSheet`'s bottom sheet pending a decision. QA filed it from staging on both surfaces, so the decision is made and this is it. NOT ONE NUMBER HERE IS TYPED. `6121:111283` is the frame `pi-design` already implements as `.pi-dialog[data-width="input"]`, and every value below is that component's own token -- 345, `--pi-radius-dialog`, `--pi-space-6`, `--color-modal-stroke`, `--shadow-modal-shadow`. Re-deriving them here is how one dialog becomes two dialogs a release later; the stylesheet is linked AFTER `pi-design.css` (see the link-order note in the desktop block), so the tokens resolve. The CONTAINER is still `.sheet-wrap`, and that is load-bearing rather than lazy: it carries the scrim, the `--kb` offset, `holdBackground`, `dismiss`'s paired animations and `startThreadPoll`'s `covered()`. Wearing the dialog's SKIN is the change; becoming `.pi-dialog` would be a rewrite of all five. `:not([data-platform="ios"])` AND THAT GUARD IS THE WHOLE SAFETY OF THIS BLOCK. These rules are (0,5,0) and the iOS alert below is (0,4,0), so on any property both declare these would WIN -- silently replacing a tuned system alert with a product dialog on the one platform that was already right. The guard, not source order, is what stops it: order cannot settle a specificity difference. `:root` rather than `html` for the same reason the (0,4,0) note gives -- the class count is the point. AND THE MEDIA QUERY IS GONE -- PI-10174. It used to read `max-width: 767.98px`, and its own comment gave the reason: the desktop block "already centres this dialog at 400 in a window that has room", so an ungated block "would quietly narrow every desktop reader's card to 345". That reasoning treated 400 as a DESIGN NUMBER. It is not one. 400 is `pi-design`'s GENERIC `.pi-sheet-scrim > .pi-sheet` desktop modal -- what every bottom sheet in this app becomes above 768 -- and no rename frame anywhere says it. `14514:139915` is a 1440x1024 DESKTOP frame and the dialog inside it is `14514:140468 Android/Web_Rename`, 345 wide, the same component the phone arm draws. So the query was not separating two arms; it was letting the desktop reader fall through to a sheet default that happened to be nearby, and QA filed the result from Chrome at 1366. One frame, one card, every width. `browser-rename-shape.test.js` pinned the 400 and is flipped with this. Its own comment conceded the case was guarding "the query itself, unwitnessed" rather than a frame. AND THE PLATE IS NOT DECLARED HERE, WHICH IS A DECISION AND NOT AN OMISSION. QA filed this card from dark, where it plates `#131212` on a page the scrim has taken to `#090808` -- a 1.07:1 step, a card that reads as a card only because the FIELD inside it has a colour. The obvious fix is `--color-modal-background`, and it is WRONG: read off the node, `6121:111283` and `14514:140468` both fill with `#base/background`, i.e. `--color-background` -- #FAF3EA light, #131212 DARK. The plate QA photographed is the plate the frame draws. `pi-design`'s own `.pi-dialog` carries the warning in as many words ("the token whose NAME fits is not the token the design uses", `components.css:965`), and `--pi-sheet-surface: var(--bg)` (line 256) already lands on it under Pi Web's fullscreen presentation, line 179. What the card was missing is the STROKE and the SHADOW -- which the frame draws at #3E3A35 in dark and which is the whole of what separates that card from that page -- and both were gated behind the media query above. So the un-gating IS the fix, and a fill declaration would have been a second, invisible-in-light regression on top of it. AND THE CORNER IS 20, WHICH THE FIGMA EXPORT DISAGREES WITH AND LOSES -- SETTLED, PI-10174. Three dialog nodes export `rounded-[16px]`: `6121:111283`, `14514:140468` and `6589:31651` (the compact Delete modal). This block spends `--pi-radius-dialog`, which is 20. The tie is broken by the platform that IMPLEMENTS the section rather than by this stylesheet guessing: Android's `PiModal` names itself "the canonical home for the 'Standardize modals in Android' Figma section", cites this same file key, and pins `DialogCornerRadius = 20.dp` (`core/ui/.../theme/Shapes.kt:40`). The same composable independently confirms the two decisions above it -- `#base/background` fill, 1px `#modal/stroke`, `Shadow3`, and `ModalMaxWidth = 345dp`. Two shipping implementations against one export; the export is stale. NO CHANGE, and this paragraph exists so the next reader who diffs the node against the build stops here instead of "fixing" it. (doc: rename) */ /* `safe center` FOR THE REASON THE DESKTOP SIBLING DECLARES IT on this same box: a plain `center` on a flex item taller than its container pushes the item's TOP out, where no scroller can bring it back. `max-height: 100%` plus `.sheet`'s own `overflow-y: auto` should cap the card before that — but THIS is the box that shrinks hardest, because with the keyboard up the glass is `innerHeight - --pi-foot-room`, which is exactly what KB-9 drives. Declared rather than reasoned away: the desktop arm's author thought it worth stating for the same element, and a silent omission here reads as an oversight. */ :root:not([data-platform="ios"]) .sheet-wrap:has(.sheet-rename) { align-items: center; align-items: safe center; justify-content: center; box-sizing: border-box; padding: var(--pi-space-6, 24px); } :root:not([data-platform="ios"]) .sheet-wrap > .sheet.sheet-rename { width: 345px; max-width: 100%; max-height: 100%; border-radius: var(--pi-radius-dialog, 20px); border: 1px solid var(--color-modal-stroke); box-shadow: var(--shadow-modal-shadow); padding: var(--pi-space-6, 24px); } /* A card that is not attached to the bottom edge does not slide up from it -- the same argument the iOS arm makes for borrowing `menu-in-ios`. `dialog-in` is the PI DIALOG's own curve, already in this file for `.pi-dialog`, and this card is the Pi dialog: borrowing it beats inventing a fourth. Both directions are listed in the reduced-motion block, at the equal specificity that block relies on winning by ORDER -- it sits later. Above 768 this replaces `pi-sheet-up`, which is the sheet rising from an edge this card is not attached to either. */ :root:not([data-platform="ios"]) .sheet-wrap > .sheet.sheet-rename { animation: dialog-in .2s cubic-bezier(.32,.72,0,1) both; } :root:not([data-platform="ios"]) .sheet-wrap.closing > .sheet.sheet-rename { animation: dialog-in-exit .16s ease-in reverse both; } /* SPECIFICITY IS DELIBERATE: `.sheet-wrap > .sheet` in the desktop block is (0,2,0) and sits LATER, so a plain `[data-platform="ios"] .sheet-rename` loses on an iPad in a wide window -- the one place both arms are live at once. (0,4,0) settles it. */ [data-platform="ios"] .sheet-wrap:has(.sheet-rename) { align-items: center; justify-content: center; box-sizing: border-box; padding: 24px; } [data-platform="ios"] .sheet-wrap > .sheet.sheet-rename { width: 300px; max-width: 100%; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 34px; /* The tokens, for the reason the block declaring them gives: this rule's own comment already said the plate was "reused rather than re-derived", and it had still drifted a 10px blur radius away from the menus it names. The rim is NOT taken — that is §5.1's call on this surface, and it is one token spend when somebody makes it. The lift stays this surface's own. */ background: var(--ios-glass-fill); -webkit-backdrop-filter: var(--ios-glass-blur); backdrop-filter: var(--ios-glass-blur); box-shadow: 0 8px 40px var(--shadow-soft); } [data-platform="ios"] .sheet-wrap > .sheet.sheet-rename { animation: menu-in-ios .22s cubic-bezier(.32,.72,0,1) both; } [data-platform="ios"] .sheet-wrap.closing > .sheet.sheet-rename { animation: menu-ios-exit .14s ease-in reverse both; } /* ---- THE ALERT'S FACE, and why it stopped being this app's --------------- This used to say the face is this app's, because DM Sans ships Medium alone. THAT SUBSTITUTION IS THE DEFECT THE DESIGNER FILED: measured against Pi's own SwiftUI alert, box, corner, field and pills already agree to within a point -- only the LETTERING does not. The system face is used INSIDE THE ALERT ONLY. (doc: ios-alert) */ [data-platform="ios"] .sheet-wrap > .sheet.sheet-rename, [data-platform="ios"] .sheet-wrap > .sheet.sheet-actions, [data-platform="ios"] .pi-dialog-scrim > .pi-dialog { --alert-face: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif; } [data-platform="ios"] .sheet-rename .sheet-title { font-family: var(--alert-face); font-weight: 600; font-size: 17px; line-height: 22px; letter-spacing: -0.43px; text-align: center; color: var(--ink); margin: 0; padding: 8px; } /* `fills/secondary` — a translucent system grey, so it is correct on both schemes without a second value, which is why iOS uses it. */ [data-platform="ios"] .sheet-rename #name { height: 52px; padding: 0 16px; border: none; border-radius: 26px; background: rgba(120, 120, 128, .16); color: var(--ink); /* The field's own text is `Body/17` Regular in `11048:55190` and in the native alert beside it — a form field is not a heading, so it takes the 400 of the sentence and not the 600 of the title. */ font-family: var(--alert-face); font-weight: 400; font-size: 17px; line-height: 20px; letter-spacing: -0.43px; } /* The invalid border still has to read with no border to colour, so it becomes the ring the platform draws for the same state. */ [data-platform="ios"] .sheet-rename #name.bad { box-shadow: inset 0 0 0 1px var(--danger); } /* 19 is the frame's `pb` on `Text Field(s)`, which the column's own 10 gap sits on top of. */ [data-platform="ios"] .rename-actions { gap: 16px; margin-top: 19px; } [data-platform="ios"] .rename-actions .btn { flex: 1 1 0; width: auto; min-height: 48px; border-radius: 100px; padding: 13px 16px; font-size: 17px; line-height: 22px; letter-spacing: -0.43px; /* An alert's actions are Regular; only the title is heavier. `.btn` sets 500 at (0,1,0), so this (0,3,0) rule is what decides it. */ font-family: var(--alert-face); font-weight: 400; } [data-platform="ios"] .rename-actions .btn.tertiary { background: rgba(120, 120, 128, .16); color: var(--ink); } /* `accents/blue` #08f, and it is NOT Pi green on purpose: this alert is drawn as the system's, not as the product's, and softening it to `--forest` would be overruling the design. */ [data-platform="ios"] .rename-actions .btn#save:not([disabled]) { background: #08f; color: #fff; } [data-platform="ios"] .rename-actions .btn#save:not([disabled]):active, [data-platform="ios"] .rename-actions .btn#save:not([disabled]).pressed { background: #0070d6; } /* THE WAIT IS NOT BROKEN BY THIS: `.btn[disabled] .dots i` paints the discs in `--color-text-accent` and NOT `currentColor`, so the label colour here cannot reach them. */ [data-platform="ios"] .rename-actions .btn#save[disabled] { background: rgba(120, 120, 128, .16); color: rgba(0, 136, 255, .4); } /* ---- the CONFIRMATIONS: `.pi-dialog` is an alert on iOS too --------------- `openConfirm` IS FOUR DIALOGS, so the split goes on `.pi-dialog` and not a Leave-only class. AND THE ONE THING THE FRAME GETS WRONG: it hides Cancel on a destructive confirm whose only other exits are the scrim and Escape -- not reproduced, and `browser-confirm-shape` goes red if it ever is. `components.css` reaches (0,4,0), so the action rules below meet it or beat it. */ [data-platform="ios"] .pi-dialog-scrim > .pi-dialog { /* 300x200 with 14 padding and a 10 column gap (`11048:55173`). `--pi-space-*` is the Pi dialog's rhythm and this is not the Pi dialog. */ width: 300px; gap: 10px; padding: 14px; border: 0; border-radius: 34px; /* `sheet/iphone/top-radius` */ /* The tokens, same reason as the rename alert beside it — and the rim is likewise §5.4's, not this item's. */ background: var(--ios-glass-fill); -webkit-backdrop-filter: var(--ios-glass-blur); backdrop-filter: var(--ios-glass-blur); box-shadow: 0 8px 40px var(--shadow-soft); } [data-platform="ios"] .pi-dialog .pi-dialog__title { padding: 8px 8px 0; } [data-platform="ios"] .pi-dialog .pi-dialog__body { padding: 0 8px 8px; } [data-platform="ios"] .pi-dialog .pi-dialog__title, [data-platform="ios"] .pi-dialog .pi-dialog__body { font-family: var(--alert-face); font-size: 17px; line-height: 22px; letter-spacing: -0.43px; text-align: left; color: var(--ink); } [data-platform="ios"] .pi-dialog .pi-dialog__title { font-weight: 600; } [data-platform="ios"] .pi-dialog .pi-dialog__body { font-weight: 400; } /* `11048:55183`: the row is the card's full width and the actions divide it. */ [data-platform="ios"] .pi-dialog .pi-dialog__actions { gap: 16px; justify-content: stretch; } [data-platform="ios"] .pi-dialog .pi-dialog__actions .pi-btn { flex: 1 1 0; width: auto; min-width: 0; height: 48px; padding: 13px 16px; } /* ---- ONE SET OF ACTIONS FOR BOTH iOS POPUPS ------------------------------- `.delete-actions` is delete mode's confirm, and it was the last popup on this arm still in Pi's clothes -- a filled red pill and a green Cancel in DM Sans. Only the FACE and the variant colours are shared: `9178:77623` keeps it a bottom sheet on every arm and `browser-delete-mode-confirm` pins its 345/24/26 card, so the box does not move. `:is()` takes its most specific arm, so these are (0,3,0) base, (0,4,0) variant, (0,5,0) hover/active. `components.css` reaches (0,4,0), NOT (0,3,0) -- `components.css:200` `.pi-btn[data-variant="negative"][data-size="medium"]:active` sets `color` -- so the variant and hover/active rules meet it or beat it, and the base rule ties that file's (0,3,0) block and wins on source order (`index.html` loads pi-design at :37, app.css at :44). 600 CORRECTS the 400 this block shipped (PI-9852 item 8/11 — QA read the labels against the system alert). The body sentence stays 400: `11048:55177` draws it so, and the title/body pair is what stops the alert reading flat. */ [data-platform="ios"] :is(.pi-dialog__actions, .delete-actions) .pi-btn { border: 0; border-radius: 100px; font-family: var(--alert-face); font-weight: 600; font-size: 17px; line-height: 22px; letter-spacing: -0.43px; } [data-platform="ios"] :is(.pi-dialog__actions, .delete-actions) .pi-btn[data-variant="tertiary"], [data-platform="ios"] :is(.pi-dialog__actions, .delete-actions) .pi-btn[data-variant="negative"], [data-platform="ios"] :is(.pi-dialog__actions, .delete-actions) .pi-btn[data-variant="tertiary"]:hover, [data-platform="ios"] :is(.pi-dialog__actions, .delete-actions) .pi-btn[data-variant="negative"]:hover { background: rgba(120, 120, 128, .16); } [data-platform="ios"] :is(.pi-dialog__actions, .delete-actions) .pi-btn[data-variant="tertiary"], [data-platform="ios"] :is(.pi-dialog__actions, .delete-actions) .pi-btn[data-variant="tertiary"]:hover { color: var(--ink); } [data-platform="ios"] :is(.pi-dialog__actions, .delete-actions) .pi-btn[data-variant="negative"], [data-platform="ios"] :is(.pi-dialog__actions, .delete-actions) .pi-btn[data-variant="negative"]:hover { color: #ff383c; } [data-platform="ios"] :is(.pi-dialog__actions, .delete-actions) .pi-btn[data-variant="tertiary"]:active, [data-platform="ios"] :is(.pi-dialog__actions, .delete-actions) .pi-btn[data-variant="negative"]:active { background: rgba(120, 120, 128, .32); } [data-platform="ios"] :is(.pi-dialog__actions, .delete-actions) .pi-btn[data-variant="negative"]:active { color: #ff383c; } [data-platform="ios"] :is(.pi-dialog__actions, .delete-actions) .pi-btn[data-variant="primary"], [data-platform="ios"] :is(.pi-dialog__actions, .delete-actions) .pi-btn[data-variant="primary"]:hover { background: #08f; color: #fff; } [data-platform="ios"] :is(.pi-dialog__actions, .delete-actions) .pi-btn[data-variant="primary"]:active { background: #0070d6; color: #fff; } /* The card takes the plate the two alerts wear; the rows are a COLUMN here, so each one spans it -- `large-tertiary` sizes Cancel to its text, which is Pi's idiom. */ [data-platform="ios"] .sheet-wrap > .sheet.sheet-actions { border-radius: 34px; /* `sheet/iphone/top-radius`, as both alerts */ background: var(--ios-glass-fill); -webkit-backdrop-filter: var(--ios-glass-blur); backdrop-filter: var(--ios-glass-blur); box-shadow: 0 8px 40px var(--shadow-soft); } [data-platform="ios"] .delete-actions .pi-btn { width: 100%; } /* THE PILL IS `.pi-toast` NOW (pi-design `css/toast.css`), and ONLY its distance from the top of the window is left here: the safe area and the height of Pi's chrome are host facts the package cannot know, so it exposes one hook for them. Both insets named, in this order. Bound on `.toast` and not `:root` so it resolves on the pill itself, which is what the deleted rule did. */ .toast { --pi-toast-top: calc(var(--safe-top, 0px) + var(--pi-chrome-top, 0px) + 12px); } /* PI-9940, `12602:62915`: `Error text` sits at the centre of what is left once Pi's bar and the `BottomCTA` are paid. `#app` is the column, as it is for the setup band, `has-cta` is the band's reservation, and the bar takes the place of the 20 the way `.banner` clears it. The desktop card keeps its own height, below. 32 inset: the gutter and 8. */ #app:has(> .load-failed) { min-height: calc(100dvh - var(--safe-top, 0px) - env(safe-area-inset-bottom, 0px)); padding-top: var(--pi-chrome-top, 0px); display: flex; flex-direction: column; } /* `.empty.load-failed` AND NOT `.load-failed`: the package's `[data-variant="app"]` arm is (0,2,0) and this was (0,1,0), so the arm's `display: block` and its 28px inset would take this screen's column apart. The tie is broken by app.css being the later stylesheet. */ .empty.load-failed { flex: 1 1 auto; padding: 0 8px; display: flex; flex-direction: column; justify-content: center; } /* Body/M, as the `#enable` sheet's `.sub` is. */ .load-failed .sub { font-size: 18px; letter-spacing: var(--track-tight); } #app > .banner:first-child { margin-top: var(--pi-chrome-top); } /* The RE-TRIGGER, not a second entry: a swapped screen re-runs the package's own `pi-banner-in` by re-declaring `animation` at (1,2,0). */ #app.swap-fwd > .banner, #app.swap-back > .banner { animation: pi-banner-in .2s cubic-bezier(.32,.72,0,1) both; } /* ---- screen 13: the day's stream ---- */ /* One line, cut with an ellipsis: the title is every member's name joined, so its length is other people's to decide and the header's job is to survive it. Without this a single unbreakable name widened the whole document. */ .thread-title { font-family: var(--font-heading); font-size: 18px; font-weight: 400; letter-spacing: var(--track-body); line-height: var(--lh-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .thread-since { font-size: 14px; color: var(--muted); line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 24px, the design's `Combined Conversation` gap. The chips carry their own margin for the setup preview that also draws them, so it is cancelled here rather than added to the gap. */ .stream { display: flex; flex-direction: column; gap: 24px; margin-bottom: 12px; } .head + .stream { margin-top: 44px; } .stream > .notice { margin: 0; } /* FOUR values, not three: the three-value shorthand copies its SECOND value into the left, so `margin: -16px 0 0` silently set `margin-left: 0` and cancelled `.countdown`'s 44. Nothing declared that 0; the shorthand did. 44 is the mark's 36 plus the row's 8 gap. */ .stream > .countdown { margin: -16px 0 0 44px; } .prompt-row { display: flex; gap: 8px; align-items: flex-start; } .prompt-row .pi-mark { width: 36px; height: 36px; margin-top: 0; background-color: var(--mark-plate); } /* THE ARTWORK, not a letter in the heading face -- a photographic texture inside a letterform, which no font or flat token can spell, so it is lifted rather than traced. 66.7% x 55.6% and not a pixel pair, because this rule is worn at both 32 and 36. Figma contradicts itself on the shape and the split is real: the rounded square belongs to `.dp-pi`. (doc: pi-mark) */ .pi-mark { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--bg) url("/img/pi-app-icon.png") center / 66.7% 55.6% no-repeat; margin-top: 2px; } /* THE SAME MARK, AS A CONTROL. Everywhere Pi's face is not tappable this matches nothing, and that is the point. A TAG selector paired with the class, so the three rules that resize this mark still win. `background` is deliberately absent -- the shorthand is where the artwork lives. `border`/`padding` are not cosmetic: the UA's outset border bevels the art. */ button.pi-mark { appearance: none; -webkit-appearance: none; padding: 0; border: 0; font: inherit; color: inherit; cursor: pointer; transition: opacity .2s ease; } button.pi-mark:active { opacity: .72; transition: none; } button.pi-mark:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; } /* NOT `flex: 1`, which is `flex-basis: 0`: the bubble took every pixel of the row, 581 in the 705 card. 330 is measured off two frames, and at 393 the row has only 301 to give, so the phone frames are untouched by the cap. */ .prompt-bubble { flex: 0 1 auto; max-width: 330px; background: var(--tan); border-radius: 10px; padding: 6px 12px; } .av-stack { position: relative; flex: none; width: 40px; height: 40px; } .av-stack .av { position: absolute; top: 0; left: 0; border: 2px solid var(--paper); } .av-stack .av + .av { top: 12px; left: 12px; } /* The fade is the WHOLE of the 12, and `12px` not `12%`, because a percentage stop is relative to a box that grows with the platform's text size. The bottom 20 is CITED and an uncited 32 does not break it. `, 0px` in the `env()` because this is inside a SHORTHAND: an engine that drops it would take the fade strip and the gutter with it. (doc: pinned-cta) */ .bottom-cta { position: fixed; left: 0; right: 0; bottom: var(--pi-foot-room, 0px); z-index: 20; padding: 12px var(--gutter) calc(20px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to bottom, var(--bg-fade), var(--bg) 12px); } /* 353 AND NOT 428 — PI-10174, inviter 4: "Share button is supposed to have max width of 353px as per the defined component". Measured on F10 before this, the Share CTA computed 428 wide against `11048:49720`'s 353. IT IS THE COMPONENT'S OWN CAP, not a number off a frame: pi-design pins `.pi-btn[data-size="large"] { max-width: 22.0625rem }` — 353px — and `data-size="cta"` is the one size that sets `width: 100%` with no cap of its own, so this band was the only thing deciding it and it had picked 428. The rem spelling is the package's, so the cap tracks a root-size change the way the rest of the control does. THE BAND CANNOT INHERIT IT. `.bottom-cta` is `position: fixed; left: 0; right: 0`, so it spans the viewport and `#app { max-width: 460px }` never reaches it — which is how a CTA in a 460 column came out 428 rather than being clipped to the column. `display: flex`, not `block`, so `.btn` has ONE display value here. No visible change for a `