/* clip-nas — page rules. Everything reusable is already in base.css; this file
   only holds the shapes this app adds: the chrome bar, breadcrumbs, the file
   table, the upload queue and the selection bar. */

/* Several things below are laid out with flex or grid, and a bare `display`
   rule outranks the browser's own `[hidden] { display: none }`. Without this,
   toggling `el.hidden` silently does nothing. */
[hidden] { display: none !important; }

/* Links styled as buttons shouldn't keep the underline. */
a.btn, a.btn:hover { text-decoration: none; }

.top {
  max-width: 1100px; margin: 0 auto; display: flex; align-items: center;
  justify-content: flex-end; gap: 8px; padding: 12px 16px 0;
}
.top .spacer { flex: 1; }
.top .who { font-size: 12px; color: rgb(var(--ink-muted)); margin-right: 2px; }
.top .who b { font-weight: 500; color: rgb(var(--ink-soft)); }

main { max-width: 1100px; margin: 0 auto; padding: 20px 16px 96px; }
h1 { margin: 0; font-size: 40px; line-height: 1.1; }
h2 { margin: 0; font-size: 20px; line-height: 1.2; font-weight: 400; }
.sub { margin: 8px 0 24px; max-width: 560px; font-size: 15px; }

/* --- Focused pages (login, setup, share) --------------------------------- */

.focused { max-width: 420px; margin: 0 auto; padding: 12vh 16px 80px; }
.focused h1 { font-size: 34px; }
.focused .card { padding: 20px; display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.focused .sub { margin: 8px 0 0; }

/* --- Breadcrumbs --------------------------------------------------------- */

.crumbs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; }
.crumbs button {
  border: 0; background: none; padding: 2px 4px; border-radius: 3px; cursor: pointer;
  font: inherit; font-size: 13px; color: rgb(var(--ink-muted));
  transition: color .12s;
}
.crumbs button:hover { color: rgb(var(--accent)); }
.crumbs button:last-child { color: rgb(var(--ink)); font-weight: 500; cursor: default; }
.crumbs button:last-child:hover { color: rgb(var(--ink)); }
.crumbs .sep { color: rgb(var(--paper-border)); font-size: 13px; user-select: none; }

/* --- Toolbar ------------------------------------------------------------- */

.toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 24px 0 10px; flex-wrap: wrap;
}
.toolbar .right { display: flex; gap: 8px; align-items: center; }
.toolbar .input { width: 220px; height: 32px; font-size: 13px; }

/* --- Storage strip ------------------------------------------------------- */

.storage { margin-bottom: 20px; }
.storage .stats { grid-template-columns: repeat(3, 1fr); }
.storage .bar { margin-top: 10px; }
.storage .fill.low { background: rgb(var(--danger)); }

/* --- Drop zone ----------------------------------------------------------- */

.drop .t { font-family: inherit; }
.drop.compact { padding: 18px 20px; }
.drop.compact .t { font-size: 14px; }
.drop svg { display: block; width: 22px; height: 22px; margin: 0 auto 10px; color: rgb(var(--ink-muted)); }
.drop.over svg { color: rgb(var(--accent)); }

/* --- File table ---------------------------------------------------------- */

.files { margin-top: 0; overflow: hidden; }
.files table { table-layout: fixed; }
.files th.c-check, .files td.c-check { width: 34px; padding-right: 0; }
.files th.c-size, .files td.c-size { width: 92px; text-align: right; font-variant-numeric: tabular-nums; }
.files th.c-when, .files td.c-when { width: 168px; }
.files th.c-act, .files td.c-act { width: 116px; text-align: right; padding-left: 0; }
.files td.c-name { overflow: hidden; }

.files tbody tr { cursor: pointer; }
.files tbody tr.sel { background: rgb(var(--accent-soft)); }
.files tbody tr.sel:hover { background: rgb(var(--accent-soft)); }

.nm { display: flex; align-items: center; gap: 9px; min-width: 0; }
.nm svg { width: 16px; height: 16px; flex: none; color: rgb(var(--ink-muted)); }
.nm .folder-ic { color: rgb(var(--accent)); }
.nm span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 14px; color: rgb(var(--ink));
}
.nm .hint { margin-left: 2px; white-space: nowrap; }

.acts { display: flex; gap: 2px; justify-content: flex-end; opacity: 0; transition: opacity .12s; }
tr:hover .acts, tr.sel .acts, .acts:focus-within { opacity: 1; }
.acts button {
  border: 0; background: none; cursor: pointer; color: rgb(var(--ink-muted));
  padding: 4px; border-radius: 3px; line-height: 0;
  transition: color .12s;
}
.acts button svg { width: 15px; height: 15px; }
.acts button:hover { color: rgb(var(--accent)); }
.acts button.del:hover { color: rgb(var(--danger)); }

.files input[type=checkbox] { accent-color: rgb(var(--accent)); cursor: pointer; }

#empty { padding: 40px 20px; text-align: center; font-size: 14px; color: rgb(var(--ink-muted)); }
#empty .label { display: block; margin-bottom: 6px; }

/* --- Upload queue -------------------------------------------------------- */

.queue { margin: 16px 0 0; padding: 12px 14px; }
.queue-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.up { padding: 7px 0; border-bottom: 1px solid rgb(var(--paper-border)); }
.up:last-child { border-bottom: 0; }
.up-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.up-name {
  font-size: 13px; color: rgb(var(--ink)); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.up-meta { font-size: 11px; color: rgb(var(--ink-muted)); white-space: nowrap; font-variant-numeric: tabular-nums; }
.up.err .up-meta { color: rgb(var(--danger)); }

/* --- Selection bar ------------------------------------------------------- */

.selbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 6;
  display: flex; justify-content: center; padding: 0 16px 16px;
  pointer-events: none;
}
.selbar .inner {
  pointer-events: auto; display: flex; align-items: center; gap: 8px;
  padding: 8px 10px 8px 14px; border-radius: 4px;
  border: 1px solid rgb(var(--paper-border)); background: rgb(var(--paper-card));
  box-shadow: 0 10px 30px rgb(0 0 0 / .14);
}
.selbar .label { margin-right: 4px; white-space: nowrap; }

/* --- Preview ------------------------------------------------------------- */

.preview {
  display: flex; align-items: center; justify-content: center;
  background: rgb(var(--paper)); border: 1px solid rgb(var(--paper-border));
  border-radius: 4px; min-height: 180px; padding: 8px; overflow: hidden;
}
.preview img, .preview video { max-width: 100%; max-height: 58vh; display: block; border-radius: 3px; }
.preview audio { width: 100%; }
.preview iframe { width: 100%; height: 58vh; border: 0; background: #fff; }
.preview pre {
  margin: 0; width: 100%; max-height: 58vh; overflow: auto; text-align: left;
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; line-height: 1.55;
  color: rgb(var(--ink-soft)); white-space: pre-wrap; word-break: break-word;
}
.preview .none { font-size: 13px; color: rgb(var(--ink-muted)); }

/* --- Misc ---------------------------------------------------------------- */

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.link-out {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px; border-radius: 4px;
  border: 1px solid rgb(var(--paper-border)); background: rgb(var(--paper));
}
.link-out code {
  flex: 1; min-width: 0; font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px; color: rgb(var(--ink)); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

.steps { counter-reset: step; display: flex; flex-direction: column; gap: 18px; }
.step { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; }
.step .n {
  counter-increment: step; width: 24px; height: 24px; border-radius: 999px;
  border: 1px solid rgb(var(--paper-border)); display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 500; color: rgb(var(--ink-muted));
}
.step .n::before { content: counter(step); }
.step p { margin: 0 0 6px; font-size: 14px; color: rgb(var(--ink-soft)); }
.step p:last-child { margin-bottom: 0; }
.step b { font-weight: 500; color: rgb(var(--ink)); }

.copybox {
  display: flex; align-items: center; gap: 8px; margin: 8px 0 0;
  padding: 8px 10px; border-radius: 4px;
  border: 1px solid rgb(var(--paper-border)); background: rgb(var(--paper));
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; color: rgb(var(--ink));
}
.copybox span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

footer { position: fixed; bottom: 8px; right: 12px; font-size: 12px; color: rgb(var(--ink-muted)); pointer-events: none; }
footer a { pointer-events: auto; color: inherit; text-decoration: none; }
footer a:hover { color: rgb(var(--ink-soft)); text-decoration: underline; }

@media (max-width: 720px) {
  .files th.c-when, .files td.c-when { display: none; }
  .toolbar .input { width: 100%; }
  .toolbar .right { width: 100%; }
  .row2 { grid-template-columns: 1fr; }
  .storage .stats { grid-template-columns: 1fr 1fr; }
  footer { display: none; }
}

/* ==========================================================================
   Clip library
   ========================================================================== */

.segmented { display: flex; border: 1px solid rgb(var(--paper-border)); border-radius: 4px; overflow: hidden; }
.segmented button {
  border: 0; background: none; cursor: pointer; font: inherit; font-size: 13px;
  padding: 6px 14px; color: rgb(var(--ink-muted)); transition: color .12s, background .12s;
  border-right: 1px solid rgb(var(--paper-border));
}
.segmented button:last-child { border-right: 0; }
.segmented button:hover { color: rgb(var(--ink)); }
.segmented button.on { background: rgb(var(--accent-soft)); color: rgb(var(--accent)); font-weight: 500; }

/* Indexing / converting progress */
.idx { margin: 0 0 16px; }
.idx .bar { margin-top: 6px; }

.empty-note {
  padding: 48px 20px; text-align: center; font-size: 14px; color: rgb(var(--ink-muted));
  border: 1px solid rgb(var(--paper-border)); border-radius: 4px; background: rgb(var(--paper-card));
}
.empty-note .label { display: block; margin-bottom: 6px; }
.empty-note code {
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px;
  color: rgb(var(--ink)); background: rgb(var(--paper)); padding: 1px 5px; border-radius: 3px;
}

/* --- Grid ---------------------------------------------------------------- */

.grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
}

.tile {
  position: relative; border: 1px solid rgb(var(--paper-border)); border-radius: 4px;
  background: rgb(var(--paper-card)); overflow: hidden; cursor: pointer;
  transition: border-color .12s;
}
.tile:hover, .tile:focus-visible { border-color: rgb(var(--accent)); outline: none; }

.thumb {
  position: relative; aspect-ratio: 16 / 9; background: #0d0d0f;
  display: flex; align-items: center; justify-content: center;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Badges sit on the poster, so they carry their own contrast rather than
   relying on whatever frame ffmpeg happened to pick. */
.thumb .dur, .thumb .res, .thumb .conv {
  position: absolute; font-size: 11px; line-height: 1; padding: 3px 5px; border-radius: 3px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  background: rgb(0 0 0 / .72); color: #fff; letter-spacing: .02em;
}
.thumb .dur { right: 6px; bottom: 6px; }
.thumb .res { left: 6px; bottom: 6px; }
.thumb .conv { left: 6px; top: 6px; background: rgb(var(--accent)); color: #fff; }
.thumb .conv.bad { background: rgb(var(--danger)); }

.tile-b { padding: 9px 10px 10px; }
.tile-name {
  font-size: 13px; color: rgb(var(--ink)); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tile-meta { margin-top: 3px; font-size: 11px; color: rgb(var(--ink-muted)); }

.tile-acts {
  position: absolute; top: 6px; right: 6px; display: flex; gap: 3px;
  opacity: 0; transition: opacity .12s;
}
.tile:hover .tile-acts, .tile:focus-within .tile-acts { opacity: 1; }
.tile-acts button {
  border: 0; cursor: pointer; line-height: 0; padding: 5px; border-radius: 3px;
  background: rgb(0 0 0 / .72); color: #fff;
}
.tile-acts button svg { width: 14px; height: 14px; }
.tile-acts button:hover { background: rgb(var(--accent)); }
.tile-acts button.del:hover { background: rgb(var(--danger)); }

/* --- Player -------------------------------------------------------------- */

dialog.wide { max-width: 940px; width: calc(100vw - 32px); }

.stage {
  background: #0d0d0f; border: 1px solid rgb(var(--paper-border)); border-radius: 4px;
  display: flex; align-items: center; justify-content: center; min-height: 220px; overflow: hidden;
}
.stage video { width: 100%; max-height: 62vh; display: block; }
.stage-note { padding: 34px 24px; text-align: center; font-size: 13px; color: #b9b9c0; max-width: 460px; }

.meta-row {
  margin-top: 2px; font-size: 12px; color: rgb(var(--ink-muted));
  font-variant-numeric: tabular-nums;
}

/* --- Trim ---------------------------------------------------------------- */

.trim { display: flex; flex-direction: column; gap: 8px; }
.trim-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.trim-head .hint { font-variant-numeric: tabular-nums; }

.trim-bar {
  position: relative; height: 30px; border-radius: 4px; cursor: pointer;
  border: 1px solid rgb(var(--paper-border)); background: rgb(var(--paper));
  touch-action: none; /* so dragging a handle doesn't scroll the page instead */
}
.trim-sel {
  position: absolute; top: 0; bottom: 0; background: rgb(var(--accent-soft));
  border-left: 2px solid rgb(var(--accent)); border-right: 2px solid rgb(var(--accent));
}
/* Wider grab targets than the 2px they look like. */
.trim-sel::before, .trim-sel::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 11px;
}
.trim-sel::before { left: -6px; cursor: ew-resize; }
.trim-sel::after { right: -6px; cursor: ew-resize; }
.trim-play {
  position: absolute; top: -2px; bottom: -2px; width: 2px;
  background: rgb(var(--ink)); pointer-events: none;
}

.trim-ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

@media (max-width: 720px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .trim-ctl .btn { flex: 1 1 auto; }
}