/* ── tokens ──────────────────────────────────────────────────────────── */
/* Dark is the default; the light values are repeated under both the media query
   and an explicit [data-theme], so the manual override wins in either direction
   (R59). Every pair below was measured: 4.5:1 for text, 3:1 for anything a
   pointer or a keyboard has to find (R16). */
:root {
  --bg: #0d1014;
  --bg-sunken: #090b0e;
  --surface: #14181e;
  --surface-2: #1b2027;
  --surface-3: #232932;
  --line: #262d36;
  --line-soft: #1d232b;
  /* Borders a user must actually see — inputs, focusable controls. The hairline
     above is decorative and deliberately stays quieter. */
  --line-strong: #56657a;

  --text: #e6eaf0;
  --text-dim: #98a2b0;
  --text-faint: #76818f;

  --accent: #4da3ff;
  --accent-soft: #4da3ff1f;
  --accent-text: #0b1017;
  --ok: #3ecf8e;
  --warn: #e8b339;
  --bad: #f2637e;

  /* Width of the per-row action column. It has to follow the target size, or
     three 44px touch targets overflow a column sized for 28px ones. */
  --actions-w: 5.7rem;

  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 1px 2px #0006, 0 8px 24px -12px #0009;
  --shadow-lg: 0 24px 60px -20px #000c, 0 2px 8px #0007;

  --ease: cubic-bezier(.32, .72, 0, 1);
  --font: ui-sans-serif, -apple-system, "Segoe UI", Inter, Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  color-scheme: dark;
}

/* The semantic colours are not the dark ones dimmed: green, amber and red all
   had to be darkened hard to clear 4.5:1 on white. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f6f7f9;
    --bg-sunken: #eceef2;
    --surface: #ffffff;
    --surface-2: #f2f4f7;
    --surface-3: #e7eaef;
    --line: #dde1e8;
    --line-soft: #e8ebf0;
    --line-strong: #8795ae;

    --text: #131722;
    --text-dim: #5c6675;
    --text-faint: #6c7788;

    --accent: #0b6dd4;
    --accent-soft: #0b6dd414;
    --accent-text: #ffffff;
    --ok: #218659;
    --warn: #987012;
    --bad: #ea143c;

    --shadow: 0 1px 2px #0f172a12, 0 8px 24px -12px #0f172a26;
    --shadow-lg: 0 24px 60px -20px #0f172a2e, 0 2px 8px #0f172a14;

    color-scheme: light;
  }
}

:root[data-theme="light"] {
  --bg: #f6f7f9;
  --bg-sunken: #eceef2;
  --surface: #ffffff;
  --surface-2: #f2f4f7;
  --surface-3: #e7eaef;
  --line: #dde1e8;
  --line-soft: #e8ebf0;
  --line-strong: #8795ae;

  --text: #131722;
  --text-dim: #5c6675;
  --text-faint: #6c7788;

  --accent: #0b6dd4;
  --accent-soft: #0b6dd414;
  --accent-text: #ffffff;
  --ok: #218659;
  --warn: #987012;
  --bad: #ea143c;

  --shadow: 0 1px 2px #0f172a12, 0 8px 24px -12px #0f172a26;
  --shadow-lg: 0 24px 60px -20px #0f172a2e, 0 2px 8px #0f172a14;

  color-scheme: light;
}

* { box-sizing: border-box; }

/* Several blocks below set a `display`, which beats the browser stylesheet's
   `[hidden] { display: none }`. Without this line the preview overlay and the
   drop zone stay visible for good. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}

/* Until app.js has decided, show neither the sign-in nor the app: that avoids
   a flash of login form for someone who is already signed in. */
body.booting #login,
body.booting #app { display: none; }
body:not(.authed) #app { display: none; }
body.authed #login { display: none; }

button, input { font: inherit; color: inherit; }

::selection { background: var(--accent-soft); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .5rem .85rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background .16s var(--ease), border-color .16s var(--ease),
              transform .12s var(--ease), opacity .16s;
}

.btn svg { width: 17px; height: 17px; flex: none; }
.btn:hover { background: var(--surface-3); }
.btn:active { transform: translateY(.5px) scale(.995); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary {
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
}
.btn-primary:hover { background: color-mix(in oklab, var(--accent) 88%, white); }

.btn-ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--text-dim);
}
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }

.btn-icon { padding: .4rem; }
.btn-tiny { padding: .3rem .55rem; font-size: .8125rem; }
.btn-block { width: 100%; padding: .65rem; }

.spinner {
  display: none;
  width: 15px; height: 15px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.is-busy .spinner { display: block; }
.is-busy .btn-label { display: none; }
@keyframes spin { to { transform: rotate(1turn); } }

/* ── sign in ─────────────────────────────────────────────────────────── */
.login {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  /* Two very diffuse glows: the background breathes with no visible pattern. */
  background:
    radial-gradient(60rem 30rem at 15% -10%, #4da3ff14, transparent 60%),
    radial-gradient(45rem 28rem at 105% 110%, #3ecf8e0f, transparent 60%);
}

.login-card {
  width: 100%;
  max-width: 23rem;
  padding: 2rem 1.75rem 1.75rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: rise .45s var(--ease) both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
}

.login-mark {
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  margin-bottom: 1.1rem;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
}
.login-mark svg { width: 24px; height: 24px; }

.login-card h1 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 640;
  letter-spacing: -.015em;
}

.login-sub {
  margin: .3rem 0 1.5rem;
  color: var(--text-faint);
  font-size: .875rem;
}

.field { display: block; margin-bottom: .9rem; }

.field > span {
  display: block;
  margin-bottom: .35rem;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--text-dim);
}

.field input {
  width: 100%;
  padding: .6rem .7rem;
  background: var(--bg-sunken);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.field input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
}

.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 2.5rem; }

.pw-toggle {
  position: absolute;
  right: .3rem; top: 50%;
  transform: translateY(-50%);
  display: grid; place-items: center;
  width: 2rem; height: 2rem;
  border: 0; border-radius: 8px;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
}
.pw-toggle:hover { color: var(--text); background: var(--surface-2); }
.pw-toggle svg { width: 17px; height: 17px; }
.pw-toggle.is-on { color: var(--accent); }

.login-error {
  margin: 0 0 .9rem;
  padding: .55rem .7rem;
  border-radius: var(--radius);
  background: color-mix(in oklab, var(--bad) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--bad) 35%, transparent);
  color: var(--bad);
  font-size: .8125rem;
}

/* ── frame ───────────────────────────────────────────────────────────── */
.app {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem 1rem;
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid var(--line-soft);
}

.topbar-left { display: flex; align-items: center; gap: .6rem; min-width: 0; flex: 1; }
.topbar-right { display: flex; align-items: center; gap: .5rem; }

.brand { width: 20px; height: 20px; color: var(--accent); flex: none; }

.breadcrumb {
  display: flex; align-items: center; gap: .1rem;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  font-size: .9rem;
}
.breadcrumb::-webkit-scrollbar { display: none; }

.crumb {
  padding: .2rem .4rem;
  border: 0; border-radius: 6px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  white-space: nowrap;
}
.crumb:hover { background: var(--surface-2); color: var(--text); }
.crumb.is-last { color: var(--text); font-weight: 550; cursor: default; }
.crumb.is-last:hover { background: transparent; }
.crumb-sep { color: var(--text-faint); user-select: none; }

.search { position: relative; display: flex; align-items: center; }
.search svg {
  position: absolute; left: .5rem;
  width: 15px; height: 15px;
  color: var(--text-faint);
  pointer-events: none;
}
.search input {
  width: 11rem;
  padding: .4rem .55rem .4rem 1.85rem;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .875rem;
  transition: width .2s var(--ease), border-color .16s;
}
.search input:focus { outline: none; border-color: var(--accent); width: 14rem; }
.search input::-webkit-search-cancel-button { filter: grayscale(1) opacity(.6); }

.user-menu { position: relative; }

.avatar {
  display: grid; place-items: center;
  width: 1.7rem; height: 1.7rem;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: .8125rem;
  font-weight: 650;
  text-transform: uppercase;
}

.popover {
  position: absolute; right: 0; top: calc(100% + .45rem);
  width: 16rem;
  padding: .5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  animation: rise .18s var(--ease) both;
}

.popover-head {
  margin: 0;
  padding: .35rem .5rem .6rem;
  font-size: .8125rem;
  color: var(--text-dim);
}
.popover-head strong { color: var(--text); }

.popover-item {
  display: block; width: 100%;
  padding: .45rem .5rem;
  border: 0; border-radius: 7px;
  background: transparent;
  color: var(--text);
  font-size: .875rem;
  text-align: left;
  cursor: pointer;
}
.popover-item:hover { background: var(--surface-2); }

.quota { padding: .35rem .5rem .6rem; }
.quota-bar {
  height: 5px;
  border-radius: 99px;
  background: var(--surface-3);
  overflow: hidden;
}
.quota-bar span {
  display: block; height: 100%; width: 0;
  border-radius: 99px;
  background: var(--accent);
  transition: width .5s var(--ease), background .3s;
}
.quota-bar span.is-warn { background: var(--warn); }
.quota-bar span.is-bad { background: var(--bad); }
.quota-text { margin: .4rem 0 0; font-size: .75rem; color: var(--text-faint); }

/* ── toolbar ─────────────────────────────────────────────────────────── */
.toolbar {
  display: flex; align-items: center; gap: .5rem;
  padding: .8rem 1rem;
  flex-wrap: wrap;
}
.toolbar-gap { flex: 1; }

.seg {
  display: flex;
  padding: 2px;
  background: var(--surface-2);
  border-radius: 9px;
}
.seg-btn {
  display: grid; place-items: center;
  width: 1.9rem; height: 1.75rem;
  border: 0; border-radius: 7px;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  transition: background .16s, color .16s;
}
.seg-btn svg { width: 16px; height: 16px; }
.seg-btn:hover { color: var(--text); }
.seg-btn.is-on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }

/* ── content ─────────────────────────────────────────────────────────── */
.content { flex: 1; padding: 0 1rem 6rem; }

/* The top bar is sticky, so anything reached by keyboard needs room to clear it
   when the browser scrolls it into view (R44). */
.row, .col-btn, .crumb { scroll-margin-top: 4.5rem; }

.listing { display: flex; flex-direction: column; }

/* list */
.row {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) 6rem 9.5rem var(--actions-w);
  align-items: center;
  gap: .6rem;
  padding: .5rem .6rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .12s;
}
.row:hover { background: var(--surface); }
.row:hover .row-actions,
.row:focus-within .row-actions { opacity: 1; }

.row-icon { display: grid; place-items: center; color: var(--text-faint); }
.row-icon svg { width: 19px; height: 19px; }
.row-icon.is-dir { color: var(--accent); }

.row-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .9rem;
}

.row-size, .row-date {
  font-size: .8125rem;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.row-size { text-align: right; }

.row-actions {
  display: flex; gap: .15rem;
  opacity: 0;
  transition: opacity .14s;
}
.row-actions button, .row-actions a {
  display: grid; place-items: center;
  width: 1.8rem; height: 1.8rem;
  border: 0; border-radius: 7px;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
}
.row-actions button:hover, .row-actions a:hover { background: var(--surface-3); color: var(--text); }
.row-actions .is-danger:hover { color: var(--bad); background: color-mix(in oklab, var(--bad) 14%, transparent); }
.row-actions svg { width: 16px; height: 16px; }

/* grid */
.listing.is-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: .7rem;
}
.listing.is-grid .row {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: .5rem;
  padding: 1.1rem .7rem .8rem;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  text-align: center;
}
.listing.is-grid .row:hover { border-color: var(--line); }
.listing.is-grid .row-icon svg { width: 34px; height: 34px; }
.listing.is-grid .row-name { max-width: 100%; }
.listing.is-grid .row-date { display: none; }
.listing.is-grid .row-size { text-align: center; }
.listing.is-grid .row-actions { opacity: 1; }

.list-head {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) 6rem 9.5rem var(--actions-w);
  gap: .6rem;
  padding: 0 .6rem .4rem;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: .3rem;
}
.listing.is-grid + .list-head, .listing.is-grid .list-head { display: none; }

.col-btn {
  border: 0; background: transparent;
  padding: .2rem 0;
  color: var(--text-faint);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
}
.col-btn:hover { color: var(--text); }
.col-btn.is-sorted { color: var(--accent); }
.col-btn.num { text-align: right; }

/* empty state + skeleton */
.empty {
  display: grid; place-items: center;
  padding: 5rem 1rem;
  text-align: center;
  color: var(--text-faint);
}
.empty svg { width: 46px; height: 46px; margin-bottom: 1rem; opacity: .5; }
.empty-title { margin: 0; font-size: 1rem; color: var(--text-dim); font-weight: 550; }
.empty-sub { margin: .35rem 0 0; font-size: .875rem; max-width: 22rem; }

.skeleton { display: none; padding-top: .3rem; }
body.is-loading .skeleton { display: block; }
body.is-loading .listing, body.is-loading .empty { display: none; }
.skeleton i {
  display: block;
  height: 2.4rem;
  margin-bottom: .35rem;
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 37%, var(--surface) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s infinite linear;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ── upload queue ────────────────────────────────────────────────────── */
.uploads {
  position: fixed;
  right: 1rem; bottom: 1rem;
  z-index: 30;
  width: min(24rem, calc(100vw - 2rem));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: rise .3s var(--ease) both;
}

.uploads-head {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem .7rem;
  border-bottom: 1px solid var(--line-soft);
}
.uploads-head h2 { margin: 0; font-size: .875rem; font-weight: 600; }
.uploads-count { color: var(--text-faint); font-size: .8125rem; flex: 1; }

.uploads-toggle {
  display: grid; place-items: center;
  width: 1.6rem; height: 1.6rem;
  border: 0; border-radius: 6px;
  background: transparent; color: var(--text-dim);
  cursor: pointer;
}
.uploads-toggle:hover { background: var(--surface-2); }
.uploads-toggle svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.uploads.is-collapsed .uploads-toggle svg { transform: rotate(-90deg); }
.uploads.is-collapsed .uploads-body { display: none; }

.uploads-body { max-height: min(22rem, 50vh); overflow-y: auto; }

.up {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .1rem .5rem;
  padding: .55rem .7rem;
  border-bottom: 1px solid var(--line-soft);
}
.up:last-child { border-bottom: 0; }

.up-name {
  grid-column: 1;
  font-size: .8125rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.up-ctl { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: .1rem; }
.up-ctl button {
  display: grid; place-items: center;
  width: 1.6rem; height: 1.6rem;
  border: 0; border-radius: 6px;
  background: transparent; color: var(--text-faint); cursor: pointer;
}
.up-ctl button:hover { background: var(--surface-3); color: var(--text); }
.up-ctl svg { width: 15px; height: 15px; }

.up-meta {
  grid-column: 1;
  display: flex; gap: .5rem;
  font-size: .75rem;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.up-meta .is-bad { color: var(--bad); }
.up-meta .is-ok { color: var(--ok); }

.up-bar {
  grid-column: 1 / -1;
  height: 3px;
  margin-top: .35rem;
  border-radius: 99px;
  background: var(--surface-3);
  overflow: hidden;
}
.up-bar span {
  display: block; height: 100%; width: 0;
  border-radius: 99px;
  background: var(--accent);
  transition: width .25s var(--ease);
}
.up.is-done .up-bar span { background: var(--ok); }
.up.is-failed .up-bar span { background: var(--bad); }

.uploads-total { height: 2px; background: var(--surface-3); }
.uploads-total span {
  display: block; height: 100%; width: 0;
  background: var(--accent);
  transition: width .3s var(--ease);
}

/* ── drag and drop ───────────────────────────────────────────────────── */
.dropzone {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  padding: 1.5rem;
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  backdrop-filter: blur(3px);
}
.dropzone-inner {
  display: grid; place-items: center; gap: .8rem;
  width: 100%; max-width: 34rem;
  padding: 3.5rem 2rem;
  border: 2px dashed var(--accent);
  border-radius: var(--radius-lg);
  background: var(--accent-soft);
  color: var(--accent);
  animation: pop .2s var(--ease) both;
}
@keyframes pop { from { transform: scale(.97); opacity: 0; } }
.dropzone-inner svg { width: 38px; height: 38px; }
.dropzone-inner p { margin: 0; font-weight: 600; }

/* ── preview ─────────────────────────────────────────────────────────── */
.modal {
  position: fixed; inset: 0; z-index: 70;
  display: flex; flex-direction: column;
  background: color-mix(in oklab, var(--bg-sunken) 94%, transparent);
  backdrop-filter: blur(8px);
  animation: rise .2s var(--ease) both;
}
.modal-bar {
  display: flex; align-items: center; gap: .5rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--line-soft);
}
.modal-name {
  flex: 1; margin: 0;
  font-size: .875rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.modal-stage {
  flex: 1;
  display: grid; place-items: center;
  padding: 1rem;
  min-height: 0;
}
.modal-stage video, .modal-stage img {
  max-width: 100%; max-height: 100%;
  border-radius: var(--radius);
  background: #000;
}
.modal-stage pre {
  max-width: 60rem; max-height: 100%;
  margin: 0; padding: 1rem;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: 400 13px/1.6 var(--mono);
  white-space: pre-wrap;
}

/* ── dialogs (stand in for the browser's confirm/prompt) ─────────────── */
.sheet {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center;
  padding: 1.5rem;
  background: color-mix(in oklab, var(--bg-sunken) 72%, transparent);
  backdrop-filter: blur(4px);
  animation: rise .16s var(--ease) both;
}

.sheet-card {
  width: 100%; max-width: 22rem;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.sheet-card h2 {
  margin: 0 0 .4rem;
  font-size: 1.0625rem;
  font-weight: 620;
  letter-spacing: -.01em;
}

.sheet-msg {
  margin: 0 0 1rem;
  font-size: .875rem;
  color: var(--text-dim);
  overflow-wrap: anywhere;
}

.sheet-input {
  width: 100%;
  margin-bottom: 1rem;
  padding: .55rem .7rem;
  background: var(--bg-sunken);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
.sheet-input:focus { outline: none; border-color: var(--accent); background: var(--surface); }

.sheet-actions {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: .6rem;
}

/* The accounts panel holds two action areas: the form's own submit, and the
   dialog's dismiss. Sitting flush against each other they read as one group and
   the wrong button looks like the way out, so the dismiss is separated. */
.acc-new + .sheet-actions {
  margin-top: 1.15rem;
  padding-top: .9rem;
  border-top: 1px solid var(--line-soft);
}

.sheet-card.is-wide { max-width: 34rem; }

.sheet-hint {
  margin: .5rem 0 1rem;
  font-size: .75rem;
  color: var(--text-faint);
}

/* ── account list ───────────────────────────────────────────────────── */
.acc-list {
  margin-bottom: 1rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
}

.acc {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--line-soft);
}
.acc:last-child { border-bottom: 0; }
.acc:hover { background: var(--surface-2); }

.acc-id {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: .4rem;
  font-size: .875rem;
  flex-wrap: wrap;
}
.acc-id em { color: var(--text-faint); font-size: .75rem; font-style: normal; }

.tag {
  padding: .05rem .35rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: .6875rem;
  font-weight: 600;
}

/* Clickable on purpose: the confinement folder is changed in place. */
.acc-root {
  border: 0;
  padding: .1rem .4rem;
  border-radius: 6px;
  background: var(--surface-3);
  color: var(--text-dim);
  font: 400 .75rem/1.6 var(--mono);
  cursor: pointer;
}
.acc-root:hover { color: var(--text); outline: 1px solid var(--line); }

.acc-act { display: flex; gap: .1rem; }
.acc-act button {
  display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem;
  border: 0; border-radius: 7px;
  background: transparent;
  color: var(--text-faint);
  font-size: .875rem;
  cursor: pointer;
}
.acc-act button:hover { background: var(--surface-3); color: var(--text); }
.acc-act .is-danger:hover { color: var(--bad); background: color-mix(in oklab, var(--bad) 14%, transparent); }
.acc-act svg { width: 15px; height: 15px; }

/* One column: labels and their hints read badly side by side, and it is what a
   narrow screen collapses to anyway (R89). */
.acc-new { display: block; }
.acc-new .field { margin-bottom: .7rem; }
.acc-new input[type="text"], .acc-new input[type="password"] {
  width: 100%;
  padding: .5rem .65rem;
  background: var(--bg-sunken);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: .875rem;
  min-width: 0;
}
.acc-new input:focus { outline: none; border-color: var(--accent); }
.acc-new button[type="submit"] { width: 100%; margin-top: .3rem; }
.acc-check {
  display: flex; align-items: center; gap: .4rem;
  margin-bottom: .6rem;
  font-size: .8125rem;
  color: var(--text-dim);
}




.btn-danger {
  background: var(--bad);
  color: #fff;
  font-weight: 600;
}
.btn-danger:hover { background: color-mix(in oklab, var(--bad) 88%, black); }

/* ── notices ─────────────────────────────────────────────────────────── */
.toasts {
  position: fixed; left: 50%; bottom: 1.25rem;
  z-index: 90;
  transform: translateX(-50%);
  display: flex; flex-direction: column; gap: .4rem;
  align-items: center;
  pointer-events: none;
}
.toast {
  padding: .55rem .9rem;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  font-size: .8125rem;
  animation: rise .22s var(--ease) both;
}
.toast.is-bad { border-color: color-mix(in oklab, var(--bad) 45%, transparent); color: var(--bad); }
.toast.is-ok { border-color: color-mix(in oklab, var(--ok) 40%, transparent); color: var(--ok); }

/* ── small screens ───────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .row { grid-template-columns: 2.2rem minmax(0, 1fr) var(--actions-w); }
  .list-head { grid-template-columns: 2.2rem minmax(0, 1fr) var(--actions-w); }
  /* Rows and header must drop the same two columns, or the header folds. */
  .row-size, .row-date,
  .list-head .col-size, .list-head .col-date { display: none; }
  .listing.is-grid .row-size { display: block; }
  .row-actions { opacity: 1; }
  .search input { width: 8rem; }
  .search input:focus { width: 10rem; }
  .toolbar { padding: .7rem; }
  .content { padding: 0 .7rem 7rem; }
  .topbar { padding: .6rem .7rem; }
  .uploads { right: .5rem; left: .5rem; bottom: .5rem; width: auto; }
}


/* ── touch, keyboard, motion ────────────────────────────────────────── */

/* R43: 44px on a finger. The visual size stays as drawn — padding does the
   growing — so the desktop density is untouched. */
@media (pointer: coarse) {
  :root { --actions-w: 8.6rem; }

  .row-actions button, .row-actions a,
  .acc-act button,
  .up-ctl button,
  .uploads-toggle,
  .pw-toggle,
  .seg-btn {
    min-width: 44px;
    min-height: 44px;
  }
  .btn { min-height: 44px; }
  .crumb { padding: .5rem .55rem; }
}

/* R89/R44: at 320px everything is one column and nothing scrolls sideways. */
@media (max-width: 420px) {
  .toolbar > .btn { flex: 1 1 100%; }
  .toolbar .seg { margin-left: auto; }
  .sheet { padding: .6rem; }
  .sheet-card { padding: 1rem; }
  .login-card { padding: 1.5rem 1.1rem 1.25rem; }
  .modal-name { font-size: .8125rem; }
}

/* R81: the page behind a dialog is inert, so Tab cannot wander out of it. */
body.has-dialog .app,
body.has-dialog .login { pointer-events: none; }
body.has-dialog .app > *:not(.sheet) { user-select: none; }

/* A field that failed validation says so in text as well as colour (R18/R28). */
.field-error {
  display: flex;
  align-items: flex-start;
  gap: .35rem;
  margin: .3rem 0 0;
  color: var(--bad);
  font-size: .75rem;
}
.field-error svg { width: 13px; height: 13px; flex: none; margin-top: .15rem; }
.field input[aria-invalid="true"],
.sheet-input[aria-invalid="true"] { border-color: var(--bad); }

.field-hint {
  margin: .3rem 0 0;
  font-size: .75rem;
  color: var(--text-faint);
}

/* Theme switch inside the account menu. */
.theme-row {
  display: flex; align-items: center; gap: .5rem;
  padding: .45rem .5rem;
  font-size: .875rem;
}
.theme-row > span { flex: 1; color: var(--text); }
.theme-seg { display: flex; padding: 2px; background: var(--surface-2); border-radius: 8px; }
.theme-seg button {
  padding: .25rem .5rem;
  border: 0; border-radius: 6px;
  background: transparent;
  color: var(--text-faint);
  font-size: .75rem;
  cursor: pointer;
}
.theme-seg button:hover { color: var(--text); }
.theme-seg button.is-on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }


/* ── link mode ──────────────────────────────────────────────────────── */

/* Reached through /s/<token>: same application, most of it taken away. */
body.is-link .user-menu,
body.is-link .search,
body.is-link #newFolder,
body.is-link #pickFolder,
body.is-link [data-share],
body.is-link [data-rename],
body.is-link [data-del] { display: none; }

/* A drop link shows no listing at all — that is the point of it. */
body.link-drop .listing,
body.link-drop .seg { display: none; }
body.link-drop .empty { display: grid; }

body.link-share .toolbar > .btn { display: none; }

.link-out {
  display: flex; gap: .4rem; align-items: center;
  margin: .2rem 0 1rem;
}
.link-out input {
  flex: 1; min-width: 0;
  padding: .5rem .6rem;
  background: var(--bg-sunken);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font: 400 .8125rem/1.4 var(--mono);
}

.field select {
  width: 100%;
  padding: .55rem .6rem;
  background: var(--bg-sunken);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: .875rem;
}
.field select:focus { outline: none; border-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}