:root {
  --bg-base: #0a0c0b;
  --panel-bg: rgba(18, 20, 19, 0.62);
  --panel-bg-strong: rgba(24, 26, 25, 0.78);
  --card-bg: rgba(30, 32, 31, 0.5);
  --border-soft: rgba(255, 255, 255, 0.08);
  --border-softer: rgba(255, 255, 255, 0.05);
  --text-primary: rgba(255, 255, 255, 0.92);
  --text-secondary: rgba(255, 255, 255, 0.6);
  --text-muted: rgba(255, 255, 255, 0.38);
  --accent-green: #4ade80;
  --accent-red: #f0584e;
  --accent-amber: #f5a623;
  --accent-blue: #5b9bd5;
  --accent-pink: #e85d9c;
  /* Cognitive state accents — the only colour that feature is allowed to use. */
  --cog-accent-focused: #e0a961;
  --cog-accent-deep-flow: #6ba3d6;
  --cog-accent-drifting: #a08fd4;
  --cog-accent-overloaded: #d4816f;
  --cog-accent-fatigued: #b08a55;
  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 14px;
  --blur: blur(22px);
  --shadow-panel: 0 24px 60px rgba(0, 0, 0, 0.55);

  /* Per-tab full-screen backgrounds (must be byte-identical to the JS preload URLs) */
  --bg-focus: url("assets/backgrounds/6081366.jpg");
  --bg-desk: url("assets/backgrounds/desk-horizon.webp");
  --bg-meetings: url("assets/backgrounds/24485923.jpg");
  --bg-decisions: url("assets/backgrounds/11047821.jpg");
  --bg-progress: url("assets/backgrounds/10664498.jpg");

  /* Self world spaces */
  --bg-me-now: url("assets/backgrounds/1022411.jpg");
  --bg-mirror: url("assets/backgrounds/9880532.jpg");
  --bg-profile: url("assets/backgrounds/7430452.jpg");
  --bg-reset: url("assets/backgrounds/16551575.jpg");
  --bg-rhythm: url("assets/backgrounds/37887518.jpg");
  --bg-journal: url("assets/backgrounds/6037391.jpg");

  /* People world spaces */
  --bg-circle: url("assets/backgrounds/20604155.jpg");
  --bg-family: url("assets/backgrounds/3171207.jpg");
  --bg-friends: url("assets/backgrounds/1139370.jpg");
  --bg-promises: url("assets/backgrounds/10638724.jpg");
  --bg-conversations: url("assets/backgrounds/4347213.jpg");
  --bg-care: url("assets/backgrounds/33161021.jpg");

  /* Shared tab-transition timing (navbar indicator, content slide, bg crossfade stay in lockstep) */
  --tab-anim-duration: 520ms;
  --tab-anim-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tab-slide-distance: 40px;

  /* ONE glass, for every piece of persistent chrome. Six different blur/radius/shadow
     recipes across the top bar, dock, map HUD and cognitive switcher read as several
     apps sitting next to each other.

     AND IT IS BORDERLESS, which is the whole point. The onboarding film draws a 1px
     stroke around its keys because they stand alone on a photograph and have to
     announce where they end. Persistent chrome is not a key, it is a PANEL, and the
     house style is explicit about what a panel is: charcoal fill, heavy blur, a large
     soft shadow, one faint highlight along the top edge, and no stroke of any kind.
     A hairline rectangle sitting over the world all day is a box drawn around
     nothing; the blur and the shadow already say where the surface is. */
  --chrome-glass: rgba(14, 17, 19, 0.55);
  --chrome-fill-hover: rgba(255, 255, 255, 0.09);
  --chrome-blur: blur(22px);
  --chrome-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --chrome-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  --chrome-radius: 10px;
  --chrome-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  /* uppercase, letter-spaced, dim: the only label voice the chrome uses */
  --chrome-kicker-size: 9.5px;
  --chrome-kicker-track: 0.28em;

  /* A PANEL IS A PANEL. Notifications, Wearables, Atmosphere, Settings, the widget
     drawer, the cognitive sheet and the world menu each carried their own copy of the
     same recipe, drifted: three different corner radii, a green cast in the fill, and
     no shadow at all, so a 26px blur was the only thing holding them off the world.
     They are the same object opened from different buttons, so they read from one set
     of numbers. The fill is the chrome's charcoal, not a green-grey; depth comes from
     the shadow, and the only line on the surface is the highlight along its top. */
  /* And that one set of numbers is the command bar's. A panel is opened FROM the
     bar and hangs off it, so a deeper blur, a heavier shadow and a corner twice
     as round read as a second surface arriving rather than the bar extending. */
  --panel-glass: var(--chrome-glass);
  --panel-blur: var(--chrome-blur);
  --panel-highlight: var(--chrome-highlight);
  --panel-shadow: var(--chrome-shadow);
  --panel-radius: var(--chrome-radius);

  /* Every panel hangs the same distance under the bar: the bar's own offset,
     plus its body, plus the gap the worlds menu already used. */
  --panel-gap: 20px;
  --panel-top: calc(2% + 50px + var(--panel-gap));
  /* rows and controls INSIDE a panel are cut from the panel, not laid on it */
  --panel-fill-hover: rgba(255, 255, 255, 0.06);
  --panel-fill-active: rgba(255, 255, 255, 0.1);

  /* TWO VOICES, NOT NINE. Raleway at 200-300 is what a heading sounds like here:
     wide, quiet, and slow. Inter carries everything that has to be read rather than
     heard. The app's default is SF Pro Rounded, a rounded face that does not exist
     off Apple hardware and reads as friendly software; these two read as a place. */
  --font-display: "Raleway", "Inter", system-ui, sans-serif;
  --font-sans: "Inter", "SF Pro Display", system-ui, sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg-base);
  font-family: "SF Pro Rounded", "SF Pro Display", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  caret-color: transparent;
}

/* Hide the blinking text caret everywhere except real text fields, so it never
   appears stray on the background or non-editable widget chrome. */
input,
textarea,
select,
[contenteditable="true"],
[contenteditable=""] {
  caret-color: auto;
}

.unit {
  font-size: 0.5em;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 4px;
}

/* ===================== DASHBOARD GRID ===================== */
.dashboard {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #080b0a;
  opacity: 1;
  transition: opacity 240ms ease;
}
/* Keep everything hidden until Vue has mounted + applied the camera, so the
   first paint is the finished UI (no scale jump / chromeless flash on refresh). */
body.is-booting .dashboard {
  opacity: 0;
}

/* ===================== MAP WORKSPACE ===================== */
.map-workspace {
  position: absolute;
  inset: 0;
  overflow: visible;
}

.world {
  position: absolute;
  inset: 0;
  transform: translate3d(var(--pan-x, 0px), var(--pan-y, 0px), 0) scale(var(--scale, 1));
  transform-origin: 0 0;
  will-change: transform;
}
.world-bg {
  position: absolute;
  inset: 0;
  transform: translate3d(var(--pan-x, 0px), var(--pan-y, 0px), 0) scale(var(--scale, 1));
  transform-origin: 0 0;
  pointer-events: none;
  /* NO will-change here: natural re-raster on zoom keeps the giant photo
     artifact-free; will-change caused stale rasters + blinking */
}
.screen-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.map-layer {
  position: absolute;
  inset: 0;
}
.map-canvas {
  position: absolute;
  top: -152vh;
  left: -152vw;
  width: 404vw;
  height: 404vh;
}
.dashboard.shift-ready {
  cursor: grab;
}
.dashboard.is-panning-background {
  cursor: grabbing;
  user-select: none;
}
.pan-hint {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-secondary);
  background: linear-gradient(145deg, rgba(32, 35, 33, 0.72), rgba(12, 15, 14, 0.66));
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px) saturate(115%);
  -webkit-backdrop-filter: blur(20px) saturate(115%);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.dashboard.shift-ready .pan-hint {
  opacity: 1;
}

.zoom-indicator {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 60;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  background: linear-gradient(145deg, rgba(32, 35, 33, 0.78), rgba(12, 15, 14, 0.72));
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px) saturate(115%);
  -webkit-backdrop-filter: blur(20px) saturate(115%);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.zoom-indicator.visible {
  opacity: 1;
}

/* Double-buffered background: two stacked image layers crossfade on tab switch */
.map-photo {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity var(--tab-anim-duration) var(--tab-anim-ease);
}
.map-photo.is-active {
  opacity: 1;
}
.map-photo.buffer-parked { visibility: hidden; }
.map-photo--a {
  background-image: var(--bg-focus);
}

/* ===================== DESK: fixed, desktop-like space ===================== */
body[data-space="desk"] .map-hud {
  display: none;
}
/* Desk never pans or zooms, so its wallpaper is pinned to the screen instead of
   living inside the oversized pannable canvas, and it carries no dimming layer.
   Both rules key off the buffer's own tab, never the active space, so nothing
   shifts under the crossfade while switching tabs. */
.map-photo[data-bg-tab="desk"] {
  position: fixed;
}
/* Desk carries no dimming of its own, but the layer has to stay in the tree:
   it is what Background Opacity, Readability Guard and Adapt to Time drive.
   Hiding it made those three controls do nothing here, so Desk starts at zero
   and still answers to a set value. */
.map-photo[data-bg-tab="desk"]::after {
  opacity: var(--bg-overlay, 0);
}
/* The vignette is one shared element, so it fades out in step with the wallpaper. */
.screen-grain::after {
  transition: opacity var(--tab-anim-duration) var(--tab-anim-ease);
}
body[data-space="desk"] .screen-grain::after {
  opacity: 0;
}
/* Uniform black darkening overlay for every tab. Gradient defined at MAX strength;
   the command-bar slider scales it via --bg-overlay (opacity). Default 0.72 ≈ the
   original pasted value, leaving headroom to go darker (→1) or lighter (→0). */
.map-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 60% at 32% 42%, rgba(0,0,0,0.80), rgba(0,0,0,0.46) 60%),
    linear-gradient(160deg, rgba(0,0,0,0.60), rgba(0,0,0,0.88)),
    linear-gradient(0deg, rgba(0,0,0,0.72), rgba(0,0,0,0.72));
  opacity: var(--bg-overlay, 0.72);
  transition: opacity 120ms linear;
}

/* ===================== PER-TAB CENTER CANVAS ===================== */
.tab-canvas {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.tab-panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(0);
  transition:
    opacity var(--tab-anim-duration) var(--tab-anim-ease),
    transform var(--tab-anim-duration) var(--tab-anim-ease),
    visibility 0s linear var(--tab-anim-duration);
}
.tab-panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition:
    opacity var(--tab-anim-duration) var(--tab-anim-ease),
    transform var(--tab-anim-duration) var(--tab-anim-ease);
}
.tab-panel.enter-from-right {
  opacity: 0;
  visibility: visible;
  transform: translateX(var(--tab-slide-distance));
}
.tab-panel.enter-from-left {
  opacity: 0;
  visibility: visible;
  transform: translateX(calc(-1 * var(--tab-slide-distance)));
}
.tab-panel.leave-to-left {
  opacity: 0;
  visibility: visible;
  transform: translateX(calc(-1 * var(--tab-slide-distance)));
}
.tab-panel.leave-to-right {
  opacity: 0;
  visibility: visible;
  transform: translateX(var(--tab-slide-distance));
}
.tab-panel-card {
  max-width: 460px;
  padding: 40px 44px;
  text-align: center;
  border-radius: var(--radius-lg);
  background: var(--panel-bg);
  border: 1px solid var(--border-soft);
  backdrop-filter: var(--blur) saturate(115%);
  -webkit-backdrop-filter: var(--blur) saturate(115%);
  box-shadow: var(--shadow-panel);
}
.tab-panel-title {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.tab-panel-sub {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Focus workspace content fades out while a non-Focus tab is active */
.map-marker,
.map-radius,
.map-svg,
.draggable-widget {
  transition: opacity var(--tab-anim-duration) var(--tab-anim-ease);
}
body.tab-content-hidden .map-marker,
body.tab-content-hidden .map-radius,
body.tab-content-hidden .map-svg {
  opacity: 0;
  pointer-events: none;
}

/* Freeze glass (drop live backdrop-filter) during a tab transition to hold 60fps.
   Widget dock + on-canvas widgets are excluded so their blur stays stable. */
body.is-transitioning .command-bar,
body.is-transitioning .pan-hint,
body.is-transitioning .zoom-indicator,
body.is-transitioning .tab-panel-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --tab-anim-duration: 150ms;
    --tab-slide-distance: 0px;
  }
  .tab-panel,
  .tab-panel.is-active {
    transition:
      opacity var(--tab-anim-duration) ease,
      visibility 0s linear var(--tab-anim-duration);
  }
}

.map-terrain {
  position: absolute;
  inset: 0;
}
/* film grain */
.screen-grain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* vignette */
.screen-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(125% 105% at 50% 42%, transparent 42%, rgba(0, 0, 0, 0.58) 100%);
}

.map-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.map-roads path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 1.4;
}

.map-route {
  fill: none;
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 2.5;
  stroke-dasharray: 2 7;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.35));
}

.route-dot {
  fill: #fff;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.6));
}

/* map markers */
.map-marker {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.06), 0 0 14px currentColor;
}

.marker-white {
  background: #fff;
  color: rgba(255, 255, 255, 0.5);
}
.marker-blue {
  background: var(--accent-blue);
  color: var(--accent-blue);
}
.marker-pink {
  background: var(--accent-pink);
  color: var(--accent-pink);
}
.marker-green {
  background: var(--accent-green);
  color: var(--accent-green);
}
.marker-node {
  width: 22px;
  height: 22px;
  background: rgba(20, 22, 21, 0.85);
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  box-shadow: none;
}
.marker-node::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
}

.map-radius {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
}
.radius-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px dashed rgba(255, 255, 255, 0.28);
}
.radius-core {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(40, 42, 41, 0.9);
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 24px rgba(255, 255, 255, 0.25);
}
.radius-core::after {
  content: "▶";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.85);
}

/* map heading */
.map-heading {
  position: absolute;
  top: 8.5%;
  left: 36%;
  z-index: 4;
}
.map-title {
  font-size: clamp(28px, 3.2vw, 52px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
}
.map-filters {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.map-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(160deg, rgba(28, 32, 30, 0.6), rgba(14, 17, 16, 0.5));
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--border-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 20px rgba(0, 0, 0, 0.35);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
}
.pill-icon {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}
.pill-chevron {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.55;
}

.page-scrim {
  position: fixed;
  inset: 0;
  z-index: 8;
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
body.notif-open .page-scrim,
body.world-menu-open .page-scrim {
  opacity: 1;
  pointer-events: auto;
}

/* ===================== MAP HUD (bottom-right) ===================== */
.map-hud {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  user-select: none;
  -webkit-user-select: none;
  caret-color: transparent;
}
.map-hud button,
.map-hud .map-zoom-value {
  -webkit-user-select: none;
  user-select: none;
}

/* compact control cluster: minimap toggle | zoom pill | recenter */
.map-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border-radius: var(--chrome-radius);
  background: var(--chrome-glass);
  backdrop-filter: var(--chrome-blur);
  -webkit-backdrop-filter: var(--chrome-blur);
  border: none;
  box-shadow: var(--chrome-shadow), var(--chrome-highlight);
}
.map-zoom-pill {
  display: flex;
  align-items: center;
  gap: 2px;
}
.map-ctrl-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 300ms var(--chrome-ease), color 300ms var(--chrome-ease);
}
.map-ctrl-btn:hover {
  background: var(--chrome-fill-hover);
  color: var(--text-primary);
}
.map-mini-toggle.is-active {
  background: var(--chrome-fill-hover);
  color: var(--text-primary);
}
.map-zoom-value {
  min-width: 42px;
  height: 28px;
  padding: 0 4px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.map-zoom-value:hover {
  background: rgba(255, 255, 255, 0.1);
}
.map-ctrl-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.crosshair-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

/* minimap preview panel */
.map-mini {
  position: relative;
  width: 232px;
  height: 140px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(150deg, rgba(30, 33, 32, 0.72), rgba(11, 14, 13, 0.7));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(26px) saturate(125%);
  -webkit-backdrop-filter: blur(26px) saturate(125%);
  cursor: grab;
  touch-action: none;
  transform-origin: bottom right;
  animation: mapMiniIn 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.map-mini.is-grabbing {
  cursor: grabbing;
}
@keyframes mapMiniIn {
  from { opacity: 0; transform: translateY(8px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.map-mini-photo {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 6px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: brightness(0.66) saturate(0.95);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.map-mini-widgets {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.map-mini-chip {
  position: absolute;
  border-radius: 50%;
  background: rgba(74, 222, 128, 0.92);
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.6);
  pointer-events: auto;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.map-mini-chip:hover {
  background: rgba(120, 255, 170, 1);
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.9);
  transform: scale(1.25);
  z-index: 2;
}

/* ===================== SCHEDULE OFFSET PANEL ===================== */
.schedule-offset-panel {
  position: absolute;
  left: 36%;
  bottom: 2.4%;
  width: 30%;
  min-width: 330px;
  height: 232px;
  z-index: 5;
  padding: 18px 22px;
  border-radius: 28px;
  background:
    linear-gradient(
      145deg,
      rgba(38, 42, 41, 0.6) 0%,
      rgba(26, 30, 29, 0.58) 100%
    );
  backdrop-filter: blur(26px) saturate(135%);
  -webkit-backdrop-filter: blur(26px) saturate(135%);
  border: none;
  box-shadow: none;
}
.schedule-offset-head,
.passenger-volume-head,
.efficiency-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.schedule-offset-title,
.passenger-volume-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
}
.panel-expand,
.panel-collapse {
  background: none;
  border: none;
  color: #ffffff;
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  margin: -10px;
}
.schedule-offset-value {
  font-size: 34px;
  font-weight: 600;
  margin-top: 6px;
}
.schedule-offset-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.schedule-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.schedule-row-header {
  display: grid;
  grid-template-columns: 1.4fr repeat(5, 1fr);
  font-size: 10px;
  color: var(--text-muted);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-softer);
}
.schedule-row {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  align-items: center;
  font-size: 10px;
  color: var(--text-secondary);
}
.route-tag {
  color: var(--text-muted);
}
.offset-val.negative {
  color: var(--text-secondary);
}
.tick {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
}
.delay-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-amber);
  box-shadow: 0 0 8px rgba(245, 166, 35, 0.6);
}

/* ===================== PASSENGER VOLUME PANEL ===================== */
.passenger-volume-panel {
  position: absolute;
  right: 1.4%;
  bottom: 2.4%;
  width: 30%;
  min-width: 330px;
  height: 232px;
  display: flex;
  flex-direction: column;
  z-index: 4;
  padding: 16px 20px;
  border-radius: 28px;
  background:
    linear-gradient(
      145deg,
      rgba(38, 42, 41, 0.6) 0%,
      rgba(26, 30, 29, 0.58) 100%
    );
  backdrop-filter: blur(26px) saturate(135%);
  -webkit-backdrop-filter: blur(26px) saturate(135%);
  border: none;
  box-shadow: none;
}
.passenger-volume-value {
  font-size: 30px;
  font-weight: 600;
  margin: 6px 0 12px;
}
.volume-chart {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.volume-bars {
  width: 100%;
  height: 70px;
}
.volume-bars polyline {
  fill: none;
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 1.5;
}
.volume-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
}
.vol-col {
  display: flex;
  flex-direction: column;
  font-size: 9px;
}
.vol-col b {
  color: var(--text-secondary);
  font-weight: 500;
}
.vol-col i {
  color: var(--text-muted);
  font-style: normal;
}
.vol-col i.up {
  color: var(--accent-amber);
}

/* ===================== ENERGY2 WIDGET ===================== */
.energy2-widget {
  position: absolute;
  z-index: 5;
  zoom: 1.15;
  width: calc(var(--h-widget-width) / 1.15);
  height: calc(var(--h-widget-height) / 1.15);
  max-width: 92vw;
  display: flex;
  flex-direction: column;
  padding: 18px 22px 16px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: none;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
}
.energy2-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.energy2-head-left {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.energy2-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: rgb(78 78 78 / 12%);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.energy2-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--text-secondary);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.energy2-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.energy2-status-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.65);
}
.energy2-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.energy2-action {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  display: inline-flex;
  color: var(--text-muted);
  transition: color 0.15s ease;
}
.energy2-action svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: rgb(255 255 255);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.energy2-body {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
  /* overflow-x only — the shared fixed-box rule owns overflow-y. */
  overflow-x: hidden;
  transition: opacity 0.25s ease;
}
.energy2-body > * {
  flex-shrink: 0;
}
.energy2-widget.collapsed .energy2-body {
  display: none;
}
.energy2-widget.collapsed [data-energy2-toggle] svg {
  transform: rotate(-90deg);
}
.energy2-chart {
  position: relative;
}
.energy2-svg {
  display: block;
  width: 100%;
  height: 150px;
}
.energy2-baseline {
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 1;
}
.energy2-main-line {
  stroke: url(#energy2LineFade);
  stroke-width: 2.2;
  stroke-linecap: round;
  fill: none;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 1)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 16px rgba(255, 255, 255, 0.55)) drop-shadow(0 0 44px rgba(255, 255, 255, 0.3));
}
.energy2-area {
  fill: url(#energy2AreaFade);
  stroke: none;
}
.energy2-ghost-line {
  stroke: rgba(245, 245, 240, 0.22);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 0.5 7;
  fill: none;
}
.energy2-current-line {
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 1;
}
.energy2-current-dot {
  fill: var(--accent-green);
  filter: drop-shadow(0 0 4px rgba(79, 216, 121, 0.9)) drop-shadow(0 0 14px rgba(79, 216, 121, 0.55));
}
.energy2-now {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.energy2-now-tag {
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}
.energy2-now-peak {
  font-size: 13px;
  color: var(--text-primary);
}
.energy2-now-value {
  font-size: 11px;
  color: var(--text-muted);
}
.energy2-x-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 10px;
  color: var(--text-muted);
}
.energy2-section-title {
  margin-top: 20px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.energy2-windows {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}
.energy2-window-card {
  flex: 1;
  min-width: 180px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgb(78 78 78 / 10%);
  border: none;
  box-shadow: none;
}
.energy2-window-card.muted {
  opacity: 0.5;
}
.energy2-window-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgb(78 78 78 / 12%);
  color: var(--text-secondary);
}
.energy2-window-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.energy2-window-text {
  min-width: 0;
}
.energy2-window-range {
  font-size: 13px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.energy2-window-desc {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.energy2-recommend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-primary);
}
.energy2-recommend-spark {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.energy2-footer {
  margin-top: 12px;
  padding-left: 4px;
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0.85;
}

/* ===================== FOCUS SESSION WIDGET ===================== */
.focus-session-widget {
  position: absolute;
  z-index: 5;
  width: var(--v-widget-width);
  height: var(--v-widget-height);
  max-width: 92vw;
  display: flex;
  flex-direction: column;
  padding: 25px 14px 16px 26px;
  border-radius: 26px;
  background: radial-gradient(130% 90% at 50% 0%, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0) 58%), rgba(18, 20, 22, 0.32);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 36px 88px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.09);
}
.focus-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* ===================== TODAY WIDGET ===================== */
/* Today is the reference for the portrait size class; every vertical widget
   matches these two numbers. */
:root {
  --v-widget-width: 410px;
  --v-widget-height: 678px;
  /* Landscape box: width from Calendar, height from Sleep & Rhythm. */
  --h-widget-width: 950px;
  --h-widget-height: 506px;
  /* Square box: taken from Progress. */
  --sq-widget-width: 826px;
  --sq-widget-height: 583px;
}
/* A portrait, landscape or square widget is a fixed box, so its content area
   takes the leftover height and scrolls with no visible bar. */
.today-body,
.neura-body,
.focus-body,
.calendar-body,
.ml-day,
.ml-side,
.mirror-body,
.reset-body,
.bna-body,
.rf-body,
.widget__body,
.selfcomp-scroll,
.mm-body,
.neva-body,
.focus-level-scroll,
.twin-neva-body,
.meeting-body,
.dl-body,
.hydration-body,
.msg-body,
.sos-content,
.nl-left,
.is-body,
.al-aside,
.energy2-body,
.mood-right,
.pl-body,
.flow-tracker-body,
.attention-body,
.ec-body,
.results-overview-right-list,
.focus-window-body,
.bs-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* overflow-y alone computes overflow-x to auto, which lets a wide row drag
     the whole box sideways. */
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.today-body::-webkit-scrollbar,
.neura-body::-webkit-scrollbar,
.focus-body::-webkit-scrollbar,
.calendar-body::-webkit-scrollbar,
.ml-day::-webkit-scrollbar,
.ml-side::-webkit-scrollbar,
.mirror-body::-webkit-scrollbar,
.reset-body::-webkit-scrollbar,
.bna-body::-webkit-scrollbar,
.rf-body::-webkit-scrollbar,
.widget__body::-webkit-scrollbar,
.selfcomp-scroll::-webkit-scrollbar,
.mm-body::-webkit-scrollbar,
.neva-body::-webkit-scrollbar,
.focus-level-scroll::-webkit-scrollbar,
.twin-neva-body::-webkit-scrollbar,
.sos-content::-webkit-scrollbar,
.nl-left::-webkit-scrollbar,
.is-body::-webkit-scrollbar,
.meeting-body::-webkit-scrollbar,
.al-body::-webkit-scrollbar,
.energy2-body::-webkit-scrollbar,
.dl-body::-webkit-scrollbar,
.mood-right::-webkit-scrollbar,
.hydration-body::-webkit-scrollbar,
.pl-body::-webkit-scrollbar,
.msg-body::-webkit-scrollbar,
.flow-tracker-body::-webkit-scrollbar,
.attention-body::-webkit-scrollbar,
.ec-body::-webkit-scrollbar,
.results-overview-right-list::-webkit-scrollbar,
.focus-window-body::-webkit-scrollbar,
.bs-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}
/* Collapsing a fixed box has to give the height back, or the header floats in
   an empty frame. */
.best-next-action-widget.bna-collapsed,
.twin-neva-widget.collapsed,
.widget--email.is-collapsed,
.estimate-check-widget.collapsed,
.overwhelm-sos-widget.collapsed,
.now-learning-widget.collapsed,
.interruption-shield-widget.is-collapsed,
.widget--email.collapsed,
.focus-level-widget.collapsed,
.album-widget.collapsed,
.energy2-widget.collapsed,
.mirror-widget.collapsed,
.reset-widget.collapsed,
.mood-trends-widget.collapsed,
.mind-mirror-widget.collapsed,
.app-shelf-widget.collapsed,
.streaks-widget.collapsed,
.neva-widget.collapsed,
.planner-widget.collapsed,
.meeting-widget.collapsed,
.deadlines-widget.collapsed,
.flow-tracker-widget.collapsed,
.attention-widget.collapsed,
.wins-jar-widget.wj-collapsed,
.focus-window-widget.collapsed,
.stress-signal-widget.collapsed,
.decision-budget-widget.collapsed,
.team-pulse-widget.tp-collapsed,
.results-overview-widget.collapsed,
.recent-files-widget.collapsed {
  height: auto;
}
.today-widget {
  position: absolute;
  z-index: 5;
  width: var(--v-widget-width);
  height: var(--v-widget-height);
  max-width: 92vw;
  display: flex;
  flex-direction: column;
  padding: 24px 22px 22px 22px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: none;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
}
.today-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.focus-head-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.focus-icon {
  flex-shrink: 0;
  display: inline-flex;
}
.focus-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: rgb(255 255 255);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.focus-title {
  font-size: 15px;
  font-weight: 400;
  color: rgb(255 255 255 / 80%);
  margin-left: 0px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.focus-status-dot {
  flex-shrink: 0;
  margin-top: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: none;
}
.focus-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.today-head-left {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}
.today-icon {
  flex-shrink: 0;
  display: inline-flex;
}
.today-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: var(--text-primary);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.today-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
}
.today-status-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.65);
}
.today-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.focus-action {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  display: inline-flex;
  color: var(--text-muted);
  transition: color 0.15s ease;
}
.focus-action:hover {
  color: var(--text-secondary);
}
.focus-action[aria-label="Pin"] svg {
  transform: rotate(45deg);
}
.focus-action svg {
  width: 23px;
  height: 22px;
  fill: none;
  stroke: rgb(255 255 255);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.focus-session-widget .focus-action[aria-label="More"] svg {
  transform: rotate(90deg);
}
.focus-session-widget.collapsed {
  height: auto;
}
.focus-session-widget.collapsed .focus-body {
  display: none;
}
.focus-session-widget.collapsed [data-focus-toggle] svg {
  transform: rotate(-90deg);
}
.focus-body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.focus-task {
  margin-top: 22px;
  margin-right: 12px;
  font-size: 13.2px;
  font-weight: 400;
  color: rgb(255 255 255 / 62%);
  text-align: center;
  letter-spacing: 0.3px;
}
.focus-ring-panel {
  position: relative;
  display: grid;
  place-items: center;
  width: 200px;
  max-width: 70%;
  margin: 10px 0 4px;
}
.focus-ring {
  grid-area: 1 / 1;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}
.focus-ring-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.34);
  stroke-width: 1.3px;
}
.focus-ring-arc {
  fill: none;
  stroke: rgb(255 255 255);
  stroke-width: 2.2px;
  stroke-linecap: round;
  stroke-dasharray: 405.27;
  stroke-dashoffset: 8;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 4px rgba(255, 255, 255, 0.40));
  animation: focusRingFill 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes focusRingFill {
  from { stroke-dashoffset: 405.27; }
  to { stroke-dashoffset: 0; }
}
.focus-time {
  grid-area: 1 / 1;
  font-size: 50px;
  font-weight: 300;
  letter-spacing: 0.01em;
  color: rgb(255 255 255 / 74%);
  line-height: 1;
  pointer-events: none;
}
.focus-step {
  margin-top: 0px;
  font-size: 12.8px;
  color: rgb(255 255 255 / 92%);
  text-align: center;
}
.focus-step-sep {
  color: var(--text-muted);
  margin: 0 2px;
}
.focus-dots {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
}
.focus-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid #ffffff7a;
}
.focus-dot.active {
  background: #ffffff;
}
.focus-distractions {
  margin-top: 12px;
  font-size: 11.4px;
  letter-spacing: 0.5px;
  color: rgb(255 255 255 / 42%);
}
.focus-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  margin-top: 18px;
  margin-right: 16px;
}
.focus-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 4px;
  font-size: 12.5px;
  color: rgb(255 255 255 / 90%);
  transition: color 0.15s ease;
}
.focus-control:hover {
  color: var(--text-primary);
}
.focus-control svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.focus-control-divider {
  width: 1px;
  height: 30px;
  background: rgba(255, 255, 255, 0.1);
}
.focus-muted {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-top: 0px;
  padding-top: 16px;
  padding-left: 2px;
  padding-right: 12px;
  width: 100%;
  justify-content: center;
  font-size: 12px;
  color: rgb(255 255 255 / 82%);
  letter-spacing: 0.1px;
}
.focus-muted-spark {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: rgb(235 235 235);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.focus-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: 0.2px;
  color: rgba(255, 255, 255, 0.52);
  margin-left: 8px;
  margin-top: auto;
}
.focus-log {
  width: 100%;
  margin-top: 20px;
  padding-right: 12px;
}
.focus-log-divider {
  display: block;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}
.focus-log-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}
.focus-log-count {
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: rgb(255 255 255 / 38%);
}
.focus-log-label {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 50%);
}
.focus-log-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
}
.focus-log-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
}
.focus-log-task {
  font-size: 12.8px;
  color: rgb(255 255 255 / 88%);
}
.focus-log-time {
  margin-top: 2px;
  font-size: 11.4px;
  letter-spacing: 0.5px;
  color: rgb(255 255 255 / 42%);
}
.focus-log-length {
  font-size: 12.8px;
  color: rgb(255 255 255 / 62%);
  text-align: right;
}
.today-action {
  background: none;
  border: none;
  cursor: pointer;
  padding: 7px;
  display: inline-flex;
  color: var(--text-primary);
  transition: opacity 0.15s ease;
}
.today-action:hover {
  opacity: 0.7;
}
.today-action svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.today-action-pin svg {
  transform: rotate(40deg);
}
.today-body {
  display: flex;
  flex-direction: column;
  margin-top: 25px;
}
.today-widget.collapsed,
.neura-signals-widget.collapsed {
  height: auto;
}
.today-widget.collapsed .today-body {
  display: none;
}
.today-widget.collapsed [data-today-toggle] svg {
  transform: rotate(-90deg);
}
.today-date {
  font-size: 22px;
  font-weight: 350;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.today-subtitle {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}
.today-action-card {
  margin-top: 20px;
  padding: 18px 20px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.025) 100%);
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  border: none;
  box-shadow: none;
}
.today-action-label {
  font-size: 14px;
  color: var(--text-muted);
}
.today-action-task {
  margin-top: 10px;
  font-size: 21px;
  font-weight: 350;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.today-action-detail {
  margin-top: 8px;
  font-size: 15px;
  color: var(--text-secondary);
}
.today-start-focus {
  margin-top: 24px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
  align-self: flex-start;
  font-size: 14px;
  font-weight: 490;
  color: var(--text-primary);
  font-family: inherit;
  transition: opacity 0.15s ease;
}
.today-start-focus:hover {
  opacity: 0.75;
}
.today-start-focus svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translateY(1.5px);
}
.today-glance-label {
  margin-top: 22px;
  font-size: 13px;
  color: var(--text-muted);
}
.today-glance {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.today-glance-row {
  display: grid;
  grid-template-columns: 22px 100px 1fr auto;
  align-items: center;
  gap: 12px;
}
.today-glance-icon {
  display: inline-flex;
}
.today-glance-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: var(--text-primary);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.today-glance-name {
  font-size: 14px;
  color: var(--text-primary);
}
.today-glance-value {
  font-size: 14px;
  color: var(--text-primary);
}
.today-glance-time {
  font-size: 13px;
  color: var(--text-muted);
  text-align: right;
  white-space: nowrap;
}
.today-progress {
  margin-top: 24px;
  margin-bottom: 2px;
}
.today-progress-label {
  font-size: 14px;
  color: var(--text-muted);
}
.today-progress-track {
  margin-top: 14px;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.today-progress-fill {
  display: block;
  width: 33.33%;
  height: 100%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
}
.today-insight {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--text-primary);
}
.today-insight-spark {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin-top: 0;
  fill: none;
  stroke: var(--text-primary);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.today-footer {
  margin-top: 20px;
  font-size: 12px;
  color: var(--text-muted);
}

/* ===================== ATTENTION WIDGET ===================== */
.attention-widget {
  position: absolute;
  z-index: 5;
  zoom: 0.95;
  width: calc(var(--h-widget-width) / 0.95);
  height: calc(var(--h-widget-height) / 0.95);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 26px 22px 22px 22px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: none;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
}
.attention-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.attention-head-left {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}
.attention-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.attention-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: var(--text-primary);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.attention-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
}
.attention-status-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.65);
}
.attention-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.attention-action {
  background: none;
  border: none;
  cursor: pointer;
  padding: 7px;
  display: inline-flex;
  color: var(--text-primary);
  transition: opacity 0.15s ease;
}
.attention-action:hover {
  opacity: 0.7;
}
.attention-action svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.attention-action-pin svg {
  transform: rotate(40deg);
}
.attention-body {
  display: flex;
  flex-direction: column;
  margin-top: 22px;
}
.attention-body > * {
  flex-shrink: 0;
}
.attention-widget.collapsed .attention-body {
  display: none;
}
.attention-widget.collapsed [data-attention-toggle] svg {
  transform: rotate(-90deg);
}
.attention-chart {
  position: relative;
}
.attention-annotation {
  position: absolute;
  top: 20px;
  transform: translateX(-50%);
  font-size: 14px;
  margin-left: 5px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.attention-now {
  position: absolute;
  top: 25px;
  transform: translateX(-50%);
  z-index: 2;
}
.attention-now-tag {
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}
.attention-svg {
  display: block;
  width: 100%;
  height: 168px;
}
.attention-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.attention-line-bright {
  stroke: #ffffff;
  stroke-width: 0.85;
  filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 1)) drop-shadow(0 0 3px rgba(255, 255, 255, 0.75)) drop-shadow(0 2px 4px rgba(255, 255, 255, 0.65)) drop-shadow(0 4px 7px rgba(255, 255, 255, 0.32));
}
.attention-line-plateau {
  stroke-width: 1.6;
  filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 1)) drop-shadow(0 0 3px rgba(255, 255, 255, 1)) drop-shadow(0 0 5px rgba(255, 255, 255, 0.85)) drop-shadow(0 3px 6px rgba(255, 255, 255, 0.8)) drop-shadow(0 6px 10px rgba(255, 255, 255, 0.45));
}
.attention-line-gray {
  stroke: #2F3841;
  stroke-width: 0.45;
  filter: drop-shadow(0 3px 5px rgba(170, 180, 190, 0.12));
}
.attention-aurora {
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.16;
  filter: blur(9px);
}
.attention-dots {
  display: none;
}
.attention-reflection {
  display: none;
}
.attention-tick {
  stroke: rgba(255, 255, 255, 0.4);
  stroke-width: 0.8;
  stroke-linecap: round;
}
.attention-now-line {
  stroke: url(#attnNowFade);
  stroke-width: 1.4;
  opacity: 1;
}
.attention-now-dot {
  fill: var(--accent-green);
  filter: drop-shadow(0 0 6px rgba(74, 222, 128, 0.85)) drop-shadow(0 0 12px rgba(74, 222, 128, 0.4));
}
.attention-x-labels {
  display: flex;
  justify-content: space-between;
  margin-top: -47px;
  padding: 0 85px 0 0;
  font-size: 16px;
  font-weight: 300;
  color: var(--text-primary);
}
.attention-ranks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 22px;
}
.attention-rank-row {
  display: grid;
  grid-template-columns: 8px 150px 32px 1fr;
  align-items: center;
  gap: 14px;
  margin-left: 5px;
}
.attention-rank-num {
  font-size: 15px;
  color: var(--text-muted);
}
.attention-rank-name {
  font-size: 14px;
  color: var(--text-primary);
}
.attention-rank-value {
  font-size: 14px;
  color: var(--text-secondary);
  text-align: right;
}
.attention-rank-bar {
  height: 5px;
  border-radius: 999px;
  background: none;
  overflow: hidden;
  max-width: 140px;
}
.attention-rank-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
}
.attention-rank-row:nth-child(1) .attention-rank-fill,
.attention-rank-row:nth-child(2) .attention-rank-fill {
  background: #8C9093;
}
.attention-rank-row:nth-child(3) .attention-rank-fill,
.attention-rank-row:nth-child(4) .attention-rank-fill {
  background: #64686C;
}
.attention-summary {
  margin-top: 24px;
  font-size: 15px;
  color: var(--text-muted);
}
.attention-insight-main {
  margin-top: 12px;
  font-size: 17px;
  color: var(--text-primary);
}
.attention-recommend {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 1;
  font-size: 17px;
  color: var(--text-primary);
}
.attention-recommend span {
  position: relative;
  top: -4px;
}
.attention-recommend-spark {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  fill: none;
  stroke: var(--text-primary);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.attention-footer {
  margin-top: 18px;
  font-size: 14px;
  color: var(--text-muted);
}

/* ===================== THIS WEEK WIDGET ===================== */
.this-week-widget {
  position: absolute;
  z-index: 5;
  width: var(--sq-widget-width);
  height: var(--sq-widget-height);
  max-width: 92vw;
  display: flex;
  flex-direction: column;
  padding: 22px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: none;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
}
.week-icon svg {
  width: 44px;
  height: 44px;
  stroke-width: 0.4;
  transform: translate(-2px, -2px);
}
.this-week-widget .today-title {
  font-size: 18px;
}
.this-week-widget .today-actions {
  gap: 2px;
}
.week-icon svg rect {
  fill: currentColor;
  stroke: none;
}
.week-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin-top: 24px;
}
.this-week-widget.collapsed {
  height: auto;
}
.this-week-widget.collapsed .week-body {
  display: none;
}
.this-week-widget.collapsed [data-week-toggle] svg {
  transform: rotate(-90deg);
}

/* chart */
.week-chart {
  position: relative;
  flex: 1;
  min-height: 172px;
  padding-left: 44px;
  padding-right: 10px;
}
.week-threshold-label {
  position: absolute;
  left: 0;
  bottom: 54%;
  transform: translateY(50%);
  font-size: 11px;
  line-height: 1.25;
  color: rgb(255 255 255 / 51%);
  letter-spacing: 0.1px;
}
.week-threshold {
  width: 93%;
  position: absolute;
  left: 44px;
  right: 0;
  bottom: 52%;
  height: 1px;
  border-top: none;
  background: repeating-linear-gradient(
    to right,
    rgba(255, 255, 255, 0.28) 0 5px,
    transparent 5px 10px
  );
}
.week-baseline {
  width: 90%;
  position: absolute;
  left: 44px;
  right: 0;
  bottom: 0;
  height: 1px;
  border: 0.5px solid #494b4b;
  background: none;
}
.week-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  height: 100%;
}
.week-bar-col {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
.week-bar-dot {
  width: 6px;
  height: 6px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
}
.week-bar {
  position: relative;
  width: 100%;
  max-width: 23px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(to top, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 24%) 50%, rgb(255 255 255 / 85%) 100%);
}
/* soft outer glow concentrated at the top of the bar only */
.week-bar::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -6px;
  transform: translateX(-50%);
  width: 200%;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 70%);
  filter: blur(5px);
  opacity: 0.45;
  pointer-events: none;
}
/* gradient glass border: masked overlay so only a ~1px edge remains */
.week-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 0.8px;
  background: linear-gradient(to bottom, rgb(255 255 255 / 0%) 0%, rgba(255, 255, 255, 0.34) 30%, rgba(255, 255, 255, 0.18) 65%, rgba(255, 255, 255, 0.04) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
/* Mon < Tue < Wed increasing glow; Wed brightest with halo */
.week-bar-col:nth-child(1) .week-bar::before { opacity: 0.4; }
.week-bar-col:nth-child(2) .week-bar::before { opacity: 0.72; }
.week-bar-col:nth-child(3) .week-bar::before { opacity: 1; height: 56px; width: 230%; }
.week-bar-col:nth-child(4) .week-bar::before { opacity: 0.5; }
.week-bar-col:nth-child(5) .week-bar::before,
.week-bar-col:nth-child(6) .week-bar::before,
.week-bar-col:nth-child(7) .week-bar::before { opacity: 0.28; }
/* Wed top slightly brighter to read as the peak */
.week-bar-col:nth-child(2) .week-bar {
  background: linear-gradient(to top, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 24%) 50%, rgb(255 255 255 / 85%) 100%);
}
.week-bar-col:nth-child(3) .week-bar {
  background: linear-gradient(to top, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 24%) 50%, rgba(255, 255, 255, 85%) 100%);
}
.week-bar-col:nth-child(4) .week-bar {
  background: linear-gradient(to top, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 24%) 50%, rgb(255 255 255 / 85%) 100%);
}
.week-bar-col:nth-child(5) .week-bar {
  background: linear-gradient(to top, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 24%) 50%, rgb(255 255 255 / 70%) 100%);
  height: 47%;
}
.week-bar-col:nth-child(6) .week-bar {
  background: linear-gradient(to top, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 15%) 50%, rgb(255 255 255 / 32%) 100%);
}
.week-bar-col:nth-child(7) .week-bar {
  background: linear-gradient(to top, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 24%) 60%, rgb(255 255 255 / 49%) 100%);
}
.week-bar-col.active .week-bar-dot {
  box-shadow: 0 0 9px rgba(255, 255, 255, 1);
}
.week-day-labels {
  display: flex;
  justify-content: space-between;
  gap: 0px;
  margin-top: 12px;
  padding-left: 42px;
  padding-right: 6px;
}
.week-day-labels span {
  flex: 1;
  text-align: center;
  font-size: 12.4px;
  color: rgb(255 255 255 / 60%);
}
.week-day-labels span.active {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 500;
}

/* metrics row */
.week-metrics {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 96%;
  margin-top: 26px;
  padding-left: 20px;
  padding-right: 16px;
}
.week-metric {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.week-metric-icon svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: none;
  stroke: rgb(255 255 255 / 82%);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.week-metric-text {
  font-size: 16px;
  font-weight: 400;
  color: rgb(255 255 255 / 74%);
  white-space: nowrap;
}
.week-metric-text b {
  font-weight: 500;
  color: rgb(255 255 255);
}
.week-metric-divider {
  width: 1px;
  height: 28px;
  background: rgb(255 255 255 / 38%);
  margin: 0px;
}

/* insight list */
.week-insights {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 22px;
  padding-left: 12px;
}
.week-insight-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: rgb(255 255 255);
}
.week-insight-icon svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: none;
  stroke: rgb(255 255 255 / 90%);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.week-insight-icon.circle {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.week-insight-icon.circle svg {
  width: 18px;
  height: 18px;
}
.week-insight-icon.sparkle svg {
  width: 34px;
  height: 34px;
}
.week-insight-row b {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
}
.week-insight-sub {
  color: rgb(255 255 255 / 85%);
}
.week-footer {
  margin-top: 20px;
  font-size: 13px;
  letter-spacing: 0.2px;
  color: rgb(255 255 255 / 51%);
  margin-left: 18px;
}

/* ===================== NEURA SIGNALS WIDGET ===================== */
.neura-signals-widget {
  position: absolute;
  z-index: 5;
  width: var(--v-widget-width);
  height: var(--v-widget-height);
  max-width: 92vw;
  display: flex;
  flex-direction: column;
  padding: 22px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: none;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
}
.neura-icon {
  flex-shrink: 0;
  display: inline-flex;
}
.neura-icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.88);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.25));
}
.neura-signals-widget .today-title {
  font-size: 17px;
  font-weight: 500;
}
.neura-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin-top: 20px;
}
.neura-signals-widget.collapsed .neura-body {
  display: none;
}
.neura-signals-widget.collapsed [data-neura-toggle] svg {
  transform: rotate(-90deg);
}

/* sub-status line */
.neura-substatus {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgb(255 255 255 / 42%);
}
.neura-radar-icon svg {
  width: 24px;
  height: 24px;
  display: block;
  fill: none;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* featured signal card */
.neura-featured {
  display: flex;
  gap: 16px;
  margin-top: 18px;
  padding: 20px;
  border-radius: 16px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.neura-featured-icon {
  flex-shrink: 0;
}
.neura-featured-icon svg {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.88);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.25));
}
.neura-featured-main {
  flex: 1;
  min-width: 0;
}
.neura-featured-title {
  font-size: 20px;
  font-weight: 500;
  color: rgb(255 255 255 / 95%);
  letter-spacing: -0.01em;
}
.neura-featured-text {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.45;
  color: rgb(255 255 255 / 60%);
}
.neura-featured-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
}
.neura-featured-meta {
  font-size: 13px;
  color: rgb(255 255 255 / 45%);
}
.neura-cta {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: rgb(255 255 255 / 92%);
  white-space: nowrap;
  transition: opacity 0.15s ease;
}
.neura-cta:hover {
  opacity: 0.7;
}

/* lower signal rows */
.neura-rows {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
}
.neura-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.neura-row:last-child {
  border-bottom: none;
}
.neura-row-icon {
  flex-shrink: 0;
  display: inline-flex;
}
.neura-row-icon svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.72);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.18));
}
.neura-row-main {
  flex: 1;
  min-width: 0;
}
.neura-row-title {
  font-size: 15px;
  font-weight: 400;
  color: rgb(255 255 255 / 92%);
}
.neura-row-sub {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.4;
  color: rgb(255 255 255 / 42%);
}
.neura-row-tag {
  color: rgb(255 255 255 / 55%);
}
.neura-row-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.neura-row-cta {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: rgb(255 255 255 / 88%);
  white-space: nowrap;
  transition: opacity 0.15s ease;
}
.neura-row-cta:hover {
  opacity: 0.7;
}
.neura-util {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  display: inline-flex;
  color: rgba(255, 255, 255, 0.48);
  transition: color 0.15s ease;
}
.neura-util:hover {
  color: rgb(255 255 255 / 75%);
}
.neura-util svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.neura-footer {
  margin-top: auto;
  padding-top: 18px;
  font-size: 12px;
  letter-spacing: 0.2px;
  color: rgb(255 255 255 / 40%);
}

/* ---- Neura Signals exact overrides ---- */
.neura-signals-widget .today-head-left {
  align-items: center;
}
.neura-icon svg {
  width: 30px;
  height: 30px;
  stroke-width: 1;
  transform: translate(-1px, 3px);
}
.neura-signals-widget .today-title {
  font-size: 18px;
  position: relative;
  top: 0px;
}
.neura-signals-widget .today-status-dot {
  margin-top: 16px;
}
.neura-signals-widget .today-action svg {
  width: 23px;
  height: 23px;
  stroke: rgb(255 255 255 / 70%);
}
.neura-radar-icon svg {
  width: 54px;
  height: 50px;
  stroke: rgb(255 255 255 / 22%);
  stroke-width: 0.4;
}
.neura-substatus {
  font-size: 12px;
  margin: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.neura-substatus h3,
.neura-substatus p {
  margin: 0;
  padding: 0;
}
.neura-watching-text {
  font-size: 22px;
  font-weight: 350;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.neura-signals-count {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: inherit;
  letter-spacing: inherit;
  margin-top: 8px !important;
}
.neura-featured {
  border-radius: 8px;
}
.neura-featured-icon svg {
  width: 40px;
  height: 40px;
  stroke: rgba(255, 255, 255, 0.88);
  stroke-width: 0.5;
}
.neura-featured-title {
  font-size: 20px;
  font-weight: 400;
  color: rgb(255 255 255 / 90%);
  letter-spacing: 0em;
}
.neura-featured-text {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.45;
  color: rgb(255 255 255 / 40%);
}
.neura-featured-meta {
  color: rgb(255 255 255 / 40%);
}
.neura-cta {
  color: rgb(255 255 255 / 95%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  letter-spacing: 0.4px;
}
.neura-cta-arrow {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translateY(1px);
}

/* ---- Neura Signals exact overrides (batch 2) ---- */
.neura-signals-widget {
  padding: 24px 22px 22px 22px;
}
.neura-rows {
  padding: 0px 8px;
}
.neura-row {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 16px 0px;
  border-bottom: none;
}
.neura-row-title {
  color: rgb(255 255 255);
}
.neura-row-sub {
  color: rgb(255 255 255 / 40%);
}
.neura-row-cta {
  color: rgb(255 255 255);
}
.neura-util svg {
  width: 20px;
  height: 20px;
}
.neura-row-icon svg {
  stroke-width: 0.5px;
  transform: translate(0px, -15px);
  stroke: rgb(255 255 255 / 85%);
}
.neura-footer {
  color: rgb(255 255 255 / 40%);
  font-size: 10px;
  text-align: center;
}
.neura-sub-line {
  display: block;
}

/* featured card keeps only structural layout; card visuals move to .is-selected */
.neura-featured {
  display: flex;
  gap: 16px;
  margin-top: 18px;
}

/* selectable signal options */
.neura-signal-option {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition-property: unset;
  transition-duration: 0ms;
  transition-timing-function: unset;
  will-change: unset;
}
.neura-signal-option:active {
  transform: scale(0.995);
}
.neura-signal-option:not(.is-selected) {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0);
  box-shadow: none;
  padding: 16px 0px;
  border-radius: 0;
  min-height: 58px;
}
.neura-signal-option .neura-row-title,
.neura-signal-option .neura-featured-title,
.neura-signal-option .neura-row-sub,
.neura-signal-option .neura-featured-text,
.neura-signal-option .neura-featured-meta,
.neura-signal-option .neura-row-meta,
.neura-signal-option .neura-cta {
  transition-property: unset;
  transition-duration: 0ms;
  transition-timing-function: unset;
}
.neura-signal-option svg,
.neura-signal-option .neura-row-icon,
.neura-signal-option .neura-featured-icon {
  transition: none;
}
.neura-signal-option::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.2px;
  background: radial-gradient(18% 40% at 0% 0%, rgb(255 255 255 / 81%) 0%, rgba(255, 255, 255, 0) 42%), radial-gradient(18% 35% at 100% 100%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 46%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 520ms cubic-bezier(0.16, 1, 0.3, 1);
}
.neura-signal-option:not(.is-selected) .neura-row-title,
.neura-signal-option:not(.is-selected) .neura-featured-title {
  font-size: 16px;
  font-weight: 400;
  color: rgb(255 255 255);
}
.neura-signal-option:not(.is-selected) .neura-row-sub,
.neura-signal-option:not(.is-selected) .neura-featured-text,
.neura-signal-option:not(.is-selected) .neura-featured-meta {
  font-size: 11px;
  line-height: 1.45;
  color: rgb(255 255 255 / 40%);
}
.neura-signal-option.is-selected {
  isolation: isolate;
  display: flex;
  gap: 16px;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35), inset 0 0px 0 rgba(255, 255, 255, 0.06);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.025) 100%);
  min-height: 112px;
}
.neura-signal-option.is-selected::before {
  opacity: 1;
}
.neura-signal-option.is-selected::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(60% 60% at 2% 0%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(65% 65% at 100% 100%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 62%);
  pointer-events: none;
  z-index: 0;
}
.neura-signal-option.is-selected .neura-row-title,
.neura-signal-option.is-selected .neura-featured-title {
  font-size: 20px;
  font-weight: 400;
  color: rgb(255 255 255 / 90%);
  letter-spacing: 0em;
}
.neura-signal-option.is-selected .neura-row-sub,
.neura-signal-option.is-selected .neura-featured-text {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.45;
  color: rgb(255 255 255 / 40%);
}
.neura-signal-option.is-selected .neura-featured-meta,
.neura-signal-option.is-selected .neura-row-meta {
  color: rgb(255 255 255 / 40%);
}
.neura-signal-option.is-selected > * {
  position: relative;
  z-index: 2;
}
.neura-signal-option.is-selected[data-signal="focus"] .neura-row-title {
  white-space: normal;
  max-width: none;
}
.neura-signal-option.is-selected .neura-row-main {
  flex: 1 1 auto;
  min-width: 0;
}
.neura-signal-option.is-selected .neura-row-actions {
  flex-shrink: 0;
}
.neura-signal-option[data-signal="esb"]:not(.is-selected) {
  margin-left: 12px;
}
.neura-signal-option[data-signal="esb"]:not(.is-selected) .neura-cta {
  margin-right: 12px;
}
.neura-signal-option[data-signal="focus"].is-selected,
.neura-signal-option[data-signal="reza"].is-selected,
.neura-signal-option[data-signal="sharpest"].is-selected {
  min-width: 0;
  margin-left: -9px;
  margin-right: -9px;
}
.neura-signal-option[data-signal="focus"]:not(.is-selected),
.neura-signal-option[data-signal="reza"]:not(.is-selected),
.neura-signal-option[data-signal="sharpest"]:not(.is-selected) {
  min-width: 0;
  margin-left: 0;
}
.neura-signal-option[data-signal="focus"]:not(.is-selected) .neura-row-icon svg {
  transform: translate(0px, -2px);
}
.neura-signal-option[data-signal="sharpest"]:not(.is-selected) .neura-row-icon svg {
  transform: translate(0px, -5px);
}
.neura-signal-option[data-signal="focus"]:not(.is-selected) .neura-row-sub {
  white-space: nowrap;
  max-width: 160px;
  text-wrap: auto;
}

/* ===================== APP SHELF WIDGET ===================== */
.app-shelf-widget {
  position: absolute;
  z-index: 5;
  /* widget-level scale token: lifts the whole frame into the Calendar scale family */
  zoom: 1.2;
  width: calc(var(--h-widget-width) / 1.2);
  height: calc(var(--h-widget-height) / 1.2);
  max-width: 92vw;
  display: flex;
  flex-direction: column;
  padding: 20px 26px 20px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.16) 0%, rgba(16, 19, 18, 0.12) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.app-shelf-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 65%);
}
.app-shelf-icon svg {
  width: 35px;
  height: 35px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.88);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.25));
  transform: translate(-1.3px, 3px);
}
.app-shelf-widget .today-title {
  font-size: 16px;
  font-weight: 400;
}
.app-shelf-widget .today-action svg {
  stroke: rgb(255 255 255 / 70%);
}
.app-shelf-body {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  /* No scroll container: the 45px icon glow would be cut into a hard edge. */
  flex: 1;
  min-height: 0;
  justify-content: space-between;
}
.app-shelf-body > * {
  flex-shrink: 0;
}
.app-shelf-widget.collapsed .app-shelf-body {
  display: none;
}
.app-shelf-widget.collapsed [data-app-shelf-toggle] svg {
  transform: rotate(-90deg);
}
.app-shelf-eyebrow {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgb(255 255 255 / 45%);
  margin-top: 7px;
  margin-left: 4px;
}

/* app row */
.app-shelf-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-top: 26px;
  padding: 14px 0px 14px 0px;
}
.app-shelf-nav {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 4px;
}
.app-shelf-nav {
  pointer-events: auto;
  user-select: none;
  touch-action: manipulation;
}
.app-shelf-nav,
.app-shelf-nav * {
  -webkit-user-drag: none;
  user-drag: none;
}
.app-shelf-nav svg {
  width: 36px;
  height: 36px;
  position: relative;
  top: -30px;
  fill: none;
  stroke: rgb(255 255 255 / 45%);
  stroke-width: 0.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.app-shelf-item {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 29px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  transition: transform 220ms ease;
  -webkit-box-reflect: below -45px linear-gradient(to bottom, rgb(0 0 0 / 0%) 8%, rgb(255 255 255 / 22%) 80%, rgb(0 0 0 / 0%) 20%);
}
.app-shelf-app-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  transition: transform 220ms ease, filter 220ms ease;
}
.app-shelf-app-icon svg {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: rgb(255 255 255 / 80%);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translate(0px, 0px) scale(1);
  transform-origin: center center;
  transition: transform 260ms ease, stroke 220ms ease, filter 260ms ease;
}
.app-shelf-label {
  font-size: 10.5px;
  font-weight: 400;
  color: rgb(255 255 255 / 50%);
  transition: color 220ms ease;
}
.app-shelf-item:focus-visible {
  outline: none;
}
.app-shelf-item:focus-visible .app-shelf-app-icon {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
  border-radius: 10px;
}
/* selected app */
.app-shelf-item.is-selected .app-shelf-app-icon {
  transform: translateY(-2px);
}
.app-shelf-item.is-selected .app-shelf-app-icon svg {
  stroke: rgba(255, 255, 255, 0.98);
  filter: drop-shadow(0 0 0px rgba(255, 255, 255, 0.50)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.75)) drop-shadow(0 0 16px rgba(255, 255, 255, 0.55)) drop-shadow(0 0 45px rgba(255, 255, 255, 0.9));
  transform: translate(0px, -5px) scale(1.5);
  transform-origin: center center;
  will-change: transform;
}
.app-shelf-item.is-selected .app-shelf-label {
  color: rgb(255 255 255 / 95%);
}
/* VS Code uses a filled logo mark */
.app-shelf-item[data-app="vscode"] .app-shelf-app-icon svg {
  fill: none;
  stroke: rgb(255 255 255 / 80%);
}
.app-shelf-item[data-app="vscode"].is-selected .app-shelf-app-icon svg {
  fill: rgb(255 255 255 / 0%);
  stroke: rgb(255 255 255);
  filter: drop-shadow(0 0 0px rgba(255, 255, 255, 0.50)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.75)) drop-shadow(0 0 16px rgba(255, 255, 255, 0.55)) drop-shadow(0 0 45px rgba(255, 255, 255, 0.9));
}
/* Notion uses a filled logo mark */
.app-shelf-item[data-app="notion"] .app-shelf-app-icon svg {
  fill: rgba(255, 255, 255, 0.45);
  stroke: none;
}
.app-shelf-item[data-app="notion"].is-selected .app-shelf-app-icon svg {
  fill: rgba(255, 255, 255, 0.98);
  filter: drop-shadow(0 0 0px rgba(255, 255, 255, 0.50)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.75)) drop-shadow(0 0 16px rgba(255, 255, 255, 0.55)) drop-shadow(0 0 45px rgba(255, 255, 255, 0.9));
}
/* Figma uses a stroke-based sketch mark on a 400x400 viewBox */
.app-shelf-item[data-app="figma"] .app-shelf-app-icon svg {
  fill: none;
  stroke: rgb(255 255 255 / 80%);
  stroke-width: 20px;
}
.app-shelf-item[data-app="figma"].is-selected .app-shelf-app-icon svg {
  stroke: rgba(255, 255, 255, 0.98);
  filter: drop-shadow(0 0 0px rgba(255, 255, 255, 0.50)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.75)) drop-shadow(0 0 16px rgba(255, 255, 255, 0.55)) drop-shadow(0 0 45px rgba(255, 255, 255, 0.9));
}
/* Slack uses a filled logo mark */
.app-shelf-item[data-app="slack"] .app-shelf-app-icon svg {
  fill: rgb(255 255 255 / 80%);
  stroke: none;
}
.app-shelf-item[data-app="slack"].is-selected .app-shelf-app-icon svg {
  fill: rgba(255, 255, 255, 0.98);
  filter: drop-shadow(0 0 0px rgba(255, 255, 255, 0.50)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.75)) drop-shadow(0 0 16px rgba(255, 255, 255, 0.55)) drop-shadow(0 0 45px rgba(255, 255, 255, 0.9));
}
/* Facebook uses a filled logo mark */
.app-shelf-item[data-app="facebook"] .app-shelf-app-icon svg {
  fill: rgb(255 255 255 / 80%);
  stroke: none;
}
.app-shelf-item[data-app="facebook"].is-selected .app-shelf-app-icon svg {
  fill: rgba(255, 255, 255, 0.98);
  filter: drop-shadow(0 0 0px rgba(255, 255, 255, 0.50)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.75)) drop-shadow(0 0 16px rgba(255, 255, 255, 0.55)) drop-shadow(0 0 45px rgba(255, 255, 255, 0.9));
}
/* luminous selection beam */
.app-shelf-beam {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 42px;
  height: 1px;
  background: linear-gradient(to right, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 89%) 20%, rgb(255 255 255 / 61%) 80%, rgb(255 255 255 / 5%) 100%);
  pointer-events: none;
  bottom: 46px;
}
.app-shelf-beam::before {
  content: "";
  position: absolute;
  left: var(--beam-x, 50%);
  bottom: 0;
  width: 100px;
  height: 1.8px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: radial-gradient(closest-side, rgb(255 255 255) 0%, rgb(255 255 255) 45%, rgb(255 255 255 / 43%) 100%);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.6), 0 0 26px rgb(255 255 255 / 45%);
  transition: left 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.app-shelf-beam::after {
  content: "";
  position: absolute;
  left: var(--beam-x, 50%);
  bottom: -18px;
  width: 64px;
  height: 114px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgb(255 255 255 / 37%) 0%, rgb(255 255 255 / 0%) 100%);
  pointer-events: none;
  filter: blur(10px);
  transition: left 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* assistant message */
.app-shelf-message {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 42px;
}
.app-shelf-message-icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: rgb(255 255 255);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.2));
}
.app-shelf-message-text {
  font-size: 15px;
  font-weight: 400;
  color: rgb(255 255 255);
  margin-top: 2px;
}

/* footer */
.app-shelf-footer {
  margin-top: 22px;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: rgb(255 255 255 / 45%);
  margin-left: 8px;
  margin-bottom: 3px;
}

/* ===================== PROGRESS / ANALYSE WIDGET ===================== */
.progress-widget {
  position: absolute;
  z-index: 5;
  width: var(--sq-widget-width);
  height: var(--sq-widget-height);
  max-width: 94vw;
  --progress-hline-stroke: rgb(255 255 255 / 50%);
  display: flex;
  flex-direction: column;
  padding: 22px 26px 20px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.16) 0%, rgba(16, 19, 18, 0.12) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: none;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.progress-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.28);
}
.progress-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translate(1px, 0px);
}
.progress-widget .today-title {
  font-size: 18px;
  font-weight: 400;
}
.progress-dot {
  background: rgba(255, 255, 255, 0.4);
  box-shadow: none;
}
.progress-widget .today-action svg {
  stroke: rgb(255 255 255 / 70%);
}
.progress-body {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
}
.progress-widget.collapsed {
  height: auto;
}
.progress-widget.collapsed .progress-body {
  display: none;
}
.progress-widget.collapsed [data-progress-toggle] svg {
  transform: rotate(-90deg);
}
.progress-context {
  font-size: 12px;
  color: rgb(255 255 255 / 42%);
  letter-spacing: 0.2px;
}
.progress-kpi {
  margin-top: 10px;
}
.progress-kpi-value {
  font-size: 58px;
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgb(255 255 255 / 95%);
}
.progress-kpi-sub {
  margin-top: 8px;
  font-size: 12px;
  color: rgb(255 255 255 / 45%);
}

/* woven visualization */
.progress-weave {
  position: relative;
  margin-top: 10px;
}
.progress-labels {
  position: relative;
  height: 26px;
}
.progress-label {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 120px;
  text-align: center;
  font-size: 9.5px;
  line-height: 1.35;
  color: rgb(255 255 255 / 42%);
  letter-spacing: 0px;
}
.progress-label::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: 28px;
  background: linear-gradient(to bottom, rgb(255 255 255 / 14%), rgb(255 255 255));
}
.progress-weave-svg {
  display: block;
  width: 100%;
  height: 135px;
}
.weave-strand {
  fill: none;
  stroke: rgb(255 255 255);
  stroke-width: 0.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.weave-junction {
  stroke: rgb(255 255 255);
  stroke-width: 2.2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8));
  transform: translate(28.5px, 0px);
}
.weave-node {
  fill: rgb(255 255 255);
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 1)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 16px rgba(255, 255, 255, 0.55)) drop-shadow(0 0 44px rgba(255, 255, 255, 0.3));
}
.weave-vline {
  stroke: rgb(255 255 255 / 60%);
  stroke-width: 1;
}
.weave-cutout {
  fill: #161719;
  stroke: #ffffff;
  stroke-width: 0.9px;
}
.weave-body-asset {
  background: transparent;
  mix-blend-mode: screen;
  transform: translate(0px, 3.2px);
  clip-path: inset(11px 0px 3px 0px);
  opacity: 1;
  filter: brightness(1) contrast(1);
  pointer-events: none;
}
.weave-hline {
  stroke: var(--progress-hline-stroke);
  stroke-width: 0.7;
  fill: none;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 1)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 16px rgba(255, 255, 255, 0.55)) drop-shadow(0 0 44px rgba(255, 255, 255, 0.3));
}
.weave-vline-bright {
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 1)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 16px rgba(255, 255, 255, 0.55)) drop-shadow(0 0 44px rgba(255, 255, 255, 0.3));
  stroke-width: 1.6;
  stroke: rgb(255 255 255);
}

/* summary + insight text */
.progress-summary {
  display: flex;
  gap: 32px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.progress-summary-item {
  font-size: 13.5px;
  color: rgb(255 255 255 / 45%);
}
.progress-summary-item b {
  font-weight: 500;
  color: rgb(255 255 255 / 92%);
}
.progress-insight {
  margin-top: 16px;
  font-size: 13.5px;
  color: rgb(255 255 255 / 50%);
}
.progress-insight-muted {
  margin-top: 8px;
  color: rgb(255 255 255 / 50%);
}
.progress-narrative {
  margin-top: 22px;
  font-size: 16px;
  color: rgb(255 255 255 / 90%);
}
.progress-prompt {
  display: flex;
  align-items: flex-start;
  gap: 0px;
  margin-top: 10px;
}
.progress-prompt-icon svg {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.2));
  transform: translate(-9px, 4px);
}
.progress-prompt-text {
  font-size: 15px;
  color: rgb(255 255 255 / 88%);
  margin-top: 9px;
}
.progress-footer {
  margin-top: 5px;
  font-size: 12px;
  letter-spacing: 0.3px;
  color: rgb(255 255 255 / 38%);
  margin-left: 4px;
}

/* ===================== LEFT CONTROL PANEL ===================== */
.control-panel {
  position: absolute;
  top: 9.5%;
  left: 1.2%;
  bottom: 2.4%;
  width: 33%;
  min-width: 360px;
  max-width: 440px;
  z-index: 6;
  padding: 0;
  border-radius: 20px;
  background:
    linear-gradient(
      145deg,
      rgba(38, 42, 41, 0.6) 0%,
      rgba(26, 30, 29, 0.58) 100%
    );
  backdrop-filter: blur(26px) saturate(135%);
  -webkit-backdrop-filter: blur(26px) saturate(135%);
  border: none;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: grab;
  container-type: inline-size;
  container-name: panel;
}
.panel-scroll {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 5px;
  overflow-y: auto;
}
.panel-scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.panel-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.control-panel button,
.control-panel a,
.control-panel input {
  cursor: pointer;
}
.draggable-widget {
  cursor: grab;
  /* smoothly fade the drag-state border/glow in and out (never animates transform/position) */
  transition:
    opacity var(--tab-anim-duration) var(--tab-anim-ease),
    box-shadow 180ms ease,
    border-color 180ms ease,
    filter 180ms ease;
}
/* Shared main outer card style for every widget (matches Focus Level). Scoped to
   the section root only, so internal borders/shadows (buttons, inputs, chips,
   panels, dividers, sub-cards, etc.) are untouched.
   box-shadow is intentionally NOT !important so the lighter drag-state shadow
   (.draggable-widget.dragging, higher specificity) still wins while dragging. */
section.draggable-widget {
  border: none !important;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  border-radius: 20px;
}
/* Pinned widgets are locked in place (drag blocked in JS). */
.draggable-widget.is-pinned {
  cursor: default;
}
/* Widgets and the rows dragged inside them must never paint text selection.
   Editable controls opt back in. */
.draggable-widget {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.draggable-widget input,
.draggable-widget textarea,
.draggable-widget select,
.draggable-widget [contenteditable="true"],
.draggable-widget [role="textbox"] {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
/* Shared pin button: subtle tilt + premium transition (matches Focus Level) */
.draggable-widget [aria-label="Pin"] svg,
.draggable-widget [aria-label="Unpin"] svg {
  transform: rotate(40deg);
  transition: transform 0.25s ease, fill 0.15s ease, stroke 0.15s ease, color 0.15s ease;
}
/* Active pinned icon: white stroke + fill (no green) */
.draggable-widget.is-pinned [aria-label="Unpin"] {
  color: #fff;
  opacity: 1;
}
.draggable-widget.is-pinned [aria-label="Unpin"] svg {
  stroke: #fff;
  fill: #fff;
  transform: rotate(0deg);
}

/* Shared header action icon color: the three top-right actions (pin, collapse/
   expand chevron, three-dot more) stroke at 92% white on every widget. Applied
   to the icon SVG only; the three-dot icon is drawn as filled circles, so those
   get the same color via fill. Size / viewBox / paths / stroke-width / transform
   / opacity / hover (0.7) are untouched, and the pinned-active white fill keeps
   higher specificity (.is-pinned … above) so it still wins when pinned. */
.draggable-widget [aria-label="Pin"] svg,
.draggable-widget [aria-label="Unpin"] svg,
.draggable-widget [aria-label*="Collapse"] svg,
.draggable-widget [aria-label*="Expand"] svg,
.draggable-widget [aria-label="More"] svg {
  stroke: rgb(255 255 255 / 92%);
  width: 23px;
  height: 23px;
}
.draggable-widget [aria-label="More"] svg circle {
  fill: rgb(255 255 255 / 92%);
}

/* ===================== SHARED HEADER ACTION GAP ===================== */
/* The three top-right header actions (pin, collapse/expand chevron, three-dot
   more) sit 2px apart on every widget, matching Recovery. Only the header action
   GROUP container is targeted — body action rows (.neura-row-actions,
   .email-row__actions), the left header group, and
   the logo/title/dot area are untouched. display:flex + align-items:center keep
   the row layout; the 2px gap also applies while collapsed (same header bar) and
   never changes button/SVG size, transforms, or the collapsed bar dimensions. */
.draggable-widget .energy2-actions,
.draggable-widget .mirror-actions,
.draggable-widget .reset-actions,
.draggable-widget .focus-actions,
.draggable-widget .today-actions,
.draggable-widget .recovery-actions,
.draggable-widget .attention-actions,
.draggable-widget .bna-actions,
.draggable-widget .twin-neva-actions,
.draggable-widget .widget__header-right,
.draggable-widget .focus-level-actions,
.draggable-widget .calendar-actions,
.draggable-widget .hydration-actions,
.draggable-widget .selfcomp-actions,
.draggable-widget .results-overview-actions,
.draggable-widget .health-journal-actions,
.draggable-widget .thought-parking-actions,
.draggable-widget .why-actions,
.draggable-widget .cd-actions,
.draggable-widget .dl-actions,
.draggable-widget .rf-actions,
.draggable-widget .tp-actions,
.draggable-widget .sos-actions,
.draggable-widget .is-actions,
.draggable-widget .br-actions,
.draggable-widget .stk-actions,
.draggable-widget .sr-actions,
.draggable-widget .ts-actions,
.draggable-widget .rl-actions,
.draggable-widget .ml-actions,
.draggable-widget .fsc-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* ===================== SHARED HEADER LOGO WRAPPER ===================== */
/* Every widget's header logo/icon badge uses the Focus Level rounded-square
   wrapper (40x40, radius 12, glassy bg + subtle border). Only the wrapper is
   styled — the svg/img logo inside is untouched. !important normalizes the many
   scattered per-widget wrappers (some were circles). */
.draggable-widget .energy2-icon,
.draggable-widget .mirror-icon,
.draggable-widget .reset-icon,
.draggable-widget .focus-icon,
.draggable-widget .today-icon,
.draggable-widget .attention-icon,
.draggable-widget .neura-icon,
.draggable-widget .app-shelf-icon,
.draggable-widget .progress-icon,
.draggable-widget .bna-logo,
.draggable-widget .twin-neva-icon,
.draggable-widget .widget__icon-btn,
.draggable-widget .focus-level-icon,
.draggable-widget .calendar-icon,
.draggable-widget .hydration-icon,
.draggable-widget .selfcomp-icon,
.draggable-widget .logo,
.draggable-widget .recovery-icon,
.draggable-widget .results-overview-icon,
.draggable-widget .health-journal-icon,
.draggable-widget .neva-icon-badge,
.draggable-widget .meeting-icon-badge,
.draggable-widget .focus-window-badge,
.draggable-widget .flow-tracker-badge,
.draggable-widget .why-icon,
.draggable-widget .wj-glyph,
.draggable-widget .cd-logo,
.draggable-widget .dl-logo,
.draggable-widget .rf-logo,
.draggable-widget .tp-logo,
.draggable-widget .tp-icon,
.draggable-widget .sos-logo,
.draggable-widget .is-logo,
.draggable-widget .br-logo,
.draggable-widget .stk-logo,
.draggable-widget .sr-logo,
.draggable-widget .ts-logo,
.draggable-widget .fsc-logo {
  flex-shrink: 0 !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
}

/* ===================== SHARED HEADER STATUS DOT ===================== */
/* Every widget's header title dot (the small glowing dot beside the title) is
   normalized to the Recovery reference: 7px white circle with a soft 8px white
   glow. Scoped with .draggable-widget (present at runtime, same pattern as the
   shared logo wrapper) so specificity (0,2,0) overrides each widget's own
   colored/base dot rule. Only the header title dot classes are listed here —
   body/chart/list/decorative dots (row-dot, hour-dot, now-dot, week-bar-dot,
   live-dot, p-dot, delay-dot, focus-dot, etc.) are deliberately excluded.
   animation:none holds the glow static so it matches Recovery (which does not
   pulse); stateful overrides like .is-lowered / .cd-defend-on keep higher
   specificity and are preserved. */
.draggable-widget .energy2-status-dot,
.draggable-widget .mirror-status-dot,
.draggable-widget .reset-status-dot,
.draggable-widget .focus-status-dot,
.draggable-widget .today-status-dot,
.draggable-widget .attention-status-dot,
.draggable-widget .bna-status-dot,
.draggable-widget .twin-neva-status-dot,
.draggable-widget .widget__status-dot,
.draggable-widget .focus-level-status-dot,
.draggable-widget .calendar-status-dot,
.draggable-widget .hydration-status-dot,
.draggable-widget .selfcomp-status-dot,
.draggable-widget .recovery-status-dot,
.draggable-widget .results-overview-status-dot,
.draggable-widget .health-journal-status-dot,
.draggable-widget .ctxsw-status-dot,
.draggable-widget .tp-status-dot,
.draggable-widget .why-status-dot,
.draggable-widget .cd-status-dot,
.draggable-widget .dl-status-dot,
.draggable-widget .rf-status-dot,
.draggable-widget .sos-status-dot,
.draggable-widget .is-status-dot,
.draggable-widget .br-status-dot,
.draggable-widget .stk-status-dot,
.draggable-widget .sr-status-dot,
.draggable-widget .ts-status-dot,
.draggable-widget .fsc-status-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgb(255 255 255);
  box-shadow: 0 0 8px rgb(255 255 255 / 55%);
  opacity: 1;
  animation: none;
  /* Vertical alignment: center the dot with the title text (Hydration reference).
     align-self:center centers it even if a container uses a different align-items;
     margin-top:0 / transform:none clear per-widget vertical hacks (e.g. Neura
     Signals' margin-top:16px); the small top offset drops the dot from the flex
     line-box center to the text's optical center, matching what Hydration achieved
     via a title nudge (now removed there). Visual style above is unchanged. */
  align-self: center;
  margin-top: 0;
  transform: none;
  position: relative;
  top: 2px;
}

/* ===================== SHARED HEADER TITLE SIZE ===================== */
/* Expanded widgets: force the header title (the text beside the logo/status dot)
   to 20px, matching the collapsed-bar title rule so a widget's title size never
   jumps between states. Only header title elements are listed — body/content
   headings (.br-title, .neura-featured-title, .calendar-details-title,
   .selfcomp-message-title, .meeting-panel-title, .fsc-now-title), large stats,
   chart labels, buttons and footers are untouched. Scoped with .draggable-widget
   (specificity 0,2,0) to beat each widget's own single-class title rule. Header
   compensation transforms remain in place, so on-screen the 20px title still
   matches Recovery (e.g. Focus Level: 20px × zoom .9 × comp 1.1667 = Recovery's
   20px × zoom 1.05). Habit Garden (generic .title, custom widget) is excluded. */
.draggable-widget .energy2-title,
.draggable-widget .mirror-title,
.draggable-widget .reset-title,
.draggable-widget .focus-title,
.draggable-widget .today-title,
.draggable-widget .attention-title,
.draggable-widget .bna-title,
.draggable-widget .twin-neva-title,
.draggable-widget .widget__title,
.draggable-widget .focus-level-title,
.draggable-widget .calendar-title,
.draggable-widget .hydration-title,
.draggable-widget .selfcomp-title,
.draggable-widget .recovery-title,
.draggable-widget .results-overview-title,
.draggable-widget .health-journal-title,
.draggable-widget .thought-parking-title,
.draggable-widget .why-title,
.draggable-widget .cd-title,
.draggable-widget .dl-title,
.draggable-widget .rf-title,
.draggable-widget .tp-title,
.draggable-widget .sos-title,
.draggable-widget .is-title,
.draggable-widget .br-title-h,
.draggable-widget .stk-title-h,
.draggable-widget .sr-title-h,
.draggable-widget .ts-title-h,
.draggable-widget .fsc-title {
  font-size: 20px;
}

/* ===================== HEADER VISUAL-SCALE COMPENSATION ===================== */
/* Recovery (zoom 1.05) is the reference. Widgets with a lower root zoom render
   their (already-standardized) header elements smaller on screen. To match
   Recovery on screen we counter-scale the header by (1.05 / widgetZoom) — but
   this must be LAYOUT-NEUTRAL: `transform: scale()` (not `zoom`) is used so the
   scaled visuals never reserve extra box space, the header row keeps its original
   height, and the body does not move by even a pixel. Widget root zoom, body
   scale, and widget width/height are all untouched. The two header groups are
   scaled about their own outer edges (left group from the left, actions from the
   right) so the enlarged content grows toward the empty middle and never overflows
   or clips at the widget edges. Applied only to the most visually-divergent
   (low-zoom) widgets, scoped per widget.
   Focus Level: root zoom 0.9 → comp 1.05/0.9 = 1.1667. */
.focus-level-widget .focus-level-head-left {
  transform: scale(1.1667);
  transform-origin: left center;
}
.focus-level-widget .focus-level-actions {
  transform: scale(1.1667);
  transform-origin: right center;
}

/* --- Rest of the dashboard, same layout-neutral pattern (Recovery zoom 1.05 =
   reference; factor = 1.05 / widgetZoom). Only widgets whose header visibly
   diverges from Recovery are compensated: zoom <= 0.95, zoom >= 1.10, or the
   un-zoomed (1.0) widgets. Near-matching widgets (1.02 / 1.03 / 1.07 / 1.09)
   and exact-1.05 widgets (Time Sense, Calendar Defender) are left untouched.
   Habit Garden (custom card/header/collapse) and Wins Jar (flat header inside
   .wj-stage, no head-left/actions groups) are intentionally excluded. Each
   group is scoped by its widget root so shared class names (today-head-left,
   today-actions, tp-head-left) never leak across widgets. */

/* zoom 0.87 → 1.05/0.87 = 1.2069 */
.twin-neva-widget .twin-neva-head-left,
.hydration-widget .hydration-head-left,
.neva-widget .today-head-left {
  transform: scale(1.2069);
  transform-origin: left center;
}
.twin-neva-widget .twin-neva-actions,
.hydration-widget .hydration-actions,
.neva-widget .today-actions {
  transform: scale(1.2069);
  transform-origin: right center;
}

/* zoom 0.9 → 1.05/0.9 = 1.1667 (Focus Level already handled above) */
.mind-mirror-widget .today-head-left,
.flow-tracker-widget .today-head-left {
  transform: scale(1.1667);
  transform-origin: left center;
}
.mind-mirror-widget .today-actions,
.flow-tracker-widget .today-actions {
  transform: scale(1.1667);
  transform-origin: right center;
}

/* zoom 0.95 → 1.05/0.95 = 1.1053 */
.attention-widget .attention-head-left,
.decision-budget-widget .today-head-left,
.meeting-widget .today-head-left,
.why-card-widget .why-head-left {
  transform: scale(1.1053);
  transform-origin: left center;
}
.attention-widget .attention-actions,
.decision-budget-widget .today-actions,
.meeting-widget .today-actions,
.why-card-widget .why-actions {
  transform: scale(1.1053);
  transform-origin: right center;
}

/* zoom 1.0 (no root zoom) → 1.05/1.0 = 1.05 */
.mirror-widget .mirror-head-left,
.reset-widget .reset-head-left,
.focus-session-widget .focus-head-left,
.today-widget .today-head-left,
.neura-signals-widget .today-head-left,
.progress-widget .today-head-left,
.widget--email .widget__header-left,
.calendar-widget .calendar-head-left,
.selfcomp-widget .selfcomp-head-left,
.health-journal-widget .health-journal-header-left,
.context-switching-widget .today-head-left,
.thought-parking-widget .tp-head-left,
.focus-window-widget .today-head-left,
.sleep-rhythm-widget .sr-head-left,
.focus-soundscape-widget .fsc-head-left {
  transform: scale(1.05);
  transform-origin: left center;
}
.mirror-widget .mirror-actions,
.reset-widget .reset-actions,
.focus-session-widget .focus-actions,
.today-widget .today-actions,
.neura-signals-widget .today-actions,
.progress-widget .today-actions,
.widget--email .widget__header-right,
.calendar-widget .calendar-actions,
.selfcomp-widget .selfcomp-actions,
.health-journal-widget .health-journal-actions,
.context-switching-widget .today-actions,
.thought-parking-widget .thought-parking-actions,
.focus-window-widget .today-actions,
.sleep-rhythm-widget .sr-actions,
.focus-soundscape-widget .fsc-actions {
  transform: scale(1.05);
  transform-origin: right center;
}

/* zoom 1.1 → 1.05/1.1 = 0.9545 */
.results-overview-widget .results-overview-header-left,
.recent-files-widget .rf-head-left {
  transform: scale(0.9545);
  transform-origin: left center;
}
.results-overview-widget .results-overview-actions,
.recent-files-widget .rf-actions {
  transform: scale(0.9545);
  transform-origin: right center;
}

/* zoom 1.12 → 1.05/1.12 = 0.9375 */
.team-pulse-widget .tp-head-left {
  transform: scale(0.9375);
  transform-origin: left center;
}
.team-pulse-widget .tp-actions {
  transform: scale(0.9375);
  transform-origin: right center;
}

/* zoom 1.15 → 1.05/1.15 = 0.9130 */
.energy2-widget .energy2-head-left {
  transform: scale(0.913);
  transform-origin: left center;
}
.energy2-widget .energy2-actions {
  transform: scale(0.913);
  transform-origin: right center;
}

/* zoom 1.2 → 1.05/1.2 = 0.875 */
.app-shelf-widget .today-head-left,
.interruption-shield-widget .is-head-left,
.overwhelm-sos-widget .sos-head-left {
  transform: scale(0.875);
  transform-origin: left center;
}
.app-shelf-widget .today-actions,
.interruption-shield-widget .is-actions,
.overwhelm-sos-widget .sos-actions {
  transform: scale(0.875);
  transform-origin: right center;
}

.draggable-widget button,
.draggable-widget a,
.draggable-widget input {
  cursor: pointer;
}
/* ---- drop lattice ----
   Lives in the markup and is only ever shown or hidden, never added or removed:
   changing the layer tree mid-drag makes the compositor re-raster the oversized
   wallpaper, and it flashes black while it works. `visibility` costs nothing to
   paint while idle and, unlike `display`, keeps the box in the tree, so turning
   it on is a repaint rather than a structural change. */
.wg-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  visibility: hidden;
}
.wg-overlay.is-active {
  visibility: visible;
}
/* the same camera transform .world carries, so the chrome shares world space
   with the widgets without having to live among them */
.wg-stage {
  position: absolute;
  inset: 0;
  /* 2D on purpose: translate3d would hand this a compositing layer of its own,
     and the layer arriving is exactly what makes the wallpaper re-raster. */
  transform: translate(var(--pan-x, 0px), var(--pan-y, 0px)) scale(var(--scale, 1));
  transform-origin: 0 0;
}

/* Box, pitch and background offset are written by showGridChrome(): the field
   covers the VISIBLE canvas only, because a canvas-sized sheet of repeating
   gradients costs more raster memory than this page has spare. */
.wg-lattice {
  position: absolute;
  contain: layout paint style;
  opacity: 0;
  /* no transition: a fade on a field this size is a composited animation, and it
     costs the wallpaper its tiles for the 180ms it runs. The grid is faint
     enough that appearing outright reads the same. */
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}
.wg-lattice.is-in {
  opacity: 1;
}

/* the cell the drag will actually land in — the widget's own box, not a cell,
   so what the user sees outlined is what they get */
.wg-ghost {
  position: absolute;
  top: 0;
  left: 0;
  /* matches section.draggable-widget, so the outline is the widget's own corner */
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  opacity: 0;
  transition:
    opacity 160ms ease,
    transform 170ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 160ms ease;
}
.wg-ghost.is-in {
  opacity: 1;
}
/* landing here makes room by moving other widgets: brighter, so the reflow
   playing out behind the ghost reads as a consequence and not a glitch */
.wg-ghost.is-shifted {
  background: rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26);
}

@media (prefers-reduced-motion: reduce) {
  .wg-ghost {
    transition: opacity 160ms ease;
  }
}
.draggable-widget.dragging {
  z-index: 50;
  cursor: grabbing;
  user-select: none;
  will-change: transform;
  backface-visibility: hidden;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.24),
    0 0 28px rgba(255, 255, 255, 0.04),
    0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* keep heavy decorative weave layers out of hit-testing during drag */
.progress-weave-svg,
.progress-weave-svg *,
.weave-images,
.weave-body-asset {
  pointer-events: none;
}

/* while any widget is being dragged, skip hit-testing + transitions on the rest */
body.is-dragging .draggable-widget:not(.dragging),
body.is-dragging .draggable-widget:not(.dragging) * {
  pointer-events: none;
}
body.is-dragging .draggable-widget {
  /* keep transform/position instant for smooth dragging, but let the drag
     border/glow fade in rather than switching abruptly */
  transition:
    box-shadow 180ms ease,
    border-color 180ms ease,
    filter 180ms ease;
}

/* ===================== SHARED COLLAPSED-BAR WIDTH ===================== */
/* COLLAPSED-STATE ONLY. Expanded widgets are never matched by these selectors,
   so their width / min-width / max-width / zoom / layout stay exactly as-is.
   Reference: the Focus Level collapsed bar (500px at zoom .9 = 450px on screen).
   The zoom-compensated collapsed width is set inline per widget by the JS guard
   (setupCollapsedWidthGuard) so that (a) each widget keeps its own zoom — pinning
   zoom would shift left/top, which live in the zoomed coordinate space, and make
   the widget jump — and (b) the on-screen collapsed width still matches Focus
   Level. These rules only lift min/max-width limits so the inline width can apply. */
:root { --widget-collapsed-width: 500px; }
.draggable-widget.collapsed,
.draggable-widget.sos-collapsed,
.draggable-widget.fsc-collapsed,
.draggable-widget.bna-collapsed,
.draggable-widget.wj-collapsed,
.draggable-widget.is-collapsed,
.draggable-widget.br-collapsed,
.draggable-widget.stk-collapsed,
.draggable-widget.sr-collapsed,
.draggable-widget.ts-collapsed,
.draggable-widget.tp-collapsed {
  min-width: 0 !important;
  max-width: none !important;
}
/* long titles ellipsis inside the compact bar instead of widening it */
.draggable-widget.collapsed :is(h1, h2, h3),
.draggable-widget.sos-collapsed :is(h1, h2, h3),
.draggable-widget.fsc-collapsed :is(h1, h2, h3),
.draggable-widget.bna-collapsed :is(h1, h2, h3),
.draggable-widget.wj-collapsed :is(h1, h2, h3),
.draggable-widget.is-collapsed :is(h1, h2, h3),
.draggable-widget.br-collapsed :is(h1, h2, h3),
.draggable-widget.stk-collapsed :is(h1, h2, h3),
.draggable-widget.sr-collapsed :is(h1, h2, h3),
.draggable-widget.ts-collapsed :is(h1, h2, h3),
.draggable-widget.tp-collapsed :is(h1, h2, h3) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 20px;
}

.weave-body-asset {
  image-rendering: auto;
}
.weave-pulses {
  pointer-events: none;
  mix-blend-mode: screen;
}
.weave-pulse-core {
  fill: #ffffff;
}
.weave-spark-bloom {
  fill: url(#weaveSparkBloom);
}
.weave-rail-flashes,
.weave-divider-react {
  pointer-events: none;
}
.weave-rail-flash {
  stroke: #ffffff;
  stroke-width: 1.3;
  fill: none;
  opacity: 0;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.9));
}
.weave-divider-bloom {
  fill: url(#weaveSparkBloom);
  mix-blend-mode: screen;
  opacity: 0;
}
.progress-widget .today-action[aria-label="Pin"] svg {
  transform: rotate(40deg);
  transform-origin: center;
}
.neura-signals-widget .today-action[aria-label="Pin"] svg {
  transform: rotate(40deg);
  transform-origin: center;
}
.app-shelf-widget .today-action[aria-label="Pin"] svg {
  transform: rotate(40deg);
  transform-origin: center;
}

.control-panel.dragging,
.control-panel.resizing {
  cursor: grabbing;
  user-select: none;
  box-shadow:
    0 40px 90px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.control-panel.resizing {
  cursor: nwse-resize;
}

/* subtle premium feedback when a drag/resize is blocked by collision. Widgets
   never reach this state: the lattice always resolves them to a valid cell. */
.control-panel.drag-blocked {
  outline: 1.5px solid rgba(245, 166, 35, 0.5);
  outline-offset: 2px;
  box-shadow:
    0 0 0 1px rgba(245, 166, 35, 0.28),
    0 24px 60px rgba(0, 0, 0, 0.5);
  transition: outline-color 0.15s ease, box-shadow 0.15s ease;
}

/* ===================== PERFORMANCE ===================== */
/* Layout/style containment: a widget's internal changes never invalidate the rest
   of the canvas. `paint` is intentionally omitted so soft glows/shadows that extend
   past the widget box are NOT clipped. */
.draggable-widget,
.control-panel {
  contain: layout style;
}

/* Freeze continuous ambient animations for the duration of a drag gesture, so the
   whole frame budget is free for a smooth drag. Only active while dragging. */
body.is-dragging .draggable-widget,
body.is-dragging .draggable-widget *,
body.is-dragging .control-panel,
body.is-dragging .control-panel * {
  animation-play-state: paused !important;
}

/* Same idea as the drag pause above, but for camera navigation (pan / zoom /
   search fly-to). Toggled by setNavigating() in main.js. Static appearance is
   untouched — only ambient animations freeze while the camera is actively moving,
   then resume on idle. Delete this rule to fully disable. */
body.is-navigating .draggable-widget,
body.is-navigating .draggable-widget *,
body.is-navigating .control-panel,
body.is-navigating .control-panel *,
body.is-navigating .warning-panel,
body.is-navigating .warning-panel * {
  animation-play-state: paused !important;
}
[data-drag-handle] { cursor: grab; }
.draggable-widget.dragging [data-drag-handle] { cursor: grabbing; }

/* Off-screen widgets shouldn't burn CPU/GPU on continuous animations. */
.draggable-widget.offscreen-paused,
.draggable-widget.offscreen-paused * {
  animation-play-state: paused !important;
}

/* resize handles */
.resize-handle {
  position: absolute;
  z-index: 7;
  touch-action: none;
}
.resize-e {
  top: 14px;
  right: 0;
  width: 10px;
  height: calc(100% - 28px);
  cursor: ew-resize;
  display: flex;
  align-items: center;
  justify-content: center;
}
.resize-e::after {
  content: "";
  width: 3px;
  height: 38px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  transition: background 0.15s ease, height 0.15s ease;
}
.resize-e:hover::after,
.control-panel.resizing .resize-e::after {
  background: rgba(255, 255, 255, 0.4);
  height: 54px;
}
.resize-s {
  left: 14px;
  bottom: 0;
  height: 10px;
  width: calc(100% - 28px);
  cursor: ns-resize;
}
.resize-se {
  right: 0;
  bottom: 0;
  width: 20px;
  height: 20px;
  cursor: nwse-resize;
  border-bottom-right-radius: 32px;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.28) 0 1.5px,
      transparent 1.5px 4px
    );
  -webkit-mask: radial-gradient(20px at 0 0, transparent 98%, #000 100%);
  mask: radial-gradient(20px at 0 0, transparent 98%, #000 100%);
  opacity: 0.55;
  transition: opacity 0.15s ease;
}
.resize-se:hover,
.control-panel.resizing .resize-se {
  opacity: 0.9;
}

.panel-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -4px 0 2px;
  padding: 4px 0 6px;
  cursor: grab;
  touch-action: none;
}
.panel-drag-handle:active,
.control-panel.dragging .panel-drag-handle {
  cursor: grabbing;
}
.drag-grip {
  width: 42px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  transition: background 0.15s ease;
}
.panel-drag-handle:hover .drag-grip {
  background: rgba(255, 255, 255, 0.3);
}

/* responsive internal layout (adapts to panel width, not viewport) */
.fleet-card-head > div {
  min-width: 0;
}
.fleet-name,
.fleet-meta {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@container panel (max-width: 350px) {
  .vehicle-pills,
  .status-cards,
  .fleet-grid {
    grid-template-columns: 1fr;
  }
}

/* frosted glass separation behind the fixed header chrome (above map, below nav) */
.header-glass {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 86px;
  z-index: 6;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(8, 10, 10, 0.72) 0%,
    rgba(8, 10, 10, 0.42) 58%,
    rgba(8, 10, 10, 0.08) 100%
  );
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  backdrop-filter: blur(14px) saturate(110%) brightness(0.72);
  -webkit-backdrop-filter: blur(14px) saturate(110%) brightness(0.72);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.22),
    inset 0 -1px 0 rgba(255, 255, 255, 0.025);
}

.control-nav {
  position: absolute;
  top: 2.4%;
  left: 1.2%;
  z-index: 9;
  height: 50px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: nowrap;
  padding: 5px 26px 5px 22px;
  border-radius: var(--chrome-radius);
  background: var(--chrome-glass);
  backdrop-filter: var(--chrome-blur);
  -webkit-backdrop-filter: var(--chrome-blur);
  border: none;
  box-shadow: var(--chrome-shadow), var(--chrome-highlight);
  user-select: none;
  -webkit-user-select: none;
  caret-color: transparent;
}
.logo-mark {
  height: 30px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.logo-image {
  width: auto;
  height: 50%;
  object-fit: contain;
  object-position: left center;
  filter: brightness(0) invert(1);
}
.nav-tabs {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  flex-wrap: wrap;
}
/* THE ACTIVE TAB IS LIT, NOT FILLED. A grey slab behind the word is the loudest
   thing in the bar and says nothing the brightness of the word does not already
   say. What is left of the indicator is a single point of light on the baseline,
   which is how every list in the onboarding marks the row you are standing on. */
.nav-active-indicator {
  position: absolute;
  top: 50%;
  left: 0;
  height: 3px;
  width: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.7);
  transform: translate3d(
      calc(var(--active-x, 0px) + var(--active-width, 0px) / 2 - 1.5px),
      calc(-50% + 13px),
      0
    );
  transition:
    transform 420ms var(--chrome-ease),
    opacity 420ms var(--chrome-ease);
  pointer-events: none;
  opacity: 0;
  z-index: 0;
}
.nav-active-indicator.ready {
  opacity: 1;
}
/* While the firefly is in the air the resting dot is dark; it relights as the
   firefly settles on the new tab. */
.nav-active-indicator.is-away {
  opacity: 0;
  transition: none;
}

/* ---- firefly that carries the nav dot between tabs ----
   Same white light as the dot itself, only softer at the edges, so nothing
   changes colour mid-flight. */
.nav-firefly-layer {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}
.nav-firefly {
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.7);
  pointer-events: none;
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
  .nav-firefly-layer { display: none; }
}
.nav-tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  font-size: 10.5px;
  font-weight: 300;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: var(--chrome-radius);
  cursor: pointer;
  white-space: nowrap;
  transition: color 300ms var(--chrome-ease);
}
.nav-tab:hover {
  color: var(--text-secondary);
}
.nav-tab.active {
  color: #f2f5fa;
}
.widget.docked,
section.docked,
div.docked {
  display: none !important;
}
/* Hide dockable widgets until JS has docked/placed them, so they don't flash
   at their default layout positions on refresh. Removed once init completes. */
body.is-booting .focus-level-widget,
body.is-booting .calendar-widget,
body.is-booting .hydration-widget,
body.is-booting .selfcomp-widget,
body.is-booting .habit-garden-widget,
body.is-booting .energy2-widget,
body.is-booting .focus-session-widget,
body.is-booting .today-widget,
body.is-booting .attention-widget,
body.is-booting .this-week-widget,
body.is-booting .neura-signals-widget,
body.is-booting .app-shelf-widget,
body.is-booting .progress-widget,
body.is-booting .best-next-action-widget,
body.is-booting .mirror-widget,
body.is-booting .reset-widget,
body.is-booting .your-turn-widget,
body.is-booting .twin-neva-widget,
body.is-booting .widget--email {
  visibility: hidden !important;
}
.widget-more-menu {
  position: fixed;
  z-index: 1000;
  min-width: 180px;
  padding: 6px;
  border-radius: var(--radius-sm);
  background: var(--panel-bg-strong);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-panel);
  backdrop-filter: var(--blur) saturate(115%);
  -webkit-backdrop-filter: var(--blur) saturate(115%);
}
.widget-more-item {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}
.widget-more-item:hover {
  background: var(--card-bg);
  color: var(--text-primary);
}

/* vehicle pills */
.vehicle-pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.vehicle-pill-group {
  display: flex;
  gap: 8px;
}
.vehicle-pill {
  flex: 1;
  height: 40px;
  text-align: center;
  white-space: nowrap;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgb(78 78 78 / 10%);
  border: none;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
  transition: background 0.15s ease;
}
.vehicle-pill:hover {
  background: rgba(28, 31, 30, 0.6);
}
.vehicle-pill.active {
  background: rgb(78 78 78 / 10%);
  border: none;
  color: var(--text-primary);
  box-shadow: none;
}

/* status cards */
.status-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.status-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
  height: 85px;
  column-gap: 9px;
  row-gap: 4px;
  padding: 14px 16px;
  border-radius: 20px;
  background: rgb(78 78 78 / 10%);
  border: none;
  box-shadow: none;
}
.status-card > .status-check,
.status-card > .status-icon,
.status-card > .status-warning {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}
.status-card > .status-label {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
}
.status-card > .status-value {
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: end;
  align-self: center;
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.status-dot.online {
  background: var(--accent-green);
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.8), 0 0 0 3px rgba(74, 222, 128, 0.12);
}
.status-check.online {
  width: 14px;
  height: 14px;
}
.status-check.online circle {
  fill: #34a853;
  stroke: none;
}
.status-check.online path {
  fill: none;
  stroke: #000000;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.status-icon.offline {
  color: var(--accent-red);
  font-size: 10px;
  filter: drop-shadow(0 0 6px rgba(240, 88, 78, 0.6));
}
.status-warning.offline {
  width: 15px;
  height: 15px;
}
.status-warning.offline .warning-tri {
  fill: #d93a36;
  stroke: none;
}
.status-warning.offline line {
  stroke: #000000;
  stroke-width: 2;
  stroke-linecap: round;
}
.status-warning.offline circle {
  fill: #000000;
  stroke: #000000;
  stroke-width: 1.6;
}
.status-label {
  font-size: 12px;
  color: var(--text-secondary);
}
.status-value {
  margin-left: auto;
  font-size: 28px;
  font-weight: 300;
  letter-spacing: -0.01em;
}

/* efficiency card */
.efficiency-card {
  padding: 16px 18px;
  border-radius: 22px;
  background: rgb(78 78 78 / 10%);
  border: none;
  box-shadow: none;
}
.efficiency-title {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 400;
}
.efficiency-value {
  font-size: 38px;
  font-weight: 300;
  letter-spacing: -0.02em;
  margin-top: 2px;
}
.eff-decimal {
  color: var(--text-muted);
}
.efficiency-target {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.efficiency-chart {
  position: relative;
  padding-right: 40px;
  padding-bottom: 16px;
}
.eff-svg {
  width: 100%;
  height: 100px;
  overflow: visible;
}
.eff-band {
  fill: rgba(255, 255, 255, 0.035);
}
.grid-line {
  stroke: rgba(255, 255, 255, 0.04);
  stroke-width: 1;
  stroke-dasharray: 2 6;
}
.eff-line {
  fill: none;
  stroke: rgba(210, 213, 208, 0.58);
  stroke-width: 1.1;
  stroke-linejoin: round;
}
.eff-line-bright {
  fill: none;
  stroke: rgba(248, 249, 246, 0.92);
  stroke-width: 1.2;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.3));
}
.eff-line-2 {
  fill: none;
  stroke: rgba(245, 245, 245, 0.28);
  stroke-width: 1;
  stroke-linejoin: round;
}
.eff-threshold-line {
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 1;
  stroke-dasharray: 5 7;
}
.eff-line-amber {
  fill: none;
  stroke: rgba(190, 120, 32, 0.78);
  stroke-width: 1.1;
  stroke-linejoin: round;
}
.eff-point {
  fill: rgba(255, 255, 255, 0.9);
}
.eff-point.amber {
  fill: rgba(204, 132, 40, 0.9);
}
.eff-y-labels {
  position: absolute;
  right: 0;
  top: 0;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 9px;
  color: var(--text-muted);
}
.eff-threshold {
  position: absolute;
  right: 40px;
  top: 18px;
  font-size: 9px;
  color: var(--text-muted);
}
.eff-x-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 9px;
  color: var(--text-muted);
}

/* fleet grid */
.fleet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.fleet-card {
  position: relative;
  padding: 12px;
  border-radius: 22px;
  background: rgb(78 78 78 / 10%);
  border: none;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}
.fleet-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 14px 14px;
  opacity: 0.5;
  pointer-events: none;
}
.fleet-card > * {
  position: relative;
}
.fleet-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.fleet-name {
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0.2px;
  color: rgba(243, 243, 240, 0.92);
}
.fleet-meta {
  font-size: 10px;
  font-weight: 300;
  color: rgba(165, 168, 163, 0.6);
  margin-top: 4px;
}
.fleet-illustration {
  position: relative;
  display: grid;
  place-items: center;
  padding: 6px 0 2px;
}
.fleet-illustration::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70%;
  height: 60%;
  transform: translate(-50%, -50%);
  background: radial-gradient(60% 60% at 50% 50%, rgba(140, 170, 200, 0.12), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.bus-blueprint {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 156px;
  height: 56px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.32);
  stroke-width: 1;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.bus-win {
  fill: none;
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 0.9;
}
.fleet-route-badge {
  position: absolute;
  left: 50%;
  top: 54%;
  z-index: 2;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px 3px 3px;
  border-radius: 999px;
  background: rgba(42, 45, 48, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.badge-letter {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(74, 78, 82, 0.95);
  display: grid;
  place-items: center;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.9);
}
.badge-id {
  font-size: 11px;
  letter-spacing: 0.6px;
  color: rgba(255, 255, 255, 0.85);
}
.bus-blueprint.electric {
  stroke: rgba(245, 166, 35, 0.55);
}
.bus-id {
  fill: rgba(255, 255, 255, 0.5);
  stroke: none;
  font-size: 8px;
  font-family: "SF Pro Rounded", "SF Pro Display", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
.fleet-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0;
  font-size: 10.5px;
  color: var(--text-muted);
}
.fleet-online {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text-secondary);
}
.fleet-online i {
  display: none;
}
.fleet-online.green-pill {
  color: rgba(126, 196, 148, 0.9);
  border-color: rgba(126, 196, 148, 0.4);
}
.fleet-signal {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: rgba(255, 255, 255, 0.6);
}
.fleet-signal:nth-of-type(2) {
  margin-left: auto;
}
.signal-icon {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}
.signal-icon circle {
  fill: currentColor;
  stroke: none;
}
.fleet-minimap {
  position: relative;
  height: 104px;
  margin: 0 -12px -12px;
  background: radial-gradient(95% 100% at 50% 42%, rgba(28, 31, 33, 0.5), rgba(10, 13, 14, 0.16) 58%, transparent 82%);
  border: none;
  overflow: hidden;
}
.fleet-minimap svg.mini-map-svg,
.fleet-minimap > svg {
  width: 100%;
  height: 100%;
  -webkit-mask-image: radial-gradient(110% 112% at 50% 42%, #000 32%, transparent 82%);
  mask-image: radial-gradient(110% 112% at 50% 42%, #000 32%, transparent 82%);
}
.fleet-minimap .fleet-timeline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  gap: 5px;
  padding: 8px 22px 14px;
  background: linear-gradient(to top, rgba(8, 11, 12, 0.55), transparent 72%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.mini-block {
  fill: rgba(255, 255, 255, 0.05);
  stroke: none;
}
.mini-park {
  fill: rgba(255, 255, 255, 0.04);
  stroke: none;
}
.mini-water {
  fill: rgba(255, 255, 255, 0.03);
  stroke: none;
}
.mini-road {
  fill: none;
  stroke: rgba(255, 255, 255, 0.13);
  stroke-width: 2.4;
  stroke-linecap: round;
}
.mini-road-thin {
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 1.2;
}
.mini-route {
  fill: none;
  stroke: rgba(255, 255, 255, 0.62);
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.25));
}
.minimap-pin {
  position: absolute;
  top: 38%;
  width: 12px;
  height: 12px;
  border-radius: 50% 50% 50% 0;
  background: #fff;
  transform: translate(-50%, -100%) rotate(45deg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45), 0 0 10px rgba(255, 255, 255, 0.35);
}
.minimap-pin::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(28, 30, 32, 0.9);
}
.fleet-timeline {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 8.5px;
  color: var(--text-muted);
}
.timeline-labels {
  display: flex;
  justify-content: space-between;
}
.timeline-track {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}
.timeline-knob {
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(38, 40, 42, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.22);
  position: relative;
}
.timeline-knob::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
}
.timeline-bar {
  flex: 1;
  height: 14px;
  border-radius: 3px;
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.2) 0 1px,
    transparent 1px 4px
  );
}
.timeline-bus {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 16px;
  border-radius: 5px;
  background: rgba(26, 28, 30, 0.95);
  display: grid;
  place-items: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.bus-marker-icon {
  width: 11px;
  height: 11px;
  fill: rgba(255, 255, 255, 0.9);
}

/* ===================== TOP COMMAND BAR ===================== */
.command-bar {
  position: absolute;
  top: 2%;
  right: 1.4%;
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Right-side action group: search + icons + avatar in one frosted pill */
.cmd-actions {
  display: flex;
  align-items: center;
  height: 50px;
  box-sizing: border-box;
  gap: 2px;
  padding: 0 6px;
  border-radius: var(--chrome-radius);
  background: var(--chrome-glass);
  backdrop-filter: var(--chrome-blur);
  -webkit-backdrop-filter: var(--chrome-blur);
  border: none;
  box-shadow: var(--chrome-shadow), var(--chrome-highlight);
}
/* inside the bar the surface is already there: a second glass behind each glyph is
   a panel drawn inside a panel */
.cmd-actions .icon-btn {
  width: 36px;
  height: 36px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.cmd-actions .icon-btn:hover {
  background: var(--chrome-fill-hover);
  box-shadow: none;
}
.cmd-actions .user-avatar {
  width: 34px;
  height: 34px;
  margin-left: 2px;
}
.cmd-actions .search-field {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  width: 36px;
  height: 36px;
}
.cmd-actions .search-field.expanded {
  width: 220px;
  background: rgba(0, 0, 0, 0.24);
}
.cmd-actions .search-toggle {
  width: 36px;
  height: 36px;
}
.search-field {
  display: flex;
  align-items: center;
  height: 40px;
  width: 40px;
  border-radius: 999px;
  background: rgb(111 111 111 / 20%);
  backdrop-filter: blur(18px) saturate(115%);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  border: none;
  box-shadow: none;
  overflow: hidden;
  transition: width 320ms cubic-bezier(0.22, 1, 0.36, 1), background 200ms ease;
}
.search-field.expanded {
  width: 244px;
  overflow: visible;
}
.search-toggle {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.search-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: rgba(235, 238, 232, 0.58);
  stroke-width: 1.6;
  flex-shrink: 0;
}

/* widget search dropdown (fixed header layer, premium glass) */
.widget-search-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 250px;
  max-height: 320px;
  overflow-y: auto;
  z-index: 30;
  display: none;
  flex-direction: column;
  padding: 6px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(26, 29, 27, 0.92), rgba(12, 15, 14, 0.9));
  backdrop-filter: blur(22px) saturate(120%);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.widget-search-dropdown.visible {
  display: flex;
}
.widget-search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.widget-search-item.active,
.widget-search-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}
.widget-search-item .ws-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-green);
  opacity: 0.7;
  flex-shrink: 0;
}
.widget-search-item .ws-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.widget-search-item .ws-type {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* cinematic focus highlight after camera arrives at a widget */
.widget-search-focus {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.22),
    0 0 32px rgba(86, 224, 138, 0.18),
    0 24px 70px rgba(0, 0, 0, 0.45);
  transition: box-shadow 0.35s ease;
}
.search-field input {
  background: none;
  border: none;
  outline: none;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 300;
  flex: 1;
  min-width: 0;
  font-family: inherit;
  opacity: 0;
  pointer-events: none;
  padding-right: 14px;
  transition: opacity 160ms ease;
}
.search-field.expanded input {
  opacity: 1;
  pointer-events: auto;
}
.search-field input::placeholder {
  color: rgba(220, 224, 218, 0.42);
}
.icon-btn {
  position: relative;
  width: 40px;
  height: 40px;
  /* icon-only controls stay round: a circle is the onboarding's own .navbtn, and a
     40px rounded-rect with a 17px glyph in it reads as a box with something lost
     inside. Everything that carries a WORD takes --chrome-radius instead. */
  border-radius: 50%;
  background: var(--chrome-glass);
  backdrop-filter: var(--chrome-blur);
  -webkit-backdrop-filter: var(--chrome-blur);
  border: none;
  box-shadow: var(--chrome-shadow), var(--chrome-highlight);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 300ms var(--chrome-ease);
}
.icon-btn:hover {
  background: var(--chrome-fill-hover);
}
.icon-btn svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: rgba(240, 242, 236, 0.72);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 300ms var(--chrome-ease);
}
.icon-btn:hover svg {
  stroke: #eef1f6;
}
/* A COUNT IS NOT NEWS, IT IS PRESSURE. A red disc with a number in it is the one
   thing on this screen that shouts, and it shouts the least useful sentence there
   is: how far behind you are. What is left says only "there is something here",
   in the same white light everything else is lit with. The number is kept for
   screen readers, which is where a count is actually worth having. */
.notif-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 4px;
  height: 4px;
  padding: 0;
  border-radius: 50%;
  background: rgba(238, 241, 246, 0.85);
  box-shadow: 0 0 7px 1px rgba(238, 241, 246, 0.45);
  font-size: 0;
  color: transparent;
  display: block;
}
.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  overflow: hidden;
  background: rgb(111 111 111 / 20%);
  border: none;
  box-shadow: none;
}
.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.9) contrast(1.02);
}

/* ---- Background darkness control ---- */
.bright-control {
  position: relative;
  display: flex;
  align-items: center;
}
.bright-popover {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: linear-gradient(160deg, rgba(26, 29, 27, 0.92), rgba(12, 15, 14, 0.9));
  backdrop-filter: blur(22px) saturate(120%);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.bright-popover[hidden] {
  display: none;
}
.bright-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.bright-dot--dark {
  background: #0b0d0c;
}
.bright-dot--light {
  background: #eef1ea;
}
.bright-popover input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 132px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(to right, #eef1ea, #8a8f88, #0b0d0c);
  outline: none;
  cursor: pointer;
}
.bright-popover input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid rgba(0, 0, 0, 0.25);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  cursor: grab;
}
.bright-popover input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid rgba(0, 0, 0, 0.25);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  cursor: grab;
}

/* ===================== WARNING PANEL ===================== */
.warning-panel {
  position: absolute;
  top: var(--panel-top);
  right: 1.2%;
  width: 22%;
  min-width: 280px;
  max-height: 80%;
  z-index: 10;
  padding: 24px 5px 5px 5px;
  border-radius: var(--panel-radius);
  --warning-text-primary: rgba(243, 242, 238, 0.92);
  --warning-text-secondary: rgba(223, 222, 216, 0.82);
  --warning-text-muted: rgba(159, 159, 159, 0.7);
  background: var(--panel-glass);
  backdrop-filter: var(--panel-blur);
  -webkit-backdrop-filter: var(--panel-blur);
  border: none;
  box-shadow: var(--panel-shadow), var(--panel-highlight);
  overflow-y: auto;
}
.warning-panel::-webkit-scrollbar {
  width: 0;
}
.warning-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  margin-bottom: 24px;
  transition: margin-bottom 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
.warning-head > .panel-collapse {
  margin-right: 6px;
}
.warning-panel.collapsed {
  overflow: hidden;
  padding-top: 14px;
  padding-bottom: 14px;
}
.warning-panel.collapsed .warning-head {
  margin-bottom: 0;
}
.warning-title {
  font-size: 22px;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--warning-text-primary);
  margin-left: 10px;
}
.warning-section + .warning-section {
  margin-top: 30px;
}
.warning-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 13px;
  transition: margin-bottom 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
.warning-section.collapsed .warning-section-head {
  margin-bottom: 0;
}
.warning-section-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--warning-text-secondary);
  margin-bottom: 0;
  margin-left: 10px;
}
.section-toggle {
  flex-shrink: 0;
}

/* collapsible regions: smooth premium open/close */
.warning-body,
.warning-section-body,
.alert-block-body {
  overflow: hidden;
  transition:
    max-height 0.26s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.2s ease;
}
.warning-body {
  max-height: 2000px;
  opacity: 1;
}
.warning-section-body {
  max-height: 1200px;
  opacity: 1;
}
.alert-block-body {
  max-height: 800px;
  opacity: 1;
}
.warning-panel.collapsed .warning-body {
  max-height: 0;
  opacity: 0;
}
.warning-section.collapsed .warning-section-body {
  max-height: 0;
  opacity: 0;
}
.alert-block:not(.expanded) .alert-block-body {
  max-height: 0;
  opacity: 0;
}
.alert-block.expanded .alert-block-body {
  overflow: visible;
}

/* chevron rotation reflects collapsed/expanded state */
.panel-collapse svg {
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.warning-panel.collapsed .warning-head > .panel-collapse svg,
.warning-section.collapsed .section-toggle svg,
.alert-block:not(.expanded) .alert-head .panel-collapse svg {
  transform: rotate(180deg);
}

/* smooth open/close when toggled from the notification bell */
.warning-panel {
  transform-origin: top right;
  transition:
    opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s;
}
.warning-panel.hidden {
  opacity: 0;
  transform: scale(0.94) translateY(-10px);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.3s;
}
/* ===================== WEARABLES PANEL ===================== */
.wear-panel {
  position: absolute;
  top: var(--panel-top);
  right: 1.2%;
  width: 300px;
  max-width: calc(100vw - 24px);
  max-height: 80%;
  z-index: 10;
  padding: 14px 8px 8px;
  border-radius: var(--panel-radius);
  --wear-primary: rgba(243, 242, 238, 0.94);
  --wear-secondary: rgba(223, 222, 216, 0.8);
  --wear-muted: rgba(159, 159, 159, 0.62);
  background: var(--panel-glass);
  backdrop-filter: var(--panel-blur);
  -webkit-backdrop-filter: var(--panel-blur);
  border: none;
  box-shadow: var(--panel-shadow), var(--panel-highlight);
  color: var(--wear-primary);
  overflow-y: auto;
  transform-origin: top right;
  transition:
    opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s;
}
.wear-panel::-webkit-scrollbar { width: 0; }
.wear-panel.hidden {
  opacity: 0;
  transform: scale(0.94) translateY(-10px);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.3s;
}
.wear-panel__title {
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wear-muted);
  padding: 4px 14px 10px;
}
.wear-list { display: flex; flex-direction: column; gap: 2px; }
.wear-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 14px;
  transition: background 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.wear-item__icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--wear-secondary);
}
.wear-item__icon svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.92;
}
.wear-item__text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.wear-item__name {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--wear-primary);
}
.wear-item__meta {
  font-size: 12px;
  font-weight: 300;
  color: var(--wear-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wear-item__detail {
  font-size: 12px;
  font-weight: 300;
  color: var(--wear-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wear-sep { color: var(--wear-muted); margin: 0 2px; }
.wear-item__state { flex-shrink: 0; display: grid; place-items: center; min-width: 44px; }
.wear-item__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wear-primary);
  box-shadow: 0 0 10px rgba(243, 242, 238, 0.55);
}
.wear-item__action {
  border: none;
  background: transparent;
  color: var(--wear-muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: color 0.2s ease;
}
.wear-item__action:hover { color: var(--wear-secondary); }
.wear-divider {
  height: 1px;
  margin: 8px 14px;
  background: rgba(255, 255, 255, 0.07);
}
.wear-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius: 14px;
  background: transparent;
  color: var(--wear-primary);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.wear-foot:hover { background: rgba(255, 255, 255, 0.04); }
.wear-foot__icon { flex-shrink: 0; display: inline-flex; width: 22px; justify-content: center; color: var(--wear-muted); }
.wear-foot__icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wear-foot__label {
  font-size: 14px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--wear-primary);
}
.wear-footer {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px 6px;
  font-size: 11px;
  font-weight: 300;
  color: var(--wear-muted);
}
.wear-footer__icon { flex-shrink: 0; display: inline-flex; }
.wear-footer__icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.warning-section-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  opacity: 0.72;
}
.muted {
  color: var(--warning-text-muted);
  font-weight: 300;
}

.alert-block {
  border-radius: 35px;
  background: #4f242447;
  border: none;
  box-shadow: none;
  padding: 20px;
}
.alert-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}
.alert-badge {
  width: 23px;
  height: 23px;
  flex-shrink: 0;
  border-radius: 999px;
  background: #ff2d2d;
  color: rgba(255, 255, 255, 0.96);
  font-size: 12px;
  font-weight: 500;
  display: grid;
  place-items: center;
  box-shadow: none;
}
.alert-head-text {
  flex: 1;
}
.alert-title {
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--warning-text-secondary);
}
.warning-body .alert-title {
  white-space: nowrap;
  font-size: 13px;
}
.alert-time {
  font-size: 13px;
  font-weight: 300;
  color: var(--warning-text-muted);
  margin-top: 5px;
}
.panel-collapse.collapsed {
  transform: none;
}
.panel-collapse svg {
  width: 14px;
  height: 14px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
  transition:
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.18s ease;
}
.panel-collapse:hover svg {
  opacity: 1;
}

.affected-label {
  font-size: 13px;
  font-weight: 300;
  color: var(--warning-text-muted);
  margin: 18px 0 12px;
  padding-left: 16px;
}
.affected-station {
  position: relative;
  padding-left: 14px;
  margin-bottom: 12px;
}
.affected-station {
  position: relative;
  padding-left: 16px;
  margin-bottom: 14px;
}
.affected-station::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: var(--warning-text-secondary);
}
.station-name {
  font-size: 14px;
  font-weight: 300;
  color: var(--warning-text-secondary);
}
.station-detail {
  font-size: 13px;
  font-weight: 300;
  color: var(--warning-text-muted);
  margin-top: 3px;
}
.recommend-block {
  position: relative;
  padding-left: 16px;
  margin-top: 10px;
}
.recommend-icon {
  position: absolute;
  left: -8px;
  top: 15px;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--warning-text-secondary);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 1;
}
.recommend-title {
  font-size: 14px;
  font-weight: 300;
  color: var(--warning-text-secondary);
}
.recommend-detail {
  font-size: 13px;
  font-weight: 300;
  color: var(--warning-text-muted);
  margin-top: 3px;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1100px) {
  html,
  body {
    overflow: auto;
  }
  .dashboard {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  .world {
    display: contents;
  }
  .world-bg, .screen-grain { display: none; }
  .header-glass {
    display: none;
  }
  .map-workspace {
    position: relative;
    height: 70vh;
    overflow: hidden;
    background-image: var(--bg-focus);
    background-size: cover;
    background-position: center;
  }
  .control-nav,
  .control-panel,
  .warning-panel,
  .command-bar {
    position: relative;
    inset: auto;
    width: auto;
    max-height: none;
    margin: 12px;
  }
  .control-nav {
    flex-wrap: wrap;
  }
  .control-panel {
    max-width: none;
  }
  .command-bar {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .map-heading {
    left: 5%;
    top: 6%;
  }
  .schedule-offset-panel,
  .passenger-volume-panel {
    position: relative;
    inset: auto;
    width: auto;
    margin: 12px;
  }
}

@media (max-width: 620px) {
  .fleet-grid,
  .status-cards {
    grid-template-columns: 1fr;
  }
  .search-field {
    width: 100%;
  }
  .nav-tabs {
    gap: 2px;
  }
  .nav-tab {
    padding: 6px 9px;
    font-size: 12px;
  }
}

/* ===================== BEST NEXT ACTION WIDGET ===================== */
.best-next-action-widget {
  position: absolute;
  z-index: 6;
  zoom: 1.07;
  width: calc(var(--v-widget-width) / 1.07);
  height: calc(var(--v-widget-height) / 1.07);
  max-width: 92vw;
  display: flex;
  flex-direction: column;
  padding: 18px 18px 16px;
  border-radius: 30px;
  color: var(--text-primary);
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255, 255, 255, 0.05), transparent 55%),
    radial-gradient(140% 120% at 50% 60%, rgba(20, 22, 27, 0.5), rgba(6, 7, 9, 0.82) 100%),
    linear-gradient(160deg, rgba(26, 28, 33, 0.66) 0%, rgba(10, 11, 14, 0.78) 100%);
  backdrop-filter: blur(26px) saturate(120%);
  -webkit-backdrop-filter: blur(26px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.7),
    0 8px 30px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.best-next-action-widget.bna-in {
  opacity: 1;
}
.best-next-action-widget.bna-pinned {
  border-color: rgba(255, 255, 255, 0.22);
}
.bna-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.4;
  border-radius: inherit;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="matrix" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.03 0"/></filter><rect width="220" height="220" filter="url(%23n)"/></svg>');
}

.bna-head {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.bna-head-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.bna-logo {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.05);
}
.bna-logo svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.82);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bna-title {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bna-status-dot {
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 7px 1px rgba(255, 255, 255, 0.6);
  animation: bnaDotPulse 2.8s ease-in-out infinite;
}
@keyframes bnaDotPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
.bna-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.bna-action {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 8px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.55);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.bna-action:active { transform: scale(0.92); }
.bna-action svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.4s cubic-bezier(0.3, 1.2, 0.4, 1);
}
.bna-action svg circle { fill: currentColor; stroke: none; }
.best-next-action-widget.bna-pinned .bna-action[aria-label="Pin"] {
  color: rgba(255, 255, 255, 0.95);
}

.bna-body {
  /* The widget pads 18px, but the scene has to reach both edges, so the body
     spans the full width and carries that padding itself. */
  margin: 0 -18px;
  padding: 0 18px;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  max-height: 900px;
  opacity: 1;
}
.best-next-action-widget.bna-collapsed .bna-body {
  display: none;
}
.best-next-action-widget.bna-collapsed [data-bna-toggle] svg { transform: rotate(180deg); }

.bna-headline {
  margin: 18px 8px 0;
  text-align: center;
  font-size: 27px;
  line-height: 1.16;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.18);
}
.bna-subtitle {
  margin: 11px 6px 0;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.52);
}

.bna-cta {
  position: relative;
  align-self: center;
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 26px 11px 22px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  cursor: pointer;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.14);
  transition: box-shadow 0.35s ease, background 0.3s ease, transform 0.15s ease, border-color 0.3s ease;
}
.bna-cta:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.32), inset 0 0 14px rgba(255, 255, 255, 0.2);
}
.bna-cta:active { transform: scale(0.98); }
.bna-cta-bloom {
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(60% 140% at 50% 0%, rgba(255, 255, 255, 0.22), transparent 70%),
    radial-gradient(60% 140% at 50% 100%, rgba(255, 255, 255, 0.18), transparent 70%);
  opacity: 0.6;
}
.bna-cta-icon { width: 17px; height: 17px; fill: rgba(255, 255, 255, 0.95); }
.bna-cta-pause { display: none; }
.best-next-action-widget.bna-running .bna-cta-play { display: none; }
.best-next-action-widget.bna-running .bna-cta-pause { display: block; }
.bna-cta-label { font-variant-numeric: tabular-nums; }

.bna-scene {
  position: relative;
  margin: 20px -18px 0;
  overflow: hidden;
}
.bna-scene-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: transparent;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 9%, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 9%, #000 82%, transparent 100%);
  mask-composite: intersect;
}
.bna-arch-far { fill: #08090c; stroke: rgba(255, 255, 255, 0.035); stroke-width: 1; }
.bna-arch-near { fill: #0b0c10; stroke: rgba(255, 255, 255, 0.05); stroke-width: 1; }
.bna-arch path { transition: fill 0.35s ease, stroke 0.35s ease; }
.best-next-action-widget.bna-lit-left .bna-arch-left .bna-arch-near,
.best-next-action-widget.bna-lit-left .bna-arch-left .bna-arch-far,
.best-next-action-widget.bna-lit-right .bna-arch-right .bna-arch-near,
.best-next-action-widget.bna-lit-right .bna-arch-right .bna-arch-far {
  fill: #191b21;
  stroke: rgba(255, 255, 255, 0.16);
}
.bna-portal-bloom-svg {
  mix-blend-mode: screen;
  opacity: 0.55;
  transform-box: fill-box;
  transform-origin: center;
  animation: bnaBreath 6s ease-in-out infinite;
}
@keyframes bnaBreath {
  0%, 100% { opacity: 0.45; transform: scale(0.98); }
  50% { opacity: 0.62; transform: scale(1.03); }
}
.bna-floor-spill { mix-blend-mode: screen; opacity: 0.5; }
.bna-floor-streak { mix-blend-mode: screen; opacity: 0.4; }
.bna-floor-streak.dim { opacity: 0.22; }
.bna-door-face { stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; }
.bna-door-rim { stroke: rgba(255, 255, 255, 0.55); stroke-width: 1.6; }
.bna-door-panel { fill: none; stroke: rgba(255, 255, 255, 0.12); stroke-width: 1; }
.bna-door-handle { fill: rgba(255, 255, 255, 0.5); }

.bna-portal-glow {
  position: absolute;
  left: 50%;
  top: 30%;
  width: 42%;
  height: 62%;
  transform: translateX(-50%);
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(50% 55% at 50% 45%, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.08) 55%, transparent 78%);
  animation: bnaGlow 6.5s ease-in-out infinite;
}
@keyframes bnaGlow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.8; }
}

.bna-dust, .bna-floor-sparkle {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
.bna-mote {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.7);
  animation: bnaMote linear infinite;
}
@keyframes bnaMote {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: 0.9; }
  85% { opacity: 0.5; }
  100% { transform: translateY(calc(-1 * var(--rise, 32px))); opacity: 0; }
}
.bna-twinkle {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.6);
  animation: bnaTwinkle ease-in-out infinite;
}
@keyframes bnaTwinkle {
  0%, 100% { opacity: 0.1; transform: scale(0.7); }
  50% { opacity: 0.9; transform: scale(1.15); }
}
.bna-rise {
  position: absolute;
  bottom: 12%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.8);
  pointer-events: none;
  mix-blend-mode: screen;
  animation: bnaRise 1.1s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
@keyframes bnaRise {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(var(--dx, 0), var(--dy, -80px)) scale(0.2); opacity: 0; }
}
.best-next-action-widget.bna-surge .bna-portal-glow { animation: bnaSurge 1.2s ease-out; }
@keyframes bnaSurge {
  0% { opacity: 0.6; transform: translateX(-50%) scale(1); }
  30% { opacity: 1; transform: translateX(-50%) scale(1.18); }
  100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
}
.best-next-action-widget.bna-surge .bna-cta,
.best-next-action-widget.bna-running .bna-cta {
  box-shadow:
    0 0 40px rgba(255, 255, 255, 0.28),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.7);
}
.bna-cta:hover ~ .bna-scene .bna-portal-glow { opacity: 0.9; }

.bna-footer {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.bna-footer-star svg {
  width: 15px;
  height: 15px;
  fill: rgba(255, 255, 255, 0.85);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
  animation: bnaDotPulse 3.4s ease-in-out infinite;
}
.bna-footer-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.bna-footer-line {
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
}
.bna-footer-text {
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.42);
}

.bna-sidelabel {
  position: absolute;
  z-index: 4;
  top: 6%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: default;
}
.bna-sidelabel-left { left: 12%; }
.bna-sidelabel-right { right: 12%; }
.bna-sidelabel-text {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}
.bna-sidelabel:hover .bna-sidelabel-text {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}
.bna-sidelabel-line {
  width: 1px;
  height: 34px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.22), transparent);
}
.bna-sidelabel-node {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.5);
}

/* ---- requested overrides ---- */
.best-next-action-widget {
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  border: none;
  border-radius: 20px;
  width: 405px;
}

.bna-logo {
  width: 38px;
  height: 38px;
}

.bna-logo svg {
  width: 40px;
  height: 40px;
  transform: translate(-1.5px, -2px);
}

.bna-title {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.92);
}

.bna-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(255 255 255);
  margin-top: 5px;
}

.bna-action svg {
  width: 23px;
  height: 23px;
}

.bna-headline {
  margin: 22px 8px 0;
  font-size: 23px;
  font-weight: 400;
  letter-spacing: 0px;
  color: rgb(255 255 255);
}

.bna-subtitle {
  font-size: 10.5px;
  color: rgb(255 255 255 / 75%);
}

.bna-cta {
  margin-top: 12px;
  padding: 6px 20px 6px 10px;
  font-size: 14px;
  font-weight: 400;
}

.bna-cta-icon {
  fill: none;
  stroke: rgb(255 255 255);
}

.bna-cta-label {
  margin-bottom: 2px;
}

.bna-cta-bloom {
  inset: unset;
}

.bna-scene {
  margin: 8px -18px -34px;
  height: 372px;
}

.bna-scene-img {
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2%, #000 98%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 8%, #000 95%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 2%, #000 98%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 8%, #000 95%, transparent 100%);
}

.bna-footer-row {
  margin-right: 12px;
}

.bna-footer-line {
  width: 90px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 39%), transparent);
}

.bna-title {
  font-size: 16px;
}

.bna-actions {
  gap: 6px;
}

.bna-action[aria-label="Pin"] svg {
  transform: rotate(40deg);
}

.bna-footer-text {
  color: rgb(255 255 255 / 58%);
}

.bna-footer {
  margin-top: 10px;
  gap: 0px;
}

.bna-footer-star svg {
  width: 22px;
  height: 22px;
  animation: none;
}

.bna-sidelabel-text {
  font-size: 9.5px;
}

.bna-status-dot {
  animation: none;
}

.bna-sidelabel-node {
  width: 0px;
  height: 0px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: none;
}

.bna-sidelabel-line {
  width: 0px;
  height: 0px;
}

.bna-sidelabel-right .bna-sidelabel-text {
  margin-right: 15px;
}

/* ===================== TWIN · NEVA WIDGET ===================== */
.twin-neva-widget {
  position: absolute;
  z-index: 5;
  zoom: 0.87;
  width: calc(var(--v-widget-width) / 0.87);
  height: calc(var(--v-widget-height) / 0.87);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 30px 28px 20px;
  border-radius: 36px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: none;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
}
.twin-neva-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.twin-neva-head-left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.twin-neva-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
}
.twin-neva-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--text-primary);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.twin-neva-title {
  font-size: 19px;
  font-weight: 350;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.twin-neva-status-dot {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.65);
}
.twin-neva-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.twin-neva-action {
  background: none;
  border: none;
  cursor: pointer;
  padding: 7px;
  display: inline-flex;
  color: var(--text-primary);
  transition: opacity 0.15s ease;
}
.twin-neva-action:hover {
  opacity: 0.7;
}
.twin-neva-action svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.twin-neva-action-pin svg {
  transform: rotate(40deg);
}
.twin-neva-body {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}
.twin-neva-widget.collapsed .twin-neva-body {
  display: none;
}
.twin-neva-widget.collapsed [data-twin-neva-toggle] svg {
  transform: rotate(-90deg);
}
.twin-neva-ring-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 2px 0 0;
}
.twin-neva-ring {
  position: relative;
  width: 210px;
  height: 210px;
}
.twin-neva-ring-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.twin-neva-ring-track-segment {
  fill: none;
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.06));
}
.twin-neva-ring-progress-glow {
  fill: none;
  stroke: rgba(255, 255, 255, 0.24);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: blur(9px);
  opacity: 0.9;
}
.twin-neva-ring-progress-segment {
  fill: none;
  stroke: rgba(255, 255, 255, 0.96);
  stroke-width: 4.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.78)) drop-shadow(0 0 18px rgba(255, 255, 255, 0.42)) drop-shadow(0 0 34px rgba(255, 255, 255, 0.18));
}
.twin-neva-avatar {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 170px;
  height: 170px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, rgba(40, 44, 43, 0.9), rgba(10, 12, 11, 0.95));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.twin-neva-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.twin-neva-ring-label {
  position: absolute;
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
  transform: translate(-50%, -50%);
}
.twin-neva-ring-focus {
  left: -3px;
  top: 48px;
}
.twin-neva-ring-energy {
  left: 214px;
  top: 48px;
}
.twin-neva-ring-style {
  left: 214px;
  top: 138px;
}
.twin-neva-ring-recovery {
  left: 105px;
  top: 208px;
}
.twin-neva-ring-rhythm {
  left: -14px;
  top: 138px;
}
.twin-neva-formed {
  position: absolute;
  right: 98px;
  bottom: -3px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.twin-neva-formed-value {
  font-size: 20px;
  font-weight: 300;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1;
}
.twin-neva-formed-label {
  margin-top: 0px;
  font-size: 14px;
  color: var(--text-muted);
}
.twin-neva-incubation {
  margin-top: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 15px;
  color: var(--text-muted);
}
.twin-neva-incubation-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}
.twin-neva-formation {
  margin-top: 20px;
  margin-left: -5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 15px;
  color: var(--text-primary);
}
.twin-neva-spark {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--text-primary);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.twin-neva-section-label {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.twin-neva-learned {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.twin-neva-learned-row {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 16px;
  color: var(--text-primary);
}
.twin-neva-row {
  margin-top: 12px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: var(--text-secondary);
  transition: opacity 0.15s ease;
}
.twin-neva-row:hover {
  opacity: 0.8;
}
.twin-neva-deepen .twin-neva-row-chevron {
  margin-right: 24px;
}
.twin-neva-row-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: none;
}
.twin-neva-row-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.92);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.twin-neva-row-text {
  flex: 1;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.92);
  text-wrap: nowrap;
}
.twin-neva-row-chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.twin-neva-trust {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.5;
}
.twin-neva-talk {
  margin-top: 18px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-radius: 20px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.09);
  transition: opacity 0.15s ease;
}
.twin-neva-talk:hover {
  opacity: 0.85;
}
.twin-neva-talk .twin-neva-row-icon {
  width: auto;
  height: auto;
  border: none;
  background: none;
}
.twin-neva-talk .twin-neva-row-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--text-primary);
}
.twin-neva-talk-text {
  flex: 1;
  font-size: 15px;
  color: var(--text-primary);
}

/* ===================== EMAIL WIDGET ===================== */
.widget--email {
  --widget-bg: rgba(18, 18, 20, 0.55);
  --widget-border: rgba(255, 255, 255, 0.08);
  --accent-green: #58df70;
  --eml-name: rgba(255, 255, 255, 0.95);
  --eml-preview: rgba(255, 255, 255, 0.68);
  --eml-meta: rgba(255, 255, 255, 0.48);
  --eml-ring: rgba(255, 255, 255, 0.24);
  position: absolute;
  z-index: 5;
  box-sizing: border-box;
  width: var(--v-widget-width);
  height: var(--v-widget-height);
  display: flex;
  flex-direction: column;
  max-width: 92vw;
  padding: 24px 22px 26px;
  border-radius: 20px;
  border: none;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  font-family: var(--font-sans, "Inter", "SF Pro Display", system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
  color: var(--text-primary, rgba(255, 255, 255, 0.92));
}
.widget--email * {
  box-sizing: border-box;
}
.widget__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.widget__header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.widget__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: none;
  cursor: pointer;
}
.widget__icon-btn svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.7);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.widget__title {
  margin: 0;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-primary);
}
.widget__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent-green, #58df70);
  box-shadow: 0 0 8px rgba(88, 223, 112, 0.6);
  animation: emlDotPulse 2.6s ease-in-out infinite;
  margin-top: -4px !important;
}
.widget__header-right {
  display: flex;
  align-items: center;
  gap: 2px;
}
.widget__action {
  display: inline-flex;
  padding: 7px;
  border: none;
  background: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.6);
  transition: opacity 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.widget__action[data-action="collapse"] svg {
  transition: transform 0.4s cubic-bezier(0.3, 1.2, 0.4, 1);
}
.widget__action svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.widget__action:hover {
  opacity: 0.7;
}
.widget__action[data-action="pin"] svg {
  transform: rotate(40deg);
}
.widget__body {
  /* overflow-x only — the shared fixed-box rule owns overflow-y so the footer
     rows below the list stay reachable. */
  overflow-x: hidden;
  transition: max-height 260ms ease, opacity 200ms ease;
}
.widget--email.is-collapsed .widget__body,
.widget--email.collapsed .widget__body {
  max-height: 0;
  opacity: 0;
}
.widget--email.collapsed .eml-menu {
  display: none;
}
.widget--email.is-collapsed .widget__header,
.widget--email.collapsed .widget__header {
  margin-bottom: 0;
}
.widget--email.collapsed .widget__action[data-action="collapse"] svg {
  transform: rotate(180deg);
}
.widget__section-label {
  margin: 8px 0 16px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
}
.email-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.email-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 150ms ease;
}
.email-row:hover:not(.is-selected) {
  background: rgba(255, 255, 255, 0.03);
}
.email-row.is-selected {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.025) 100%);
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  border: none;
  box-shadow: none;
}
.email-row.is-selected::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.6)) drop-shadow(0 0 14px rgba(255, 255, 255, 0.32)) drop-shadow(0 0 30px rgba(255, 255, 255, 0.16));
}
.email-row__avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}
.email-row__main {
  flex: 1;
  min-width: 0;
}
.email-row__top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.email-row__name {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}
.email-badge {
  display: inline-flex;
  flex-shrink: 0;
  white-space: nowrap;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
}
.email-row__preview {
  margin: 0 0 6px;
  white-space: normal;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary);
}
.email-row__meta {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}
.email-row__actions {
  display: flex;
  align-items: center;
  align-self: center;
  gap: 16px;
  flex-shrink: 0;
}
.email-row__act {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.52);
  transition: color 150ms ease;
}
.email-row__act svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.email-row__act:hover {
  color: rgba(255, 255, 255, 0.85);
}
.widget__footer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 22px;
}
.footer-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.65);
}
.footer-row__icon,
.footer-insight__icon,
.footer-sync__icon {
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.footer-row__icon {
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.6);
}
.footer-row__text {
  flex: 1;
}
.footer-row__chevron {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--text-tertiary, rgba(255, 255, 255, 0.4));
}
.footer-insight {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.9);
}
.footer-insight__icon {
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.85);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.25));
}
.footer-sync {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.43);
}
.footer-sync__icon {
  width: 16px;
  height: 16px;
  color: rgba(255, 255, 255, 0.43);
}

/* ---------- Email widget: living layer ---------- */
.email-row__name {
  color: var(--eml-name);
}
.email-row__preview {
  color: var(--eml-preview);
}
.email-row__meta {
  color: var(--eml-meta);
}
.email-badge {
  border-color: rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.78);
}
.email-row__avatar {
  border-color: var(--eml-ring);
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.email-row.is-selected .email-row__avatar {
  background: transparent;
  border-color: var(--eml-ring);
  color: rgba(255, 255, 255, 0.92);
}
.email-row {
  will-change: transform, opacity;
}

/* hover cross-highlight: row <-> its actions, insight <-> Andreas row */
.email-row:hover .email-row__act,
.email-row.is-linked .email-row__act {
  color: rgba(255, 255, 255, 0.72);
}
.email-row.is-linked {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
}
.footer-insight {
  border-radius: 10px;
  transition: color 0.2s ease;
  cursor: default;
}
.footer-insight.is-hot .footer-insight__text {
  color: #fff;
}

/* action press / fire feedback */
.email-row__act:active {
  transform: scale(0.9);
}
.email-row__act.is-firing {
  color: var(--accent-green);
}

/* empty / caught-up state */
.eml-empty {
  list-style: none;
  padding: 22px 12px;
  text-align: center;
  font-size: 13.5px;
  color: var(--text-tertiary, rgba(255, 255, 255, 0.4));
}

/* status dot pulse */
@keyframes emlDotPulse {
  0%, 100% { box-shadow: 0 0 6px 0 rgba(88, 223, 112, 0.5); }
  50% { box-shadow: 0 0 12px 2px rgba(88, 223, 112, 0.95); }
}
/* sparkle twinkle on the insight glyph */
.footer-insight__icon {
  animation: emlTwinkle 3.6s ease-in-out infinite;
}
@keyframes emlTwinkle {
  0%, 100% { opacity: 0.82; filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.25)); transform: scale(1); }
  50% { opacity: 1; filter: drop-shadow(0 0 9px rgba(255, 255, 255, 0.6)); transform: scale(1.08); }
}
/* accent line slow breathing */
.email-row.is-selected::before {
  animation: emlAccentBreath 4.5s ease-in-out infinite;
}
@keyframes emlAccentBreath {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 1; transform: scaleY(1.02); }
}
/* periodic calm sync spin (a single turn every ~9s) */
.footer-sync__icon {
  transform-origin: 50% 50%;
  animation: emlSyncSpin 9s ease-in-out infinite;
}
@keyframes emlSyncSpin {
  0%, 80% { transform: rotate(0deg); }
  92%, 100% { transform: rotate(360deg); }
}

/* pinned state */
.widget--email.is-pinned .widget__action[data-action="pin"] {
  color: #fff;
}

/* menu popover */
.eml-menu {
  position: absolute;
  top: 54px;
  right: 20px;
  z-index: 40;
  min-width: 160px;
  padding: 6px;
  border-radius: 12px;
  background: rgba(20, 22, 26, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  display: none;
}
.eml-menu.is-open {
  display: block;
  animation: emlPop 0.2s cubic-bezier(0.2, 1.2, 0.4, 1);
}
@keyframes emlPop {
  from { opacity: 0; transform: translateY(6px) scale(0.97); }
}
.eml-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 11px;
  border: none;
  background: none;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.82);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.eml-menu button:hover {
  background: rgba(255, 255, 255, 0.07);
}

/* particles */
.eml-pt {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: #fff;
  mix-blend-mode: screen;
  z-index: 30;
}

@media (prefers-reduced-motion: reduce) {
  .widget__status-dot,
  .footer-insight__icon,
  .email-row.is-selected::before,
  .footer-sync__icon {
    animation: none !important;
  }
}

/* ===================== HIDDEN WIDGETS =====================
   Toggle block: to bring these widgets back, delete this whole block. */
.schedule-offset-panel,
.passenger-volume-panel,
.control-panel {
  display: none !important;
}
/* =================== END HIDDEN WIDGETS =================== */

/* ===================== ENERGY WIDGET ===================== */
.energy-widget {
  position: absolute;
  z-index: 5;
  width: 820px;
  max-width: 92vw;
  display: flex;
  flex-direction: column;
  padding: 18px 22px 16px;
  border-radius: 20px;
  background:
    linear-gradient(
      145deg,
      rgba(38, 42, 41, 0.6) 0%,
      rgba(26, 30, 29, 0.58) 100%
    );
  backdrop-filter: blur(26px) saturate(135%);
  -webkit-backdrop-filter: blur(26px) saturate(135%);
  border: none;
  box-shadow: none;
}
.energy-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.energy-head-left {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.energy-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: rgb(78 78 78 / 12%);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.energy-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--text-secondary);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.energy-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.energy-status-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.65);
}
.energy-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.energy-action {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  display: inline-flex;
  color: var(--text-muted);
  transition: color 0.15s ease;
}
.energy-action:hover {
  color: var(--text-secondary);
}
.energy-action svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.energy-body {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
  overflow: hidden;
  transition: opacity 0.25s ease;
}
.energy-widget.collapsed .energy-body {
  display: none;
}
.energy-widget.collapsed [data-energy-toggle] svg {
  transform: rotate(-90deg);
}
.energy-chart {
  position: relative;
}
.energy-svg {
  display: block;
  width: 100%;
  height: 150px;
}
.energy-baseline {
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 1;
}
.energy-main-line {
  stroke: url(#energyLineFade);
  stroke-width: 2.2;
  stroke-linecap: round;
  fill: none;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 1)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 16px rgba(255, 255, 255, 0.55)) drop-shadow(0 0 44px rgba(255, 255, 255, 0.3));
}
.energy-ghost-line {
  stroke: rgba(245, 245, 240, 0.22);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 0.5 7;
  fill: none;
}
.energy-current-line {
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 1;
}
.energy-current-dot {
  fill: var(--accent-green);
  filter: drop-shadow(0 0 4px rgba(79, 216, 121, 0.9)) drop-shadow(0 0 14px rgba(79, 216, 121, 0.55));
}
.energy-now {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.energy-now-tag {
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}
.energy-now-peak {
  font-size: 13px;
  color: var(--text-primary);
}
.energy-now-value {
  font-size: 11px;
  color: var(--text-muted);
}
.energy-x-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 10px;
  color: var(--text-muted);
}
.energy-section-title {
  margin-top: 20px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.energy-windows {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}
.energy-window-card {
  flex: 1;
  min-width: 180px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgb(78 78 78 / 10%);
  border: none;
  box-shadow: none;
}
.energy-window-card.muted {
  opacity: 0.5;
}
.energy-window-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgb(78 78 78 / 12%);
  color: var(--text-secondary);
}
.energy-window-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.energy-window-text {
  min-width: 0;
}
.energy-window-range {
  font-size: 13px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.energy-window-desc {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.energy-recommend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-primary);
}
.energy-recommend-spark {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.energy-footer {
  margin-top: 12px;
  padding-left: 4px;
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0.85;
}

/* ===================== CALENDAR WIDGET ===================== */
.calendar-widget {
  position: absolute;
  z-index: 5;
  width: var(--h-widget-width);
  height: var(--h-widget-height);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 22px 22px 20px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: none;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
}
.calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.calendar-head-left {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}
.calendar-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.calendar-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--text-primary);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.calendar-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
}
.calendar-status-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.65);
}
.calendar-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.calendar-action {
  background: none;
  border: none;
  cursor: pointer;
  padding: 7px;
  display: inline-flex;
  color: var(--text-primary);
  transition: opacity 0.15s ease;
}
.calendar-action:hover {
  opacity: 0.7;
}
.calendar-action svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.calendar-action-pin svg {
  transform: rotate(40deg);
}
.calendar-body {
  display: grid;
  grid-template-columns: 1fr 330px;
  gap: 24px;
  margin-top: 18px;
}
.calendar-widget.collapsed {
  padding-bottom: 22px;
  height: auto;
}
.calendar-widget.collapsed .calendar-body {
  display: none;
}
.calendar-widget.collapsed [data-calendar-toggle] svg {
  transform: rotate(-90deg);
}
.calendar-main {
  min-width: 0;
  padding: 0 8px;
  display: flex;
  flex-direction: column;
}
.calendar-monthbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 calc(100% / 24) 0 calc(100% / 20);
}
.calendar-month {
  font-size: 20px;
  font-weight: 450;
  color: var(--text-primary);
}
.calendar-nav {
  display: flex;
  align-items: center;
  gap: 35px;
}
.calendar-nav-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  display: inline-flex;
  color: var(--text-primary);
  transition: opacity 0.15s ease;
}
.calendar-nav-btn:hover {
  opacity: 0.7;
}
.calendar-nav-btn svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-top: 16px;
  font-size: 14px;
  color: var(--text-muted);
}
.calendar-weekdays span {
  text-align: center;
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 6px;
  margin-top: 8px;
}
.cal-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 40px;
}
.cal-num {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 18px;
  color: var(--text-primary);
}
.cal-muted .cal-num {
  color: var(--text-muted);
  opacity: 0.55;
}
.cal-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 6px;
  margin-top: -6px;
}
.cal-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
}
.cal-day.cal-selected,
.cal-day.cal-outlined {
  justify-self: center;
  border-radius: 50%;
  gap: 1px;
}
.cal-day.cal-selected {
  margin-top: 10px;
  width: 46px;
  height: 46px;
  background: rgba(232, 235, 230, 0.9);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.18);
}
.cal-day.cal-outlined {
  margin-top: 12px;
  justify-content: center;
  width: 40px;
  height: 34px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.cal-outlined .cal-dots {
  display: none;
}
.cal-selected .cal-num {
  position: relative;
  top: 0px;
  width: auto;
  height: auto;
  color: #10130f;
  font-weight: 600;
  background: none;
  box-shadow: none;
}
.cal-selected .cal-dots {
  position: relative;
  top: 0px;
  margin-top: 0;
  gap: 2px;
}
.cal-selected .cal-dots i {
  background: rgba(20, 22, 18, 0.55);
}
.cal-outlined .cal-num {
  width: auto;
  height: auto;
  line-height: 1;
  border: none;
}
.calendar-details {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.012) 100%);
  border-radius: 20px;
  padding: 26px 30px;
  display: flex;
  flex-direction: column;
}
.calendar-details-title {
  font-size: 22px;
  font-weight: 450;
  color: var(--text-primary);
}
.calendar-events {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 46px;
}
.calendar-event {
  position: relative;
  display: grid;
  grid-template-columns: 68px 1fr;
  align-items: center;
  gap: 34px;
}
.calendar-event::before {
  content: "";
  position: absolute;
  left: -30px;
  right: -30px;
  top: -30px;
  bottom: -30px;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(115% 82% at 72% 50%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 48%, transparent 80%);
  filter: blur(6px);
}
.calendar-event::after {
  content: "";
  position: absolute;
  left: -18px;
  right: -18px;
  bottom: -22px;
  height: 4px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.38) 50%, transparent 100%);
  filter: blur(4px);
}
.calendar-event > * {
  position: relative;
  z-index: 1;
}
.calendar-event-time {
  font-size: 18px;
  color: var(--text-muted);
}
.calendar-event-name {
  font-size: 18px;
  color: var(--text-primary);
}
.calendar-insight {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 26px;
  line-height: 1;
  font-size: 17px;
  color: var(--text-secondary);
}
.calendar-insight span {
  position: relative;
  top: -4px;
}
.calendar-insight-spark {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  fill: none;
  stroke: var(--text-primary);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ===================== HYDRATION WIDGET ===================== */
.hydration-widget {
  position: absolute;
  z-index: 5;
  zoom: 0.87;
  width: calc(var(--v-widget-width) / 0.87);
  height: calc(var(--v-widget-height) / 0.87);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 30px 30px 30px;
  border-radius: 26px;
  background: linear-gradient(160deg, rgba(32, 35, 34, 0.16) 0%, rgba(14, 16, 15, 0.12) 100%);
  backdrop-filter: blur(26px) saturate(120%);
  -webkit-backdrop-filter: blur(26px) saturate(120%);
  border: none;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
}
.hydration-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.hydration-head-left {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}
.hydration-icon svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: var(--text-primary);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hydration-title {
  font-size: 19px;
  font-weight: 500;
  color: var(--text-primary);
  position: relative;
  top: 0;
}
.hydration-status-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.65);
}
.hydration-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.hydration-action {
  background: none;
  border: none;
  cursor: pointer;
  padding: 7px;
  display: inline-flex;
  color: var(--text-primary);
  transition: opacity 0.15s ease;
}
.hydration-action:hover {
  opacity: 0.7;
}
.hydration-action svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hydration-action-pin svg {
  transform: rotate(40deg);
}
.hydration-widget.collapsed .hydration-body {
  display: none;
}
.hydration-widget.collapsed {
  padding-bottom: 26px;
}
.hydration-widget.collapsed [data-hydration-toggle] svg {
  transform: rotate(-90deg);
}
.hydration-body {
  display: flex;
  flex-direction: column;
  /* The widget pads 30px; the body borrows it so the wave still reaches both
     edges, and children keep their height so the body scrolls instead. */
  margin: 20px -30px 0;
  padding: 0 30px;
}
.hydration-body > * {
  flex-shrink: 0;
}
.hydration-value {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.hydration-num {
  font-size: 88px;
  font-weight: 250;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.hydration-unit {
  font-size: 43px;
  font-weight: 300;
  color: var(--text-primary);
}
.hydration-sub {
  margin-top: 12px;
  font-size: 20px;
  color: var(--text-muted);
}
.hydration-wave {
  position: relative;
  margin-top: -14px;
  margin-left: -30px;
  margin-right: -30px;
  height: 170px;
  overflow: hidden;
}
.hydration-target {
  position: absolute;
  top: 0;
  right: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 2;
}
.hydration-target-line {
  width: 60px;
  height: 1px;
  background: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.4) 0 6px, transparent 6px 10px);
  position: relative;
  top: 2px;
}
.hydration-target-text {
  font-size: 15px;
  color: var(--text-muted);
}
.hydration-wave-svg {
  display: block;
  width: 100%;
  height: 100%;
}
.hydro-line {
  fill: none;
  stroke: #ffffff;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 1.5px rgba(255, 255, 255, 0.95)) drop-shadow(0 4px 6px rgba(255, 255, 255, 0.45)) drop-shadow(0 8px 12px rgba(255, 255, 255, 0.24));
}
.hydro-line-1 {
  stroke-width: 2.2;
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 1)) drop-shadow(0 0 2.5px rgba(255, 255, 255, 0.95)) drop-shadow(0 3px 6px rgba(255, 255, 255, 0.6)) drop-shadow(0 8px 13px rgba(255, 255, 255, 0.3));
}
.hydro-line-2 {
  stroke-width: 1.5;
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 1)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.85)) drop-shadow(0 3px 5px rgba(255, 255, 255, 0.4)) drop-shadow(0 7px 10px rgba(255, 255, 255, 0.16));
}
.hydro-line-3 {
  stroke-width: 1.05;
  filter: drop-shadow(0 0 0.8px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 1.6px rgba(255, 255, 255, 0.7)) drop-shadow(0 3px 5px rgba(255, 255, 255, 0.28)) drop-shadow(0 6px 9px rgba(255, 255, 255, 0.12));
}
.hydro-line-glow {
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.16;
  filter: blur(9px);
}
.hydro-line,
.hydro-line-glow {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
}
.hydro-line-1 {
  animation: hydroSurface 3.3s ease-in-out infinite;
}
.hydro-line-2 {
  animation: hydroSurface 4.1s ease-in-out infinite;
  animation-delay: -1.6s;
}
.hydro-line-3 {
  animation: hydroSurface 3.7s ease-in-out infinite;
  animation-delay: -2.7s;
}
@keyframes hydroSurface {
  0%, 100% {
    transform: translateY(2px) scale(1, 0.88);
  }
  50% {
    transform: translateY(-2px) scale(1.015, 1.12);
  }
}
.hydro-spill {
  filter: blur(7px);
}
.hydro-underglow {
  fill: none;
  stroke: #ffffff;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.4;
  filter: blur(14px);
}
.hydro-underglow-soft {
  fill: none;
  stroke: #ffffff;
  stroke-width: 18;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.22;
  filter: blur(26px);
}
.hydro-specks circle {
  fill: rgba(255, 255, 255, 0.28);
}
.hydration-headline {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 22px;
  color: var(--text-primary);
}
.hydration-headline-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.65);
}
.hydration-rows {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.hydration-row {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 16px;
}
.hydration-row-icon {
  width: 32px;
  height: 32px;
  margin-top: 0;
  fill: none;
  stroke: var(--text-secondary);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hydration-row-text {
  font-size: 18px;
  line-height: 1.45;
  color: var(--text-secondary);
  position: relative;
  top: -2px;
}
.hydration-buttons {
  display: flex;
  gap: 10px;
  margin-top: 28px;
}
.hydration-btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 999px;
  cursor: pointer;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.025) 100%);
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  border: none;
  color: var(--text-primary);
  font-size: 18px;
  transition: background 0.15s ease;
}
.hydration-btn:hover {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
}
.hydration-btn-plus {
  font-size: 30px;
  color: var(--text-secondary);
}
.hydration-btn-icon {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  position: relative;
  top: -2px;
}
.hydration-footer {
  margin-top: 37px;
  font-size: 14px;
  color: var(--text-muted);
}

/* ===================== SELF-COMPASSION WIDGET ===================== */
.selfcomp-widget {
  position: absolute;
  z-index: 5;
  width: var(--v-widget-width);
  height: var(--v-widget-height);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 22px 24px 32px;
  border-radius: 26px;
  background: linear-gradient(160deg, rgba(30, 32, 34, 0.18) 0%, rgba(12, 14, 16, 0.14) 100%);
  backdrop-filter: blur(26px) saturate(120%);
  -webkit-backdrop-filter: blur(26px) saturate(120%);
  border: none;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
}
.selfcomp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.selfcomp-head-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.selfcomp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.selfcomp-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--text-primary);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.selfcomp-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
}
.selfcomp-status-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
}
.selfcomp-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.selfcomp-action {
  background: none;
  border: none;
  cursor: pointer;
  padding: 7px;
  display: inline-flex;
  color: var(--text-primary);
  transition: opacity 0.15s ease;
}
.selfcomp-action:hover {
  opacity: 0.7;
}
.selfcomp-action svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.selfcomp-action-pin svg {
  transform: rotate(40deg);
}
.selfcomp-widget.collapsed .selfcomp-body {
  display: none;
}
.selfcomp-widget.collapsed {
  padding-bottom: 24px;
}
.selfcomp-widget.collapsed [data-selfcomp-toggle] svg {
  transform: rotate(-90deg);
}
.selfcomp-body {
  display: flex;
  /* The widget pads 24px; the body borrows it so the stage still reaches both
     edges. The body itself fills the box — only .selfcomp-scroll scrolls. */
  flex: 1;
  min-height: 0;
  flex-direction: column;
  margin: 16px -24px 0;
  padding: 0 24px;
}
.selfcomp-body > *:not(.selfcomp-scroll) {
  flex-shrink: 0;
}
.selfcomp-sub {
  font-size: 15px;
  color: var(--text-muted);
}
.selfcomp-stage {
  position: relative;
  margin: 36px -24px 0;
  height: 248px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 88%, transparent 100%);
}
.selfcomp-wave-svg {
  display: block;
  width: 100%;
  height: 100%;
}
.sc-lightspill {
  opacity: 0.5;
  filter: blur(38px);
  animation: scHorizon 7s ease-in-out infinite;
}
.sc-halo-1 {
  opacity: 0.7;
  filter: blur(30px);
  animation: scHorizon 6.5s ease-in-out infinite;
}
.sc-halo-2 {
  opacity: 0.6;
  filter: blur(20px);
  animation: scHorizon 5.5s ease-in-out infinite;
}
.sc-downglow {
  opacity: 0.5;
  filter: blur(26px);
  animation: scHorizon 6.5s ease-in-out infinite;
}
.sc-downcone {
  opacity: 0.7;
  filter: blur(17px);
  animation: scHorizon 7s ease-in-out infinite;
}
.sc-horizon {
  filter: blur(20px);
  animation: scHorizon 6s ease-in-out infinite;
}
.sc-bloom {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0.48;
  filter: blur(23px);
  animation: scBloom 5s ease-in-out infinite;
}
.sc-lightcore {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0.52;
  filter: blur(6px) drop-shadow(0 0 6px rgba(255, 255, 255, 0.34)) drop-shadow(0 0 16px rgba(255, 255, 255, 0.18));
  animation: scCore 5s ease-in-out infinite;
}
.sc-lightstreak {
  transform-box: fill-box;
  transform-origin: center;
  filter: blur(1.4px) drop-shadow(0 0 4px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 12px rgba(255, 255, 255, 0.6)) drop-shadow(0 0 26px rgba(255, 255, 255, 0.32));
  animation: scCore 5s ease-in-out infinite;
}
.sc-wave-group {
  transform-box: fill-box;
}
.sc-wave-stream {
  animation: scStream 15s linear infinite;
}
.sc-wave-glow-wide {
  fill: none;
  stroke: #ffffff;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.1;
  vector-effect: non-scaling-stroke;
  filter: blur(6px);
}
.sc-wave-glow {
  fill: none;
  stroke: #ffffff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.22;
  vector-effect: non-scaling-stroke;
  filter: blur(4px);
}
.sc-wave-glare {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.32;
  filter: url(#scAstig);
}
.sc-wave-ghost {
  fill: none;
  stroke: #ffffff;
  stroke-width: 0.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.16;
  transform: translate(3px, -2px);
  filter: blur(1.6px);
}
.sc-wave-core {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 7px rgba(255, 255, 255, 0.7)) drop-shadow(0 0 16px rgba(255, 255, 255, 0.4));
}
@keyframes scStream {
  from { transform: translate(0px, 0px); }
  to { transform: translate(425px, 140px); }
}
.sc-wave-travel {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
  stroke-dasharray: 46 1200;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.7));
  animation: scTravel 5.5s linear infinite;
}
.sc-wave-shatter {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.35;
  filter: url(#scShatter) blur(0.6px);
}
.sc-wave-shards {
  fill: none;
  stroke: #ffffff;
  stroke-width: 0.55;
  stroke-linecap: round;
  stroke-dasharray: 3 4 1.5 5 2.5 3 1 6 2 4 3.5 2;
  opacity: 0.85;
  filter: url(#scShatter) drop-shadow(0 0 2px rgba(255, 255, 255, 0.85));
  animation: scShards 7s linear infinite;
}
.sc-wave-sparks circle {
  fill: #ffffff;
  opacity: 0;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9));
  animation: scSpark 3.6s ease-in-out infinite;
}
.sc-wave-sparks circle:nth-child(3n) { animation-duration: 4.4s; animation-delay: 0.6s; }
.sc-wave-sparks circle:nth-child(3n+1) { animation-duration: 3.2s; animation-delay: 1.2s; }
.sc-wave-sparks circle:nth-child(4n) { animation-delay: 1.9s; }
.sc-wave-sparks circle:nth-child(5n) { animation-delay: 2.6s; }
.sc-wave-electric {
  fill: none;
  stroke: #dff1ff;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#scRaggedLeft) drop-shadow(0 0 2px rgba(210, 235, 255, 0.9)) drop-shadow(0 0 6px rgba(160, 205, 255, 0.55));
  animation: scElectric 1.5s ease-in-out infinite;
}
@keyframes scElectric {
  0%, 100% { opacity: 0.5; }
  10% { opacity: 1; }
  18% { opacity: 0.35; }
  30% { opacity: 0.9; }
  45% { opacity: 0.5; }
  60% { opacity: 1; }
  72% { opacity: 0.4; }
  85% { opacity: 0.85; }
}
.sc-wave-drips circle {
  fill: #eaf5ff;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 0 2px rgba(200, 230, 255, 0.9));
  animation: scDrip 2.4s ease-in infinite;
}
.sc-wave-drips circle:nth-child(2) { animation-duration: 3s; animation-delay: 0.7s; }
.sc-wave-drips circle:nth-child(3) { animation-duration: 2.7s; animation-delay: 1.3s; }
.sc-wave-drips circle:nth-child(4) { animation-duration: 3.3s; animation-delay: 0.4s; }
.sc-wave-drips circle:nth-child(5) { animation-duration: 2.9s; animation-delay: 1.8s; }
@keyframes scDrip {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: 1; }
  70% { opacity: 0.65; }
  100% { transform: translateY(30px); opacity: 0; }
}
.sc-ripple {
  fill: none;
  stroke: #ffffff;
  stroke-width: 0.8;
  stroke-linecap: round;
  filter: drop-shadow(0 0 1.4px rgba(255, 255, 255, 1)) drop-shadow(0 0 4px rgba(224, 238, 255, 0.55));
}
.sc-ripple-2 {
  opacity: 0.92;
}
.sc-ripple-accent {
  opacity: 0.75;
  stroke-width: 1;
}
.sc-ripple-fine {
  opacity: 0.6;
  stroke-width: 0.55;
}
.sc-ripples path {
  transform-box: fill-box;
  transform-origin: center;
  animation: scRippleDepth 5s ease-in-out infinite;
  will-change: transform;
}
.sc-ripples path:nth-child(1) { animation-duration: 2.3s; animation-delay: -0.3s; }
.sc-ripples path:nth-child(2) { animation-duration: 2.9s; animation-delay: -0.8s; }
.sc-ripples path:nth-child(3) { animation-duration: 3.2s; animation-delay: -1.4s; }
.sc-ripples path:nth-child(4) { animation-duration: 2.6s; animation-delay: -1.9s; }
.sc-ripples path:nth-child(5) { animation-duration: 3.5s; animation-delay: -0.6s; }
.sc-ripples path:nth-child(6) { animation-duration: 3.8s; animation-delay: -1.1s; }
@keyframes scRippleDepth {
  0%, 100% {
    transform: translateY(2px) scale(0.8, 0.35);
    filter: drop-shadow(0 0 0.8px rgba(255, 255, 255, 0.55)) drop-shadow(0 0 2.5px rgba(224, 238, 255, 0.2));
  }
  50% {
    transform: translateY(-2.5px) scale(1.24, 2.25);
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 1)) drop-shadow(0 0 16px rgba(224, 238, 255, 1));
  }
}
@keyframes scUndulate {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50% { transform: translateY(-3px) scaleY(1.03); }
}
@keyframes scTravel {
  from { stroke-dashoffset: 1246; }
  to { stroke-dashoffset: 0; }
}
@keyframes scBloom {
  0%, 100% { opacity: 0.82; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.09); }
}
@keyframes scCore {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.12); }
}
@keyframes scHorizon {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.85; }
}
@keyframes scShards {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -44; }
}
@keyframes scSpark {
  0%, 100% { opacity: 0; }
  50% { opacity: 0.9; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-horizon, .sc-bloom, .sc-lightcore, .sc-wave-group, .sc-wave-stream,
  .sc-wave-shards, .sc-wave-sparks circle, .sc-wave-electric, .sc-wave-drips circle,
  .sc-ripples path, .hydro-line, .hydro-line-glow, .hydro-spill {
    animation: none;
  }
}
.selfcomp-message {
  position: absolute;
  top: 4px;
  right: 26px;
  width: 196px;
  text-align: left;
  pointer-events: none;
}
.selfcomp-message-title {
  font-size: 23px;
  font-weight: 300;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--text-secondary);
}
.selfcomp-message-sub {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}
.selfcomp-timeline {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 34px 0 2px;
}
.selfcomp-tl-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  color: var(--text-muted);
}
.selfcomp-tl-item:last-child {
  color: var(--text-primary);
}
.selfcomp-tl-label {
  font-size: 14px;
  color: inherit;
}
.selfcomp-tl-tick {
  width: 1px;
  height: 8px;
  background: #6b6b70;
}
.selfcomp-tl-item:last-child .selfcomp-tl-tick {
  background: #ededed;
}
.selfcomp-restnote {
  margin-top: 12px;
  text-align: right;
  padding-right: 34px;
  font-size: 13px;
  color: var(--text-muted);
}
.selfcomp-record {
  margin-top: 16px;
  padding: 18px 20px;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
}
.selfcomp-record-label {
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--text-muted);
}
.selfcomp-record-line {
  margin-top: 12px;
  font-size: 15px;
  color: var(--text-secondary);
}
.selfcomp-note-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 14px;
}
.selfcomp-note-divider {
  margin-top: 8px;
  padding-top: 16px;
}
.selfcomp-note-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-top: 1px;
  fill: none;
  stroke: var(--text-secondary);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.selfcomp-note-text {
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-muted);
}
.selfcomp-neura {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-primary);
}
.selfcomp-note-divider .selfcomp-note-text {
  font-size: 15px;
  margin-top: -2px;
}
.selfcomp-note-divider .selfcomp-note-icon {
  stroke: var(--text-muted);
  width: 30px;
  height: 30px;
  margin-top: -6px;
}
.selfcomp-action-row {
  align-items: center;
}
.selfcomp-action-row .selfcomp-note-text {
  color: var(--text-primary);
  margin-top: -3px;
}
.selfcomp-footer {
  margin-top: 18px;
  font-size: 13px;
  color: var(--text-muted);
}

/* ===================== FOCUS LEVEL WIDGET ===================== */
.focus-level-widget {
  position: absolute;
  z-index: 5;
  zoom: 0.9;
  width: calc(var(--v-widget-width) / 0.9);
  height: calc(var(--v-widget-height) / 0.9);
  max-width: 92vw;
  display: flex;
  flex-direction: column;
  padding: 28px 26px 20px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: none;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  color: var(--text-primary);
}
.focus-level-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.focus-level-head-left {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.focus-level-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.focus-level-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.72);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.focus-level-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.focus-level-status-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
}
.focus-level-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.focus-level-action {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  display: inline-flex;
  color: var(--text-primary);
  transition: color 0.15s ease, transform 0.25s ease;
}
.focus-level-action:hover {
  color: var(--text-secondary);
}
.focus-level-action:active {
  transform: scale(0.92);
}
.focus-level-action.pinned {
  color: var(--text-primary);
}
.focus-level-action svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.focus-level-action[aria-label="Pin"] svg {
  transform: rotate(40deg);
}
.focus-level-action[aria-label="More"] svg {
  fill: currentColor;
  stroke: none;
}
.focus-level-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
  min-height: 0;
  transition: opacity 0.2s ease;
}
.focus-level-widget.collapsed .focus-level-body {
  display: none;
}
.focus-level-viz {
  position: relative;
  width: 100%;
  margin: -8px 0 0;
  flex-shrink: 0;
  overflow: visible;
}
.focus-level-viz::after {
  content: "";
  position: absolute;
  left: 50.5%;
  top: 52%;
  width: 64%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.32) 0%,
    rgba(255, 255, 255, 0.15) 22%,
    rgba(255, 255, 255, 0.06) 40%,
    rgba(255, 255, 255, 0.022) 58%,
    transparent 78%
  );
  filter: blur(18px);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 2;
}
.focus-level-score,
.focus-level-tag,
.focus-level-holding {
  z-index: 3;
}
.focus-tree {
  position: relative;
  display: block;
  width: 106%;
  margin-left: -3%;
  aspect-ratio: 800 / 790;
  overflow: visible;
  filter:
    brightness(1.45)
    drop-shadow(0 0 2px rgba(255, 255, 255, 1))
    drop-shadow(0 0 6px rgba(255, 255, 255, 0.8))
    drop-shadow(0 0 14px rgba(255, 255, 255, 0.5))
    drop-shadow(0 0 26px rgba(255, 255, 255, 0.34))
    drop-shadow(0 0 46px rgba(255, 255, 255, 0.22));
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.35) 12%, #000 26%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.35) 12%, #000 26%);
}
.focus-pulse {
  pointer-events: none;
  mix-blend-mode: screen;
  filter:
    brightness(1.4)
    drop-shadow(0 0 4px rgba(255, 255, 255, 0.65))
    drop-shadow(0 0 9px rgba(255, 255, 255, 0.35));
}
.focus-strand {
  transform-box: view-box;
  transform-origin: 404px 520px;
  animation: focusBreezeMd 11s ease-in-out infinite;
  will-change: transform;
}
.focus-strand.fb-sm { animation-name: focusBreezeSm; }
.focus-strand.fb-md { animation-name: focusBreezeMd; }
.focus-strand.fb-lg { animation-name: focusBreezeLg; }
.focus-connector-img { opacity: 0.9; }
.focus-level-score {
  position: absolute;
  left: 62%;
  top: 60%;
  transform: translateY(-45%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.focus-level-score-num {
  font-size: 76px;
  font-weight: 100;
  line-height: 0.9;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.95);
}
.focus-level-score-label {
  margin-top: 10px;
  margin-left: 3px;
  font-size: 14px;
  color: var(--text-secondary);
}
.focus-level-score-label em {
  font-style: normal;
  color: var(--text-secondary);
}
.focus-level-tag {
  position: absolute;
  right: 2%;
  top: 43.5%;
  font-size: 14px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.focus-level-holding {
  position: absolute;
  left: 55%;
  top: 94%;
  font-size: 14px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.focus-level-scale {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: -10px 0 18px;
}
.focus-level-step {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font: inherit;
}
.focus-level-step-label {
  font-size: 16px;
  color: var(--text-secondary);
  transition: color 0.2s ease;
}
.focus-level-step-tick {
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.16);
  transition: background 0.2s ease, height 0.2s ease;
}
.focus-level-step:hover .focus-level-step-label {
  color: var(--text-secondary);
}
.focus-level-step.is-active .focus-level-step-label {
  color: var(--text-primary);
}
.focus-level-step.is-active .focus-level-step-tick {
  background: rgba(255, 255, 255, 0.85);
}
.focus-level-session {
  border-radius: 16px;
  padding: 16px 18px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.025) 100%);
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  border: none;
  box-shadow: none;
}
.focus-level-session-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
}
.focus-level-session-meta {
  margin-top: 7px;
  font-size: 15px;
  color: var(--text-muted);
}
.focus-level-notes {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.focus-level-note-stats {
  font-size: 16px;
  color: var(--text-muted);
}
.focus-level-note-holding {
  font-size: 15px;
  color: var(--text-primary);
}
.focus-level-note-holding strong {
  font-weight: 600;
  color: var(--text-primary);
}
.focus-level-note-tip {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 16px;
  color: var(--text-secondary);
}
.focus-level-note-tip span {
  margin-top: 1px;
}
.focus-level-note-spark {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.focus-level-footer {
  margin-top: 4px;
  font-size: 14px;
  color: var(--text-muted);
}
@keyframes focusCorePulse {
  from { opacity: 0.85; }
  to { opacity: 1; }
}
@keyframes focusBreezeSm {
  0% { transform: rotate(-0.8deg); }
  25% { transform: rotate(0.6deg); }
  50% { transform: rotate(-0.35deg); }
  75% { transform: rotate(0.65deg); }
  100% { transform: rotate(-0.8deg); }
}
@keyframes focusBreezeMd {
  0% { transform: rotate(-1.35deg); }
  28% { transform: rotate(1deg); }
  52% { transform: rotate(-0.65deg); }
  78% { transform: rotate(1.15deg); }
  100% { transform: rotate(-1.35deg); }
}
@keyframes focusBreezeLg {
  0% { transform: rotate(-2.1deg); }
  30% { transform: rotate(1.6deg); }
  55% { transform: rotate(-1deg); }
  80% { transform: rotate(1.8deg); }
  100% { transform: rotate(-2.1deg); }
}
@media (prefers-reduced-motion: reduce) {
  .focus-strand { animation: none; }
  .focus-pulse { animation: none; opacity: 0; }
}

/* ===================== HABIT GARDEN WIDGET (embeddable) ===================== */
.habit-garden-widget{
  position:absolute; z-index:5;
  /* explicit expanded width so the shared collapsed-width/anchor guard measures a
     stable width (the card fills this; avoids an auto-width circular measurement) */
  width: calc(var(--sq-widget-width) / 0.7);
  height: calc(var(--sq-widget-height) / 0.7);
  /* widget-level scale token: brings the frame into the Focus Soundscape scale family */
  zoom: 0.7;
  --ink:#efeff1; --dim:#a2a2a9; --dimmer:#75757d; --faint:#57575e;
  --green:#7fe6a0; --line:rgba(255,255,255,.085);
  font-family: ui-sans-serif,-apple-system,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}
.habit-garden-widget *{ margin:0; padding:0; box-sizing:border-box; }
.habit-garden-widget img{ -webkit-user-drag:none; user-select:none; }
/* keep real inputs selectable/typable */
.habit-garden-widget input,
.habit-garden-widget textarea,
.habit-garden-widget [contenteditable="true"]{
  -webkit-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text;
}

/* ============ CARD ============ */
.habit-garden-widget .card{
  position:relative; z-index:1;
  width:100%;
  height:100%;
  border-radius:20px;
  padding:30px 36px 18px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border:none;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  overflow:hidden;
}
.habit-garden-widget .card::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.16; border-radius:inherit;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="matrix" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.035 0"/></filter><rect width="220" height="220" filter="url(%23n)"/></svg>');
}

/* ============ HEADER ============ */
.habit-garden-widget .header{ position:relative; z-index:3; display:flex; align-items:center; gap:16px; }
.habit-garden-widget .logo{
  width:58px !important; height:58px !important; border-radius:14px !important;
  border:1px solid rgba(255,255,255,.25);
  display:grid; place-items:center; flex:none;
  color:#e9e9ec;
  box-shadow: inset 0 0 12px rgba(255,255,255,.04);
}
.habit-garden-widget .logo svg{ width:34px; height:34px; }
.habit-garden-widget .title{ font-size:28px !important; font-weight:500; letter-spacing:.01em; display:flex; align-items:center; gap:16px; }
.habit-garden-widget .live-dot{
  width:10px; height:10px; border-radius:50%;
  background:rgb(255 255 255);
  box-shadow:0 0 8px rgb(255 255 255 / 55%);
  opacity:1; animation:none;
  align-self:center; margin-top:0; transform:none;
  position:relative; top:4px;
}
@keyframes hgLivePulse{ 0%,100%{ box-shadow:0 0 6px 1px rgba(127,230,160,.65);} 50%{ box-shadow:0 0 13px 3px rgba(127,230,160,.95);} }
.habit-garden-widget .spacer{ flex:1; }
.habit-garden-widget .hicons{ display:flex; align-items:center; gap:2px; flex-shrink:0; color:var(--ink); /* inverse-scale compensation for root zoom:0.7 so header action icons keep standard dashboard size */ zoom: 1.4286; }
.habit-garden-widget .icon-btn{
  background:none; border:none; cursor:pointer; padding:7px;
  display:inline-flex; color:inherit;
  width:auto; height:auto; border-radius:0; box-shadow:none;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  transition:opacity .15s ease, transform .25s;
}
.habit-garden-widget .icon-btn:hover{ opacity:.7; }
.habit-garden-widget .icon-btn:active{ transform:scale(.92); }
.habit-garden-widget .icon-btn.pinned{ color:var(--green); }
.habit-garden-widget .icon-btn svg{ display:block; width:24px; height:24px; fill:none; stroke:rgb(255 255 255); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.habit-garden-widget .icon-btn-pin svg{ transform:rotate(40deg); }
.habit-garden-widget #menuBtn svg{ fill:currentColor; stroke:none; }
.habit-garden-widget #chevBtn svg{ transition:transform .5s cubic-bezier(.3,1.2,.4,1); }
.habit-garden-widget.collapsed #chevBtn svg{ transform:rotate(180deg); }

/* ============ COLLAPSIBLE BODY ============ */
.habit-garden-widget .cardBody{ max-height:1400px; opacity:1; }
.habit-garden-widget.collapsed .cardBody{ display:none; }

/* ============ STARS ============ */
.habit-garden-widget .stars{ position:absolute; inset:0; z-index:0; pointer-events:none; transition:transform .6s ease-out; }
.habit-garden-widget.collapsed .stars{ display:none; }
.habit-garden-widget .star{ position:absolute; border-radius:50%; background:#fff; animation:hgTwinkle var(--d,4s) ease-in-out var(--dl,0s) infinite; }
.habit-garden-widget .star.big{ box-shadow:0 0 8px 2px rgba(255,255,255,.5); }
@keyframes hgTwinkle{ 0%,100%{ opacity:.12; transform:scale(.7);} 50%{ opacity:.95; transform:scale(1.15);} }

/* ============ GARDEN ============ */
.habit-garden-widget .garden{
  position:relative; z-index:2;
  display:flex; align-items:flex-start; gap:8px;
  padding:26px 6px 0;
}
.habit-garden-widget .garden .mist{
  position:absolute; left:-36px; right:-36px; bottom:52px; height:110px; pointer-events:none;
  background:linear-gradient(to top, rgba(255,255,255,.05), transparent 75%);
  filter:blur(6px);
  transition:transform .6s ease-out;
}
.habit-garden-widget .habit{
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center;
  animation:hgRise .9s cubic-bezier(.2,1,.3,1) backwards;
}
.habit-garden-widget .habit.w-bloom{ flex:1.28; }
.habit-garden-widget .habit.w-sprout{ flex:.86; }
@keyframes hgRise{ from{ opacity:0; transform:translateY(22px);} }

.habit-garden-widget .stage{
  position:relative; width:100%; height:422px;
  display:flex; align-items:flex-end; justify-content:center;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.habit-garden-widget .plantGrow{ transform-origin:50% 100%; transition:transform 1.1s cubic-bezier(.25,1.4,.4,1); }
.habit-garden-widget .plantScale{ transform-origin:50% 100%; }
.habit-garden-widget .plantScale.interacting{ transition:transform .5s cubic-bezier(.34,1.56,.64,1); }
.habit-garden-widget .plantScale.drink{ animation:hgDrink 1s cubic-bezier(.3,1.3,.4,1); }
@keyframes hgDrink{ 0%{ transform:scale(1);} 30%{ transform:scale(1.05,1.06);} 58%{ transform:scale(.985);} 100%{ transform:scale(1);} }
.habit-garden-widget .plantSway{ position:relative; transform-origin:50% 100%; animation:hgSway var(--sd,6s) ease-in-out var(--sdl,0s) infinite alternate; }
@keyframes hgSway{ from{ transform:rotate(-1.3deg);} to{ transform:rotate(1.5deg);} }

.habit-garden-widget .plant{
  display:block;
  filter:brightness(1);
  transition:filter .55s ease, opacity .8s ease;
}
.habit-garden-widget .plant.flash{ filter:brightness(1.42); }
.habit-garden-widget .plant-bloom{ height:367px; }
.habit-garden-widget .plant-read{ height:268px; }
.habit-garden-widget .plant-sprout{ height:121px; }
.habit-garden-widget .plant-med{ height:194px; }
.habit-garden-widget .groundStrip{ position:absolute; left:-36px; width:calc(100% + 72px); top:414px; z-index:0; pointer-events:none; }

.habit-garden-widget .stage.revived .plant{ filter:brightness(1.22) drop-shadow(0 0 20px rgba(160,255,195,.20)); }

.habit-garden-widget .soil{
  display:none;
  position:absolute; bottom:-3px; left:50%; transform:translateX(-50%);
  width:72%; height:16px; pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,255,255,.30), rgba(255,255,255,.06) 62%, transparent);
  filter:blur(1.5px);
  animation:hgSoilShimmer 5s ease-in-out infinite alternate;
}
@keyframes hgSoilShimmer{ from{ opacity:.65;} to{ opacity:1;} }
.habit-garden-widget .grain{ position:absolute; bottom:2px; border-radius:50%; background:#fff; pointer-events:none; animation:hgTwinkle var(--d,3.5s) ease-in-out var(--dl,0s) infinite; }

.habit-garden-widget .hint{
  position:absolute; top:26px; left:50%;
  transform:translateX(-50%) translateY(6px);
  font-size:10.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:#d6d6dc; background:rgba(20,20,23,.75);
  border:1px solid rgba(255,255,255,.14);
  padding:5px 12px; border-radius:999px;
  opacity:0; transition:.35s ease; pointer-events:none; white-space:nowrap;
  backdrop-filter:blur(4px);
}
.habit-garden-widget .stage:hover .hint{ opacity:1; transform:translateX(-50%) translateY(0); }

.habit-garden-widget .label{ margin-top:15px; font-size:15.5px; color:var(--dim); text-align:center; }
.habit-garden-widget .label b{ color:var(--ink); font-weight:600; }
.habit-garden-widget .sub{ margin-top:4px; font-size:12.5px; color:var(--dimmer); text-align:center; transition:opacity .6s; }
.habit-garden-widget .drop-btn{
  margin-top:10px; background:none; border:none; cursor:pointer;
  color:#8b8b93; padding:6px; border-radius:10px;
  transition:color .3s, transform .3s, filter .3s;
}
.habit-garden-widget .drop-btn:hover{ color:#eaeaee; transform:translateY(-2px); filter:drop-shadow(0 0 7px rgba(255,255,255,.45)); }
.habit-garden-widget .drop-btn:active{ transform:scale(.88); }
.habit-garden-widget .drop-btn.done{ color:var(--green); filter:drop-shadow(0 0 7px rgba(127,230,160,.55)); }
.habit-garden-widget .drop-btn.done svg path{ fill:rgba(127,230,160,.16); }
.habit-garden-widget .drop-btn:focus-visible, .habit-garden-widget .icon-btn:focus-visible, .habit-garden-widget .tend-btn:focus-visible{ outline:1.5px solid rgba(255,255,255,.5); outline-offset:2px; }

.habit-garden-widget .waterdrop{ position:absolute; left:50%; top:20px; margin-left:-6px; z-index:8; pointer-events:none; }
.habit-garden-widget .pt{ position:absolute; border-radius:50%; pointer-events:none; z-index:9; }

/* ============ STATUS BAR ============ */
.habit-garden-widget .statusbar{
  position:relative; z-index:3;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  margin-top:26px; padding:0 4px;
  color:var(--dim); font-size:15.5px;
}
.habit-garden-widget .statusbar .seg b{ color:var(--dim); font-weight:400; }
.habit-garden-widget .statusbar .sep{ margin:0 10px; color:var(--faint); }
.habit-garden-widget #moodSeg{ transition:opacity .4s; }
.habit-garden-widget .tend-btn{
  flex:none; display:inline-flex; align-items:center; gap:9px;
  font-size:20px; color:#fff; font-family:inherit; font-weight:500;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius:999px; padding:16px 30px 16px 26px; cursor:pointer;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.14);
  transition:box-shadow .35s, background .35s, transform .2s;
}
.habit-garden-widget .tend-btn:hover{ background: rgba(255, 255, 255, 0.14); box-shadow: 0 0 30px rgba(255, 255, 255, 0.32), inset 0 0 14px rgba(255, 255, 255, 0.2); }
.habit-garden-widget .tend-btn:active{ transform:scale(.97); }
.habit-garden-widget .tend-btn .plus{ font-size:32px; font-weight:500; line-height:1; margin-top:-7px; }

/* ============ NOTE ============ */
.habit-garden-widget .divider{ height:1px; background:var(--line); margin:20px -36px 0; }
.habit-garden-widget .note-row{ position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.habit-garden-widget .note{ position:relative; z-index:3; display:flex; gap:16px; padding:20px 4px 8px; align-items:flex-start; }
.habit-garden-widget .note .glyph{ flex:none; color:#f2f2f4; margin-top:2px; filter:drop-shadow(0 0 6px rgba(255,255,255,.5)); animation:hgGlyphTwinkle 3.4s ease-in-out infinite; }
@keyframes hgGlyphTwinkle{ 0%,100%{ opacity:.85;} 50%{ opacity:1; filter:drop-shadow(0 0 10px rgba(255,255,255,.8));} }
.habit-garden-widget .note .txt{ font-size:16.5px; line-height:1.55; color:var(--dim); transition:opacity .3s ease; }
.habit-garden-widget .note .txt b{ color:var(--ink); font-weight:600; }
.habit-garden-widget .note .txt .l2{ display:block; margin-top:2px; }
.habit-garden-widget .note .txt.swap{ opacity:0; }

/* ============ FOOTER ============ */
.habit-garden-widget .footer{
  position:relative; z-index:3; text-align:right;
  flex:none; white-space:nowrap;
  color:#5d5d64; font-size:12.5px; letter-spacing:.05em;
  padding:16px 4px 6px;
}

/* ============ POPOVERS ============ */
.habit-garden-widget .pop{
  position:absolute; z-index:40;
  background:#151517; border:1px solid rgba(255,255,255,.13);
  border-radius:15px; padding:13px;
  box-shadow:0 24px 70px rgba(0,0,0,.7);
  display:none; min-width:220px;
  zoom:1.06;
}
.habit-garden-widget .pop.open{ display:block; animation:hgPopFade .25s cubic-bezier(.2,1.2,.4,1); }
@keyframes hgPopFade{ from{ opacity:0; transform:translateY(6px) scale(.97);} }
.habit-garden-widget #menuPop{ right:30px; top:64px; min-width:170px; padding:7px; }
.habit-garden-widget #menuPop button{
  display:block; width:100%; text-align:left; background:none; border:none;
  color:#dcdce0; font-size:14px; font-family:inherit; padding:9px 11px; border-radius:9px; cursor:pointer;
}
.habit-garden-widget #menuPop button:hover{ background:rgba(255,255,255,.07); }
.habit-garden-widget #addPop{ right:36px; bottom:150px; }
.habit-garden-widget #addPop .cap{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--dimmer); margin-bottom:9px; }
.habit-garden-widget #addPop input{
  width:230px; border-radius:999px; padding:10px 20px; color:#fff; font-size:14.5px; font-family:inherit; outline:none;
  border:1px solid rgb(255 255 255 / 30%);
  box-shadow:0 0 20px rgba(255,255,255,0.05), inset 0 0 14px rgba(255,255,255,0.03);
  background:rgb(255 255 255 / 5%);
  transition:border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.habit-garden-widget #addPop input:focus{
  border-color:rgb(255 255 255 / 86%);
  background:rgba(255,255,255,0.06);
  box-shadow:0 0 0 3px rgba(255,255,255,0.05), 0 0 24px rgba(255,255,255,0.12);
}
.habit-garden-widget #addPop .row{ display:flex; gap:8px; margin-top:10px; }
.habit-garden-widget #addPop .plant-it{
  flex:1; border-radius:999px; padding:9px; font-size:14px; font-family:inherit; cursor:pointer;
  transition:background .25s; font-weight:500; color:#fff;
  background:rgba(255,255,255,0.09);
  border:1px solid rgba(255,255,255,0.38);
  box-shadow:0 0 20px rgba(255,255,255,0.3), inset 0 0 10px rgba(255,255,255,0.14);
}
.habit-garden-widget #addPop .plant-it:hover{
  background:rgba(255,255,255,0.14);
  box-shadow:0 0 30px rgba(255,255,255,0.32), inset 0 0 14px rgba(255,255,255,0.2);
}
.habit-garden-widget #addPop .nah{ background:none; border:none; color:var(--dimmer); font-size:13.5px; font-family:inherit; cursor:pointer; padding:0 8px; }

/* svg shared plant styles */
.habit-garden-widget .p-line{ fill:none; stroke:rgba(255,255,255,.88); stroke-width:1.7; stroke-linecap:round; }
.habit-garden-widget .p-thin{ fill:none; stroke:rgba(255,255,255,.55); stroke-width:1; stroke-linecap:round; }
.habit-garden-widget .p-vein{ fill:none; stroke:rgba(255,255,255,.4); stroke-width:.8; stroke-linecap:round; }
.habit-garden-widget .p-fill{ fill:url(#leafFill); stroke:rgba(255,255,255,.82); stroke-width:1.35; stroke-linejoin:round; }
.habit-garden-widget .p-petal{ fill:url(#petalFill); stroke:rgba(255,255,255,.9); stroke-width:1.25; stroke-linejoin:round; }
.habit-garden-widget .p-dot{ fill:#fff; }
.habit-garden-widget .gdrop{ fill:rgba(150,255,185,.85); stroke:rgba(200,255,220,.9); stroke-width:.6; filter:drop-shadow(0 0 5px rgba(140,255,175,.9)); animation:hgGPulse 3s ease-in-out infinite; }
@keyframes hgGPulse{ 0%,100%{ opacity:.75;} 50%{ opacity:1;} }
.habit-garden-widget .med-line{ stroke:rgba(255,255,255,.72); }
.habit-garden-widget .med-fill{ fill:url(#leafFill); stroke:rgba(255,255,255,.62); stroke-width:1.3; stroke-linejoin:round; }

.habit-garden-widget .leafF{ fill:url(#leafFill2); stroke:rgba(255,255,255,.88); stroke-width:1.4; stroke-linejoin:round; }
.habit-garden-widget .p-core{ fill:rgba(255,255,255,.95); }
.habit-garden-widget .partsBox{ position:relative; }
.habit-garden-widget .partsBox .part{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.habit-garden-widget .plantParts{ position:relative; }
.habit-garden-widget .plantParts .pw{ position:absolute; inset:0; will-change:transform; }
.habit-garden-widget .plantParts .part{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.habit-garden-widget .fly{
  position:absolute; left:0; top:0; width:5px; height:5px; margin:-2.5px 0 0 -2.5px;
  border-radius:50%; z-index:6; pointer-events:none;
  background:radial-gradient(circle, #ffffff 0%, rgba(230,255,240,.95) 40%, rgba(190,255,215,0) 75%);
  box-shadow:0 0 8px 2px rgba(220,255,235,.9), 0 0 22px 7px rgba(180,255,210,.25);
  animation:hgFlyPulse 1.8s ease-in-out infinite alternate;
}
@keyframes hgFlyPulse{ from{ opacity:.45; } to{ opacity:1; } }
.habit-garden-widget .glowCanvas{ display:none; position:absolute; left:-36px; top:0; width:calc(100% + 72px); height:470px; z-index:4; pointer-events:none; }
.habit-garden-widget #glowPanel{ right:30px; top:104px; width:256px; }
.habit-garden-widget #glowPanel .cap{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--dimmer); margin-bottom:10px; }
.habit-garden-widget .gp-row{ display:flex; align-items:center; gap:8px; margin:8px 0; font-size:12.5px; color:#cfcfd4; }
.habit-garden-widget .gp-row span{ width:50px; flex:none; }
.habit-garden-widget .gp-row b{ width:36px; flex:none; text-align:right; font-weight:400; color:#8f8f96; font-variant-numeric:tabular-nums; }
.habit-garden-widget .gp-row input[type=range]{ flex:1; accent-color:#7fe6a0; }
.habit-garden-widget .gp-btns{ display:flex; gap:8px; margin-top:12px; }
.habit-garden-widget .gp-btns button{ flex:1; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15); color:#dcdce0; border-radius:9px; padding:7px; font-size:12.5px; font-family:inherit; cursor:pointer; }
.habit-garden-widget .gp-btns button:hover{ background:rgba(255,255,255,.1); }
.habit-garden-widget .gp-note{ margin-top:8px; font-size:11.5px; color:var(--dimmer); text-align:center; word-break:break-all; }

@media (max-width:920px){
  .habit-garden-widget .groundStrip{ display:none; }
  .habit-garden-widget .card{ padding:22px 20px 14px; }
  .habit-garden-widget .garden{ flex-wrap:wrap; row-gap:26px; }
  .habit-garden-widget .habit{ flex:1 1 42%; }
  .habit-garden-widget .stage{ height:300px; }
  .habit-garden-widget .plant-bloom{ height:290px; } .habit-garden-widget .plant-read{ height:230px; } .habit-garden-widget .plant-sprout{ height:95px; } .habit-garden-widget .plant-med{ height:185px; }
  .habit-garden-widget .statusbar{ flex-direction:column; align-items:flex-start; gap:14px; }
  .habit-garden-widget .divider{ margin:20px -20px 0; }
}
@media (prefers-reduced-motion: reduce){
  .habit-garden-widget .plantSway,
  .habit-garden-widget .live-dot,
  .habit-garden-widget .star,
  .habit-garden-widget .grain,
  .habit-garden-widget .fly,
  .habit-garden-widget .note .glyph{ animation:none; }
}

/* ===================== WORLDS: switch pill, per-world tabs & menu ===================== */

/* Only the active world's space tabs are shown */
.nav-tab.nav-tab--off { display: none !important; }

/* Trigger pill (replaces the avatar) */
.world-switch {
  position: relative;
  z-index: 61;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px 0 16px;
  border-radius: var(--chrome-radius);
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--chrome-kicker-size);
  font-weight: 300;
  letter-spacing: var(--chrome-kicker-track);
  text-indent: var(--chrome-kicker-track);
  text-transform: uppercase;
  cursor: pointer;
  transition: background 300ms var(--chrome-ease), border-color 300ms var(--chrome-ease);
}
.world-switch:hover { background: var(--chrome-fill-hover); }
.world-switch.is-open { background: var(--chrome-fill-hover); }
.world-switch__label { white-space: nowrap; }
.world-switch__chev {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--text-secondary);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 220ms var(--tab-anim-ease);
}
.world-switch.is-open .world-switch__chev { transform: rotate(180deg); }

/* Dropdown menu — mirrors the notification (warning) panel design language */
.world-menu {
  position: fixed;
  z-index: 60;
  width: 280px;
  max-width: calc(100vw - 24px);
  padding: 12px 6px 6px;
  border-radius: var(--panel-radius);
  --wm-primary: rgba(243, 242, 238, 0.92);
  --wm-secondary: rgba(223, 222, 216, 0.82);
  --wm-muted: rgba(159, 159, 159, 0.7);
  background: var(--panel-glass);
  backdrop-filter: var(--panel-blur);
  -webkit-backdrop-filter: var(--panel-blur);
  border: none;
  box-shadow: var(--panel-shadow), var(--panel-highlight);
  color: var(--wm-primary);
  transform-origin: top right;
  opacity: 0;
  transform: scale(0.94) translateY(-10px);
  transition:
    opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.world-menu.is-open { opacity: 1; transform: scale(1) translateY(0); }
.world-menu__title {
  font-size: 16px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--wm-primary);
  padding: 4px 14px 10px;
}
.world-menu__list { display: flex; flex-direction: column; gap: 2px; }
.world-menu__item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  /* Matches .world-switch, the trigger this menu drops out of, so the rows and
     the button read as the same control. A 16px row inside the 10px shell was
     rounder than the panel holding it. */
  border-radius: var(--chrome-radius);
  background: transparent;
  color: var(--wm-primary);
  cursor: pointer;
  text-align: left;
  transition: background 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.world-menu__item[data-world]:hover,
.world-menu__item--manage:hover { background: rgba(255, 255, 255, 0.045); }
.world-menu__item.is-active { background: rgba(255, 255, 255, 0.06); }
.world-menu__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--wm-secondary);
}
.world-menu__icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}
.world-menu__icon--dashed { border-style: dashed; }
.world-menu__text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.world-menu__label {
  font-size: 14px;
  font-weight: 300;
  letter-spacing: -0.015em;
  color: var(--wm-primary);
}
.world-menu__desc {
  font-size: 11px;
  font-weight: 300;
  color: var(--wm-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.world-menu__dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
}
.world-menu__item.is-active .world-menu__dot { background: var(--wm-secondary); }
.world-menu__more { flex-shrink: 0; display: inline-flex; color: var(--wm-muted); }
.world-menu__more svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.world-menu__divider {
  height: 1px;
  margin: 7px 14px;
  background: rgba(255, 255, 255, 0.07);
}
.world-menu__footer {
  padding: 10px 14px 6px;
  font-size: 11px;
  font-weight: 300;
  color: var(--wm-muted);
}

/* ===================== SELF WIDGETS: Mirror & Reset (monochrome frosted glass) ===================== */
.mirror-widget,
.reset-widget {
  position: absolute;
  z-index: 5;
  width: var(--v-widget-width);
  height: var(--v-widget-height);
  max-width: 92vw;
  display: flex;
  flex-direction: column;
  padding: 22px 26px 20px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: none;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  color: var(--text-primary);
}

/* Header (shared house pattern) */
.mirror-head,
.reset-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.mirror-head-left,
.reset-head-left {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.mirror-icon,
.reset-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.04);
}
.mirror-icon svg,
.reset-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.72);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mirror-title,
.reset-title {
  font-size: 19px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mirror-status-dot,
.reset-status-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
}
.mirror-actions,
.reset-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.mirror-action,
.reset-action {
  background: none;
  border: none;
  cursor: pointer;
  padding: 7px;
  display: inline-flex;
  color: var(--text-muted);
  transition: opacity 0.15s ease, transform 0.25s ease;
}
.mirror-action:hover,
.reset-action:hover { opacity: 0.7; }
.mirror-action:active,
.reset-action:active { transform: scale(0.92); }
.mirror-action[aria-label="Pin"] svg,
.reset-action[aria-label="Pin"] svg { transform: rotate(40deg); }
.mirror-action svg,
.reset-action svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mirror-widget.collapsed .mirror-body,
.reset-widget.collapsed .reset-body { display: none; }
.mirror-action[data-mirror-toggle] svg,
.reset-action[data-reset-toggle] svg { transition: transform 0.5s cubic-bezier(0.3, 1.2, 0.4, 1); }
.mirror-widget.collapsed [data-mirror-toggle] svg,
.reset-widget.collapsed [data-reset-toggle] svg { transform: rotate(180deg); }

/* ---- Mirror body: still-water reflection hero (Mode B) ---- */
.mirror-body { margin-top: 18px; display: flex; flex-direction: column; }
.mirror-hero { position: relative; height: 118px; margin-bottom: 6px; }
.mirror-reflect { position: absolute; inset: 0; overflow: hidden; }
.mirror-reflect-glow {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 78%;
  height: 62px;
  transform: translate(-50%, -50%);
  background: radial-gradient(60% 50% at 50% 50%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.12) 42%, transparent 72%);
  filter: blur(6px);
  mix-blend-mode: screen;
  animation: mirrorShimmer 7s ease-in-out infinite;
}
.mirror-reflect-line {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9) 45%, rgba(255, 255, 255, 0.95) 55%, transparent);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.7), 0 0 22px rgba(255, 255, 255, 0.35);
}
.mirror-reflect-echo {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 52%;
  height: 46px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 78%);
  filter: blur(3px);
  transform: scaleY(-1);
  opacity: 0.6;
}
.mirror-hero-text {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 2;
}
.mirror-hero-word {
  font-size: 46px;
  font-weight: 100;
  letter-spacing: 0.01em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.25);
}
.mirror-hero-sub { font-size: 13.5px; color: var(--text-muted); }
.mirror-rows { display: flex; flex-direction: column; gap: 9px; margin: 12px 0 16px; }
.mirror-row { display: flex; align-items: center; gap: 11px; }
.mirror-row-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.38);
}
.mirror-row.is-primary .mirror-row-dot { background: rgba(255, 255, 255, 0.95); box-shadow: 0 0 8px rgba(255, 255, 255, 0.6); }
.mirror-row.is-meta .mirror-row-dot { background: rgba(255, 255, 255, 0.22); }
.mirror-row-name { flex: 1; font-size: 15px; color: var(--text-secondary); }
.mirror-row.is-primary .mirror-row-name { color: var(--text-primary); }
.mirror-row-state { font-size: 15px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.mirror-row.is-meta .mirror-row-state { color: var(--text-muted); }
.mirror-voice { font-size: 16px; line-height: 1.45; color: var(--text-primary); }
.mirror-voice strong { font-weight: 600; }
.mirror-ask {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 9px;
  font-size: 15px;
  color: var(--text-secondary);
}
.mirror-spark {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  margin-top: -1px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.mirror-footer { margin-top: 14px; font-size: 13.5px; color: var(--text-muted); }

/* ---- Reset body: breathing light ring (Mode B) ---- */
.reset-body { margin-top: 18px; display: flex; flex-direction: column; align-items: center; }
.reset-hero {
  position: relative;
  width: 100%;
  height: 150px;
  display: grid;
  place-items: center;
  margin-bottom: 6px;
}
.reset-ring {
  position: absolute;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.35), inset 0 0 18px rgba(255, 255, 255, 0.18);
  animation: resetBreathe 8s ease-in-out infinite;
}
.reset-ring--echo {
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 26px rgba(255, 255, 255, 0.2);
  animation-delay: -1.2s;
  opacity: 0.6;
}
.reset-phrase {
  position: relative;
  z-index: 2;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  animation: resetPhrase 8s ease-in-out infinite;
}
@keyframes resetBreathe {
  0%, 100% { transform: scale(0.62); opacity: 0.55; }
  45%, 55% { transform: scale(1); opacity: 1; }
}
@keyframes resetPhrase {
  0%, 100% { opacity: 0.5; letter-spacing: 0.22em; }
  50% { opacity: 0.95; letter-spacing: 0.34em; }
}
.reset-lead { font-size: 15px; line-height: 1.5; color: var(--text-secondary); text-align: center; margin-bottom: 16px; }
.reset-controls { display: flex; flex-direction: column; gap: 9px; width: 100%; }
.reset-btn {
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  padding: 12px;
  border-radius: 99px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.05);
  border: none;
  transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}
.reset-btn:hover { background: rgba(255, 255, 255, 0.1); }
.reset-btn--primary {
  color: #14110f;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(226, 230, 232, 0.9));
  box-shadow: 0 0 22px rgba(255, 255, 255, 0.28);
}
.reset-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 0 30px rgba(255, 255, 255, 0.42); }
.reset-voice { margin-top: 16px; font-size: 15px; line-height: 1.45; color: var(--text-primary); text-align: center; }
.reset-voice strong { font-weight: 600; }
.reset-footer { margin-top: 8px; font-size: 13.5px; color: var(--text-muted); text-align: center; }

@keyframes mirrorShimmer {
  0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scaleX(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scaleX(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .reset-ring, .reset-phrase, .mirror-reflect-glow { animation: none; }
}

/* ===================== RECOVERY WIDGET ===================== */
.recovery-widget {
  position: absolute;
  z-index: 5;
  zoom: 1.05;
  width: calc(var(--sq-widget-width) / 1.05);
  height: calc(var(--sq-widget-height) / 1.05);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 22px 26px 26px 0px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6), inset 0 0 60px rgba(255, 255, 255, 0.015);
}
.recovery-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin-left: 26px;
}
.recovery-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 40%);
  background: transparent;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.08);
}
.recovery-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--text-primary);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.recovery-logo-img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  transform: translate(0px, -15px);
}
.recovery-title {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 1px;
  margin-top: 0;
}
.recovery-status-dot {
  width: 7px;
  height: 7px;
  background: rgb(255 255 255);
  box-shadow: 0 0 8px rgb(255 255 255 / 55%);
}
.recovery-widget.collapsed .recovery-body,
.recovery-widget.collapsed .recovery-footer {
  display: none;
}
.recovery-widget.collapsed [data-recovery-toggle] svg {
  transform: rotate(-90deg);
}
.recovery-widget > * {
  flex-shrink: 0;
}
.recovery-body {
  display: grid;
  flex: 1;
  min-height: 0;
  grid-template-columns: 1fr 0.9fr;
  gap: 10px;
  margin-top: 20px;
}

/* ---- left recovery scene ---- */
.recovery-left-scene {
  position: relative;
  aspect-ratio: 460 / 380;
  min-width: 0;
  clip-path: inset(-200px -200px -200px 0);
}
.recovery-curve-image-layer {
  position: absolute;
  inset: 0;
  width: 422px;
  height: auto;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  mix-blend-mode: screen;
  z-index: 0;
  transform: translate(-19px, 9px) rotate(0deg);
}
.recovery-curve-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 1;
}
.recovery-gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  pointer-events: none;
  transform: translate(-5px, -10px);
}
.recovery-left-scene.gl-active .recovery-gl {
  display: block;
}
/* when the WebGL layer renders the silk, hide the SVG curve/strand/particle fallback */
.recovery-left-scene.gl-active .recovery-curve-group,
.recovery-left-scene.gl-active .recovery-strand-field,
.recovery-left-scene.gl-active .recovery-streak-field,
.recovery-left-scene.gl-active .recovery-particle-field,
.recovery-left-scene.gl-active .recovery-node-layer {
  display: none;
}
.recovery-curve-path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.recovery-curve-atmos {
  stroke: rgb(255 255 255 / 22%);
  stroke-width: 14;
  filter: url(#recoveryGlowWide);
}
.recovery-curve-bloom {
  stroke: rgb(255 255 255 / 35%);
  stroke-width: 6.5;
  filter: url(#recoveryGlowMed);
}
.recovery-curve-body {
  stroke: url(#recoveryFade);
  stroke-width: 1;
  opacity: 0.85;
  filter: url(#recoveryGlowSoft);
}
.recovery-curve-core {
  stroke: url(#recoveryFade);
  stroke-width: 1.2;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9));
}
.recovery-curve-edge {
  stroke: rgb(255 255 255 / 55%);
  stroke-width: 0.5;
}
.recovery-node {
  fill: rgb(255 255 255);
  filter: drop-shadow(0 0 7px rgba(255, 255, 255, 1)) drop-shadow(0 0 5px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 9px rgba(255, 255, 255, 0.55)) blur(0.5px);
  transform-box: fill-box;
  transform-origin: center;
  animation: none;
}
.recovery-curve-group {
  transform-box: fill-box;
  transform-origin: center;
  animation: recoveryCurveBreathe 6.5s ease-in-out infinite;
  transform: translate(0px, 38px);
}
@keyframes recoveryCurveBreathe {
  0%, 100% { opacity: 0.92; }
  50% { opacity: 1; }
}
.recovery-rise-node {
  fill: rgb(255 255 255);
  filter: drop-shadow(0 0 7px rgba(255, 255, 255, 1)) drop-shadow(0 0 5px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 9px rgba(255, 255, 255, 0.55)) blur(0.5px);
  transform-box: fill-box;
  transform-origin: center;
  transform: translate(-22px, 33px);
}
.recovery-morning-node {
  fill: rgb(255 255 255);
  filter: drop-shadow(0 0 7px rgba(255, 255, 255, 1)) drop-shadow(0 0 5px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 9px rgba(255, 255, 255, 0.55)) blur(0.5px);
  transform-box: fill-box;
  transform-origin: center;
  transform: translate(43px, 18px);
}

/* recovery pool + ripples */
.recovery-pool-halo {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0.9;
  animation: recoveryPoolHalo 5.5s ease-in-out infinite;
}
@keyframes recoveryPoolHalo {
  0%, 100% { opacity: 0.78; transform: scale(0.94); }
  50% { opacity: 1; transform: scale(1.06); }
}
.recovery-pool {
  transform-box: fill-box;
  transform-origin: center;
  animation: recoveryPoolPulse 4.5s ease-in-out infinite;
}
@keyframes recoveryPoolPulse {
  0%, 100% { opacity: 0.92; transform: scale(0.94); }
  50% { opacity: 1; transform: scale(1.1); }
}
.recovery-pool-core {
  transform-box: fill-box;
  transform-origin: center;
  /* splash flash synced to the petal meeting the water (7.2s float, impact at 50%) */
  animation: recoveryPoolCorePulse 7.2s ease-out infinite;
}
@keyframes recoveryPoolCorePulse {
  0%, 42%, 100% { opacity: 0.9; transform: scale(0.9); }
  52% { opacity: 1; transform: scale(1.35); }
}
.recovery-ripple {
  fill: none;
  stroke: rgb(255 255 255 / 88%);
  stroke-width: 1.3;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.7));
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  /* synced to the lotus float (7.2s): rings emanate when the petal meets the water at 50% */
  animation: recoveryRipple 7.2s ease-out infinite;
}
.recovery-ripple-2 { animation-delay: 0.28s; }
.recovery-ripple-3 { animation-delay: 0.56s; }
.recovery-ripple-4 { animation-delay: 0.84s; }
.recovery-ripple-5 { animation-delay: 1.12s; }
@keyframes recoveryRipple {
  0%, 46% { opacity: 0; transform: scale(0.2); }
  50% { opacity: 1; transform: scale(0.38); }
  70% { opacity: 0.5; transform: scale(1.5); }
  84%, 100% { opacity: 0; transform: scale(2.5); }
}

/* curve-local particles + streaks */
.recovery-particle {
  fill: rgb(255 255 255);
  filter: url(#recoveryParticleGlow);
  transform-box: fill-box;
  transform-origin: center;
  animation: recoveryTwinkle 3.4s ease-in-out infinite;
}
@keyframes recoveryTwinkle {
  0%, 100% { opacity: 0.18; transform: scale(0.7); }
  50% { opacity: 0.75; transform: scale(1.15); }
}
.recovery-streak {
  fill: none;
  stroke: rgb(255 255 255 / 30%);
  stroke-linecap: round;
  filter: url(#recoveryGlowSoft);
  animation: recoveryStreakBreathe 5s ease-in-out infinite;
}
@keyframes recoveryStreakBreathe {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.45; }
}
.recovery-haze {
  filter: url(#recoveryGlowSoft);
}


/* multi-strand silk fan */
.recovery-strand {
  fill: none;
  stroke: rgb(255 255 255 / 55%);
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#recoveryGlowSoft);
  transform-box: fill-box;
  transform-origin: center;
  animation: recoveryStrandShimmer 6s ease-in-out infinite;
}
@keyframes recoveryStrandShimmer {
  0%, 100% { transform: translateY(0.4px); }
  50% { transform: translateY(-0.6px); }
}

/* coded lotus resting on the pool */
.recovery-lotus {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: recoveryLotusBreathe 5s ease-in-out infinite;
}
.recovery-lotus-petal {
  fill: url(#recoveryLotusGrad);
  stroke: rgb(255 255 255 / 55%);
  stroke-width: 0.4;
  filter: url(#recoveryLotusGlow);
}
.recovery-lotus-back { opacity: 0.55; }
.recovery-lotus-mid { opacity: 0.75; }
.recovery-lotus-inner { opacity: 0.9; }
.recovery-lotus-center { opacity: 1; }
.recovery-lotus-bloom {
  fill: rgb(255 255 255);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 12px rgba(255, 255, 255, 0.6));
}
@keyframes recoveryLotusBreathe {
  0%, 100% { opacity: 0.9; transform: scale(0.97); }
  50% { opacity: 1; transform: scale(1.03); }
}

.recovery-lotus-image {
  transform: translate(-2px, -31px);
  transform-box: fill-box;
  transform-origin: center bottom;
  animation:
    recoveryLotusFloat 7.2s ease-in-out infinite,
    recoveryLotusGlow 3.8s ease-in-out infinite;
}
/* slow drift down until it meets the water, then back up */
@keyframes recoveryLotusFloat {
  0%, 100% { transform: translate(-2px, -31px); }
  50% { transform: translate(-2px, -13px); }
}
/* luminous pulse like the health-chart nodes */
@keyframes recoveryLotusGlow {
  0%, 100% {
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.55)) drop-shadow(0 0 9px rgba(255, 255, 255, 0.3));
    opacity: 0.85;
  }
  50% {
    filter: drop-shadow(0 0 9px rgba(255, 255, 255, 1)) drop-shadow(0 0 18px rgba(255, 255, 255, 0.7)) drop-shadow(0 0 26px rgba(255, 255, 255, 0.4));
    opacity: 1;
  }
}

.recovery-splash-descent {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0.9;
  pointer-events: none;
  width: 300px;
  height: 300px;
  transform: translate(-134px, -58px);
}

.recovery-splash-ascent {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0.9;
  pointer-events: none;
  width: 250px;
  height: 250px;
  transform: translate(-37px, -36px) rotate(351deg);
}

/* scene labels */
.recovery-scene-label {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: none;
  align-items: center;
  z-index: 2;
}
.recovery-label-head {
  font-size: 10.5px;
  letter-spacing: 0em;
  color: rgb(255 255 255);
  font-weight: 450;
}
.recovery-label-sub {
  font-size: 10px;
  color: rgb(255 255 255 / 50%);
}
.recovery-label-guide {
  position: absolute;
  left: 50%;
  width: 1px;
  border-left: 2px dotted rgb(255 255 255 / 70%);
}
.recovery-label-morning {
  left: 13%;
  top: 9%;
  align-items: center;
  text-align: center;
}
.recovery-label-morning .recovery-label-guide {
  top: 117%;
  height: 40px;
  left: 33.5px;
}
.recovery-label-dip {
  left: 52%;
  top: 49%;
  align-items: center;
  text-align: center;
}
.recovery-label-dip .recovery-label-guide {
  top: 124%;
  height: 46px;
}
.recovery-label-window {
  left: 57%;
  bottom: -5%;
  transform: translateX(-50%);
  align-items: center;
  text-align: center;
}
.recovery-label-rise {
  right: 6.5%;
  top: 25%;
  align-items: center;
  text-align: center;
}
.recovery-label-rise .recovery-label-guide {
  top: 130%;
  height: 55px;
}

/* ---- right content ---- */
.recovery-right-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-left: -12px;
}
.recovery-headline {
  font-size: 30px;
  font-weight: 350;
  letter-spacing: -0.01em;
  color: rgb(255 255 255 / 75%);
}
.recovery-copy {
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgb(255 255 255 / 75%);
  font-weight: 400;
}
.recovery-section {
  margin-top: 16px;
}
.recovery-section-title {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: rgb(255 255 255 / 75%);
}
.recovery-section-text {
  margin-top: 7px;
  font-size: 13px;
  line-height: 1.5;
  text-wrap: wrap;
  color: rgb(255 255 255 / 65%);
}
.recovery-divider {
  margin-top: 18px;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}
.recovery-insight {
  margin-top: 18px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgb(255 255 255 / 92%);
  margin-left: -8px;
}
.recovery-insight-spark {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin-top: 1px;
  fill: rgb(255 255 255 / 92%);
  stroke: none;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.45));
}
.recovery-insight-sub {
  color: rgb(255 255 255 / 50%);
  position: relative;
  top: 4px;
}
.recovery-buttons {
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 0px;
}
.recovery-btn {
  font-family: inherit;
  cursor: pointer;
  border-radius: 999px;
  transition: opacity 0.15s ease, background 0.15s ease;
  text-wrap: nowrap;
}
.recovery-btn-primary {
  padding: 12px 26px;
  font-size: 13.5px;
  font-weight: 500;
  color: rgb(255 255 255 / 92%);
  background: rgb(255 255 255 / 17%);
  border: 1px solid rgb(255 255 255 / 86%);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.14);
}
.recovery-btn-primary:hover {
  opacity: 1;
}
.recovery-btn-secondary {
  padding: 10px 22px;
  font-size: 13.5px;
  font-weight: 500;
  color: rgb(255 255 255 / 60%);
  background: transparent;
  border: 1px solid rgb(255 255 255 / 12%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.recovery-btn-secondary:hover {
  opacity: 0.85;
}
.recovery-btn-ghost {
  padding: 10px 22px;
  font-size: 13.5px;
  font-weight: 500;
  color: rgb(255 255 255 / 40%);
  background: transparent;
  border: none;
  backdrop-filter: unset;
}
.recovery-btn-ghost:hover {
  opacity: 0.85;
}
.recovery-footer {
  margin-top: 20px;
  font-size: 12px;
  color: rgb(255 255 255 / 40%);
  margin-left: 26px;
}

/* ===================== RESULTS OVERVIEW WIDGET ===================== */
.results-overview-widget {
  position: absolute;
  z-index: 5;
  /* widget-level scale token: the frame carries it, so the landscape box is
     divided back out to land on the shared 950 x 506 footprint. */
  zoom: 1.1;
  width: calc(var(--h-widget-width) / 1.1);
  height: calc(var(--h-widget-height) / 1.1);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 22px 28px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: none;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
}
.results-overview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.results-overview-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.results-overview-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 80%);
  background: transparent;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.12);
}
.results-overview-logo {
  object-fit: contain;
  width: 60px;
  height: 60px;
  transform: translate(1px, -10px);
}
.results-overview-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--text-primary);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.results-overview-title {
  font-size: 20px;
  font-weight: 500;
  color: rgb(255 255 255);
}
.results-overview-status-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.55);
}
.results-overview-actions {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}
.results-overview-divider {
  display: block;
  height: 1px;
  margin: 4px 5px -12px;
  background: rgb(255 255 255 / 5%);
}
.results-overview-eyebrow {
  margin: 0px 0 0 60px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgb(255 255 255 / 50%);
}
.results-overview-widget.collapsed .results-overview-body,
.results-overview-widget.collapsed .results-overview-eyebrow,
.results-overview-widget.collapsed .results-overview-divider,
.results-overview-widget.collapsed .results-overview-footer {
  display: none;
}
.results-overview-widget.collapsed [data-results-toggle] svg {
  transform: rotate(-90deg);
}
.results-overview-body {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  grid-template-rows: minmax(0, 1fr);
  gap: 34px;
  margin-top: 14px;
  flex: 1;
  min-height: 0;
}
.results-overview-left {
  position: relative;
  min-height: 0;
  padding-left: 4px;
}
.results-overview-hero-image {
  position: absolute;
  left: -14px;
  top: -28px;
  width: 120%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  filter: none;
  z-index: 0;
  opacity: 0.7;
}
.results-overview-hero-apple {
  position: absolute;
  pointer-events: none;
  object-fit: contain;
  height: auto;
  z-index: 1;
}
.results-overview-hero-apple-1 {
  left: 2%;
  top: 24%;
  transform: rotate(6deg);
  width: 53%;
  opacity: 1;
}
.results-overview-hero-apple-1-fill {
  opacity: 0.6;
}
.results-overview-hero-apple-2 {
  left: 15%;
  top: -6%;
  width: 84%;
}
.results-overview-hero-apple-3 {
  left: 63%;
  top: 36%;
  width: 40%;
}
.results-overview-metric {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 8px;
  flex-direction: row;
  justify-content: flex-end;
  align-items: baseline;
  top: -48px;
  right: 16px;
}
.results-overview-count {
  font-size: 70px;
  font-weight: 200;
  line-height: 1;
  color: rgb(255 255 255 / 92%);
  letter-spacing: 0.05em;
  text-shadow: 0 0 24px rgb(255 255 255 / 33%);
}
.results-overview-count-label {
  font-size: 20px;
  font-weight: 400;
  color: rgb(255 255 255 / 75%);
}
.results-overview-summary {
  position: absolute;
  z-index: 1;
  margin-top: 0px;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(255 255 255 / 45%);
  top: 27px;
  right: 2px;
}
.results-overview-insight {
  position: absolute;
  left: 4px;
  bottom: 0px;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 300px;
}
.results-overview-insight-spark {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  margin-top: 1px;
  fill: none;
  stroke: rgb(255 255 255);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translate(0px, 5px);
}
.results-overview-insight-text {
  font-size: 14px;
  line-height: 1.35;
  color: rgb(255 255 255 / 92%);
  font-weight: 400;
}
.results-overview-insight-sub {
  font-size: 11.5px;
  color: rgb(255 255 255 / 30%);
  letter-spacing: -0.2px;
}
.results-overview-buttons {
  position: absolute;
  right: -30px;
  bottom: 3px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
}
.results-overview-btn {
  padding: 10px 22px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s ease, background 0.15s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.results-overview-btn-primary {
  color: #ffffff;
  background: #ffffff0d;
  border: 1px solid rgb(255 255 255 / 85%);
  box-shadow: 0 0 20px rgb(255 255 255 / 32%);
}
.results-overview-btn-secondary {
  color: rgb(255 255 255 / 50%);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
}
.results-overview-btn:hover {
  opacity: 0.85;
}
.results-overview-right-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0px;
  margin: 0;
  padding: 0;
  padding-top: 18px;
}
.results-overview-right-list > * {
  flex-shrink: 0;
}
.results-overview-row {
  display: flex;
  align-items: center;
  gap: 0px;
  margin-top: -9px;
}
.results-item-icon-slot {
  flex-shrink: 0;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: transparent;
  border: none;
  position: relative;
}
.results-item-icon-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
.results-item-connector {
  position: absolute;
  top: 8px;
  left: 51.3%;
  transform: translateX(-50%);
  width: 1px;
  height: 7px;
  background: rgb(255 255 255 / 20%);
}
.results-item-connector-bottom {
  position: absolute;
  bottom: 8px;
  left: 51.3%;
  transform: translateX(-50%);
  width: 1px;
  height: 8px;
  background: rgb(255 255 255 / 50%);
}
.results-item-connector-right {
  position: absolute;
  right: -2px;
  top: 50%;
  width: 26px;
  height: 1px;
  background: rgb(255 255 255 / 40%);
  transform: rotate(90deg);
}
.results-overview-row-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.results-overview-row-title {
  font-size: 14.5px;
  font-weight: 400;
  text-wrap: nowrap;
  color: var(--text-primary);
}
.results-overview-row-meta {
  font-size: 12px;
  color: rgb(255 255 255 / 50%);
}
.results-overview-footer {
  margin-top: 22px;
  font-size: 12px;
  color: rgb(255 255 255 / 40%);
  margin-left: 4px;
  flex-shrink: 0;
}
.results-overview-header,
.results-overview-eyebrow,
.results-overview-divider {
  flex-shrink: 0;
}

/* ===================== HEALTH JOURNAL WIDGET ===================== */
.health-journal-widget {
  position: absolute;
  z-index: 5;
  width: var(--sq-widget-width);
  height: var(--sq-widget-height);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 24px 28px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
}
.health-journal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.health-journal-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.health-journal-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 55%);
  background: transparent;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.1);
}
.health-journal-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--text-primary);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.health-journal-title {
  font-size: 20px;
  font-weight: 500;
  color: rgb(255 255 255);
}
.health-journal-status-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(255 255 255);
  box-shadow: 0 0 8px rgb(255 255 255 / 55%);
}
.health-journal-actions {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}
.health-journal-widget.collapsed .health-journal-body,
.health-journal-widget.collapsed .health-journal-footer {
  display: none;
}
.health-journal-widget.collapsed [data-health-toggle] svg {
  transform: rotate(-90deg);
}
.health-journal-widget > * {
  flex-shrink: 0;
}
.health-journal-body {
  display: grid;
  flex: 1;
  min-height: 0;
  grid-template-columns: 1.35fr 0.8fr;
  gap: 40px;
  margin-top: 22px;
}
.health-journal-left {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* input */
.health-journal-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 20px;
  border-radius: 12px;
  border: 1px solid rgb(255 255 255 / 86%);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.14);
  background: rgb(255 255 255 / 5%);
}
.health-journal-input-text {
  flex: 1;
  min-width: 0;
  padding: 0;
  margin: 0;
  font-size: 15px;
  line-height: normal;
  color: rgb(255 255 255/ 70%);
  background: transparent;
  border: none;
  outline: none;
  font-family: inherit;
}
.health-journal-input-text::placeholder {
  color: rgb(255 255 255 / 70%);
}
.health-journal-caret {
  display: none;
}
.health-journal-input-hint {
  flex-shrink: 0;
  font-size: 12.5px;
  color: rgb(255 255 255 / 35%);
}
.health-journal-enter {
  margin-left: 2px;
}
/* chips */
.health-journal-chip-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  margin-top: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.health-journal-chip-row::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.health-journal-chip {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  padding: 6px 15px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  color: rgb(255 255 255);
  background: rgb(255 255 255 / 2%);
  border: 1px solid rgb(255 255 255 / 10%);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.health-journal-chip-good {
  gap: 0px;
}
.health-journal-chip:hover {
  color: rgb(255 255 255 / 85%);
  background: rgb(255 255 255 / 7%);
}
.health-journal-chip-active {
  color: rgb(255 255 255 / 92%);
  background: rgb(255 255 255 / 8%);
  border-color: rgb(255 255 255 / 25%);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.12);
}
.health-journal-chip-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: rgb(255 255 255 / 80%);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.health-journal-chip-active .health-journal-chip-icon {
  fill: rgb(255 255 255 / 85%);
  stroke: rgb(255 255 255 / 85%);
}
.health-journal-chip-icon-star {
  transform: translate(-3px, 2px);
  fill: rgb(255 255 255);
}
/* recent */
.health-journal-recent-label {
  margin-top: 22px;
  font-size: 12px;
  letter-spacing: 0em;
  color: rgb(255 255 255 / 70%);
  margin-left: 4px;
}
.health-journal-recent {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.health-journal-row {
  position: relative;
  display: grid;
  grid-template-columns: 34px 55px 6px 1fr 92px 54px;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
}
.health-journal-row:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 46px;
  right: 0;
  height: 1px;
  background: rgb(255 255 255 / 6%);
}
.health-journal-row:last-child::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 46px;
  right: 0;
  height: 1px;
  background: rgb(255 255 255 / 6%);
}
.health-journal-row-dot {
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgb(255 255 255 / 70%);
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}
.health-journal-row:first-child .health-journal-row-dot {
  margin-left: -18px;
  margin-top: 3px;
}
.health-journal-row:nth-child(2) .health-journal-row-dot {
  margin-top: 3px;
}
.health-journal-row:nth-child(3) .health-journal-row-dot {
  margin-left: -34px;
  margin-top: 2px;
}
.health-journal-row:nth-child(4) .health-journal-row-dot {
  margin-top: 3px;
  margin-left: -26px;
}
.health-journal-row:first-child {
  border-top: none;
}
.health-journal-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 10%);
  background: rgb(255 255 255 / 3%);
}
.health-journal-row-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: rgb(255 255 255 / 92%);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.health-journal-row:first-child .health-journal-row-icon svg,
.health-journal-row:nth-child(2) .health-journal-row-icon svg {
  transform: translate(1px, 0px);
}
.health-journal-row:nth-child(3) .health-journal-row-icon svg {
  width: 17px;
  height: 17px;
  transform: translate(1px, 1px);
  stroke-width: 0.8px;
}
.health-journal-row-icon-img {
  width: 80px;
  height: 80px;
  object-fit: contain;
}
.health-journal-row-day {
  font-size: 13px;
  color: rgb(255 255 255 / 92%);
  font-weight: 500;
}
.health-journal-row-desc {
  font-size: 13px;
  color: rgb(255 255 255 / 70%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.health-journal-row-desc-first {
  margin-left: -18px;
}
.health-journal-row-desc-second {
  margin-left: -3px;
}
.health-journal-row-desc-third {
  margin-left: -38px;
}
.health-journal-row-desc-fourth {
  margin-left: -30px;
}
.health-journal-mini-signal {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  margin-right: 2px;
}
.health-journal-mini-signal svg {
  width: 60px;
  height: 10px;
  overflow: visible;
}
.hj-signal-rail {
  stroke: rgb(255 255 255 / 12%);
  stroke-width: 1;
}
.hj-signal-dim {
  fill: rgb(255 255 255 / 30%);
}
.hj-signal-mid {
  fill: rgb(255 255 255 / 55%);
}
.hj-signal-glow {
  fill: rgb(255 255 255 / 50%);
  filter: url(#hjGlowDot);
}
.hj-signal-core {
  fill: rgb(255 255 255);
}
.health-journal-row-time {
  font-size: 12.5px;
  color: rgb(255 255 255 / 70%);
  text-align: right;
  white-space: nowrap;
}
/* insight */
.health-journal-insight {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 24px;
}
.health-journal-insight-spark {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  margin-top: 1px;
  fill: rgb(255 255 255 / 92%);
  stroke: rgb(255 255 255 / 92%);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.35));
}
.health-journal-insight-text {
  font-size: 13.5px;
  line-height: 1.45;
  color: rgb(255 255 255 / 92%);
  font-weight: 450;
}
.health-journal-insight-sub {
  color: rgb(255 255 255 / 50%);
}
/* right column */
.health-journal-right {
  display: flex;
  flex-direction: column;
}
.health-journal-pattern-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: rgb(255 255 255 / 75%);
  font-weight: 450;
}
.health-journal-pattern-card {
  margin-top: 12px;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid rgb(255 255 255 / 15%);
  background: transparent;
  box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.03);
}
.health-journal-sine-chart {
  width: 90%;
  height: 96px;
  overflow: visible;
  transform: translate(1px, 5px);
}
.hj-sine-glow {
  fill: none;
  stroke: rgb(255 255 255 / 20%);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#hjGlowStrong);
}
.hj-sine-soft {
  fill: none;
  stroke: rgb(255 255 255 / 45%);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#hjGlowSoft);
}
.hj-sine-core {
  fill: none;
  stroke: rgb(255 255 255 / 92%);
  stroke-width: 0.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 3px rgba(255, 255, 255, 0.7)) drop-shadow(0 0 5px rgba(255, 255, 255, 0.4));
}
.hj-node {
  fill: rgb(255 255 255);
  filter: drop-shadow(0 0 7px rgba(255, 255, 255, 1)) drop-shadow(0 0 5px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 9px rgba(255, 255, 255, 0.55)) blur(0.5px);
  transform-box: fill-box;
  transform-origin: center;
  animation: hjNodePulse 2.8s ease-in-out infinite;
}
.hj-node-bright {
  fill: rgb(255 255 255);
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.9));
  transform-box: fill-box;
  transform-origin: center;
  animation: hjEndCore 3.2s ease-in-out infinite;
}
.hj-node-bloom {
  fill: rgb(255 255 255 / 45%);
  filter: url(#hjGlowStrong);
  transform-box: fill-box;
  transform-origin: center;
  animation: hjEndBloom 3.6s ease-in-out infinite;
}
.hj-halo {
  fill: none;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: center;
  animation: hjHaloBreathe 4.2s ease-in-out infinite;
}
.hj-halo-2 {
  animation-duration: 4.8s;
}
.hj-halo-3 {
  animation-duration: 5.4s;
}
@keyframes hjNodePulse {
  0%, 100% { opacity: 0.6; transform: scale(0.82); }
  50% { opacity: 1; transform: scale(1.22); }
}
@keyframes hjEndCore {
  0%, 100% { opacity: 0.85; transform: scale(0.94); }
  50% { opacity: 1; transform: scale(1.1); }
}
@keyframes hjEndBloom {
  0%, 100% { opacity: 0.32; transform: scale(0.88); }
  50% { opacity: 0.6; transform: scale(1.14); }
}
@keyframes hjHaloBreathe {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}
.hj-halo-1 {
  stroke: rgb(255 255 255 / 26%);
  stroke-width: 1;
  stroke-dasharray: 1.4 4;
}
.hj-halo-2 {
  stroke: rgb(255 255 255 / 28%);
  stroke-width: 0.9;
  stroke-dasharray: 1.2 4.5;
}
.hj-halo-3 {
  stroke: rgb(255 255 255 / 45%);
  stroke-width: 0.8;
  stroke-dasharray: 1 5;
}
.health-journal-pattern-text {
  margin-top: 14px;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgb(255 255 255 / 88%);
}
.health-journal-pattern-sub {
  margin-top: 10px;
  font-size: 13px;
  color: rgb(255 255 255 / 55%);
}
.health-journal-pattern-divider {
  display: block;
  height: 1px;
  margin: 16px 0;
  background: rgb(255 255 255 / 8%);
}
.health-journal-pattern-note {
  display: flex;
  align-items: center;
  gap: 8px;
}
.health-journal-note-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin-top: 1px;
  fill: none;
  stroke: rgb(255 255 255 / 45%);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.health-journal-note-text {
  font-size: 12px;
  line-height: 1.45;
  color: rgb(255 255 255 / 60%);
}
/* buttons */
.health-journal-buttons {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  right: 0;
  margin-top: auto;
  padding-top: 24px;
}
.health-journal-btn.health-journal-btn-log {
  width: 46%;
  color: rgb(255 255 255);
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.14);
}
.health-journal-btn-export {
  width: 52%;
}
.health-journal-btn {
  padding: 10px 22px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s ease, background 0.15s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.health-journal-btn-primary {
  color: #101312;
  background: rgb(255 255 255 / 92%);
  border: 1px solid rgb(255 255 255 / 60%);
  box-shadow: 0 0 22px rgba(255, 255, 255, 0.28);
}
.health-journal-btn-secondary {
  color: rgb(255 255 255 / 60%);
  background: transparent;
  border: 1px solid rgb(255 255 255 / 12%);
  text-wrap: nowrap;
}
.health-journal-btn:hover {
  opacity: 0.85;
}
/* footer */
.health-journal-footer {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 22px;
  font-size: 12px;
  color: rgb(255 255 255 / 40%);
  margin-left: 2px;
}
.health-journal-lock {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: rgb(255 255 255 / 55%);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ===================== CONTEXT SWITCHING WIDGET ===================== */
.context-switching-widget {
  position: absolute;
  z-index: 5;
  width: var(--sq-widget-width);
  height: var(--sq-widget-height);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 22px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: none;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
}
.ctxsw-head-left {
  align-items: center;
  gap: 14px;
  margin-left: 5px;
}
.ctxsw-icon {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  flex-shrink: 0;
}
.ctxsw-icon svg {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: rgb(255 255 255 / 54%);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translate(-2px, 0px);
}
.ctxsw-headings {
  min-width: 0;
}
.ctxsw-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ctxsw-status-dot {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 7px rgba(255, 255, 255, 0.5);
}
.ctxsw-meta {
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.context-switching-widget > * {
  flex-shrink: 0;
}
.ctxsw-body {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  margin-top: 22px;
}
.context-switching-widget.collapsed .ctxsw-body,
.context-switching-widget.collapsed .ctxsw-meta {
  display: none;
}
.context-switching-widget.collapsed [data-ctxsw-toggle] svg {
  transform: rotate(-90deg);
}

/* chart */
.ctxsw-chart-wrap {
  position: relative;
  padding-left: 70px;
}
.ctxsw-metric {
  position: absolute;
  top: 0;
  left: 74px;
  z-index: 3;
  pointer-events: none;
}
.ctxsw-metric-main {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.ctxsw-metric-num {
  font-size: 58px;
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.95);
}
.ctxsw-metric-unit {
  font-size: 18px;
  font-weight: 400;
  color: var(--text-secondary);
}
.ctxsw-metric-sub {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-muted);
}
.ctxsw-y-labels {
  position: absolute;
  left: 0;
  top: 0;
  width: 66px;
  height: 240px;
}
.ctxsw-y-label {
  position: absolute;
  left: 0;
  transform: translateY(-50%);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  line-height: 1.2;
  color: var(--text-muted);
  text-transform: uppercase;
}
.ctxsw-plot {
  position: relative;
}
.ctxsw-svg {
  display: block;
  width: 98%;
  height: 274px;
}
.ctxsw-grid {
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 1;
  stroke-dasharray: 2 6;
}
.ctxsw-baseline {
  stroke: rgb(255 255 255);
  stroke-width: 0.8;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 1)) drop-shadow(0 0 3px rgba(255, 255, 255, 1)) drop-shadow(0 0 12px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.9));
}
.ctxsw-ticks {
  position: absolute;
  left: 75px;
  top: 59px;
  width: 14px;
  height: 240px;
  pointer-events: none;
}
.ctxsw-tick {
  position: absolute;
  left: 0;
  width: 6px;
  height: 1px;
  transform: translateY(-50%);
  background: rgb(255 255 255 / 40%);
}
.ctxsw-area {
  fill: rgb(255 255 255 / 0%);
  stroke: none;
  opacity: 0.7;
}
/* soft cloudy luminous haze filling the plot interior */
.ctxsw-area-glow {
  fill: url(#ctxswHaze);
  stroke: none;
  opacity: 0.6;
  filter: blur(9px);
}
/* fine luminous micro-dust grain clipped inside the chart fill */
.ctxsw-dust-dot {
  fill: #ffffff;
}
/* soft atmospheric haze filling the dashed dome interiors */
.ctxsw-dome-haze {
  fill: rgba(255, 255, 255, 0.05);
  filter: blur(6px);
}
/* soft luminous drips hanging beneath the chart line */
.ctxsw-drips {
  filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.7)) drop-shadow(0 0 3px rgba(255, 255, 255, 0.4));
}
.ctxsw-drip {
  vector-effect: non-scaling-stroke;
}
/* diffused light bleeding off the chart line */
.ctxsw-line-haze {
  fill: none;
  stroke: #ffffff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.5;
  filter: blur(7px);
}
.ctxsw-line {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 1)) drop-shadow(0 0 4px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 4px rgba(255, 255, 255, 0.55)) drop-shadow(0 0 44px rgba(255, 255, 255, 0.3));
}
.ctxsw-node {
  fill: rgba(255, 255, 255, 0.8);
  stroke: none;
  filter: blur(1.8px) drop-shadow(0 0 3px rgba(255, 255, 255, 1)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 18px rgba(255, 255, 255, 0.1)) drop-shadow(0 0 30px rgba(255, 255, 255, 0.3));
}
/* endpoint core + orbit ring wrapper, nudged slightly */
.ctxsw-endpoint-group {
  transform: translate(-2px, 2px);
}
/* faint luminous orbit ring around the endpoint core */
.ctxsw-endpoint-ring {
  fill: none;
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 0.7;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
}
/* endpoint core glow (final NOW dot only) */
.ctxsw-endpoint {
  filter:
    drop-shadow(0 0 5px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 3px rgba(255, 255, 255, 0.7))
    drop-shadow(0 0 5px rgba(255, 255, 255, 0.4));
}
.ctxsw-prevented path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-dasharray: 1.5 4;
  vector-effect: non-scaling-stroke;
}
.ctxsw-annotations {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ctxsw-annotation {
  position: absolute;
  transform: translateX(-50%);
  text-align: center;
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-secondary);
  white-space: nowrap;
}
.ctxsw-annotation-right {
  transform: translateX(-90%);
}
.ctxsw-annotation-line {
  display: block;
  width: 1px;
  height: 22px;
  margin: 4px auto 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), transparent);
}
.ctxsw-conn {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 4px;
}
.ctxsw-conn-line {
  width: 1px;
  height: 20px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.5));
}
.ctxsw-conn-dot {
  width: 4px;
  height: 4px;
  margin-top: -0.5px;
  border-radius: 50%;
  background: rgb(255 255 255 / 60%);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.9), 0 0 8px rgba(255, 255, 255, 0.5);
}
/* fork / split connector for the "Neura prevented" annotation */
.ctxsw-conn-fork {
  margin-top: 4px;
}
.ctxsw-fork-stem {
  width: 1px;
  height: 10px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.45));
}
.ctxsw-fork-bar {
  width: 90px;
  height: 1px;
  background: rgba(255, 255, 255, 0.45);
}
.ctxsw-fork-legs {
  display: flex;
  justify-content: space-between;
  width: 95px;
}
.ctxsw-fork-leg {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ctxsw-fork-leg .ctxsw-conn-line {
  height: 12px;
}
.ctxsw-x-labels {
  position: relative;
  height: 16px;
  margin-top: 10px;
}
.ctxsw-x-labels span {
  position: absolute;
  transform: translateX(-50%);
  font-size: 12px;
  color: var(--text-muted);
}

/* footer copy */
.ctxsw-summary {
  margin-top: 22px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.ctxsw-note {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-primary);
}
.ctxsw-recommend {
  margin-top: 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-primary);
}
.ctxsw-spark {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  fill: none;
  stroke: var(--text-primary);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ctxsw-foot {
  margin-top: 18px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* ---- Context Switching requested overrides ---- */
.context-switching-widget .today-title {
  font-size: 18px;
  font-weight: 400;
}

.ctxsw-meta {
  font-size: 9px;
  color: rgb(255 255 255 / 60%);
}

.ctxsw-body {
  margin-top: 23px;
}

.ctxsw-metric {
  top: -5px;
  left: 9px;
}

.ctxsw-metric-num {
  font-size: 58px;
  font-weight: lighter;
  color: rgb(255 255 255 / 80%);
}

.ctxsw-metric-unit {
  color: rgb(255 255 255 / 80%);
}

.ctxsw-metric-sub {
  margin-top: 6px;
  color: rgb(255 255 255 / 60%);
}

.ctxsw-y-labels {
  left: 10px;
  top: 60px;
  font-size: 9px;
  color: rgb(255 255 255 / 60%);
}

.ctxsw-plot {
  margin-top: 30px;
}

.ctxsw-annotation {
  font-size: 10px;
  color: rgb(255 255 255 / 50%);
}

.ctxsw-x-labels {
  height: 16px;
  margin-top: 0px;
  top: -25px;
}

.ctxsw-x-labels span {
  color: rgb(255 255 255 / 60%);
}

.ctxsw-summary {
  margin-top: 0px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgb(255 255 255 / 60%);
}

.ctxsw-note {
  color: rgb(255 255 255 / 80%);
}

.ctxsw-recommend {
  color: rgb(255 255 255 / 80%);
  gap: 2px;
}

.ctxsw-spark {
  width: 30px;
  height: 30px;
  margin-top: 0px;
  stroke: rgb(255 255 255 / 80%);
  stroke-width: 1;
  transform: translate(-3px, 0px);
}

.ctxsw-foot {
  margin-top: 10px;
}

/* ===================== MIND MIRROR WIDGET ===================== */
.mind-mirror-widget {
  position: absolute;
  z-index: 5;
  zoom: 0.9;
  width: calc(var(--v-widget-width) / 0.9);
  height: calc(var(--v-widget-height) / 0.9);
  max-width: 92vw;
  display: flex;
  flex-direction: column;
  padding: 28px 22px 22px 22px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: none;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
}
.mm-icon svg {
  fill: none;
  stroke: var(--text-primary);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.mm-icon-dot {
  fill: #ffffff;
  stroke: none;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 4px rgba(255, 255, 255, 0.6));
}
.mm-body {
  display: flex;
  flex-direction: column;
  /* The widget pads 22px, but the hero has to reach both edges, so the body
     spans the full width and carries that padding itself. */
  margin: 16px -22px 0;
  padding: 0 22px;
}
.mind-mirror-widget.collapsed .mm-body {
  display: none;
}
.mind-mirror-widget.collapsed [data-mm-toggle] svg {
  transform: rotate(-90deg);
}

/* tabs */
.mm-tabs {
  width: 92%;
  margin-left: 20px;
  display: flex;
  gap: 6px;
  padding: 0px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.06);
  z-index: 2;
}
.mm-tab {
  flex: 1;
  padding: 8px 0;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 14px;
  font-weight: 450;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.mm-tab:hover {
  color: var(--text-secondary);
}
.mm-tab.is-active {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* central hero visual (transparent PNG, no background behind it) */
.mm-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: -14px;
  margin-bottom: 0px;
}
.mm-shot {
  position: relative;
  display: flex;
  justify-content: center;
  width: calc(100% + 44px);
  margin: 0 -22px;
}
.mm-shot[hidden] {
  display: none;
}
.mm-hero-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  background: none;
  pointer-events: none;
  user-select: none;
}
.mm-hero-img[hidden] {
  display: none;
}
/* rippling copy layered over the reflection; masked so only the water moves */
.mm-hero-ripple {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  filter: url(#mmWater);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 48%, #000 66%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, transparent 48%, #000 66%, #000 100%);
}
.mm-water-defs {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}
.mm-timeline {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: -69px;
  margin-bottom: 70px;
  padding: 0 6px;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}
.mm-timeline[hidden] {
  display: none;
}

/* main insight sentence */
.mm-insight {
  margin-top: -55px;
  font-size: 14px;
  font-weight: 350;
  font-style: italic;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.9);
  margin-left: 8px;
}
.mind-mirror-widget.mm-on-patterns .mm-insight {
  margin-top: -18px;
}
.mind-mirror-widget.mm-on-patterns .mm-hero {
  margin-top: -36px;
}
/* green helper line */
.mm-helper {
  margin-top: 8px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #4ade808a;
  opacity: 1;
  margin-left: 8px;
}

/* metrics row */
.mm-metrics {
  display: flex;
  gap: 20px;
  margin-top: 30px;
  padding: 0px 10px;
}
.mm-metric {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mm-metric-label {
  font-size: 13px;
  color: rgb(255 255 255 / 65%);
}
.mm-metric-value {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-primary);
  letter-spacing: 0px;
}
.mm-bar {
  margin-top: 6px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.mm-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.85), 0 0 12px rgba(255, 255, 255, 0.4);
}

/* question */
.mm-question {
  margin-top: 32px;
  font-size: 14px;
  color: rgb(255 255 255 / 70%);
  margin-left: 8px;
}

/* mood chip row */
.mm-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin-top: 16px;
  padding-left: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.mm-chips::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.mm-chip {
  flex-shrink: 0;
  padding: 6px 19px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.mm-chip:hover {
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.16);
}
.mm-chip.is-selected {
  font-weight: 500;
  color: rgb(255 255 255);
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow: none;
}

/* recommendation line */
.mm-recommend span {
  margin-top: 1px;
  display: inline-block;
}
.mm-recommend {
  margin-top: 24px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
  margin-left: 5px;
}
.mm-spark {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 2px;
  fill: rgb(0 0 0);
  stroke: rgb(255 255 255);
}

/* footer metadata */
.mm-foot {
  margin-top: 20px;
  font-size: 12px;
  color: var(--text-muted);
  opacity: 0.7;
  margin-left: 8px;
}

/* ===================== DECISION BUDGET WIDGET ===================== */
.decision-budget-widget {
  position: absolute;
  z-index: 5;
  zoom: 0.95;
  width: calc(var(--h-widget-width) / 0.95);
  height: calc(var(--h-widget-height) / 0.95);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 24px 28px;
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.16) 0%, rgba(12, 14, 14, 0.13) 100%);
  backdrop-filter: blur(28px) saturate(120%);
  -webkit-backdrop-filter: blur(28px) saturate(120%);
  border: none;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.62);
}
.decision-budget-widget.collapsed .db-body,
.decision-budget-widget.collapsed .db-foot-divider,
.decision-budget-widget.collapsed .db-foot {
  display: none;
}
.decision-budget-widget.collapsed [data-db-toggle] svg {
  transform: rotate(-90deg);
}
.db-icon svg {
  fill: none;
  stroke: var(--text-primary);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.db-logo {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  flex-shrink: 0;
}

/* body: two columns */
.db-body {
  display: flex;
  gap: 26px;
  margin-top: 18px;
  align-items: stretch;
  flex: 1;
  min-height: 0;
}
.decision-budget-widget > * {
  flex-shrink: 0;
}
.decision-budget-widget > .db-body {
  flex-shrink: 1;
}
.db-visual {
  flex: unset;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
}
/* standing coins placed over the river background */
.db-coin {
  position: absolute;
  bottom: 22%;
  width: 70%;
  height: auto;
  display: block;
  pointer-events: none;
  user-select: none;
}
.db-coin-flat-first {
  left: -14%;
  width: 42%;
}
.db-coin-half-second {
  left: 2%;
  width: 32%;
  bottom: 78px;
}
.db-coin-half-third {
  left: 14%;
  width: 32%;
  bottom: 79px;
}
.db-coin-half-fourth {
  left: 26%;
  width: 32%;
  bottom: 78px;
}
.db-coin-half-fifth {
  left: 38%;
  width: 32%;
  bottom: 78px;
}
.db-coin-stand-sixth {
  left: 31%;
  bottom: 18%;
}
.db-coin-stand-seventh {
  left: 44%;
  bottom: 17%;
}
.db-coin-stand-eighth {
  left: 57%;
  bottom: 16%;
}
.db-coin-stand {
  transform-origin: 52% 58%;
  filter: brightness(1.05) drop-shadow(0 0 2px rgba(255, 255, 255, 1)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 14px rgba(255, 255, 255, 0.5)) drop-shadow(0 0 26px rgba(255, 255, 255, 0.34)) drop-shadow(0 0 46px rgba(255, 255, 255, 0.22));
  transition: transform 0.55s cubic-bezier(0.45, 0.05, 0.55, 0.95), opacity 0.32s ease 0.32s, filter 0.4s ease;
}
.db-coin-stand.db-coin-stand-sixth {
  transform-origin: 56% 59.7%;
}
.db-coin-stand.db-coin-stand-sixth.is-falling {
  transform: rotate(-68deg) scaleX(0.50) scaleY(0.75);
}
.db-coin-stand.db-coin-stand-seventh {
  transform-origin: 54% 59.5%;
}
.db-coin-stand.db-coin-stand-seventh.is-falling {
  transform: rotate(-68deg) scaleX(0.55) scaleY(0.75);
}
.db-coin-stand.db-coin-stand-eighth {
  transform-origin: 52% 59%;
}
.db-coin-stand.db-coin-stand-eighth.is-falling {
  transform: rotate(-68deg) scaleX(0.52) scaleY(0.74);
}
.db-coin-stand.is-falling {
  transform: rotate(-68deg) scale(0.75);
  opacity: 0;
  filter: none;
}
.db-coin-fall {
  width: 32%;
  bottom: 78px;
  opacity: 0;
  transition: opacity 0.38s ease 0.3s;
}
.db-coin-fall.is-shown {
  opacity: 1;
}
.db-coin-fall-6 { left: 50%; }
.db-coin-fall-7 { left: 62%; }
.db-coin-fall-8 { left: 74%; }
/* disintegration particles rising above the fallen / half-fallen coins */
.db-particles {
  position: absolute;
  left: -12%;
  bottom: 38%;
  width: 112%;
  height: 45%;
  pointer-events: none;
  z-index: 3;
}
.db-particle {
  position: absolute;
  bottom: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 3px 0.5px rgba(255, 255, 255, 0.5);
  opacity: 0;
  will-change: transform, opacity;
  animation: dbParticleRise var(--dur, 4s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes dbParticleRise {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.6);
  }
  15% {
    opacity: var(--peak, 0.9);
  }
  70% {
    opacity: calc(var(--peak, 0.9) * 0.5);
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx, 6px), var(--dy, -60px)) scale(0.3);
  }
}
.db-visual-img {
  width: 105%;
  height: auto;
  display: block;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 2%, #000 95%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, transparent 30%, #000 46%, #000 97%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, #000 2%, #000 95%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, transparent 30%, #000 46%, #000 97%, transparent 100%);
  mask-composite: intersect;
}
/* rippling copy layered over the reflection; masked so only the water moves */
.db-visual-ripple {
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  filter: url(#dbWater);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 2%, #000 95%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, transparent 55%, #000 72%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, #000 2%, #000 95%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, transparent 55%, #000 72%, #000 100%);
  mask-composite: intersect;
}
.db-water-defs {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}
/* right content column */
.db-content {
  flex: 1 1 48%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding-top: 6px;
}
.db-eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.db-metric {
  margin-top: 4px;
  font-size: 70px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  display: flex;
  gap: 15px;
  flex-direction: row;
  align-items: center;
}
.db-metric span:first-child {
  font-size: 5rem;
}
.db-copy {
  margin-top: 14px;
  font-size: 15px;
  font-weight: 350;
  line-height: 1.4;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
}
.db-divider {
  height: 1px;
  margin: 20px 0 15px 0px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 100%);
}
.db-insight {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  font-weight: 350;
  line-height: 1.5;
  color: rgb(255 255 255 / 60%);
  letter-spacing: 0.3px;
}
.db-spark {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 2px;
  fill: rgba(255, 255, 255, 0.85);
}

/* CTA button */
.db-cta {
  margin-top: 22px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0px;
  padding: 12px 18px;
  border-radius: 999px;
  color: var(--text-primary);
  font-family: inherit !important;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.14);
  font-size: 18px;
  font-weight: 400;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.db-cta:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.32), inset 0 0 14px rgba(255, 255, 255, 0.2);
}
.db-cta-spark {
  transform: translate(-8px, 3px);
  width: 30px;
  height: 30px;
  fill: var(--text-primary);
}

/* bottom-right note */
.db-note {
  margin-top: 22px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  font-weight: 350;
  line-height: 1.45;
  color: var(--text-muted);
}
.db-note-icon {
  width: 35px;
  height: 35px;
  flex-shrink: 0;
  margin-top: 1px;
  fill: none;
  stroke: rgb(255 255 255 / 85%);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* footer */
.db-foot-divider {
  width: 60%;
  height: 1px;
  margin: 0px 0 14px;
  background: linear-gradient(90deg, rgb(255 255 255 / 15%) 0%, rgb(255 255 255 / 15%) 50%, rgba(255, 255, 255, 0.03) 100%);
}
.db-foot {
  font-size: 13px;
  letter-spacing: 0.1em;
  color: rgb(255 255 255 / 50%);
  opacity: 0.75;
}

/* ===================== THOUGHT PARKING WIDGET ===================== */
.thought-parking-widget {
  position: absolute;
  z-index: 5;
  width: var(--sq-widget-width);
  height: var(--sq-widget-height);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 24px 28px;
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.16) 0%, rgba(12, 14, 14, 0.13) 100%);
  backdrop-filter: blur(28px) saturate(120%);
  -webkit-backdrop-filter: blur(28px) saturate(120%);
  border: none;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.62);
  color: var(--text-primary);
}
.thought-parking-widget.collapsed .thought-parking-body,
.thought-parking-widget.collapsed .thought-parking-foot-divider,
.thought-parking-widget.collapsed .thought-parking-footer {
  display: none;
}
.thought-parking-widget.collapsed [data-tp-toggle] svg {
  transform: rotate(-90deg);
}

/* header */
.thought-parking-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tp-head-left {
  display: flex;
  align-items: center;
  gap: 13px;
}
.tp-logo {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  flex-shrink: 0;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.08), inset 0 0 12px rgba(255, 255, 255, 0.05);
}
.tp-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.tp-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--text-primary);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tp-icon img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  transform: translate(0.5px, -15px);
}
.tp-logo {
  width: 50px;
  height: 50px;
}
.thought-parking-title {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: rgb(255 255 255 / 92%);
}
.tp-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}
.thought-parking-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 999;
}
.tp-action {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.tp-action:hover {
  background: rgba(255, 255, 255, 0.06);
}
.tp-action svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: rgb(255 255 255 / 92%);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* body: two columns */
.thought-parking-widget > * {
  flex-shrink: 0;
}
.thought-parking-body {
  display: flex;
  flex: 1;
  min-height: 0;
  gap: 55px;
  margin-top: 18px;
  align-items: stretch;
}
/* empty reserved artwork stage — no objects drawn here */
.thought-parking-art-stage {
  position: relative;
  flex: 0 0 45%;
  min-height: 360px;
  border-radius: 16px;
}
.tp-balloon {
  position: absolute;
  height: auto;
  display: block;
  pointer-events: none;
  user-select: none;
}
.tp-balloon-medium {
  width: 50%;
  left: -10%;
  bottom: -2%;
  filter: none;
  transform-origin: 50% 68%;
  animation: tpBalloonSway 5.5s ease-in-out -1.2s infinite;
}
.tp-balloon-medium-3 {
  width: 45%;
  left: 68%;
  bottom: 23%;
  filter: none;
  transform-origin: 50% 68%;
  animation: tpBalloonSway 5.8s ease-in-out -0.4s infinite;
}
.tp-balloon-medium-2 {
  width: 45%;
  left: 33%;
  bottom: 45%;
  filter: none;
  transform-origin: 50% 68%;
  animation: tpBalloonSway 6.2s ease-in-out -2.8s infinite;
}
.tp-balloon-large {
  width: 68%;
  left: -4%;
  bottom: 0%;
  filter: none;
  transform-origin: 50% 68%;
  animation: tpBalloonSway 7.3s ease-in-out -3.4s infinite;
}
.tp-balloon-small {
  width: 69%;
  left: 55%;
  bottom: -11%;
  filter: none;
  transform-origin: 50% 68%;
  animation: tpBalloonSway 4.8s ease-in-out -0.6s infinite;
}
/* wind sway: gentle bend left and right, with a slight easing hold at the edges */
@keyframes tpBalloonSway {
  0% {
    transform: rotate(-2.4deg);
  }
  50% {
    transform: rotate(2.6deg);
  }
  100% {
    transform: rotate(-2.4deg);
  }
}

/* right content column */
.thought-parking-content {
  flex: 1 1 58%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  margin-top: -44px;
}
.thought-parking-count-row {
  display: flex;
  align-items: baseline;
  gap: 20px;
}
.tp-count {
  font-size: 5rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.01em;
}
.tp-count-label {
  font-size: 17px;
  color: rgb(255 255 255 / 70%);
}

/* input field */
.thought-parking-input {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 20px;
  border-radius: 10px;
  border: 1px solid rgb(121 122 122);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.05), inset 0 0 14px rgba(255, 255, 255, 0.03);
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.thought-parking-input:focus-within {
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05), 0 0 24px rgba(255, 255, 255, 0.12);
}
.thought-parking-input:focus-within .tp-input-hint {
  opacity: 0.35;
}
.tp-input-field {
  flex: 1 1 auto;
  min-width: 0;
  font-family: inherit;
  font-size: 16px;
  color: var(--text-primary);
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
}
.tp-input-field::placeholder {
  color: var(--text-muted);
}
.tp-input-hint {
  display: flex;
  align-items: center;
  gap: 0px;
  font-size: 13px;
  color: rgb(255 255 255 / 70%);
  opacity: 0.8;
  margin-right: -25px;
}
.tp-input-hint-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  color: var(--text-muted);
  transform: translate(-5px, 0px);
}

/* section label */
.thought-parking-list-label {
  margin-top: 22px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 50%);
}

/* parked list */
.thought-parking-list {
  margin-top: 9px;
  max-height: 124px;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.thought-parking-list::-webkit-scrollbar {
  display: none;
}
.thought-parking-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.thought-parking-row:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.tp-row-title {
  font-size: 16px;
  color: rgb(255 255 255 / 95%);
}
.tp-row-time {
  font-size: 13px;
  color: rgb(255 255 255 / 50%);
}

/* CTA buttons */
.thought-parking-buttons {
  margin-top: 22px;
  display: flex;
  gap: 12px;
}
.tp-btn {
  flex: 1 1 auto;
  padding: 10px 20px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.tp-btn-primary {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow: 0 0 22px rgba(255, 255, 255, 0.12), inset 0 0 12px rgba(255, 255, 255, 0.05);
}
.tp-btn-primary:hover {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.2);
}
.tp-btn-secondary {
  color: rgb(255 255 255 / 60%);
  background: transparent;
  border: 1px solid rgb(255 255 255 / 12%);
}
/* insight block */
.thought-parking-insight {
  margin-top: 22px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.tp-spark {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  margin-top: 1px;
  fill: none;
  stroke: rgb(255 255 255);
}
.tp-insight-main {
  display: block;
  font-size: 15px;
  line-height: 1.5;
  color: rgb(255 255 255 / 92%);
}
.tp-insight-sub {
  display: block;
  margin-top: 8px;
  font-size: 15px;
  color: rgb(255 255 255 / 50%);
}

/* footer */
.thought-parking-foot-divider {
  display: none;
}
.thought-parking-footer {
  margin-top: 32px;
  position: relative;
  bottom: 0;
  left: 27.5rem;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: rgb(255 255 255 / 55%);
  opacity: 0.75;
}

/* ===================== NEVA WIDGET ===================== */
.neva-widget {
  position: absolute;
  z-index: 5;
  zoom: 0.87;
  width: calc(var(--v-widget-width) / 0.87);
  height: calc(var(--v-widget-height) / 0.87);
  max-width: 92vw;
  display: flex;
  flex-direction: column;
  padding: 29px 26px 20px;
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.16) 0%, rgba(12, 14, 14, 0.13) 100%);
  backdrop-filter: blur(28px) saturate(120%);
  -webkit-backdrop-filter: blur(28px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}
.neva-icon-badge {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.05);
}
.neva-icon-badge svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.neva-icon-img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  display: block;
  transform: translate(-7px, -6px);
}
.neva-widget .neva-title {
  font-size: 17px;
  font-weight: 500;
}
.neva-body {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  justify-content: space-between;
}
.neva-widget.collapsed .neva-body {
  display: none;
}
.neva-widget.collapsed [data-neva-toggle] svg {
  transform: rotate(-90deg);
}

/* empty reserved hero media area for a future image asset */
.neva-hero {
  position: relative;
  width: 100%;
  height: 360px;
  border-radius: 18px;
  overflow: hidden;
  will-change: transform;
  animation: neva-hero-scale 8s ease-in-out infinite, neva-hero-sway 14s ease-in-out infinite;
}
@keyframes neva-hero-scale {
  0% {
    scale: 1;
  }
  50% {
    scale: 1.05;
  }
  100% {
    scale: 1;
  }
}
@keyframes neva-hero-sway {
  0% {
    rotate: 0deg;
  }
  20% {
    rotate: 5deg;
  }
  32% {
    rotate: 5deg;
  }
  50% {
    rotate: 0deg;
  }
  70% {
    rotate: -5deg;
  }
  82% {
    rotate: -5deg;
  }
  100% {
    rotate: 0deg;
  }
}
.neva-hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 74%;
  height: 74%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 45%, transparent 72%);
  filter: blur(24px);
  pointer-events: none;
}
.neva-hero-core {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(circle at 48% 52%, #000 0%, #000 16%, transparent 34%);
  mask-image: radial-gradient(circle at 48% 52%, #000 0%, #000 16%, transparent 34%);
  will-change: transform, opacity;
  animation: neva-core-pulse 3.6s ease-in-out infinite;
}
.neva-hero-core-img {
  animation: none;
}
@keyframes neva-core-pulse {
  0% {
    transform: scale(0.82);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.28);
    opacity: 0.5;
  }
  100% {
    transform: scale(0.82);
    opacity: 0.5;
  }
}
.neva-hero-img {
  position: absolute;
  left: 48%;
  top: 54%;
  width: 108%;
  height: 125%;
  object-fit: contain;
  will-change: transform, opacity, filter;
  animation: neva-hero-breathe 4.2s ease-in-out infinite;
}
.neva-hero-img-overlay {
  opacity: 0.35;
  mix-blend-mode: screen;
  filter: url(#nevaFlow);
  animation: neva-hero-breathe-overlay 5s ease-in-out infinite;
}
.neva-flow-defs {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}
@keyframes neva-hero-breathe {
  0% {
    transform: translate(-50%, -50%);
    filter: brightness(1) drop-shadow(0 0 6px rgba(255, 255, 255, 0.08));
  }
  25% {
    transform: translate(-50%, calc(-50% - 3px));
    filter: brightness(1.12) drop-shadow(0 0 15px rgba(255, 255, 255, 0.18));
  }
  50% {
    transform: translate(-50%, calc(-50% - 6px));
    filter: brightness(1.24) drop-shadow(0 0 24px rgba(255, 255, 255, 0.3));
  }
  75% {
    transform: translate(-50%, calc(-50% - 2.5px));
    filter: brightness(1.1) drop-shadow(0 0 14px rgba(255, 255, 255, 0.17));
  }
  100% {
    transform: translate(-50%, -50%);
    filter: brightness(1) drop-shadow(0 0 6px rgba(255, 255, 255, 0.08));
  }
}
@keyframes neva-hero-breathe-overlay {
  0% {
    transform: translate(-50%, -50%);
    opacity: 0.28;
    filter: url(#nevaFlow) brightness(1.05);
  }
  33% {
    transform: translate(-50%, calc(-50% + 2px));
    opacity: 0.45;
    filter: url(#nevaFlow) brightness(1.2);
  }
  66% {
    transform: translate(-50%, calc(-50% + 1px));
    opacity: 0.36;
    filter: url(#nevaFlow) brightness(1.14);
  }
  100% {
    transform: translate(-50%, -50%);
    opacity: 0.28;
    filter: url(#nevaFlow) brightness(1.05);
  }
}

.neva-message {
  margin-top: 12px;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.50;
  letter-spacing: 0px;
  color: rgba(255, 255, 255, 0.92);
  margin-left: 18px;
}

.neva-command {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding: 16px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgb(255 255 255 / 6%);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.05), inset 0 0 14px rgba(255, 255, 255, 0.03);
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.neva-command:focus-within {
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05), 0 0 24px rgba(255, 255, 255, 0.12);
}
.neva-command-mic,
.neva-command-send {
  flex-shrink: 0;
  display: inline-flex;
  color: rgba(255, 255, 255, 0.6);
}
.neva-command-mic svg,
.neva-command-send svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: rgb(255 255 255 / 80%);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.neva-command-input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: inherit;
  font-size: 16px;
  color: var(--text-primary);
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
}
.neva-command-input::placeholder {
  color: var(--text-muted);
}

.neva-quick {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}
.neva-quick-btn {
  flex: 1;
  padding: 10px 12px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.02);
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.neva-quick-btn:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.neva-footer {
  margin-top: 22px;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

/* ===================== MEETING WIDGET ===================== */
.meeting-widget {
  position: absolute;
  z-index: 5;
  zoom: 0.95;
  width: calc(var(--v-widget-width) / 0.95);
  height: calc(var(--v-widget-height) / 0.95);
  max-width: 92vw;
  display: flex;
  flex-direction: column;
  padding: 26px 24px 20px;
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.16) 0%, rgba(12, 14, 14, 0.13) 100%);
  backdrop-filter: blur(28px) saturate(120%);
  -webkit-backdrop-filter: blur(28px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}
.meeting-icon-badge {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.05);
}
.meeting-icon-badge svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translate(1px, 0px);
}
.meeting-actions {
  position: relative;
  gap: 2px;
}
.meeting-body {
  display: flex;
  flex-direction: column;
  margin-top: 18px;
}
/* Children keep their natural height — otherwise the flex column squashes the
   panel and its overflow:hidden clips the avatars and Join. */
.meeting-body > * {
  flex-shrink: 0;
}
.meeting-widget.collapsed .meeting-body {
  display: none;
}
.meeting-widget.collapsed [data-meeting-toggle] svg {
  transform: rotate(-90deg);
}

/* more menu */
.meeting-more {
  position: relative;
  display: inline-flex;
}
.meeting-more-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(40, 43, 42, 0.9) 0%, rgba(20, 22, 22, 0.92) 100%);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}
.meeting-more-menu[hidden] {
  display: none;
}
.meeting-more-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: none;
  border-radius: 9px;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.82);
  text-align: left;
  transition: background 0.15s ease, color 0.15s ease;
}
.meeting-more-item:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}
.meeting-more-item svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* top meeting panel */
.meeting-panel {
  position: relative;
  padding: 16px 20px 20px 20px;
  border-radius: 18px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 60%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.meeting-panel::before {
  content: "";
  position: absolute;
  top: -1%;
  left: 16%;
  width: 70%;
  height: 1.7%;
  background: radial-gradient(ellipse, rgb(255 255 255) 0%, #ffffff00 70%);
  pointer-events: none;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 1)) drop-shadow(0 0 30px rgba(255, 255, 255, 1)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.9));
}
.meeting-panel-label {
  font-size: 13px;
  color: rgb(255 255 255 / 60%);
}
.meeting-panel-title {
  margin-top: 6px;
  font-size: 22px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.95);
}
.meeting-countdown {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 0px;
}
.meeting-countdown-in {
  font-size: 38px;
  font-weight: 300;
  color: var(--text-secondary);
}
.meeting-countdown-num {
  font-size: 58px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
}
.meeting-countdown-unit {
  font-size: 38px;
  font-weight: 300;
  color: rgb(255 255 255 / 60%);
}
.meeting-panel-meta {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
}
.meeting-panel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 15px;
}
.meeting-avatars {
  display: flex;
  align-items: center;
  gap: 13px;
}
.meeting-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  margin-left: -8px;
  border: 1px solid rgb(255 255 255 / 30%);
  object-fit: cover;
  display: block;
  filter: grayscale(1);
}
.meeting-avatar:first-child {
  margin-left: 0;
}
.meeting-avatar-more {
  display: block;
  place-items: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  background: transparent;
  filter: none;
  line-height: 30px;
  text-align: center;
}
.meeting-join {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 26px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.14);
  transition: background 0.2s ease, border-color 0.2s ease;
  position: relative;
  top: 4px;
  left: 2px;
  width: 30%;
}
.meeting-join svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.meeting-join:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.32), inset 0 0 14px rgba(255, 255, 255, 0.2);
}

/* section labels */
.meeting-section-label {
  margin-top: 16px;
  font-size: 11px;
  letter-spacing: 0.10em;
  color: rgb(255 255 255 / 70%);
  margin-left: 10px;
}

/* prep agenda */
.meeting-agenda {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 12px;
  padding: 0px 8px;
}
.meeting-agenda-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.meeting-agenda-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: rgb(255 255 255);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.meeting-agenda-main {
  flex: 1;
  min-width: 0;
}
.meeting-agenda-title {
  margin-top: 4px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.92);
}
.meeting-agenda-list {
  margin: 0px;
  padding-left: 14px;
  list-style: none;
}
.meeting-agenda-list li {
  position: relative;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}
.meeting-agenda-list li::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgb(255 255 255);
}
.meeting-ready-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.meeting-ready-badge svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: rgb(255 255 255 / 92%);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* action links */
.meeting-links {
  width: 96%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 15px;
  padding: 0px 18px;
}
.meeting-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  color: var(--text-secondary);
  transition: color 0.15s ease;
}
.meeting-link:hover {
  color: #fff;
}
.meeting-link svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: rgb(255 255 255 / 92%);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* timeline */
.meeting-timeline {
  position: relative;
  margin-top: 18px;
  padding: 0 12px;
}
.meeting-timeline-axis {
  position: relative;
  height: 14px;
}
.meeting-timeline-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  /* zoom 0.95 would shrink a 1px rule below a device pixel and drop it. */
  height: calc(1px / 0.95);
  background: linear-gradient(to right, transparent, rgb(255 255 255 / 65%) 0%, rgb(255 255 255) 20%, rgb(255 255 255 / 30%) 36%, rgba(255, 255, 255, 0.25) 42%, rgb(255 255 255) 83%, rgb(255 255 255 / 37%) 83%, rgb(255 255 255) 100%, transparent);
}
.meeting-tick {
  position: absolute;
  top: 50%;
  width: calc(1px / 0.95);
  height: 16px;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.28);
}
.meeting-now-dot {
  position: absolute;
  top: 4%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--accent-green);
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.7);
}
.week-bar-dot {
  width: 2px;
  height: 2px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
}
.meeting-timeline-labels {
  position: relative;
  height: 16px;
  margin-bottom: 8px;
}
.meeting-timeline-labels span {
  position: absolute;
  transform: translateX(-50%);
  font-size: 11.5px;
  color: var(--text-muted);
}

/* event cards */
.meeting-events {
  display: flex;
  gap: 0px;
  margin-top: 2px;
}
.meeting-event {
  min-width: 0;
  padding: 10px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.meeting-event-name {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.2;
}
.meeting-event-time {
  margin-top: 6px;
  font-size: 8px;
  color: rgb(255 255 255 / 50%);
  text-wrap: nowrap;
}
.meeting-event-focus {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.14);
  background: transparent;
}
.meeting-event-focus .meeting-event-name {
  color: rgb(255 255 255 / 40%);
  text-wrap: nowrap;
  font-size: 10px;
}
.meeting-event-focus .meeting-event-time {
  color: rgb(255 255 255 / 40%);
}

/* dashed lines next to focus window */
.meeting-event-dashes {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 6px;
  transform: rotate(90deg);
}
.meeting-event-dashes:nth-of-type(1),
.meeting-event-dashes:nth-of-type(3) {
  position: relative;
  left: 11px;
}
.meeting-dash-line {
  width: 1px;
  height: 3px;
  background: rgba(255, 255, 255, 0.25);
}

/* stats row */
.meeting-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  margin-left: 8px;
}
.meeting-stat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--text-secondary);
}
.meeting-stat svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.6);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.meeting-stat-sep {
  color: var(--text-muted);
}

/* recommendation */
.meeting-recommend {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 20px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
}
.meeting-spark {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 1;
  stroke-linecap: round;
  margin-left: 2px;
  stroke-linejoin: round;
}

/* footer */
.meeting-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding: 0px 6px;
  border-top: none;
}
.meeting-footer-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-muted);
}
.meeting-footer-left svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.meeting-footer-right {
  font-size: 11px;
  color: var(--text-muted);
}

/* ===================== BEST FOCUS WINDOW WIDGET ===================== */
.focus-window-widget {
  position: absolute;
  z-index: 5;
  width: var(--h-widget-width);
  height: var(--h-widget-height);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 24px 24px 14px;
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.16) 0%, rgba(12, 14, 14, 0.13) 100%);
  backdrop-filter: blur(28px) saturate(120%);
  -webkit-backdrop-filter: blur(28px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}
.focus-window-badge {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.05);
}
.focus-window-badge svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.focus-window-dot {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}
.focus-window-actions {
  position: relative;
  gap: 4px;
}
.focus-window-more {
  position: relative;
  display: inline-flex;
}
.focus-window-widget > * {
  flex-shrink: 0;
}
.focus-window-body {
  display: flex;
  flex-direction: column;
  /* the scroll box reaches the card edges so the full-bleed hero keeps its
     bleed instead of being clipped by the scroll boundary */
  margin: -15px -24px 0;
  padding: 0 24px;
}
.focus-window-body > * {
  flex-shrink: 0;
}
.focus-window-widget.collapsed .focus-window-body {
  display: none;
}
.focus-window-widget.collapsed [data-focuswin-toggle] svg {
  transform: rotate(-90deg);
}

/* hero placeholder */
.focus-window-hero {
  position: relative;
  width: calc(100% + 48px);
  margin-left: -24px;
  margin-right: -24px;
  height: 248px;
  overflow: hidden;
}
.focus-window-hero img {
  width: 101%;
  height: 102%;
  object-fit: cover;
  object-position: center center;
  display: block;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, black 0%, black 100%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 18%, black 100%, transparent 100%);
  mask-composite: intersect;
}
/* rippling water copy over the sea (lower half only) */
.focus-window-hero img.focus-window-hero-ripple {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  filter: url(#fwWater);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 50%, #000 66%, #000 100%), linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0%, transparent 50%, #000 66%, #000 100%), linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
  mask-composite: intersect;
}
/* drifting cloud layers — left and right are independent so each can be tuned */
.focus-window-hero img.focus-window-hero-cloud {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
/* left cloud (left of the sun) */
.focus-window-hero img.focus-window-hero-cloud-left {
  filter: url(#fwCloudsLeft);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 22%, #000 32%, #000 46%, transparent 58%), linear-gradient(to right, transparent 0%, #000 6%, #000 20%, transparent 28%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0%, transparent 22%, #000 32%, #000 46%, transparent 58%), linear-gradient(to right, transparent 0%, #000 6%, #000 20%, transparent 28%);
  mask-composite: intersect;
}
/* right cloud (right of the sun) */
.focus-window-hero img.focus-window-hero-cloud-right {
  filter: url(#fwCloudsRight);
  -webkit-mask-image: linear-gradient(to bottom, transparent 12%, #000 22%, #000 44%, transparent 56%), linear-gradient(to right, transparent 72%, #000 82%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 12%, #000 22%, #000 44%, transparent 56%), linear-gradient(to right, transparent 72%, #000 82%, #000 100%);
  mask-composite: intersect;
}
/* mid cloud (first cloud right of the sun, dropping in from the top) */
.focus-window-hero img.focus-window-hero-cloud-mid {
  filter: url(#fwCloudsMid);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 44%, transparent 56%), linear-gradient(to right, transparent 44%, #000 50%, #000 62%, transparent 70%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 44%, transparent 56%), linear-gradient(to right, transparent 44%, #000 50%, #000 62%, transparent 70%);
  mask-composite: intersect;
}
.focus-window-water-defs {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}
/* shimmering sun glow */
.focus-window-sun-glow {
  position: absolute;
  top: 57%;
  left: 32.5%;
  width: 200px;
  height: 200px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: screen;
  background: radial-gradient(circle, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 70%) 24%, rgb(255 255 255 / 12%) 45%, #00000000 68%);
  animation: fwSunGlow 4.5s ease-in-out infinite;
}
@keyframes fwSunGlow {
  0%,
  100% {
    opacity: 0.12;
    transform: translate(-50%, -50%) scale(0.94);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05);
  }
}
/* time label above the sun */
.focus-window-hero-time {
  position: absolute;
  top: 44%;
  left: 32.5%;
  transform: translate(-50%, -50%);
  z-index: 4;
  pointer-events: none;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1px;
  color: rgb(255 255 255 / 75%);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
  white-space: nowrap;
}
/* twinkling sky stars (fixed position, blink only) */
.focus-window-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.focus-window-stars i {
  position: absolute;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 3px 0.5px rgba(255, 255, 255, 0.5);
  opacity: 0;
  animation: fwStarTwinkle var(--dur, 4s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes fwStarTwinkle {
  0%,
  100% {
    opacity: 0.1;
  }
  50% {
    opacity: 0.95;
  }
}

/* now marker */
.focus-window-now {
  margin-top: -70px;
  font-size: 10px;
  letter-spacing: 0px;
  margin-left: 8px;
  color: rgb(255 255 255 / 45%);
}
.focus-window-now .focus-window-dot-sep {
  margin: 0 2px;
  width: 2px;
  height: 2px;
}

/* timeline labels */
.focus-window-timeline {
  display: flex;
  justify-content: space-between;
  margin-top: 28px;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: rgb(255 255 255 / 40%);
  padding: 0px 10px;
}

/* lower content */
.focus-window-content {
  display: flex;
  justify-content: space-between;
  gap: 0px;
  margin-top: 22px;
}
.focus-window-left {
  min-width: 0;
}
.focus-window-label {
  font-size: 11px;
  letter-spacing: 2px;
  color: rgb(255 255 255 / 55%);
  margin-left: 12px;
}
.focus-window-time {
  margin-top: -5px;
  font-size: 40px;
  font-weight: 300;
  letter-spacing: 1px;
  color: rgb(255 255 255 / 92%);
  margin-left: 10px;
}
.focus-window-sub {
  margin-top: 2px;
  font-size: 15px;
  color: rgb(255 255 255 / 50%);
  margin-left: 12px;
}
.focus-window-tags {
  margin-top: 16px;
  font-size: 10.5px;
  color: rgb(255 255 255 / 50%);
  margin-left: 12px;
}
.focus-window-dot-sep {
  margin: 0 12px;
  display: inline-block;
  width: 2px;
  height: 2px;
  background: rgb(255 255 255 / 50%);
  border-radius: 50%;
  vertical-align: middle;
}
.focus-window-desc {
  margin-top: 12px;
  font-size: 16px;
  color: rgb(255 255 255 / 50%);
  margin-left: 12px;
}
.focus-window-foot {
  margin-top: 18px;
  font-size: 11px;
  color: rgb(255 255 255 / 40%);
  margin-left: 12px;
  letter-spacing: 1.5px;
}

/* right block */
.focus-window-right {
  flex-shrink: 0;
  width: 260px;
  display: flex;
  flex-direction: column;
  margin-top: 5px;
}
.focus-window-protect {
  margin-left: 20px;
  width: 84%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0px;
  padding: 8px 20px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 15px;
  color: rgb(255 255 255);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.14);
}
.focus-window-protect:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.32), inset 0 0 14px rgba(255, 255, 255, 0.2);
}
.focus-window-protect svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: rgb(255 255 255 / 90%);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translate(-4px, 0px);
}
.focus-window-recommend {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-top: 26px;
}
.focus-window-spark {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 0.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.focus-window-recommend-text {
  margin-top: 4px;
}
.focus-window-recommend-text p {
  font-size: 14px;
  line-height: 1.5;
  color: rgb(255 255 255 / 82%);
}
.focus-window-followup {
  margin-top: 12px;
  color: rgb(255 255 255 / 42%) !important;
}

/* ===================== FLOW TRACKER WIDGET ===================== */
.flow-tracker-widget {
  position: absolute;
  z-index: 5;
  zoom: 0.9;
  width: calc(var(--h-widget-width) / 0.9);
  height: calc(var(--h-widget-height) / 0.9);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 28px 24px 20px;
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.16) 0%, rgba(12, 14, 14, 0.13) 100%);
  backdrop-filter: blur(28px) saturate(120%);
  -webkit-backdrop-filter: blur(28px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}
.flow-tracker-badge {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.05);
}
.flow-tracker-badge svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.flow-tracker-dot {
  background: rgba(255, 255, 255, 0.55);
  box-shadow: none;
}
.flow-tracker-actions {
  position: relative;
  gap: 2px;
}
.flow-tracker-more {
  position: relative;
  display: inline-flex;
}
.flow-tracker-body {
  display: flex;
  flex-direction: column;
  margin-top: 14px;
  padding: 0px 6px;
}
.flow-tracker-body > * {
  flex-shrink: 0;
}
.flow-tracker-widget.collapsed .flow-tracker-body {
  display: none;
}
.flow-tracker-widget.collapsed [data-flowtrack-toggle] svg {
  transform: rotate(-90deg);
}
.flow-dot-sep {
  display: inline-block;
  width: 2px;
  height: 2px;
  margin: 0 6px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
  opacity: 0.6;
}
.flow-tracker-meta {
  font-size: 12px;
  color: rgb(255 255 255 / 55%);
}
.flow-tracker-big {
  margin-top: 6px;
  font-size: 52px;
  font-weight: 300;
  letter-spacing: 0px;
  color: rgb(255 255 255 / 92%);
}
.flow-tracker-sub {
  margin-top: 4px;
  font-size: 13.5px;
  color: rgb(255 255 255 / 40%);
}

.flow-tracker-sub .flow-dot-sep {
  margin: 5px;
}

.flow-tracker-widget .today-title {
  font-size: 16px;
}
.flow-tracker-chart {
  position: relative;
  margin: -16px 0 8px;
  height: 260px;
}
.flow-stack-node {
  fill: rgba(255, 255, 255, 0.8);
  stroke: none;
  filter: blur(1.8px) drop-shadow(0 0 3px rgba(255, 255, 255, 1))
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.8))
    drop-shadow(0 0 18px rgba(255, 255, 255, 0.1))
    drop-shadow(0 0 30px rgba(255, 255, 255, 0.3));
}
.flow-microlights {
  pointer-events: none;
}
.flow-node-light {
  pointer-events: none;
}
.flow-node-halo {
  fill: url(#flowSparkBloom);
  mix-blend-mode: screen;
}
.flow-node-bloom {
  fill: url(#flowSparkBloom);
  mix-blend-mode: screen;
}
.flow-node-core {
  fill: rgba(255, 255, 255, 0.95);
  mix-blend-mode: screen;
}
.flow-node-spark {
  fill: #ffffff;
  mix-blend-mode: screen;
}
.flow-conn-bloom {
  fill: url(#flowSparkBloom);
  mix-blend-mode: screen;
  pointer-events: none;
}
.flow-glint {
  fill: #ffffff;
  mix-blend-mode: screen;
  pointer-events: none;
  filter: drop-shadow(0 0 1.4px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 3px rgba(255, 255, 255, 0.35));
}
.flow-dust {
  fill: #ffffff;
  mix-blend-mode: screen;
  pointer-events: none;
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.7));
}
.flow-chart-bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 40%;
  height: 22%;
  border-radius: 0px;
  background: linear-gradient(90deg, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 13%) 20%, rgb(255 255 255 / 12%) 88%, rgba(0, 0, 0, 0) 100%);
  filter: blur(0px);
  pointer-events: none;
}
.flow-chart-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(255 255 255 / 27%) 0%, rgb(255 255 255 / 14%) 16%, rgb(255 255 255 / 3%) 40%, rgb(255 255 255 / 0%) 60%, rgb(255 255 255 / 5%) 84%, rgb(255 255 255 / 21%) 100%);
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 87%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 20%, rgb(0 0 0) 86%, rgba(0, 0, 0, 0) 100%);
  mix-blend-mode: screen;
  pointer-events: none;
}
.flow-svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.flow-star-img {
  position: absolute;
  width: 104px;
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 3;
}
.flow-pulse-svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.flow-pulse {
  will-change: transform, opacity;
}
.flow-svg path {
  fill: none;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 1)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 0px rgba(255, 255, 255, 0.55)) drop-shadow(0 0 18px rgba(255, 255, 255, 0.3));
}
.flow-svg path.flow-intro {
  filter: none;
}
.flow-svg path.flow-guide {
  filter: none;
}
.flow-svg .flow-rail-glow path {
  fill: none;
  stroke: #ffffff99;
  stroke-width: 1;
  stroke-opacity: 0.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 7px rgba(255, 255, 255, 1)) drop-shadow(0 0 14.5px rgba(255, 255, 255, 0.92)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.46));
}
.flow-svg .flow-rail-body path {
  fill: none;
  stroke: #ffffff5e;
  stroke-width: 2px;
  stroke-opacity: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: none;
}
.flow-svg .flow-rail-core path {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1;
  stroke-opacity: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 1)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 0px rgba(255, 255, 255, 0.55)) drop-shadow(0 0 18px rgba(255, 255, 255, 0.3));
}
.flow-floor-nodes circle {
  filter: blur(1px);
}
.flow-pulse-core {
  fill: #ffffff;
  filter: drop-shadow(0 0 1.4px rgba(255, 255, 255, 1));
}
.flow-pulse-bloom {
  fill: url(#flowPulseGlow);
}
.flow-pulse-halo {
  fill: url(#flowPulseGlow);
  opacity: 0.3;
}
.flow-pulse-trail {
  fill: none;
  stroke: url(#flowPulseTrailGrad);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.flow-spark-bloom {
  fill: url(#flowSparkBloom);
}
.flow-floor-node {
  fill: rgba(255, 255, 255, 0.8);
  stroke: none;
  filter: blur(1.8px) drop-shadow(0 0 3px rgba(255, 255, 255, 1))
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.8))
    drop-shadow(0 0 18px rgba(255, 255, 255, 0.1))
    drop-shadow(0 0 30px rgba(255, 255, 255, 0.3));
}
.flow-note {
  position: absolute;
  font-size: 13px;
  line-height: 1.1;
  color: rgb(255 255 255 / 62%);
  white-space: nowrap;
  pointer-events: none;
}
.flow-note-c {
  transform: translate(-50%, -50%);
}
.flow-note-l {
  transform: translateY(-50%);
}
.flow-note-sub {
  font-size: 12px;
  color: rgb(255 255 255 / 40%);
}
.flow-note-strong {
  color: rgb(255 255 255 / 82%);
}
.flow-top-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
  margin-top: -56px;
}
.flow-label-group {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  transform: translateX(0%);
  justify-content: center;
}
.flow-label-group::after {
  content: '';
  position: absolute;
  top: var(--connector-top, 24px);
  left: 50%;
  width: 1px;
  height: var(--connector-height, 25px);
  background: rgb(255 255 255 / 50%);
}
.flow-label-group .flow-note {
  margin: 0 !important;
  position: static;
  transform: none;
  color: rgb(255 255 255 / 50%);
}
.flow-zone-label {
  position: absolute;
  left: 2px;
  top: 51%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: none;
}
.flow-zone-label .flow-note {
  position: static;
  transform: none;
  color: rgb(255 255 255 / 60%);
}
.flow-note-bank {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: translateX(-50%);
  white-space: normal;
}
.flow-brace {
  width: 16px;
  height: 60px;
  margin-top: 5px;
  overflow: visible;
  transform: rotate(270deg) translate(24px, -25px);
}
.flow-brace-valley {
  position: absolute;
  width: 16px;
  height: 66px;
  transform: rotate(90deg) translate(-33px, 0px) scale(0.82);
}
.flow-brace path {
  stroke: rgb(255 255 255 / 39%);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.55));
}
.flow-bank-dot {
  width: 3px;
  height: 3px;
  margin-top: 4px;
  border-radius: 50%;
  background: rgb(255 255 255 / 68%);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.95), 0 0 8px rgba(255, 255, 255, 0.55);
}
.flow-x-labels {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0px;
  height: 34px;
  margin-bottom: -13px;
}
.flow-x-labels span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 14px;
  line-height: 17px;
  color: rgb(255 255 255 / 45%);
}
.flow-x-num::after {
  content: '';
  display: block;
  width: 2px;
  height: 2px;
  margin: 4px auto 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 50%);
}
.flow-x-mid {
  top: 23px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgb(255 255 255 / 70%);
  margin-top: 8px;
}
.flow-tracker-line {
  font-size: 13px;
  color: rgb(255 255 255 / 50%);
  margin-top: 16px;
}
.flow-tracker-line:first-of-type {
  margin-top: 4px;
}
.flow-tracker-stats {
  margin-top: 20px;
  font-size: 12.5px;
  color: rgb(255 255 255 / 50%);
}
.flow-tracker-message {
  margin-top: 12px;
  font-size: 16px;
  color: rgb(255 255 255 / 92%);
}
.flow-tracker-insight {
  display: flex;
  align-items: flex-start;
  gap: 0px;
  margin-top: 14px;
}
.flow-tracker-spark {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  margin-top: 1px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.8);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translate(-5px, -1px);
}
.flow-tracker-insight span {
  font-size: 14px;
  line-height: 1.5;
  color: rgb(255 255 255 / 72%);
}
.flow-tracker-footer {
  margin-top: 4px;
  font-size: 11.5px;
  letter-spacing: 0.3px;
  color: rgb(255 255 255 / 34%);
}

.flow-node-ray {
  fill: rgba(255, 255, 255, 1);
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 2.5px rgba(255, 255, 255, 0.5));
}
.flow-node-ray-diag {
  opacity: 0.5;
}
.flow-node-core-hot {
  fill: rgba(255, 255, 255, 1);
  filter: drop-shadow(0 0 1.6px rgba(255, 255, 255, 1)) drop-shadow(0 0 3.5px rgba(255, 255, 255, 0.7));
}
/* ===================== THE WHY CARD WIDGET ===================== */
.why-card-widget {
  position: absolute;
  z-index: 5;
  zoom: 0.95;
  width: calc(var(--sq-widget-width) / 0.95);
  height: calc(var(--sq-widget-height) / 0.95);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 26px 26px 20px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: none;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  color: var(--text-primary);
  overflow: hidden;
}
.why-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.why-head-left {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}
.why-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.why-icon svg {
  width: 30px;
  height: 30px;
  fill: rgba(255, 255, 255, 0.9);
  stroke: none;
  transform: translate(1px, 2px);
}
.why-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
}
.why-status-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}
.why-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.why-action {
  background: none;
  border: none;
  cursor: pointer;
  padding: 7px;
  display: inline-flex;
  color: var(--text-secondary);
  transition: opacity 0.15s ease;
}
.why-action:hover {
  opacity: 0.7;
}
.why-action svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.why-action-pin svg {
  transform: rotate(40deg);
}
.why-action.pinned {
  color: var(--text-primary);
}
.why-card-widget > * {
  flex-shrink: 0;
}
.why-body {
  display: flex;
  flex: 1;
  min-height: 0;
  gap: 94px;
  margin-top: 20px;
}
.why-card-widget.collapsed .why-body {
  display: none;
}
.why-card-widget.collapsed [data-why-toggle] svg {
  transform: rotate(-90deg);
}

/* left scene visual (single connected image with glowing constellation) */
.why-visual {
  position: relative;
  flex: 0 0 300px;
  width: 300px;
  min-height: 520px;
  margin-bottom: -20px;
}
.why-defs {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}
.why-scene-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translateY(-24px);
}
.why-scene {
  position: absolute;
  left: 50%;
  bottom: -34px;
  transform: translateX(-50%);
  width: 380px;
  height: auto;
  pointer-events: none;
  filter: url(#whyKnockout) brightness(1.2);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 26%, #000 74%, transparent 100%),
    linear-gradient(to bottom, transparent 0 68px, #000 72px);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, #000 26%, #000 74%, transparent 100%),
    linear-gradient(to bottom, transparent 0 68px, #000 72px);
  mask-composite: intersect;
}
/* bloom layer: heavily blurred copy masked to the upper center column so only the
   line/star/points bloom into their surroundings (mountains + river stay dim) */
.why-scene-bloom {
  position: absolute;
  left: 50%;
  bottom: -34px;
  transform: translateX(-50%);
  width: 380px;
  height: auto;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 1;
  filter: url(#whyKnockout) brightness(6.5) blur(12px);
  -webkit-mask-image: linear-gradient(to right, transparent 30%, #000 44%, #000 56%, transparent 70%),
    linear-gradient(to bottom, transparent 0 68px, #000 72px, #000 82%, transparent 92%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 30%, #000 44%, #000 56%, transparent 70%),
    linear-gradient(to bottom, transparent 0 68px, #000 72px, #000 82%, transparent 92%);
  mask-composite: intersect;
  animation: whyBloomBreathe 3.6s ease-in-out infinite;
}
@keyframes whyBloomBreathe {
  0%, 100% { opacity: 0.88; }
  50% { opacity: 1; }
}
/* focus-level style light sweeping along the vertical line */
.why-line-sweep {
  position: absolute;
  left: 142px;
  top: 48px;
  margin-left: 0;
  width: 3px;
  height: 440px;
  pointer-events: none;
  mix-blend-mode: screen;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0) 100%);
  background-size: 100% 90px;
  background-repeat: no-repeat;
  animation: whyLineSweep 4.6s linear infinite;
}
@keyframes whyLineSweep {
  0% { background-position: 50% 35px; }
  100% { background-position: 50% 530px; }
}
/* the two line circles flash as the sweep passes over them (synced to whyLineSweep) */
.why-circle-glow {
  position: absolute;
  left: 144px;
  width: 38px;
  height: 38px;
  margin-left: -19px;
  margin-top: -19px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.4) 42%, rgba(255, 255, 255, 0) 72%);
  filter: blur(5px);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0;
  transform-origin: 50% 50%;
}
.why-circle-glow-a {
  top: 244px;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  margin-top: -20px;
  animation: whyCircleGlowA 4.6s ease-in-out infinite;
}
.why-circle-glow-b {
  top: 404px;
  width: 50px;
  height: 50px;
  margin-left: -25px;
  margin-top: -25px;
  animation: whyCircleGlowB 4.6s ease-in-out infinite;
}
@keyframes whyCircleGlowA {
  0%, 24% { opacity: 0; transform: scale(0.75); }
  37% { opacity: 1; transform: scale(1.25); }
  50%, 100% { opacity: 0; transform: scale(0.75); }
}
@keyframes whyCircleGlowB {
  0%, 50% { opacity: 0; transform: scale(0.75); }
  63% { opacity: 1; transform: scale(1.25); }
  76%, 100% { opacity: 0; transform: scale(0.75); }
}
/* twinkling dots confined to the river channel (never on the mountains) */
.why-river-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
.why-rstar {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 12px rgba(255, 255, 255, 0.5);
  animation: whyStarTwinkle 2.8s ease-in-out infinite;
}
.why-rstar:nth-child(2n) { animation-delay: 0.7s; }
.why-rstar:nth-child(3n) { animation-delay: 1.4s; }
/* twinkling scattered stars overlaid on the upper sky */
.why-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.why-star {
  position: absolute;
  width: 2.5px;
  height: 2.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
  animation: whyStarTwinkle 3s ease-in-out infinite;
}
.why-star:nth-child(3n) { width: 1.8px; height: 1.8px; animation-duration: 3.8s; }
.why-star:nth-child(3n + 1) { animation-duration: 2.4s; }
.why-star:nth-child(2n) { animation-delay: 0.6s; }
.why-star:nth-child(3n + 2) { animation-delay: 1.3s; }
.why-star:nth-child(5n) { animation-delay: 2s; }
@keyframes whyStarTwinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.8); box-shadow: 0 0 3px rgba(255, 255, 255, 0.5); }
  50% { opacity: 1; transform: scale(1.2); box-shadow: 0 0 8px rgba(255, 255, 255, 0.95); }
}
/* top star, isolated so it can spin around its own centre */
.why-topstar {
  position: absolute;
  left: 144px;
  top: 78px;
  width: 120px;
  height: 120px;
  margin-left: -60px;
  margin-top: -60px;
  pointer-events: none;
  transform-origin: center center;
  background-image: url("https://cdn.builder.io/api/v1/image/assets%2F829e877d75694a02812ee63318590140%2F8d5382ff9e3846fdab23cf6b6f7be545?format=webp&width=800&height=1200");
  background-repeat: no-repeat;
  background-size: 100px auto;
  background-position: 9px 20px;
  filter: url(#whyKnockout) brightness(1.4) drop-shadow(0 0 5px rgba(255, 255, 255, 0.7)) drop-shadow(0 0 12px rgba(255, 255, 255, 0.4));
  animation: whyStarSpin 16s linear infinite;
}
@keyframes whyStarSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.why-node {
  position: absolute;
  left: 185px;
  pointer-events: none;
}
.why-node-value {
  top: 35px;
}
.why-node-beta {
  top: 206px;
}
.why-node-task {
  top: 364px;
}
.why-node-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--text-secondary);
}
.why-node-sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
}

/* right content */
.why-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.why-eyebrow {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.why-task-line {
  margin-top: 12px;
  font-size: 14px;
  color: var(--text-secondary);
}
.why-headline {
  margin-top: 4px;
  font-size: 30px;
  font-weight: 300;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.why-reasons {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.why-reason {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 17px;
  color: var(--text-primary);
}
.why-reason b {
  font-weight: 400;
  color: inherit;
}
.why-reason > span {
  position: relative;
  top: -2px;
}
.why-reason-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--text-secondary);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.why-reason-icon.spark {
  fill: none;
  stroke: var(--text-secondary);
  stroke-width: 1.3;
}
.why-reason-icon.arrow {
  width: 20px;
  height: 58px;
  align-self: flex-start;
  margin-top: -22px;
  margin-bottom: -16px;
  stroke-width: 1.3;
}
.why-reasons .why-reason:nth-child(2) .why-reason-icon.arrow {
  margin-top: -32px;
}
.why-thistask {
  margin-top: 18px;
  font-size: 14px;
  color: var(--text-secondary);
}
.why-playbook {
  font-weight: 500;
  align-self: flex-start;
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px 14px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.38);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.14);
  transition: box-shadow 0.35s, background 0.35s, transform 0.2s;
}
.why-btn-txt {
  position: relative;
  top: -1px;
}
.why-playbook:hover {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.32), inset 0 0 14px rgba(255, 255, 255, 0.2);
}
.why-playbook:active {
  transform: scale(0.97);
}
.why-playbook-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.why-divider {
  margin-top: 22px;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}
.why-footer-row {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.why-neura {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text-secondary);
  max-width: 340px;
}
.why-neura-spark {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 1.3;
  stroke-linejoin: round;
}
.why-start {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 22px 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.38);
  color: #fff;
  font-family: inherit;
  font-size: 19px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.08), inset 0 0 10px rgba(255, 255, 255, 0.03);
  transition: box-shadow 0.35s, background 0.35s, transform 0.2s;
}
.why-start:hover {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.32), inset 0 0 14px rgba(255, 255, 255, 0.2);
}
.why-start:active {
  transform: scale(0.97);
}
.why-start-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.why-footer {
  margin-top: 20px;
  font-size: 15px;
  color: var(--text-muted);
}
@media (max-width: 920px) {
  .why-card-widget {
    width: auto;
  }
  .why-body {
    flex-direction: column;
  }
  .why-visual {
    flex: none;
    width: 100%;
    min-height: 380px;
  }
  .why-footer-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .why-neura {
    max-width: none;
  }
}


/* ==== WINS JAR WIDGET ==== */
.wins-jar-widget {
  --wj-ink: #f4f4f4;
  --wj-dim: #9a9a9a;
  --wj-faint: #7c7c7c;
  --wj-line: rgba(255, 255, 255, 0.09);
  --wj-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  position: absolute;
  z-index: 5;
  width: var(--h-widget-width);
  height: var(--h-widget-height);
  max-width: 92vw;
  border-radius: 2cqw;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: none;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  container-type: inline-size;
  font-family: var(--wj-sans);
  -webkit-font-smoothing: antialiased;
  color: var(--wj-ink);
  opacity: 0;
  transform: translateY(14px) scale(0.986);
}
.wins-jar-widget * {
  box-sizing: border-box;
}
.wins-jar-widget.wj-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s ease;
}
/* Wins Jar must have no lingering transform transition (like every other
   widget). Otherwise, on drop the shared drag code clears transform while the
   .dragging class is removed in the same tick, so the 0.8s transform transition
   would animate the leftover drag offset back — a visible jerk. Belt-and-braces:
   also force no transition during the drag itself. */
.wins-jar-widget.dragging {
  transition: none !important;
}

.wj-noise {
  position: absolute;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
}

.wj-body {
  height: 100%;
  overflow: hidden;
}
.wins-jar-widget.wj-collapsed .wj-body {
  height: 22cqw;
}

.wj-stage {
  position: relative;
  width: 100%;
  /* every child is placed as a percentage of this box, so it takes the card's
     fixed height instead of imposing its own aspect ratio */
  height: 100%;
}
.wj-stage > * {
  position: absolute;
}

.wj-vrule {
  left: 44.4%;
  top: 12%;
  height: 78%;
  width: 1px;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.09) 18%, rgba(255, 255, 255, 0.09) 82%, rgba(255, 255, 255, 0));
}

.wj-glyph {
  left: 3.6%;
  top: 4.6%;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: grid;
  place-items: center;
  color: #dcdcdc;
}
.wj-glyph svg {
  width: 20px;
  height: 20px;
}
.wj-title {
  left: 10%;
  top: 6.3%;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* Collapsed-only header position/style for Wins Jar */
.wins-jar-widget.wj-collapsed .wj-title {
  left: 17.5%;
  top: 31.5%;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #ffffff;
}
.wins-jar-widget.wj-collapsed .wj-glyph {
  left: 6%;
  top: 23%;
}
/* Header status dot beside the title — standardized white glow like every other
   widget. Lives inside .wj-title (in-flow), shown only in the collapsed bar. */
.wj-hdot {
  display: none;
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgb(255 255 255);
  box-shadow: 0 0 8px rgb(255 255 255 / 55%);
  opacity: 1;
}
.wins-jar-widget.wj-collapsed .wj-hdot {
  display: inline-block;
}

.wj-ctrls {
  top: 5.4%;
  right: 2.5%;
  display: flex;
  gap: 2px;
  align-items: center;
  color: var(--ink, #e9e9ec);
}
/* Collapsed-only header controls position/style for Wins Jar */
.wins-jar-widget.wj-collapsed .wj-ctrls {
  top: 26%;
  right: 6%;
  display: flex;
  gap: 2px;
  align-items: center;
  color: #ffffff;
}
.wj-icon-btn {
  all: unset;
  cursor: pointer;
  color: inherit;
  padding: 7px;
  display: inline-flex;
  transition: opacity 0.15s ease, transform 0.25s;
}
.wj-icon-btn:hover {
  opacity: 0.7;
}
.wj-icon-btn:active {
  transform: scale(0.92);
}
.wj-icon-btn:focus-visible {
  outline: 1.5px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}
.wj-ctrls svg {
  display: block;
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wj-icon-btn-pin svg {
  transform: rotate(40deg);
}
#wjDots svg {
  fill: currentColor;
  stroke: none;
}
.wj-pin.wj-on {
  color: var(--green, #7fe6a0);
}
.wj-chev svg {
  transition: transform 0.5s cubic-bezier(0.3, 1.2, 0.4, 1);
}
.wins-jar-widget.wj-collapsed .wj-chev svg {
  transform: rotate(180deg);
}

/* Collapsed = clean header-only bar (like Focus Level / Recovery). Wins Jar keeps
   its whole header + body flat inside .wj-stage, so hide every stage child except
   the header cluster (glyph, title, status dot, controls) and the popover menu.
   Elements are only hidden while collapsed and return untouched on expand. */
.wins-jar-widget.wj-collapsed .wj-stage > *:not(.wj-glyph):not(.wj-title):not(.wj-hdot):not(.wj-ctrls):not(.wj-menu) {
  display: none !important;
}

.wj-menu {
  top: 9.6%;
  right: 2.5%;
  width: 20cqw;
  background: rgba(24, 24, 28, 0.96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1.2cqw;
  padding: 0.6cqw;
  z-index: 70;
  box-shadow: 0 20px 50px -18px #000;
  display: none;
}
.wj-menu.wj-show {
  display: block;
  animation: wjPop 0.18s ease;
}
@keyframes wjPop {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.wj-menu button {
  all: unset;
  cursor: pointer;
  display: block;
  width: 100%;
  padding: 0.9cqw 1.1cqw;
  font-size: 1.55cqw;
  color: #dcdcdc;
  border-radius: 0.8cqw;
}
.wj-menu button:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.wj-jar {
  left: 8.5%;
  top: 8%;
  width: 28%;
  height: auto;
  z-index: 5;
  opacity: 0;
  filter: brightness(0.35) saturate(0.9);
}
.wins-jar-widget.wj-lit .wj-jar {
  opacity: 1;
  filter: brightness(1.15) saturate(1.05) drop-shadow(0 0 5cqw rgba(255, 255, 255, 0.32));
  transition: opacity 1s ease, filter 1.1s ease;
}
.wins-jar-widget.wj-mem-open .wj-jar,
.wins-jar-widget.wj-mem-open .wj-breath {
  opacity: 0;
  animation: none;
  transition: opacity 0.45s ease;
}
.wj-breath {
  left: 6%;
  top: 32%;
  width: 36%;
  height: 54%;
  z-index: 6;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 52%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 62%);
  mix-blend-mode: screen;
  opacity: 0.2;
}
@keyframes wjBreath {
  0%, 100% { opacity: 0.16; transform: scale(1); }
  50% { opacity: 0.36; transform: scale(1.05); }
}

.wj-num {
  left: 50%;
  top: 13.6%;
  font-size: 10.6cqw;
  font-weight: 100;
  line-height: 0.9;
  letter-spacing: -0.01em;
  color: #f7f7f7;
  text-shadow: 0 0 3cqw rgba(255, 255, 255, 0.28);
}
.wj-num-label {
  left: 64%;
  top: 24%;
  font-size: 15px;
  color: var(--text-secondary);
  font-weight: 400;
}

.wj-lw {
  left: 51.1%;
  top: 32%;
  max-width: 44cqw;
}
.wj-lw-label {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8f8f8f;
  font-weight: 600;
}
.wj-lw-text {
  margin-top: 1.1cqw;
  font-size: 16px;
  line-height: 1.28;
  color: #e9e9e9;
  font-weight: 400;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wj-lw-saved {
  margin-top: 1cqw;
  font-size: 12px;
  color: var(--wj-faint);
}

.wj-field {
  left: 49.5%;
  top: 52.5%;
  width: 43.8%;
  height: auto;
  border-radius: 999px;
  display: flex;
  align-items: center;
  padding: 12px 20px;
  border: 1px solid rgb(255 255 255 / 30%);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.05), inset 0 0 14px rgba(255, 255, 255, 0.03);
  background: rgb(255 255 255 / 5%);
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.wj-field:focus-within {
  border-color: rgb(255 255 255 / 86%);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05), 0 0 24px rgba(255, 255, 255, 0.12);
}
.wj-field.wj-shake {
  animation: wjShake 0.4s;
}
@keyframes wjShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.wj-field input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: inherit;
  font-size: 16px;
  color: var(--text-primary);
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
}
.wj-field input::placeholder {
  color: #8a8a8a;
}
.wj-press {
  font-size: 1.62cqw;
  color: #7a7a7a;
  white-space: nowrap;
  margin-left: 1.5cqw;
  transition: opacity 0.25s;
}
.wj-field:focus-within .wj-press {
  opacity: 0.35;
}

.wj-btn {
  height: 7.9%;
  top: 64.4%;
  border-radius: 6cqw;
  display: grid;
  place-items: center;
  font-size: 2.05cqw;
  cursor: pointer;
  user-select: none;
  transition: transform 0.12s, box-shadow 0.25s, background 0.25s;
}
.wj-btn:active {
  transform: translateY(1px) scale(0.99);
}
.wj-btn:focus-visible {
  outline: 1.5px solid rgba(255, 255, 255, 0.55);
  outline-offset: 3px;
}
.wj-add {
  left: 49.5%;
  width: 17.2%;
  font-weight: 500;
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.14);
  margin-top: 6px;
}
.wj-add:hover {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.32), inset 0 0 14px rgba(255, 255, 255, 0.2);
}
.wj-open {
  left: 67.8%;
  width: 17.1%;
  font-weight: 400;
  color: rgb(255 255 255 / 60%);
  background: transparent;
  margin-top: 6px;
  border: 1px solid rgb(255 255 255 / 12%);
}
.wj-spark {
  left: 48.5%;
  top: 76.5%;
  width: 32px;
  height: 32px;
  color: #e6e6e6;
}
.wj-spark svg {
  width: 100%;
  height: 100%;
}
.wj-hint1 {
  left: 53.4%;
  top: 77%;
  font-size: 12px;
  color: var(--text-primary);
  max-width: 41cqw;
}
.wj-hint2 {
  left: 53.4%;
  top: 81.1%;
  font-size: 11px;
  color: var(--text-muted);
  max-width: 41cqw;
}
.wj-hrule {
  left: 51.1%;
  top: 89.5%;
  width: 42.2%;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}
.wj-lock {
  left: 49.5%;
  top: 91%;
  width: 20px;
  height: 20px;
  color: var(--text-muted);
}
.wj-lock svg {
  width: 100%;
  height: 100%;
}
.wj-foot {
  left: 53.1%;
  top: 92%;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}

.wj-fx {
  inset: 0;
  z-index: 30;
  pointer-events: none;
}
.wj-note {
  position: absolute;
  width: 7cqw;
  height: 8.4cqw;
  border-radius: 0.9cqw;
  background: linear-gradient(150deg, #ffffff, #dbe3ec);
  color: #2b3138;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.7cqw;
  font-size: 0.9cqw;
  line-height: 1.2;
  will-change: transform, opacity;
  z-index: 40;
  box-shadow: 0 0 2.4cqw rgba(255, 255, 255, 0.55), 0 0 0.7cqw rgba(255, 255, 255, 0.9), inset 0 0 0.6cqw rgba(255, 255, 255, 0.8);
}
.wj-burst {
  position: absolute;
  width: 2cqw;
  height: 2cqw;
  border-radius: 50%;
  z-index: 38;
  mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 70%);
}
.wj-dot {
  position: absolute;
  width: 0.55cqw;
  height: 0.55cqw;
  border-radius: 50%;
  z-index: 12;
  mix-blend-mode: screen;
  background: radial-gradient(circle, #fff, rgba(255, 255, 255, 0) 70%);
}

.wj-mem-wrap {
  inset: 0;
  z-index: 55;
  display: none;
}
.wj-mem-wrap.wj-show {
  display: block;
}
.wj-mem-scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 4, 6, 0.32);
  opacity: 0;
  transition: opacity 0.4s;
}
.wj-mem-wrap.wj-show .wj-mem-scrim {
  opacity: 1;
}
.wj-mem {
  position: absolute;
  left: 22%;
  top: 34%;
  transform: translate(-50%, -50%) scale(0.6);
  width: 30cqw;
  padding: 2.4cqw 2.2cqw;
  border-radius: 1.6cqw;
  text-align: center;
  background: radial-gradient(130% 130% at 100% 100%, rgba(109, 109, 111, 0.72) 0%, rgba(109, 109, 111, 0.3) 55%, rgba(109, 109, 111, 0.14) 100%);
  color: var(--wj-ink);
  border: none;
  opacity: 0;
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.55);
  cursor: pointer;
}
.wj-mem-wrap.wj-show .wj-mem {
  animation: wjMemIn 0.55s cubic-bezier(0.2, 1.3, 0.4, 1) forwards;
}
@keyframes wjMemIn {
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.wj-mem.wj-out {
  animation: wjMemOut 0.4s ease forwards;
}
@keyframes wjMemOut {
  to { opacity: 0; transform: translate(-50%, -50%) translateY(6cqw) scale(0.6); }
}
.wj-mem-tag {
  font-size: 1.2cqw;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--green, #7fe6a0);
  font-weight: 700;
}
.wj-mem-txt {
  margin-top: 1.2cqw;
  font-size: 2cqw;
  line-height: 1.35;
  font-weight: 500;
  text-shadow: 0 0 3cqw rgba(255, 255, 255, 0.28);
}
.wj-mem-when {
  margin-top: 1.2cqw;
  font-size: 1.35cqw;
  color: rgba(255, 255, 255, 0.55);
}
.wj-mem-hint {
  margin-top: 1.6cqw;
  font-size: 1.2cqw;
  color: rgba(255, 255, 255, 0.38);
}

/* ==== END WINS JAR WIDGET ==== */

/* ===================== INTERRUPTION SHIELD WIDGET ===================== */
.interruption-shield-widget {
  position: absolute;
  z-index: 6;
  /* widget-level scale token: lifts the whole frame into the Calendar scale family */
  zoom: 1.2;
  width: calc(var(--h-widget-width) / 1.2);
  height: calc(var(--h-widget-height) / 1.2);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 20px 22px 18px;
  border-radius: 28px;
  color: var(--text-primary);
  font-family: "SF Pro Rounded", "SF Pro Display", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: none;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.interruption-shield-widget.is-pinned {
  border-color: rgba(255, 255, 255, 0.22);
}
.is-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.4;
  border-radius: inherit;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="matrix" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.03 0"/></filter><rect width="220" height="220" filter="url(%23n)"/></svg>');
}

.is-head {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.is-head-left {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.is-logo {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.05);
}
.is-logo svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.82);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.is-title {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
}
.is-status-dot {
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 7px 1px rgba(255, 255, 255, 0.6);
  animation: isDotPulse 2.8s ease-in-out infinite;
  transition: background 0.4s ease, box-shadow 0.4s ease;
}
@keyframes isDotPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
.is-actions {
  display: flex;
  align-items: center;
  gap: 10px !important;
}
.is-action {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 8px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.55);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.is-action:active { transform: scale(0.92); }
.is-action svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.is-action svg circle { fill: currentColor; stroke: none; }
.is-action[aria-label="Pin"] svg { transform: rotate(40deg); }
.interruption-shield-widget.is-pinned .is-action[aria-label="Pin"] { color: rgba(255, 255, 255, 0.95); }

.is-body {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: 5px;
  margin-top: 14px;
  max-height: 900px;
  opacity: 1;
  /* overflow-x only — the shared fixed-box rule owns overflow-y. */
  overflow-x: hidden;
}
.interruption-shield-widget.is-collapsed .is-body {
  display: none;
}
.interruption-shield-widget.is-collapsed .is-action[data-is-toggle] svg { transform: rotate(180deg); }

.is-left {
  position: relative;
  z-index: 3;
  padding: 6px 4px 0 6px;
  min-width: 0;
}
.is-number {
  font-size: 76px;
  font-weight: 200;
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  text-shadow: 0 0 40px rgba(255, 255, 255, 0.18);
}
.is-metric-label {
  margin-top: 6px;
  font-size: 18px;
  font-weight: 300;
  color: var(--text-muted);
}
.is-support {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-muted);
}
.is-detail {
  margin-top: 6px;
  font-size: 10px;
  color: var(--text-muted);
}
.is-insight {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}
.is-insight-spark {
  flex-shrink: 0;
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.78);
}
.is-insight-spark svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
}
.is-insight-text {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-primary);
}
.is-question {
  margin-top: 5px;
  margin-left: -30px;
  font-size: 11px;
  color: var(--text-muted);
}
.is-buttons {
  display: flex;
  gap: 12px;
  margin-top: 14px;
  margin-left: 6px;
}
.is-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 22px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.12s ease, box-shadow 0.25s ease, border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.is-btn:active { transform: translateY(1px) scale(0.99); }
.is-btn-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.is-btn-label {
  transform: translateY(-2px);
}
.is-btn-primary {
  color: #fff;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.14);
}
.is-btn-primary .is-btn-icon {
  fill: currentColor;
}
.is-btn-primary:hover {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 26px rgba(255, 255, 255, 0.42), inset 0 0 12px rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.48);
}
.is-btn-bloom {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(60% 80% at 50% 100%, rgba(255, 255, 255, 0.35), transparent 70%);
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.is-btn-primary:hover .is-btn-bloom { opacity: 0.9; }
.is-btn-secondary {
  color: #d0d0d0;
  font-weight: 400;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.is-btn-secondary .is-btn-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.is-footer {
  margin-top: 20px;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.5);
}
/* ---- right-side shield visual ---- */
.is-shield {
  position: relative;
  align-self: stretch;
  min-height: 300px;
  margin-right: -22px;
  overflow: visible;
}
.is-shield-img {
  position: absolute;
  right: 0;
  top: 50%;
  width: 108%;
  height: auto;
  transform: translateY(-50%);
  filter: none;
  pointer-events: none;
}
.is-water {
  position: absolute;
  display: block;
  left: 33.72px;
  top: 225.52px;
  width: 260.56px;
  height: 45px;
  pointer-events: none;
  z-index: 3;
  opacity: 0.6;
  mix-blend-mode: screen;
  filter: blur(0.9px);
  background:
    repeating-linear-gradient(2deg,
      rgba(255, 255, 255, 0) 0px,
      rgba(255, 255, 255, 0.08) 4px,
      rgba(255, 255, 255, 0.24) 8px,
      rgba(255, 255, 255, 0.08) 12px,
      rgba(255, 255, 255, 0) 18px);
  background-size: 100% 220%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%);
  animation: isWaterFlow 11s linear infinite;
}
@keyframes isWaterFlow {
  from { background-position: 0 0; }
  to { background-position: 0 220%; }
}
.interruption-shield-widget.is-lowered .is-water { opacity: 0.15; animation: none; }
.is-meteors {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}
.is-meteor {
  position: absolute;
  width: 0;
  height: 0;
}
.is-meteor-streak {
  position: absolute;
  right: 0;
  top: 50%;
  width: 92px;
  height: auto;
  transform: translateY(-50%);
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.55));
}
.is-impact {
  position: absolute;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0) 70%);
}
.is-impact-ring {
  position: absolute;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  pointer-events: none;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
}
.is-shard {
  position: absolute;
  width: 22px;
  height: 2px;
  margin-top: -1px;
  transform-origin: 0 50%;
  border-radius: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.65);
}
.is-shard::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  width: 4px;
  height: 4px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, #fff, rgba(255, 255, 255, 0) 70%);
  box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.9);
}
.is-spark {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, rgba(255, 255, 255, 0) 70%);
  box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.7);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: isTwinkle 3.6s ease-in-out infinite;
}
.is-spark-1 { left: 22%; top: 30%; animation-delay: 0s; }
.is-spark-2 { left: 74%; top: 26%; animation-delay: 0.7s; }
.is-spark-3 { left: 58%; top: 16%; animation-delay: 1.3s; }
.is-spark-4 { left: 33%; top: 20%; animation-delay: 2s; }
.is-spark-5 { left: 82%; top: 46%; animation-delay: 2.6s; }
.is-spark-6 { left: 16%; top: 52%; animation-delay: 1.7s; }
@keyframes isTwinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.25); }
}

/* ---- lowered (inactive) state ---- */
.interruption-shield-widget.is-lowered .is-status-dot {
  background: rgba(255, 255, 255, 0.35);
  box-shadow: none;
  animation: none;
}
.interruption-shield-widget.is-lowered .is-shield-img {
  filter: brightness(0.55) saturate(0.7) grayscale(0.3);
  opacity: 0.6;
}
.interruption-shield-widget.is-lowered .is-spark { opacity: 0.12; animation: none; }

@media (max-width: 720px) {
  .is-body { grid-template-columns: 1fr; }
  .is-shield { min-height: 240px; }
}
@media (prefers-reduced-motion: reduce) {
  .interruption-shield-widget,
  .interruption-shield-widget * {
    animation-duration: 0.001s !important;
    transition-duration: 0.08s !important;
  }
}
/* ==== END INTERRUPTION SHIELD WIDGET ==== */

/* ===================== BREATHING WIDGET ===================== */
.breathing-widget {
  position: absolute;
  z-index: 6;
  width: var(--h-widget-width);
  height: var(--h-widget-height);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 20px 22px 18px;
  border-radius: 28px;
  color: var(--text-primary);
  font-family: "SF Pro Rounded", "SF Pro Display", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: none;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.br-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.4;
  border-radius: inherit;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="matrix" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.03 0"/></filter><rect width="220" height="220" filter="url(%23n)"/></svg>');
}

/* header */
.br-head {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.br-head-left {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.br-logo {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.05);
}
.br-logo svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.82);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.br-title-h {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
}
.br-status-dot {
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 7px 1px rgba(255, 255, 255, 0.6);
  animation: brDotPulse 2.8s ease-in-out infinite;
}
@keyframes brDotPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
.br-actions {
  display: flex;
  align-items: center;
  gap: 10px !important;
}
.br-action {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 8px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.55);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.br-action:active { transform: scale(0.92); }
.br-action svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.br-action svg circle { fill: currentColor; stroke: none; }
.br-action[aria-label="Pin"] svg { transform: rotate(40deg); }
.breathing-widget.br-pinned .br-action[aria-label="Pin"] { color: rgba(255, 255, 255, 0.95); }

/* body */
.br-body {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.32fr);
  gap: 18px;
  flex: 1;
  min-height: 0;
  margin-top: 14px;
  max-height: 900px;
  opacity: 1;
  overflow: hidden;
}
.breathing-widget.br-collapsed {
  height: auto;
}
.breathing-widget.br-collapsed .br-body {
  display: none;
}
.breathing-widget.br-collapsed .br-action[data-br-toggle] svg { transform: rotate(180deg); }

.br-left {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 6px 4px 10px 6px;
  min-width: 0;
  margin-top: 30px;
}
.br-title {
  font-size: 44px;
  font-weight: 100;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--text-primary);
}
.br-instruction {
  margin-top: 10px;
  font-size: 16.5px;
  color: var(--text-secondary);
}
.br-support {
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-muted);
}
.br-insight {
  display: flex;
  gap: 10px;
  margin-top: 32px;
}
.br-insight-body {
  min-width: 0;
  flex: 1;
}
.br-insight-spark {
  flex-shrink: 0;
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.78);
}
.br-insight-spark svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
}
.br-insight-text {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-primary);
  max-width: 100%;
  white-space: normal;
  text-wrap: nowrap;
}
.br-question {
  margin-top: 5px;
  font-size: 11px;
  color: var(--text-muted);
  max-width: 100%;
  white-space: normal;
}
.br-buttons {
  display: flex;
  gap: 12px;
  margin-top: 30px;
  margin-left: 7px;
}
.br-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 28px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.12s ease, box-shadow 0.25s ease, border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.br-btn:active { transform: translateY(1px) scale(0.99); }
.br-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.br-btn-primary {
  color: #fff;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.14);
}
.br-btn-primary:hover {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 26px rgba(255, 255, 255, 0.42), inset 0 0 12px rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.48);
}
.br-btn-bloom {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(60% 80% at 50% 100%, rgba(255, 255, 255, 0.35), transparent 70%);
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.br-btn-primary:hover .br-btn-bloom { opacity: 0.9; }
.br-btn-secondary {
  color: #fff;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.14);
}
.br-stop-wrap {
  align-self: stretch;
  margin-top: 20px;
  margin-left: 4px;
}
.br-btn-stop {
  width: 100%;
  color: #d0d0d0;
  font-weight: 400;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.br-btn-stop:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.06);
}
.br-footer {
  margin-top: auto;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.5);
}

/* right-side candle visual */
.br-candle {
  position: relative;
  align-self: stretch;
  min-height: 300px;
  overflow: hidden;
  border-radius: 18px;
}
.br-haze {
  position: absolute;
  left: 40%;
  bottom: 3%;
  width: 98%;
  height: 120%;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(46% 60% at 50% 62%, rgba(210, 225, 255, 0.10), rgba(210, 225, 255, 0.03) 55%, transparent 72%);
  filter: blur(6px);
}
.br-flame-wrap {
  position: absolute;
  left: 24%;
  bottom: 10%;
  transform: translateX(calc(-50% + 70px)) rotate(0deg);
  transform-origin: bottom center;
  z-index: 2;
  pointer-events: none;
  animation: br-sway-gentle 5s ease-in-out infinite;
  will-change: transform;
}
.breathing-widget.br-exhaling .br-flame-wrap {
  animation: br-sway-exhale 4s ease-in-out forwards;
}
.br-flame {
  display: block;
  width: 184px;
  height: auto;
  transform: scale(1);
  transform-origin: bottom center;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: brightness(1.12) drop-shadow(0 0 16px rgba(200, 220, 255, 0.55));
  will-change: transform, filter;
}
@keyframes br-sway-gentle {
  0%, 100% { transform: translateX(calc(-50% + 70px)) rotate(-1.5deg); }
  50% { transform: translateX(calc(-50% + 70px)) rotate(1.5deg); }
}
@keyframes br-sway-exhale {
  0% { transform: translateX(calc(-50% + 70px)) rotate(0deg); }
  12% { transform: translateX(calc(-50% + 70px)) rotate(0.5deg); }
  24% { transform: translateX(calc(-50% + 70px)) rotate(-0.5deg); }
  38% { transform: translateX(calc(-50% + 70px)) rotate(1.1deg); }
  52% { transform: translateX(calc(-50% + 70px)) rotate(-1.4deg); }
  64% { transform: translateX(calc(-50% + 70px)) rotate(2deg); }
  74% { transform: translateX(calc(-50% + 70px)) rotate(-2.2deg); }
  84% { transform: translateX(calc(-50% + 70px)) rotate(1.2deg); }
  93% { transform: translateX(calc(-50% + 70px)) rotate(-0.5deg); }
  100% { transform: translateX(calc(-50% + 70px)) rotate(0deg); }
}
@keyframes br-flicker {
  0%, 100% { filter: brightness(1.12) drop-shadow(0 0 16px rgba(200, 220, 255, 0.55)); }
  50% { filter: brightness(1.18) drop-shadow(0 0 20px rgba(200, 220, 255, 0.65)); }
}
@keyframes br-flicker-intense {
  0%, 100% { filter: brightness(1.05) drop-shadow(0 0 14px rgba(200, 220, 255, 0.45)); }
  25% { filter: brightness(1.25) drop-shadow(0 0 26px rgba(200, 220, 255, 0.8)); }
  50% { filter: brightness(0.95) drop-shadow(0 0 12px rgba(200, 220, 255, 0.3)); }
  75% { filter: brightness(1.22) drop-shadow(0 0 24px rgba(200, 220, 255, 0.75)); }
}
.br-base {
  position: absolute;
  left: 24%;
  bottom: -9%;
  width: 320px;
  height: auto;
  transform: translateX(calc(-50% + 70px));
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: screen;
  filter: brightness(1.05);
}

.br-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.br-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.85), 0 0 12px rgba(200, 220, 255, 0.4);
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}
.br-particle.active {
  animation: br-ember 7s linear forwards;
}
@keyframes br-ember {
  0% {
    opacity: 0;
    transform: translateY(0) translateX(0) scale(0.5);
  }
  12% {
    opacity: 0.75;
    transform: translateY(-20px) translateX(calc(var(--tx, 0) * 0.15)) scale(1);
  }
  80% {
    opacity: 0.6;
  }
  100% {
    opacity: 0;
    transform: translateY(-280px) translateX(var(--tx, 0)) scale(0.2);
  }
}

/* phase labels (in · hold · out) */
.br-phases {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: flex;
  align-items: flex-start;
  gap: 40px;
  pointer-events: none;
}
.br-phase {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.br-phase-label {
  font-size: 22px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.32);
  transition: color 0.4s ease, text-shadow 0.4s ease;
}
.br-phase-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  transition: background 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}
.br-phase.is-active .br-phase-label {
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
.br-phase.is-active .br-phase-dot {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 8px 1px rgba(255, 255, 255, 0.7);
  transform: scale(1.15);
}

@media (prefers-reduced-motion: reduce) {
  .breathing-widget .br-flame { transition: none !important; }
  .br-status-dot { animation: none; }
}
/* ==== END BREATHING WIDGET ==== */

/* ===================== STREAKS WIDGET ===================== */
.streaks-widget {
  position: absolute;
  z-index: 6;
  zoom: 1.07;
  width: calc(var(--h-widget-width) / 1.07);
  height: calc(var(--h-widget-height) / 1.07);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 20px 22px 18px;
  border-radius: 28px;
  color: var(--text-primary);
  font-family: "SF Pro Rounded", "SF Pro Display", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: none;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.stk-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.4;
  border-radius: inherit;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="matrix" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.03 0"/></filter><rect width="220" height="220" filter="url(%23n)"/></svg>');
}

/* header */
.stk-head {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.stk-head-left { display: flex; align-items: center; gap: 11px; min-width: 0; }
.stk-logo {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.05);
}
.stk-logo svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.82);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stk-logo img {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.stk-title-h {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
}
.stk-status-dot {
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 7px 1px rgba(255, 255, 255, 0.6);
  animation: brDotPulse 2.8s ease-in-out infinite;
}
.stk-actions { display: flex; align-items: center; gap: 10px !important; }
.stk-action {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 8px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.55);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.stk-action:active { transform: scale(0.92); }
.stk-action svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stk-action svg circle { fill: currentColor; stroke: none; }
.stk-action[aria-label="Pin"] svg { transform: rotate(40deg); }
.streaks-widget.stk-pinned .stk-action[aria-label="Pin"] { color: rgba(255, 255, 255, 0.95); }

/* body layout: left copy · center altar · right list */
.stk-body {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) minmax(0, 0.8fr);
  gap: 18px;
  margin-top: 14px;
  max-height: 900px;
  flex: 1;
  min-height: 0;
  opacity: 1;
  overflow: hidden;
  transition: max-height 0.6s cubic-bezier(0.6, 0, 0.2, 1), opacity 0.4s ease;
}
.streaks-widget.collapsed .stk-body {
  display: none;
}
.streaks-widget.collapsed .stk-action[data-stk-toggle] svg { transform: rotate(180deg); }

/* left column */
.stk-left {
  position: relative;
  z-index: 3;
  padding: 6px 4px 10px 6px;
  min-width: 350px;
  margin-left: 12px;
  display: flex;
  flex-direction: column;
}
.stk-count-row { display: flex; align-items: flex-end; gap: 12px; }
.stk-count {
  font-size: 100px;
  font-weight: 100;
  line-height: 0.9;
  color: var(--text-primary);
}
.stk-count-meta { display: flex; flex-direction: column; gap: 3px; padding-bottom: 6px; }
.stk-count-unit { font-size: 15px; color: var(--text-secondary); }
.stk-count-state { font-size: 12px; color: var(--text-muted); }
.stk-note {
  margin-top: 22px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
}
.stk-insight { display: flex; gap: 10px; margin-top: 26px; }
.stk-insight-spark { flex-shrink: 0; margin-top: 2px; color: rgba(255, 255, 255, 0.78); }
.stk-insight-spark svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
}
.stk-insight-body { min-width: 0; flex: 1; }
.stk-insight-text { font-size: 11px; line-height: 1.5; color: var(--text-secondary); }
.stk-insight-text { font-size: 11px; }
.stk-question { margin-top: 8px; font-size: 13px; color: var(--text-muted); }
.stk-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.stk-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.12s ease, box-shadow 0.25s ease, border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.stk-btn:active { transform: translateY(1px) scale(0.99); }
.stk-btn:disabled { opacity: 0.55; cursor: default; pointer-events: none; }
.stk-btn-primary {
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.14);
}
.stk-btn-primary:hover {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 26px rgba(255, 255, 255, 0.42), inset 0 0 12px rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.48);
}
.stk-btn-bloom {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(60% 80% at 50% 100%, rgba(255, 255, 255, 0.35), transparent 70%);
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.stk-btn-primary:hover .stk-btn-bloom { opacity: 0.9; }
.stk-btn-secondary {
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.stk-footer {
  margin-top: auto;
  padding-top: 24px;
  font-size: 11px;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}

/* center altar: hovering flame held in glowing hands, emitting embers */
.stk-altar {
  position: relative;
  align-self: stretch;
  min-height: 360px;
  overflow: hidden;
  border-radius: 18px;
}
.stk-altar-glow {
  position: absolute;
  left: 50%;
  bottom: 22%;
  width: 70%;
  height: 55%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(50% 55% at 50% 50%, rgba(220, 232, 255, 0.16), rgba(200, 220, 255, 0.05) 55%, transparent 72%);
  filter: blur(8px);
}
.stk-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.stk-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.85), 0 0 12px rgba(210, 224, 255, 0.4);
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}
.stk-particle.active { animation: stk-ember 7s linear forwards; }
@keyframes stk-ember {
  0% { opacity: 0; transform: translateY(0) translateX(0) scale(0.5); }
  12% { opacity: 0.75; transform: translateY(-16px) translateX(calc(var(--tx, 0) * 0.15)) scale(1); }
  80% { opacity: 0.55; }
  100% { opacity: 0; transform: translateY(-220px) translateX(var(--tx, 0)) scale(0.2); }
}
.stk-flame-wrap {
  position: absolute;
  left: 50%;
  bottom: 23%;
  transform: translate(-50%, 0);
  transform-origin: bottom center;
  z-index: 3;
  pointer-events: none;
  animation: stk-hover 6s ease-in-out infinite;
  will-change: transform;
}
.stk-flame {
  display: block;
  width: 140px;
  height: auto;
  pointer-events: none;
  mix-blend-mode: screen;
  transform-origin: bottom center;
  filter: brightness(1.12) drop-shadow(0 0 16px rgba(210, 226, 255, 0.55));
  animation: stk-flicker 3.6s ease-in-out infinite, stk-breeze 6.5s ease-in-out infinite;
  will-change: filter, transform;
}
.stk-hands {
  position: absolute;
  left: 50%;
  bottom: -22%;
  width: 300px;
  height: auto;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 4;
  mix-blend-mode: screen;
  filter: brightness(1.05);
  animation: stk-hands-breathe 5.2s ease-in-out infinite;
  will-change: transform;
}
@keyframes stk-hover {
  0%, 100% { transform: translate(-50%, 4px); }
  50% { transform: translate(-50%, -12px); }
}
@keyframes stk-flicker {
  0%, 100% { filter: brightness(1.12) drop-shadow(0 0 16px rgba(210, 226, 255, 0.55)); }
  50% { filter: brightness(1.2) drop-shadow(0 0 22px rgba(210, 226, 255, 0.7)); }
}
/* hands subtle breathing: very gentle opening and closing */
@keyframes stk-hands-breathe {
  0%, 100% { transform: translateX(-50%) scaleX(1) scaleY(1); }
  50% { transform: translateX(-50%) scaleX(1.08) scaleY(0.95); }
}
/* flame leaning and wavering as if caught in a gentle breeze */
@keyframes stk-breeze {
  0% { transform: rotate(-0.8deg) skewX(0.5deg) scaleY(1); }
  25% { transform: rotate(0.5deg) skewX(-0.4deg) scaleY(1.02); }
  50% { transform: rotate(1deg) skewX(-0.7deg) scaleY(0.99); }
  75% { transform: rotate(0.2deg) skewX(0.3deg) scaleY(1.015); }
  100% { transform: rotate(-0.8deg) skewX(0.5deg) scaleY(1); }
}
.stk-flame-wrap.stk-flare { animation: stk-hover 6s ease-in-out infinite, stk-flare 0.9s ease-out; }
@keyframes stk-flare {
  0% { transform: translate(-50%, 4px) scale(1); }
  40% { transform: translate(-50%, -18px) scale(1.14); }
  100% { transform: translate(-50%, 4px) scale(1); }
}

/* right column: other lit streaks */
.stk-also {
  position: relative;
  z-index: 3;
  min-width: 0;
  margin-left: -25px;
  margin-top: 20px;
}
.stk-also-label {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.45);
  margin-left: 10px;
}
.stk-also-list { list-style: none; margin: 18px 0 0; padding: 0; }
.stk-also-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.stk-also-row:first-child { border-top: none; }
.stk-also-icon { flex-shrink: 0; color: rgba(255, 255, 255, 0.7); }
.stk-also-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(210, 226, 255, 0.4));
}
.stk-also-icon img {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: contain;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 5px rgba(210, 226, 255, 0.4));
}
.stk-also-name { flex: 1; min-width: 0; font-size: 13px; color: rgba(255, 255, 255, 0.85); }
.stk-also-days { flex-shrink: 0; font-size: 12px; color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
  .stk-flame-wrap { animation: none; }
  .stk-flame { animation: none; }
  .stk-status-dot { animation: none; }
}
/* ==== END STREAKS WIDGET ==== */

/* ===================== SLEEP & RHYTHM WIDGET ===================== */
.sleep-rhythm-widget {
  --sr-moon: 105px;
  position: absolute;
  z-index: 6;
  width: var(--h-widget-width);
  height: var(--h-widget-height);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 24px 22px 18px;
  border-radius: 28px;
  color: var(--text-primary);
  font-family: "SF Pro Rounded", "SF Pro Display", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: none;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.sr-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.4;
  border-radius: inherit;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="matrix" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.03 0"/></filter><rect width="220" height="220" filter="url(%23n)"/></svg>');
}

/* header */
.sr-head {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.sr-head-left { display: flex; align-items: center; gap: 11px; min-width: 0; }
.sr-logo {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.05);
}
.sr-logo svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.82);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sr-title-h {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
}
.sr-status-dot {
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 7px 1px rgba(255, 255, 255, 0.6);
  animation: brDotPulse 2.8s ease-in-out infinite;
}
.sr-actions { display: flex; align-items: center; gap: 10px !important; }
.sr-action {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 8px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.55);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.sr-action:active { transform: scale(0.92); }
.sr-action svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sr-action svg circle { fill: currentColor; stroke: none; }
.sr-action[aria-label="Pin"] svg { transform: rotate(40deg); }
.sleep-rhythm-widget.sr-pinned .sr-action[aria-label="Pin"] { color: rgba(255, 255, 255, 0.95); }

/* body: left moon scene · right stats */
.sr-body {
  position: relative;
  z-index: 2;
  display: block;
  margin-top: 14px;
  margin-left: -22px;
  padding-left: 22px;
  max-height: 900px;
  opacity: 1;
  overflow: visible;
  transition: max-height 0.6s cubic-bezier(0.6, 0, 0.2, 1), opacity 0.4s ease;
}
.sleep-rhythm-widget.collapsed {
  height: auto;
}
.sleep-rhythm-widget.collapsed .sr-body,
.sleep-rhythm-widget.collapsed .sr-foot,
.sleep-rhythm-widget.collapsed .sr-footer {
  display: none;
}
.sleep-rhythm-widget.collapsed .sr-action[data-sr-toggle] svg { transform: rotate(180deg); }

/* left: moon scene (anchor box — width/position independent of panel & footer) */
.sr-scene {
  position: relative;
  width: calc(52.5% + 80px);
  min-height: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sr-arc {
  position: relative;
  width: 100%;
  height: 84px;
  margin-top: 4px;
  transform: translateX(-10px);
}
.sr-dot {
  position: absolute;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 3px rgba(210, 226, 255, 0.6);
  opacity: 0.7;
  z-index: 1;
}
.sr-dot-mid {
  width: 2px;
  height: 2px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 6px 1px rgba(230, 240, 255, 0.85);
  opacity: 0.95;
}
.sr-phase {
  position: absolute;
  top: var(--sr-y);
  left: var(--sr-x);
  width: var(--sr-s);
  height: var(--sr-s);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  z-index: 2;
  opacity: var(--sr-o, 1);
  background-image: url("https://cdn.builder.io/api/v1/image/assets%2F829e877d75694a02812ee63318590140%2Fc331e6299c754fd5842bb96a38de582c?format=webp&width=80");
  background-position: center;
  box-shadow: 0 0 6px rgba(210, 226, 255, 0.35);
}
.sr-phase-bright {
  box-shadow: 0 0 10px 2px rgba(230, 240, 255, 0.75);
}
.sr-phase::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(6, 8, 14, 0.96) 52%,
    rgba(6, 8, 14, 0.78) 74%,
    rgba(6, 8, 14, 0) 100%);
  transform: translateX(var(--sr-shadow, 0%));
  filter: blur(1.6px);
}

/* big rotating moon */
.sr-moon-stage {
  position: relative;
  flex: none;
  width: 100%;
  display: grid;
  place-items: start center;
  margin-top: -18px;
  transform: translateX(-10px);
}
.sr-stars {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 80%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 80%);
}
.sr-star {
  position: absolute;
  width: var(--sr-star-s, 1.5px);
  height: var(--sr-star-s, 1.5px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 2px rgba(220, 232, 255, 0.5);
  opacity: 0;
  animation: sr-twinkle var(--sr-star-dur, 3.5s) ease-in-out var(--sr-star-delay, 0s) infinite;
}
@keyframes sr-twinkle {
  0%, 100% { opacity: 0.08; transform: scale(0.6); }
  50% { opacity: 0.7; transform: scale(1); }
}
.sr-moon {
  position: relative;
  width: var(--sr-moon);
  height: var(--sr-moon);
  border-radius: 50%;
  overflow: hidden;
  box-shadow:
    0 0 28px rgba(240, 246, 255, 0.72),
    0 0 64px rgba(220, 232, 255, 0.5),
    0 0 120px rgba(200, 220, 255, 0.36),
    inset 0 0 12px rgba(255, 255, 255, 0.3);
}
.sr-moon-surface {
  position: absolute;
  inset: 0;
  background-image: url("https://cdn.builder.io/api/v1/image/assets%2F829e877d75694a02812ee63318590140%2Fac0bdea45475487d9848c78295101f7a?format=webp&width=1000");
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: 0 center;
  filter: brightness(0.97) contrast(1.06);
  animation: sr-moon-spin 28s linear infinite;
  will-change: background-position;
}
.sr-moon-shade {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 255, 255, 0.14), transparent 55%),
    radial-gradient(circle at 50% 50%, transparent 66%, rgba(245, 250, 255, 0.28) 90%, rgba(255, 255, 255, 0.6) 100%);
  box-shadow: inset 0 0 16px 2px rgba(255, 255, 255, 0.32);
}
@keyframes sr-moon-spin {
  from { background-position-x: 0; }
  to { background-position-x: calc(var(--sr-moon) * -2); }
}

/* mountain & lake scenery under the moon */
.sr-scape {
  position: absolute;
  left: -22px;
  bottom: -60px;
  width: calc(100% + 22px);
  height: auto;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
  opacity: 0.9;
}
/* soft moonlight brightening the top of the scenery */
.sr-scape-glow {
  position: absolute;
  left: -82px;
  bottom: 70px;
  width: calc(100% + 72px);
  height: 100px;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
  background: linear-gradient(to top,
    rgba(210, 226, 255, 0.22) 0%,
    rgba(210, 226, 255, 0.1) 45%,
    rgba(210, 226, 255, 0) 100%);
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 20%, #000 80%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 40%, #000 60%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 20%, #000 80%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 40%, #000 60%, transparent 100%);
  mask-composite: intersect;
}
/* flowing water over the river (same technique as the shield widget) */
.sr-water {
  position: absolute;
  left: 49%;
  bottom: 28px;
  width: 60%;
  height: 45px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 2;
  opacity: 0.55;
  mix-blend-mode: screen;
  filter: blur(0.9px);
  background:
    repeating-linear-gradient(2deg,
      rgba(255, 255, 255, 0) 0px,
      rgba(255, 255, 255, 0.08) 4px,
      rgba(255, 255, 255, 0.22) 8px,
      rgba(255, 255, 255, 0.08) 12px,
      rgba(255, 255, 255, 0) 18px);
  background-size: 100% 220%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%);
  animation: sr-water-flow 11s linear infinite;
}
@keyframes sr-water-flow {
  from { background-position: 0 0; }
  to { background-position: 0 220%; }
}

/* caption sits directly under the big moon */
.sr-caption {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 12px;
  text-align: center;
  transform: translateX(-10px);
}
.sr-caption-line {
  width: 1px;
  height: 22px;
  margin-bottom: 6px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), transparent);
}
.sr-caption-label {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--text-primary);
  text-shadow: 0 0 8px rgba(230, 240, 255, 0.85), 0 0 16px rgba(200, 220, 255, 0.5);
}
.sr-caption-sub { font-size: 10px; color: var(--text-secondary); }

/* right: stats panel (absolute overlay — move/resize freely without affecting the left box) */
.sr-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(47.5% - 41px);
  z-index: 3;
  padding: 6px 4px 10px 6px;
  display: flex;
  flex-direction: column;
}
.sr-duration {
  font-size: 64px;
  font-weight: 100;
  line-height: 0.95;
  color: var(--text-primary);
}
.sr-sub { margin-top: 10px; font-size: 13px; color: var(--text-secondary); }
.sr-rhythm-label {
  margin-top: 28px;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--text-primary);
}
.sr-rhythm-text {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.sr-reflection { display: flex; gap: 12px; margin-top: 28px; align-items: center; }
.sr-reflection-icon { flex-shrink: 0; color: rgba(255, 255, 255, 0.6); }
.sr-reflection-icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sr-reflection-icon svg circle:last-of-type { fill: currentColor; stroke: none; }
.sr-reflection-text { font-size: 11px; line-height: 1.5; color: var(--text-secondary); margin-top: -5px; }

/* panel content wrapper */
.sr-panel-content {
  position: relative;
  right: -60px;
}

/* footer insight row (position: relative so top/right nudges overlap without reflow) */
.sr-foot {
  position: relative;
  z-index: -1;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: -26px;
  padding-top: 18px;
  pointer-events: none;
}
.sr-insight { display: flex; gap: 12px; min-width: 0; flex: 1; }
.sr-insight-spark { flex-shrink: 0; margin-top: 2px; color: rgba(255, 255, 255, 0.78); }
.sr-insight-spark svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
}
.sr-insight-body { min-width: 0; }
.sr-insight-text { font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.9); }
.sr-question { margin-top: 4px; font-size: 13px; color: var(--text-muted); }
.sr-buttons {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 60px;
  z-index: 999;
}
.sr-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.12s ease, box-shadow 0.25s ease, border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.sr-btn:active { transform: translateY(1px) scale(0.99); }
.sr-btn-primary {
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.14);
}
.sr-btn-primary:hover {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 26px rgba(255, 255, 255, 0.42), inset 0 0 12px rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.48);
}
.sr-btn-bloom {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(60% 80% at 50% 100%, rgba(255, 255, 255, 0.35), transparent 70%);
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.sr-btn-primary:hover .sr-btn-bloom { opacity: 0.9; }
.sr-btn-secondary {
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.sr-footer {
  position: relative;
  z-index: 2;
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}
.sr-footer-lock {
  display: inline-flex;
  vertical-align: middle;
  margin-right: 15px;
}
.sr-footer-lock svg {
  width: 20px;
  height: 20px;
  margin-bottom: 3px;
  margin-left: 6px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
  .sr-moon-surface { animation: none; }
  .sr-status-dot { animation: none; }
  .sr-water { animation: none; }
}
/* ==== END SLEEP & RHYTHM WIDGET ==== */

/* ===================== TIME SENSE WIDGET ===================== */
.time-sense-widget {
  position: absolute;
  z-index: 6;
  zoom: 1.05;
  width: calc(var(--sq-widget-width) / 1.05);
  height: calc(var(--sq-widget-height) / 1.05);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 20px 22px 18px;
  border-radius: 28px;
  color: var(--text-primary);
  font-family: "SF Pro Rounded", "SF Pro Display", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: none;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.ts-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.4;
  border-radius: inherit;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="matrix" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.03 0"/></filter><rect width="220" height="220" filter="url(%23n)"/></svg>');
}

/* header */
.ts-head {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ts-head-left { display: flex; align-items: center; gap: 11px; min-width: 0; }
.ts-logo {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.05);
}
.ts-logo svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.82);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ts-title-h {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
}
.ts-status-dot {
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 7px 1px rgba(255, 255, 255, 0.6);
  animation: brDotPulse 2.8s ease-in-out infinite;
}
.ts-actions { display: flex; align-items: center; gap: 10px !important; }
.ts-action {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 8px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.55);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.ts-action:active { transform: scale(0.92); }
.ts-action svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ts-action svg circle { fill: currentColor; stroke: none; }
.ts-action[aria-label="Pin"] svg { transform: rotate(40deg); }
.time-sense-widget.ts-pinned .ts-action[aria-label="Pin"] { color: rgba(255, 255, 255, 0.95); }

/* body */
.time-sense-widget > * {
  flex-shrink: 0;
}
.ts-body {
  position: relative;
  z-index: 2;
  display: grid;
  flex: 1;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 24px;
  margin-top: 14px;
  max-height: 900px;
  opacity: 1;
  overflow: hidden;
}
.time-sense-widget.ts-collapsed .ts-body { display: none; }
.time-sense-widget.ts-collapsed .ts-action[data-ts-toggle] svg { transform: rotate(180deg); }

/* ---- hourglass visual ---- */
.ts-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ts-stage {
  position: relative;
  width: 100%;
  max-width: 540px;
  transform: translate(-40px, -20px);
}
.ts-glow {
  position: absolute;
  left: 45.2%;
  top: 50%;
  width: 60%;
  height: 92%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(40% 50% at 50% 50%, rgba(200, 220, 255, 0.14), rgba(200, 220, 255, 0.04) 55%, transparent 72%);
  filter: blur(8px);
}
/* Each hourglass image lives in its own layer div, stacked and overlaid. */
.ts-layer {
  pointer-events: none;
  user-select: none;
}
.ts-layer img {
  display: block;
  width: 100%;
  height: auto;
}
/* The glass layer is in flow and sizes the stage. */
.ts-layer-glass {
  position: relative;
  z-index: 5;
  width: 120%;
}
.ts-layer-glass img {
  filter: drop-shadow(0 0 10px rgba(200, 220, 255, 0.35))
    drop-shadow(22px 10px 16px rgba(0, 0, 0, 0.5));
}
/* Sand layers overlay the glass. Nudge each one via left / top / width. */
.ts-layer-upper {
  position: absolute;
  left: 19px;
  top: 80px;
  width: 100%;
  z-index: 10;
  -webkit-mask-image: linear-gradient(7deg, #000 0%, #000 58%, rgba(0, 0, 0, 0.55) 80%, transparent 100%);
  mask-image: linear-gradient(7deg, #000 0%, #000 58%, rgba(0, 0, 0, 0.55) 80%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: bottom;
  mask-position: bottom;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  /* smooths the per-frame mask stepping so the sand glides */
  transition: -webkit-mask-size 0.16s linear, mask-size 0.16s linear;
  animation: sandDrainUpper 60s linear forwards;
}
.ts-layer-lower {
  position: absolute;
  left: 32px;
  top: 276px;
  width: 90%;
  z-index: 10;
  transform: scaleY(1.35);
  transform-origin: center bottom;
  /* Bottom-up reveal: JS grows mask-size height from 0% (empty) to LO_FULL (full),
     which is exactly linear with the percentage. Soft top edge keeps it natural. */
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 70%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0%, #000 70%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 50% 100%;
  mask-position: 50% 100%;
  -webkit-mask-size: 100% 0%;
  mask-size: 100% 0%;
  /* smooths the per-frame mask stepping so the fill glides */
  transition: -webkit-mask-size 0.16s linear, mask-size 0.16s linear;
}
.ts-layer-stream {
  position: absolute;
  left: 99px;
  top: 180px;
  width: 50%;
  z-index: 0;
  mix-blend-mode: normal;
  transition: opacity 280ms ease;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 52%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 52%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: top;
  mask-position: top;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  pointer-events: none;
  overflow: hidden;
  animation: streamFadeTop 60s linear forwards;
}
/* Two stacked copies scroll downward endlessly for a seamless "pouring" loop.
   They overlap slightly (95%) to hide the transparent margin gap between them. */
.ts-stream-track {
  position: relative;
  animation: streamFall 3.6s linear infinite;
}
.ts-stream-track img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.65));
}
.ts-stream-b {
  position: absolute;
  bottom: 95%;
  left: 0;
}
@keyframes streamFall {
  0% { transform: translateY(0); }
  100% { transform: translateY(95%); }
}

@keyframes sandDrainUpper {
  0% {
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
  100% {
    -webkit-mask-size: 100% 50%;
    mask-size: 100% 50%;
  }
}

@keyframes sandFillLower {
  0% {
    -webkit-mask-position: 50% -32%;
    mask-position: 50% -32%;
  }
  99% {
    -webkit-mask-position: 50% 100%;
    mask-position: 50% 100%;
  }
  100% {
    -webkit-mask-position: 50% 100%;
    mask-position: 50% 100%;
  }
}

/* The stream fades out from the bottom as the lower fills. Instead of morphing the
   gradient stops (which browsers interpolate chunkily), we keep the mask-image fixed
   and smoothly shrink mask-size height — the soft bottom feather rises continuously. */
@keyframes streamFadeTop {
  0% {
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    opacity: 1;
  }
  62% {
    -webkit-mask-size: 100% 40%;
    mask-size: 100% 40%;
    opacity: 1;
  }
  61.66% {
    -webkit-mask-size: 100% 40%;
    mask-size: 100% 40%;
    opacity: 1;
  }
  80% {
    -webkit-mask-size: 100% 40%;
    mask-size: 100% 40%;
    opacity: 0;
  }
  100% {
    -webkit-mask-size: 100% 40%;
    mask-size: 100% 40%;
    opacity: 0;
  }
}

/* guides */
.ts-guide { position: absolute; display: flex; align-items: center; gap: 6px; pointer-events: none; }
.ts-guide-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  line-height: 1.3;
  color: var(--text-secondary);
}
.ts-guide-est { right: 6px; top: 32%; }
.ts-guide-act { right: 20px; top: 48%; }

/* ---- right content ---- */
.ts-content { position: relative; z-index: 3; min-width: 0; padding-top: 2px; }
.ts-big {
  font-size: 70px;
  font-weight: 200;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #fff;
}
.ts-sub {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.ts-section { margin-top: 20px; }
.ts-section-title {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.ts-recent-row {
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--text-secondary);
}
.ts-recent-name { color: rgba(255, 255, 255, 0.9); font-weight: 500; }
.ts-arrow { color: var(--text-muted); }
.ts-calib { font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
.ts-strike { text-decoration: line-through; color: var(--text-muted); }
.ts-insight { display: flex; gap: 10px; margin-top: 10px; }
.ts-insight-spark { flex-shrink: 0; margin-top: 2px; color: rgba(255, 255, 255, 0.78); }
.ts-insight-spark svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
}
.ts-insight-body { min-width: 0; flex: 1; }
.ts-insight-text { font-size: 12px; line-height: 1.5; color: var(--text-primary); }
.ts-question { margin-top: 5px; font-size: 11px; color: var(--text-muted); }
.ts-buttons { display: flex; gap: 12px; margin-top: 22px; }
.ts-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 22px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.12s ease, box-shadow 0.25s ease, border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.ts-btn:active { transform: translateY(1px) scale(0.99); }
.ts-btn-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ts-btn-primary {
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.14);
}
.ts-btn-primary:hover {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 26px rgba(255, 255, 255, 0.42), inset 0 0 12px rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.48);
}
.ts-btn-bloom {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(60% 80% at 50% 100%, rgba(255, 255, 255, 0.35), transparent 70%);
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.ts-btn-primary:hover .ts-btn-bloom { opacity: 0.9; }
.ts-btn-secondary {
  color: #d0d0d0;
  font-weight: 400;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.ts-btn-secondary:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.06);
}
.ts-footer {
  margin-top: 18px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 720px) {
  .ts-body { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ts-status-dot { animation: none; }
}
/* ==== END TIME SENSE WIDGET ==== */

/* ===================== CALENDAR DEFENDER WIDGET ===================== */
.calendar-defender-widget {
  position: absolute;
  z-index: 6;
  zoom: 1.05;
  width: calc(var(--sq-widget-width) / 1.05);
  height: calc(var(--sq-widget-height) / 1.05);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 20px 24px 18px;
  border-radius: 28px;
  color: var(--text-primary);
  font-family: "SF Pro Rounded", "SF Pro Display", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.16) 0%, rgba(16, 19, 18, 0.12) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.cd-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.4;
  border-radius: inherit;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="matrix" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.03 0"/></filter><rect width="220" height="220" filter="url(%23n)"/></svg>');
}

/* header */
.cd-head {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.cd-head-left { display: flex; align-items: center; gap: 11px; min-width: 0; }
.cd-logo {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.05);
}
.cd-logo svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.82);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cd-title {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  margin: 0;
}
.cd-status-dot {
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 7px 1px rgba(255, 255, 255, 0.6);
  animation: brDotPulse 2.8s ease-in-out infinite;
  transition: box-shadow 0.4s ease;
}
.cd-actions { display: flex; align-items: center; gap: 10px !important; }
.cd-action {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 8px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.55);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.cd-action:active { transform: scale(0.92); }
.cd-action svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cd-action svg circle { fill: currentColor; stroke: none; }
.cd-action[aria-label="Pin"] svg { transform: rotate(40deg); }

/* body */
.calendar-defender-widget > * {
  flex-shrink: 0;
}
.cd-body { position: relative; z-index: 2; flex: 1; min-height: 0; margin-top: 16px; }
.calendar-defender-widget.collapsed .cd-body { display: none; }
.calendar-defender-widget.collapsed [data-cd-toggle] svg { transform: rotate(-90deg); }
.cd-main {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 30px;
}

/* left: timeline */
.cd-timeline { position: relative; }
.cd-hours { position: relative; }
.cd-hours::after {
  content: "";
  position: absolute;
  left: 52px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: rgba(255, 255, 255, 0.1);
}
.cd-hour-row { height: 30px; display: flex; align-items: center; gap: 10px; }
.cd-hour-label {
  width: 40px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  letter-spacing: 0.11em;
}
.cd-hour-dot {
  position: relative;
  z-index: 1;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}
.cd-hour-dot--on {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.55);
  animation: cdTwinkle 3.6s ease-in-out infinite;
}

.cd-events { position: absolute; top: 0; left: 72px; right: 0; bottom: 0; }
.cd-event { position: absolute; left: 0; right: 0; }
.cd-normal {
  font-size: 12.5px;
  color: var(--text-secondary);
  transform: translateY(4px);
}
.cd-block {
  position: relative;
  padding: 12px 12px 12px 16px;
  border-radius: 6px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.025) 100%);
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  border: none;
  box-shadow: none;
  cursor: pointer;
  transition: background 150ms ease;
}
.cd-block::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.6)) drop-shadow(0 0 14px rgba(255, 255, 255, 0.32)) drop-shadow(0 0 30px rgba(255, 255, 255, 0.16));
}
.cd-block:hover {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.035) 100%);
}
.cd-block--sm { padding: 9px 12px; }
.cd-block-row { display: flex; align-items: center; gap: 8px; }
.cd-block-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.85);
}
.cd-block-icon svg { width: 20px; height: 20px; }
.cd-block-text {
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}
.cd-moved-row {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.02);
}
.cd-moved-icon {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  color: var(--text-muted);
}
.cd-moved-icon svg { width: 15px; height: 15px; }
.cd-moved-text { font-size: 12px; color: var(--text-muted); }
.cd-block-icon svg,
.cd-moved-icon svg,
.cd-summary-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* right: defended summary */
.cd-summary { display: flex; flex-direction: column; }
.cd-summary-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.cd-summary-rows { display: flex; flex-direction: column; }
.cd-summary-row {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.cd-summary-row:last-child { border-bottom: none; }
.cd-summary-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 1px;
}
.cd-summary-icon svg { width: 24px; height: 24px; }
.cd-summary-text {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.cd-metric {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
}
.cd-metric-num {
  font-size: 58px;
  font-weight: 200;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.25);
}
.cd-metric-text {
  margin-top: 17px;
  font-size: 10px;
  line-height: 1.4;
  color: var(--text-secondary);
}

/* insight */
.cd-insight {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-top: -40px;
  margin-left: 100px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.cd-insight-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  color: #e6e6e6;
}
.cd-insight-icon svg { width: 100%; height: 100%; fill: currentColor; }
.cd-insight-text { display: flex; flex-direction: column; gap: 3px; }
.cd-insight-main { font-size: 13px; color: var(--text-primary); line-height: 1.4; word-wrap: break-word; }
.cd-insight-sub { font-size: 12px; color: var(--text-muted); }

/* buttons — intentionally mirror the Wins Jar button styles (.wj-add / .wj-open) */
.cd-buttons {
  display: flex;
  gap: 12px;
  margin-top: 30px;
  margin-left: 192px;
}
.cd-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 30px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.12s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.cd-btn:active { transform: translateY(1px) scale(0.99); }
.cd-btn:focus-visible { outline: 1.5px solid rgba(255, 255, 255, 0.55); outline-offset: 3px; }
.cd-btn-label { position: relative; z-index: 1; }
/* Wins Jar primary (.wj-add) */
.cd-btn-primary {
  color: #fff;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.14);
}
.cd-btn-primary:hover {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 28px rgba(255, 255, 255, 0.42), inset 0 0 12px rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.48);
}
.cd-btn-bloom {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(60% 80% at 50% 100%, rgba(255, 255, 255, 0.35), transparent 70%);
  opacity: 0.45;
  transition: opacity 0.3s ease;
}
.cd-btn-primary:hover .cd-btn-bloom { opacity: 0.85; }
/* Wins Jar secondary (.wj-open) */
.cd-btn-secondary {
  color: #d0d0d0;
  font-weight: 400;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
/* auto-defend active confirmation state */
.calendar-defender-widget.cd-defend-on .cd-status-dot {
  box-shadow: 0 0 12px 2px rgba(255, 255, 255, 0.85);
}
.calendar-defender-widget.cd-defend-on .cd-btn-primary {
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.14);
}

/* footer */
.cd-footer {
  margin-top: 30px;
  text-align: center;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.5);
}

/* review popover */
.cd-review {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.cd-review.is-open { opacity: 1; pointer-events: auto; }
.cd-review-scrim {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 7, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.cd-review-card {
  position: relative;
  z-index: 1;
  width: 340px;
  max-width: 80%;
  padding: 18px 20px;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(34, 37, 36, 0.94), rgba(20, 23, 22, 0.94));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  transform: translateY(8px) scale(0.98);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cd-review.is-open .cd-review-card { transform: translateY(0) scale(1); }
.cd-review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.cd-review-title { font-size: 14px; font-weight: 500; color: var(--text-primary); }
.cd-review-close {
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.cd-review-close:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.cd-review-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.cd-review-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cd-review-list li {
  position: relative;
  font-size: 12.5px;
  color: var(--text-secondary);
  padding: 11px 12px 11px 20px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.cd-review-list li::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 11px;
  bottom: 11px;
  width: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5)) drop-shadow(0 0 12px rgba(255, 255, 255, 0.25));
}

@keyframes cdTwinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

@media (max-width: 720px) {
  .cd-main { grid-template-columns: 1fr; gap: 20px; }
  .cd-timeline { min-height: 320px; }
}
@media (prefers-reduced-motion: reduce) {
  .cd-status-dot,
  .cd-block,
  .cd-hour-dot--on { animation: none; }
}
/* ==== END CALENDAR DEFENDER WIDGET ==== */

/* ===================== DEADLINES WIDGET ===================== */
.deadlines-widget.collapsed .dl-head {
  margin-bottom: 0;
}
.deadlines-widget {
  position: absolute;
  z-index: 6;
  zoom: 1.03;
  width: calc(var(--v-widget-width) / 1.03);
  height: calc(var(--v-widget-height) / 1.03);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 24px 22px;
  border-radius: 28px;
  color: var(--text-primary);
  font-family: "SF Pro Rounded", "SF Pro Display", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.16) 0%, rgba(16, 19, 18, 0.12) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.dl-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.4;
  border-radius: inherit;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="matrix" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.03 0"/></filter><rect width="220" height="220" filter="url(%23n)"/></svg>');
}

.dl-head {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}
.dl-head-left { display: flex; align-items: center; gap: 11px; min-width: 0; }
.dl-logo {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.05);
}
.dl-logo svg {
  width: 30px;
  height: 30px;
  color: var(--text-primary);
}
.dl-title {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  margin: 0;
}
.dl-status-dot {
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 7px 1px rgba(255, 255, 255, 0.6);
  animation: brDotPulse 2.8s ease-in-out infinite;
  transition: box-shadow 0.4s ease;
}
.dl-actions { display: flex; align-items: center; gap: 10px !important; }
.dl-action {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 8px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.55);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.dl-action:active { transform: scale(0.92); }
.dl-action svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dl-action svg circle { fill: currentColor; stroke: none; }
.dl-action[aria-label="Pin"] svg { transform: rotate(40deg); }

.dl-body { position: relative; z-index: 2; display: flex; flex-direction: column; }
.deadlines-widget.collapsed .dl-body { display: none; }
.deadlines-widget.collapsed [data-dl-toggle] svg { transform: rotate(-90deg); }

/* Urgent card */
.dl-urgent-card {
  position: relative;
  padding: 18px 20px;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  border: none;
  box-shadow: none;
  margin-bottom: 22px;
}
.dl-urgent-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  border-radius: 16px 16px 0 0;
  background: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 40%, transparent 80%);
  pointer-events: none;
}
.dl-urgent-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.95) 50%, transparent 100%);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.6)) drop-shadow(0 0 16px rgba(255, 255, 255, 0.35));
}
.dl-urgent-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.dl-urgent-title {
  font-size: 20px;
  font-weight: 400;
  color: #fff;
  line-height: 1.2;
}
.dl-urgent-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 5px;
  margin-bottom: 16px;
}
.dl-urgent-left { min-width: 0; }
.dl-urgent-time {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 6px;
}
.dl-time-big {
  font-size: 60px;
  font-weight: 200;
  line-height: 1;
  color: #fff;
}
.dl-time-label {
  font-size: 14px;
  color: var(--text-secondary);
}
.dl-due-line {
  font-size: 12px;
  color: var(--text-secondary);
}
.dl-urgent-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  margin-top: 40px;
  padding: 4px 0 2px;
}
.dl-status-badge {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
}
.dl-status-impact {
  font-size: 11px;
  color: var(--text-muted);
}

/* Progress timeline */
.dl-timeline { position: relative; margin-top: 12px; }
.dl-timeline-track {
  position: relative;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  margin-bottom: 10px;
  overflow: visible;
}
.dl-timeline-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 72%;
  background: #D6D6D8;
  border-radius: 999px;
}
.dl-timeline-glow {
  position: absolute;
  left: 68%;
  top: 50%;
  transform: translateY(-50%);
  width: 13%;
  height: 100%;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 999px;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.75)) drop-shadow(0 0 18px rgba(255, 255, 255, 0.45));
}
.dl-timeline-marker {
  display: none;
}
.dl-timeline-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* Upcoming section */
.dl-upcoming {
  margin-top: 8px;
  margin-left: 4px;
  margin-right: 25px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.dl-upcoming-header {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  font-weight: 100;
}
/* The list takes whatever height is left in the fixed box and scrolls, so the
   insight line and the footer stay put. */
.dl-upcoming-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.dl-upcoming-list::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.dl-upcoming-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.dl-upcoming-item.is-done {
  opacity: 0.5;
}
.dl-item-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.6);
}
.dl-item-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dl-item-title {
  flex: 1;
  font-size: 14px;
  color: var(--text-primary);
}
.dl-item-time {
  font-size: 12px;
  font-weight: 100;
  color: var(--text-secondary);
  margin-right: 5px;
  white-space: nowrap;
}
.dl-item-indicator {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border: 1.5px solid white;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}
.dl-item-indicator:hover {
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.2);
}
.dl-upcoming-item.is-done .dl-item-indicator {
  background: rgba(74, 222, 128, 0.3);
  border-color: #4ade80;
}
.dl-upcoming-item.is-done .dl-item-indicator::after {
  content: "✓";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 10px;
  color: #4ade80;
  font-weight: bold;
}

/* Insight row */
.dl-insight-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  margin-top: 4px;
  margin-left: 0px;
}
.dl-insight-icon {
  flex-shrink: 0;
  width: 28px;
  height: 22px;
  color: #e6e6e6;
}
.dl-insight-icon svg {
  width: 28px;
  height: 28px;
}
.dl-insight-text {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.4;
}

/* Footer */
.dl-footer {
  margin-top: 8px;
  margin-left: 4px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}

@keyframes dlGlowPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .dl-status-dot { animation: none; }
}
/* ==== END DEADLINES WIDGET ==== */

/* ===================== RECENT FILES WIDGET ===================== */
.recent-files-widget {
  position: absolute;
  z-index: 6;
  /* widget-level scale token: lifts the whole frame into the Calendar scale family */
  zoom: 1.1;
  width: calc(var(--v-widget-width) / 1.1);
  height: calc(var(--v-widget-height) / 1.1);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 20px 22px;
  border-radius: 28px;
  color: var(--text-primary);
  font-family: "SF Pro Rounded", "SF Pro Display", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.16) 0%, rgba(16, 19, 18, 0.12) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.rf-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.4;
  border-radius: inherit;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="matrix" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.03 0"/></filter><rect width="220" height="220" filter="url(%23n)"/></svg>');
}

/* header */
.rf-head {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.rf-head-left { display: flex; align-items: center; gap: 11px; min-width: 0; }
.rf-logo {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.05);
}
.rf-logo svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: var(--text-primary);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rf-title {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  margin: 0;
}
.rf-status-dot {
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 7px 1px rgba(255, 255, 255, 0.6);
  animation: brDotPulse 2.8s ease-in-out infinite;
  transition: box-shadow 0.4s ease;
}
.rf-actions { display: flex; align-items: center; gap: 10px !important; }
.rf-action {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 8px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.55);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.rf-action:active { transform: scale(0.92); }
.rf-action svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rf-action svg circle { fill: currentColor; stroke: none; }
.rf-action[aria-label="Pin"] svg { transform: rotate(40deg); }

/* body + building scene (uses uploaded image directly, full image, no frame) */
.rf-body {
  position: relative;
  z-index: 2;
  border: none;
  background: none;
  box-shadow: none;
}
.recent-files-widget.collapsed .rf-body,
.recent-files-widget.collapsed .rf-insight-row,
.recent-files-widget.collapsed .rf-footer { display: none; }
.recent-files-widget.collapsed [data-rf-toggle] svg { transform: rotate(-90deg); }
.recent-files-widget.collapsed .rf-head { margin-bottom: 0; }
.rf-scene {
  position: relative;
  margin-top: -50px;
  /* The building height follows its width, so it is scaled as one piece — the
     lit-window overlays are positioned inside and have to scale with it. */
  transform: scale(1.14);
  transform-origin: center top;
}
.rf-scene-img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 70%;
  -webkit-mask-image: linear-gradient(to bottom, black 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 82%, transparent 100%);
}
/* lit-window overlays — uploaded room images placed onto the building's windows */
.rf-win {
  position: absolute;
  display: block;
  height: auto;
  pointer-events: none;
}
.rf-win-1 { left: 0%;  top: 40%; width: 30%; }
.rf-win-2 { left: 50.5%; top: 23%; width: 10%; }
.rf-win-3 { left: 51%; top: 55%; width: 8.5%; }
.rf-win-4 { left: 51%; top: 75%; width: 9%; }
.rf-win-5 { left: 88%; top: 43%; width: 7%; }

/* lights turning on/off at different, out-of-sync intervals */
@keyframes rf-blink {
  /* on for first half — warm glow spilling from the lit window */
  0%   { opacity: 1; filter: brightness(1.05) drop-shadow(0 0 4px rgba(255, 245, 226, 0.55)) drop-shadow(0 0 10px rgba(255, 236, 205, 0.32)); }
  50%  { opacity: 0; filter: none; } /* off for second half */
  100% { opacity: 1; filter: brightness(1.05) drop-shadow(0 0 4px rgba(255, 245, 226, 0.55)) drop-shadow(0 0 10px rgba(255, 236, 205, 0.32)); }
}
/* 14s cycle = 7s on + 7s off; delays stagger the first turn-off by 3s:
   win-2 @1s, win-4 @4s, win-1 @7s, win-5 @10s, win-3 @13s */
.rf-win-2 { animation: rf-blink 14s steps(1, end) infinite -6s; }
.rf-win-4 { animation: rf-blink 14s steps(1, end) infinite -3s; }
.rf-win-1 { animation: rf-blink 14s steps(1, end) infinite  0s; }
.rf-win-5 { animation: rf-blink 14s steps(1, end) infinite  3s; }
.rf-win-3 { animation: rf-blink 14s steps(1, end) infinite  6s; }

/* file-name colors + Reopen button follow the matching window's on/off state */
@keyframes rf-text-sync {
  0%   { color: var(--text-primary); }
  50%  { color: var(--text-muted); }
  100% { color: var(--text-primary); }
}
@keyframes rf-reopen-sync {
  0%, 100% {
    color: #fff;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.38);
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.3), inset 0 0 8px rgba(255, 255, 255, 0.14);
  }
  50% {
    color: #d0d0d0;
    font-weight: 400;
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: none;
  }
}
/* win-1 (delay 0s) → "ESB kickoff doc.md" + Reopen button */
.rf-main-name { animation: rf-text-sync 14s steps(1, end) infinite 0s; }
.rf-reopen    { animation: rf-reopen-sync 14s steps(1, end) infinite 0s; }
.rf-meta-blink { animation: rf-text-sync 14s steps(1, end) infinite 0s; }
/* win-3 (delay 6s) → "ESB pricing.xlsx · 1h" */
.rf-list .rf-file:nth-child(1) .rf-file-name { animation: rf-text-sync 14s steps(1, end) infinite 6s; }
/* win-4 (delay -3s) → "architecture notes.pdf" */
.rf-list .rf-file:nth-child(2) .rf-file-name { animation: rf-text-sync 14s steps(1, end) infinite -3s; }

/* text/button overlays on the image (windows come from the photo itself) */
.rf-content {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.rf-main {
  position: absolute;
  left: 1%;
  top: 59%;
  max-width: 50%;
}
.rf-main-name {
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  line-height: 1.2;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}
.rf-main-meta {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 5px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
.rf-reopen {
  margin-top: 12px;
  padding: 6px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.92);
  font-size: 10px;
  font-style: italic;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.rf-reopen:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.55); }
.rf-reopen:active { transform: scale(0.96); }
.rf-list {
  position: absolute;
  right: -1%;
  top: 53%;
  width: 40%;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 62px;
}
.rf-file { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rf-file-name {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
.rf-file-sub {
  font-size: 10px;
  color: var(--text-muted);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

/* insight row */
.rf-insight-row {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 14px 2px 4px;
  margin-top: 10px;
}
.rf-insight-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  color: #e6e6e6;
}
.rf-insight-icon svg { width: 26px; height: 26px; }
.rf-insight-text { display: flex; flex-direction: column; gap: 3px; }
.rf-insight-title {
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.3;
}
.rf-insight-sub {
  font-size: 11px;
  color: var(--text-muted);
}

/* footer */
.rf-footer {
  position: relative;
  z-index: 2;
  margin-top: 12px;
  margin-bottom: 5px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .rf-status-dot { animation: none; }
}
/* ==== END RECENT FILES WIDGET ==== */

/* ===================== TEAM PULSE WIDGET ===================== */
.team-pulse-widget {
  position: absolute;
  z-index: 6;
  /* widget-level scale token: lifts the whole frame into the Calendar scale family */
  zoom: 1.12;
  width: calc(var(--h-widget-width) / 1.12);
  height: calc(var(--h-widget-height) / 1.12);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 20px 26px 18px;
  border-radius: 28px;
  color: var(--text-primary);
  font-family: "SF Pro Rounded", "SF Pro Display", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: none;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.team-pulse-widget > * {
  flex-shrink: 0;
}
.tp-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.4;
  border-radius: inherit;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="matrix" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.03 0"/></filter><rect width="220" height="220" filter="url(%23n)"/></svg>');
}

/* header */
.tp-head {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.tp-head-left { display: flex; align-items: center; gap: 11px; min-width: 0; }
.tp-head-text { display: flex; flex-direction: column; min-width: 0; }
.tp-title-row { display: flex; align-items: center; gap: 8px; }
.tp-logo {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.05);
}
.tp-logo svg { width: 20px; height: 20px; stroke: var(--text-primary); }
.tp-logo svg circle { fill: currentColor; stroke: none; }
.tp-title {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  margin: 0;
}
.tp-status-dot {
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 7px 1px rgba(255, 255, 255, 0.6);
  animation: brDotPulse 2.8s ease-in-out infinite;
}
.tp-actions { display: flex; align-items: center; gap: 10px !important; }
.tp-action {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 8px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.55);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.tp-action:active { transform: scale(0.92); }
.tp-action svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tp-action svg circle { fill: currentColor; stroke: none; }
.tp-action[aria-label="Pin"] svg { transform: rotate(40deg); }

/* title block */
.tp-sub {
  margin-top: 2px;
  font-size: 10px;
  color: var(--text-muted);
}
.tp-headline {
  position: relative;
  z-index: 2;
  margin: 14px 0 0;
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: #fff;
}
.tp-headline-sub {
  position: relative;
  z-index: 2;
  margin-top: 2px;
  font-size: 10px;
  color: var(--text-muted);
}

/* chart */
.tp-chart {
  position: relative;
  z-index: 2;
  margin-top: -25px;
  /* Every person/note sits at a percentage of this box, so it keeps the width
     those percentages were drawn against instead of following the wider card. */
  width: 760px;
  margin-left: -26px;
  margin-right: -26px;
}
.tp-note {
  position: absolute;
  font-size: 10px;
  line-height: 1.35;
  color: var(--text-muted);
  z-index: 3;
}
.tp-note-held { top: 49px; left: 19.6%; }
.tp-note-spec { top: 118px; left: 18.5%; }
.tp-note-review { top: 118px; left: 47.7%; }
/* small connector line from the note up to the waveform (like the reference) */
.tp-note-pointer {
  position: absolute;
  height: auto;
  filter:
    brightness(0) invert(1)
    drop-shadow(0 0 2px rgba(255, 255, 255, 0.9))
    drop-shadow(0 0 6px rgba(255, 255, 255, 0.6))
    drop-shadow(0 0 12px rgba(255, 255, 255, 0.4));
  opacity: 0.95;
  pointer-events: none;
}
.tp-note-spec .tp-note-pointer { bottom: 50%; left: -29px; width: 40px; }
.tp-note-review .tp-note-pointer { bottom: 50%; left: -20px; width: 40px; }
/* four twinkling dots above the held note (like stars) */
.tp-dots {
  position: absolute;
  bottom: 100%;
  left: 10px;
  width: 60px;
  height: 10px;
  margin-bottom: 4px;
  pointer-events: none;
}
.tp-dot {
  position: absolute;
  width: 2.5px;
  height: 2.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
  animation: tp-twinkle 3s ease-in-out infinite;
}
.tp-dot-1 { left: 8%;  top: 62%; animation-delay: 0s;    }
.tp-dot-2 { left: 34%; top: 8%;  animation-delay: 0.9s;  }
.tp-dot-3 { left: 56%; top: 60%; animation-delay: 1.7s;  }
.tp-dot-4 { left: 86%; top: 52%; animation-delay: 0.4s;  }
@keyframes tp-twinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.8); box-shadow: 0 0 3px rgba(255, 255, 255, 0.5); }
  50%      { opacity: 1;   transform: scale(1.2); box-shadow: 0 0 8px rgba(255, 255, 255, 0.95); }
}
@media (prefers-reduced-motion: reduce) {
  .tp-dot { animation: none; opacity: 0.8; }
}

/* people row — each person is independently positioned; name stays centered under its image */
.tp-people {
  position: relative;
  z-index: 2;
  height: 165px;
}
.tp-person {
  position: absolute;
  width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: translateX(-50%); /* `left` is the column center, so the name sits under the image */
}
/* ---- per-person POSITION (left = horizontal center of the column, top = vertical) ---- */
.tp-person-1 { left: 9%;    top: 40px; }
.tp-person-2 { left: 25%;   top: 40px; }
.tp-person-3 { left: 42.1%; top: 36px; }
.tp-person-4 { left: 57.9%; top: 36px; }
.tp-person-5 { left: 73.7%; top: 43px; }
.tp-person-6 { left: 90.5%; top: 34px; }

.tp-wave {
  display: block;
  object-fit: contain;
  object-position: center bottom;
  filter: brightness(0) invert(1);
  margin-bottom: 16px;
}
/* ---- per-image SIZE (width + height of each waveform) ---- */
.tp-wave-1 { width: 180px; height: 96px; }
.tp-wave-2 { width: 180px; height: 96px; margin-top: -7px; margin-bottom: 22px; }
.tp-wave-3 { width: 180px; height: 96px; }
.tp-wave-4 { width: 180px; height: 96px; }
.tp-wave-5 { width: 180px; height: 80px; margin-bottom: 25px; }
/* the last wave is a soft blob, so a horizontal stretch is invisible and it
   reaches the card edge again the way it did before the card widened */
.tp-wave-6 { width: 140px; height: 100px; margin-bottom: 14px; transform: scaleX(1.72); transform-origin: left center; }
.tp-person[data-state="private"] .tp-wave { opacity: 0.8; }
.tp-name {
  font-size: 13px;
  font-weight: 500;
  color: #fff;
}
.tp-person-state {
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
}
.tp-person-detail {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
}

/* aggregate + neura */
.tp-aggregate {
  position: relative;
  z-index: 2;
  margin-top: 70px;
  text-align: center;
  font-size: 10px;
  color: var(--text-muted);
}
.tp-neura {
  position: relative;
  z-index: 2;
  margin-top: 12px;
  text-align: center;
  font-size: 12px;
  color: var(--text-primary);
  line-height: 1.4;
}
.tp-suggestion {
  position: relative;
  z-index: 2;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-primary);
}
.tp-spark { flex-shrink: 0; width: 20px; height: 20px; color: #e6e6e6; }
.tp-spark svg { width: 100%; height: 100%; transform: translateY(3px); }
.tp-footer {
  position: relative;
  z-index: 2;
  margin-top: 10px;
  text-align: center;
  font-size: 10px;
  color: var(--text-muted);
}
/* light pulse sweeping along the waveforms: left edge of img 1 -> right edge of img 6 */
/* wrapper lets the glow copy sit exactly over its waveform */
.tp-wave-wrap { position: relative; display: block; }
/* a moving band reveals a bright glow copy only where the image has line pixels,
   so the light follows each line and splits per number of lines */
.tp-wave-glow {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0 !important;
  pointer-events: none;
  filter:
    brightness(0) invert(1)
    brightness(1.6)
    drop-shadow(0 0 3px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 7px rgba(255, 255, 255, 0.6))
    drop-shadow(0 0 14px rgba(190, 214, 255, 0.45));
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%, #000 60%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 40%, #000 60%, transparent 100%);
  -webkit-mask-size: 42% 100%;
  mask-size: 42% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: -40% 0;
  mask-position: -40% 0;
  opacity: 0;
  will-change: -webkit-mask-position, mask-position, opacity;
  animation: tp-line-sweep 9s linear infinite;
}
/* each glow is active only during its 1/6 slice (staggered via inline delay),
   so a single light pulse travels image 1 -> image 6 */
@keyframes tp-line-sweep {
  0%     { -webkit-mask-position: -40% 0; mask-position: -40% 0; opacity: 1; }
  16.66% { -webkit-mask-position: 140% 0; mask-position: 140% 0; opacity: 1; }
  16.67% { opacity: 0; }
  100%   { -webkit-mask-position: 140% 0; mask-position: 140% 0; opacity: 0; }
}
/* wave-2's base is nudged up (margin-top:-7px); match its glow copy */
.tp-wave-2.tp-wave-glow { top: -7px; }

/* collapsed: keep header (logo + title + status dot + actions), hide the rest */
.team-pulse-widget.tp-collapsed .tp-sub,
.team-pulse-widget.tp-collapsed .tp-headline,
.team-pulse-widget.tp-collapsed .tp-headline-sub,
.team-pulse-widget.tp-collapsed .tp-chart,
.team-pulse-widget.tp-collapsed .tp-aggregate,
.team-pulse-widget.tp-collapsed .tp-neura,
.team-pulse-widget.tp-collapsed .tp-suggestion,
.team-pulse-widget.tp-collapsed .tp-footer {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .tp-status-dot { animation: none; }
}
/* ==== END TEAM PULSE WIDGET ==== */

/* ===================== OVERWHELM SOS WIDGET ===================== */
.overwhelm-sos-widget {
  position: absolute;
  z-index: 6;
  /* widget-level scale token: lifts the whole frame into the Calendar scale family */
  zoom: 1.2;
  width: calc(var(--h-widget-width) / 1.2);
  height: calc(var(--h-widget-height) / 1.2);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 20px 26px 16px;
  border-radius: 28px;
  color: var(--text-primary);
  font-family: "SF Pro Rounded", "SF Pro Display", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: none;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.overwhelm-sos-widget * { box-sizing: border-box; }
.sos-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.4;
  border-radius: inherit;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="matrix" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.03 0"/></filter><rect width="220" height="220" filter="url(%23n)"/></svg>');
}

/* header */
.sos-head {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.sos-head-left { display: flex; align-items: center; gap: 11px; min-width: 0; }
.sos-logo {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.05);
}
.sos-logo svg { width: 20px; height: 20px; }
.sos-title {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  margin: 0;
}
.sos-status-dot {
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 7px 1px rgba(255, 255, 255, 0.6);
  animation: brDotPulse 2.8s ease-in-out infinite;
}
.sos-actions { display: flex; align-items: center; gap: 10px !important; }
.sos-action {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 8px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.55);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.sos-action:active { transform: scale(0.92); }
.sos-action svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sos-action svg circle { fill: currentColor; stroke: none; }
.sos-action[aria-label="Pin"] svg { transform: rotate(40deg); }

/* body layout */
.sos-body {
  position: relative;
  z-index: 2;
  display: flex;
  /* The art keeps its own centring; the text column stretches so it can scroll. */
  align-items: stretch;
  flex: 1;
  min-height: 0;
  gap: 20px;
  margin-top: 6px;
}

/* left art + spiral */
.sos-art {
  align-self: center;
  position: relative;
  flex-shrink: 0;
  width: 300px;
  height: 300px;
  overflow: hidden;
  border-radius: 18px;
}
.sos-flow-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.92;
  mix-blend-mode: screen;
  pointer-events: none;
}
.sos-core {
  position: absolute;
  left: 206.5px;
  top: 195px;
  width: 26px;
  height: 26px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.35) 40%, rgba(255, 255, 255, 0) 72%);
  filter: blur(0.5px);
  animation: sos-core-pulse 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sos-core-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.75; }
  50%      { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}


.sos-water {
  position: absolute;
  left: 134px;
  bottom: 13px;
  width: 120px;
  height: 50px;
  pointer-events: none;
  z-index: 3;
  opacity: 0.2;
  mix-blend-mode: screen;
  filter: blur(0.9px);
  background:
    repeating-linear-gradient(2deg,
      rgba(255, 255, 255, 0) 0px,
      rgba(255, 255, 255, 0.08) 4px,
      rgba(255, 255, 255, 0.24) 8px,
      rgba(255, 255, 255, 0.08) 12px,
      rgba(255, 255, 255, 0) 18px);
  background-size: 100% 220%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%);
  animation: sos-water-flow 11s linear infinite;
}
@keyframes sos-water-flow {
  from { background-position: 0 0; }
  to { background-position: 0 220%; }
}
@media (prefers-reduced-motion: reduce) {
  .sos-water { animation: none; }
}
.sos-stars { position: absolute; inset: 0; pointer-events: none; }
.sos-star {
  position: absolute;
  margin: -1.5px 0 0 -1.5px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, rgba(255, 255, 255, 0.85) 45%, rgba(255, 255, 255, 0) 75%);
  box-shadow: 0 0 3px rgba(255, 255, 255, 0.7), 0 0 6px rgba(255, 255, 255, 0.3);
  --o: 0.6;
  opacity: var(--o);
  animation-name: sos-twinkle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes sos-twinkle {
  0%, 100% { opacity: calc(var(--o) * 0.5); }
  50%      { opacity: var(--o); }
}
.sos-dots { position: absolute; inset: 0; pointer-events: none; }
.sos-dot {
  position: absolute;
  left: -30px;
  top: -34px;
  width: 4px;
  height: 4px;
  margin: 3.4px 0 0 -8.4px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, rgba(255, 255, 255, 0.85) 45%, rgba(255, 255, 255, 0) 75%);
  box-shadow: 0 0 3px rgba(255, 255, 255, 0.8), 0 0 6px rgba(255, 255, 255, 0.4);
  offset-rotate: 0deg;
  offset-anchor: center;
  offset-distance: 0%;
  opacity: 0;
  --sz: 1;
  animation-name: sos-travel;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 18s;
}
@keyframes sos-travel {
  0%   { offset-distance: 0%;   transform: scale(calc(var(--sz) * 0.4)); opacity: 0; }
  3%   { opacity: 1; }
  55%  { transform: scale(calc(var(--sz) * 1.1)); }
  99%  { opacity: 1; transform: scale(calc(var(--sz) * 0.6)); }
  100% { offset-distance: 100%; transform: scale(calc(var(--sz) * 0.3)); opacity: 0; }
}
.sos-a2 { --sz: 1.18; offset-path: path("M 162.6 311.8 C 146.4 294.8, 77.9 247.2, 65 210.1 C 52.1 172.9, 61.6 118.9, 85.3 89.1 C 109.1 59.4, 169 28.7, 207.3 31.5 C 245.6 34.3, 295.1 77.5, 315.3 106.1 C 335.5 134.7, 345.3 183.1, 328.3 203.3 C 322.4 210.4, 262.2 221.8, 243.5 227"); }
.sos-a1 { --sz: 1; offset-path: path("M 170.3 299 C 156.5 284.6, 98 244.1, 87.3 212.6 C 76.7 181.1, 86.3 135.2, 106.5 109.9 C 126.6 84.6, 176 58.5, 208.2 60.9 C 240.5 63.3, 282.9 100, 300 124.3 C 317.1 148.6, 325.5 189.7, 311.1 206.8 C 306.1 212.8, 258.4 222.6, 243.5 227"); }
.sos-a3 { --sz: 0.78; offset-path: path("M 181.1 281 C 170.7 270.2, 126.8 239.8, 118.9 216.2 C 110.9 192.6, 118.1 158.1, 133.2 139.2 C 148.3 120.2, 185.4 100.6, 209.6 102.4 C 233.7 104.2, 265.5 131.7, 278.4 150 C 291.2 168.2, 297.5 199, 286.7 211.9 C 282.9 216.4, 253 223.7, 243.5 227"); }
.sos-a4 { --sz: 0.6; offset-path: path("M 189.6 266.8 C 182 258.8, 149.7 236.5, 143.8 219.1 C 138 201.6, 143.3 176.3, 154.4 162.3 C 165.5 148.4, 192.8 134, 210.6 135.3 C 228.4 136.6, 251.8 156.9, 261.3 170.3 C 270.7 183.7, 275.3 206.4, 267.4 215.9 C 264.6 219.2, 248.8 224.6, 243.5 227"); }
.sos-a7 { --sz: 0.48; offset-path: path("M 195.5 257 C 189.7 251, 165.4 234.1, 160.9 221 C 156.5 207.9, 160.5 188.7, 168.9 178.2 C 177.3 167.7, 197.9 156.8, 211.3 157.8 C 224.7 158.8, 242.4 174.1, 249.5 184.2 C 256.7 194.3, 260.2 211.5, 254.2 218.6 C 252.1 221.1, 245.9 225.2, 243.5 227"); }
/* right content */
/* Slack inside the clip box so button glows are not cut off at the left. */
.sos-content {
  flex: 1;
  min-width: 0;
  margin-left: -2px;
  padding-left: 22px;
}
.sos-headline {
  margin: 0;
  font-size: 24px;
  font-weight: 100;
  letter-spacing: 0.01em;
  color: #fff;
  line-height: 1.05;
}
.sos-sub {
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-muted);
}
.sos-steps-label {
  margin-top: 18px;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}
.sos-steps {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.sos-step { display: flex; align-items: center; gap: 12px; }
.sos-step-num {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.06), 0 0 8px rgba(255, 255, 255, 0.4);
}
.sos-step-text { font-size: 12px; color: rgba(255, 255, 255, 0.9); }

.sos-hint {
  margin-top: 20px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.sos-spark { flex-shrink: 0; width: 25px; height: 25px; color: #e6e6e6; margin-top: -1px; }
.sos-spark svg { width: 100%; height: 100%; }
.sos-hint1 { font-size: 11px; color: rgba(255, 255, 255, 0.88); }
.sos-hint2 { margin-top: 2px; font-size: 10px; color: var(--text-muted); }

/* buttons — Wins Jar look */
.sos-btns { margin-top: 20px; display: flex; gap: 12px; }
.sos-btn {
  height: auto;
  padding: 10px 28px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  transition: transform 0.12s, box-shadow 0.25s, background 0.25s, border-color 0.25s, color 0.25s;
}
.sos-btn:active { transform: translateY(1px) scale(0.99); }
.sos-btn:focus-visible { outline: 1.5px solid rgba(255, 255, 255, 0.55); outline-offset: 3px; }
.sos-btn-primary {
  color: #fff;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow: 0 0 22px rgba(255, 255, 255, 0.22), inset 0 0 12px rgba(255, 255, 255, 0.14);
}
.sos-btn-primary:hover {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.32), inset 0 0 14px rgba(255, 255, 255, 0.2);
}
.sos-btn-ghost {
  color: #d0d0d0;
  font-weight: 400;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.sos-btn-ghost:hover {
  opacity: 0.85;
}

.sos-footer {
  position: relative;
  z-index: 2;
  margin-top: 14px;
  text-align: center;
  font-size: 10px;
  color: var(--text-muted);
}

/* collapsed: keep header, hide the rest */
.overwhelm-sos-widget.sos-collapsed .sos-body,
.overwhelm-sos-widget.sos-collapsed .sos-footer {
  display: none;
}
.overwhelm-sos-widget.sos-collapsed .sos-action[data-sos-toggle] svg { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .sos-status-dot,
  .sos-core,
  .sos-dot { animation: none; }
  .sos-dot { opacity: 0.55; offset-distance: 55%; transform: scale(0.9); }
}
/* ==== END OVERWHELM SOS WIDGET ==== */

/* ===================== FOCUS SOUNDSCAPE WIDGET ===================== */
.focus-soundscape-widget {
  position: absolute;
  width: var(--sq-widget-width);
  height: var(--sq-widget-height);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 24px 26px 16px;
  border-radius: 28px;
  color: var(--text-primary);
  font-family: "SF Pro Rounded", "SF Pro Display", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: none;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.focus-soundscape-widget * { box-sizing: border-box; }
.fsc-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.4;
  border-radius: inherit;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="matrix" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.03 0"/></filter><rect width="220" height="220" filter="url(%23n)"/></svg>');
}

/* header */
.fsc-head {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.fsc-head-left { display: flex; align-items: center; gap: 11px; min-width: 0; }
.fsc-logo {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.05);
}
.fsc-logo svg { width: 20px; height: 20px; }
.fsc-title {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  margin: 0;
}
.fsc-status-dot {
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 7px 1px rgba(255, 255, 255, 0.6);
  animation: brDotPulse 2.8s ease-in-out infinite;
}
.fsc-actions { display: flex; align-items: center; gap: 6px; }
.fsc-action {
  background: none;
  border: none;
  cursor: pointer;
  padding: 7px;
  display: inline-flex;
  color: var(--text-primary);
  transition: opacity 0.15s ease;
}
.fsc-action:hover { opacity: 0.7; }
.fsc-action:active { transform: scale(0.92); }
.fsc-action svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fsc-action[aria-label="Pin"] svg { transform: rotate(40deg); }

/* body */
.fsc-body {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  margin-top: 16px;
  display: flex;
  gap: 28px;
}
.focus-soundscape-widget > * {
  flex-shrink: 0;
}
.focus-soundscape-widget > .fsc-body {
  flex-shrink: 1;
}
.fsc-left { flex: 1 1 60%; min-width: 0; display: flex; flex-direction: column; }
.fsc-right {
  flex: 0 0 39%;
  min-width: 0;
  padding-left: 26px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

/* visualizer */
.fsc-viz {
  position: relative;
  width: 120%;
  height: 190px;
  overflow: visible;
  background: none;
  margin-left: -46px;
}
.fsc-viz-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fsc-viz-canvas {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: none;
  pointer-events: none;
  /* Fade the left, right and bottom edges of the waves into the background. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%),
    linear-gradient(to bottom, #000 55%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%),
    linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-composite: intersect;
}
/* PNG-warp mode: show the canvas, hide the SVG */
.fsc-viz[data-fsc-viz="png"] .fsc-viz-canvas { display: block; }
.fsc-viz[data-fsc-viz="png"] .fsc-viz-svg { display: none; }

/* now playing */
.fsc-now { margin-top: 16px; }
.fsc-now-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}
.fsc-now-title {
  margin: 8px 0 0;
  font-size: 24px;
  font-weight: 300;
  color: #fff;
  line-height: 1.1;
}
.fsc-now-sub {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}
.fsc-now-time {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}
.fsc-now-time svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* transport */
.fsc-transport { margin-top: 16px; display: flex; align-items: center; gap: 16px; }
.fsc-play {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 22px rgba(255, 255, 255, 0.18), inset 0 0 12px rgba(255, 255, 255, 0.08);
  transition: transform 0.12s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.fsc-play:hover { background: rgba(255, 255, 255, 0.1); box-shadow: 0 0 30px rgba(255, 255, 255, 0.28), inset 0 0 14px rgba(255, 255, 255, 0.12); }
.fsc-play:active { transform: scale(0.94); }
.fsc-play svg { width: 30px; height: 30px; fill: currentColor; }
.fsc-icon-pause { display: none; }
.focus-soundscape-widget.fsc-playing .fsc-icon-play { display: none; }
.focus-soundscape-widget.fsc-playing .fsc-icon-pause { display: block; }
.fsc-vol-icon {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.55);
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transition: color 0.18s ease;
}
.fsc-vol-icon:hover { color: rgba(255, 255, 255, 0.9); }
.fsc-vol-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fsc-vol-icon .fsc-icon-vol-off { display: none; }
.focus-soundscape-widget.fsc-muted .fsc-vol-icon { color: rgba(255, 255, 255, 0.32); }
.focus-soundscape-widget.fsc-muted .fsc-vol-icon .fsc-icon-vol-on { display: none; }
.focus-soundscape-widget.fsc-muted .fsc-vol-icon .fsc-icon-vol-off { display: block; }
.fsc-vol { flex: 1; min-width: 0; margin-top: -9px; }
.fsc-vol-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(to right, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.85) 72%, rgba(255,255,255,0.14) 72%, rgba(255,255,255,0.14) 100%);
  outline: none;
  cursor: pointer;
}
.fsc-vol-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
  cursor: grab;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.fsc-vol-range::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
  cursor: grab;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
/* Hover: soft glow on the knob */
.fsc-vol-range:hover::-webkit-slider-thumb {
  box-shadow: 0 0 14px 2px rgba(255, 255, 255, 0.85);
  transform: scale(1.15);
}
.fsc-vol-range:hover::-moz-range-thumb {
  box-shadow: 0 0 14px 2px rgba(255, 255, 255, 0.85);
  transform: scale(1.15);
}
/* Active/drag: brighter glow + grabbing cursor */
.fsc-vol-range:active::-webkit-slider-thumb {
  box-shadow: 0 0 20px 4px rgba(255, 255, 255, 1);
  transform: scale(1.25);
  cursor: grabbing;
}
.fsc-vol-range:active::-moz-range-thumb {
  box-shadow: 0 0 20px 4px rgba(255, 255, 255, 1);
  transform: scale(1.25);
  cursor: grabbing;
}

/* soundscapes list */
.fsc-scapes-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}
.fsc-scapes { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.fsc-scape {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 7px 4px;
  border-radius: 10px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.72);
  transition: background 0.2s ease, color 0.2s ease;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.fsc-scape:first-child { border-top: none; }
.fsc-scape:hover { background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.92); }
.fsc-scape-icon { flex-shrink: 0; width: 20px; height: 20px; color: rgba(255, 255, 255, 0.6); }
.fsc-scape-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fsc-scape-name { flex: 1; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fsc-scape-check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  color: transparent;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.fsc-scape-check svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fsc-scape.fsc-on { color: #fff; }
.fsc-scape.fsc-on .fsc-scape-icon { color: rgba(255, 255, 255, 0.9); }
.fsc-scape.fsc-on .fsc-scape-check {
  background: #fff;
  border-color: #fff;
  color: #111;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}

/* adapt toggle */
.fsc-adapt {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.fsc-adapt-label { font-size: 12px; color: rgba(255, 255, 255, 0.82); }
.fsc-switch {
  flex-shrink: 0;
  position: relative;
  width: 48px;
  height: 26px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.fsc-switch-knob {
  position: absolute;
  top: 50%;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  transform: translateY(-50%);
  transition: left 0.25s ease, background 0.25s ease;
}
.fsc-switch-text {
  position: absolute;
  top: 50%;
  left: 9px;
  transform: translateY(-50%);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.fsc-switch.fsc-switch-on {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 22px rgba(255, 255, 255, 0.18), inset 0 0 12px rgba(255, 255, 255, 0.08);
}
.fsc-switch.fsc-switch-on .fsc-switch-knob { left: 25px; background: #fff; }
.fsc-switch.fsc-switch-on .fsc-switch-text { opacity: 1; color: rgba(255, 255, 255, 0.9); }

/* footer / hint / buttons */
.fsc-foot {
  position: relative;
  z-index: 2;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.fsc-hint { display: flex; align-items: flex-start; gap: 10px; min-width: 0; flex: 1; }
.fsc-hint-spark { flex-shrink: 0; width: 32px; height: 32px; color: #e6e6e6; }
.fsc-hint-spark svg { width: 100%; height: 100%; }
.fsc-hint-text { min-width: 0; }
.fsc-hint1 { font-size: 12px; color: rgba(255, 255, 255, 0.85); line-height: 1.35; }
.fsc-hint2 { margin-top: 2px; font-size: 11px; color: var(--text-muted); }
.fsc-btns { flex-shrink: 0; display: flex; gap: 12px; }
.fsc-btn {
  height: auto;
  padding: 10px 28px;
  border-radius: 21px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  transition: transform 0.12s, box-shadow 0.25s, background 0.25s, border-color 0.25s, color 0.25s;
}
.fsc-btn:active { transform: translateY(1px) scale(0.99); }
.fsc-btn-icon { width: 20px; height: 20px; fill: currentColor; }
.fsc-foot-icon-pause { display: none; }
.focus-soundscape-widget.fsc-playing .fsc-foot-icon-play { display: none; }
.focus-soundscape-widget.fsc-playing .fsc-foot-icon-pause { display: inline; }
.fsc-btn-primary {
  color: #fff;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow: 0 0 22px rgba(255, 255, 255, 0.2), inset 0 0 12px rgba(255, 255, 255, 0.12);
}
.fsc-btn-primary:hover { background: rgba(255, 255, 255, 0.14); box-shadow: 0 0 30px rgba(255, 255, 255, 0.3), inset 0 0 14px rgba(255, 255, 255, 0.18); }
.fsc-btn-ghost {
  color: #d0d0d0;
  font-weight: 400;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.fsc-btn-ghost:hover { opacity: 0.85; }
.fsc-footer {
  position: relative;
  z-index: 2;
  margin-top: 14px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}

/* collapsed */
.focus-soundscape-widget.fsc-collapsed .fsc-body,
.focus-soundscape-widget.fsc-collapsed .fsc-foot,
.focus-soundscape-widget.fsc-collapsed .fsc-footer { display: none; }
/* ==== END FOCUS SOUNDSCAPE WIDGET ==== */

/* ===================== SHARED COLLAPSE CHEVRON ROTATION ===================== */
/* Global standard (matches Today): the header collapse chevron points down while
   expanded and rotates to -90deg when the widget is collapsed. The only shared
   hook across all 40 widgets is the chevron button's aria-label, which every
   collapse handler toggles between "Collapse" (expanded) and "Expand" (collapsed)
   — Wins Jar uses "Collapse widget"/"Expand widget", still matched by substring.
   Pin ("Pin"/"Unpin"), three-dot ("More"), and every logo/chart/decorative SVG
   never carry a Collapse/Expand label, so they are untouched. !important on the
   collapsed state normalizes the few widgets that previously rotated 180deg. */
.draggable-widget [aria-label*="Collapse"] svg,
.draggable-widget [aria-label*="Expand"] svg {
  transition: transform 180ms ease;
}
.draggable-widget [aria-label*="Collapse"] svg {
  transform: rotate(0deg);
}
.draggable-widget [aria-label*="Expand"] svg {
  transform: rotate(-90deg) !important;
}

/* ===================== INPUT STYLING ===================== */
.neva-command {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding: 16px 18px;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 30%);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.05), inset 0 0 14px rgba(255, 255, 255, 0.03);
  background: rgb(255 255 255 / 5%);
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}

.neva-command:focus-within {
  border-color: rgb(255 255 255 / 86%);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05), 0 0 24px rgba(255, 255, 255, 0.12);
}

.thought-parking-input {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 20px;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 30%);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.05), inset 0 0 14px rgba(255, 255, 255, 0.03);
  background: rgb(255 255 255 / 5%);
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}

.thought-parking-input:focus-within {
  border-color: rgb(255 255 255 / 86%);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05), 0 0 24px rgba(255, 255, 255, 0.12);
}

.health-journal-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 20px;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 30%);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.05), inset 0 0 14px rgba(255, 255, 255, 0.03);
  background: rgb(255 255 255 / 5%);
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}

.health-journal-input:focus-within {
  border-color: rgb(255 255 255 / 86%);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05), 0 0 24px rgba(255, 255, 255, 0.12);
}

/* ===================== SHARED PRIMARY BODY BUTTON ===================== */
/* Global standard: every widget's primary BODY button uses the exact Streaks
   "Mark today done" (.stk-btn-primary) visual — white/glass/glow. Only the five
   visual tokens below are normalized; per-widget padding, radius, size, layout,
   text, and :hover rules are untouched (those stay in each widget's base class).
   Excluded on purpose: header buttons (pin / collapse chevron / three-dot More),
   secondary buttons (*-btn-secondary), ghost buttons, icon-only buttons, chips,
   tabs, inputs, toggles. .wj-add (Wins Jar) is also excluded because it already
   matches this style but uses container-query (cqw) units for its glow scaling,
   and .mirror-row.is-primary is a row indicator, not a button. The People detail
   overlay buttons are excluded too — that surface is a full-screen panel with
   its own glass vocabulary, not a widget body. */
.stk-btn-primary,
.cd-btn-primary,
.is-btn-primary,
.br-btn-primary,
.sr-btn-primary,
.ts-btn-primary,
.sos-btn-primary,
.fsc-btn-primary,
.tp-btn-primary,
.recovery-btn-primary,
.results-overview-btn-primary,
.health-journal-btn-primary,
.vent-btn-primary,
.rl-btn-primary,
.wn-btn-primary,
.mr-btn-primary,
.pr-btn-primary,
.ml-btn-primary,
.puh-btn-primary,
.id-btn-primary,
.nl-btn-primary,
.nf-btn-primary,
.hc-btn-primary,
.reset-btn--primary {
  font-weight: 500;
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.14);
}
/* Shared hover for all primary body buttons — same selector list as the base
   rule above. Only background and box-shadow change; font-weight, color,
   border, padding, size, radius, layout, transform, and position are untouched.
   Secondary, ghost, and header buttons are excluded (not in this list). */
.stk-btn-primary:hover,
.cd-btn-primary:hover,
.is-btn-primary:hover,
.br-btn-primary:hover,
.sr-btn-primary:hover,
.ts-btn-primary:hover,
.sos-btn-primary:hover,
.fsc-btn-primary:hover,
.tp-btn-primary:hover,
.recovery-btn-primary:hover,
.results-overview-btn-primary:hover,
.health-journal-btn-primary:hover,
.vent-btn-primary:hover,
.rl-btn-primary:hover,
.wn-btn-primary:hover,
.mr-btn-primary:hover,
.pr-btn-primary:hover,
.ml-btn-primary:hover,
.puh-btn-primary:hover,
.id-btn-primary:hover,
.nl-btn-primary:hover,
.nf-btn-primary:hover,
.hc-btn-primary:hover,
.reset-btn--primary:hover {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.32), inset 0 0 14px rgba(255, 255, 255, 0.2);
}

/* ===================== SHARED SECONDARY BODY BUTTON ===================== */
/* Global standard: every widget's secondary BODY button uses the same clean,
   transparent, subtle style (Streaks "See all streaks" reference). Only the
   three visual tokens below are normalized; per-widget padding, radius, size,
   layout, text, and :hover rules are untouched. Excluded on purpose: primary
   buttons (kept on the shared primary rule above), header buttons (pin /
   collapse chevron / three-dot More), icon-only buttons, chips, tabs, inputs,
   toggles. .wj-open (Wins Jar secondary) and the *-btn-ghost buttons (SOS,
   Focus Session) share this same transparent look and are included. Breathing
   (.br-btn-secondary) intentionally deviates from this shared style below. */
.stk-btn-secondary,
.cd-btn-secondary,
.is-btn-secondary,
.sr-btn-secondary,
.ts-btn-secondary,
.tp-btn-secondary,
.recovery-btn-secondary,
.results-overview-btn-secondary,
.health-journal-btn-secondary,
.vent-btn-secondary,
.rl-btn-secondary,
.wn-btn-secondary,
.mr-btn-secondary,
.pr-btn-secondary,
.ml-btn-secondary,
.puh-btn-secondary,
.sos-btn-ghost,
.fsc-btn-ghost,
.id-btn-secondary,
.nl-btn-secondary,
.hc-btn-secondary,
.wj-open {
  color: rgb(255 255 255 / 60%);
  background: transparent;
  border: 1px solid rgb(255 255 255 / 12%);
  font-weight: 500;
}
.br-btn-secondary {
  font-weight: 500;
  box-shadow: none !important;
  color: rgb(255 255 255 / 60%) !important;
  background: transparent;
  border: 1px solid rgb(255 255 255 / 12%) !important;
}
/* Shared hover for all secondary body buttons — same selector list as the
   secondary base rule (ghost buttons excluded on purpose). Only opacity
   changes; color, background, border, box-shadow, font-weight, padding, size,
   radius, layout, transform, and position are untouched. Placed after the base
   rule and all per-widget secondary :hover rules so its opacity wins. */
.stk-btn-secondary:hover,
.cd-btn-secondary:hover,
.is-btn-secondary:hover,
.br-btn-secondary:hover,
.sr-btn-secondary:hover,
.ts-btn-secondary:hover,
.tp-btn-secondary:hover,
.recovery-btn-secondary:hover,
.results-overview-btn-secondary:hover,
.health-journal-btn-secondary:hover,
.vent-btn-secondary:hover,
.rl-btn-secondary:hover,
.wn-btn-secondary:hover,
.mr-btn-secondary:hover,
.pr-btn-secondary:hover,
.ml-btn-secondary:hover,
.puh-btn-secondary:hover,
.id-btn-secondary:hover,
.nl-btn-secondary:hover,
.hc-btn-secondary:hover,
.wj-open:hover {
  opacity: 0.85;
}

/* ===================== SHARED HEADER ACTION HOVER ===================== */
/* Global standard (Recovery reference): the three top-right header action
   buttons — pin, collapse/expand chevron, and three-dot More — fade to
   opacity 0.7 on hover. The only shared hook across all 40 widgets is each
   button's aria-label, which every widget uses identically: "Pin"/"Unpin",
   "Collapse"/"Expand" (Wins Jar: "Collapse widget"/"Expand widget", matched by
   substring), and "More". Only opacity changes — icon size, color, fill,
   stroke, background, border, box-shadow, transform, and position are all
   untouched, so pin active fill, chevron rotation, and menu behavior are
   unaffected. Scoped to .draggable-widget so body buttons never match. The
   0,3,0 specificity beats per-widget *-action:hover (0,2,0) rules. */
.draggable-widget [aria-label="Pin"]:hover,
.draggable-widget [aria-label="Unpin"]:hover,
.draggable-widget [aria-label*="Collapse"]:hover,
.draggable-widget [aria-label*="Expand"]:hover,
.draggable-widget [aria-label="More"]:hover {
  opacity: 0.7;
}

/* ===================== BODY-DOUBLE FOCUS WIDGET ===================== */
/* Shell reuses the shared glass card tokens (same values as .today-widget); the
   header reuses the standardized `today-*` header classes so global header
   normalization applies untouched. Body buttons reuse the shared Streaks
   `stk-btn` primary/secondary styles. Only widget-local layout lives here. */
.body-double-focus-widget {
  position: absolute;
  z-index: 5;
  width: var(--sq-widget-width);
  height: var(--sq-widget-height);
  max-width: 92vw;
  display: flex;
  flex-direction: column;
  padding: 24px 22px 22px 22px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: none;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
}
.body-double-focus-widget > * {
  flex-shrink: 0;
}
.bdf-content {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  margin-top: 0px;
}
.body-double-focus-widget.collapsed .bdf-content {
  display: none;
}
.body-double-focus-widget.collapsed [data-bdf-toggle] svg {
  transform: rotate(-90deg);
}

/* Hero slot keeps a fixed reserved height (aspect-ratio on the normal content
   width) so the widget height never changes. The image itself breaks out of the
   22px side padding to touch both widget edges. No box/background/border. */
.bdf-hero-slot {
  width: 100%;
  right: 10px;
  aspect-ratio: 24 / 9;
  overflow: hidden;
  position: relative;
}
.bdf-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  user-select: none;
  /* top fade mask hides the horizontal seam line at the top of the image */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 100%);
}

/* ---- Hero living-light animation layer (overlays the flat PNG). Positions are
   percentages of the slot so they can be nudged easily. mix-blend screen lets
   the glows read as light on the dark scene. ---- */
.bdf-hero-fx {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
}
.bdf-lamp-glow {
  position: absolute;
  width: 60px;
  height: 60px;
  margin-left: -65px;
  margin-top: -65px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.18) 45%, rgba(255, 255, 255, 0) 72%);
  filter: blur(9px);
  opacity: 0.5;
  animation: bdfLampPulse 4.2s ease-in-out infinite;
}
.bdf-lamp-left {
  left: 37%;
  top: 37%;
}
.bdf-lamp-right {
  left: 74%;
  top: 40%;
  animation-delay: 1.9s;
}
@keyframes bdfLampPulse {
  0%, 100% { opacity: 0.42; transform: scale(0.94); }
  50% { opacity: 0.92; transform: scale(1.07); }
}
.bdf-orb-glow {
  position: absolute;
  left: 37%;
  top: 56%;
  width: 150px;
  height: 150px;
  margin-left: -80px;
  margin-top: -80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.22) 38%, rgba(255, 255, 255, 0) 70%);
  filter: blur(6px);
  opacity: 0.55;
  animation: bdfOrbBreathe 3s ease-in-out infinite;
}
@keyframes bdfOrbBreathe {
  0%, 100% { opacity: 0.5; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.12); }
}
/* stars that sit on the orb — they twinkle in place, no drift */
.bdf-desk-label {
  position: absolute;
  z-index: 3;
  top: 20%;
  pointer-events: none;
}
.bdf-desk-left {
  left: 10%;
  text-align: left;
}
.bdf-desk-right {
  right: 10%;
  text-align: right;
}
.bdf-desk-name {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgb(255 255 255 / 60%);
}
.bdf-desk-sub {
  margin-top: 4px;
  font-size: 10.5px;
  color: rgb(255 255 255 / 60%);
}
.bdf-orb-stars {
  position: absolute;
  inset: 0;
}
.bdf-ostar {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.95), 0 0 12px rgba(255, 255, 255, 0.6);
  animation: bdfOrbStarTwinkle 2.6s ease-in-out infinite;
}
.bdf-ostar:nth-child(2n) { animation-delay: 0.6s; }
.bdf-ostar:nth-child(3n) { animation-delay: 1.3s; }
.bdf-ostar:nth-child(4n) { animation-delay: 1.9s; }
@keyframes bdfOrbStarTwinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.7); }
  50% { opacity: 1; transform: scale(1.25); }
}
.bdf-wave-stars {
  position: absolute;
  inset: 0;
}
.bdf-wstar {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 12px rgba(255, 255, 255, 0.5);
  /* stars are emitted from the right of the laptop and drift left-and-down into
     the glowing orb, fading in on the right and out as they reach the orb */
  animation: bdfStarFlow 5.2s linear infinite;
}
.bdf-wstar:nth-child(2n) { animation-delay: 1s; }
.bdf-wstar:nth-child(3n) { animation-delay: 2s; }
.bdf-wstar:nth-child(4n) { animation-delay: 3s; }
.bdf-wstar:nth-child(5n) { animation-delay: 0.5s; }
.bdf-wstar:nth-child(7n) { animation-delay: 1.6s; }
@keyframes bdfStarFlow {
  0% {
    transform: translate(4px, -4px) scale(0.4);
    opacity: 0;
  }
  15% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  70% {
    opacity: 0.9;
  }
  100% {
    transform: translate(-58px, 26px) scale(0.25);
    opacity: 0;
  }
}
.bdf-copy {
  display: flex;
  flex-direction: column;
  margin-top: 0px;
  margin-left: 10px;
}
.bdf-divider {
  width: 97%;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin-bottom: 16px;
  margin-left: 2px;
}
.bdf-logo-icon {
  position: relative;
}
.bdf-logo-icon img {
  width: 55px;
  height: 55px;
  position: absolute;
  top: -7px;
}
.bdf-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
}
.bdf-subtitle {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: rgb(255 255 255 / 50%);
}
.bdf-kicker {
  margin-top: 20px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgb(255 255 255 / 92%);
}
.bdf-description {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: rgb(255 255 255 / 50%);
}
.bdf-callout-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 10px;
}
.bdf-callout {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  margin-left: -8px;
}
.bdf-callout-icon {
  flex-shrink: 0;
  display: inline-flex;
  margin-top: 1px;
}
.bdf-callout-icon svg {
  width: 35px;
  height: 35px;
  fill: rgb(255 255 255);
  stroke: rgb(255 255 255 / 92%);
  stroke-width: 1;
  stroke-linejoin: round;
}
.bdf-callout-body {
  min-width: 0;
}
.bdf-callout-title {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-primary);
}
.bdf-callout-subtitle {
  margin-top: 3px;
  font-size: 12px;
  color: rgb(255 255 255 / 40%);
}
.bdf-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  margin-right: 6px;
  position: relative;
  top: -5px;
}
.bdf-footer {
  margin-top: 22px;
  font-size: 11px;
  letter-spacing: 0.2px;
  color: rgb(255 255 255 / 42%);
}

/* ===================== MOOD TRENDS WIDGET ===================== */
/* Card shell mirrors the shared widget glass (Recovery reference). The outer
   border / radius / shadow come from the global section.draggable-widget rule;
   the header uses the shared normalized today-* classes so pin/collapse/more,
   the 40x40 logo badge, 20px title, 2px action gap and white glowing dot all
   apply with no changes to shared rules. */
.mood-trends-widget {
  position: absolute;
  z-index: 5;
  width: var(--h-widget-width);
  height: var(--h-widget-height);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 22px 26px 24px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6), inset 0 0 60px rgba(255, 255, 255, 0.015);
}
.mood-trends-widget.collapsed .mood-body {
  display: none;
}
.mood-trends-widget.collapsed [data-mood-toggle] svg {
  transform: rotate(-90deg);
}
.mood-body {
  display: grid;
  grid-template-columns: 1.35fr 0.7fr;
  gap: 55px;
  margin-top: 30px;
  /* The body fills the box; only the right column scrolls so the chart stays
     whole. */
  flex: 1;
  min-height: 0;
}

/* ---- left chart section ---- */
.mood-chart {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mood-chart-label {
  font-size: 9px;
  letter-spacing: 0.16em;
  color: rgb(255 255 255 / 60%);
  margin-left: 4px;
}
.mood-graph {
  position: relative;
  height: 210px;
  margin-top: 14px;
}
.mood-icon-img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  transform: translate(-21px, -21px);
}
.mood-cloud-defs {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}
.mood-cloud-slot {
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  bottom: 46px;
  z-index: 0;
  pointer-events: none;
}
.mood-cloud-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 196%;
  object-fit: contain;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
  mix-blend-mode: screen;
  transform: translate(-10px, -43px);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* Each layer is windowed to one cloud (band gradient) with a soft vertical feather;
   the band edges sit in the transparent gaps between clouds so seams don't show. */
.mood-cloud-img--1 {
  filter: url(#moodCloudDrift1);
  animation: mood-cloud-float-1 18s ease-in-out infinite;
  -webkit-mask-image:
    linear-gradient(to right, #000 0%, #000 16%, transparent 28%),
    linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image:
    linear-gradient(to right, #000 0%, #000 16%, transparent 28%),
    linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.mood-cloud-img--2 {
  filter: url(#moodCloudDrift2);
  animation: mood-cloud-float-2 21s ease-in-out infinite;
  -webkit-mask-image:
    linear-gradient(to right, transparent 14%, #000 24%, #000 36%, transparent 46%),
    linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 14%, #000 24%, #000 36%, transparent 46%),
    linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.mood-cloud-img--3 {
  filter: url(#moodCloudDrift3);
  animation: mood-cloud-float-3 17s ease-in-out infinite;
  -webkit-mask-image:
    linear-gradient(to right, transparent 34%, #000 44%, #000 56%, transparent 66%),
    linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 34%, #000 44%, #000 56%, transparent 66%),
    linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.mood-cloud-img--4 {
  filter: url(#moodCloudDrift4);
  animation: mood-cloud-float-4 23s ease-in-out infinite;
  -webkit-mask-image:
    linear-gradient(to right, transparent 54%, #000 64%, #000 76%, transparent 86%),
    linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 54%, #000 64%, #000 76%, transparent 86%),
    linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.mood-cloud-img--5 {
  filter: url(#moodCloudDrift5);
  animation: mood-cloud-float-5 19s ease-in-out infinite;
  -webkit-mask-image:
    linear-gradient(to right, transparent 72%, #000 84%, #000 100%),
    linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 72%, #000 84%, #000 100%),
    linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
/* each cloud drifts in its own direction */
@keyframes mood-cloud-float-1 {
  0% { transform: translate(-10px, -43px); }
  50% { transform: translate(-16px, -27px); }
  100% { transform: translate(-10px, -43px); }
}
@keyframes mood-cloud-float-2 {
  0% { transform: translate(-10px, -43px); }
  50% { transform: translate(-3px, -61px); }
  100% { transform: translate(-10px, -43px); }
}
@keyframes mood-cloud-float-3 {
  0% { transform: translate(-10px, -43px); }
  50% { transform: translate(-11px, -66px); }
  100% { transform: translate(-10px, -43px); }
}
@keyframes mood-cloud-float-4 {
  0% { transform: translate(-10px, -43px); }
  50% { transform: translate(-3px, -25px); }
  100% { transform: translate(-10px, -43px); }
}
@keyframes mood-cloud-float-5 {
  0% { transform: translate(-10px, -43px); }
  25% { transform: translate(-4px, -65px); }
  50% { transform: translate(-2px, -43px); }
  75% { transform: translate(-6px, -21px); }
  100% { transform: translate(-10px, -43px); }
}
.mood-grid {
  position: absolute;
  inset: 0 0 46px 0;
  width: 100%;
  height: calc(100% - 46px);
  z-index: 1;
}
.mood-grid line {
  stroke: rgb(255 255 255 / 6%);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.mood-axis {
  position: absolute;
  left: 7px;
  right: 0;
  bottom: -14px;
  width: 97%;
  height: 12px;
  z-index: 2;
  overflow: visible;
}
.mood-axis-line {
  stroke: rgb(255 255 255 / 92%);
  stroke-width: 1;
  vector-effect: none;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.35));
}
.mood-axis-tick {
  stroke: rgb(255 255 255 / 50%);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.mood-now-top {
  position: absolute;
  top: -30px;
  right: -2px;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: rgb(255 255 255 / 92%);
  z-index: 3;
}
.mood-now-star {
  position: absolute;
  top: 26px;
  right: 8px;
  width: 50px;
  height: 50px;
  transform: translate(50%, -50%);
  z-index: 4;
  pointer-events: none;
}
.mood-now-star-img {
  position: absolute;
  width: 300%;
  height: 300%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  mix-blend-mode: screen;
  transform: translate(-53px, -52px);
}
.mood-now-marker {
  position: absolute;
  top: -10px;
  bottom: 22px;
  right: 10px;
  width: 1px;
  background: linear-gradient(to top, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 17%) 60%, rgb(255 255 255 / 68%) 100%);
  box-shadow: none;
  z-index: 3;
}
.mood-now-bottom {
  position: absolute;
  bottom: 4px;
  right: 0;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: rgb(255 255 255 / 55%);
  z-index: 3;
}
.mood-current-marker {
  position: absolute;
  left: 82%;
  bottom: -8px;
  transform: translate(-50%, 50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgb(120 120 120);
  border: 1.5px solid rgb(255 255 255);
  box-shadow: 0 0 10px rgb(255 255 255 / 80%);
  z-index: 4;
}
.mood-axis-labels {
  display: flex;
  justify-content: flex-start;
  margin-top: 20px;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: rgb(255 255 255 / 40%);
  text-wrap: nowrap;
}
.mood-days {
  margin-top: 22px;
}
.mood-days-label {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: rgb(255 255 255 / 42%);
  margin-left: 7px;
}
.mood-day-grid {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  margin-left: 7px;
}
.mood-week {
  display: flex;
  gap: 8px;
}
.mood-day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.mood-day-letter {
  font-size: 9px;
  color: rgb(255 255 255 / 35%);
}
.mood-day-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgb(255 255 255 / var(--dot-alpha, 0.5));
  box-shadow: 0 0 var(--dot-glow, 3px) rgba(255, 255, 255, calc(var(--dot-alpha, 0.5) * 0.7));
}
.mood-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 38px;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 7px 11px;
  border-radius: 8px;
  font-size: 10.5px;
  color: rgb(255 255 255 / 60%);
  background: rgba(20, 22, 21, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
  z-index: 6;
}
.mood-tooltip::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 10px;
  height: 10px;
  background: inherit;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  transform: translateX(-50%) rotate(-45deg);
}
.mood-footer {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 40px;
  margin-left: 4px;
  font-size: 11px;
  color: rgb(255 255 255 / 42%);
}
.mood-footer-lock {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: rgb(255 255 255 / 50%);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- right insight / copy section ---- */
.mood-right {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* Slack inside the clip box so the primary button glow is not cut off. */
  margin: 0 -22px 0 -44px;
  padding: 0 22px 0 44px;
}
.mood-now-label {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: rgb(255 255 255 / 45%);
}
.mood-headline {
  margin-top: -10px;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: rgb(255 255 255 / 70%);
}
.mood-subtitle {
  margin-top: 6px;
  font-size: 14px;
  color: rgb(255 255 255 / 50%);
  letter-spacing: 0.04em;
}
.mood-divider {
  margin-top: 20px;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}
.mood-kicker {
  margin-top: 12px;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: rgb(255 255 255 / 50%);
}
.mood-paragraph {
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.75;
  color: rgb(255 255 255 / 50%);
}
.mood-kicker + .mood-paragraph {
  margin-top: 9px;
  text-wrap: nowrap;
}
.mood-callout {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  margin-left: -8px;
}
.mood-callout-spark {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  margin-top: 1px;
  fill: none;
  stroke: rgb(255 255 255);
  filter: none;
}
.mood-callout-title {
  font-size: 13px;
  line-height: 1.5;
  color: rgb(255 255 255 / 80%);
}
.mood-callout-sub {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: rgb(255 255 255 / 50%);
}
.mood-actions-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  margin-left: -20px;
  margin-bottom: 25px;
}

/* ===================== MEDICATION REMINDER WIDGET ===================== */
/* Card shell mirrors the shared widget glass (Recovery reference). The outer
   border / radius / shadow come from the global section.draggable-widget rule;
   the header uses the shared normalized today-* classes so pin/collapse/more,
   the 40x40 logo badge, 20px title, 2px action gap and white glowing dot all
   apply with no changes to shared rules. Body buttons reuse the shared
   primary/secondary button classes. Everything here is coded — no images. */
.medication-widget {
  position: absolute;
  z-index: 5;
  width: var(--sq-widget-width);
  height: var(--sq-widget-height);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 22px 26px 20px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6), inset 0 0 60px rgba(255, 255, 255, 0.015);
}
.medication-widget.collapsed .med-body,
.medication-widget.collapsed .med-divider-footer,
.medication-widget.collapsed .med-footer {
  display: none;
}
.medication-widget.collapsed [data-med-toggle] svg {
  transform: rotate(-90deg);
}
.med-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: rgb(255 255 255 / 90%);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.med-icon-img {
  width: 21px;
  height: 21px;
  object-fit: contain;
  opacity: 0.9;
}
.medication-widget > * {
  flex-shrink: 0;
}
.med-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  flex: 1;
  min-height: 0;
  margin-top: 26px;
}
.med-sep {
  margin: 0 2px;
  opacity: 1;
}
.med-label {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: rgb(255 255 255 / 60%);
  margin-left: 4px;
}
.med-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
}

/* ---- left column ---- */
.med-left {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
/* featured next-dose card: glass gradient body + luminous gradient hairline */
.med-next-card {
  position: relative;
  margin-top: 12px;
  padding: 14px 22px 24px;
  border-radius: 18px;
  background: linear-gradient(158deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.022) 46%, rgba(255, 255, 255, 0.012) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 46px rgba(255, 255, 255, 0.028),
    0 12px 34px rgba(0, 0, 0, 0.38);
}
.med-next-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(158deg, rgb(255 255 255 / 48%) 0%, rgb(255 255 255 / 21%) 26%, rgb(255 255 255 / 24%) 58%, rgba(255, 255, 255, 0.11) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.med-next-top {
  display: flex;
  align-items: center;
  gap: 15px;
}
.med-pill-badge {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgb(255 255 255 / 4%);
  border: 1px solid rgb(255 255 255 / 25%);
  box-shadow: inset 0 0 16px rgb(255 255 255 / 4%);
}
.med-pill-badge svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: rgb(255 255 255 / 88%);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.med-pill-badge-img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  opacity: 0.88;
}
.med-next-text {
  min-width: 0;
  margin-top: 10px;
  animation: medNextTextIn 0.45s ease both;
}
@keyframes medNextTextIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.med-next-name {
  font-size: 16px;
  font-weight: 500;
  color: rgb(255 255 255 / 92%);
  letter-spacing: 0.02em;
}
.med-next-dose {
  font-size: 15px;
  color: rgb(255 255 255 / 92%);
  margin-left: 2px;
  font-weight: 400;
}
.med-next-sub {
  margin-top: 6px;
  font-size: 12.5px;
  color: rgb(255 255 255 / 48%);
}
.med-next-actions {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 34px;
  margin-left: 14px;
}
.med-label-adherence {
  margin-top: 24px;
}
.med-left .med-divider {
  margin-top: 10px;
  width: 98%;
  margin-left: 4px;
}
.med-week {
  display: flex;
  gap: 42px;
  margin-top: 12px;
  justify-content: flex-start;
  margin-left: 4px;
}
.med-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.med-day-letter {
  font-size: 11px;
  color: rgb(255 255 255 / 70%);
}
.med-day-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: transparent;
  border: 1.4px solid rgb(255 255 255 / 30%);
}
.med-day-dot.is-done {
  background: rgb(255 255 255 / 94%);
  border-color: rgb(255 255 255 / 94%);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.45);
}
.med-adherence-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 30px;
  margin-left: 4px;
}
.med-adherence-stats {
  font-size: 12px;
  color: rgb(255 255 255 / 70%);
  letter-spacing: 1px;
}
.med-history-link {
  font-family: inherit;
  font-size: 12px;
  color: rgb(255 255 255 / 70%);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-wrap: nowrap;
  transition: opacity 0.15s ease;
  letter-spacing: 1px;
}
.med-history-link:hover {
  opacity: 0.7;
}
.med-history-arrow {
  width: 14px;
  height: 14px;
  fill: currentColor;
  stroke: none;
  vertical-align: -3px;
  margin-left: 3px;
}

/* ---- right column ---- */
.med-right {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.med-list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
}
.med-row {
  position: relative;
  display: grid;
  grid-template-columns: 44px 28px 1fr 65px;
  align-items: center;
  gap: 16px;
  padding: 8px 14px;
  border-radius: 12px;
}
.med-row-line {
  height: 1px;
  margin: 3px 0;
  background: rgba(255, 255, 255, 0.07);
}
/* active row highlight lives on a pseudo-element so the gradient can crossfade */
.med-row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0%, rgba(255, 255, 255, 0.072) 52%, rgba(255, 255, 255, 0.04) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 26px rgba(255, 255, 255, 0.045);
  transition: opacity 0.45s ease;
}
.med-row.is-active::before {
  opacity: 1;
}
.med-row-time {
  font-size: 12.5px;
  color: rgb(255 255 255 / 80%);
}
.med-row.is-active .med-row-time {
  color: rgb(255 255 255 / 78%);
}
.med-check {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1.4px solid rgb(255 255 255 / 22%);
  transition: border-color 0.4s ease;
}
.med-check.is-checked {
  border-color: rgb(255 255 255 / 88%);
}
.med-check svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: rgb(255 255 255 / 92%);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(0.55);
  transition: opacity 0.28s ease, transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.med-check.is-checked svg {
  opacity: 1;
  transform: scale(1);
}
.med-row-name {
  min-width: 0;
  font-size: 12.5px;
  color: rgb(255 255 255 / 92%);
  letter-spacing: 0.5px;
}
.med-row.is-active .med-row-name {
  color: rgb(255 255 255 / 94%);
}
.med-row-dose {
  font-size: 12px;
  color: rgb(255 255 255 / 70%);
  margin-left: 3px;
}
.med-row-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgb(255 255 255 / 80%);
  text-wrap: nowrap;
  font-weight: 400;
}
.med-status-icon {
  position: relative;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}
.med-status-tick {
  position: absolute;
  inset: 0;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: rgb(255 255 255 / 80%);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(0.55);
  transition: opacity 0.28s ease, transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.med-row-status.is-taken .med-status-tick {
  opacity: 1;
  transform: scale(1);
}
.med-status-ring {
  position: absolute;
  inset: 0;
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  transition: opacity 0.28s ease;
}
.med-row-status.is-taken .med-status-ring {
  opacity: 0;
}
.med-status-ring::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.3px solid rgb(255 255 255 / 34%);
}
.med-row.is-active .med-row-status {
  color: rgb(255 255 255 / 62%);
}
.med-row.is-active .med-status-ring::before {
  border-color: rgb(255 255 255 / 55%);
}
.med-divider-list {
  margin-top: 4px;
  margin-left: 0px;
}
.med-callout {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 18px;
  padding-left: 0px;
}
.med-callout-spark {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin-top: 1px;
  fill: none;
  stroke: rgb(255 255 255 / 92%);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.med-callout-title {
  font-size: 13px;
  line-height: 1.55;
  color: rgb(255 255 255 / 78%);
}
.med-callout-sub {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.55;
  color: rgb(255 255 255 / 50%);
}

/* ---- footer ---- */
.med-divider-footer {
  margin-top: 22px;
}
.med-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 11px;
  color: rgb(255 255 255 / 60%);
  margin-left: 4px;
}
.med-footer-lock {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: rgb(255 255 255 / 92%);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============ Attention Residue ============
   Shell/header/buttons come from the shared systems (section.draggable-widget,
   today-head*, recovery-btn*). Everything below is widget-local layout only. */
.attention-residue-widget {
  position: absolute;
  z-index: 5;
  width: var(--sq-widget-width);
  height: var(--sq-widget-height);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 22px 26px 20px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6), inset 0 0 60px rgba(255, 255, 255, 0.015);
}
.attention-residue-widget.collapsed .ares-body,
.attention-residue-widget.collapsed .ares-footer {
  display: none;
}
.attention-residue-widget.collapsed [data-ares-toggle] svg {
  transform: rotate(-90deg);
}
.ares-icon-img {
  width: 75px;
  height: 75px;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  transform: translate(-17px, -13px);
}
.ares-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: rgb(255 255 255 / 90%);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.attention-residue-widget > * {
  flex-shrink: 0;
}
.ares-body {
  flex: 1;
  min-height: 0;
  margin-top: 26px;
}
.ares-label {
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: rgb(255 255 255 / 80%);
}
.ares-sep {
  margin: 0 2px;
  opacity: 1;
}
.ares-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
}
.ares-footer-rule {
  height: 1px;
  background: rgb(255 255 255 / 3%);
  margin-top: 24px;
}

/* ---- top task texts ---- */
.ares-tasks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26%;
}
.ares-task {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.ares-task:first-child {
  margin-right: 24px;
}
.ares-task-name {
  margin-top: 4px;
  font-size: 18px;
  font-weight: 400;
  color: rgb(255 255 255 / 80%);
  letter-spacing: 0.02em;
}
.ares-task-rule {
  width: 35px;
  height: 1px;
  margin-top: 10px;
  background: rgb(255 255 255 / 30%);
}

/* ---- central visual slot (asset drops in here) ---- */
.attention-residue-visual-slot {
  position: relative;
  width: 100%;
  max-height: 230px;
  margin-top: 8px;
}
.attention-residue-visual-img {
  /* the left circle's glow ring is baked into the PNG, so it is dimmed with a
     radial mask band; tune --ares-ring-* to reposition or change the falloff */
  --ares-ring-x: 15%;
  --ares-ring-y: 50%;
  --ares-ring-inner: 58px;
  --ares-ring-outer: 108px;
  --ares-ring-alpha: 0.5;
  display: block;
  width: 96%;
  height: auto;
  object-fit: contain;
  object-position: center center;
  pointer-events: none;
  user-select: none;
  transform: translate(10px, -90px);
  -webkit-mask-image: radial-gradient(
    circle at var(--ares-ring-x) var(--ares-ring-y),
    #000 0,
    #000 var(--ares-ring-inner),
    rgba(0, 0, 0, var(--ares-ring-alpha)) calc(var(--ares-ring-inner) + 14px),
    rgba(0, 0, 0, var(--ares-ring-alpha)) calc(var(--ares-ring-outer) - 14px),
    #000 var(--ares-ring-outer)
  );
  mask-image: radial-gradient(
    circle at var(--ares-ring-x) var(--ares-ring-y),
    #000 0,
    #000 var(--ares-ring-inner),
    rgba(0, 0, 0, var(--ares-ring-alpha)) calc(var(--ares-ring-inner) + 14px),
    rgba(0, 0, 0, var(--ares-ring-alpha)) calc(var(--ares-ring-outer) - 14px),
    #000 var(--ares-ring-outer)
  );
}
.ares-flow-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  top: 8%;
}
.ares-fstar {
  position: absolute;
  border-radius: 50%;
  /* additive light rather than a white disc drawn over the photo: the soft
     gradient has no hard edge and screen blending lets the image show through */
  background: radial-gradient(circle, rgb(255 255 255 / 100%) 0%, rgb(255 255 255 / 90%) 14%, rgb(255 255 255 / 30%) 34%, rgb(255 255 255 / 0%) 68%);
  mix-blend-mode: screen;
  will-change: transform, opacity;
  animation-name: aresStarFlow;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
/* x advances evenly across the full gap while y samples the guide wave, so a
   star rides the whole curve from one circle to the other before fading */
@keyframes aresStarFlow {
  0% {
    transform: translate(var(--ares-dx), calc(-9px * var(--ares-wave))) scale(0.4);
    opacity: 0;
  }
  6% {
    transform: translate(calc(var(--ares-dx) * 0.94), calc(-3.5px * var(--ares-wave))) scale(0.9);
  }
  22% {
    opacity: var(--ares-peak, 0.9);
  }
  30% {
    transform: translate(calc(var(--ares-dx) * 0.7), calc(-0.5px * var(--ares-wave))) scale(1);
  }
  34% {
    transform: translate(calc(var(--ares-dx) * 0.66), calc(-5.5px * var(--ares-wave))) scale(1);
  }
  37.5% {
    transform: translate(calc(var(--ares-dx) * 0.625), calc(-10px * var(--ares-wave))) scale(1);
  }
  50% {
    transform: translate(calc(var(--ares-dx) * 0.5), calc(-14px * var(--ares-wave))) scale(1);
  }
  62.5% {
    transform: translate(calc(var(--ares-dx) * 0.375), calc(-15.5px * var(--ares-wave))) scale(1);
  }
  75% {
    transform: translate(calc(var(--ares-dx) * 0.25), calc(-14px * var(--ares-wave))) scale(1);
  }
  78% {
    opacity: var(--ares-peak, 0.9);
  }
  87.5% {
    transform: translate(calc(var(--ares-dx) * 0.125), calc(-10px * var(--ares-wave))) scale(1);
  }
  94% {
    transform: translate(calc(var(--ares-dx) * 0.06), calc(-5.5px * var(--ares-wave))) scale(1);
  }
  100% {
    transform: translate(0px, 0px) scale(0.4);
    opacity: 0;
  }
}
/* centered text inside each circle of the visual; positions are tunable because
   the circles live inside the bitmap, not in the DOM */
.ares-circle-text {
  position: absolute;
  top: 78px;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}
.ares-circle-text--left {
  left: 17.5%;
  top: 47%;
}
.ares-circle-text--right {
  left: 81.5%;
  top: 47%;
}
.ares-circle-value {
  font-size: 60px;
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.01em;
  color: rgb(255 255 255 / 80%);
}
.ares-circle-unit {
  font-size: 46px;
  font-weight: 300;
  margin-left: 2px;
}
.ares-circle-caption {
  margin-top: 4px;
  font-size: 15px;
  color: rgb(255 255 255 / 62%);
  text-wrap: nowrap;
}

/* ---- lower content ---- */
.ares-refocus {
  margin-top: 0px;
  margin-left: 4px;
}
.ares-refocus-text {
  margin-top: 8px;
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.65;
  color: rgb(255 255 255 / 50%);
  font-weight: 400;
}
.ares-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 14px;
}
.ares-callout {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}
.ares-callout-spark {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin-top: 1px;
  fill: none;
  stroke: rgb(255 255 255 / 92%);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ares-callout-title {
  font-size: 13px;
  line-height: 1.55;
  color: rgb(255 255 255 / 92%);
  font-weight: 500;
  text-wrap: nowrap;
}
.ares-callout-sub {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.55;
  color: rgb(255 255 255 / 50%);
}
.ares-actions-row {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

/* ---- footer ---- */
.ares-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  margin-left: 4px;
  font-size: 11px;
  color: rgb(255 255 255 / 60%);
}
.ares-footer-lock {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: rgb(255 255 255 / 92%);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============ Twin Letters ============
   Shell/header/buttons come from the shared systems (section.draggable-widget,
   today-head*, recovery-btn*). Everything below is widget-local layout only.
   The two letter visuals are image slots; everything else is coded. */
.twin-letters-widget {
  position: absolute;
  z-index: 5;
  width: var(--sq-widget-width);
  height: var(--sq-widget-height);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 22px 26px 20px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6), inset 0 0 60px rgba(255, 255, 255, 0.015);
}
.twin-letters-widget.collapsed .twl-body,
.twin-letters-widget.collapsed .twl-footer {
  display: none;
}
.twin-letters-widget.collapsed [data-twl-toggle] svg {
  transform: rotate(-90deg);
}
.twl-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: rgb(255 255 255 / 90%);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.twl-icon-img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  transform: translate(-12.5px, -13px);
}
.twl-sep {
  margin: 0 2px;
}

/* ---- body grid: text column | main letter | past letters ---- */
.twin-letters-widget > * {
  flex-shrink: 0;
}
.twl-body {
  flex: 1;
  min-height: 0;
  margin-top: 18px;
}
.twl-stage {
  display: grid;
  grid-template-columns: 210px 1fr 250px;
  gap: 28px;
  align-items: start;
}

/* ---- left content column ---- */
.twl-left {
  margin-left: 4px;
  margin-top: 40px;
}
.twl-headline {
  font-size: 30px;
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: rgb(255 255 255 / 92%);
}
.twl-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 26px 0 22px;
  width: 172px;
}
.twl-divider-line {
  flex: 1;
  height: 1px;
  background: rgb(255 255 255 / 10%);
}
.twl-sparkle {
  flex-shrink: 0;
  fill: rgb(149 149 149);
  stroke: rgb(255 255 255);
  filter: drop-shadow(0 0 6px rgb(255 255 255 / 45%));
}
.twl-sparkle-divider {
  width: 24px;
  height: 24px;
}
.twl-sparkle-bullet {
  width: 32px;
  height: 32px;
  margin-top: 1px;
}
.twl-copy-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.twl-copy {
  font-size: 13px;
  line-height: 1.6;
  color: rgb(255 255 255 / 92%);
}
.twl-copy-muted {
  margin-top: 16px;
  margin-left: 36px;
  color: rgb(255 255 255 / 50%);
}

/* ---- image slots: swap the asset in, nothing else needs to change ---- */
.twl-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
}
.twl-slot:empty {
  border: 1px dashed rgb(255 255 255 / 7%);
}
.twl-slot img {
  display: block;
  width: 247%;
  height: 128%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  transform: translate(-6px, 105px) rotate(0deg);
}
.twl-past-slot-img {
  display: block;
  width: 247%;
  height: 128%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  transform: translate(-6px, 72px);
}
.twl-letter-col {
  margin-top: -46px;
}
.twl-letter-slot {
  height: 386px;
  cursor: pointer;
  outline: none;
}
.twl-letter-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  perspective: 900px;
}
/* The wrapper's top edge sits exactly on the envelope's top edge, so the flap
   turns about the real hinge instead of its own centre. Both offsets come from
   the artwork bounds: the envelope is 541x401 at (330,184) on its canvas and
   the flap is 804x399 at (193,202) on its own, hence the 0.673 scale. */
.twl-flap {
  position: absolute;
  left: -20.94px;
  top: 178.85px;
  width: 298.4px;
  height: 148.1px;
  z-index: 3;
  transform-origin: 50% 0;
  will-change: transform;
  transition:
    transform 550ms cubic-bezier(0.22, 0.61, 0.36, 1) 140ms,
    top 550ms cubic-bezier(0.22, 0.61, 0.36, 1) 140ms,
    z-index 0ms 400ms;
}
.twl-env-img {
  position: relative;
  z-index: 2;
}
/* The sheet is masked to the envelope's throat: the V fold in the artwork runs
   from the sides at canvas y=210 down to an apex at (600,407), so the sheet is
   only drawn above those edges and reads as sliding out of the opening. */
.twl-paper-clip {
  position: absolute;
  inset: -401px -40px -13.4px -40px;
  overflow: hidden;
  z-index: 3;
  clip-path: polygon(
    0 0,
    331px 0,
    321px 271.6px,
    316.4px 595.6px,
    167px 726.85px,
    9.16px 585.7px,
    0 680.7px
  );
}
.twl-paper-stage {
  position: absolute;
  inset: 400px 40px 13.4px 40px;
}
.twl-letter-layer-closed .twl-paper-img {
  position: absolute;
  left: -202.98px;
  top: 77.35px;
  width: 661.96px;
  height: 441.31px;
  object-fit: fill;
  /* parked below the fold apex, so nothing of it shows through the throat */
  transform: translateY(182px) scale(0.992);
  will-change: transform;
  transition: transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.twl-letter-slot.is-open .twl-paper-img {
  transform: translateY(-106.4px) scale(1);
  transition-delay: 80ms;
}
.twl-letter-layer-closed .twl-flap-img {
  position: absolute;
  left: -67.64px;
  top: -72.98px;
  width: 426.4px;
  height: 304.9px;
  object-fit: fill;
  transform: none;
}
.twl-letter-slot.is-open .twl-flap {
  /* stops just short of flat so the flap keeps a hint of thickness */
  transform: rotateX(-172deg);
  /* the turned flap otherwise leaves a gap against the envelope's top edge */
  top: 188.85px;
  /* once past vertical it belongs behind the sheet */
  z-index: 0;
  transition:
    transform 550ms cubic-bezier(0.22, 0.61, 0.36, 1),
    top 550ms cubic-bezier(0.22, 0.61, 0.36, 1),
    z-index 0ms 180ms;
}
.twl-past-col {
  padding-top: 30px;
}
.twl-label {
  margin-bottom: 28px;
  margin-left: 36px;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: rgb(255 255 255 / 92%);
}
.twl-past-slot {
  height: 240px;
  transform: translate(-9px, -92px);
}

/* ---- hint row + CTAs ---- */
.twl-bottom {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 6px;
  padding-left: 238px;
}
.twl-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  bottom: -10px;
  left: 30px;
}
.twl-hint-icon {
  width: 26px;
  height: 26px;
  fill: #000000;
  stroke: #ffffff;
}
.twl-hint-text {
  font-size: 12px;
  color: rgb(255 255 255 / 60%);
  text-wrap: nowrap;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.twl-cta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  margin-left: auto;
  position: relative;
  top: 50px;
  right: 8px;
}

/* ---- footer ---- */
.twl-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 30px;
  margin-bottom: 4px;
  margin-left: 4px;
  font-size: 11px;
  color: rgb(255 255 255 / 60%);
}
.twl-footer-lock {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: rgb(255 255 255 / 92%);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.twl-footer-text {
  font-size: 11px;
  color: rgb(255 255 255 / 50%);
}

/* ============ Journal ============
   Shell/header/buttons come from the shared systems (section.draggable-widget,
   today-head*, recovery-btn*). Everything below is widget-local layout only.
   The moon/lake scene is a single image slot; everything else is coded. */
.journal-widget {
  position: absolute;
  z-index: 5;
  width: var(--sq-widget-width);
  height: var(--sq-widget-height);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 0 0 20px;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6), inset 0 0 60px rgba(255, 255, 255, 0.015);
}
.journal-widget.collapsed .journal-body,
.journal-widget.collapsed .journal-scene,
.journal-widget.collapsed .journal-scene-vignette,
.journal-widget.collapsed .journal-footer-rule,
.journal-widget.collapsed .journal-bottom,
.journal-widget.collapsed .journal-footer {
  display: none;
}
.journal-widget > * {
  flex-shrink: 0;
}
.journal-stage {
  flex: 1;
  min-height: 0;
}
.journal-widget.collapsed [data-journal-toggle] svg {
  transform: rotate(-90deg);
}
.journal-sep {
  margin: 0 2px;
}
.journal-icon-img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  opacity: 1;
  transform: translate(-15px, -15px);
}

/* ---- media stage: the scene fills the whole upper zone, header floats on it ---- */
.journal-stage {
  position: relative;
}
.journal-header {
  position: relative;
  z-index: 3;
  padding: 22px 26px 0;
}
.journal-body {
  position: relative;
  z-index: 2;
  margin-top: 14px;
  padding: 0 26px;
  min-height: 388px;
}
.journal-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.journal-scene-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
  user-select: none;
  /* dissolves the photo's hard bottom edge into the widget surface */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgba(0, 0, 0, 0.5) 87%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgba(0, 0, 0, 0.5) 87%, rgba(0, 0, 0, 0) 100%);
}
/* second copy of the scene, displaced by a slow turbulence filter and masked
   to the lake so only the water surface moves */
.journal-scene-ripple {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
  user-select: none;
  filter: url(#journalWater);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 22%, #000 34%, #000 80%, rgba(0, 0, 0, 0.55) 92%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, transparent 22%, #000 34%, #000 80%, rgba(0, 0, 0, 0.55) 92%, transparent 100%);
  animation: journal-water-swell 30s ease-in-out infinite;
}
/* a hair of travel so the surface reads as moving water, not morphing texture */
@keyframes journal-water-swell {
  0%,
  100% {
    transform: translate3d(-1.5px, 0, 0);
  }
  50% {
    transform: translate3d(1.5px, 1px, 0);
  }
}
/* the mirrored figure gets a second pass of the same ripple, so its reflection
   moves noticeably more than the open water without changing character */
.journal-scene-ripple-figure {
  -webkit-mask-image: radial-gradient(ellipse 17% 26% at 50.5% 74%, #000 0%, rgba(0, 0, 0, 0.8) 48%, rgba(0, 0, 0, 0.3) 76%, transparent 100%);
  mask-image: radial-gradient(ellipse 17% 26% at 50.5% 74%, #000 0%, rgba(0, 0, 0, 0.8) 48%, rgba(0, 0, 0, 0.3) 76%, transparent 100%);
}

/* undistorted copy punched through only where the dated memory lights sit,
   so the ripple never smears them */
.journal-scene-lights {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image:
    radial-gradient(circle 46px at 3.8% 47.9%, #000 55%, transparent 100%),
    radial-gradient(circle 46px at 10.1% 33.9%, #000 55%, transparent 100%),
    radial-gradient(circle 46px at 23.3% 45.7%, #000 55%, transparent 100%),
    radial-gradient(circle 46px at 29% 31.9%, #000 55%, transparent 100%),
    radial-gradient(circle 46px at 71% 44.4%, #000 55%, transparent 100%),
    radial-gradient(circle 46px at 83.1% 31.5%, #000 55%, transparent 100%),
    radial-gradient(circle 46px at 89.5% 38.8%, #000 55%, transparent 100%),
    radial-gradient(circle 46px at 81.3% 53.5%, #000 55%, transparent 100%),
    radial-gradient(circle 46px at 95.4% 60.9%, #000 55%, transparent 100%);
  mask-image:
    radial-gradient(circle 46px at 3.8% 47.9%, #000 55%, transparent 100%),
    radial-gradient(circle 46px at 10.1% 33.9%, #000 55%, transparent 100%),
    radial-gradient(circle 46px at 23.3% 45.7%, #000 55%, transparent 100%),
    radial-gradient(circle 46px at 29% 31.9%, #000 55%, transparent 100%),
    radial-gradient(circle 46px at 71% 44.4%, #000 55%, transparent 100%),
    radial-gradient(circle 46px at 83.1% 31.5%, #000 55%, transparent 100%),
    radial-gradient(circle 46px at 89.5% 38.8%, #000 55%, transparent 100%),
    radial-gradient(circle 46px at 81.3% 53.5%, #000 55%, transparent 100%),
    radial-gradient(circle 46px at 95.4% 60.9%, #000 55%, transparent 100%);
}
.journal-water-defs {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}
/* memory beacons: each twinkles on its own rhythm, never shifts position */
.journal-beacon {
  position: absolute;
  width: 30px;
  height: 30px;
  transform: translate(-50%, calc(-50% - 4px));
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.42) 28%, rgba(255, 255, 255, 0.12) 52%, rgba(255, 255, 255, 0) 74%);
  filter: blur(2.2px);
  animation-name: journal-beacon-twinkle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes journal-beacon-twinkle {
  0%,
  100% {
    opacity: 0.45;
    transform: translate(-50%, calc(-50% - 4px)) scale(0.94);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, calc(-50% - 4px)) scale(1.12);
  }
}

/* markers cast by the user: glow, ripple rings and date label are separate
   layers, so the date is never baked into the artwork */
.journal-markers {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.journal-marker {
  position: absolute;
  width: 0;
  height: 0;
  animation: journal-marker-arrive 900ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.journal-marker-date {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
  color: rgb(255 255 255 / 50%);
}
.journal-marker-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.42) 28%, rgba(255, 255, 255, 0.12) 52%, rgba(255, 255, 255, 0) 74%);
  filter: blur(2.2px);
  animation: journal-marker-twinkle 3.6s ease-in-out infinite;
}
/* the ripple rings are lifted straight off the painted JUN 29 marker, so a new
   entry reads identically to the ones in the artwork; screen blending drops the
   near-black water the crop carries with it */
.journal-marker-stamp {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 112px;
  height: 42px;
  transform: translate(-50%, calc(-50% + 5px));
  mix-blend-mode: screen;
  background-image: url("https://cdn.builder.io/api/v1/image/assets%2F829e877d75694a02812ee63318590140%2F69dcf0ef6f1e44dfa3ee296acfd2cfed?format=webp&width=1720");
  background-size: 810px 486px;
  background-position: -132.7px -191.6px;
  -webkit-mask-image: radial-gradient(ellipse 50% 52% at 50% 38%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 52% at 50% 38%, #000 40%, transparent 100%);
}
@keyframes journal-marker-arrive {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes journal-marker-twinkle {
  0%,
  100% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(0.94);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.12);
  }
}

/* moonlight bloom: two feathered radial layers breathing out of phase */
.journal-moon-glow,
.journal-moon-halo {
  position: absolute;
  left: 50.6%;
  top: 11%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
}
.journal-moon-glow {
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, rgb(255 255 255 / 82%) 0%, rgb(255 255 255 / 34%) 32%, rgba(255, 255, 255, 0.07) 58%, rgba(255, 255, 255, 0) 76%);
  filter: blur(13px);
  animation: journal-moon-breathe 3.8s ease-in-out infinite;
}
.journal-moon-halo {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.07) 38%, rgba(255, 255, 255, 0) 72%);
  filter: blur(18px);
  animation: journal-moon-bloom 8.6s ease-in-out infinite;
}
@keyframes journal-moon-breathe {
  0%,
  100% {
    opacity: 0.72;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.07);
  }
}
@keyframes journal-moon-bloom {
  0%,
  100% {
    opacity: 0.55;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.85;
    transform: translate(-50%, -50%) scale(1.05);
  }
}
.journal-scene-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: none;
}
.journal-content {
  position: relative;
  z-index: 2;
  padding-top: 150px;
}
.journal-footer-rule,
.journal-footer {
  position: relative;
  z-index: 3;
  margin-left: 26px;
  margin-right: 26px;
}

/* ---- prompt over the water ---- */
.journal-prompt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 92px;
}
.journal-prompt-title {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: rgb(255 255 255 / 92%);
}
.journal-refresh-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: rgb(255 255 255 / 55%);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- glass input: the scene stays visible through it ---- */
.journal-textarea {
  display: block;
  width: 440px;
  max-width: 100%;
  height: 84px;
  margin: 12px auto 0;
  padding: 14px 18px;
  border-radius: 16px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.6;
  color: rgb(255 255 255 / 92%);
  caret-color: rgb(255 255 255 / 92%);
  resize: none;
  outline: none;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.06),
    0 0 28px rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.journal-textarea::placeholder {
  color: rgb(255 255 255 / 46%);
}
.journal-textarea:focus {
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.09),
    0 0 34px rgba(255, 255, 255, 0.12);
}

/* ---- callout + CTAs ---- */
.journal-bottom {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
  z-index: 3;
  gap: 90px;
  margin-top: 18px;
  margin-left: 30px;
  margin-right: 26px;
}
.journal-callout {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
}
.journal-callout-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin-top: 1px;
  fill: none;
  stroke: rgb(255 255 255 / 92%);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.journal-callout-title {
  font-size: 12.5px;
  line-height: 1.5;
  font-weight: 500;
  color: rgb(255 255 255 / 92%);
}
.journal-callout-sub {
  margin-top: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgb(255 255 255 / 45%);
}
.journal-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 4px;
}

/* ---- footer ---- */
.journal-footer-rule {
  height: 1px;
  margin-top: 0;
  margin-left: 32px;
  width: 92%;
  background: rgb(255 255 255 / 7%);
}
.journal-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  margin-bottom: 2px;
  margin-left: 30px;
}
.journal-footer-lock {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: rgb(255 255 255 / 92%);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.journal-footer-text {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgb(255 255 255 / 50%);
}

/* ============ Money Pulse ============
   Shell/header/footer conventions come from the shared systems; everything
   below is widget-local layout. Only the coin stack is an image slot. */
.money-pulse-widget {
  position: absolute;
  z-index: 5;
  width: var(--sq-widget-width);
  height: var(--sq-widget-height);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 22px 26px 20px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6), inset 0 0 60px rgba(255, 255, 255, 0.015);
}
.money-pulse-widget.collapsed .mp-body,
.money-pulse-widget.collapsed .mp-insight,
.money-pulse-widget.collapsed .mp-footer-rule,
.money-pulse-widget.collapsed .mp-footer {
  display: none;
}
.money-pulse-widget.collapsed [data-mp-toggle] svg {
  transform: rotate(-90deg);
}
.mp-sep {
  margin: 0 2px;
}

/* ---- two columns: coded ledger left, coin composition right ---- */
.money-pulse-widget > * {
  flex-shrink: 0;
}
.mp-body {
  display: grid;
  flex: 1;
  min-height: 0;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 26px;
  margin-top: 20px;
}
.mp-left {
  min-width: 0;
  margin-left: 4px;
}
.mp-eyebrow {
  margin-left: 0px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: rgb(255 255 255 / 45%);
}
/* the headline number carries a crisp core plus a diffused bloom */
.mp-amount {
  margin-top: 10px;
  font-size: 64px;
  font-weight: 200;
  line-height: 1;
  letter-spacing: 4px;
  color: #fff;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.6), 0 0 14px rgba(255, 255, 255, 0.35), 0 0 42px rgba(255, 255, 255, 0.22);
}
.mp-amount-symbol {
  margin-right: 6px;
  font-size: 1em;
  color: rgb(255 255 255 / 92%);
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.4), 0 0 12px rgba(255, 255, 255, 0.18);
}
.mp-amount-sub {
  margin-top: 6px;
  font-size: 13px;
  color: rgb(255 255 255 / 60%);
  letter-spacing: 0.05em;
}
.mp-statement {
  margin-top: 16px;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgb(255 255 255 / 92%);
  font-weight: 400;
}
.mp-muted {
  margin-top: 10px;
  font-size: 12.5px;
  color: rgb(255 255 255 / 45%);
  letter-spacing: 0.04em;
}
.mp-rule {
  height: 1px;
  margin-top: 16px;
  background: rgb(255 255 255 / 7%);
}
.mp-section-label {
  margin-top: 12px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: rgb(255 255 255 / 45%);
}
.mp-list {
  /* tune the amount column: width of the € column, width of the date column,
     and a left/right nudge of the whole value block */
  --mp-amount-col: 52px;
  --mp-when-col: 64px;
  --mp-value-shift: 0px;
  /* moves the value block of rows 2-4 right; row 1 stays put */
  --mp-value-shift-rest: 22px;
  margin-top: 2px;
  list-style: none;
}
.mp-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
  border-bottom: 1px solid rgb(255 255 255 / 6%);
}
.mp-row:last-child {
  border-bottom: none;
}
.mp-row-name {
  font-size: 14px;
  color: rgb(255 255 255 / 50%);
}
.mp-row-rent {
  color: rgb(255 255 255 / 92%);
}
.mp-row-value {
  flex-shrink: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 14px;
  color: rgb(255 255 255 / 50%);
  /* shifts the whole amount/date block; negative moves it right */
  margin-right: var(--mp-value-shift);
}
/* fixed-width columns keep every € amount on one vertical line */
.mp-row-amount {
  width: var(--mp-amount-col);
  text-align: right;
}
.mp-row-when {
  width: var(--mp-when-col);
  text-align: left;
}
.mp-row:not(:first-child) .mp-row-value {
  transform: translateX(var(--mp-value-shift-rest));
}
.mp-row-value-rent {
  color: rgb(255 255 255 / 92%);
}
.mp-more {
  margin-top: 6px;
  font-size: 12px;
  color: rgb(255 255 255 / 40%);
}

/* ---- coin composition + coded callouts ---- */
.mp-visual {
  position: relative;
  min-height: 340px;
}
.mp-coins {
  position: absolute;
  left: -30%;
  right: 34%;
  top: 0;
  bottom: 88px;
  pointer-events: none;
  user-select: none;
  width: 128%;
}
.mp-coins-img {
  display: block;
  width: 102%;
  height: 176%;
  object-fit: contain;
  object-position: center bottom;
  pointer-events: none;
  user-select: none;
  transform: translate(22px, -80px);
}
.mp-callouts {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.mp-callout {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  transform: translateY(-50%);
  white-space: nowrap;
}
.mp-callout-right {
  left: 60%;
  right: 0;
}
.mp-callout-left {
  left: -3px;
  width: 30%;
  justify-content: flex-end;
}
.mp-callout-line {
  height: 1px;
  background: rgb(255 255 255 / 32%);
}
.mp-callout-right .mp-callout-line {
  flex-shrink: 0;
  width: 32px;
}
.mp-callout-left .mp-callout-line {
  flex: 0;
  min-width: 32px;
  margin-right: 32px;
  margin-top: 4px;
}
.mp-callout-text {
  font-size: 12px;
  color: rgb(255 255 255 / 45%);
}

/* ---- insight row above the system footer ---- */
.mp-insight {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  margin-left: 2px;
}
.mp-insight-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  fill: none;
  stroke: rgb(255 255 255 / 92%);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mp-insight-text {
  font-size: 14px;
  color: rgb(255 255 255 / 92%);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.mp-insight-sep {
  width: 1px;
  height: 18px;
  background: rgb(255 255 255 / 12%);
}
.mp-insight-ask {
  font-size: 14px;
  color: rgb(255 255 255 / 45%);
  margin-bottom: 8px;
  letter-spacing: 0.03em;
}
.mp-help {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: 8px;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 45%);
  background: transparent;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
  margin-bottom: 5px;
}
.mp-help:hover {
  border-color: rgb(255 255 255 / 34%);
  background: rgb(255 255 255 / 6%);
}
.mp-help svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: rgb(255 255 255 / 92%);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- footer ---- */
.mp-footer-rule {
  height: 1px;
  margin-top: 16px;
  background: rgb(255 255 255 / 7%);
  width: 98%;
  margin-left: 4px;
}
.mp-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  margin-bottom: 0px;
  margin-left: 4px;
}
.mp-footer-lock {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: rgb(255 255 255 / 50%);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mp-footer-text {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgb(255 255 255 / 40%);
}

/* ============ Now Learning ============
   Shell, header, buttons and footer conventions come from the shared systems;
   everything below is widget-local layout. Only the chalkboard stack is an
   image slot — all copy on the left stays coded. */
.now-learning-widget {
  position: absolute;
  z-index: 5;
  width: calc(var(--h-widget-width) / 0.95);
  height: calc(var(--h-widget-height) / 0.95);
  zoom: 0.95;
  max-width: 94vw;
  /* board stack: pinned width, and how far below the body it reaches */
  --nl-boards-width: 470px;
  --nl-boards-bottom: -90px;
  display: flex;
  flex-direction: column;
  padding: 22px 26px 20px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6), inset 0 0 60px rgba(255, 255, 255, 0.015);
}
.now-learning-widget.collapsed .nl-body,
.now-learning-widget.collapsed .nl-footer {
  display: none;
}
.now-learning-widget.collapsed [data-nl-toggle] svg {
  transform: rotate(-90deg);
}
.nl-sep {
  margin: 0 2px;
}
.nl-icon-img {
  width: 130px;
  height: 130px;
  object-fit: contain;
  opacity: 1;
  transform: translate(-45.5px, -42px);
}
.nl-body {
  display: grid;
  grid-template-columns: minmax(0, 442px) minmax(0, 1fr);
  gap: 24px;
  margin-top: 18px;
  /* Rows stay inside the box so the left column scrolls; the board stack
     overhangs the body on purpose and must not be clipped. */
  grid-template-rows: minmax(0, 1fr);
  flex: 1;
  min-height: 0;
}
.nl-left {
  min-width: 0;
  /* Slack inside the clip box so the Continue button glow is not cut off. */
  margin-left: -18px;
  padding-left: 22px;
  margin-top: 11px;
}
.nl-eyebrow {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: rgb(255 255 255 / 60%);
}
.nl-course {
  margin-top: 12px;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.15;
  color: rgb(255 255 255 / 92%);
  text-wrap: nowrap;
}
.nl-progress {
  margin-top: 18px;
  font-size: 12.5px;
  letter-spacing: 0.03em;
  color: rgb(255 255 255 / 55%);
}
.nl-next {
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgb(255 255 255 / 92%);
}
.nl-next-label {
  font-weight: 500;
  color: rgb(255 255 255 / 92%);
  margin-right: 2px;
}
.nl-meta {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: rgb(255 255 255 / 55%);
}
.nl-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
}
.nl-btn {
  font-family: inherit;
  cursor: pointer;
  border-radius: 999px;
  transition: opacity 0.15s ease, background 0.15s ease;
  text-wrap: nowrap;
}
.nl-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  font-size: 12px;
}
/* the reference separator is a thin rule, not a hyphen */
.nl-btn-divider {
  flex-shrink: 0;
  width: 16px;
  height: 1px;
  background: rgba(255, 255, 255, 0.45);
}
.nl-btn-secondary {
  padding: 12px 15px;
  font-size: 12px;
}
.nl-rule {
  height: 1px;
  margin-top: 30px;
  background: rgb(255 255 255 / 15%);
  width: 104%;
}
.nl-list {
  width: 104%;
  list-style: none;
}
.nl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid rgb(255 255 255 / 15%);
}
.nl-row:last-child {
  border-bottom: 1px solid rgb(255 255 255 / 15%);
}
.nl-row-text {
  font-size: 12px;
  color: rgb(255 255 255 / 55%);
}
.nl-row-check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: rgb(255 255 255 / 80%);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nl-insight {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 18px;
}
.nl-insight-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  margin-top: 1px;
  fill: none;
  stroke: rgb(255 255 255 / 92%);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nl-insight-copy {
  min-width: 0;
}
.nl-insight-text {
  font-size: 10.4px;
  line-height: 1.5;
  color: rgb(255 255 255 / 80%);
  text-wrap: nowrap;
  letter-spacing: 0.04em;
}
.nl-insight-ask {
  margin-top: 6px;
  font-size: 10.5px;
  color: rgb(255 255 255 / 50%);
}
.nl-visual {
  position: relative;
  min-height: 340px;
}
.nl-boards {
  position: absolute;
  left: auto;
  right: -20px;
  top: -34px;
  /* width is pinned so the extra reach below is purely vertical */
  width: var(--nl-boards-width);
  bottom: var(--nl-boards-bottom);
  pointer-events: none;
  user-select: none;
}
.nl-boards-img {
  display: block;
  width: 100%;
  height: 100%;
  /* fill (not contain) is what lets the stack gain height without gaining width */
  object-fit: fill;
  object-position: right top;
  pointer-events: none;
  user-select: none;
}
.nl-writing {
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
}
.nl-write {
  position: absolute;
  white-space: nowrap;
  font-family: 'Kalam', 'Segoe Print', 'Bradley Hand', cursive;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: rgb(255 255 255 / 47%);
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.18), 0 0 3px rgba(255, 255, 255, 0.06);
}
.nl-write-back1 {
  left: 18%;
  top: 4%;
  font-size: 18px;
  color: rgb(255 255 255 / 10%);
  transform: rotate(4deg);
}
.nl-write-back2 {
  left: 15.5%;
  top: 12%;
  font-size: 18px;
  color: rgb(255 255 255 / 30%);
  transform: rotate(4deg);
}
.nl-write-chapter {
  right: 14%;
  top: 14.5%;
  font-size: 12px;
  color: rgb(255 255 255 / 10%);
  transform: rotate(3deg);
}
.nl-write-title {
  left: 10.5%;
  top: 22%;
  font-size: 20px;
  transform: rotate(2deg);
  letter-spacing: 0.03em;
}
.nl-write-note {
  left: 11.5%;
  font-size: 14px;
  word-spacing: 0.14em;
  letter-spacing: 0.01em;
  line-height: 1.5;
}
.nl-write-stopped {
  right: 2%;
  top: 62%;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.5);
  font-family: none;
}
/* The dot marks where the chalk writing broke off; the leader line slants down
   from it to the caption. */
.nl-stop-dot {
  position: absolute;
  left: -2px;
  top: -24px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.55);
}
.nl-stop-divider {
  position: absolute;
  left: 2px;
  top: -20px;
  width: 20px;
  height: 1px;
  background: rgba(255, 255, 255, 0.32);
  transform: rotate(42deg);
  transform-origin: left center;
}
.nl-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  margin-bottom: 0;
  margin-left: 4px;
}
.nl-footer-lock {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: rgb(255 255 255 / 50%);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nl-footer-text {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgb(255 255 255 / 40%);
}

/* ============ Important Dates ============
   Shell, header, buttons and footer conventions come from the shared systems;
   everything below is widget-local layout. Only the graduation cap artwork is
   an image slot — countdown, icons, rows and input are coded. */
.important-dates-widget {
  position: absolute;
  z-index: 5;
  width: var(--sq-widget-width);
  height: var(--sq-widget-height);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 22px 26px 20px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6), inset 0 0 60px rgba(255, 255, 255, 0.015);
}
.important-dates-widget.collapsed .id-body,
.important-dates-widget.collapsed .id-footer {
  display: none;
}
.important-dates-widget.collapsed [data-id-toggle] svg {
  transform: rotate(-90deg);
}
.id-sep {
  margin: 0 2px;
}
.id-icon-img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  transform: translate(0.5px, 0px);
}
.id-sep-3 {
  margin-right: 2px;
}
.id-row-date-aug20 {
  margin-right: -6px;
}
.important-dates-widget > * {
  flex-shrink: 0;
}
.id-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin-top: 18px;
}
.id-body > * {
  flex: none;
}
.id-body > .id-lower {
  flex: 1;
  min-height: 0;
}
.id-upcoming {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.id-feature {
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 16px 24px;
  border-radius: 16px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.012) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 50px rgba(255, 255, 255, 0.022);
  overflow: hidden;
}
.id-countdown {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 74px;
}
.id-countdown-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: rgb(255 255 255 / 92%);
}
.id-countdown-days {
  font-size: 14px;
}
/* the bloom is layered: crisp core, mid halo, wide diffuse falloff */
.id-countdown-number {
  font-size: 90px;
  font-weight: 350;
  line-height: 1.05;
  color: #fffdf8;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.75), 0 0 12px rgba(255, 252, 242, 0.5), 0 0 34px rgba(255, 250, 236, 0.32), 0 0 68px rgba(255, 248, 230, 0.18);
  margin-top: -10px;
}
.id-feature-divider {
  flex-shrink: 0;
  width: 1px;
  align-self: stretch;
  background: rgb(255 255 255 / 30%);
}
.id-feature-content {
  position: relative;
  z-index: 2;
  min-width: 0;
  flex: 1;
  margin-left: 2px;
}
.id-feature-icon {
  display: block;
  width: 22px;
  height: 22px;
  margin-bottom: 4px;
}
.id-feature-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: rgb(255 255 255 / 92%);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.id-feature-title {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.15;
  color: rgb(255 255 255 / 96%);
  margin-left: 2px;
}
.id-feature-sub {
  margin-top: 7px;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: rgb(255 255 255 / 60%);
}
.id-feature-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}
.id-btn {
  font-family: inherit;
  cursor: pointer;
  border-radius: 999px;
  transition: opacity 0.15s ease, background 0.15s ease;
  text-wrap: nowrap;
}
.id-btn-primary {
  padding: 10px 20px;
  font-size: 12.5px;
}
.id-btn-secondary {
  padding: 10px 18px;
  font-size: 12.5px;
}
/* image slot: cap + light ribbon + sparkles only */
.id-feature-art {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 46%;
  pointer-events: none;
  user-select: none;
}
.id-feature-art-img {
  display: block;
  width: 94%;
  height: 110%;
  object-fit: contain;
  object-position: right center;
  pointer-events: none;
  user-select: none;
}
.id-lower {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 290px);
  gap: 26px;
  margin-top: 14px;
  margin-left: 4px;
}
.id-section-label {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: rgb(255 255 255 / 55%);
  margin-left: 4px;
}
.id-list {
  flex: 1;
  min-height: 0;
  margin-top: 12px;
  list-style: none;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  overscroll-behavior: contain;
}
.id-list::-webkit-scrollbar {
  width: 6px;
}
.id-list::-webkit-scrollbar-thumb {
  background: rgb(255 255 255 / 10%);
  border-radius: 999px;
}
.id-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 12px;
  border-radius: 12px;
}
.id-row-sep {
  padding: 0 12px;
}
.id-row-line {
  height: 1px;
  background: rgb(255 255 255 / 5%);
  width: 89%;
  margin-left: 45px;
}
.id-row-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 40%);
  background: transparent;
}
.id-row-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: rgb(255 255 255 / 92%);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.id-row-main {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  flex: 1;
  min-width: 0;
}
.id-row-title {
  font-size: 13.5px;
  color: rgb(255 255 255 / 92%);
}
.id-row-sub {
  font-size: 12px;
  color: rgb(255 255 255 / 60%);
}
.id-row-date {
  flex-shrink: 0;
  width: 54px;
  text-align: right;
  font-size: 12.5px;
  color: rgb(255 255 255 / 82%);
}
.id-row-when {
  flex-shrink: 0;
  width: 78px;
  text-align: right;
  font-size: 12px;
  color: rgb(255 255 255 / 60%);
}
/* selected row: lifted by a soft internal bloom rather than a bright fill */
.id-row-active {
  border-bottom-color: transparent;
  border: 1px solid rgb(255 255 255 / 14%);
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.022) 55%, rgba(255, 255, 255, 0.01) 100%);
  box-shadow: inset 0 0 26px rgba(255, 255, 255, 0.05), 0 6px 22px rgba(0, 0, 0, 0.35);
}
.id-row-active .id-row-icon {
  border-color: rgb(255 255 255 / 80%);
  background: transparent;
}
.id-row-active .id-row-icon svg {
  stroke: rgb(255 255 255 / 92%);
  width: 20px;
  height: 20px;
}
.id-row-active .id-row-title {
  color: #fff;
}
.id-row-icon-star svg,
.id-row-active .id-row-icon-star svg {
  width: 24px;
  height: 24px;
  transform: translate(0, 2px);
}
.id-input {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 16px;
  border-radius: 999px;
  margin-top: 21px;
  border: 1px solid rgb(255 255 255 / 30%);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.05), inset 0 0 14px rgba(255, 255, 255, 0.03);
  background: rgb(255 255 255 / 5%);
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.id-input:focus-within {
  border-color: rgb(255 255 255 / 86%);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05), 0 0 24px rgba(255, 255, 255, 0.12);
}
.id-input-plus {
  flex-shrink: 0;
  display: block;
  width: 20px;
  height: 20px;
  margin-left: -4px;
}
.id-input-plus svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: rgb(255 255 255 / 92%);
  stroke-width: 1.4;
  stroke-linecap: round;
}
.id-input-field {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 12.5px;
  color: rgb(255 255 255 / 92%);
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  margin-top: 1px;
  caret-color: rgb(255 255 255 / 80%);
}
.id-input-field::placeholder {
  color: rgb(255 255 255 / 42%);
}
.id-input-hint {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  margin-left: auto;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgb(255 255 255 / 50%);
  margin-top: 0px;
}
.id-input-hint-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  margin: -7px -10px -6px 0;
}
.id-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 30px;
}
.id-note-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  margin-top: 0px;
  fill: none;
  stroke: rgb(255 255 255 / 92%);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.id-note-copy {
  min-width: 0;
}
.id-note-text {
  font-size: 12.5px;
  line-height: 1.55;
  color: rgb(255 255 255 / 60%);
}
.id-note-ask {
  margin-top: 10px;
  font-size: 12px;
  color: rgb(255 255 255 / 50%);
}
.id-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  margin-left: 4px;
}
.id-footer-lock {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: rgb(255 255 255 / 45%);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.id-footer-text {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgb(255 255 255 / 40%);
}
.id-btn-active {
  border-color: rgb(255 255 255 / 80%);
  background: rgb(255 255 255 / 12%);
  color: #fff;
}
.id-plan {
  margin: 14px 4px 0;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgb(255 255 255 / 30%);
  background: rgb(255 255 255 / 5%);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.05), inset 0 0 14px rgba(255, 255, 255, 0.03);
}
.id-plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.id-plan-label {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: rgb(255 255 255 / 55%);
}
.id-plan-close {
  flex-shrink: 0;
  display: flex;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.id-plan-close svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: rgb(255 255 255 / 60%);
  stroke-width: 1.4;
  stroke-linecap: round;
}
.id-plan-close:hover svg {
  stroke: rgb(255 255 255 / 92%);
}
.id-plan-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.id-plan-option {
  font-family: inherit;
  font-size: 12.5px;
  color: rgb(255 255 255 / 82%);
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 24%);
  background: transparent;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.id-plan-option:hover {
  transform: translateY(-1px);
  border-color: rgb(255 255 255 / 55%);
  background: rgb(255 255 255 / 8%);
}
.id-plan-option-picked {
  border-color: rgb(255 255 255 / 80%);
  background: rgb(255 255 255 / 12%);
  color: #fff;
}
.id-plan-clear {
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgb(255 255 255 / 45%);
  margin-top: 12px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.id-plan-clear:hover {
  color: rgb(255 255 255 / 75%);
}
.id-row-new {
  animation: idRowIn 0.35s ease both;
}
@keyframes idRowIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.id-input-shake {
  animation: idShake 0.35s ease;
}
@keyframes idShake {
  20% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(4px);
  }
  80% {
    transform: translateX(-2px);
  }
}

/* ============ Neura Feed ============
   Shell, header, primary button and footer conventions come from the shared
   systems; everything below is widget-local layout. Only the left particle
   shore scene is an image slot — message, buttons, rows, insight are coded. */
.neura-feed-widget {
  position: absolute;
  z-index: 5;
  width: var(--sq-widget-width);
  height: var(--sq-widget-height);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 22px 26px 20px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6), inset 0 0 60px rgba(255, 255, 255, 0.015);
}
.neura-feed-widget.collapsed .nf-body,
.neura-feed-widget.collapsed .nf-rule,
.neura-feed-widget.collapsed .nf-insight,
.neura-feed-widget.collapsed .nf-footer {
  display: none;
}
.neura-feed-widget.collapsed [data-nf-toggle] svg {
  transform: rotate(-90deg);
}
.nf-sep {
  margin: 0 4px;
}
.nf-icon-img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  user-select: none;
  transform: translate(-16px, -15px);
}
.neura-feed-widget > * {
  flex-shrink: 0;
}
.nf-body {
  display: grid;
  flex: 1;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 344px);
  gap: 30px;
  margin-top: 16px;
}
/* flush to the widget's left inner edge, starting under the header and
   running down to the divider — the widget's own radius does the clipping */
.nf-scene {
  position: relative;
  min-height: 302px;
  margin: -80px -79px -15px -43px;
  overflow: hidden;
}
.nf-scene-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  pointer-events: none;
  user-select: none;
  transform: translate(-7px, 32px);
  /* feathered on all four sides so the asset dissolves into the widget
     instead of ending on a visible photo edge */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 9%, #000 58%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 15%, #000 78%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0%, #000 17%, #000 76%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 75%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* the sea cut-out. Two nested wrappers so the 9s swash and the 14s swell
   never line up and no two waves reach the same distance. */
.nf-wave,
.nf-wave-swell {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
}
.nf-wave {
  animation: nf-swash 9s ease-in-out infinite;
}
.nf-wave-swell {
  animation: nf-swell 14s ease-in-out infinite;
}
/* same geometry as the base photo so the cut-out lands back on its own pixels */
.nf-wave-img {
  position: absolute;
  inset: 0;
  width: 106%;
  height: 80%;
  object-fit: cover;
  object-position: left center;
  pointer-events: none;
  user-select: none;
  transform: translate(-21px, 58px);
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 9%, #000 58%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 15%, #000 78%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0%, #000 9%, #000 90%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 15%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* the sea and its foam line: the only part carrying the water displacement.
   The two stops below are the boundary — move them to shift where the ripple
   stops. */
.nf-wave-water {
  filter: url(#nfWater);
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 9%, #000 58%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 15%, #000 78%, transparent 100%),
    linear-gradient(207deg, #000 0%, #000 44%, transparent 55%);
  mask-image:
    linear-gradient(to right, transparent 0%, #000 9%, #000 90%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 15%, #000 78%, transparent 100%),
    linear-gradient(207deg, #000 0%, #000 44%, transparent 55%);
}
/* the row of sparks that runs ahead of the wave onto the sand — held still */
.nf-wave-sparks {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 9%, #000 58%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 15%, #000 78%, transparent 100%),
    linear-gradient(207deg, transparent 0%, transparent 44%, #000 55%);
  mask-image:
    linear-gradient(to right, transparent 0%, #000 9%, #000 90%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 15%, #000 78%, transparent 100%),
    linear-gradient(207deg, transparent 0%, transparent 44%, #000 55%);
}
/* one continuous swash up the beach and back, no speed breaks */
@keyframes nf-swash {
  0%,
  100% {
    transform: translate3d(6px, -24px, 0);
  }
  50% {
    transform: translate3d(-3px, 10px, 0);
  }
}
@keyframes nf-swell {
  0%,
  100% {
    transform: translate3d(1px, -3px, 0);
  }
  50% {
    transform: translate3d(-1px, 3px, 0);
  }
}
.nf-main {
  display: flex;
  flex-direction: column;
  padding-top: 68px;
  margin-left: 6px;
}
.nf-message {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.005em;
  color: rgb(255 255 255 / 92%);
  text-shadow: 0 0 26px rgb(255 255 255 / 39%);
}
.nf-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
}
.nf-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 12.5px;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  text-wrap: nowrap;
  transition: opacity 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.nf-btn svg {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* dimmer sibling of the shared primary pill — same radius and glow language,
   lower intensity, so the pair reads as one system */
.nf-btn-secondary {
  font-weight: 500;
  color: rgb(255 255 255 / 72%);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.1), inset 0 0 8px rgba(255, 255, 255, 0.05);
}
.nf-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.16), inset 0 0 10px rgba(255, 255, 255, 0.08);
}
.nf-feed {
  margin-top: 26px;
  list-style: none;
}
.nf-feed-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
}
.nf-feed-time {
  flex-shrink: 0;
  width: 38px;
  font-size: 12px;
  color: rgb(255 255 255 / 45%);
}
.nf-feed-dot {
  flex-shrink: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgb(255 255 255 / 92%);
  margin-left: -6px;
  margin-top: 4px;
}
.nf-feed-text {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: rgb(255 255 255 / 62%);
  margin-left: 8px;
  margin-top: 4px;
}
.nf-feed-line {
  height: 1px;
  background: rgb(255 255 255 / 5%);
}
.nf-mute {
  flex-shrink: 0;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  color: rgb(255 255 255 / 70%);
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 18%);
  background: transparent;
  cursor: pointer;
  transition: opacity 0.15s ease;
  margin-right: 20px;
}
.nf-mute:hover {
  opacity: 0.8;
}
.nf-rule {
  height: 1px;
  margin: 18px -26px 0;
  background: rgb(255 255 255 / 6%);
}
.nf-insight {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 9px;
  margin-top: 18px;
  margin-right: 70px;
}
.nf-insight-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: rgb(255 255 255 / 92%);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nf-insight-count {
  font-size: 12.5px;
  color: rgb(255 255 255 / 50%);
  margin-top: 2px;
}
.nf-insight-text {
  font-size: 12.5px;
  color: rgb(255 255 255 / 50%);
  margin-top: 2px;
}
.nf-footer {
  display: flex;
  justify-content: center;
  margin-top: 16px;
  margin-right: 40px;
}
.nf-footer-text {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgb(255 255 255 / 40%);
}

/* ============ Focus Trainer ============
   Shell, header and footer language come from the shared systems; everything
   below is widget-local. The trainer stage is coded SVG — curve, orb,
   connector and handle — so nothing in it is an image. */
.focus-trainer-widget {
  position: absolute;
  z-index: 5;
  zoom: 0.9;
  width: calc(var(--sq-widget-width) / 0.9);
  height: calc(var(--sq-widget-height) / 0.9);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 22px 26px 18px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6), inset 0 0 60px rgba(255, 255, 255, 0.015);
}
.focus-trainer-widget.collapsed .ft-body,
.focus-trainer-widget.collapsed .ft-footer {
  display: none;
}
.focus-trainer-widget.collapsed [data-ft-toggle] svg {
  transform: rotate(-90deg);
}
.ft-icon-pupil {
  fill: #fff;
}
.ft-status-dot {
  background: rgb(255 255 255 / 92%);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.35);
}
.ft-head-actions {
  gap: 8px;
}
.ft-round-label {
  margin-right: 6px;
  font-size: 12.5px;
  color: rgb(255 255 255 / 45%);
  white-space: nowrap;
}
.ft-sep {
  margin: 0 4px;
}
.ft-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-height: 0;
  margin-top: 24px;
}
.focus-trainer-widget > * {
  flex-shrink: 0;
}
.focus-trainer-widget > .ft-body {
  flex-shrink: 1;
}
.ft-instruction {
  font-size: 13px;
  font-weight: 500;
  color: rgb(255 255 255);
  text-align: center;
}
.ft-stage {
  width: 83%;
  margin-top: -20px;
}
.ft-canvas {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  touch-action: none;
}
.ft-curve-haze {
  fill: none;
  stroke: rgb(255 255 255 / 22%);
  stroke-width: 9;
  stroke-linecap: round;
}
.ft-curve-mid {
  fill: none;
  stroke: rgb(255 255 255 / 30%);
  stroke-width: 3;
  stroke-linecap: round;
}
.ft-curve-core {
  fill: none;
  stroke: rgb(255 255 255 / 78%);
  stroke-width: 1.1;
  stroke-linecap: round;
}
.ft-orb-core {
  fill: #fff;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.9));
}
.ft-orb-halo {
  transform-box: fill-box;
  transform-origin: center;
  animation: ft-halo-breathe 4.5s ease-in-out infinite;
}
@keyframes ft-halo-breathe {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.14);
    opacity: 1;
  }
}
.ft-link {
  stroke: rgb(255 255 255);
  stroke-width: 0.9;
  stroke-linecap: round;
}
.ft-ring {
  fill: none;
  stroke: rgb(255 255 255);
  stroke-width: 1;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.35));
}
/* invisible, generously sized grab target riding on the ring */
.ft-grip {
  fill: transparent;
  cursor: grab;
  touch-action: none;
}
.ft-dragging .ft-grip {
  cursor: grabbing;
}
.ft-dragging .ft-ring {
  stroke: rgb(255 255 255 / 95%);
  filter: drop-shadow(0 0 9px rgba(255, 255, 255, 0.5));
}
.ft-orb {
  transition: opacity 320ms ease;
}
.focus-trainer-widget.is-drifting .ft-orb {
  opacity: 0.58;
}
.focus-trainer-widget.is-idle .ft-orb {
  opacity: 0.78;
}
.ft-readout {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -15px;
}
.ft-state {
  font-size: 21px;
  font-weight: 400;
  color: rgb(255 255 255 / 92%);
}
.ft-state-note {
  margin-top: 5px;
  font-size: 12px;
  color: rgb(255 255 255 / 60%);
}
.ft-timer {
  margin-top: -10px;
  font-size: 78px;
  font-weight: 200;
  letter-spacing: 0.04em;
  color: rgb(255 255 255 / 75%);
  text-shadow: none;
}
.ft-timer-note {
  margin-top: -5px;
  font-size: 12.5px;
  color: rgb(255 255 255 / 60%);
}
.ft-rounds {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-top: 14px;
}
.ft-round {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 92%);
}
.ft-round.is-done {
  background: rgb(255 255 255 / 90%);
  border-color: transparent;
}
.ft-round.is-current {
  background: #fff;
  border-color: transparent;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.85);
}
.ft-meta {
  margin-top: 12px;
  font-size: 12px;
  color: rgb(255 255 255 / 50%);
}
.ft-support {
  margin-top: 14px;
  font-size: 14px;
  font-weight: 400;
  color: rgb(255 255 255 / 92%);
  text-align: center;
}
.ft-nudge {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 400;
  color: rgb(255 255 255 / 92%);
}
.ft-nudge-text {
  margin-top: 1px;
}
.ft-nudge-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  fill: none;
  stroke: rgb(255 255 255);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ft-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
}
.ft-footer-left,
.ft-footer-center {
  font-size: 13px;
  letter-spacing: 0em;
  color: rgb(255 255 255 / 50%);
}
.ft-footer-center {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-right: 0px;
}
.ft-lock {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============ Stress Signal ============
   The rope is the only image in this widget; the lead block, the callout
   labels and their leader lines, the action row and the footer are coded.
   The rope is a single still image with nothing layered over it. */
.stress-signal-widget {
  position: absolute;
  z-index: 5;
  zoom: 0.9;
  width: calc(var(--h-widget-width) / 0.9);
  height: calc(var(--h-widget-height) / 0.9);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 22px 26px 18px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6), inset 0 0 60px rgba(255, 255, 255, 0.015);
}
.stress-signal-widget > * {
  flex-shrink: 0;
}
.stress-signal-widget .ss-body {
  flex: 1;
  min-height: 0;
}
.stress-signal-widget .ss-body > * {
  flex-shrink: 0;
}
.stress-signal-widget.collapsed .ss-body,
.stress-signal-widget.collapsed .ss-footer {
  display: none;
}
.stress-signal-widget.collapsed [data-ss-toggle] svg {
  transform: rotate(-90deg);
}
.ss-head-left {
  align-items: flex-start;
}
.ss-icon svg {
  stroke-width: 1.2;
}
.ss-icon-img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  user-select: none;
  transform: translate(-6px, -5px);
}
.ss-head-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.ss-title-row {
  display: flex;
  align-items: center;
  gap: 9px;
}
.ss-title {
  font-size: 18px;
  font-weight: 400;
}
.ss-status-dot {
  width: 6px;
  height: 6px;
  background: rgb(255 255 255 / 55%);
  box-shadow: none;
}
.ss-subtitle {
  font-size: 12px;
  color: rgb(255 255 255 / 42%);
}
.ss-sep {
  margin: 0 0px;
}
.ss-head-actions {
  align-self: flex-start;
}
.ss-body {
  display: flex;
  flex-direction: column;
  margin-top: 26px;
  margin-left: 4px;
}
.ss-state {
  font-size: 48px;
  font-weight: 200;
  letter-spacing: 0.04em;
  color: rgb(255 255 255 / 90%);
}
.ss-duration {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 500;
  color: rgb(255 255 255 / 92%);
}
.ss-source {
  margin-top: 7px;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: rgb(255 255 255 / 45%);
}
.ss-rope-stage {
  position: relative;
  height: 200px;
  /* full bleed: the rope runs edge to edge and the card clips it */
  margin: -6px -26px 0;
  pointer-events: none;
  user-select: none;
}
.ss-rope-base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 200%;
  object-fit: fill;
  object-position: center;
  pointer-events: none;
  user-select: none;
  transform: translate(0px, -60px);
  /* every copy shares one un-delayed cycle, so the whole strand brightens and
     dims as a single body of light rather than in patches */
  animation: ss-glow-breathe 6.5s ease-in-out infinite;
}
@keyframes ss-glow-breathe {
  0%,
  100% {
    filter: brightness(0.7) saturate(0.85) contrast(1.06);
    opacity: 0.8;
  }
  50% {
    filter: brightness(1.55) saturate(1.22) contrast(0.95);
    opacity: 1;
  }
}
/* Each copy is cut to one stretch of the rope. The two hard cuts fall inside
   the band where the knot copy is fully opaque, so no seam is ever visible and
   the coverage never doubles up. The mask sits on the image rather than on the
   wrapper, otherwise the part of the rope that hangs below the stage would be
   masked away with it. */
.ss-rope-clip {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* every copy carries the identical knot motion, so the strips stay welded
     while the knot itself drifts; the bones bend on top of this */
  transform-origin: 54% 57%;
  animation: ss-knot-breathe 8s ease-in-out infinite;
  will-change: transform;
}
@keyframes ss-knot-breathe {
  0%,
  100% {
    transform: translate(-1.2px, -1.6px) rotate(-0.35deg);
  }
  50% {
    transform: translate(1.2px, 1.6px) rotate(0.35deg);
  }
}
/* the two right-hand strips together cover exactly what the single right copy
   used to draw: the feather into the knot stays where it was, and the second
   cut falls on the outer joint, which its own pivot holds still. */
.ss-rope-right .ss-strip-r-inner {
  -webkit-mask-image: linear-gradient(to right, transparent 49%, #000 64%, #000 76%, transparent 80.5%);
  mask-image: linear-gradient(to right, transparent 49%, #000 64%, #000 76%, transparent 80.5%);
}
.ss-rope-right .ss-strip-r-tip {
  -webkit-mask-image: linear-gradient(to right, transparent 74.5%, #000 79%, #000 100%);
  mask-image: linear-gradient(to right, transparent 74.5%, #000 79%, #000 100%);
}
.ss-rope-knot .ss-rope-base {
  -webkit-mask-image: linear-gradient(to right, transparent 40%, #000 50%, #000 58%, transparent 68%);
  mask-image: linear-gradient(to right, transparent 40%, #000 50%, #000 58%, transparent 68%);
}
/* Each bone turns about the joint it hangs from, and every bone shows only the
   run of rope between its own joint and the next one out. Because the joint
   point itself never moves, the strips stay welded together while the rope
   bends. The three durations are coprime enough that the curve never repeats. */
.ss-bone {
  position: absolute;
  inset: 0;
  will-change: transform;
}
/* the y of each origin sits on the rope, not on the middle of the box: a pivot
   off the strand would swing the joint itself and split the rope open */
.ss-bone-inner {
  transform-origin: 52% 58%;
  animation: ss-bone-turn-inner 9s ease-in-out infinite;
}
.ss-bone-mid {
  transform-origin: 34% 70%;
  animation: ss-bone-turn-mid 11s ease-in-out infinite;
  animation-delay: -3s;
}
.ss-bone-tip {
  transform-origin: 17% 76%;
  animation: ss-bone-turn-tip 13s ease-in-out infinite;
  animation-delay: -6s;
}
.ss-bone-r-inner {
  transform-origin: 58% 56%;
  animation: ss-bone-turn-r-inner 9s ease-in-out infinite;
  animation-delay: -2s;
}
.ss-bone-r-tip {
  transform-origin: 78% 63%;
  /* the swing and the tail's own halo run as two cycles on the same element:
     the glow keeps the breath timing of the strand, the swing keeps its own */
  animation:
    ss-bone-turn-r-tip 11s ease-in-out infinite -5s,
    ss-tail-glow 6.5s ease-in-out infinite;
}
/* the tail is painted much darker than the knot, so a halo on its own only
   reads as a gold rim. Lifting the strand itself first and desaturating pulls
   it up to the knot's white-hot core, and the halo then sits around light. */
@keyframes ss-tail-glow {
  0%,
  100% {
    filter: brightness(1.75) saturate(0.72) drop-shadow(0 0 6px rgb(255 246 232 / 40%));
  }
  50% {
    filter: brightness(2.5) saturate(0.62) drop-shadow(0 0 14px rgb(255 250 242 / 72%)) drop-shadow(0 0 32px rgb(255 240 220 / 42%));
  }
}
/* Exactly one bone draws any given stretch of rope. The strand is a cut-out, so
   overlapping bones would stack into a thick glowing braid instead of hiding
   each other. The cuts land on the joints, which the pivots hold still. */
.ss-strip-inner {
  -webkit-mask-image: linear-gradient(to right, transparent 32.5%, #000 35.5%, #000 50%, transparent 56%);
  mask-image: linear-gradient(to right, transparent 32.5%, #000 35.5%, #000 50%, transparent 56%);
}
.ss-strip-mid {
  -webkit-mask-image: linear-gradient(to right, transparent 15.5%, #000 18.5%, #000 32.5%, transparent 35.5%);
  mask-image: linear-gradient(to right, transparent 15.5%, #000 18.5%, #000 32.5%, transparent 35.5%);
}
.ss-strip-tip {
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 15.5%, transparent 18.5%);
  mask-image: linear-gradient(to right, #000 0%, #000 15.5%, transparent 18.5%);
}
/* the travelling light: the copy is only additive, so where the window is not
   over it nothing is drawn and the rope underneath is untouched */
.ss-rope-pulse {
  mix-blend-mode: screen;
  z-index: 2;
}
/* Two mask layers per strip, intersected: the sliding window says where the
   light is, the segment gradient says which stretch of rope this bone owns.
   Every strip runs the identical window animation, so the light stays one
   continuous travelling spot as it crosses from one bone to the next. */
.ss-rope-pulse {
  --ss-pulse-window: linear-gradient(to right, transparent 0%, #000 45%, #000 55%, transparent 100%);
}
.ss-pulse-strip {
  filter: brightness(2.3) saturate(0.55);
  -webkit-mask-size: 22% 100%, 100% 100%;
  mask-size: 22% 100%, 100% 100%;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  animation: ss-pulse-travel 7s linear infinite;
}
.ss-pulse-inner {
  -webkit-mask-image: var(--ss-pulse-window), linear-gradient(to right, transparent 32.5%, #000 35.5%, #000 50%, transparent 56%);
  mask-image: var(--ss-pulse-window), linear-gradient(to right, transparent 32.5%, #000 35.5%, #000 50%, transparent 56%);
}
.ss-pulse-mid {
  -webkit-mask-image: var(--ss-pulse-window), linear-gradient(to right, transparent 15.5%, #000 18.5%, #000 32.5%, transparent 35.5%);
  mask-image: var(--ss-pulse-window), linear-gradient(to right, transparent 15.5%, #000 18.5%, #000 32.5%, transparent 35.5%);
}
.ss-pulse-tip {
  -webkit-mask-image: var(--ss-pulse-window), linear-gradient(to right, #000 0%, #000 15.5%, transparent 18.5%);
  mask-image: var(--ss-pulse-window), linear-gradient(to right, #000 0%, #000 15.5%, transparent 18.5%);
}
.ss-pulse-r-inner {
  -webkit-mask-image: var(--ss-pulse-window), linear-gradient(to right, transparent 49%, #000 64%, #000 76%, transparent 80.5%);
  mask-image: var(--ss-pulse-window), linear-gradient(to right, transparent 49%, #000 64%, #000 76%, transparent 80.5%);
}
.ss-pulse-r-tip {
  -webkit-mask-image: var(--ss-pulse-window), linear-gradient(to right, transparent 74.5%, #000 79%, #000 100%);
  mask-image: var(--ss-pulse-window), linear-gradient(to right, transparent 74.5%, #000 79%, #000 100%);
}
@keyframes ss-pulse-travel {
  from {
    -webkit-mask-position: -25% 0, 0 0;
    mask-position: -25% 0, 0 0;
  }
  to {
    -webkit-mask-position: 125% 0, 0 0;
    mask-position: 125% 0, 0 0;
  }
}
@keyframes ss-bone-turn-inner {
  0%,
  100% {
    transform: rotate(-2.8deg);
  }
  50% {
    transform: rotate(2.9deg);
  }
}
@keyframes ss-bone-turn-mid {
  0%,
  100% {
    transform: rotate(3.8deg);
  }
  50% {
    transform: rotate(-3.9deg);
  }
}
@keyframes ss-bone-turn-tip {
  0%,
  100% {
    transform: rotate(-4.7deg);
  }
  50% {
    transform: rotate(4.8deg);
  }
}
@keyframes ss-bone-turn-r-inner {
  0%,
  100% {
    transform: rotate(3.6deg);
  }
  50% {
    transform: rotate(-3.7deg);
  }
}
@keyframes ss-bone-turn-r-tip {
  0%,
  100% {
    transform: rotate(-4.7deg);
  }
  50% {
    transform: rotate(4.8deg);
  }
}
.ss-leaders {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ss-leader {
  fill: none;
  stroke: rgb(255 255 255 / 40%);
  stroke-width: 0.8;
  stroke-linecap: round;
}
.ss-anchor {
  fill: rgb(255 255 255 / 40%);
  transform: translate(-110px, 1px);
}
.ss-anchor-held {
  transform: translate(195px, 14px);
}
.ss-anchor-onset {
  transform: translate(454px, -73px);
}
.ss-anchor-cause {
  transform: translate(612px, -42px);
}
.ss-anchor-relief {
  transform: translate(755px, -26px);
}
.ss-leader-slack {
  transform: translate(-372px, 16px);
}
.ss-leader-held {
  transform: translate(-68px, 25px);
}
.ss-leader-onset {
  transform: translate(191px, -62px);
}
.ss-leader-cause {
  transform: translate(350px, -29px);
}
.ss-leader-relief {
  transform: translate(491px, -12px);
}
.ss-label {
  position: absolute;
  font-size: 12px;
  line-height: 1.45;
  color: rgb(255 255 255 / 40%);
  white-space: nowrap;
}
.ss-label-slack {
  left: 4%;
  top: 28%;
}
.ss-label-held {
  left: 30%;
  top: 25%;
}
.ss-label-onset {
  left: 48%;
  top: -11%;
}
.ss-label-cause {
  left: 62%;
  top: 2%;
}
.ss-label-relief {
  left: 77%;
  top: 6%;
}
.ss-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: -8px;
}
.ss-actions .ss-sep {
  margin: 0 10px;
}
.ss-action {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  transition: color 200ms ease;
}
.ss-action-primary {
  color: rgb(255 255 255 / 92%);
}
.ss-action-secondary {
  color: rgb(255 255 255 / 78%);
}
.ss-action-muted {
  color: rgb(255 255 255 / 34%);
}
.ss-action:hover {
  color: #fff;
}
.ss-support {
  margin-top: 16px;
  font-size: 14px;
  color: rgb(255 255 255 / 82%);
}
.ss-nudge {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 16px;
  font-size: 14px;
  color: rgb(255 255 255 / 82%);
}
.ss-nudge-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  fill: none;
  stroke: rgb(255 255 255 / 92%);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ss-nudge-text {
  margin-top: 4px;
}
.ss-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  margin-left: 4px;
}
.ss-lock {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: rgb(255 255 255 / 60%);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ss-footer-text {
  font-size: 12px;
  letter-spacing: 0.01em;
  color: rgb(255 255 255 / 34%);
}

/* ============ Estimate Check ============
   No image anywhere: each estimate is a thin numeral sitting on its own
   blurred elliptical halo. Every cluster is placed by hand so the field reads
   as scattered light rather than a table, and each one only overrides the glow
   variables it needs. */
.estimate-check-widget {
  position: absolute;
  z-index: 5;
  zoom: 0.9;
  width: calc(var(--h-widget-width) / 0.9);
  height: calc(var(--h-widget-height) / 0.9);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 22px 26px 18px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.6),
    inset 0 0 60px rgba(255, 255, 255, 0.015);
}
.estimate-check-widget.collapsed .ec-body,
.estimate-check-widget.collapsed .ec-bottom {
  display: none;
}
.estimate-check-widget.collapsed [data-ec-toggle] svg {
  transform: rotate(-90deg);
}
.ec-icon-digit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: var(--text-primary);
}
.ec-title {
  font-size: 18px;
  font-weight: 400;
}
.ec-title-row {
  display: flex;
  align-items: center;
  gap: 9px;
}
.ec-status-dot {
  width: 6px;
  height: 6px;
  background: rgb(255 255 255 / 55%);
  box-shadow: none;
}
.ec-sep {
  margin: 0 2px;
  color: rgb(255 255 255 / 40%);
}
/* The body reaches up over the header for halo room, so the header has to sit
   above it to stay clickable. */
.ec-header {
  position: relative;
  z-index: 3;
}
.ec-body {
  display: flex;
  flex-direction: column;
  /* The clip box is pushed out past the card on every side, so the glow halos
     are never cut into a hard-edged box — the card does the clipping. */
  margin: -86px -26px 0;
  padding: 100px 26px 40px;
}
.ec-body > * {
  flex-shrink: 0;
}
.ec-field {
  position: relative;
  height: 356px;
}
/* one cluster = halo, numeral, copy. The halo is centred on the numeral only,
   never on the copy, so labels stay legible instead of washing out. */
.ec-cluster {
  --halo-size: 200px;
  --halo-opacity: 32%;
  --halo-blur: 26px;
  --number-size: 46px;
  --number-glow: 16px;
  position: absolute;
  display: flex;
  align-items: center;
  gap: 14px;
}
.ec-halo {
  position: absolute;
  left: calc(var(--number-size) * 0.55);
  top: 50%;
  width: var(--halo-size);
  height: calc(var(--halo-size) * 0.82);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(var(--halo-blur));
  background: radial-gradient(
    closest-side,
    rgb(255 255 255 / var(--halo-opacity)) 0%,
    rgb(255 255 255 / calc(var(--halo-opacity) * 0.62)) 34%,
    rgb(255 255 255 / calc(var(--halo-opacity) * 0.22)) 58%,
    transparent 78%
  );
}
.ec-number {
  position: relative;
  font-size: var(--number-size);
  font-weight: 200;
  line-height: 1;
  letter-spacing: 0.01em;
  color: rgb(255 255 255 / 99%);
  text-shadow:
    0 0 calc(var(--number-glow) * 0.4) rgb(255 255 255 / 85%),
    0 0 var(--number-glow) rgb(255 255 255 / 62%),
    0 0 calc(var(--number-glow) * 2.2) rgb(255 255 255 / 38%),
    0 0 calc(var(--number-glow) * 4.4) rgb(255 255 255 / 18%);
}
/* the tight bloom that makes the core read as a light source rather than a
   blurred glyph. It is a second, brighter and much smaller pool of white sat
   directly behind the numeral, under the wide back halo. */
.ec-number::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: calc(var(--halo-size) * 0.5);
  height: calc(var(--halo-size) * 0.44);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(calc(var(--halo-blur) * 0.42));
  background: radial-gradient(
    closest-side,
    rgb(255 255 255 / calc(var(--halo-opacity) * 1.85)) 0%,
    rgb(255 255 255 / calc(var(--halo-opacity) * 0.75)) 45%,
    transparent 76%
  );
}
.ec-copy {
  position: relative;
  max-width: 230px;
}
.ec-label {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: rgb(255 255 255 / 92%);
}
.ec-sub {
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.45;
  color: rgb(255 255 255 / 50%);
}
.ec-cluster-hero {
  --halo-size: 420px;
  --halo-opacity: 44%;
  --halo-blur: 46px;
  --number-size: 104px;
  --number-glow: 30px;
  left: 15%;
  top: 0%;
  gap: 26px;
}
.ec-cluster-draft {
  --halo-size: 250px;
  --halo-opacity: 38%;
  --halo-blur: 32px;
  --number-size: 76px;
  --number-glow: 22px;
  left: 41%;
  top: 28%;
  gap: 18px;
}
.ec-cluster-andreas {
  --halo-size: 130px;
  --halo-opacity: 28%;
  --halo-blur: 15px;
  --number-size: 36px;
  --number-glow: 12px;
  left: 2%;
  top: 55%;
}
.ec-cluster-review {
  --halo-size: 170px;
  --halo-opacity: 31%;
  --halo-blur: 26px;
  --number-size: 38px;
  --number-glow: 14px;
  left: 37%;
  top: 58%;
}
.ec-cluster-sprint {
  --halo-size: 120px;
  --halo-opacity: 26%;
  --halo-blur: 22px;
  --number-size: 25px;
  --number-glow: 11px;
  left: 38%;
  top: 83%;
}
.ec-cluster-sprint .ec-copy {
  max-width: none;
}
.ec-cluster-sprint .ec-label {
  color: rgb(255 255 255 / 50%);
}
.ec-cluster-onepager {
  --halo-size: 240px;
  --halo-opacity: 38%;
  --halo-blur: 32px;
  --number-size: 50px;
  --number-glow: 20px;
  left: 69%;
  top: 0%;
  gap: 16px;
}
.ec-cluster-data {
  --halo-size: 160px;
  --halo-opacity: 30%;
  --halo-blur: 24px;
  --number-size: 34px;
  --number-glow: 13px;
  left: 79%;
  top: 18%;
}
.ec-pair-note {
  position: absolute;
  left: 75%;
  top: 33%;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgb(255 255 255 / 40%);
}
.ec-cluster-partner {
  --halo-size: 250px;
  --halo-opacity: 40%;
  --halo-blur: 32px;
  --number-size: 60px;
  --number-glow: 22px;
  left: 70%;
  top: 55%;
  gap: 18px;
}
.ec-lower {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: 46px;
  margin-top: 0;
  margin-left: 4px;
}
.ec-read {
  margin-top: -12px;
}
.ec-when {
  font-size: 11px;
  letter-spacing: 0.2px;
  color: rgb(255 255 255 / 50%);
}
.ec-factor-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
  height: 74px;
  margin-top: 0;
}
.ec-cluster-factor {
  --halo-size: 220px;
  --halo-opacity: 36%;
  --halo-blur: 34px;
  --number-size: 75px;
  --number-glow: 20px;
  position: relative;
}
.ec-cluster-factor .ec-halo,
.ec-cluster-factor .ec-number::before {
  display: none;
}
.ec-cluster-factor .ec-number {
  text-shadow:
    0 0 6px rgb(255 255 255 / 100%),
    0 0 14px rgb(255 255 255 / 92%),
    0 0 30px rgb(255 255 255 / 62%),
    0 0 56px rgb(255 255 255 / 42%),
    0 0 96px rgb(255 255 255 / 24%);
}
.ec-factor-note {
  margin-top: 20px;
  font-size: 12px;
  line-height: 1.5;
  color: rgb(255 255 255 / 50%);
}
.ec-verdict {
  font-size: 20px;
  font-weight: 400;
  color: rgb(255 255 255 / 92%);
}
.ec-times {
  margin-top: 2px;
  font-size: 11px;
  color: rgb(255 255 255 / 50%);
}
.ec-reco {
  margin-top: 8px;
  font-size: 11px;
  color: rgb(255 255 255 / 86%);
  text-wrap: nowrap;
}
.ec-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 8px;
}
.ec-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  transition:
    transform 0.12s ease,
    box-shadow 0.25s ease,
    border-color 0.3s ease,
    background 0.3s ease,
    color 0.3s ease;
}
.ec-btn:active {
  transform: translateY(1px) scale(0.99);
}
.ec-btn-primary {
  padding: 10px 28px;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 38%);
  background: rgb(255 255 255 / 9%);
  color: #fff;
  box-shadow:
    0 0 20px rgb(255 255 255 / 30%),
    inset 0 0 10px rgb(255 255 255 / 14%);
}
.ec-btn-primary:hover {
  border-color: rgb(255 255 255 / 48%);
  background: rgb(255 255 255 / 14%);
  box-shadow:
    0 0 26px rgb(255 255 255 / 42%),
    inset 0 0 12px rgb(255 255 255 / 20%);
}
.ec-btn-bloom {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.5;
  background: radial-gradient(60% 80% at 50% 100%, rgb(255 255 255 / 35%), transparent 70%);
  transition: opacity 0.3s ease;
}
.ec-btn-primary:hover .ec-btn-bloom {
  opacity: 0.9;
}
.ec-btn-quiet {
  font-weight: 400;
  padding: 0;
  border: 0;
  background: none;
  color: rgb(255 255 255 / 46%);
}
.ec-btn-quiet:hover {
  color: rgb(255 255 255 / 80%);
}
.ec-support {
  margin-top: 14px;
  font-size: 13px;
  color: rgb(255 255 255 / 92%);
  text-wrap: nowrap;
}
.ec-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 8px;
  margin-left: 4px;
}
.ec-nudge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgb(255 255 255 / 78%);
}
.ec-nudge-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  transform: translate(0px, 5px);
  fill: none;
  stroke: rgb(255 255 255);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ec-heading {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 50%);
}
.ec-analysis {
  margin-left: -16px;
}
.ec-list {
  margin-top: 4px;
  list-style: none;
  padding: 0;
}
.ec-row {
  display: grid;
  grid-template-columns: 163px 44px minmax(0, 1fr);
  align-items: baseline;
  padding: 4px 0;
  font-size: 12px;
}
.ec-row-name {
  color: rgb(255 255 255 / 92%);
}
.ec-row-pct {
  color: rgb(255 255 255 / 92%);
}
.ec-row-note {
  font-size: 11px;
  color: rgb(255 255 255 / 45%);
}
.ec-heading-kind {
  margin-top: 16px;
}
.ec-kinds {
  margin-top: 10px;
  font-size: 12px;
  color: rgb(255 255 255 / 60%);
}
.ec-footer {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ec-lock {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: rgb(255 255 255 / 50%);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ec-footer-text {
  font-size: 11px;
  letter-spacing: 0.01em;
  color: rgb(255 255 255 / 45%);
}
.ec-cluster {
  --breathe-dur: 6s;
  --breathe-delay: 0s;
}
.ec-cluster-hero {
  --breathe-dur: 6.8s;
  --breathe-delay: -1.1s;
}
.ec-cluster-draft {
  --breathe-dur: 6.2s;
  --breathe-delay: -2.6s;
}
.ec-cluster-andreas {
  --breathe-dur: 5.4s;
  --breathe-delay: -0.7s;
}
.ec-cluster-review {
  --breathe-dur: 5.8s;
  --breathe-delay: -3.4s;
}
.ec-cluster-sprint {
  --breathe-dur: 5.2s;
  --breathe-delay: -1.9s;
}
.ec-cluster-onepager {
  --breathe-dur: 6.5s;
  --breathe-delay: -4.2s;
}
.ec-cluster-data {
  --breathe-dur: 5.6s;
  --breathe-delay: -2.1s;
}
.ec-cluster-partner {
  --breathe-dur: 7s;
  --breathe-delay: -3.1s;
}
.ec-cluster-factor {
  --breathe-dur: 6.4s;
  --breathe-delay: -0.4s;
}
.ec-cluster.is-predicted .ec-number {
  cursor: pointer;
}
.ec-cluster.is-predicted .ec-halo {
  animation: ec-halo-breathe var(--breathe-dur) ease-in-out var(--breathe-delay) infinite;
}
.ec-cluster.is-predicted .ec-number::before {
  animation: ec-bloom-breathe var(--breathe-dur) ease-in-out var(--breathe-delay) infinite;
}
.ec-cluster.is-revealing .ec-halo {
  animation: ec-halo-bloom 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ec-cluster.is-revealing .ec-number::before {
  animation: ec-bloom-open 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ec-cluster.is-revealing .ec-number {
  animation: ec-number-lift 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ec-cluster.is-shimmer .ec-number {
  animation: ec-number-glint 340ms ease-out both;
}
.ec-cluster.is-shimmer .ec-number::before {
  animation: ec-bloom-glint 340ms ease-out both;
}
@keyframes ec-halo-breathe {
  0%,
  100% {
    opacity: 0.62;
    transform: translate(-50%, -50%) scale(0.93);
    filter: blur(calc(var(--halo-blur) * 0.82));
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
    filter: blur(calc(var(--halo-blur) * 1.2));
  }
}
@keyframes ec-bloom-breathe {
  0%,
  100% {
    opacity: 0.72;
    transform: translate(-50%, -50%) scale(0.95);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.06);
  }
}
@keyframes ec-halo-bloom {
  0% {
    opacity: 0.34;
    transform: translate(-50%, -50%) scale(0.26);
    filter: blur(calc(var(--halo-blur) * 0.3));
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(var(--halo-blur));
  }
}
@keyframes ec-bloom-open {
  0% {
    opacity: 0.55;
    transform: translate(-50%, -50%) scale(0.3);
    filter: blur(calc(var(--halo-blur) * 0.18));
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(calc(var(--halo-blur) * 0.42));
  }
}
@keyframes ec-number-lift {
  0%,
  100% {
    text-shadow:
      0 0 calc(var(--number-glow) * 0.4) rgb(255 255 255 / 85%),
      0 0 var(--number-glow) rgb(255 255 255 / 62%),
      0 0 calc(var(--number-glow) * 2.2) rgb(255 255 255 / 38%),
      0 0 calc(var(--number-glow) * 4.4) rgb(255 255 255 / 18%);
  }
  40% {
    text-shadow:
      0 0 calc(var(--number-glow) * 0.55) rgb(255 255 255 / 100%),
      0 0 calc(var(--number-glow) * 1.4) rgb(255 255 255 / 84%),
      0 0 calc(var(--number-glow) * 3) rgb(255 255 255 / 54%),
      0 0 calc(var(--number-glow) * 5.6) rgb(255 255 255 / 28%);
  }
}
@keyframes ec-number-glint {
  0%,
  100% {
    text-shadow:
      0 0 calc(var(--number-glow) * 0.4) rgb(255 255 255 / 85%),
      0 0 var(--number-glow) rgb(255 255 255 / 62%),
      0 0 calc(var(--number-glow) * 2.2) rgb(255 255 255 / 38%),
      0 0 calc(var(--number-glow) * 4.4) rgb(255 255 255 / 18%);
  }
  45% {
    text-shadow:
      0 0 calc(var(--number-glow) * 0.3) rgb(255 255 255 / 100%),
      0 0 calc(var(--number-glow) * 1.1) rgb(255 255 255 / 90%),
      0 0 calc(var(--number-glow) * 2.6) rgb(255 255 255 / 52%),
      0 0 calc(var(--number-glow) * 4.4) rgb(255 255 255 / 24%);
  }
}
@keyframes ec-bloom-glint {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    filter: blur(calc(var(--halo-blur) * 0.42));
  }
  45% {
    transform: translate(-50%, -50%) scale(1.07);
    filter: blur(calc(var(--halo-blur) * 0.32));
  }
}
@media (prefers-reduced-motion: reduce) {
  .ec-cluster .ec-halo,
  .ec-cluster .ec-number,
  .ec-cluster .ec-number::before {
    animation: none;
  }
}
/* zoom 0.9 scales the whole box, so the CSS numbers are divided by it to land
   on the reference size on screen. */
.between-sessions-widget {
  position: absolute;
  z-index: 5;
  zoom: 0.9;
  display: flex;
  flex-direction: column;
  width: calc(var(--v-widget-width) / 0.9);
  height: calc(var(--v-widget-height) / 0.9);
  max-width: 94vw;
  padding: 22px 26px 18px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.6),
    inset 0 0 60px rgba(255, 255, 255, 0.015);
}
.between-sessions-widget.collapsed {
  height: auto;
}
.between-sessions-widget.collapsed .bs-body,
.between-sessions-widget.collapsed .bs-bottom {
  display: none;
}
.between-sessions-widget.collapsed [data-bs-toggle] svg {
  transform: rotate(-90deg);
}
.bs-icon-img {
  width: 85px;
  height: 85px;
  object-fit: contain;
  user-select: none;
  transform: translate(-24px, -21px);
}
.bs-title {
  font-size: 18px;
  font-weight: 400;
}
.bs-title-row {
  display: flex;
  align-items: center;
  gap: 9px;
}
.bs-status-dot {
  width: 6px;
  height: 6px;
}
.bs-body {
  display: flex;
  flex-direction: column;
  margin-top: 22px;
  margin-left: 4px;
}
.bs-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.bs-eyebrow {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 40%);
}
.bs-headline {
  margin-top: 8px;
  font-size: 20px;
  font-weight: 400;
  color: rgb(255 255 255 / 94%);
}
.bs-span {
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: rgb(255 255 255 / 40%);
}
.bs-arrow {
  color: rgb(255 255 255 / 38%);
}
.bs-intro-right {
  flex-shrink: 0;
  text-align: right;
}
.bs-count {
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
  color: rgb(255 255 255 / 92%);
}
.bs-count-label {
  margin-top: 6px;
  font-size: 11px;
  color: rgb(255 255 255 / 40%);
}
.bs-count-note {
  margin-top: 4px;
  font-size: 11px;
  color: rgb(255 255 255 / 40%);
}
.bs-scene {
  position: relative;
  height: 420px;
  margin-top: 6px;
}
.bs-chairs {
  position: absolute;
  left: 70px;
  top: 153px;
  width: 371px;
  height: 230px;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.bs-point {
  --core: 5px;
  --halo: 44px;
  --glow: 0.5;
  position: absolute;
  width: var(--core);
  height: var(--core);
  border-radius: 50%;
  background: rgb(255 255 255 / 98%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  box-shadow: 0 0 calc(var(--core) * 1.6) rgb(255 255 255 / 90%);
  transition:
    left 800ms cubic-bezier(0.16, 1, 0.3, 1),
    top 800ms cubic-bezier(0.16, 1, 0.3, 1),
    width 800ms cubic-bezier(0.16, 1, 0.3, 1),
    height 800ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.bs-point::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--halo);
  height: var(--halo);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(6px);
  transition:
    width 800ms cubic-bezier(0.16, 1, 0.3, 1),
    height 800ms cubic-bezier(0.16, 1, 0.3, 1);
  background: radial-gradient(
    closest-side,
    rgb(255 255 255 / calc(var(--glow) * 100%)) 0%,
    rgb(255 255 255 / calc(var(--glow) * 34%)) 42%,
    transparent 74%
  );
}
.bs-point.is-live {
  animation: bs-breathe var(--twinkle, 6s) ease-in-out infinite;
  animation-delay: var(--twinkle-delay, 0s);
}
.bs-point.is-entering {
  transition-duration: 1000ms;
}
.bs-point.is-hidden {
  opacity: 0;
}
@keyframes bs-breathe {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(0.88);
    opacity: 0.62;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.14);
    opacity: 1;
  }
}
.bs-scene.is-blooming .bs-point::before {
  animation: bs-bloom 1100ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes bs-bloom {
  0% {
    filter: blur(6px) brightness(1);
  }
  35% {
    filter: blur(8px) brightness(1.9);
  }
  100% {
    filter: blur(6px) brightness(1);
  }
}
.bs-row {
  position: relative;
  cursor: pointer;
  user-select: none;
}
.bs-count-note-live {
  cursor: pointer;
  user-select: none;
}
.bs-count-note-live.is-done {
  cursor: default;
}
.bs-leaders {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.bs-leaders polyline {
  fill: none;
  stroke: rgb(255 255 255 / 30%);
  stroke-width: 0.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.bs-callout {
  position: absolute;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: rgb(255 255 255 / 30%);
  pointer-events: none;
}
.bs-callout-days {
  left: 280px;
  top: 12px;
}
.bs-callout-knot {
  left: 302px;
  top: 80px;
}
.bs-callout-breathing {
  left: 0;
  top: 152px;
  width: 118px;
}
.bs-callout-record {
  left: 0;
  top: 226px;
  width: 122px;
}
.bs-callout-company {
  left: 108px;
  top: 350px;
}
.bs-callout-when {
  left: 327px;
  top: 162px;
  text-wrap: nowrap;
}
.bs-leader-days {
  transform: translateX(33px);
}
.bs-leader-knot {
  transform: translateX(38px);
}
.bs-callout-kept {
  left: 300px;
  top: 350px;
}
.bs-list {
  margin-top: -25px;
  border-radius: 12px;
}
.bs-heading {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 45%);
  padding: 8px 10px 0;
}
.bs-rows {
  margin-top: 6px;
  padding: 0 10px 8px;
  list-style: none;
}
.bs-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px;
  gap: 12px;
  align-items: baseline;
  padding: 4px 0;
}
.bs-row-text {
  font-size: 12px;
  color: rgb(255 255 255 / 88%);
  text-wrap: nowrap;
}
.bs-row-date {
  font-size: 11px;
  color: rgb(255 255 255 / 30%);
}
.bs-row.is-arriving {
  animation: bs-row-rise 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes bs-row-rise {
  0% {
    opacity: 0;
    transform: translateY(14px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.bs-add-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 0 10px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 13px;
  color: rgb(255 255 255 / 50%);
  cursor: pointer;
  user-select: none;
  transition: color 200ms ease;
}
.bs-add-trigger:hover {
  color: rgb(255 255 255 / 60%);
}
.bs-add-reset {
  margin-left: 14px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 11px;
  color: rgb(255 255 255 / 25%);
  cursor: pointer;
  user-select: none;
  transition: color 200ms ease;
}
.bs-add-reset:hover {
  color: rgb(255 255 255 / 50%);
}
.bs-add-icon {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
}
.bs-add-field {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 280ms ease, opacity 280ms ease;
}
.bs-add-field.is-open {
  max-height: 46px;
  opacity: 1;
}
.bs-add-input {
  width: calc(100% - 20px);
  margin: 8px 10px 0;
  padding: 0 0 6px;
  border: none;
  border-bottom: 1px solid rgb(255 255 255 / 18%);
  background: none;
  font: inherit;
  font-size: 12px;
  color: rgb(255 255 255 / 88%);
  outline: none;
  transition: border-color 200ms ease;
}
.bs-add-input::placeholder {
  color: rgb(255 255 255 / 28%);
}
.bs-add-input:focus {
  border-bottom-color: rgb(255 255 255 / 38%);
}
.bs-action {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-top: 4px;
  padding: 12px 22px;
  border-radius: 16px;
  border: 1px solid rgb(255 255 255 / 7%);
  background: rgb(255 255 255 / 3%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
}
.bs-action-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 14%);
}
.bs-action-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: rgb(255 255 255 / 72%);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translate(0.5px, 0);
}
.bs-action-title {
  font-size: 16px;
  font-weight: 400;
  color: rgb(255 255 255 / 94%);
}
.bs-action-text {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.55;
  color: rgb(255 255 255 / 52%);
}
.bs-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 14px;
}
.bs-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  transition:
    transform 0.12s ease,
    box-shadow 0.25s ease,
    border-color 0.3s ease,
    background 0.3s ease,
    color 0.3s ease;
}
.bs-btn:active {
  transform: translateY(1px) scale(0.99);
}
.bs-btn-primary {
  padding: 10px 28px;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 38%);
  background: rgb(255 255 255 / 9%);
  color: #fff;
  box-shadow:
    0 0 20px rgb(255 255 255 / 30%),
    inset 0 0 10px rgb(255 255 255 / 14%);
}
.bs-btn-primary:hover {
  border-color: rgb(255 255 255 / 48%);
  background: rgb(255 255 255 / 14%);
  box-shadow:
    0 0 26px rgb(255 255 255 / 42%),
    inset 0 0 12px rgb(255 255 255 / 20%);
}
.bs-btn-primary.is-made {
  border-color: rgb(255 255 255 / 22%);
  box-shadow: none;
  color: rgb(255 255 255 / 70%);
}
.bs-btn-bloom {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.5;
  background: radial-gradient(60% 80% at 50% 100%, rgb(255 255 255 / 35%), transparent 70%);
  transition: opacity 0.3s ease;
}
.bs-btn-primary:hover .bs-btn-bloom {
  opacity: 0.9;
}
.bs-btn-primary.is-made .bs-btn-bloom {
  opacity: 0;
}
.bs-btn-quiet {
  padding: 0;
  border: 0;
  font-weight: 400;
  background: none;
  color: rgb(255 255 255 / 46%);
}
.bs-btn-quiet:hover {
  color: rgb(255 255 255 / 80%);
}
.bs-bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
}
.bs-note {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}
.bs-note-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  margin-top: 2px;
  fill: none;
  stroke: rgb(255 255 255 / 92%);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bs-note-text {
  font-size: 11px;
  line-height: 1.6;
  color: rgb(255 255 255 / 45%);
}
.bs-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: 4px;
}
.bs-lock {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: rgb(255 255 255 / 50%);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bs-footer-text {
  font-size: 10px;
  letter-spacing: 0.01em;
  color: rgb(255 255 255 / 35%);
  margin-left: 7px;
}
.bs-sep {
  color: rgb(255 255 255 / 30%);
}
.bs-point.is-completed {
  transition-duration: 500ms;
  transition-timing-function: ease-out;
}

/* ============ Future Me ============ */
.future-me-widget {
  position: absolute;
  z-index: 5;
  zoom: 1;
  display: flex;
  flex-direction: column;
  width: var(--sq-widget-width);
  height: var(--sq-widget-height);
  max-width: 94vw;
  padding: 22px 26px 18px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.6),
    inset 0 0 60px rgba(255, 255, 255, 0.015);
}
.future-me-widget.collapsed .fm-body,
.future-me-widget.collapsed .fm-footer {
  display: none;
}
.future-me-widget.collapsed [data-fm-toggle] svg {
  transform: rotate(-90deg);
}
.fm-icon-glyph {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: rgb(255 255 255 / 72%);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fm-title {
  font-size: 18px;
  font-weight: 400;
}
.fm-title-row {
  display: flex;
  align-items: center;
  gap: 9px;
}
.fm-status-dot {
  width: 6px;
  height: 6px;
}
.future-me-widget > * {
  flex-shrink: 0;
}
.fm-body {
  display: grid;
  flex: 1;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) 215px;
  gap: 51px;
  margin-top: 20px;
  margin-left: 4px;
}
.fm-scene {
  position: relative;
  min-height: 336px;
  margin-left: -30px;
}
.future-me-left-scene {
  position: absolute;
  inset: 0;
  width: 117%;
  height: 107%;
  object-fit: contain;
  object-position: left center;
  pointer-events: none;
  user-select: none;
  transform: translate(0, -25px);
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 84%, transparent 100%),
    linear-gradient(to left, transparent 0%, #000 22%);
  mask-image:
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 84%, transparent 100%),
    linear-gradient(to left, transparent 0%, #000 22%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.fm-note {
  position: absolute;
  left: 13%;
  bottom: 1%;
  display: block;
  width: 62%;
  pointer-events: none;
  user-select: none;
  transition: opacity 1400ms ease-out;
}
.fm-note.is-faded {
  opacity: 0;
}
.fm-cube {
  position: absolute;
  left: 66%;
  bottom: 27%;
  width: 36%;
  aspect-ratio: 1;
  pointer-events: none;
  user-select: none;
}
.fm-cube.is-melting {
  animation: fm-cube-slip 2200ms cubic-bezier(0.37, 0, 0.63, 1);
}
@keyframes fm-cube-slip {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  30% {
    transform: translate(2px, 0.6px) rotate(0.25deg);
  }
  65% {
    transform: translate(-1.4px, 0.2px) rotate(-0.18deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}
.fm-cube-img {
  position: absolute;
  inset: 0;
  width: 82%;
  height: 98%;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  transform: translate(14px, 0);
  transition: opacity var(--fm-melt, 2200ms) cubic-bezier(0.37, 0, 0.63, 1);
  -webkit-mask-image:
    linear-gradient(to bottom, #000 0%, #000 76%, transparent 96%),
    linear-gradient(to right, transparent 0%, #000 8%);
  mask-image:
    linear-gradient(to bottom, #000 0%, #000 76%, transparent 96%),
    linear-gradient(to right, transparent 0%, #000 8%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.fm-cube-img.is-current {
  opacity: 1;
}
.fm-cube-img.fm-stage-1 {
  transform: translate(19px, 1px);
}
.fm-cube-img.fm-stage-5 {
  transform: translate(14px, 16px);
}
.fm-scene-label {
  position: absolute;
  left: 18%;
  top: 13%;
  font-size: 11px;
  letter-spacing: 0.1em;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.92);
}
.fm-scene-label-plane {
  position: absolute;
  inset: 0;
  transform: rotate(-4deg) translateZ(0);
  pointer-events: none;
  user-select: none;
  will-change: transform;
  -webkit-font-smoothing: antialiased;
}
.fm-scene-label-oct {
  left: 29%;
  top: 39%;
}
.fm-scene-label-jan {
  left: 57%;
  top: 29%;
}
.fm-cube-label {
  position: absolute;
  left: 44%;
  top: 63%;
  transform: translate(-14px, 5px) perspective(150px) rotateY(-17deg) rotate(352deg);
  transform-origin: left center;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  font-size: 9px;
  letter-spacing: 0.1em;
  white-space: nowrap;
  color: rgb(255 255 255 / 92%);
  opacity: 0;
  pointer-events: none;
  user-select: none;
  transition: opacity 400ms ease-out;
}
.fm-cube-label.is-current {
  opacity: 1;
  transition: opacity var(--fm-melt, 2200ms) cubic-bezier(0.37, 0, 0.63, 1);
}
.fm-letter {
  position: absolute;
  left: 53%;
  bottom: 14.8%;
  z-index: 2;
  display: block;
  width: 60%;
  container-type: inline-size;
  --paper-em: 2.44cqw;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  transform: perspective(700px) rotateX(46deg) scale(0.38);
  transform-origin: center center;
}
.fm-letter-paper {
  display: block;
  width: 100%;
  object-fit: contain;
}
.fm-letter .fm-letter-paper {
  filter: blur(2.5px);
  transition: filter 1200ms ease-out;
}
.fm-letter.is-open .fm-letter-paper {
  filter: none;
}
.future-note-text-plane {
  position: absolute;
  inset: 0;
  transform: rotate(-6deg) translateZ(0);
  pointer-events: none;
  /* hold one compositing layer so neighbouring animations cannot flip the text antialiasing */
  will-change: transform;
  -webkit-font-smoothing: antialiased;
}
.future-note-main-text,
.future-note-footer-text {
  position: absolute;
  font-family: inherit;
  font-weight: 400;
  white-space: pre-line;
}
.future-note-main-text {
  left: 26%;
  top: 23%;
  width: 100%;
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: 0.05em;
  color: rgb(16 16 16 / 88%);
}
.future-note-footer-text {
  left: 28%;
  top: 66%;
  width: 60%;
  font-size: 8px;
  line-height: 1.3;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: rgb(16 16 16 / 78%);
}
.fm-letter.is-open {
  animation: fm-letter-rise 2400ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes fm-letter-rise {
  0% {
    opacity: 0;
    transform: perspective(700px) rotateX(46deg) scale(0.38);
  }
  14% {
    opacity: 1;
    transform: perspective(700px) rotateX(44deg) scale(0.4);
  }
  100% {
    opacity: 1;
    transform: perspective(700px) translateY(-6px) rotateX(0deg) scale(1);
  }
}
.fm-cube.is-gone .fm-cube-img {
  opacity: 0;
  transition:
    opacity 1100ms ease-out 300ms;
}
.fm-panel {
  display: flex;
  flex-direction: column;
  margin-right: 8px;
  padding-top: 6px;
}
.fm-headline {
  font-size: 25px;
  font-weight: 400;
  line-height: 1.24;
  color: rgb(255 255 255 / 92%);
}
.fm-subline {
  margin-top: 6px;
  font-size: 13px;
  color: rgb(255 255 255 / 50%);
}
.fm-dates {
  margin-top: 20px;
  list-style: none;
  padding: 0;
}
.fm-date {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 3px 0;
  font-size: 11.5px;
  letter-spacing: 0.04em;
}
.fm-date-label {
  color: rgb(255 255 255 / 72%);
}
.fm-date-stamp {
  color: rgb(255 255 255 / 34%);
}
.fm-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0;
}
.fm-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  transition:
    transform 0.12s ease,
    box-shadow 0.25s ease,
    border-color 0.3s ease,
    background 0.3s ease,
    color 0.3s ease;
}
.fm-btn:active {
  transform: translateY(1px) scale(0.99);
}
.fm-btn-primary {
  padding: 10px 28px;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 38%);
  background: rgb(255 255 255 / 9%);
  color: #fff;
  box-shadow:
    0 0 20px rgb(255 255 255 / 30%),
    inset 0 0 10px rgb(255 255 255 / 14%);
}
.fm-btn-primary:hover {
  border-color: rgb(255 255 255 / 48%);
  background: rgb(255 255 255 / 14%);
  box-shadow:
    0 0 26px rgb(255 255 255 / 42%),
    inset 0 0 12px rgb(255 255 255 / 20%);
}
.fm-btn-bloom {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.5;
  background: radial-gradient(60% 80% at 50% 100%, rgb(255 255 255 / 35%), transparent 70%);
  transition: opacity 0.3s ease;
}
.fm-btn-primary:hover .fm-btn-bloom {
  opacity: 0.9;
}
.fm-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
  margin-top: 14px;
  margin-left: 4px;
}
.fm-lock {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: rgb(255 255 255 / 50%);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fm-footer-text {
  font-size: 10px;
  letter-spacing: 0.01em;
  color: rgb(255 255 255 / 35%);
}
.fm-sep {
  color: rgb(255 255 255 / 30%);
}


/* ===================== INSIGHTS WIDGET ===================== */
.insights-widget {
  position: absolute;
  z-index: 5;
  zoom: 0.95;
  width: calc(var(--sq-widget-width) / 0.95);
  height: calc(var(--sq-widget-height) / 0.95);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 22px 24px 18px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: none;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  color: var(--text-primary);
  overflow: hidden;
}
.ins-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ins-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ins-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.ins-icon svg {
  display: block;
  width: 23px;
  height: 35px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 1.4;
  stroke-linejoin: round;
  transform: translate(1px, 2px);
}
.ins-title {
  font-size: 20px;
  font-weight: 500;
  margin-left: 5px;
  margin-top: -5px;
  color: var(--text-primary);
}
.ins-status-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}
.ins-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.ins-action {
  background: none;
  border: none;
  cursor: pointer;
  padding: 7px;
  display: inline-flex;
  color: var(--text-secondary);
  transition: opacity 0.15s ease;
}
.ins-action:hover {
  opacity: 0.7;
}
.ins-action svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ins-action-pin svg {
  transform: rotate(40deg);
}
.insights-widget.is-pinned .ins-action-pin {
  color: var(--text-primary);
}
.insights-widget > * {
  flex-shrink: 0;
}
.ins-body {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  margin-top: 18px;
}
.insights-widget.collapsed .ins-body {
  display: none;
}
.insights-widget.collapsed [data-insights-toggle] svg {
  transform: rotate(-90deg);
}

.ins-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  margin-left: 8px;
  color: var(--text-muted);
  text-transform: uppercase;
}
.ins-eyebrow-more {
  margin-top: 22px;
}

/* featured "fresh from your twin" glowing card */
.ins-featured {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 12px;
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

/* glowing, shining star — outline only, glow follows the star shape */
.ins-star {
  position: relative;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
}
.ins-star-core {
  position: relative;
  width: 52px;
  height: 52px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 0.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 1)) drop-shadow(0 0 3px rgba(255, 255, 255, 1)) drop-shadow(0 0 5px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 9px rgba(255, 255, 255, 0.5)) drop-shadow(0 0 16px rgba(255, 255, 255, 0.32));
  animation: insStarPulse 3.2s ease-in-out infinite;
}
@keyframes insStarPulse {
  0%, 100% { filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 1)) drop-shadow(0 0 3px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 5px rgba(255, 255, 255, 0.7)) drop-shadow(0 0 9px rgba(255, 255, 255, 0.4)) drop-shadow(0 0 14px rgba(255, 255, 255, 0.25)); }
  50% { filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 1)) drop-shadow(0 0 3px rgba(255, 255, 255, 1)) drop-shadow(0 0 6px rgba(255, 255, 255, 1)) drop-shadow(0 0 12px rgba(255, 255, 255, 0.7)) drop-shadow(0 0 20px rgba(255, 255, 255, 0.45)); }
}

.ins-featured-text {
  flex: 1 1 auto;
  min-width: 0;
}
.ins-featured-headline {
  font-size: 19px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--text-primary);
}
.ins-featured-sub {
  margin-top: 6px;
  font-size: 14px;
  color: var(--text-muted);
}
.ins-protect-btn {
  flex-shrink: 0;
  align-self: center;
  padding: 10px 25px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.38);
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.14);
  transition: background 0.3s ease, box-shadow 0.25s ease, border-color 0.3s ease;
}
.ins-protect-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 26px rgba(255, 255, 255, 0.42), inset 0 0 12px rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.48);
}

/* more patterns list */
.ins-patterns {
  list-style: none;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
}
.ins-pattern {
  position: relative;
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 11px 2px;
}
.ins-pattern::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 600px;
  margin-left: -300px;
  bottom: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
}
.ins-pattern:last-child::after {
  display: none;
}
.ins-pattern-icon {
  flex-shrink: 0;
  width: 25px;
  height: 25px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.ins-pattern-text {
  flex: 1 1 auto;
  margin-top: -7px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--text-primary);
}
.ins-pattern-meta {
  flex-shrink: 0;
  margin-right: 80px;
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* note / see all */
.ins-note {
  display: flex;
  gap: 12px;
  margin-top: 10px;
}
.ins-note-icon {
  flex-shrink: 0;
  width: 50px;
  height: 25px;
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.95);
}
.ins-note-text {
  min-width: 0;
}
.ins-note-headline {
  font-size: 16px;
  color: var(--text-primary);
}
.ins-note-sub {
  margin-top: 3px;
  font-size: 13px;
  color: var(--text-muted);
}
/* secondary button matching Streaks "See all streaks" */
.ins-see-all {
  margin-top: 10px;
  padding: 7px 22px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgb(255 255 255 / 12%);
  color: rgb(255 255 255 / 60%);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.ins-see-all:hover {
  opacity: 0.85;
}

.ins-footer {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 20px;
  font-size: 11px;
  letter-spacing: 0.2px;
  color: var(--text-muted);
}
.ins-lock {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 920px) {
  .insights-widget {
    width: auto;
  }
  .ins-featured {
    flex-direction: column;
    align-items: flex-start;
  }
  .ins-protect-btn {
    align-self: stretch;
  }
}

/* ===================== VENT / SAFE SPACE WIDGET ===================== */
.vent-safe-space-widget {
  position: absolute;
  z-index: 5;
  zoom: 0.95;
  width: calc(var(--h-widget-width) / 0.95);
  height: calc(var(--h-widget-height) / 0.95);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 22px 24px 18px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: none;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  color: var(--text-primary);
  overflow: hidden;
}
.vent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.vent-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.vent-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.vent-icon svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.vent-icon-img {
  display: block;
  width: 42px;
  height: 40px;
  object-fit: contain;
}
.vent-title {
  font-size: 20px;
  font-weight: 500;
  margin-top: -5px;
  margin-left: 5px;
  color: var(--text-primary);
}
.vent-status-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}
.vent-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.vent-action {
  background: none;
  border: none;
  cursor: pointer;
  padding: 7px;
  display: inline-flex;
  color: var(--text-secondary);
  transition: opacity 0.15s ease;
}
.vent-action:hover {
  opacity: 0.7;
}
.vent-action svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.vent-action-pin svg {
  transform: rotate(40deg);
}
.vent-safe-space-widget.is-pinned .vent-action-pin {
  color: var(--text-primary);
}

.vent-body {
  display: flex;
  flex: 1;
  min-height: 0;
  gap: 34px;
  margin-top: 18px;
}
.vent-safe-space-widget > * {
  flex-shrink: 0;
}
.vent-safe-space-widget.collapsed .vent-body,
.vent-safe-space-widget.collapsed .vent-footer {
  display: none;
}
.vent-safe-space-widget.collapsed [data-vent-toggle] svg {
  transform: rotate(-90deg);
}

/* ---- left: layered scene with the input + rising lights ---- */
.vent-scene {
  position: relative;
  flex: 1 1 60%;
  min-width: 0;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px 8px 4px;
  border-radius: 16px;
}
.vent-scene-feather {
  position: absolute;
  pointer-events: none;
  -webkit-user-drag: none;
  mix-blend-mode: screen;
  left: 53%;
  bottom: -15%;
  width: 142%;
  transform: translateX(-50%);
  opacity: 0.9;
  will-change: transform, opacity, filter;
  filter: brightness(1) drop-shadow(0 0 14px rgba(255, 255, 255, 0.18));
  animation: ventFeatherFlow 7.5s ease-in-out infinite;
}
@keyframes ventFeatherFlow {
  0% { transform: translateX(-50%) scale(1); opacity: 0.82; filter: brightness(1) drop-shadow(0 0 14px rgba(255, 255, 255, 0.18)); }
  50% { transform: translateX(-50%) translateY(-7px) scale(1.03); opacity: 0.97; filter: brightness(1.16) drop-shadow(0 0 28px rgba(255, 255, 255, 0.34)); }
  100% { transform: translateX(-50%) scale(1); opacity: 0.82; filter: brightness(1) drop-shadow(0 0 14px rgba(255, 255, 255, 0.18)); }
}
.vent-scene-feather-flow {
  opacity: 0.22;
  filter: url(#ventFlow) brightness(1.03);
  animation: ventFeatherFlowOverlay 8.5s ease-in-out infinite;
}
@keyframes ventFeatherFlowOverlay {
  0% { transform: translateX(-50%) scale(1); opacity: 0.15; filter: url(#ventFlow) brightness(1.03); }
  50% { transform: translateX(-50%) translateY(-3px) scale(1.015); opacity: 0.26; filter: url(#ventFlow) brightness(1.1); }
  100% { transform: translateX(-50%) scale(1); opacity: 0.15; filter: url(#ventFlow) brightness(1.03); }
}
.vent-flow-defs {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .vent-scene-feather,
  .vent-scene-feather-flow { animation: none; }
}

.vent-input-wrap {
  position: relative;
  z-index: 2;
}
.vent-input {
  position: relative;
  z-index: 2;
  width: 80%;
  margin-left: 55px;
  margin-bottom: 20px;
  box-sizing: border-box;
  resize: none;
  padding: 8px 20px;
  border-radius: 16px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(455px) saturate(120%);
  -webkit-backdrop-filter: blur(455px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 60px rgba(255, 255, 255, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.14);
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.vent-input::placeholder {
  color: var(--text-muted);
}
.vent-input:focus {
  border-color: rgba(255, 255, 255, 0.4);
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 40px rgba(255, 255, 255, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.12);
}

/* ---- the rising "spirit lights" (compositor-only: transform + opacity) ---- */
.vent-rising {
  position: absolute;
  left: 0;
  right: 0;
  top: -440px;
  height: 490px;
  pointer-events: none;
  z-index: 3;
  -webkit-mask-image: linear-gradient(to top, transparent 0%, transparent 11%, #000 28%, #000 55%, transparent 88%);
  mask-image: linear-gradient(to top, transparent 0%, transparent 11%, #000 28%, #000 55%, transparent 88%);
}
.vent-spirit {
  position: absolute;
  bottom: 0;
  width: calc(120px * var(--scale, 1));
  height: auto;
  opacity: 0;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
  transform: translate(0, 0) rotate(0deg) scale(var(--scale, 1));
  will-change: transform, opacity;
  pointer-events: none;
  -webkit-user-drag: none;
  animation: ventSpiritRise var(--dur, 10s) linear var(--delay, 0s) infinite;
}
@keyframes ventSpiritRise {
  0% { transform: translate(0, 90px) rotate(0deg) scale(var(--scale, 1)); opacity: 0.85; }
  55% { transform: translate(calc((var(--dx, 0px) + 320px) * 0.6), -220px) rotate(calc(var(--rot, 0deg) * 0.5)) scale(calc(var(--scale, 1) * 0.95)); opacity: 0.8; }
  72% { opacity: 0.16; }
  84% { opacity: 0; }
  100% { transform: translate(calc(var(--dx, 0px) + 320px), -430px) rotate(var(--rot, 0deg)) scale(calc(var(--scale, 1) * 0.68)); opacity: 0; }
}
.vent-particle {
  position: absolute;
  bottom: 0;
  width: calc(1.6px * var(--scale, 1));
  height: calc(1.6px * var(--scale, 1));
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, #fff 0%, rgba(255, 255, 255, 0.7) 40%, transparent 70%);
  box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.9);
  mix-blend-mode: screen;
  will-change: transform, opacity;
  pointer-events: none;
  animation: ventSpiritRise var(--dur, 10s) linear var(--delay, 0s) infinite;
}
.vent-burst {
  position: absolute;
  bottom: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 7px 1px rgba(255, 255, 255, 0.85), 0 0 14px 3px rgba(200, 220, 255, 0.45);
  mix-blend-mode: screen;
  will-change: transform, opacity;
  pointer-events: none;
  animation: ventBurst var(--dur, 1.2s) cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
@keyframes ventBurst {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(var(--dx, 0), var(--dy, -120px)) scale(0.2); opacity: 0; }
}
.vent-safe-space-widget.vent-releasing .vent-input {
  box-shadow: 0 0 40px rgba(255, 255, 255, 0.34), inset 0 0 24px rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.5);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.vent-privacy {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: -15px;
  margin-bottom: 35px;
  padding-left: 135px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}
.vent-lock {
  flex-shrink: 0;
  width: 25px;
  height: 30px;
  margin-top: 1px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- right: message + actions ---- */
.vent-aside {
  flex: 0 0 30%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.vent-aside-lead {
  display: flex;
  gap: 12px;
}
.vent-aside-star {
  flex-shrink: 0;
  width: 27px;
  height: 27px;
  margin-top: 2px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 1;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.55));
}
.vent-aside-headline {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.45;
  color: var(--text-primary);
}
.vent-aside-sub {
  margin-top: 14px;
  margin-left: 35px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.vent-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 26px;
}
.vent-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 15px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 15px;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.12s ease, box-shadow 0.25s ease, border-color 0.3s ease, background 0.3s ease, color 0.3s ease, opacity 0.25s ease;
}
.vent-btn:active { transform: translateY(1px) scale(0.99); }
.vent-btn-bloom {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(60% 80% at 50% 100%, rgba(255, 255, 255, 0.35), transparent 70%);
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.vent-btn-primary:hover .vent-btn-bloom { opacity: 0.9; }

.vent-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.vent-footer-lock {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 920px) {
  .vent-safe-space-widget {
    width: auto;
  }
  .vent-body {
    flex-direction: column;
    gap: 22px;
  }
}

/* ===================== READ LATER WIDGET ===================== */
.read-later-widget {
  position: absolute;
  z-index: 5;
  zoom: 0.95;
  width: calc(var(--sq-widget-width) / 0.95);
  height: calc(var(--sq-widget-height) / 0.95);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 22px 24px 18px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: none;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  color: var(--text-primary);
  overflow: hidden;
}
.rl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.rl-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.rl-icon svg {
  display: block;
  width: 40px;
  height: 27px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.rl-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.rl-title {
  font-size: 20px;
  font-weight: 500;
  margin-left: 5px;
  color: var(--text-primary);
}
.rl-status-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}
.rl-action {
  background: none;
  border: none;
  cursor: pointer;
  padding: 7px;
  display: inline-flex;
  color: var(--text-secondary);
  transition: opacity 0.15s ease;
}
.rl-action:hover {
  opacity: 0.7;
}
.rl-action svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rl-action-pin svg {
  transform: rotate(40deg);
}
.read-later-widget.is-pinned .rl-action-pin {
  color: var(--text-primary);
}
.read-later-widget > * {
  flex-shrink: 0;
}
.rl-body {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  margin: 18px 0 0 4px;
}
.read-later-widget.collapsed .rl-body,
.read-later-widget.collapsed .rl-footer {
  display: none;
}
.read-later-widget.collapsed [data-read-later-toggle] svg {
  transform: rotate(-90deg);
}

.rl-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.4px;
  color: var(--text-muted);
  text-transform: uppercase;
}
.rl-headline {
  margin-top: 8px;
  font-size: 22px;
  font-weight: 300;
  color: var(--text-primary);
}
.rl-sub {
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-muted);
}

/* selected read */
.rl-feature {
  align-self: flex-start;
  margin-top: 8px;
  margin-bottom: 17px;
}
.rl-feature-title {
  font-size: 19px;
  font-weight: 300;
  color: var(--text-primary);
}
.rl-feature-meta {
  margin-top: 5px;
  font-size: 13px;
  color: var(--text-muted);
}

/* shelf */
.rl-shelf {
  position: relative;
  margin-top: 18px;
}
.rl-books {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  top: -50px;
  padding: 10px 2px 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.rl-books::-webkit-scrollbar {
  display: none;
}
.rl-shelf-surface {
  display: block;
  width: calc(100% + 96px);
  margin-left: -49px;
  height: 25px;
  object-fit: cover;
  object-position: center;
  margin-top: -76px;
  opacity: 55%;
  pointer-events: none;
  user-select: none;
}
.rl-book {
  position: relative;
  flex-shrink: 0;
  width: 58px;
  height: 168px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  transition: width 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), height 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), margin 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.25s ease, filter 0.3s ease;
}
.rl-book-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.rl-book-art.is-active {
  opacity: 1;
}
.rl-book-title {
  position: absolute;
  top: 14px;
  bottom: 30px;
  transition: left 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), bottom 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  line-height: 1;
  color: var(--text-primary);
  pointer-events: none;
}
.rl-book--left .rl-book-title {
  left: 33px;
}
.rl-book--right .rl-book-title {
  left: 55px;
}
.rl-book--selected .rl-book-title {
  bottom: -7px;
  left: 31px;
}
.rl-book-time {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  text-align: center;
  font-size: 10px;
  color: var(--text-muted);
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.rl-book--selected .rl-book-time {
  opacity: 0;
}
.rl-book--left {
  width: 80px;
  height: 235px;
  margin-right: -30px;
  margin-bottom: 10px;
  opacity: 65%;
}
.rl-book--right {
  width: 120px;
  height: 235px;
  margin-left: -70px;
  margin-bottom: 11px;
  opacity: 65%;
}
/* the two spines flanking the selection keep their full, un-overlapped gap */
.rl-book--left:has(+ .rl-book--selected) {
  margin-right: 0;
}
.rl-book--selected + .rl-book--right {
  margin-left: 0;
}
/* the closing spine follows the add tile, so it opts out of the overlap pull.
   The compound selector also outranks .rl-book--selected's own margin-left. */
.rl-book--last,
.rl-book--selected.rl-book--last {
  margin-left: 0px;
}
/* the selected art is far narrower than the side art, so its visible spine
   drifts left — give the add tile extra room when the closing book is selected */
.rl-add:has(+ .rl-book--selected) {
  margin-right: 31px;
}
.rl-book--selected {
  width: 65px;
  height: 215px;
  margin-left: -15px;
  margin-right: -32px;
  margin-bottom: 23px;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}
/* negative right margins exist to overlap neighbouring spines, never the add
   tile — the spine that lands beside it drops the pull whatever its role is */
.rl-book:has(+ .rl-add) {
  margin-right: 0;
}
.rl-book:hover {
  transform: translateY(-8px);
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.35));
}
.rl-add {
  flex-shrink: 0;
  width: 66px;
  height: 180px;
  margin: 37px -4px;
  border: 1px dashed rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease, margin 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.rl-add:hover {
  border-color: rgba(255, 255, 255, 0.45);
  color: rgba(255, 255, 255, 0.85);
}
@media (prefers-reduced-motion: reduce) {
  .rl-book,
  .rl-book-art,
  .rl-book-title,
  .rl-book-time,
  .rl-add {
    transition-duration: 0.01ms;
  }
}

/* Read now: the selected book leaves the shelf and its cover fills the card.
   The cover is centred with inset+margin so WAAPI owns transform outright. */
.rl-reveal {
  position: absolute;
  inset: 0;
  z-index: 40;
}
.rl-reveal[hidden],
.read-later-widget.collapsed .rl-reveal {
  display: none;
}
.rl-reveal-scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 4, 6, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.rl-reveal--open .rl-reveal-scrim {
  opacity: 1;
}
.rl-reveal-book {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 225px;
  height: 300px;
  display: grid;
  place-items: center;
  cursor: pointer;
  filter: drop-shadow(0 0 26px rgba(255, 255, 255, 0.35));
}
.rl-reveal-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.rl-reveal-title {
  position: relative;
  z-index: 1;
  max-width: 74%;
  text-align: center;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.35;
  color: var(--text-primary);
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .rl-reveal-scrim {
    transition-duration: 0.01ms;
  }
}

/* bottom row: save input + aside */
.rl-bottom {
  display: flex;
  align-items: flex-start;
  gap: 26px;
  margin-top: 20px;
}
.rl-bottom-left {
  flex: 1 1 auto;
  min-width: 0;
  margin-right: -56px;
}
.rl-input-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: calc(100% - 80px);
  padding: 15px 20px;
  border-radius: 10px;
  border: 1px solid rgb(255 255 255 / 30%);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.05), inset 0 0 14px rgba(255, 255, 255, 0.03);
  background: transparent;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.rl-input-wrap:focus-within {
  border-color: rgb(255 255 255 / 86%);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05), 0 0 24px rgba(255, 255, 255, 0.12);
}
.rl-link-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.7);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.rl-input {
  flex: 1 1 auto;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 15px;
  line-height: normal;
  color: rgb(255 255 255 / 70%);
}
.rl-input::placeholder {
  color: rgb(255 255 255 / 70%);
}
.rl-enter {
  flex-shrink: 0;
  font-size: 12.5px;
  color: rgb(255 255 255 / 35%);
}
.rl-enter-key {
  margin-left: 2px;
}
.rl-stats {
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-muted);
}
.rl-aside {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.rl-aside-lead {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 306px;
  margin-top: 15px;
  margin-right: 10px;
}
.rl-aside-star {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.rl-aside-headline {
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-primary);
}
.rl-aside-sub {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}
.rl-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rl-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 21px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.12s ease, box-shadow 0.25s ease, border-color 0.3s ease, background 0.3s ease, color 0.3s ease, opacity 0.25s ease;
}
.rl-btn:active {
  transform: translateY(1px) scale(0.99);
}
.rl-btn-bloom {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(60% 80% at 50% 100%, rgba(255, 255, 255, 0.35), transparent 70%);
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.rl-btn-primary:hover .rl-btn-bloom {
  opacity: 0.9;
}

.rl-footer {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 20px;
  font-size: 12px;
  letter-spacing: 0.2px;
  color: var(--text-muted);
}
.rl-lock {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 920px) {
  .read-later-widget {
    width: auto;
  }
  .rl-bottom {
    flex-direction: column;
    gap: 22px;
  }
}

/* ===================== WALK NUDGE WIDGET ===================== */
.walk-nudge-widget {
  position: absolute;
  z-index: 5;
  zoom: 0.95;
  width: calc(var(--sq-widget-width) / 0.95);
  height: calc(var(--sq-widget-height) / 0.95);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 22px 24px 18px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: none;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  color: var(--text-primary);
  overflow: hidden;
}
.wn-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.wn-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.wn-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.wn-icon svg {
  display: block;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translate(2px, 0);
}
.wn-title {
  font-size: 20px;
  font-weight: 500;
  margin-left: 5px;
  color: var(--text-primary);
}
.wn-status-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}
.wn-action {
  background: none;
  border: none;
  cursor: pointer;
  padding: 7px;
  display: inline-flex;
  color: var(--text-secondary);
  transition: opacity 0.15s ease;
}
.wn-action:hover {
  opacity: 0.7;
}
.wn-action svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wn-action-pin svg {
  transform: rotate(40deg);
}
.walk-nudge-widget.is-pinned .wn-action-pin {
  color: var(--text-primary);
}
.walk-nudge-widget > * {
  flex-shrink: 0;
}
.wn-body {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  margin-top: 6px;
}
.walk-nudge-widget.collapsed .wn-body,
.walk-nudge-widget.collapsed .wn-footer {
  display: none;
}
.walk-nudge-widget.collapsed [data-walk-nudge-toggle] svg {
  transform: rotate(-90deg);
}

/* top row: copy + step trail on the left, the doorway scene on the right */
.wn-top {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.wn-main {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 4px;
  padding-top: 14px;
}
.wn-headline {
  font-size: 30px;
  font-weight: 300;
  line-height: 1.24;
  color: var(--text-primary);
}
.wn-sub {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.wn-eyebrow {
  margin-top: 26px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.4px;
  color: var(--text-muted);
  text-transform: uppercase;
}
.wn-steps {
  margin-top: 6px;
  font-size: 28px;
  font-weight: 300;
  line-height: 1.1;
  color: var(--text-primary);
}
.wn-steps-goal {
  font-size: 19px;
  color: var(--text-muted);
}
.wn-steps-note {
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-muted);
}

/* footprint progress trail */
.wn-trail {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 16px;
  margin-left: -8px;
}
.wn-print {
  width: 25px;
  height: 32px;
  object-fit: contain;
  opacity: 0.32;
  transition: opacity 0.3s ease;
}
.wn-print--done {
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.45));
}

/* doorway scene — bled out to the widget edges, so it may sit over the header
   and footer bands; pointer-events stay off it so the header buttons still work */
.wn-scene {
  position: relative;
  flex: 0 0 auto;
  width: 588px;
  margin: -44px -22px -46px 0;
  pointer-events: none;
}
.wn-scene-img {
  display: block;
  width: 100%;
  /* taller frame at the same width: the art is cropped at the sides instead of
     being stretched */
  height: 450px;
  object-fit: cover;
  user-select: none;
}

/* footfalls stamping down the path in the scene art — one walk out, then a beat,
   then it starts over. Each print carries its own --x/--y/--w/--rot/--delay. */
.wn-path {
  position: absolute;
  inset: 0;
  transform: translate(100px, 40px);
}
.wn-step {
  --wn-walk-cycle: 15s;
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: auto;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--rot)) scale(0.82);
  animation: wnFootfall var(--wn-walk-cycle) ease-in-out var(--delay) infinite;
}
@keyframes wnFootfall {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--rot)) scale(0.82);
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.85));
  }
  6% {
    opacity: 0.95;
    transform: translate(-50%, -50%) rotate(var(--rot)) scale(1);
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.8));
  }
  38% {
    opacity: 0.7;
    transform: translate(-50%, -50%) rotate(var(--rot)) scale(1);
    filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.45));
  }
  62% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--rot)) scale(1);
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.2));
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--rot)) scale(0.82);
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.2));
  }
}
@media (prefers-reduced-motion: reduce) {
  .wn-step {
    opacity: 0.8;
    transform: translate(-50%, -50%) rotate(var(--rot));
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
    animation: none;
  }
}

/* bottom row: the twin note + the two actions */
.wn-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 32px;
}
.wn-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 320px;
}
.wn-note-star {
  flex-shrink: 0;
  width: 26px;
  height: 48px;
  margin-top: -9px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.wn-note-headline {
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-primary);
}
.wn-note-sub {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}
.wn-buttons {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-right: 35px;
}
.wn-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.12s ease, box-shadow 0.25s ease, border-color 0.3s ease, background 0.3s ease, color 0.3s ease, opacity 0.25s ease;
}
.wn-btn:active {
  transform: translateY(1px) scale(0.99);
}
.wn-btn-bloom {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(60% 80% at 50% 100%, rgba(255, 255, 255, 0.35), transparent 70%);
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.wn-btn-primary:hover .wn-btn-bloom {
  opacity: 0.9;
}
.walk-nudge-widget[data-walking] .wn-btn-primary {
  cursor: default;
}

.wn-footer {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  margin-left: 4px;
  font-size: 12px;
  letter-spacing: 0.2px;
  color: var(--text-muted);
}

@media (max-width: 920px) {
  .walk-nudge-widget {
    width: auto;
  }
  .wn-top,
  .wn-bottom {
    flex-direction: column;
    gap: 22px;
  }
  .wn-scene {
    width: 100%;
  }
}

/* ===================== MEAL RHYTHM WIDGET ===================== */
.meal-rhythm-widget {
  position: absolute;
  z-index: 5;
  width: var(--sq-widget-width);
  height: var(--sq-widget-height);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 22px 24px 18px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: none;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  color: var(--text-primary);
  overflow: hidden;
}
.mr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.mr-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.mr-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.mr-icon svg {
  display: block;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mr-title {
  font-size: 16px;
  font-weight: 500;
  margin-left: 5px;
  color: var(--text-primary);
}
.mr-status-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}
.mr-action {
  background: none;
  border: none;
  cursor: pointer;
  padding: 7px;
  display: inline-flex;
  color: var(--text-secondary);
  transition: opacity 0.15s ease;
}
.mr-action:hover {
  opacity: 0.7;
}
.mr-action svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mr-action-pin svg {
  transform: rotate(40deg);
}
.meal-rhythm-widget.is-pinned .mr-action-pin {
  color: var(--text-primary);
}
.mr-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin-top: 6px;
  margin-left: 4px;
}
.meal-rhythm-widget.collapsed {
  height: auto;
}
.meal-rhythm-widget.collapsed .mr-body,
.meal-rhythm-widget.collapsed .mr-footer {
  display: none;
}
.meal-rhythm-widget.collapsed [data-meal-rhythm-toggle] svg {
  transform: rotate(-90deg);
}

/* top row: the copy column on the left, the steaming bowl of the meal that's due */
.mr-top {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.mr-main {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 16px;
}
.mr-headline {
  font-size: 30px;
  font-weight: 300;
  line-height: 1.24;
  color: var(--text-primary);
}
.mr-sub {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.mr-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 210px;
  margin-top: 26px;
}
/* the star sits in the middle with a line running out of either side */
.mr-divider-line {
  flex: 1 1 0;
  height: 1px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.32));
}
.mr-divider-line--right {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.08));
}
.mr-divider-star {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 1;
  stroke-linejoin: round;
}
.mr-creed {
  margin-top: 22px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-secondary);
}

/* the hero bowl — white-on-transparent art, so it reads straight against the
   widget with no plate behind it; kept click-through in case it overlaps the header */
.mr-bowl {
  position: relative;
  flex: 0 0 auto;
  width: 410px;
  aspect-ratio: 1448 / 990;
  margin: -30px -6px 0 0;
  pointer-events: none;
}
/* two full copies of the hero art, so the next meal's bowl dissolves in over the
   current one instead of blanking the element mid-download */
.mr-bowl-face {
  position: absolute;
  inset: 0;
  --bowl-x: 0px;
  --bowl-y: 0px;
  --bowl-scale: 1;
  opacity: 0;
  transform: translate(var(--bowl-x), var(--bowl-y)) scale(var(--bowl-scale));
  transition: opacity 0.9s ease;
}
.mr-bowl-face.is-active {
  opacity: 1;
}
/* per-meal placement: a face wears the class of the art it is currently holding,
   so each bowl can be nudged and resized on its own */
.mr-bowl--breakfast {
  --bowl-x: -34px;
  --bowl-y: 0px;
  --bowl-scale: 1.1;
}
.mr-bowl--lunch {
  --bowl-x: -35px;
  --bowl-y: -2px;
  --bowl-scale: 1.16;
}
.mr-bowl--snack {
  --bowl-x: -39px;
  --bowl-y: -14px;
  --bowl-scale: 1.1;
}
.mr-bowl--dinner {
  --bowl-x: -29px;
  --bowl-y: -6px;
  --bowl-scale: 1.1;
}
.mr-bowl-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  animation: mrBowlBreathe 8s ease-in-out infinite;
}
/* two duplicates of the same art, masked down to the plume above the rim and
   pushed around by the turbulence filter, so the steam curls instead of sitting still */
.mr-bowl-steam {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.5;
  mix-blend-mode: screen;
  transform-origin: 50% 100%;
  filter: url(#mrSteam);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 26%, transparent 42%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 26%, transparent 42%);
  animation: mrSteamRise 9s ease-in-out infinite;
}
.mr-bowl-steam--drift {
  opacity: 0.28;
  animation: mrSteamDrift 15s ease-in-out infinite;
}
.mr-steam-defs {
  position: absolute;
}
@keyframes mrBowlBreathe {
  0%,
  100% {
    transform: translateY(0);
    filter: brightness(1);
  }
  50% {
    transform: translateY(-2px);
    filter: brightness(1.05);
  }
}
@keyframes mrSteamRise {
  0%,
  100% {
    opacity: 0.22;
    transform: translateY(6px) scaleY(1);
  }
  50% {
    opacity: 0.55;
    transform: translateY(-12px) scaleY(1.07);
  }
}
@keyframes mrSteamDrift {
  0%,
  100% {
    opacity: 0.14;
    transform: translate(-7px, 4px) scale(1.02);
  }
  50% {
    opacity: 0.36;
    transform: translate(8px, -16px) scale(1.06);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mr-bowl-img,
  .mr-bowl-steam,
  .mr-plate--settle {
    animation: none;
  }
  .mr-bowl-face,
  .mr-plate {
    transition-duration: 0.2s;
  }
}

/* the day's four plates, joined by short dot runs that sit only in the gaps */
.mr-timeline {
  position: relative;
  display: flex;
  align-items: flex-start;
  width: 540px;
  margin: -52px 8px 0 auto;
  transition: opacity 0.4s ease;
}
.meal-rhythm-widget.mr-rolling .mr-timeline {
  opacity: 0;
}
/* five dots in each gap with a brighter one at its centre, plus a pair leading in
   and a pair trailing out; positioned off the slot centres so no dot crosses a plate */
.mr-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.mr-dot-run {
  position: absolute;
  top: 42px;
  display: flex;
  align-items: center;
  gap: 5px;
  transform: translate(-50%, -50%);
}
.mr-dot-run--lead {
  left: 2.5%;
}
.mr-dot-run--gap-1 {
  left: 25%;
}
.mr-dot-run--gap-2 {
  left: 50%;
}
.mr-dot-run--gap-3 {
  left: 75%;
}
.mr-dot-run--trail {
  left: 97.5%;
}
.mr-dot {
  width: 1.5px;
  height: 1.5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.75);
}
.mr-dot--big {
  width: 3px;
  height: 3px;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.9), 0 0 3px rgba(255, 255, 255, 0.85);
}
.mr-slot {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* fixed box matching the plate art's 1448x1086: the row's height can never depend
   on whether a bitmap has decoded yet, which is what made it jump */
.mr-dish {
  position: relative;
  width: 112px;
  aspect-ratio: 1448 / 1086;
}
.mr-plate {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.9s ease, filter 0.4s ease;
}
.mr-plate.is-active {
  opacity: 1;
}
.mr-slot--later .mr-plate.is-active {
  opacity: 0.5;
}
.mr-slot--now .mr-plate {
  filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.32));
}
.mr-plate--settle {
  animation: mrPlateSettle 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes mrPlateSettle {
  from {
    transform: translateY(-5px);
  }
  to {
    transform: none;
  }
}
.mr-check {
  position: absolute;
  right: 8px;
  bottom: 15px;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: rgba(12, 14, 14, 0.7);
  fill: none;
  stroke: rgba(255, 255, 255, 0.92);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.mr-slot--eaten .mr-check {
  opacity: 1;
  transform: none;
}
.mr-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin-top: 6px;
}
.mr-caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 5px solid rgba(255, 255, 255, 0.8);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.mr-slot--now .mr-caret {
  opacity: 1;
  transform: none;
}
.mr-slot-name {
  font-size: 12px;
  letter-spacing: 0.6px;
  color: var(--text-secondary);
}
.mr-slot--now .mr-slot-name {
  color: var(--text-primary);
}
.mr-slot-time {
  font-size: 12px;
  color: var(--text-muted);
}

/* bottom row: the twin note + the three actions */
.mr-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 20px;
}
.mr-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 340px;
}
.mr-note-star {
  flex-shrink: 0;
  width: 26px;
  height: 48px;
  margin-top: -9px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.mr-note-headline {
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-primary);
}
.mr-note-sub {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}
.mr-buttons {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.mr-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.12s ease, box-shadow 0.25s ease, border-color 0.3s ease, background 0.3s ease, color 0.3s ease, opacity 0.25s ease;
}
.mr-btn:active {
  transform: translateY(1px) scale(0.99);
}
.mr-btn-bloom {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(60% 80% at 50% 100%, rgba(255, 255, 255, 0.35), transparent 70%);
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.mr-btn-primary:hover .mr-btn-bloom {
  opacity: 0.9;
}
.meal-rhythm-widget[data-reminding] .mr-btn-primary {
  cursor: default;
}
.mr-btn-ghost {
  color: rgb(255 255 255 / 60%);
  background: transparent;
  border: none;
  font-weight: 500;
}
.mr-btn-ghost:hover {
  opacity: 0.85;
}

.mr-footer {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  margin-left: 4px;
  padding-top: 18px;
  font-size: 12px;
  letter-spacing: 0.2px;
  color: var(--text-muted);
}

@media (max-width: 920px) {
  .meal-rhythm-widget {
    width: auto;
  }
  .mr-top,
  .mr-bottom {
    flex-direction: column;
    gap: 22px;
  }
  .mr-bowl,
  .mr-timeline {
    width: 100%;
    margin: 0;
  }
}

/* ===================== RECHARGE TIMER WIDGET ===================== */
.recharge-timer-widget {
  position: absolute;
  z-index: 5;
  zoom: 0.95;
  width: calc(var(--h-widget-width) / 0.95);
  height: calc(var(--h-widget-height) / 0.95);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 22px 24px 18px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: none;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  color: var(--text-primary);
  overflow: hidden;
}
.rc-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.rc-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.rc-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.rc-icon svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rc-title {
  font-size: 20px;
  font-weight: 500;
  margin-left: 5px;
  color: var(--text-primary);
}
.rc-status-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}
.rc-actions {
  display: flex;
  align-items: center;
}
.rc-action {
  background: none;
  border: none;
  cursor: pointer;
  padding: 7px;
  display: inline-flex;
  color: var(--text-secondary);
  transition: opacity 0.15s ease;
}
.rc-action:hover {
  opacity: 0.7;
}
.rc-action svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rc-action-pin svg {
  transform: rotate(40deg);
}
.recharge-timer-widget.is-pinned .rc-action-pin {
  color: var(--text-primary);
}
.recharge-timer-widget > * {
  flex-shrink: 0;
}
.rc-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.recharge-timer-widget.collapsed .rc-body,
.recharge-timer-widget.collapsed .rc-divider,
.recharge-timer-widget.collapsed .rc-footer {
  display: none;
}
.recharge-timer-widget.collapsed [data-recharge-timer-toggle] svg {
  transform: rotate(-90deg);
}

/* stage: the copy column sits in flow, the liquid and the clock float over it */
.rc-stage {
  position: relative;
  flex: 1;
  min-height: 300px;
}
.rc-copy {
  position: relative;
  z-index: 2;
  width: 250px;
  padding-top: 18px;
}
.rc-eyebrow {
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.rc-eyebrow--duration {
  margin-top: 34px;
}
.rc-lead {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-secondary);
}
.rc-hold {
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-secondary);
}
.rc-chips {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.rc-chip {
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.rc-chip:hover {
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.16);
}
.rc-chip.is-selected {
  font-weight: 500;
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.14);
}
.rc-chip:disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

/* the liquid art, bleeding up behind the header as in the reference */
.rc-scene {
  position: absolute;
  top: -86px;
  right: -30px;
  width: 520px;
  height: 430px;
  pointer-events: none;
}
/* every piece is its own cut-out, placed by custom properties so position,
   size, depth and timing are each a one-line tweak */
.rc-piece {
  --o: 1;
  --speed: 0.45;
  --rot: 1.6deg;
  /* no-op by default; the three warped masses override it with their own filter */
  --rc-warp: opacity(1);
  --rc-gel: cubic-bezier(0.37, 0, 0.63, 1);
  /* the three complex masses use this to dissolve into the dark at the bottom
     instead of ending on a hard cut-out edge */
  --rc-sink: linear-gradient(to bottom, #000 44%, rgba(0, 0, 0, 0.45) 68%, transparent 88%);
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: auto;
  opacity: var(--o);
  filter: var(--rc-warp);
  will-change: translate, scale, rotate;
  transition: opacity 0.8s ease;
  /* translate / scale / rotate are separate properties, so the three
     animations compose instead of overwriting one another */
  animation:
    rcFloat calc(var(--float) * var(--speed)) var(--rc-gel) var(--delay) infinite,
    rcWobble calc(var(--wob) * var(--speed)) var(--rc-gel) var(--delay) infinite,
    rcTurn calc(var(--turn) * var(--speed)) var(--rc-gel) var(--delay) infinite;
}
/* dimmest and smallest sit furthest back, in DOM order */
.rc-piece--faint {
  --x: 16%;
  --y: 88%;
  --w: 52px;
  --o: 0.4;
  --dx: -7px;
  --dy: -10px;
  --float: 23s;
  --wob: 13s;
  --turn: 19s;
  --delay: -8s;
}
.rc-piece--dark {
  --x: 31%;
  --y: 7%;
  --w: 95px;
  --o: 0.55;
  --dx: 9px;
  --dy: 12px;
  --float: 21s;
  --wob: 11s;
  --turn: 17s;
  --delay: -14s;
}
.rc-piece--small {
  --x: -41%;
  --y: 20%;
  --w: 360px;
  --o: 0.78;
  --dx: -11px;
  --dy: 9px;
  --float: 18s;
  --wob: 9s;
  --turn: 15s;
  --delay: -5s;
}
.rc-piece--small-alt {
  --x: 61%;
  --y: 43%;
  --w: 56px;
  --o: 0.8;
  --dx: 12px;
  --dy: 10px;
  --float: 16s;
  --wob: 8s;
  --turn: 13s;
  --delay: -11s;
}
.rc-piece--mid {
  --x: 45%;
  --y: 18%;
  --w: 125px;
  --o: 0.9;
  --dx: 10px;
  --dy: -13px;
  --float: 20s;
  --wob: 10s;
  --turn: 16s;
  --delay: -2s;
}
/* the three complex masses form the cluster the clock sits on; only these
   carry the turbulence warp, keeping the expensive filter count at three */
.rc-piece--tripod {
  --x: -24%;
  --y: 12%;
  --w: 372px;
  --o: 0.95;
  --dx: -6px;
  --dy: 11px;
  --float: 19s;
  --wob: 12s;
  --turn: 22s;
  --delay: -3s;
  --rc-warp: url(#rcWarpA);
  -webkit-mask-image: var(--rc-sink);
  mask-image: var(--rc-sink);
}
.rc-piece--three-lobe {
  --x: 24%;
  --y: 35%;
  --w: 310px;
  --dx: 13px;
  --dy: -8px;
  --float: 17s;
  --wob: 11s;
  --turn: 20s;
  --delay: -9s;
  --rc-warp: url(#rcWarpB);
  -webkit-mask-image: var(--rc-sink);
  mask-image: var(--rc-sink);
}
.rc-piece--capsule {
  --x: 2%;
  --y: -1%;
  --w: 250px;
  --dx: -12px;
  --dy: -9px;
  --float: 22s;
  --wob: 14s;
  --turn: 18s;
  --delay: -6s;
  --rc-warp: url(#rcWarpC);
  -webkit-mask-image: var(--rc-sink);
  mask-image: var(--rc-sink);
}
/* the two brightest spheres orbit clear of the digits at every point of their
   travel, so nothing bright ever crosses the clock */
.rc-piece--sphere {
  --x: 26%;
  --y: 90%;
  --w: 48px;
  --dx: 9px;
  --dy: 13px;
  --float: 15s;
  --wob: 7s;
  --turn: 14s;
  --delay: -13s;
}
.rc-piece--highlight {
  --x: 0%;
  --y: 13%;
  --w: 30px;
  --dx: -10px;
  --dy: 8px;
  --float: 13s;
  --wob: 8s;
  --turn: 12s;
  --delay: -4s;
}
/* the periods never line up, so the pieces keep opening and closing the
   distance between them instead of pulsing in unison */
@keyframes rcFloat {
  0%, 100% { translate: 0 0; }
  33% { translate: calc(var(--dx) * 0.62) calc(var(--dy) * 0.94); }
  50% { translate: var(--dx) var(--dy); }
  66% { translate: calc(var(--dx) * 0.9) calc(var(--dy) * 0.55); }
}
/* volume-preserving squash and stretch — a sphere going slightly oval and back
   is what reads as a droplet wobbling */
@keyframes rcWobble {
  0%, 100% { scale: 1 1; }
  19% { scale: 1.085 0.925; }
  41% { scale: 1.018 0.985; }
  57% { scale: 0.945 1.062; }
  83% { scale: 0.982 1.022; }
}
@keyframes rcTurn {
  0%, 100% { rotate: calc(var(--rot) * -1); }
  50% { rotate: var(--rot); }
}
.recharge-timer-widget[data-phase="paused"] .rc-piece {
  --speed: 1;
  opacity: calc(var(--o) * 0.7);
}
.recharge-timer-widget[data-phase="done"] .rc-piece {
  --speed: 0.72;
}

/* clock centred over the liquid */
.rc-clock {
  position: absolute;
  top: 113px;
  right: 241px;
  z-index: 2;
  text-align: center;
  pointer-events: none;
}
.rc-time {
  font-size: 80px;
  font-weight: 200;
  line-height: 1;
  letter-spacing: 2px;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  text-shadow: 0 0 30px rgba(0, 0, 0, 0.55);
}
.rc-clock-sub {
  margin-top: 12px;
  font-size: 13px;
  letter-spacing: 0.6px;
  color: var(--text-secondary);
}

/* bottom row: the twin note + the two actions */
.rc-bottom {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: auto;
}
.rc-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 380px;
}
.rc-note-star {
  flex-shrink: 0;
  width: 26px;
  height: 48px;
  margin-top: -9px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.rc-note-headline {
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-primary);
}
.rc-note-sub {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-muted);
}
.rc-buttons {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.rc-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.12s ease, box-shadow 0.25s ease, border-color 0.3s ease, background 0.3s ease, color 0.3s ease, opacity 0.25s ease;
}
.rc-btn:active {
  transform: translateY(1px) scale(0.99);
}
.rc-btn:disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}
.rc-btn-primary {
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.14);
}
.rc-btn-primary:hover {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 26px rgba(255, 255, 255, 0.42), inset 0 0 12px rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.48);
}
.rc-btn-bloom {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(60% 80% at 50% 100%, rgba(255, 255, 255, 0.35), transparent 70%);
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.rc-btn-primary:hover .rc-btn-bloom {
  opacity: 0.9;
}
.rc-btn-secondary {
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.rc-divider {
  display: block;
  height: 1px;
  margin-top: 18px;
  background: rgba(255, 255, 255, 0.07);
}
.rc-footer {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: 0.2px;
  color: var(--text-muted);
}
.rc-lock {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
  .rc-piece {
    animation: none;
    --rc-warp: opacity(1);
  }
}

@media (max-width: 920px) {
  .recharge-timer-widget {
    width: auto;
  }
  .rc-scene,
  .rc-clock {
    position: static;
    width: 100%;
  }
  .rc-copy {
    width: 100%;
  }
  .rc-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
  }
}

/* ===================== SINGLE-TASK LOCK WIDGET ===================== */
.single-task-lock-widget {
  position: absolute;
  z-index: 5;
  zoom: 0.95;
  width: calc(var(--h-widget-width) / 0.95);
  height: calc(var(--h-widget-height) / 0.95);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 22px 24px 18px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: none;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  color: var(--text-primary);
  overflow: hidden;
  /* how far the brackets are thrown open before the lens pulls focus */
  --stl-spread-x: 34px;
  --stl-spread-y: 26px;
}
.stl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.stl-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.stl-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.stl-icon svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stl-title {
  font-size: 20px;
  font-weight: 500;
  margin-left: 5px;
  margin-top: -5px;
  color: var(--text-primary);
}
.stl-status-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}
.stl-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.stl-action {
  background: none;
  border: none;
  cursor: pointer;
  padding: 7px;
  display: inline-flex;
  color: var(--text-secondary);
  transition: opacity 0.15s ease;
}
.stl-action:hover {
  opacity: 0.7;
}
.stl-action svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stl-action-pin svg {
  transform: rotate(40deg);
}
.single-task-lock-widget.is-pinned .stl-action-pin {
  color: var(--text-primary);
}
.single-task-lock-widget.collapsed .stl-body,
.single-task-lock-widget.collapsed .stl-note,
.single-task-lock-widget.collapsed .stl-buttons,
.single-task-lock-widget.collapsed .stl-footer {
  display: none;
}
.single-task-lock-widget.collapsed [data-single-task-lock-toggle] svg {
  transform: rotate(-90deg);
}

.single-task-lock-widget > * {
  flex-shrink: 0;
}
.stl-body {
  display: grid;
  flex: 1;
  min-height: 0;
  grid-template-columns: 168px 1fr 168px;
  gap: 16px;
  align-items: start;
  margin-top: 14px;
}

/* the tasks that lost — pushed out of focus either side of the frame */
.stl-side {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 8px;
  margin-left: 10px;
  filter: blur(2px);
  opacity: 0.5;
  transition: filter 0.8s ease, opacity 0.8s ease;
}
.stl-side:hover {
  filter: blur(0.7px);
  opacity: 0.8;
}
.stl-task {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  min-width: 0;
}
.stl-task-icon {
  flex-shrink: 0;
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--text-primary);
}
.stl-task-text {
  min-width: 0;
}
.stl-task-name {
  font-size: 13px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stl-task-time {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-primary);
}

/* the locked task, inside the camera brackets */
.stl-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stl-frame {
  position: relative;
  width: 90%;
  padding: 1px 0 12px;
  text-align: center;
}
.stl-corner {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 0 solid rgba(255, 255, 255, 0.92);
  /* the glow is a variable so every rack keyframe can keep it lit while the
     brackets are still blurred and travelling */
  --stl-line-glow: drop-shadow(0 0 1.5px rgba(255, 255, 255, 1)) drop-shadow(0 0 3px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
  filter: var(--stl-line-glow);
}
.stl-corner--tl {
  top: 0;
  left: 0;
  border-top-width: 1.5px;
  border-left-width: 1.5px;
  border-top-left-radius: 4px;
  --cx: -1;
  --cy: -1;
}
.stl-corner--tr {
  top: 0;
  right: 0;
  border-top-width: 1.5px;
  border-right-width: 1.5px;
  border-top-right-radius: 4px;
  --cx: 1;
  --cy: -1;
}
.stl-corner--bl {
  bottom: 0;
  left: 0;
  border-bottom-width: 1.5px;
  border-left-width: 1.5px;
  border-bottom-left-radius: 4px;
  --cx: -1;
  --cy: 1;
}
.stl-corner--br {
  bottom: 0;
  right: 0;
  border-bottom-width: 1.5px;
  border-right-width: 1.5px;
  border-bottom-right-radius: 4px;
  --cx: 1;
  --cy: 1;
}
.stl-frame-lock {
  display: block;
  width: 30px;
  height: 30px;
  margin: 0 auto;
  fill: none;
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stl-eyebrow {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--text-muted);
  text-transform: uppercase;
}
.stl-focus-title {
  margin-top: 10px;
  font-size: 50px;
  font-weight: 300;
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.95), 0 0 6px rgba(255, 255, 255, 0.6), 0 0 14px rgba(255, 255, 255, 0.4), 0 0 26px rgba(255, 255, 255, 0.22);
}
.stl-focus-sub {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 300;
  color: var(--text-secondary);
}
.stl-frame .stl-divider {
  position: relative;
  display: block;
  height: 1px;
  width: 240px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22) 35%, rgba(255, 255, 255, 0.22) 65%, transparent);
}
.stl-frame .stl-divider::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}
.stl-focus-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 12px;
  font-size: 14px;
  color: var(--text-secondary);
}
.stl-clock {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stl-suppressed {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 19px;
  width: 91%;
  margin-top: 30px;
  font-size: 12px;
  color: var(--text-muted);
}
.stl-chip {
  display: flex;
  align-items: center;
  gap: 6px;
}
.stl-chip + .stl-chip::before {
  content: "·";
  margin-right: 10px;
  color: var(--text-muted);
}
.stl-chip-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stl-chip-strike {
  opacity: 0.85;
}

.stl-note {
  display: flex;
  gap: 12px;
  margin: 18px 0 0 230px;
}
.stl-note-star {
  flex-shrink: 0;
  width: 39px;
  height: 39px;
  margin-right: -4px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 0.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 4px rgba(255, 255, 255, 0.55));
}
.stl-note-text {
  min-width: 0;
}
.stl-note-headline {
  font-size: 15px;
  color: var(--text-primary);
}
.stl-note-sub {
  margin-top: 3px;
  font-size: 13px;
  color: var(--text-muted);
}

.stl-buttons {
  display: flex;
  align-items: center;
  gap: 21px;
  margin: 27px 0 16px 278px;
}
.stl-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 49px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.12s ease, box-shadow 0.25s ease, border-color 0.3s ease, background 0.3s ease, color 0.3s ease, opacity 0.25s ease;
}
.stl-btn:active {
  transform: translateY(1px) scale(0.99);
}
.stl-btn:disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}
.stl-btn-primary {
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.14);
}
.stl-btn-primary:hover {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 26px rgba(255, 255, 255, 0.42), inset 0 0 12px rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.48);
}
.stl-btn-bloom {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(60% 80% at 50% 100%, rgba(255, 255, 255, 0.35), transparent 70%);
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.stl-btn-primary:hover .stl-btn-bloom {
  opacity: 0.9;
}
.stl-btn-ghost {
  background: none;
  border: none;
  padding: 12px 4px;
  color: var(--text-secondary);
}
.stl-btn-ghost:hover {
  color: var(--text-primary);
}

.stl-footer {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: 0.2px;
  color: var(--text-muted);
}
.stl-lock {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- camera rack-focus, played on drop and on every re-lock ----
   Every layer shares one duration and one easing so the blur always tracks the
   bracket travel — the focus drifts with the lens instead of snapping. */
.single-task-lock-widget {
  --stl-rack-duration: 4.4s;
  --stl-rack-ease: cubic-bezier(0.45, 0, 0.55, 1);
}
.stl-racking--short {
  --stl-rack-duration: 3.2s;
}
.stl-racking .stl-corner {
  animation: stlRack var(--stl-rack-duration) var(--stl-rack-ease) both;
}
.stl-racking .stl-frame-lock,
.stl-racking .stl-focus-title,
.stl-racking .stl-focus-sub {
  animation: stlPullFocus var(--stl-rack-duration) var(--stl-rack-ease) both;
}
.stl-racking .stl-side {
  animation: stlDefocus var(--stl-rack-duration) var(--stl-rack-ease) both;
}
.stl-racking .stl-suppressed {
  animation: stlChipsIn var(--stl-rack-duration) var(--stl-rack-ease) both;
}
.stl-racking--short .stl-corner {
  --stl-spread-x: 17px;
  --stl-spread-y: 13px;
}

/* The lens hunts: wide → in → back out → in again → settle. Everything else in
   the widget is keyed to these same stops so each zoom-out softens the locked
   task and sharpens the side columns, and each zoom-in does the reverse. */
@keyframes stlRack {
  0%, 12% {
    transform: translate(calc(var(--cx) * var(--stl-spread-x)), calc(var(--cy) * var(--stl-spread-y)));
    opacity: 0.7;
    filter: blur(1.5px) var(--stl-line-glow);
  }
  38% {
    transform: translate(calc(var(--cx) * -6px), calc(var(--cy) * -5px));
    opacity: 1;
    filter: blur(0) var(--stl-line-glow);
  }
  58% {
    transform: translate(calc(var(--cx) * var(--stl-spread-x) * 0.45), calc(var(--cy) * var(--stl-spread-y) * 0.45));
    opacity: 0.85;
    filter: blur(0.8px) var(--stl-line-glow);
  }
  80% {
    transform: translate(calc(var(--cx) * -3px), calc(var(--cy) * -2px));
    opacity: 1;
    filter: brightness(1.4) var(--stl-line-glow);
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
    filter: blur(0) var(--stl-line-glow);
  }
}
@keyframes stlPullFocus {
  0%, 12% {
    filter: blur(5px);
    opacity: 0.5;
  }
  38% {
    filter: blur(0);
    opacity: 1;
  }
  58% {
    filter: blur(2.6px);
    opacity: 0.7;
  }
  80%, 100% {
    filter: blur(0);
    opacity: 1;
  }
}
@keyframes stlDefocus {
  0%, 12% {
    filter: blur(0);
    opacity: 0.9;
  }
  38% {
    filter: blur(2px);
    opacity: 0.5;
  }
  58% {
    filter: blur(0.4px);
    opacity: 0.85;
  }
  80%, 100% {
    filter: blur(2px);
    opacity: 0.5;
  }
}
@keyframes stlChipsIn {
  0%, 45% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stl-racking .stl-corner,
  .stl-racking .stl-frame-lock,
  .stl-racking .stl-focus-title,
  .stl-racking .stl-focus-sub,
  .stl-racking .stl-side,
  .stl-racking .stl-suppressed {
    animation: none;
  }
}

@media (max-width: 920px) {
  .single-task-lock-widget {
    width: auto;
  }
  .stl-body {
    grid-template-columns: 1fr;
  }
  .stl-side {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .stl-buttons {
    flex-wrap: wrap;
  }
}

/* ================= Medication Refill ================= */
.medication-refill-widget {
  position: absolute;
  z-index: 5;
  zoom: 0.95;
  width: calc(var(--sq-widget-width) / 0.95);
  height: calc(var(--sq-widget-height) / 0.95);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 22px 24px 18px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: none;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  color: var(--text-primary);
  overflow: hidden;
}
.rx-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.rx-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.rx-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.rx-icon svg {
  display: block;
  width: 25px;
  height: 25px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rx-title {
  font-size: 20px;
  font-weight: 500;
  margin-left: 5px;
  margin-top: -5px;
  color: var(--text-primary);
}
.rx-status-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}
.rx-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.rx-action {
  background: none;
  border: none;
  cursor: pointer;
  padding: 7px;
  display: inline-flex;
  color: var(--text-secondary);
  transition: opacity 0.15s ease;
}
.rx-action:hover {
  opacity: 0.7;
}
.rx-action svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rx-action-pin svg {
  transform: rotate(40deg);
}
.medication-refill-widget.is-pinned .rx-action-pin {
  color: var(--text-primary);
}
.medication-refill-widget.collapsed .rx-body,
.medication-refill-widget.collapsed .rx-footer {
  display: none;
}
.medication-refill-widget.collapsed [data-medication-refill-toggle] svg {
  transform: rotate(-90deg);
}

.medication-refill-widget > * {
  flex-shrink: 0;
}
.rx-body {
  flex: 1;
  min-height: 0;
  margin-top: 6px;
}

/* ---- hero: the bottle and the countdown ---- */
.rx-hero {
  display: flex;
  align-items: flex-start;
  gap: 26px;
}
.rx-bottle {
  position: relative;
  flex-shrink: 0;
  width: 170px;
  height: 260px;
  margin: 4px 0 0 12px;
}
/* the bottle sits a touch off its box so the glass lands under the copy */
.rx-bottle-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 120%;
  margin: -25px 0 0 -17px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 0 26px rgba(255, 255, 255, 0.18));
}
/* the glass interior — the pile is clipped to it so no capsule escapes the bottle */
.rx-bottle-body {
  position: absolute;
  inset: 29% 12.5% 7.5% 14%;
  overflow: hidden;
  border-radius: 5px 5px 16px 16px;
}
.rx-pills {
  position: absolute;
  inset: 0;
}
.rx-pill {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: calc(var(--w) * 0.44);
  margin: calc(var(--w) * -0.22) 0 0 calc(var(--w) * -0.5);
  border-radius: 999px;
  transform: rotate(var(--rot));
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(214, 220, 220, 0.62));
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.9), inset 0 -2px 3px rgba(0, 0, 0, 0.18), 0 0 6px rgba(255, 255, 255, 0.35);
}
.rx-pill--drop {
  animation: rxDrop 0.62s cubic-bezier(0.34, 1.2, 0.5, 1) var(--drop-delay) both;
}
@keyframes rxDrop {
  0% {
    opacity: 0;
    transform: translateY(-160%) rotate(calc(var(--rot) * -0.4));
  }
  60% {
    opacity: 1;
  }
  78% {
    transform: translateY(-4px) rotate(var(--rot));
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(var(--rot));
  }
}

.rx-hero-text {
  min-width: 0;
  padding-top: 25px;
}
.rx-eyebrow {
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--text-muted);
  text-transform: uppercase;
}
.rx-days {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 6px;
}
.rx-days-num {
  font-size: 90px;
  font-weight: 400;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.45), 0 0 34px rgba(255, 255, 255, 0.22);
}
.rx-days-label {
  font-size: 17px;
  color: var(--text-secondary);
}
.rx-med-name {
  margin-top: 12px;
  font-size: 22px;
  font-weight: 400;
  color: var(--text-primary);
}
.rx-runs-out {
  margin-top: 7px;
  font-size: 14px;
  color: var(--text-muted);
}
.rx-advice {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-size: 14px;
  color: var(--text-secondary);
}
.rx-clock {
  flex-shrink: 0;
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rx-divider {
  display: block;
  height: 1px;
  margin: 18px 0 14px;
  background: rgba(255, 255, 255, 0.08);
}

/* ---- the other meds, and the aside ---- */
.rx-bottom {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 30px;
  margin-left: 4px;
  align-items: start;
}
.rx-others {
  padding-right: 30px;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
}
.rx-med-list {
  list-style: none;
  margin-top: 10px;
}
.rx-med {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 4px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.2s ease, transform 0.2s ease;
}
.rx-med:last-child {
  border-bottom: none;
}
.rx-med:hover {
  background: rgba(255, 255, 255, 0.04);
  transform: translateX(2px);
}
.rx-med-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  margin-top: 2px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--text-primary);
}
.rx-med-name-row {
  font-size: 15px;
  color: var(--text-primary);
}
.rx-med-dot,
.rx-med-dose {
  font-size: 14px;
  color: var(--text-muted);
}
.rx-med-days {
  margin-left: auto;
  font-size: 14px;
  color: var(--text-muted);
}
.rx-med-days strong {
  font-weight: 400;
  color: var(--text-primary);
}

.rx-aside {
  width: 85%;
}
.rx-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 95%;
}
.rx-note-star {
  flex-shrink: 0;
  width: 39px;
  height: 39px;
  margin-top: 1px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.92);
  stroke-width: 0.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.55));
}
.rx-note-headline {
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-primary);
}
.rx-note-sub {
  margin-top: 4px;
  font-size: 14px;
  color: var(--text-muted);
}
.rx-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.rx-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 21px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 15px;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.12s ease, box-shadow 0.25s ease, border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.rx-btn:active {
  transform: translateY(1px) scale(0.99);
}
.rx-btn-primary {
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.14);
}
.rx-btn-primary:hover {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 26px rgba(255, 255, 255, 0.42), inset 0 0 12px rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.48);
}
.rx-btn-bloom {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(60% 80% at 50% 100%, rgba(255, 255, 255, 0.35), transparent 70%);
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.rx-btn-primary:hover .rx-btn-bloom {
  opacity: 0.9;
}
.rx-btn-secondary {
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.rx-btn-secondary:hover {
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.24);
}
.rx-btn-secondary.is-set {
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.06);
}

.rx-footer {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  margin-left: 4px;
  font-size: 12px;
  letter-spacing: 0.2px;
  color: var(--text-muted);
}
.rx-lock {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
  .rx-pill--drop {
    animation: none;
  }
}

@media (max-width: 920px) {
  .medication-refill-widget {
    width: auto;
  }
  .rx-bottom {
    grid-template-columns: 1fr;
  }
}

/* ================= Messages ================= */
.messages-widget {
  position: absolute;
  z-index: 5;
  zoom: 0.95;
  width: calc(var(--v-widget-width) / 0.95);
  height: calc(var(--v-widget-height) / 0.95);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 22px 24px 18px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: none;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  color: var(--text-primary);
  overflow: hidden;
}
.msg-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.msg-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.msg-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.msg-icon svg {
  display: block;
  width: 36px;
  height: 25px;
  margin-top: -5px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.msg-title {
  font-size: 20px;
  font-weight: 500;
  margin-left: 5px;
  margin-top: -5px;
  color: var(--text-primary);
}
.msg-status-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}
.msg-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.msg-action {
  background: none;
  border: none;
  cursor: pointer;
  padding: 7px;
  display: inline-flex;
  color: var(--text-secondary);
  transition: opacity 0.15s ease;
}
.msg-action:hover {
  opacity: 0.7;
}
.msg-action svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.msg-action-pin svg {
  transform: rotate(40deg);
}
.messages-widget.is-pinned .msg-action-pin {
  color: var(--text-primary);
}
.messages-widget.collapsed {
  height: auto;
  min-height: 0;
}
.messages-widget.collapsed .msg-body,
.messages-widget.collapsed .msg-footer {
  display: none;
}
.messages-widget.collapsed [data-messages-toggle] svg {
  transform: rotate(-90deg);
}

.msg-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* The widget pads 24px; the body borrows it so the batch button glow has
     room inside the clip box instead of being cut at the edge. */
  margin: 12px -24px 0;
  padding: 0 24px;
}

/* ---- search ---- */
.msg-search {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 20px;
  border-radius: 10px;
  background: rgb(255 255 255 / 5%);
  border: 1px solid rgb(255 255 255 / 30%);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.05), inset 0 0 14px rgba(255, 255, 255, 0.03);
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.msg-search:focus-within {
  border-color: rgb(255 255 255 / 86%);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05), 0 0 24px rgba(255, 255, 255, 0.12);
}
.msg-search-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: rgba(235, 238, 232, 0.58);
  stroke-width: 1.6;
  stroke-linecap: round;
}
.msg-search-input {
  flex: 1 1 auto;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 15px;
  color: var(--text-primary);
}
.msg-search-input::placeholder {
  color: rgb(255 255 255 / 45%);
}

/* ---- tabs + counts ---- */
.msg-filters {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
}
.msg-tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}
.msg-tab {
  padding: 7px 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: none;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.msg-tab:hover {
  color: var(--text-primary);
}
.msg-tab.is-active {
  font-weight: 500;
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.38);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.14);
}
.msg-counts {
  font-size: 13px;
  white-space: nowrap;
  color: var(--text-muted);
}

/* ---- the list ---- */
.msg-list,
.msg-held {
  margin: 0 -24px;
  padding: 0;
  list-style: none;
}
.msg-list {
  flex: 0 1 620px;
  min-height: 0;
  overflow-y: auto;
  margin-top: 10px;
  scrollbar-width: none;
}
.msg-list::-webkit-scrollbar,
.msg-held::-webkit-scrollbar,
.msg-log::-webkit-scrollbar {
  display: none;
}
.msg-held {
  flex-shrink: 0;
  max-height: 0;
  overflow: hidden;
  scrollbar-width: none;
  transition: max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.msg-held.is-open {
  max-height: 240px;
  overflow-y: auto;
}
.msg-row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 12px;
  padding: 11px 30px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.msg-row::after {
  content: "";
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.msg-row:last-child::after {
  display: none;
}
.msg-row:hover:not(.is-selected) {
  background: rgba(255, 255, 255, 0.04);
}
.msg-row.is-opened {
  background: rgba(255, 255, 255, 0.08);
}
.msg-dot {
  width: 7px;
  height: 7px;
  margin-top: 7px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
}
.msg-row.is-unread .msg-dot {
  border-color: transparent;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}
.msg-row-main {
  min-width: 0;
}
.msg-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
}
.msg-row:not(.is-unread) .msg-name {
  font-weight: 400;
  color: var(--text-secondary);
}
.msg-preview {
  margin-top: 3px;
  font-size: 14px;
  color: var(--text-muted);
}
.msg-row-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  text-align: right;
}
.msg-meta {
  font-size: 13px;
  white-space: nowrap;
  color: var(--text-muted);
}
.msg-reply {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  color: var(--text-secondary);
  transition: color 0.2s ease;
}
.msg-reply:hover {
  color: var(--text-primary);
}
.msg-reply-icon {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* the strip that grows out of the selected row */
.msg-row-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease, margin-top 0.3s ease;
}
.msg-row.is-selected .msg-row-actions {
  max-height: 64px;
  opacity: 1;
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
}
.msg-actions-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  color: var(--text-secondary);
}
.msg-act-reply,
.msg-act-open {
  padding: 7px 18px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}
.msg-act-reply {
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.14);
}
.msg-act-reply:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.48);
  box-shadow: 0 0 26px rgba(255, 255, 255, 0.42), inset 0 0 12px rgba(255, 255, 255, 0.2);
}
.msg-act-open {
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.msg-act-open:hover {
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.24);
}
.msg-empty {
  padding: 22px 30px;
  font-size: 14px;
  color: var(--text-muted);
}

/* ---- held batch ---- */
.msg-batch {
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.msg-eyebrow {
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.msg-batch-line {
  margin-top: 6px;
  font-size: 15px;
  color: var(--text-primary);
}
.msg-batch-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 21px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 15px;
  white-space: nowrap;
  cursor: pointer;
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.14);
  transition: transform 0.12s ease, box-shadow 0.25s ease, border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.msg-batch-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.48);
  box-shadow: 0 0 26px rgba(255, 255, 255, 0.42), inset 0 0 12px rgba(255, 255, 255, 0.2);
}
.msg-batch-btn:active {
  transform: translateY(1px) scale(0.99);
}

/* ---- thread view ---- */
.msg-thread {
  display: none;
  flex-direction: column;
  flex: 0 1 620px;
  min-height: 0;
  margin-top: 10px;
}
.messages-widget.is-threaded .msg-search,
.messages-widget.is-threaded .msg-filters,
.messages-widget.is-threaded .msg-list,
.messages-widget.is-threaded .msg-batch,
.messages-widget.is-threaded .msg-held,
.messages-widget.is-threaded .msg-note {
  display: none;
}
.messages-widget.is-threaded .msg-thread {
  display: flex;
}
.msg-thread-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.msg-back {
  flex-shrink: 0;
  display: inline-flex;
  padding: 6px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  transition: color 0.2s ease;
}
.msg-back:hover {
  color: var(--text-primary);
}
.msg-back svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.msg-thread-who {
  min-width: 0;
}
.msg-thread-name {
  font-size: 17px;
  font-weight: 500;
  color: var(--text-primary);
}
.msg-thread-meta {
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-muted);
}
.msg-thread-to {
  display: none;
  flex: 1 1 auto;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 17px;
  color: var(--text-primary);
}
.msg-thread-to::placeholder {
  color: rgb(255 255 255 / 45%);
}
.messages-widget.is-new-thread .msg-thread-who {
  display: none;
}
.messages-widget.is-new-thread .msg-thread-to {
  display: block;
}
.msg-log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* the log clips horizontally, so pad it out to keep the sent-bubble glow */
  margin: 0 -10px;
  padding: 14px 12px 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: none;
}
.msg-bubble {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 16px;
}
.msg-bubble.is-them {
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
}
.msg-bubble.is-me {
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.14);
}
.msg-bubble-text {
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-primary);
}
.msg-bubble-time {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
}
.msg-bubble.is-me .msg-bubble-time {
  text-align: right;
}
.msg-log-empty {
  margin: auto;
  font-size: 14px;
  color: var(--text-muted);
}

/* ---- composer ---- */
.msg-composer {
  flex-shrink: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  transition: max-height 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease, margin-top 0.32s cubic-bezier(0.22, 1, 0.36, 1), padding 0.32s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s, box-shadow 0.25s;
}
.msg-composer.is-open {
  max-height: 110px;
  opacity: 1;
  margin-top: 14px;
  padding: 15px 20px;
  border-color: rgb(255 255 255 / 30%);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.05), inset 0 0 14px rgba(255, 255, 255, 0.03);
}
.msg-composer-to {
  display: none;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--text-muted);
}
.msg-composer.has-target .msg-composer-to {
  display: flex;
}
.msg-composer-cancel {
  padding: 0 2px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  color: var(--text-muted);
  transition: color 0.2s ease;
}
.msg-composer-cancel:hover {
  color: var(--text-primary);
}
.msg-composer-field {
  display: flex;
  align-items: center;
  gap: 12px;
}
.msg-composer:focus-within {
  border-color: rgb(255 255 255 / 86%);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05), 0 0 24px rgba(255, 255, 255, 0.12);
}
.msg-input {
  flex: 1 1 auto;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 15px;
  color: rgb(255 255 255 / 70%);
}
.msg-input::placeholder {
  color: rgb(255 255 255 / 70%);
}
.msg-enter {
  flex-shrink: 0;
  font-size: 15px;
  cursor: pointer;
  color: rgb(255 255 255 / 45%);
  transition: color 0.2s ease;
}
.msg-enter:hover {
  color: var(--text-primary);
}
.msg-preview.is-hit {
  font-style: italic;
  color: var(--text-secondary);
}

/* ---- note + footer ---- */
.msg-note {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
}
.msg-note-star {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  margin-top: 1px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.92);
  stroke-width: 0.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.55));
}
.msg-note-headline {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-primary);
}
.msg-note-sub {
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-muted);
}
.msg-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: 0.2px;
  color: var(--text-muted);
}
.msg-lock {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
  .msg-row-actions,
  .msg-held,
  .msg-composer {
    transition: none;
  }
}

@media (max-width: 920px) {
  .messages-widget {
    width: auto;
  }
}

/* ===================== CONTEXT CAPSULE WIDGET ===================== */
.context-capsule-widget {
  position: absolute;
  z-index: 5;
  width: var(--h-widget-width);
  height: var(--h-widget-height);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 22px 24px 18px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: none;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  color: var(--text-primary);
  overflow: hidden;
}
.cc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.cc-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.cc-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.cc-icon svg {
  display: block;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cc-icon svg circle {
  fill: rgba(255, 255, 255, 0.9);
  stroke: none;
}
.cc-title {
  font-size: 18px;
  font-weight: 500;
  margin-left: 5px;
  margin-top: -3px;
  color: var(--text-primary);
}
.cc-status-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
}
.cc-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.cc-action {
  background: none;
  border: none;
  cursor: pointer;
  padding: 7px;
  display: inline-flex;
  color: var(--text-secondary);
  transition: opacity 0.15s ease;
}
.cc-action:hover {
  opacity: 0.7;
}
.cc-action svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cc-action-pin svg {
  transform: rotate(40deg);
}
.context-capsule-widget.is-pinned .cc-action-pin {
  color: var(--text-primary);
}
.context-capsule-widget.collapsed {
  height: auto;
}
.context-capsule-widget.collapsed .cc-body,
.context-capsule-widget.collapsed .cc-stats,
.context-capsule-widget.collapsed .cc-sealed,
.context-capsule-widget.collapsed .cc-note,
.context-capsule-widget.collapsed .cc-footer {
  display: none;
}
.context-capsule-widget.collapsed [data-context-capsule-toggle] svg {
  transform: rotate(-90deg);
}

.cc-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 382px;
  gap: 18px;
  align-items: start;
  margin-top: 4px;
}

/* ---- the spiral of held context ---- */
.cc-scene {
  position: relative;
  aspect-ratio: 800 / 560;
}
.cc-arcs {
  position: absolute;
  inset: 0;
  width: 73%;
  height: 74%;
  overflow: visible;
  opacity: 0.85;
}
.cc-pulse {
  pointer-events: none;
  mix-blend-mode: screen;
  filter:
    brightness(4)
    drop-shadow(0 0 2px rgba(255, 255, 255, 1))
    drop-shadow(0 0 5px rgba(255, 255, 255, 0.9))
    drop-shadow(0 0 10px rgba(255, 255, 255, 0.55));
}
.cc-star {
  position: absolute;
  left: 27%;
  top: 46%;
  width: 120px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
  animation:
    ccSpin 48s linear infinite,
    ccStarBreathe 5s ease-in-out infinite,
    ccStarZoom 7s ease-in-out infinite;
}
/* scale is its own property, so the zoom stacks on the spin's transform. */
@keyframes ccStarZoom {
  0%,
  100% {
    scale: 1;
  }
  50% {
    scale: 1.08;
  }
}
@keyframes ccSpin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes ccStarBreathe {
  0%,
  100% {
    filter:
      drop-shadow(0 0 6px rgba(255, 255, 255, 0.55))
      drop-shadow(0 0 18px rgba(255, 255, 255, 0.3));
  }
  50% {
    filter:
      drop-shadow(0 0 12px rgba(255, 255, 255, 0.85))
      drop-shadow(0 0 34px rgba(255, 255, 255, 0.5));
  }
}
.cc-origin-label {
  position: absolute;
  left: 28%;
  top: 58%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 11px;
  color: var(--text-secondary);
}
.cc-arc-note {
  position: absolute;
  left: 52%;
  top: 42%;
  font-size: 11px;
  letter-spacing: 0.3px;
  color: var(--text-muted);
}
.cc-items {
  position: absolute;
  inset: 0;
}
.cc-item {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
  transition: opacity 0.45s ease;
}
.cc-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  position: relative;
  box-shadow:
    0 0 4px rgba(255, 255, 255, 1),
    0 0 9px rgba(255, 255, 255, 0.75);
  transition: box-shadow 0.45s ease, background 0.45s ease;
}
/* The halo is its own layer so the pulse rides on opacity, which interpolates
   smoothly, instead of on box-shadow, which reads as a blink. */
.cc-dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.22) 32%,
    rgba(255, 255, 255, 0.07) 55%,
    rgba(255, 255, 255, 0) 72%
  );
  animation: ccDotGlow 4.2s linear infinite;
  animation-delay: calc(var(--i, 0) * 0.7s);
}
/* Stops trace a sine so a linear timing function gives an even rise and fall,
   with no dwell at the ends and no rush through the middle. */
@keyframes ccDotGlow {
  0%,
  100% {
    opacity: 0.3;
  }
  12.5% {
    opacity: 0.43;
  }
  25% {
    opacity: 0.65;
  }
  37.5% {
    opacity: 0.87;
  }
  50% {
    opacity: 1;
  }
  62.5% {
    opacity: 0.87;
  }
  75% {
    opacity: 0.65;
  }
  87.5% {
    opacity: 0.43;
  }
}
.cc-item-label {
  font-size: 13px;
  color: var(--text-secondary);
}
.cc-item-sep,
.cc-item-meta {
  font-size: 12px;
  color: var(--text-muted);
}
.cc-item:hover .cc-item-label {
  color: #fff;
}
.cc-item.is-resumed {
  opacity: 0.32;
}
.cc-item.is-resumed .cc-dot {
  background: rgba(255, 255, 255, 0.4);
  box-shadow: none;
}
.cc-item.is-resumed .cc-dot::after {
  display: none;
}
.cc-arrivals {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
.cc-arrivals.is-resumed {
  opacity: 0;
}
.cc-trails {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  transform: rotate(-5deg);
}
.cc-trail {
  display: block;
  width: 86px;
  margin-left: calc(var(--i) * -47px);
  opacity: calc(1 - var(--i) * 0.15);
}
.cc-arrivals-caption {
  font-size: 8px;
  margin-top: -21px;
  margin-left: 53px;
  color: var(--text-muted);
}

/* ---- the sealed capsule panel ---- */
.cc-panel {
  padding: 18px 20px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.025) 100%);
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  border: none;
  box-shadow: none;
}
.cc-away {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--text-primary);
}
.cc-away-num {
  font-size: 70px;
  font-weight: 100;
  letter-spacing: -0.02em;
}
.cc-away-unit {
  font-size: 60px;
  font-weight: 100;
}
.cc-away-sub {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-muted);
}
.cc-eyebrow {
  margin-top: 40px;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--text-muted);
}
.cc-thought {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-primary);
}
.cc-resume-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 54px;
  margin-bottom: 13px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-primary);
  transition: opacity 0.15s ease;
}
.cc-resume-all:hover {
  opacity: 0.7;
}
.cc-resume-all-chevron {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cc-stats {
  margin-top: -79px;
  font-size: 12px;
  color: var(--text-muted);
}
.cc-sealed {
  margin-top: 12px;
  font-size: 15px;
  color: var(--text-primary);
}
.cc-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 8px;
}
.cc-note-star {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  margin-top: -1px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.92);
  stroke-width: 0.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.55));
}
.cc-note-headline {
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-primary);
}
.cc-footer {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 16px;
  font-size: 12px;
  letter-spacing: 0.2px;
  color: var(--text-muted);
}
.cc-lock {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
  .cc-star {
    animation: none;
    transform: translate(-50%, -50%);
  }
  .cc-pulse {
    display: none;
  }
  .cc-item,
  .cc-dot,
  .cc-arrivals {
    transition: none;
  }
  .cc-dot::after {
    animation: none;
  }
}

@media (max-width: 920px) {
  .context-capsule-widget {
    width: auto;
  }
  .cc-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===================== PROCRASTINATION RADAR WIDGET ===================== */
.procrastination-radar-widget {
  position: absolute;
  z-index: 5;
  zoom: 0.95;
  width: calc(var(--h-widget-width) / 0.95);
  height: calc(var(--h-widget-height) / 0.95);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 22px 24px 18px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: none;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  color: var(--text-primary);
  overflow: hidden;
}
.pr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.pr-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.pr-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.pr-icon svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pr-title {
  font-size: 20px;
  font-weight: 500;
  margin-left: 5px;
  color: var(--text-primary);
}
.pr-status-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}
.pr-actions {
  display: flex;
  align-items: center;
}
.pr-action {
  background: none;
  border: none;
  cursor: pointer;
  padding: 7px;
  display: inline-flex;
  color: var(--text-secondary);
  transition: opacity 0.15s ease;
}
.pr-action:hover {
  opacity: 0.7;
}
.pr-action svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pr-action-pin svg {
  transform: rotate(40deg);
}
.procrastination-radar-widget.is-pinned .pr-action-pin {
  color: var(--text-primary);
}
.procrastination-radar-widget > * {
  flex-shrink: 0;
}
.pr-body {
  display: flex;
  flex: 1;
  min-height: 0;
  align-items: flex-start;
  gap: 24px;
  margin: 6px 0 0 4px;
}
.procrastination-radar-widget.collapsed .pr-body,
.procrastination-radar-widget.collapsed .pr-footer {
  display: none;
}
.procrastination-radar-widget.collapsed [data-procrastination-radar-toggle] svg {
  transform: rotate(-90deg);
}

/* left column: the count, the no-blame copy, the twin note and the actions */
.pr-main {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 14px;
}
.pr-count-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.pr-count {
  font-size: 100px;
  font-weight: 400;
  line-height: 1;
  color: var(--text-primary);
}
.pr-count-label {
  margin-top: 40px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.pr-sub {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.pr-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 22px;
  max-width: 360px;
}
.pr-note-star {
  flex-shrink: 0;
  width: 26px;
  height: 48px;
  margin-top: -9px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.pr-note-headline {
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-primary);
}
.pr-note-sub {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}
.pr-buttons {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
}
.pr-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 37px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 17px;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.12s ease, box-shadow 0.25s ease, border-color 0.3s ease, background 0.3s ease, color 0.3s ease, opacity 0.25s ease;
}
.pr-btn:active {
  transform: translateY(1px) scale(0.99);
}
.pr-btn-bloom {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(60% 80% at 50% 100%, rgba(255, 255, 255, 0.35), transparent 70%);
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.pr-btn-primary:hover .pr-btn-bloom {
  opacity: 0.9;
}

/* right column: the staircase art, bled out to the widget edges so it may sit
   over the header and footer bands; pointer-events stay off it so the header
   buttons still work. The artwork shows whole — no crop and no edge fades. */
.pr-scene {
  position: relative;
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  align-items: flex-end;
  width: 360px;
  margin: -44px -24px -46px 0;
  pointer-events: none;
}
.pr-scene-art {
  position: relative;
  width: 132%;
  margin-left: -148px;
  margin-top: -32px;
}
.pr-scene-img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}
.pr-scene-label {
  position: absolute;
  left: 54%;
  top: 12%;
  transform: translateX(-50%);
  font-size: 14px;
  letter-spacing: 0.2px;
  white-space: nowrap;
  color: var(--text-secondary);
}

/* one layer per stair, each painting the whole lit artwork over the dark one at
   the same size and masked down to that stair's band. Dark by default;
   .pr-stair--lit fades the band in so a newly reached step arrives softly.
   The mask starts fading in above the band's own top edge, so the overlap is
   covered by the stair above once that lights up and no seam shows. */
.pr-stairs {
  position: absolute;
  inset: 0;
}
.pr-stair {
  position: absolute;
  inset: 0;
  background-image: var(--art);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.6s ease;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent var(--fade),
    #000 var(--top),
    #000 var(--bottom),
    transparent var(--bottom)
  );
  mask-image: linear-gradient(
    to bottom,
    transparent var(--fade),
    #000 var(--top),
    #000 var(--bottom),
    transparent var(--bottom)
  );
}
.pr-stair--lit {
  opacity: 1;
}

.pr-footer {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: -18px;
  font-size: 12px;
  letter-spacing: 0.2px;
  color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .pr-stair {
    transition: none;
  }
}

@media (max-width: 920px) {
  .procrastination-radar-widget {
    width: auto;
  }
  .pr-body {
    flex-direction: column;
    gap: 22px;
  }
  .pr-scene {
    width: 100%;
    margin: 0;
  }
}

/* ========================= DONE LIST WIDGET ========================= */
.done-list-widget {
  position: absolute;
  z-index: 5;
  zoom: 0.95;
  width: calc(var(--h-widget-width) / 0.95);
  height: calc(var(--h-widget-height) / 0.95);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 22px 24px 18px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: none;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  color: var(--text-primary);
  overflow: hidden;
}
.dn-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.dn-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.dn-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.dn-icon svg {
  display: block;
  width: 24px;
  height: 24px;
  transform: translate(2px, 0);
  fill: none;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dn-title {
  font-size: 20px;
  font-weight: 500;
  margin-left: 5px;
  color: var(--text-primary);
}
.dn-status-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}
.dn-actions {
  display: flex;
  align-items: center;
}
.dn-action {
  background: none;
  border: none;
  cursor: pointer;
  padding: 7px;
  display: inline-flex;
  color: var(--text-secondary);
  transition: opacity 0.15s ease;
}
.dn-action:hover {
  opacity: 0.7;
}
.dn-action svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dn-action-pin svg {
  transform: rotate(40deg);
}
.done-list-widget.is-pinned .dn-action-pin {
  color: var(--text-primary);
}
.done-list-widget.collapsed .dn-body,
.done-list-widget.collapsed .dn-footer {
  display: none;
}
.done-list-widget.collapsed [data-done-list-toggle] svg {
  transform: rotate(-90deg);
}

.done-list-widget > * {
  flex-shrink: 0;
}
.dn-body {
  position: relative;
  flex: 1;
  min-height: 0;
  margin-top: 4px;
}
.dn-daystamp {
  font-size: 12px;
  letter-spacing: 0.2px;
  color: var(--text-muted);
}
.dn-count-row {
  position: relative;
  z-index: 3;
  margin-top: 6px;
}
.dn-count {
  display: block;
  font-size: 74px;
  font-weight: 200;
  line-height: 1;
  color: var(--text-primary);
}
.dn-count-label {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

/* ---- the day as one horizontal current of light ---- */
.dn-stream {
  position: relative;
  height: 250px;
  margin-top: -80px;
}
/* The flow layer runs past the panel on both sides and carries a horizontal
   mask that is transparent at both ends, so the artwork dissolves before it
   reaches an edge instead of ending on a hard line. Nothing between it and the
   widget clips it. --glow-x/-y/-w place the artwork inside this box. */
.dn-flow {
  --glow-x: 50%;
  --glow-y: 50%;
  --glow-w: 72%;
  --focal-x: 82.5%;
  --focal-y: 35.4%;
  --focal-size: 32px;
  position: absolute;
  left: -180px;
  right: -206px;
  top: 6px;
  bottom: -45px;
  pointer-events: none;
  z-index: 1;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 6%, #000 22%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, transparent 6%, #000 22%, #000 100%);
}
/* Two copies of the same artwork on screen blend: the base one only breathes,
   the overlay is warped by #dnFlow so the light drifts inside a shape that
   never moves. The two loops are different lengths so they never phase-lock. */
.dn-glow {
  position: absolute;
  left: var(--glow-x);
  top: var(--glow-y);
  width: var(--glow-w);
  height: auto;
  opacity: 0.5;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  pointer-events: none;
  -webkit-user-drag: none;
  will-change: transform, filter;
  animation: dnGlowBreathe 4.2s ease-in-out infinite;
}
.dn-glow-overlay {
  opacity: 0.35;
  filter: url(#dnFlow);
  animation: dnGlowFlow 5s ease-in-out infinite;
}
/* A soft halo sitting on the artwork's left burst, so that node reads as a
   light source rather than a painted dot. --focal-x/-y/--focal-size place it. */
.dn-glow-focal {
  position: absolute;
  left: var(--focal-x);
  top: var(--focal-y);
  width: var(--focal-size);
  height: var(--focal-size);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.92) 12%,
    rgba(255, 255, 255, 0.55) 30%,
    rgba(255, 255, 255, 0.2) 55%,
    rgba(255, 255, 255, 0) 76%
  );
  filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.55));
  mix-blend-mode: screen;
  pointer-events: none;
  will-change: opacity, transform;
  animation: dnFocalGlow 4.6s ease-in-out infinite;
}
@keyframes dnFocalGlow {
  0%, 100% { opacity: 0.88; transform: translate(-50%, -50%) scale(0.94); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
}
/* The caption for the focal light. */
.dn-focal-label {
  position: absolute;
  left: 1094px;
  top: calc(var(--focal-y) - 48px);
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 11px;
  color: var(--text-secondary);
  pointer-events: none;
}
.dn-flow-defs {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}
@keyframes dnGlowBreathe {
  0% {
    transform: translate(-50%, -50%);
    filter: brightness(1) drop-shadow(0 0 6px rgba(255, 255, 255, 0.08));
  }
  50% {
    transform: translate(-50%, calc(-50% - 1px));
    filter: brightness(1.05) drop-shadow(0 0 11px rgba(255, 255, 255, 0.13));
  }
  100% {
    transform: translate(-50%, -50%);
    filter: brightness(1) drop-shadow(0 0 6px rgba(255, 255, 255, 0.08));
  }
}
@keyframes dnGlowFlow {
  0% {
    transform: translate(-50%, -50%);
    opacity: 0.28;
    filter: url(#dnFlow) brightness(1.05);
  }
  33% {
    transform: translate(calc(-50% + 0.8px), calc(-50% + 0.7px));
    opacity: 0.35;
    filter: url(#dnFlow) brightness(1.07);
  }
  66% {
    transform: translate(calc(-50% - 0.4px), -50%);
    opacity: 0.32;
    filter: url(#dnFlow) brightness(1.045);
  }
  100% {
    transform: translate(-50%, -50%);
    opacity: 0.28;
    filter: url(#dnFlow) brightness(1.05);
  }
}

/* ---- the anchored nodes: they stay put and only breathe ---- */
.dn-marks {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.dn-mark {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dn-mark--above {
  transform: translate(-50%, -100%);
  flex-direction: column-reverse;
}
.dn-mark--below {
  transform: translate(-50%, 0);
}
.dn-node {
  display: block;
  width: 74px;
  height: auto;
  mix-blend-mode: screen;
  will-change: opacity, transform;
  animation: dnNodePulse 5.5s ease-in-out var(--pulse-delay, 0s) infinite;
}
@keyframes dnNodePulse {
  0%, 100% { opacity: 0.78; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1.05); }
}
.dn-label {
  margin: -10px 0;
  text-align: left;
  white-space: nowrap;
}
.dn-label-line {
  font-size: 11.5px;
  color: var(--text-primary);
}
.dn-label-time {
  color: var(--text-secondary);
}
.dn-label-sub {
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-muted);
}

.dn-quiet {
  position: absolute;
  left: 60%;
  bottom: 26px;
  z-index: 2;
  transform: translateX(-50%);
  text-align: center;
  font-size: 10px;
  line-height: 1.5;
  color: var(--text-muted);
}

.dn-axis {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22px;
  z-index: 2;
}
.dn-tick {
  position: absolute;
  left: var(--x, 0%);
  top: 0;
  transform: translateX(-50%);
  padding-top: 9px;
  font-size: 11px;
  color: var(--text-muted);
}
.dn-tick::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 5px;
  background: rgba(255, 255, 255, 0.25);
}

.dn-stats {
  margin-top: 20px;
  font-size: 12px;
  color: var(--text-muted);
}
.dn-summary {
  margin-top: 20px;
  font-size: 16px;
  font-weight: 300;
  color: var(--text-primary);
}
.dn-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}
.dn-note-star {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 4px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.dn-note-text {
  font-size: 15px;
  font-weight: 300;
  color: var(--text-primary);
}

.dn-footer {
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: 0.2px;
  color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .dn-glow-overlay {
    filter: none;
  }
}

@media (max-width: 920px) {
  .done-list-widget {
    width: auto;
  }
}

/* ===================== PLANNER WIDGET ===================== */
.planner-widget {
  position: absolute;
  z-index: 5;
  zoom: 0.95;
  width: calc(var(--h-widget-width) / 0.95);
  height: calc(var(--h-widget-height) / 0.95);
  max-width: 94vw;
  /* row height (38px) plus its 6px gap, so list windows are exact multiples */
  --pl-row-pitch: 44px;
  display: flex;
  flex-direction: column;
  padding: 22px 24px 18px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: none;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  color: var(--text-primary);
  overflow: hidden;
}
.planner-widget:focus {
  outline: none;
}
.pl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.pl-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.pl-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.pl-icon svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pl-title {
  font-size: 20px;
  font-weight: 500;
  margin-left: 5px;
  color: var(--text-primary);
}
.pl-status-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.6);
}
.pl-head-meta {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: auto;
  font-size: 15px;
  white-space: nowrap;
}
.pl-head-date {
  color: var(--text-primary);
}
.pl-head-stats {
  color: var(--text-muted);
}
.pl-actions {
  display: flex;
  align-items: center;
}
.pl-action {
  background: none;
  border: none;
  cursor: pointer;
  padding: 7px;
  display: inline-flex;
  color: var(--text-secondary);
  transition: opacity 0.15s ease;
}
.pl-action:hover {
  opacity: 0.7;
}
.pl-action svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pl-action-pin svg {
  transform: rotate(40deg);
}
.planner-widget.is-pinned .pl-action-pin {
  color: var(--text-primary);
}
.planner-widget.collapsed .pl-body,
.planner-widget.collapsed .pl-footer {
  display: none;
}
.planner-widget.collapsed [data-planner-toggle] svg {
  transform: rotate(-90deg);
}
.pl-body {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 26px;
  margin-top: 14px;
}
.pl-eyebrow {
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}

/* left column — the day grid */
.pl-grid {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 2px;
}
.pl-hours {
  display: flex;
  flex-direction: column;
  font-size: 11.5px;
  color: var(--text-muted);
}
.pl-hour {
  height: 42px;
  line-height: 1;
}
.pl-track {
  position: relative;
}
/* half an hour-row past the last block, so the rail ends beside 8 PM */
.pl-track::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: calc(100% + 10px);
  background: rgba(255, 255, 255, 0.07);
  pointer-events: none;
}
.pl-ticks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.pl-tick {
  position: absolute;
  left: -2px;
  margin-top: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.45);
}
.pl-events {
  position: absolute;
  inset: 0;
  margin-left: 20px;
  margin-right: -20px;
}
.pl-event {
  position: absolute;
  left: 6px;
  right: 0;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  overflow: hidden;
  cursor: grab;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.25s ease;
}
.pl-event:hover {
  background: rgba(255, 255, 255, 0.07);
}
.pl-event.is-selected {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 24px rgba(255, 255, 255, 0.16), inset 0 0 10px rgba(255, 255, 255, 0.08);
}
.pl-event--break {
  background: rgba(255, 255, 255, 0.025);
}
.pl-event-title {
  font-size: 12.5px;
  line-height: 1.25;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pl-event-time {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pl-event-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-secondary);
}
.pl-event-tag-icon,
.pl-event-people-icon {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pl-event-people {
  position: absolute;
  right: 10px;
  bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
}
.pl-event-grip {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 6px;
  cursor: ns-resize;
}
.pl-event-rename {
  width: 100%;
  padding: 0;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--text-primary);
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  outline: none;
}
.pl-drop-preview {
  position: absolute;
  left: 6px;
  right: 0;
  margin-left: 20px;
  margin-right: -20px;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 11px;
  color: var(--text-secondary);
  border: 1px dashed rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.05);
  pointer-events: none;
}
.pl-now {
  position: absolute;
  left: 0;
  right: -58px;
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}
.pl-now-line {
  position: relative;
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
  transition: opacity 0.2s ease;
}
/* a block parked over the current time dims the line only — dot and label stay lit */
.pl-now.is-covered .pl-now-line {
  opacity: 0.28;
}
.pl-now::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}
.pl-now-label {
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--text-primary);
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}
.pl-legend {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: -20px;
  margin-left: 52px;
  font-size: 11.5px;
  color: var(--text-muted);
}
.pl-legend-swatch {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.16);
}

/* right column — the lists */
.pl-side {
  min-width: 0;
  margin-left: 50px;
}
.pl-zone {
  min-height: 34px;
  border-radius: 12px;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.pl-zone.is-drop-target {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.pl-insert-line {
  height: 2px;
  margin: 2px 0 6px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}
.pl-tasks,
.pl-unscheduled,
.pl-yesterday {
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pl-tasks::-webkit-scrollbar,
.pl-unscheduled::-webkit-scrollbar,
.pl-yesterday::-webkit-scrollbar {
  display: none;
}
/* fixed window: the Add task button below must not creep up as rows are removed */
.pl-tasks {
  height: calc(5 * var(--pl-row-pitch));
}
.pl-unscheduled {
  max-height: calc(3 * var(--pl-row-pitch));
}
.pl-yesterday {
  max-height: calc(2 * var(--pl-row-pitch));
}
.pl-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  margin-bottom: 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
  cursor: grab;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.2s ease;
}
.pl-row:hover {
  background: rgba(255, 255, 255, 0.06);
}
.pl-row.is-scheduled {
  border-color: rgba(255, 255, 255, 0.16);
}
.pl-check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.28);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.pl-check-tick {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: #0f1211;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.pl-row.is-done .pl-check {
  background: #f7f7f7;
  border-color: #ffffff;
}
.pl-row.is-done .pl-check-tick {
  opacity: 1;
}
.pl-row-title {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pl-row.is-done .pl-row-title {
  color: var(--text-muted);
}
.pl-row-dur {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--text-muted);
}
.pl-row-dur-icon {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pl-kebab {
  flex-shrink: 0;
  padding: 2px;
  display: inline-flex;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  transition: color 0.15s ease;
}
.pl-kebab:hover {
  color: var(--text-primary);
}
.pl-kebab-icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
  stroke: none;
}
.pl-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  margin-top: 16px;
}
.pl-eyebrow-yesterday {
  margin-top: 16px;
}
.pl-add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 6px 2px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.15s ease;
}
.pl-add:hover {
  color: var(--text-primary);
}
.pl-add-icon svg {
  display: block;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pl-add-form {
  display: grid;
  grid-template-rows: 0fr;
  /* wider than its own column, so it has to sit above the next one to stay clickable */
  position: relative;
  z-index: 2;
  width: 180%;
  opacity: 0;
  overflow: hidden;
  transition: grid-template-rows 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease;
}
.pl-add-form.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}
.pl-add-form.is-settled {
  overflow: visible;
}
.pl-add-fields {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 160px;
  gap: 8px;
  align-items: center;
}
.pl-add-pair {
  display: contents;
}
.pl-add-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgb(255 255 255 / 86%);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.14);
  background: rgb(255 255 255 / 5%);
}
.pl-add-box--tight {
  padding: 8px 12px;
}
.pl-add-input {
  flex: 1;
  min-width: 0;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: 13.5px;
  color: rgb(255 255 255 / 70%);
  background: transparent;
  border: none;
  outline: none;
}
.pl-add-input::placeholder {
  color: rgb(255 255 255 / 70%);
}
.pl-add-hint {
  flex-shrink: 0;
  font-size: 12px;
  color: rgb(255 255 255 / 35%);
}
.pl-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 16px;
  width: 170%;
}
.pl-note-star {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  margin-top: -2px;
  fill: none;
  stroke: currentColor;
}
.pl-note-text {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-primary);
}
.pl-footer {
  margin-top: 16px;
  font-size: 12px;
  letter-spacing: 0.2px;
  color: var(--text-muted);
}

/* shared kebab popup + drag ghost */
.pl-menu {
  position: absolute;
  z-index: 20;
  min-width: 190px;
  padding: 6px;
  border-radius: 12px;
  background: rgba(20, 23, 22, 0.92);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
}
.pl-menu-item {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 12.5px;
  text-align: left;
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.pl-menu-item:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-primary);
}
.pl-menu-item.is-danger:hover {
  color: var(--accent-red);
}
.pl-ghost {
  position: absolute;
  z-index: 30;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  pointer-events: none;
}
.planner-widget.pl-dragging-task .pl-row {
  cursor: grabbing;
}

@media (prefers-reduced-motion: reduce) {
  .pl-event,
  .pl-row,
  .pl-check,
  .pl-check-tick,
  .pl-add-form {
    transition: none;
  }
}

@media (max-width: 920px) {
  .planner-widget {
    width: auto;
  }
  .pl-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .pl-cols {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===================== MEAL LOG WIDGET ===================== */
.meal-log-widget {
  position: absolute;
  z-index: 5;
  width: var(--sq-widget-width);
  height: var(--sq-widget-height);
  max-width: 96vw;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 24px 16px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: none;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  color: var(--text-primary);
  overflow: hidden;
}

/* ---- header ---- */
.ml-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ml-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ml-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.ml-head-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ml-head-line {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ml-icon svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 1.4;
  stroke-linecap: round;
}
.ml-title {
  font-size: 16px;
  font-weight: 500;
  margin-left: 5px;
  color: var(--text-primary);
}
.ml-status-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}
.ml-head-meta {
  margin-left: 5px;
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ml-actions {
  display: flex;
  align-items: center;
}
.ml-action {
  background: none;
  border: none;
  cursor: pointer;
  padding: 7px;
  display: inline-flex;
  color: var(--text-secondary);
  transition: opacity 0.15s ease;
}
.ml-action:hover {
  opacity: 0.7;
}
.ml-action svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ml-action-pin svg {
  transform: rotate(40deg);
}
.meal-log-widget.is-pinned .ml-action-pin {
  color: var(--text-primary);
}
.meal-log-widget.collapsed {
  height: auto;
}
.meal-log-widget.collapsed .ml-body,
.meal-log-widget.collapsed .ml-footer {
  display: none;
}

/* ---- two-column body: fixed day rail, scrolling side ---- */
.ml-body {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 26px;
  margin-left: 4px;
  align-items: stretch;
  flex: 1;
  min-height: 0;
}
.ml-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ml-eyebrow {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.ml-eyebrow--muted {
  opacity: 0.75;
}

/* ---- left rail ---- */
.ml-day {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* the column clips overflow-x, so pad it out to keep the primary button glow */
  padding: 0 10px;
  margin: 0 -10px;
}
.ml-hero {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.ml-hero-num {
  font-size: 52px;
  font-weight: 200;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--text-primary);
}
.ml-hero-of {
  font-size: 15px;
  color: var(--text-secondary);
}
.ml-hero-line {
  margin-top: 8px;
  font-size: 15px;
  color: var(--text-primary);
}
.ml-hero-meta {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-secondary);
  opacity: 0.8;
}
.ml-day .ml-eyebrow {
  margin-top: 20px;
}
.ml-timeline {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ml-timeline::-webkit-scrollbar {
  display: none;
}
.ml-meal {
  position: relative;
  display: grid;
  grid-template-columns: 14px 22px minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  padding: 9px 6px;
  margin: 0 -6px;
  border: none;
  border-radius: 10px;
  background: none;
  font-family: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: background 0.18s ease;
}
.ml-meal-rail {
  position: relative;
  display: block;
  height: 134%;
  min-height: 34px;
}
.ml-meal-rail::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 14px;
  bottom: -14px;
  width: 1px;
  background: rgba(255, 255, 255, 0.12);
}
.ml-meal:last-child .ml-meal-rail::before {
  display: none;
}
.ml-meal-dot {
  position: absolute;
  left: 1px;
  top: 5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.55);
}
.ml-meal--empty .ml-meal-dot {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: none;
}
.ml-meal-badge {
  display: grid;
  place-items: center;
  padding-top: 2px;
}
.ml-log-icon {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.75);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ml-meal-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ml-meal-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.ml-meal-name {
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
}
.ml-meal-name:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ml-meal-time,
.ml-meal-note,
.ml-meal-hint {
  font-size: 11px;
  color: var(--text-secondary);
}
.ml-meal-hint {
  opacity: 0.65;
}
.ml-meal-kcal {
  font-size: 14px;
  color: var(--text-primary);
}
.ml-meal--empty .ml-meal-kcal {
  color: var(--text-secondary);
}
.ml-day-actions {
  margin-top: 18px;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 10px;
}
.ml-day-actions .ml-btn {
  flex: 0 0 auto;
  max-width: 100%;
}
.ml-day-actions .ml-btn-label {
  white-space: nowrap;
}
.ml-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.ml-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.ml-btn-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ml-write-wrap {
  display: grid;
  grid-template-rows: 0fr;
  flex: 0 0 auto;
  opacity: 0;
  overflow: hidden;
  transition: grid-template-rows 0.28s ease, margin-top 0.28s ease, opacity 0.2s ease;
}
.meal-log-widget.ml-writing .ml-write-wrap {
  grid-template-rows: 1fr;
  margin-top: 10px;
  opacity: 1;
}
.ml-write-input {
  min-height: 0;
  width: calc(100% - 20px);
  margin: 0 10px;
  padding: 0 0 6px;
  border: none;
  border-bottom: 1px solid rgb(255 255 255 / 18%);
  background: none;
  font: inherit;
  font-size: 12px;
  color: rgb(255 255 255 / 88%);
  outline: none;
  transition: border-color 200ms ease;
}
.ml-write-input::placeholder {
  color: rgb(255 255 255 / 28%);
}
.ml-write-input:focus {
  border-bottom-color: rgb(255 255 255 / 38%);
}
.ml-day-hint {
  margin-top: 14px;
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--text-secondary);
  opacity: 0.75;
}
.ml-source-menu {
  position: absolute;
  z-index: 30;
  margin-top: 6px;
  min-width: 190px;
  padding: 6px;
  border-radius: 12px;
  background: rgba(18, 20, 20, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
}
.ml-source-item {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 12.5px;
  text-align: left;
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.ml-source-item:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-primary);
}

/* ---- middle: photo reading ---- */
.ml-reading {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.ml-reading-eyebrow {
  text-align: center;
}
.ml-photo {
  position: relative;
  aspect-ratio: 1 / 0.86;
  height: 240px;
  width: auto;
  max-width: 100%;
  align-self: center;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
/* The radial edge mask fades the frame into the card, so the dish reads as
   lifted off its background until real segmentation lands. */
.ml-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  -webkit-mask-image: radial-gradient(120% 120% at 50% 48%, #000 58%, transparent 100%);
  mask-image: radial-gradient(120% 120% at 50% 48%, #000 58%, transparent 100%);
}
.ml-found {
  display: flex;
  flex-direction: column;
}
.ml-found-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 74px 56px;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 12.5px;
  color: var(--text-primary);
}
.ml-found-row--total {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.ml-found-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ml-found-amount,
.ml-found-kcal {
  text-align: right;
  color: var(--text-secondary);
}
.ml-found-row--total .ml-found-kcal {
  color: var(--text-primary);
  white-space: nowrap;
}
.ml-cell {
  padding: 2px 4px;
  margin: -2px -4px;
  border: none;
  border-radius: 6px;
  background: none;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  cursor: text;
  transition: background 0.15s ease;
}
.ml-cell:hover {
  background: rgba(255, 255, 255, 0.07);
}
.ml-cell-input {
  width: 100%;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  text-align: inherit;
  color: var(--text-primary);
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  outline: none;
}
.ml-reading-hint {
  font-size: 10.5px;
  color: var(--text-secondary);
  opacity: 0.75;
}
.ml-retake {
  align-self: stretch;
}

/* ---- right: macros ---- */
.ml-macros {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.ml-macros-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.ml-macro-rows {
  display: flex;
  flex-direction: column;
}
.ml-macro-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px 82px;
  align-items: baseline;
  gap: 27px;
  padding: 6px 0;
}
.ml-macro-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.ml-macro-label {
  font-size: 13px;
  color: var(--text-primary);
}
.ml-macro-sub {
  font-size: 10.5px;
  color: var(--text-secondary);
  opacity: 0.8;
}
.ml-macro-value {
  text-align: right;
  font-size: 13px;
  color: var(--text-primary);
}
.ml-macro-ref {
  font-size: 10.5px;
  color: var(--text-secondary);
  opacity: 0.8;
}
/* Off-target rows breathe like a warning lamp until the user corrects them. */
.ml-macro-row.is-flagged .ml-macro-label,
.ml-macro-row.is-flagged .ml-macro-value {
  animation: mlFlagPulse 1.8s ease-in-out infinite;
}
@keyframes mlFlagPulse {
  0%,
  100% {
    color: var(--text-muted);
  }
  50% {
    color: var(--text-primary);
  }
}
.ml-micro-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.ml-micro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 6px;
  font-size: 11.5px;
}
.ml-micro-label {
  color: var(--text-primary);
}
.ml-micro-value {
  text-align: right;
  color: var(--text-primary);
}
.ml-micro-status {
  grid-column: 1 / -1;
  font-size: 10px;
  color: var(--text-secondary);
  opacity: 0.8;
}
.ml-macros-hint,
.ml-macros-note {
  font-size: 10px;
  color: var(--text-secondary);
  opacity: 0.7;
}
.ml-suggest {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.ml-suggest-main {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ml-suggest-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.ml-suggest-icon svg {
  width: 30px;
  height: 27px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ml-suggest-title {
  font-size: 13.5px;
  color: var(--text-primary);
}
.ml-suggest-sub {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-secondary);
}
.ml-suggest-actions {
  display: flex;
  gap: 10px;
}

/* ---- footer ---- */
.ml-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.ml-footer-lead {
  font-size: 13px;
  color: var(--text-primary);
}
.ml-footer-prompt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}
.ml-footer-star {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 0.9;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
}
.ml-footer-privacy {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  color: var(--text-secondary);
  opacity: 0.75;
}
.ml-lock {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- row animations ---- */
/* Found rows unroll downward like a dropped banner, one after another. */
.ml-found.ml-drop-in .ml-found-row {
  animation: mlDropIn 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
  animation-delay: calc(var(--i) * 80ms);
}
@keyframes mlDropIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
    clip-path: inset(0 0 100% 0);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
  }
}
/* Macro rows sweep in from the left fast enough to read as one motion. */
.ml-macro-rows.ml-sweep-in .ml-macro-row,
.ml-micro-grid.ml-sweep-in .ml-micro {
  animation: mlSweepIn 0.34s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
  animation-delay: calc(var(--i) * 45ms);
}
@keyframes mlSweepIn {
  from {
    opacity: 0;
    transform: translateX(-14px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ml-found.ml-drop-in .ml-found-row,
  .ml-macro-rows.ml-sweep-in .ml-macro-row,
  .ml-micro-grid.ml-sweep-in .ml-micro {
    animation: none;
  }
  .ml-write-wrap {
    transition: none;
  }
  .ml-macro-row.is-flagged .ml-macro-label,
  .ml-macro-row.is-flagged .ml-macro-value {
    animation: none;
    color: var(--text-primary);
  }
}

@media (max-width: 1120px) {
  .meal-log-widget {
    width: auto;
  }
  .ml-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============ Your Turn ============ */
.your-turn-widget {
  position: absolute;
  z-index: 5;
  zoom: 0.95;
  width: calc(var(--sq-widget-width) / 0.95);
  height: calc(var(--sq-widget-height) / 0.95);
  max-width: 96vw;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 24px 16px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: none;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  color: var(--text-primary);
  overflow: hidden;
}

/* ---- header ---- */
.yt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.yt-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.yt-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.yt-icon svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 1.4;
  stroke-linecap: round;
}
.yt-title {
  font-size: 20px;
  font-weight: 500;
  margin-left: 5px;
  color: var(--text-primary);
}
.yt-status-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}
.yt-actions {
  display: flex;
  align-items: center;
}
.yt-action {
  background: none;
  border: none;
  cursor: pointer;
  padding: 7px;
  display: inline-flex;
  color: var(--text-secondary);
  transition: opacity 0.15s ease;
}
.yt-action:hover {
  opacity: 0.7;
}
.yt-action svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.yt-action-pin svg {
  transform: rotate(40deg);
}
.your-turn-widget.is-pinned .yt-action-pin {
  color: var(--text-primary);
}
.your-turn-widget.collapsed .yt-body,
.your-turn-widget.collapsed .yt-footer {
  display: none;
}

/* ---- two columns ---- */
.yt-body {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 26px;
  align-items: start;
  flex: 1;
  min-height: 0;
}
.your-turn-widget > * {
  flex-shrink: 0;
}
.your-turn-widget > .yt-body {
  flex-shrink: 1;
}

/* ---- left: the stage ---- */
.yt-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.yt-when {
  align-self: flex-start;
  font-size: 11px;
  color: var(--text-muted);
}
.yt-scene {
  /* how far the creature rides up on the breath — the cluster and the tear
     anchors borrow it so everything on the body floats together */
  --yt-float: 16px;
  position: relative;
  width: 100%;
  height: 346px;
}
.yt-ground {
  position: absolute;
  left: 50%;
  bottom: -169px;
  width: 150%;
  transform: translateX(-50%);
  opacity: 0.6;
  pointer-events: none;
  animation: yt-ground-breathe 7s ease-in-out infinite;
}
/* One layer carries the float, so the creature, its cluster and its tears
   rise and settle on exactly the same beat instead of three near-beats. */
.yt-float {
  position: absolute;
  inset: 0;
  will-change: transform;
  animation: yt-float 5s ease-in-out infinite;
}
@keyframes yt-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(calc(var(--yt-float) * -1));
  }
}
/* The pose spring writes its transform here every frame a mood is changing,
   so the body, its cluster and its tears squash and lift as one. The origin
   sits at the creature's feet, otherwise a squash shrinks it towards the
   middle of the scene instead of pressing it into the floor. */
.yt-spring {
  --yt-lift: 10px;
  --yt-anchor: 53% 88%;
  position: absolute;
  inset: 0;
  transform-origin: var(--yt-anchor);
  will-change: transform;
}
.yt-char-stack {
  position: absolute;
  inset: 0;
  cursor: pointer;
}
.yt-char {
  position: absolute;
  left: 53%;
  top: 64%;
  width: 130%;
  transform: translate(-50%, -50%);
  object-fit: contain;
  opacity: 0;
  will-change: transform, opacity, filter;
  pointer-events: none;
}
.yt-char.is-active {
  opacity: 1;
  animation: yt-char-breathe 5s ease-in-out infinite;
}
.yt-char-stack.is-laughing .yt-char.is-active {
  animation: yt-char-laugh 0.5s ease-in-out 4;
}
@keyframes yt-char-breathe {
  0%,
  100% {
    filter: brightness(1) drop-shadow(0 0 8px rgba(255, 255, 255, 0.1));
  }
  50% {
    filter: brightness(1.14) drop-shadow(0 0 22px rgba(255, 255, 255, 0.26));
  }
}
@keyframes yt-char-laugh {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
  40% {
    transform: translate(-50%, calc(-50% - 5px)) scale(1.025);
  }
}
@keyframes yt-ground-breathe {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.72;
  }
}

/* tears — drops of light leaving each eye of the crying pose. They fade out
   in mid-air, short of the floor glow, so nothing ever lands. */
.yt-tears {
  --tear-w: 56px;
  --tear-fall: 175px;
  --tear-dur: 3s;
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  pointer-events: none;
}
.yt-scene.is-crying .yt-tears {
  display: block;
}
.yt-tear-eye {
  position: absolute;
  left: var(--tear-x, 50%);
  top: var(--tear-y, 50%);
  width: 0;
  height: 0;
  animation: yt-eye-float 5s ease-in-out infinite;
}
@keyframes yt-eye-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(calc(var(--yt-float) * -1));
  }
}
.yt-tear {
  position: absolute;
  left: -49px;
  top: -60px;
  width: var(--tear-w);
  margin-left: calc(var(--tear-w) / -2);
  opacity: 0;
  will-change: transform, opacity;
  animation: yt-tear-fall var(--tear-dur) cubic-bezier(0.4, 0, 0.9, 0.6)
    var(--tear-delay, 0s) infinite;
}
@keyframes yt-tear-fall {
  0% {
    transform: translate(0, 0) scale(0.45);
    opacity: 0;
  }
  12% {
    transform: translate(0, calc(var(--tear-fall) * 0.09)) scale(1);
    opacity: 0.92;
  }
  100% {
    transform: translate(var(--tear-drift, 0), var(--tear-fall)) scale(0.7);
    opacity: 0;
  }
}

/* chest cluster — its own layer over the artwork, so a click here can only
   ever open the history */
.yt-cluster {
  position: absolute;
  left: var(--cluster-x, 50%);
  top: var(--cluster-y, 62%);
  z-index: 2;
  width: 0;
  height: 0;
  transform: scale(var(--cluster-scale, 1));
  cursor: pointer;
  animation: yt-cluster-float 5s ease-in-out infinite;
}
@keyframes yt-cluster-float {
  0%,
  100% {
    transform: translateY(0) scale(var(--cluster-scale, 1));
  }
  50% {
    transform: translateY(calc(var(--yt-float) * -1)) scale(var(--cluster-scale, 1));
  }
}
.yt-scene.is-crying .yt-cluster {
  display: none;
}
.yt-dot {
  position: absolute;
  left: var(--dot-x, 0);
  top: var(--dot-y, 0);
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  box-shadow:
    0 0 3px rgba(255, 255, 255, 0.9),
    0 0 7px rgba(255, 255, 255, 0.55);
  transition: background 0.5s ease, box-shadow 0.5s ease, transform 0.5s ease;
}
.yt-dot.is-lit {
  background: #fff;
  box-shadow:
    0 0 4px rgba(255, 255, 255, 1),
    0 0 10px rgba(255, 255, 255, 0.8);
  transform: scale(1.3);
}
/* The halo is its own layer so the twinkle rides on opacity, which
   interpolates smoothly, instead of on box-shadow, which reads as a blink. */
.yt-dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.22) 32%,
    rgba(255, 255, 255, 0.07) 55%,
    rgba(255, 255, 255, 0) 72%
  );
  animation: yt-dot-glow 4.2s linear infinite;
  animation-delay: calc(var(--i, 0) * 0.45s);
}
/* Stops trace a sine so a linear timing function gives an even rise and fall,
   with no dwell at the ends and no rush through the middle. */
@keyframes yt-dot-glow {
  0%,
  100% {
    opacity: 0.3;
  }
  12.5% {
    opacity: 0.43;
  }
  25% {
    opacity: 0.65;
  }
  37.5% {
    opacity: 0.87;
  }
  50% {
    opacity: 1;
  }
  62.5% {
    opacity: 0.87;
  }
  75% {
    opacity: 0.65;
  }
  87.5% {
    opacity: 0.43;
  }
}
.yt-stage-note {
  margin-top: 109px;
  margin-bottom: 0px;
  font-size: 11px;
  line-height: 1.6;
  text-align: center;
  color: var(--text-muted);
}

/* ---- right: the invitation ---- */
.yt-aside {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.yt-eyebrow {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.yt-headline {
  font-size: 26px;
  font-weight: 300;
  line-height: 1.2;
  color: var(--text-primary);
}
.yt-sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.yt-pick-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.yt-picks {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  transition: opacity 0.2s ease;
}
.yt-picks.is-swapping {
  opacity: 0;
}
.yt-pick {
  max-height: 24px;
  overflow: hidden;
  background: none;
  border: none;
  padding: 2px 0;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.2s ease, opacity 0.35s ease, max-height 0.35s ease;
}
.yt-pick::before {
  content: "— ";
  color: var(--text-muted);
}
.yt-pick:hover {
  color: var(--text-primary);
}
.yt-pick.is-chosen {
  color: var(--text-primary);
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.35);
  cursor: default;
}
.yt-pick.is-dropped {
  max-height: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}
.yt-held {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
}
.yt-more {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-top: 8px;
}
.yt-swap,
.yt-own {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s ease, opacity 0.2s ease;
}
.yt-swap:hover,
.yt-own:hover {
  color: var(--text-secondary);
}
.yt-swap:disabled,
.yt-own:disabled {
  opacity: 0.35;
  cursor: default;
}
.yt-own-input,
.yt-feedback-input {
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 6px 0;
  font-size: 13px;
  color: var(--text-primary);
  outline: none;
}
.yt-own-input {
  margin-top: 6px;
}
.yt-feedback {
  margin-top: 14px;
  opacity: 0.4;
  transition: opacity 1.2s ease;
}
.yt-feedback.is-awake {
  opacity: 1;
}
.yt-feedback.is-awake .yt-feedback-input {
  border-bottom-color: rgba(255, 255, 255, 0.32);
}
.yt-feedback-hint {
  margin-top: 5px;
  font-size: 10px;
  color: var(--text-muted);
}
.yt-note-line {
  margin-top: 14px;
  font-size: 12px;
  color: var(--text-secondary);
}
.yt-note-prompt {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}
.yt-note-star {
  flex-shrink: 0;
  width: 21px;
  height: 21px;
  margin-top: 3px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}

/* ---- footer ---- */
.yt-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  margin-left: 389px;
  font-size: 12px;
  color: var(--text-muted);
}
.yt-lock {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}

/* ---- history overlay ---- */
.yt-history {
  position: absolute;
  inset: 0;
  z-index: 40;
}
.yt-history[hidden],
.your-turn-widget.collapsed .yt-history {
  display: none;
}
.yt-history-scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 4, 6, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.32s ease;
}
.yt-history.is-open .yt-history-scrim {
  opacity: 1;
}
.yt-history-panel {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 360px;
  max-height: 76%;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--panel-bg-strong);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  overflow-y: auto;
  scrollbar-width: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.32s ease, transform 0.32s ease;
}
.yt-history-panel::-webkit-scrollbar {
  display: none;
}
.yt-history.is-open .yt-history-panel {
  opacity: 1;
  transform: translateY(0);
}
.yt-history-title {
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--text-primary);
}
.yt-history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.yt-history-row {
  display: flex;
  gap: 12px;
}
.yt-history-date {
  flex-shrink: 0;
  width: 54px;
  font-size: 11px;
  color: var(--text-muted);
}
.yt-history-activity {
  font-size: 12px;
  color: var(--text-secondary);
}
.yt-history-note {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-muted);
}
.yt-history-empty {
  font-size: 12px;
  color: var(--text-muted);
}
@media (prefers-reduced-motion: reduce) {
  .yt-char,
  .yt-char.is-active,
  .yt-float,
  .yt-spring,
  .yt-ground,
  .yt-char-stack.is-laughing .yt-char.is-active,
  .yt-dot::after {
    animation: none;
    transition-duration: 0.01ms;
  }
  .yt-history-scrim,
  .yt-history-panel,
  .yt-feedback {
    transition-duration: 0.01ms;
  }
  /* no motion means no tears, rather than drops frozen in mid-air */
  .yt-scene.is-crying .yt-tears {
    display: none;
  }
}
@media (max-width: 860px) {
  .your-turn-widget {
    width: auto;
  }
  .yt-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============ Album ============ */
.album-widget {
  position: absolute;
  z-index: 5;
  zoom: 0.95;
  width: calc(var(--h-widget-width) / 0.95);
  height: calc(var(--h-widget-height) / 0.95);
  max-width: 96vw;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 24px 16px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: none;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  color: var(--text-primary);
  overflow: hidden;
}

/* ---- header ---- */
.al-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.al-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.al-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.al-icon svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.al-title {
  font-size: 20px;
  font-weight: 500;
  margin-left: 5px;
  color: var(--text-primary);
}
.al-status-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}
.al-actions {
  display: flex;
  align-items: center;
}
.al-action {
  background: none;
  border: none;
  cursor: pointer;
  padding: 7px;
  display: inline-flex;
  color: var(--text-secondary);
  transition: opacity 0.15s ease;
}
.al-action:hover {
  opacity: 0.7;
}
.al-action svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.al-action-pin svg {
  transform: rotate(40deg);
}
.album-widget.is-pinned .al-action-pin {
  color: var(--text-primary);
}
.album-widget.collapsed .al-body,
.album-widget.collapsed .al-footer {
  display: none;
}

/* ---- two columns ---- */
.al-body {
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  gap: 24px;
  align-items: stretch;
  /* Rows must not grow past the box, or the aside is as tall as its content and
     never scrolls. */
  grid-template-rows: minmax(0, 1fr);
  flex: 1;
  min-height: 0;
}

/* ---- left: the book ---- */
/* The book runs wider than its column and pulls up out of it so the render
   fills the panel rather than sitting letterboxed. Its overhang lies across the
   aside, so pointer events are off here and switched back on for the
   photographs alone (.al-page > *) — Earlier, Later and the rest of the aside
   stay clickable underneath. */
.al-book {
  position: relative;
  width: 127%;
  height: 800px;
  margin: -170px 0 -142px -65px;
  pointer-events: none;
}
.al-strip {
  position: absolute;
  inset: 0;
  /* Keeps the additive blending below contained to the strip. */
  isolation: isolate;
  filter: blur(var(--al-turn-blur, 0px));
}
/* Every render sits in the same box at the same scale: the frames differ only
   by the leaf, so anything that moved the box would read as the book jumping. */
/* The renders are white light on transparency, so the outgoing and incoming
   frames are summed rather than stacked. Stacking two half-opaque copies of the
   same book leaves it at 0.75 brightness mid-dissolve, which reads as a pulse. */
.al-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  mix-blend-mode: plus-lighter;
  will-change: opacity;
  backface-visibility: hidden;
}
.al-pages {
  position: absolute;
  inset: 0;
}
.al-page {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.al-page > * {
  pointer-events: auto;
}
/* The photographs leave with the paper instead of hanging in the air while the
   leaf turns underneath them. */
.al-pages.is-turning .al-photo {
  opacity: 0;
  transition: opacity 0.12s ease;
}
.al-photo {
  position: absolute;
  left: var(--page-x);
  top: var(--page-y);
  width: var(--page-w);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transform: translate(-50%, -50%) rotate(var(--page-rot, 0deg)) skewY(var(--page-skew, 0deg));
  transition: opacity 0.18s ease;
}
/* Centred on --page-x / --page-y like the others, but with its own height so it
   can run the length of the page, and its own lean. --l1-lean tips the bottom
   edge left, following the paper as it falls towards the spine; a positive
   value would pull it right instead. */
.al-photo-l1 {
  --page-x: 24.5%;
  --page-y: 47%;
  --l1-h: 300px;
  --l1-lean: -2.5deg;
  height: var(--l1-h);
  width: 210px;
  margin-left: 51px;
  transform: translate(-50%, -50%) skewX(var(--l1-lean));
}
/* Free of the 4:3 plate so the photograph fills the height it is given. */
.al-photo-l1 .al-photo-plate {
  aspect-ratio: auto;
  flex: 1;
  min-height: 0;
}
.al-photo-r1 {
  --page-x: 66.5%;
  --page-y: 33.5%;
  --page-w: 25%;
  --page-rot: -1.5deg;
}
.al-photo-r2 {
  --page-x: 67%;
  --page-y: 47.5%;
  --page-w: 25%;
  --page-rot: -1.5deg;
}
.al-photo-r3 {
  --page-x: 67.5%;
  --page-y: 61.5%;
  --page-w: 25%;
  --page-rot: -1.5deg;
}
/* Let off the 4:3 ratio so the height is set outright. */
.al-photo-r1 .al-photo-plate,
.al-photo-r2 .al-photo-plate,
.al-photo-r3 .al-photo-plate {
  aspect-ratio: auto;
  height: 75px;
}
.al-photo-plate {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: rgba(10, 11, 12, 0.55);
}
.al-photo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.al-photo.is-selected .al-photo-plate {
  outline: 1px dashed rgba(255, 255, 255, 0.85);
  outline-offset: 3px;
}
.al-photo-caption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 8.5px;
  line-height: 1.35;
  color: rgba(22, 24, 26, 0.86);
}
.al-photo-l1 .al-photo-caption {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 6%;
  color: rgba(245, 245, 244, 0.92);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}
.al-photo-meta {
  opacity: 0.62;
}
/* Every part of a caption is its own click target. */
.al-photo-field {
  cursor: text;
}
.al-photo-field:hover {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}
/* An empty field has no text to aim at, so the selected photograph — and only
   it — offers a stub in its place. */
.al-photo-field.is-blank {
  font-style: italic;
  opacity: 0.55;
}
/* Sized and styled to sit exactly where the text was, so committing a line does
   not shift the page under the cursor. */
.al-photo-edit {
  width: 100%;
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  outline: none;
}
/* Place and date share a line, so their inputs hold to their own text rather
   than pushing the other one off the caption. */
.al-photo-meta .al-photo-edit {
  display: inline-block;
  width: auto;
  max-width: 100%;
  field-sizing: content;
}

/* ---- right: the column ---- */
/* Positioned so it stacks above the book, which overhangs into this column. */
.al-aside {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* The clip box now fills the track while the content keeps its 73% measure,
     so the button row can still spill into the space beside it. */
  width: calc(100% - 8px);
  padding: 0 calc(27% - 30px) 0 22px;
  min-width: 0;
  margin-left: 8px;
}
.al-when {
  font-size: 11px;
  color: var(--text-muted);
}
.al-headline {
  font-size: 26px;
  font-weight: 300;
  line-height: 1.16;
  color: var(--text-primary);
}
.al-sub {
  font-size: 12px;
  color: var(--text-muted);
}
.al-nav {
  display: flex;
  align-items: center;
  gap: 160px;
  margin-top: 6px;
}
.al-nav-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  color: var(--text-primary);
  transition: color 0.15s ease, opacity 0.15s ease;
}
.al-nav-btn:hover:not(:disabled) {
  color: var(--text-primary);
}
.al-nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.al-nav-caret {
  opacity: 0.8;
}
.al-counter {
  margin: auto;
  font-size: 11px;
  color: var(--text-muted);
}
.al-eyebrow {
  margin-top: 10px;
  font-size: 10px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.al-collections {
  display: flex;
  flex-direction: column;
}
.al-collection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-secondary);
  transition: color 0.15s ease;
}
.al-collection:hover,
.al-collection.is-active {
  color: var(--text-primary);
}
.al-collection-count {
  font-size: 12px;
  color: var(--text-muted);
}
.al-new-collection {
  align-self: flex-start;
  margin-top: 2px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  color: var(--text-muted);
  transition: color 0.15s ease;
}
.al-new-collection:hover {
  color: var(--text-secondary);
}
.al-collection-input,
.al-write-input {
  margin-top: 6px;
  padding: 8px 12px;
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
.al-collection-input::placeholder,
.al-write-input::placeholder {
  color: var(--text-muted);
}
.al-tools {
  display: flex;
  gap: 10px;
  width: 125%;
  margin-top: 12px;
}
.al-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.25s ease;
}
.al-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.32), inset 0 0 14px rgba(255, 255, 255, 0.2);
}
.al-btn-icon {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.al-unwritten {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--text-muted);
}
.al-note {
  width: 95%;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.al-note-prompt {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-secondary);
}
.al-note-star {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-top: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linejoin: round;
}

/* ---- footer ---- */
.al-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 11px;
  color: var(--text-muted);
}
.al-privacy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.al-lock {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
  .al-photo,
  .al-pages.is-turning .al-photo {
    transition-duration: 0.01ms;
  }
}
@media (max-width: 940px) {
  .album-widget {
    width: auto;
  }
  .al-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ========================= PICK UP HERE WIDGET ========================= */
.pick-up-here-widget {
  position: absolute;
  z-index: 5;
  zoom: 0.95;
  width: calc(var(--sq-widget-width) / 0.95);
  height: calc(var(--sq-widget-height) / 0.95);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 22px 24px 18px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: none;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  color: var(--text-primary);
  overflow: hidden;

  /* the brick's hover home, and where it lies before it is lifted */
  --puh-brick-x: 54%;
  --puh-brick-y: 7%;
  --puh-brick-w: 33%;
  --puh-ground-dx: 0px;
  --puh-ground-dy: 121px;
  --puh-ground-rot: 16deg;
  --puh-ground-scale: 0.86;
}

/* ---- header ---- */
.puh-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.puh-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.puh-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.puh-icon svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translate(2px, 1px);
}
.puh-title {
  font-size: 20px;
  font-weight: 500;
  margin-left: 5px;
  color: var(--text-primary);
}
.puh-status-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}
.puh-actions {
  display: flex;
  align-items: center;
}
.puh-action {
  background: none;
  border: none;
  cursor: pointer;
  padding: 7px;
  display: inline-flex;
  color: var(--text-secondary);
  transition: opacity 0.15s ease;
}
.puh-action:hover {
  opacity: 0.7;
}
.puh-action svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.puh-action-pin svg {
  transform: rotate(40deg);
}
.pick-up-here-widget.is-pinned .puh-action-pin {
  color: var(--text-primary);
}
.pick-up-here-widget.collapsed .puh-body,
.pick-up-here-widget.collapsed .puh-footer {
  display: none;
}
.pick-up-here-widget.collapsed [data-pick-up-here-toggle] svg {
  transform: rotate(-90deg);
}

/* ---- body ---- */
.pick-up-here-widget > * {
  flex-shrink: 0;
}
.puh-body {
  display: grid;
  flex: 1;
  min-height: 0;
  grid-template-columns: minmax(0, 56%) minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  margin-top: 4px;
}

/* left: the artwork, bled toward the card edges, with the micro labels of the
   suspended piece sitting on it. Pointer events stay off it so the drag
   surface underneath keeps working. */
.puh-scene {
  position: relative;
  margin: -18px 0 -14px -14px;
  pointer-events: none;
}
.puh-scene-img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}
.puh-note-done,
.puh-note-suspended,
.puh-brick-label {
  position: absolute;
  left: var(--x);
  top: var(--y);
  font-size: 9px;
  line-height: 1.7;
  letter-spacing: 0.7px;
  white-space: nowrap;
  color: var(--text-muted);
  transition: opacity 0.25s ease;
}
.puh-note-done {
  --x: 1%;
  --y: 20%;
}
.puh-note-suspended {
  --x: 1%;
  --y: 81%;
}
.puh-brick-label {
  --x: 70%;
  --y: -8%;
  color: var(--text-secondary);
}
.puh-brick-line {
  display: block;
}

/* ---- the brick: travel, bob and glow on three nested layers so they never
   fight over one transform ---- */
.puh-brick {
  position: absolute;
  left: var(--puh-brick-x);
  top: var(--puh-brick-y);
  width: var(--puh-brick-w);
  transform: translate(-50%, -50%) translate(var(--brick-dx, 0px), var(--brick-dy, 0px))
    rotate(var(--brick-rot, 0deg)) scale(var(--brick-scale, 1));
  transition: transform 1150ms cubic-bezier(0.22, 0.8, 0.24, 1), opacity 420ms ease;
}
.puh-brick-bob {
  display: block;
  animation: puhBrickBob 4.2s ease-in-out infinite;
}
.puh-brick-img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  animation: puhBrickGlow 4.2s ease-in-out infinite;
}
@keyframes puhBrickBob {
  0%,
  100% {
    transform: translateY(7px);
  }
  50% {
    transform: translateY(-7px);
  }
}
@keyframes puhBrickGlow {
  0%,
  100% {
    filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.18));
  }
  50% {
    filter: drop-shadow(0 0 26px rgba(255, 255, 255, 0.4));
  }
}

/* while a pick-up is in flight the bob and the glow hold still, so the only
   movement on screen is the brick's own journey */
.pick-up-here-widget[data-brick] .puh-brick-bob,
.pick-up-here-widget[data-brick] .puh-brick-img {
  animation-play-state: paused;
}
.pick-up-here-widget[data-brick="holding"] .puh-brick-img {
  filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.5));
  transition: filter 0.6s ease;
}
.pick-up-here-widget[data-brick="gone"] .puh-brick {
  opacity: 0;
}
.pick-up-here-widget[data-brick="ground"] .puh-brick,
.pick-up-here-widget[data-brick="ground-in"] .puh-brick {
  --brick-dx: var(--puh-ground-dx);
  --brick-dy: var(--puh-ground-dy);
  --brick-rot: var(--puh-ground-rot);
  --brick-scale: var(--puh-ground-scale);
}
.pick-up-here-widget[data-brick="ground"] .puh-brick {
  transition: none;
  opacity: 0;
}
.pick-up-here-widget[data-brick="ground-in"] .puh-brick {
  transition: opacity 300ms ease;
  opacity: 1;
}
.pick-up-here-widget[data-swap] .puh-aside,
.pick-up-here-widget[data-swap] .puh-brick-label {
  opacity: 0;
}

/* ---- right: where the work was left ---- */
.puh-aside {
  min-width: 0;
  padding-right: 4px;
  transition: opacity 0.25s ease;
}
.puh-headline {
  font-size: 27px;
  font-weight: 300;
  line-height: 1.28;
  color: var(--text-primary);
}
.puh-ago {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}
.puh-rows {
  margin-top: 20px;
}
.puh-row {
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.puh-row:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.puh-row-label {
  font-size: 13.5px;
  color: var(--text-primary);
}
.puh-row-value {
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.puh-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 13px 24px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.12s ease, box-shadow 0.25s ease, border-color 0.3s ease,
    background 0.3s ease, color 0.3s ease, opacity 0.25s ease;
}
.puh-btn-primary {
  margin-top: 22px;
}
.puh-btn-secondary {
  margin-top: 10px;
  border-color: transparent;
}
.puh-btn:active {
  transform: translateY(1px) scale(0.99);
}
.puh-btn-bloom {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(60% 80% at 50% 100%, rgba(255, 255, 255, 0.35), transparent 70%);
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.puh-btn-primary:hover .puh-btn-bloom {
  opacity: 0.9;
}

/* ---- footer ---- */
.puh-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 6px;
  font-size: 11.5px;
  letter-spacing: 0.2px;
  color: var(--text-muted);
}
.puh-lock {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
  .puh-brick-bob,
  .puh-brick-img {
    animation: none;
  }
  .puh-brick {
    transition: none;
  }
}

@media (max-width: 860px) {
  .pick-up-here-widget {
    width: auto;
  }
  .puh-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .puh-scene {
    margin: 0;
  }
}

/* ===================== HARD CONVERSATION WIDGET ===================== */
/* One sentence, and how far its light travels. The left column is the scene:
   the two objects, the opening laid between them, and how long this has been
   waiting. The right column is the composer. The verdict moves exactly two
   things — --hc-reach, where the light dies along the words, and which of the
   two stacked scenes is lit. No score, no percentage, no red. */
.hard-conversation-widget {
  position: absolute;
  z-index: 5;
  zoom: 0.95;
  width: 1020px;
  max-width: 95vw;
  display: flex;
  flex-direction: column;
  padding: 22px 26px 18px;
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.14) 0%, rgba(16, 19, 18, 0.11) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  border: none;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  color: var(--text-primary);
  overflow: hidden;
}

/* ---- header (the shared today-head classes carry the rest) ---- */
.hc-icon {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: grid;
  place-items: center;
}
.hc-icon svg {
  width: 19px;
  height: 19px;
}
.hc-action-pin svg {
  transform: rotate(40deg);
}
.hard-conversation-widget.is-pinned .hc-action-pin {
  color: var(--text-primary);
}
.hard-conversation-widget.collapsed .hc-body,
.hard-conversation-widget.collapsed .hc-footer,
.hard-conversation-widget.collapsed .hc-rehearse {
  display: none;
}

/* ---- body ---- */
/* the columns are deliberately NOT stretched to a common height: the composer
   changes height whenever the headline wraps to another line, and the scene is
   measured off its own box — the art, the opening sentence, the verdict and the
   footnotes are all placed against it, so stretching would drag the whole scene
   down and rescale the artwork every time the verdict flips */
.hc-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  align-items: start;
  gap: 26px;
  margin-top: 12px;
}

/* ---- left: the scene ---- */
.hc-scene {
  position: relative;
  min-height: 352px;
}
.hc-art {
  position: absolute;
  inset: 66px -12px 26px -18px;
  display: grid;
  align-items: end;
  justify-items: center;
  pointer-events: none;
}
/* two full scenes, one unlit and one lit, so arriving is a cross-fade and the
   right-hand object never moves. Both renders are 1400x699, so letting each
   face take its own intrinsic ratio inside the box lands them on exactly the
   same rectangle — and lets the nudge below be a percentage of the artwork
   rather than of the letterboxed box it sits in, so it holds at any size. */
.hc-art-face {
  grid-area: 1 / 1;
  max-width: 100%;
  max-height: 100%;
  --hc-art-x: 0px;
  --hc-art-y: 0px;
  --hc-art-scale: 1;
  transform: translate(var(--hc-art-x), var(--hc-art-y)) scale(var(--hc-art-scale));
  opacity: 0;
  user-select: none;
  /* against the near-black card this is additive, so the pair brightens through
     the swap instead of one drawing dissolving into the other */
  mix-blend-mode: screen;
  transition: opacity 1.2s ease-in;
}
/* the incoming layer rises early and the outgoing one holds, which keeps the
   screen-blended pair at even brightness across the midpoint */
.hc-art-face.is-active {
  opacity: 1;
  transition-timing-function: ease-out;
}
/* The two scenes are independent renders: the lit one sits slightly left, low
   and small of the unlit one. Measured by correlating the two silhouettes, and
   applied to the lit face only so the unlit one stays the reference. */
.hc-art-lit {
  --hc-art-x: 2.31%;
  --hc-art-y: -1.06%;
  --hc-art-scale: 1.02;
}

.hc-sides {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 280px;
  margin-left: 20px;
}
.hc-side {
  display: block;
  min-width: 0;
}
.hc-side-label {
  display: block;
  font-size: 8.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.hc-side-value {
  display: block;
  width: 100%;
  margin-top: 11px;
  padding: 0;
  border: none;
  background: none;
  resize: none;
  overflow-y: auto;
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  outline: none;
  transition: color 0.25s ease;
}
.hc-side-value:focus {
  color: var(--text-primary);
}

/* ---- the opening, laid between the two objects ---- */
.hc-line {
  position: absolute;
  z-index: 3;
  left: 55%;
  top: 40%;
  transform: translate(-50%, -50%);
  width: min(80%, 560px);
  text-align: center;
  font-size: 12.5px;
  line-height: 1.5;
  pointer-events: none;
  --hc-reach: 58%;
}
.hc-line-text {
  display: block;
  color: rgba(255, 255, 255, 0.24);
}
/* how far the light gets: the lit copy is masked to --hc-reach, so the words
   past it simply stay unlit */
.hc-line-lit,
.hc-line-sweep {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  color: #fff;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.hc-line-lit {
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.28);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 62%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 62%, transparent 100%);
  -webkit-mask-size: var(--hc-reach) 100%;
  mask-size: var(--hc-reach) 100%;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  transition: -webkit-mask-size 1.2s ease-out, mask-size 1.2s ease-out;
}
/* the breathing sweep: a band of light travelling the words and dissolving
   wherever the reach ends */
.hc-line-sweep {
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.8), 0 0 20px rgba(190, 214, 255, 0.5);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%, #000 58%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 42%, #000 58%, transparent 100%);
  -webkit-mask-size: 42% 100%;
  mask-size: 42% 100%;
  -webkit-mask-position: -45% 0;
  mask-position: -45% 0;
  opacity: 0;
  will-change: -webkit-mask-position, mask-position, opacity;
  animation: hc-line-reach 5s ease-in-out infinite;
}
@keyframes hc-line-reach {
  0% {
    -webkit-mask-position: -45% 0;
    mask-position: -45% 0;
    opacity: 0;
  }
  12% {
    opacity: 0.95;
  }
  58% {
    -webkit-mask-position: var(--hc-reach) 0;
    mask-position: var(--hc-reach) 0;
    opacity: 0.95;
  }
  76%,
  100% {
    -webkit-mask-position: var(--hc-reach) 0;
    mask-position: var(--hc-reach) 0;
    opacity: 0;
  }
}
/* arriving: one run to the end, at the pace of the cross-fade behind it */
.hc-line.is-arriving .hc-line-sweep {
  animation-duration: 1.2s;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
}

.hc-verdict {
  position: absolute;
  z-index: 3;
  left: 56%;
  top: 57%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 11px;
  letter-spacing: 0.3px;
  color: var(--text-muted);
}
.hc-waited,
.hc-person {
  position: absolute;
  z-index: 3;
  top: 80%;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text-muted);
}
.hc-waited {
  left: 4%;
}
.hc-person {
  right: 4%;
}

/* ---- right: the composer ---- */
.hc-compose {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 2px 2px 0 4px;
}
.hc-headline {
  font-size: 26px;
  font-weight: 300;
  line-height: 1.3;
  color: var(--text-primary);
}
.hc-headline-line {
  display: block;
}
.hc-sub {
  margin-top: 13px;
  font-size: 12px;
  color: var(--text-muted);
}
.hc-opening {
  width: 100%;
  margin-top: 22px;
  padding: 0 0 12px;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  background: none;
  resize: none;
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.25s ease;
}
.hc-opening:focus {
  border-bottom-color: rgba(255, 255, 255, 0.5);
}
.hc-opening::placeholder {
  color: var(--text-muted);
}
.hc-hint {
  margin-top: 11px;
  font-size: 10.5px;
  letter-spacing: 0.2px;
  color: var(--text-muted);
}
/* past two lines nothing is blocked and nothing is cleared — one calm line */
.hc-overflow {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--text-secondary);
}
.hc-afraid-label {
  margin-top: 24px;
  font-size: 8.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.hc-afraid {
  width: 100%;
  margin-top: 11px;
  padding: 0 0 11px;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  background: none;
  font-family: inherit;
  font-size: 13px;
  color: var(--text-secondary);
  outline: none;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.hc-afraid:focus {
  border-bottom-color: rgba(255, 255, 255, 0.4);
  color: var(--text-primary);
}
.hc-slot {
  align-self: flex-start;
  margin-top: 18px;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 11px;
  letter-spacing: 0.3px;
  color: var(--text-secondary);
}
.hc-buttons {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin-top: 22px;
}
.hc-btn {
  padding: 12px 14px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.3s ease, box-shadow 0.25s ease,
    opacity 0.25s ease;
}
.hc-btn:active {
  transform: translateY(1px) scale(0.99);
}
.hc-quiet {
  align-self: center;
  margin-top: 15px;
  padding: 6px 10px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.25s ease;
}
.hc-quiet:hover {
  color: var(--text-primary);
}
.hc-done {
  margin-top: 24px;
  font-size: 12.5px;
  letter-spacing: 0.2px;
  color: var(--text-secondary);
}
.hc-status-dot.is-done {
  background: rgba(255, 255, 255, 0.34);
  box-shadow: none;
}

/* ---- after the conversation: three answers, two of which cost nothing ---- */
/* the question after the conversation belongs to the scene, not the composer:
   it sits in the second row of .hc-body, directly under the artwork, so the
   composer keeps its height and the scene stays the thing being answered */
.hc-after {
  grid-column: 1;
  margin-top: -105px;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
/* it rises into place when the day has passed and drops away once answered */
.hc-after-enter-active,
.hc-after-leave-active {
  transition: opacity 0.32s ease, transform 0.32s ease;
}
.hc-after-enter-from,
.hc-after-leave-to {
  opacity: 0;
  transform: translateY(16px);
}
.hc-after-q {
  font-size: 12px;
  color: var(--text-secondary);
}
.hc-after-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 11px;
}
.hc-after-choice {
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  font-family: inherit;
  font-size: 11.5px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.hc-after-choice:hover {
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--text-primary);
}

/* ---- footer ---- */
.hc-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 16px;
  font-size: 11px;
  letter-spacing: 0.2px;
  color: var(--text-muted);
}
.hc-lock {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- rehearse: the card dims, only the sentence is left ---- */
.hc-rehearse {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
}
.hc-rehearse-scrim {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 12, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: hc-fade-in 0.35s ease both;
}
.hc-rehearse-inner {
  position: relative;
  width: min(72%, 640px);
  text-align: center;
  animation: hc-fade-in 0.45s ease both;
}
.hc-rehearse-line {
  font-size: 28px;
  font-weight: 300;
  line-height: 1.45;
  color: #fff;
  text-shadow: 0 0 26px rgba(255, 255, 255, 0.18);
}
.hc-rehearse-back {
  margin-top: 30px;
  padding: 10px 22px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.hc-rehearse-back:hover {
  border-color: rgba(255, 255, 255, 0.32);
  color: var(--text-primary);
}
@keyframes hc-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hc-line-sweep {
    animation: none;
    opacity: 0;
  }
  .hc-line-lit,
  .hc-art-face,
  .hc-after-enter-active,
  .hc-after-leave-active {
    transition: none;
  }
  .hc-rehearse-scrim,
  .hc-rehearse-inner {
    animation-duration: 0.01ms;
  }
}

@media (max-width: 1040px) {
  .hard-conversation-widget {
    width: auto;
  }
  .hc-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .hc-scene {
    min-height: 300px;
  }
  .hc-compose {
    padding-left: 0;
  }
}

/* ===================== OPERATIONAL EFFICIENCY WIDGET ===================== */
/* Wide landscape card (~16:10). Reuses the shared glass shell / header controls
   (today-head, today-icon, today-status-dot, today-actions) and footer meta
   pattern; only the inner two-column content below is widget-specific. */
.oe-widget {
  position: absolute;
  z-index: 5;
  width: 640px;
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  padding: 24px 26px 20px;
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.16) 0%, rgba(12, 14, 14, 0.13) 100%);
  backdrop-filter: blur(28px) saturate(120%);
  -webkit-backdrop-filter: blur(28px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}
.oe-widget.collapsed .oe-body,
.oe-widget.collapsed .oe-footer {
  display: none;
}
.oe-widget.collapsed [data-oe-toggle] svg {
  transform: rotate(-90deg);
}
.oe-body {
  display: flex;
  gap: 32px;
  margin-top: 26px;
}
.oe-score-col {
  position: relative;
  flex: 0 0 44%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.oe-score {
  position: relative;
  font-size: 92px;
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgb(255 255 255 / 95%);
}
.oe-score-glow {
  position: absolute;
  left: 6%;
  top: 50%;
  width: 220px;
  height: 220px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.08) 38%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
  z-index: -1;
}
.oe-score-unit {
  font-weight: 200;
}
.oe-score-caption {
  margin-top: 14px;
  font-size: 19px;
  font-weight: 300;
  color: rgb(255 255 255 / 82%);
}
.oe-score-note {
  margin-top: 6px;
  font-size: 15px;
  color: var(--text-muted);
}
.oe-detail-col {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.oe-today-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.oe-bands {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.oe-band {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}
.oe-band-dot {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgb(255 255 255 / 30%);
}
.oe-band-dot-peak {
  width: 12px;
  height: 12px;
  background: rgb(255 255 255 / 98%);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.85);
}
.oe-band-dot-strong {
  background: rgb(255 255 255 / 62%);
}
.oe-band-dot-dim {
  width: 8px;
  height: 8px;
  background: rgb(255 255 255 / 34%);
}
.oe-band-dot-faint {
  width: 7px;
  height: 7px;
  background: rgb(255 255 255 / 22%);
}
.oe-band-label {
  flex-shrink: 0;
  font-weight: 500;
  color: rgb(255 255 255 / 92%);
}
.oe-band-sep {
  flex-shrink: 0;
  width: 1px;
  height: 14px;
  background: rgb(255 255 255 / 16%);
  margin: 0 4px;
}
.oe-band-desc {
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.oe-now-pill {
  flex-shrink: 0;
  margin-left: auto;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgb(255 255 255 / 82%);
  background: rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 12%);
}
.oe-insight {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 22px;
}
.oe-insight-spark {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  fill: none;
  stroke: rgb(235 235 235);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.oe-insight-lead {
  font-size: 15px;
  color: rgb(255 255 255 / 86%);
}
.oe-insight-sub {
  margin-top: 4px;
  font-size: 14px;
  color: var(--text-muted);
}
.oe-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}
.oe-btn {
  cursor: pointer;
  padding: 11px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  color: rgb(255 255 255 / 92%);
  transition: opacity 0.15s ease, background 0.15s ease;
}
.oe-btn:hover {
  opacity: 0.82;
}
.oe-btn-primary {
  background: rgb(255 255 255 / 10%);
  border: 1px solid rgb(255 255 255 / 18%);
}
.oe-btn-ghost {
  background: none;
  border: 1px solid rgb(255 255 255 / 12%);
}
.oe-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 22px;
  font-size: 11px;
  letter-spacing: 0.2px;
  color: rgb(255 255 255 / 42%);
}
.oe-dot-sep {
  display: inline-block;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}
/* ===================== ONBOARDING VOICE — FIVE WIDGETS =====================
   Not a material change. The glass these cards already have is right; what made
   them read as different software was the writing on them and the shape of their
   controls: a rounded face borrowed from phone software, every widget announcing
   its own name at heading size, an icon in a drawn box, and a CTA lit like a
   button in a game. Onboarding does none of that. It names things quietly in
   tracked capitals, it lets one number or one sentence be the loud thing, and its
   one strong control is a plain white slab.

   Scoped to Breathing, Habit Garden, Streaks, Focus Session and Today so the two
   voices can be compared side by side before this goes any further. It sits at the
   end of the sheet because each widget declares these same properties itself. */

.breathing-widget,
.streaks-widget,
.focus-session-widget,
.today-widget,
.habit-garden-widget {
  font-family: var(--font-sans);
}

/* THE WIDGET'S NAME IS NOT A HEADLINE. It is a label on a thing you already chose
   to put there, so it is set like every other label in the product: small, tracked
   out, uppercase, and dim enough that the content is what you read first. */
.br-title-h,
.stk-title-h,
.today-title,
.focus-title,
.habit-garden-widget .title {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(238, 241, 246, 0.72);
}
/* the Habit Garden frame is drawn at zoom .7, so its type has to be set larger to
   land at the same size on the glass as everything else here */
.habit-garden-widget .title {
  font-size: 18px !important;
  gap: 12px;
}

/* The mark does not need a box drawn round it. A 1px circle and an inset glow are
   two more lines competing with the content for the same attention. */
.br-logo,
.stk-logo {
  border: none;
  box-shadow: none;
  width: 26px;
  height: 26px;
}
.br-logo svg,
.stk-logo svg {
  width: 18px;
  height: 18px;
  stroke: rgba(238, 241, 246, 0.7);
}
/* !important only because the rule being overridden uses it on these three */
.habit-garden-widget .logo {
  width: 34px !important;
  height: 34px !important;
  border: none !important;
  box-shadow: none;
}
.habit-garden-widget .logo svg {
  width: 26px;
  height: 26px;
}

/* Header actions match the chrome: 16px glyphs, no disc, they light on approach. */
.br-action svg,
.stk-action svg,
.today-action svg,
.focus-action svg,
.habit-garden-widget .icon-btn svg {
  width: 16px;
  height: 16px;
}
.br-action:hover,
.stk-action:hover,
.today-action:hover,
.focus-action:hover {
  background: var(--panel-fill-hover);
  color: #eef1f6;
}

/* Monochrome. A green pip says "system nominal"; a white one says the same thing
   without introducing the only colour on the card. */
.today-status-dot,
.focus-status-dot {
  background: rgba(238, 241, 246, 0.85);
  box-shadow: 0 0 7px 1px rgba(238, 241, 246, 0.45);
}

/* THE KEYS ARE THE FILE'S KEYS. Measured off the onboarding source rather than
   invented: Raleway 300 at 0.05em of tracking, #eef1f6 on rgba(255,255,255,0.07),
   one hairline of rgba(255,255,255,0.22), radius 0.5em, padding 0.62em by 1.9em,
   6px of blur behind it. Forward is that key. Back is the same key held quieter,
   so the two read as one pair rather than as a button and a link.

   Note what the source does NOT do: it never fills the forward key white. Solid
   white is reserved for an option you have CHOSEN, and spending it on a button
   that is always there leaves nothing to say "this one, the one you picked". */
.br-btn,
.habit-garden-widget .tend-btn {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.05em;
  text-transform: none;
  border-radius: 7px;
  padding: 0.62em 1.9em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.br-btn-primary,
.habit-garden-widget .tend-btn {
  color: #eef1f6;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: none;
}
.br-btn-primary:hover,
.habit-garden-widget .tend-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow: none;
}
/* the pill's under-glow was the light source the source deliberately does without */
.br-btn-primary .br-btn-bloom {
  opacity: 0;
}

/* Back: the same key, quieter, and narrower because it carries less weight. */
.br-btn-secondary,
.br-btn-stop {
  color: rgba(226, 233, 244, 0.72);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: none;
  padding: 0.62em 1.5em;
}
.br-btn-secondary:hover,
.br-btn-stop:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.34);
}
/* a key that cannot be used says so by being quiet, never by vanishing */
.br-btn:disabled {
  opacity: 0.35;
}

.habit-garden-widget .tend-btn .plus {
  font-size: 22px;
  margin-top: -3px;
}
/* THE HOVER WAS THE WRONG ONE. The file has two hovers and I took the louder: the
   quiz nav brightens fill AND edge, but the canonical key — the one the note in the
   source says every button wears — moves one value only, fill 0.07 to 0.14. The
   hairline never changes. An edge that lights on approach reads as the button
   answering; an edge that stays put lets the fill do it, and the key stays still. */
.br-btn-primary:hover,
.habit-garden-widget .tend-btn:hover,
.br-btn-secondary:hover,
.br-btn-stop:hover {
  color: #eef1f6;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.22);
}
.br-btn,
.habit-garden-widget .tend-btn {
  transition: background 0.3s, border-color 0.3s, opacity 0.3s;
}

/* THE LIGHT THAT GOES ROUND THE KEY. Not decoration and not a hover reward: it runs
   always, on the key that matters, and it is what makes the thing look awake before
   anyone touches it. A conic gradient rotates behind the border and a two-layer mask
   subtracts the middle, so only a 1.2px ring is ever painted and the arc is a short
   bright segment travelling one lap every 2.8 seconds.
   Taken from the source unchanged, including the angle stops.

   It goes on the key that starts the thing and on nothing else. In the source the
   sweep is a class you add, not part of the key, and that is the whole point: if
   every control is running, none of them is the one to press. */
@property --ga {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes gaRot {
  to { --ga: 360deg; }
}
.br-btn-primary::before,
.draggable-widget [class$="-btn-primary"]::before,
.habit-garden-widget .tend-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.2px;
  background: conic-gradient(
    from var(--ga),
    transparent 0 68%,
    rgba(235, 242, 252, 0.95) 82%,
    transparent 96%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: gaRot 2.8s linear infinite;
  pointer-events: none;

  /* THE LAP BELONGS TO THE CARD YOU ARE IN. At rest the ring is not there at all:
     forty cards each running a light is a screen with forty things asking to be
     pressed, and it is also forty compositing layers repainting for nobody. The
     sweep arrives when the pointer enters the widget and is paused, not restarted,
     when it leaves, so coming back does not rewind the arc to the top. */
  opacity: 0;
  animation-play-state: paused;
  transition: opacity 0.45s var(--chrome-ease);
}
.draggable-widget:hover [class$="-btn-primary"]::before,
.draggable-widget:hover .tend-btn::before,
.draggable-widget:focus-within [class$="-btn-primary"]::before,
.draggable-widget:focus-within .tend-btn::before {
  opacity: 1;
  animation-play-state: running;
}
/* a key that cannot be pressed is not running: the lap is the product breathing,
   and a dead control should not look like it is waiting for you */
.draggable-widget [class$="-btn-primary"]:disabled::before {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .draggable-widget [class$="-btn-primary"]::before,
  .habit-garden-widget .tend-btn::before {
    animation: none;
  }
}

/* the sweep is drawn against this key, so the key has to be its own frame */
.habit-garden-widget .tend-btn,
.draggable-widget [class$="-btn-primary"] {
  position: relative;
}

/* ===================== THE SAME VOICE, EVERY WIDGET =====================
   The five that were done by hand proved the grammar; this puts it on the rest
   without touching eighty stylesheets one at a time. It hangs off .draggable-widget,
   which the drag system already puts on every widget root, and off the suffixes the
   codebase turned out to be consistent about: -head, -title, -action, -status-dot,
   -logo, -btn-primary. Attribute selectors that anchor to the END of the class
   attribute, so a container like .tp-title-row is not mistaken for a title.

   What is deliberately NOT here: sizes, padding and layout. Those are the numbers a
   widget was composed around, and a global sweep through them would break dozens of
   compositions to fix a handful. This changes voice and colour only. */
.draggable-widget {
  font-family: var(--font-sans);
}

/* The widget's name is a label, not a headline — the same kicker the dock and the
   panels use, so a card announces itself the way everything else does. */
.draggable-widget [class$="-head"] [class$="-title"],
.draggable-widget [class$="-head"] [class$="-title-h"],
.draggable-widget [class$="-head-left"] [class$="-title"],
.draggable-widget [class$="-head-left"] [class$="-title-h"],
/* six widgets spell the wrapper -header rather than -head, and one is BEM. The
   grammar should not depend on which week a widget happened to be written. */
.draggable-widget [class$="-header"] [class$="-title"],
.draggable-widget [class$="-header-left"] [class$="-title"],
.draggable-widget [class$="__header"] [class$="__title"],
.draggable-widget [class$="__header-left"] [class$="__title"],
/* and Wins Jar has no wrapper at all: its name sits loose in the card */
.wins-jar-widget .wj-title {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 300;
  letter-spacing: 0.22em;
  /* letter-spacing adds its gap AFTER the last letter too, so a tracked name pushes
     whatever follows it — the status dot, usually — a quarter of an em further away
     than the gap the header was built with, and the row reads as misaligned. The
     negative margin gives that trailing space back. */
  margin-right: -0.22em;
  text-transform: uppercase;
  color: rgba(238, 241, 246, 0.72);
}

/* Header actions are keys: 16px glyphs, no drawn disc, they light on approach. */
.draggable-widget [class$="-action"] svg,
.draggable-widget [class$="-actions"] .icon-btn svg {
  width: 16px;
  height: 16px;
}
.draggable-widget [class$="-action"]:hover,
.draggable-widget [class$="-actions"] .icon-btn:hover {
  background: var(--panel-fill-hover);
  color: #eef1f6;
}
.draggable-widget [class$="-logo"] {
  border: none;
  box-shadow: none;
}

/* Monochrome: a green pip is the only colour on most of these cards and it is
   saying nothing that a white one does not say. */
.draggable-widget [class$="-status-dot"],
.draggable-widget [class$="-live-dot"] {
  background: rgba(238, 241, 246, 0.85);
  box-shadow: 0 0 7px 1px rgba(238, 241, 246, 0.45);
}

/* The one strong key per card, in the file's own grammar. */
.draggable-widget [class$="-btn-primary"] {
  font-family: var(--font-display);
  font-weight: 300;
  /* no tracking here: a global 0.05em widens every label by a few percent and the
     widgets whose button row was measured to the pixel push their last key off the
     card. Tracking is a per-widget decision, applied where the row can take it. */
  color: #eef1f6;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: none;
  /* the key is a rectangle with a 0.5em corner, not a pill. A pill is a tag or a
     status; the source spends the rounded shape on things you read and the squared
     one on things you press, and that distinction is most of why its controls look
     like controls. */
  border-radius: 7px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.3s, border-color 0.3s, opacity 0.3s;
}
.draggable-widget [class$="-btn-primary"]:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.22);
  color: #eef1f6;
}
.draggable-widget [class$="-btn-secondary"] {
  font-family: var(--font-display);
  font-weight: 300;
  color: rgba(226, 233, 244, 0.72);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: none;
  border-radius: 7px;
}
.draggable-widget [class$="-btn-secondary"]:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}