/* Stillhaven console — calm, creator-first, considered.
   Sage leads; clay only for play/CTA; square corners throughout. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: 1.5;
}

a {
  color: var(--color-link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1 {
  font-size: var(--text-h1);
  font-weight: var(--weight-semibold);
  margin: 0 0 0.25rem;
}

h2 {
  font-size: var(--text-h2);
  font-weight: var(--weight-semibold);
  margin: 0 0 0.75rem;
}

.muted {
  color: var(--color-text-muted);
  font-size: var(--text-caption);
}

/* ---- Top bar ---------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.5rem;
  border-bottom: 1px solid var(--n-200);
  background: var(--paper);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
}

.brand:hover {
  text-decoration: none;
}

.brand-mark {
  display: inline-flex;
  width: 32px;
  height: 32px;
}

.brand-word {
  font-weight: var(--weight-medium);
  font-size: 1.15rem;
  letter-spacing: 0.2px;
}

.brand-word-accent {
  color: var(--sage-500);
}

.topnav {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}

.topnav-user {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}

/* ---- Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-box);
  border: 1px solid transparent;
  font: inherit;
  font-weight: var(--weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn:hover {
  text-decoration: none;
}

.btn:focus-visible {
  outline: 2px solid var(--sage-700);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--sage-500);
  color: #fff;
}

.btn-primary:hover {
  background: var(--sage-600);
}

/* Clay is reserved for the primary action / play — used sparingly. */
.btn-accent {
  background: var(--clay);
  color: #fff;
}

.btn-accent:hover {
  background: var(--clay-dark);
}

.btn-ghost {
  background: transparent;
  border-color: var(--n-300);
  color: var(--ink);
}

.btn-ghost:hover {
  background: var(--n-100);
}

.btn-block {
  width: 100%;
}

/* A button-shaped thing that is deliberately not actionable right now — rendered as a <span>, so
   it can't be clicked, focused or submitted, and reads as unavailable rather than broken. */
.btn.is-disabled {
  background: transparent;
  border-color: var(--n-200);
  color: var(--n-400);
  cursor: default;
}

/* ---- Layout ----------------------------------------------------------- */
.container {
  flex: 1;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* ---- Cards ------------------------------------------------------------ */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.card {
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-box);
  padding: 1.25rem;
}

.card-wide {
  grid-column: 1 / -1;
}

.card-title {
  font-size: var(--text-h2);
}

.metric {
  margin: 0.25rem 0 0.5rem;
}

.metric-num {
  font-size: 2rem;
  font-weight: var(--weight-bold);
  color: var(--sage-600);
}

.metric-unit {
  color: var(--color-text-muted);
  font-size: var(--text-caption);
}

/* ---- Empty state ------------------------------------------------------ */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  padding: 2.5rem 1rem;
  border: 1px dashed var(--n-300);
  color: var(--color-text-muted);
}

/* ---- Auth ------------------------------------------------------------- */
.auth {
  display: flex;
  justify-content: center;
  padding-top: 3rem;
}

.auth-box {
  width: 100%;
  max-width: 360px;
  background: #fff;
  border: 1px solid var(--n-200);
  padding: 2rem;
}

.alert {
  background: var(--clay-tint);
  color: var(--clay-dark);
  padding: 0.6rem 0.8rem;
  font-size: var(--text-caption);
}

code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--n-100);
  padding: 0.1em 0.35em;
}

/* ---- Video list ------------------------------------------------------- */
.video-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.video-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--n-200);
}

.video-row:last-child {
  border-bottom: 0;
}

.video-title {
  font-weight: var(--weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.badge {
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--n-300);
  color: var(--n-700);
}

.badge-ready {
  background: var(--sage-100);
  border-color: var(--sage-300);
  color: var(--sage-700);
}

.badge-processing,
.badge-uploading,
.badge-scanning {
  background: var(--n-100);
  border-color: var(--n-300);
  color: var(--n-700);
}

/* Under review: waiting on a person, not a failure. Clay rather than the red used for `failed`,
   so it reads as "paused" instead of "something broke". `blocked` shares the failed treatment
   because for the uploader it is an outcome, not a wait. */
.badge-held {
  background: #f6ece3;
  border-color: var(--clay);
  color: #8a4e28;
}

.badge-blocked {
  background: #f7e8e6;
  border-color: #b85f53;
  color: #7a3028;
}

.badge-failed {
  background: #f7e8e6;
  border-color: #b85f53;
  color: #7a3028;
}

/* ---- Public share page ------------------------------------------------ */
/* --bar-bg / --bar-fg are theming hooks (paid plans override them later). */
.share-body {
  --bar-bg: var(--sage-900);        /* top bar */
  --bar-bottom-bg: var(--sage-700); /* bottom bar — lighter, same family */
  --bar-fg: var(--paper);
  --stage-bg: #fff;                 /* video stage in the middle (paid theming overrides) */
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--stage-bg);
}

.share-bar {
  width: 100%;
  color: var(--bar-fg);
}

.share-bar-top {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.5rem;
  background: var(--bar-bg);
}

.share-bar-bottom {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0.6rem 1.5rem;
  background: var(--bar-bottom-bg);
}

.share-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

/* Custom account logo (Advanced+) replacing the Stillhaven lockup on share pages. */
.share-logo-custom {
  max-height: 32px;
  max-width: 220px;
  display: block;
}

/* Rich-text description editor (video page) */
.rte {
  border: 1px solid var(--n-300);
  border-radius: var(--radius-box);
  overflow: hidden;
  background: #fff;
}
.rte-toolbar {
  display: flex;
  gap: 0.15rem;
  padding: 0.3rem;
  background: var(--n-100);
  border-bottom: 1px solid var(--n-200);
}
.rte-btn {
  border: 0;
  background: transparent;
  padding: 0.2rem 0.5rem;
  min-width: 1.9rem;
  font: inherit;
  color: var(--ink);
  border-radius: 3px;
  cursor: pointer;
}
.rte-btn:hover { background: var(--n-200); }
.rte-area {
  min-height: 4.5rem;
  max-height: 12rem;
  overflow: auto;
  padding: 0.6rem 0.7rem;
  line-height: 1.5;
  outline: none;
}
.rte-area:empty::before {
  content: "Add a description…";
  color: var(--gray);
}
.rte-area ul, .rte-area ol { margin: 0.3rem 0 0.3rem 1.25rem; padding: 0; }
.rte-area p { margin: 0 0 0.4rem; }
.rte-foot { display: flex; justify-content: flex-end; margin: 0.35rem 0 0.6rem; }
.rte-count.is-over { color: #a2402f; font-weight: var(--weight-medium); }

/* Profile / business details forms */
.field textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-box);
  font: inherit;
  background: #fff;
  resize: vertical;
}
.field input:disabled {
  background: var(--n-100);
  color: var(--n-700);
}
.field small {
  display: block;
  margin-top: 0.3rem;
}
.stacked-form .field {
  max-width: 32rem;
}
.slug-input {
  display: flex;
  align-items: stretch;
  max-width: 32rem;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-box);
  overflow: hidden;
  background: #fff;
}
.slug-prefix,
.slug-suffix {
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
  background: var(--n-100);
  color: var(--gray);
  font-size: var(--text-caption);
  white-space: nowrap;
}
.slug-input input[type="text"] {
  flex: 1;
  min-width: 4rem;
  border: 0;
  border-radius: 0;
  padding: 0.5rem 0.4rem;
}
.slug-hint {
  display: block;
  margin-top: 0.3rem;
  font-weight: var(--weight-medium);
}
.slug-hint.checking { color: var(--gray); }
.slug-hint.is-ok { color: var(--sage-600); }
.slug-hint.is-bad { color: #a2402f; }

/* Share page: a title row sits above the video. The title is on the left; when the video
   has downloadable files (the video itself and/or attachments) a downloads dropdown sits to
   its right. The video stays centered below at full width. */
.share-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.share-head .share-title { margin: 0; }

.share-downloads { position: relative; flex-shrink: 0; }
.share-downloads-toggle {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.5rem 0.85rem; font: inherit; cursor: pointer;
  background: #fff; border: 1px solid var(--n-300); border-radius: var(--radius-box); color: var(--ink);
}
.share-downloads-toggle:hover { border-color: var(--sage-400); background: var(--sage-50); }
.share-dl-chev { transition: transform 0.15s ease; }
.share-downloads-toggle[aria-expanded="true"] .share-dl-chev { transform: rotate(180deg); }
.share-downloads-menu {
  position: absolute; right: 0; z-index: 5; margin: 0.35rem 0 0; padding: 0.3rem; list-style: none;
  min-width: 240px; max-width: 340px; background: #fff; border: 1px solid var(--n-200);
  border-radius: var(--radius-box); box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}
.share-downloads-menu[hidden] { display: none; }
.share-downloads-menu a {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.6rem; text-decoration: none; color: var(--ink); border-radius: var(--radius-box);
}
.share-downloads-menu a:hover { background: var(--sage-50); }
.share-downloads-menu svg { flex-shrink: 0; color: var(--gray); }
.share-dl-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.share-dl-row { display: flex; align-items: baseline; gap: 0.6rem; }
.share-dl-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-dl-meta { color: var(--gray); font-size: var(--text-caption); flex-shrink: 0; }
.share-dl-desc { font-size: var(--text-caption); color: var(--gray); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-downloads-toggle:focus-visible,
.share-downloads-menu a:focus-visible {
  outline: 2px solid var(--sage-500); outline-offset: 2px; border-radius: var(--radius-box);
}

/* Video description, shown below the player when the creator enabled it. */
.share-desc {
  color: var(--ink);
  line-height: 1.55;
  margin: 0.9rem auto 0;
  max-width: 760px;
  width: 100%;
}
.share-desc p { margin: 0 0 0.5rem; }
.share-desc p:last-child { margin-bottom: 0; }
.share-desc ul, .share-desc ol { margin: 0.3rem 0 0.3rem 1.25rem; padding: 0; }

/* Attachments listed on the share page (the only place viewers download them). */
.share-attach {
  margin: 1.25rem auto 0;
  max-width: 640px;
  text-align: left;
}
.share-attach-title {
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray);
  margin: 0 0 0.5rem;
}
.share-attach-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.share-attach-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-box);
  background: #fff;
  color: var(--ink);
  text-decoration: none;
}
.share-attach-item:hover {
  border-color: var(--sage-400);
  background: var(--sage-50);
}
.share-attach-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.share-attach-size {
  color: var(--gray);
  font-size: var(--text-caption);
  flex-shrink: 0;
}

/* Opt-in "download the video" affordance on the share page. */
.share-download {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}
.btn-download {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.share-word {
  font-weight: var(--weight-medium);
  font-size: 1.15rem;
  letter-spacing: 0.2px;
  color: var(--bar-fg);
}

.share-word-accent {
  color: var(--sage-400);
}

.share-powered {
  color: var(--n-300);
  font-size: var(--text-caption);
  text-decoration: none;
}

.share-powered:hover {
  color: var(--bar-fg);
  text-decoration: none;
}

.share-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
}

.share-content {
  width: 100%;
  max-width: 640px;
}
/* Video share pages: size the content (= the player width) to fill the viewport, so the
   video is as large as fits between the bars instead of a small box in a sea of white on
   large screens. The height term reserves room for the two bars + the title row above; the
   1707px cap keeps a 16:9 player from exceeding ~960px tall on very large (27"+) screens. */
.share-content--video {
  max-width: min(70vw, calc((100dvh - 8rem) * 16 / 9), 1707px);
}

.share-title {
  color: var(--ink);
  font-size: var(--text-h2);
  font-weight: var(--weight-semibold);
  margin: 0 0 0.75rem;
}

.share-sub {
  color: var(--color-text-muted);
  font-size: var(--text-caption);
}

/* ---- Video page ------------------------------------------------------- */
.breadcrumb {
  margin: 0 0 0.5rem;
  font-size: var(--text-caption);
}

.video-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 760px) {
  .video-layout {
    grid-template-columns: 1fr;
  }
}

.player {
  width: 100%;
  background: var(--ink);
  aspect-ratio: 16 / 9;
  display: block;
}

/* Portrait videos: tall player instead of an extreme pillarbox in a 16:9 frame. */
.player--portrait {
  aspect-ratio: 9 / 16;
  max-height: 70vh;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
}

.video-actions {
  display: flex;
  /* Buttons are white-space: nowrap, and this row sits in a grid column that can get narrow —
     without wrapping the row simply overflowed into the sidebar instead of reflowing. */
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.video-side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.detail-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1rem;
  margin: 0;
  font-size: var(--text-caption);
}

.detail-list dt {
  color: var(--color-text-muted);
}

.detail-list dd {
  margin: 0;
  text-align: right;
  font-weight: var(--weight-medium);
}

/* ---- Modal + upload --------------------------------------------------- */
.modal[hidden] {
  display: none;
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 26, 0.45); /* --ink at 45% opacity */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 50;
}

.modal-box {
  background: #fff;
  width: 100%;
  max-width: 460px;
  padding: 1.5rem;
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.modal-head h2 {
  margin: 0;
}

.modal-close {
  background: none;
  border: 0;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-muted);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: -0.5rem -0.5rem -0.5rem 0;
}

.modal-close:focus-visible {
  outline: 2px solid var(--sage-700);
  outline-offset: 2px;
}

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

.field > span {
  display: block;
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  margin-bottom: 0.3rem;
}

.field input[type="file"],
.field select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-box);
  font: inherit;
  background: #fff;
}

.field-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.field-check > span {
  margin: 0;
  font-weight: var(--weight-regular);
}

.progress {
  height: 8px;
  background: var(--n-200);
  margin-bottom: 0.5rem;
}

.progress[hidden] {
  display: none;
}

.progress-bar {
  height: 100%;
  width: 0;
  background: var(--sage-500);
  transition: width 0.2s ease;
}

.upload-status {
  min-height: 1.2em;
  margin: 0 0 1rem;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

/* ---- Footer ----------------------------------------------------------- */
.site-footer {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--n-200);
  text-align: center;
}

.tagline {
  text-transform: lowercase;
  letter-spacing: var(--tagline-tracking);
  color: var(--color-text-muted);
  font-size: var(--text-caption);
}

/* ======================================================================
   App shell (sidebar layout)
   ====================================================================== */
.app {
  flex: 1;
  display: grid;
  grid-template-columns: 232px 1fr;
  min-height: 0;
}

.sidebar {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-right: 1px solid var(--n-200);
  padding: 1.25rem 0.75rem;
  overflow-y: auto; /* folder list scrolls independently when long */
}

.side-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.side-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.side-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  color: var(--ink);
  font-weight: var(--weight-medium);
  font-size: 0.95rem;
}

.side-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.side-link.is-disabled .side-icon {
  stroke-width: 1.6;
}

a.side-link:hover {
  background: var(--n-100);
  text-decoration: none;
}

.side-link.is-active {
  background: var(--sage-100);
  color: var(--sage-700);
}

.side-link.is-disabled {
  color: var(--n-400);
  cursor: default;
}

.side-label {
  margin: 1.1rem 0.75rem 0.25rem;
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.soon {
  margin-left: auto;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--n-400);
  border: 1px solid var(--n-300);
  padding: 0 4px;
  line-height: 1.6;
}

.side-foot {
  padding: 0.75rem;
}

.app-main {
  min-width: 0;
  padding: 2rem;
  overflow-y: auto; /* content scrolls; sidebar + topbar stay put */
}

/* App shell fills the viewport so the sidebar and main scroll independently. */
body.has-shell {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* ======================================================================
   Stat tiles
   ====================================================================== */
.stat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.tile {
  background: #fff;
  border: 1px solid var(--n-200);
  border-top: 2px solid var(--sage-300);
  padding: 1.1rem 1.25rem;
}

.tile-num {
  display: block;
  font-size: 1.9rem;
  font-weight: var(--weight-bold);
  color: var(--sage-600);
  line-height: 1.1;
  margin-bottom: 0.15rem;
}

.tile-label {
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

/* ======================================================================
   Video grid (thumbnail cards)
   ====================================================================== */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
}

.vcard {
  position: relative;
  background: #fff;
  border: 1px solid var(--n-200);
  transition: border-color 0.15s ease;
}

.vcard:hover {
  border-color: var(--n-300);
}

.vcard-link {
  display: block;
  color: inherit;
}

.vcard-link:hover {
  text-decoration: none;
}

.vcard-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--sage-900);
  overflow: hidden;
}

.vcard-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Portrait posters: fit the whole frame (pillarboxed on the sage backdrop)
   instead of cropping the top and bottom off a vertical clip. */
.vcard-thumb--portrait img {
  object-fit: contain;
}

.vcard-thumb-empty {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--sage-200), var(--sage-400));
}

.vcard-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.35));
}

.vcard-play svg {
  width: 100%;
  height: 100%;
  display: block;
}

.vcard:hover .vcard-play {
  background: var(--clay-dark);
}

.vcard-badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(255, 255, 255, 0.92);
}

/* Favorite star (top-left): always shown when favorited, on hover otherwise. */
.vcard-fav {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--n-200);
  color: var(--n-700);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.vcard-fav svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.vcard:hover .vcard-fav,
.vcard-fav:focus-visible {
  opacity: 1;
}

.vcard-fav.is-fav {
  opacity: 1;
  color: var(--clay);
}

.vcard-fav.is-fav svg {
  fill: var(--clay);
}

@media (hover: none) {
  .vcard-fav {
    opacity: 1;
  }
}

.fav-sort {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-caption);
}

.fav-sort select {
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-box);
  font: inherit;
  background: #fff;
}

/* Player color controls (video override + folder) */
.player-color {
  margin-top: 0.9rem;
}

.player-color .opt-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
}

.player-color-row,
.folder-color-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--text-caption);
}

.folder-color-bar {
  margin-bottom: 1.5rem;
  padding: 0.55rem 0.8rem;
  background: #fff;
  border: 1px solid var(--n-200);
}

input[type="color"] {
  width: 38px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-box);
  background: #fff;
  cursor: pointer;
}

.link-btn {
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-link);
  font: inherit;
  font-size: var(--text-caption);
  cursor: pointer;
  text-decoration: underline;
}

.video-fav {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  background: none;
  border: 1px solid var(--n-300);
  color: var(--n-700);
  font: inherit;
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  cursor: pointer;
}

.video-fav svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.video-fav:hover {
  border-color: var(--clay);
}

.video-fav.is-fav {
  color: var(--clay);
  border-color: var(--clay);
}

.video-fav.is-fav svg {
  fill: var(--clay);
}

.vcard-meta {
  display: block;
  padding: 0.7rem 0.8rem;
}

.vcard-title {
  display: block;
  font-weight: var(--weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vcard-sub {
  display: block;
  font-size: var(--text-caption);
}

.vcard-copy {
  position: absolute;
  /* Offset slightly so the 44px target stays within the card. */
  top: 4px;
  right: 4px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--n-200);
  color: var(--n-700);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.vcard:hover .vcard-copy,
.vcard-copy:focus-visible {
  opacity: 1;
}

/* Touch devices have no hover — keep the quick-copy button visible. */
@media (hover: none) {
  .vcard-copy {
    opacity: 1;
  }
}

.vcard-copy.is-copied {
  color: var(--sage-600);
  border-color: var(--sage-400);
}

/* ======================================================================
   Dropzone
   ====================================================================== */
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
  padding: 1.75rem 1rem;
  border: 1px dashed var(--n-300);
  color: var(--color-text-muted);
  cursor: pointer;
  margin-bottom: 1rem;
}

.dropzone.is-active {
  border-color: var(--sage-500);
  background: var(--sage-50);
  color: var(--sage-700);
}

.dz-link {
  color: var(--color-link);
  text-decoration: underline;
}

.dz-hint {
  font-size: 0.8125rem;
}

.dz-filename {
  font-weight: var(--weight-medium);
  color: var(--ink);
}

.dz-filename:empty {
  display: none;
}

.empty-lg {
  padding: 3.5rem 1rem;
  margin-bottom: 1.5rem;
}

/* ======================================================================
   Video page — head + play funnel
   ====================================================================== */
.video-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.video-head h1 {
  margin: 0;
}

.funnel {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.funnel-row {
  display: grid;
  grid-template-columns: max-content 1fr 2.5rem;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--text-caption);
}

.funnel-label {
  color: var(--color-text-muted);
}

.funnel-track {
  height: 6px;
  background: var(--n-100);
  overflow: hidden;
}

.funnel-fill {
  display: block;
  height: 100%;
  min-width: 1px;
  background: var(--sage-600);
}

.funnel-val {
  text-align: right;
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
}

/* ======================================================================
   Responsive — sidebar collapses to a top strip
   ====================================================================== */
@media (max-width: 760px) {
  .app {
    grid-template-columns: 1fr;
  }

  .sidebar {
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--n-200);
    padding: 0.4rem 0.75rem;
  }

  .side-nav {
    flex-direction: row;
  }

  .sidebar .side-label,
  .sidebar .side-foot,
  .sidebar .side-link.is-disabled {
    display: none;
  }

  .app-main {
    padding: 1.25rem;
  }
}

/* ======================================================================
   Accessibility — reduced motion
   ====================================================================== */
/* ======================================================================
   Custom video player
   ====================================================================== */
.vplayer {
  --player-accent: var(--sage-500);
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  /* The player sizes its own controls from its own width, not the viewport's.
     A viewport media query is the wrong instrument here twice over: an embed in a narrow column
     on a wide desktop never triggers one, and the console's own video page puts the player in a
     column while the viewport stays large. Container queries ask the only question that matters,
     which is how much room this player actually has. */
  container-type: inline-size;
  container-name: vplayer;
}

.vplayer--portrait {
  aspect-ratio: 9 / 16;
  max-height: 70vh;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
}

.vplayer-video {
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
}

/* Big center play button — the brand box (square, perforated) with a play triangle. */
.vplayer-bigplay {
  position: absolute;
  inset: 0;
  margin: auto;
  /* Scales with the player instead of sitting at a fixed 88px.
     At 88px on a phone-sized 16:9 embed (about 350x197) the button spanned y=54 to y=142 while
     the control bar started near y=151, so its drop shadow ran straight into the controls. The
     ceiling keeps every player 518px and wider exactly as it was; the floor keeps the tap target
     at the 44px minimum. */
  width: clamp(44px, 17cqi, 88px);
  height: clamp(44px, 17cqi, 88px);
  /* Centred in the video area ABOVE the control bar, not in the whole frame. On a large player
     the two never come near each other and this is 0, so nothing moves. On a short one the bar
     is a real fraction of the height, and centring through it put a 44px button (the minimum
     tap target, which cannot shrink further) straight onto the controls. */
  inset: 0 0 var(--vp-bar-h, 0px) 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.45));
  transition: transform 0.15s ease;
}

.vplayer-bigplay svg {
  width: 100%;
  height: 100%;
  display: block;
}

.vplayer-bigplay:hover {
  transform: scale(1.06);
}

.vplayer-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 1rem;
  background: color-mix(in srgb, var(--player-accent) 75%, transparent); /* accent @ 75% */
  color: #fff;
  transition: opacity 0.2s ease; /* quick to show */
}

.vplayer.vp-idle .vplayer-bar {
  opacity: 0;
  transition: opacity 0.8s ease; /* slow, gentle fade out */
}

.vplayer.vp-idle {
  cursor: none;
}

.vp-btn {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
/* Same as above: some control buttons (e.g. CC when a video has no captions) are toggled off
   with the `hidden` attribute, which the `display` above would otherwise override. */
.vp-btn[hidden] { display: none; }

.vp-btn svg {
  width: 32px;
  height: 32px;
  fill: currentColor;
}

.vp-btn:hover {
  opacity: 0.75;
}

.vp-cc {
  width: auto;
  padding: 0 10px;
  font-weight: var(--weight-semibold);
  font-size: 1rem;
  opacity: 0.7;
}

.vp-cc.is-on {
  opacity: 1;
}

/* Quality (gear) button + pop-up menu of HLS renditions. */
.vp-quality {
  position: relative;
  display: inline-flex;
}
/* The wrap is toggled via the `hidden` attribute (JS hides it for single-rendition videos and
   on native HLS). The `display` above would otherwise beat the UA `hidden` rule, leaving an
   always-visible gear that opens an empty menu — so restore `hidden` here. */
.vp-quality[hidden] { display: none; }
/* Gear is a stroked outline — override the bar's default fill so it doesn't become a blob. */
.vp-quality-btn svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.vp-quality-menu {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  z-index: 6;
  min-width: 104px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  background: rgba(20, 20, 20, 0.96);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}
.vp-quality-menu[hidden] { display: none; }
.vp-quality-item {
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 13px;
  text-align: left;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.vp-quality-item:hover {
  background: rgba(255, 255, 255, 0.12);
}
.vp-quality-item.is-on {
  color: var(--sage-400);
  font-weight: var(--weight-semibold);
}

/* Volume: one mute button (icon swaps by class) + a slider. */
.vp-volume {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex-shrink: 0;
}

.vp-icon-mute {
  display: none;
}

.vp-mute.is-muted .vp-icon-vol {
  display: none;
}

.vp-mute.is-muted .vp-icon-mute {
  display: inline-block;
}

.vp-vol {
  width: 78px;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
}

.vp-vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

.vp-vol::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

.vp-scrub {
  position: relative;
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
}

.vp-buffered,
.vp-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
}

.vp-buffered {
  background: rgba(255, 255, 255, 0.4);
}

.vp-progress {
  background: #fff;
}

.vp-handle {
  position: absolute;
  top: 50%;
  left: 0;
  width: 15px;
  height: 15px;
  margin-left: -7px;
  border-radius: 50%;
  background: #fff;
  transform: translateY(-50%);
}

.vp-time {
  flex-shrink: 0;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Narrow players (portrait, or small screens): the bar's fixed-width items (48px buttons + the
   78px volume slider) would overflow the player width and clip captions/quality/fullscreen past
   the right edge. Drop the volume slider (the mute toggle stays) and tighten buttons, gaps, and
   padding so the whole control set always fits. */
.vplayer--portrait .vp-vol { display: none; }
.vplayer--portrait .vplayer-bar { gap: 0.2rem; padding: 0.25rem 0.4rem; }
.vplayer--portrait .vp-btn { width: 38px; height: 38px; }
.vplayer--portrait .vp-btn svg { width: 26px; height: 26px; }
.vplayer--portrait .vp-time { font-size: 0.78rem; }

/* Control-bar tiers, keyed to the PLAYER's width rather than the viewport's, so an embed in a
   narrow column shrinks correctly even on a wide screen. Replaces a `@media (max-width: 560px)`
   block that could not see the difference. */
@container vplayer (max-width: 560px) {
  /* Height of the bar at this tier, so the play button centres above it. Set on the button
     rather than on .vplayer: an element is never matched by its own container query, so a rule
     targeting the container from inside @container silently does nothing. */
  .vplayer-bigplay { --vp-bar-h: 42px; }
  .vp-vol { display: none; }
  .vplayer-bar { gap: 0.25rem; padding: 0.25rem 0.5rem; }
  .vp-btn { width: 40px; height: 40px; }
  .vp-btn svg { width: 28px; height: 28px; }
  .vp-time { font-size: 0.8rem; }
}

/* Phone-sized embed. Everything still fits and stays tappable: four 36px targets plus CC and the
   clock leave roughly half the bar for the scrubber, which is the control people actually drag. */
@container vplayer (max-width: 420px) {
  .vplayer-bigplay { --vp-bar-h: 38px; }
  .vplayer-bar { gap: 0.15rem; padding: 0.2rem 0.35rem; }
  .vp-btn { width: 36px; height: 36px; }
  .vp-btn svg { width: 24px; height: 24px; }
  .vp-time { font-size: 0.72rem; }
  .vp-cc { padding: 0 6px; font-size: 0.85rem; }
  .vp-quality-btn svg { width: 20px; height: 20px; }
}

/* Smaller than a phone column: a sidebar preview, a grid cell, a quarter-width embed. The clock
   and the quality gear are the two controls nobody reaches for at this size, and dropping them
   buys the scrubber the room it needs to stay draggable. */
@container vplayer (max-width: 300px) {
  .vp-time,
  .vp-quality { display: none; }
  .vp-btn { width: 32px; height: 32px; }
  .vp-btn svg { width: 21px; height: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .vcard,
  .vcard-copy,
  .vcard-menu-btn,
  .vcard-fav,
  .side-caret,
  .progress-bar,
  .dropzone,
  .account-overlay,
  .account-panel,
  .vplayer-bigplay,
  .vplayer-bar {
    transition: none;
  }
}

/* ======================================================================
   Account button + right slide-out drawer
   ====================================================================== */
.btn-account svg {
  flex-shrink: 0;
}

.account-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  visibility: hidden;
}

.account-drawer.is-open {
  visibility: visible;
}

.account-overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 26, 0.4);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.account-drawer.is-open .account-overlay {
  opacity: 1;
}

.account-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 300px;
  max-width: 85vw;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-left: 1px solid var(--n-200);
  padding: 1.25rem;
  transform: translateX(100%);
  transition: transform 0.2s ease;
}

.account-drawer.is-open .account-panel {
  transform: translateX(0);
}

.account-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.account-title {
  font-size: var(--text-h2);
  font-weight: var(--weight-semibold);
}

.account-email {
  margin: 0.25rem 0 0.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-plan {
  margin: 0 0 1.25rem;
}

.account-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.account-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.6rem;
  color: var(--ink);
  font-weight: var(--weight-medium);
  font-size: 0.95rem;
}

a.account-link:hover {
  background: var(--n-100);
  text-decoration: none;
}

.account-link.is-disabled {
  color: var(--n-400);
  cursor: default;
}

.account-link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.account-link .soon {
  margin-left: auto;
}

.account-foot {
  margin-top: auto;
  padding-top: 1rem;
}

/* ======================================================================
   Folders — sidebar tree, folder view, card menus, dialogs
   ====================================================================== */
.side-sub {
  padding-left: 2.35rem;
  font-size: 0.9rem;
}
.side-sub2 {
  padding-left: 3.35rem;
}

.side-sub .side-text {
  color: var(--n-700);
}

.side-sub.is-active .side-text {
  color: var(--sage-700);
}

.side-add {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.35rem 0.25rem 0;
  padding: 0.4rem 0.5rem;
  background: none;
  border: 0;
  color: var(--color-link);
  font: inherit;
  font-size: 0.9rem;
  font-weight: var(--weight-medium);
  cursor: pointer;
}

.side-add:hover {
  text-decoration: underline;
}

.side-add svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.side-empty {
  margin: 0.15rem 0.75rem;
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}

.side-caret {
  margin-left: auto;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--n-400);
  transition: transform 0.15s ease;
}

.side-caret.is-open {
  transform: rotate(90deg);
}

/* Folder view */
.head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.subfolder-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.subfolder-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  background: #fff;
  border: 1px solid var(--n-200);
  color: var(--ink);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
}

.subfolder-chip:hover {
  border-color: var(--sage-400);
  text-decoration: none;
}

.subfolder-chip svg {
  color: var(--sage-600);
}

/* Card quick-action menu (kebab) */
.vcard-actions {
  position: absolute;
  top: 6px;
  right: 6px;
}

.vcard-menu-btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--n-200);
  color: var(--n-700);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.vcard-menu-btn svg {
  fill: currentColor;
}

.vcard:hover .vcard-menu-btn,
.vcard-menu-btn:focus-visible,
.vcard-menu-btn[aria-expanded="true"] {
  opacity: 1;
}

@media (hover: none) {
  .vcard-menu-btn {
    opacity: 1;
  }
}

.vcard-menu {
  position: absolute;
  top: 34px;
  right: 0;
  min-width: 170px;
  display: flex;
  flex-direction: column;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--n-200);
  box-shadow: 0 6px 20px rgba(26, 26, 26, 0.12);
  z-index: 10;
}

.vcard-menu[hidden] {
  display: none;
}

.vcard-menu > button,
.vcard-menu > a {
  text-align: left;
  background: none;
  border: 0;
  padding: 0.5rem 0.6rem;
  font: inherit;
  font-size: var(--text-caption);
  color: var(--ink);
  cursor: pointer;
}

.vcard-menu > button:hover,
.vcard-menu > a:hover {
  background: var(--n-100);
  text-decoration: none;
}

/* Small dialogs (move / folder name) + inline form errors */
.modal-sm {
  max-width: 380px;
}

.field input[type="text"],
.field input[type="url"],
.field input[type="password"],
.field input[type="number"],
.field input[type="tel"],
.field input[type="search"],
.field textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-box);
  font: inherit;
  background: #fff;
}

.form-error {
  margin: 0 0 1rem;
  color: var(--clay-dark);
  font-size: var(--text-caption);
}

.form-error[hidden] {
  display: none;
}

/* ======================================================================
   Video CRUD — small/danger buttons, Trash cards, playback options
   ====================================================================== */
.btn-sm {
  padding: 0.35rem 0.7rem;
  font-size: var(--text-caption);
}

.btn-danger {
  color: var(--clay-dark);
  border-color: var(--n-300);
}

.btn-danger:hover {
  background: var(--clay-tint);
  border-color: var(--clay);
}

.vcard-menu > .menu-danger {
  color: var(--clay-dark);
}

.vcard-menu > .menu-danger:hover {
  background: var(--clay-tint);
}

/* Trash cards */
.vcard-thumb.is-trashed img,
.vcard-thumb.is-trashed .vcard-thumb-empty {
  filter: grayscale(0.6);
  opacity: 0.7;
}

.vcard-trash-actions {
  display: flex;
  gap: 0.5rem;
  padding: 0 0.8rem 0.8rem;
}

.vcard-trash-actions .btn {
  flex: 1;
}

/* Playback options card */
.options-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.opt-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--text-caption);
}

.opt-row input {
  flex-shrink: 0;
}

.opt-saved {
  margin: 0;
  color: var(--sage-600);
}

.opt-saved[hidden] {
  display: none;
}

.opt-hint {
  margin: -0.2rem 0 0 1.6rem;
}

.opt-hint[hidden] {
  display: none;
}

.opt-row input:disabled + span {
  color: var(--n-400);
}

.opt-sep {
  border: 0;
  border-top: 1px solid var(--n-200);
  margin: 0.85rem 0;
}

/* A checkbox row that carries a one-line explanation under its label. */
.opt-row .opt-sub {
  display: block;
  font-size: 0.8em;
  margin-top: 0.1rem;
}
.opt-row:has(.opt-sub) {
  align-items: flex-start;
}
.opt-row:has(.opt-sub) input {
  margin-top: 0.2rem;
}

/* Dashboard analytics band. Two panels side by side: a single full-width chart read as a banner
   rather than as data. Collapses to one column before the bars get too short to compare. */
.dash-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

/* A tile carrying a quota bar as well as a number. */
.tile-meter .progress {
  width: 100%;
  margin-top: 0.5rem;
}

.tile-meter.is-over .progress-bar {
  background: var(--clay);
}

.tile-meter.is-over .tile-num {
  color: var(--clay);
}

/* Source activity log. A grid rather than a table so the columns stay aligned while each row can
   carry a second line for the near-miss hint. */
.act-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
}

.act-filters .field {
  margin: 0;
}

.act-table {
  display: flex;
  flex-direction: column;
}

.act-row {
  display: grid;
  grid-template-columns: 6.5rem minmax(6rem, 1.2fr) minmax(6rem, 1.4fr) minmax(8rem, 1.6fr) 4rem;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--n-100);
  font-size: var(--text-caption);
}

.act-row:last-child {
  border-bottom: 0;
}

.act-head {
  font-weight: 600;
  color: var(--gray);
  border-bottom: 1px solid var(--n-200);
}

.act-date {
  font-variant-numeric: tabular-nums;
  color: var(--gray);
}

.act-host,
.act-video {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.act-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.act-tag {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border-radius: 3px;
  background: var(--n-100);
  color: var(--n-700);
  font-size: 0.85em;
}

.act-tag-blocked {
  background: #F6E7DC;
  color: #8A4A1F;
}

.act-fix {
  display: block;
  margin-top: 0.15rem;
}

.act-foot {
  margin: 0.75rem 0 0;
}

/* Below the point where five columns stop being readable, stack each row into a block. */
@media (max-width: 720px) {
  .act-row {
    grid-template-columns: 1fr auto;
    gap: 0.25rem 0.75rem;
  }
  .act-head {
    display: none;
  }
  .act-date {
    grid-column: 1 / -1;
  }
}

/* Top sources: where a video is loading, ranked. Deliberately the same visual language as the
   play funnel, since the two answer neighbouring questions and belong to one family. */
.src-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.src-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-caption);
}

.src-host {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.src-track {
  flex: 0 0 32%;
  height: 5px;
  border-radius: 3px;
  background: var(--n-200);
  overflow: hidden;
}

.src-fill {
  display: block;
  height: 100%;
  background: var(--sage-500);
}

.src-val {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* A refused source gets no bar: a count of refusals is not a share of anything. */
.src-row-blocked {
  flex-wrap: wrap;
  color: var(--gray);
}

.src-fix {
  flex: 0 0 100%;
}

.src-row.is-fixed {
  opacity: 0.55;
}

/* Video page: identity facts as a strip above the player, rather than a sidebar card. Puts the
   context next to the thing it describes and gives the sidebar its top slot back. */
.video-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.75rem;
  margin: 0 0 0.75rem;
  padding: 0;
}

.video-meta .meta-item {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.video-meta dt {
  font-size: var(--text-caption);
  color: var(--gray);
}

.video-meta dd {
  margin: 0;
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--ink);
}

/* Collapsible sidebar panels. Native <details>/<summary>: no JS, and keyboard plus
   screen-reader behaviour comes for free. */
.panel > .panel-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  list-style: none;
  /* Safari still paints its own triangle without this. */
  -webkit-appearance: none;
}

.panel > .panel-head::-webkit-details-marker {
  display: none;
}

.panel > .panel-head .card-title {
  margin: 0;
  flex: 0 0 auto;
}

/* The state of the panel, shown while it is closed. This is what makes collapsing an
   improvement rather than just hiding: a shut panel still answers what is inside it. */
.panel-sum {
  margin-left: auto;
  font-size: var(--text-caption);
  color: var(--gray);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel > .panel-head::after {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--n-400);
  border-bottom: 2px solid var(--n-400);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s ease;
}

.panel[open] > .panel-head::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

.panel[open] > .panel-head {
  margin-bottom: 0.75rem;
}

/* An open panel has said its piece in the body; the header summary would only repeat it. */
.panel[open] > .panel-head .panel-sum {
  opacity: 0;
}

.panel > .panel-head:focus-visible {
  outline: 2px solid var(--sage-500);
  outline-offset: 3px;
  border-radius: 3px;
}

.panel-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* A heading for a second concern inside one panel (Allowed domains, under Sharing). */
.panel-sub {
  margin: 0;
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--ink);
}

.share-toggle {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

@media (prefers-reduced-motion: reduce) {
  .panel > .panel-head::after {
    transition: none;
  }
}

/* Allowed domains editor (views/partials/embed-lock.php, shared by the video page + Settings). */
.domain-lock {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.domain-lock > .muted {
  margin: 0;
}

/* The list is indented under its radio so it reads as belonging to that choice. */
.domain-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-left: 1.6rem;
  padding-left: 0.85rem;
  border-left: 2px solid var(--n-200);
}

.domain-list[hidden] {
  display: none;
}

.domain-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.domain-row .input {
  flex: 1 1 auto;
  min-width: 0;
}

/* The apex/www nudge. Full-width so it drops onto its own line under the field it belongs to,
   rather than squeezing the input. */
.domain-suggest {
  flex: 0 0 100%;
  margin: -0.15rem 0 0;
  font-size: var(--text-caption);
  color: var(--gray);
}

.domain-suggest .link-btn {
  font-size: inherit;
}

.domain-hint {
  margin: 0;
  font-size: var(--text-caption);
}

/* Change-thumbnail picker */
.thumb-frames {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 0.5rem;
  max-height: 320px;
  overflow-y: auto;
  margin: 0.75rem 0;
  padding: 2px;
}

.thumb-frame {
  position: relative;
  display: block;
  padding: 0;
  border: 2px solid transparent;
  background: var(--sage-900);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  cursor: pointer;
}

.thumb-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.thumb-frame span {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 1px 4px;
  background: rgba(26, 26, 26, 0.7);
  color: #fff;
  font-size: 11px;
}

.thumb-frame:hover {
  border-color: var(--sage-400);
}

.thumb-frame.is-current {
  border-color: var(--clay);
}

.thumb-upload {
  display: block;
  text-align: center;
  cursor: pointer;
}

/* ======================================================================
   Login screen (standalone, branded)
   ====================================================================== */
.login-body {
  margin: 0;
  min-height: 100vh;
  background: var(--sage-50);
  color: var(--color-text);
  font-family: var(--font-sans);
}

.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
}

.login-card {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #fff;
  border: 1px solid var(--n-200);
  padding: 2.5rem 2rem;
}

.login-mark {
  display: inline-flex;
  margin-bottom: 1rem;
}

.login-word {
  font-weight: var(--weight-medium);
  font-size: 1.5rem;
  letter-spacing: 0.2px;
  color: var(--ink);
}

.login-tagline {
  margin-top: 0.35rem;
}

.login-title {
  margin: 1.75rem 0 0.4rem;
  font-size: var(--text-h2);
}

.login-sub {
  margin: 0 0 1.5rem;
  max-width: 32ch;
}

.login-cta {
  width: 100%;
}

.login-fine {
  margin: 0.9rem 0 0;
  font-size: 12px;
}

.login-alert {
  width: 100%;
  margin: 1.5rem 0 0;
  text-align: left;
}

.auth-form {
  width: 100%;
  margin-top: 1.25rem;
  text-align: left;
}

.auth-form .field {
  margin-bottom: 0.9rem;
}

.auth-form input[type="email"],
.auth-form input[type="password"] {
  width: 100%;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-box);
  font: inherit;
  background: #fff;
}

.auth-form input:focus {
  outline: none;
  border-color: var(--sage-500);
}

.login-form-error {
  margin: 0 0 0.85rem;
}

.login-or {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  margin: 1rem 0;
  color: var(--color-text-muted);
  font-size: var(--text-caption);
}

.login-or::before,
.login-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--n-200);
}

.login-google {
  gap: 0.6rem;
}

/* ======================================================================
   Team
   ====================================================================== */
.field input[type="email"] {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-box);
  font: inherit;
  background: #fff;
}

.team-table {
  border: 1px solid var(--n-200);
  background: #fff;
}

.team-row {
  display: grid;
  grid-template-columns: 1fr 8rem 7rem auto;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--n-200);
}

.team-row:last-child {
  border-bottom: 0;
}

.team-head {
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  background: var(--n-100);
}

.team-email {
  font-weight: var(--weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-you {
  margin-left: 0.4rem;
  padding: 0 5px;
  font-size: 11px;
  color: var(--sage-700);
  background: var(--sage-100);
}

.team-role {
  width: 100%;
  padding: 0.35rem 0.4rem;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-box);
  font: inherit;
  background: #fff;
}

.team-role-static {
  color: var(--color-text-muted);
}

.team-actions {
  text-align: right;
}

@media (max-width: 640px) {
  .team-row {
    grid-template-columns: 1fr auto;
    row-gap: 0.4rem;
  }

  .team-head {
    display: none;
  }
}

/* Settings page -------------------------------------------------------------- */
.settings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
  align-items: start;
}
.settings-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.settings-card .card-title {
  margin: 0 0 1rem;
}
.settings-card-head .card-title {
  margin: 0;
}
.plan-badge {
  font-size: 13px;
}
.usage-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.usage-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
  font-size: 14px;
}
.settings-note {
  margin: 1.25rem 0 0;
  font-size: 13px;
}
.usage-overage {
  margin: 0.6rem 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--clay-dark);
}
.usage-overage strong { font-weight: var(--weight-semibold); }
.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.feature-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 14px;
}
.feature-item.is-off {
  color: var(--n-400);
}
.feature-ico {
  width: 18px;
  height: 18px;
  flex: none;
}
.feature-ok {
  color: var(--sage-500);
}
.feature-lock {
  color: var(--n-400);
}
.feature-item .soon {
  margin-left: auto;
}
.settings-locked {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.settings-locked .soon {
  margin-left: 0;
}

/* Subtitles box + editor ----------------------------------------------------- */
.subtitles {
  margin-top: 1.25rem;
}
.subtitles-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}
.subtitles-head .card-title {
  margin: 0;
}
.subtitles-box {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-box);
  background: #fff;
  padding: 0.5rem 0.75rem;
}
.cue {
  display: flex;
  gap: 0.75rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--n-100);
  font-size: 14px;
}
.cue:last-child {
  border-bottom: none;
}
.cue-time {
  flex: none;
  width: 3.25rem;
  color: var(--n-700);
  font-family: var(--font-mono);
  font-size: 12px;
  padding-top: 0.1rem;
}
.cue-text {
  color: var(--ink);
}
.modal-lg {
  max-width: 640px;
}
.subs-editor {
  max-height: 50vh;
  overflow-y: auto;
  margin: 0.5rem 0 0.25rem;
}
.subs-edit-row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--n-100);
}
.subs-edit-time {
  flex: none;
  width: 3.25rem;
  color: var(--n-700);
  font-family: var(--font-mono);
  font-size: 12px;
  padding-top: 0.5rem;
}
.subs-edit-text {
  flex: 1;
  resize: vertical;
  font: inherit;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-box);
}

/* Video attachments ---------------------------------------------------------- */
.attach-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}
.attach-head .card-title {
  margin: 0;
}
.attach-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.attach-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 14px;
}
.attach-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.attach-desc {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: calc(15px + 0.4rem); /* line up under the filename, past the icon */
}
.attach-name {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--ink);
  overflow: hidden;
}
.attach-name span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attach-name:hover {
  color: var(--sage-600);
}
.attach-name svg {
  flex: none;
  color: var(--n-400);
}
.attach-size {
  margin-left: auto;
  flex: none;
  font-size: 12px;
}
.attach-del,
.attach-edit {
  flex: none;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--gray);
  line-height: 1;
  padding: 0 0.2rem;
}
.attach-del { font-size: 18px; }
.attach-edit {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem;
}
.attach-edit:hover { color: var(--sage-600); }
.attach-del:hover {
  color: var(--clay-dark);
}
/* Inline description editor: the row's normal content hides, the form takes the full width. */
.attach-item.is-editing > :not(.attach-edit-form) { display: none; }
.attach-edit-form {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
}
.attach-edit-form .attach-edit-input {
  flex: 1;
  min-width: 0;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-box);
  font: inherit;
  background: #fff;
}
.attach-hint {
  margin: 0.75rem 0 0;
  font-size: 12px;
}
.attach-empty {
  margin: 0.25rem 0 0;
}

/* Ghost (admin read-only "view as") banner */
.ghost-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
  background: var(--clay);
  color: #fff;
  font-size: 14px;
}
.ghost-bar a {
  color: #fff;
  text-decoration: underline;
  font-weight: 600;
}

/* Over-quota banner --------------------------------------------------------- */
.quota-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0 0 1.5rem;
  padding: 0.85rem 1.1rem;
  background: #fbeae1;
  border: 1px solid var(--clay);
  border-radius: 10px;
  color: #7a3f1c;
  font-size: 14px;
}
.quota-banner strong { color: #1a1a1a; }
.quota-banner .btn { flex-shrink: 0; }
.settings-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }

/* Change-plan picker -------------------------------------------------------- */
.plan-period { display: inline-flex; gap: 0; border: 1.5px solid var(--n-200, #e3e3dd); border-radius: 10px; overflow: hidden; margin: 0 0 1.25rem; }
.plan-period label { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; font-size: 14px; font-weight: 500; cursor: pointer; }
.plan-period label + label { border-left: 1.5px solid var(--n-200, #e3e3dd); }
.plan-period label.on { background: var(--sage-700, #556231); color: #fff; }
.plan-period input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.plan-period .seg-note { font-size: 11px; opacity: 0.85; }
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.plan-tier { text-align: center; }
.plan-tier.is-current { border-color: var(--sage-500, #849b54); box-shadow: 0 0 0 3px var(--sage-100, #e8edd9); }
.tier-price { margin: 0.25rem 0 1rem; }
.tier-price .amt { font-size: 28px; font-weight: 700; color: var(--ink, #1a1a1a); }
@media (max-width: 720px) { .plan-grid { grid-template-columns: 1fr; } }
.confirm-card { max-width: 560px; }
/* Downgrade that won't fit the library. Clay edge to mark it as something to read before confirming,
   matching .usage-overage rather than inventing a second warning colour. */
.confirm-warn { max-width: 560px; margin-bottom: 1rem; border-left: 3px solid var(--clay, #be6e3a); }
.confirm-warn p { font-size: 14px; line-height: 1.55; margin: 0 0 0.6rem; }
.confirm-warn p:last-child { margin-bottom: 0; }
.confirm-list { margin: 0 0 1rem; }
.confirm-row { display: flex; justify-content: space-between; align-items: baseline; padding: 0.6rem 0; border-bottom: 1px solid var(--n-200, #e3e3dd); }
.confirm-row dt { color: var(--n-700, #54544e); margin: 0; }
.confirm-row dd { margin: 0; font-size: 18px; }
.confirm-note { font-size: 13px; margin: 0.75rem 0; }
.confirm-lines { list-style: none; padding: 0; margin: 0 0 1rem; font-size: 14px; }
.confirm-lines li { display: flex; justify-content: space-between; padding: 0.3rem 0; color: var(--n-700, #54544e); }
.confirm-lines .credit { color: var(--sage-700, #556231); }
.confirm-actions { display: flex; gap: 0.6rem; align-items: center; margin-top: 0.5rem; }

/* Settings > Branding ------------------------------------------------------- */
.crumb {
  margin: 0 0 0.35rem;
  font-size: var(--text-caption);
}
.crumb a {
  color: var(--sage-600);
  text-decoration: none;
}
.crumb a:hover {
  text-decoration: underline;
}

.notice {
  padding: 0.7rem 0.95rem;
  border-radius: 2px;
  font-size: 14px;
  margin-bottom: 1.1rem;
}
.notice-ok {
  background: var(--sage-50);
  color: var(--sage-700);
  border: 1px solid var(--sage-200);
}
.notice-err {
  background: #f7e8e6;
  color: #7a3028;
  border: 1px solid #e2c3bd;
}

.branding-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 780px) {
  .branding-grid {
    grid-template-columns: 1fr;
  }
}

.branding-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.brand-field {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.brand-field .card-title {
  margin: 0;
}
.brand-field .muted {
  margin: 0;
}

.chk {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 14px;
  cursor: pointer;
}
.chk input {
  accent-color: var(--sage-500);
}

.logo-picker {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.logo-current {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  height: 64px;
  padding: 0 0.75rem;
  /* Checkerboard so transparent logos read clearly. */
  background-color: #fff;
  background-image:
    linear-gradient(45deg, var(--n-100) 25%, transparent 25%),
    linear-gradient(-45deg, var(--n-100) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--n-100) 75%),
    linear-gradient(-45deg, transparent 75%, var(--n-100) 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0;
  border: 1px solid var(--n-200);
  border-radius: 2px;
}
.logo-current img {
  max-height: 48px;
  max-width: 200px;
  display: block;
}
.logo-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.btn-file {
  cursor: pointer;
}
.btn-file input {
  display: none;
}

.color-row {
  display: flex;
  gap: 1.5rem;
}
.color-pick {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 13px;
  color: var(--n-700);
}
.color-pick input[type="color"] {
  width: 56px;
  height: 34px;
  padding: 2px;
  border: 1px solid var(--n-300);
  border-radius: 2px;
  background: #fff;
  cursor: pointer;
}
.color-pick input[type="color"]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.brand-actions {
  margin-top: 0.25rem;
}

/* Live preview */
.brand-preview {
  position: sticky;
  top: 1.25rem;
}
.preview-label {
  display: block;
  font-size: var(--text-caption);
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
}
.preview-frame {
  border: 1px solid var(--n-200);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.preview-bar {
  display: flex;
  align-items: center;
  padding: 0.7rem 0.9rem;
}
.preview-bar-top {
  justify-content: center;
}
.preview-bar-bottom {
  justify-content: flex-end;
  min-height: 1.9rem;
}
.preview-logo {
  max-height: 26px;
  max-width: 150px;
}
.preview-word {
  font-weight: var(--weight-medium);
  font-size: 1.05rem;
  letter-spacing: 0.2px;
}
.preview-stage {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: #fff; /* the stage behind the player — overridden inline by the chosen color */
}
.preview-video {
  width: 78%;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  border-radius: 2px;
}
.preview-badge {
  font-size: 11px;
  opacity: 0.85;
}

/* ---- Channels (console) ------------------------------------------------ */
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--sage-600); cursor: pointer; text-decoration: underline; }
.linkbtn:hover { color: var(--sage-700); }
.linkbtn-danger { color: #a2402f; }
.linkbtn-danger:hover { color: #7a3028; }

.chan-list { display: flex; flex-direction: column; gap: 0.6rem; }
.chan-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.9rem 1.1rem; background: #fff; border: 1px solid var(--n-200); border-radius: var(--radius-box);
}
.chan-row-main { display: flex; flex-direction: column; gap: 0.15rem; text-decoration: none; color: var(--ink); min-width: 0; }
.chan-title { font-weight: var(--weight-medium); }
.chan-meta { font-size: var(--text-caption); overflow: hidden; text-overflow: ellipsis; }
.chan-noslug { font-style: italic; }
.chan-row-actions { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.chan-row-actions form { display: inline; margin: 0; }

/* Two-column channel editor: videos (bigger) left, settings right; save at top + bottom. */
.chan-savebar {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.75rem 1rem; margin-bottom: 1rem;
  background: #fff; border: 1px solid var(--n-200); border-radius: var(--radius-box);
}
.chan-savebar-top { position: sticky; top: 0.5rem; z-index: 20; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.chan-savebar-bottom { margin-top: 1rem; }
.chan-savebar-label { font-weight: var(--weight-medium); }
.chan-savebar .btn { margin-left: auto; }
.chan-savebar-bottom .btn { margin-left: 0; }
.chan-save-status { font-size: var(--text-caption); }
.chan-save-status.is-bad { color: #a2402f; }

.chan-editor-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (max-width: 900px) { .chan-editor-grid { grid-template-columns: 1fr; } }
.chan-col-left { position: sticky; top: 4rem; }
@media (max-width: 900px) { .chan-col-left { position: static; } }
.chan-col-right { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
#chanForm { display: flex; flex-direction: column; gap: 1.25rem; }

/* legacy (single-column) editor classes retained for safety */
.chan-edit { display: flex; flex-direction: column; gap: 1.25rem; max-width: 760px; }
.chan-form { display: flex; flex-direction: column; gap: 1.25rem; }
.chan-save-bar { display: flex; align-items: center; gap: 1rem; }
.field-legend { display: block; font-size: var(--text-caption); font-weight: var(--weight-medium); margin-bottom: 0.4rem; }
.field fieldset, fieldset.field { border: 0; padding: 0; margin: 0 0 1rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.social-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.75rem; margin-top: 0.5rem; }
@media (max-width: 640px) { .field-row, .social-grid { grid-template-columns: 1fr; } }

.chan-selected { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.chan-vitem {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.6rem;
  background: #fff; border: 1px solid var(--n-200); border-radius: var(--radius-box);
}
.chan-drag { cursor: grab; color: var(--n-400); user-select: none; }
.chan-vitem img { width: 64px; height: 36px; object-fit: cover; border-radius: 3px; background: #111; flex-shrink: 0; }
.chan-vtitle { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-caption); }
.chan-star { border: 0; background: none; cursor: pointer; font-size: 1.1rem; color: var(--n-300); line-height: 1; }
.chan-star.is-on { color: var(--clay); }
.chan-remove { border: 0; background: none; cursor: pointer; font-size: 1.2rem; color: var(--n-400); line-height: 1; }
.chan-remove:hover { color: #a2402f; }
.chan-lib-title { font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray); margin: 0 0 0.5rem; }
.chan-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.7rem; }
.chan-lib-item { border: 1px solid var(--n-200); border-radius: var(--radius-box); background: #fff; cursor: pointer; padding: 0; overflow: hidden; text-align: left; }
.chan-lib-item:hover { border-color: var(--sage-400); }
.chan-lib-item img { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #111; display: block; }
.chan-lib-item span { display: block; padding: 0.35rem 0.5rem; font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Video search (add-to-channel) */
.chan-search input[type="search"] { width: 100%; padding: 0.55rem 0.7rem; border: 1px solid var(--n-300); border-radius: var(--radius-box); font: inherit; background: #fff; }
.chan-lib-results { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.5rem; max-height: 340px; overflow-y: auto; }
.chan-search-empty { margin: 0.4rem 0; }
.chan-result { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0.5rem; background: #fff; border: 1px solid var(--n-200); border-radius: var(--radius-box); cursor: pointer; text-align: left; }
.chan-result:hover { border-color: var(--sage-400); background: var(--sage-50); }
.chan-result img { width: 64px; height: 36px; object-fit: cover; border-radius: 3px; background: #111; flex-shrink: 0; }
.chan-result-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-caption); }
.chan-result-add { flex-shrink: 0; font-size: var(--text-caption); font-weight: var(--weight-medium); color: var(--sage-600); }

/* ---- Public channel page ---------------------------------------------- */
.chan-body {
  --cbar-bg: var(--sage-900);
  --cbar-fg: var(--paper);
  margin: 0;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--paper);
  color: var(--ink);
}
.chan-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem 1.5rem;
  background: var(--cbar-bg); color: var(--cbar-fg);
}
.chan-topbar-title { font-size: 1.15rem; font-weight: var(--weight-semibold); }
.chan-topbar-logo { max-height: 34px; max-width: 200px; }
.chan-topbar-company { font-weight: var(--weight-medium); }

.chan-stage { flex: 1; width: 100%; max-width: 1440px; margin: 0 auto; padding: 2rem clamp(1rem, 4vw, 3rem); box-sizing: border-box; }
.chan-empty { text-align: center; padding: 3rem 1rem; }

/* Full-bleed hero band (quiet sage tint) so the composition reaches the screen edges. */
.chan-hero-band { width: 100%; background: var(--sage-50); border-bottom: 1px solid var(--sage-100); }
.chan-hero { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 2rem; align-items: start; max-width: 1440px; margin: 0 auto; padding: 2.5rem clamp(1rem, 4vw, 3rem); box-sizing: border-box; }
@media (max-width: 900px) { .chan-hero { grid-template-columns: 1fr; } }
.chan-hero-video { min-width: 0; }
.chan-hero-video .vplayer { margin: 0; border-radius: var(--radius-box); }
.chan-video-title {
  font-size: var(--text-h1); font-weight: var(--weight-semibold); margin: 1rem 0 0;
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.chan-hero-side { display: flex; flex-direction: column; gap: 0.9rem; background: #fff; border: 1px solid var(--n-200); border-radius: var(--radius-box); padding: 1.25rem; }
.chan-side-title { font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray); margin: 0 0 0.25rem; }
.chan-desc { line-height: 1.55; }
.chan-desc p { margin: 0 0 0.5rem; } .chan-desc p:last-child { margin: 0; }
.chan-desc ul, .chan-desc ol { margin: 0.3rem 0 0.3rem 1.25rem; padding: 0; }

.chan-cta {
  display: inline-block; align-self: flex-start;
  padding: 0.7rem 1.4rem; background: var(--clay); color: #fff;
  font-weight: var(--weight-semibold); text-decoration: none; border-radius: var(--radius-box);
}
.chan-cta:hover { background: var(--clay-dark); }

.chan-downloads { position: relative; align-self: flex-start; }
.chan-downloads-toggle {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 0.9rem; font: inherit; cursor: pointer;
  background: #fff; border: 1px solid var(--n-300); border-radius: var(--radius-box); color: var(--ink);
}
.chan-downloads-menu {
  position: absolute; z-index: 5; margin: 0.35rem 0 0; padding: 0.3rem; list-style: none;
  min-width: 220px; background: #fff; border: 1px solid var(--n-200);
  border-radius: var(--radius-box); box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}
.chan-downloads-menu a { display: block; padding: 0.5rem 0.6rem; text-decoration: none; color: var(--ink); border-radius: var(--radius-box); font-size: var(--text-caption); }
.chan-downloads-menu a:hover { background: var(--sage-50); }

.chan-rail { margin-top: 2rem; }
.chan-rail-title { font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray); margin: 0 0 0.6rem; }
.chan-rail-wrap { position: relative; }
.chan-rail-scroll { display: flex; gap: 0.8rem; overflow-x: auto; padding-bottom: 0.5rem; scroll-snap-type: x proximity; scrollbar-width: thin; }
.chan-rail-arrow {
  position: absolute; top: calc(50% - 20px); transform: translateY(-50%); z-index: 4;
  width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--n-200);
  background: #fff; color: var(--ink); font-size: 1.4rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}
.chan-rail-arrow:hover { background: var(--sage-50); }
.chan-rail-prev { left: -6px; }
.chan-rail-next { right: -6px; }
.chan-rail-arrow[hidden] { display: none; }
.chan-thumb { flex: 0 0 200px; scroll-snap-align: start; text-decoration: none; color: var(--ink); }
.chan-thumb-img { display: block; position: relative; }
.chan-thumb-img img { width: 200px; height: 112px; object-fit: cover; border-radius: var(--radius-box); background: #111; display: block; border: 2px solid transparent; transition: border-color 0.15s ease, transform 0.15s ease; }
.chan-thumb:hover .chan-thumb-img img { border-color: var(--sage-400); transform: translateY(-2px); }
.chan-thumb.is-current .chan-thumb-img img { border-color: var(--clay); }
.chan-thumb-title { display: block; margin-top: 0.35rem; font-size: var(--text-caption); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Watched (private channels): fade the thumbnail + a "Watched" tag; it's sorted to the end. */
.chan-thumb.is-watched .chan-thumb-img img { opacity: 0.4; }
.chan-thumb.is-watched .chan-thumb-title { color: var(--gray); }
.chan-thumb-watched {
  position: absolute; top: 6px; left: 6px;
  padding: 1px 7px; border-radius: 999px;
  background: rgba(26,26,26,0.78); color: #fff;
  font-size: 11px; font-weight: var(--weight-medium); letter-spacing: 0.02em;
}

.chan-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.7rem 1.5rem; background: var(--cbar-bg); color: var(--cbar-fg);
}
.chan-foot-link { color: var(--cbar-fg); text-decoration: none; font-size: var(--text-caption); }
.chan-foot-link:hover { text-decoration: underline; }
.chan-socials { display: flex; align-items: center; gap: 0.85rem; }
.chan-socials a { display: inline-flex; align-items: center; color: var(--cbar-fg); text-decoration: none; font-size: var(--text-caption); }
.chan-socials a:hover { opacity: 0.8; }
.chan-socials svg { display: block; }

/* Focus-visible rings for keyboard users (paper ring on the colored bars, sage elsewhere). */
.chan-cta:focus-visible,
.chan-downloads-toggle:focus-visible,
.chan-rail-arrow:focus-visible,
.chan-thumb:focus-visible {
  outline: 2px solid var(--sage-500);
  outline-offset: 2px;
  border-radius: var(--radius-box);
}
.chan-foot-link:focus-visible,
.chan-socials a:focus-visible {
  outline: 2px solid var(--cbar-fg);
  outline-offset: 2px;
}

/* ---- Channel viewer auth pages + console viewer list ------------------- */
.chan-auth-stage { display: flex; align-items: flex-start; justify-content: center; }
.chan-auth-card {
  width: 100%; max-width: 380px; margin-top: 2rem;
  background: #fff; border: 1px solid var(--n-200); border-radius: 10px; padding: 1.75rem;
}
.chan-auth-card h1 { font-size: var(--text-h2); font-weight: var(--weight-semibold); margin: 0 0 0.35rem; }
.chan-auth-form { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 1rem; }
.chan-auth-form .field { margin: 0; }
.chan-auth-form input[type="email"],
.chan-auth-form input[type="password"],
.chan-auth-form input[type="text"] {
  width: 100%;
  padding: 0.6rem 0.75rem;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-box);
}
.chan-auth-form input:focus { outline: 2px solid var(--sage-400); outline-offset: 1px; border-color: var(--sage-500); }
.chan-auth-form .btn { margin-top: 0.25rem; }
.chan-auth-or { display: flex; align-items: center; gap: 0.75rem; color: var(--gray); font-size: var(--text-caption); margin: 1.25rem 0 0.25rem; }
.chan-auth-or::before, .chan-auth-or::after { content: ""; flex: 1; height: 1px; background: var(--n-200); }

.chan-invite { display: flex; gap: 0.5rem; margin: 0.5rem 0 0.25rem; }
.chan-invite input { flex: 1; padding: 0.5rem; border: 1px solid var(--n-300); border-radius: var(--radius-box); font: inherit; background: #fff; }
.viewer-list { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.viewer-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.65rem; background: #fff; border: 1px solid var(--n-200); border-radius: var(--radius-box); }
.viewer-email { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-caption); }
.viewer-status { font-size: 0.78rem; }

/* ---- Channels: CRM API access ----------------------------------------- */
.api-access { margin-top: 1.5rem; }
.api-newkey { display: flex; flex-direction: column; gap: 0.5rem; }
.api-key-value {
  display: block; padding: 0.5rem 0.6rem; background: #fff; border: 1px solid var(--sage-200);
  border-radius: var(--radius-box); font-family: var(--font-mono); font-size: 13px; word-break: break-all;
}
.api-create { display: flex; gap: 0.5rem; margin: 0.75rem 0; flex-wrap: wrap; }
.api-create input { flex: 1; min-width: 12rem; padding: 0.5rem; border: 1px solid var(--n-300); border-radius: var(--radius-box); font: inherit; background: #fff; }
.api-key-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.api-key-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.65rem; background: #fff; border: 1px solid var(--n-200); border-radius: var(--radius-box); }
.api-key-label { font-weight: var(--weight-medium); }
.api-key-prefix { font-family: var(--font-mono); font-size: 12px; color: var(--gray); }
.api-key-item form { display: inline; margin: 0; margin-left: auto; }
.api-docs { margin-top: 1rem; }
.api-docs summary { cursor: pointer; font-size: var(--text-caption); color: var(--sage-600); }
.api-docs pre { overflow-x: auto; padding: 0.8rem; background: var(--n-100); border-radius: var(--radius-box); font-size: 12px; line-height: 1.5; }
.api-docs pre code { font-family: var(--font-mono); }

/* ---- Video page: "Add to channel" dropdown ---------------------------- */
.chan-menu { position: relative; display: inline-block; }
.chan-menu-list {
  position: absolute; z-index: 20; top: calc(100% + 4px); left: 0;
  min-width: 220px; max-height: 300px; overflow-y: auto;
  padding: 0.3rem; background: #fff; border: 1px solid var(--n-200);
  border-radius: var(--radius-box); box-shadow: 0 6px 20px rgba(26,26,26,0.12);
}
.chan-menu-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.5rem; font-size: var(--text-caption); cursor: pointer; border-radius: 4px; }
.chan-menu-item:hover { background: var(--n-100); }
.chan-menu-item input { accent-color: var(--sage-500); flex-shrink: 0; }

/* Logo sizing guidance (branding settings). Collapsed by default — it's reference for the one
   time someone prepares a logo, not something to re-read on every visit. */
.logo-tips {
  margin: 0.5rem 0 1rem;
  font-size: var(--text-caption);
  color: var(--n-700);
}
.logo-tips > summary {
  cursor: pointer;
  color: var(--color-link);
  font-weight: var(--weight-medium);
}
.logo-tips p { margin: 0.6rem 0 0.4rem; }
.logo-tips ul { margin: 0.4rem 0; padding-left: 1.1rem; }
.logo-tips li { margin-bottom: 0.35rem; }

/* Download dropdown (video page) — same surface as the channel menu, but each row is a
   label over a note, since the options carry caveats a button label can't hold. */
/* The dropdown in the video actions row. `.dl-menu` came first, for Download; `.pop-menu` is the
   same thing under a name that does not claim to be about downloads, so the thumbnail control can
   use it without a reader wondering why. Both names are kept rather than renaming the working one. */
.dl-menu, .pop-menu { position: relative; display: inline-block; }
.dl-menu-list, .pop-menu-list {
  position: absolute; z-index: 20; top: calc(100% + 4px); left: 0;
  min-width: 260px; padding: 0.3rem; background: #fff; border: 1px solid var(--n-200);
  border-radius: var(--radius-box); box-shadow: 0 6px 20px rgba(26, 26, 26, 0.12);
}
/* Right-align when the menu would run past the viewport edge on a narrow screen. */
@media (max-width: 560px) {
  .dl-menu-list, .pop-menu-list { left: auto; right: 0; }
}
.dl-menu-item, .pop-menu-item {
  display: block; padding: 0.5rem 0.6rem; border-radius: 4px;
  color: var(--ink); text-decoration: none;
}
.dl-menu-item:hover, .pop-menu-item:hover { background: var(--n-100); }
.dl-menu-label, .pop-menu-label { display: block; font-weight: var(--weight-medium); }
.dl-menu-note, .pop-menu-note { display: block; color: var(--gray); font-size: var(--text-caption); }

/* Entries in this menu are <button>s rather than links, so strip the UA button chrome and make
   them fill the row like the anchors in the Download menu do. */
.pop-menu-item {
  width: 100%; text-align: left; background: none; border: 0;
  font: inherit; cursor: pointer;
}
.pop-menu-item:disabled { cursor: default; opacity: 0.45; }
.pop-menu-item:disabled:hover { background: none; }
/* Rendered as a <span>, so it can't be clicked or focused — it's there to explain the absence. */
.dl-menu-item.is-disabled { cursor: default; }
.dl-menu-item.is-disabled:hover { background: none; }
.dl-menu-item.is-disabled .dl-menu-label { color: var(--n-400); }

/* ============================================================
   Public channel page /c/{slug} — themeable via --ch-bar-bg / --ch-bar-fg / --ch-accent (body)
   ============================================================ */
/* Flex column so the footer sticks to the bottom of the viewport on short pages. */
.ch-body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--paper, #FBFBF9); color: var(--ink, #1A1A1A); font-family: 'Outfit', system-ui, Arial, sans-serif; }
.ch-empty-page { flex: 1 0 auto; max-width: 640px; margin: 12vh auto; text-align: center; padding: 0 24px; }

.ch-bar { background: var(--ch-bar-bg, #2B321A); color: var(--ch-bar-fg, #FBFBF9); }
.ch-bar-inner { max-width: 1160px; margin: 0 auto; padding: 22px 40px; display: flex; align-items: center; gap: 18px; }

/* Masthead */
.ch-logo { height: 56px; padding: 0 16px; background: #FBFBF9; display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 6px 18px -8px rgba(0,0,0,.5); flex: 0 0 auto; }
.ch-logo img { height: 34px; width: auto; display: block; }
.ch-mast-titles { min-width: 0; }
.ch-mast-titles h1 { font-size: 24px; font-weight: 700; letter-spacing: -.01em; margin: 0; line-height: 1.15; }
.ch-mast-sub { margin: 2px 0 0; font-family: 'Space Mono', monospace; font-size: 11.5px; letter-spacing: 1.5px; text-transform: uppercase; color: color-mix(in srgb, var(--ch-bar-fg, #FBFBF9) 62%, transparent); }
.ch-powered { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; text-decoration: none; }
.ch-powered-label { font-family: 'Space Mono', monospace; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: color-mix(in srgb, var(--ch-bar-fg, #FBFBF9) 62%, transparent); }
.ch-powered-mark { width: 20px; height: 20px; display: block; flex: 0 0 auto; }
.ch-wordmark { font-weight: 500; font-size: 14px; color: var(--ch-bar-fg, #FBFBF9); }
.ch-wordmark span { color: #9CAE6F; }

/* Grid: player + about | playlist. flex:1 grows it to fill short viewports (sticky footer). */
.ch-grid { flex: 1 0 auto; width: 100%; max-width: 1160px; margin: 0 auto; padding: 32px 40px 48px; display: grid; grid-template-columns: 1fr 372px; gap: 28px; align-items: start; }
.ch-main { min-width: 0; }
/* Square, shadowless — consistent with the share page / embed player (brand is sharp-cornered). */
.ch-player { position: relative; overflow: hidden; background: #000; }
.ch-player-empty { aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; color: var(--n-400, #A6A69D); }
.ch-now { font-family: 'Space Mono', monospace; font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--ch-accent, #849B54); margin: 16px 0 2px; }
.ch-now-title { font-size: 22px; font-weight: 600; margin: 0; letter-spacing: -.01em; }

/* About card */
.ch-about { margin-top: 22px; border: 1px solid var(--n-200, #E3E3DD); background: #fff; padding: 24px 26px; }
.ch-about-kicker { font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--sage-500, #849B54); margin: 0 0 12px; }
.ch-desc { font-size: 16px; color: var(--n-700, #54544E); margin: 0 0 20px; max-width: 64ch; line-height: 1.55; }
.ch-desc :is(h1, h2, h3) { color: var(--ink, #1A1A1A); }
.ch-about-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.ch-btn { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 14px; padding: 11px 18px; border: 0; border-radius: 0; cursor: pointer; text-decoration: none; font-family: inherit; }
.ch-btn-outline { background: #fff; color: var(--ink, #1A1A1A); box-shadow: inset 0 0 0 1.5px var(--ch-accent, #849B54); }
.ch-btn-soft { background: var(--n-100, #F1F1ED); color: var(--ink, #1A1A1A); }
.ch-dl-count { font-family: 'Space Mono', monospace; font-size: 12px; color: var(--gray, #888); }
.ch-downloads { position: relative; }
.ch-downloads-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 220px; background: #fff; border: 1px solid var(--n-200, #E3E3DD); box-shadow: 0 20px 40px -24px rgba(0,0,0,.4); list-style: none; margin: 0; padding: 6px; z-index: 10; }
.ch-downloads-menu li a { display: block; padding: 9px 12px; font-size: 14px; color: var(--ink, #1A1A1A); text-decoration: none; }
.ch-downloads-menu li a:hover { background: var(--sage-50, #F5F7EF); }

/* Playlist (sticky, internally scrolling) */
.ch-playlist { border: 1px solid var(--n-200, #E3E3DD); background: #fff; overflow: hidden; display: flex; flex-direction: column; position: sticky; top: 20px; max-height: calc(100vh - 40px); }
.ch-playlist-head { flex: 0 0 auto; padding: 16px 18px; border-bottom: 1px solid var(--n-100, #F1F1ED); display: flex; align-items: baseline; justify-content: space-between; }
.ch-playlist-title { font-weight: 600; font-size: 15px; }
.ch-playlist-count { font-family: 'Space Mono', monospace; font-size: 11px; color: var(--gray, #888); }
.ch-rows { flex: 1 1 auto; overflow: auto; }
.ch-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer; padding: 11px 14px; border-bottom: 1px solid var(--n-100, #F1F1ED); font-family: inherit; }
.ch-row:hover { background: var(--sage-50, #F5F7EF); }
.ch-row.is-active { background: color-mix(in srgb, var(--ch-accent, #849B54) 10%, #fff); box-shadow: inset 3px 0 0 var(--ch-accent, #849B54); }
.ch-row-thumb { position: relative; width: 112px; flex: 0 0 auto; overflow: hidden; background: var(--sage-100, #E8EDD9); }
.ch-row-thumb img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.ch-row-play { position: absolute; inset: 0; display: none; }
.ch-row.is-active .ch-row-play { display: flex; align-items: center; justify-content: center; background: rgba(20,25,16,.36); }
.ch-row.is-active .ch-row-play::after { content: ""; width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #fff; }
.ch-row-meta { min-width: 0; flex: 1 1 auto; }
.ch-row-title { display: block; font-weight: 600; font-size: 14px; color: var(--ink, #1A1A1A); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-row-tag { display: block; font-family: 'Space Mono', monospace; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; margin-top: 2px; color: var(--n-400, #A6A69D); }
.ch-row.is-active .ch-row-tag { color: var(--ch-accent, #849B54); }
/* Watched rows: sunk to the bottom of the list, dimmed thumb + a check badge + "Watched" tag. */
.ch-row.is-watched .ch-row-tag { color: var(--sage-600, #6C7F43); }
.ch-row.is-watched .ch-row-thumb img { opacity: .58; }
.ch-row.is-watched .ch-row-thumb::after { content: "\2713"; position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; background: var(--sage-600, #6C7F43); color: #fff; border-radius: 50%; font-size: 11px; font-weight: 700; }
.ch-rows-loading { text-align: center; font-size: 13px; color: var(--gray, #888); padding: 12px; margin: 0; }
.ch-rows-sentinel { height: 1px; }

/* Previously watched (horizontal, scrollable) */
.ch-watched-band { border-top: 1px solid var(--n-200, #E3E3DD); background: var(--sage-50, #F5F7EF); }
.ch-watched-inner { max-width: 1160px; margin: 0 auto; padding: 24px 40px 28px; }
.ch-watched-title { font-size: 16px; font-weight: 600; margin: 0 0 14px; }
.ch-watched-scroll { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
.ch-wcard { flex: 0 0 200px; scroll-snap-align: start; border: 0; background: transparent; cursor: pointer; padding: 0; font-family: inherit; text-align: left; }
.ch-wcard-thumb { display: block; overflow: hidden; background: var(--sage-100, #E8EDD9); }
.ch-wcard-thumb img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.ch-wcard.is-active .ch-wcard-thumb { box-shadow: 0 0 0 2px var(--ch-accent, #849B54); }
.ch-wcard-title { display: block; font-size: 13.5px; font-weight: 500; color: var(--ink, #1A1A1A); margin-top: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Footer */
.ch-footer .ch-bar-inner { justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.ch-foot-left { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.ch-foot-name { color: var(--ch-bar-fg, #FBFBF9); font-weight: 600; font-size: 15px; text-decoration: none; }
.ch-socials { display: inline-flex; align-items: center; gap: 12px; }
.ch-socials a { color: var(--ch-bar-fg, #FBFBF9); display: inline-flex; opacity: .85; }
.ch-socials a:hover { opacity: 1; }

@media (max-width: 900px) {
  .ch-grid { grid-template-columns: 1fr; padding: 20px 20px 36px; }
  .ch-playlist { position: static; max-height: none; }
  .ch-rows { max-height: 460px; }
  .ch-bar-inner { padding: 18px 20px; }
  .ch-watched-inner { padding: 20px; }
}