/* ── Hide native scrollbars completely ──────────────────────────── */ /* `body` uses `clip`, NOT `hidden`: `overflow-x: hidden` promotes the other axis (`overflow-y`) to `auto`, turning into a nested scroll container, which breaks `position: sticky` on the stacking sections whenever autozoom is inactive (e.g. wide-only mode below 782px). `overflow-x: clip` clips the same horizontal overflow + hides the scrollbar but is exempt from that promotion, so stays a normal block and sticky works. This matches what autozoom2.js already sets inline on when autozoom is active. keeps `hidden` — it is the document scroller, so sticky is unaffected there. */ html { overflow-x: hidden; } body { overflow-x: clip; } html { scrollbar-width: none; } ::-webkit-scrollbar { display: none; } /* The Start / Resume button is wrapped in `.mm-start-actions` (see `central-screen.css`). The wrapper docks bottom-left and stacks the privacy balloon above the button. No positioning override here. */ /* ── Left chrome wrapper ─────────────────────────────────────────── * Single position:fixed column; CSS flex + gap guarantees equal spacing between favicon, progress track, and nav. top / opacity set by JS. */ #az-chrome { position: fixed; left: 7px; bottom: 7px; display: flex; flex-direction: column; align-items: center; gap: 0; z-index: 1500; pointer-events: none; } /* ── Favicon button ──────────────────────────────────────────────── */ #az-favicon { flex-shrink: 0; width: 44px; height: 44px; padding: 0; background: #fff; border: 1px solid #dedede; border-radius: 10px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); cursor: pointer; overflow: hidden; pointer-events: auto; } #az-favicon img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s ease; } #az-favicon:hover img { transform: scale(1.12); } /* The favicon IS section 0 (the Cover): active while it's the current part. */ #az-favicon.is-active { border-color: #00374a; box-shadow: 0 0 0 2px rgba(0, 55, 74, 0.25); } /* ── Progress track ──────────────────────────────────────────────── */ #az-progress { /* `flex: 1` fills whatever vertical space the chrome's top/bottom anchoring leaves between #az-favicon and .krskrt-mm-nav. This stays correct at every aspect ratio — even at squarer ones where body's autozoom2 ratio drops below 1, which (Chromium quirk) visually scales fixed-positioned children too. A previous attempt using `height: calc(100vh - 153px)` evaluated vh in body's pre-zoom CSS pixels and undershot the actually-rendered chrome height at zoom < 1. flex sidesteps that entirely by referencing the parent's used height directly. */ flex: 1; width: 44px; min-height: 24px; margin-bottom: 7px; position: relative; pointer-events: none; } /* With a Finish Flag the track sits flush on the flag (no gap) so the last segment line can run to the track bottom and connect into the flag — the flag carries its own 7px margin-bottom to the nav. */ #az-progress.az-has-flag { margin-bottom: 0; } #az-progress-thumb { position: absolute; left: 50%; transform: translateX(-50%); width: 22px; height: 50px; background: rgba(0, 55, 74, 0.40); border: 1px solid #0050638c; border-radius: 50%; box-shadow: 0 2px 0 #0050638c, 0 4px 6px rgba(0, 0, 0, 0.25); transition: top 0.1s linear; pointer-events: auto; cursor: grab; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; } #az-progress-thumb:active { cursor: grabbing; } #az-progress-thumb .ph { font-size: 22px; color: #00374a; pointer-events: none; line-height: 1; display: block; } /* ── .krskrt-mm-nav inside #az-chrome ───────────────────────────── */ /* Pinned to a fixed height so the chrome above — #az-progress and its ::after end-cap — never shifts when the nav collapses to a single button (.is-solo). All buttons dock to the bottom by default (justify-content: flex-end); the LAST button is then pulled up to the top via `margin-bottom: auto` (see the :last-child rule below). The wrapper itself has no background or shadow — those live on the buttons (see .krskrt-mm-nav-btn below) so empty space inside the box never gets a phantom shadowed outline. */ #az-chrome > .krskrt-mm-nav { flex-shrink: 0; display: flex; flex-direction: column; justify-content: flex-end; height: 81px; width: 44px; pointer-events: auto; } #az-chrome > .krskrt-mm-nav .krskrt-mm-nav-btn { width: 44px; height: 44px; padding: 0; background: #fff; color: #00374a; border: 1px solid #dedede; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; } #az-chrome > .krskrt-mm-nav .krskrt-mm-nav-btn:hover { background: #00a9bb; } #az-chrome > .krskrt-mm-nav .krskrt-mm-nav-btn .ph { display: block; font-size: 20px; line-height: 1; } #az-chrome > .krskrt-mm-nav .krskrt-mm-nav-btn--up { /* Up/prev always docks at the TOP of the box. Auto bottom margin absorbs free space and floats the button toward the top (flex-start). When both buttons are visible (44+44=88, no free space) the auto margin collapses to 0 and the natural order wins — up on top, down underneath. */ margin-bottom: auto; border-radius: 10px 10px 0 0; border-bottom: none; } #az-chrome > .krskrt-mm-nav .krskrt-mm-nav-btn--down { /* Down/next always docks at the BOTTOM. Mirror of --up: auto top margin pushes the button toward flex-end. With the .is-solo case (only one of the two visible) the surviving button keeps its semantic position regardless of which DOM child it is. */ margin-top: auto; border-radius: 0 0 10px 10px; } #az-chrome > .krskrt-mm-nav.is-solo .krskrt-mm-nav-btn { height: 44px; border: 1px solid #dedede; border-radius: 10px; } /* Hide the prev/next nav on the narrow (stacked) responsive layout — below the 782 px Gutenberg column-stacking / autozoom wide-only threshold. */ @media (max-width: 781px) { #az-chrome > .krskrt-mm-nav { display: none; } } /* ── Part-dot indicators ─────────────────────────────────────────── */ /* Thumb renders above dots */ #az-progress-thumb { z-index: 1; } .az-part-dot { position: absolute; left: 50%; transform: translateX(-50%) translateY(-50%) scale(1); width: 22px; height: 22px; border-radius: 50%; background: rgba(0, 55, 74, 0.15); border: none; box-sizing: border-box; pointer-events: auto; cursor: pointer; transition: background 0.15s, transform 0.18s ease; z-index: 1; } /* The section's heading-prefix, watermarked on top of the dot in Lekton. Same faint colour as the dot fill (so the glyph reads as a subtle doubled tint). */ .az-part-dot-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Lekton', ui-monospace, monospace; font-size: 12px; line-height: 1; color: rgba(0, 55, 74, 0.15); pointer-events: none; white-space: nowrap; } .az-part-dot:hover { background: rgba(0, 55, 74, 0.30); border: 3px solid #00374a; transform: translateX(-50%) translateY(-50%) scale(1.35); } .az-part-dot:hover .az-part-dot-num { color: #00374a; } .az-part-dot.is-active { background: rgba(0, 55, 74, 0.50); border: 2px solid #00374a; } .az-part-dot.is-active .az-part-dot-num { color: #00374a; } /* Boundary-crossing pulse — fired by central-screen.js::pulseAzDot() each time the active section changes via scroll. Scale 1 → 1.6 → 1 over 400 ms while preserving the translate(-50%) centring transform. */ @keyframes mm-dot-pulse { 0% { transform: translateX(-50%) translateY(-50%) scale(1); } 40% { transform: translateX(-50%) translateY(-50%) scale(1.6); } 100% { transform: translateX(-50%) translateY(-50%) scale(1); } } .az-part-dot--pulse { animation: mm-dot-pulse 0.4s ease-out; } /* ── Horizontal end-cap at bottom of #az-progress ───────────────── */ /* Hidden when a Finish Flag is present (.az-has-flag) — the flag replaces it. */ #az-progress::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 18px; height: 2px; background: rgba(0, 55, 74, 0.12); border-radius: 1px; } #az-progress.az-has-flag::after { display: none; } /* ── Finish Flag — bottom-of-chrome mirror of #az-favicon ────────── */ /* Same chrome as the favicon (white card, border, radius, shadow, hover scale, active ring), but height:auto so the flag SVG keeps its own aspect ratio. It is its OWN flex row in #az-chrome, directly below #az-progress (the track's flex:1 keeps it pinned to the bottom) — never overlapping the track. margin-bottom matches the track's so the favicon/track/flag/nav spacing rhythm stays even. */ #az-flag { flex-shrink: 0; margin-bottom: 7px; width: 44px; height: auto; padding: 0; background: #fff; border: 1px solid #dedede; border-radius: 10px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); cursor: pointer; overflow: hidden; pointer-events: auto; display: block; font-size: 0; } #az-flag img { display: block; width: 100%; height: auto; transition: transform 0.2s ease; } #az-flag:hover img { transform: scale(1.12); } #az-flag.is-active { border-color: #00374a; box-shadow: 0 0 0 2px rgba(0, 55, 74, 0.25); } /* ── Segment lines between dots ─────────────────────────────────── */ .az-part-line { position: absolute; left: 50%; transform: translateX(-50%); width: 2px; background: rgba(0, 55, 74, 0.12); pointer-events: none; z-index: 0; } /* Tooltip — slides in to the right of the track (#az-chrome is at left:7px) */ .az-part-dot-tip { position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(-4px); background: rgba(0, 55, 74, 0.90); color: #fff; font-size: 12px; line-height: 1.3; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; padding: 5px 9px; border-radius: 5px; pointer-events: none; opacity: 0; transition: opacity 0.18s ease, transform 0.18s ease; z-index: 10; } .az-part-dot:hover .az-part-dot-tip { opacity: 1; transform: translateY(-50%) translateX(0); }