/* OmniCut dashboard — home screen styles on top of style.css tokens.
   The editor locks the page (html,body overflow:hidden); the dashboard
   is a normal scrolling document. */
html:has(.dash-body), body.dash-body { overflow: auto; height: auto; min-height: 100%; }
body.dash-body { user-select: text; }

/* width:100% — the editor body is a flex column, and auto margins on a flex
   item otherwise shrink-wrap it to content width */
.dash { width: 100%; max-width: 1160px; margin: 0 auto; padding: 28px 24px 64px; }

/* hero */
.dash-hero { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 26px 0 18px; }
.dash-hero h1 { margin: 0 0 4px; font-size: 27px;
  font-family: var(--font-brand); font-weight: 500; letter-spacing: -0.01em; }

/* Mono micro-labels, matching the editor's .pane-sub / .clip-badge voice. */
.aspect-badge, .dur-badge, .chip-count, .proj-time {
  font-family: var(--font-mono); font-weight: 400;
}
.btn.lg { padding: 10px 22px; font-size: 15px; border-radius: var(--radius-md); }

/* tabs row (reuses .tabs/.tab) */
.dash-tabs { padding: 0; border-bottom: 1px solid var(--glass-border); margin-bottom: 18px; }

/* grids */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }

/* project cards */
/* Primary surface on this page, so it takes the redesign's raised-panel recipe
   (top-lit gradient + inset hairline) instead of the translucent glass. */
.proj-card { position: relative; text-align: left; padding: 0; overflow: hidden;
  background: linear-gradient(180deg, #1f1f23, #191919);
  border: 1px solid #34343a; border-radius: var(--radius-lg);
  box-shadow: var(--glow-inset);
  cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; }
.proj-card:hover { border-color: var(--accent-border); transform: translateY(-2px);
  box-shadow: var(--glow-inset), var(--shadow-md); }
.proj-cover { position: relative; aspect-ratio: 16 / 9; background: var(--surface); }
.proj-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Neutral, not --brand-gradient-subtle: that resolves to a 14% accent wash,
   which over a whole 16:9 cover reads as a saturated block and fights the
   monochrome. The accent stays reserved for small elements. */
.cover-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: var(--surface-3); }
.cover-ph span { font-size: 34px;
  font-family: var(--font-brand); font-weight: 500; color: var(--muted); opacity: 1; }
.aspect-badge { position: absolute; left: 8px; bottom: 8px; font-size: 10px; letter-spacing: 0.06em;
  padding: 2px 7px; border-radius: 999px; color: var(--text-2);
  background: rgba(9,9,10,0.72); border: 1px solid var(--glass-border); }
.proj-meta { padding: 10px 12px 12px; }
.proj-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.proj-time { font-size: 12px; color: var(--muted); margin-top: 2px; }
.proj-menu { position: absolute; top: 8px; right: 8px; opacity: 0;
  background: rgba(9,9,10,0.72); border-radius: 8px; }
.proj-card:hover .proj-menu, .proj-menu:focus-visible { opacity: 1; }

/* new-project tile */
/* Same reasoning as .cover-ph — neutral fill, accent kept for the + glyph and
   the dashed edge only. */
.new-tile { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; min-height: 100%; aspect-ratio: auto; color: var(--text-2); font: inherit;
  background: var(--surface); border: 1.5px dashed var(--border); }
.new-tile:hover { color: var(--text); border-style: solid; border-color: var(--accent-border); }
.new-plus { font-size: 30px; line-height: 1;
  font-family: var(--font-brand); font-weight: 500; color: var(--accent); }

/* card ⋯ menu popover */
.menu-pop { position: fixed; z-index: 50; min-width: 150px; padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--glass-strong); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-radius: var(--radius-sm, 10px);
  box-shadow: var(--glow-inset), var(--shadow-md); }
.menu-pop button { text-align: left; padding: 7px 10px; font-size: 13px; border: 0;
  border-radius: 7px; background: transparent; color: var(--text-2); cursor: pointer; }
.menu-pop button:hover { background: var(--surface-2); color: var(--text); }
.menu-pop button.danger:hover { background: var(--red-subtle); color: var(--red); }

/* media folder bar + sort */
.media-bar { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.folder-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.folder-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--text-2); cursor: pointer;
  background: var(--glass); border: 1px solid var(--glass-border); border-radius: 999px; }
.folder-chip:hover { color: var(--text); border-color: var(--accent-border); }
.folder-chip.active { color: var(--accent-bright); background: var(--accent-subtle);
  border-color: var(--accent-border); }
.chip-count { font-size: 10px; color: var(--muted);
  background: rgba(9,9,10,0.55); padding: 1px 7px; border-radius: 999px; }
.folder-chip.active .chip-count { color: var(--accent-bright); }

/* media assets */
.asset-card { margin: 0; background: var(--glass); border: 1px solid var(--glass-border);
  box-shadow: var(--glow-inset);
  border-radius: var(--radius-lg); overflow: hidden; }
.asset-thumb { position: relative; aspect-ratio: 16 / 9; background: var(--surface);
  display: flex; align-items: center; justify-content: center; }
.asset-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.asset-glyph { font-size: 30px; opacity: .6; }
.dur-badge { position: absolute; right: 8px; bottom: 8px; font-size: 10px; letter-spacing: 0.06em;
  padding: 2px 7px; border-radius: 999px; color: var(--text-2);
  background: rgba(9,9,10,0.72); border: 1px solid var(--glass-border); }
.asset-card figcaption { padding: 8px 12px; font-size: 13px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }

/* exports */
.export-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg); margin-bottom: 10px; }
.export-name { font-weight: 600; font-size: 14px; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#pvVideo { max-width: min(72vw, 900px); max-height: 60vh; border-radius: 10px;
  background: #000; display: block; }

/* caption styles */
.style-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.style-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
  font-size: 13.5px; font-weight: 600; color: var(--text-2);
  background: var(--glass); border: 1px solid var(--glass-border); border-radius: 999px; }
.style-chip.user { border-color: var(--accent-border); color: var(--text); }
.chip-x { border: 0; background: transparent; color: var(--muted); cursor: pointer;
  font-size: 12px; padding: 0 2px; border-radius: 50%; }
.chip-x:hover { color: var(--red); }

/* states */
.dash-empty, .dash-err { color: var(--muted); padding: 26px 4px; font-size: 14px; }
.dash-err { color: var(--red); }