/* ============================================================ * Project Pleasant — page layer (the app, not the components). * Component chrome lives in Tide canon (tide.css: c29-sky, * c29-channel, c29-orb, c29-clock, shelf, sheet, lock, pointer). * What lives here: the lock state, and the little living scenes * inside the tiles — one bold sketch per surface. * ============================================================ */ /* while locked, the house is politely out of focus behind the card */ .pl-stage.pl-locked .pl-main, .pl-stage.pl-locked .pl-shelf { visibility: hidden; } /* settings replace the grid (the shelf and the sky stay) */ .pl-stage.pl-sheet-open .pl-main { visibility: hidden; } /* search replaces the grid the same way */ .pl-stage.pl-search-open .pl-main { visibility: hidden; } /* ---- the folder: a room inside the house, same geometry manners -- */ .pl-stage.pl-folder-open .pl-main { visibility: hidden; } .pl-folder { position: absolute; inset: 0 0 calc(88px + var(--safe-b)) 0; z-index: 6; display: flex; flex-direction: column; align-items: center; padding: calc(14px + var(--safe-t)) 14px calc(12px + var(--safe-b)); } .pl-folder[hidden] { display: none; } .pl-folder:not([hidden]) { animation: pl-rise var(--d-sheet) var(--ease) both; } .pl-folder-head { display: flex; align-items: center; gap: 14px; width: min(1060px, 100%); } .pl-folder-title { font-size: 24px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; } .pl-folder-sub { font-size: 14.5px; color: var(--ink-2); } .pl-folder-grid { display: grid; gap: clamp(10px, 1.9vmin, 24px); width: min(1060px, 100%); margin: auto; grid-template-columns: repeat(auto-fit, minmax(0, calc((1060px - 3 * clamp(10px, 1.9vmin, 24px)) / 4))); justify-content: center; } @media (max-width: 700px) and (orientation: portrait) { .pl-folder-grid { grid-template-columns: repeat(2, 1fr); justify-content: stretch; } } /* ---------- tile scenes (shared stage: viewBox 0 0 200 116) ---------- */ .pl-tile-preview svg text { font-family: var(--font-display); } /* Listen — equaliser bars */ .sc-eq rect { transform-box: fill-box; transform-origin: 50% 100%; animation: pl-eq calc(1.05s / var(--speed)) ease-in-out infinite alternate; } .sc-eq rect:nth-child(3) { animation-delay: -.3s; } .sc-eq rect:nth-child(4) { animation-delay: -.65s; } .sc-eq rect:nth-child(5) { animation-delay: -.15s; } .sc-eq rect:nth-child(6) { animation-delay: -.8s; } .sc-eq rect:nth-child(7) { animation-delay: -.45s; } @keyframes pl-eq { from { transform: scaleY(.35); } to { transform: scaleY(1); } } /* Flows — the travelling pulse rides SMIL in the markup; nodes breathe */ .sc-nodes .nd { transform-box: fill-box; transform-origin: center; animation: pl-breathe calc(3.6s / var(--speed)) ease-in-out infinite; } .sc-nodes .nd.d2 { animation-delay: -1.2s; } .sc-nodes .nd.d3 { animation-delay: -2.3s; } /* Project X — the breathing orb */ .sc-breathe { transform-box: fill-box; transform-origin: center; animation: pl-breathe calc(4.6s / var(--speed)) ease-in-out infinite; } @keyframes pl-breathe { 0%, 100% { transform: scale(.84); } 50% { transform: scale(1.04); } } /* Command Center — the pulse line draws itself along */ .sc-dash { stroke-dasharray: 7 9; animation: pl-dash calc(1.4s / var(--speed)) linear infinite; } @keyframes pl-dash { to { stroke-dashoffset: -32; } } /* Tide — waves sliding past each other */ .sc-waves .wv { animation: pl-wave calc(6s / var(--speed)) linear infinite; } .sc-waves .wv.b { animation-duration: calc(9s / var(--speed)); animation-direction: reverse; } @keyframes pl-wave { from { transform: translateX(0); } to { transform: translateX(-40px); } } /* Fleet — the radar sweep */ /* the Flows pulse travels by CSS offset-path, never SMIL — CSS animations are exactly what the canon motion gate can stop, so reduced motion truly stills this tile (adversary R1 SEV-2) */ .sc-nodes .pulse { offset-path: path("M30 80 C 70 18, 130 98, 170 34"); offset-rotate: 0deg; animation: pl-travel calc(3.4s / var(--speed)) linear infinite; } @keyframes pl-travel { from { offset-distance: 0%; } to { offset-distance: 100%; } } /* Desk — the top card's check pops gently */ .pl-tile-preview .pop { transform-box: fill-box; transform-origin: center; animation: pl-breathe calc(3.2s / var(--speed)) ease-in-out infinite; } /* scene captions are a wide-screen enrichment; at phone width the label scrim owns the bottom of the art, so the captions stand down */ @media (max-width: 700px) and (orientation: portrait) { .sc-cap { display: none; } } /* settings sheet: one fixed control column, the back orb at panel size */ .pl-sheet c29-seg { flex: 0 0 168px; } .pl-sheet c29-seg button { flex: 1; } #orbBack .pl-orb { width: 44px; height: 44px; } @media (max-width: 560px) { .pl-row { flex-wrap: wrap; } .pl-row c29-seg { margin-left: auto; } /* P-SET-1 (W4, 2026-10-22): Settings rows get a phone posture — the label takes the full width and the control stacks beneath it, contained. The desktop fixed 168px control column squeezed labels into one-word columns (rig-measured on the pre-fix bytes: "Weather in the world" text at 23px wide, name 95px tall) and pushed wide segs off the panel's right edge (Ambience bed seg 388px in a 362px panel, +51px bleed, one button off-panel). Scoped to #plSheet only: every other room keeps its row geometry. Segs stay a single row (the canon seg thumb tracks one row); long option labels wrap inside their own pill, never the seg. */ #plSheet .pl-row { flex-direction: column; align-items: stretch; gap: 8px; } #plSheet .pl-row .pl-row-text { flex: none; width: 100%; } #plSheet .pl-row c29-seg { flex: none; width: 100%; margin-left: 0; } #plSheet .pl-row c29-seg button { white-space: normal; text-align: center; line-height: 1.15; padding: 4px 6px; } #plSheet .pl-row > button { align-self: flex-start; } } /* ---- R6: live squares ---- */ /* the Daily Note place replaces the grid like the other sheets */ .pl-stage.pl-note-open .pl-main, .pl-stage.pl-assist-open .pl-main { visibility: hidden; } .pl-note .pl-panel { overflow-y: auto; max-height: calc(100dvh - 168px); touch-action: pan-y; overscroll-behavior: contain; } /* D5 scroll contract */ /* the room subtitle sits bare on the sky inside .pl-sheet-head (not on the panel face), so the soft ink failed there: --pl-ink-soft #2E5A74 on the sky band #79BFED measured 3.70:1 (Principal-Proof gate, r12). It carries the full ink instead — the same pair the room title already passes with (#14384C on the band ≈ 6.2:1; dark ≈ 16:1). */ .pl-note-when { font-size: 14.5px; color: var(--pl-ink); font-weight: 600; } .pl-note-sec { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--pl-tile-ink-soft); margin: 20px 0 8px; } .pl-note-sec:first-child { margin-top: 0; } .pl-note-sample { background: var(--pl-sky-wash); /* D5 (night loop 2026-10-24): the sky-wash fallback class is CLOSED — P4 defined --pl-sky-wash in tokens.css (computed on the Principal stage in both engines, both themes, D5-verified), so the old rgba(255,255,255,.4x) fallbacks were inert in effect but remained a loaded trap for any surface that ever loads app.css without tokens.css. All 13 fallback sites in this file now read the bare token: if the token is ever missing the ground is transparent (the panel shows through — a passing ground) instead of a 40% white wash (the D4 failure). */ border: 1px solid var(--edge-soft); border-radius: 14px; padding: 12px 14px; font-size: 14px; line-height: 1.5; white-space: pre-line; } .pl-note-sample .pl-note-meta { display: block; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--pl-tile-ink-soft); white-space: normal; } .pl-note-ta { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; line-height: 1.5; color: var(--pl-tile-ink); background: var(--pl-tile-face); border: 1px solid var(--edge-soft); border-radius: 12px; padding: 10px 12px; resize: vertical; } .pl-note-btn { font: inherit; font-weight: 700; font-size: 14px; min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--pl-tile-ink) 16%, transparent); background: var(--pl-tile-face); /* F5 (Golden Hour fix 2026-10-25): the rim is derived from the button's own ink token. It was var(--edge-soft) — the daylight register's sand-300 at 80% in light — which printed as a stray tan outline on the white tile face (Victor's Golden Hour screenshot; computed rgb(226,214,192)/.8, both engines). The tile family's own rim is a white top-light edge for tiles on the sky and renders invisible for a button sitting on the room card, so the hairline is mixed from the paired ink instead: on-palette in every theme and brand stage by construction, the same derivation style as the register's own edges in tokens.css. */ color: var(--pl-tile-ink); cursor: pointer; } a.pl-note-btn { display: inline-flex; align-items: center; justify-content: center; } /* P8 (night loop 2026-10-25): the class sets min-height:44px but no display — an wearing it stays inline, where min-height does not apply, and rendered 79x37 in the Market room (P8 enum rig, both engines; 7 links). Anchors now take the inline-flex button box;