/* Share as a story (approved 24 Oct 2026): the composer's strip and the story preview. Light and dark from the tokens;
   the preview stage is the replay's dark stage on every theme. Nothing wraps. */
.cs-strip{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cs-strip::-webkit-scrollbar{display:none}
.cs-story{flex:none;width:76px;display:flex;flex-direction:column;gap:6px;align-items:center;background:none;border:0;padding:0;font:inherit;color:var(--ink);cursor:pointer}
.cs-story-thumb{position:relative;width:76px;height:135px;border-radius:12px;overflow:hidden;background:var(--card);border:1px solid var(--separator);display:flex;align-items:center;justify-content:center}
.cs-story-thumb .cs-prep-line{position:absolute;left:8px;right:8px;bottom:8px;height:3px;border-radius:2px;background:rgba(255,255,255,.25)}
.cs-story-thumb .cs-prep-line i{display:block;height:100%;width:0;border-radius:2px;background:var(--accent)}
.cs-story-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cs-story-thumb.video{background:linear-gradient(160deg,#1b2333,#0B0F19);color:#fff;border-color:transparent}
.cs-story-thumb.video svg{width:26px;height:26px;opacity:.9}
.cs-story small{font-size:var(--font-caption,12px);font-weight:var(--weight-semibold,600);white-space:nowrap}
.cs-story:focus-visible .cs-story-thumb{outline:2.5px solid var(--accent);outline-offset:2px}
.cs-strip-note{font-size:var(--font-footnote,13px);color:var(--ink-secondary);padding:0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

dialog.ss-stage{max-width:none;max-height:none;width:100vw;height:100dvh;margin:0;padding:0;border:0;overflow:hidden}
dialog.ss-stage::backdrop{background:#0B0F19}
.ss-stage{position:fixed;inset:0;z-index:2147483000;background:#0B0F19;color:#fff;font-family:var(--font-stack,-apple-system,system-ui,sans-serif);-webkit-font-smoothing:antialiased}
.ss-top{position:absolute;left:16px;right:16px;top:calc(14px + env(safe-area-inset-top,0px));display:flex;align-items:center;justify-content:space-between;gap:12px;white-space:nowrap}
.ss-name{min-width:0}
.ss-name b{display:block;font-size:17px;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.ss-name small{display:block;font-size:12px;color:rgba(235,235,245,.6);margin-top:2px;overflow:hidden;text-overflow:ellipsis}
.ss-x{flex:none;width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:20px;line-height:34px;padding:0;cursor:pointer}
/* Inside the app the native bar already shows the story title and Cancel. The page keeps the date and the run name on one line under that bar, and the card starts just below the line. On the web the title and the close button stay. */
.ss-stage.ss-native-bar .ss-name b,.ss-stage.ss-native-bar .ss-x{display:none}
.ss-stage.ss-native-bar .ss-top{top:calc(8px + env(safe-area-inset-top,0px));justify-content:center}
.ss-stage.ss-native-bar .ss-name{width:100%;text-align:center}
.ss-stage.ss-native-bar .ss-name small{margin-top:0}
.ss-stage.ss-native-bar .ss-poster{top:calc(34px + env(safe-area-inset-top,0px))}
.ss-stage.ss-native-bar.ss-native-bare .ss-top{display:none}
.ss-stage.ss-native-bar.ss-native-bare .ss-poster{top:calc(12px + env(safe-area-inset-top,0px))}
/* The card stops above a status row. Buttons occupy 22–72px; the 16px status line sits at 78–94px, with 6px on either side — the gap the buttons already keep. */
.ss-poster{position:absolute;left:0;right:0;top:calc(64px + env(safe-area-inset-top,0px));bottom:calc(100px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;justify-content:center;touch-action:pan-y}
.ss-frame{position:relative;height:100%;max-width:calc(100% - 48px);aspect-ratio:9/16;width:auto;flex:none;border-radius:14px;box-shadow:0 10px 40px rgba(0,0,0,.45);touch-action:pan-y}
.ss-host{position:absolute;inset:0;border-radius:14px;overflow:hidden}
.ss-host > canvas{display:block;width:100%;height:100%;max-width:none;aspect-ratio:auto;object-fit:contain;border-radius:0;box-shadow:none}
.ss-video{position:absolute;inset:0;width:100%;height:100%;max-width:none;aspect-ratio:auto;border-radius:0;overflow:hidden;box-shadow:none}
/* Centred on the card's left and right edges. The frame keeps 24 px of gutter on each side,
   so the full 44 px target stays inside the viewport and still meets the card edge.
   placeArrows() sets each button. The saved picture is the canvas, not this box.
   A translucent dark circle, 8 px inside the target, blurred. Nothing square. */
.ss-under{position:absolute;z-index:3;height:44px;pointer-events:none}
.ss-under-mid{display:none}
.ss-nav{position:relative;z-index:2;width:44px;height:44px;min-width:44px;min-height:44px;border-radius:50%;border:0;padding:0;margin:0;background:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto}
.ss-under .ss-nav{position:absolute;top:0;right:auto}
.ss-nav::before{content:"";position:absolute;inset:4px;border-radius:50%;background:rgba(15,18,25,.42);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 6px rgba(0,0,0,.18)}
.ss-nav[hidden]{display:none}
.ss-nav svg{position:relative;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ss-video .rp-stage{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;border-radius:14px;box-shadow:none}
.ss-video .rp-close,.ss-video .rp-bar{display:none}
/* The story card has no share bar. The 84px lift was that bar's clearance, so the tiles sat in a hole and the brand row fell on the card edge. Tiles sit just above oxygon.app and the map credit, the stack the encoded frame paints. The card is already above the home indicator, so this inset is not the screen's safe area. */
.ss-video .rp-final{bottom:32px}
.ss-video .rp-foot{bottom:6px;z-index:4}
.ss-video .rp-live{bottom:36px}
.ss-video .rp-top .rp-t{padding-right:0}
/* Poster canvases are 9:16 cards. The player hosted in one is not: its map fills the card, its chart stays the short strip. */
.ss-video .rp-cesium,.ss-video .cesium-viewer,.ss-video .cesium-viewer-cesiumWidgetContainer,.ss-video .cesium-widget{position:absolute;inset:0;width:100%;height:100%}
.ss-video canvas{max-width:none;aspect-ratio:auto;object-fit:fill;border-radius:0;box-shadow:none}
.ss-video .rp-cesium canvas{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none!important;aspect-ratio:auto!important}
.ss-video .rp-chart{display:block;width:100%;height:44px;max-width:none;aspect-ratio:auto}
.ss-status{position:absolute;left:16px;right:16px;bottom:calc(78px + env(safe-area-inset-bottom,0px));height:16px;line-height:16px;text-align:center;font-size:13px;color:rgba(235,235,245,.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-bar{position:absolute;left:16px;right:16px;bottom:calc(22px + env(safe-area-inset-bottom,0px));display:flex;gap:10px;justify-content:center}
.ss-bar button{height:50px;border-radius:25px;border:0;font:600 17px var(--font-stack,-apple-system,system-ui,sans-serif);padding:0 26px;display:flex;align-items:center;gap:8px;white-space:nowrap;cursor:pointer}
.ss-bar .ss-sec{background:rgba(255,255,255,.14);color:#fff}
.ss-bar .ss-pri{background:var(--accent);color:var(--on-accent,#fff);flex:1;max-width:260px;justify-content:center}
.ss-bar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ss-poster:focus,.ss-host:focus{outline:none}
/* Then vs now with both faces: page dots and the other face's name under the poster; a tap anywhere on it switches. */
.ss-stage:has(.ss-faces) .ss-poster{bottom:calc(138px + env(safe-area-inset-bottom,0px))}
.ss-stage:has(.ss-faces) .ss-status{bottom:calc(116px + env(safe-area-inset-bottom,0px))}
.ss-faces{position:absolute;left:16px;right:16px;bottom:calc(80px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center}
.ss-face{display:flex;align-items:center;gap:8px;height:30px;padding:0 12px;border:0;border-radius:15px;background:transparent;color:rgba(235,235,245,.75);font:500 13px var(--font-stack,-apple-system,system-ui,sans-serif);white-space:nowrap;cursor:pointer}
.ss-dots{display:flex;gap:5px}
.ss-dots i{width:6px;height:6px;border-radius:50%;background:rgba(235,235,245,.35)}
.ss-dots i.on{background:#fff}
/* Card backgrounds (approved 5 Nov 2026, docs/mockups/share-backgrounds-2026-11). The option row (Choose figures ·
   Background) sits with the same 12px above and below: Save and Share occupy 22–72px, the row 84–114px, the card ends
   at 126px (Roberto's correction, 5 Nov). The card has no caption under it there: Save's and Share's words show as a
   small pill over the card's foot, only while there are any. */
.ss-stage:has(.ss-opts) .ss-poster{bottom:calc(126px + env(safe-area-inset-bottom,0px))}
.ss-opts{position:absolute;left:16px;right:16px;bottom:calc(84px + env(safe-area-inset-bottom,0px));height:30px;display:flex;justify-content:center;align-items:center;gap:8px;white-space:nowrap}
.ss-opts button{display:flex;align-items:center;gap:7px;height:30px;padding:0 14px;border:0;border-radius:15px;background:rgba(255,255,255,.14);color:#fff;font:600 13px var(--font-stack,-apple-system,system-ui,sans-serif);white-space:nowrap;flex:none;cursor:pointer}
.ss-opts svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.ss-opts .ss-bg-btn i{width:14px;height:14px;border-radius:4px;flex:none;display:block;background-size:cover;background-position:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.ss-bg-checker{background:repeating-conic-gradient(#555 0 25%,#333 0 50%) 0 0/6px 6px}
.ss-stage:has(.ss-opts) .ss-status{left:50%;right:auto;transform:translateX(-50%);max-width:calc(100% - 64px);bottom:calc(136px + env(safe-area-inset-bottom,0px));z-index:4;height:24px;line-height:24px;padding:0 10px;border-radius:12px;background:rgba(0,0,0,.62);color:#fff;font-weight:600;font-size:12px}
.ss-stage:has(.ss-opts) .ss-status:empty{visibility:hidden}
/* The sheet: Choose figures' own sheet (week-share.js .ds-ws-sheet), repeated here for a page without week-share.js. */
.ss-bg-sheet{position:absolute;left:0;right:0;bottom:0;z-index:5;background:#1C1C1E;color:#fff;border-radius:16px 16px 0 0;padding:8px 20px calc(20px + env(safe-area-inset-bottom,0px));box-shadow:0 -10px 40px rgba(0,0,0,.45);font-family:var(--font-stack,-apple-system,system-ui,sans-serif);max-height:min(82vh,720px);overflow:auto;-webkit-user-select:none;user-select:none}
.ss-bg-sheet .grab{width:36px;height:5px;border-radius:3px;background:rgba(235,235,245,.3);margin:0 auto 10px}
.ss-bg-sheet .hd{display:flex;align-items:center;justify-content:space-between;margin:0 0 6px;position:sticky;top:0;background:#1C1C1E;z-index:1}
.ss-bg-sheet .hd b{font-size:17px}
.ss-bg-sheet .hd button{border:0;background:none;color:var(--accent);font:600 17px var(--font-stack,-apple-system,system-ui,sans-serif);cursor:pointer;padding:6px 0}
.ss-bg-sheet .sub{font-size:13px;color:rgba(235,235,245,.6);margin:0 0 6px}
@media (min-width:700px){.ss-bg-sheet:not(.ds-ws-sheet-native){left:auto;right:24px;bottom:auto;top:84px;width:340px;border-radius:14px;padding-bottom:20px}}
.ss-bg-seg{display:flex;gap:2px;padding:2px;background:rgba(118,118,128,.24);border-radius:9px;margin:6px 0 12px}
.ss-bg-seg button{flex:1;min-width:0;height:30px;border:0;border-radius:7px;background:transparent;color:#fff;font:500 13px var(--font-stack,-apple-system,system-ui,sans-serif);white-space:nowrap;cursor:pointer}
.ss-bg-seg button[aria-selected=true]{background:#636366;font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.ss-bg-sw{display:flex;gap:12px;padding:6px 6px 8px;margin:0 -6px}
.ss-bg-sw button{width:40px;height:40px;flex:none;border-radius:20px;border:0;padding:0;cursor:pointer;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}
.ss-bg-sw button.on{box-shadow:0 0 0 2px #1C1C1E,0 0 0 4px var(--accent,#ff6b00)}
.ss-bg-cap{font-size:13px;line-height:1.35;color:rgba(235,235,245,.6);margin:4px 0 8px}
.ss-bg-cap.ss-bg-foot{margin-top:10px}
/* The selected photo's ring is 4px outside its tile: the strip keeps 6px all round, so the ring is drawn whole (Roberto's mark, 5 Nov). */
.ss-bg-ph{display:flex;gap:10px;overflow-x:auto;padding:6px;margin:0 -6px 6px;scrollbar-width:none}
.ss-bg-ph::-webkit-scrollbar{display:none}
.ss-bg-ph button{width:64px;height:84px;flex:none;border:0;padding:0;border-radius:8px;background-size:cover;background-position:center;cursor:pointer}
.ss-bg-ph button.on{box-shadow:0 0 0 2px #1C1C1E,0 0 0 4px var(--accent,#ff6b00)}
.ss-bg-lib{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;border:0;border-radius:12px;background:rgba(118,118,128,.24);color:#fff;font:600 15px var(--font-stack,-apple-system,system-ui,sans-serif);white-space:nowrap;cursor:pointer}
.ss-bg-lib svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* A photo background moves with the finger; the hint is page chrome over the card, never in the picture. */
.ss-host.ss-bg-adjust{touch-action:none;cursor:grab}
.ss-bg-hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:10px;padding:0 6px 0 12px;height:30px;border-radius:15px;background:rgba(0,0,0,.6);color:#fff;font:600 12px var(--font-stack,-apple-system,system-ui,sans-serif);white-space:nowrap}
.ss-bg-hint button{border:0;background:none;color:var(--accent,#ff6b00);font:600 12px var(--font-stack,-apple-system,system-ui,sans-serif);padding:0 6px;height:30px;cursor:pointer}
.ss-stage:has(.ss-status:not(:empty)) .ss-bg-hint{display:none}