/* Live camera controls - "Marina".
 *
 * Mobile first: most visitors arrive on a phone, so the phone layout is the
 * base and desktop is the media query on top. Everything is scoped under
 * .camv2 so none of it can leak into the rest of the site.
 */

.camv2 {
    --mar-cyan:     #0aa2e0;
    --mar-teal:     #12b5ad;
    --mar-deep:     #0e2a38;
    --mar-ink:      #0a5a76;
    --mar-data:     #0a8fc9;
    --mar-label:    #3f7f96;
    --mar-line:     #e7edf2;
    --mar-line-in:  #eaf1f5;
    --mar-edge:     #cfe6ef;
    --mar-tray:     #eef8fc;
    --mar-amber:    #e8930c;
    --mar-amber-ink:#8a5200;

    /* A wide, shallow cross rather than a square one. The middle row is only
       --mar-mid tall, so the up and down arrows sit close together, while the
       left and right arrows keep their spread by overhanging into the empty
       cells above and below them in the outer columns. That takes the cluster
       from 150px tall to 112px, and the whole blue tray from 198px to 144px -
       which is what was pushing the request button off the bottom of a phone.
       The touch target stays 50px, above Apple's 44 and Google's 48. */
    --mar-btn:      50px;
    --mar-mid:      12px;   /* height of the empty middle row */
    --mar-colgap:   14px;   /* breathing space either side of the centre */
    --mar-split:    26px;   /* keeps zoom clear of the d-pad, so no stray taps */

    direction: rtl;
    max-width: 720px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
    font-family: 'Heebo', inherit;
    color: var(--mar-deep);
}
.camv2 *, .camv2 *::before, .camv2 *::after { box-sizing: border-box; }
.camv2-hidden { display: none !important; }

/* --- the one continuous card -------------------------------------------
   The banner image higher up the page sits in .hide960up, which is not wrapped
   in a .container at all, so it runs almost edge to edge. Sitting at the
   container's content width left this card with visibly wider margins than it.
   Pulling out 8px of the container's 15px halves the difference. */

@media (max-width: 759px) {
    .mar-card { margin-left: -8px; margin-right: -8px; }
}

.mar-card {
    background: #fff;
    border: 1px solid var(--mar-line);
    /* Square along the top so the picture keeps true straight corners,
       rounded below where the card meets the page. */
    border-radius: 0 0 24px 24px;
    box-shadow: 0 6px 22px rgba(14, 42, 56, .07);
    overflow: hidden;
}

/* --- feed -------------------------------------------------------------- */

.camv2-feed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #0b1a24;
    border-radius: 0;          /* straight edges, as a camera picture should be */
    overflow: hidden;
}
@supports not (aspect-ratio: 16 / 9) {
    .camv2-feed { height: 0; padding-bottom: 56.25%; }
}
.camv2-feed > iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}


/* The waterline joining the picture to the controls - no gap either side.
   Deliberately pale: a saturated cyan bar here reads as a second progress bar
   and gets confused with the countdown further down the card. Keeping it a
   shade or two darker than the tray beneath makes it a divider again. */
.mar-waterline {
    height: 5px;
    background: linear-gradient(90deg, #d8ecf4, #c6e2ee, #d8ecf4);
}

/* --- control tray ------------------------------------------------------ */

/* Room to breathe above the up arrow and below the down arrow. The top figure
   is the distance from the underside of the waterline to the top of the arrow. */
.mar-tray {
    background: var(--mar-tray);
    padding: 16px 8px;
}

/* While the camera is actually yours, sit a little closer to the picture. */
.camv2.is-mine .mar-tray { padding-top: 12px; }

.mar-groups {
    display: flex;
    flex-direction: row;       /* RTL: first child sits right */
    align-items: center;       /* both columns are the same height now */
    justify-content: center;
    gap: var(--mar-split);
}

.mar-group { display: flex; flex-direction: column; align-items: center; }


.mar-dpad {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, var(--mar-btn));
    grid-template-rows: var(--mar-btn) var(--mar-mid) var(--mar-btn);
    column-gap: var(--mar-colgap);
    row-gap: 0;
    place-items: center;
}
/* The middle cell keeps a placeholder so the grid positions stay put; the dot
   that used to sit here is replaced by the cross behind the buttons. */
.mar-hub { width: 0; height: 0; }

/* Width and height are set explicitly rather than with `inset`. An <svg> is a
   replaced element: given only insets it keeps its own intrinsic size instead of
   stretching to them, which left the cross oversized and pushed off centre. */
.mar-cross {
    position: absolute;
    top: 10px;
    left: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    z-index: 0;
    pointer-events: none;
    stroke: var(--mar-edge);
    stroke-width: 2;
    stroke-linecap: round;
}
.mar-dpad > .mar-btn { position: relative; z-index: 1; }

/* The pair sits close together and, because .mar-groups centres its columns,
   straddles the d-pad's middle line. */
.mar-zoom {
    display: grid;
    grid-template-rows: repeat(2, var(--mar-btn));
    gap: 8px;
}

/* Lifted off the tray by a real shadow rather than outlined. A 1px border in a
   pale colour was reading as almost nothing against the blue, which is what made
   the pad look washed out; a shadow separates the button from the background at
   any screen brightness, and the arrow carries the colour. */
.mar-btn {
    width: var(--mar-btn);
    height: var(--mar-btn);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #fff;
    border: 0;
    border-radius: 15px;
    color: var(--mar-ink);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    /* Two layers: a tight one that draws the edge, and a wider soft one that
       does the lifting. A single soft shadow left the outline undefined, which
       is what still read as washed out. */
    box-shadow: 0 1px 2px rgba(10, 60, 82, .18),
                0 6px 16px rgba(14, 42, 56, .20);
    transition: background .12s, color .12s, box-shadow .12s, transform .06s;
}
.mar-btn svg { width: 30px; height: 30px; display: block; pointer-events: none; }

/* Hover only where a pointer can actually hover. On a touch screen :hover
   sticks to the last thing tapped until something else is tapped, which left
   the button sitting there filled in long after the press was over. */
@media (hover: hover) and (pointer: fine) {
    .mar-btn:hover:not(:disabled) {
        background: var(--mar-cyan);
        color: #fff;
    }
}

/* is-pressed is held by the script for as long as the command is in flight. */
.mar-btn.is-pressed:not(:disabled),
.mar-btn:active:not(:disabled) {
    background: var(--mar-cyan);
    color: #fff;
    transform: scale(.94);
    box-shadow: 0 1px 3px rgba(14, 42, 56, .18);
}

/* Not your turn. The fill used to be within a shade of the tray itself, so the
   pad simply disappeared while waiting. It stays white and keeps a defined
   outline, so the controls are plainly there - just flat, unlit and muted,
   which is what says they are not yours yet. */
.mar-btn:disabled {
    background: #fff;
    color: #8fb2c4;
    box-shadow: 0 0 0 1.5px #bcd6e2;
    cursor: not-allowed;
}

/* Reached a limit: an amber ring on the control itself, where the eye already
   is at the moment of pressing - the note at the foot of the card is too far
   from the action to be noticed. Still pressable on purpose; see cam.js. */
.mar-btn.is-limit:not(:disabled) {
    color: var(--mar-amber-ink);
    box-shadow: 0 0 0 2.5px var(--mar-amber),
                0 6px 16px rgba(160, 100, 0, .22);
}
.mar-btn:focus-visible { outline: 3px solid rgba(10, 162, 224, .4); outline-offset: 2px; }

/* --- queue ------------------------------------------------------------- */

.mar-queue {
    background: #fff;
    border-top: 1px solid var(--mar-line-in);
    padding: 14px 14px 16px;
}

.mar-sub {
    margin: 9px 0 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: #5b7280;
}
.mar-num {
    font-family: 'Space Grotesk', 'Heebo', inherit;
    font-weight: 700;
    color: var(--mar-data);
}

.mar-bar {
    margin-top: 10px;
    height: 6px;
    border-radius: 999px;
    background: #e8f4f9;
    overflow: hidden;
}
.mar-bar > span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--mar-cyan), var(--mar-teal));
    transition: width .95s linear;
}

.mar-cta {
    display: block;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    padding: 12px 18px;
    border: 1px solid transparent;
    border-radius: 13px;
    background: var(--mar-cyan);
    color: #fff;
    font-family: 'Rubik', inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background .14s, border-color .14s, color .14s;
}
.mar-cta:hover  { background: #0890c9; }
.mar-cta:active { transform: translateY(1px); }
.mar-cta:focus-visible { outline: 3px solid rgba(10, 162, 224, .4); outline-offset: 2px; }

.mar-cta.is-leave {
    background: #fdeeee;
    border-color: #f4d2d2;
    color: #b4453f;
}
.mar-cta.is-leave:hover { background: #fbe2e2; }

.mar-cta.is-pass {
    background: #f2f5f7;
    border-color: #e3e9ee;
    color: #4a5c68;
}
.mar-cta.is-pass:hover { background: #e9eef2; }

.mar-msg {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.5;
    border-radius: 10px;
}
.mar-msg:not(:empty) { padding: 10px 12px; }
.mar-msg.warn  { background: #fdf3d8; color: #7a5b06; }
.mar-msg.error { background: #fdeaea; color: #8d2b2b; }

/* --- footer note ------------------------------------------------------- */

/* The site sets `.nothome p { text-align: right }` on every paragraph inside
   #main-content, which beats the centring inherited from .camv2. Ours sit under
   the action button and have to be centred explicitly. */
.camv2 p,
.camv2 .mar-sub,
.camv2 .mar-msg,
.camv2 .mar-foot { text-align: center; }

/* Now inside the card, closing it off under the messages. */
.mar-foot {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--mar-line-in);
    font-size: 12px;
    line-height: 1.6;
    color: var(--mar-label);
}
.mar-foot a { color: var(--mar-cyan); }

/* --- desktop -----------------------------------------------------------
   The tighter cluster (150px + 26px split + 50px zoom = 226px) clears even a
   320px screen, so no narrow-phone step is needed any more. */

@media (min-width: 760px) {
    .camv2 { --mar-btn: 56px; }
    .mar-tray  { padding: 18px 16px; }
    .mar-btn svg { width: 32px; height: 32px; }
}