{"version":3,"file":"VideoPlayer.module.cjs","names":[],"sources":["../../../src/components/VideoPlayer/VideoPlayer.module.css"],"sourcesContent":["/*\n * The controls are a bar under the frame, not an overlay.\n *\n * An overlay has to earn its contrast against arbitrary video pixels, and no\n * `--tempest-*` token can promise that: every text token here is resolved\n * against a known surface, and the two contrast defects this repo shipped were\n * both a text token used over a surface it was never checked against. A bar with\n * its own surface inherits the theme and is legible by construction. An app that\n * wants a cinema overlay can position its own chrome over the frame; what ships\n * is the one that is right in both themes.\n */\n.player {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    overflow: hidden;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    background-color: var(--tempest-surface);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-sans);\n}\n\n/*\n * The frame keeps its shape before the video reports one, so the control bar\n * does not jump down the page when metadata lands. Black rather than a surface\n * token: letterboxing is part of the picture, and a light bar around a dark\n * video reads as a rendering bug.\n */\n.frame {\n    position: relative;\n    width: 100%;\n    background-color: #000000;\n}\n\n.video {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n}\n\n.chrome {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--tempest-space-3);\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    border-top: 1px solid var(--tempest-border);\n    background-color: var(--tempest-surface);\n}\n\n.transport {\n    position: relative;\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    justify-content: center;\n    width: 2.25rem;\n    height: 2.25rem;\n    padding: 0;\n    border: none;\n    border-radius: var(--tempest-radius-full);\n    background-color: var(--tempest-primary);\n    color: var(--tempest-primary-foreground);\n    cursor: pointer;\n    transition: var(--tempest-transition-color);\n}\n\n.transport:disabled {\n    background-color: var(--tempest-surface-3);\n    color: var(--tempest-text-subtle);\n    cursor: not-allowed;\n}\n\n.icon {\n    position: relative;\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    justify-content: center;\n    width: 2rem;\n    height: 2rem;\n    padding: 0;\n    border: none;\n    border-radius: var(--tempest-radius-md);\n    background-color: transparent;\n    color: var(--tempest-text-muted);\n    cursor: pointer;\n    transition: var(--tempest-transition-color);\n}\n\n.icon:hover:not(:disabled) {\n    background-color: var(--tempest-surface-2);\n    color: var(--tempest-text);\n}\n\n.icon:disabled {\n    color: var(--tempest-text-subtle);\n    cursor: not-allowed;\n}\n\n/*\n * The track is drawn on the input itself rather than with a wrapper and an\n * overlay: the native element already carries the keyboard behaviour and the\n * value semantics, and the only thing missing is the look.\n */\n.seek {\n    flex: 1 1 8rem;\n    min-width: 3rem;\n    height: 1.25rem;\n    margin: 0;\n    background: none;\n    accent-color: var(--tempest-primary);\n    cursor: pointer;\n}\n\n.volume {\n    flex: 0 1 4.5rem;\n    min-width: 2.5rem;\n    height: 1.25rem;\n    margin: 0;\n    background: none;\n    accent-color: var(--tempest-primary);\n    cursor: pointer;\n}\n\n.seek:disabled,\n.volume:disabled {\n    accent-color: var(--tempest-surface-3);\n    cursor: not-allowed;\n}\n\n.rate {\n    flex: 0 0 auto;\n    padding: var(--tempest-space-1) var(--tempest-space-2);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background-color: var(--tempest-surface);\n    color: var(--tempest-text);\n    font-family: inherit;\n    font-size: var(--tempest-text-xs);\n    font-variant-numeric: tabular-nums;\n    cursor: pointer;\n}\n\n.rate:disabled {\n    color: var(--tempest-text-subtle);\n    cursor: not-allowed;\n}\n\n.transport:focus-visible,\n.icon:focus-visible,\n.seek:focus-visible,\n.volume:focus-visible,\n.rate:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: 2px;\n    border-radius: var(--tempest-radius-sm);\n}\n\n/*\n * Tabular figures, so the elapsed time does not shift the seek bar sideways as\n * the digits change — a proportional `1` is narrower than a `0`, and at ten\n * updates a second the whole row visibly jitters.\n */\n.time {\n    display: inline-flex;\n    flex: 0 0 auto;\n    gap: var(--tempest-space-1);\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n    font-variant-numeric: tabular-nums;\n}\n\n.actions {\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    gap: var(--tempest-space-1);\n}\n\n/*\n * Fullscreen presents the shell, so the frame has to give up its aspect box and\n * take the height that is left over — otherwise a 16/9 box inside a 16/10\n * display leaves the bar floating in the middle of the screen.\n */\n.immersive {\n    width: 100%;\n    height: 100%;\n    border: none;\n    border-radius: 0;\n}\n\n.immersive .frame {\n    flex: 1 1 auto;\n    aspect-ratio: auto !important;\n    min-height: 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .transport,\n    .icon {\n        transition: none;\n    }\n}\n\n/* Touch hit-slop — 44×44 without changing the visual footprint, as `Button` does. */\n@media (pointer: coarse) {\n    .transport::after,\n    .icon::after {\n        content: \"\";\n        position: absolute;\n        inset: -6px;\n    }\n}\n\n/*\n * On a phone the row cannot hold seven controls. The seek bar takes a line of its\n * own and the rest wraps under it, which keeps every target at full size instead\n * of shrinking them all below the touch minimum.\n */\n@media (max-width: 480px) {\n    .chrome {\n        gap: var(--tempest-space-2);\n        padding: var(--tempest-space-2);\n    }\n\n    .seek {\n        flex: 1 1 100%;\n        order: -1;\n    }\n\n    /*\n     * No volume slider on a phone. Measured at 390px in Chromium: the second row\n     * came to exactly the container width, which pushed the fullscreen button\n     * onto a third row — spent on a slider nobody drags on a phone, where the\n     * hardware keys do that job. The mute button stays, because silencing fast\n     * is the thing people actually want from a video in a feed.\n     */\n    .volume {\n        display: none;\n    }\n}\n"],"mappings":";"}