/* One reference-led material. The canvas is decorative; content and hit targets
   remain ordinary HTML. CSS is the default, including before/without JavaScript. */
:root {
  --tb-glass-radius: 44px;
  --tb-glass-fallback: rgba(24, 31, 39, .5);
  --tb-glass-rim: rgba(255, 255, 255, .3);
  --tb-glass-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  --tb-glass-ease: cubic-bezier(.22, 1.35, .36, 1);
}
:is(#widgets-root, #promo-root) .tb-widget,
#promo-root .tb-promo-card,
.tb-dock,
.tb-music-dialog,
.tb-music-glass,
.tb-calendar-dialog,
.tb-cc-panel .tb-cc-glass {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--tb-glass-rim);
  border-radius: var(--tb-glass-radius);
  background: linear-gradient(145deg, rgba(224, 242, 250, .12), transparent 48%), var(--tb-glass-fallback);
  -webkit-backdrop-filter: blur(var(--tb-glass-blur, 18px)) saturate(145%);
  backdrop-filter: blur(var(--tb-glass-blur, 18px)) saturate(145%);
  box-shadow: var(--tb-glass-shadow), inset 0 1px 0 rgba(255, 255, 255, .22);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  transition: transform 280ms var(--tb-glass-ease), box-shadow 180ms ease, border-color 180ms ease;
}
:is(#widgets-root, #promo-root) .tb-widget {
  --tb-widget-glass-text: #fff;
  --tb-widget-glass-muted: rgba(255, 255, 255, .88);
}
#promo-root .tb-widget--visit { --tb-glass-radius: calc(38px * var(--tb-glass-radius-ratio, 1)); }
.tb-dock { --tb-glass-fallback: var(--tb-glass-dock-fallback, rgba(207, 226, 238, .26)); }
.tb-cc-panel .tb-cc-connect,
.tb-cc-panel .tb-cc-slider-tile { --tb-glass-radius: calc(30px * var(--tb-glass-radius-ratio, 1)); }
.tb-cc-panel .tb-cc-music { --tb-glass-radius: calc(44px * var(--tb-glass-radius-ratio, 1)); }

/* Canvas clipping follows the same continuous corner as the Liquid DOM shader.
   Never clip the HTML host: focus rings and dock magnification remain visible. */
.tb-liquid-canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0;
  opacity: 1;
  pointer-events: none;
}
:is(#widgets-root, #promo-root) .tb-widget.tb-liquid-ready,
#promo-root .tb-promo-card.tb-liquid-ready,
.tb-dock.tb-liquid-ready,
.tb-music-dialog.tb-liquid-ready,
.tb-music-glass.tb-liquid-ready,
.tb-calendar-dialog.tb-liquid-ready,
.tb-cc-panel .tb-cc-glass.tb-liquid-ready {
  background: transparent;
  border-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--tb-glass-shadow);
}
:is(#widgets-root, #promo-root) .tb-widget.tb-liquid-ready,
#promo-root .tb-promo-card.tb-liquid-ready { overflow: visible; }
/* Keep Liquid DOM reflections over the actual blurred desktop. An opaque
   wallpaper-only canvas would hide the windows and widgets under this popup. */
.tb-cc-panel .tb-cc-glass.tb-liquid-ready {
  background: rgba(18, 23, 29, .28);
}
.tb-cc-panel .tb-liquid-canvas { opacity: .38; }

/* The Singapore credit joins the glass family without changing its link/copy. */
#promo-root .tb-promo-card--sticky {
  padding: 0;
  display: flex;
  align-items: center;
  text-decoration: none;
}
#promo-root .tb-promo-sticky-header { display: none; }
#promo-root .tb-promo-sticky-text { padding: 18px 20px; }
#promo-root .tb-promo-sticky-line { color: #fff; }
#promo-root .tb-promo-sticky-url {
  color: rgba(230, 245, 255, .96);
  text-decoration-color: rgba(230, 245, 255, .5);
}

/* Hover acknowledges a movable surface, press acknowledges an actual control.
   The drag controller owns individual scale/translate; this transform composes
   with it and never changes the saved desktop position. No idle animation. */
@media (hover: hover) and (pointer: fine) {
  :is(#widgets-root, #promo-root) .tb-widget:hover,
  #promo-root .tb-promo-card:hover,
  .tb-calendar-dialog[open]:hover,
  .tb-music-dialog[open]:hover {
    transform: scale(1.012);
    box-shadow: 0 11px 28px rgba(0, 0, 0, .2);
  }
  .tb-cc-panel button.tb-cc-glass:hover { transform: scale(1.035); }
}
#widgets-root .tb-layout-dragging,
#widgets-root .tb-layout-settling,
#promo-root .tb-layout-dragging,
#promo-root .tb-layout-settling {
  transform: none !important;
  /* Read resting geometry immediately when dragging starts. */
  transition: box-shadow 180ms ease, border-color 180ms ease;
}
.tb-cc-panel button.tb-cc-glass:active { transform: scale(.96); }
#promo-root .tb-promo-card--sticky:active { transform: scale(.99); }
:is(#widgets-root, #promo-root) .tb-widget:focus-visible,
#promo-root .tb-promo-card:focus-visible,
.tb-cc-panel button:focus-visible,
.tb-cc-panel input:focus-visible {
  outline: 2px solid #b6ddff;
  outline-offset: 4px;
}
#widgets-root .tb-clock-today,
#widgets-root .tb-clock-offset,
#widgets-root .tb-cal-tomorrow,
#widgets-root .tb-stock-symbol,
#widgets-root .tb-stocks-currency,
#widgets-root .tb-stocks-source,
#widgets-root .tb-stocks-status,
#widgets-root .tb-market-updated { color: var(--tb-widget-glass-muted); }

/* Safari/no-WebGPU keeps the same DOM, dimensions and rounded layout, using a
   quieter native backdrop blur rather than trying to emulate GPU refraction. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :is(#widgets-root, #promo-root) .tb-widget,
  #promo-root .tb-promo-card,
  .tb-dock,
  .tb-music-dialog,
.tb-music-glass,
.tb-calendar-dialog,
.tb-cc-panel .tb-cc-glass { background: rgba(28, 35, 43, .94); }
}
@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
  :is(#widgets-root, #promo-root) .tb-widget,
  #promo-root .tb-promo-card,
  .tb-dock,
  .tb-music-dialog,
.tb-music-glass,
.tb-calendar-dialog,
.tb-cc-panel .tb-cc-glass {
    background: #28333e !important;
    border-color: rgba(255, 255, 255, .35);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    text-shadow: none;
  }
  .tb-liquid-canvas { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  :is(#widgets-root, #promo-root) .tb-widget,
  #promo-root .tb-promo-card,
  .tb-dock,
  .tb-music-dialog,
.tb-music-glass,
.tb-calendar-dialog,
.tb-cc-panel .tb-cc-glass { transition: none; transform: none !important; }
}

html[data-glass-motion="off"] :is(#widgets-root, #promo-root) .tb-widget,
html[data-glass-motion="off"] #promo-root .tb-promo-card,
html[data-glass-motion="off"] .tb-dock,
html[data-glass-motion="off"] .tb-music-dialog,
html[data-glass-motion="off"] .tb-music-glass,
html[data-glass-motion="off"] .tb-calendar-dialog,
html[data-glass-motion="off"] .tb-cc-panel .tb-cc-glass {
  transition: none;
  transform: none !important;
}