/* Window placement/sizing and small one-off rules that used to be inline style="" attributes.
   Layout lives here (code), never in site-config.json. */
[hidden] { display: none !important; }

#hint-arrow svg { opacity: 0.35; }
#file-menu { top: 30px; left: 70px; }

#info-window { max-width: 520px; max-height: 380px; }
#game-window { max-width: 550px; max-height: 400px; }
#limewire-auth { max-width: 380px; max-height: 400px; left: 50%; transform: translateX(-50%); top: 100px; }
#booking-window { max-width: 720px; max-height: 680px; left: calc(50% - min(360px, 42.5vw)); top: 46px; height: calc(100vh - 150px); height: calc(100dvh - 150px); }
#mail-window { max-width: 380px; max-height: 380px; left: 50%; transform: translateX(-50%); top: 110px; }
#finder-about-window { max-width: 340px; max-height: 480px; left: 50%; transform: translateX(-50%); top: 70px; }
#newsletter-submit-btn { background: #4dabf7; }

/* Popup video */
#popup-video-window { max-width: 92vw; max-height: 86vh; max-height: 86dvh; width: min(900px, 92vw); height: auto; left: 50%; top: 90px; transform: translateX(-50%); }
.popup-video-stage { position: relative; background: #000; aspect-ratio: 16 / 9; flex: 0 1 auto; min-height: 0; max-height: calc(86vh - 80px); max-height: calc(86dvh - 80px); }
#popup-video { width: 100%; height: 100%; display: block; background: #000; object-fit: contain; }
#popup-video-sound { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,.7); color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 8px; padding: 6px 10px; font-size: 12px; font-weight: 700; cursor: pointer; }
.popup-video-credit { padding: 7px 14px; font-size: 12px; color: rgba(255,255,255,.65); background: #0d0d0f; border-top: 0.5px solid rgba(255,255,255,.08); flex-shrink: 0; }

/* Dock bits that were inline */
#dock-items { display: contents; }
.dock-separator { width: 1px; height: calc(var(--dock-item-size) * 0.7); background: rgba(255,255,255,0.2); margin: 0 2px; align-self: center; }
#trash-can { background: rgba(255,255,255,0.1); }
.dock-item .dock-icon { width: var(--icon-scale, 55%); height: var(--icon-scale, 55%); object-fit: contain; padding: 0; pointer-events: none; }
.dock-item.app-shop { background: #000 !important; box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
.finder-link-icon img { width: 14px; height: 14px; }

/* Menu bar logo (replaces the "Finder" text while no app is active) */
#menu-logo { height: 19px; width: auto; display: block; }
@media (max-width: 640px) { #menu-logo { height: 16px; } }
.dock-item.app-twitch { background: #9146ff !important; box-shadow: 0 4px 12px rgba(145, 70, 255, 0.35); }

/* Phones: popup sizes to its video instead of the full-height window every other window gets */
@media (max-width: 640px) {
    #popup-video-window { height: auto !important; max-height: calc(100vh - 140px) !important; max-height: calc(100dvh - 140px) !important; }
    .bk-form .auth-input { font-size: 16px; } /* 16px stops iOS Safari zooming the page on focus */
}

/* Touch: window close/minimise/zoom dots are 12px, so give them a 26px tap target */
@media (pointer: coarse) {
    .dot { position: relative; }
    .dot::after { content: ""; position: absolute; inset: -7px; }
}

/* Booking tab row scrolls sideways on phones; no visible scrollbar */
.bk-tabs { scrollbar-width: none; }
.bk-tabs::-webkit-scrollbar { display: none; }

/* Short landscape screens (e.g. a phone on its side): keep every window above the dock and on screen */
@media (max-height: 500px) and (min-width: 641px) {
    .mac-window { top: 36px; max-height: calc(100vh - 130px) !important; max-height: calc(100dvh - 130px) !important; }
    #limewire-auth, #mail-window, #finder-about-window, #popup-video-window, #booking-window { top: 36px; }
    #limewire-auth, #mail-window, #finder-about-window { overflow-y: auto; }
    .popup-video-stage { max-height: calc(100vh - 202px); max-height: calc(100dvh - 202px); }
}

/* Touch screens have no hover, so the dock's tooltip labels only add stray scroll width */
@media (hover: none) {
    .dock-item::after { display: none; }
}
/* 386-450px phones: size the dock so all icons fit without scrolling */
@media (min-width: 386px) and (max-width: 399px) { :root { --dock-item-size: 31px; --dock-gap: 4px; } }
@media (min-width: 400px) and (max-width: 430px) { :root { --dock-item-size: 32px; --dock-gap: 4px; } }
@media (min-width: 431px) and (max-width: 450px) { :root { --dock-item-size: 34px; --dock-gap: 5px; } }

/* Admin "Desktop view" preview: show what is clickable */
html.admin-preview .dock-item { cursor: grab; touch-action: none; user-select: none; -webkit-user-drag: none; }
html.admin-preview .dock-item:hover, html.admin-preview #menu-active-app:hover, html.admin-preview .finder-link-row:hover { outline: 2px dashed #4dabf7; outline-offset: 3px; }
html.admin-preview #menu-active-app { cursor: pointer; }

/* Admin preview: double-click text to rename, double-click images to replace */
html.admin-preview [data-text]:hover, html.admin-preview [data-track-edit]:hover, html.admin-preview [data-album-edit]:hover { outline: 1px dashed rgba(77, 171, 247, 0.8); outline-offset: 2px; cursor: text; }
html.admin-preview [data-upload]:hover, html.admin-preview [data-cover-album]:hover { outline: 2px dashed rgba(77, 171, 247, 0.8); outline-offset: 2px; }
.admin-editing { outline: 2px solid #4dabf7 !important; outline-offset: 2px; background: rgba(77, 171, 247, 0.18); cursor: text; user-select: text !important; -webkit-user-select: text !important; text-overflow: clip !important; }