/* ═══════════════════════════════════════════════════
   FILES EXPLORER — js/features/files-explorer.js (Phase 4, beta UX pass)
   The Files tab's right side: a path bar, a folder tree that slides out
   inside a folder, and one view of folders, characters and scenes. Cards
   keep the .char-card look from home.css. Menus and dialogs are appended
   to <body>, so they're not scoped under .maker.
   ═══════════════════════════════════════════════════ */

.maker .tab-home .home-main.files-main {
  padding: 0; gap: 0; overflow: hidden;
  display: flex; flex-direction: column;
}

/* ── Path bar ── */
.maker .tab-home .files-bar {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  min-height: 46px; box-sizing: border-box;
  padding: var(--sp-3) var(--sp-6);
  border-bottom: 1px solid var(--border);
  background: var(--chrome);
}
.maker .tab-home .files-path { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; flex: 1 1 260px; }
.maker .tab-home .files-up {
  flex: 0 0 auto; width: 26px; height: 26px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--r);
  background: var(--chrome-hi); color: var(--text-mid); cursor: pointer;
}
.maker .tab-home .files-up:hover { border-color: var(--accent); color: var(--text); }
.maker .tab-home .files-up .sf2-icon { transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1); }
.maker .tab-home .files-up[data-mode="show"] .sf2-icon { transform: rotate(90deg); }
.maker .tab-home .files-up[data-mode="hide"] .sf2-icon { transform: rotate(-90deg); }
.maker .tab-home .files-up[data-mode="hide"] { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--accent-text); }
.maker .tab-home .files-crumbs { display: flex; align-items: center; gap: 1px; min-width: 0; overflow: hidden; }
.maker .tab-home .files-crumb {
  flex: 0 1 auto; min-width: 0; max-width: 200px;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  height: 26px; padding: 0 var(--sp-3);
  border: 1px solid transparent; border-radius: var(--r);
  background: transparent; font: inherit; font-size: var(--fs-4); color: var(--text-mid);
  cursor: pointer; white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.maker .tab-home .files-crumb span { overflow: hidden; text-overflow: ellipsis; }
.maker .tab-home .files-crumb .sf2-icon { flex: 0 0 auto; color: var(--accent-text); }
.maker .tab-home .files-crumb:hover { background: var(--hover-strong); color: var(--text); }
.maker .tab-home .files-crumb.is-current { color: var(--text); font-weight: 700; }
.maker .tab-home .files-crumb.is-drop { border-color: var(--accent); background: var(--accent-glow); color: var(--text); }
.maker .tab-home .files-crumb-sep { flex: 0 0 auto; display: flex; color: var(--text-dim); }

.maker .tab-home .files-tools { display: flex; align-items: center; gap: var(--sp-4); flex: 0 0 auto; }
.maker .tab-home .files-selinfo {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  height: 24px; padding: 0 3px 0 var(--sp-4); box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 999px;
  background: var(--accent-glow); color: var(--accent-text);
  font-size: var(--fs-3); font-weight: 700; white-space: nowrap;
}
.maker .tab-home .files-selinfo[hidden] { display: none; }
.maker .tab-home .files-selinfo-x {
  width: 18px; height: 18px; padding: 0; border: 0; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: inherit; cursor: pointer;
}
.maker .tab-home .files-selinfo-x:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }

.maker .tab-home .files-size,
.maker .tab-home .files-sort {
  display: inline-flex; align-items: center; gap: 2px; padding: 2px;
  border: 1px solid var(--border); border-radius: var(--r); background: var(--chrome-lo);
}
.maker .tab-home .files-sort-label {
  padding: 0 var(--sp-2) 0 var(--sp-3);
  font-size: var(--fs-2); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim);
}
.maker .tab-home .files-sort-btn {
  display: inline-flex; align-items: center; gap: 3px;
  height: 22px; padding: 0 var(--sp-3);
  border: 0; border-radius: calc(var(--r) - 2px); background: transparent;
  font: inherit; font-size: var(--fs-3); font-weight: 600; color: var(--text-mid); cursor: pointer;
}
.maker .tab-home .files-size-btn {
  width: 26px; height: 22px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: calc(var(--r) - 2px); background: transparent; color: var(--text-dim); cursor: pointer;
}
.maker .tab-home .files-size-btn:hover { background: var(--hover-strong); color: var(--text); }
.maker .tab-home .files-size-btn.is-active { background: var(--chrome-hi); color: var(--accent-text); box-shadow: 0 1px 2px var(--shadow-soft); }
.maker .tab-home .files-sort-btn:hover { background: var(--hover-strong); color: var(--text); }
.maker .tab-home .files-sort-btn.is-active { background: var(--chrome-hi); color: var(--text); box-shadow: 0 1px 2px var(--shadow-soft); }
.maker .tab-home .files-sort-dir { display: none; color: var(--accent-text); transition: transform 0.15s; }
.maker .tab-home .files-sort-btn.is-active .files-sort-dir { display: inline-flex; }
.maker .tab-home .files-sort-btn.is-asc .files-sort-dir { transform: rotate(180deg); }
.maker .tab-home .files-new-folder { width: auto; display: inline-flex; align-items: center; gap: var(--sp-2); }

/* ── Body: tree rail + view ── */
.maker .tab-home .files-body { flex: 1 1 auto; min-height: 0; display: flex; }

/* The tree only exists inside a folder: it slides in from the left and back
   out at the root (Derek 2026-10-13). Its content keeps its width while the
   rail animates, so nothing reflows mid-slide. */
.maker .tab-home .files-tree {
  flex: 0 0 0; width: 0; overflow: hidden;
  display: flex; flex-direction: column;
  opacity: 0; transform: translateX(-12px);
  background: var(--tab-active);
  border-right: 1px solid transparent;
  transition: flex-basis 0.26s cubic-bezier(0.2, 0.7, 0.2, 1), width 0.26s cubic-bezier(0.2, 0.7, 0.2, 1),
    opacity 0.18s ease, transform 0.26s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.26s;
}
.maker .tab-home .files-body.has-tree .files-tree {
  flex-basis: 204px; width: 204px; opacity: 1; transform: none; border-right-color: var(--border);
}
.maker .tab-home .files-tree > * { min-width: 204px; box-sizing: border-box; }
.maker .tab-home .files-tree-head {
  padding: var(--sp-5) var(--sp-5) var(--sp-2);
  font-size: var(--fs-2); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim);
}
.maker .tab-home .files-tree-list { flex: 1 1 auto; overflow-y: auto; padding: 0 var(--sp-2) var(--sp-3); }
.maker .tab-home .files-tree-row {
  display: flex; align-items: center; gap: var(--sp-2);
  height: 26px; box-sizing: border-box;
  padding: 0 var(--sp-3) 0 calc(var(--depth, 0) * 12px + 2px);
  border: 1px solid transparent; border-radius: var(--r);
  font-size: var(--fs-4); color: var(--text-mid); cursor: pointer; user-select: none;
}
.maker .tab-home .files-tree-row .sf2-icon { flex: 0 0 auto; }
.maker .tab-home .files-tree-row:hover { background: var(--hover-strong); color: var(--text); }
.maker .tab-home .files-tree-row.is-current { background: var(--accent-glow); color: var(--text); font-weight: 700; }
.maker .tab-home .files-tree-row.is-current > .sf2-icon { color: var(--accent-text); }
.maker .tab-home .files-tree-row.is-drop { border-color: var(--accent); background: var(--accent-glow); color: var(--text); }
.maker .tab-home .files-tree-twist {
  flex: 0 0 16px; width: 16px; height: 16px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 3px; background: transparent; color: var(--text-dim); cursor: pointer;
}
.maker .tab-home .files-tree-twist:hover:not(:disabled) { background: var(--hover-strong); color: var(--text); }
.maker .tab-home .files-tree-twist:disabled { cursor: inherit; }
.maker .tab-home .files-tree-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maker .tab-home .files-tree-note {
  margin: 0; padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--border);
  font-size: var(--fs-2); line-height: 1.45; color: var(--text-dim);
}

.maker .tab-home .files-view {
  flex: 1 1 auto; min-width: 0; position: relative;
  overflow-y: auto; padding: var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-6);
  outline: none; user-select: none; -webkit-user-select: none;
}

/* ── Sections ── */
.maker .tab-home .files-sec-head { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.maker .tab-home .files-sec-head h3 { margin: 0; font-size: var(--fs-4); font-weight: 700; color: var(--text); }
.maker .tab-home .files-sec-count { font-size: var(--fs-3); color: var(--text-dim); font-variant-numeric: tabular-nums; }
.maker .tab-home .files-more {
  margin-left: auto; padding: 2px var(--sp-3);
  border: 0; border-radius: var(--r); background: transparent;
  font: inherit; font-size: var(--fs-3); font-weight: 700; color: var(--accent-text); cursor: pointer;
}
.maker .tab-home .files-more:hover { background: var(--accent-glow); }
.maker .tab-home .files-more[hidden] { display: none; }
.maker .tab-home .files-grid { grid-template-columns: repeat(auto-fill, 128px); }
.maker .tab-home .files-grid > .char-card.is-over { display: none; }

/* ── Selection + drag ── */
.maker .tab-home .files-view .char-card {
  position: relative;
  transition: border-color 0.14s, box-shadow 0.14s, transform 0.14s, background-color 0.14s, opacity 0.14s;
}
/* Keyboard cursor (arrow keys only). */
.maker .tab-home .files-view.kbd .char-card.is-focus { outline: 2px dashed color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 2px; }
.maker .tab-home .files-view .char-card.is-selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--chrome-hi));
  box-shadow: 0 0 0 1px var(--accent), 0 3px 12px var(--shadow-soft);
}
.maker .tab-home .files-main.is-dragging .char-card:hover { transform: none; }
.maker .tab-home .files-view .char-card.is-drag-source { opacity: 0.4; transform: scale(0.96); }
/* Cards on their way into a folder (a snapshot that flies to the target). */
.maker .tab-home .files-flyer { box-shadow: 0 8px 24px var(--shadow-strong); }
/* Spring-open: a bar fills while a dragged file hovers a folder. */
.maker .tab-home .is-springing { position: relative; }
.maker .tab-home .is-springing::after {
  content: ''; position: absolute; left: 6px; right: 6px; bottom: 3px; height: 3px; z-index: 8;
  border-radius: 3px; background: var(--accent); transform-origin: left center;
  animation: files-spring 0.9s linear forwards;
}
@keyframes files-spring { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.maker .tab-home .files-band {
  position: absolute; z-index: 5; pointer-events: none;
  border: 1px solid var(--accent); border-radius: 2px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

/* ── Folder tile: a folder shape holding an iOS group-chat cluster ── */
.maker .tab-home .files-folder {
  --folder-back: color-mix(in srgb, var(--accent) 34%, var(--chrome-lo));
  --folder-front: color-mix(in srgb, var(--accent) 15%, var(--chrome-lo));
  background: var(--chrome-hi);
}
.maker .tab-home .files-folder.has-tint {
  --folder-back: color-mix(in srgb, var(--folder-tint) 55%, var(--chrome-lo));
  --folder-front: color-mix(in srgb, var(--folder-tint) 24%, var(--chrome-lo));
}
.maker .tab-home .files-folder-art { position: relative; aspect-ratio: 1 / 1; }
/* A map backdrop IS the folder (Derek 2026-10-14): one image cut to the
   folder's outline (tab + body; an SVG mask in a 0-100 box, so it scales
   with the square tile), shaded so it still reads as a folder. The shading
   sits on user art, so it's plain black/white light, not theme tokens.
   (A 320×180 thumb shrunk into the tile: smoothing is fine.) */
.maker .tab-home .files-folder.has-backdrop .files-folder-art::before,
.maker .tab-home .files-folder.has-backdrop .files-folder-art::after { display: none; }
.maker .tab-home .files-folder-bg {
  position: absolute; inset: 0; z-index: 1;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 95V5Q0 0 5 0H38Q43 0 44 5L45 9H95Q100 9 100 14V95Q100 100 95 100H5Q0 100 0 95Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 95V5Q0 0 5 0H38Q43 0 44 5L45 9H95Q100 9 100 14V95Q100 100 95 100H5Q0 100 0 95Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transition: filter 0.14s;
}
.maker .tab-home .files-folder-bg-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center; image-rendering: auto;
}
.maker .tab-home .files-folder-shade {
  position: absolute; inset: 0;
  background:
    /* the tab: the folder's back panel, a step behind and in shadow */
    linear-gradient(rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.46)) 0 0 / 46% 9.6% no-repeat,
    /* the front panel's lit top edge, and the soft shadow it casts down */
    linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)) 0 9% / 100% 1px no-repeat,
    linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0)) 0 calc(9% + 1px) / 100% 7px no-repeat,
    /* a little light from the top left */
    linear-gradient(140deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 42%),
    /* darker toward the edges */
    radial-gradient(ellipse 78% 72% at 50% 56%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.42) 100%);
}
.maker .tab-home .files-folder.has-backdrop:hover .files-folder-bg,
.maker .tab-home .files-folder.has-backdrop.is-drop .files-folder-bg { filter: brightness(1.08) saturate(1.06); }

.files-sub-note { margin-left: 6px; font-size: var(--fs-2); font-weight: 400; color: var(--text-dim); }
.files-heads-rows { display: flex; flex-direction: column; gap: var(--sp-5); transition: opacity 0.15s; }
.files-heads-rows.is-muted { opacity: 0.4; }
.files-chips-emblem .files-chip { width: 48px; height: 46px; }
.files-tint-note { display: none; margin-left: 6px; font-size: var(--fs-2); font-weight: 400; color: var(--text-dim); }
.files-tint-row.is-muted .files-tint-note { display: inline; }
.files-tint-row.is-muted .files-swatches { opacity: 0.4; }
.maker .tab-home .files-folder-edit {
  position: absolute; top: 12%; right: 5px; z-index: 6;
  width: 22px; height: 22px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: var(--glass); color: var(--text-mid);
  box-shadow: 0 1px 3px var(--shadow); cursor: pointer;
  opacity: 0; transform: scale(0.7);
  transition: opacity 0.12s, transform 0.18s cubic-bezier(0.3, 1.5, 0.5, 1), color 0.12s;
}
.maker .tab-home .files-folder.is-selected .files-folder-edit { opacity: 1; transform: scale(1); }
/* Hover reveals only where there's a real pointer: on iPhone a tap that
   reveals something on :hover is spent as a hover, costing an extra tap
   (Derek 2026-10-14). */
@media (hover: hover) {
  .maker .tab-home .files-folder:hover .files-folder-edit { opacity: 1; transform: scale(1); }
}
.maker .tab-home .files-folder-edit:hover { color: var(--accent-text); }
.maker .tab-home .files-folder-art::before {   /* the tab */
  content: ''; position: absolute; left: 0; top: 0; width: 44%; height: 16%;
  border-radius: var(--r) var(--r) 0 0; background: var(--folder-back);
  transition: background 0.14s;
}
.maker .tab-home .files-folder-art::after {    /* the body */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: 9%;
  border-radius: 0 var(--r) var(--r) var(--r); background: var(--folder-front);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--chrome-hi) 55%, transparent);
  transition: background 0.14s;
}
.maker .tab-home .files-cluster { position: absolute; inset: 9% 0 0 0; z-index: 2; }
/* Heads: whole MapleStory heads, no circle, a 1px sticker edge so overlapping
   heads read apart. The main (most recent) head sits on top. */
.maker .tab-home .files-head { position: absolute; width: 0; height: 0; }
.maker .tab-home .files-head canvas {
  position: absolute; left: 0; top: 0; display: block;
  image-rendering: pixelated;
  filter: drop-shadow(1px 0 0 var(--chrome-hi)) drop-shadow(-1px 0 0 var(--chrome-hi))
    drop-shadow(0 1px 0 var(--chrome-hi)) drop-shadow(0 -1px 0 var(--chrome-hi))
    drop-shadow(0 2px 3px var(--shadow));
  animation: files-pop 0.22s cubic-bezier(0.3, 1.4, 0.5, 1) both;
}
.maker .tab-home .files-head.is-round canvas { border-radius: 50%; background: var(--chrome-hi); }
.maker .tab-home .files-head:nth-child(2) canvas { animation-delay: 0.04s; }
.maker .tab-home .files-head:nth-child(3) canvas { animation-delay: 0.08s; }
.maker .tab-home .files-head:nth-child(n+4) canvas { animation-delay: 0.12s; }
@keyframes files-pop { from { opacity: 0; transform: scale(0.6); } }
.maker .tab-home .files-more-chip {
  position: absolute; right: 4px; bottom: 4px; z-index: 30;
  min-width: 22px; height: 18px; padding: 0 6px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--accent-btn); color: var(--text-inv);
  font-size: var(--fs-2); font-weight: 800; box-shadow: 0 1px 3px var(--shadow);
}
/* Scene-only folders: a small fanned stack of scene cards. */
.maker .tab-home .files-scene-chip {
  position: absolute; overflow: hidden; border-radius: 4px;
  background: var(--chrome-lo);
  box-shadow: 0 0 0 2px var(--chrome-hi), 0 2px 6px var(--shadow);
}
.maker .tab-home .files-scene-chip canvas { display: block; width: 100%; height: 100%; }
.maker .tab-home .files-cluster-empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: color-mix(in srgb, var(--accent-text) 55%, transparent);
}
.maker .tab-home .files-folder-count { font-size: var(--fs-2); color: var(--text-dim); }
.maker .tab-home .files-folder.is-drop {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), 0 6px 18px var(--shadow);
  transform: translateY(-2px) scale(1.03);
}
.maker .tab-home .files-folder.is-drop .files-folder-art::before { background: var(--accent); }
.maker .tab-home .files-folder.is-drop .files-folder-art::after { background: color-mix(in srgb, var(--accent) 30%, var(--chrome-lo)); }

/* ── Compact cards: name only; the buttons ride on the thumbnail and show on
   hover / focus / selection (Derek 2026-10-14). No share code. ── */
.maker .tab-home .files-view.is-compact .files-grid { grid-template-columns: repeat(auto-fill, 96px); }
.maker .tab-home .files-view.is-compact .char-card { padding: var(--sp-1); gap: 2px; }
.maker .tab-home .files-view.is-compact .char-card-meta { display: none; }
.maker .tab-home .files-view.is-compact .char-card-footer { padding: 0 2px; }
.maker .tab-home .files-view.is-compact .char-card-name { font-size: var(--fs-2); }
.maker .tab-home .files-view.is-compact .char-card-image .char-card-actions {
  position: absolute; left: 50%; bottom: 4px; z-index: 4;
  margin: 0; padding: 2px; gap: 1px; border: 0;
  border-radius: 999px; background: var(--glass); box-shadow: 0 1px 4px var(--shadow);
  opacity: 0; transform: translate(-50%, 4px); pointer-events: none;
  transition: opacity 0.12s, transform 0.12s;
}
.maker .tab-home .files-view.is-compact .char-card:focus-within .char-card-actions,
.maker .tab-home .files-view.is-compact .char-card.is-selected .char-card-actions {
  opacity: 1; transform: translate(-50%, 0); pointer-events: auto;
}
@media (hover: hover) {   /* see the folder pencil above */
  .maker .tab-home .files-view.is-compact .char-card:hover .char-card-actions { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
  .maker .tab-home .files-row:hover .files-row-acts { opacity: 1; }
}
.maker .tab-home .files-view.is-compact .char-action-btn { flex: 0 0 20px; width: 20px; height: 20px; padding: 0; border-radius: 999px; font-size: var(--fs-2); }
.maker .tab-home .files-view.is-compact .primary-badge,
.maker .tab-home .files-view.is-compact .ref-bookmark { width: 16px; height: 16px; top: 3px; }
/* Touch (no hover; Derek 2026-10-14): clean until something is highlighted.
   Then the highlighted card shows its pencil / ⋯, every card shows its select
   dot (tap one to add it), and the bottom bar carries the actions. */
@media (hover: none) {
  /* The first tap highlights and reveals the corner pencil (folders and
     files); the pencil opens the settings (Derek 2026-10-14). A thumb-sized
     target, plus a margin around it that still counts as the pencil. */
  .maker .tab-home .files-folder-edit { opacity: 0; transform: scale(0.7); pointer-events: none; top: 4px; right: 4px; width: 28px; height: 28px; }
  .maker .tab-home .files-folder .files-folder-edit { top: calc(9% + 3px); }
  .maker .tab-home .files-view .char-card.is-selected .files-folder-edit { opacity: 1; transform: none; pointer-events: auto; }
  .maker .tab-home .files-view.is-compact .files-folder-edit { width: 24px; height: 24px; }
  /* Two quick taps are two taps, never a zoom. */
  .maker .tab-home .files-view .char-card { touch-action: manipulation; }

  /* A long press highlights: no iOS image menu, text selection or native drag. */
  .maker .tab-home .files-view .char-card { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  .maker .tab-home .files-view .char-card img { -webkit-user-drag: none; }
  /* Compact cards: the bar at the bottom carries More, so the card keeps
     just its pencil and the "Open" pill (the ⋯ sat under the pill). */
  .maker .tab-home .files-view.is-compact .char-card-image .char-card-actions { display: none; }
  .maker .tab-home .files-view.is-compact .char-card-image .char-action-btn:not(.files-more-btn) { display: none; }
  .maker .tab-home .files-view.is-compact .files-more-btn { width: 26px; height: 26px; flex-basis: 26px; background: var(--glass); box-shadow: 0 1px 3px var(--shadow); }
  .maker .tab-home .files-row-acts { opacity: 0; pointer-events: none; }
  .maker .tab-home .files-row.is-selected .files-row-acts { opacity: 1; pointer-events: auto; }
}

/* ── List view: Explorer-style rows (Derek 2026-10-14) ── */
.maker .tab-home .files-list-head,
.maker .tab-home .files-view .char-card.files-row {
  display: grid; align-items: center; column-gap: var(--sp-4);
  grid-template-columns: 44px minmax(0, 1fr) 84px 108px 96px 60px;
}
.maker .tab-home .files-list-head {
  position: sticky; top: calc(-1 * var(--sp-6)); z-index: 6;
  margin-bottom: calc(-1 * var(--sp-3));
  padding: var(--sp-2) var(--sp-5);
  border: 1px solid var(--border); border-radius: var(--r);
  background: var(--chrome);
}
.maker .tab-home .files-col {
  display: inline-flex; align-items: center; gap: 3px; justify-self: start;
  padding: 2px 4px; border: 0; border-radius: 4px; background: transparent;
  font: inherit; font-size: var(--fs-2); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-dim); cursor: pointer;
}
span.files-col { cursor: default; }
.maker .tab-home button.files-col:hover { background: var(--hover-strong); color: var(--text); }
.maker .tab-home .files-col.is-on { color: var(--accent-text); }
.maker .tab-home .files-col-dir { display: inline-flex; transition: transform 0.15s; }
.maker .tab-home .files-col-dir.is-asc { transform: rotate(180deg); }
.maker .tab-home .files-list {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: var(--r); background: var(--chrome-hi); overflow: hidden;
}
.maker .tab-home .files-view .char-card.files-row {
  min-height: 42px; box-sizing: border-box; padding: 4px var(--sp-5);
  flex-direction: row; gap: 0;
  border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
  background: transparent; box-shadow: none; cursor: default;
}
.maker .tab-home .files-view .char-card.files-row:last-child { border-bottom: 0; }
.maker .tab-home .files-view .char-card.files-row:hover { background: var(--hover-strong); transform: none; box-shadow: none; border-color: var(--border); }
.maker .tab-home .files-view .char-card.files-row.is-selected {
  background: color-mix(in srgb, var(--accent) 14%, var(--chrome-hi));
  box-shadow: inset 3px 0 0 var(--accent);
}
.maker .tab-home .files-view .char-card.files-row.is-drop { transform: none; box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-glow); }
.maker .tab-home .files-view .char-card.files-row.is-drag-source { transform: none; }
.maker .tab-home .files-row-thumb {
  width: 40px; height: 32px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px; background: var(--chrome-lo);
}
.maker .tab-home .files-row-thumb.is-char { background: color-mix(in srgb, var(--accent) 10%, var(--chrome-lo)); }
.maker .tab-home .files-row-thumb canvas { display: block; image-rendering: pixelated; }
.maker .tab-home .files-row-thumb.is-scene canvas { image-rendering: auto; border-radius: 4px; }
.maker .tab-home .files-row-thumb.is-round canvas { border-radius: 50%; }
.maker .tab-home .files-row-thumb.is-folder { background: transparent; }
.maker .tab-home .files-mini-folder { width: 30px; height: 30px; aspect-ratio: auto; }
.maker .tab-home .files-mini-emblem { position: absolute; inset: 9% 0 0 0; z-index: 3; display: flex; align-items: center; justify-content: center; }
.maker .tab-home .files-mini-emblem canvas { display: block; }
.maker .tab-home .files-row-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.maker .tab-home .files-row .char-card-name { font-size: var(--fs-4); font-weight: 600; }
.maker .tab-home .files-row .files-rename { max-width: 260px; }
.maker .tab-home .files-row-badge { flex: 0 0 auto; display: inline-flex; color: var(--accent-btn); }
.maker .tab-home .files-row-type, .maker .tab-home .files-row-date { font-size: var(--fs-3); color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.maker .tab-home .files-row-none { color: var(--text-dim); opacity: 0.5; font-size: var(--fs-3); }
.maker .tab-home .files-row-acts { display: flex; justify-content: flex-end; gap: 2px; opacity: 0; transition: opacity 0.12s; }
.maker .tab-home .files-row.is-selected .files-row-acts,
.maker .tab-home .files-row:focus-within .files-row-acts { opacity: 1; }
.maker .tab-home .files-row .char-action-btn { flex: 0 0 26px; width: 26px; height: 26px; padding: 0; border-radius: 6px; }
.maker .tab-home .files-view.kbd .char-card.files-row.is-focus { outline-offset: -2px; }

/* Inline folder rename */
.maker .tab-home .files-rename {
  width: 100%; box-sizing: border-box; padding: 1px 4px;
  font: inherit; font-size: var(--fs-3); font-weight: 600; color: var(--text);
  border: 1px solid var(--accent); border-radius: 4px; background: var(--input-bg);
  outline: none; box-shadow: 0 0 0 2px var(--accent-glow); user-select: text;
}

/* Empty states */
.maker .tab-home .files-empty {
  margin: auto; max-width: 320px; padding: 40px 20px;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  text-align: center; color: var(--text-dim);
}
.maker .tab-home .files-empty strong { font-size: var(--fs-4); color: var(--text-mid); }
.maker .tab-home .files-empty span { font-size: var(--fs-3); line-height: 1.5; }
.maker .tab-home .files-empty-ctas { display: flex; gap: var(--sp-3); margin-top: var(--sp-3); }
.maker .tab-home .files-empty-ctas .btn { width: auto; }

/* ── Undo bar (moves) ── */
.maker .tab-home .home-main.files-main { position: relative; }
.maker .tab-home .files-snack {
  position: absolute; left: 50%; bottom: 16px; z-index: 40;
  display: flex; align-items: center; gap: var(--sp-3);
  max-width: calc(100% - 32px); padding: 6px 6px 6px 12px; box-sizing: border-box;
  border-radius: 999px; background: var(--tip-bg); color: var(--tip-fg);
  font-size: var(--fs-4); box-shadow: 0 8px 24px var(--shadow-strong);
  transform: translateX(-50%); animation: files-snack-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.maker .tab-home .files-snack span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.maker .tab-home .files-snack.is-out { opacity: 0; transform: translate(-50%, 8px); transition: opacity 0.18s, transform 0.18s; }
@keyframes files-snack-in { from { opacity: 0; transform: translate(-50%, 12px); } }
.maker .tab-home .files-snack-undo {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px; border: 0; border-radius: 999px;
  background: color-mix(in srgb, var(--tip-fg) 16%, transparent); color: var(--tip-fg);
  font: inherit; font-size: var(--fs-3); font-weight: 700; cursor: pointer;
}
.maker .tab-home .files-snack-undo:hover { background: color-mix(in srgb, var(--tip-fg) 26%, transparent); }
.maker .tab-home .files-snack-undo kbd { font: inherit; font-size: var(--fs-1); opacity: 0.7; }
.maker .tab-home .files-snack-x {
  width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: var(--tip-fg); opacity: 0.7; cursor: pointer;
}
.maker .tab-home .files-snack-x:hover { opacity: 1; }

/* ── Drag ghost (setDragImage snapshot) ── */
.files-ghost {
  position: fixed; top: -400px; left: -400px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px 4px 4px; border: 1px solid var(--accent); border-radius: 12px;
  background: var(--chrome-hi); color: var(--text);
  box-shadow: 0 8px 22px var(--shadow-strong);
}
.files-ghost-stack { position: relative; width: 64px; height: 58px; flex: 0 0 auto; }
.files-ghost-card {
  position: absolute; left: 6px; top: 3px; width: 52px; height: 52px;
  border-radius: 6px; background: var(--chrome-lo); image-rendering: pixelated;
  box-shadow: 0 0 0 1px var(--border-lo), 0 2px 4px var(--shadow);
  transform: rotate(calc(var(--i, 0) * -6deg)) translateX(calc(var(--i, 0) * -3px));
}
.files-ghost-card.is-folder { background: color-mix(in srgb, var(--accent) 18%, var(--chrome-lo)); }
.files-ghost-card.is-scene { image-rendering: auto; }
.files-ghost-count {
  position: absolute; right: 0; top: 0; z-index: 2;
  min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--accent-btn); color: var(--text-inv);
  font-size: 11px; font-weight: 800; box-shadow: 0 0 0 2px var(--chrome-hi);
}
.files-ghost-label { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; }

/* ── Context menus ── */
.files-menu {
  position: fixed; z-index: 10030;
  min-width: 210px; max-width: 300px; max-height: min(440px, calc(100vh - 12px));
  overflow-y: auto; padding: var(--sp-1);
  display: flex; flex-direction: column;
  background: var(--chrome-hi);
  border: 1px solid var(--border-lo); border-radius: var(--r);
  box-shadow: 0 8px 28px var(--shadow), 0 1px 4px var(--shadow-soft);
  animation: files-menu-in 0.12s ease-out;
}
@keyframes files-menu-in { from { opacity: 0; transform: translateY(-3px) scale(0.98); } }
.files-menu-item {
  flex: 0 0 auto; display: flex; align-items: center; gap: var(--sp-3);
  height: 28px; padding: 0 var(--sp-3) 0 calc(var(--sp-2) + var(--depth, 0) * 12px);
  border: 0; border-radius: calc(var(--r) - 2px); background: transparent;
  font: inherit; font-size: var(--fs-4); color: var(--text); text-align: left;
  cursor: pointer; white-space: nowrap;
}
.files-menu-item:hover:not([aria-disabled="true"]),
.files-menu-item:focus-visible,
.files-menu-item.is-open { background: var(--accent-glow); outline: none; }
.files-menu-item[aria-disabled="true"] { color: var(--text-dim); opacity: 0.55; cursor: default; }
.files-menu-item.is-danger { color: var(--red); }
.files-menu-item.is-danger:hover:not([aria-disabled="true"]) { background: color-mix(in srgb, var(--red) 12%, transparent); }
.fmi-ic { flex: 0 0 16px; width: 16px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--text-mid); }
.files-menu-item.is-danger .fmi-ic { color: inherit; }
.fmi-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fmi-key { margin-left: var(--sp-5); font-size: var(--fs-2); color: var(--text-dim); }
.fmi-sub { margin-left: var(--sp-3); display: flex; color: var(--text-dim); }
.files-menu-sep { flex: 0 0 auto; height: 1px; margin: var(--sp-1) var(--sp-2); background: var(--border); }
.files-menu-head {
  padding: var(--sp-2) var(--sp-3) var(--sp-1);
  font-size: var(--fs-2); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim);
}

/* ── Dialogs: Edit file + confirmations (on the shared .app-modal shell) ── */
.files-modal .btn { width: auto; display: inline-flex; align-items: center; gap: var(--sp-2); }
.files-edit { width: min(480px, 94vw); }
/* Share… (folder links, Derek 2026-10-14) */
.files-share { width: min(440px, 94vw); }
.files-share .files-field { transition: opacity 0.15s; }
.files-share .files-field.is-muted { opacity: 0.45; }
.files-share-card {
  display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r); background: var(--chrome-lo); border-left: 3px solid var(--accent);
}
.files-share-card img { width: 96px; height: 96px; flex: none; image-rendering: pixelated; }
.files-share-card > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.files-share-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files-share-card small { font-size: var(--fs-2); color: var(--text-dim); }
/* A shared folder's link mark, by its count (tiles) or its name (rows). */
.maker .tab-home .files-folder-shared { display: inline-flex; align-items: center; margin-right: 4px; color: var(--accent-text); vertical-align: -1px; }
.maker .tab-home .files-row-name .files-folder-shared { margin: 0 0 0 6px; }
.files-dialog { width: min(420px, 92vw); }
.files-edit-body { display: flex; flex-direction: column; gap: var(--sp-5); max-height: min(68vh, 560px); overflow-y: auto; }
.files-edit-top { display: flex; align-items: flex-start; gap: var(--sp-5); }
.files-edit-thumb {
  flex: 0 0 auto; width: 84px; height: 84px; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--r); background: var(--chrome-lo);
}
.files-edit-thumb.is-char { background: linear-gradient(155deg, var(--chrome-lo) 50%, color-mix(in srgb, var(--accent) 16%, var(--chrome-lo))); }
.files-edit-thumb img { max-width: 100%; max-height: 100%; image-rendering: pixelated; }
.files-edit-thumb.is-scene { align-items: center; }
.files-edit-thumb.is-scene img { width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }
.files-edit-thumb .sf2-snail-empty { margin: auto; opacity: 0.35; }
.files-edit-id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.files-edit-meta { font-size: var(--fs-3); color: var(--text-dim); }
.files-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.files-field-label { font-size: var(--fs-2); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); }
.files-input {
  width: 100%; height: 30px; box-sizing: border-box; padding: 0 var(--sp-4);
  font: inherit; font-size: var(--fs-4); color: var(--text);
  border: 1px solid var(--input-border); border-radius: var(--r); background: var(--input-bg);
}
.files-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow); }
.files-input[data-f="name"] { height: 34px; font-size: 14px; font-weight: 700; }
.files-vis { display: flex; gap: var(--sp-2); }
.files-vis-opt { position: relative; flex: 1 1 0; min-width: 0; display: flex; cursor: pointer; }
.files-vis-opt input { position: absolute; opacity: 0; pointer-events: none; }
.files-vis-opt > span {
  flex: 1; display: flex; flex-direction: column; gap: 2px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--r); background: var(--chrome-hi);
  transition: border-color 0.12s, background 0.12s;
}
.files-vis-opt strong { font-size: var(--fs-4); color: var(--text); }
.files-vis-opt small { font-size: var(--fs-2); line-height: 1.35; color: var(--text-dim); }
.files-vis-opt:hover > span { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.files-vis-opt input:checked + span { border-color: var(--accent); background: var(--accent-glow); box-shadow: inset 0 0 0 1px var(--accent); }
.files-vis-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.files-vis-opt input:disabled + span { opacity: 0.55; cursor: not-allowed; }
.files-note { font-size: var(--fs-2); line-height: 1.4; color: var(--text-dim); }
.files-check { display: flex; align-items: flex-start; gap: var(--sp-3); cursor: pointer; }
.files-check input { flex: 0 0 auto; margin-top: 2px; accent-color: var(--accent-btn); }
.files-check > span { display: flex; flex-direction: column; gap: 2px; }
.files-check strong { font-size: var(--fs-4); font-weight: 600; color: var(--text); }
.files-check small { font-size: var(--fs-2); line-height: 1.4; color: var(--text-dim); }
.files-check small.is-danger { color: var(--red); font-weight: 600; }
.files-check input:disabled ~ span { opacity: 0.55; }
.files-link-row { display: flex; gap: var(--sp-2); }
.files-link { flex: 1 1 auto; min-width: 0; color: var(--text-mid); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-3); }
.files-link-row .btn { flex: 0 0 auto; }
.files-dl-note { flex: 1 1 auto; align-self: center; }
.files-edit-foot, .files-edit-confirm, .files-dialog-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-6);
  border-top: 1px solid var(--border); background: var(--chrome);
}
.files-edit-foot[hidden], .files-edit-confirm[hidden] { display: none; }
.files-edit-actions, .files-edit-main, .files-edit-confirm > div { display: flex; align-items: center; gap: var(--sp-2); }
.files-edit-confirm > span { font-size: var(--fs-4); color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.files-dialog-foot { justify-content: flex-end; }
.files-dialog .app-modal-body { display: flex; flex-direction: column; gap: var(--sp-4); }
.files-dialog .app-modal-body p { margin: 0; line-height: 1.5; }
.files-dialog .files-check { padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r); background: var(--chrome-lo); }
.files-modal .files-btn-quiet { background: transparent; border-color: transparent; color: var(--text-mid); }
.files-modal .files-btn-quiet:hover { background: var(--hover-strong); color: var(--text); }
.files-modal .files-btn-danger-text { color: var(--red); }
.files-modal .files-btn-danger-text:hover { background: color-mix(in srgb, var(--red) 10%, transparent); color: var(--red); }
.files-modal .files-btn-danger { background: var(--danger-btn); border-color: var(--danger-btn); color: var(--text-inv); }
.files-modal .files-btn-danger:hover { filter: brightness(1.08); }

/* ── Edit folder (name + cover) ── */
.files-fedit { width: min(540px, 94vw); }
.files-fedit-preview { flex: 0 0 auto; width: 128px; pointer-events: none; }
.files-fedit-preview .char-card { width: 128px; box-sizing: border-box; }
/* Edit folder (Derek 2026-10-14): preview + name pinned on top, the cover
   options in tabs below; only the tab's panel scrolls, and it keeps one
   height so switching tabs never moves the preview. */
.files-fedit-body { max-height: none; overflow: visible; gap: var(--sp-4); }
.files-fedit-reset { align-self: flex-start; margin-top: var(--sp-1); }
.files-fedit-tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--border); }
.files-fedit-tab {
  position: relative; margin-bottom: -1px; padding: 7px 14px 8px;
  border: 0; border-bottom: 2px solid transparent; background: none;
  font: inherit; font-size: var(--fs-3); font-weight: 600; color: var(--text-dim); cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.files-fedit-tab:hover { color: var(--text-mid); }
.files-fedit-tab.is-on { color: var(--accent-text); border-bottom-color: var(--accent); }
.files-fedit-dot { position: absolute; top: 6px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: 0; transform: scale(0.4); transition: opacity 0.15s, transform 0.2s; }
.files-fedit-tab.is-active .files-fedit-dot { opacity: 1; transform: none; }   /* on the cover */
.files-fedit-tab.is-off { color: color-mix(in srgb, var(--text-dim) 70%, transparent); }   /* the pair's other side */
.files-fedit-tab.is-off.is-on { color: var(--accent-text); }
.files-fedit-tabsep { flex: none; width: 1px; margin: 8px var(--sp-2); background: var(--border); }
.files-fedit-on-note { margin: 0; }
.files-fedit-panel.is-muted .files-fedit-on-note { display: none; }
.files-fedit-panels { height: 248px; }
.files-fedit-panel { height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-4); padding: 2px 2px var(--sp-2); }
.files-fedit-panel[hidden] { display: none; }
.files-fedit-panel .files-chips, .files-fedit-panel .files-bgs { max-height: none; overflow: visible; }
.files-fedit-muted-note { display: none; margin: 0; }
.files-fedit-panel.is-muted .files-fedit-muted-note { display: block; }
.files-fedit-panel.is-muted > :not(.files-fedit-muted-note) { opacity: 0.4; }
.files-fedit-panel.files-heads-rows.is-muted { opacity: 1; }   /* the panel dims its options, not its note */
body.is-mobile .files-fedit-panels { height: min(248px, 38vh); }
.files-fedit-sub { font-size: var(--fs-3); font-weight: 600; color: var(--text-mid); }
.files-link-btn { border: 0; background: transparent; padding: 2px 4px; border-radius: 4px; font: inherit; font-size: var(--fs-3); font-weight: 700; color: var(--accent-text); cursor: pointer; }
.files-link-btn:hover { background: var(--accent-glow); }
.files-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); max-height: 132px; overflow-y: auto; padding: 2px; }
.files-chip {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-width: 46px; height: 46px; padding: 2px 4px; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: var(--r); background: var(--chrome-lo);
  font: inherit; font-size: var(--fs-2); color: var(--text-mid); cursor: pointer;
  transition: border-color 0.12s, background 0.12s, transform 0.12s;
}
.files-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); transform: translateY(-1px); }
.files-chip.is-on { border-color: var(--accent); background: var(--accent-glow); box-shadow: inset 0 0 0 1px var(--accent); color: var(--text); }
.files-chip small { font-size: 9px; line-height: 1; color: var(--text-dim); }
.files-chip-auto { font-weight: 700; }
.files-chips-emote .files-chip { width: 52px; height: 54px; }
.files-chip-art { display: flex; align-items: center; justify-content: center; min-height: 30px; }
.files-chip-art canvas { display: block; image-rendering: pixelated; }
.files-swatches { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.files-swatch {
  width: 26px; height: 26px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 2px solid var(--chrome-hi); background: var(--sw, var(--accent));
  box-shadow: 0 0 0 1px var(--border-lo);
  transition: transform 0.12s, box-shadow 0.12s;
}
.files-swatch.is-auto { background: conic-gradient(var(--accent) 0 50%, color-mix(in srgb, var(--accent) 35%, var(--chrome-lo)) 50% 100%); }
.files-swatch:hover { transform: scale(1.1); }
.files-swatch.is-on { box-shadow: 0 0 0 2px var(--text); transform: scale(1.1); }
.files-bgs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); max-height: 196px; overflow-y: auto; padding: 2px; }
.files-bg {
  position: relative; aspect-ratio: 16 / 9; padding: 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--r); background: var(--chrome-lo); cursor: pointer;
  transition: border-color 0.12s, transform 0.12s;
}
.files-bg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.files-bg span {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1px 4px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6)); color: #fff;
  font-size: 9px; font-weight: 700; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.files-bg.is-none span { position: static; background: none; color: var(--text-mid); font-size: var(--fs-3); text-align: center; }
.files-bg.is-none { display: flex; align-items: center; justify-content: center; }
.files-bg:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); transform: translateY(-1px); }
.files-bg.is-on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.files-bgs .files-note { grid-column: 1 / -1; }

/* ── Phone (audit 2026-10-14) ── */
/* The Create panel shrinks to one row of short buttons + the share field, so
   the files start near the top instead of halfway down the first screen. */
body.is-mobile .maker .tab-home .home-rail { flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); }
body.is-mobile .maker .tab-home .home-rail-title,
body.is-mobile .maker .tab-home .home-rail-sep,
body.is-mobile .maker .tab-home .home-open-hint,
body.is-mobile .maker .tab-home .home-create-tx small { display: none; }
body.is-mobile .maker .tab-home .home-create-btn { flex: 1 1 0; width: auto; min-width: 0; min-height: 48px; padding: var(--sp-2) var(--sp-4); gap: var(--sp-3); }
body.is-mobile .maker .tab-home .home-create-ic { width: 30px; height: 34px; }
body.is-mobile .maker .tab-home .home-create-ic .home-create-img,
body.is-mobile .maker .tab-home .home-scene-img { max-width: 30px; max-height: 34px; }
body.is-mobile .maker .tab-home .home-create-tx strong { font-size: var(--fs-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.is-mobile .maker .tab-home .home-open-share,
body.is-mobile .maker .tab-home .home-open-preview,
body.is-mobile .maker .tab-home .home-auth-nudge { flex: 1 1 100%; }
body.is-mobile .maker .tab-home .home-open-input,
body.is-mobile .maker .tab-home .home-open-btn { min-height: 40px; }
body.is-mobile .maker .tab-home .home-auth-nudge { font-size: var(--fs-3); }
/* The tools wrap under the path; a selection chip takes its own line. */
body.is-mobile .maker .tab-home .files-tools { flex: 1 1 100%; flex-wrap: wrap; gap: var(--sp-3); }
/* The selection chip floats at the bottom like a phone selection bar: it
   never pushes the files around mid-tap. */
body.is-mobile .maker .tab-home .files-selinfo:not([hidden]) {
  position: fixed; left: 50%; bottom: calc(44px + env(safe-area-inset-bottom)); z-index: 45;
  transform: translateX(-50%); height: 44px; padding: 0 6px 0 16px; gap: var(--sp-3);
  background: var(--accent-btn); color: var(--text-inv); border-color: transparent;
  box-shadow: 0 8px 24px var(--shadow-strong); font-size: var(--fs-4);
}
body.is-mobile .maker .tab-home .files-selinfo .files-selinfo-x { width: 34px; height: 34px; color: var(--text-inv); }
body.is-mobile .maker .tab-home .files-selinfo .files-selinfo-x:hover { background: color-mix(in srgb, var(--text-inv) 18%, transparent); }
body.is-mobile .maker .tab-home .files-selinfo-n { margin-right: var(--sp-2); white-space: nowrap; }
body.is-mobile .maker .tab-home .files-selinfo-open {
  height: 32px; padding: 0 14px; border: 0; border-radius: 999px;
  background: var(--text-inv); color: var(--accent-btn);
  font: inherit; font-size: var(--fs-4); font-weight: 800; cursor: pointer;
}
/* Controls a thumb can hit (~36-40 px). */
body.is-mobile .maker .tab-home .files-up { width: 38px; height: 38px; }
body.is-mobile .maker .tab-home .files-crumb { height: 36px; }
body.is-mobile .maker .tab-home .files-sort-btn { height: 34px; padding: 0 var(--sp-3); }
body.is-mobile .maker .tab-home .files-size-btn { width: 38px; height: 34px; }
body.is-mobile .maker .tab-home .files-new-folder { height: 38px; min-width: 44px; justify-content: center; }
body.is-mobile .maker .tab-home .files-row .char-action-btn { flex-basis: 34px; width: 34px; height: 34px; }
/* Compact: four a row, filling the width. */
body.is-mobile .maker .tab-home .files-view.is-compact .files-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
body.is-mobile .maker .tab-home .files-list-head,
body.is-mobile .maker .tab-home .files-view .char-card.files-row { grid-template-columns: 40px minmax(0, 1fr) auto 56px; column-gap: var(--sp-3); }
body.is-mobile .maker .tab-home .files-row-type,
body.is-mobile .maker .tab-home .files-row-code,
body.is-mobile .maker .tab-home .files-col-type,
body.is-mobile .maker .tab-home .files-col-link { display: none; }
body.is-mobile .maker .tab-home .home-main.files-main { overflow: visible; }
body.is-mobile .maker .tab-home .files-bar { padding: var(--sp-3) var(--sp-5); }
body.is-mobile .maker .tab-home .files-tree { display: none; }
body.is-mobile .maker .tab-home .files-view { overflow: visible; padding: var(--sp-5); }
body.is-mobile .maker .tab-home .files-sort-label,
body.is-mobile .maker .tab-home .files-new-folder span { display: none; }
body.is-mobile .files-vis { flex-direction: column; }

@media (prefers-reduced-motion: reduce) {
  .maker .tab-home .files-tree, .maker .tab-home .files-head canvas, .maker .tab-home .files-up .sf2-icon, .files-menu,
  .maker .tab-home .files-snack, .maker .tab-home .is-springing::after { transition: none; animation: none; }
}

/* Someone's shared folder (/f/CODE → /maker?folder=CODE): read-only, so the
   bar keeps only the arrow and the crumbs, and the folder list stays hidden. */
.maker .tab-home #files-main.is-shared #files-new-folder,
.maker .tab-home #files-main.is-shared #files-sort,
.maker .tab-home #files-main.is-shared #files-size,
.maker .tab-home #files-main.is-shared #files-tree { display: none; }
.maker .tab-home .files-shared-note {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin: 0 0 var(--sp-5); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r); background: color-mix(in srgb, var(--accent) 10%, var(--chrome-hi));
  color: var(--text-mid); font-size: var(--fs-3);
}
.maker .tab-home .files-shared-note > svg { color: var(--accent-text); flex: none; }
.maker .tab-home .files-shared-note > span { flex: 1 1 220px; min-width: 0; }
.maker .tab-home .files-shared-item { cursor: pointer; }
.maker .tab-home .files-shared-kind { font-size: var(--fs-2); color: var(--text-dim); }

/* "Open": rises in at the feet of the one highlighted card, so another click
   (or tap) reads as opening it (Derek 2026-10-14 phones, 2026-10-15 desktop).
   Part of the card: clicking it opens too. */
.maker .tab-home .files-open-hint {
  position: absolute; left: 50%; bottom: 6px; z-index: 5;
  padding: 3px 12px; border-radius: 999px;
  background: var(--accent-btn); color: var(--text-inv);
  font-size: var(--fs-3); font-weight: 800; letter-spacing: 0.02em; white-space: nowrap;
  box-shadow: 0 3px 10px var(--shadow);
  opacity: 0; transform: translate(-50%, 8px) scale(0.7); pointer-events: none;
  transition: opacity 0.16s ease-out, transform 0.28s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.maker .tab-home .files-open-hint.is-row { position: static; margin-left: auto; transform: translateX(6px) scale(0.7); flex: none; }
.maker .tab-home .files-view.has-one .char-card.is-selected .files-open-hint { opacity: 1; transform: translate(-50%, 0) scale(1); transition-delay: 0.08s; cursor: pointer; }
.maker .tab-home .files-view.has-one .char-card.is-selected .files-open-hint.is-row { transform: none; }
.maker .tab-home .files-main.is-dragging .files-open-hint { opacity: 0 !important; }

/* Hover labels on card buttons (Derek 2026-10-15): the status bar's
   corner-tip (bugreport.css): a little box rises with a bounce. Mouse only,
   since on an iPhone a hover reveal spends the tap. Cards let them stick out. */
.maker .tab-home .files-view .char-card { overflow: visible; }
@media (hover: hover) {
  .maker .tab-home .files-view .char-action-btn[data-tip],
  .maker .tab-home .files-view .home-card-code[data-tip] { position: relative; }
  .maker .tab-home .files-view [data-tip]::after,
  .maker .tab-home .files-view [data-tip]::before {
    position: absolute; left: 50%; pointer-events: none; opacity: 0; z-index: 60;
    transition: opacity 0.1s ease-in, transform 0.14s ease-in;
  }
  .maker .tab-home .files-view [data-tip]::after {
    content: attr(data-tip);
    bottom: calc(100% + 9px);
    padding: 4px 9px; border-radius: 7px;
    background: var(--tip-bg, #1f2330); color: var(--tip-fg, #fff);
    font-family: inherit; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.01em;
    white-space: nowrap; box-shadow: 0 4px 14px var(--shadow-strong);
    transform-origin: 50% 100%; transform: translate(-50%, 6px) scale(0.6);
  }
  .maker .tab-home .files-view [data-tip]::before {
    content: ''; bottom: calc(100% + 4px); width: 0; height: 0;
    border: 5px solid transparent; border-bottom: 0; border-top-color: var(--tip-bg, #1f2330);
    transform-origin: 50% 0; transform: translate(-50%, 6px) scale(0.6);
  }
  .maker .tab-home .files-view [data-tip]:hover::after,
  .maker .tab-home .files-view [data-tip]:hover::before,
  .maker .tab-home .files-view [data-tip]:focus-visible::after,
  .maker .tab-home .files-view [data-tip]:focus-visible::before {
    opacity: 1; transform: translate(-50%, 0) scale(1);
    transition: opacity 0.12s ease-out, transform 0.34s cubic-bezier(0.34, 1.7, 0.5, 1);
  }
  .maker .tab-home .files-main.is-dragging [data-tip]::after,
  .maker .tab-home .files-main.is-dragging [data-tip]::before { display: none; }
  /* The first and last buttons' labels line up with the card's edge instead of
     centring, so they never run off the card or the view (Derek 2026-10-15). */
  .maker .tab-home .files-view .char-card-actions > [data-tip]:first-child::after { left: 0; transform-origin: 0 100%; transform: translate(0, 6px) scale(0.6); }
  .maker .tab-home .files-view .char-card-actions > [data-tip]:last-child::after { left: auto; right: 0; transform-origin: 100% 100%; transform: translate(0, 6px) scale(0.6); }
  .maker .tab-home .files-view .char-card-actions > [data-tip]:first-child:is(:hover, :focus-visible)::after,
  .maker .tab-home .files-view .char-card-actions > [data-tip]:last-child:is(:hover, :focus-visible)::after { transform: translate(0, 0) scale(1); }
}
/* Compact cards carry their buttons on the thumbnail: let the labels out of
   it (the picture keeps its rounded corners). */
.maker .tab-home .files-view.is-compact .char-card-image { overflow: visible; }
.maker .tab-home .files-view.is-compact .char-card-image > .char-card-preview { border-radius: inherit; }
/* A card showing its share code doesn't need the link button too (Derek
   2026-10-15); compact cards hide the code, so they keep it. */
.maker .tab-home .files-view:not(.is-compact) .char-card.has-code .btn-home-share,
.maker .tab-home .files-view:not(.is-compact) .char-card.has-code .btn-saved-share { display: none; }

/* Drag (Derek 2026-10-15). Empty space takes the drop into the folder on
   screen: a dashed outline and a label saying where. */
.maker .tab-home .files-view.is-drop { outline: 2px dashed var(--accent); outline-offset: -6px; background: color-mix(in srgb, var(--accent) 4%, transparent); }
.maker .tab-home .files-drop-here {
  position: absolute; z-index: 40; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: var(--accent-btn); color: var(--text-inv); font-size: var(--fs-3); font-weight: 700;
  box-shadow: 0 6px 18px var(--shadow-strong); pointer-events: none;
  animation: files-drop-here-in 0.24s cubic-bezier(0.3, 1.5, 0.5, 1);
}
@keyframes files-drop-here-in { from { opacity: 0; transform: translate(-50%, 8px) scale(0.85); } }
/* File onto file: the target leans in, then offers a new folder. */
.maker .tab-home .files-view .char-card.is-merge-target { transition: transform 0.2s ease-out, box-shadow 0.2s; }
.maker .tab-home .files-view .char-card.is-merge-armed {
  transform: scale(1.05); box-shadow: 0 0 0 2px var(--accent), 0 8px 22px color-mix(in srgb, var(--accent) 30%, transparent);
}
.maker .tab-home .files-merge-pill {
  position: absolute; left: 50%; top: 50%; z-index: 8; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px;
  background: var(--accent-btn); color: var(--text-inv); font-size: var(--fs-3); font-weight: 800; white-space: nowrap;
  box-shadow: 0 4px 14px var(--shadow-strong); pointer-events: none;
  animation: files-merge-pill-in 0.3s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.maker .tab-home .files-row .files-merge-pill { position: static; transform: none; margin-left: auto; animation: none; }
@keyframes files-merge-pill-in { from { opacity: 0; transform: translate(-50%, -50%) scale(0.5); } }
@media (prefers-reduced-motion: reduce) {
  .maker .tab-home .files-drop-here, .maker .tab-home .files-merge-pill { animation: none; }
  .maker .tab-home .files-view .char-card.is-merge-armed { transform: none; }
}

/* Edit folder: Reset cover and Share folder under the name (Derek 2026-10-15). */
.files-fedit-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-1); }
.files-fedit-links .files-link-btn { display: inline-flex; align-items: center; gap: 5px; }
.files-fedit-links .files-fedit-reset { margin-top: 0; }

/* Drag to reorder (Derek 2026-10-15): a bar where the files will land. */
.maker .tab-home .files-insert {
  position: absolute; z-index: 30; width: 3px; border-radius: 2px; pointer-events: none;
  background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  animation: files-insert-in 0.16s ease-out;
  transition: left 0.12s ease-out, top 0.12s ease-out, height 0.12s ease-out, width 0.12s ease-out;
}
/* The two cards beside the bar part to make room for it (mid-drag only). */
.maker .tab-home #files-main.is-dragging .files-view .char-card:not(.is-merge-target) { transition: border-color 0.14s, box-shadow 0.14s, transform 0.14s, translate 0.14s ease-out; }
.maker .tab-home .files-insert.is-row { width: auto; height: 3px; }
@keyframes files-insert-in { from { opacity: 0; } }
/* The Sort control glows while the "Switch to custom order?" window asks. */
.maker .tab-home .files-sort.is-hint { box-shadow: 0 0 0 2px var(--accent), 0 0 0 7px color-mix(in srgb, var(--accent) 20%, transparent); animation: files-sort-hint 1.1s ease-in-out infinite; }
@keyframes files-sort-hint { 50% { box-shadow: 0 0 0 2px var(--accent), 0 0 0 11px color-mix(in srgb, var(--accent) 6%, transparent); } }
@media (prefers-reduced-motion: reduce) { .maker .tab-home .files-sort.is-hint, .maker .tab-home .files-insert { animation: none; transition: none; } }

/* ── Saved folders + keeping files from a shared folder (Derek 2026-10-15) ── */
/* The bookmark sits in the folder's top-right corner, like a saved character's. */
.maker .tab-home .files-saved .files-folder-art .files-saved-mark { z-index: 4; top: 6%; right: 6px; }
.maker .tab-home .files-view.is-compact .files-saved .files-saved-mark { top: 4%; right: 4px; }
.maker .tab-home .files-saved .files-folder-count { color: var(--text-dim); }
.maker .tab-home .files-saved.is-gone .files-folder-art { opacity: 0.55; filter: grayscale(1); }
.maker .tab-home .files-saved.is-gone .char-card-name { color: var(--text-dim); font-style: italic; }
.maker .tab-home .files-saved-inline { display: inline-flex; margin-left: 5px; color: var(--accent-btn); vertical-align: -1px; }
/* The shared folder's bar: Save folder / Copy to my Files beside the note. */
.maker .tab-home .files-shared-keep { display: inline-flex; gap: var(--sp-2); margin-left: auto; flex-wrap: wrap; }
.maker .tab-home .files-shared-keep .btn,
.maker .tab-home .files-shared-note > .btn { display: inline-flex; align-items: center; gap: 5px; }
.maker .tab-home .files-shared-save.is-saved { color: var(--accent-btn); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
/* Each shared file's Add / Add to… / Make a copy row. */
.maker .tab-home .files-shared-acts { justify-content: center; }
.maker .tab-home .files-shared-have { color: var(--accent-btn); cursor: default; }
.maker .tab-home .files-shared-item.is-have .char-card-image { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
.maker .tab-home .files-saved-by { margin-left: 8px; font-size: var(--fs-2); color: var(--text-dim); font-weight: 500; white-space: nowrap; }
/* Several picked in a shared folder: what to do with them (Derek 2026-10-15). */
.maker .tab-home .files-shared-selbar {
  position: sticky; top: 0; z-index: 6;
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin: 0 0 var(--sp-4); padding: var(--sp-2) var(--sp-4);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: var(--r);
  background: color-mix(in srgb, var(--accent) 10%, var(--chrome-hi)); box-shadow: 0 2px 8px var(--shadow-soft);
  animation: files-selbar-in 0.16s ease-out;
}
.maker .tab-home .files-shared-selbar[hidden] { display: none; }
.maker .tab-home .files-shared-selbar .btn { display: inline-flex; align-items: center; gap: 5px; }
.maker .tab-home .files-shared-selbar .files-link-btn { margin-left: auto; }
@keyframes files-selbar-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .maker .tab-home .files-shared-selbar { animation: none; } }