/* <picture> is a layout passthrough - the inner <img> takes over its slot in
   the parent's flow, so existing class-based image styles keep working when a
   plain <img> is upgraded to <picture><source><img></picture> by $$.picture. */
picture {
    display: contents;
}

#Menu, #Popups {
    position: fixed;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    z-index: 50;
}

/* #Main slides right by the rail's current width. Body classes are set by menu.js
   (menu-collapsed = 80px, menu-expanded = 180px); these match menu.css. */
#Main {
    margin-top: 0;
    margin-left: 80px;
    transition: margin-left 0.18s ease;
    container-type: size;
    container-name: city-panel;
}

body.menu-expanded #Main {
    margin-left: 165px;
}

body.menu-collapsed #Main {
    margin-left: 80px;
}

/* Mobile: sidebar is hidden (see menu.css @900px), so #Main reclaims the width. */
@media (max-width: 900px) {
    #Main,
    body.menu-expanded #Main,
    body.menu-collapsed #Main {
        margin-left: 0;
    }
}


:root {
    --primary-color: #3e415b;
    --secondary-color: #686ea3;
    --third-color: #b6b9d7;
    --main-font-size: 16px;

    /* Horizontal padding tokens.
       --pad-x          - standard panel padding (dashboard panels, top bars, city page)
       --tight-pad-x    - compact padding (popins, account panel)
       --scrollbar-w    - reserved width of thin scrollbar
       --*-with-scrollbar - right-side padding for scrolling elements, subtracts the
       scrollbar width so content aligns with a non-scrolling sibling above. */
    --pad-x: 7%;
    --tight-pad-x: 30px;
    --scrollbar-w: 6px;
    --pad-x-with-scrollbar:       calc(var(--pad-x)       - var(--scrollbar-w));
    --tight-pad-x-with-scrollbar: calc(var(--tight-pad-x) - var(--scrollbar-w));
}

/* @media (max-width: 1900px) { :root { --pad-x: 50px; } }
@media (max-width: 1024px) { :root { --pad-x: 25px; } }
@media (max-width:  640px) { :root { --pad-x: 15px; --tight-pad-x: 20px; } } */

/* Touch devices use overlay scrollbars that don't reserve layout space, so the
   -with-scrollbar tokens should NOT subtract any width - otherwise the scrolling
   element's right edge sits ~6px closer to the centre than its non-scrolling
   siblings. Collapse them back onto the base tokens. */
@media (pointer: coarse) {
    :root {
        --pad-x-with-scrollbar:       var(--pad-x);
        --tight-pad-x-with-scrollbar: var(--tight-pad-x);
    }
}

/* Shared thin-scrollbar styling. Add this class to any scrolling element.
   Uses --scrollbar-w so width stays in sync with the padding tokens. */
.thin-scroll {
    scrollbar-width: thin;
    scrollbar-color: #c0c0c0 transparent;
}
.thin-scroll::-webkit-scrollbar        { width: var(--scrollbar-w); }
.thin-scroll::-webkit-scrollbar-track  { background: transparent; }
.thin-scroll::-webkit-scrollbar-thumb  { background-color: #c0c0c0; border-radius: 3px; }
.thin-scroll::-webkit-scrollbar-thumb:hover { background-color: #999; }
  


/* Root font-size anchors all rem-based typography. Desktop = 16px (browser
   default no-op). On phones/tablets ≤900px we bump to 17px so every rem
   font-size scales up automatically - the same breakpoint as the menu /
   dashboard mobile switch. Use rem (not px) for new font-size declarations
   to opt into this scaling; px-sized padding/icons stay their physical size. */
html {
    font-size: 16px;
}

@media (max-width: 900px) {
    html {
        font-size: 17px;
    }
}

body {
    font: 400 1.0em/1 '-apple-system',BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
    color: #1f2a32;
    -webkit-font-smoothing: antialiased !important;
    text-rendering: optimizeLegibility;
    background-color: #fff;
    margin: 0;
    padding: 0;
    /* overflow-y: hidden; */
    overflow-x: hidden;
    overflow-anchor: none;
}


h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.75em;
}

h3 {
    font-size: 1.46em;
}

h4 {
    font-size: 1.25em;
}

h5 {
    font-size: 1.1em;
}

h6 {
    font-size: 1em;
}

code {
    cursor: pointer;
    color: #058cc4;
    font-family: inherit;
}