/* =====================================================================
   Liquid Glass: the one shared material (owner round 6). Loaded LAST on index.html, so it is the single source for the glass look;
   the earlier glass bits in app-layer.css, fixes.css and native-ios.css stay as they were and are overridden here.

   Apple (Adopting Liquid Glass): glass is "a distinct functional layer for controls and navigation elements" that floats ABOVE the
   content. So:
     - glass:        the floating controls and navigation: the back button and the buttons and pickers in the app bar, the web tab bar,
                     sheets, popovers (map popup, map zoom), the guided-tour card, toasts, pull-to-refresh, buttons that float over photos;
     - not glass:    the content itself: cards, lists, the in-page toolbars, their search fields and segmented controls (solid, as Apple's
                     lists and forms are), and nothing ever gets a second blur inside a glass bar or sheet (no glass on glass);
     - tint:         only the one primary action of a sheet or popover (Save, Record, Next) gets the tinted variant;
     - scroll edge:  the app bar itself is not a slab: content slides under it and is faded and softened (the iOS 26 scroll edge effect);
     - corners:      concentric: a shape inside another uses the outer radius minus the padding between them (--lg-r-*-in);
     - fallbacks:    Reduce Transparency (the media query, or html.reduce-transparency set by the iPhone app) and browsers without
                     backdrop-filter get opaque fills; Increase Contrast (the media query, or html.increase-contrast) gets firm edges;
                     Reduce Motion stops the press morph.
   Selectors start with html:root so they out-rank the earlier layers (html.native-ios .x, html[data-company-dark] .x) without !important;
   native-ios.css is inserted before every other stylesheet (js/native-boot.js), so an equal rank here wins by order.
   No physical left/right anywhere: Arabic mirrors by itself.
   ===================================================================== */

/* ---------- 1. tokens (light) ---------- */
html:root{
  --lg-blur:blur(22px) saturate(180%);                                   /* the lens: blur plus a little extra colour from what is behind */
  --lg-blur-strong:blur(32px) saturate(190%);                            /* sheets: more frost, the task in front stays readable */
  --lg-fill:color-mix(in srgb, var(--card, #fff) 58%, transparent);      /* translucent fill, follows the page palette (company or phone) */
  --lg-fill-strong:color-mix(in srgb, var(--card, #fff) 82%, transparent);
  --lg-fill-media:rgba(20,24,32,.34);                                    /* glass over photos (the "clear" variant): darker so white glyphs read */
  --lg-plain:color-mix(in srgb, var(--ink, #0A2540) 6%, transparent);    /* a control INSIDE glass: a plain fill, never a second blur */
  --lg-plain-on:var(--card, #fff);                                       /* the selected item inside glass (tab, segment) */
  --lg-track:var(--line-soft, #EAECE6);                                  /* a segmented control's track in the page */
  --lg-edge:rgba(255,255,255,.78);                                       /* the specular highlight along the top edge */
  --lg-edge-lo:rgba(0,0,0,.05);                                          /* the darker rim along the bottom edge */
  --lg-hair:rgba(0,0,0,.08); --lg-hair-w:.5px;                           /* the hairline all round */
  --lg-shadow:0 6px 24px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.06);     /* soft, lifts the glass off the content */
  --lg-ring:inset 0 1px 0 var(--lg-edge), inset 0 -1px 0 var(--lg-edge-lo), inset 0 0 0 var(--lg-hair-w) var(--lg-hair);
  --lg-tint:var(--company-primary, #14233C); --lg-tint-fg:#fff;          /* the tinted variant: the one primary action */
  --lg-tint-pct:90%;                                                     /* how much of the tint shows (100% when transparency is reduced) */
  --lg-scroll-bg:var(--paper, #F5F6F3);                                  /* what the scroll edge fades to: the page colour */
  --lg-ease:cubic-bezier(.2,.8,.2,1);
  /* concentric corners: inner = outer - padding */
  --lg-r-sheet:38px; --lg-pad-sheet:20px; --lg-r-sheet-in:calc(var(--lg-r-sheet) - var(--lg-pad-sheet));
  --lg-r-bar:30px;   --lg-pad-bar:4px;    --lg-r-bar-in:calc(var(--lg-r-bar) - var(--lg-pad-bar));
  --lg-r-pop:24px;   --lg-pad-pop:18px;   --lg-r-pop-in:calc(var(--lg-r-pop) - var(--lg-pad-pop));
  --lg-r-map:22px;   --lg-pad-map:12px;   --lg-r-map-in:calc(var(--lg-r-map) - var(--lg-pad-map));
  --lg-sheet-gap:8px;                                                    /* phone sheets float this far in from the screen edges */
}
html.native-ios:root{ --lg-tint:var(--pbg); --lg-tint-fg:var(--pfg); --lg-scroll-bg:var(--bg); --lg-track:var(--fill) }

/* ---------- 2. tokens (dark): the web follows the company theme, the iPhone app follows the phone ---------- */
html[data-company-dark="true"]:root{
  --lg-fill:color-mix(in srgb, var(--card) 60%, transparent); --lg-fill-strong:color-mix(in srgb, var(--card) 84%, transparent);
  --lg-plain:rgba(255,255,255,.09); --lg-edge:rgba(255,255,255,.24); --lg-edge-lo:rgba(0,0,0,.42); --lg-hair:rgba(255,255,255,.10);
  --lg-shadow:0 10px 32px rgba(0,0,0,.52), 0 1px 3px rgba(0,0,0,.3); --lg-plain-on:color-mix(in srgb, var(--card) 70%, #fff 12%);
}
@media (prefers-color-scheme: dark){
  html.native-ios:root{
    --lg-fill:color-mix(in srgb, var(--card) 60%, transparent); --lg-fill-strong:color-mix(in srgb, var(--card) 84%, transparent);
    --lg-plain:rgba(255,255,255,.09); --lg-edge:rgba(255,255,255,.24); --lg-edge-lo:rgba(0,0,0,.42); --lg-hair:rgba(255,255,255,.10);
    --lg-shadow:0 10px 32px rgba(0,0,0,.52), 0 1px 3px rgba(0,0,0,.3); --lg-plain-on:color-mix(in srgb, var(--card) 70%, #fff 12%);
  }
}

/* ---------- 3. fallbacks (doubled :root: they out-rank the dark tokens above, whatever the theme) ---------- */
/* no backdrop-filter in this browser: glass that cannot blur becomes a solid surface, never a see-through one */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html:root:root{ --lg-fill:var(--card, #fff); --lg-fill-strong:var(--card, #fff); --lg-fill-media:rgba(20,24,32,.86) }
}
/* Reduce Transparency: opaque fills, no blur, the scroll edge becomes a solid bar */
@media (prefers-reduced-transparency: reduce){
  html:root:root{ --lg-fill:var(--card, #fff); --lg-fill-strong:var(--card, #fff); --lg-fill-media:rgba(20,24,32,.9); --lg-tint-pct:100%;
    --lg-blur:none; --lg-blur-strong:none }
}
html.reduce-transparency:root:root{ --lg-fill:var(--card, #fff); --lg-fill-strong:var(--card, #fff); --lg-fill-media:rgba(20,24,32,.9); --lg-tint-pct:100%;
  --lg-blur:none; --lg-blur-strong:none }
/* Increase Contrast: firmer fills and a real 1 px edge in the ink colour */
@media (prefers-contrast: more){
  html:root:root{ --lg-fill:color-mix(in srgb, var(--card, #fff) 92%, transparent); --lg-fill-strong:var(--card, #fff);
    --lg-hair:color-mix(in srgb, var(--ink, #0A2540) 55%, transparent); --lg-hair-w:1px; --lg-tint-pct:100% }
}
html.increase-contrast:root:root{ --lg-fill:color-mix(in srgb, var(--card, #fff) 92%, transparent); --lg-fill-strong:var(--card, #fff);
  --lg-hair:color-mix(in srgb, var(--ink, #0A2540) 55%, transparent); --lg-hair-w:1px; --lg-tint-pct:100% }

/* ---------- 4. the material: regular glass on the floating controls ---------- */
html:root .glassback,
html:root #btnLang, html:root #btnHide,
html.native-ios:root .fpill,
html.native-ios:root #ptr,
html:root .toast,
html:root .tour-card,
html:root .leaflet-bar, html:root .leaflet-popup-content-wrapper, html:root .leaflet-popup-tip{
  background:var(--lg-fill); color:var(--ink);
  -webkit-backdrop-filter:var(--lg-blur); backdrop-filter:var(--lg-blur);
  box-shadow:var(--lg-ring), var(--lg-shadow);
  border:0;
}
/* the back button is a navigation control, not the primary action: neutral glass (no company tint), Apple's rule "tint only the primary action" */
html:root .glassback{ background:var(--lg-fill); color:var(--ink) }
html:root #btnHide.on{ background:color-mix(in srgb, var(--brass-tint) 80%, transparent); color:var(--brass-ink) }   /* a toggle that is on keeps its state colour */
html:root .toast .tact{ background:var(--lg-plain); border-color:transparent; -webkit-backdrop-filter:none; backdrop-filter:none }
html:root .leaflet-bar a{ background:transparent; color:var(--ink); border-bottom-color:var(--lg-hair); -webkit-backdrop-filter:none; backdrop-filter:none }
html:root .leaflet-bar{ border-radius:var(--lg-r-map-in) }
html:root .leaflet-popup-content-wrapper{ border-radius:var(--lg-r-map) }

/* the press: the glass gives a little under the finger (the "morph"); off with Reduce Motion (section 9) */
html:root .glassback, html:root #btnLang, html:root #btnHide, html:root .appbar .row > .btn, html.native-ios:root .fpill{
  transition:transform .16s var(--lg-ease), opacity .16s ease, background-color .16s ease }

/* over photos (the photo viewer's close button, "Edit photos" on the gallery): the darker clear variant, white glyphs */
html:root .pview-x, html:root .pgal-edit{
  background:var(--lg-fill-media); color:#fff;
  -webkit-backdrop-filter:var(--lg-blur); backdrop-filter:var(--lg-blur);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 var(--lg-hair-w) rgba(255,255,255,.18), 0 4px 16px rgba(0,0,0,.3);
  border:0;
}

/* ---------- 5. the app bar: no slab, a scroll edge. Content scrolls under it and fades and softens toward the top, so the title and
   the glass buttons stay readable (Apple: scrollEdgeEffectStyle, soft). The buttons on it are glass (section 4); the edge is not glass. ---------- */
html:root .appbar{
  background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none;
  border-bottom-color:transparent; isolation:isolate;
}
/* the edge is a fade of the page colour (::after), from solid behind the title to clear a little below the bar. It has no blur:
   a backdrop blur that stops at the bar's edge draws a hard line across the content, and not every engine masks a backdrop blur.
   ::before is the solid bar used when transparency is reduced or contrast increased (section 11). */
html:root .appbar::before, html:root .appbar::after{ content:""; position:absolute; z-index:-1; pointer-events:none }
html:root .appbar::before{ inset:0; background:none; -webkit-backdrop-filter:none; backdrop-filter:none; -webkit-mask-image:none; mask-image:none }
html:root .appbar::after{
  inset:0 0 -26px 0;
  background:linear-gradient(180deg, var(--lg-scroll-bg) 0%, color-mix(in srgb, var(--lg-scroll-bg) 94%, transparent) 58%, color-mix(in srgb, var(--lg-scroll-bg) 62%, transparent) 80%, transparent 100%);
}
html:root .appbar.compact::before{ inset:0 }
html:root .appbar.compact::after{ inset:0 0 -20px 0 }
/* the row of pickers scrolls sideways, which also clips up and down: room above and below so the glass edge and shadow are not cut off
   (the same height overall: the extra padding is taken back from the margins) */
html:root .appbar .row{ padding-block:6px 8px; margin-top:3px; margin-bottom:-8px }
html.native-ios:root .appbar .row{ margin-top:4px }
/* the pickers and buttons in that row: the glass fill, edge and hairline, but no blur of their own. The scroll edge under them already
   softens and fades the content (a second blur there would be glass on glass), and a blur inside a sideways-scrolling row paints a
   grey band the size of the row in Chromium. */
html:root .appbar .row > *, html:root .appbar .row > #btnLang, html:root .appbar .row > #btnHide{
  background-color:var(--lg-fill-strong); color:var(--ink); border:0; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:var(--lg-ring), 0 2px 8px rgba(0,0,0,.08) }
html:root .appbar .row > #btnHide.on{ background-color:color-mix(in srgb, var(--brass-tint) 80%, transparent) }

/* ---------- 6. sheets and modals: strong glass. Phones: a sheet floats in from the screen edges with the larger iOS 26 radius ---------- */
html:root .scrim .modal, html:root .scrim.fluid .modal{
  background:var(--lg-fill-strong); color:var(--ink);
  -webkit-backdrop-filter:var(--lg-blur-strong); backdrop-filter:var(--lg-blur-strong);
  box-shadow:inset 0 1px 0 var(--lg-edge), inset 0 0 0 var(--lg-hair-w) var(--lg-hair), 0 -12px 44px rgba(0,0,0,.24);
  border:0;
}
@media (max-width:900px){
  html:root .scrim .modal, html:root .scrim.fluid .modal{
    width:calc(100% - 2 * var(--lg-sheet-gap)); margin:0 var(--lg-sheet-gap) var(--lg-sheet-gap); border-radius:var(--lg-r-sheet);
  }
  html:root .modal .foot{ padding-bottom:max(14px, calc(var(--safe-b) + 14px - var(--lg-sheet-gap))) }   /* the sheet already stands off the bottom edge */
}
@media (min-width:901px){
  html:root{ --lg-r-sheet:28px }                                         /* a centred dialog on a wide screen: a smaller radius, the same rule inside */
  html:root .scrim .modal{ border-radius:var(--lg-r-sheet) }
}
/* the button row at the foot: a soft edge in the sheet's own colour, so rows scrolling under it fade out (not a second blur) */
html:root .modal .foot{ background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--card, #fff) 97%, transparent) 34%) }
html:root .modal .foot .btn:not(.primary):not(.go){ background:var(--lg-plain); border-color:transparent; box-shadow:none }   /* Cancel: a plain grey capsule, as in iOS sheets */

/* ---------- 7. no glass on glass: everything INSIDE a glass sheet, the glass tab bar or a glass popover is a plain fill ---------- */
html:root .modal :is(.seg, .rcok, .fgroup, [data-more], .pill, .chip, .cchip, .fpill, .glassback),
html:root .modal .btn:not(.primary):not(.go),
html:root .tour-card .btn:not(.primary),
html:root .tabbar button,
html:root .leaflet-popup-content-wrapper .btn:not(.primary){
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
html:root .modal :is(.seg, .fgroup, [data-more]){ background:var(--lg-plain); box-shadow:none }
html:root .modal .frow, html:root .modal [data-more]{ border-bottom-color:var(--lg-hair) }
html:root .tour-card .btn:not(.primary){ background:var(--lg-plain); box-shadow:none; border:0 }
/* concentric inside a sheet: grouped rows, choices and checks take the sheet radius minus the sheet padding */
html:root .modal .fgroup{ border-radius:var(--lg-r-sheet-in) }
html:root .modal [data-more]:first-child{ border-radius:var(--lg-r-sheet-in) var(--lg-r-sheet-in) 0 0 }
html:root .modal [data-more]:last-child{ border-radius:0 0 var(--lg-r-sheet-in) var(--lg-r-sheet-in) }
html:root .modal [data-more]:only-child{ border-radius:var(--lg-r-sheet-in) }
html:root .modal .choice button, html:root .modal .check{ border-radius:var(--lg-r-sheet-in) }
html:root .tour-card{ border-radius:var(--lg-r-pop); padding:var(--lg-pad-pop) }

/* ---------- 8. tinted glass: ONLY the primary action of a sheet or popover (Apple: prominent glass; tint the primary action, nothing else).
   It sits inside a glass surface, so it carries no blur of its own: a near-solid tint with the specular edge. ---------- */
html:root .modal .btn.primary,
html:root .modal .btn.go,
html:root .tour-card .btn.primary{
  background:color-mix(in srgb, var(--lg-tint) var(--lg-tint-pct), transparent); color:var(--lg-tint-fg); border-color:transparent;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), inset 0 0 0 var(--lg-hair-w) rgba(0,0,0,.12), 0 4px 14px color-mix(in srgb, var(--lg-tint) 30%, transparent);
}
/* a "go" primary (the collection sheet's big Record button: money in) keeps its own green; the tint is set where it is used, so it resolves here */
html:root .modal .btn.go{ --lg-tint:var(--nile); --lg-tint-fg:#fff }
html.native-ios:root .modal .btn.go{ --lg-tint:var(--go) }

/* ---------- 9. the web tab bar (Safari and the home-screen app; the iPhone app has the native one): a floating glass capsule;
   the selected tab is a plain lighter capsule inside it, concentric (bar radius minus bar padding) ---------- */
@media (max-width:900px){
  html:root:not(.native-ios) .tabbar{
    border-radius:var(--lg-r-bar); padding:var(--lg-pad-bar); border:0;
    background:var(--lg-fill); -webkit-backdrop-filter:var(--lg-blur); backdrop-filter:var(--lg-blur);
    box-shadow:var(--lg-ring), var(--lg-shadow);
  }
  html:root:not(.native-ios) .tabbar button{ border-radius:var(--lg-r-bar-in); background:transparent }
  html:root:not(.native-ios) .tabbar button[aria-current="true"]{ background:var(--lg-plain) }
}

/* ---------- 10. the content layer stays solid (Apple: glass belongs to controls and navigation, not to content) ---------- */
/* segmented controls and search fields in the page: a plain track and a plain capsule field, no blur (they used to be glass on a flat page) */
html:root .seg{ background:var(--lg-track); -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none }
/* A-7: the selected segment is filled with the selected pair in the app too (the system segmented look told it apart by a white pill; the lead chose the chip's fill, the same on every screen) */
html.native-ios:root .seg button[aria-pressed="true"]{ background:var(--pbg); color:var(--pfg); box-shadow:none }
html.native-ios:root .seg > button:not([aria-pressed="true"]), html.native-ios:root .seg > .btn:not([aria-pressed="true"]){ background:transparent; box-shadow:none; color:var(--ink-soft) }
html.native-ios:root :is(#fQ, #pQ, #mapPropQ){ background-color:var(--fill); -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none }
html:root .rcok{ background:var(--nile-tint); color:var(--nile-ink); -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none }
/* cards: solid, with a refined edge in the dark (no shadow there, so a faint hairline separates a card from the black page) */
@media (prefers-color-scheme: dark){
  html.native-ios:root :is(.panel, .csum, .stat, .ucard){ box-shadow:inset 0 0 0 .5px rgba(255,255,255,.07) }
}
html[data-company-dark="true"]:root :is(.panel, .stat){ box-shadow:inset 0 0 0 .5px rgba(255,255,255,.06) }

/* ---------- 11. Reduce Transparency, Increase Contrast, Reduce Motion: the rules the tokens cannot express ---------- */
@media (prefers-reduced-transparency: reduce){
  html:root:root .appbar::before{ background:var(--lg-scroll-bg) } html:root:root .appbar::after{ display:none }
}
html.reduce-transparency:root:root .appbar::before{ background:var(--lg-scroll-bg) } html.reduce-transparency:root:root .appbar::after{ display:none }
@media (prefers-contrast: more){
  html:root:root .appbar::before{ background:var(--lg-scroll-bg); border-bottom:1px solid var(--lg-hair) } html:root:root .appbar::after{ display:none }
}
html.increase-contrast:root:root .appbar::before{ background:var(--lg-scroll-bg); border-bottom:1px solid var(--lg-hair) } html.increase-contrast:root:root .appbar::after{ display:none }
@media (prefers-reduced-motion: reduce){
  html:root .glassback, html:root #btnLang, html:root #btnHide, html:root .appbar .row > .btn, html.native-ios:root .fpill{ transition:none }
}