/* ------------------------------------------------------------ */
/* Shot figures - shared accent                                  */
/* ------------------------------------------------------------ */

:root {
    --shot-figure-accent-color: #2e7d54;
    --shot-status-background: #23272e;
}

/* ------------------------------------------------------------ */
/* Shot figures - container and image                            */
/* ------------------------------------------------------------ */

.shot-block {
    max-width: 100%;
    margin: 1.5rem auto;
}

.shot-figure {
    position: relative;
    background-color: #f7f8f9;
    border-radius: 2px 2px 0 0;
}

.shot-figure img,
.shot-figure video {
    display: block;
    width: 100%;
    height: auto;
}

/* ------------------------------------------------------------ */
/* Shot figures - the overlay layer                              */
/* ------------------------------------------------------------ */

.shot-figure-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.shot-figure-arrow {
    fill: var(--shot-figure-accent-color);
}

.shot-figure-ants {
    fill: none;
    stroke: var(--shot-figure-accent-color);
    stroke-width: 4;
    stroke-dasharray: 12 8;
    animation: shot-figure-ants-march 1.2s linear infinite;
}

@keyframes shot-figure-ants-march {
    to {
        stroke-dashoffset: -20;
    }
}

/* ------------------------------------------------------------ */
/* Shot status bar                                               */
/* ------------------------------------------------------------ */

.shot-status-bar,
.shot-lightbox-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 7px 12px;
    box-sizing: border-box;
    border-radius: 0 0 2px 2px;
}

/* The page bar is light, one step darker than the card above it. */
.shot-status-bar {
    background: #eceef1;
}

/* The lightbox bar stays dark. */
.shot-lightbox-bar {
    background: var(--shot-status-background);
}

.shot-status-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 2px 10px 2px 2px;
    border-radius: 2px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease;
    transition-delay: 0.1s;
}

.shot-status-left:hover {
    background: rgba(0, 0, 0, 0.07);
    text-decoration: none;
}

.shot-lightbox-bar .shot-status-left:hover {
    background: rgba(255, 255, 255, 0.14);
}

.shot-status-open {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 26px;
    height: 26px;
    color: #23272e;
}

.shot-lightbox-bar .shot-status-open {
    color: #ffffff;
}

.shot-status-menu {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #454c56;
    font-size: 13px;
    white-space: nowrap;
}

.shot-lightbox-bar .shot-status-menu {
    color: rgba(255, 255, 255, 0.72);
}

/* A popup figure never shows inline - a play link in the text
   is what brings it up, in the lightbox. */

.shot-block-popup {
    display: none;
}

/* ------------------------------------------------------------ */
/* Shot gallery - split-page carousel                             */
/* ------------------------------------------------------------ */

.shot-gallery {
    position: relative;
    width: 100%;
}

.shot-gallery-track {
    position: relative;
    width: 100%;
}

.shot-gallery-slide {
    display: none;
}

.shot-gallery-slide.is-active {
    display: block;
}

.shot-gallery .shot-block,
.shot-gallery .shot-block-gallery {
    width: 100% !important;
    margin: 0;
}

/* A gallery slide floats over the page - the stills' padding and the
   videos' keyed backdrop are transparent, so no card goes behind them. */
.shot-gallery .shot-figure {
    background-color: transparent;
    border-radius: 0;
}

/* The frame over the dialog's outline - shown only in the hero, where
   it paints the window's own color over the dialog's light rim. */
.shot-gallery-frame {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.shot-gallery-frame rect {
    fill: none;
    stroke: var(--landing-bg-dark-card);
}

.landing-hero-media .shot-gallery-frame {
    display: block;
}

.shot-gallery-nav {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
}

.shot-gallery-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    cursor: pointer;
}

.shot-gallery-dot:hover {
    background: rgba(255, 255, 255, 0.6);
}

.shot-gallery-dot.is-active {
    background: #ffffff;
}

/* Rows sit on a light background, so their dots go dark. */
.split-row .shot-gallery-dot {
    background: rgba(26, 31, 54, 0.25);
}

.split-row .shot-gallery-dot:hover {
    background: rgba(26, 31, 54, 0.45);
}

.split-row .shot-gallery-dot.is-active {
    background: #23272e;
}

/* The play link itself - a circled triangle followed by the link text.
   The link stays a plain inline element so its text shares the paragraph's
   baseline - an inline-flex box would take its baseline from the icon
   and lift the whole link above the surrounding text. */

.shot-popup-link {
    color: var(--zato-docs-link);
    cursor: pointer;
    white-space: nowrap;
}

.shot-popup-link:hover {
    text-decoration: underline;
}

/* The icon centers on the cap height, not on `middle` - middle uses half
   the x-height, which with this font leaves the icon a couple of pixels
   too low and makes the text next to it read as sitting too high. */

.shot-popup-link svg {
    vertical-align: calc((1cap - 16px) / 2);
    margin-right: 3px;
}

/* A pillar-hero embed shows the short pillar caption on the page bar -
   other figures show the full caption there, but never the menu path. */

.shot-block-pillar-hero .shot-status-bar .shot-status-left {
    padding-right: 2px;
}

.shot-status-chevron {
    display: flex;
    align-items: center;
    color: #7c838c;
}

.shot-lightbox-bar .shot-status-chevron {
    color: rgba(255, 255, 255, 0.45);
}

.shot-status-divider {
    flex: none;
    width: 1px;
    height: 14px;
    background: #cfd4da;
}

.shot-lightbox-bar .shot-status-divider {
    background: rgba(255, 255, 255, 0.25);
}

.shot-status-caption {
    color: #23272e;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shot-lightbox-bar .shot-status-caption {
    color: #f2f4f6;
}

/* ------------------------------------------------------------ */
/* Shot video controls                                           */
/* ------------------------------------------------------------ */

.shot-video-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    position: relative;
}

/* A video plays and pauses on its own frame, so the zoom-in cursor
   of still shots gives way to a plain pointer. */
.shot-figure video {
    cursor: pointer;
}

/* The big play button - a not-yet-played video sits behind it,
   the way video sites frame a clip before its first play. */
.shot-video-big-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 50px;
    padding: 0;
    border: none;
    border-radius: 12px;
    background: rgba(20, 23, 27, 0.72);
    color: #ffffff;
    cursor: pointer;
    transition: background 0.15s ease;
}

.shot-video-big-play:hover {
    background: rgba(20, 23, 27, 0.88);
}

/* The controls of a big-play video - they take the big button's place at
   the first play, in a bar under the frame, so they never cover any of
   the video's own pixels. */
.shot-video-bar-below {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 12px;
    background: #eceef1;
    border-radius: 0 0 2px 2px;
}

/* The controls span the bar's full width and the track stretches between
   the time and the buttons, the way video sites lay theirs out. */
.shot-video-bar-below .shot-video-controls {
    flex: 1;
}

.shot-video-bar-below .shot-video-track {
    flex: 1;
    width: auto;
}

/* The button that pops a big-play video up into the lightbox. */
.shot-video-expand {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 2px;
    background: transparent;
    color: #23272e;
    cursor: pointer;
    transition: background 0.15s ease;
}

.shot-video-expand:hover {
    background: rgba(0, 0, 0, 0.07);
}

/* The auto-replay countdown - a tiny line tucked right under the track's
   rail, left aligned with it, inside the bar, out of the flow so its
   coming and going never shifts anything. */
.shot-video-replay-row {
    display: flex;
    align-items: center;
    gap: 6px;
    position: absolute;
    left: 38px;
    top: calc(50% + 8px);
    white-space: nowrap;
}

.shot-video-replay-text {
    color: #3a4048;
    font-size: 9px;
    line-height: 10px;
    opacity: 0.62;
    font-variant-numeric: tabular-nums;
}

/* The opt-out is a flat chip - a tint of the text color, nothing more. */
.shot-video-replay-optout {
    padding: 0 4px;
    border: none;
    border-radius: 2px;
    background: rgba(58, 64, 72, 0.14);
    color: #3a4048;
    font-size: 9px;
    line-height: 11px;
    opacity: 0.62;
    cursor: pointer;
}

.shot-video-replay-optout:hover {
    opacity: 1;
}

.shot-lightbox-bar .shot-video-replay-text {
    color: rgba(255, 255, 255, 0.85);
}

.shot-lightbox-bar .shot-video-replay-optout {
    background: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.9);
}

.shot-video-play {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 2px;
    background: transparent;
    color: #23272e;
    cursor: pointer;
    transition: background 0.15s ease;
    transition-delay: 0.1s;
}

.shot-video-play:hover {
    background: rgba(0, 0, 0, 0.07);
}

.shot-lightbox-bar .shot-video-play {
    color: #ffffff;
}

.shot-lightbox-bar .shot-video-play:hover {
    background: rgba(255, 255, 255, 0.14);
}

.shot-video-track {
    position: relative;
    width: 120px;
    height: 16px;
    cursor: pointer;
    touch-action: none;
}

.shot-video-rail {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 4px;
    transform: translateY(-50%);
    border-radius: 2px;
    background: #c9ced4;
    overflow: hidden;
}

.shot-lightbox-bar .shot-video-rail {
    background: rgba(255, 255, 255, 0.35);
}

.shot-video-progress {
    width: 0;
    height: 100%;
    background: #23272e;
}

.shot-lightbox-bar .shot-video-progress {
    background: #ffffff;
}

.shot-video-thumb {
    position: absolute;
    top: 50%;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #23272e;
    transform: translate(-50%, -50%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

.shot-lightbox-bar .shot-video-thumb {
    background: #ffffff;
}

.shot-video-time {
    color: #3a4048;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.shot-lightbox-bar .shot-video-time {
    color: rgba(255, 255, 255, 0.85);
}

/* ------------------------------------------------------------ */
/* Shot playback speed                                           */
/* ------------------------------------------------------------ */

.shot-video-speed {
    position: relative;
    flex: none;
}

/* The width fits the widest label, 0.25x, so switching speeds never shifts the layout. */
.shot-video-speed-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 2px;
    background: transparent;
    color: #23272e;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease;
    transition-delay: 0.1s;
}

.shot-video-speed-button:hover {
    background: rgba(0, 0, 0, 0.07);
}

.shot-lightbox-bar .shot-video-speed-button {
    color: #ffffff;
}

.shot-lightbox-bar .shot-video-speed-button:hover {
    background: rgba(255, 255, 255, 0.14);
}

.shot-video-speed-menu {
    display: none;
    position: absolute;
    right: 0;
    bottom: calc(100% + 6px);
    min-width: 72px;
    padding: 4px 0;
    border-radius: 3px;
    background: #ffffff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    z-index: 10;
}

.shot-video-speed-menu-open {
    display: block;
}

.shot-lightbox-bar .shot-video-speed-menu {
    background: #2c313a;
}

.shot-video-speed-option {
    padding: 6px 14px;
    color: #23272e;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease;
    transition-delay: 0.1s;
}

.shot-video-speed-option:hover {
    background: rgba(0, 0, 0, 0.07);
}

.shot-lightbox-bar .shot-video-speed-option {
    color: rgba(255, 255, 255, 0.85);
}

.shot-lightbox-bar .shot-video-speed-option:hover {
    background: rgba(255, 255, 255, 0.14);
}

.shot-video-speed-option-active {
    font-weight: 700;
}

/* ------------------------------------------------------------ */
/* Shot lightbox                                                 */
/* ------------------------------------------------------------ */

.shot-zoomable {
    cursor: zoom-in;
}

.shot-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 23, 27, 0.82);
}

.shot-lightbox-stage {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-width: 92vw;
}

.shot-lightbox-image {
    display: block;
    max-width: 92vw;
    max-height: 82vh;
    border-radius: 2px 2px 0 0;
}

/* A video in the lightbox is clicked to play and pause, not to zoom. */
.shot-lightbox-stage video.shot-zoomable {
    cursor: pointer;
}

/* Zero intrinsic width, so the stage is sized by the image alone
   and the bar then stretches to exactly the image's width.
   The shadow mirrors the one baked into the screenshot's pixels. */
.shot-lightbox-bar {
    width: 0;
    min-width: 100%;
    box-sizing: border-box;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.38);
}

.shot-lightbox-arrow,
.shot-lightbox-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    cursor: pointer;
    transition: background 0.15s ease;
    transition-delay: 0.1s;
}

.shot-lightbox-arrow:hover,
.shot-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.26);
}

.shot-lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.shot-lightbox-arrow-prev {
    left: 28px;
}

.shot-lightbox-arrow-next {
    right: 28px;
}

.shot-lightbox-close {
    position: absolute;
    top: 24px;
    right: 28px;
}

/* ------------------------------------------------------------ */
/* Shot dashboard dialog                                         */
/* ------------------------------------------------------------ */

.shot-dashboard-dialog {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 23, 27, 0.6);
}

.shot-dashboard-dialog-card {
    width: min(640px, 92vw);
    padding: 28px 32px;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}

.shot-dashboard-dialog-title {
    margin-bottom: 8px;
    color: #1d222a;
    font-size: 17px;
    font-weight: 600;
}

.shot-dashboard-dialog-message {
    margin-bottom: 18px;
    color: #5c6470;
    font-size: 14px;
    line-height: 21px;
}

.shot-dashboard-dialog-input {
    box-sizing: border-box;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #cfd4da;
    border-radius: 3px;
    color: #1d222a;
    font-size: 15px;
}

.shot-dashboard-dialog-input:focus {
    outline: none;
    border-color: var(--zato-default-accent-color);
    box-shadow: 0 0 0 3px rgba(0, 111, 191, 0.15);
}

.shot-dashboard-dialog-input-invalid,
.shot-dashboard-dialog-input-invalid:focus {
    border-color: #c43d3d;
    box-shadow: 0 0 0 3px rgba(196, 61, 61, 0.15);
}

.shot-dashboard-dialog-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.shot-dashboard-dialog-error {
    margin-right: auto;
    color: #c43d3d;
    font-size: 14px;
    font-weight: 700;
}

.shot-dashboard-dialog-cancel,
.shot-dashboard-dialog-confirm {
    padding: 9px 18px;
    border: none;
    border-radius: 3px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s ease;
    transition-delay: 0.1s;
}

.shot-dashboard-dialog-cancel {
    background: #eef0f2;
    color: #3a4048;
}

.shot-dashboard-dialog-cancel:hover {
    background: #e2e5e9;
}

.shot-dashboard-dialog-confirm {
    background: var(--zato-default-accent-color);
    color: #ffffff;
}

.shot-dashboard-dialog-confirm:hover {
    background: #005c9e;
}