/* clip.cool search/upload surfaces. Self-hosted (CSP script/style-src 'self'). Dark theme: colours
   come from the keygrip.css tokens (--kg-surface / --kg-surface-2 / --kg-line / --kg-ink / --kg-grey
   / --kg-cyan). #0b1220 / #222c30 are deliberate near-black media "letterbox" backgrounds. */

/* Impact-like display font for the caption-editor canvas (builder.js), self-hosted (CSP font-src 'self'). */
@font-face {
  font-family: "Anton";
  src: url("fonts/anton.912c3c9f2621.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Caption editor canvas + controls (builder.js; .builder-stage is now caption-only since the
   standalone meme builder page was removed). */
.builder-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0b1220;
  border: 1px solid var(--kg-line);
  border-radius: 10px;
  overflow: hidden;
  padding: 8px;
}
.builder-canvas { max-width: 100%; height: auto; display: block; touch-action: none; cursor: move; }
.builder-controls .kg-field { display: block; margin-bottom: 12px; }
.builder-controls .kg-field > label { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--kg-ink); }
.builder-controls textarea,
.builder-controls input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--kg-line);
  border-radius: 8px;
  font: inherit;
  resize: vertical;
  background: var(--kg-surface-2);
  color: var(--kg-ink);
}
.builder-controls input[type="range"] { width: 100%; }
#box-panel {
  border: 1px solid var(--kg-line);
  border-radius: 8px;
  padding: 12px;
  margin: 10px 0;
  background: var(--kg-surface-2);
}
.builder-publish { margin-top: 12px; }

/* Search hero — centered, Google-like; shrinks to the top once a query is run. */
.clip-search-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 13vh;
  padding-bottom: 8px;
}
.clip-search-hero.is-compact { padding-top: 8px; }

.clip-search-brand {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--kg-ink);
  text-decoration: none;
  margin-bottom: 22px;
}
.clip-search-hero.is-compact .clip-search-brand { font-size: 24px; margin-bottom: 14px; }

.clip-searchbar {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 620px;
  background: var(--kg-surface);
  border: 1px solid var(--kg-line);
  border-radius: 999px;
  padding: 5px 5px 5px 22px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.15s, border-color 0.15s;
}
.clip-searchbar:focus-within {
  border-color: var(--kg-grey);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
.clip-searchbar input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 17px;
  padding: 12px 6px;
  color: var(--kg-ink);
}
.clip-search-btn {
  flex: none;
  border: none;
  cursor: pointer;
  background: var(--kg-cyan);
  color: var(--kg-on-accent);
  font-weight: 600;
  font-size: 15px;
  border-radius: 999px;
  padding: 11px 24px;
}
.clip-search-btn:hover { background: var(--kg-cyan-strong); }
.clip-search-tagline { color: var(--kg-grey); font-size: 14px; margin-top: 18px; }

.clip-grid {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.clip-card {
  background: var(--kg-surface);
  border: 1px solid var(--kg-line);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.clip-card > a {
  display: block;
  line-height: 0;
  position: relative;   /* anchor the caption overlay (.clip-thumb-cap) */
}

.clip-thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  background: var(--kg-surface-2);
}

/* Caption overlay on a grid thumb: the rendered caption PNG layered over the poster, so a captioned
   clip previews WITH its text (same as the detail page). Matches the thumb's box + object-fit so the
   two crop identically and stay aligned. */
.clip-thumb-cap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  pointer-events: none;
}

.clip-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 8px 10px;
}

.clip-meta:empty { display: none; }

.clip-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--kg-ink);
  margin-right: auto;
}

.clip-tag,
.clip-status {
  font-size: 11px;
  line-height: 1.6;
  border-radius: 999px;
  padding: 1px 8px;
}

.clip-tag { background: var(--kg-surface-2); color: var(--kg-grey); }
.clip-status { background: rgba(250, 204, 21, 0.15); color: #fcd34d; }

/* Detail + edit: image beside info, stacking on narrow screens. */
.clip-detail {
  display: grid;
  grid-template-columns: minmax(280px, 460px) 1fr;
  gap: 24px;
  align-items: start;
  margin-top: 12px;
}
@media (max-width: 720px) { .clip-detail { grid-template-columns: 1fr; } }

.clip-detail-media {
  background: #0b1220;
  border: 1px solid var(--kg-line);
  border-radius: 10px;
  overflow: hidden;
}
.clip-detail-media img,
.clip-detail-media video { width: 100%; height: auto; display: block; }

/* Public share page. */
.pub { max-width: 720px; margin: 0 auto; padding: 32px 16px; text-align: center; }
.pub-media { display: inline-block; max-width: 100%; border-radius: 10px; overflow: hidden; background: #0b1220; }
.pub-media img, .pub-media video { max-width: 100%; height: auto; display: block; }
.pub-title { font-size: 20px; margin: 16px 0 12px; color: var(--kg-ink); }

/* Share links on the detail page — each link labelled directly above its box. */
.clip-share { margin-top: 16px; }
.clip-share-item { margin-bottom: 12px; }
.clip-share-item > label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.clip-share-item > label .kg-muted { font-weight: 400; }
.clip-share-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.clip-share-row input { flex: 1; min-width: 180px; padding: 7px 9px; border: 1px solid var(--kg-line); border-radius: 8px; font: inherit; background: var(--kg-surface-2); color: var(--kg-ink); }

/* Player: caption PNG overlaid over the clip (same scale → WYSIWYG). */
.clip-media-wrap { position: relative; line-height: 0; }
.clip-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Caption builder: transparent editing canvas over the live clip backdrop. */
.caption-stage { position: relative; background: #0b1220; border: 1px solid var(--kg-line); border-radius: 10px; overflow: hidden; line-height: 0; }
.caption-bg { width: 100%; height: auto; display: block; }
.caption-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: move; }
.clip-detail-info { min-width: 0; }

.clip-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.clip-actions form { margin: 0; }
.kg-btn-danger { background: rgba(239, 68, 68, 0.15); color: #fca5a5; border-color: rgba(239, 68, 68, 0.4); }
.kg-btn-danger:hover { background: rgba(239, 68, 68, 0.25); }

.clip-ocr { margin-top: 16px; }
.clip-ocr summary { cursor: pointer; font-size: 13px; }
.clip-ocr p { white-space: pre-wrap; font-size: 13px; color: var(--kg-grey); margin: 6px 0 0; }

/* Edit form: stacked, full-width fields. */
.clip-edit-form .kg-field { display: block; margin-bottom: 14px; }
.clip-edit-form .kg-field > label { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--kg-ink); }
.clip-edit-form input[type="text"],
.clip-edit-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 9px;
  border: 1px solid var(--kg-line);
  border-radius: 8px;
  font: inherit;
  background: var(--kg-surface-2);
  color: var(--kg-ink);
}
.clip-edit-form textarea { resize: vertical; }

/* Tag chip editor. */
.tag-editor {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  border: 1px solid var(--kg-line);
  border-radius: 8px;
  padding: 6px 8px;
  background: var(--kg-surface);
  cursor: text;
}
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--kg-surface-2);
  color: var(--kg-ink);
  border-radius: 999px;
  padding: 2px 4px 2px 10px;
  font-size: 12px;
}
.tag-x {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  color: var(--kg-grey);
  padding: 0 4px;
}
.tag-x:hover { color: #ef4444; }
.tag-add { border: none; outline: none; flex: 1; min-width: 120px; font: inherit; padding: 3px 2px; background: transparent; color: var(--kg-ink); }

/* Tab recorder (clips/record.html): live preview + captured-clip playback. */
.clip-record-video {
  width: 100%;
  max-width: 640px;
  height: auto;
  display: block;
  margin: 12px 0;
  background: #0b1220;
  border-radius: 10px;
}

/* Tab recorder crop overlay: drag a selection over the live preview to crop the recording. */
.clip-record-stage {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 640px;
  margin: 12px 0;
  line-height: 0;
}
.clip-record-stage .clip-record-video { margin: 0; max-width: 100%; }
.clip-crop-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
}

/* The author display rules above beat the UA [hidden] rule, so hidden stage/video kept showing.
   Restore [hidden] for these so the empty preview + playback boxes stay gone until used.
   .kg-row { display:flex } likewise leaked the Record controls before a tab was shared. */
.clip-record-stage[hidden],
.clip-record-video[hidden],
.kg-row[hidden] { display: none; }

/* Detail page: media still transcoding (video has no renditions yet) — show this instead of
   pointing an <img> at the .webm original (which renders as a broken image). */
.clip-processing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  min-height: 240px;
  padding: 32px 20px;
  background: #0b1220;
  color: var(--kg-ink);
  border-radius: 10px;
  line-height: 1.4;   /* .clip-media-wrap sets line-height:0 for flush video; restore it here */
}
.clip-processing p { margin: 0; }
.clip-processing .kg-muted { color: var(--kg-grey); }

/* Tab recorder trim scrubber (record.html): drag in/out handles over the recorded clip. */
.clip-trim { width: 100%; max-width: 640px; margin: 0 0 14px; }
.clip-trim-bar {
  position: relative;
  height: 30px;
  background: #222c30;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  touch-action: none;
}
.clip-trim-sel {
  position: absolute; top: 0; bottom: 0;
  background: rgba(97, 217, 239, 0.28);
  border-left: 2px solid var(--kg-cyan);
  border-right: 2px solid var(--kg-cyan);
}
.clip-trim-playhead {
  position: absolute; top: -3px; bottom: -3px; width: 2px;
  background: #fff; pointer-events: none;
}
.clip-trim-handle {
  position: absolute; top: -3px; height: 36px; width: 14px; margin-left: -7px;
  background: var(--kg-cyan); border-radius: 4px; cursor: ew-resize; touch-action: none;
}
.clip-trim-row { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.clip-trim-row .kg-muted { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.clip-trim-fields { display: flex; gap: 16px; margin-top: 8px; flex-wrap: wrap; }
.clip-trim-field {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--kg-muted);
}
.clip-trim-num {
  width: 6.5em; padding: 4px 6px; background: var(--kg-bg-2);
  color: var(--kg-fg); border: 1px solid var(--kg-border); border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
}
.clip-trim-num:focus { outline: none; border-color: var(--kg-cyan); }

/* Grid card thumb for a clip with no poster yet (still transcoding) — placeholder instead of a
   broken <img src=""> (.clip-thumb gives the 16/10 box; line-height resets the card's line-height:0). */
.clip-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0b1220;
  color: var(--kg-grey);
  font-size: 13px;
  line-height: 1.4;
}