/* ==========================================================================
   Drive: folder tree, file table, selection, drag & drop, uploads, preview,
   home cards.
   ========================================================================== */

.drive-layout { display: flex; gap: 24px; align-items: flex-start; }
.drive-main { flex: 1; min-width: 0; }

/* ---- Folder tree (left column, xl screens) ----------------------------- */
.tree { position: sticky; top: calc(var(--header-height) + 32px); width: var(--tree-width); flex-shrink: 0;
  max-height: calc(100dvh - var(--header-height) - 64px); overflow-y: auto; display: none; margin-left: -8px; }
@media (min-width: 1024px) { .tree { display: block; } }
.tree ul ul { margin-left: 14px; }
.tree-row { display: flex; align-items: center; gap: 2px; border-radius: var(--r-sm); }
.tree-row:hover { background: var(--hover); }
.tree-row.is-current { background: var(--olive-soft); }
.tree-row.is-drop { background: var(--olive-soft); box-shadow: inset 0 0 0 1.5px var(--olive); }
.tree-toggle { width: 22px; height: 36px; display: grid; place-items: center; color: var(--faint); border-radius: 6px; flex-shrink: 0; }
.tree-toggle:hover { color: var(--ink); }
.tree-toggle .i { transition: transform var(--t-base) var(--ease); }
.tree-toggle[aria-expanded="true"] .i { transform: rotate(90deg); }
.tree-toggle.is-leaf { visibility: hidden; }
.tree-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 36px; padding-right: 8px;
  font-size: 13.5px; color: var(--muted); }
.tree-link:hover { color: var(--ink); }
.tree-link .i-fill { display: none; }
.tree-row.is-current .tree-link { color: var(--ink); font-weight: 600; }
.tree-row.is-current .tree-link .i-line { display: none; }
.tree-row.is-current .tree-link .i-fill { display: inline-block; color: var(--olive-ink); }
.tree-root .tree-link { padding-left: 8px; }
.tree-head { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 6px 8px; font-size: 11.5px; font-weight: 600;
  letter-spacing: .03em; color: var(--faint); }
.tree-head .icon-btn { color: var(--muted); }
.tree-actions { display: none; align-items: center; gap: 0; padding-right: 2px; flex-shrink: 0; }
.tree-actions .icon-btn { width: 24px; height: 24px; color: var(--muted); }
.tree-actions .icon-btn:hover { color: var(--ink); background: var(--surface); }
.tree-row:hover .tree-actions, .tree-row:focus-within .tree-actions { display: flex; }
@media (hover: none) { .tree-actions { display: flex; } }
.tree-row[draggable="true"] { cursor: grab; }
.tree-row.is-dragging { opacity: .45; }
.tree-row.is-removing { opacity: .4; transition: opacity 160ms ease; }
.tree-row.is-new { animation: tree-new 1.6s ease; }
@keyframes tree-new { 0%, 40% { background: var(--olive-soft); box-shadow: inset 0 0 0 1.5px var(--olive); } }
.tree-empty { display: flex; align-items: center; gap: 8px; width: 100%; height: 36px; margin-top: 4px; padding: 0 8px; border-radius: var(--r-sm);
  border: 1.5px dashed var(--line); font-size: 13px; color: var(--muted); }
.tree-empty:hover { border-color: var(--line-strong); color: var(--ink); background: var(--hover); }
.tree-root .tree-link .i { color: var(--muted); }
.tree-root.is-current .tree-link .i-fill { color: var(--olive-ink); }

/* ---- Breadcrumb -------------------------------------------------------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; min-width: 0; font-size: 13.5px; }
.crumbs a, .crumbs span.crumb { display: inline-flex; align-items: center; height: 28px; padding: 0 6px; border-radius: 7px;
  color: var(--muted); font-weight: 500; max-width: 220px; }
.crumbs a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; line-height: 28px; }
.crumbs a:hover { color: var(--ink); background: var(--hover); }
.crumbs a.is-drop { background: var(--olive-soft); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--olive); }
.crumbs [aria-current="page"] { color: var(--ink); }
.crumbs .sep { color: var(--faint); }

.drive-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 6px 0 20px; }
.drive-title { min-width: 0; }
.drive-title .t-display { overflow-wrap: anywhere; }
.drive-meta { margin-top: 6px; font-size: 13.5px; color: var(--muted); }
.drive-meta .hint-drop { display: inline; }
@media (hover: none) { .drive-meta .hint-drop { display: none; } }

.view-toggle { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r-tile); background: var(--chip); }
.view-toggle button { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); }
.view-toggle button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px #00000014, 0 0 0 .5px var(--line); }

/* ---- File table -------------------------------------------------------- */
.drive-card { position: relative; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface);
  box-shadow: var(--e-1); padding: 6px; transition: border-color var(--t-base) ease, box-shadow var(--t-base) ease, background-color var(--t-base) ease; }
.drive-card.is-dragover { border-color: var(--olive); box-shadow: 0 0 0 3px color-mix(in oklab, var(--olive) 30%, transparent); }

.fgrid { display: grid; align-items: center; column-gap: 12px;
  grid-template-columns: 22px minmax(0, 1fr) 128px 72px 80px 136px 80px; }
.fhead { padding: 6px 12px 8px; min-height: 40px; font-size: var(--fs-label); font-weight: 500; letter-spacing: .012em; color: var(--muted); }
.fhead .sort { display: inline-flex; align-items: center; gap: 4px; height: 26px; border-radius: 6px; color: var(--muted); }
.fhead .sort:hover, .fhead .sort.is-active { color: var(--ink); }
.fhead .sort .i { opacity: .8; }

.frow {
  position: relative; min-height: 60px; padding: 10px 12px; border-radius: 12px; font-size: 13px; color: var(--muted);
  cursor: default; user-select: none; outline: none; transition: background-color var(--t-fast) ease, box-shadow var(--t-fast) ease, opacity var(--t-base) ease;
}
.frow + .frow { margin-top: 0; }
.frow:hover { background: var(--hover); }
.frow:focus-visible { box-shadow: inset 0 0 0 2px var(--olive); }
.frow.is-selected { background: var(--olive-soft); box-shadow: inset 0 0 0 1.5px var(--olive); }
.frow.is-drop { background: var(--olive-soft); box-shadow: inset 0 0 0 2px var(--olive); }
.frow.is-dragging { opacity: .45; }
.frow.is-removing { opacity: 0; transform: translateX(8px); transition: opacity 180ms ease, transform 180ms ease; }
.frow.is-new { animation: row-in 360ms var(--ease-out); }
@keyframes row-in { from { background: var(--olive-soft); } }
.frow .check { opacity: 0; transition: opacity var(--t-fast) ease; }
.frow:hover .check, .frow .check:checked, .drive.has-selection .frow .check, .frow .check:focus-visible { opacity: 1; }
@media (hover: none) { .frow .check { opacity: 1; } }

.fname { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fname .tile { width: 38px; height: 38px; border-radius: var(--r-md); }
.fname-text { min-width: 0; }
.fname { position: relative; }
.flock { position: absolute; left: 26px; top: calc(50% + 5px); display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1.5px var(--line-strong); pointer-events: none; }
.drive.is-grid .flock { left: 8px; top: 74px; }
.preview-lock .input { width: min(280px, 100%); margin-top: 12px; }
.preview-lock .btn { margin-top: 8px; }
.fname-title { display: block; font-size: 14px; font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fname-title:hover { text-decoration: none; }
a.fname-title:hover { color: var(--ink); }
.fname-sub { display: block; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fname-sub.on-mobile { display: none; }
.fowner { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--muted); }
.fowner span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.factions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.factions .on-hover { opacity: 0; transition: opacity var(--t-fast) ease; }
.frow:hover .factions .on-hover, .frow.is-selected .factions .on-hover, .factions .on-hover:focus-visible { opacity: 1; }
@media (hover: none) { .factions .on-hover { display: none; } }

.rename-input { height: 34px; width: 100%; max-width: 420px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--olive);
  box-shadow: var(--focus-ring); background: var(--surface); font-size: 14px; font-weight: 500; }

/* Selection toolbar replaces the table header */
.selbar { display: none; align-items: center; gap: 6px; min-height: 40px; padding: 4px 6px 4px 12px; margin-bottom: 4px;
  border-radius: 10px; background: var(--ink); color: var(--surface); animation: fade-in 120ms ease; }
.drive.has-selection .selbar { display: flex; }
.drive.has-selection .fhead { display: none; }
.selbar .count { font-size: 13.5px; font-weight: 600; margin-right: auto; padding-left: 4px; }
.selbar .btn { height: 32px; padding: 0 10px; font-size: 13px; color: var(--surface); border-radius: 8px; }
.selbar .btn:hover { background: color-mix(in oklab, var(--surface) 14%, transparent); }
.selbar .btn.is-danger { background: var(--danger); color: var(--on-danger); font-weight: 600; }
.selbar .btn.is-danger:hover { background: var(--danger); filter: brightness(1.08); }
.selbar .icon-btn { color: color-mix(in oklab, var(--surface) 70%, transparent); }
.selbar .icon-btn:hover { background: color-mix(in oklab, var(--surface) 14%, transparent); color: var(--surface); }
.selbar .check { opacity: 1; border-color: color-mix(in oklab, var(--surface) 50%, transparent); background: transparent; }
.selbar .check:checked, .selbar .check:indeterminate { background: var(--olive); border-color: var(--olive); }

/* Drop overlay inside the card (files from the computer) */
.dropzone { position: absolute; inset: 6px; z-index: 5; display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; border-radius: 12px; border: 2px dashed color-mix(in oklab, var(--olive) 70%, transparent);
  background: color-mix(in oklab, var(--olive-soft) 88%, transparent); text-align: center; pointer-events: none; min-height: 160px; }
.drive-card.is-dragover .dropzone { display: flex; animation: fade-in 120ms ease; }
.dropzone .tile { margin-bottom: 8px; background: var(--olive); color: var(--on-olive); }
.dropzone strong { font-size: 15px; font-weight: 600; }
.dropzone span { font-size: 13px; color: var(--muted); }

/* Drag ghost (internal move) */
.drag-ghost { position: fixed; top: -1000px; left: -1000px; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px;
  border-radius: 12px; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--e-3); font-size: 13.5px;
  font-weight: 500; color: var(--ink); max-width: 280px; }
.drag-ghost .tile { width: 32px; height: 32px; border-radius: 9px; }
.drag-ghost .badge-count { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; height: 24px;
  min-width: 24px; padding: 0 6px; border-radius: 999px; background: var(--olive); color: var(--on-olive); font-size: 12px; font-weight: 700; }

/* ---- Grid view ---------------------------------------------------------- */
.drive.is-grid .fhead { display: none; }
.drive.is-grid .rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px; padding: 4px; }
.drive.is-grid .frow { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 14px; min-height: 0;
  border: 1px solid var(--line); }
.drive.is-grid .frow > :not(.fname):not(.factions):not(.check) { display: none; }
.drive.is-grid .frow .check { position: absolute; top: 12px; left: 12px; z-index: 1; }
.drive.is-grid .fname { flex-direction: column; align-items: flex-start; gap: 12px; }
.drive.is-grid .fname .tile { width: 100%; height: 96px; border-radius: 10px; }
.drive.is-grid .fname .tile .i { width: 32px; height: 32px; }
.drive.is-grid .fname-text { width: 100%; }
.drive.is-grid .factions { position: absolute; top: 8px; right: 8px; }
.drive.is-grid .factions .on-hover { display: none; }
.drive.is-grid .fname-sub.on-grid { display: block; }

/* ---- Upload panel ------------------------------------------------------- */
.uploads { position: fixed; right: 24px; bottom: 24px; z-index: 60; width: min(380px, calc(100vw - 32px));
  border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--e-3);
  animation: dialog-in 200ms var(--ease-out); overflow: hidden; }
.uploads-head { display: flex; align-items: center; gap: 8px; padding: 14px 12px 12px 16px; }
.uploads-head .title { font-size: 14px; font-weight: 600; margin-right: auto; }
.uploads-head .sub { font-size: 12.5px; color: var(--muted); font-weight: 400; margin-left: 6px; }
.uploads-head + .up-total .meter { margin: 0; }
.uploads-list { max-height: 280px; overflow-y: auto; padding: 0 8px 8px; }
.uploads.is-collapsed .uploads-list { display: none; }
.uploads.is-collapsed .up-total { margin-bottom: 10px; }
.uploads.is-collapsed .collapse-btn .i { transform: rotate(180deg); }
.up-row { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 10px; }
.up-row .tile { width: 32px; height: 32px; border-radius: 9px; }
.up-info { flex: 1; min-width: 0; }
.up-name { display: block; font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-line { display: flex; flex-direction: column; align-items: stretch; gap: 3px; margin-top: 5px; }
.up-line .meter { flex: 1; height: 5px; margin: 0; }
.meter-row { display: flex; align-items: center; gap: 8px; }
.up-detail { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-dir { display: inline-grid; vertical-align: -1px; margin-right: 5px; color: var(--faint); }
.up-total { margin: 0 16px 12px; }
.uploads .up-total .meter { margin: 0; height: 6px; }
.up-total-detail { margin-top: 6px; font-size: 12px; color: var(--muted); }
.uploads.is-collapsed .up-total-detail { display: none; }
.meter.is-indeterminate { overflow: hidden; position: relative; }
.meter.is-indeterminate span { position: absolute; width: 35% !important; animation: meter-slide 1.1s ease-in-out infinite; }
@keyframes meter-slide { from { left: -35%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .meter.is-indeterminate span { animation: none; left: 0; width: 100% !important; opacity: .4; } }
.up-pct { width: 44px; text-align: right; font-size: 11.5px; color: var(--muted); }
.up-status { font-size: 12px; color: var(--muted); }
.up-row.is-error .up-status { color: var(--danger); }
.up-row.is-done .up-state { color: var(--olive-ink); }
.up-row.is-error .up-state { color: var(--danger); }
@media (max-width: 1023.98px) { .uploads { right: 16px; bottom: calc(var(--tabbar-height) + 12px + env(safe-area-inset-bottom)); } }

/* ---- Preview ------------------------------------------------------------- */
.preview { position: fixed; inset: 0; z-index: 85; display: flex; flex-direction: column; background: #141513f5; color: #ecede8;
  animation: fade-in 160ms ease; }
.preview.is-leaving { animation: fade-out 140ms ease forwards; }
.preview-bar { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 12px 0 16px; flex-shrink: 0; }
.preview-bar .tile { width: 32px; height: 32px; border-radius: 9px; }
.preview-title { min-width: 0; flex: 1; }
.preview-title strong { display: block; font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-title span { display: block; font-size: 12.5px; color: #a3a59d; }
.preview-bar .btn-ghost, .preview-bar .icon-btn { color: #d6d8d0; }
.preview-bar .btn-ghost:hover, .preview-bar .icon-btn:hover { background: #ffffff14; color: #fff; }
.preview-stage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; padding: 0 64px 12px; }
.preview-stage iframe { width: 100%; height: 100%; max-width: 1100px; border-radius: 12px; background: #fff; }
.preview-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 20px 60px -20px #000; }
.preview-stage video { max-width: 100%; max-height: 100%; border-radius: 10px; background: #000; }
.preview-stage audio { width: min(520px, 100%); }
.preview-text { width: 100%; max-width: 980px; height: 100%; overflow: auto; border-radius: 12px; background: var(--surface); color: var(--ink);
  padding: 24px 28px; font-family: var(--font-mono); font-size: 13px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.preview-none { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 40px 32px;
  border-radius: var(--r-xl); background: var(--surface); color: var(--ink); width: min(420px, 100%); }
.preview-none .tile { margin-bottom: 10px; }
.preview-none .btn { margin-top: 16px; }
.preview-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; color: #d6d8d0; background: #ffffff10; }
.preview-nav:hover { background: #ffffff22; color: #fff; }
.preview-nav.prev { left: 12px; }
.preview-nav.next { right: 12px; }
@media (max-width: 639.98px) {
  .preview-stage { padding: 0 8px 12px; }
  .preview-nav { display: none; }
  .preview-bar .hide-sm { display: none; }
}

/* ---- Details panel ------------------------------------------------------- */
.panel-hero { display: grid; place-items: center; height: 148px; border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--surface-2); margin-bottom: 20px; overflow: hidden; }
.panel-hero img { width: 100%; height: 100%; object-fit: cover; }
/* Clickable preview of the file (image, first PDF page, video frame, start of a text) */
button.panel-hero { position: relative; width: 100%; padding: 0; cursor: zoom-in; text-align: left; color: inherit;
  transition: border-color 160ms ease, box-shadow 160ms ease; }
button.panel-hero:hover, button.panel-hero:focus-visible { border-color: var(--line-strong); box-shadow: var(--e-2); }
.panel-hero.is-image { height: 200px; }
.panel-hero.is-pdf { height: 360px; padding: 16px; }
.panel-hero.is-pdf img { width: auto; max-width: 100%; height: 100%; object-fit: contain; border-radius: 3px;
  background: #fff; box-shadow: 0 1px 2px #0000001f, 0 8px 24px -8px #00000040; }
.panel-hero.is-video { height: 200px; background: #000; }
.panel-hero.is-video video { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.panel-hero.is-text { height: 220px; place-items: stretch; }
.hero-text { margin: 0; padding: 14px 16px; overflow: hidden; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink);
  white-space: pre-wrap; overflow-wrap: anywhere; mask-image: linear-gradient(#000 70%, transparent); }
.hero-fallback { display: none; }
.panel-hero.is-broken [data-hero-media] { display: none; }
.panel-hero.is-broken .hero-fallback { display: contents; }
.hero-open { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
  border-radius: 999px; background: color-mix(in oklab, var(--ink) 82%, transparent); color: var(--surface); font-size: 12px; font-weight: 500;
  opacity: 0; transform: translateY(4px); transition: opacity 160ms ease, transform 160ms ease; }
button.panel-hero:hover .hero-open, button.panel-hero:focus-visible .hero-open { opacity: 1; transform: none; }
@media (hover: none) { .hero-open { opacity: 1; transform: none; } }
.panel-section { margin-top: 24px; }
.panel-section > .t-heading { margin-bottom: 12px; }
.access-box { border-radius: var(--r-lg); border: 1px solid var(--line); padding: 16px; }
.people { display: grid; gap: 4px; }
.person-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.person-row + .person-row { border-top: 1px solid var(--line); }
.person-row .grow { min-width: 0; }
.person-row .select { width: auto; height: 34px; font-size: 13px; padding-left: 10px; border-color: var(--line); }

/* ---- Share dialog -------------------------------------------------------- */
.picker { position: relative; }
.picker-results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 10; padding: 4px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface); box-shadow: var(--e-2); max-height: 260px; overflow-y: auto; }
.picker-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border-radius: var(--r-sm); text-align: left; }
.picker-option:hover, .picker-option.is-focused { background: var(--hover); }
.picker-option .grow { min-width: 0; }
.picker-option .name { display: block; font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-option .mail { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-empty { padding: 12px; font-size: 13px; color: var(--muted); text-align: center; }
.share-add { display: flex; gap: 8px; align-items: flex-start; }
.share-add .picker { flex: 1; min-width: 0; }
.share-add .select { width: auto; flex-shrink: 0; height: 40px; font-size: 13.5px; }
.share-section-title { display: flex; align-items: center; justify-content: space-between; margin: 24px 0 8px; font-size: var(--fs-label);
  font-weight: 500; color: var(--muted); }
.link-card { border-radius: var(--r-lg); border: 1px solid var(--line); padding: 14px 16px; }
.link-card + .link-card { margin-top: 8px; }
.link-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* ---- Move dialog --------------------------------------------------------- */
.move-tree { border-radius: 12px; border: 1px solid var(--line); padding: 6px; max-height: 360px; overflow-y: auto; }
.move-group { padding: 8px 8px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .03em; color: var(--faint); }
.move-option { display: flex; align-items: center; gap: 8px; width: 100%; height: 36px; padding: 0 8px; border-radius: var(--r-sm);
  font-size: 13.5px; text-align: left; color: var(--ink); }
.move-option:hover { background: var(--hover); }
.move-option[aria-selected="true"] { background: var(--olive-soft); box-shadow: inset 0 0 0 1.5px var(--olive); font-weight: 500; }
.move-option:disabled { opacity: .4; }
.move-option .i { color: var(--muted); }
.move-option[aria-selected="true"] .i { color: var(--olive-ink); }
.move-option .here { margin-left: auto; font-size: 11.5px; color: var(--faint); }

/* ---- Home --------------------------------------------------------------- */
.greet { margin-bottom: 36px; }
.spaces { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.space-card {
  position: relative; display: flex; flex-direction: column; min-height: 124px; padding: 20px; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--surface); box-shadow: var(--e-1); overflow: hidden;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms var(--ease-out);
}
.space-card:hover { border-color: var(--line-strong); box-shadow: var(--e-2); }
@media (hover: hover) { .space-card:hover { transform: translateY(-1px); } }
.space-card.is-feature { grid-row: span 2; min-height: 260px; color: var(--ink);
  background: linear-gradient(145deg, var(--surface) 35%, color-mix(in oklab, var(--olive) 38%, var(--surface)));
  border-color: color-mix(in oklab, var(--olive) 30%, var(--line)); }
.space-card.is-feature::before { content: ""; position: absolute; right: -64px; bottom: -96px; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--olive) 30%, transparent), transparent 70%); pointer-events: none; }
.space-top { display: flex; align-items: flex-start; gap: 16px; }
.space-top .tile { width: 44px; height: 44px; border-radius: 12px; }
.space-card.is-feature .tile { background: var(--olive); color: var(--on-olive); }
.space-name { font-size: 17px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.space-card.is-feature .space-name { font-size: 22px; }
.space-count { margin-top: 2px; font-size: 13px; color: var(--muted); }
.space-card.is-feature .space-count { color: var(--muted); }
.space-arrow { margin-left: auto; color: var(--faint); }
.space-card.is-feature .space-arrow { color: var(--muted); }
.space-foot { position: relative; margin-top: auto; padding-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--muted); }
.space-card.is-feature .space-foot { color: var(--muted); }
.space-subs { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 20px; }
.space-subs span { border-radius: 999px; padding: 4px 12px; font-size: 12.5px; font-weight: 500; color: var(--ink);
  background: color-mix(in oklab, var(--surface) 55%, transparent); box-shadow: inset 0 0 0 1px var(--line); }
.pill { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line);
  font-size: 12px; font-weight: 500; color: var(--ink); }
.space-card.is-feature .pill { border-color: var(--line-strong); color: var(--ink); }
.space-new { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 124px; border-radius: var(--r-lg);
  border: 2px dashed var(--line); color: var(--muted); font-size: 13.5px; font-weight: 500; }
.space-new:hover { border-color: var(--line-strong); color: var(--ink); background: var(--hover); }

.home-foot { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px;
  font-size: 13px; color: var(--muted); }
.home-foot .row { align-items: flex-start; }
@media (min-width: 640px) { .home-foot { flex-direction: row; align-items: center; justify-content: space-between; } }
.home-foot a { font-weight: 500; color: var(--ink); }
.home-foot a:hover { color: var(--olive-ink); }

/* Simple lists used on home / recents / shared / trash / search */
.grid-recents { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) 130px 150px 40px; }
.grid-shared { grid-template-columns: minmax(0, 1fr) 190px 110px 130px 40px; }
.grid-trash { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) 160px 110px 200px; }
.grid-search { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) 120px 110px; }
.grid-home { grid-template-columns: minmax(0, 1fr) 150px 120px 40px; }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 1279.98px) {
  .fgrid { grid-template-columns: 22px minmax(0, 1fr) 128px 72px 80px 80px; }
  .fgrid > .col-access { display: none; }
  /* Room for the folder tree: drop the owner column too. */
  .drive-layout:has(.tree) .fgrid { grid-template-columns: 22px minmax(0, 1fr) 72px 80px 80px; }
  .drive-layout:has(.tree) .fgrid > .col-owner { display: none; }
}
@media (max-width: 1023.98px) {
  /* Same specificity as the folder-tree rule above, or it would win on small screens. */
  .fgrid, .drive-layout:has(.tree) .fgrid { grid-template-columns: 22px minmax(0, 1fr) 72px 80px 40px; }
  .fgrid > .col-owner { display: none; }
  .factions .on-hover { display: none; }
  .spaces { grid-template-columns: 1fr 1fr; }
  .grid-trash { grid-template-columns: minmax(0, 1fr) 140px 110px 190px; }
  .grid-trash > .col-loc { display: none; }
}
@media (max-width: 767.98px) {
  .fgrid, .drive-layout:has(.tree) .fgrid { grid-template-columns: minmax(0, 1fr) 40px; column-gap: 8px; }
  .fgrid > .col-size, .fgrid > .col-date, .fgrid > .col-check { display: none; }
  .fhead { display: none; }
  .fname-sub.on-mobile { display: block; }
  .fname-sub.on-desktop { display: none; }
  .drive.has-selection .fgrid > .col-check { display: block; }
  .drive.has-selection .fgrid, .drive-layout:has(.tree) .drive.has-selection .fgrid { grid-template-columns: 22px minmax(0, 1fr) 40px; }
  .spaces { grid-template-columns: 1fr; }
  .space-card.is-feature { grid-row: auto; min-height: 220px; }
  .grid-recents, .grid-shared, .grid-search, .grid-home { grid-template-columns: minmax(0, 1fr) 40px; }
  .grid-recents > .col-hide-sm, .grid-shared > .col-hide-sm, .grid-search > .col-hide-sm, .grid-home > .col-hide-sm { display: none; }
  .grid-trash { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .grid-trash > .col-hide-sm { display: none; }
  .list-head.grid-recents, .list-head.grid-shared, .list-head.grid-search, .list-head.grid-trash, .list-head.grid-home { display: none; }
  .selbar .btn .btn-label { display: none; }
}
.move-option[data-depth="1"] { padding-left: 26px; }
.move-option[data-depth="2"] { padding-left: 44px; }
.move-option[data-depth="3"] { padding-left: 62px; }
.move-option[data-depth="4"] { padding-left: 80px; }
.move-option[data-depth="5"], .move-option[data-depth="6"], .move-option[data-depth="7"] { padding-left: 98px; }

/* Image thumbnails (grid view only, loaded lazily) */
.tile.has-thumb { position: relative; overflow: hidden; }
.tile .thumb { display: none; }
.drive.is-grid .tile .thumb[src] { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767.98px) { .drive-meta .hint-drop { display: none; } }

/* ---- Home quick-drop zone ------------------------------------------------ */
.quick-drop { display: flex; align-items: center; gap: 14px; width: 100%; margin: -16px 0 32px; padding: 16px 20px; text-align: left;
  border-radius: var(--r-lg); border: 2px dashed var(--line-strong); background: var(--surface); color: var(--ink);
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease; }
.quick-drop:hover { border-color: color-mix(in oklab, var(--olive) 60%, transparent); background: var(--hover); }
.quick-drop .tile { background: var(--olive-soft); color: var(--olive-ink); transition: background 160ms ease, color 160ms ease; }
.quick-drop strong { display: block; font-size: 15px; font-weight: 600; }
.quick-drop .qd-over { display: none; }
.quick-drop .qd-sub { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.quick-drop .qd-hint { font-size: 12.5px; color: var(--faint); max-width: 220px; text-align: right; }
.quick-drop.is-dragover { border-color: var(--olive); background: var(--olive-soft);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--olive) 30%, transparent); }
.quick-drop.is-dragover .tile { background: var(--olive); color: var(--on-olive); }
.quick-drop.is-dragover .qd-idle { display: none; }
.quick-drop.is-dragover .qd-over { display: block; }
.space-card.is-drop { border-color: var(--olive); box-shadow: 0 0 0 3px color-mix(in oklab, var(--olive) 30%, transparent); background: var(--olive-soft); }
@media (max-width: 767.98px) { .quick-drop { margin: -8px 0 28px; padding: 14px 16px; } .quick-drop .qd-hint { display: none; } }
.drive-main .quick-drop { margin: 0 0 16px; padding: 12px 16px; }
.drive-main .quick-drop .qd-hint { max-width: 260px; }
@media (max-width: 767.98px) { .drive-main .quick-drop { margin: 0 0 12px; } }

/* ---- Import dialog ------------------------------------------------------- */
.import-form { display: flex; flex-direction: column; gap: 20px; }
.import-section + .import-section { padding-top: 18px; border-top: 1px solid var(--line); }
.import-title { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.import-title .i { color: var(--muted); }
.import-form .move-tree { max-height: 220px; }
.import-form .setting-title { display: inline-flex; align-items: center; gap: 8px; }
.import-rights .select { width: auto; min-width: min(240px, 100%); max-width: 100%; }
@media (max-width: 639.98px) {
  .import-seg { display: flex; flex-wrap: wrap; width: 100%; }
  .import-seg > * { flex: 1 1 auto; justify-content: center; }
  .dialog-head, .dialog-body, .dialog-foot { padding-left: 16px; padding-right: 16px; }
}
.chip .chip-x { display: grid; place-items: center; width: 18px; height: 18px; margin-right: -6px; border-radius: 50%; color: var(--muted); }
.chip .chip-x:hover { background: var(--hover); color: var(--ink); }

/* ---- Favourite folder ------------------------------------------------------ */
.fav-btn.is-on { color: var(--warn); }
.fav-btn.is-on:hover { color: var(--warn); }
.fav-btn:not(.is-on):hover { color: var(--warn); }
.tree-fav { display: inline-grid; margin-left: auto; color: var(--warn); flex-shrink: 0; }
.space-fav { margin-left: auto; color: var(--warn); }
.space-card.is-placeholder { background: var(--surface); color: var(--ink); border: 2px dashed var(--line-strong); box-shadow: none; }
.space-card.is-placeholder::before { display: none; }
.space-card.is-placeholder .tile { background: color-mix(in oklab, var(--warn) 18%, var(--surface)); color: var(--warn); }
.space-card.is-placeholder .space-name { font-size: 19px; white-space: normal; }
.space-card.is-placeholder .space-count { margin-top: 8px; color: var(--muted); line-height: 1.5; }
.space-card.is-placeholder .space-count .i { vertical-align: -2px; }
.space-card.is-placeholder .space-arrow { color: var(--faint); }
.section-hint { margin-left: 8px; font-size: 13px; font-weight: 500; color: var(--faint); letter-spacing: 0; }