/* My Space media viewer (Phase 1).
   The gallery grid and the default thumbnail box are declared in adaptive.css; this file owns the
   feed tile itself - one compact 16:9 frame for a photograph and a video alike - plus the tile
   affordances and the full-screen viewer. */

.my-space-media-tile{position:relative;min-width:0;overflow:hidden;border-radius:var(--radius-md);background:var(--ms-surface-sunken)}
.my-space-media-tile .my-space-media{border-radius:0}
/* One compact 16:9 frame for every feed item, a photograph and a video alike, whatever shape the
   original is: the picture fills it edge to edge so no side bars or mat are ever left showing, and
   it is cropped from the centre rather than stretched. The frame is capped in width, which is what
   keeps a single item from dominating the feed on a wide screen, and the surface behind the picture
   is the neutral sunken one rather than a dark green slab, so a picture that is still loading - or a
   clip that has not drawn its frame yet - never shows as a blank green tile. */
.my-space-media-tile.is-video,.my-space-media-tile.is-image{aspect-ratio:16/9;max-width:min(100%,32rem);margin-inline:auto;background:var(--ms-surface-sunken)}
.my-space-media-tile.is-video .my-space-media,.my-space-media-tile.is-image .my-space-media{width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:cover;object-position:center;background:var(--ms-surface-sunken)}
/* The official mark, small and soft, drawn straight on the picture in the corner of the frame - no
   badge, plate or pill behind it. A display overlay only, never part of the stored video, and the
   drop shadow keeps it legible over a light or a dark frame alike. The share of the frame is small
   enough that a two-up phone thumbnail stays a picture rather than a logo, while the floor keeps it
   readable on the widest frame. */
.my-space-media-watermark{position:absolute;z-index:2;right:.45rem;bottom:.45rem;width:clamp(2.25rem,14%,5rem);height:auto;padding:0;border:0;border-radius:0;background:none;opacity:.8;pointer-events:none;filter:drop-shadow(0 0 .06rem var(--ms-veil)) drop-shadow(0 .08rem .18rem var(--ms-scrim))}
/* A clip states its own length in the opposite corner, so a video tile is never mistaken for a
   photograph and a reader knows what they are about to open. It is decorative to assistive
   technology - the expand control already names the video - and it never takes a tap. */
.my-space-media-duration{position:absolute;z-index:2;left:.45rem;bottom:.45rem;padding:.1rem .35rem;border-radius:var(--radius-sm);background:var(--ms-scrim);color:var(--ms-text-inverse);font-size:.68rem;font-weight:700;line-height:1.35;pointer-events:none}
.my-space-media-duration[hidden]{display:none}
/* A picture whose bytes cannot be read says so on the tile instead of leaving a blank frame. The note
   is decorative to assistive technology and never takes the tap that opens the viewer. */
.my-space-media-note{position:absolute;z-index:2;inset:auto 0 .5rem;width:max-content;max-width:90%;margin:0 auto;padding:.12rem .45rem;border-radius:var(--radius-sm);background:var(--ms-scrim);color:var(--ms-text-inverse);font-size:.72rem;font-weight:700;line-height:1.35;text-align:center;pointer-events:none}
.my-space-media-note[hidden]{display:none}
/* Multi-photo posts get a denser grid on wider screens; single photos keep the
   adaptive.css layout because data-count="1" is excluded here. */
@media(min-width:48rem){.my-space-media-gallery:not([data-count="1"]){grid-template-columns:repeat(3,minmax(0,1fr))}}

.my-space-media-open{position:absolute;inset:0;z-index:1;width:100%;height:100%;padding:0;border:0;border-radius:inherit;background:transparent;cursor:zoom-in}
.my-space-media-open:focus-visible{outline:3px solid var(--ms-text-inverse);outline-offset:-3px}
/* One overlay covers the tile: it starts or stops the inline video, and its mark is drawn only while
   the video is stopped - which is what makes a blocked autoplay recoverable by one tap. It sits under
   the expand control so a tap in that corner still opens the viewer. */
.my-space-media-play{position:absolute;inset:0;z-index:1;display:grid;place-items:center;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:pointer}
.my-space-media-play svg{width:clamp(2.25rem,13%,3.25rem);height:auto;color:var(--ms-text-inverse);filter:drop-shadow(0 .1rem .22rem var(--ms-scrim))}
.my-space-media-play:focus-visible{outline:3px solid var(--ms-text-inverse);outline-offset:-3px}
.my-space-media-tile.is-playing .my-space-media-play svg{visibility:hidden}
.my-space-media-expand{position:absolute;z-index:3;top:.4rem;right:.4rem;min-width:44px;min-height:44px;border:0;border-radius:var(--radius-round);background:var(--ms-scrim);color:var(--ms-text-inverse);font-size:1.05rem;line-height:1;cursor:pointer}
.my-space-media-expand:focus-visible{outline:3px solid var(--ms-text-inverse);outline-offset:-3px}

body.media-viewer-open{overflow:hidden}
.media-viewer{position:fixed;inset:0;z-index:120;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:.35rem;padding:.5rem;background:rgba(8,18,13,.95);color:var(--ms-text-inverse);overscroll-behavior:contain}
.media-viewer-bar{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.1rem .2rem}
.media-viewer-count{margin:0;color:var(--ms-sage-200);font-size:.85rem}
.media-viewer-close{min-width:44px;min-height:44px;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(255,255,255,.08);color:var(--ms-text-inverse);font-size:1.05rem;line-height:1;cursor:pointer}
.media-viewer-close:focus-visible{outline:3px solid var(--ms-text-inverse);outline-offset:2px}
.media-viewer-stage{position:relative;display:grid;place-items:center;min-height:0;overflow:hidden;touch-action:pan-y}
.media-viewer-stage .my-space-media{width:auto;height:auto;max-width:100%;max-height:calc(100vh - 9rem);margin:0;aspect-ratio:auto;border-radius:var(--radius-sm);background:var(--ms-green-900);object-fit:contain}
@supports (height:100dvh){.media-viewer-stage .my-space-media{max-height:calc(100dvh - 9rem)}}
.media-viewer.is-zoomed .media-viewer-stage{touch-action:none}
.media-viewer.is-zoomed .my-space-media{cursor:grab}
.media-viewer-status{margin:0;min-height:1.2rem;text-align:center;color:var(--ms-sage-200);font-size:.85rem}
.media-viewer-nav{display:flex;align-items:center;justify-content:center;gap:.6rem;padding-bottom:env(safe-area-inset-bottom,0px)}
.media-viewer-nav button{min-width:52px;min-height:44px;border:1px solid rgba(255,255,255,.3);border-radius:var(--radius-round);background:rgba(255,255,255,.08);color:var(--ms-text-inverse);font-size:1rem;cursor:pointer}
.media-viewer-nav button[hidden]{display:none}
.media-viewer-nav button:focus-visible{outline:3px solid var(--ms-text-inverse);outline-offset:2px}
.media-viewer-retry{justify-self:center;min-height:44px;padding:.4rem 1rem;border:0;border-radius:var(--radius-round);background:var(--ms-green-650);color:var(--ms-text-inverse);font-weight:700;cursor:pointer}
.media-viewer-retry[hidden]{display:none}
@media(min-width:48rem){.media-viewer{padding:1rem}}