/* The WinPulse tray panel, the drawn Windows 11 taskbar corner and the Windows notification.
   Sizes are the app's own (theme.slint), in px, at 100%. Colours come from tokens.css. */

.wp-stage { position: relative; overflow: hidden; container: wpstage / inline-size; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.wp-stage *, .wp-stage *::before, .wp-stage *::after { box-sizing: border-box; }
:where(.wp-stage) button { font: inherit; color: inherit; margin: 0; border: 0; background: none; padding: 0; cursor: default; -webkit-appearance: none; appearance: none; }
.wp-scaler { position: absolute; inset: 0; transform-origin: 0 0; }
.wp-desk { position: absolute; inset: 0; }

/* ---- the panel ---------------------------------------------------------------------------- */
.wp-panel-anchor {
  position: absolute; bottom: calc(var(--wp-taskbar-h) + 12px); left: 0; width: var(--wp-panel-w); z-index: 2;
  opacity: 0; transform: translateY(6px); visibility: hidden;
  transition: opacity 100ms var(--wp-ease-out), transform 100ms var(--wp-ease-out), visibility 0s linear 100ms;
}
.wp-no-taskbar .wp-panel-anchor { bottom: 12px; }
/* The flyout shadow: a cached box-shadow on a plate behind the panel (a drop-shadow filter here
   re-blurred the whole panel on every tick). It scales from the bottom edge with the panel's C6 growth. */
.wp-panel-shadow { position: absolute; inset: 0; border-radius: var(--wp-panel-radius); box-shadow: var(--wp-os-shadow-panel); transform-origin: 50% 100%; pointer-events: none; }
.wp-panel-anchor.is-open { opacity: 1; transform: none; visibility: visible; transition: opacity 120ms var(--wp-ease-out), transform 120ms var(--wp-ease-out), visibility 0s; }
.wp-panel-anchor.wp-measuring { visibility: hidden !important; opacity: 0 !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .wp-panel-anchor, .wp-panel-anchor.is-open { transform: none; }
}
.wp-panel {
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--wp-panel); border: 1px solid var(--wp-hairline); border-radius: var(--wp-panel-radius);
  color: var(--wp-text); overflow: hidden; position: relative;
  transition: opacity 300ms var(--wp-ease-in-out);
}
/* The hairline sits over the edge and takes no room, so the insets stay the app's 12 px. */
.wp-panel { border: 0; }
.wp-panel::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--wp-hairline); border-radius: inherit; pointer-events: none; z-index: 3; }
.wp-panel-body {
  flex: 0 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  padding: 12px 12px 0; outline: none;
  scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--wp-label) 40%, transparent) transparent;
}
.wp-panel-body::-webkit-scrollbar { width: 8px; }
.wp-panel-body::-webkit-scrollbar-track { background: transparent; }
.wp-panel-body::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--wp-label) 40%, transparent); border-radius: 4px; border: 2.5px solid transparent; background-clip: content-box; }
.wp-panel-body::-webkit-scrollbar-thumb:hover { border-width: 1.5px; background-color: color-mix(in srgb, var(--wp-label) 70%, transparent); }

.wp-tab-view { display: flex; flex-direction: column; gap: var(--wp-gap); }

/* Section label: "OVERVIEW" in small caps, optional clock and text on the right. */
.wp-section { display: flex; align-items: center; gap: 5px; height: 14px; }
.wp-section-t { flex: 1 1 auto; min-width: 0; font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--wp-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-section-r { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; color: var(--wp-text-2); white-space: nowrap; }
.wp-section-i { width: 12px; height: 12px; color: var(--wp-text-2); }

/* Cards. */
.wp-card { background: var(--wp-card); border-radius: var(--wp-card-radius); padding: 12px 18px 10px; transition: opacity 300ms var(--wp-ease-in-out); }

/* Big numbers: Display 700 with the unit on the same baseline. */
.wp-big { font-family: var(--wp-font-display); font-weight: 700; font-size: 23px; line-height: 1.21; white-space: nowrap; color: var(--wp-text); }
.wp-big-u { font-family: var(--wp-font-text); font-weight: 600; font-size: 15px; color: var(--wp-text-2); margin-left: 4px; }
.wp-big-mini .wp-big-u { font-size: 12px; }
.wp-big-small { font-size: 14px; }
.wp-big-small .wp-big-u { font-size: 11px; }

/* Mini cards: the Overview grid, 2 x 3. */
.wp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--wp-gap); }
.wp-mini { display: flex; flex-direction: column; min-height: var(--wp-mini-h); background: var(--wp-card); border-radius: var(--wp-card-radius); padding: 10px 11px; min-width: 0; }
.wp-mini-head { display: flex; align-items: center; gap: 5px; height: 14px; }
.wp-mini-icon { width: 12px; height: 12px; color: var(--acc); }
.wp-mini-title { font-size: 11px; font-weight: 600; color: var(--wp-text-2); }
.wp-mini-num { display: flex; align-items: baseline; height: 29px; margin-top: 2px; padding-top: 1.17px; min-width: 0; }
.wp-mini-num .wp-big { flex: none; }
.wp-mini-num.is-small { padding-top: 12.06px; }
.wp-mini-numicon { width: 11px; height: 11px; color: var(--wp-text-2); margin-right: 3px; transform: translateY(1px); }
.wp-mini-note { flex: 0 1 auto; min-width: 0; margin-left: auto; padding-left: 6px; display: flex; align-items: baseline; gap: 1px; font-size: 11px; font-weight: 500; color: var(--wp-text-2); white-space: nowrap; }
.wp-mini-note > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wp-mini-noteicon { width: 10px; height: 10px; color: var(--wp-text-2); align-self: center; }
.wp-mini-flex { flex: 1 1 auto; min-height: 4px; }
.wp-mini-chart { position: relative; }
.wp-mini-chart .wp-spark { width: 100%; height: 20px; }
.wp-mini-chart .wp-bar { width: 100%; }

/* Sparklines: the line, and the area under it fading from the line's peak to the bottom. */
.wp-spark { display: block; overflow: visible; }
.wp-spark-line { fill: none; stroke: var(--acc); stroke-width: 1.5px; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.wp-spark-area { stroke: none; }
.wp-st-top { stop-color: var(--acc); stop-opacity: var(--wp-haze); }
.wp-st-bot { stop-color: var(--acc); stop-opacity: 0; }
.wp-spark.is-area .wp-st-top { stop-opacity: var(--wp-area-top); }
.wp-spark.is-area .wp-st-bot { stop-opacity: var(--wp-area-bottom); }

/* Bars: the fill slides inside the rounded track. */
.wp-bar { position: relative; height: var(--wp-bar-h); border-radius: 3px; background: var(--wp-track); overflow: hidden; flex: none; isolation: isolate; }
.wp-bar-fill { position: absolute; inset: 0; border-radius: 3px; background: var(--acc); transform: translateX(-100%); transition: transform 350ms var(--wp-ease-data); }
@media (prefers-reduced-motion: reduce) { .wp-bar-fill { transition: none; } }

/* Hero card (metric tabs). */
.wp-hero-top { display: flex; gap: 12px; }
.wp-hero-left { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.wp-hero-num { display: flex; align-items: flex-end; gap: 5px; }
.wp-hero-numicon { width: 16px; height: 16px; color: var(--wp-text-2); margin-bottom: 6px; }
.wp-hero-sub { display: flex; align-items: center; gap: 6px; min-height: 15px; margin-top: -2px; min-width: 0; }
.wp-hero-subicon { width: 11px; height: 11px; color: var(--wp-text-2); }
.wp-hero-subt { font-size: 11px; font-weight: 500; color: var(--wp-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; line-height: 15px; }
.wp-hero-chart { flex: none; width: 110px; position: relative; }
.wp-hero-chart .wp-spark { position: absolute; left: 0; right: 0; top: 4px; bottom: 4px; width: 100%; height: calc(100% - 8px); }
.wp-hero-chart .wp-bar { position: absolute; left: 0; right: 0; bottom: 4.5px; }
.wp-hero { display: flex; flex-direction: column; }
.wp-hero-top { margin-bottom: 7px; }

/* Badge: "Normal", "Elevated · 78%", "High · 91%". */
.wp-badge { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 20px; border-radius: 10px; padding: 0 8px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.wp-badge-i { width: 12px; height: 12px; }
.wp-tone-0 { color: var(--wp-normal-text); background: var(--wp-normal-chip); }
.wp-tone-1 { color: var(--wp-warning-text); background: var(--wp-warning-chip); padding-left: 6px; }
.wp-tone-2 { color: var(--wp-high-text); background: var(--wp-high-chip); padding-left: 6px; }

/* Stat rows, dots, divider. */
.wp-stat { display: flex; align-items: center; gap: 8px; height: var(--wp-stat-h); font-size: 13px; }
.wp-stat-l { flex: 1 1 auto; min-width: 0; color: var(--wp-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-stat-v { flex: none; font-weight: 600; color: var(--wp-text); white-space: nowrap; }
.wp-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; }
.wp-dot-inuse { background: var(--wp-mem-in-use); }
.wp-dot-comp { background: var(--wp-mem-compressed); }
.wp-dot-cached { background: var(--wp-mem-cached); }
.wp-dot-free { background: var(--wp-mem-free); }
.wp-divider { height: 19px; margin: 0 -7px; position: relative; flex: none; }
.wp-divider::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 1px; background: var(--wp-divider); }

/* Memory by type. */
.wp-stack { display: flex; gap: 2px; height: 6px; border-radius: 3px; overflow: hidden; margin: 6px 0; }
.wp-seg { flex: none; height: 100%; }
.wp-seg-inuse { background: var(--wp-mem-in-use); }
.wp-seg-comp { background: var(--wp-mem-compressed); }
.wp-seg-cached { background: var(--wp-mem-cached); }
.wp-seg-free { flex: 1 1 auto; min-width: 0; background: var(--wp-mem-free); }

/* Top lists. */
.wp-list-head { display: flex; align-items: center; gap: 5px; height: 18px; }
.wp-list-title { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--wp-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-list-note { flex: none; font-size: 11px; color: var(--wp-text-2); }
.wp-rows { position: relative; overflow: hidden; }
.wp-row { position: absolute; left: 0; right: 0; top: 0; height: var(--wp-row-h); display: flex; align-items: center; transition: transform 260ms var(--wp-ease-out); }
.wp-row-icon { width: 16px; height: 16px; }
.wp-row-name { flex: 1 1 auto; min-width: 0; margin: 0 10px 0 11px; font-size: 13px; font-weight: 500; color: var(--wp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-row-bar { width: var(--wp-bar-w); }
.wp-row-val { flex: none; width: var(--wp-value-w); text-align: right; font-size: 13px; font-weight: 600; color: var(--wp-text); white-space: nowrap; }
.wp-empty-row { height: var(--wp-row-h); display: flex; align-items: center; font-size: 13px; color: var(--wp-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: reduce) { .wp-row { transition: none; } }

/* Overview: Heads Up. */
.wp-worth { padding-top: 10px; padding-bottom: 10px; display: flex; flex-direction: column; gap: 6px; }
.wp-worth-row { display: flex; gap: 8px; align-items: flex-start; }
.wp-worth-i { width: 14px; height: 14px; margin-top: 2px; color: var(--wp-warning-text); }
.wp-worth-t { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--wp-text); }

/* Battery: the Bluetooth devices' batteries (hardware.slint DeviceRow). */
.wp-devices { display: flex; flex-direction: column; }
.wp-dev-list { display: flex; flex-direction: column; }
.wp-dev { display: flex; align-items: center; height: var(--wp-row-h); min-width: 0; }
.wp-dev-i { width: 16px; height: 16px; color: var(--wp-text-2); }
.wp-dev-n { flex: 1 1 auto; min-width: 0; margin: 0 10px 0 11px; font-size: 13px; font-weight: 500; color: var(--wp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-dev-bar { width: var(--wp-bar-w); }
.wp-dev-bar .wp-bar-fill { background: var(--wp-battery); }
.wp-dev-v { flex: none; width: 42px; text-align: right; font-size: 13px; font-weight: 600; color: var(--wp-text); }

/* Sound (sound.slint SoundTab): the default output, then one 28 px line per app (round 10). */
.wp-snd-card { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; padding-bottom: 8px; }
.wp-snd-out { flex-direction: row; align-items: center; gap: 8px; padding-top: 10px; padding-bottom: 10px; }
.wp-mute { width: 28px; height: 28px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex: none; }
.wp-mute-glyph { width: 18px; height: 18px; color: var(--wp-text-2); }
.wp-mute .wp-mute-app { width: 16px; height: 16px; }
.wp-snd-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wp-snd-out-n { height: 20px; line-height: 20px; font-size: 13px; font-weight: 500; color: var(--wp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-snd-level { display: flex; align-items: center; gap: 8px; }
.wp-snd-pct { flex: none; width: 36px; text-align: right; font-size: 11px; color: var(--wp-text-2); }
.wp-snd-row { display: flex; align-items: center; gap: 8px; height: 28px; min-width: 0; }
.wp-snd-name { flex: none; width: 96px; font-size: 13px; font-weight: 500; color: var(--wp-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-snd-row.is-playing .wp-snd-name { color: var(--wp-text); }
.wp-snd-chip { flex: none; width: 22px; height: 22px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--wp-track); color: var(--wp-text-2); }
.wp-snd-chip.is-none { background: none; }
.wp-snd-chip-i { width: 14px; height: 14px; }
/* A volume slider (slider.slint): 4 px track, the fill and the lighter live level in the Sound
   colour, a 14 px white thumb. */
.wp-msl { position: relative; flex: 1 1 auto; min-width: 60px; height: 20px; }
.wp-msl-track, .wp-msl-fill, .wp-msl-level { position: absolute; left: 7px; top: 8px; height: 4px; border-radius: 2px; }
.wp-msl-track { right: 7px; background: var(--wp-track); }
.wp-msl-fill { background: var(--wp-sound); }
.wp-msl-level { background: color-mix(in srgb, var(--wp-sound) 45%, #ffffff); }
.wp-msl-level[hidden] { display: none; }
.wp-msl-thumb { position: absolute; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #ffffff; }
.wp-app[data-theme="light"] .wp-msl-thumb { box-shadow: 0 0 0 1px var(--wp-hairline); }

/* Footer: Open WinPulse, the gear, Quit. */
.wp-footer { flex: none; display: flex; gap: 8px; height: var(--wp-btn-h); margin: 10px 12px 0; transition: opacity 300ms var(--wp-ease-in-out); }
.wp-fbtn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 30px; border-radius: 12px; background: var(--wp-card); color: var(--wp-text); font-size: 13px; font-weight: 600; transition: background-color 100ms ease; }
.wp-fbtn-open { flex: 1 1 auto; min-width: 0; }
.wp-fbtn-gear { flex: none; width: 30px; border-radius: 15px; }
.wp-fbtn-quit { flex: none; width: 76px; }
.wp-fbtn-i { width: 16px; height: 16px; }

/* Tab strip: 8 slots; the pill slides, the white icons are a clipped copy (C5). */
.wp-strip { flex: none; position: relative; height: var(--wp-strip-h); margin: 10px 12px 12px; background: var(--wp-card); border-radius: var(--wp-strip-radius); transition: opacity 300ms var(--wp-ease-in-out); }
.wp-strip-pill { position: absolute; left: 4px; top: 4px; height: 30px; border-radius: var(--wp-pill-radius); background: var(--acc); transition: transform 200ms var(--wp-ease-out), background-color 200ms ease; }
.wp-strip-active { position: absolute; inset: 0; border-radius: var(--wp-strip-radius); background: var(--acc); pointer-events: none; transition: clip-path 200ms var(--wp-ease-out), background-color 200ms ease; }
.wp-strip-active-slot { position: absolute; top: 0; height: 38px; display: flex; align-items: center; justify-content: center; color: var(--wp-on-accent); }
.wp-strip.wp-acc-overview .wp-strip-active-slot { color: var(--wp-on-overview); }
.wp-tab { position: absolute; top: 0; height: 38px; display: flex; align-items: center; justify-content: center; color: var(--wp-tab-icon); outline: none; }
.wp-tab-i { width: 18px; height: 18px; }
.wp-tab:focus-visible::after { content: ""; position: absolute; left: -2px; right: -2px; top: 2px; bottom: 2px; border: 2px solid var(--wp-focus); border-radius: 11px; }
@media (prefers-reduced-motion: reduce) { .wp-strip-pill, .wp-strip-active { transition: none; } }

/* Hover and press: colour only, no scale (the app's feel). */
@media (hover: hover) and (pointer: fine) {
  .wp-fbtn:hover { background: var(--wp-button-hover); }
}
.wp-fbtn:active { background: var(--wp-button-pressed); }
.wp-fbtn:focus-visible { outline: 2px solid var(--wp-focus); outline-offset: 0; }
.wp-panel-body:focus-visible { outline: none; }

/* ---- the taskbar (B5) ---------------------------------------------------------------------- */
.wp-taskbar { position: absolute; left: 0; right: 0; bottom: 0; height: var(--wp-taskbar-h); z-index: 3; display: flex; align-items: center; justify-content: flex-end;
  background: var(--wp-os-taskbar); box-shadow: inset 0 1px 0 var(--wp-os-taskbar-edge); color: var(--wp-os-ink); font-size: 12px; transition: opacity 300ms var(--wp-ease-in-out); }
.wp-tb-center { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); display: flex; gap: 4px; }
.wp-tb-btn { position: relative; width: 40px; height: 40px; border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.wp-tb-i { width: 24px; height: 24px; }
.wp-tb-center .wp-tb-i[class*="wp-brand-"] { width: 22px; height: 22px; }
.wp-tb-start { color: var(--wp-win-blue); }
.wp-tb-folder { color: #f2c55c; }
.wp-tb-dash { position: absolute; bottom: 2px; left: 50%; width: 6px; height: 3px; margin-left: -3px; border-radius: 1.5px; background: var(--wp-os-running); opacity: 0; transition: opacity 150ms ease; }
.wp-tb-dash.is-running { opacity: 1; }
.wp-tb-dash.is-focused { width: 16px; margin-left: -8px; background: var(--wp-os-accent); opacity: 1; }
.wp-tb-wp { display: none; }
.wp-has-window .wp-tb-wp { display: flex; }
.wp-tb-wp .wp-tb-i { width: 22px; height: 22px; }
.wp-tray { display: flex; align-items: center; height: 100%; padding-right: 0; }
.wp-tray-btn { position: relative; width: 32px; height: 40px; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: var(--wp-os-ink); transition: background-color 150ms var(--wp-ease-out); }
.wp-tray-i { width: 16px; height: 16px; }
.wp-tray-wp { outline: none; }
.wp-tray-wp:focus-visible { box-shadow: 0 0 0 2px var(--wp-focus); }
.wp-tray-glyph, .wp-tray-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: transform 80ms var(--wp-ease-out); }
.wp-tray-gi { width: 16px; height: 16px; }
.wp-tray-num { font-family: var(--wp-font-display); font-weight: 700; font-size: 13px; letter-spacing: -0.3px; display: none; }
.wp-tray-num.is-3 { font-size: 10px; }
.wp-tray-wp.is-number .wp-tray-num { display: flex; }
.wp-tray-wp.is-number .wp-tray-glyph { display: none; }
.wp-tray-wp.is-pressed { background: var(--wp-os-pressed); transition-duration: 80ms; }
.wp-tray-wp.is-pressed .wp-tray-glyph, .wp-tray-wp.is-pressed .wp-tray-num { transform: scale(0.92); }
@media (prefers-reduced-motion: reduce) { .wp-tray-wp.is-pressed .wp-tray-glyph, .wp-tray-wp.is-pressed .wp-tray-num { transform: none; } }
.wp-tray-quick { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 10px; border-radius: 4px; }
.wp-tray-clock { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 78px; height: 40px; padding: 0 12px; border-radius: 4px; line-height: 16px; white-space: nowrap; }
.wp-tray-sliver { width: 8px; height: 100%; }
@media (hover: hover) and (pointer: fine) {
  .wp-tray-btn:hover, .wp-tray-quick:hover, .wp-tray-clock:hover { background: var(--wp-os-hover); }
  .wp-tray-wp.is-pressed:hover { background: var(--wp-os-pressed); }
}
/* A narrow stage: the taskbar becomes a tray strip, the corner of a screen. */
@container wpstage (max-width: 719px) {
  .wp-taskbar { border-radius: 0 0 12px 12px; }
  .wp-tb-center { display: none; }
}
.wp-compact .wp-tb-center { display: none; }

/* Tooltip above the tray icon (B5.4, C4). */
.wp-tip { position: absolute; bottom: calc(var(--wp-taskbar-h) + 4px); right: 110px; z-index: 5; pointer-events: none; white-space: nowrap;
  background: var(--wp-os-tooltip); border: 1px solid var(--wp-os-tooltip-border); border-radius: 4px; padding: 6px 8px; font-size: 12px; color: var(--wp-os-ink);
  box-shadow: 0 4px 8px rgba(0,0,0,0.14); opacity: 0; transform: translateY(4px); transition: opacity 80ms var(--wp-ease-out), transform 80ms var(--wp-ease-out); }
.wp-tip.is-shown { opacity: 1; transform: none; transition-duration: 120ms; }
@media (prefers-reduced-motion: reduce) { .wp-tip { transform: none; } }

/* ---- spotlight (C32) ------------------------------------------------------------------------ */
.wp-spot-ring { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 6; pointer-events: none; border: 2px solid var(--wp-spot, var(--wp-focus)); opacity: 0;
  transition: transform 300ms var(--wp-ease-in-out), width 300ms var(--wp-ease-in-out), height 300ms var(--wp-ease-in-out), border-radius 300ms var(--wp-ease-in-out), opacity 150ms ease; }
.wp-spot-on .wp-spot-ring { opacity: 1; }
.wp-spot-on :is(.wp-panel, .wp-taskbar, .wp-footer, .wp-strip, .wp-tab-view > *, .wp-hero > *, .wp-tray > *):not(.wp-spot-keep) { opacity: 0.55; }
.wp-tray > * { transition: opacity 300ms var(--wp-ease-in-out), background-color 150ms var(--wp-ease-out); }
.wp-tab-view > *, .wp-hero > * { transition: opacity 300ms var(--wp-ease-in-out); }
@media (prefers-reduced-motion: reduce) { .wp-spot-ring { transition: opacity 150ms ease; } }

/* ---- ghost cursor (C31) --------------------------------------------------------------------- */
.wp-cursor { position: absolute; left: 0; top: 0; z-index: 8; pointer-events: none; opacity: 0; transform-origin: 2px 2px; }
.wp-cursor-i { width: 16px; height: 24px; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3)); }

/* ---- the Windows notification (B5.5) ------------------------------------------------------- */
.wp-toast-host { position: absolute; right: 12px; bottom: calc(var(--wp-taskbar-h) + 12px); width: min(364px, calc(100% - 24px)); z-index: 7; pointer-events: none; }
.wp-no-taskbar .wp-toast-host { bottom: 12px; }
.wp-toast + .wp-toast { margin-top: 8px; }
.wp-toast { pointer-events: auto; width: 100%; border-radius: 8px; overflow: hidden; color: var(--wp-os-ink); touch-action: pan-y; cursor: default;
  background: var(--wp-os-toast-solid); border: 1px solid var(--wp-os-toast-border); box-shadow: var(--wp-os-shadow-toast); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .wp-toast { background: var(--wp-os-toast); -webkit-backdrop-filter: blur(30px) saturate(125%); backdrop-filter: blur(30px) saturate(125%); }
}
@media (prefers-reduced-transparency: reduce) {
  .wp-toast { background: var(--wp-os-toast-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.wp-toast-head { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px 0 16px; }
.wp-toast-mark { width: 16px; height: 16px; }
.wp-toast-app { font-size: 12px; color: var(--wp-os-ink-2); }
.wp-toast-flex { flex: 1 1 auto; }
.wp-toast-hbtn { width: 32px; height: 32px; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: var(--wp-os-ink); margin-left: -8px; }
.wp-toast-hbtn + .wp-toast-hbtn { margin-left: -8px; }
.wp-toast-hi { width: 12px; height: 12px; }
.wp-toast-body { padding: 0 16px 16px; }
.wp-toast-title { font-size: 14px; font-weight: 600; line-height: 20px; color: var(--wp-os-ink); }
.wp-toast-detail { font-size: 14px; line-height: 20px; color: var(--wp-os-ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wp-toast-actions { padding: 0 16px 16px; }
.wp-toast-btn { width: 100%; height: 32px; border-radius: 4px; background: var(--wp-os-button); border: 1px solid var(--wp-os-button-border); font-size: 14px; color: var(--wp-os-ink); transition: background-color 100ms ease; }
@media (hover: hover) and (pointer: fine) {
  .wp-toast-hbtn:hover { background: var(--wp-os-hover); }
  .wp-toast-btn:hover { background: var(--wp-os-button-hover); }
}
.wp-toast-hbtn:focus-visible, .wp-toast-btn:focus-visible { outline: 2px solid var(--wp-focus); outline-offset: -2px; }