/*
 * Shell — desktop, overlapping windows, taskbar, Start menu, context menu / action sheet,
 * folders, dialogs and the Properties window.
 *
 * Everything here is painted from PomorskieLIVE's own tokens (css/app.css): --bg, --bg-card (the
 * OPAQUE panel colour), --text-main, --text-sec, --border, --accent, --primary, --header-bg and the
 * --tint-NN overlays. The light theme therefore needs no rules of its own. The few shell-only values
 * are declared once below as --shell-*.
 *
 * Shape language (deliberately denser and flatter than the Asystent shell this was ported from):
 * window 8px radius, menu 6px, desktop/app tile 10px (12px on a phone), buttons 6px, no pills.
 * Title bar 40px, taskbar 48px. The phone layout starts at a viewport of 768px or less and is keyed
 * off the same threshold as `isNarrowViewport` in geometry.js; the `.is-narrow` classes (set by the
 * shell) and the media query below agree, so a test can drive either.
 *
 * Layering: windows 1..N, marquee 4, type-ahead 6, snap preview 9999, taskbar and its popups 3000,
 * context menu 4000 (sheet 4001 over its backdrop 4000), both appended to <body>.
 */

:root {
  --shell-taskbar-h: 48px;
  --shell-titlebar-h: 40px;
  --shell-ink: #0b1220;
  --shell-on-accent: #0b1220;
  --shell-hover: var(--tint-08);
  --shell-selected: var(--tint-14);
  --shell-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  --shell-focus-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
  --shell-radius: 8px;
  --shell-menu-radius: 6px;
  --shell-tile-radius: 10px;
}

html[data-theme="light"] {
  --shell-shadow: 0 6px 20px rgba(15, 23, 42, 0.16);
  --shell-focus-shadow: 0 12px 36px rgba(15, 23, 42, 0.22);
}

.shell {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) var(--shell-taskbar-h);
  color: var(--text-main);
  background: var(--bg);
  font-family: inherit;
}

/* ---------------------------- long-press targets ---------------------------- */

/* An element that opens a context menu on a long press (see context-request.js). Without this a phone
   shows its own callout / text selection at the same moment and the menu opens underneath it. */
.ctx-pressable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ------------------------------ workspace --------------------------- */

.shell-workspace {
  position: relative;
  min-height: 0;
  overflow: hidden;
  overflow: clip; /* see .shell-window-layer */
}

.shell-desktop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.shell-wallpaper {
  position: absolute;
  inset: 0;
  background: var(--app-gradient, var(--bg));
}

.shell-desktop:focus {
  outline: none;
}

/* ------------------------------- icons ------------------------------ */

/* One desktop cell (96x100, see icon-grid.js): a 48 px tile and a two-line label. */
.shell-icon {
  position: absolute;
  width: 96px;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  border-radius: var(--shell-radius);
  cursor: default;
  touch-action: none;
  outline: none;
}

.shell-icon:hover {
  background: var(--shell-hover);
}

.shell-icon.is-selected {
  background: var(--shell-selected);
}

.shell-icon:focus-visible {
  box-shadow: 0 0 0 2px var(--accent);
}

.shell-icon.is-dragging {
  z-index: 5;
  opacity: 0.8;
  cursor: grabbing;
}

.shell-icon-tile {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: var(--shell-tile-radius);
  background: var(--tint, var(--accent));
}

/* The glyph is drawn in dark ink on the coloured tile. */
.shell-glyph {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--shell-ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shell-icon-label {
  max-width: 100%;
  font-size: 13px;
  line-height: 1.15;
  text-align: center;
  color: var(--text-main);
  overflow: hidden;
  overflow-wrap: anywhere;
  /* At most two lines; the tile keeps its size whatever the label does. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* Shortcut mark: a small corner square with an arrow, so a shortcut reads differently from the app itself. */
.shell-icon-shortcut {
  position: absolute;
  left: -3px;
  bottom: -3px;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-main);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.shell-icon-shortcut::after {
  content: "\2197";
}

.shell-marquee {
  position: absolute;
  display: none;
  pointer-events: none;
  border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  z-index: 4;
}

.shell-marquee.is-visible {
  display: block;
}

.shell-icon-badge {
  position: absolute;
  top: -5px;
  right: -7px;
  min-width: 18px;
  padding: 0 5px;
  box-sizing: border-box;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  color: var(--shell-on-accent);
  background: var(--accent);
  border-radius: 4px;
  box-shadow: var(--shell-shadow);
}

.shell-icon-badge[hidden] {
  display: none;
}

.shell-icon.is-drop-target,
.shell-folder-content.is-drop-target {
  background: var(--shell-selected);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.shell-type-search {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 6;
  max-width: calc(100% - 24px);
  padding: 4px 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  color: var(--text-main);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--shell-menu-radius);
  box-shadow: var(--shell-shadow);
  transform: translateX(-50%);
  pointer-events: none;
}

.shell-type-search[hidden] {
  display: none;
}

/* ------------------------------ windows ----------------------------- */

.shell-window-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Clicks fall through to the desktop except where a window actually is. */
  pointer-events: none;
  overflow: hidden;
  /* `hidden` can still be scrolled by the browser (focusing or typing into a window that hangs
     partly outside the layer shifts every window at once); `clip` cannot be scrolled at all. */
  overflow: clip;
}

.shell-window-layer.is-gesturing {
  user-select: none;
  -webkit-user-select: none;
}

/* While a window is dragged/resized, content under the pointer must not react and must not swallow
   the gesture. */
.shell-window-layer.is-gesturing .shell-window-body {
  pointer-events: none;
}

.shell-window {
  position: absolute;
  pointer-events: auto;
  transition:
    opacity 0.14s ease,
    transform 0.14s ease;
  animation: shell-window-open 0.16s ease-out;
  /* Layout containment makes THIS window the containing block for `position: fixed` descendants in
     every state (fresh, restored, maximized, phone), so a dialog inside a window dims and centres
     within that window. It does not clip, which matters: the resize handles sit outside the frame
     edge and the focused shadow spreads wide. */
  contain: layout;
}

.shell-window:not(.is-open) {
  display: none;
}

/* Minimized windows stay in the layout (the shrink-and-fly animation needs them) but are invisible
   and unreachable: `inert` is set from JS alongside this class. */
.shell-window.is-minimized {
  opacity: 0;
  transform: translateY(14px) scale(0.97);
  pointer-events: none;
}

@keyframes shell-window-open {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.shell-window-frame {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--shell-radius);
  box-shadow: var(--shell-shadow);
  outline: none;
  transition:
    box-shadow 0.14s ease,
    border-color 0.14s ease;
}

.shell-window.is-focused .shell-window-frame {
  border-color: var(--tint-14);
  box-shadow: var(--shell-focus-shadow);
}

.shell-window.is-maximized {
  inset: 0;
}

.shell-window.is-maximized .shell-window-frame {
  border-radius: 0;
  border-width: 0;
}

/* 40 px title bar: an 18 px tile, the title, then the three controls. */
.shell-titlebar {
  flex: 0 0 var(--shell-titlebar-h);
  display: flex;
  align-items: stretch;
  gap: 8px;
  height: var(--shell-titlebar-h);
  padding: 0 4px 0 12px;
  background: transparent;
  border-bottom: 1px solid var(--border);
}

.shell-window.is-focused .shell-titlebar {
  background: var(--tint-06);
}

.shell-drag-zone {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: default;
  /* Without this a touch drag scrolls the page instead of moving the window. */
  touch-action: none;
}

.shell-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: var(--tint, var(--accent));
}

.shell-title-icon .shell-glyph {
  width: 12px;
  height: 12px;
  stroke-width: 2.4;
}

.shell-window-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
}

.shell-window:not(.is-focused) .shell-window-title {
  color: var(--text-sec);
}

.shell-window-controls {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.shell-window-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 28px;
  padding: 0;
  color: var(--text-sec);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.shell-window-btn:hover {
  background: var(--shell-hover);
  color: var(--text-main);
}

.shell-window-btn.close:hover {
  color: var(--on-primary);
  background: var(--primary);
}

.shell-window-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.shell-control-glyph {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shell-window-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  /* The window body is a size container: an app's layout can react to THIS window's width with
     @container shell-win instead of the screen's. */
  container-type: size;
  container-name: shell-win;
}

/* Resize handles sit on the window edge; 8 px bands on the edges, 14 px squares on the corners. */
.shell-resize-handle {
  position: absolute;
  z-index: 3;
  touch-action: none;
}

.shell-resize-handle.n,
.shell-resize-handle.s {
  left: 10px;
  right: 10px;
  height: 8px;
  cursor: ns-resize;
}

.shell-resize-handle.e,
.shell-resize-handle.w {
  top: 10px;
  bottom: 10px;
  width: 8px;
  cursor: ew-resize;
}

.shell-resize-handle.n {
  top: -4px;
}

.shell-resize-handle.s {
  bottom: -4px;
}

.shell-resize-handle.e {
  right: -4px;
}

.shell-resize-handle.w {
  left: -4px;
}

.shell-resize-handle.nw,
.shell-resize-handle.ne,
.shell-resize-handle.sw,
.shell-resize-handle.se {
  width: 14px;
  height: 14px;
}

.shell-resize-handle.nw {
  top: -4px;
  left: -4px;
  cursor: nwse-resize;
}

.shell-resize-handle.se {
  right: -4px;
  bottom: -4px;
  cursor: nwse-resize;
}

.shell-resize-handle.ne {
  top: -4px;
  right: -4px;
  cursor: nesw-resize;
}

.shell-resize-handle.sw {
  bottom: -4px;
  left: -4px;
  cursor: nesw-resize;
}

/* A finger needs a bigger target than a mouse pointer. */
@media (pointer: coarse) {
  .shell-resize-handle.n,
  .shell-resize-handle.s {
    height: 16px;
  }

  .shell-resize-handle.e,
  .shell-resize-handle.w {
    width: 16px;
  }

  .shell-resize-handle.n {
    top: -8px;
  }

  .shell-resize-handle.s {
    bottom: -8px;
  }

  .shell-resize-handle.e {
    right: -8px;
  }

  .shell-resize-handle.w {
    left: -8px;
  }

  .shell-resize-handle.nw,
  .shell-resize-handle.ne,
  .shell-resize-handle.sw,
  .shell-resize-handle.se {
    width: 24px;
    height: 24px;
  }
}

.shell-window.is-maximized .shell-resize-handle {
  display: none;
}

/* Narrow screens: windows are always maximized, so there is nothing to resize or move. */
.shell-window-layer.is-narrow .shell-resize-handle,
.shell-window-layer.is-narrow .shell-window-btn.maximize {
  display: none;
}

.shell-window-layer.is-narrow .shell-drag-zone {
  touch-action: auto;
}

.shell-snap-preview {
  position: absolute;
  z-index: 9999;
  pointer-events: none;
  border: 2px solid var(--accent);
  border-radius: var(--shell-radius);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  opacity: 0;
  transition: opacity 0.12s ease;
}

.shell-snap-preview.is-visible {
  opacity: 1;
}

/* --------------------------- context menu ---------------------------- */

.shell-context-menu {
  position: fixed;
  z-index: 4000;
  min-width: 12rem;
  padding: 4px;
  background: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border);
  border-radius: var(--shell-menu-radius);
  box-shadow: var(--shell-shadow);
  /* Long entries wrap instead of pushing the menu out of a narrow viewport. */
  max-width: calc(100vw - 8px);
  box-sizing: border-box;
}

.shell-context-header {
  padding: 6px 10px 6px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.shell-context-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
}

.shell-context-subtitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--text-sec);
}

.shell-context-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 30px;
  padding: 4px 10px;
  box-sizing: border-box;
  font: inherit;
  font-size: 14px;
  color: inherit;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.shell-context-item:hover,
.shell-context-item:focus-visible {
  background: var(--shell-hover);
  outline: none;
}

.shell-context-item:focus-visible {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.shell-context-item:disabled {
  color: var(--text-sec);
  opacity: 0.6;
  cursor: default;
}

/* The primary action (the one a double click would run). */
.shell-context-item.is-default {
  font-weight: 700;
}

.shell-context-item.is-danger {
  color: var(--primary);
}

.shell-context-item.is-danger:hover,
.shell-context-item.is-danger:focus-visible {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
}

.shell-context-icon {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.shell-context-glyph {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

.shell-context-hint {
  flex: none;
  margin-left: 16px;
  font-size: 12px;
  color: var(--text-sec);
}

/* Radio entries (a menu that picks one mode): a fixed column for the check mark. */
.shell-context-check {
  flex: 0 0 1em;
  text-align: center;
  color: var(--accent);
  font-weight: 700;
}

.shell-context-radio[aria-checked="true"] {
  font-weight: 600;
}

.shell-context-separator {
  height: 1px;
  margin: 4px 6px;
  background: var(--border);
}

/* ---------------------- phone action sheet (<= 768 px) ---------------------- */

.shell-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: rgba(0, 0, 0, 0.45);
}

.shell-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4001;
  box-sizing: border-box;
  max-height: 80vh;
  max-height: 80dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--bg-card);
  color: var(--text-main);
  border-top: 1px solid var(--border);
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.4);
  animation: shell-sheet-in 0.16s ease-out;
}

@keyframes shell-sheet-in {
  from {
    transform: translateY(100%);
  }
  to {
    transform: none;
  }
}

.shell-sheet-handle {
  width: 36px;
  height: 4px;
  margin: 2px auto 8px;
  border-radius: 2px;
  background: var(--tint-14);
}

.shell-sheet .shell-context-header {
  padding: 4px 12px 10px;
}

.shell-sheet .shell-context-title {
  font-size: 16px;
}

.shell-sheet .shell-context-item {
  min-height: 48px;
  padding: 8px 12px;
  font-size: 16px;
  border-radius: 6px;
}

.shell-sheet .shell-context-icon,
.shell-sheet .shell-context-glyph {
  flex-basis: 20px;
  width: 20px;
  height: 20px;
}

.shell-sheet .shell-context-hint {
  display: none;
}

.shell-sheet-cancel {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: 8px;
  padding: 8px 12px;
  box-sizing: border-box;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-main);
  background: var(--tint-06);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}

.shell-sheet-cancel:focus-visible,
.shell-sheet .shell-context-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  box-shadow: none;
}

/* ------------------------ desktop folders ---------------------------- */

/* The dialogs of the desktop (new folder, rename) sit inside it: its "no selection, no scrolling"
   rules are meant for icons, not for the text field of a dialog. */
.shell-desktop .shell-dialog-backdrop {
  user-select: auto;
  -webkit-user-select: auto;
  touch-action: auto;
}

/* Folder window: five columns of desktop-style icons. */
.shell-folder-content {
  box-sizing: border-box;
  position: relative;
  min-height: 100%;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: 100px;
  gap: 6px;
  align-content: start;
  justify-content: start;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}

.shell-folder-item {
  width: auto;
  height: 100px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 4px;
  border-radius: var(--shell-radius);
  cursor: default;
  touch-action: none;
  outline: none;
}

.shell-folder-item:hover {
  background: var(--shell-hover);
}

.shell-folder-item.is-selected {
  background: var(--shell-selected);
}

.shell-folder-item:focus-visible {
  box-shadow: 0 0 0 2px var(--accent);
}

.shell-folder-item.is-dragging {
  opacity: 0.4;
}

.shell-folder-empty {
  grid-column: 1 / -1;
  margin: 6px 4px;
  color: var(--text-sec);
  font-size: 14px;
}

.shell-folder-empty[hidden] {
  display: none;
}

/* The copy of an icon that follows the pointer when it is dragged out of a folder window. */
.shell-drag-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 5000;
  width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0.88;
  pointer-events: none;
}

.shell-drag-ghost .shell-icon-label {
  padding: 1px 6px;
  color: var(--text-main);
  background: var(--bg-card);
  border-radius: 4px;
}

/* ------------------------------ dialogs ------------------------------- */

.shell-dialog-backdrop {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(0, 0, 0, 0.45);
}

.shell-dialog {
  box-sizing: border-box;
  width: 360px;
  max-width: 100%;
  padding: 16px;
  color: var(--text-main);
  background: var(--bg-card);
  border: 1px solid var(--tint-14);
  border-radius: var(--shell-radius);
  box-shadow: var(--shell-focus-shadow);
  outline: none;
}

.shell-dialog-title {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
}

.shell-dialog-text {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-sec);
}

.shell-dialog-field {
  display: block;
}

.shell-dialog-label {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  color: var(--text-sec);
}

.shell-dialog-error {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--primary);
}

.shell-dialog-error[hidden] {
  display: none;
}

.shell-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

.shell-input {
  box-sizing: border-box;
  width: 100%;
  height: 34px;
  padding: 0 10px;
  font: inherit;
  font-size: 14px;
  color: var(--text-main);
  background: var(--bg);
  border: 1px solid var(--tint-14);
  border-radius: 6px;
}

.shell-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.shell-btn {
  min-height: 34px;
  padding: 0 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  background: var(--tint-06);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}

.shell-btn:hover {
  background: var(--tint-10);
}

.shell-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.shell-btn-primary {
  color: var(--shell-on-accent);
  background: var(--accent);
  border-color: transparent;
}

.shell-btn-primary:hover {
  background: color-mix(in srgb, var(--accent) 88%, var(--text-main));
}

.shell-btn-danger {
  color: var(--on-primary);
  background: var(--primary);
  border-color: transparent;
}

.shell-btn-danger:hover {
  background: color-mix(in srgb, var(--primary) 88%, black);
}

/* ============================== taskbar ============================== */

.shell-bar {
  --shell-bar-h: var(--shell-taskbar-h);
  --shell-bar-flyout-gap: 8px;
  position: relative;
  z-index: 3000;
  box-sizing: border-box;
  height: var(--shell-bar-h);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  color: var(--text-main);
}

.shell-bar-start {
  flex: none;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-main);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.shell-bar-start:hover,
.shell-bar-start[aria-expanded="true"] {
  background: var(--shell-hover);
}

.shell-bar-start:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.shell-bar-start-glyph {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.shell-bar-sep {
  flex: none;
  width: 1px;
  height: 24px;
  margin: 0 6px;
  background: var(--border);
}

.shell-bar-windows {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
}

.shell-bar-win {
  position: relative;
  flex: none;
  width: 44px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.shell-bar-win:hover,
.shell-bar-win.is-focused,
.shell-bar-win[aria-expanded="true"] {
  background: var(--shell-hover);
}

.shell-bar-win:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.shell-bar-win-tile {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--tint, var(--tint-10));
}

.shell-bar-win.is-minimized .shell-bar-win-tile {
  opacity: 0.6;
}

.shell-bar-win-glyph {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--shell-ink);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Count of windows in a group (two or more). */
.shell-bar-win-badge {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  box-sizing: border-box;
  border-radius: 4px;
  background: var(--accent);
  color: var(--shell-on-accent);
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}

.shell-bar-win-badge[hidden] {
  display: none;
}

/* The running indicator: a short grey bar, widened to the accent when focused. */
.shell-bar-win-bar {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 3px;
  border-radius: 2px;
  background: var(--text-sec);
  transition: width 0.15s ease, background-color 0.15s ease;
}

.shell-bar-win.is-grouped .shell-bar-win-bar {
  width: 14px;
}

.shell-bar-win.is-focused .shell-bar-win-bar {
  width: 20px;
  background: var(--accent);
}

.shell-bar-clock {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 0 10px;
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
}

.shell-bar-clock-time {
  font-weight: 600;
}

.shell-bar-clock-date {
  color: var(--text-sec);
}

/* ============================== flyout ============================== */

.shell-bar-flyout {
  position: absolute;
  bottom: calc(100% + var(--shell-bar-flyout-gap));
  left: 8px;
  z-index: 3001;
  box-sizing: border-box;
  width: 290px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: var(--bg-card);
  border: 1px solid var(--tint-14);
  border-radius: var(--shell-radius);
  box-shadow: var(--shell-shadow);
  color: var(--text-main);
}

.shell-bar-flyout[hidden] {
  display: none;
}

.shell-bar-flyout-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.shell-bar-flyout-tile {
  flex: none;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: var(--tint, var(--tint-10));
}

.shell-bar-flyout-glyph {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: var(--shell-ink);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shell-bar-flyout-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
}

.shell-bar-flyout-close,
.shell-bar-list-close {
  flex: none;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-sec);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.shell-bar-flyout-close:hover,
.shell-bar-list-close:hover {
  background: var(--tint-10);
  color: var(--text-main);
}

.shell-bar-flyout-close:focus-visible,
.shell-bar-list-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.shell-bar-flyout-close svg,
.shell-bar-list-close svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shell-bar-flyout-main {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}

.shell-bar-flyout-main:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.shell-bar-flyout-preview {
  position: relative;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.shell-bar-flyout-preview-tile {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--shell-tile-radius);
  background: var(--tint, var(--tint-10));
}

.shell-bar-flyout-preview-glyph {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--shell-ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shell-bar-flyout-badge {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-card);
  color: var(--text-sec);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

/* ---------------------------- window list ----------------------------- */

.shell-bar-list {
  gap: 4px;
  padding: 6px;
}

.shell-bar-list-head {
  padding: 4px 8px 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-sec);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shell-bar-list-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 50vh;
  overflow-y: auto;
}

.shell-bar-list-row {
  display: flex;
  align-items: center;
  gap: 2px;
  border-radius: 6px;
}

.shell-bar-list-row:hover,
.shell-bar-list-row.is-focused {
  background: var(--shell-hover);
}

.shell-bar-list-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.shell-bar-list-main:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.shell-bar-list-tile {
  flex: none;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: var(--tint, var(--tint-10));
}

.shell-bar-list-glyph {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: var(--shell-ink);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shell-bar-list-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shell-bar-list-row.is-focused .shell-bar-list-title {
  font-weight: 600;
}

.shell-bar-list-state {
  flex: none;
  font-size: 11px;
  color: var(--text-sec);
}

.shell-bar-list-state:empty {
  display: none;
}

/* ============================ Start menu ============================ */

.shell-start-root {
  --shell-bar-h: var(--shell-taskbar-h);
  position: fixed;
  left: 8px;
  bottom: calc(var(--shell-bar-h) + 8px);
  z-index: 3000;
  box-sizing: border-box;
  width: 760px;
  height: min(620px, calc(100vh - var(--shell-bar-h) - 24px));
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--tint-14);
  border-radius: 10px;
  box-shadow: var(--shell-focus-shadow);
  color: var(--text-main);
  overflow: hidden;
}

.shell-start-root[hidden] {
  display: none;
}

.shell-start-search-wrap {
  flex: none;
  padding: 12px;
  border-bottom: 1px solid var(--border);
}

.shell-start-search-field {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  background: var(--bg);
  border: 1px solid var(--tint-14);
  border-radius: 6px;
}

.shell-start-search-field:focus-within {
  border-color: var(--accent);
}

.shell-start-search-glyph {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--text-sec);
  stroke-width: 2;
  stroke-linecap: round;
}

.shell-start-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text-main);
  font: inherit;
  font-size: 15px;
}

.shell-start-search-input::placeholder {
  color: var(--text-sec);
}

.shell-start-search-chip {
  flex: none;
  padding: 2px 6px;
  border: 1px solid var(--tint-14);
  border-radius: 4px;
  color: var(--text-sec);
  font-size: 12px;
}

.shell-start-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

.shell-start-cats {
  flex: none;
  width: 180px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 8px;
  border-right: 1px solid var(--border);
  overflow-y: auto;
}

.shell-start-cat {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-sec);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.shell-start-cat:hover {
  background: var(--shell-hover);
}

.shell-start-cat.is-selected {
  background: var(--shell-selected);
  color: var(--text-main);
  font-weight: 600;
}

.shell-start-cat:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.shell-start-cat-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shell-start-cat-count {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-sec);
}

.shell-start-content {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 16px;
  overflow-y: auto;
}

.shell-start-heading {
  margin: 0;
  color: var(--text-sec);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.shell-start-heading[hidden] {
  display: none;
}

.shell-start-recent {
  display: flex;
  gap: 8px;
}

.shell-start-recent[hidden],
.shell-start-grid[hidden],
.shell-start-results[hidden] {
  display: none;
}

.shell-start-recent-app {
  flex: 1 1 0;
  min-width: 0;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--shell-radius);
  background: var(--tint-04);
  color: var(--text-main);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.shell-start-recent-app[hidden] {
  display: none;
}

.shell-start-recent-app:hover {
  background: var(--shell-hover);
}

.shell-start-recent-app:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.shell-start-recent-tile {
  flex: none;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--tint, var(--tint-10));
}

.shell-start-recent-glyph {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--shell-ink);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shell-start-recent-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shell-start-grid,
.shell-start-results {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}

.shell-start-app {
  height: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: var(--shell-radius);
  background: transparent;
  color: var(--text-main);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.shell-start-app[hidden] {
  display: none;
}

.shell-start-app:hover {
  background: var(--shell-hover);
}

.shell-start-app:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.shell-start-app-tile {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--shell-tile-radius);
  background: var(--tint, var(--tint-10));
}

.shell-start-app-glyph {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: var(--shell-ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shell-start-app-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shell-start-no-results {
  margin: 0;
  padding: 16px 4px;
  color: var(--text-sec);
  font-size: 13px;
}

.shell-start-no-results[hidden] {
  display: none;
}

/* Search-provider results (stops, lines, ...): one section per provider under the app results. */
.shell-start-hits {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.shell-start-hits[hidden] {
  display: none;
}

.shell-start-hit-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.shell-start-hit {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px;
  box-sizing: border-box;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-main);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.shell-start-hit:hover {
  background: var(--shell-hover);
}

.shell-start-hit:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.shell-start-hit-tile {
  flex: none;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--tint, var(--tint-10));
}

.shell-start-hit-tile:empty {
  background: var(--tint-08);
}

.shell-start-hit-glyph {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--shell-ink);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shell-start-hit-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.shell-start-hit-label,
.shell-start-hit-subtitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shell-start-hit-subtitle {
  font-size: 12px;
  color: var(--text-sec);
}

.shell-start-hit-subtitle[hidden] {
  display: none;
}

/* Phone list (narrow only) */
.shell-start-phone {
  display: none;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  overflow-y: auto;
}

.shell-start-phone[hidden] {
  display: none;
}

.shell-start-phone-row {
  flex: none;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--shell-radius);
  background: transparent;
  color: var(--text-main);
  font: inherit;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.shell-start-phone-row[hidden] {
  display: none;
}

.shell-start-phone-row:hover {
  background: var(--shell-hover);
}

.shell-start-phone-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.shell-start-phone-tile {
  flex: none;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--shell-tile-radius);
  background: var(--tint, var(--tint-10));
}

.shell-start-phone-glyph {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: var(--shell-ink);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shell-start-phone-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ========================= Properties window ========================= */

.shell-prop {
  box-sizing: border-box;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  color: var(--text-main);
  background: var(--bg);
}

.shell-prop-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--border);
}

.shell-prop-tile {
  flex: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--shell-tile-radius);
  background: var(--tint, var(--accent));
}

.shell-prop-glyph {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--shell-ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shell-prop-names {
  min-width: 0;
}

.shell-prop-name {
  font-size: 16px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.shell-prop-subtitle {
  font-size: 13px;
  color: var(--text-sec);
}

.shell-prop-subtitle[hidden] {
  display: none;
}

.shell-prop-content {
  flex: 1 1 auto;
  min-height: 0;
  padding: 12px 16px;
}

.shell-prop-section {
  margin-bottom: 16px;
}

.shell-prop-heading {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-sec);
}

.shell-prop-grid {
  margin: 0;
  display: block;
}

.shell-prop-row {
  display: grid;
  grid-template-columns: minmax(90px, 36%) minmax(0, 1fr);
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--tint-06);
}

.shell-prop-label {
  margin: 0;
  font-size: 13px;
  color: var(--text-sec);
}

.shell-prop-value {
  margin: 0;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.shell-prop-footer {
  flex: none;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
}

/* --------------------------- phone (<= 768 px) ----------------------- */

/*
 * The shell calls `windows.setNarrow(true)`, `desktop.setNarrow(true)`, `taskbar.setNarrow(true)` and
 * `startMenu.setNarrow(true)` at 768 px or less; these rules are keyed off `.is-narrow` so they follow
 * that state (and so a test can drive them without a real viewport). A thumb needs 44 px targets.
 * The window title bar grows to 44 px, the taskbar stays 48 px with taller buttons.
 */
@media (max-width: 768px) {
  :root {
    --shell-titlebar-h: 44px;
    --shell-tile-radius: 12px;
  }
}

/* Phone home: four equal columns, free positions ignored. */
.shell-desktop.is-narrow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-content: start;
  row-gap: 12px;
  padding: 24px 12px 12px;
}

.shell-desktop.is-narrow .shell-icon {
  /* Must stay `static`: the wide layout writes inline left/top that CSS has to keep ignoring here.
     A static grid item paints in the in-flow step, BELOW the absolutely positioned
     `.shell-wallpaper`; `z-index` lifts the whole icon above it without touching the geometry. */
  position: static;
  z-index: 1;
  width: auto;
  height: 92px;
  justify-content: center;
  padding: 0;
  gap: 8px;
}

.shell-desktop.is-narrow .shell-icon-tile {
  width: 56px;
  height: 56px;
  border-radius: 12px;
}

.shell-desktop.is-narrow .shell-glyph {
  width: 30px;
  height: 30px;
}

.shell-desktop.is-narrow .shell-icon-label {
  font-size: 12px;
}

/* A full-screen phone app: a 44 px title bar with only minimize and close. */
.shell-window-layer.is-narrow .shell-titlebar {
  flex-basis: var(--shell-titlebar-h);
  height: var(--shell-titlebar-h);
  padding: 0 2px 0 12px;
  background: var(--tint-06);
}

.shell-window-layer.is-narrow .shell-title-icon {
  width: 22px;
  height: 22px;
}

.shell-window-layer.is-narrow .shell-title-icon .shell-glyph {
  width: 14px;
  height: 14px;
}

.shell-window-layer.is-narrow .shell-window-title {
  font-size: 15px;
  color: var(--text-main);
}

.shell-window-layer.is-narrow .shell-window-btn {
  width: 44px;
  height: 40px;
}

/* A folder window that is full screen shows four columns, like the phone home. */
.shell-window-layer.is-narrow .shell-folder-content {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.shell-bar.is-narrow .shell-bar-start {
  width: 44px;
  height: 40px;
  padding: 0;
  justify-content: center;
}

.shell-bar.is-narrow .shell-bar-start-label {
  display: none;
}

.shell-bar.is-narrow .shell-bar-start-glyph {
  width: 22px;
  height: 22px;
}

.shell-bar.is-narrow .shell-bar-win {
  width: 46px;
  height: 42px;
}

.shell-bar.is-narrow .shell-bar-win-tile {
  width: 28px;
  height: 28px;
}

.shell-bar.is-narrow .shell-bar-win-glyph {
  width: 16px;
  height: 16px;
}

.shell-bar.is-narrow .shell-bar-clock {
  font-size: 13px;
  font-weight: 600;
}

.shell-bar.is-narrow .shell-bar-clock-date {
  display: none;
}

/* The window list is the only flyout on a phone (no hover): a panel the width of the screen. */
.shell-bar.is-narrow .shell-bar-flyout {
  left: 8px;
  right: 8px;
  width: auto;
}

.shell-bar.is-narrow .shell-bar-list-main {
  min-height: 48px;
  font-size: 15px;
}

.shell-bar.is-narrow .shell-bar-list-close {
  width: 44px;
  height: 44px;
}

/* The narrow Start is a full-screen sheet above the bar. */
.shell-start-root.is-narrow {
  left: 0;
  right: 0;
  top: 0;
  bottom: var(--shell-bar-h);
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
}

.shell-start-root.is-narrow .shell-start-search-wrap {
  padding: 12px;
}

.shell-start-root.is-narrow .shell-start-search-field {
  height: 46px;
}

.shell-start-root.is-narrow .shell-start-search-input {
  font-size: 16px;
}

.shell-start-root.is-narrow .shell-start-search-chip {
  display: none;
}

.shell-start-root.is-narrow .shell-start-body {
  display: none;
}

.shell-start-root.is-narrow .shell-start-phone {
  display: flex;
}

.shell-start-root.is-narrow .shell-start-hits {
  padding-top: 8px;
}

.shell-start-root.is-narrow .shell-start-hit {
  min-height: 52px;
  font-size: 16px;
}

.shell-start-root.is-narrow .shell-start-hit-subtitle {
  font-size: 13px;
}

.shell-window-layer.is-narrow .shell-prop-row {
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
}

/* ========================= reduced motion ========================= */

/* No shell animation at all, including the minimize flight (which `prefersReducedMotion()` in
   motion.js also skips in script). */
@media (prefers-reduced-motion: reduce) {
  .shell *,
  .shell-context-menu,
  .shell-sheet,
  .shell-sheet-backdrop,
  .shell-start-root,
  .shell-start-root * {
    animation: none !important;
    transition: none !important;
  }
}