/* Cobalt 60 -- the site's second look (⚙ menu → Izgled; web/js/theme.js
   keeps the choice as ma.look and sets <html data-look="cobalt60">).

   Liquid glass in the manner of macOS 26: the chrome is drawn as
   translucent, blurred panes with a lit upper rim, floating over a soft
   cobalt glow, and the controls are capsules. Colours come only from
   tokens.css (the --c60-* tokens and the usual palette, redeclared there
   for this look); this file only shapes and layers them.

   Rules every block here keeps:
   - Everything is scoped under html[data-look="cobalt60"], so the default
     look ("Meteoadriatic") never sees a line of it. The html type selector
     is there for weight: it lets these rules outrank the pages' own
     `body.tm .x`-style selectors without !important.
   - Paint only, never geometry: colours, radii, shadows and blur change;
     widths, padding, margins and border widths do not. The pages keep the
     exact layout Ivan has signed off on, in either look.
   - Real blur (backdrop-filter) only where something actually moves behind
     the glass: the header over a scrolled page, cards and menus over the
     map or the page. A panel that sits on the still background glow gets
     the translucency and the rim without the blur -- it would blur a
     smooth gradient into the same smooth gradient, at a cost.
   - The header's blur sits on a ::before, not on the header: an element
     with backdrop-filter becomes the "backdrop root" for everything inside
     it, so the menus that open out of the header would blur only the
     header, not the page under them. */

/* ---- the glow behind everything --------------------------------------- */
html[data-look="cobalt60"] body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  background: var(--c60-ambient);
}
html[data-look="cobalt60"] { scroll-padding-top: 72px; }   /* anchors clear the sticky header */

/* ---- glass: floating panes (blurred) -----------------------------------
   Over the map they use --c60-glass-map, denser than the header's glass:
   the basemap stays light in both themes, so dark glass over it needs more
   body to keep its text readable. */
html[data-look="cobalt60"] :is(
  .tm-card, .tm-chip, .tm-readout, .tm-notice, .mi-panel, .tm-areas, .tm-snap-bar,
  .tcmp-chip, .tcmp-recipes-btn, .stage-msg, .paywall, .sk-paywall-card, .an-bar,
  .maplibregl-ctrl-group, .leaflet-bar, .leaflet-control-layers
) {
  background: var(--c60-sheen), var(--c60-glass-map);
  border-color: var(--c60-edge);
  box-shadow:
    inset 0 1px 0 var(--c60-rim),
    inset 0 -1px 0 var(--c60-rim-low),
    inset 0 0 14px -4px var(--c60-glow),
    var(--c60-drop);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
          backdrop-filter: blur(18px) saturate(180%);
}
html[data-look="cobalt60"] :is(.tm-card, .tm-chip, .mi-panel, .tm-areas, .paywall, .sk-paywall-card, .an-bar) {
  border-radius: 16px;
}
html[data-look="cobalt60"] :is(.tm-readout, .tcmp-chip, .tcmp-recipes-btn) { border-radius: 999px; }
/* These can wrap to two lines (a long notice, a phone's snap bar): a
   rounded box, not a capsule. */
html[data-look="cobalt60"] :is(.tm-notice, .stage-msg, .tm-snap-bar) { border-radius: 14px; }
html[data-look="cobalt60"] .tcmp-recipes-btn:hover { background: var(--c60-sheen), var(--c60-glass-strong); }

/* The map's own tool columns (MapLibre on /karte/ and /usporedba/, Leaflet
   on /meteograms/ and /skewt/): one glass capsule each, hairlines between. */
html[data-look="cobalt60"] .maplibregl-map .maplibregl-ctrl-group { border-radius: 14px; overflow: hidden; }
html[data-look="cobalt60"] .maplibregl-map .maplibregl-ctrl-group button { background-color: transparent; }
html[data-look="cobalt60"] .maplibregl-map .maplibregl-ctrl-group button + button { border-top-color: var(--c60-edge); }
html[data-look="cobalt60"] .maplibregl-map .maplibregl-ctrl-group button:not(:disabled):hover { background-color: var(--c60-tint); }
html[data-look="cobalt60"] .leaflet-bar { border-radius: 14px; overflow: hidden; }
html[data-look="cobalt60"] .leaflet-bar a {
  background: transparent; border-bottom-color: var(--c60-edge);
}
html[data-look="cobalt60"] .leaflet-bar a:hover { background: var(--c60-tint); }
html[data-look="cobalt60"] .leaflet-control-layers { border-radius: 14px; }
html[data-look="cobalt60"] .leaflet-control-attribution {
  background: var(--c60-glass-map); border-top-left-radius: 8px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}

/* The layers card and the time chip snap together (tilemap-drag.js
   dockPair): the joined corners go square again, as in tilemap.css. */
html[data-look="cobalt60"] :is(.tm-chip, .tm-card).dock-top    { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
html[data-look="cobalt60"] :is(.tm-chip, .tm-card).dock-bottom { border-top-left-radius: 0; border-top-right-radius: 0; }
html[data-look="cobalt60"] .tm-card-body { border-top-color: var(--c60-edge); }
html[data-look="cobalt60"] :is(.tm-areas-head, .mi-note) { border-color: var(--c60-edge); }

/* ---- glass: menus and drop-downs (blurred, denser for small text) ------- */
html[data-look="cobalt60"] :is(
  .sh-menu, .run-menu, .fx-results, .mg-results, .sk-results, .ctop .tm-card-body
) {
  background: var(--c60-sheen), var(--c60-glass-strong);
  border-color: var(--c60-edge);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 var(--c60-rim),
    inset 0 -1px 0 var(--c60-rim-low),
    var(--c60-drop-lift);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
          backdrop-filter: blur(24px) saturate(190%);
}
html[data-look="cobalt60"] :is(.sh-menu a, .sh-menu button, .run-item, .mg-result, .sk-result, .fx-result, .tm-areas-go) {
  border-radius: 10px;
}
html[data-look="cobalt60"] :is(.sh-menu a, .sh-menu button, .run-item, .mg-result, .sk-result, .tm-areas-go, .tm-areas-icon):hover {
  background: var(--c60-tint);
}
html[data-look="cobalt60"] .fx-result:hover,
html[data-look="cobalt60"] .fx-result.is-active { background: var(--c60-tint-strong); color: var(--active-ink); }
html[data-look="cobalt60"] :is(.sh-menu button[aria-checked="true"], .run-item.active) {
  background: var(--c60-tint-strong);
  box-shadow: inset 0 0 0 1px var(--c60-edge), inset 0 1px 0 var(--c60-rim-low);
}

/* ---- the header ---------------------------------------------------------
   A glass bar. On the text pages it stays at the top while the page scrolls
   underneath, which is where the blur shows; on the map pages the layout
   is a fixed screen and it simply heads it. */
html[data-look="cobalt60"] .site-header {
  background: transparent;
  border-bottom-color: var(--c60-edge);
  box-shadow: 0 10px 30px -22px var(--shadow-3);
}
html[data-look="cobalt60"] .site-header::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background: var(--c60-sheen), var(--c60-glass);
  box-shadow: inset 0 1px 0 var(--c60-rim), inset 0 -1px 0 var(--c60-rim-low);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
          backdrop-filter: blur(22px) saturate(180%);
}
html[data-look="cobalt60"] .site-header:not(.site-header--app) { position: sticky; top: 0; }
html[data-look="cobalt60"] .sh-icon {
  border-radius: 999px;
  border-color: var(--c60-edge);
  background: var(--c60-glass-soft);
  box-shadow: inset 0 1px 0 var(--c60-rim), 0 1px 3px var(--shadow-2);
}
html[data-look="cobalt60"] .sh-icon:hover { border-color: var(--accent); }
html[data-look="cobalt60"] .sh-account.signed { border-radius: 999px; border-color: var(--c60-edge); background: var(--c60-glass-soft); }
html[data-look="cobalt60"] .sh-account.signed:hover { border-color: var(--stale); }
html[data-look="cobalt60"] .premium-badge { border-radius: 999px; }
html[data-look="cobalt60"] .run-btn { border-radius: 999px; }
html[data-look="cobalt60"] .run-btn:hover {
  border-color: var(--c60-edge); background: var(--c60-glass-soft);
  box-shadow: inset 0 1px 0 var(--c60-rim-low);
}

/* ---- primary buttons: cobalt glass capsules ---------------------------- */
html[data-look="cobalt60"] :is(
  .sh-account:not(.signed), .btn:not(.ghost), .paywall-cta, .submit-btn,
  .tm-snap-bar button.primary, .tm-snap-dialog-btns .primary, .tm-areas-form button,
  .transport button.playing, .sector-btn.active, .an-bar button.on
) {
  background: var(--c60-accent-grad);
  border-color: transparent;
  color: var(--on-accent);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 var(--c60-accent-rim),
    inset 0 -1px 0 var(--c60-accent-shade),
    0 6px 16px -6px var(--c60-accent-glow);
}
html[data-look="cobalt60"] :is(
  .sh-account:not(.signed), .btn:not(.ghost), .paywall-cta, .submit-btn,
  .tm-snap-bar button.primary, .tm-snap-dialog-btns .primary, .tm-areas-form button
):hover:not(:disabled) {
  background: var(--c60-accent-hover);
  color: var(--on-accent);
  border-color: transparent;
  box-shadow:
    inset 0 1px 0 var(--c60-accent-rim),
    inset 0 -1px 0 var(--c60-accent-shade),
    0 8px 22px -6px var(--c60-accent-glow);
}

/* ---- plain buttons and fields: clear glass capsules -------------------- */
html[data-look="cobalt60"] :is(
  .btn.ghost, .transport button, .sector-btn, .tm-snap-bar button,
  .tm-snap-dialog-btns a, .tm-snap-dialog-btns button, .provider-btn,
  .product-btn-mobile, .cmenu-step, .an-bar button
):not(.playing):not(.active):not(.primary):not(.on) {
  background: var(--c60-glass-soft);
  border-color: var(--c60-edge);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 var(--c60-rim), 0 1px 3px var(--shadow-1);
}
/* The pages' own hover/focus edges, which the edge colour above outranks. */
html[data-look="cobalt60"] :is(
  .btn.ghost, .transport button, .sector-btn, .provider-btn, .cmenu-step, .tm-snap-bar button,
  .tm-snap-dialog-btns a, .tm-snap-dialog-btns button, .product-btn-mobile, .an-bar button
):hover:not(:disabled):not(.playing):not(.active):not(.primary):not(.on) {
  border-color: var(--accent);
  color: var(--accent);
}
html[data-look="cobalt60"] :is(
  .sidebar-search, .mg-search input, .sk-search input, #emailForm input,
  .tm-areas-form input, .tm-card select, .an-letter
) {
  background: var(--c60-glass-soft);
  border-color: var(--c60-edge);
  box-shadow: inset 0 1px 2px var(--shadow-2), inset 0 -1px 0 var(--c60-rim-low);
}
html[data-look="cobalt60"] :is(.sidebar-search, .mg-search input, #emailForm input, .tm-areas-form input) { border-radius: 999px; }
html[data-look="cobalt60"] .tm-card select { border-radius: 8px; }
html[data-look="cobalt60"] .sk-search input {
  border-radius: 999px;
  background: var(--c60-sheen), var(--c60-glass-map);
  box-shadow: inset 0 1px 0 var(--c60-rim), var(--c60-drop);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
          backdrop-filter: blur(18px) saturate(180%);
}
/* The landing page's big "look up a forecast" field. */
html[data-look="cobalt60"] .fx-search input {
  border-radius: 999px;
  background: var(--c60-sheen), var(--c60-glass);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: inset 0 1px 0 var(--c60-rim), inset 0 0 14px -4px var(--c60-glow), var(--c60-drop);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
          backdrop-filter: blur(18px) saturate(180%);
}
html[data-look="cobalt60"] .fx-search input:focus {
  border-color: var(--accent);
  box-shadow: inset 0 1px 0 var(--c60-rim), 0 0 0 4px var(--c60-tint-strong), var(--c60-drop);
}

/* ---- segmented switches: a glass track, the chosen side a cobalt pill -- */
html[data-look="cobalt60"] :is(.seg, .mg-seg, .sk-seg, .smg-seg) {
  border-radius: 999px;
  border-color: var(--c60-edge);
  background: var(--c60-glass-soft);
  box-shadow: inset 0 1px 2px var(--shadow-1), inset 0 -1px 0 var(--c60-rim-low);
}
html[data-look="cobalt60"] :is(.mg-seg-btn, .sk-seg-btn) { background: transparent; }
html[data-look="cobalt60"] :is(.mg-seg-btn + .mg-seg-btn, .sk-seg-btn + .sk-seg-btn) { border-left-color: transparent; }
html[data-look="cobalt60"] :is(.seg button, .mg-seg-btn, .sk-seg-btn, .smg-seg-btn) { border-radius: 999px; }
html[data-look="cobalt60"] :is(.seg button.on, .mg-seg-btn.on, .sk-seg-btn.on, .smg-seg-btn.on) {
  background: var(--c60-accent-grad);
  color: var(--on-accent);
  box-shadow: inset 0 1px 0 var(--c60-accent-rim), 0 2px 8px -2px var(--c60-accent-glow);
}

/* ---- panels on the background glow (no blur) ---------------------------- */
html[data-look="cobalt60"] :is(.sidebar, .mg-bar, .sk-controls) {
  background: var(--c60-sheen), var(--c60-glass);
  border-color: var(--c60-edge);
}
html[data-look="cobalt60"] .sidebar { box-shadow: inset -1px 0 0 var(--c60-rim-low); }
html[data-look="cobalt60"] :is(.mg-bar, .sk-controls) { box-shadow: inset 0 1px 0 var(--c60-rim-low); }
html[data-look="cobalt60"] :is(.cpanel, #pageMsg, .sk-analysis, .bezel, .thumb, .price) {
  background: var(--c60-sheen), var(--c60-glass);
  border-color: var(--c60-edge);
  box-shadow:
    inset 0 1px 0 var(--c60-rim),
    inset 0 -1px 0 var(--c60-rim-low),
    inset 0 0 18px -6px var(--c60-glow),
    var(--c60-drop);
}
html[data-look="cobalt60"] :is(.bezel, .thumb, .price) { border-radius: 18px; overflow: hidden; }
/* Not clipped: the panel's model and product menus drop out of its head.
   The map stage inside already clips itself (compare.css) -- its corners
   just follow the panel's. */
html[data-look="cobalt60"] .cpanel { border-radius: 18px; }
html[data-look="cobalt60"] .cpanel .cstage { border-radius: 0 0 17px 17px; }
html[data-look="cobalt60"] #pageMsg { border-radius: 14px; }
html[data-look="cobalt60"] .cpanel-head { border-bottom-color: var(--c60-edge); }
/* Accent edges stay accent where the page gave something one. */
html[data-look="cobalt60"] .sk-analysis { border-radius: 14px; border-left-color: var(--accent); }
html[data-look="cobalt60"] .price {
  border-left-color: var(--accent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%),
    var(--c60-sheen), var(--c60-glass);
}
html[data-look="cobalt60"] :is(.bezel-bar, .thumb figcaption) { border-color: var(--c60-edge); }
html[data-look="cobalt60"] .bezel-bar:first-child { background: var(--c60-tint); }
html[data-look="cobalt60"] .thumb:focus-within { border-color: var(--accent); }
@media (hover: hover) {
  html[data-look="cobalt60"] .thumb:hover {
    border-color: var(--accent);
    box-shadow: inset 0 1px 0 var(--c60-rim), var(--c60-drop-lift);
  }
}

/* The landing page's five figures: one glass slab instead of hairlines. */
html[data-look="cobalt60"] .specs {
  border-color: transparent;
  border-radius: 18px;
  overflow: hidden;
  background: var(--c60-sheen), var(--c60-glass);
  box-shadow: inset 0 1px 0 var(--c60-rim), inset 0 0 0 1px var(--c60-edge), var(--c60-drop);
}
html[data-look="cobalt60"] .spec { border-color: var(--c60-edge); }
html[data-look="cobalt60"] .spec:hover { background: var(--c60-tint); }

/* The time ribbons: the canvas draws only lines and labels, so its box
   can be glass like the rest. */
html[data-look="cobalt60"] #ribbonCanvas {
  background: var(--c60-sheen), var(--c60-glass);
  border-color: var(--c60-edge);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 var(--c60-rim), var(--c60-drop);
}
html[data-look="cobalt60"] :is(.ribbon-cursor, .sk-ribbon-cursor)::after {
  box-shadow: 0 0 0 1px var(--c60-rim-low), 0 2px 8px var(--c60-accent-glow);
}

/* ---- the side list of products (/karte/) -------------------------------- */
html[data-look="cobalt60"] .product-btn { border-radius: 10px; }
html[data-look="cobalt60"] .product-btn:hover { background: var(--c60-tint); }
html[data-look="cobalt60"] .product-btn.active {
  background: var(--c60-tint-strong);
  border-left-color: transparent;
  box-shadow: inset 0 0 0 1px var(--c60-edge), inset 0 1px 0 var(--c60-rim-low);
}
html[data-look="cobalt60"] .sheet-grid .product-btn { border-color: var(--c60-edge); border-radius: 12px; }
html[data-look="cobalt60"] .sheet-grid .product-btn.active { border-color: var(--accent); }

/* ---- dialogs, the phone sheet and their backdrops ---------------------- */
html[data-look="cobalt60"] :is(.signin, .tm-snap-dialog, .smg-dialog, .mg-dialog, .sheet) {
  background: var(--c60-sheen), var(--c60-glass-strong);
  border-color: var(--c60-edge);
  box-shadow:
    inset 0 1px 0 var(--c60-rim),
    inset 0 -1px 0 var(--c60-rim-low),
    0 30px 80px -20px var(--shadow-3);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
          backdrop-filter: blur(28px) saturate(190%);
}
html[data-look="cobalt60"] :is(.signin, .tm-snap-dialog, .smg-dialog, .mg-dialog) { border-radius: 24px; }
html[data-look="cobalt60"] .sheet { border-radius: 24px 24px 0 0; }
html[data-look="cobalt60"] :is(.signin, .tm-snap-dialog, .smg-dialog, .mg-dialog)::backdrop {
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
html[data-look="cobalt60"] .sheet-backdrop { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* ---- when the reader asks for less glass --------------------------------
   The OS setting "reduce transparency", and browsers with no backdrop
   blur at all: solid panes in the same cobalt palette, rims kept. */
@media (prefers-reduced-transparency: reduce) {
  html[data-look="cobalt60"] :is(
    .tm-card, .tm-chip, .tm-readout, .tm-notice, .mi-panel, .tm-areas, .tm-snap-bar,
    .tcmp-chip, .tcmp-recipes-btn, .stage-msg, .paywall, .sk-paywall-card, .an-bar,
    .maplibregl-ctrl-group, .leaflet-bar, .leaflet-control-layers, .leaflet-control-attribution,
    .sh-menu, .run-menu, .fx-results, .mg-results, .sk-results, .ctop .tm-card-body,
    .sidebar, .mg-bar, .sk-controls, .cpanel, #pageMsg, .sk-analysis, .bezel, .thumb, .specs,
    #ribbonCanvas, .signin, .tm-snap-dialog, .smg-dialog, .mg-dialog, .sheet,
    .sk-search input, .fx-search input
  ),
  html[data-look="cobalt60"] .site-header::before {
    background: var(--panel);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-look="cobalt60"] :is(
    .tm-card, .tm-chip, .tm-readout, .tm-notice, .mi-panel, .tm-areas, .tm-snap-bar,
    .tcmp-chip, .tcmp-recipes-btn, .stage-msg, .paywall, .sk-paywall-card, .an-bar,
    .maplibregl-ctrl-group, .leaflet-bar, .leaflet-control-layers,
    .sh-menu, .run-menu, .fx-results, .mg-results, .sk-results, .ctop .tm-card-body,
    .signin, .tm-snap-dialog, .smg-dialog, .mg-dialog, .sheet, .sk-search input
  ),
  html[data-look="cobalt60"] .site-header::before {
    background: var(--c60-sheen), var(--c60-glass-strong);
  }
}

@media (prefers-reduced-motion: no-preference) {
  html[data-look="cobalt60"] :is(.btn, .sh-account, .sh-icon, .transport button, .sector-btn,
    .product-btn, .seg button, .mg-seg-btn, .sk-seg-btn, .smg-seg-btn, .thumb) {
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 200ms ease;
  }
}