/* Full-screen stage */
.hkhd-stage {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    padding: var(--hkhd-stage-padding, 0px);
    overflow: hidden;
    isolation: isolate;
}

.hkhd-stage[data-height-mode="viewport"] {
    height: 100svh;
    min-height: 100vh;
}

.hkhd-stage[data-height-mode="custom"] {
    height: var(--hkhd-stage-custom-height, 700px);
}

body.admin-bar .hkhd-stage[data-height-mode="viewport"] {
    height: calc(100svh - 32px);
    min-height: calc(100vh - 32px);
}

@media (max-width: 782px) {
    body.admin-bar .hkhd-stage[data-height-mode="viewport"] {
        height: calc(100svh - 46px);
        min-height: calc(100vh - 46px);
    }
}

.hkhd-stage--stretch > :not(.hkhd-stack):not(.hkhd-float-item) {
    height: 100%;
    min-height: 0;
}

html.hkhd-page-locked,
body.hkhd-page-locked {
    overflow: hidden !important;
    overscroll-behavior: none;
}

/* Stacks */
.hkhd-stack {
    --hkhd-edge: 16px;
    --hkhd-gap: 10px;
    position: absolute;
    z-index: 100;
    display: flex;
    gap: var(--hkhd-gap);
    pointer-events: none;
    max-width: calc(100% - (var(--hkhd-edge) * 2));
    max-height: calc(100% - (var(--hkhd-edge) * 2));
}

.hkhd-stack--viewport {
    position: fixed;
    z-index: 9999;
}

.hkhd-stack[data-direction="horizontal"] { flex-direction: row; align-items: center; }
.hkhd-stack[data-direction="vertical"] { flex-direction: column; align-items: center; }
.hkhd-stack[data-direction="horizontal"][data-reverse="1"] { flex-direction: row-reverse; }
.hkhd-stack[data-direction="vertical"][data-reverse="1"] { flex-direction: column-reverse; }

.hkhd-stack[data-position="top-left"] { top: max(var(--hkhd-edge), env(safe-area-inset-top)); left: max(var(--hkhd-edge), env(safe-area-inset-left)); }
.hkhd-stack[data-position="top-center"] { top: max(var(--hkhd-edge), env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); }
.hkhd-stack[data-position="top-right"] { top: max(var(--hkhd-edge), env(safe-area-inset-top)); right: max(var(--hkhd-edge), env(safe-area-inset-right)); }
.hkhd-stack[data-position="middle-left"] { top: 50%; left: max(var(--hkhd-edge), env(safe-area-inset-left)); transform: translateY(-50%); }
.hkhd-stack[data-position="center-center"] { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.hkhd-stack[data-position="middle-right"] { top: 50%; right: max(var(--hkhd-edge), env(safe-area-inset-right)); transform: translateY(-50%); }
.hkhd-stack[data-position="bottom-left"] { bottom: max(var(--hkhd-edge), env(safe-area-inset-bottom)); left: max(var(--hkhd-edge), env(safe-area-inset-left)); }
.hkhd-stack[data-position="bottom-center"] { bottom: max(var(--hkhd-edge), env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); }
.hkhd-stack[data-position="bottom-right"] { bottom: max(var(--hkhd-edge), env(safe-area-inset-bottom)); right: max(var(--hkhd-edge), env(safe-area-inset-right)); }

.hkhd-float-item {
    position: relative;
    flex: 0 0 auto;
    pointer-events: auto;
    z-index: var(--hkhd-z, 50);
    box-sizing: border-box;
}

/* Floating action */
.hkhd-action-button {
    box-sizing: border-box;
    min-width: var(--hkhd-button-size, 48px);
    height: var(--hkhd-button-size, 48px);
    padding: 0 14px;
    border: 1px solid rgba(36, 51, 75, .14);
    border-radius: var(--hkhd-radius, 14px);
    background: var(--hkhd-button-bg, #fff);
    color: var(--hkhd-button-color, #24334b);
    box-shadow: var(--hkhd-shadow, 0 10px 35px rgba(15, 23, 42, .20));
    backdrop-filter: blur(var(--hkhd-blur, 8px));
    -webkit-backdrop-filter: blur(var(--hkhd-blur, 8px));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    line-height: 1;
    transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}

.hkhd-action-button:hover { transform: translateY(-1px); }
.hkhd-action-button:focus-visible { outline: 3px solid rgba(59, 130, 246, .45); outline-offset: 2px; }
.hkhd-action-button svg { width: 22px; height: 22px; flex: 0 0 auto; }
.hkhd-action-label { white-space: nowrap; }

.hkhd-popup {
    position: absolute;
    box-sizing: border-box;
    width: min(var(--hkhd-panel-width, 380px), calc(100vw - 32px));
    max-height: min(72vh, 720px);
    overflow: auto;
    border: 1px solid rgba(36, 51, 75, .12);
    border-radius: var(--hkhd-radius, 14px);
    background: var(--hkhd-panel-bg, #fff);
    color: var(--hkhd-panel-color, #24334b);
    box-shadow: var(--hkhd-shadow, 0 10px 35px rgba(15, 23, 42, .20));
    backdrop-filter: blur(var(--hkhd-blur, 8px));
    -webkit-backdrop-filter: blur(var(--hkhd-blur, 8px));
    z-index: calc(var(--hkhd-z, 50) + 1);
}

.hkhd-popup[hidden] { display: none !important; }

.hkhd-floating-action[data-position^="bottom-"] .hkhd-popup { bottom: calc(100% + 10px); }
.hkhd-floating-action[data-position^="top-"] .hkhd-popup { top: calc(100% + 10px); }
.hkhd-floating-action[data-position="bottom-left"] .hkhd-popup,
.hkhd-floating-action[data-position="top-left"] .hkhd-popup { left: 0; }
.hkhd-floating-action[data-position="bottom-right"] .hkhd-popup,
.hkhd-floating-action[data-position="top-right"] .hkhd-popup { right: 0; }
.hkhd-floating-action[data-position="bottom-center"] .hkhd-popup,
.hkhd-floating-action[data-position="top-center"] .hkhd-popup { left: 50%; transform: translateX(-50%); }
.hkhd-floating-action[data-position="middle-left"] .hkhd-popup { left: calc(100% + 10px); top: 50%; transform: translateY(-50%); }
.hkhd-floating-action[data-position="middle-right"] .hkhd-popup { right: calc(100% + 10px); top: 50%; transform: translateY(-50%); }
.hkhd-floating-action[data-position="center-center"] .hkhd-popup { left: 50%; top: calc(100% + 10px); transform: translateX(-50%); }

.hkhd-popup-header,
.hkhd-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 10px;
}

.hkhd-popup-title,
.hkhd-panel-title { font-weight: 700; }

.hkhd-popup-close,
.hkhd-panel-toggle {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font: inherit;
    font-size: 22px;
    line-height: 1;
}

.hkhd-popup-close:hover,
.hkhd-panel-toggle:hover { background: rgba(36, 51, 75, .08); }
.hkhd-popup-content { padding: 8px 16px 16px; }
.hkhd-popup-content > :first-child,
.hkhd-panel-content > :first-child { margin-top: 0; }
.hkhd-popup-content > :last-child,
.hkhd-panel-content > :last-child { margin-bottom: 0; }

/* Floating label */
.hkhd-floating-label {
    box-sizing: border-box;
    max-width: min(680px, calc(100vw - 32px));
    padding: var(--hkhd-label-py, 6px) var(--hkhd-label-px, 10px);
    border: 1px solid rgba(36, 51, 75, .10);
    border-radius: var(--hkhd-radius, 8px);
    background: var(--hkhd-label-bg, rgba(255,255,255,.88));
    color: var(--hkhd-label-color, #405168);
    box-shadow: var(--hkhd-shadow, none);
    backdrop-filter: blur(var(--hkhd-blur, 6px));
    -webkit-backdrop-filter: blur(var(--hkhd-blur, 6px));
    font-size: var(--hkhd-label-font, 13px);
    line-height: 1.3;
}

.hkhd-floating-label a { color: inherit; text-decoration: underline; }
.hkhd-floating-label__content { margin: 0; }

/* Floating panel */
.hkhd-floating-panel {
    box-sizing: border-box;
    width: min(var(--hkhd-panel-width, 340px), calc(100vw - 32px));
    max-height: min(76vh, 760px);
    overflow: auto;
    border: 1px solid rgba(36, 51, 75, .12);
    border-radius: var(--hkhd-radius, 14px);
    background: var(--hkhd-panel-bg, #fff);
    color: var(--hkhd-panel-color, #24334b);
    box-shadow: var(--hkhd-shadow, 0 10px 35px rgba(15, 23, 42, .20));
    backdrop-filter: blur(var(--hkhd-blur, 8px));
    -webkit-backdrop-filter: blur(var(--hkhd-blur, 8px));
}

.hkhd-panel-content { padding: 10px 16px 16px; }
.hkhd-floating-panel.is-collapsed .hkhd-panel-content { display: none; }
.hkhd-floating-panel.is-collapsed { width: auto; min-width: 46px; overflow: visible; }

@media (max-width: 600px) {
    .hkhd-stack { --hkhd-edge: 10px; }
    .hkhd-popup,
    .hkhd-floating-panel { max-height: 70svh; }
}

/* Below 720px a popup anchored to the button that opened it either runs
 * off the edge of the screen or is too small to hold real content
 * comfortably. It takes over the whole screen instead, like a page of its
 * own - frontend.js adds/removes body.hkhd-popup-open alongside this so
 * the page underneath can't be scrolled while it's up.
 *
 * The !important pins are deliberate: .hkhd-popup's positioning is
 * otherwise driven by data-position-qualified selectors one class more
 * specific than plain .hkhd-popup (e.g.
 * .hkhd-floating-action[data-position="bottom-right"] .hkhd-popup), and
 * this needs to unconditionally win over all of them at once rather than
 * be re-litigated per position.
 */
@media (max-width: 720px) {
    .hkhd-popup {
        position: fixed !important;
        inset: 0 !important;
        transform: none !important;
        width: 100% !important;
        height: 100%;
        max-width: none;
        max-height: none;
        border-radius: 0;
        z-index: 10000;
    }

    body.hkhd-popup-open {
        overflow: hidden;
    }

    /* .hkhd-floating-action is itself position: relative with its own
       z-index (--hkhd-z, 50 by default), so it's a second stacking
       context an open popup's z-index: 10000 above can't escape either -
       it only wins against its own siblings inside that box, not against
       a second floating-action block sitting next to it in the same
       stack. Without this, one open popup can end up underneath the
       *other* button in a multi-button stack (e.g. bottom-center holding
       both "about" and "feedback"). */
    .hkhd-floating-action.is-open {
        z-index: 999999 !important;
    }

    /* The middle-left/middle-right/center-center/top-center/bottom-center
       positions all center a .hkhd-stack with translateX/Y(-50%). A
       transformed ancestor becomes the containing block for any
       position:fixed descendant, which would size and place the popup
       above against that small stack instead of the viewport - it'd stay
       pinned to the button's corner of the screen, 50-ish pixels wide.
       .hkhd-stack's own z-index: 100 (needed to sit above whatever it
       floats over) is a second, independent trap: paired with its
       position: absolute, it starts a stacking context, so no z-index the
       popup declares can lift it past page content that simply has a
       higher z-index than 100 - the whole stack is composited as that one
       layer first. Both only matter while this stack has no open popup:
       fixing them unconditionally would go back to fighting the
       positioning/stacking this component relies on the rest of the
       time. */
    .hkhd-stack:has(.hkhd-floating-action.is-open) {
        transform: none !important;
        z-index: 999999 !important;
    }
}