/* shelves.css — the three-shelf Board Wall ============================================================================ Three shelves stacked vertically: whiteboards on top, the demo boards in the middle, blank boards in the editor in the basement. `shelf-*` is set on by BoardWall._paintShelf(); `#shelf-marks` mirrors the wall dots up the left edge of the dock. Extracted from the retired css/lite.css on 2026-08-13, when shelves stopped being Lite-only and the main app's zen board got them too. Both index.html and this file is loaded by index.html. SCOPE: every rule that reaches outside the whiteboard's own DOM is scoped to `body.phone-mode` — the zen board — NOT to the bare `shelf-*` class. The wall only exists in the zen board (its gestures test for `phone-mode`), and the basement rules below restyle #right-panel, #piece-palette and #editor-panel, which in the full desktop layout are the editor the coach teaches from. Drop the `.phone-mode` and a stale `shelf-edit` on would restyle that editor. This was `body.lite-app` while the feature lived only in Lite; Lite forces phone-mode on at boot, so it kept matching. Lite retired 2026-08-30; phone mode is now reached with /phone and the rule is unchanged. ============================================================================ */ /* On the whiteboard shelf the chess layers stand down; the writing surface takes the square the board would have occupied, so the slide animation and fitBoard's sizing both go on working untouched. */ body.phone-mode.shelf-white #board-surface, body.phone-mode.shelf-white #rank-labels, body.phone-mode.shelf-white #rank-labels-right, body.phone-mode.shelf-white #file-labels, body.phone-mode.shelf-white #file-labels-top { visibility: hidden; } #lite-whiteboard { position: absolute; inset: 0; display: none; border-radius: 0.75rem; overflow: hidden; background: #fbfbf8; /* warm white — a real board, not #fff */ box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.1), 0 10px 30px rgba(2, 6, 23, 0.28); touch-action: none; /* we handle the pointer ourselves */ } #lite-whiteboard.on { display: block; } #wb-canvas { position: absolute; inset: 0; } #wb-texts { position: absolute; inset: 0; } .wb-text { position: absolute; transform: translateY(-0.6em); min-width: 1ch; max-width: 88%; padding: 0.05em 0.1em; font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; line-height: 1.25; color: #0f172a; outline: none; white-space: pre-wrap; caret-color: #1d4ed8; } .wb-text:focus { background: rgba(29, 78, 216, 0.07); border-radius: 0.25rem; } /* Pen tray. Sits just above the surface, only on the whiteboard shelf — the one piece of furniture this app allows itself, because ink you cannot change color or take back is not a teaching tool. */ #wb-bar { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(100% + 0.5rem); display: none; align-items: center; gap: 0.45rem; padding: 0.4rem 0.6rem; border-radius: 9999px; background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(226, 232, 240, 0.8); box-shadow: 0 6px 22px rgba(15, 23, 42, 0.2); z-index: 2; } .dark #wb-bar { background: rgba(15, 17, 21, 0.75); border-color: rgba(255, 255, 255, 0.12); } #wb-bar.on { display: flex; } .wb-swatch { width: 1.35rem; height: 1.35rem; border-radius: 9999px; border: 2px solid transparent; /* The ring has to contrast with the TRAY, not with the ink: a near-black G2 swatch on the dark tray read as an empty gap without it. */ box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.25); transition: transform 0.14s ease, border-color 0.14s ease; -webkit-tap-highlight-color: transparent; } .dark .wb-swatch { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45); } .wb-swatch.on { border-color: #fff; transform: scale(1.22); box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.9); } .wb-btn { min-width: 1.6rem; height: 1.6rem; padding: 0 0.3rem; border-radius: 0.5rem; font-size: 0.9rem; line-height: 1; font-weight: 700; color: rgb(71 85 105); background: transparent; transition: background-color 0.14s ease; -webkit-tap-highlight-color: transparent; } .dark .wb-btn { color: rgb(203 213 225); } .wb-btn.on { background: rgba(250, 204, 21, 0.9); color: rgb(15 23 42); } /* ---- the basement: an editor you can teach from --------------------------- The generic phone editor is a settings panel that happens to be near a board: a dense toolbar, a scrolling column, and a piece palette treated as one more row of controls. Down here the BOARD is the lesson and the palette is the thing your thumb lives on, so the sheet is rebuilt around that — bigger pieces, quiet secondary controls, and Done given the weight it has earned. */ /* A cool rim so a glance tells you which shelf you are on without reading. */ body.phone-mode.shelf-edit #board-surface { box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.45), 0 12px 34px rgba(2, 6, 23, 0.4); } /* Give the board more of the screen than the stock 41% — a position being built in front of a class has to be readable from the back of the room. */ body.phone-mode.shelf-edit.phone-editing #board-cell { padding-bottom: 47vh !important; } body.phone-mode.shelf-edit.phone-editing #right-panel { max-height: 46vh; border-radius: 1.5rem 1.5rem 0 0; background: rgba(248, 250, 252, 0.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 -10px 40px rgba(2, 6, 23, 0.5); } .dark body.phone-mode.shelf-edit.phone-editing #right-panel { background: rgba(17, 20, 28, 0.96); } /* The palette is the tool, so it gets the room. Six across, big enough to hit without looking, on a surface that reads as a tray rather than a form. */ body.phone-mode.shelf-edit #piece-palette { gap: 0.35rem !important; padding: 0.5rem; border-radius: 1rem; background: rgba(15, 23, 42, 0.05); } .dark body.phone-mode.shelf-edit #piece-palette { background: rgba(255, 255, 255, 0.04); } body.phone-mode.shelf-edit #piece-palette > div { padding: 0.3rem !important; border-radius: 0.7rem; transition: transform 0.12s ease, background-color 0.12s ease; } body.phone-mode.shelf-edit #piece-palette > div:active { transform: scale(0.9); } /* The selected piece has to be obvious at arm's length — the stock treatment is a subtle tint that vanishes on a phone in a bright room. */ body.phone-mode.shelf-edit #piece-palette > div.palette-selected { background: rgba(250, 204, 21, 0.92); box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.5), 0 4px 14px rgba(2, 6, 23, 0.3); } /* The "click piece, then click board" hint is for the first minute only. */ body.phone-mode.shelf-edit #editor-panel .flex-1 > span { font-size: 0.6rem; opacity: 0.55; margin-bottom: 0.5rem !important; } /* Done is the button that ships the position up to the teaching shelf, so it reads like the primary action it is; Cancel steps back to being a word. */ body.phone-mode.shelf-edit #editor-panel button[onclick*="switchToAnalysis"] { padding: 0.7rem 1.4rem; border-radius: 0.9rem; font-size: 0.95rem; box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45); } body.phone-mode.shelf-edit #editor-panel button[onclick*="cancelEditor"] { background: transparent; box-shadow: none; opacity: 0.7; } /* Castling and en passant matter perhaps once a lesson; they should be reachable without being the first thing the eye lands on. */ body.phone-mode.shelf-edit #editor-rights { opacity: 0.75; padding-top: 0.4rem !important; padding-bottom: 0 !important; } body.phone-mode.shelf-edit #editor-rights:focus-within { opacity: 1; } /* Which shelf you are on. Three marks up the left edge of the dock, mirroring the wall dots that show which board you are on across the bottom. */ #shelf-marks { position: absolute; left: 0.9rem; bottom: 0; display: none; flex-direction: column; gap: 0.3rem; } body.phone-mode #shelf-marks { display: flex; } .shelf-mark { width: 0.3rem; height: 0.62rem; border-radius: 9999px; background: rgba(148, 163, 184, 0.4); transition: background-color 0.18s ease, transform 0.18s ease; } .shelf-mark.on { background: rgba(250, 204, 21, 0.95); transform: scaleX(1.5); }