/* The WinPulse window recreation (spec A10, B3, C, E3). Tokens come from tokens.css (B1); only
   window-only helpers live here. Inside .wp-app everything is px, like the app. */

.wp-win-host {
  position: relative;
  container: wpwin / inline-size;
  color: var(--wp-w-text);
  --wp-spot-color: var(--wp-focus);
}

/* Accents per element (the metric colour per tab). */
.wp-win-host .wp-acc-overview { --acc: var(--wp-overview); }
.wp-win-host .wp-acc-cpu { --acc: var(--wp-cpu); }
.wp-win-host .wp-acc-memory { --acc: var(--wp-memory); }
.wp-win-host .wp-acc-disk { --acc: var(--wp-disk); }
.wp-win-host .wp-acc-network { --acc: var(--wp-network); }
.wp-win-host .wp-acc-gpu { --acc: var(--wp-gpu); }
.wp-win-host .wp-acc-battery { --acc: var(--wp-battery); }
.wp-win-host .wp-acc-sound { --acc: var(--wp-sound); }
.wp-win-host .wp-acc-heat { --acc: var(--wp-w-heat); }
.wp-win-host .wp-acc-mixer { --acc: var(--wp-w-mixer); }
.wp-win-host .wp-acc-brand { --acc: var(--wp-brand); }

/* App icons in their brand colours (Simple Icons, CC0). */
.wp-win-host .wp-brand-googlechrome { color: #4285f4; }
.wp-win-host .wp-brand-discord { color: #5865f2; }
.wp-win-host .wp-brand-spotify { color: #1ed760; }
.wp-win-host .wp-brand-steam { color: var(--wp-w-text); }
.wp-win-host .wp-brand-whatsapp { color: #25d366; }
.wp-win-host .wp-brand-nodedotjs { color: #5fa04e; }
.wp-win-host .wp-brand-python { color: #3776ab; }
.wp-win-host .wp-brand-googledrive { color: #4285f4; }
.wp-win-host .wp-brand-zoom { color: #0b5cff; }
.wp-win-host .wp-brand-roblox { color: var(--wp-w-text); }
.wp-win-host .wp-brand-windows { color: var(--wp-win-blue); }
.wp-win-host .wp-brand-services { color: var(--wp-label); }

/* Shades: apps fade from the accent by rank, the rest grey; memory types their own colours. */
.wp-win-host .wp-sh0 { color: var(--acc); }
.wp-win-host .wp-sh1 { color: color-mix(in srgb, var(--acc) 83%, var(--wp-w-card)); }
.wp-win-host .wp-sh2 { color: color-mix(in srgb, var(--acc) 66%, var(--wp-w-card)); }
.wp-win-host .wp-sh3 { color: color-mix(in srgb, var(--acc) 49%, var(--wp-w-card)); }
.wp-win-host .wp-sh4 { color: color-mix(in srgb, var(--acc) 32%, var(--wp-w-card)); }
.wp-win-host .wp-sh5 { color: var(--wp-w-other); }
.wp-win-host .wp-sh10 { color: var(--wp-mem-in-use); }
.wp-win-host .wp-sh11 { color: var(--wp-mem-compressed); }
.wp-win-host .wp-sh12 { color: var(--wp-mem-cached); }
.wp-win-host .wp-sh13 { color: var(--wp-mem-free); }

.wp-win-host .wp-none { display: none !important; }
.wp-win-host :where(.wp-flex) { flex: 1 1 0; min-width: 0; }
.wp-win-host :where(.wp-i) { width: 16px; height: 16px; fill: currentColor; flex: none; display: block; }
.wp-win-host :where(button) {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0;
  cursor: default; -webkit-tap-highlight-color: transparent;
}
.wp-win-host :where(:focus) { outline: none; }
.wp-win-host :where(:focus-visible) { outline: 2px solid var(--wp-focus); outline-offset: 0; }
.wp-win-host :where(h2, h3) { margin: 0; font-weight: 700; }

/* ---------- the window frame ---------- */
.wp-win {
  position: relative;
  display: flex; flex-direction: column;
  width: 100%;
  background: var(--wp-w-ground);
  color: var(--wp-w-text);
  font-size: var(--wp-w-size-body);
  border-radius: 8px;
  border: 1px solid var(--wp-os-window-border);
  box-shadow: var(--wp-os-shadow-window);
  overflow: hidden;
  transform-origin: 50% 50%;
}
.wp-win[hidden] { display: none; }
.wp-win[data-frame="bare"] { border-radius: var(--wp-w-radius); box-shadow: none; }
/* The active window (scrolling inside) wears a focus ring (spec C33). */
.wp-win::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 2px var(--wp-focus); opacity: 0; transition: opacity 150ms ease; z-index: 6;
}
.wp-win.is-active::after { opacity: 1; }

.wp-win-title {
  position: relative; display: flex; align-items: center; height: 32px; flex: none;
  padding-left: 12px;
}
.wp-win-mark { width: 16px; height: 16px; }
.wp-win-name { margin-left: 8px; font-size: 12px; color: var(--wp-w-text-2); }
.wp-win-caps { margin-left: auto; display: flex; height: 32px; }
.wp-cap {
  width: 46px; height: 32px; display: grid; place-items: center; color: var(--wp-w-text);
  transition: background-color 100ms ease, color 100ms ease;
}
.wp-cap-i { width: 10px; height: 10px; }
.wp-win[data-frame="bare"] .wp-win-caps { display: none; }
@media (hover: hover) and (pointer: fine) {
  .wp-cap:hover { background: var(--wp-os-hover); }
  .wp-cap-close:hover { background: var(--wp-caption-close); color: #fff; }
}
.wp-cap:active { background: var(--wp-os-pressed); }
.wp-cap-close:active { background: color-mix(in srgb, var(--wp-caption-close) 85%, transparent); color: #fff; }

/* The toolbar: pill tabs centred (window.js moves them left when the tools need the room), the
   filter or its search button, This PC and the gear on the right. */
.wp-win-toolbar { position: relative; height: var(--wp-w-toolbar-h); flex: none; display: flex; align-items: center; justify-content: flex-start; }
.wp-ptabs {
  display: flex; gap: 2px; padding: 4px; height: 40px; border-radius: 20px;
  background: var(--wp-w-control); border: 1px solid var(--wp-w-control-border);
}
.wp-ptab {
  display: flex; align-items: center; gap: 7px; padding: 0 14px 0 13px; height: 30px; border-radius: 15px;
  font-size: var(--wp-w-size-tab); font-weight: 500; color: var(--wp-w-text-2); white-space: nowrap;
  transition: background-color 200ms ease, color 200ms ease;
}
.wp-ptab-i { width: 16px; height: 16px; }
.wp-ptab.is-on { background: color-mix(in srgb, var(--acc) var(--wp-w-chosen-alpha), transparent); color: var(--acc); font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .wp-ptab:not(.is-on):hover { background: var(--wp-w-hover); color: var(--wp-w-text); }
}
.wp-ptab:focus-visible { outline-offset: -2px; }
.wp-win-tools { position: absolute; right: 16px; top: 0; bottom: 0; display: flex; align-items: center; gap: 8px; }
.wp-filter {
  display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 17px;
  background: var(--wp-w-control); border: 1px solid var(--wp-w-control-border);
  transition: border-color 150ms ease;
}
.wp-filter:focus-within { border-color: var(--wp-focus); }
.wp-filter-i { width: 15px; height: 15px; color: var(--wp-w-label); }
.wp-filter-in {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none; padding: 0;
  font: inherit; font-size: var(--wp-w-size-body); color: var(--wp-w-text);
}
.wp-filter-in::placeholder { color: var(--wp-w-label); opacity: 1; }
.wp-filter-in:focus-visible { outline: none; }
.wp-ibtn {
  width: 32px; height: 32px; border-radius: 16px; display: grid; place-items: center; flex: none;
  color: var(--wp-w-text-2); transition: background-color 100ms ease;
}
.wp-ibtn-i { width: 18px; height: 18px; }
/* Drawn, not clickable: This PC, and the search button of a narrow window. */
.wp-ibtn-still { pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .wp-ibtn:hover { background: var(--wp-w-hover); } }
.wp-ibtn:active { background: var(--wp-w-pressed); }

/* The page scrolls inside the window on desktop, only while the window is active (C33). */
.wp-win-body {
  position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--wp-w-label) 45%, transparent) transparent;
}
.wp-win.is-active .wp-win-body { overflow-y: auto; overscroll-behavior: contain; }
.wp-win-body::-webkit-scrollbar { width: 10px; }
.wp-win-body::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--wp-w-label) 40%, transparent); border: 3px solid transparent; background-clip: content-box; border-radius: 5px; }
.wp-win-body::-webkit-scrollbar-track { background: transparent; }
.wp-win-status {
  height: var(--wp-w-status-h); flex: none; display: flex; align-items: center; padding: 0 16px;
  border-top: 1px solid var(--wp-w-hairline); font-size: var(--wp-w-size-small); color: var(--wp-w-text-2);
  white-space: nowrap; overflow: hidden;
}
.wp-win-hint {
  position: absolute; left: 50%; bottom: 44px; transform: translate(-50%, 4px); z-index: 7;
  padding: 7px 12px; border-radius: 10px; font-size: 12px; font-weight: 500; color: var(--wp-w-text);
  background: var(--wp-w-tooltip); border: 1px solid var(--wp-w-tooltip-border); box-shadow: 0 2px 12px rgba(0,0,0,0.2);
  opacity: 0; pointer-events: none; transition: opacity 150ms ease, transform 150ms var(--wp-ease-out);
}
.wp-win-hint.is-on { opacity: 1; transform: translate(-50%, 0); }
.wp-win-reopen {
  display: none; margin: 40px auto; align-items: center; gap: 10px; height: 44px; padding: 0 20px 0 14px;
  border-radius: 22px; background: var(--wp-w-card); color: var(--wp-w-text); font-size: 14px; font-weight: 600;
  border: 1px solid var(--wp-w-control-border); transition: background-color 100ms ease;
}
.wp-win-reopen.is-on { display: flex; }
.wp-win-reopen-i { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .wp-win-reopen:hover { background: var(--wp-w-hover); } }

/* ---------- the page ---------- */
.wp-page { display: flex; flex-direction: column; gap: var(--wp-w-gap); padding: var(--wp-w-page-pad); }
.wp-ph { display: flex; flex-direction: column; gap: 2px; }
.wp-win-host :is(h2, h3) { letter-spacing: normal; font-weight: 700; text-wrap: nowrap; }
.wp-ph-t { font-family: var(--wp-font-display); font-size: var(--wp-w-size-page-title); line-height: 1.21; color: var(--wp-w-text); }
.wp-ph-s { font-size: var(--wp-w-size-page-subtitle); font-weight: 500; color: var(--wp-w-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-st { font-family: var(--wp-font-display); font-size: var(--wp-w-size-section); line-height: 1.21; color: var(--wp-w-text); margin-top: 14px; }
.wpw-card { background: var(--wp-w-card); border-radius: var(--wp-w-radius); padding: var(--wp-w-card-pad); min-width: 0; position: relative; }

.wp-ct { display: flex; align-items: center; gap: 8px; height: 20px; color: var(--acc); min-width: 0; }
.wp-ct-i { width: 16px; height: 16px; }
.wp-ct-t { flex: 1; min-width: 0; font-size: var(--wp-w-size-card-title); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-ct-r { font-size: var(--wp-w-size-small); color: var(--wp-w-text-2); white-space: nowrap; }
.wp-ct-go { width: 24px; height: 20px; border-radius: 6px; display: grid; place-items: center; color: var(--wp-w-label); transition: background-color 100ms ease; }
.wp-ct-gi { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) { .wp-ct-go:hover { background: var(--wp-w-hover); } }
.wp-ct-go:active { background: var(--wp-w-pressed); }

/* Big numbers: number and unit on one baseline. */
.wp-bn { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; line-height: 1.21; }
.wp-bn-n { font-family: var(--wp-font-display); font-weight: 700; color: var(--wp-w-text); }
.wp-bn-u { font-weight: 600; color: var(--wp-w-text-2); }
.wp-bn-44 .wp-bn-n { font-size: 44px; } .wp-bn-44 .wp-bn-u { font-size: var(--wp-w-size-unit); }
.wp-bn-38 .wp-bn-n { font-size: var(--wp-w-size-number); } .wp-bn-38 .wp-bn-u { font-size: var(--wp-w-size-unit); }
.wp-bn-30 .wp-bn-n { font-size: 30px; } .wp-bn-30 .wp-bn-u { font-size: 17px; }
.wp-hero-nr .wp-bn-30 .wp-bn-u { font-size: 16px; }
.wp-bn-20 .wp-bn-n { font-size: 20px; } .wp-bn-20 .wp-bn-u { font-size: 13px; }
.wp-bn[data-tone="0"] .wp-bn-n { color: var(--wp-normal-text); }
.wp-bn[data-tone="1"] .wp-bn-n { color: var(--wp-warning-text); }
.wp-bn[data-tone="2"] .wp-bn-n { color: var(--wp-high-text); }

.wpw-badge {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px 0 6px; border-radius: 10px;
  font-size: var(--wp-size-small); font-weight: 600; white-space: nowrap;
  color: var(--wp-warning-text); background: var(--wp-warning-chip);
}
.wpw-badge-i { width: 12px; height: 12px; }
.wpw-badge[data-tone="0"] { color: var(--wp-normal-text); background: var(--wp-normal-chip); padding: 0 8px; }
.wpw-badge[data-tone="0"] .wpw-badge-i { display: none; }
.wpw-badge[data-tone="2"] { color: var(--wp-high-text); background: var(--wp-high-chip); }

/* Bars move with transform only (C10). */
.wp-w-bar { position: relative; display: block; width: 56px; height: 6px; border-radius: 3px; overflow: hidden; background: var(--wp-w-track); flex: none; }
.wp-w-bar-fill { position: absolute; inset: 0; border-radius: 3px; background: var(--acc); transform: translateX(-100%); transition: transform 350ms var(--wp-ease-data); }
.wpw-dot, .wp-dot8 { display: inline-block; border-radius: 50%; background: currentColor; flex: none; }
.wpw-dot { width: 7px; height: 7px; }
.wp-dot8 { width: 8px; height: 8px; }

/* Segmented controls (C22). */
.wpw-seg { display: inline-flex; gap: 2px; padding: 3px; height: var(--wp-w-control-h); border-radius: 16px; background: var(--wp-w-control); flex: none; max-width: 100%; }
.wp-seg-b {
  height: 26px; min-width: 34px; padding: 0 12px; border-radius: 13px; font-size: 13px; font-weight: 500;
  color: var(--wp-w-text-2); white-space: nowrap; display: grid; place-items: center;
  transition: background-color 150ms var(--wp-ease-out), color 150ms var(--wp-ease-out);
}
.wp-seg-b.is-on { background: var(--wp-w-control-selected); color: var(--wp-w-text); font-weight: 600; }
.wp-seg-icons .wp-seg-b { padding: 0; width: 34px; }
.wp-seg-icons .wp-seg-b.is-on { background: var(--acc); color: var(--wp-on-accent); }
.wp-seg-i { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .wp-seg-b:not(.is-on):hover { background: var(--wp-w-hover); } }
.wp-seg-b:focus-visible { outline-offset: -2px; }

/* Small pill buttons: Ignore, Quit, Cancel. */
.wp-tbtn {
  height: 28px; padding: 0 13px; border-radius: 14px; font-size: 13px; font-weight: 600; white-space: nowrap;
  background: var(--wp-w-control); color: var(--wp-w-text); flex: none; transition: background-color 100ms ease;
}
.wp-tbtn.wp-danger { color: var(--wp-w-danger); }
@media (hover: hover) and (pointer: fine) { .wp-tbtn:hover { background: var(--wp-w-hover); } }
.wp-tbtn:active { background: var(--wp-w-pressed); }

/* ---------- Overview ---------- */
.wp-ov-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp-w-gap); }
.wp-mc { display: flex; flex-direction: column; min-height: 236px; padding-bottom: 18px; }
.wp-mc-l { margin-top: 12px; font-size: var(--wp-w-size-small); font-weight: 500; color: var(--wp-w-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-mc-row { display: flex; align-items: flex-end; gap: 10px; margin-top: 2px; min-width: 0; }
.wp-mc-row .wpw-badge { margin-bottom: 8px; }
.wp-mc-aside { display: inline-flex; align-items: center; gap: 3px; padding-bottom: 7px; font-size: 14px; font-weight: 600; color: var(--wp-w-text-2); white-space: nowrap; }
.wp-mc-ai { width: 13px; height: 13px; }
.wp-mc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
.wp-mc-s { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wp-mc-sl { display: flex; align-items: center; gap: 6px; font-size: var(--wp-w-size-small); font-weight: 500; color: var(--wp-w-text-2); white-space: nowrap; overflow: hidden; }
.wp-mc-sl span:last-child { overflow: hidden; text-overflow: ellipsis; }
.wp-mc-sv { font-size: var(--wp-w-size-stat); font-weight: 600; color: var(--wp-w-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-mc > .wp-flex { min-height: 14px; }
/* The wave (0.4.1): it fills the card's spare height and runs to its bottom and side edges,
   clipped by the rounded corners. */
.wp-mc:has(.wpw-wave) { padding-bottom: 0; overflow: hidden; }
.wp-mc:has(.wpw-wave) > .wp-flex { flex: 0 0 6px; }
.wpw-strip.wpw-wave { flex: 1 1 auto; min-height: 64px; margin: 0 calc(-1 * var(--wp-w-card-pad)); }
.wpw-strip svg { display: block; width: 100%; height: 100%; }
.wp-wave-s0 { stop-color: var(--acc); stop-opacity: 0.40; }
.wp-wave-s1 { stop-color: var(--acc); stop-opacity: 0.06; }
.wp-wave-line { fill: none; stroke: var(--acc); stroke-width: 1.8; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }

.wp-alerts { display: flex; flex-direction: column; gap: 14px; }
.wp-al-calm { display: flex; align-items: center; gap: 14px; }
.wp-al-ok { width: 24px; height: 24px; color: var(--wp-w-good); }
.wp-al-t { font-size: 15px; font-weight: 600; color: var(--wp-w-text); }
.wp-al-d { margin-top: 2px; font-size: 13px; color: var(--wp-w-text-2); }
.wp-al-list { display: flex; flex-direction: column; gap: 14px; }
.wp-al-list:empty { display: none; }
.wp-al-row { display: flex; align-items: center; gap: 14px; }
.wp-al-warn { width: 22px; height: 22px; color: var(--wp-warning-text); }
.wp-al-txt { flex: 1; min-width: 0; }

.wp-ov-donuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp-w-gap); }
.wp-dc { display: flex; flex-direction: column; gap: 14px; min-height: 236px; }
.wp-dc-b { display: flex; align-items: center; gap: 28px; flex: 1; min-width: 0; }
.wp-donut { position: relative; width: 164px; height: 164px; flex: none; }
.wp-donut svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.wp-donut circle { fill: none; stroke-width: 14; }
.wp-donut-track { stroke: var(--wp-w-track); opacity: 0; }
.wp-donut-seg { stroke: currentColor; }
.wp-donut-mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.wp-donut-n { gap: 0.26em; }
.wp-donut-n .wp-bn-n, .wp-donut-n .wp-bn-u { font-family: var(--wp-font-display); font-weight: 700; font-size: 24px; color: var(--wp-w-text); }
.wp-donut-n[aria-label$="%"] { gap: 0; }
.wp-donut-l { font-size: var(--wp-w-size-small); font-weight: 500; color: var(--wp-w-text-2); }
.wp-lg { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wp-lg-r { display: flex; align-items: center; gap: 10px; height: 27px; min-width: 0; }
.wp-lg-sw { width: 9px; height: 9px; border-radius: 2.5px; background: currentColor; flex: none; }
.wp-lg-i { display: contents; }
.wp-lg-i .wp-w-appi { width: 16px; height: 16px; }
.wp-lg-n { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; color: var(--wp-w-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-lg-v { font-size: 14px; color: var(--wp-w-text-2); white-space: nowrap; }

.wp-ov-hw { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp-w-gap); }
.wp-temps { display: flex; flex-direction: column; gap: 12px; }
.wp-temps-g { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wp-temps-c { display: flex; flex-direction: column; gap: 3px; }
.wp-temps-l { font-size: 12px; font-weight: 500; color: var(--wp-w-text-2); }
.wp-temps-v { font-size: 18px; font-weight: 600; color: var(--wp-w-text); }
.wp-temps-n { font-size: 13px; color: var(--wp-w-text-2); }
.wp-temps-c[data-explain] { border-radius: 6px; }
.wp-devcard, .wp-sndcard { display: flex; flex-direction: column; gap: 12px; }
.wp-dev-l { display: flex; flex-direction: column; gap: 4px; }
.wp-dev-r { display: flex; align-items: center; height: 30px; min-width: 0; }
.wp-dev-i { width: 18px; height: 18px; color: var(--wp-w-text-2); margin-right: 10px; }
.wp-dev-n { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; color: var(--wp-w-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 10px; }
.wp-dev-b { width: 64px; }
.wp-dev-b .wp-w-bar-fill { background: var(--wp-battery); }
.wp-dev-v { width: 46px; flex: none; text-align: right; font-size: 14px; font-weight: 600; color: var(--wp-w-text); }
.wp-snd-o { display: flex; gap: 12px; }
.wp-snd-oc { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.wp-snd-oc.wp-snd-r { flex: none; text-align: right; }
.wp-snd-ov { font-size: 16px; font-weight: 600; color: var(--wp-w-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 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-vs { position: relative; flex: 1; min-width: 60px; height: 20px; }
.wp-vs-track, .wp-vs-fill, .wp-vs-level { position: absolute; left: 7px; top: 8px; height: 4px; border-radius: 2px; }
.wp-vs-track { right: 7px; background: var(--wp-w-track); }
.wp-vs-fill { background: var(--wp-sound); }
.wp-vs-level { background: color-mix(in srgb, var(--wp-sound) 45%, #ffffff); }
.wp-vs-thumb { position: absolute; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #ffffff; }
.wp-app[data-theme="light"] .wp-vs-thumb { box-shadow: 0 0 0 1px var(--wp-w-control-border); }

.wp-ot-head { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.wp-ot-head .wp-st { margin-top: 0; flex: 1; min-width: 0; }
.wp-ot-ctl { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.wp-ov-ot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp-w-gap); align-items: stretch; }
.wp-otc { grid-column: span 2; display: flex; flex-direction: column; }
.wp-otc > .wp-bn { margin-top: 8px; }
.wp-otc-s { margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--wp-w-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-otc .wp-ac { margin-top: 14px; height: 250px; }
.wp-ota { display: flex; flex-direction: column; gap: 4px; }
.wp-ota-l { margin-top: 6px; display: flex; flex-direction: column; }
.wp-ota-r { display: flex; align-items: center; gap: 12px; height: 38px; }
.wp-ota-i { display: contents; }
.wp-ota-i .wp-w-appi { width: 18px; height: 18px; }
.wp-ota-n { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-ota-b { width: 64px; }
.wp-ota-v { width: 76px; flex: none; text-align: right; font-size: 14px; font-weight: 600; white-space: nowrap; }

/* ---------- the area chart ---------- */
.wp-ac { position: relative; min-width: 0; --plot-r: 64px; }
.wp-ac-plot { position: absolute; left: 0; top: 8px; right: var(--plot-r); bottom: 26px; }
.wp-ac-grid { position: absolute; left: 0; right: 0; height: 1px; background: var(--wp-w-grid); }
.wp-ac-g0 { top: 0; } .wp-ac-g1 { top: 50%; } .wp-ac-g2 { bottom: 0; }
.wp-ac-clip { position: absolute; inset: 0; overflow: hidden; }
.wp-ac-live .wp-ac-clip { bottom: -26px; }
.wp-ac-glide { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.wp-ac-live .wp-ac-glide { will-change: transform; }
.wp-ac-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.wp-ac-live .wp-ac-svg { height: calc(100% - 26px); }
.wp-ac-line, .wp-ac-line2 { fill: none; stroke-width: 2px; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.wp-ac-line { stroke: var(--acc); }
.wp-ac-line2 { stroke: var(--wp-w-heat); }
.wp-ac-bars { fill: var(--acc); }
.wp-ac-area, .wp-ac-area2, .wp-ac-bars, .wp-ac-line, .wp-ac-line2 { transition: none; }
.wp-stop1-a { stop-color: var(--acc); stop-opacity: var(--wp-w-chart-fill-top); }
.wp-stop2-a { stop-color: var(--wp-w-heat); stop-opacity: 0.22; }
.wp-app[data-theme="light"] .wp-stop2-a { stop-opacity: 0.16; }
.wp-stop-z { stop-color: var(--acc); stop-opacity: 0.02; }
.wp-ac-two .wp-ac-line, .wp-ac-two .wp-ac-bars { stroke: var(--wp-cpu); }
.wp-ac-two .wp-stop1-a, .wp-ac-two .wp-stop-z { stop-color: var(--wp-cpu); }
.wp-ac-two .wp-ac-dot { background: var(--wp-cpu); }
.wp-ac-two .wp-ac-r1 .wp-ac-sw { background: var(--wp-cpu); }
.wp-ac .wp-none { display: none; }
.wp-ac-y { position: absolute; right: 0; width: calc(var(--plot-r) - 12px); transform: translateY(-50%); font-size: 12px; color: var(--wp-w-text-2); white-space: nowrap; }
.wp-ac-y0 { top: 8px; } .wp-ac-y1 { top: calc(8px + (100% - 34px) / 2); } .wp-ac-y2 { top: calc(100% - 26px); }
.wp-ac-x { position: absolute; left: 0; right: var(--plot-r); bottom: 0; height: 26px; pointer-events: none; }
.wp-ac-live .wp-ac-x { right: 0; }
.wp-ac-xl { position: absolute; top: 8px; transform: translateX(-50%); font-size: 12px; color: var(--wp-w-text-2); white-space: nowrap; }
.wp-ac-cross { position: absolute; top: 0; bottom: 0; width: 1px; background: color-mix(in srgb, var(--wp-w-text-2) 50%, transparent); opacity: 0; pointer-events: none; }
.wp-ac-dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 2px var(--wp-w-card); opacity: 0; pointer-events: none; }
.wp-ac-dot2 { background: var(--wp-w-heat); }
.wp-ac-tip {
  position: absolute; left: 0; top: 12px; z-index: 3; pointer-events: none; opacity: 0;
  display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; border-radius: 10px;
  background: var(--wp-w-tooltip); border: 1px solid var(--wp-w-tooltip-border); box-shadow: 0 2px 12px rgba(0,0,0,0.2);
  transition: opacity 100ms ease;
}
.wp-ac-tip-t { font-size: 12px; font-weight: 500; color: var(--wp-w-text-2); }
.wp-ac-tip-r { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.wp-ac-sw { width: 8px; height: 8px; border-radius: 2px; background: var(--acc); }
.wp-ac-r2 .wp-ac-sw { background: var(--wp-w-heat); }
.wp-ac-tl { font-size: 12px; color: var(--wp-w-text-2); flex: 1; min-width: 12px; }
.wp-ac-tv { margin-left: 12px; font-size: 13px; font-weight: 600; color: var(--wp-w-text); }
.wp-ac.is-hover .wp-ac-cross, .wp-ac.is-hover .wp-ac-dot, .wp-ac.is-hover .wp-ac-tip { opacity: 1; }
.wp-ac.is-hover .wp-ac-cross, .wp-ac.is-hover .wp-ac-dot { transition: none; }
.wp-ac-old { pointer-events: none; }

/* ---------- metric tabs ---------- */
.wp-mp-top { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: var(--wp-w-gap); }
.wpw-hero { display: flex; gap: 24px; height: 236px; }
.wp-hero-l { width: 232px; flex: none; display: flex; flex-direction: column; min-width: 0; }
.wpw-hero-num { margin-top: 12px; display: flex; flex-direction: column; gap: 2px; }
.wp-hero-nr { display: flex; align-items: center; gap: 6px; }
.wp-hero-ar { width: 18px; height: 18px; }
.wp-first { color: var(--wp-cpu); }
.wp-second { color: var(--wp-w-heat); }
.wp-hero-s { font-size: 14px; color: var(--wp-w-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-hero-f { display: flex; gap: 28px; }
.wp-fig { display: flex; flex-direction: column; gap: 2px; }
.wp-fig-l { font-size: 12px; color: var(--wp-w-text-2); }
.wp-fig-v { font-size: 16px; font-weight: 700; color: var(--wp-w-text); white-space: nowrap; }
.wp-hero-r { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.wp-hero-r .wp-ac { flex: 1; min-height: 0; }
.wp-keys { display: flex; gap: 18px; height: 16px; align-items: center; }
.wp-key { display: flex; align-items: center; gap: 6px; font-size: 12px; white-space: nowrap; }
.wp-key-d { width: 12px; height: 3px; border-radius: 1.5px; background: currentColor; }
.wp-key-l { color: var(--wp-w-text-2); }
.wp-key-v { color: var(--wp-w-text); font-weight: 700; }

.wp-side { display: flex; flex-direction: column; gap: 14px; height: 236px; }
.wp-side-t { font-size: 14px; font-weight: 600; color: var(--wp-w-text-2); }
.wp-side-n { font-size: 12px; color: var(--wp-w-text-2); }
.wp-cores { flex: 1; min-height: 0; display: flex; gap: 8px; }
.wp-core { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.wp-core-t { position: relative; flex: 1; border-radius: 4px; background: var(--wp-w-track); overflow: hidden; }
.wp-core-f { position: absolute; inset: 0; background: var(--acc); transform: translateY(calc(100% - 3px)); transition: transform 350ms var(--wp-ease-data); }
.wp-core-l { font-size: 11px; color: var(--wp-w-label); text-align: center; }
.wp-sbar { display: flex; gap: 2px; height: 10px; border-radius: 5px; overflow: hidden; margin-bottom: -2px; }
.wp-sbar-s { display: block; height: 100%; background: currentColor; flex: none; }
.wp-sbar-s:last-child { flex: 1; }
.wp-bt-r { display: flex; align-items: center; gap: 8px; height: 24px; margin-top: -2px; border-radius: 6px; }
.wp-bt-n { flex: 1; font-size: 14px; color: var(--wp-w-text); }
.wp-bt-v { font-size: 14px; font-weight: 700; color: var(--wp-w-text); white-space: nowrap; }
.wp-bt-s { width: 40px; text-align: right; font-size: 14px; color: var(--wp-w-label); }
.wp-vol { display: flex; align-items: center; gap: 10px; }
.wp-vol-i { width: 20px; height: 20px; color: var(--wp-w-text-2); }
.wp-vol-x { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wp-vol-n { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-vol-d { font-size: 12px; color: var(--wp-w-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-vol-b { width: 44px; }
.wp-vol-s { width: 38px; text-align: right; font-size: 14px; font-weight: 700; }

.wp-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--wp-w-gap); }
.wp-tile {
  background: var(--wp-w-card); border-radius: var(--wp-w-radius); min-height: 104px; padding: 16px;
  display: flex; flex-direction: column; gap: 10px; min-width: 0; --tone: var(--acc);
}
.wp-tone-first { --tone: var(--wp-cpu); }
.wp-tone-second, .wp-tone-heat { --tone: var(--wp-w-heat); }
.wp-tile-h { display: flex; align-items: center; gap: 9px; min-width: 0; }
.wp-chip { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; color: var(--tone); background: color-mix(in srgb, var(--tone) var(--wp-w-chip-alpha), transparent); }
.wp-chip-i { width: 15px; height: 15px; }
.wp-tile-t { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--wp-w-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-tile-n { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wp-tile-n .wp-w-bar-fill { background: var(--tone); }
/* pre-wrap: the app cuts a long note short ("how busy the drives are" at 1,200 px); the picture
   keeps it whole on a second line instead. */
.wp-tile-nt { flex: 1; min-width: 0; font-size: 12px; color: var(--wp-w-text-2); white-space: pre-wrap; overflow: hidden; }
/* The connection (Network, round 10). */
.wp-conn-h { display: flex; align-items: center; gap: 8px; height: 20px; min-width: 0; }
.wp-conn-i { width: 18px; height: 18px; color: var(--wp-w-text-2); }
.wp-conn-n { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--wp-w-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-conn-s { font-size: 14px; font-weight: 600; color: var(--wp-w-text); }
.wp-conn-s[data-tone="1"] { color: var(--wp-normal-text); }
.wp-conn-s[data-tone="2"] { color: var(--wp-warning-text); }
.wp-conn-s[data-tone="3"] { color: var(--wp-high-text); }
.wp-conn-d { margin-top: -4px; font-size: 12px; color: var(--wp-w-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-conn-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: -4px; }
.wp-conn-c { display: flex; flex-direction: column; gap: 2px; min-width: 0; border-radius: 6px; }
.wp-conn-l { font-size: 12px; color: var(--wp-w-text-2); }
.wp-conn-v { font-size: 14px; font-weight: 600; color: var(--wp-w-text); white-space: nowrap; }
.wp-conn-plot { position: relative; flex: 1; min-height: 40px; margin-top: -4px; border-bottom: 1px solid var(--wp-w-hairline); }
.wp-conn-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wp-conn-top { position: absolute; left: 0; top: 0; font-size: 11px; line-height: 1; color: var(--wp-w-label); }
.wp-conn-router, .wp-conn-inet { fill: none; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.wp-conn-router { stroke: var(--wp-w-label); stroke-width: 1.5px; }
.wp-conn-inet { stroke: var(--acc); stroke-width: 2px; stroke-linecap: round; }
/* The GPU's engines (round 10). */
.wp-eng { display: flex; flex-direction: column; gap: 8px; }
.wp-eng-r { display: flex; align-items: center; gap: 12px; height: 22px; border-radius: 6px; }
.wp-eng-n { flex: 1 1 0; min-width: 92px; font-size: 14px; color: var(--wp-w-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-eng-b { position: relative; flex: 1 1 0; min-width: 40px; max-width: 120px; height: 6px; border-radius: 3px; background: var(--wp-w-track); overflow: hidden; }
.wp-eng-f { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--acc); }
.wp-eng-v { width: 40px; flex: none; text-align: right; font-size: 14px; color: var(--wp-w-text-2); }

/* The per-app table. */
.wp-t-status { font-size: 13px; color: var(--wp-warning-text); }
.wp-sortby { display: none; }
.wp-table { padding: 0 0 8px; overflow: hidden; }
/* The list card's own header (Network: Apps | History; Battery: Now | Since Unplugged). */
.wp-lc-h { display: flex; align-items: center; gap: 10px; padding: var(--wp-w-card-pad) var(--wp-w-card-pad) 4px; }
.wp-lc-h .wp-ct { flex: 1; min-width: 0; }
.wp-td-name > .wp-td-d { flex: none; }
.wp-th, .wp-tr { display: grid; grid-template-columns: var(--grid, minmax(0, 3fr) repeat(3, minmax(0, 2fr))); gap: 16px; padding: 0 20px 0 12px; align-items: center; }
.wp-th { height: 42px; border-bottom: 1px solid var(--wp-w-hairline); }
.wp-th-c {
  display: flex; align-items: center; gap: 4px; height: 42px; min-width: 0; text-align: left;
  font-size: 13px; font-weight: 600; color: var(--wp-w-label); transition: color 100ms ease;
}
.wp-th-c > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-th-name { padding-left: 26px; }
.wp-th-i { width: 12px; height: 12px; color: var(--wp-w-text-2); opacity: 0; transform: rotate(90deg); transition: transform 150ms var(--wp-ease-out); }
.wp-th-c.is-sorted { color: var(--wp-w-text); }
.wp-th-c.is-sorted .wp-th-i { opacity: 1; }
.wp-th-c.is-asc .wp-th-i { transform: rotate(-90deg); }
@media (hover: hover) and (pointer: fine) { .wp-th-c:not(.is-sorted):hover { color: var(--wp-w-text-2); } }
.wp-th-c:focus-visible { outline-offset: -2px; border-radius: 6px; }
.wp-tb { position: relative; }
.wp-tr { position: relative; height: 38px; transition: background-color 100ms ease; }
.wp-tr.is-odd { background: color-mix(in srgb, var(--wp-w-hover) 45%, transparent); }
.wp-tr-proc, .wp-tr-more { height: 32px; }
@media (hover: hover) and (pointer: fine) { .wp-tr:hover { background: var(--wp-w-hover); } }
.wp-tr.is-sel { background: var(--wp-w-hover); }
.wp-td { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; font-size: 14px; font-weight: 500; color: var(--wp-w-text); white-space: nowrap; }
.wp-td-v { overflow: hidden; text-overflow: ellipsis; }
.wp-td-name { justify-content: flex-start; gap: 6px; }
.wp-td-icon { display: contents; }
.wp-td-icon .wp-w-appi { width: 18px; height: 18px; margin-right: 4px; }
.wp-td-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wp-chev { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; color: var(--wp-w-text-2); flex: none; }
.wp-chev-i { width: 14px; height: 14px; transition: transform 150ms var(--wp-ease-out); }
.wp-chev.is-open .wp-chev-i { transform: rotate(90deg); }
.wp-chev.is-hidden { visibility: hidden; }
@media (hover: hover) and (pointer: fine) { .wp-chev:hover { color: var(--wp-w-text); } }
.wp-tr-proc .wp-td, .wp-tr-more .wp-td { font-size: 13px; font-weight: 400; color: var(--wp-w-text-2); }
.wp-tr-proc .wp-td-name, .wp-tr-more .wp-td-name { padding-left: 52px; gap: 6px; }
.wp-td-d { min-width: 0; font-size: 12px; color: var(--wp-w-label); overflow: hidden; text-overflow: ellipsis; }
.wp-quit { opacity: 0; pointer-events: none; transition: opacity 100ms ease, background-color 100ms ease; }
.wp-tr:focus-within .wp-quit, .wp-tr.is-sel .wp-quit { opacity: 1; pointer-events: auto; }
.wp-tr.is-asking .wp-quit { visibility: hidden; }
@media (hover: hover) and (pointer: fine) { .wp-tr:hover .wp-quit { opacity: 1; pointer-events: auto; } }
.wp-ask {
  position: absolute; right: 12px; top: 50%; margin-top: -16px; height: 32px; z-index: 2;
  display: flex; align-items: center; gap: 6px; padding: 0 2px 0 14px; border-radius: 16px;
  background: var(--wp-w-card); border: 1px solid color-mix(in srgb, var(--wp-w-danger) 50%, transparent);
  box-shadow: 0 2px 10px rgba(0,0,0,0.15); transform-origin: 100% 50%;
}
.wp-ask .wp-tbtn { height: 26px; padding: 0 12px; border-radius: 13px; }
.wp-ask-q { font-size: 13px; font-weight: 600; color: var(--wp-w-text); white-space: nowrap; margin-right: 4px; }
.wp-t-empty { height: 56px; display: flex; align-items: center; padding: 0 20px; font-size: 14px; color: var(--wp-w-label); }

/* Sound (tab 7, round 9). */
.wp-sp-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--wp-w-gap); align-items: start; }
.wp-sp-col { display: flex; flex-direction: column; gap: var(--wp-w-gap); min-width: 0; }
.wp-sp-card { display: flex; flex-direction: column; gap: 14px; }
.wp-sp-list { display: flex; flex-direction: column; gap: 12px; }
.wp-snr { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wp-snr-m { width: 28px; height: 28px; border-radius: 14px; display: grid; place-items: center; flex: none; }
.wp-snr-glyph { width: 18px; height: 18px; color: var(--wp-w-text-2); }
.wp-snr-m .wp-snr-app { width: 16px; height: 16px; }
.wp-snr-c { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wp-snr-t { display: flex; align-items: center; gap: 6px; height: 20px; min-width: 0; }
.wp-snr-pick { display: flex; align-items: center; gap: 4px; min-width: 0; }
.wp-snr-n { min-width: 0; font-size: 14px; font-weight: 500; color: var(--wp-w-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-snr-n.is-idle { color: var(--wp-w-text-2); }
.wp-snr-chev { width: 12px; height: 12px; color: var(--wp-w-text-2); transform: rotate(90deg); flex: none; }
.wp-snr-def { font-size: 12px; font-weight: 600; color: var(--wp-w-text-2); flex: none; }
.wp-snr-pill { height: 22px; padding: 0 10px; border-radius: 11px; display: inline-flex; align-items: center; flex: none; font-size: 12px; font-weight: 600; color: var(--wp-w-text); background: var(--wp-w-track); }
.wp-snr-chip { height: 20px; padding: 0 6px 0 8px; border-radius: 10px; display: inline-flex; align-items: center; gap: 3px; flex: none; font-size: 12px; color: var(--wp-w-text-2); background: var(--wp-w-track); }
.wp-snr-chip .wp-snr-chev { width: 10px; height: 10px; }
.wp-snr-l { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wp-snr-p { width: 44px; flex: none; text-align: right; font-size: 13px; color: var(--wp-w-text-2); }
.wp-priv { gap: 12px; }
.wp-priv-h { display: flex; align-items: center; gap: 10px; }
.wp-priv-h .wp-ct { flex: 1; min-width: 0; }
.wp-uses { display: flex; flex-direction: column; gap: 2px; }
.wp-use { display: flex; align-items: center; height: 40px; min-width: 0; }
.wp-use .wp-use-i { width: 18px; height: 18px; margin-right: 10px; }
.wp-use-x { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wp-use-n { font-size: 14px; font-weight: 500; color: var(--wp-w-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-use-d { font-size: 12px; font-weight: 500; color: var(--wp-w-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-priv-n { font-size: 12px; color: var(--wp-w-label); }

/* Explainer tooltip. */
.wp-explain {
  position: absolute; left: 0; top: 0; z-index: 8; width: 260px; padding: 8px 12px; border-radius: 10px;
  font-size: 12px; color: var(--wp-w-text); background: var(--wp-w-tooltip); border: 1px solid var(--wp-w-tooltip-border);
  box-shadow: 0 2px 12px rgba(0,0,0,0.2); opacity: 0; pointer-events: none; transition: opacity 120ms ease;
}
.wp-explain.is-on { opacity: 1; }
.wp-win [data-explain]:focus-visible { outline-offset: 2px; border-radius: var(--wp-w-radius); }

/* Spotlight ring (C32). */
.wp-spot {
  position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 2px var(--wp-spot-color);
  transition: opacity 300ms var(--wp-ease-in-out), transform 300ms var(--wp-ease-in-out), width 300ms var(--wp-ease-in-out), height 300ms var(--wp-ease-in-out);
}
.wp-spot.is-on { opacity: 1; }
.wp-win .wp-dim { transition: opacity 300ms var(--wp-ease-in-out); }
.wp-win.wp-spotting .wp-dim:not(.wpw-spot-on):not(:has(.wpw-spot-on)) { opacity: 0.55; }
.wp-win.wp-spotting .wp-mp-top:has(.wpw-spot-on) > :not(.wpw-spot-on) { opacity: 0.55; transition: opacity 300ms var(--wp-ease-in-out); }

/* One frame without transitions when a hidden window catches up (C0). */
.wp-win.wp-instant, .wp-win.wp-instant * { transition: none !important; }

/* ---------- compact layout (under 860 px of container width, spec E3) ---------- */
.wp-win[data-layout="compact"] { border-radius: var(--wp-w-radius); box-shadow: none; }
.wp-win[data-layout="compact"] .wp-win-title { height: 40px; padding-left: 16px; }
.wp-win[data-layout="compact"] .wp-win-name { font-size: 13px; font-weight: 600; color: var(--wp-w-text); }
.wp-win[data-layout="compact"] .wp-win-caps { display: none; }
.wp-win[data-layout="compact"] .wp-win-toolbar { height: auto; padding: 4px 0 8px; justify-content: flex-start; }
.wp-win[data-layout="compact"] .wp-win-tools { display: none; }
.wp-win[data-layout="compact"] .wp-ptabs {
  width: calc(100% - 32px); margin: 0 16px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}
.wp-win[data-layout="compact"][data-tab="7"] .wp-ptabs { -webkit-mask-image: none; mask-image: none; }
.wp-win[data-layout="compact"] .wp-ptabs::-webkit-scrollbar { display: none; }
.wp-win[data-layout="compact"] .wp-ptab { scroll-snap-align: start; flex: none; }
.wp-win[data-layout="compact"] .wp-win-body { overflow: visible; scrollbar-gutter: auto; }
.wp-win[data-layout="compact"]::after { display: none; }
.wp-win[data-layout="compact"] .wp-page { padding: 16px; gap: 12px; }
.wp-win[data-layout="compact"] .wp-st { margin-top: 12px; }
.wp-win[data-layout="compact"] .wp-ph-t { font-size: 22px; }
.wp-win[data-layout="compact"] .wp-ph-s { white-space: normal; }
/* Overview: the cards become a swipe row of whole cards. */
.wp-win[data-layout="compact"] .wp-ov-cards {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 0 -16px; padding: 0 16px; scroll-padding: 0 16px; overscroll-behavior-x: contain;
}
.wp-win[data-layout="compact"] .wp-ov-cards::-webkit-scrollbar { display: none; }
.wp-win[data-layout="compact"] .wp-mc { flex: 0 0 86%; scroll-snap-align: start; }
.wp-win[data-layout="compact"] .wp-ov-donuts, .wp-win[data-layout="compact"] .wp-ov-hw, .wp-win[data-layout="compact"] .wp-ov-ot { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.wp-win[data-layout="compact"] .wp-otc { grid-column: auto; }
.wp-win[data-layout="compact"] .wp-sp-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.wp-win[data-layout="compact"] .wp-dc { min-height: 0; }
.wp-win[data-layout="compact"] .wp-dc-b { gap: 16px; }
.wp-win[data-layout="compact"] .wp-donut { width: 120px; height: 120px; }
.wp-win[data-layout="compact"] .wp-donut-n .wp-bn-n, .wp-win[data-layout="compact"] .wp-donut-n .wp-bn-u { font-size: 18px; }
.wp-win[data-layout="compact"] .wp-lg-r { gap: 8px; height: 24px; }
.wp-win[data-layout="compact"] .wp-lg-n, .wp-win[data-layout="compact"] .wp-lg-v { font-size: 13px; }
.wp-win[data-layout="compact"] .wp-ot-head { flex-direction: column; align-items: stretch; }
.wp-win[data-layout="compact"] .wp-ot-ctl { flex-direction: column; align-items: flex-start; }
.wp-win[data-layout="compact"] .wp-ot-ctl .wpw-seg { overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.wp-win[data-layout="compact"] .wp-otc .wp-ac { height: 180px; }
.wp-win[data-layout="compact"] .wp-ac { --plot-r: 52px; }
/* Metric tabs: the hero stacks, the tiles form two columns, the table keeps Name and the sorted column. */
.wp-win[data-layout="compact"] .wp-mp-top { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.wp-win[data-layout="compact"] .wpw-hero { height: auto; flex-direction: column; gap: 14px; }
.wp-win[data-layout="compact"] .wp-hero-l { width: auto; display: contents; }
.wp-win[data-layout="compact"] .wp-hero-l > .wp-flex { display: none; }
.wp-win[data-layout="compact"] .wpw-hero-num { margin-top: -2px; }
.wp-win[data-layout="compact"] .wp-hero-r { order: 5; height: 176px; flex: none; }
.wp-win[data-layout="compact"] .wp-hero-f { order: 6; }
.wp-win[data-layout="compact"] .wp-side { height: auto; }
.wp-win[data-layout="compact"] .wp-cores { height: 120px; flex: none; }
.wp-win[data-layout="compact"] .wp-tiles { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wp-win[data-layout="compact"] .wp-sortby { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wp-win[data-layout="compact"] .wp-sortby-l { font-size: 13px; font-weight: 600; color: var(--wp-w-text-2); flex: none; }
.wp-win[data-layout="compact"] .wp-sortby .wpw-seg { overflow-x: auto; scrollbar-width: none; min-width: 0; }
.wp-win[data-layout="compact"] .wp-sortby .wpw-seg::-webkit-scrollbar { display: none; }
.wp-win[data-layout="compact"] .wp-table .wp-th,
.wp-win[data-layout="compact"] .wp-table .wp-tr { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 0 14px 0 6px; }
.wp-win[data-layout="compact"] .wp-table .wp-th { display: none; }
.wp-win[data-layout="compact"] .wp-table .wp-td:not(.wp-td-name) { display: none; }
.wp-win[data-layout="compact"] .wp-table[data-sorted="name"] .wp-col-cpu,
.wp-win[data-layout="compact"] .wp-table[data-sorted="cpu"] .wp-col-cpu,
.wp-win[data-layout="compact"] .wp-table[data-sorted="mem"] .wp-col-mem,
.wp-win[data-layout="compact"] .wp-table[data-sorted="procs"] .wp-col-procs,
.wp-win[data-layout="compact"] .wp-table[data-sorted="write"] .wp-col-write,
.wp-win[data-layout="compact"] .wp-table[data-sorted="read"] .wp-col-read,
.wp-win[data-layout="compact"] .wp-table[data-sorted="down"] .wp-col-down,
.wp-win[data-layout="compact"] .wp-table[data-sorted="up"] .wp-col-up,
.wp-win[data-layout="compact"] .wp-table[data-sorted="gpu"] .wp-col-gpu,
.wp-win[data-layout="compact"] .wp-table[data-sorted="power"] .wp-col-power { display: flex !important; }
.wp-win[data-layout="compact"] .wp-td-b { width: 40px; }
.wp-win[data-layout="compact"] .wp-td { font-size: 14px; }
.wp-win[data-layout="compact"] .wp-tr-proc .wp-td-name, .wp-win[data-layout="compact"] .wp-tr-more .wp-td-name { padding-left: 34px; }
.wp-win[data-layout="compact"] .wp-tr:not(.is-sel) .wp-quit { display: none; }
.wp-win[data-layout="compact"] .wp-ask { left: 8px; right: 8px; justify-content: flex-end; }
.wp-win[data-layout="compact"] .wp-ask-q { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Touch: row Quit shows for the selected row only; nothing hover-only. */
@media (hover: none) {
  .wp-win[data-layout="desktop"] .wp-quit { opacity: 1; pointer-events: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .wp-win-host *, .wp-win-host *::after { transition-property: opacity, background-color, color, border-color !important; }
  .wp-w-bar-fill, .wp-core-f { transition: none !important; }
  .wp-win-hint { transform: translate(-50%, 0); }
}