/* OCAP page - nothing but the embedded OCAP player and a button that opens it
   in its own tab. The page carries no copy on purpose, so the frame gets every
   pixel left under the navigation.
   Relies on shared.css for .container and the nav; only the stage lives here. */

/* body is already a min-height:100vh flex column in shared.css, so letting the
   container grow makes it fill exactly what is left between the nav margin and
   the footer - no guessed offset that would drift when the chrome changes. */
.ocap-container {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    /* No copy has to be kept clear of the frame here, so the container's usual
       padding and bottom margin are cut back to a thin edge around the player. */
    padding: clamp(6px, 0.9vw, 12px);
    margin-bottom: 10px;
}

.ocap-stage {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
    /* Below this the frame is unusable, so a short viewport scrolls instead. */
    min-height: 360px;
}

.ocap-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

/* tools.css pushes .tool-link down with margin-top:auto so the cards' buttons
   line up; in this one-row flex there is nothing to line up with. */
.ocap-actions .tool-link {
    margin-top: 0;
}

/* Deliberately smaller than the .tool-link buttons on the tools page: these are
   side doors out of the page, not its content, so the row stays thin. The
   fullscreen button is not wrapped in a .tool-link anchor, so it carries the
   base look here rather than inheriting it from tools.css. */
.ocap-actions .tool-link button,
.ocap-actions .ocap-fullscreen {
    background-color: #7d2128;
    border: none;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.3px;
    padding: 3px 10px;
    text-transform: uppercase;
    transition: background-color 0.2s ease;
}

.ocap-actions .tool-link button:hover,
.ocap-actions .ocap-fullscreen:hover {
    background-color: #5b5b5c;
    /* tools.css lifts the card buttons on hover; too twitchy for a toolbar. */
    transform: none;
}

.ocap-actions .ocap-fullscreen:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.ocap-actions .tool-link button .fa {
    padding-left: 4px;
    font-size: 0.65rem;
}

/* Native fullscreen paints the stage's own background, and the CSS fallback has
   to cover the fixed nav, the logo and the hamburger (z-index 900 in
   shared.css) - hence the deliberately high layer. */
.ocap-stage:fullscreen,
.ocap-stage--maximized {
    background-color: #040505;
    padding: 6px;
}

.ocap-stage--maximized {
    position: fixed;
    inset: 0;
    z-index: 1000;
    min-height: 0;
}

.ocap-frame {
    flex: 1 1 auto;
    display: block;
    width: 100%;
    min-height: 0;
    background-color: #040505;
    border: 2px solid rgba(125, 33, 40, 0.9);
    border-radius: 10px;
}