/*
 * app.css — a copy of the app's own stylesheets, so the window on this page is
 * the app's design and not a redrawing of it.
 *
 * Source, in order:
 *   src/styles/tokens.css
 *   src/styles/typography.css
 *   src/styles/global.css
 *   src/styles/components.css
 *   src/views/Overview/overview.css
 *
 * The app is the source of truth: re-copy these five files when the app's
 * styles change, and do not edit the copy by hand. demo.css (the page around
 * the window) is the only sheet written for this page.
 */

/* ===== src/styles/tokens.css ===== */

/*
 * tokens.css — the only file in the app with raw colour, size and radius values.
 *
 * Every token mirrors `purge/Theme/AppColors.swift` and `purge/Views/AppStyle.swift`
 * from the original Purge (macOS). Names and values are kept 1:1, so the design
 * system is the same one; see docs/design-system.md.
 *
 * scripts/lint-design-tokens.mjs marks this file and typography.css as exempt and
 * fails any other file that hardcodes a colour, a font size or a corner radius.
 * A view references tokens with var(--name).
 */

:root {
  color-scheme: light;

  /*
   * Type families. SF Pro and SF Rounded do not exist on Windows. The port
   * runs every label in one face — Nunito Variable, the SF Rounded stand-in
   * that ships with the app — so the sidebar, the rows and the page titles
   * cannot drift apart. The two token names stay because the design system
   * distinguishes their roles; today both resolve to the same stack.
   */
  --font-display: "Nunito Variable", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --font-base: var(--font-display);

  /*
   * Type scale (px). Mirrors AppStyle.Typography, except the three smallest
   * steps: the macOS original is read on 2x displays, where an 11pt label has
   * 22 physical pixels of height. At 1x the same value leaves stem pixels
   * landing between rows of the grid and the rounded face breaks up, so
   * callout, metadata and micro each sit 1px larger than the original.
   */
  --type-display: 56px;
  --type-display-small: 36px;
  --type-title: 26px;
  --type-page-title: 20px;
  --type-section-title: 15px;
  --type-headline: 13px;
  --type-body: 13px;
  --type-row-title: 13px;
  --type-callout: 13px;
  --type-metadata: 12px;
  --type-micro: 11px;

  /* Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Spacing. Mirrors AppStyle.Spacing. */
  --space-xxsmall: 4px;
  --space-xsmall: 8px;
  --space-small: 12px;
  --space-medium: 16px;
  --space-large: 24px;
  --space-xlarge: 32px;

  /* Corner radii. Mirrors AppStyle.Radius. Actions are pills via --radius-pill. */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  /* Controls, rows and chrome. Mirrors AppStyle.Control, AppStyle.Row, SidebarLayout. */
  --control-height: 28px;
  --row-compact-height: 36px;
  --row-parent-height: 44px;
  --row-list-min-height: 52px;
  --row-icon-frame: 28px;
  --card-horizontal-padding: 14px;
  --sidebar-width: 240px;
  --sidebar-horizontal-inset: 8px;
  --sidebar-nav-inner-padding: 8px;
  --sidebar-selection-radius: 8px;
  --sidebar-top-inset: 42px;
  --detail-horizontal-inset: 24px;
  --detail-top-inset: 20px;
  --titlebar-height: 40px;
  --caption-button-width: 46px;

  /* Text */
  --text-primary: #2E2D2B;
  --text-secondary: #64625E;
  --text-tertiary: #85827C;

  /* Surfaces */
  --surface-base: #F6F5F3;
  --surface-card: #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-card-hover: #F4F2EF;

  /* Fills */
  --fill-secondary: #EFEDEA;
  --fill-secondary-hover: #E8E6E2;
  --fill-secondary-pressed: #DFDCD8;

  /* Borders */
  --border-subtle: #E6E3DF;
  --border-strong: #D5D2CD;

  /* Actions */
  --action-primary: #353431;
  --action-primary-hover: #42403D;
  --action-primary-pressed: #2A2927;
  --on-action-primary: #FFFFFF;
  --action-destructive: #D1312A;
  --action-destructive-hover: #BC2B25;
  --action-destructive-pressed: #A92620;
  --on-action-destructive: #FFFFFF;

  /* Status */
  --status-safe-text: #1F7A35;
  --status-safe-fill: #E6F4EA;
  --status-check-text: #8A5300;
  --status-check-fill: #FAEEDA;
  --status-danger-text: #B4302A;
  --status-danger-fill: #FBE8E5;
  --status-unsure-text: #5A5853;
  --status-unsure-fill: #EFEDEA;

  /* Accent */
  --accent-celebrate: #D18F00;

  /* Appearance tiles — literal light and dark mini windows, so a Dark tile
     still reads as dark while the app itself is in Light mode. */
  --appearance-light-bg: #FFFFFF;
  --appearance-light-side: #EFEDEA;
  --appearance-light-bar: #D9D6D1;
  --appearance-dark-bg: #2B2A28;
  --appearance-dark-side: #1C1B1A;
  --appearance-dark-bar: #4A4845;

  /* Overlays */
  --scrim: rgba(0, 0, 0, 0.38);

  /* Charts (Okabe–Ito, colour-blind safe) */
  --chart-app-caches: #56B4E9;
  --chart-dev-tools: #0072B2;
  --chart-large-files: #E69F00;
  --chart-apps: #D55E00;
  --chart-leftovers: #CC79A7;
  --chart-app-caches-tile: #3399D3;
  --chart-dev-tools-tile: #0072B2;
  --chart-leftovers-tile: #B35A8D;
  --chart-everything-else: #8C8983;
  --chart-free-space: #DAD7D2;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --text-primary: #ECEAE6;
  --text-secondary: #A6A39D;
  --text-tertiary: #807D78;

  --surface-base: #171615;
  --surface-card: #1E1D1C;
  --surface-raised: #2B2A28;
  --surface-card-hover: #2A2927;

  --fill-secondary: #282725;
  --fill-secondary-hover: #2F2E2C;
  --fill-secondary-pressed: #373533;

  --border-subtle: #302F2D;
  --border-strong: #3D3B38;

  --action-primary: #ECEAE6;
  --action-primary-hover: #F6F4F1;
  --action-primary-pressed: #D8D5D0;
  --on-action-primary: #171615;
  --action-destructive: #D9372D;
  --action-destructive-hover: #E2453B;
  --action-destructive-pressed: #C4302A;

  --status-safe-text: #5FD36B;
  --status-safe-fill: #1B2E22;
  --status-check-text: #F2B84B;
  --status-check-fill: #332910;
  --status-danger-text: #F47468;
  --status-danger-fill: #321B19;
  --status-unsure-text: #A9A6A0;
  --status-unsure-fill: #282725;

  --accent-celebrate: #FFC70D;

  --chart-app-caches: #6CC3F0;
  --chart-dev-tools: #3A94D0;
  --chart-large-files: #F0B020;
  --chart-apps: #E8772A;
  --chart-leftovers: #DA93BA;
  --chart-app-caches-tile: #3A9BD5;
  --chart-dev-tools-tile: #1E78BA;
  --chart-leftovers-tile: #BE6C9C;
  --chart-everything-else: #A8A49D;
  --chart-free-space: #4E4B47;
}

/* ===== src/styles/typography.css ===== */

/*
 * typography.css — the type scale as classes. Mirrors AppStyle.Typography.
 *
 * Every piece of text in the app picks one of these classes, adding a weight
 * override only for emphasis. No view sets a point size of its own; the design
 * lint fails a file that does. One face runs app-wide (see --font-base in
 * tokens.css), so the classes differ by size and weight, not by family.
 */

.type-display {
  font-family: var(--font-display);
  font-size: var(--type-display);
  font-weight: var(--weight-bold);
}

.type-display-small {
  font-family: var(--font-display);
  font-size: var(--type-display-small);
  font-weight: var(--weight-bold);
}

.type-title {
  font-family: var(--font-display);
  font-size: var(--type-title);
  font-weight: var(--weight-semibold);
}

.type-page-title {
  font-family: var(--font-display);
  font-size: var(--type-page-title);
  font-weight: var(--weight-semibold);
}

.type-section-title {
  font-family: var(--font-base);
  font-size: var(--type-section-title);
  font-weight: var(--weight-semibold);
}

.type-headline {
  font-family: var(--font-base);
  font-size: var(--type-headline);
  font-weight: var(--weight-semibold);
}

.type-body {
  font-family: var(--font-base);
  font-size: var(--type-body);
  font-weight: var(--weight-regular);
}

.type-row-title {
  font-family: var(--font-base);
  font-size: var(--type-row-title);
  font-weight: var(--weight-medium);
}

.type-callout {
  font-family: var(--font-base);
  font-size: var(--type-callout);
  /* 500, not 400: the rounded face is unhinted, and at these sizes its
     regular weight breaks up on a 1x display (see docs/design-system.md). */
  font-weight: var(--weight-medium);
}

.type-metadata {
  font-family: var(--font-base);
  font-size: var(--type-metadata);
  /* 500 for the same reason as .type-callout. */
  font-weight: var(--weight-medium);
}

.type-metadata-strong {
  font-family: var(--font-base);
  font-size: var(--type-metadata);
  font-weight: var(--weight-medium);
}

.type-micro {
  font-family: var(--font-base);
  font-size: var(--type-micro);
  font-weight: var(--weight-semibold);
}

/* Size numbers and counts use tabular figures so digits don't dance. */
.tnum {
  font-variant-numeric: tabular-nums;
}

.text-primary {
  color: var(--text-primary);
}

.text-secondary {
  color: var(--text-secondary);
}

.text-tertiary {
  color: var(--text-tertiary);
}

/* The reason a row is Check First, under its title. */
.status-line {
  display: flex;
  align-items: center;
  gap: var(--space-xxsmall);
  min-width: 0;
}

/* ===== src/styles/global.css ===== */

/*
 * global.css — reset and base. Uses tokens only; the design lint checks it like
 * any other file.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
#root {
  height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  background: var(--surface-base);
  color: var(--text-primary);
  font-family: var(--font-base);
  font-size: var(--type-body);
  font-weight: var(--weight-regular);
  line-height: 1.35;
  /* A desktop app, not a web page: text is not selectable unless marked. */
  user-select: none;
  /* Never fake a weight (faux bold smears at small sizes on Windows). */
  font-synthesis: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: default;
  background: none;
  border: none;
  padding: 0;
}

/* Keyboard focus stays visible; pointer focus does not draw a ring. */
:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--action-primary);
  outline-offset: 1px;
}

input,
textarea,
[data-selectable] {
  user-select: text;
}

/* Thin, quiet scrollbars in the app's own greys. */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* App layout: the title bar floats over everything, sidebar left, detail right. */
.app {
  display: flex;
  height: 100%;
  position: relative;
}

/*
 * The detail column: the pinned page header first, then the scrolling body.
 * The top padding is the title bar's clear band — Windows keeps its caption
 * buttons there, so page content must never sit (or scroll) beneath them.
 */
.detail {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding-top: var(--titlebar-height);
  background: var(--surface-base);
}

.detail-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ===== src/styles/components.css ===== */

/*
 * components.css — the shared UI kit: window chrome, sidebar, page headers,
 * the one button style, tags, cards, icon tiles and value controls.
 *
 * Mirrors purge/Views/AppChrome.swift, PurgeButtonStyle.swift, AppStyle.swift.
 * This file uses tokens only; a raw colour, font size or radius needs a
 * `design-lint: allow` comment with a real reason (the design lint checks it).
 */

/* ----- Window chrome: title bar and caption buttons (AppChrome) ----- */

.titlebar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--titlebar-height);
  z-index: 100;
}

.titlebar-controls {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: flex;
}

.caption-button {
  width: var(--caption-button-width);
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: background-color 0.12s ease-out, color 0.12s ease-out;
}

.caption-button:hover {
  background: var(--fill-secondary);
  color: var(--text-primary);
}

.caption-button--close:hover {
  background: var(--action-destructive);
  color: var(--on-action-destructive);
}

/* ----- Sidebar (SidebarLayout) ----- */

.sidebar {
  width: var(--sidebar-width);
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--surface-card);
  padding: 0 var(--space-small);
}

.sidebar-top {
  padding-top: var(--sidebar-top-inset);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-xsmall);
  padding: 0 var(--sidebar-nav-inner-padding) var(--space-large);
}

.brand-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: var(--radius-xs);
  background: var(--action-primary);
  color: var(--on-action-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-name {
  min-width: 0;
}

.nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-section-label {
  padding: var(--space-small) var(--sidebar-nav-inner-padding) 2px;
  font-weight: var(--weight-semibold);
}

.nav-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-xsmall);
  padding: 6px var(--sidebar-nav-inner-padding);
  border-radius: var(--sidebar-selection-radius);
  color: var(--text-secondary);
  text-align: left;
  transition: background-color 0.12s ease-out, color 0.12s ease-out;
}

.nav-row:hover {
  background: var(--surface-raised);
}

.nav-row--selected {
  background: var(--fill-secondary);
  color: var(--text-primary);
}

.nav-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
}

.nav-row--selected .nav-icon {
  color: var(--text-primary);
}

.nav-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The row's trailing figure (or spinner while a scan runs). */
.nav-accessory {
  flex: 0 0 auto;
  font-size: var(--type-micro);
  font-weight: var(--weight-medium);
  color: var(--text-tertiary);
}

.nav-spinner {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-pill);
  border: 1.5px solid color-mix(in srgb, var(--text-tertiary) 30%, transparent);
  border-top-color: var(--text-tertiary);
  animation: nav-spin 0.8s linear infinite;
}

@keyframes nav-spin {
  to {
    transform: rotate(360deg);
  }
}

.sidebar-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-small);
  padding-bottom: var(--space-small);
}

/* The Trash card (SidebarSummaryView): one sentence on its own card. */
.trash-card {
  display: flex;
  align-items: center;
  gap: var(--space-xsmall);
  padding: calc(var(--space-xsmall) + 2px) var(--space-small);
  background: var(--fill-secondary);
  border-radius: var(--radius-lg);
  font-weight: var(--weight-medium);
}

.trash-card-icon {
  flex: 0 0 auto;
  color: var(--text-secondary);
}

.trash-card-value {
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

/* ----- Page header (AppSectionPageHeader) ----- */

.page-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-medium);
  padding: var(--detail-top-inset) var(--detail-horizontal-inset) var(--space-small);
}

.page-header-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxsmall);
  min-width: 0;
}

.page-header-title,
.page-header-subtitle {
  margin: 0;
}

.page-header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-xsmall);
}

/* ----- Buttons: the one button style (PurgeButtonStyle) ----- */

.purge-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  user-select: none;
  transition: background-color 0.12s ease-out, color 0.12s ease-out,
    border-color 0.12s ease-out, opacity 0.28s ease-in-out;
}

.purge-button:disabled {
  opacity: 0.45;
}

.purge-button--small {
  height: 24px;
  padding: 0 10px;
  font-size: var(--type-callout);
  font-weight: var(--weight-semibold);
}

.purge-button--regular {
  height: 30px;
  padding: 0 14px;
  font-size: var(--type-headline);
  font-weight: var(--weight-semibold);
}

.purge-button--large {
  height: 38px;
  padding: 0 20px;
  font-size: var(--type-section-title);
  font-weight: var(--weight-semibold);
}

.purge-button--primary {
  background: var(--action-primary);
  color: var(--on-action-primary);
}

.purge-button--primary:hover:not(:disabled) {
  background: var(--action-primary-hover);
}

.purge-button--primary:active:not(:disabled) {
  background: var(--action-primary-pressed);
}

.purge-button--secondary {
  background: var(--fill-secondary);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.purge-button--secondary:hover:not(:disabled) {
  background: var(--fill-secondary-hover);
}

.purge-button--secondary:active:not(:disabled) {
  background: var(--fill-secondary-pressed);
}

.purge-button--destructive {
  background: var(--action-destructive);
  color: var(--on-action-destructive);
}

.purge-button--destructive:hover:not(:disabled) {
  background: var(--action-destructive-hover);
}

.purge-button--destructive:active:not(:disabled) {
  background: var(--action-destructive-pressed);
}

.purge-button--quiet {
  background: transparent;
  color: var(--text-secondary);
}

.purge-button--quiet:hover:not(:disabled) {
  background: var(--fill-secondary-hover);
  color: var(--text-primary);
}

.purge-button--quiet:active:not(:disabled) {
  background: var(--fill-secondary-pressed);
}

.purge-button--fill {
  width: 100%;
}

.purge-button--square {
  padding: 0;
}

.purge-button--square.purge-button--small {
  width: 24px;
}

.purge-button--square.purge-button--regular {
  width: 30px;
}

.purge-button--square.purge-button--large {
  width: 38px;
}

/* ----- Tags (AppBadge): safety labels and notices ----- */

/* AppBadge: a rounded-rect to the design system's sm radius, a hairline in the
 * text colour, 11px medium — not a pill, so a badge never reads as a button. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxsmall);
  border-radius: var(--radius-sm);
  border: 0.5px solid color-mix(in srgb, currentColor 22%, transparent);
  padding: 2px var(--space-xxsmall);
  font-family: var(--font-base);
  font-size: var(--type-micro);
  font-weight: var(--weight-medium);
  line-height: 1.4;
}

.tag--safe {
  background: var(--status-safe-fill);
  color: var(--status-safe-text);
}

.tag--check {
  background: var(--status-check-fill);
  color: var(--status-check-text);
}

.tag--danger {
  background: var(--status-danger-fill);
  color: var(--status-danger-text);
}

.tag--unsure {
  background: var(--status-unsure-fill);
  color: var(--status-unsure-text);
}

/* ----- Cards: a 0.5px hairline instead of a shadow ----- */

.card {
  background: var(--surface-card);
  border: 0.5px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.card-divider {
  height: 0.5px;
  background: var(--border-subtle);
  margin: 0 var(--space-medium);
}

/* ----- Icon tiles (OverviewIconTile) ----- */

.icon-tile {
  width: var(--row-icon-frame);
  height: var(--row-icon-frame);
  flex: 0 0 auto;
  position: relative;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF; /* design-lint: allow — white glyph on a coloured tile (design-system.md) */
  border: 0.5px solid rgba(255, 255, 255, 0.3); /* design-lint: allow — the tile rim highlight */
}

.icon-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* design-lint: allow — tile depth overlay, not a design decision a view makes */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0));
}

.icon-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* design-lint: allow — tile depth overlay, not a design decision a view makes */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.12));
}

.icon-tile svg {
  position: relative;
  z-index: 1;
  /* design-lint: allow — glyph shadow on a coloured tile */
  filter: drop-shadow(0 0.5px 0.5px rgba(0, 0, 0, 0.18));
}

.icon-tile--dashed {
  background: transparent;
  border: 1.5px dashed currentColor;
  color: inherit;
}

.icon-tile--dashed::before,
.icon-tile--dashed::after {
  content: none;
}

/* ----- Value controls (segmented): rounded rectangle, never a pill ----- */

.segmented {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--fill-secondary);
  border-radius: var(--radius-md);
  padding: 2px;
}

.segmented-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 24px;
  padding: 0 10px;
  border: 0.5px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--type-callout);
  font-weight: var(--weight-medium);
  transition: background-color 0.12s ease-out, color 0.12s ease-out;
}

.segmented-option:hover:not(.segmented-option--selected) {
  background: var(--fill-secondary-hover);
  color: var(--text-primary);
}

.segmented-option--selected {
  background: var(--surface-card);
  border-color: var(--border-subtle);
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

/* ----- Checkboxes (Select All rows and pickable lists) -----
 * A value control: rounded rectangle at xs radius, filled with actionPrimary
 * when chosen. The native input stays as the hit target and the semantics. */

.checkbox {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.checkbox input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: default;
}

.checkbox-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  background: var(--surface-card);
  color: var(--on-action-primary);
  transition: background-color 0.12s ease-out, border-color 0.12s ease-out;
}

.checkbox input:checked + .checkbox-box,
.checkbox input:indeterminate + .checkbox-box {
  background: var(--action-primary);
  border-color: var(--action-primary);
}

.checkbox input:focus-visible + .checkbox-box {
  outline: 2px solid var(--action-primary);
  outline-offset: 2px;
}

.checkbox input:disabled + .checkbox-box {
  opacity: 0.45;
}

/* ----- Settings page ----- */

.settings {
  padding: 0 var(--detail-horizontal-inset) var(--space-large);
  display: flex;
  flex-direction: column;
  gap: var(--space-large);
}

.settings-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-xsmall);
}

.settings-section-label {
  padding-left: var(--space-xxsmall);
  font-weight: var(--weight-semibold);
  color: var(--text-tertiary);
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-medium);
  padding: var(--space-medium);
}

.settings-row + .settings-row {
  border-top: 0.5px solid var(--border-subtle);
}

.settings-row-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.settings-status {
  display: flex;
  align-items: center;
  gap: var(--space-xsmall);
  margin: 0;
  padding-left: var(--space-xxsmall);
  color: var(--status-safe-text);
}

.settings-note {
  padding: 12px var(--card-horizontal-padding);
}

.settings-note p {
  margin: 0;
}

.settings-note p + p {
  margin-top: var(--space-xxsmall);
}

/* The theme picker: three mini windows, Light, Dark, and the pair together. */
.appearance-tiles {
  display: flex;
  align-items: flex-start;
  gap: var(--space-small);
}

.appearance-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xxsmall);
  padding: 0;
  border: none;
  background: transparent;
  cursor: default;
}

.appearance-thumb {
  display: flex;
  width: 64px;
  height: 44px;
  overflow: hidden;
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
}

.appearance-tile--selected .appearance-thumb {
  outline: 2px solid var(--text-primary);
  outline-offset: 3px;
}

.appearance-tile:focus-visible .appearance-thumb {
  outline: 2px solid var(--action-primary);
  outline-offset: 3px;
}

.appearance-pane {
  position: relative;
  flex: 1;
}

.appearance-pane--light {
  background: var(--appearance-light-bg);
}

.appearance-pane--dark {
  background: var(--appearance-dark-bg);
}

/* Light and Dark show one pane; Auto shows both halves side by side. */
.appearance-thumb--light .appearance-pane--dark,
.appearance-thumb--dark .appearance-pane--light {
  display: none;
}

.appearance-pane::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 22%;
}

.appearance-pane--light::before {
  background: var(--appearance-light-side);
}

.appearance-pane--dark::before {
  background: var(--appearance-dark-side);
}

.appearance-pane::after {
  content: "";
  position: absolute;
  top: 11px;
  left: 32%;
  right: 12%;
  height: 5px;
  border-radius: var(--radius-pill);
}

.appearance-pane--light::after {
  background: var(--appearance-light-bar);
  box-shadow: 0 10px 0 var(--appearance-light-bar);
}

.appearance-pane--dark::after {
  background: var(--appearance-dark-bar);
  box-shadow: 0 10px 0 var(--appearance-dark-bar);
}

.appearance-label {
  font-weight: var(--weight-medium);
}

/* ----- Switch (the Settings toggles) ----- */

.switch {
  position: relative;
  flex: 0 0 auto;
  width: 38px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--fill-secondary-pressed);
  cursor: default;
  transition: background-color 0.18s ease-in-out;
}

.switch--on {
  background: var(--status-safe-text);
}

.switch:focus-visible {
  outline: 2px solid var(--action-primary);
  outline-offset: 2px;
}

.switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  transition: transform 0.18s ease-in-out;
}

.switch--on .switch-knob {
  transform: translateX(16px);
}

/* ----- Empty state (a page whose scanner has not arrived yet) ----- */

.view-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-small);
  max-width: 460px;
  margin: 0 auto;
  padding: 64px var(--space-large) var(--space-large);
}

.view-placeholder-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--fill-secondary);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-xxsmall);
}

.view-placeholder p {
  margin: 0;
}

.view-placeholder-note {
  margin-top: var(--space-xxsmall);
}

/* ----- Scan pages (App Caches, Dev Tools) -----
 * The Select All bar, one pickable row per find, and the result line after a
 * clean. Both scan pages draw from ScanList.tsx; the picked-row tint follows
 * the page's category colour (--scan-accent). */

.scan-page {
  --scan-accent: var(--chart-app-caches);
  padding: 0 var(--detail-horizontal-inset) var(--space-large);
  display: flex;
  flex-direction: column;
  gap: var(--space-small);
}

.scan-page--dev-tools {
  --scan-accent: var(--chart-dev-tools);
}

/* The chips row above Select All: 34px tall, 4px between chips. */
.chip-row {
  display: flex;
  align-items: center;
  gap: var(--space-xxsmall);
  min-height: 34px;
  padding: 2px 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  background: var(--fill-secondary);
  color: var(--text-secondary);
  font-family: var(--font-base);
  font-size: var(--type-body);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  transition: background-color 0.15s ease-out, color 0.15s ease-out;
}

.chip:hover {
  background: var(--fill-secondary-hover);
}

.chip-count {
  font-weight: var(--weight-regular);
  color: var(--text-tertiary);
}

.chip--selected {
  background: var(--surface-raised);
  color: var(--text-primary);
}

.chip--selected .chip-count {
  color: inherit;
}

.chip--safe.chip--selected {
  background: var(--status-safe-fill);
  color: var(--status-safe-text);
  border-color: color-mix(in srgb, var(--status-safe-text) 25%, transparent);
}

.chip--check.chip--selected {
  background: var(--status-check-fill);
  color: var(--status-check-text);
  border-color: color-mix(in srgb, var(--status-check-text) 25%, transparent);
}

.chip--empty {
  opacity: 0.45;
}

/* The Select All row: the box and its link on the left, the sort menu right. */
.scan-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-xsmall);
  padding: 0;
}

.scan-toolbar-spacer {
  flex: 1;
}

/* One row card per find, the whole row the toggle. */
.scan-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-xsmall);
}

.scan-row {
  display: flex;
  align-items: center;
  gap: var(--space-small);
  padding: var(--space-small) var(--card-horizontal-padding);
  background: var(--fill-secondary);
  border-radius: var(--radius-lg);
  cursor: default;
  transition: background-color 0.12s ease-out;
}

.scan-row:hover {
  background: var(--fill-secondary-hover);
}

.scan-row-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxsmall);
  min-width: 0;
  flex: 1;
}

/* A name longer than the row ends in an ellipsis; the row never widens. */
.scan-row-text > .type-headline {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The one sentence that says why the row is safe (or worth a look), at most
   two lines tall so one long explanation cannot stretch the row. */
.scan-row-explain {
  font-size: var(--type-callout);
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The app's own icon, when the scanner found one. */
.scan-row-logo {
  width: var(--row-icon-frame);
  height: var(--row-icon-frame);
  border-radius: var(--radius-sm);
  flex: 0 0 auto;
}

.scan-row-detail {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Size over safety tag, both against the trailing edge. */
.scan-row-trailing {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-xsmall);
  margin-left: auto;
  flex: 0 0 auto;
}

.scan-row-size {
  font-weight: var(--weight-medium);
}

.scan-row-bytes {
  min-width: 64px;
  text-align: right;
}

/* A filter that hides every row says so in words. */
.scan-filter-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xxsmall);
  padding: var(--space-xlarge) 0;
}

/* The result line after a clean. */
.scan-result {
  display: flex;
  align-items: flex-start;
  gap: var(--space-small);
  padding: 12px var(--card-horizontal-padding);
}

.scan-result-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-md);
  background: var(--fill-secondary);
  color: var(--text-secondary);
  flex: 0 0 auto;
}

.scan-result-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* ----- Large Files (the review page) -----
 * The scan anatomy plus the page's own parts: the filter row, a category icon
 * on each row, a sub-line of small facts, and the confirm sheet. The
 * picked-row tint uses Large Files' own chart colour. */

.scan-page--large-files {
  --scan-accent: var(--chart-large-files);
}

/* The size and last-used filters above the list. */
.scan-controls {
  display: flex;
  align-items: center;
  gap: var(--space-xsmall);
  padding: 0 var(--space-xxsmall);
}

/* The category tile a Large Files row opens with. */
.scan-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text-secondary);
  flex: 0 0 auto;
}

/* Folder, last-used phrase and badges share one line under the name. The
 * folder truncates first; the phrase and badges keep their width. */
.scan-row-subline {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.scan-row-subline .scan-row-detail {
  flex: 0 1 auto;
  min-width: 0;
}

/* The facts that never give up their width. One that is longer than the line
 * on its own ends in an ellipsis rather than pushing past the trailing edge. */
.scan-row-subline-extra {
  flex: 0 0 auto;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ----- Dropdowns (AppDropdown: the Large Files filters) -----
 * A pill trigger (the Button) over a raised menu of plain option buttons. */

.dropdown {
  position: relative;
  display: inline-flex;
}

.dropdown-chevron {
  display: inline-flex;
  transition: transform 0.12s ease-out;
}

.dropdown-chevron--open {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 40;
  min-width: 100%;
  padding: 4px;
  background: var(--surface-raised);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dropdown-option {
  display: flex;
  align-items: center;
  gap: var(--space-xsmall);
  height: 28px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--type-callout);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.dropdown-option:hover {
  background: var(--fill-secondary-hover);
}

.dropdown-option--picked {
  font-weight: var(--weight-semibold);
}

.dropdown-option-label {
  flex: 1;
  text-align: left;
}

/* ----- Dialogs (the confirm sheets) -----
 * A centred sheet over a scrim. A press on the scrim closes it, the same as
 * Escape and Cancel; the page behind never moves while it is up. */

.dialog-scrim {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-large);
}

.dialog-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-medium);
  width: min(600px, 100%);
  max-height: 100%;
  padding: var(--space-large);
  background: var(--surface-base);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius-lg);
}

.dialog-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxsmall);
}

.dialog-head p {
  margin: 0;
}

/* The picked files, scrollable when the list is long. */
.dialog-file-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  min-height: 0;
}

.dialog-file-card {
  display: flex;
  align-items: center;
  gap: var(--space-small);
  padding: 8px var(--space-small);
  background: var(--surface-card);
  border: 0.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  flex: 0 0 auto;
}

.dialog-file-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dialog-file-name,
.dialog-file-folder {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dialog-file-size {
  margin-left: auto;
  flex: 0 0 auto;
}

/* The OneDrive caution: one line, icon first. */
.dialog-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xsmall);
  margin: 0;
  padding: 10px var(--space-small);
  background: var(--status-unsure-fill);
  color: var(--status-unsure-text);
  border-radius: var(--radius-md);
}

.dialog-note svg {
  flex: 0 0 auto;
  margin-top: 1px;
}

.dialog-footer {
  display: flex;
  align-items: center;
  gap: var(--space-xsmall);
  flex-wrap: wrap;
}

.dialog-spacer {
  flex: 1;
}

.dialog-freeing {
  white-space: nowrap;
}

/* ----- App Uninstaller (the review page) -----
 * The scan anatomy plus the page's own parts: a search field, a layout
 * toggle, a grid of app tiles, and the confirm sheet with one card per app.
 * The picked tint uses the Installed apps chart colour. */

.scan-page--uninstaller {
  --scan-accent: var(--chart-apps);
}

.scan-controls-spacer {
  flex: 1;
}

/* The search box: a pill frame that carries the focus ring for the input. */
.search-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  min-width: 190px;
  padding: 0 10px;
  background: var(--fill-secondary);
  border: 0.5px solid transparent;
  border-radius: var(--radius-pill);
  color: var(--text-tertiary);
  transition: background-color 0.12s ease-out, border-color 0.12s ease-out;
}

.search-field:hover {
  background: var(--fill-secondary-hover);
}

.search-field:focus-within {
  background: var(--surface-card);
  border-color: var(--border-strong);
  color: var(--text-secondary);
}

.search-field-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  font-size: var(--type-callout);
  color: var(--text-primary);
}

/* The frame above is the focus ring; a ring inside the pill would double it. */
.search-field-input:focus-visible {
  outline: none;
}

.search-field-input::placeholder {
  color: var(--text-tertiary);
}

/* The app's own icon when Windows gave one, the name's first letter otherwise. */
.app-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  background: var(--fill-secondary);
  color: var(--text-secondary);
  font-size: var(--type-callout);
  font-weight: var(--weight-semibold);
}

img.app-icon {
  background: transparent;
  object-fit: contain;
}

.app-icon--big {
  width: 40px;
  height: 40px;
  font-size: var(--type-headline);
}

/* The grid: as many pickable tiles as fit. */
.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: var(--space-small);
  padding: 0 var(--space-xxsmall);
}

.app-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px var(--space-small) 12px;
  background: var(--surface-card);
  border: 0.5px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  text-align: center;
  cursor: default;
  transition: background-color 0.12s ease-out, border-color 0.12s ease-out;
}

.app-tile:hover {
  border-color: var(--border-strong);
}

.app-tile--picked {
  background: color-mix(in srgb, var(--scan-accent) 7%, transparent);
  border-color: color-mix(in srgb, var(--scan-accent) 45%, transparent);
}

.app-tile .checkbox {
  position: absolute;
  top: 8px;
  right: 8px;
}

.app-tile-name {
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.app-tile-sub {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-tile-foot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

/* The sheet's per-app cards: a head row, then one line per leftover. */
.dialog-app-card {
  background: var(--surface-card);
  border: 0.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  flex: 0 0 auto;
}

.dialog-app-head {
  display: flex;
  align-items: center;
  gap: var(--space-small);
  padding: 10px var(--space-small);
}

.dialog-app-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dialog-app-title,
.dialog-app-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dialog-app-size {
  margin-left: auto;
  flex: 0 0 auto;
}

.dialog-leftover {
  display: flex;
  align-items: center;
  gap: var(--space-small);
  padding: 8px var(--space-small);
  border-top: 0.5px solid var(--border-subtle);
  cursor: default;
  transition: background-color 0.12s ease-out;
}

.dialog-leftover:hover {
  background: color-mix(in srgb, var(--fill-secondary) 50%, transparent);
}

.dialog-leftover--ticked {
  background: color-mix(in srgb, var(--chart-apps) 7%, transparent);
}

.dialog-leftover-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.dialog-leftover-path {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dialog-leftover-trailing {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xsmall);
  flex: 0 0 auto;
}

.dialog-leftover-empty {
  margin: 0;
  padding: 2px var(--space-small) 10px;
}

/* The run's waiting panel: the app's own wizard is out, the sheet waits. */
.dialog-running {
  display: flex;
  align-items: flex-start;
  gap: var(--space-small);
  padding: 12px var(--space-small);
  background: var(--surface-card);
  border: 0.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.dialog-running-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: var(--radius-md);
  background: var(--fill-secondary);
  color: var(--text-secondary);
}

.dialog-running-icon svg {
  animation: purify-spin 1s linear infinite;
}

@keyframes purify-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dialog-running-icon svg {
    animation: none;
  }
}

/* The result card's per-app lines: the headline's anatomy, tighter. */
.scan-result--tight {
  padding: 9px var(--card-horizontal-padding);
}

.scan-result-icon--done {
  background: var(--status-safe-fill);
  color: var(--status-safe-text);
}

/* ----- The clean run: full-window progress and completion (SafeCleanupCelebrationOverlay) -----
 * Covers everything below the title bar, sidebar included, the way the
 * original's overlay covers its window. The number is the bytes that actually
 * moved; the sequence on completion follows the original's beats. */

.clean-screen {
  position: fixed;
  top: var(--titlebar-height);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 80;
  background: var(--surface-base);
  display: flex;
  flex-direction: column;
  animation: clean-screen-in 0.35s ease-in-out;
}

@keyframes clean-screen-in {
  from {
    opacity: 0;
    filter: blur(8px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

.clean-screen-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-small);
  padding: var(--space-xlarge) 52px;
  text-align: center;
}

/* The completion checkmark: a thin ring and a check that draw themselves. */
.clean-screen-check {
  color: var(--text-primary);
  animation: clean-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.clean-screen-check circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
  opacity: 0.92;
  stroke-dasharray: 258;
  stroke-dashoffset: 258;
  animation: clean-draw 0.5s ease-in-out 0.1s forwards;
}

.clean-screen-check path {
  fill: none;
  stroke: currentColor;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: clean-draw 0.6s ease-in-out 0.3s forwards;
}

@keyframes clean-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes clean-pop {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.clean-screen-note {
  animation: clean-rise 0.3s ease-in-out 0.1s both;
}

.clean-screen-compare {
  display: flex;
  align-items: center;
  gap: var(--space-xsmall);
  margin: 0;
  animation: clean-rise 0.3s ease-in-out 0.35s both;
}

.clean-screen-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--fill-secondary);
  color: var(--text-primary);
}

.clean-screen-tagline {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  animation: clean-rise 0.3s ease-in-out 0.5s both;
}

.clean-screen-zap {
  color: var(--accent-celebrate);
}

.clean-screen-seconds {
  font-weight: var(--weight-semibold);
}

.clean-screen-kept {
  margin: 0;
  color: var(--status-check-text);
  animation: clean-rise 0.3s ease-in-out 0.6s both;
}

@keyframes clean-rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.clean-screen-bar {
  width: min(560px, 100%);
  height: 4px;
  margin-top: var(--space-xsmall);
  border-radius: var(--radius-pill);
  background: var(--fill-secondary-pressed);
  overflow: hidden;
}

.clean-screen-bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--text-primary);
  transition: width 0.3s ease-out;
}

.clean-screen-item {
  animation: clean-rise 0.2s ease-out both;
}

.clean-screen-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-small);
  padding: 0 52px 44px;
  animation: clean-rise 0.3s ease-in-out 0.6s both;
}

.clean-screen-trash {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxsmall);
}

.clean-screen-done {
  width: 300px;
  max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .clean-screen,
  .clean-screen-check,
  .clean-screen-check circle,
  .clean-screen-check path,
  .clean-screen-note,
  .clean-screen-compare,
  .clean-screen-tagline,
  .clean-screen-kept,
  .clean-screen-item,
  .clean-screen-footer {
    animation: none;
  }
}

/* ===== src/views/Overview/overview.css ===== */

/*
 * overview.css — the Overview page layout. Mirrors purge/Views/OverviewView.swift.
 * Tokens only; the design lint checks this file like any other.
 */

.overview {
  padding: 0 var(--detail-horizontal-inset) var(--space-large);
  display: flex;
  flex-direction: column;
  gap: var(--space-large);
}

.overview-top {
  display: flex;
  flex-direction: column;
  gap: var(--space-small);
}

.overview-summary {
  display: flex;
  align-items: baseline;
  gap: var(--space-xsmall);
}

.overview-used {
  font-weight: var(--weight-bold);
}

.overview-spacer {
  flex: 1;
}

/* The disk bar: one capsule, 2px gaps, small segments kept visible. */
.disk-bar {
  display: flex;
  gap: 2px;
  height: 14px;
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.disk-bar-segment {
  min-width: 0;
  transition: opacity 0.15s ease-out;
}

/* Category rows and plain rows share the card row anatomy. */
.category-row,
.plain-row {
  display: flex;
  align-items: center;
  gap: var(--space-small);
  padding: 11px var(--card-horizontal-padding);
  transition: background-color 0.12s ease-out, opacity 0.15s ease-out;
}

.category-row {
  /* A button shrink-wraps its content; the row must stretch instead, or the
   * trailing figures stop dead at mid-card instead of hugging the edge. */
  width: 100%;
  cursor: default;
}

.category-row:hover {
  background: color-mix(in srgb, var(--fill-secondary) 50%, transparent);
}

.category-row--dimmed,
.plain-row--dimmed {
  opacity: 0.45;
}

.category-row--emphasized,
.plain-row--emphasized {
  background: color-mix(in srgb, var(--fill-secondary) 50%, transparent);
}

.category-row-text,
.plain-row-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.category-row-heading {
  display: flex;
  align-items: center;
  gap: 6px;
}

.category-row-detail,
.plain-row-detail {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-row-trailing,
.plain-row-trailing {
  display: flex;
  align-items: center;
  gap: var(--space-small);
  margin-left: auto;
}

.category-row-bytes,
.plain-row-bytes {
  min-width: 64px;
  text-align: right;
}

.overview-footnotes {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxsmall);
}

.overview-footnotes p {
  margin: 0;
}