/* ============================================================================
   VelvetOS — shell: root layout, wallpaper, desktop, shelf, launcher,
   status area / quick settings, calendar, overview, desks
   ========================================================================== */

.vos-root {
  position: fixed; inset: 0; display: flex; overflow: hidden;
}
.vos-root.shelf-pos-bottom { flex-direction: column; }
.vos-root.shelf-pos-top { flex-direction: column-reverse; }
.vos-root.shelf-pos-left { flex-direction: row; }
.vos-root.shelf-pos-right { flex-direction: row-reverse; }

.vos-content {
  position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden;
}

/* ============================== WALLPAPER =============================== */
/* Sits behind everything, shelf included, so the wallpaper reaches the very
   edges of the window and no dark strip can appear around the shelf. */
.wallpaper { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.wallpaper-image {
  position: absolute; inset: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  transition: opacity var(--dur-xl) var(--ease-standard), filter var(--dur-xl);
}
.wallpaper-image.contain { background-size: contain; background-color: #000; }
.wallpaper-image.stretch { background-size: 100% 100%; }
.wallpaper-image.tile { background-repeat: repeat; background-size: auto; }
.wallpaper-blur {
  position: absolute; inset: -40px;
  backdrop-filter: blur(0px);
  background: var(--wallpaper-tint);
  transition: backdrop-filter var(--dur-l);
}
body.overview-open .wallpaper-blur {
  backdrop-filter: blur(28px) brightness(.75) saturate(1.1);
}
body.locked .wallpaper-blur { backdrop-filter: blur(6px) brightness(.85); }

/* ============================== DESKTOP ================================= */
.desktop {
  position: absolute; inset: 0; z-index: var(--z-desktop);
  padding: var(--sp-4);
  outline: none;
}
.desktop-icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, 96px);
  grid-auto-rows: 100px;
  gap: var(--sp-2);
  align-content: start;
  height: 100%;
}
.desk-icon {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 96px; padding: 8px 4px; border-radius: var(--r-s);
  cursor: pointer; text-align: center;
}
.desk-icon:hover { background: rgba(255,255,255,.16); }
.desk-icon.selected { background: rgba(255,255,255,.28); }
.desk-icon .icon { width: 34px; height: 34px; }
.desk-icon .di-label {
  font-size: var(--fs-label); color: var(--desktop-label);
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  word-break: break-word;
}
.desk-icon.selected .di-label { background: var(--primary); padding: 1px 4px; border-radius: 3px; text-shadow: none; }

/* desktop info widget (chromeOS-like status chrome) */
.desk-banner {
  position: absolute; left: 50%; top: 18px; transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 8px 16px; border-radius: var(--r-full);
  background: rgba(32,33,36,.55); color: #fff; backdrop-filter: blur(14px);
  font-size: var(--fs-label); opacity: 0; pointer-events: none;
  transition: opacity var(--dur-l);
}
.desk-banner.show { opacity: 1; }

/* ============================== WINDOWS LAYER =========================== */
.windows { position: absolute; inset: 0; z-index: var(--z-windows); pointer-events: none; }
.windows > * { pointer-events: auto; }

/* ============================== SHELF =================================== */
/* A thin floating bar: inset from the screen edges, softly rounded, frosted
   and tinted from the wallpaper (see js/core/monet.js for the tint). */
.shelf {
  position: relative; z-index: var(--z-shelf);
  flex: none;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  background: transparent;
  transition: transform var(--dur-l) var(--ease-standard);
}
.shelf-inner {
  position: relative;
  isolation: isolate;
  /*
   * Flex, not a 3-column grid: with `minmax(0,1fr)` sides the two clusters were
   * allowed to collapse to 0 and the icon strip took the whole bar, which
   * squeezed the round start button into an ellipse and let the status pill
   * overlap the icons once enough apps were open. The side clusters are now
   * `flex: none` (their intrinsic width is a hard minimum) and only the icon
   * strip flexes — it scrolls when it cannot fit.
   */
  display: flex;
  align-items: center;
  width: 100%; height: var(--shelf-height);
  padding: 0 var(--shelf-pad, 10px);
  border: 0;
  border-top: 1px solid var(--shelf-border);
  /* flush with the screen edges: only the two upper corners are rounded */
  border-radius: var(--shelf-radius) var(--shelf-radius) 0 0;
  background: var(--shelf-bg);
  backdrop-filter: blur(26px) saturate(1.9);
  -webkit-backdrop-filter: blur(26px) saturate(1.9);
  box-shadow: var(--shelf-shadow);
}
/* acrylic sheen + grain, painted under the contents */
.shelf-inner::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background-image: var(--shelf-sheen), var(--acrylic-noise);
  background-size: auto, 120px 120px;
  opacity: .9;
  pointer-events: none;
}

/* three clusters: start | centred icons | status */
.shelf-side {
  display: flex; align-items: center; gap: 4px;
  /* never squeezed: the round start button and the status pill keep their size */
  flex: none;
  /* both clusters are forced to the width of the widest one (measured in
     shelf.js), so the icon strip between them is centred in the bar rather than
     centred in whatever space happens to be left */
  min-width: var(--shelf-side-w, 0);
  justify-content: flex-start;
}
.shelf-side.right { justify-content: flex-end; }

.shelf-apps {
  display: flex; align-items: center; gap: var(--shelf-gap, 2px);
  /* the only flexible part of the bar */
  flex: 1 1 auto; min-width: 0;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  max-width: 100%;
  /* centred while everything fits, left-aligned once it has to scroll */
  justify-content: safe center;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.shelf-apps::-webkit-scrollbar { display: none; }

.shelf-btn {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: calc(var(--shelf-icon) + 12px); height: calc(var(--shelf-icon) + 12px);
  /* no bottom padding: it used to reserve a lane for the running dot and left the
     icon sitting 2.5px above the centre. The dot is absolutely positioned at the
     bottom edge, so it clears the icon anyway. */
  padding: 0;
  border: 0; background: transparent; border-radius: 50%;
  cursor: pointer; flex: none;
  color: var(--on-surface-2);
  transition: background var(--dur-s) var(--ease-standard), transform var(--dur-m) var(--ease-standard);
}
.shelf-btn:hover { background: var(--shelf-icon-hover); }
.shelf-btn:active { transform: scale(.92); }
.shelf-btn.dragging { opacity: .5; }
.shelf-btn.drop-before { box-shadow: -3px 0 0 0 var(--primary); }
.shelf-btn.drop-after { box-shadow: 3px 0 0 0 var(--primary); }
/* chromeOS/Windows taskbars use round app icons */
.shelf-btn .app-icon {
  width: calc(var(--shelf-icon) - 2px); height: calc(var(--shelf-icon) - 2px);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 1px 2px rgba(0, 0, 0, .16);
}
.shelf-btn .app-icon .icon { width: 60%; height: 60%; }

/* running indicator — a short bar tucked under the round icon */
.shelf-btn .run-dot {
  position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 3px; border-radius: 2px; background: var(--on-surface-3);
  opacity: 0; transition: opacity var(--dur-m), width var(--dur-m), background var(--dur-m);
}
.shelf-btn.running .run-dot { opacity: 1; }
.shelf-btn.focused .run-dot { width: 16px; height: 4px; border-radius: 2px; background: var(--primary); }

/* the start button: a filled circle carrying the VelvetOS mark */
.shelf-start {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: calc(var(--shelf-icon) + 4px); height: calc(var(--shelf-icon) + 4px);
  /* flex: none keeps it a circle — as a flexible flex item it was squashed into
     an ellipse as soon as the icon strip needed the space */
  flex: none;
  aspect-ratio: 1 / 1;
  padding: 0; margin-right: 4px;
  border: 0; border-radius: 50%;
  background: var(--on-surface);
  color: var(--surface);
  cursor: pointer;
  transition: transform var(--dur-m) var(--ease-standard), filter var(--dur-s);
}
.shelf-start:hover { filter: brightness(1.12); }
.shelf-start:active { transform: scale(.92); }
.shelf-start .start-mark {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}
.shelf-start .start-mark svg { width: 54%; height: 54%; }

.shelf-sep { width: 1px; height: 24px; background: var(--divider); margin: 0 8px; flex: none; }

/* app icon rendering (shared) */
.app-icon {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  color: #fff; flex: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  overflow: hidden;
}
.app-icon .icon { width: 66%; height: 66%; }
.app-icon.plain { background: none; box-shadow: none; color: var(--on-surface-2); }
.app-icon.plain .icon { width: 100%; height: 100%; }
.app-icon.sq { border-radius: 8px; }
.app-icon.round { border-radius: 50%; }

/* status area */
.shelf-status { display: flex; align-items: center; gap: 2px; flex: none; }
.status-pill {
  display: flex; align-items: center; gap: 8px;
  flex: none;
  height: calc(var(--shelf-height) - 12px); padding: 0 10px; margin: 0;
  border: 0; background: transparent; border-radius: var(--r-full);
  cursor: pointer; color: var(--on-surface-2);
  transition: background var(--dur-s) var(--ease-standard);
}
.status-pill:hover { background: var(--shelf-icon-hover); }
.status-pill .icon { width: 16px; height: 16px; }
.status-time {
  font-size: var(--fs-label); font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums; color: var(--on-surface-2); white-space: nowrap;
  min-width: 0; text-align: left;
}
.status-date { font-size: var(--fs-label); color: var(--on-surface-2); white-space: nowrap; }
/* a narrow bar drops the date before anything else */
@media (max-width: 820px) {
  .status-date { display: none; }
}

/* ---------- portrait / phone-width ---------- */
/* The icon strip is the only flexible part of the bar, so everything else has to
   give way first: the pill loses its secondary icons and the date, the start
   button and gaps shrink, and the strip scrolls instead of overflowing. */
@media (max-width: 700px), (orientation: portrait) and (max-width: 900px) {
  .shelf-inner { padding: 0 var(--shelf-pad, 6px); }
  .shelf-side { gap: 2px; }
  .shelf-start { margin-right: 0; }
  .shelf-apps { gap: 0; }
  .status-pill { gap: 6px; padding: 0 8px; max-width: 46vw; }
  .status-icons { gap: 6px; }
  .status-date { display: none; }
  .status-icons .si-bt, .status-icons .si-pct { display: none; }
  .status-icons .icon { width: 14px; height: 14px; }
  .status-time { font-size: var(--fs-caption); }
  .shelf-btn .run-dot { bottom: 1px; }
  .launcher-grid { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); }
  .launcher-continue { grid-template-columns: minmax(0, 1fr); }
  .launcher-panel { left: 4px; width: calc(100vw - 8px); max-height: 82vh; }
}

/* ---------- touch screens ---------- */
@media (pointer: coarse) {
  /* 44px minimum touch targets without changing the visual size of anything */
  .shelf-btn { min-width: 44px; min-height: 44px; }
  .shelf-start { min-width: 44px; min-height: 44px; }
  .status-pill { min-height: 44px; }
  .icon-btn { min-width: 40px; min-height: 40px; }
  .btn { min-height: 40px; }
  .list-item, .result-row, .set-row, .side-item, .menu-item, .launcher-app, .cont-item { min-height: 44px; }
  .cal-day, .ovw-close, .win-controls .icon-btn { min-width: 40px; min-height: 40px; }
  -webkit-tap-highlight-color: rgba(0, 0, 0, .08);
}
.status-divider { width: 1px; height: 16px; background: var(--divider); }
/*
 * Status icons sit in identical 18px slots so their centres are evenly spaced.
 * A plain flex gap is not enough: the glyphs are different widths (the bluetooth
 * rune is only ~6px wide inside its box while the wifi glyph nearly fills its
 * own), so equal box gaps read as unequal space. The slot makes the boxes equal
 * and .si-bt pulls its neighbours in to make up for its narrow glyph.
 */
.status-icons { display: flex; align-items: center; gap: 5px; min-width: 0; }
.status-icons .si {
  display: flex; align-items: center; justify-content: center;
  flex: none; width: 18px; height: 18px;
}
.status-icons .si-bt { margin: 0 -3px; }
.status-icons .icon { width: 15px; height: 15px; }
.status-avatar { width: 22px; height: 22px; font-size: 11px; }

/* shelf alignment: left / right */
.vos-root.shelf-pos-left .shelf,
.vos-root.shelf-pos-right .shelf { padding: 0; }
.vos-root.shelf-pos-left .shelf-inner,
.vos-root.shelf-pos-right .shelf-inner {
  grid-template-columns: auto;
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
  justify-items: center;
  width: var(--shelf-height); height: 100%;
  padding: 10px 0;
}
.vos-root.shelf-pos-left .shelf-side,
.vos-root.shelf-pos-right .shelf-side { flex-direction: column; }
.vos-root.shelf-pos-left .shelf-apps,
.vos-root.shelf-pos-right .shelf-apps {
  flex-direction: column; max-height: 62vh; overflow-y: auto; overflow-x: hidden;
}
.vos-root.shelf-pos-left .shelf-start,
.vos-root.shelf-pos-right .shelf-start { margin: 4px 0 0; }.vos-root.shelf-pos-left .shelf-status,
.vos-root.shelf-pos-right .shelf-status { flex-direction: column; }
.vos-root.shelf-pos-left .status-pill,
.vos-root.shelf-pos-right .status-pill {
  flex-direction: column; gap: 3px; height: auto; padding: 7px 5px; margin: 0; border-radius: var(--r-l);
}
.vos-root.shelf-pos-left .status-time,
.vos-root.shelf-pos-right .status-time { text-align: center; min-width: 0; }
.vos-root.shelf-pos-left .status-icons,
.vos-root.shelf-pos-right .status-icons { flex-direction: column; gap: 6px; }

/* auto-hide */
body.shelf-autohide .shelf { transform: translateY(100%); }
body.shelf-autohide.shelf-pos-top .shelf { transform: translateY(-100%); }
body.shelf-autohide.shelf-pos-left .shelf { transform: translateX(-100%); }
body.shelf-autohide.shelf-pos-right .shelf { transform: translateX(100%); }
body.shelf-autohide .shelf:hover,
body.shelf-autohide .shelf.peek { transform: none; }

/* ============================== LAUNCHER ================================ */
.launcher {
  position: fixed; inset: 0; z-index: var(--z-launcher);
  display: flex; flex-direction: column; align-items: center;
  background: var(--scrim);
  backdrop-filter: blur(4px);
  animation: fade-in var(--dur-m) var(--ease-standard);
}
.launcher.closing { animation: fade-out var(--dur-s) var(--ease-accelerate) forwards; }
@keyframes fade-out { to { opacity: 0; } }

.launcher-panel {
  position: absolute;
  left: 6px;
  bottom: calc(var(--shelf-height) + 6px);
  width: min(620px, calc(100vw - 12px));
  max-height: min(78vh, 720px);
  display: flex; flex-direction: column;
  isolation: isolate;
  background: var(--launcher-bg);
  border: 1px solid var(--launcher-border);
  border-radius: 14px;
  box-shadow: var(--elevation-4);
  backdrop-filter: blur(34px) saturate(1.8);
  -webkit-backdrop-filter: blur(34px) saturate(1.8);
  overflow: hidden;
  animation: launcher-in var(--dur-l) var(--ease-decelerate);
}
/* the panel follows the start button to the other end of the bar */
.launcher-panel::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background-image: var(--launcher-sheen), var(--acrylic-noise);
  background-size: auto, 120px 120px;
  pointer-events: none;
}
@keyframes launcher-in { from { opacity: 0; transform: translateY(24px) scale(.985); } }

.launcher-search {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 12px 12px 10px; flex: none;
}
.launcher-search .field {
  flex: 1 1 auto; height: 42px; border-radius: var(--r-full);
  background: rgba(255, 255, 255, .5); padding: 0 16px;
  border: 1px solid var(--launcher-border);
}
[data-theme="dark"] .launcher-search .field { background: rgba(255, 255, 255, .08); }
.launcher-search .field:focus-within { background: var(--surface); }
.launcher-search .icon { color: var(--on-surface-3); }
.launcher-search input {
  flex: 1 1 auto; border: 0; background: transparent; outline: none;
  font-size: 14px; color: var(--on-surface);
}
.launcher-search input::placeholder { color: var(--on-surface-3); }
.launcher-body { flex: 1 1 auto; overflow-y: auto; padding: var(--sp-2) var(--sp-2) var(--sp-5); }

.launcher-section-title {
  padding: 12px 16px 6px; font-size: var(--fs-label);
  color: var(--on-surface-2); font-weight: var(--fw-medium);
}

/* "continue where you left off" cards — two per row, like the reference */
.launcher-continue {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px; padding: 0 12px 4px;
}
.cont-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 8px;
  background: rgba(255, 255, 255, .34);
  border: 1px solid var(--launcher-border);
  cursor: pointer; text-align: left; min-width: 0;
  transition: background var(--dur-s), box-shadow var(--dur-s);
}
[data-theme="dark"] .cont-item { background: rgba(255, 255, 255, .06); }
.cont-item:hover { background: rgba(255, 255, 255, .62); box-shadow: var(--elevation-1); }
[data-theme="dark"] .cont-item:hover { background: rgba(255, 255, 255, .12); }
.cont-item .app-icon { width: 32px; height: 32px; border-radius: 8px; }
.cont-item .ci-text { flex: 1 1 auto; min-width: 0; }
.cont-item .ci-title { font-size: var(--fs-body); font-weight: var(--fw-medium); }
.cont-item .ci-sub { font-size: var(--fs-caption); color: var(--on-surface-3); margin-top: 1px; }

.launcher-recents { display: flex; gap: var(--sp-2); padding: var(--sp-2) 14px var(--sp-3); flex-wrap: wrap; }
.recent-app {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 84px; padding: 10px 4px; border-radius: var(--r-m); border: 0; background: transparent;
  cursor: pointer; color: var(--on-surface-2);
}
.recent-app:hover { background: var(--surface-2); }
.recent-app .app-icon { width: 40px; height: 40px; border-radius: 10px; }
.recent-app .ra-label { font-size: var(--fs-caption); text-align: center; max-width: 100%; }

.launcher-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;
  padding: 0 8px;
}
.launcher-app {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 4px 12px; border: 0; background: transparent; border-radius: 10px;
  cursor: pointer; color: var(--on-surface);
  transition: background var(--dur-s) var(--ease-standard);
}
.launcher-app:hover, .launcher-app.focused { background: rgba(255, 255, 255, .45); }
[data-theme="dark"] .launcher-app:hover,
[data-theme="dark"] .launcher-app.focused { background: rgba(255, 255, 255, .1); }
.launcher-app.focused { box-shadow: inset 0 0 0 2px var(--primary); }
.launcher-app .app-icon { width: 46px; height: 46px; border-radius: 12px; }
.launcher-app .app-icon .icon { width: 62%; height: 62%; }
.launcher-app .la-label {
  font-size: var(--fs-caption); text-align: center; line-height: 1.25;
  max-width: 100%; overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

.launcher-results { padding: var(--sp-1) var(--sp-2); }
.result-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 10px 14px; border-radius: var(--r-m); cursor: pointer;
}
.result-row:hover, .result-row.focused { background: var(--surface-2); }
.result-row .app-icon { width: 30px; height: 30px; border-radius: 8px; }
.result-row .rr-text { flex: 1 1 auto; min-width: 0; }
.result-row .rr-title { font-size: var(--fs-body); }
.result-row .rr-sub { font-size: var(--fs-caption); color: var(--on-surface-3); margin-top: 2px; }
.result-row .rr-kind { font-size: var(--fs-caption); color: var(--on-surface-4); }
.launcher-footer {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); padding: 10px 18px; border-top: 1px solid var(--divider);
  font-size: var(--fs-caption); color: var(--on-surface-3);
}

/* ============================== QUICK SETTINGS ========================== */
.qs {
  width: 384px; max-width: calc(100vw - 20px);
  max-height: min(78vh, 760px);
  display: flex; flex-direction: column;
  border-radius: var(--r-2xl) !important;
}
.qs-scroll { flex: 1 1 auto; overflow-y: auto; }

/*
 * One icon slot for the whole panel.
 *
 * Every leading icon used to be sized and padded locally, so the glyph centres
 * landed on five different columns (avatar 43.9, slider 42.9, tile 49.9,
 * battery 53.9, notification 44.9 in a 279px panel) and the text started at four
 * different x positions. A fixed 32px slot keeps the glyph centres — and with a
 * 12px gap the text column — identical everywhere.
 */
.qs-ic {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
}

.qs-user {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px 10px;
}
.qs-user .avatar { width: 32px; height: 32px; }
.qs-user .qsu-text { flex: 1 1 auto; min-width: 0; }
.qs-user .qsu-name { font-size: var(--fs-body); font-weight: var(--fw-medium); }
.qs-user .qsu-sub { font-size: var(--fs-caption); color: var(--on-surface-3); }
.qs-user .icon-btn { color: var(--on-surface-2); }

.qs-sliders { padding: 4px 16px 12px; display: flex; flex-direction: column; gap: var(--sp-3); }
.qs-sliders { padding: 4px 16px 12px; display: flex; flex-direction: column; gap: var(--sp-3); }
.qs-slider-row { display: flex; align-items: center; gap: 12px; }
.qs-slider-row .icon-btn { width: 32px; height: 32px; }
.qs-slider-row .icon-btn .icon { width: 18px; height: 18px; }
.qs-slider-row .slider { flex: 1 1 auto; }

.qs-tiles {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2);
  padding: 0 16px 12px;
}
.qs-tile {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  min-height: 50px; padding: 8px 10px 8px 0;
  border: 1px solid var(--outline-variant); border-radius: var(--r-l);
  background: var(--surface); color: var(--on-surface-2);
  cursor: pointer; text-align: left; overflow: hidden;
  transition: background var(--dur-s), border-color var(--dur-s), color var(--dur-s);
}
.qs-tile:hover { background: var(--surface-2); }
.qs-tile .qt-icon {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
}
.qs-tile .qt-icon .icon { width: 20px; height: 20px; }
.qs-tile .qt-text { flex: 1 1 auto; min-width: 0; }
.qs-tile .qt-title { font-size: var(--fs-label); font-weight: var(--fw-medium); }
.qs-tile .qt-sub { font-size: var(--fs-caption); color: var(--on-surface-3); margin-top: 1px; }
.qs-tile .qt-caret {
  flex: none; display: flex; width: 24px; height: 24px; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--on-surface-3);
}
.qs-tile .qt-caret:hover { background: var(--shelf-icon-hover); }
.qs-tile.on {
  background: var(--primary-container); border-color: transparent; color: var(--on-primary-container);
}
.qs-tile.on .qt-sub { color: color-mix(in srgb, var(--on-primary-container) 75%, transparent); }
.qs-tile.on .qt-icon { color: var(--on-primary-container); }

.qs-battery {
  display: flex; align-items: center; gap: 12px;
  /* the card is placed by its own margins, so an 8px left inset puts its content
     on the panel's icon column while the surface still bleeds into the gutter */
  margin: 0 16px 12px 8px; padding: 12px 14px 12px 8px;
  background: var(--surface-2); border-radius: var(--r-l);
}
.qs-battery .qb-text { flex: 1 1 auto; }
.qs-battery .qb-pct { font-size: var(--fs-body); font-weight: var(--fw-medium); }
.qs-battery .qb-sub { font-size: var(--fs-caption); color: var(--on-surface-3); margin-top: 2px; }

/* calendar widget inside quick settings — chromeOS shows a compact month grid
   with soft square day cells, so nothing renders as a floating pill */
.qs-cal {
  margin: 0 16px 12px 8px; padding: 12px 10px 8px 8px;
  background: var(--surface-2); border-radius: var(--r-l);
}
.qs-cal-head {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 0 4px 8px;
}
.qs-cal-head .qch-text { flex: 1 1 auto; min-width: 0; }
.qs-cal-month { font-size: var(--fs-body); font-weight: var(--fw-medium); }
.qs-cal-today { font-size: var(--fs-caption); color: var(--on-surface-3); margin-top: 1px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.cal-dow {
  text-align: center; font-size: 10px; color: var(--on-surface-3);
  padding-bottom: 6px; text-transform: uppercase; letter-spacing: .5px;
}
.cal-day {
  display: flex; align-items: center; justify-content: center;
  height: 28px; border-radius: var(--r-s); font-size: var(--fs-label);
  cursor: pointer; color: var(--on-surface-2); position: relative;
  transition: background var(--dur-s) var(--ease-standard);
  user-select: none;
}
.cal-day:hover { background: var(--shelf-icon-hover); }
.cal-day.other { color: var(--on-surface-4); }
.cal-day.today {
  background: var(--primary); color: var(--on-primary);
  font-weight: var(--fw-medium);
}
.cal-day.today:hover { background: var(--primary); }
.cal-day.has-events::after {
  content: ""; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--primary);
}
.cal-day.today.has-events::after { background: var(--on-primary); }
.qs-agenda { margin-top: var(--sp-2); display: flex; flex-direction: column; gap: 6px; max-height: 120px; overflow-y: auto; }
.qs-event { display: flex; gap: var(--sp-2); align-items: flex-start; }
.qs-event .qe-bar { width: 3px; border-radius: 2px; align-self: stretch; background: var(--primary); flex: none; }
.qs-event .qe-title { font-size: var(--fs-label); }
.qs-event .qe-time { font-size: var(--fs-caption); color: var(--on-surface-3); }

/* notification list in quick settings */
.qs-notifs { padding: 0 16px 8px; }
.qs-notif-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 4px 6px;
}
.qs-notif-head .qnh-title { font-size: var(--fs-label); color: var(--on-surface-3); }
.qs-notif {
  display: flex; align-items: flex-start; gap: 12px;
  /* surface bleeds into the gutter, content stays on the panel's icon column */
  margin-left: -8px; padding: 10px 12px 10px 8px; border-radius: var(--r-m);
  cursor: pointer;
}
.qs-notif:hover { background: var(--surface-2); }
.qs-notif .qn-body { flex: 1 1 auto; min-width: 0; }
.qs-notif .qn-title { font-size: var(--fs-label); font-weight: var(--fw-medium); }
.qs-notif .qn-msg { font-size: var(--fs-caption); color: var(--on-surface-3); margin-top: 2px; }
.qs-notif .qn-time { font-size: 10px; color: var(--on-surface-4); flex: none; }
.qs-empty { padding: 14px 8px; font-size: var(--fs-label); color: var(--on-surface-4); text-align: center; }

/* network / bluetooth sub-panels */
.qs-panel { display: flex; flex-direction: column; height: 100%; }
.qs-panel-head {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 10px 8px 10px 4px; position: sticky; top: 0;
  background: var(--popover-bg); z-index: 2;
}
.qs-panel-head .qph-title { font-size: var(--fs-body); font-weight: var(--fw-medium); flex: 1 1 auto; }
.qs-net-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 10px 12px; border-radius: var(--r-m); cursor: pointer;
}
.qs-net-row:hover { background: var(--surface-2); }
.qs-net-row.active { color: var(--primary); }
.qs-net-row .nr-text { flex: 1 1 auto; min-width: 0; }
.qs-net-row .nr-name { font-size: var(--fs-body); }
.qs-net-row .nr-sub { font-size: var(--fs-caption); color: var(--on-surface-3); }

/* power menu */
.power-menu {
  width: 240px; padding: 8px !important; border-radius: var(--r-l) !important;
}
.power-menu .pm-item {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: 12px 14px; border-radius: var(--r-m); cursor: pointer; font-size: var(--fs-body);
}
.power-menu .pm-item:hover { background: var(--surface-2); }
.power-menu .pm-item.danger:hover { background: var(--error-container); color: var(--on-error-container); }

/* ============================== OVERVIEW ================================ */
.overview {
  position: absolute; inset: 0; z-index: var(--z-overview);
  display: flex; flex-direction: column;
  background: rgba(32, 33, 36, .28);
  animation: fade-in var(--dur-m) var(--ease-standard);
}
.overview.closing { animation: fade-out var(--dur-s) var(--ease-accelerate) forwards; }
.ov-topbar {
  display: flex; justify-content: center; padding: 20px 16px 10px; flex: none;
}
.ov-search {
  display: flex; align-items: center; gap: var(--sp-3);
  width: min(520px, 80vw); height: 44px; padding: 0 16px;
  background: rgba(255,255,255,.92); border-radius: var(--r-full);
  box-shadow: var(--elevation-3);
}
[data-theme="dark"] .ov-search { background: rgba(50,51,56,.95); }
.ov-search-icon { display: flex; color: var(--on-surface-3); }
.ov-search-input { flex: 1 1 auto; border: 0; background: transparent; outline: none; font-size: var(--fs-body); }

.ov-deskstrip {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  padding: 4px 16px 16px; flex: none; flex-wrap: wrap;
  min-height: 84px;
}
.desk-card {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  width: 148px; height: 66px; padding: 8px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.24);
  border-radius: var(--r-m); cursor: pointer;
  transition: background var(--dur-m), transform var(--dur-m), box-shadow var(--dur-m);
  overflow: hidden;
}
.desk-card:hover { background: rgba(255,255,255,.28); }
.desk-card.active {
  background: var(--primary); border-color: transparent;
  box-shadow: 0 0 0 2px rgba(255,255,255,.9), var(--elevation-3);
}
.desk-card.drop-target { box-shadow: 0 0 0 3px #fff; }
.desk-card .dc-name {
  font-size: var(--fs-caption); color: #fff; font-weight: var(--fw-medium);
  display: flex; align-items: center; gap: 4px;
}
.desk-card .dc-mini { display: flex; gap: 4px; flex-wrap: wrap; flex: 1 1 auto; overflow: hidden; }
.desk-card .dc-mini .app-icon { width: 16px; height: 16px; border-radius: 4px; }
.desk-card .dc-close {
  position: absolute; top: 2px; right: 2px; width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #fff; opacity: 0; transition: opacity var(--dur-s), background var(--dur-s);
}
.desk-card:hover .dc-close { opacity: 1; }
.desk-card .dc-close:hover { background: rgba(0,0,0,.35); }
.desk-card .dc-close .icon { width: 14px; height: 14px; }
.desk-card.new-desk {
  align-items: center; justify-content: center; color: #fff;
  border-style: dashed; background: rgba(255,255,255,.08);
  width: 84px;
}
.desk-card.new-desk .dc-plus { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: var(--fs-caption); }

.ov-stage { position: absolute; inset: 0; pointer-events: none; }
.ov-window {
  position: absolute; pointer-events: auto;
  border-radius: var(--window-radius); overflow: hidden;
  background: var(--window-bg);
  box-shadow: var(--elevation-4);
  cursor: pointer;
  transition: transform var(--dur-l) var(--ease-decelerate), opacity var(--dur-m), box-shadow var(--dur-m);
  will-change: transform;
}
.ov-window:hover { box-shadow: 0 0 0 3px var(--primary), var(--elevation-5); }
.ov-window .ovw-chrome { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px; background: var(--window-header); }
.ov-window .ovw-title { font-size: 10px; color: var(--on-surface-2); flex: 1 1 auto; overflow: hidden; white-space: nowrap; }
.ov-window .ovw-close {
  width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--on-surface-2); flex: none;
}
.ov-window .ovw-close:hover { background: rgba(0,0,0,.12); }
.ov-window .ovw-close .icon { width: 13px; height: 13px; }
.ov-window .ovw-body { position: absolute; inset: 26px 0 0; background: var(--window-bg); overflow: hidden; }
.ov-window .ovw-body > * { transform-origin: 0 0; pointer-events: none; }
.ov-window.hidden-desk { display: none; }
.ov-empty {
  position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%);
  color: #fff; font-size: var(--fs-body); text-align: center; text-shadow: 0 1px 6px rgba(0,0,0,.5);
  pointer-events: none;
}
.ov-hint {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  color: rgba(255,255,255,.85); font-size: var(--fs-caption);
  text-shadow: 0 1px 4px rgba(0,0,0,.6); pointer-events: none; text-align: center;
}

/* split screen affordances in overview */
.ov-split-hint {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 60px; height: 60%; border-radius: var(--r-m);
  background: rgba(255,255,255,.14); border: 2px dashed rgba(255,255,255,.5);
  display: flex; align-items: center; justify-content: center; color: #fff;
}

/* snap preview */
.snap-preview {
  position: absolute; inset: 0; z-index: calc(var(--z-windows) + 40); pointer-events: none;
}
.snap-preview-inner {
  position: absolute; border: 2px solid var(--primary);
  background: color-mix(in srgb, var(--primary) 22%, transparent);
  border-radius: var(--r-m);
  transition: all var(--dur-m) var(--ease-standard);
}

/* ============================== MISC SHELL ============================== */
body.overview-open .win { transition: transform var(--dur-l) var(--ease-decelerate), opacity var(--dur-m); }
body.launcher-open .shelf-inner { box-shadow: var(--shelf-shadow), var(--elevation-3); }
body.dragging { cursor: grabbing !important; }
body.dragging * { cursor: grabbing !important; }
.drag-ghost {
  position: fixed; z-index: var(--z-toast); pointer-events: none;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: var(--r-s);
  background: var(--popover-bg); box-shadow: var(--elevation-3);
  font-size: var(--fs-label); opacity: .95;
}