/* ---------- Design tokens ----------
   Radii, spacing and type are shared. Colors and shadows come in two sets,
   light (below) and dark, plus overrides for Increase Contrast and Reduce Transparency. */

:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", sans-serif;
  --sidebar-w: 230px;
  --row-h: 30px;

  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;

  --ease-out: cubic-bezier(0.2, 0.9, 0.3, 1);

  /* Light */
  --accent: #0064d6; /* text, icons and outlines */
  --accent-fill: #0064d6; /* buttons and selections with white text */
  --on-accent: #ffffff;
  --accent-soft: rgba(0, 100, 214, 0.13);
  --selection: var(--accent-fill);
  --selection-inactive: rgba(0, 0, 0, 0.08);
  --text: rgba(0, 0, 0, 0.87);
  --text-2: rgba(0, 0, 0, 0.6);
  --text-3: rgba(0, 0, 0, 0.3);
  --content-bg: #ffffff;
  --surface: #f5f5f7;
  --sidebar-tint: rgba(250, 244, 238, 0.4);
  --sidebar-solid: #f1eeeb;
  --separator: rgba(0, 0, 0, 0.08);
  --hover: rgba(0, 0, 0, 0.05);
  --active: rgba(0, 0, 0, 0.1);
  --control-bg: rgba(0, 0, 0, 0.05);
  --field-bg: #ffffff;
  --field-border: rgba(0, 0, 0, 0.14);
  --sheet-bg: #f5f5f7;
  --group-bg: #ffffff;
  --group-border: rgba(0, 0, 0, 0.09);
  --popup-bg: rgba(0, 0, 0, 0.06);
  --switch-off: rgba(0, 0, 0, 0.12);
  --btn-bg: rgba(0, 0, 0, 0.07);
  --btn-primary: #1a7cf6;
  --menu-bg: rgba(250, 250, 250, 0.82);
  --menu-solid: #f7f7f7;
  --backdrop: rgba(0, 0, 0, 0.12);
  --folder: #2b8ff5;
  --danger: #d70015;
  --ok: #1d7f36;
  --dot-idle: rgba(0, 0, 0, 0.22);
  --dot-ok: #30b350;

  --ft-image: #a54bd6;
  --ft-video: #e5254c;
  --ft-audio: #e07800;
  --ft-archive: #9a7b52;
  --ft-code: #4b5cc4;
  --ft-text: #6e6e73;
  --ft-pdf: #e0352b;
  --ft-sheet: #22943f;
  --ft-doc: #2b6fde;
  --file-page: #ffffff;
  --file-edge: rgba(0, 0, 0, 0.3);
  --file-fold: #ececee;
  --stripe: rgba(0, 0, 0, 0.028);

  --shadow-sm: 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(0, 0, 0, 0.14);
  --shadow-lg: 0 0 0 0.5px rgba(0, 0, 0, 0.14), 0 24px 64px rgba(0, 0, 0, 0.22);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #3d9bff;
    --accent-fill: #0a6fe0;
    --accent-soft: rgba(61, 155, 255, 0.2);
    --selection-inactive: rgba(255, 255, 255, 0.1);
    --text: rgba(255, 255, 255, 0.9);
    --text-2: rgba(255, 255, 255, 0.6);
    --text-3: rgba(255, 255, 255, 0.28);
    --content-bg: #1c1c1e;
    --surface: #242426;
    --sidebar-tint: rgba(46, 36, 30, 0.38);
    --sidebar-solid: #262321;
    --separator: rgba(255, 255, 255, 0.08);
    --hover: rgba(255, 255, 255, 0.07);
    --active: rgba(255, 255, 255, 0.13);
    --control-bg: rgba(255, 255, 255, 0.08);
    --field-bg: rgba(255, 255, 255, 0.06);
    --field-border: rgba(255, 255, 255, 0.14);
    --sheet-bg: #2a2a2c;
  --group-bg: rgba(255, 255, 255, 0.045);
  --group-border: rgba(255, 255, 255, 0.08);
  --popup-bg: rgba(255, 255, 255, 0.1);
  --switch-off: rgba(255, 255, 255, 0.16);
    --group-bg: rgba(255, 255, 255, 0.045);
    --group-border: rgba(255, 255, 255, 0.08);
    --popup-bg: rgba(255, 255, 255, 0.1);
    --switch-off: rgba(255, 255, 255, 0.16);
    --btn-bg: rgba(255, 255, 255, 0.13);
    --btn-primary: #0a84ff;
    --menu-bg: rgba(44, 44, 46, 0.8);
    --menu-solid: #2c2c2e;
    --backdrop: rgba(0, 0, 0, 0.3);
    --folder: #4aa6ff;
    --danger: #ff6961;
    --ok: #3ddc62;
    --dot-idle: rgba(255, 255, 255, 0.25);
    --dot-ok: #32d74b;

    --ft-image: #d38cff;
    --ft-video: #ff6482;
    --ft-audio: #ffad42;
    --ft-archive: #c9a879;
    --ft-code: #8c9bff;
    --ft-text: #a1a1a6;
    --ft-pdf: #ff6b61;
    --ft-sheet: #4fd27a;
    --ft-doc: #5fa8ff;
    --file-page: #e8e8ea;
    --file-edge: rgba(0, 0, 0, 0.5);
    --file-fold: #c7c7cc;
    --stripe: rgba(255, 255, 255, 0.035);

    --shadow-sm: 0 0 0 0.5px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 0 0 0.5px rgba(0, 0, 0, 0.5), inset 0 0 0 0.5px rgba(255, 255, 255, 0.1), 0 10px 30px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 0 0 0.5px rgba(0, 0, 0, 0.6), inset 0 0 0 0.5px rgba(255, 255, 255, 0.1), 0 24px 64px rgba(0, 0, 0, 0.5);
  }
}
:root[data-theme="dark"] {
  --accent: #3d9bff;
  --accent-fill: #0a6fe0;
  --accent-soft: rgba(61, 155, 255, 0.2);
  --selection-inactive: rgba(255, 255, 255, 0.1);
  --text: rgba(255, 255, 255, 0.9);
  --text-2: rgba(255, 255, 255, 0.6);
  --text-3: rgba(255, 255, 255, 0.28);
  --content-bg: #1c1c1e;
  --surface: #242426;
  --sidebar-tint: rgba(46, 36, 30, 0.38);
  --sidebar-solid: #262321;
  --separator: rgba(255, 255, 255, 0.08);
  --hover: rgba(255, 255, 255, 0.07);
  --active: rgba(255, 255, 255, 0.13);
  --control-bg: rgba(255, 255, 255, 0.08);
  --field-bg: rgba(255, 255, 255, 0.06);
  --field-border: rgba(255, 255, 255, 0.14);
  --sheet-bg: #2a2a2c;
  --btn-bg: rgba(255, 255, 255, 0.13);
  --btn-primary: #0a84ff;
  --menu-bg: rgba(44, 44, 46, 0.8);
  --menu-solid: #2c2c2e;
  --backdrop: rgba(0, 0, 0, 0.3);
  --folder: #4aa6ff;
  --danger: #ff6961;
  --ok: #3ddc62;
  --dot-idle: rgba(255, 255, 255, 0.25);
  --dot-ok: #32d74b;

  --ft-image: #d38cff;
  --ft-video: #ff6482;
  --ft-audio: #ffad42;
  --ft-archive: #c9a879;
  --ft-code: #8c9bff;
  --ft-text: #a1a1a6;
  --ft-pdf: #ff6b61;
  --ft-sheet: #4fd27a;
  --ft-doc: #5fa8ff;
  --file-page: #e8e8ea;
  --file-edge: rgba(0, 0, 0, 0.5);
  --file-fold: #c7c7cc;
  --stripe: rgba(255, 255, 255, 0.035);

  --shadow-sm: 0 0 0 0.5px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 0 0 0.5px rgba(0, 0, 0, 0.5), inset 0 0 0 0.5px rgba(255, 255, 255, 0.1), 0 10px 30px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 0 0 0.5px rgba(0, 0, 0, 0.6), inset 0 0 0 0.5px rgba(255, 255, 255, 0.1), 0 24px 64px rgba(0, 0, 0, 0.5);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Increase Contrast: stronger text, lines and selections. */
@media (prefers-contrast: more) {
  :root {
    --text: #000;
    --text-2: rgba(0, 0, 0, 0.75);
    --text-3: rgba(0, 0, 0, 0.5);
    --separator: rgba(0, 0, 0, 0.3);
    --field-border: rgba(0, 0, 0, 0.5);
    --accent-soft: var(--accent-fill);
    --selection-inactive: rgba(0, 0, 0, 0.2);
  }
  :root[data-theme="dark"] {
    --text: #fff;
    --text-2: rgba(255, 255, 255, 0.8);
    --text-3: rgba(255, 255, 255, 0.5);
    --separator: rgba(255, 255, 255, 0.35);
    --field-border: rgba(255, 255, 255, 0.55);
    --selection-inactive: rgba(255, 255, 255, 0.25);
    --accent-soft: var(--accent-fill);
  }
  .side-item.selected, .side-item.selected .ico, .side-item.selected .kbd { color: var(--on-accent) !important; }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --text: #fff;
    --text-2: rgba(255, 255, 255, 0.8);
    --text-3: rgba(255, 255, 255, 0.5);
    --separator: rgba(255, 255, 255, 0.35);
    --field-border: rgba(255, 255, 255, 0.55);
    --selection-inactive: rgba(255, 255, 255, 0.25);
    --accent-soft: var(--accent-fill);
  }
}

/* Reduce Transparency, and platforms without native vibrancy: solid surfaces. */
@media (prefers-reduced-transparency: reduce) {
  :root { --sidebar-tint: var(--sidebar-solid); --menu-bg: var(--menu-solid); }
}
:root.no-vibrancy { --sidebar-tint: var(--sidebar-solid); --menu-bg: var(--menu-solid); }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  /* Transparent so the native sidebar vibrancy shows through. */
  background: transparent;
  font: 13px/1.35 var(--font);
  color: var(--text);
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
  -webkit-font-smoothing: antialiased;
}

body { display: flex; }

button { font: inherit; color: inherit; }
input, select { font: inherit; color: inherit; }
svg { display: block; flex-shrink: 0; }

/* Visible focus for keyboard navigation only. */
button:focus-visible, .crumb:focus-visible, [tabindex]:not(.list):focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}
.list:focus-visible { outline: 0; }

kbd, .kbd {
  font: 12px var(--font);
  color: var(--text-3);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* ---------- Sidebar ---------- */

#sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--sidebar-tint);
}

.titlebar-space { height: 52px; flex-shrink: 0; }

#sidebar-scroll { flex: 1; overflow-y: auto; padding: 0 var(--sp-3) var(--sp-3); }

.section-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-2);
  padding: var(--sp-2) 10px var(--sp-1);
}

#fav-section { margin-bottom: var(--sp-3); }
#fav-section.no-favs { display: none; }
body.dragging #fav-section.no-favs, body.native-drag #fav-section.no-favs { display: block; }

#sync-section { margin-bottom: var(--sp-3); }
#sync-section[hidden] { display: none; }
#backup-section { margin-top: var(--sp-3); }
/* A + that shows when hovering the sidebar, like Finder's section buttons. */
#backup-section .section-title { display: flex; align-items: center; }
#backup-section .section-title span { flex: 1; }
.section-add { width: 18px; height: 18px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--r-xs); background: none; color: var(--text-2); opacity: 0; transition: opacity 0.12s ease; }
.section-add svg { width: 12px; height: 12px; }
#sidebar:hover .section-add, .section-add:focus-visible { opacity: 1; }
.section-add:hover { background: var(--hover); color: var(--text); }
.side-item.ghost { color: var(--text-2); cursor: default; }
.side-item.ghost .ico, .side-item.ghost svg { color: var(--text-2); }

#fav-list, #sync-list, #backup-list, #conn-list, #conn-list ul, #local-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
#conn-list ul { margin-top: 2px; }

.side-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  height: 32px;
  padding: 0 10px 0 4px;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  text-align: left;
  white-space: nowrap;
  transition: background-color 0.12s ease;
}
.side-item.child { padding-left: 28px; height: 30px; }
.side-item[data-fav]:hover, .side-item[data-sync]:hover, .side-item[data-backup]:hover, .side-item[data-conn]:hover, .side-item[data-place]:hover, button.side-item:hover { background: var(--hover); }
.side-item.selected, .side-item.selected:hover { background: var(--accent-soft); }
.side-item .label { overflow: hidden; text-overflow: ellipsis; flex: 1; }
.side-item .note { color: var(--text-2); font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
.side-item .ico { color: var(--accent); }
.side-item .err { color: var(--danger); }
.side-item.invalid { opacity: 0.45; }
.side-item .kbd { margin-left: auto; }
.side-item .badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--accent-fill);
  color: var(--on-accent);
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}

/* Connection status: grey until its buckets have loaded, then green (red on failure). */
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dot-idle); flex-shrink: 0; }
.dot.ok { background: var(--dot-ok); }
.dot.err { background: var(--danger); }

/* Where a dragged folder or favorite will be put among the favorites. */
.side-item.insert-before, .side-item.insert-after { position: relative; }
.side-item.insert-before::before, .side-item.insert-after::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  height: 2px;
  border-radius: 1px;
  background: var(--accent);
}
.side-item.insert-before::before { top: -2px; }
.side-item.insert-after::after { bottom: -2px; }
#fav-section.drop-target { box-shadow: inset 0 0 0 2px var(--accent); border-radius: var(--r-md); }

.disclosure {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  background: none;
  color: var(--text-2);
  border-radius: var(--r-xs);
  transition: transform 0.15s ease;
}
.disclosure.open { transform: rotate(90deg); }
.disclosure.hidden { visibility: hidden; }

.sidebar-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
}
.sidebar-footer .side-item { flex: 1; min-width: 0; padding-left: 10px; color: var(--text); }
.sidebar-footer .side-item .ico { color: var(--text-2); }

#splitter {
  /* 1px line with 3px of grab area on each side. */
  width: 7px;
  margin: 0 -3px;
  padding: 0 3px;
  background-clip: content-box;
  background-color: var(--separator);
  cursor: col-resize;
  z-index: 2;
  flex-shrink: 0;
}

/* ---------- Main ---------- */

#main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--content-bg);
}

#toolbar {
  height: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 var(--sp-3) 0 10px;
}

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

#title {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
#title-text {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toolbar-right { display: flex; align-items: center; gap: 6px; }

.icon-btn {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  display: grid;
  place-items: center;
  color: var(--text-2);
  padding: 0;
  transition: background-color 0.12s ease;
}
.icon-btn:hover:not(:disabled) { background: var(--hover); color: var(--text); }
.icon-btn:active:not(:disabled) { background: var(--active); }
.icon-btn:disabled { color: var(--text-3); }

#search {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  width: 210px;
  padding: 0 10px;
  border-radius: var(--r-md);
  background: var(--control-bg);
  color: var(--text-2);
}
#search:focus-within { box-shadow: var(--focus-ring); }
#search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  -webkit-appearance: none;
}
#search input::-webkit-search-cancel-button { filter: grayscale(1); }
.search-kbd { flex-shrink: 0; }
#search:focus-within .search-kbd, #search input:not(:placeholder-shown) ~ .search-kbd { display: none; }

#spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--text-3);
  border-top-color: var(--text-2);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.side-item .spin {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--text-3);
  border-top-color: var(--text-2);
  animation: spin 0.8s linear infinite;
}

/* ---------- List ---------- */

.list-header, .row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 170px 90px 150px;
  align-items: center;
}

/* Finder's search scope bar. */
.scope-bar {
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 var(--sp-3);
  font-size: 12px;
  color: var(--text-2);
}
.scope-bar[hidden] { display: none; }
.scope-label { margin-right: 6px; font-weight: 500; }
.scope-bar .scope {
  height: 24px;
  max-width: 240px;
  padding: 0 var(--sp-3);
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scope-bar .scope:hover { background: var(--hover); }
.scope-bar .scope.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.scope-bar .spacer { flex: 1; }
.scope-progress { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.scope-progress .err { color: var(--danger); }
.link-btn { border: 0; padding: 0 2px; background: none; color: var(--accent); font-size: 12px; }

.list-header {
  height: 30px;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-2);
  padding: 0 var(--sp-3);
  box-shadow: inset 0 -1px 0 var(--separator);
}
.list-header .col {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0 10px;
  overflow: hidden;
  white-space: nowrap;
}
.list-header .col:first-child { padding-left: 38px; }
.list-header .col.num { justify-content: flex-end; }
.list-header .col:hover { color: var(--text); }
.list-header .col.sorted { color: var(--text); font-weight: 600; }

.list {
  flex: 1;
  overflow-y: auto;
  position: relative;
  outline: 0;
  padding: var(--sp-1) var(--sp-3);
}

.list-spacer { width: 1px; }
.list-rows { position: absolute; top: 0; left: var(--sp-3); right: var(--sp-3); margin-top: var(--sp-1); }

.row {
  height: var(--row-h);
  border-radius: var(--r-md);
  white-space: nowrap;
}
.row > div {
  padding: 0 10px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row .name { display: flex; align-items: center; gap: var(--sp-2); padding-left: var(--sp-2); }
.row .name span { overflow: hidden; text-overflow: ellipsis; }
.row .dim { color: var(--text-2); }
.row .num { text-align: right; font-variant-numeric: tabular-nums; }
/* Alternating rows, continued below the last item like Finder's list view. */
.row.alt { background: var(--stripe); }
.row.filler { pointer-events: none; }
.row:hover { background: var(--hover); }
.row.selected { background: var(--selection-inactive); }
.list:focus .row.selected { background: var(--selection); color: var(--on-accent); }
.list:focus .row.selected .dim { color: rgba(255, 255, 255, 0.92); }
.list:focus .row.selected .ico-folder, .list:focus .row.selected .ico-bucket { color: var(--on-accent); }
.list.loading .list-rows { opacity: 0.5; }

/* Inline name editing, laid over the row like Finder's field editor. */
.rename-field {
  position: absolute;
  z-index: 1;
  height: calc(var(--row-h) - 6px);
  padding: 0 var(--sp-1);
  font: inherit;
  color: var(--text);
  background: var(--field-bg);
  border: 0;
  border-radius: var(--r-xs);
  outline: 0;
  box-shadow: var(--focus-ring), 0 0 0 1px var(--accent);
}

.ico-folder { color: var(--folder); }
.ico-file { color: var(--ft-text); }
.ico-file .page { fill: var(--file-page); stroke: var(--file-edge); stroke-width: 0.8px; vector-effect: non-scaling-stroke; }
.ico-file .fold { fill: var(--file-fold); stroke: var(--file-edge); stroke-width: 0.8px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.ico-file text { font-family: var(--font); letter-spacing: 0.02em; }
.ico-file.ft-image { color: var(--ft-image); }
.ico-file.ft-video { color: var(--ft-video); }
.ico-file.ft-audio { color: var(--ft-audio); }
.ico-file.ft-archive { color: var(--ft-archive); }
.ico-file.ft-code { color: var(--ft-code); }
.ico-file.ft-pdf { color: var(--ft-pdf); }
.ico-file.ft-sheet { color: var(--ft-sheet); }
.ico-file.ft-doc { color: var(--ft-doc); }
.ico-bucket { color: var(--accent); }

.empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 40px;
  color: var(--text-2);
  background: var(--content-bg);
}
.empty[hidden], #menu[hidden], #spinner[hidden], #transfers:empty { display: none; }
.empty h2 { margin: 0; font-size: 17px; font-weight: 600; color: var(--text); }
.empty p { margin: 0; max-width: 460px; -webkit-user-select: text; user-select: text; cursor: text; }
.empty .big { color: var(--text-3); margin-bottom: 4px; }

/* ---------- Path bar (breadcrumbs above the list) ---------- */

.pathbar {
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-4) 0 var(--sp-3);
  font-size: 12px;
  color: var(--text-2);
}
.crumbs { flex: 1; min-width: 0; display: flex; align-items: center; overflow: hidden; font-size: 14px; }
.crumb {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 var(--sp-2);
  border-radius: var(--r-md);
  white-space: nowrap;
  color: var(--text-2);
  transition: background-color 0.12s ease;
}
.crumb:hover { background: var(--hover); color: var(--text); }
.crumb.current { color: var(--text); font-weight: 600; }
.crumb .ico, .crumb .ico-disk { color: var(--accent); }
.crumb-sep { color: var(--text-3); margin: 0 1px; }
.crumb-more { color: var(--text-3); transform: rotate(90deg); margin-left: -2px; }
.crumb.open { background: var(--active); color: var(--text); }
.status { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pathbar { cursor: text; }
.pathbar .crumb, .pathbar .status { cursor: default; }
.path-field { flex: 1; height: 28px; font-size: 14px; }
.crumbs:has(> .path-field) { overflow: visible; }

/* ---------- Tabs ---------- */

#tabs {
  height: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0 var(--sp-3) var(--sp-1);
}
#tabs[hidden] { display: none; }
.tab {
  flex: 1 1 0;
  min-width: 0;
  max-width: 240px;
  height: 30px;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 6px 0 var(--sp-3);
  border-radius: var(--r-md);
  color: var(--text-2);
  transition: background-color 0.12s ease;
}
.tab:hover { background: var(--hover); }
.tab.on { background: var(--control-bg); color: var(--text); font-weight: 500; }
.tab-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-close {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--r-xs);
  background: none;
  color: var(--text-2);
  visibility: hidden;
}
.tab:hover .tab-close, .tab.on .tab-close { visibility: visible; }
.tab-close:hover { background: var(--active); color: var(--text); }
.tab-new { width: 26px; height: 26px; flex-shrink: 0; }

/* ---------- Command palette ---------- */

#palette {
  position: fixed;
  inset: 0;
  z-index: 25;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 14vh;
  background: var(--backdrop);
}
#palette[hidden] { display: none; }
.pal-box {
  width: min(640px, calc(100vw - 40px));
  max-height: 62vh;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-xl);
  background: var(--menu-bg);
  -webkit-backdrop-filter: blur(40px) saturate(1.8);
  backdrop-filter: blur(40px) saturate(1.8);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: sheet-in 0.16s var(--ease-out);
}
.pal-input {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 var(--sp-4);
  color: var(--text-2);
  border-bottom: 1px solid var(--separator);
}
.pal-input svg { width: 18px; height: 18px; }
/* Explicit height and line-height, or WebKit starts with a clipped caret. */
.pal-input input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; font-size: 17px; line-height: normal; color: var(--text); }
.pal-input kbd { flex-shrink: 0; padding: 2px 6px; border-radius: var(--r-sm); background: var(--control-bg); }
.pal-list { overflow-y: auto; padding: 6px; }
.pal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 10px;
  border-radius: var(--r-md);
  white-space: nowrap;
}
.pal-row.on { background: var(--accent-fill); color: var(--on-accent); }
.pal-icon { width: 18px; display: grid; place-items: center; color: var(--text-2); }
.pal-icon .ico, .pal-icon .ico-folder, .pal-icon .ico-bucket { color: var(--accent); }
.pal-row.on .pal-icon, .pal-row.on .pal-icon * { color: var(--on-accent) !important; }
.pal-title { flex-shrink: 0; max-width: 45%; overflow: hidden; text-overflow: ellipsis; }
.pal-title mark { background: none; color: var(--accent); font-weight: 700; }
.pal-row.on .pal-title mark { color: var(--on-accent); text-decoration: underline; text-underline-offset: 2px; }
.pal-path { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12px; color: var(--text-3); }
.pal-row.on .pal-path { color: rgba(255, 255, 255, 0.75); }
.pal-chip {
  flex-shrink: 0;
  padding: 2px var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--control-bg);
  font-size: 11px;
  color: var(--text-2);
}
.pal-row.on .pal-chip { background: rgba(255, 255, 255, 0.2); color: var(--on-accent); }
.pal-enter { flex-shrink: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.85); }
.pal-none { padding: 20px; text-align: center; color: var(--text-2); }

/* ---------- Buttons ---------- */

.btn {
  height: 28px;
  min-width: 76px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-md);
  border: 0;
  background: var(--btn-bg);
  font-size: 13px;
  transition: filter 0.12s ease, background 0.12s ease;
}
.btn:hover { filter: brightness(0.97); }
.btn:active { filter: brightness(0.9); }
.btn.primary {
  background: var(--btn-primary);
  color: var(--on-accent);
  font-weight: 500;
}
.btn.primary:hover { filter: brightness(1.06); }
.btn.primary:active { filter: brightness(0.92); }
.btn.danger { color: var(--danger); }
.btn:disabled { opacity: 0.5; filter: none; }
.btn:focus-visible { box-shadow: var(--focus-ring); }

/* ---------- Sheet ---------- */

#sheet-backdrop {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  z-index: 10;
  background: var(--backdrop);
}
#sheet-backdrop[hidden] { display: none; }

#sheet {
  margin-top: 52px;
  width: 520px;
  max-height: calc(100vh - 72px);
  overflow-y: auto;
  background: var(--sheet-bg);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-5) var(--sp-5) 20px;
  animation: sheet-in 0.22s var(--ease-out);
}
#sheet.small { width: 380px; }
#sheet.static { animation: none; }
@keyframes sheet-in {
  from { transform: translateY(-16px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* Update sheets: app icon to the left, like a native alert. */
.sheet-app { display: grid; grid-template-columns: 64px 1fr; gap: 20px; }
.sheet-app > img { width: 64px; height: 64px; }
.sheet-app > div { min-width: 0; }
.sheet-app #form-error { white-space: pre-line; }

#sheet h1 { font-size: 15px; font-weight: 700; margin: 0 0 var(--sp-4); }
#sheet p.msg { margin: 0 0 var(--sp-4); color: var(--text-2); }
#sheet .release-notes {
  max-height: 180px;
  overflow-y: auto;
  margin: 0 0 var(--sp-4);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--field-bg);
  box-shadow: 0 0 0 0.5px var(--field-border);
  font-size: 12px;
  white-space: pre-wrap;
  -webkit-user-select: text;
  user-select: text;
}
#update-progress { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--text-2); font-variant-numeric: tabular-nums; }
#update-progress[hidden] { display: none; }
#update-progress progress { flex: 1; }

.segmented {
  display: flex;
  padding: 2px;
  border-radius: var(--r-md);
  background: var(--control-bg);
  margin-bottom: 18px;
}
.segmented button {
  flex: 1;
  height: 26px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  font-size: 12px;
  white-space: nowrap;
}
.segmented button.on {
  background: var(--field-bg);
  box-shadow: var(--shadow-sm);
  font-weight: 500;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .segmented button.on { background: rgba(255, 255, 255, 0.2); }
}
:root[data-theme="dark"] .segmented button.on { background: rgba(255, 255, 255, 0.2); }

.form-grid {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: var(--sp-3) 10px;
  align-items: center;
}
.form-grid > label { text-align: right; }
.form-grid .hint { grid-column: 2; margin-top: -6px; font-size: 11px; color: var(--text-2); }
.form-grid .check { grid-column: 2; display: flex; align-items: center; gap: 6px; }

.field {
  height: 28px;
  width: 100%;
  padding: 0 var(--sp-2);
  border: 0;
  border-radius: var(--r-sm);
  background: var(--field-bg);
  box-shadow: 0 0 0 0.5px var(--field-border), inset 0 1px 1px rgba(0, 0, 0, 0.04);
  outline: 0;
  -webkit-user-select: text;
  user-select: text;
}
.field:focus { box-shadow: var(--focus-ring), 0 0 0 1px var(--accent); }
select.field { padding: 0 var(--sp-1); }

.sheet-footer {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}
.sheet-footer .spacer { flex: 1; }
#test-result { font-size: 11px; color: var(--text-2); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#test-result.ok { color: var(--ok); }
#test-result.err { color: var(--danger); white-space: normal; }
#form-error { color: var(--danger); font-size: 12px; margin-top: var(--sp-3); -webkit-user-select: text; user-select: text; }

/* ---------- Context menu ---------- */

#menu {
  position: fixed;
  z-index: 20;
  min-width: 190px;
  padding: 5px;
  border-radius: var(--r-lg);
  background: var(--menu-bg);
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  backdrop-filter: blur(30px) saturate(1.8);
  box-shadow: var(--shadow-md);
}
#menu button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  font-size: 13px;
}
#menu button:hover { background: var(--accent-fill); color: var(--on-accent); }
#menu.checks button { position: relative; padding-left: 26px; }
#menu.checks button.indent { padding-left: 40px; }
#menu button.checked::before { content: "✓"; position: absolute; left: 10px; font-weight: 600; }
#menu hr { border: 0; border-top: 1px solid var(--separator); margin: 5px 6px; }

/* ---------- Panes ---------- */

#panes { flex: 1; min-height: 0; display: flex; }
.pane { flex: 1; min-width: 0; display: flex; flex-direction: column; container-type: inline-size; }
@container (max-width: 620px) {
  .list-header, .row { grid-template-columns: minmax(120px, 1fr) 150px 80px; }
  .list-header > :nth-child(4), .row > :nth-child(4) { display: none; }
}
@container (max-width: 400px) {
  .list-header, .row { grid-template-columns: minmax(100px, 1fr) 80px; }
  .list-header > :nth-child(2), .row > :nth-child(2) { display: none; }
}
.pane[hidden] { display: none; }
#pane-splitter {
  /* 1px line with 3px of grab area on each side. */
  width: 7px;
  margin: 0 -3px;
  padding: 0 3px;
  background-clip: content-box;
  background-color: var(--separator);
  cursor: col-resize;
  z-index: 2;
  flex-shrink: 0;
}
#pane-splitter[hidden] { display: none; }
#panes.split .pane:not(.active) .pathbar,
#panes.split .pane:not(.active) .list-header { opacity: 0.55; }
#panes.split .pane.active .crumb.current { color: var(--accent); }
.ico-disk { color: var(--text-2); }

/* ---------- Drag and drop ---------- */

body.dragging, body.dragging * { cursor: default !important; }
.drag-ghost {
  position: fixed;
  z-index: 30;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--r-md);
  background: var(--menu-bg);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-md);
  max-width: 280px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drag-ghost .badge {
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  border-radius: 9px;
  min-width: 18px;
  padding: 0 5px;
  text-align: center;
}
.row.drop-target, .side-item.drop-target, .crumb.drop-target {
  background: var(--accent-fill) !important;
  color: var(--on-accent);
}
.row.drop-target .dim, .row.drop-target .ico-folder, .side-item.drop-target .ico, .crumb.drop-target .ico { color: var(--on-accent); }
.list.drop-target { box-shadow: inset 0 0 0 2px var(--accent); border-radius: var(--r-md); }

#menu .menu-title {
  padding: 3px 10px 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Transfers ---------- */

#transfers {
  flex-shrink: 0;
  max-height: 160px;
  overflow-y: auto;
  background: var(--surface);
}
.transfer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4);
}
.transfer + .transfer { border-top: 1px solid var(--separator); }
.t-main { flex: 1; min-width: 0; }
.t-text { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-text.ok { color: var(--ok); }
.t-text.err { color: var(--danger); }
.t-bar { height: 4px; margin-top: 5px; border-radius: 2px; background: var(--control-bg); overflow: hidden; }
.t-bar > div { height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.2s; }
.transfer .btn { min-width: 0; height: 22px; padding: 0 10px; font-size: 12px; }
.t-bar.paused > div { background: var(--text-3); }
.transfer .icon-btn { width: 24px; height: 24px; }

#queue-btn { position: relative; }
#queue-btn[hidden] { display: none; }
#queue-btn[data-badge]:not([data-badge=""])::after {
  content: attr(data-badge);
  position: absolute;
  top: 0;
  right: -2px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--accent-fill);
  color: var(--on-accent);
  font-size: 10px;
  font-weight: 600;
  line-height: 15px;
  text-align: center;
}

/* The Transfers panel, a popover below the toolbar (like Safari's downloads). */
#queue {
  position: fixed;
  z-index: 15;
  right: 10px;
  width: 400px;
  max-width: calc(100vw - 20px);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  background: var(--menu-bg);
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  backdrop-filter: blur(30px) saturate(1.8);
  box-shadow: var(--shadow-md);
}
#queue[hidden] { display: none; }
.q-head { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3) var(--sp-4) 10px; border-bottom: 1px solid var(--separator); }
.q-head .t-text { color: var(--text-2); font-size: 11px; }
.q-list { overflow-y: auto; min-height: 0; padding: var(--sp-1); }
.q-row { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 10px; border-radius: var(--r-md); }
.q-row:hover { background: var(--hover); }
.q-icon { color: var(--accent); display: grid; place-items: center; }
.q-name { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-status { font-size: 11px; color: var(--text-2); margin-top: 3px; }
.q-row .icon-btn { width: 24px; height: 24px; flex-shrink: 0; }
.q-foot { display: flex; gap: 6px; padding: var(--sp-2) 10px; border-top: 1px solid var(--separator); }
.q-foot .spacer { flex: 1; }
.q-foot .btn { min-width: 0; height: 24px; padding: 0 10px; font-size: 12px; }
.form-grid .inline { grid-column: 2; display: flex; align-items: center; gap: 6px; }
.form-grid .inline select { width: auto; }

.failures { max-height: 300px; overflow: auto; font-size: 12px; -webkit-user-select: text; user-select: text; }
.failures div { padding: 4px 0; border-bottom: 1px solid var(--separator); }
.failures.uploads span { color: var(--text-2); }
.failures b { font-weight: 500; }
.failures span { color: var(--danger); display: block; }
.icon-btn.on { color: var(--accent); background: var(--accent-soft); }

/* ---------- Info / settings ---------- */

#sheet.wide { width: 600px; }
.segmented.compact { margin-bottom: 0; justify-self: start; min-width: 220px; }
.form-grid .value { overflow-wrap: anywhere; -webkit-user-select: text; user-select: text; cursor: text; }
.info-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.info-head h1 { margin: 0 !important; overflow-wrap: anywhere; }
.info-head .dim { color: var(--text-2); font-size: 12px; }
.info-grid { grid-template-columns: 120px 1fr; }
.link-row { display: flex; gap: 6px; align-items: center; min-width: 0; }
.link-row .field { flex: 1; min-width: 0; }
.link-row select.field { flex: 0 0 auto; width: auto; }
.link-row .btn { flex-shrink: 0; }
.hint-err { color: var(--danger); font-size: 12px; }
.link-row .spacer { flex: 1; }
.hint-err { color: var(--danger); font-size: 12px; }
#size-body { margin-top: 10px; }
.class-list div { display: flex; justify-content: space-between; gap: var(--sp-3); }
.class-list .dim, .link-row .dim { color: var(--text-2); }
.row .calc { opacity: 0.6; }
.ok-text { color: var(--ok); }

/* ---------- Quick Look ---------- */

#quicklook {
  position: fixed;
  z-index: 9;
  left: 50%;
  top: 50%;
  width: min(880px, calc(100vw - 80px));
  height: min(640px, calc(100vh - 100px));
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  background: var(--content-bg);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  animation: ql-in 0.18s var(--ease-out);
}
#quicklook[hidden] { display: none; }
@keyframes ql-in {
  from { transform: translate(-50%, -50%) scale(0.94); opacity: 0; }
}
.ql-bar {
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-2) 0 6px;
  background: var(--surface);
}
.ql-bar .icon-btn { width: 26px; height: 26px; }
.ql-bar .btn { min-width: 0; height: 24px; padding: 0 var(--sp-3); font-size: 12px; }
.ql-title { flex: 1; min-width: 0; text-align: center; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ql-body { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4); }
.ql-body img, .ql-body video { max-width: 100%; max-height: 100%; min-height: 0; object-fit: contain; }
.ql-body iframe { width: 100%; height: 100%; border: 0; }
.ql-body .ico-file { color: var(--text-3); }
.ql-body.text { align-items: stretch; justify-content: flex-start; gap: 0; }
.ql-body pre {
  flex: 1;
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  overflow: auto;
  font: 12px/1.5 ui-monospace, "SF Mono", Menlo, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  -webkit-user-select: text;
  user-select: text;
  cursor: text;
}
.ql-note { flex-shrink: 0; padding: 6px var(--sp-4); font-size: 11px; color: var(--text-2); border-top: 1px solid var(--separator); }
.ql-dim { color: var(--text-2); }
.ql-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px; text-align: center; max-width: 100%; }
.ql-card h2 { font-size: 15px; margin: 8px 0 0; overflow-wrap: anywhere; }
.ql-card .ql-dim { font-size: 12px; }
.ql-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }

/* ---------- Sync ---------- */

.field.area { height: auto; padding: 6px var(--sp-2); resize: vertical; font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.form-grid > label.top { align-self: start; padding-top: 6px; }
.sync-plan {
  max-height: 320px;
  overflow: auto;
  margin-bottom: var(--sp-2);
  border-radius: var(--r-md);
  box-shadow: 0 0 0 0.5px var(--field-border);
  background: var(--field-bg);
  font-size: 12px;
}
.sp-row { display: flex; align-items: center; gap: var(--sp-2); min-height: 28px; padding: 2px var(--sp-3); border-bottom: 1px solid var(--separator); }
.sp-row:last-child { border-bottom: 0; }
.sp-kind { flex: 0 0 96px; font-weight: 500; color: var(--accent); white-space: nowrap; }
.sp-kind.deleteLocal, .sp-kind.deleteRemote { color: var(--danger); }
.sp-kind.conflict { color: var(--warn, #c77c02); }
.sp-path { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -webkit-user-select: text; user-select: text; }
.sp-meta { flex-shrink: 0; color: var(--text-2); font-variant-numeric: tabular-nums; }
.sp-row select.field { flex: 0 0 auto; width: auto; height: 22px; font-size: 12px; }
.sp-more { padding: 6px var(--sp-3); color: var(--text-2); }
#sheet p.msg.warn { color: var(--danger); }

/* ---------- Backup ---------- */

#sheet h2 { font-size: 13px; font-weight: 600; margin: var(--sp-4) 0 var(--sp-2); overflow-wrap: anywhere; }
.bk-entries { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--sp-2); }
.bk-entry { display: flex; align-items: center; gap: var(--sp-2); min-height: 26px; padding: 2px var(--sp-2); border-radius: var(--r-sm); background: var(--field-bg); box-shadow: 0 0 0 0.5px var(--field-border); font-size: 12px; }
.bk-entry span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-entry .icon-btn { width: 22px; height: 22px; flex-shrink: 0; }
.form-grid .inline { white-space: nowrap; }
.form-grid .inline input.field { width: 70px; }
.form-grid .inline input[type=time].field { width: 96px; }
.form-grid .inline input.field.wide { width: auto; flex: 1; min-width: 0; }
.bk-runs .sp-row { gap: var(--sp-3); }
.bk-runs .ok { color: var(--ok); }
.bk-runs .err { color: var(--danger); }
.bk-runs .sp-path { flex: 0 0 150px; }
.bk-runs .sp-meta { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-runs .link-btn { flex-shrink: 0; }

/* ---------- Grouped form (backup sheet) ----------
   Like System Settings: rounded groups of rows, the label to the left and the control
   to the right, with an optional explanation under the label. */

.fg h2 { font-size: 13px; font-weight: 600; margin: 18px 2px 6px; }
.fg-box { background: var(--group-bg); border-radius: 10px; box-shadow: 0 0 0 0.5px var(--group-border); padding: 0 12px; }
.fg-row { display: flex; align-items: center; gap: var(--sp-4); min-height: 44px; padding: 7px 0; }
.fg-row + .fg-row, .fg-entry + .fg-entry { border-top: 1px solid var(--separator); }
.fg-row.column { flex-direction: column; align-items: stretch; gap: var(--sp-2); padding: 10px 0 12px; }
.fg-label { flex: 1; min-width: 0; }
.fg-hint { margin-top: 2px; font-size: 11px; color: var(--text-2); }
.fg-control { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
.fg-under { margin: 6px 2px 0; font-size: 11px; color: var(--text-2); }
.fg-under .link-btn { display: inline-flex; align-items: center; gap: 4px; padding: 0; }
.fg-under .link-btn svg { width: 12px; height: 12px; }

/* A pair of folders: two rows, with a remove button in the corner. */
.fg-entry { position: relative; }
.fg-entry .fg-row { min-height: 40px; }
.fg-entry .fg-label { flex: 0 0 36px; color: var(--text-2); }
.fg-entry .fg-control, .fg-pair .fg-control { flex: 1; }
.fg-pair .fg-label { flex: 0 0 90px; }
.fg-control .segmented { min-width: 0; flex-shrink: 0; }
.fg-control .segmented button { padding: 0 12px; }
.fg-entry:has(.fg-remove) .fg-control { margin-right: 30px; }
.fg-remove { position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 20px; height: 20px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--popup-bg); color: var(--text-2); }
.fg-remove:hover { background: var(--active); color: var(--text); }
.fg-remove svg { width: 9px; height: 9px; }
.fg-s3, .fg-path { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.fg-s3 > .ico, .fg-path > svg { flex-shrink: 0; }
.fg-s3 .popup { flex: 0 1 auto; max-width: 55%; }
.fg-s3 .tf { flex: 1; min-width: 60px; text-align: left; }
.fg-slash { color: var(--text-3); }
.fg-path .path { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fg-path .path.none { color: var(--text-3); }

/* Pop-up button: a filled rounded rect with up/down chevrons, as in AppKit. */
.popup {
  appearance: none;
  -webkit-appearance: none;
  height: 24px;
  max-width: 100%;
  padding: 0 26px 0 9px;
  border: 0;
  border-radius: var(--r-sm);
  outline: 0;
  background: var(--popup-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12'%3E%3Cpath d='M1 4.5 4 1.5l3 3M1 7.5l3 3 3-3' fill='none' stroke='%23888' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 9px center;
  font-size: 13px;
  text-overflow: ellipsis;
}
.popup:focus-visible { box-shadow: var(--focus-ring); }

/* Text field: white, thin border, right aligned in a row like System Settings. */
.tf {
  height: 24px;
  width: 220px;
  min-width: 0;
  padding: 0 7px;
  border: 0;
  border-radius: 5px;
  outline: 0;
  background: var(--field-bg);
  box-shadow: 0 0 0 0.5px var(--field-border), inset 0 0.5px 1px rgba(0, 0, 0, 0.06);
  font-size: 13px;
  -webkit-user-select: text;
  user-select: text;
}
.fg-control > .tf { text-align: right; }
.tf::placeholder { color: var(--text-3); }
.tf:focus { box-shadow: var(--focus-ring), 0 0 0 1px var(--accent); }
.tf.num { width: 64px; font-variant-numeric: tabular-nums; }
.tf.num::-webkit-inner-spin-button { opacity: 1; }
.tf.time { width: auto; font-variant-numeric: tabular-nums; }
.tf.time::-webkit-calendar-picker-indicator { display: none; }
.tf.area { width: 100%; height: auto; padding: 6px 8px; resize: vertical; text-align: left; font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }
.fg-control .unit { color: var(--text-2); }

/* Switch, as in System Settings. */
.switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 18px;
  margin: 0;
  border-radius: 9px;
  background: var(--switch-off);
  transition: background 0.18s ease;
}
.switch::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 0.18s var(--ease-out);
}
.switch:checked { background: var(--accent-fill); }
.switch:checked::after { transform: translateX(14px); }
.switch:focus-visible { outline: 0; box-shadow: var(--focus-ring); }

.btn.small { min-width: 0; height: 22px; padding: 0 10px; font-size: 12px; border-radius: var(--r-sm); flex-shrink: 0; }

/* Bucket settings in the bucket info sheet. */
#bucket-info:empty { display: none; }
#bucket-settings > h2:first-child { margin-top: var(--sp-4); }
.fg-row.dim { color: var(--text-2); }
.fg-row.hint-err { font-size: 13px; }
.fg-control .tf.wide { width: 280px; }
.fg-control .tf.num:disabled { opacity: 0.45; }
.cors-m { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.cors-m + .cors-m { margin-left: 6px; }
.fg-under.hint-err { font-size: 12px; }
#bucket-settings .fg-entry .fg-label { flex: 1; color: inherit; }

/* ---------- Icon and gallery views ---------- */

.view-switch { margin: 0; }
.view-switch .icon-btn { width: 30px; height: 26px; flex: none; }
.view-switch .icon-btn.on { color: var(--text); background: var(--field-bg); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .view-switch .icon-btn.on { background: rgba(255, 255, 255, 0.2); }
}
:root[data-theme="dark"] .view-switch .icon-btn.on { background: rgba(255, 255, 255, 0.2); }

.list-header[hidden], .list-rows[hidden], .gallery[hidden], .icon-size[hidden] { display: none; }
.icon-size { width: 90px; flex-shrink: 0; accent-color: var(--accent); cursor: default; }

.list[data-mode="icons"] .list-rows {
  display: grid;
  align-content: start;
  margin-top: var(--sp-2);
}
.cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-top: 6px;
  min-width: 0;
}
.cell .thumb {
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  padding: 3px;
  box-sizing: content-box;
}
.thumb-wait { display: grid; place-items: center; }
.thumb-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 3px;
  box-shadow: 0 0 0 0.5px var(--file-edge), 0 1px 3px rgba(0, 0, 0, 0.18);
  background: repeating-conic-gradient(rgba(127, 127, 127, 0.12) 0 25%, transparent 0 50%) 0 0 / 12px 12px;
}
.cell .name {
  max-width: 100%;
  padding: 0 4px;
  text-align: center;
  font-size: 12px;
  line-height: 15px;
}
.cell .name span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  padding: 0 5px;
  border-radius: var(--r-xs);
}
/* Finder marks a selected icon with a gray box and its name with a blue pill. */
.cell.selected .thumb { background: var(--selection-inactive); }
.cell.selected .name span { background: var(--selection-inactive); }
.list:focus .cell.selected .name span { background: var(--selection); color: var(--on-accent); }
.cell.drop-target .thumb { background: var(--accent-fill) !important; }
.cell.drop-target .ico-folder { color: var(--on-accent); }
.list.loading .gallery { opacity: 0.5; }
.rename-field.center { text-align: center; height: 21px; font-size: 12px; }

.list[data-mode="gallery"] { overflow: hidden; padding: 0; }
.gallery { position: absolute; inset: 0; display: flex; flex-direction: column; }
.gallery-stage { flex: 1; min-height: 0; display: flex; padding: var(--sp-4) var(--sp-4) var(--sp-2); }
.stage-item { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.stage-media { flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.stage-media .thumb-img { box-shadow: var(--shadow-md); }
.stage-item .name { max-width: 100%; margin-top: 6px; font-size: 13px; font-weight: 600; text-align: center; }
.stage-item .name span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage-facts { font-size: 11px; color: var(--text-2); }
.gallery-strip {
  flex-shrink: 0;
  height: 84px;
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  box-shadow: inset 0 1px 0 var(--separator);
}
.strip-spacer { height: 1px; }
.strip-cells { position: absolute; top: 8px; display: flex; gap: 8px; }
.gallery-strip .cell { width: 64px; padding: 0; }
.gallery-strip .cell .thumb { width: 56px; height: 56px; padding: 4px; }
.gallery-strip .cell.selected .thumb { background: var(--selection-inactive); }
.list:focus .gallery-strip .cell.selected .thumb { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-soft); }