/* Base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Floating UI insets (info button, close button, zoom controls, etc).
   Use CSS vars so all "floating" UI elements stay aligned across devices.
   Desktop: 20px, Touch devices: 10px.
   Comments in English per project convention. */
:root {
    --floating-ui-inset: 20px;
    --floating-ui-inset-x: var(--floating-ui-inset);
    --floating-ui-inset-y: var(--floating-ui-inset);
    /* Icon buttons use a consistent square size (see .ui-btn--icon). */
    --floating-ui-icon-btn-size: 40px;
}

/* Treat coarse-pointer devices as "mobile" for floating UI spacing (incl. iPad). */
@media (hover: none) and (pointer: coarse) {
    :root {
        --floating-ui-inset: 10px;
    }
}

/* Global typography: prefer AktivGrotesk for all UI text (with safe fallbacks). */
html,
body {
    font-family: 'AktivGrotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, Arial, sans-serif;
    background: #1a1a1a;
    color: #fff;
    overflow: hidden; /* Prevent scrollbars - panning handles navigation */
    /* Prevent iOS Safari from auto-scaling text after orientation changes.
       We intentionally disable text autosizing to keep the UI consistent.
       Comments in English per project convention. */
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

/* Global link style: monochrome + underlined (no blue links).
   Comments in English per project convention. */
a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
    text-decoration-color: currentColor;
}

a:hover,
a:focus-visible {
    text-decoration-thickness: 2px;
}

a:visited {
    color: inherit;
}

/* Ensure form controls inherit the global font settings. */
button,
input,
select,
textarea {
    font: inherit;
}

.loading {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    color: #fff;
    z-index: 100000;
}

/* Desktop zoom controls */
.zoom-controls {
    position: fixed;
    right: var(--floating-ui-inset-x);
    bottom: var(--floating-ui-inset-y);
    /* Keep controls below details panels (modal/bottom-sheet) to avoid odd overlays. */
    z-index: 15000;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* When the sidepanel is open, move controls left so they stay visible */
body.sidepanel-open .zoom-controls {
    right: calc(var(--floating-ui-inset-x) + var(--sidepanel-width, 0px));
}

/* Unified UI button base (used by zoom, info, close, etc).
   Comments in English per project convention. */
.ui-btn,
.zoom-btn {
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    min-width: 44px;
    backdrop-filter: blur(10px);
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

/* iOS/Touch: backdrop blur is expensive; keep the same look with a more opaque base.
   Comments in English per project convention. */
@media (hover: none) and (pointer: coarse) {
    .ui-btn,
    .zoom-btn {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(0, 0, 0, 0.9);
    }
}

.ui-btn:hover,
.zoom-btn:hover {
    background: rgba(0, 0, 0, 0.9);
    border-color: rgba(255, 255, 255, 0.3);
}

.ui-btn:active,
.zoom-btn:active {
    transform: scale(0.98);
}

/* Icon-style button: square target, centered glyph. */
.ui-btn--icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Outline SVG icon baseline.
   Comments in English per project convention. */
.ui-icon {
    width: 20px;
    height: 20px;
    display: block;
}

.ui-icon path,
.ui-icon circle,
.ui-icon line,
.ui-icon polyline {
    stroke: currentColor;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Ghost button: visually quiet by default, but consistent on hover/focus.
   Comments in English per project convention. */
.ui-btn--ghost {
    background: transparent;
    border-color: transparent;
}

.ui-btn--ghost:hover {
    background: rgba(0, 0, 0, 0.9);
    border-color: rgba(255, 255, 255, 0.3);
}

.ui-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.14);
}

.ui-btn--ghost:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.16);
}

@media (max-width: 768px) {
    .zoom-controls {
        display: none !important;
    }
}

/* Info button (top-right). */
.info-button {
    position: fixed;
    top: var(--floating-ui-inset-y);
    right: var(--floating-ui-inset-x);
    z-index: 20001;
}

/* Keep the info button visible when the sidepanel is open (desktop). */
body.sidepanel-open .info-button {
    right: calc(var(--floating-ui-inset-x) + var(--sidepanel-width, 0px));
}

/* Mobile: the info button stays visible; panels must respect its clearance.
   Comments in English per project convention. */

/* Context label + watermark (Desktop only). */
.context-label {
    position: fixed;
    top: var(--floating-ui-inset-y);
    left: 0;
    margin-left: -40px;
    z-index: 20001;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.6s ease;
    height: 60px;
    width: auto;
    transform: scale(0.8);
    transform-origin: left top;
}

body.has-interacted .context-label {
    opacity: 0;
}

@media (min-width: 1200px) {
    .context-label {
        height: 78px;
    }
}

@media (max-width: 768px) {
    .context-label {
        display: none !important;
    }
}