/* motion.css - the motion/voice status chip, the on-device diagnostic every portal shares. /wall/shared/motion.css, loaded by /wall/p1/ .. /wall/p7/ (R319/s312 SESSION-BIND, piece portals-shared; brief items 6, 12, 20, 21, 27, 28, 29, 33). Host: reference/meridian-landing/shared/motion.css, md5 a7d693d3caa8c55c87443705186025f2. THE CONTRACT THIS FILE KEEPS WITH motion.js IS ITS SELECTOR SET. The module writes exactly one class list - "mchip is-" plus "is-idle" - and one dataset flag, and it paints nothing itself (strict CSP: no inline style anywhere in the module). So the host's selectors all survive here, every one, and tests/portal-gate.mjs re-reads the host stylesheet and reddens if one of them is missing. What changed is what each selector PAINTS, and the four additions named below. WHY THE PAINT CHANGED - three floors the host colours could not meet on bind.com: 1. THE LADDER (brief 12). Every channel of every colour here sits on the goldenratiocolors ladder {0,14,37,60,97,158,195,218,241,255} and carries its grc code, its host original and the snap distance. Six colours, six tokens, no fourth-hand rgba. 2. SEVEN UNKNOWN SCENES. The host chip was dark GLASS: rgba(11,13,18,.82) over whatever the portal was painting, with backdrop-filter: blur(10px). Its contrast was therefore a different number on each of the seven doors and unmeasurable on all of them, because six scenes animate. The ground here is OPAQUE, so the chip's contrast is one fact - ink 17.09:1, every state ink >= 9.78:1 - that holds on p5's cream field exactly as it holds on p2's black one. backdrop-filter goes with the transparency: it was a per-frame GPU cost on a fixed element sitting on top of six animated scenes, on the phones this chip exists for. 3. THE IDLE GHOST. The host faded the whole chip to opacity .28 after 3.2 s (see the acquired bar, reference/ENTRYWALL-meridian/p2/meridian-p2__390x844__fold.png - "NO MOTION DATA - MOVE THE PHONE" is barely legible there, and the effective contrast of a .28 element over an unknown animated scene cannot be computed at all). Idle here COLLAPSES instead: the pill becomes its 44x44 glyph at full strength, the line goes visually-hidden but stays in the accessibility tree and stays the live region, and a tap opens it again. Quieter, still a 44 px target, and every colour in the collapsed state is still a measured number. 4. THE RING THAT LAGGED THE TRUTH (the accessory this round removed - and it was THIS PORT'S, not the host's, which is the reason it is named here). The host transitioned opacity .4s and transform .3s, both of which served the fade-to-ghost that item 3 replaced. Rather than delete that pair outright this port first swapped it for a 300 ms border-color fade, on the reasoning that a state change should ease rather than snap. Read back off this piece's own capture, evidence/portals-shared-r1/accessory/BEFORE__ring-at-40ms.png, that was worse than nothing: 40 ms into the change the words already read LISTENING and the glyph is already the microphone, and the ring is still #6e7784 - a colour belonging to neither state and on no ladder. Sampled across the fade it paints #6e7784, then #9bbef7, before arriving at #9ec3ff. A chip whose whole job is to say what is true right now spent 300 ms of every state change saying something that was not, in a colour the deployment does not own. It is gone, and nothing replaced it: state, words, glyph and ring flip in the same frame, the reduced-motion block below is one rule shorter, and the AFTER samples beside the capture record 0 off-ladder frames. The pulse stays - it is the only animation left, it means exactly one thing (a microphone is open), and Law 6 switches it off. ADDED SELECTORS (declared; the gate requires the host's set to survive and every addition to be named): @font-face "JetBrains Mono" the vendored face; the chip is instrumentation and reads as the SYSTEM speaking rather than the scene, in one voice across all seven doors. Root-absolute url on purpose: this stylesheet is fetched from /wall/shared/, so a relative url would resolve to /wall/fonts/. .mchip__tx the text span. It carries aria-live now (motion.js change (c)), and it is the flex child that must be allowed to shrink: min-inline-size 0 and overflow-wrap keep ASL Law 3 (zero horizontal overflow) true at 320 px. .mchip.is-idle .mchip__tx the collapse, above. @media (forced-colors: active) every state ink collapses to CanvasText there, so the state is carried by the WORDS and by motion.js's glyph swap (compass for motion, microphone for voice), never by colour alone. ASL v2: Law 1 no vh unit of any kind is used. Law 2 the only media queries here are PREFERENCE queries (reduced motion, forced colours) - there is no viewport query in this component stylesheet. Law 5 the target floor is min-block-size, never a height. Law 6 reduced motion is a hard stop, not a shortening. Law 7 nothing here is a progressive dependency; the file needs no @supports because it asks for nothing that can be absent. */ @font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 400 800; font-display: swap; } .mchip{ /* ---- the palette: six colours, all on the ladder, all measured on --mchip-ground -------------------- */ --mchip-ground: #0e0e0e; /* grc111 host rgba(11,13,18,.82) -> 14,14,14 snap 5.10 now opaque */ --mchip-ink: #f1f1f1; /* grc888 host #e8ecf4 -> 241,241,241 snap 10.72 17.09:1 on --mchip-ground */ --mchip-edge: #616161; /* grc444 host rgba(232,236,244,.22) ring 3.12:1 on --mchip-ground (non-text floor 3:1) */ --mchip-ask: #ffda61; /* grc985 host #ffd76a -> 255,218,97 snap 9.49 14.21:1 on --mchip-ground */ --mchip-ok: #61f1c3; /* grc486 host #7defb4 -> 97,241,195 snap 31.83 13.68:1 on --mchip-ground; = the estate's --dawn-pulse */ --mchip-err: #ff9e9e; /* grc955 host #ff9c9c -> 255,158,158 snap 2.83 9.78:1 on --mchip-ground */ --mchip-voice: #9ec3ff; /* grc569 host #a8ccff -> 158,195,255 snap 13.45 10.76:1 on --mchip-ground */ --mchip-inset: 14px; /* the host's 14px, now measured from the safe area rather than the edge */ /* sits under the exit veil (2147483000) so it can never cover the leave-frame. right/bottom stay PHYSICAL because env(safe-area-inset-*) is physical; the sizing below is logical. */ position:fixed; right: calc(var(--mchip-inset) + env(safe-area-inset-right, 0px)); bottom: calc(var(--mchip-inset) + env(safe-area-inset-bottom, 0px)); z-index:2147482000; box-sizing:border-box; display:flex; align-items:center; gap:8px; min-block-size:44px; padding:10px 14px; background:var(--mchip-ground); color:var(--mchip-ink); border:1px solid var(--mchip-edge); border-radius:999px; font:700 12px/1.25 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing:.08em; cursor:pointer; -webkit-tap-highlight-color:transparent; max-inline-size:min(88vw, 340px); text-align:left; } .mchip svg{ flex:0 0 auto; } .mchip__tx{ min-inline-size:0; overflow-wrap:anywhere; } /* idle: the chip collapses to its glyph rather than fading to a ghost. The line stays in the accessibility tree (it is the button's name and the live region), it is only unpainted. */ .mchip.is-idle{ padding:0; inline-size:44px; min-inline-size:44px; justify-content:center; } .mchip.is-idle .mchip__tx{ position:absolute; inline-size:1px; block-size:1px; margin:-1px; padding:0; overflow:hidden; white-space:nowrap; border:0; clip-path:inset(50%); } /* hover and focus do not re-open it (that would jump the layout under the pointer); they brighten the ring, and the TAP re-opens it - so nothing here is reachable only through :hover. */ .mchip.is-idle:hover{ border-color:var(--mchip-ink); } .mchip.is-idle:focus-visible{ border-color:var(--mchip-ink); } .mchip.is-ask{ border-color:var(--mchip-ask); color:var(--mchip-ask); } .mchip.is-ok{ border-color:var(--mchip-ok); color:var(--mchip-ok); } .mchip.is-err{ border-color:var(--mchip-err); color:var(--mchip-err); } .mchip.is-listen{ border-color:var(--mchip-voice); color:var(--mchip-voice); } .mchip.is-listen svg{ animation:mchip-pulse 1.1s ease-in-out infinite; } .mchip.is-media{ border-color:var(--mchip-voice); color:var(--mchip-voice); } /* a ring that works over ANY of the seven scenes: the 4 px halo is the chip's own opaque ground, and the 2 px outline is drawn on top of that halo - so the outline's contrast is 17.09:1 whatever is behind. */ .mchip:focus-visible{ outline:2px solid var(--mchip-ink); outline-offset:2px; box-shadow:0 0 0 4px var(--mchip-ground); } @keyframes mchip-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.25); } } @media (prefers-reduced-motion: reduce){ .mchip.is-listen svg{ animation:none; } } @media (forced-colors: active){ .mchip{ background:Canvas; color:CanvasText; border-color:CanvasText; } .mchip.is-ask, .mchip.is-ok, .mchip.is-err, .mchip.is-listen, .mchip.is-media{ color:CanvasText; border-color:CanvasText; } .mchip.is-idle:hover, .mchip.is-idle:focus-visible{ border-color:Highlight; } .mchip:focus-visible{ outline-color:Highlight; box-shadow:none; } }