/*
 * Design system ported from ~/meet: warm paper backgrounds, ink text,
 * sage (primary) + clay (secondary) accents, Instrument Serif headings with
 * Geist / Geist Mono. Adapted from Tailwind tokens to plain CSS.
 */
:root {
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Instrument Serif", "Iowan Old Style", Palatino, Georgia, serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --paper-50: #fbf8f0;
  --paper-100: #f5f0e3;
  --paper-200: #ece5d2;
  --paper-300: #ddd3bb;
  --paper-400: #c5b89a;

  --ink-200: #d7cdb7;
  --ink-300: #b6ab97;
  --ink-400: #968b7a;
  --ink-500: #786f62;
  --ink-600: #5c554a;
  --ink-700: #423d34;
  --ink-800: #2a2620;
  --ink-900: #1a1814;

  --sage-50: #ecefe8;
  --sage-100: #d6ddd0;
  --sage-300: #8fa088;
  --sage-500: #5b6e55;
  --sage-700: #455540;
  --sage-900: #2d3a2a;

  --clay-50: #f7e7dc;
  --clay-100: #efd4c5;
  --clay-300: #d89478;
  --clay-500: #b8593a;
  --clay-700: #8a3f26;
  --clay-900: #5a2818;

  /* Semantic aliases kept for existing markup. */
  --bg: var(--paper-100);
  --panel: var(--paper-50);
  --line: var(--paper-300);
  --text: var(--ink-900);
  --muted: var(--ink-500);
  --accent: var(--sage-500);
  --accent-ink: #fbf8f0;
  --danger: var(--clay-500);
  --radius: 12px;
  --shadow-sm: 0 1px 2px rgba(45, 34, 20, 0.06);
  --shadow-md: 0 4px 14px rgba(45, 34, 20, 0.08);
}

* { box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: var(--paper-100);
  color: var(--ink-700);
  font: 15px/1.6 var(--font-sans);
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--ink-900); }

/* ---------- chrome ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 26px;
  border-bottom: 1px solid var(--paper-300);
  background: rgba(251, 248, 240, 0.82);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 1;
  color: var(--ink-900);
}

.brand:hover { color: var(--ink-900); }

.brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--clay-500);
  box-shadow: 0 0 0 4px var(--clay-50);
}

.topbar nav {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 14px;
  color: var(--ink-500);
}

.topbar nav form { margin: 0; }
.topbar nav a:hover { color: var(--sage-700); }
.who {
  color: var(--ink-400);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

main {
  max-width: 940px;
  margin: 0 auto;
  padding: 56px 26px 96px;
}

body.wide main { max-width: 1180px; }

/* ---------- type ---------- */

h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.03;
  letter-spacing: -0.005em;
  color: var(--ink-900);
  margin: 0 0 10px;
}

h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.1;
  color: var(--ink-900);
  margin: 0 0 14px;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--clay-500);
  margin: 0 0 14px;
}

.sub { color: var(--ink-500); margin: 0 0 32px; font-size: 16px; }

/* ---------- controls ---------- */

.btn {
  display: inline-block;
  background: var(--sage-500);
  color: var(--accent-ink);
  border: 0;
  border-radius: 10px;
  padding: 12px 20px;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, box-shadow .15s, transform .15s;
}

.btn:hover {
  background: var(--sage-700);
  color: var(--accent-ink);
  box-shadow: var(--shadow-md);
}

.btn.small { padding: 8px 14px; font-size: 13px; }

.btn.ghost {
  background: var(--paper-50);
  color: var(--ink-700);
  border: 1px solid var(--paper-300);
}
.btn.ghost:hover { background: var(--paper-50); border-color: var(--sage-300); color: var(--ink-900); }

.btn.full { width: 100%; }

.linkish {
  background: none;
  border: 0;
  color: var(--ink-500);
  font: inherit;
  cursor: pointer;
  padding: 0;
}
.linkish:hover { color: var(--sage-700); }

/* ---------- forms ---------- */

.card {
  background: var(--paper-50);
  border: 1px solid var(--paper-300);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}

.auth-card { max-width: 400px; margin: 48px auto; }

label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-400);
  margin: 0 0 7px;
}

input[type=email], input[type=password], input[type=text] {
  width: 100%;
  background: var(--paper-100);
  border: 1px solid var(--paper-300);
  border-radius: 9px;
  color: var(--ink-900);
  padding: 11px 13px;
  font: inherit;
  margin-bottom: 18px;
}

input::placeholder { color: var(--ink-300); }

input:focus {
  outline: none;
  border-color: var(--sage-300);
  box-shadow: 0 0 0 3px var(--sage-50);
}

.error {
  background: var(--clay-50);
  border: 1px solid var(--clay-100);
  color: var(--clay-700);
  border-radius: 9px;
  padding: 11px 14px;
  font-size: 14px;
  margin-bottom: 20px;
}

.foot { margin: 20px 0 0; font-size: 14px; color: var(--ink-500); text-align: center; }
.foot a { color: var(--sage-700); text-decoration: underline; }

/* ---------- library ---------- */

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

.tile {
  background: var(--paper-50);
  border: 1px solid var(--paper-300);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}

.tile:hover {
  border-color: var(--sage-300);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.thumb {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--paper-200), var(--paper-300));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sage-500);
  font-size: 30px;
  position: relative;
}

.badge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: rgba(26, 24, 20, 0.72);
  border-radius: 5px;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--paper-50);
  font-variant-numeric: tabular-nums;
}

.tile-body { padding: 15px 17px 17px; }

.tile-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.15;
  margin: 0 0 6px;
  color: var(--ink-900);
}
.tile-title a:hover { color: var(--sage-700); }

.tile-meta {
  color: var(--ink-400);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tile-actions {
  display: flex;
  gap: 14px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--paper-200);
  font-size: 13px;
}

.tile-actions form { margin: 0; }
.tile-actions a:hover { color: var(--sage-700); }
.danger { color: var(--clay-500); }
.danger:hover { color: var(--clay-700); }

.empty {
  border: 1px dashed var(--paper-400);
  border-radius: var(--radius);
  padding: 60px 26px;
  text-align: center;
  color: var(--ink-500);
  background: var(--paper-50);
}

/* ---------- player ---------- */

.player-wrap {
  background: var(--ink-900);
  border: 1px solid var(--paper-300);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

video { width: 100%; display: block; max-height: 72vh; background: var(--ink-900); }

.player-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin: 24px 0 16px;
  flex-wrap: wrap;
}

.player-title { min-width: 0; }

.title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icn { width: 16px; height: 16px; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--ink-400);
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.icon-btn:hover { color: var(--sage-700); background: var(--paper-200); border-color: var(--paper-300); }

.rename-form {
  display: none;
  gap: 8px;
  margin-top: 12px;
  max-width: 460px;
}
.rename-form.open { display: flex; }
.rename-form input {
  margin: 0;
  flex: 1;
  font-family: var(--font-serif);
  font-size: 20px;
  padding: 8px 12px;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.pending { padding: 64px 20px; text-align: center; color: var(--paper-200); }

/* ---------- custom player ---------- */

.player {
  background: var(--ink-900);
  border: 1px solid var(--paper-300);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.video-wrap { display: block; background: #000; }
.video-wrap video { width: 100%; display: block; max-height: 72vh; background: #000; }

.controls {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px 14px;
  background: var(--ink-900);
}

.ctl-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--paper-100);
  cursor: pointer;
  transition: background .15s;
}
.ctl-btn:hover { background: rgba(255, 255, 255, 0.12); }
.ctl-btn .icn { width: 20px; height: 20px; }

.controls .time {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-200);
  font-variant-numeric: tabular-nums;
}

/* timeline = markers lane stacked over the seek track; the whole thing is
   clickable to comment at that moment */
.timeline {
  position: relative;
  flex: 1;
  padding-top: 16px;
  cursor: pointer;
}

.markers { position: absolute; inset: 0 0 auto 0; height: 16px; }

.marker {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 18px;
  height: 16px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--clay-300);
  cursor: pointer;
}
.marker:hover { color: var(--clay-100); z-index: 3; }
.marker-dot { display: block; }
.marker-dot svg { width: 14px; height: 14px; display: block; margin: 0 auto; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }

.marker-pop {
  display: none;
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 230px;
  max-width: 60vw;
  background: var(--paper-50);
  color: var(--ink-800);
  border: 1px solid var(--paper-300);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  padding: 10px 12px;
  text-align: left;
  z-index: 5;
  pointer-events: none;
}
.marker:hover .marker-pop { display: block; }
.marker-pop-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 13px;
}
.marker-pop-t { font-family: var(--font-mono); font-size: 11px; color: var(--ink-400); }
.marker-pop-body {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-600);
  overflow-wrap: anywhere;
}

.track {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.18);
}
.played {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  border-radius: 3px;
  background: var(--clay-500);
}
.playhead {
  position: absolute;
  top: 50%;
  left: 0;
  width: 13px;
  height: 13px;
  margin-left: -6px;
  border-radius: 50%;
  background: #fff;
  transform: translateY(-50%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  pointer-events: none;
}

/* comment composer timestamp anchor */
.anchor {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  background: var(--clay-50);
  border: 1px solid var(--clay-100);
  color: var(--clay-700);
  border-radius: 999px;
  padding: 5px 6px 5px 12px;
  font-size: 13px;
}
.anchor svg { width: 14px; height: 14px; }
.anchor-x {
  border: 0;
  background: none;
  color: var(--clay-500);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 2px 4px;
}
.anchor-x:hover { color: var(--clay-700); }

.ts-chip {
  border: 1px solid var(--sage-100);
  background: var(--sage-50);
  color: var(--sage-700);
  border-radius: 999px;
  padding: 1px 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
}
.ts-chip:hover { background: var(--sage-100); }

/* ---------- comments ---------- */

.comments { margin-top: 44px; max-width: 720px; }
.comments h2 { margin-bottom: 20px; }

.signin-prompt {
  color: var(--ink-500);
  background: var(--paper-50);
  border: 1px solid var(--paper-300);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0 0 24px;
}
.signin-prompt a { color: var(--sage-700); text-decoration: underline; }

.no-comments { color: var(--ink-400); margin: 8px 0 0; }

.comment-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}

.comment-form textarea {
  width: 100%;
  resize: vertical;
  background: var(--paper-100);
  border: 1px solid var(--paper-300);
  border-radius: 10px;
  color: var(--ink-900);
  padding: 12px 14px;
  font: inherit;
  line-height: 1.5;
}
.comment-form textarea::placeholder { color: var(--ink-300); }
.comment-form textarea:focus {
  outline: none;
  border-color: var(--sage-300);
  box-shadow: 0 0 0 3px var(--sage-50);
}

.comment-form-actions { display: flex; gap: 8px; }

.comment-list { display: flex; flex-direction: column; gap: 26px; }

.avatar {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--sage-100);
  color: var(--sage-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1;
}

.comment-main { display: flex; gap: 12px; }
.comment-content { min-width: 0; flex: 1; }

.comment-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 3px;
}
.comment-author { font-weight: 600; color: var(--ink-900); }
.comment-when {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-400);
}

.comment-text { color: var(--ink-700); line-height: 1.55; overflow-wrap: anywhere; }

.comment-actions {
  display: flex;
  gap: 14px;
  margin-top: 6px;
  font-size: 13px;
}
.comment-actions form { margin: 0; }

/* replies: one indented level, plus the reply composer */
.replies {
  margin: 16px 0 0 46px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.reply-form { display: none; margin-bottom: 0; }
.reply-form.open { display: flex; }

/* ---------- site footer ---------- */

.sitefoot {
  margin: 64px auto 0;
  max-width: 940px;
  padding: 0 26px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-300);
}