/* ============================================================================ room-windows.css — FFV Room Windows (the fleet). The window shells for room-windows.js. The sculpted vessel is DRAWN by the FFVChassis layer (first child of .ffrw-shell, z-index 0 per the chassis contract); everything real inside the shell is lifted above it. The shell itself is transparent — the chassis silhouette IS the window, which is what makes these not-rectangles: outside the drawn path there is nothing. Desktop-only by construction: the overlays are created only on desktop by room-windows.js; the mobile bundle never sees these nodes. ============================================================================ */ /* ── overlay: a transparent stage, never a scrim ─────────────────────────── */ .ffrw-overlay { position: fixed; inset: 0; display: none; pointer-events: none; /* the canvas behind stays fully live */ background: transparent; z-index: 10300; /* windows band floor; WM assigns live z */ } .ffrw-overlay.is-open { display: block; } /* ── shell: the window itself ────────────────────────────────────────────── */ .ffrw-shell { pointer-events: auto; position: fixed; /* FFASpatial owns the rect */ display: flex; flex-direction: column; background: transparent; /* the chassis body paints the surface */ border: none; outline: none; /* Default CSS placement before spatial attaches (one frame at most). */ left: 50%; top: 50%; width: min(1040px, calc(100vw - 120px)); height: min(720px, calc(100vh - 120px)); transform: translate(-50%, -50%); } /* The chassis layer (stamped first child) fills the shell beneath content. */ .ffrw-shell .ffv-chassis-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; } /* The silhouette's own linework, shared by every vessel in the fleet — the built window shells AND the two dressed scene shells, which is why these five are keyed on .ffrw-vessel (both kinds carry it) rather than on .ffrw-shell (only the built ones do). */ .ffrw-vessel .ffvc-frame { position: absolute; inset: 0; width: 100%; height: 100%; } .ffrw-vessel .ffvc-rim-glow { stroke-width: 2.5; opacity: .55; } .ffrw-vessel .ffvc-body { stroke-width: 2.25; } .ffrw-vessel .ffvc-lip { stroke-width: 1; opacity: .8; } .ffrw-vessel .ffvc-hl { stroke-width: 1.5; opacity: .7; } /* Librarian's Desk linework */ .ffrw-shell .ffvc-shelf-rail { fill: none; stroke: rgba(224, 168, 74, .35); stroke-width: 1.5; } .ffrw-shell .ffvc-spines { fill: none; stroke: rgba(76, 201, 164, .28); stroke-width: 2; } .ffrw-shell .ffvc-bookmark { opacity: .85; } /* Wardrobe Console linework */ .ffrw-shell .ffvc-marquee circle { fill: rgba(255, 217, 166, .8); } .ffrw-shell .ffvc-curtain-fold { fill: none; stroke: rgba(227, 86, 135, .22); stroke-width: 2; } .ffrw-shell .ffvc-crest-mount path { stroke-width: 1.5; } /* Lineage Dial linework — the orrery rings and their radial ticks, the compass-rose index in the head notch, the kin ladders down the margins. */ .ffrw-shell .ffvc-orrery-ring { fill: none; stroke: rgba(85, 184, 255, .20); stroke-width: 1.4; } .ffrw-shell .ffvc-orrery-tick { fill: none; stroke: rgba(56, 212, 199, .34); stroke-width: 1.8; } .ffrw-shell .ffvc-gnomon-cross { fill: rgba(238, 248, 255, .55); } .ffrw-shell .ffvc-gnomon-pin { fill: #38D4C7; } .ffrw-shell .ffvc-branch-spine { fill: none; stroke: rgba(46, 120, 181, .42); stroke-width: 1.5; } .ffrw-shell .ffvc-branch-node { fill: rgba(56, 212, 199, .45); } /* Curator's Rail linework — the rail and its wires, the little hung gallery resting in the sag, the era gems graduated down the flanks. */ .ffrw-shell .ffvc-rail-bar { fill: none; stroke: rgba(212, 154, 56, .45); stroke-width: 2; } .ffrw-shell .ffvc-rail-shadow { fill: none; stroke: rgba(7, 28, 30, .75); stroke-width: 2.5; } .ffrw-shell .ffvc-rail-finial { fill: rgba(212, 154, 56, .55); } .ffrw-shell .ffvc-rail-ring { fill: none; stroke: rgba(212, 154, 56, .6); stroke-width: 1.3; } .ffrw-shell .ffvc-rail-wire { fill: none; stroke: rgba(212, 154, 56, .28); stroke-width: 1; } .ffrw-shell .ffvc-hung-frame { fill: none; stroke: rgba(63, 184, 178, .34); stroke-width: 1.6; } .ffrw-shell .ffvc-hung-gem { fill: rgba(212, 154, 56, .5); } .ffrw-shell .ffvc-era-gem { fill: rgba(63, 184, 178, .34); } /* Discovery Lens linework — the objective in the dome, the gimbal trunnions, the manifest's three fixed stars and its one lens arc, the focus knurl. */ .ffrw-shell .ffvc-aperture { fill: none; stroke: rgba(21, 169, 223, .34); stroke-width: 1.4; } .ffrw-shell .ffvc-reticle { fill: none; stroke: rgba(240, 250, 255, .42); stroke-width: 1.2; } .ffrw-shell .ffvc-reticle-pin { fill: rgba(154, 103, 232, .7); } .ffrw-shell .ffvc-trunnion-collar { fill: none; stroke: rgba(74, 111, 131, .8); stroke-width: 2; } .ffrw-shell .ffvc-trunnion-pin { fill: rgba(21, 169, 223, .6); } .ffrw-shell .ffvc-yoke { fill: none; stroke: rgba(74, 111, 131, .5); stroke-width: 2.2; } .ffrw-shell .ffvc-star { fill: rgba(240, 250, 255, .5); } .ffrw-shell .ffvc-lens-arc { fill: none; stroke: rgba(154, 103, 232, .2); stroke-width: 1.3; } .ffrw-shell .ffvc-knurl { fill: none; stroke: rgba(74, 111, 131, .55); stroke-width: 1.6; } .ffrw-shell .ffvc-collar-rule { fill: none; stroke: rgba(21, 169, 223, .28); stroke-width: 1.4; } /* Intake Manifest linework — the dock's bolt columns and runner ticks, the ruled manifest and its five stage chevrons, the checksum light and pips. */ .ffrw-shell .ffvc-bolt { fill: rgba(170, 181, 200, .45); } .ffrw-shell .ffvc-runner { fill: none; stroke: rgba(40, 104, 145, .6); stroke-width: 2.4; } .ffrw-shell .ffvc-rule-line { fill: none; stroke: rgba(170, 181, 200, .26); stroke-width: 1.2; } .ffrw-shell .ffvc-chevron { fill: none; stroke: rgba(85, 184, 255, .38); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .ffrw-shell .ffvc-checksum-ring { fill: none; stroke: rgba(242, 184, 75, .7); stroke-width: 1.6; } .ffrw-shell .ffvc-checksum-tick { fill: none; stroke: #F2B84B; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ffrw-shell .ffvc-pip { fill: rgba(85, 184, 255, .42); } /* Practice Board linework — the four gilded corner brackets, the chalk scoring ring and its score ticks, the pegged joinery and the foot seal. */ .ffrw-shell .ffvc-bracket-fillet { fill: none; stroke: rgba(232, 205, 151, .5); stroke-width: 2; } .ffrw-shell .ffvc-bracket-brace { fill: none; stroke: rgba(143, 112, 77, .7); stroke-width: 1.6; } .ffrw-shell .ffvc-bracket-rosette { fill: rgba(232, 205, 151, .55); } .ffrw-shell .ffvc-score-ring { fill: none; stroke: rgba(255, 249, 236, .4); stroke-width: 1.3; } .ffrw-shell .ffvc-score-eye { fill: rgba(85, 200, 184, .6); } .ffrw-shell .ffvc-score-tick { fill: none; stroke: rgba(197, 185, 163, .38); stroke-width: 1.5; } .ffrw-shell .ffvc-peg { fill: rgba(143, 112, 77, .8); stroke: rgba(232, 205, 151, .5); stroke-width: 1.2; } .ffrw-shell .ffvc-mortise { fill: none; stroke: rgba(143, 112, 77, .6); stroke-width: 1.6; } .ffrw-shell .ffvc-seal { fill: none; stroke: rgba(85, 200, 184, .3); stroke-width: 1.3; } /* Steward's Compass linework — the north rose in its lancet, the four quiet quadrants struck into the gimbal, the bearing ticks, the table's inlay. */ .ffrw-shell .ffvc-rose-cross { fill: rgba(242, 252, 249, .5); } .ffrw-shell .ffvc-rose-pin { fill: #DA9C37; } .ffrw-shell .ffvc-rose-arc { fill: none; stroke: rgba(74, 165, 152, .32); stroke-width: 1.3; } .ffrw-shell .ffvc-quad-arc { fill: none; stroke: rgba(218, 156, 55, .5); stroke-width: 1.6; } .ffrw-shell .ffvc-quad-mark { fill: none; stroke: rgba(242, 252, 249, .4); stroke-width: 1.4; } .ffrw-shell .ffvc-quad-pin { fill: rgba(74, 165, 152, .75); stroke: rgba(218, 156, 55, .6); stroke-width: 1.2; } .ffrw-shell .ffvc-bearing-tick { fill: none; stroke: rgba(171, 193, 186, .4); stroke-width: 1.5; } .ffrw-shell .ffvc-bearing-eye { fill: rgba(218, 156, 55, .55); } .ffrw-shell .ffvc-band { fill: none; stroke: rgba(218, 156, 55, .26); stroke-width: 1.2; } .ffrw-shell .ffvc-corner-mitre { fill: none; stroke: rgba(74, 165, 152, .45); stroke-width: 1.5; } /* Illuminated Index linework — the canopy tracery, the leaded lights in their cusp pockets, the one illuminated index rule, the versal's foliate work. */ .ffrw-shell .ffvc-mullion { fill: none; stroke: rgba(213, 180, 111, .5); stroke-width: 1.5; } .ffrw-shell .ffvc-sub-arch { fill: none; stroke: rgba(85, 199, 192, .34); stroke-width: 1.3; } .ffrw-shell .ffvc-quatrefoil { fill: none; stroke: rgba(213, 180, 111, .42); stroke-width: 1.3; } .ffrw-shell .ffvc-tracery-eye { fill: rgba(85, 199, 192, .6); } .ffrw-shell .ffvc-came { fill: none; stroke: rgba(109, 112, 93, .7); stroke-width: 1.6; } .ffrw-shell .ffvc-pane { fill: rgba(85, 199, 192, .3); stroke: rgba(213, 180, 111, .45); stroke-width: 1.1; } .ffrw-shell .ffvc-lead { fill: none; stroke: rgba(109, 112, 93, .7); stroke-width: 1.4; } .ffrw-shell .ffvc-rule { fill: none; stroke: rgba(213, 180, 111, .36); stroke-width: 1.3; } .ffrw-shell .ffvc-index-tab { fill: none; stroke: rgba(85, 199, 192, .34); stroke-width: 2; } .ffrw-shell .ffvc-vine { fill: none; stroke: rgba(213, 180, 111, .42); stroke-width: 1.4; stroke-linecap: round; } .ffrw-shell .ffvc-rosette { fill: rgba(213, 180, 111, .5); } /* Producer Console linework — the two status towers, the manifest's two static bridge rails, the shield crests on the base module, the fine steel grain. */ /* `ffvc-tower-pip`, not `ffvc-pip` — the Intake Manifest already owns that class for its tear-off status pips, and the chassis classes share one shell-wide namespace. */ .ffrw-shell .ffvc-tower-pip { fill: rgba(171, 177, 190, .5); } .ffrw-shell .ffvc-tower-pip-live { fill: rgba(224, 92, 87, .85); } .ffrw-shell .ffvc-vent { fill: none; stroke: rgba(90, 104, 126, .7); stroke-width: 2; } .ffrw-shell .ffvc-rail-line { fill: none; stroke: rgba(85, 184, 255, .3); stroke-width: 1.6; } .ffrw-shell .ffvc-stanchion { fill: none; stroke: rgba(90, 104, 126, .7); stroke-width: 2; } .ffrw-shell .ffvc-crest-shield { fill: none; stroke: rgba(224, 92, 87, .5); stroke-width: 1.5; stroke-linejoin: round; } .ffrw-shell .ffvc-bolt-head { fill: rgba(171, 177, 190, .45); } .ffrw-shell .ffvc-grain { fill: none; stroke: rgba(171, 177, 190, .22); stroke-width: 1.1; } /* Light Table linework — the lamp hood's vents and the strip it throws, the manifest's two mat-bevel rules, the film hung in the flank margins, and the mat-cutter guide-slot hardware. Written against .ffrw-vessel (the class both built shells and dressed scene shells carry) rather than .ffrw-shell, since this room IS a dressed scene shell. */ .ffrw-vessel .ffvc-hood-slot { fill: none; stroke: rgba(242, 232, 216, .32); stroke-width: 1.4; } .ffrw-vessel .ffvc-hood-glow { fill: none; stroke: rgba(201, 123, 74, .45); stroke-width: 2.2; } .ffrw-vessel .ffvc-bevel-rule { fill: none; stroke: rgba(242, 232, 216, .08); stroke-width: 1.2; } .ffrw-vessel .ffvc-film-frame { fill: rgba(27, 17, 9, .8); stroke: rgba(138, 90, 46, .7); stroke-width: 1.2; } .ffrw-vessel .ffvc-film-sprocket { fill: rgba(192, 168, 140, .5); } .ffrw-vessel .ffvc-slot-ferrule { fill: none; stroke: rgba(201, 123, 74, .55); stroke-width: 2; } .ffrw-vessel .ffvc-slot-mark { fill: none; stroke: rgba(242, 232, 216, .3); stroke-width: 1.2; } /* Loupe Console linework — the loupe's optic, collar, arm and the crop it holds; the manifest's faint registration corners and targets; the three verdicts down the margin; the glass bed's light strip and edge rules. */ .ffrw-vessel .ffvc-loupe-ring { fill: none; stroke: rgba(80, 175, 209, .6); stroke-width: 1.5; } .ffrw-vessel .ffvc-loupe-crop { fill: none; stroke: rgba(239, 252, 255, .45); stroke-width: 1.2; } .ffrw-vessel .ffvc-loupe-collar { fill: none; stroke: rgba(73, 147, 172, .8); stroke-width: 1.6; } .ffrw-vessel .ffvc-loupe-arm { fill: none; stroke: rgba(73, 147, 172, .5); stroke-width: 2; } .ffrw-vessel .ffvc-reg-mark { fill: none; stroke: rgba(169, 193, 198, .34); stroke-width: 1.4; } .ffrw-vessel .ffvc-reg-target { fill: none; stroke: rgba(80, 175, 209, .34); stroke-width: 1.1; } .ffrw-vessel .ffvc-verdict-box { fill: none; stroke: rgba(169, 193, 198, .45); stroke-width: 1.3; } .ffrw-vessel .ffvc-verdict-open { stroke: rgba(169, 193, 198, .22); } .ffrw-vessel .ffvc-verdict-tick { fill: none; stroke: #4FD1A1; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ffrw-vessel .ffvc-verdict-eye { fill: rgba(80, 175, 209, .7); } .ffrw-vessel .ffvc-bed-strip { fill: none; stroke: rgba(80, 175, 209, .3); stroke-width: 2.2; } .ffrw-vessel .ffvc-bed-rule { fill: none; stroke: rgba(79, 209, 161, .32); stroke-width: 1.4; } @media (prefers-reduced-motion: no-preference) { .ffrw-shell .ffvc-marquee circle { animation: ffrw-bulb 3.6s ease-in-out infinite; } .ffrw-shell .ffvc-marquee circle:nth-child(2n) { animation-delay: .9s; } .ffrw-shell .ffvc-marquee circle:nth-child(3n) { animation-delay: 1.7s; } .ffrw-shell .ffvc-marquee circle:nth-child(5n) { animation-delay: 2.4s; } } @keyframes ffrw-bulb { 0%, 100% { opacity: .45; } 50% { opacity: 1; } } /* ── header band: crest · titles · window controls ───────────────────────── */ .ffrw-header { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; /* Inset to sit INSIDE the sculpted head (the silhouette's arch/crown). THE VERTICAL INSET IS THE THEME'S OWN DECLARATION (switching-vessel-dress S1): each silhouette declares a headerKeepOut (room-window-themes.js) and FFVChassis resolves it against the live shell rect into --ffrw-keepout — height-axis, the axis the crown actually lives on. A percentage margin-top resolved against WIDTH here once; width and the crown diverge on every resize, which was the fleet-wide control collision Joe reported 2026-08-09. No theme → no property → a plain band at zero: stripped mode's header, by the same contract. The px inside the var() is chassis-COMPUTED from the live rect, proportional by construction — it is not the fixed-px inset the normalization law forbids. Horizontal insets stay width-proportional, the correct axis for them (see the normalization law on .ffrw-body). */ margin: 0 5.385%; margin-top: var(--ffrw-keepout, 0px); padding: 10px 6px 8px; cursor: grab; user-select: none; -webkit-user-select: none; } .ffrw-shell.ffs-dragging .ffrw-header { cursor: grabbing; } .ffrw-crest { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto; } .ffrw-crest svg { width: 24px; height: 24px; } .ffrw-titles { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; } .ffrw-title { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 24px; line-height: 1.1; letter-spacing: .005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ffrw-pair { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; opacity: .75; margin-top: 2px; } /* Two groups at opposite ends of the header (Joe /listen 2026-08-02): SIZING on the left, TERMINATION on the right. The separation is the point — a reversible act must not sit adjacent to an irreversible one. */ .ffrw-steps, .ffrw-controls { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; } /* The step pair leads the header, before the crest. `.ffrw-titles` carries flex:1, so it absorbs the remaining width and holds the ✕ hard right. */ .ffrw-steps { order: -1; } .ffrw-steps .ffw-step, .ffrw-controls .ffw-step, .ffrw-close { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(0, 0, 0, .25); color: inherit; cursor: pointer; font-size: 13px; line-height: 1; transition: background .15s ease, border-color .15s ease; } .ffrw-steps .ffw-step:hover:not(:disabled), .ffrw-controls .ffw-step:hover:not(:disabled), .ffrw-close:hover { background: rgba(255, 255, 255, .12); } .ffrw-steps .ffw-step:disabled, .ffrw-controls .ffw-step:disabled { opacity: .35; cursor: default; } /* ── working panel ───────────────────────────────────────────────────────── */ .ffrw-body { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; /* Inset inside the sculpted borders: the vessel's margins stay visible — the decoration owns the surround; the room owns the well. THE NORMALIZATION LAW (S5). These insets are PERCENTAGES, and that is load-bearing, not a style preference. Every silhouette in the fleet is hand-authored in a 1000x700 viewBox stamped with preserveAspectRatio "none", so the vessel STRETCHES to whatever rect the window is given. A percentage of the shell is therefore exactly a viewBox unit — 5% of the width IS x=50 — while a fixed px inset lands on a different viewBox coordinate at every shell size. With px insets the room's well drifted outward as the window grew and crossed the vessel wall: at the canvas rect eight of the ten built rooms had their panel outside the silhouette that frames them. Percentages hold the well at one fixed rect in the silhouette's own coordinates, which is the constant every hand-authored path already assumed. Reference shell 1040x720, so 52px -> 5%. ⚠️ Percentage margins resolve against the containing block's WIDTH on all four sides — which is the CORRECT axis only for the horizontal insets. A width-resolved VERTICAL inset diverges from the silhouette's height-axis features on every resize (a comment here once claimed that divergence was inward and therefore safe; S2's four-geometry census proved it false at tall aspect ratios — 37 foot-limb escapes). The vertical insets are therefore the THEME'S OWN DECLARATIONS, height-resolved by the chassis: the header lays out inside --ffrw-keepout (S1) and the nameplate above --ffrw-footkeepout (S3, the S2 append), with this rule keeping only a small proportional gap between well and plate. Keep any new HORIZONTAL inset proportional; a px value reintroduces the drift. Guarded by `silhouette-probe.cjs --check --size=...`. */ margin: 0.769% 5%; border-radius: 10px; overflow: auto; cursor: auto; } /* The reparented Stories room fills the well. */ .ffrw-body > .view.ffrw-hosted { display: block !important; width: 100%; height: 100%; overflow: auto; contain: layout paint; } /* ── nameplate: the pair name on the vessel's skirt ──────────────────────── THE VERTICAL INSET IS THE THEME'S OWN DECLARATION (S3, the second limb of the S1 header fix): each silhouette declares a footKeepOut and FFVChassis resolves it height-axis into --ffrw-footkeepout — the plate's foot sits on that line, above the lip's foot and its furniture. The retired 2.115% (and its six per-room nudges) resolved against WIDTH, which is why the plate escaped the vessel foot at every geometry S2 measured. No theme → no property → zero: stripped mode, where the plate is hidden anyway. */ .ffrw-nameplate { position: relative; z-index: 1; align-self: center; margin: 0 0 var(--ffrw-footkeepout, 0px); padding: 3px 18px; font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; opacity: .8; border: 1px solid; border-radius: 999px; pointer-events: none; } /* ── STRIPPED MODE (switching-vessel-dress S3) — the dress stands down ───── One marker class, toggled by room-windows.js when ffa_room_stripped is on (consumer-side conjunction with the three window flags; S3 pattern pair only, S5 extends). The chassis is never stamped, so both keep-out vars are never set and the header/nameplate fall back to zero by their own contract. What remains to say in CSS: the plain rectangle needs a plain surface (the shell is transparent by design — the chassis used to paint it), the well takes the whole shell rect, and the two pieces of pure dress — the poetic pair name and the skirt nameplate — are hidden. `.ffrw-title` (the room's plain name) and the crest glyph SURVIVE: they are the window, not the dress. Handlers, drag, grips, the tri-state, close, scroll — untouched; none of them are styled here. */ .ffrw-shell.ffrw-stripped { background: #10151b; border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; } .ffrw-shell.ffrw-stripped .ffrw-header { margin: 0; padding: 10px 14px 8px; } .ffrw-shell.ffrw-stripped .ffrw-body { margin: 0; border-radius: 0; } .ffrw-shell.ffrw-stripped .ffrw-pair, .ffrw-shell.ffrw-stripped .ffrw-nameplate { display: none; } /* A stripped scene shell keeps its injected step pair (windowing) but the poetic pair name is the dress. The host's own title, in the host's own header, is the identity that survives — it was never the fleet's to hide. */ .ffrw-scene.ffrw-stripped .ffrw-scene-pair { display: none; } /* ── THIN — the craft (reforging-biography-folio S9 = slim-down S3, D2) ──── Joe 2026-09-25: "Derived + signature. One shared thin frame built from each room's palette and rim gradient, plus a small per-room signature motif." Thin is Stripped's GEOMETRY (applyDress sets BOTH `ffrw-stripped` and `ffrw-thin`, and the shell fills the canvas exactly as Stripped does) plus this decoration layer. Everything below is keyed on the pair of classes, so Bespoke and Stripped cannot match a single rule here. ONE FRAME, FOUR SHELL KINDS. The same rules dress the fleet's `.ffrw-shell`, the two adopted scene hosts (`.ffrw-scene`), the Dressing Room's `.fergi-bespoke-shell` and the biography folio's `.bio-modal-shell` (the 13th room; its header ribbon lives in biography-modal.css). The selector list is an `:is()` on purpose: it lifts every rule to (0,3,x), above the folio's and the Dressing Room's own rims and content-lift rules (0,2,1 and 0,3,0), which a bare `.ffrw-thin` lost to at S5 — the folio's lift turned the placeholder motif into a FLEX ITEM that took 22 px from the text and drew it off the shell's left edge (measured at 1250×608: well 367 vs Stripped 389). What each piece costs, measured by the S9 harness (Thin well ≥ 95 % of the S6-repaired Stripped in all 13 rooms × 2 sizes is the gate): • rim — 3 px, the room gradient on a ::before with mask-composite. The shell's border-WIDTH never changes (Stripped's 1 px stays 1 px, only its colour goes transparent — the Admin certification defect was a border-width change). Owned shells inset their content by the rim width; scene hosts are not ours to inset, so the rim lies over their outer 3 px. • sill — 12 px at the foot: the colophon's seat. It keeps the motif OUTSIDE the well (D2) at a height the header ribbon repays. • ribbon — the fleet header 60 → 41 px (crest 42 → 28, title 24 → 18, the pair name back inline in small caps, a hairline rule). • glow — INSIDE the rim, not outside: in the S6 geometry the shell's edge IS the canvas edge, so an outer glow would paint over the Header and the Control Panel. • motion — ONE slow light-sweep along the top rim, transform + opacity only, on a 3 px pseudo-element: no blur filter, no particle, no SVG re-raster (the typing-lag lesson). It stops and hides while the member TYPES in the room (a text field inside it has focus), while the window is dragged or resized, and under reduced motion. Not on :focus-within — measured, every room lands focus on its own step button when it opens, so :focus-within held for the whole visit and the sweep never ran. ══════════════════════════════════════════════════════════════════════════ */ :is(.ffrw-shell, .ffrw-scene, .bio-modal-shell, .fergi-bespoke-shell).ffrw-stripped.ffrw-thin { --thin-rim-w: 3px; --thin-sill: 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--thin-rim-a, #d9b36a) 7%, var(--thin-surface, #10151b)) 0, var(--thin-surface, #10151b) 96px); border-color: transparent; border-radius: 9px 12px 8px 13px / 12px 8px 13px 9px; box-shadow: inset 0 0 28px -14px var(--thin-glow, rgba(217, 179, 106, .45)); } /* Owned shells: the content sits inside the rim, and above the sill. */ :is(.ffrw-shell, .bio-modal-shell, .fergi-bespoke-shell).ffrw-stripped.ffrw-thin { box-sizing: border-box; padding: var(--thin-rim-w) var(--thin-rim-w) var(--thin-sill); } /* Scene hosts: only the sill. Face Tagging pins its padding with an author !important, so the sill joins the same cascade layer that already exists to out-rank that pin (see ffrw-scene-unpin above) — no new mechanism. */ .ffrw-scene.ffrw-stripped.ffrw-thin { box-sizing: border-box; padding-bottom: var(--thin-sill); } @layer ffrw-scene-unpin { .ffrw-scene-host .ffrw-scene.ffrw-stripped.ffrw-thin { padding-bottom: 12px !important; box-sizing: border-box !important; } } /* The rim — the room's gradient, 3 px, masked to a ring. */ :is(.ffrw-shell, .ffrw-scene, .bio-modal-shell, .fergi-bespoke-shell).ffrw-stripped.ffrw-thin::before { content: ''; display: block; position: absolute; inset: 0; border-radius: inherit; padding: var(--thin-rim-w); background: linear-gradient(125deg, var(--thin-rim-a, #d9b36a) 0%, var(--thin-rim-b, #8a6a3a) 46%, var(--thin-rim-a, #d9b36a) 78%, var(--thin-rim-b, #8a6a3a) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: .85; pointer-events: none; z-index: 4; } /* The light-sweep — a 3 px glint that crosses the top rim once, then rests. Its box is the rim's own width; the travelling highlight is the gradient's middle, so the parts of the box that pass outside the shell are transparent. */ :is(.ffrw-shell, .ffrw-scene, .bio-modal-shell, .fergi-bespoke-shell).ffrw-stripped.ffrw-thin::after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: var(--thin-rim-w); background: linear-gradient(90deg, transparent 0 44%, var(--thin-glint, rgba(255, 246, 224, .9)) 50%, transparent 56% 100%); opacity: 0; transform: translateX(-40%); pointer-events: none; z-index: 5; } @media (prefers-reduced-motion: no-preference) { :is(.ffrw-shell, .ffrw-scene, .bio-modal-shell, .fergi-bespoke-shell).ffrw-stripped.ffrw-thin::after { animation: ffrw-thin-sweep 18s ease-in-out 2.5s infinite; will-change: transform, opacity; } :is(.ffrw-shell, .ffrw-scene, .bio-modal-shell, .fergi-bespoke-shell).ffrw-stripped.ffrw-thin:has(:is(input, textarea, select, [contenteditable]):focus)::after, :is(.ffrw-shell, .ffrw-scene, .bio-modal-shell, .fergi-bespoke-shell).ffrw-stripped.ffrw-thin.ffs-dragging::after, :is(.ffrw-shell, .ffrw-scene, .bio-modal-shell, .fergi-bespoke-shell).ffrw-stripped.ffrw-thin.ffs-resizing::after { animation-play-state: paused; visibility: hidden; /* a paused glint must not sit frozen on the rim */ } } @keyframes ffrw-thin-sweep { 0% { transform: translateX(-40%); opacity: 0; } 3% { opacity: .9; } 17% { opacity: .9; } 20% { transform: translateX(40%); opacity: 0; } 100% { transform: translateX(40%); opacity: 0; } } /* The signature motif — a colophon on the foot rail: the room's own glyph (room-windows.js builds it from glyphSvg; no new drawing exists) between two hairlines, on a plaque of the room's surface that interrupts the rim, set clear of the 24 px south-east resize grip. Decorative: aria-hidden in the markup, pointer-events none here. */ :is(.ffrw-shell, .ffrw-scene, .bio-modal-shell, .fergi-bespoke-shell).ffrw-stripped.ffrw-thin > .ffrw-thin-motif { position: absolute; right: 30px; bottom: 0; height: var(--thin-sill); display: flex; align-items: center; gap: 5px; padding: 0 6px; background: var(--thin-surface, #10151b); color: var(--thin-rim-a, #d9b36a); opacity: .9; pointer-events: none; z-index: 6; } :is(.ffrw-shell, .ffrw-scene, .bio-modal-shell, .fergi-bespoke-shell).ffrw-stripped.ffrw-thin > .ffrw-thin-motif::before, :is(.ffrw-shell, .ffrw-scene, .bio-modal-shell, .fergi-bespoke-shell).ffrw-stripped.ffrw-thin > .ffrw-thin-motif::after { content: ''; width: 10px; height: 1px; background: var(--thin-rim-b, #8a6a3a); opacity: .85; } .ffrw-thin-motif svg { width: 11px; height: 11px; display: block; flex: 0 0 auto; } /* The header ribbon (fleet rooms — the header this module builds). The pair name comes back INLINE on the title line in small caps, and yields below a 900 px shell: the container is the header, whose content box is the shell less 2 × (1 px border + 3 px rim + 10 px padding) = shell − 28, so 872 here IS a 900 px shell. */ .ffrw-shell.ffrw-stripped.ffrw-thin .ffrw-header { box-sizing: border-box; min-height: 40px; padding: 5px 10px; gap: 10px; container: ffrw-thin-head / inline-size; border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, transparent 0, var(--thin-rim-a, #d9b36a) 16%, var(--thin-rim-b, #8a6a3a) 62%, transparent 100%) 1; } .ffrw-shell.ffrw-stripped.ffrw-thin .ffrw-crest { width: 28px; height: 28px; } .ffrw-shell.ffrw-stripped.ffrw-thin .ffrw-crest svg { width: 17px; height: 17px; } .ffrw-shell.ffrw-stripped.ffrw-thin .ffrw-titles { flex-direction: row; align-items: baseline; gap: 12px; } .ffrw-shell.ffrw-stripped.ffrw-thin .ffrw-title { font-size: 18px; flex: 0 1 auto; } .ffrw-shell.ffrw-stripped.ffrw-thin .ffrw-pair { display: inline; min-width: 0; margin-top: 0; font-size: 13px; font-variant-caps: all-small-caps; text-transform: none; letter-spacing: .12em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @container ffrw-thin-head (width < 872px) { .ffrw-shell.ffrw-stripped.ffrw-thin .ffrw-pair { display: none; } } /* The Dressing Room's ribbon: its own header, the same economy. */ .fergi-bespoke-shell.ffrw-stripped.ffrw-thin .fergi-bespoke-header { padding-top: 4px; padding-bottom: 4px; border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, transparent 0, var(--thin-rim-a, #d9b36a) 16%, var(--thin-rim-b, #8a6a3a) 62%, transparent 100%) 1; } /* The Dressing Room's tokens (the live room is dressing-room.js's bespoke shell, not a `.ffrw-dressing-room` fleet shell, so they key on its theme). */ .ffv-theme-dressing .fergi-bespoke-shell { --thin-rim-a: #E35687; --thin-rim-b: #D69A52; --thin-glow: rgba(227, 86, 135, .42); --thin-surface: #1a0c12; } /* Forced colours: the frame becomes a system edge; the ornament stands down. */ @media (forced-colors: active) { :is(.ffrw-shell, .ffrw-scene, .bio-modal-shell, .fergi-bespoke-shell).ffrw-stripped.ffrw-thin::before { forced-color-adjust: none; background: CanvasText; opacity: 1; } :is(.ffrw-shell, .ffrw-scene, .bio-modal-shell, .fergi-bespoke-shell).ffrw-stripped.ffrw-thin::after { display: none; } :is(.ffrw-shell, .ffrw-scene, .bio-modal-shell, .fergi-bespoke-shell).ffrw-stripped.ffrw-thin > .ffrw-thin-motif { display: none; } .ffrw-shell.ffrw-stripped.ffrw-thin .ffrw-header, .fergi-bespoke-shell.ffrw-stripped.ffrw-thin .fergi-bespoke-header { border-image: none; border-bottom-color: CanvasText; } } @media (prefers-reduced-motion: reduce) { :is(.ffrw-shell, .ffrw-scene, .bio-modal-shell, .fergi-bespoke-shell).ffrw-stripped.ffrw-thin::after { animation: none; display: none; } } /* ── per-room palette (manifest tokens) ──────────────────────────────────── */ .ffrw-stories { color: #F2FFF9; /* Thin (S9): accent · accentAlt · accent glow · a faint room-tinted dark */ --thin-rim-a: #4CC9A4; --thin-rim-b: #E0A84A; --thin-glow: rgba(76, 201, 164, .42); --thin-surface: #0d1a18; } .ffrw-stories .ffrw-crest { color: #4CC9A4; background: rgba(16, 34, 33, .8); box-shadow: inset 0 0 0 1px rgba(39, 137, 146, .7), 0 0 14px rgba(76, 201, 164, .25); } .ffrw-stories .ffrw-title { color: #F2FFF9; } .ffrw-stories .ffrw-pair, .ffrw-stories .ffrw-nameplate { color: #E0A84A; border-color: rgba(224, 168, 74, .5); } .ffrw-stories .ffrw-body { background: rgba(8, 20, 18, .55); box-shadow: inset 0 0 0 1px rgba(39, 137, 146, .35); } .ffrw-dressing-room { color: #FFF0F3; } .ffrw-dressing-room .ffrw-crest { color: #E35687; background: rgba(38, 9, 15, .85); box-shadow: inset 0 0 0 1px rgba(149, 98, 85, .8), 0 0 14px rgba(227, 86, 135, .3); } .ffrw-dressing-room .ffrw-title { color: #FFF0F3; } .ffrw-dressing-room .ffrw-pair, .ffrw-dressing-room .ffrw-nameplate { color: #D69A52; border-color: rgba(214, 154, 82, .55); } .ffrw-dressing-room .ffrw-body { background: rgba(26, 6, 11, .5); box-shadow: inset 0 0 0 1px rgba(149, 98, 85, .4); } /* Family Navigator — Lineage Dial (manifest tokens: surface #0D1824, raised #19324A, accent #55B8FF, accentAlt #38D4C7, text #EEF8FF, border #2E78B5; frame surface #0A1722). */ .ffrw-family-navigator { color: #EEF8FF; /* Thin (S9): accent · accentAlt · accent glow · a faint room-tinted dark */ --thin-rim-a: #55B8FF; --thin-rim-b: #38D4C7; --thin-glow: rgba(85, 184, 255, .42); --thin-surface: #0b1621; } .ffrw-family-navigator .ffrw-crest { color: #55B8FF; background: rgba(13, 24, 36, .85); box-shadow: inset 0 0 0 1px rgba(46, 120, 181, .75), 0 0 14px rgba(85, 184, 255, .25); } .ffrw-family-navigator .ffrw-title { color: #EEF8FF; } .ffrw-family-navigator .ffrw-pair, .ffrw-family-navigator .ffrw-nameplate { color: #38D4C7; border-color: rgba(56, 212, 199, .5); } .ffrw-family-navigator .ffrw-body { background: rgba(10, 23, 34, .58); box-shadow: inset 0 0 0 1px rgba(46, 120, 181, .38); } /* The plate's rail seat is the theme's own footKeepOut declaration now, not a hand-tuned nudge here — switching-vessel-dress S3 (the S2 append). */ /* Portraits — Curator's Rail (manifest tokens: surface #071F23, raised #17393A, accent #3FB8B2, accentAlt #D49A38, text #F0FCFB, border #2E6E6D; frame surface #071C1E). */ .ffrw-portraits { color: #F0FCFB; /* Thin (S9): accent · accentAlt · accent glow · a faint room-tinted dark */ --thin-rim-a: #3FB8B2; --thin-rim-b: #D49A38; --thin-glow: rgba(63, 184, 178, .42); --thin-surface: #081a1c; } .ffrw-portraits .ffrw-crest { color: #3FB8B2; background: rgba(7, 31, 35, .85); box-shadow: inset 0 0 0 1px rgba(46, 110, 109, .8), 0 0 14px rgba(63, 184, 178, .25); } .ffrw-portraits .ffrw-title { color: #F0FCFB; } .ffrw-portraits .ffrw-pair, .ffrw-portraits .ffrw-nameplate { color: #D49A38; border-color: rgba(212, 154, 56, .5); } .ffrw-portraits .ffrw-body { background: rgba(7, 28, 30, .55); box-shadow: inset 0 0 0 1px rgba(46, 110, 109, .4); } /* The gallery's resting room at the foot is the theme's own footKeepOut declaration now — switching-vessel-dress S3. */ /* Explore — Discovery Lens (manifest tokens: surface #111A26, raised #284A53, accent #15A9DF, accentAlt #9A67E8, text #F0FAFF, border #4A6F83; frame surface #0D1622, innerLip #9A67E8). */ .ffrw-explore { color: #F0FAFF; /* Thin (S9): accent · accentAlt · accent glow · a faint room-tinted dark */ --thin-rim-a: #15A9DF; --thin-rim-b: #9A67E8; --thin-glow: rgba(21, 169, 223, .42); --thin-surface: #0e1520; } .ffrw-explore .ffrw-crest { color: #15A9DF; background: rgba(17, 26, 38, .85); box-shadow: inset 0 0 0 1px rgba(74, 111, 131, .8), 0 0 14px rgba(21, 169, 223, .28); } .ffrw-explore .ffrw-title { color: #F0FAFF; } .ffrw-explore .ffrw-pair, .ffrw-explore .ffrw-nameplate { color: #9A67E8; border-color: rgba(154, 103, 232, .5); } .ffrw-explore .ffrw-body { background: rgba(13, 22, 34, .58); box-shadow: inset 0 0 0 1px rgba(74, 111, 131, .4); } /* Import Media — Intake Manifest (manifest tokens: surface #121A2A, raised #25324D, accent #55B8FF, accentAlt #F2B84B, text #F2F7FF, border #286891; frame surface #101827, innerLip #F2B84B). */ .ffrw-import-media { color: #F2F7FF; /* Thin (S9): accent · accentAlt · accent glow · a faint room-tinted dark */ --thin-rim-a: #55B8FF; --thin-rim-b: #F2B84B; --thin-glow: rgba(85, 184, 255, .42); --thin-surface: #101725; } .ffrw-import-media .ffrw-crest { color: #55B8FF; background: rgba(18, 26, 42, .85); box-shadow: inset 0 0 0 1px rgba(40, 104, 145, .8), 0 0 14px rgba(85, 184, 255, .25); } .ffrw-import-media .ffrw-title { color: #F2F7FF; } .ffrw-import-media .ffrw-pair, .ffrw-import-media .ffrw-nameplate { color: #F2B84B; border-color: rgba(242, 184, 75, .5); } .ffrw-import-media .ffrw-body { background: rgba(16, 24, 39, .58); box-shadow: inset 0 0 0 1px rgba(40, 104, 145, .4); } /* The stamp-above-the-tear-line clearance is the theme's own footKeepOut declaration now — switching-vessel-dress S3. */ /* Training — Practice Board (manifest tokens: surface #211B17, raised #3E3224, accent #E8CD97, accentAlt #55C8B8, text #FFF9EC, border #8F704D; frame surface #1C1814, innerLip #55C8B8). */ .ffrw-training { color: #FFF9EC; /* Thin (S9): accent · accentAlt · accent glow · a faint room-tinted dark */ --thin-rim-a: #E8CD97; --thin-rim-b: #55C8B8; --thin-glow: rgba(232, 205, 151, .42); --thin-surface: #1b1713; } .ffrw-training .ffrw-crest { color: #E8CD97; background: rgba(33, 27, 23, .88); box-shadow: inset 0 0 0 1px rgba(143, 112, 77, .85), 0 0 14px rgba(232, 205, 151, .22); } .ffrw-training .ffrw-title { color: #FFF9EC; } .ffrw-training .ffrw-pair, .ffrw-training .ffrw-nameplate { color: #55C8B8; border-color: rgba(85, 200, 184, .5); } .ffrw-training .ffrw-body { background: rgba(28, 24, 20, .58); box-shadow: inset 0 0 0 1px rgba(143, 112, 77, .42); } /* Dashboard — Steward's Compass (manifest tokens: surface #192322, raised #2E4B47, accent #4AA598, accentAlt #DA9C37, text #F2FCF9, border #5D7D73; frame surface #17201F, innerLip #DA9C37). */ .ffrw-dashboard { color: #F2FCF9; /* Thin (S9): accent · accentAlt · accent glow · a faint room-tinted dark */ --thin-rim-a: #4AA598; --thin-rim-b: #DA9C37; --thin-glow: rgba(74, 165, 152, .42); --thin-surface: #151d1c; } .ffrw-dashboard .ffrw-crest { color: #4AA598; background: rgba(25, 35, 34, .88); box-shadow: inset 0 0 0 1px rgba(93, 125, 115, .85), 0 0 14px rgba(74, 165, 152, .25); } .ffrw-dashboard .ffrw-title { color: #F2FCF9; } .ffrw-dashboard .ffrw-pair, .ffrw-dashboard .ffrw-nameplate { color: #DA9C37; border-color: rgba(218, 156, 55, .5); } .ffrw-dashboard .ffrw-body { background: rgba(23, 32, 31, .58); box-shadow: inset 0 0 0 1px rgba(93, 125, 115, .42); } /* Both gimbal clearances are the theme's own declarations now — headerKeepOut (S1) over the crown, footKeepOut (S3) above the pivot pin. */ /* Documentation — Illuminated Index (manifest tokens: surface #171B1B, raised #2B3632, accent #55C7C0, accentAlt #D5B46F, text #FFFBEF, border #6D705D; frame surface #161B19, innerLip #55C7C0). */ .ffrw-documentation { color: #FFFBEF; /* Thin (S9): accent · accentAlt · accent glow · a faint room-tinted dark */ --thin-rim-a: #55C7C0; --thin-rim-b: #D5B46F; --thin-glow: rgba(85, 199, 192, .42); --thin-surface: #151a18; } .ffrw-documentation .ffrw-crest { color: #55C7C0; background: rgba(23, 27, 27, .88); box-shadow: inset 0 0 0 1px rgba(109, 112, 93, .85), 0 0 14px rgba(85, 199, 192, .24); } .ffrw-documentation .ffrw-title { color: #FFFBEF; } .ffrw-documentation .ffrw-pair, .ffrw-documentation .ffrw-nameplate { color: #D5B46F; border-color: rgba(213, 180, 111, .5); } .ffrw-documentation .ffrw-body { background: rgba(22, 27, 25, .58); box-shadow: inset 0 0 0 1px rgba(109, 112, 93, .42); } /* The canopy is the tallest head in the fleet and the tracery lives inside its point — clearing it is the theme's own headerKeepOut declaration (S1); the projecting sill at the foot is its footKeepOut (S3). */ /* Admin — Producer Console (manifest tokens: surface #151A23, raised #212E47, accent #E05C57, accentAlt #55B8FF, text #F7F8FC, border #5A687E; frame surface #121721, innerLip #55B8FF). */ .ffrw-admin { color: #F7F8FC; /* Thin (S9): accent · accentAlt · accent glow · a faint room-tinted dark */ --thin-rim-a: #E05C57; --thin-rim-b: #55B8FF; --thin-glow: rgba(224, 92, 87, .42); --thin-surface: #121720; } .ffrw-admin .ffrw-crest { color: #E05C57; background: rgba(21, 26, 35, .88); box-shadow: inset 0 0 0 1px rgba(90, 104, 126, .85), 0 0 14px rgba(224, 92, 87, .24); } .ffrw-admin .ffrw-title { color: #F7F8FC; } .ffrw-admin .ffrw-pair, .ffrw-admin .ffrw-nameplate { color: #55B8FF; border-color: rgba(85, 184, 255, .5); } .ffrw-admin .ffrw-body { background: rgba(18, 23, 33, .6); box-shadow: inset 0 0 0 1px rgba(90, 104, 126, .42); } /* The deck runs low between the two towers — the header clears it via the theme's own headerKeepOut declaration (S1); the base-module slab at the foot is its footKeepOut (S3). */ /* ── the Wardrobe Console interior ───────────────────────────────────────── */ .ffdr-console { display: grid; grid-template-columns: 300px 1fr; gap: 18px; padding: 16px; height: 100%; box-sizing: border-box; } .ffdr-left { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .ffdr-label { font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #CFA9AD; } .ffdr-select { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(149, 98, 85, .6); background: rgba(38, 9, 15, .9); color: #FFF0F3; font-size: 14px; } .ffdr-mirror { position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: 46% 46% 12px 12px / 34% 34% 12px 12px; /* the vanity arch */ overflow: hidden; background: radial-gradient(circle at 50% 30%, rgba(255, 217, 166, .12), rgba(20, 3, 8, .9)); box-shadow: inset 0 0 0 2px rgba(214, 154, 82, .8), inset 0 0 0 6px rgba(38, 9, 15, .9), inset 0 0 0 7px rgba(227, 86, 135, .35), 0 0 24px rgba(227, 86, 135, .18); } .ffdr-mirror-img { width: 100%; height: 100%; object-fit: cover; display: block; } .ffdr-mirror-empty { display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 18px; text-align: center; color: #CFA9AD; font-size: 13px; } .ffdr-mirror-caption { text-align: center; font-size: 12px; color: #CFA9AD; } .ffdr-set { padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(214, 154, 82, .7); background: linear-gradient(180deg, #61203B, #461528); color: #FFF0F3; font-weight: 600; font-size: 13px; letter-spacing: .04em; cursor: pointer; transition: filter .15s ease; } .ffdr-set:hover:not(:disabled) { filter: brightness(1.2); } .ffdr-set:disabled { opacity: .4; cursor: default; } .ffdr-hint { font-size: 11px; line-height: 1.4; color: rgba(207, 169, 173, .75); } .ffdr-right { display: flex; flex-direction: column; min-width: 0; min-height: 0; } .ffdr-rail-title { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #D69A52; margin-bottom: 10px; } .ffdr-count { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: rgba(227, 86, 135, .25); color: #FFF0F3; font-size: 10px; } .ffdr-rail { flex: 1 1 auto; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; align-content: start; padding: 4px; } .ffdr-card { position: relative; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; padding: 0; border: 2px solid rgba(149, 98, 85, .45); background: rgba(38, 9, 15, .7); cursor: pointer; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; } .ffdr-card img { width: 100%; height: 100%; object-fit: cover; display: block; } .ffdr-card:hover { border-color: rgba(214, 154, 82, .9); transform: translateY(-2px); } .ffdr-card.is-chosen { border-color: #E35687; box-shadow: 0 0 0 2px rgba(227, 86, 135, .45), 0 0 18px rgba(227, 86, 135, .35); } .ffdr-badge { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(20, 3, 8, .85); color: #E0A84A; font-size: 12px; box-shadow: 0 0 0 1px rgba(214, 154, 82, .7); } .ffdr-rail-empty { grid-column: 1 / -1; padding: 28px 18px; text-align: center; color: #CFA9AD; font-size: 13px; line-height: 1.5; } /* ── the injected Dressing Room doorway (rail) ───────────────────────────── */ .ffrw-dr-launcher { background: #26090F; border-left: 3px solid #956255; } .ffrw-dr-launcher:hover { background: #582322; } .ffrw-dr-launcher .ffrw-dr-icon { color: #E35687; display: inline-flex; } .ffrw-dr-launcher .ffrw-dr-icon svg { width: 20px; height: 20px; } .ffrw-dr-launcher .menu-label { color: #FFF0F3; } /* ══════════════════════════════════════════════════════════════════════════ THE SCENE SHELLS — Browse Media (Light Table) + Face Tagging (Loupe Console) These two rooms are not built by room-windows.js; their own hosts build, open and close them. Everything below applies ONLY while room-windows.js has dressed one (it adds .ffrw-scene-host to the modal root and .ffrw-vessel .ffrw-scene to the host's shell, and takes both off on close), so with any of the three flags off not one of these selectors matches and both modals render exactly as they do today. ══════════════════════════════════════════════════════════════════════════ */ /* The modal root becomes a transparent stage, exactly like .ffrw-overlay: the canvas behind stays live and the shell alone is the window. */ .ffrw-scene-host { background: transparent; pointer-events: none; } /* The stepwise size-ladder pill sizes the ROOT, which is no longer the window — the step pair in the header is the sizing control while dressed. Leaving a dead control on screen is worse than hiding it for the duration. */ .ffrw-scene-host > .fv-size-ladder { display: none; } /* The shell yields its own surface to the vessel — and it takes TWO classes to do it, because both hosts paint that surface from a two-class selector of their own (`.face-training-modal .face-training-content`, `#browseMediaModal` is a one-class `.browse-media-content`). A single-class rule here loses to the first of those, and the room comes up as an opaque slab with a sculpted silhouette hidden behind it — which the scene-dressing probe caught before this shipped. The rooms' own content wells still paint their own backgrounds (`.face-training-body`, the media grid), so nothing is read against glass. */ /* Every scene DECORATION rule below is scoped :not(.ffrw-stripped) (switching-vessel-dress S3): stripped, the fleet's decoration selectors DECLINE TO MATCH, so the host's own surface, padding and radius apply exactly as they do undressed — the stand-down, expressed as CSS that steps aside rather than CSS that overrides. The windowing rules (pointer events, isolation, the transparent stage, the hidden size-ladder pill, the one-vessel suppression) are NOT scoped: a stripped room is still a draggable, resizable window over a live canvas. */ .ffrw-scene-host .ffrw-scene:not(.ffrw-stripped) { background: transparent; border-radius: 0; } .ffrw-scene { pointer-events: auto; /* A stacking context of its own, so the chassis layer's negative z is trapped here — above the shell's own background, below every piece of the room's content. The same technique launcher-visual.css uses for its wash, and the reason no host content needs lifting. */ isolation: isolate; } .ffrw-scene > .ffv-chassis-layer { position: absolute; inset: 0; z-index: -1; pointer-events: none; } /* One vessel per shell. launcher-visual-overlay already stamps Browse Media's chrome layer with the generic `umi` chassis; while this room wears its OWN sculpted Light Table, that layer's silhouette and rectangular rim would draw a second vessel around the first. Suppressed for the duration only — the overlay's header band, which is colour on the room's own header, stays. */ .ffrw-scene > .ffvl-chrome { display: none; } /* The sculpted margins. Percentage-capped rather than flat px: the silhouette stretches with the shell in viewBox units, so a margin that stays a constant FRACTION keeps the drawn proportions, while the px cap stops a maximized window from spending 100px a side on decoration. */ .ffrw-scene:not(.ffrw-stripped) { padding: min(60px, 6%) min(72px, 6.2%) min(80px, 8%); } /* ── beating the hosts' pinned geometry ────────────────────────────────────── styles.css pins `.face-training-modal .face-training-content` at inset 0 with !important on every geometry property INCLUDING padding, so the sculpted margins above would never apply to that room. An author !important inside a cascade layer takes precedence over an un-layered one (CSS Cascade 5 — the layer order is REVERSED for important declarations), which is exactly what this layer is for: the smallest possible set of declarations whose only job is to out-rank a pin. Nothing here is a new design value — the padding is the same rule as above. The pinned position/left/top/width/height cannot be handled here at all: the value has to come from FFASpatial's inline rect, and a plain inline declaration loses to an author !important. room-windows.js re-stamps the properties FFASpatial has already written at inline-!important priority. Neither mechanism invents a value; both only change who wins. */ @layer ffrw-scene-unpin { .ffrw-scene-host .ffrw-scene:not(.ffrw-stripped) { padding: min(60px, 6%) min(72px, 6.2%) min(80px, 8%) !important; box-sizing: border-box !important; } } /* ── the injected chrome: crest · pair name · the fleet step pair ───────────── THE FLEET'S DEDICATED SLOT IN AN ADOPTED HOST'S HEADER. unsilencing-vault-surfaces S2 / D2.2 + D2.3 (2026-08-05). `order: -1` is the load-bearing declaration, not decoration. room-windows.js inserts this node as the header's first child, but insertion order alone is a fact about one moment; `order` is a property of the layout, so the sizing pair stays upper-LEFT no matter where a host's own re-render happens to put things back. That is the placement `truing-vessel-chrome` ratified on 2026-07-23 for buildWindow() rooms, now reaching the two adopted ones. `margin-left: auto` is GONE. It was what pushed this chrome to the far right of whichever header it landed in — into `.bm-header-right` (and with it, 192px outside an overflow:hidden shell) for Browse Media, and hard against the absolutely-positioned ✕ for Face Tagging. Sizing beside terminate is exactly the confusion the standard exists to prevent. */ .ffrw-scene-chrome { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; order: -1; padding-right: 10px; } .ffrw-scene-crest { display: inline-flex; align-items: center; } .ffrw-scene-crest svg { width: 20px; height: 20px; } .ffrw-scene-pair { font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; opacity: .8; white-space: nowrap; } .ffrw-scene-chrome .ffw-step { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(0, 0, 0, .28); color: inherit; cursor: pointer; line-height: 1; } .ffrw-scene-chrome .ffw-step:hover:not(:disabled) { background: rgba(255, 255, 255, .14); } .ffrw-scene-chrome .ffw-step:disabled { opacity: .35; cursor: default; } /* ── the nameplate, on the vessel's skirt ────────────────────────────────── */ .ffrw-scene-plate { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 1; padding: 3px 18px; font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; opacity: .8; border: 1px solid; border-radius: 999px; pointer-events: none; white-space: nowrap; } /* Browse Media — Light Table (manifest tokens: surface #241610, raised #3A2317, accent #C97B4A, accentAlt #EF3FA5, text #F2E8D8, border #8A5A2E; frame surface #1B1109, innerLip #F2E8D8). */ .ffrw-browse-media .ffrw-scene-crest { color: #C97B4A; } .ffrw-browse-media .ffrw-scene-pair, .ffrw-browse-media .ffrw-scene-plate { color: #C97B4A; border-color: rgba(201, 123, 74, .5); } .ffrw-browse-media .ffrw-scene-chrome .ffw-step { color: #F2E8D8; border-color: rgba(138, 90, 46, .8); } /* THE TITLE AND THE NAMEPLATE WERE NEVER GIVEN A COLOUR (porting-perimeter-souls S3). Ten of the twelve rooms carry a `.ffrw- { color }` plus a matching `.ffrw-title` — the two SCENE hosts, this room and Face Tagging, got their scene chrome coloured and their own header overlooked. `.ffrw-title` declares no colour of its own and no ancestor here declares one either, so both titles inherited the page default and rendered near-black on a near-black chassis. Pre-existing, unrelated to the v14 port, and found by LOOKING AT A CAPTURE: every measured gate passed the render, exactly as they passed S1's shelf rail. The value is this room's own manifest `text` token, quoted in the comment above; the nameplate takes the accent its scene chrome already uses. */ .ffrw-browse-media { color: #F2E8D8; /* Thin (S9): accent · accentAlt · accent glow · a faint room-tinted dark */ --thin-rim-a: #C97B4A; --thin-rim-b: #EF3FA5; --thin-glow: rgba(201, 123, 74, .42); --thin-surface: #1b120c; } .ffrw-browse-media .ffrw-title { color: #F2E8D8; } .ffrw-browse-media .ffrw-pair, .ffrw-browse-media .ffrw-nameplate { color: #C97B4A; border-color: rgba(201, 123, 74, .5); } /* Face Tagging — Loupe Console (manifest tokens: surface #111C20, raised #273337, accent #50AFD1, accentAlt #4FD1A1, text #EFFCFF, border #4993AC; frame surface #0D181B, innerLip #4FD1A1). */ .ffrw-face-tagging .ffrw-scene-crest { color: #50AFD1; } .ffrw-face-tagging .ffrw-scene-pair, .ffrw-face-tagging .ffrw-scene-plate { color: #4FD1A1; border-color: rgba(79, 209, 161, .5); } .ffrw-face-tagging .ffrw-scene-chrome .ffw-step { color: #EFFCFF; border-color: rgba(73, 147, 172, .8); } /* Same omission, same fix — see the note on Browse Media above. */ .ffrw-face-tagging { color: #EFFCFF; /* Thin (S9): accent · accentAlt · accent glow · a faint room-tinted dark */ --thin-rim-a: #50AFD1; --thin-rim-b: #4FD1A1; --thin-glow: rgba(80, 175, 209, .42); --thin-surface: #0d171a; } .ffrw-face-tagging .ffrw-title { color: #EFFCFF; } .ffrw-face-tagging .ffrw-pair, .ffrw-face-tagging .ffrw-nameplate { color: #4FD1A1; border-color: rgba(79, 209, 161, .5); } /* Narrow shells: the chassis marks its layer .ffvc-compact below 700px, and the flourishes that live in the flank margins have no margin left to live in — drop them rather than let them crowd the room. */ .ffrw-shell .ffv-chassis-layer.ffvc-compact .ffvc-branchwork, .ffrw-shell .ffv-chassis-layer.ffvc-compact .ffvc-era-marks, .ffrw-shell .ffv-chassis-layer.ffvc-compact .ffvc-curtain, .ffrw-shell .ffv-chassis-layer.ffvc-compact .ffvc-hung-gallery, .ffrw-shell .ffv-chassis-layer.ffvc-compact .ffvc-trunnion, .ffrw-shell .ffv-chassis-layer.ffvc-compact .ffvc-star-field, .ffrw-shell .ffv-chassis-layer.ffvc-compact .ffvc-dock-lugs, .ffrw-shell .ffv-chassis-layer.ffvc-compact .ffvc-score-tick, .ffrw-shell .ffv-chassis-layer.ffvc-compact .ffvc-bearing, .ffrw-shell .ffv-chassis-layer.ffvc-compact .ffvc-glazing, .ffrw-shell .ffv-chassis-layer.ffvc-compact .ffvc-bridge-rails, .ffrw-shell .ffv-chassis-layer.ffvc-compact .ffvc-steel-grain, .ffrw-vessel .ffv-chassis-layer.ffvc-compact .ffvc-film-strips, .ffrw-vessel .ffv-chassis-layer.ffvc-compact .ffvc-guide-slots, .ffrw-vessel .ffv-chassis-layer.ffvc-compact .ffvc-registration, .ffrw-vessel .ffv-chassis-layer.ffvc-compact .ffvc-verdicts { display: none; } @media (max-width: 900px) { .ffdr-console { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════════════════════════════════════ FLEET CHROME — FORCED COLORS, FOCUS-VISIBLE, REDUCED MOTION furnishing-vessel-interiors S9, carry-in (c) + the S4 gate's addition. The gap, as measured rather than assumed: this file carried ZERO `forced-colors` rules across its rule set and ZERO `:focus-visible` rules, while every Room interior sheet this train shipped carries both. The app's only four forced-colors blocks lived in Import Media's sandbox interior. So the INTERIORS were covered and the WINDOW around them was not — and the window is the part drawn with custom colours, gradients and an SVG silhouette. ⚠️ THE NON-OBVIOUS HAZARD, and the reason a "it all goes system-coloured anyway" assumption is wrong: forced-colors overrides `background-color`, but it does NOT override `background-image`. Every gradient in the fleet therefore SURVIVES High Contrast — including the manifest header band that `.ffvl-chromed-header` paints — and it survives UNDER system-coloured text that was never measured against it. That is the one thing here that could render a room unreadable, so it is the first thing this block turns off. The same logic governs the chassis: `.ffv-chassis-layer` is decorative and already `aria-hidden`, its SVG fills are `rgba()` literals that forced colors does not touch, and the shell it paints is otherwise transparent. In High Contrast the honest window is a plain Canvas rectangle with a CanvasText edge — so the silhouette stands down and the shell paints itself. This is the same stand-down discipline the stripped switch uses, reached by a different door. ⛔ NOTHING HERE IS GEOMETRY AND NOTHING HERE IS A HANDLER. No element is moved, resized, added, removed or re-ordered; no control changes what it does. Colour, outline and transition only. Single-step revert: delete this block. ══════════════════════════════════════════════════════════════════════════ */ @media (forced-colors: active) { /* The window becomes a window: system surface, system edge. */ .ffrw-shell { background: Canvas; color: CanvasText; border: 1px solid CanvasText; } /* Decoration stands down — it is aria-hidden already, and its rgba() fills are invisible to the forced palette, so leaving it up would paint unmanaged colour under system-coloured text. */ .ffrw-shell .ffv-chassis-layer, .ffrw-vessel .ffv-chassis-layer, .ffvl-chrome { display: none; } /* The gradient that forced colors will not remove for us. Applies to the fleet header and to the manifest band the launcher overlay stamps onto a room's own header. */ .ffrw-header, .ffvl-chromed-header { background-image: none; background-color: Canvas; color: CanvasText; } /* Title, pair name and nameplate carry deliberate sub-1 opacity as part of the dress. In High Contrast a member has asked for maximum separation, so the hierarchy is carried by size and letterspacing — which survive — and not by transparency, which does not serve them here. */ .ffrw-title, .ffrw-pair, .ffrw-nameplate, .ffrw-scene-pair, .ffrw-crest, .ffrw-crest svg { color: CanvasText; opacity: 1; } .ffrw-nameplate { border-color: CanvasText; } /* Every chrome control reads as a button, including the ✕. `disabled` keeps its meaning through GrayText rather than through an opacity the forced palette flattens. */ .ffrw-steps .ffw-step, .ffrw-controls .ffw-step, .ffrw-scene-chrome .ffw-step, .ffrw-close { background: ButtonFace; color: ButtonText; border-color: ButtonBorder; } .ffrw-steps .ffw-step:hover:not(:disabled), .ffrw-controls .ffw-step:hover:not(:disabled), .ffrw-scene-chrome .ffw-step:hover:not(:disabled), .ffrw-close:hover { background: Highlight; color: HighlightText; } .ffrw-steps .ffw-step:disabled, .ffrw-controls .ffw-step:disabled, .ffrw-scene-chrome .ffw-step:disabled { color: GrayText; opacity: 1; } /* The focus ring below, in the one system colour that means "here". */ .ffrw-steps .ffw-step:focus-visible, .ffrw-controls .ffw-step:focus-visible, .ffrw-scene-chrome .ffw-step:focus-visible, .ffrw-close:focus-visible { outline-color: Highlight; } } /* ── Focus-visible on the chrome controls ───────────────────────────────── These are real `