/* Owner-shell extras for the working product: auth, empty states, real thumbs. */

/* real video thumbnails sit inside the draft's gradient thumbs */
.thumb-img, .cut-thumb .thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cut-thumb { position: relative; overflow: hidden; }

.signout { margin-left: auto; opacity: 0.7; }
.signout:hover { opacity: 1; }

.notif-empty {
  padding: 18px 16px;
  font-size: 13px;
  color: var(--text-3);
}

.empty-note {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 18px;
  padding: 26px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-panel);
  color: var(--text-2);
  font-size: 14px;
  max-width: 520px;
}

.rail-ellip {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.set-save { display: flex; justify-content: flex-end; padding-bottom: 30px; }
.set-grid-extra { margin-top: 18px; }
.set-solo { max-width: 720px; }

.pw-form { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; max-width: 360px; }
.pw-actions { display: flex; gap: 10px; }
.pw-wrap { position: relative; }
.pw-wrap input { width: 100%; padding-right: 42px; }
.pw-eye {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--text-3);
  border-radius: var(--r-chip);
  transition: color var(--d-3f) var(--ease-cut);
}
.pw-eye:hover { color: var(--text); }
.pw-eye .ic-eye-off { display: none; }
.pw-eye.on .ic-eye { display: none; }
.pw-eye.on .ic-eye-off { display: block; }
.watch-mail { font-family: var(--f-mono); font-size: 10.5px; color: var(--text-3); }
.rail .client-logo { display: block; height: 28px; max-width: 140px; object-fit: contain; object-position: left; }
.chip-count { border-style: dashed; }

/* share links — the whole pill is the tap target */
.link-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
  padding: 9px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-chip);
  background: var(--bg);
  text-align: left;
  color: var(--text-3);
  transition: border-color var(--d-3f) var(--ease-cut), background var(--d-3f) var(--ease-cut);
}
.link-pill:hover { border-color: var(--sky-strong); color: var(--sky-ink); }
.link-pill:active { background: var(--sky-dim); }
.link-pill-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.link-pill-k {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.link-pill-url {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--sky-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.link-pill svg { flex: 0 0 auto; }

/* the whole-project link rides in the page head — project scope, project header */
.proj-head { flex-wrap: wrap; }
.link-pill-head {
  width: 300px; /* the rail column — the pill shares its left edge with the cards below */
  margin-top: 0;
  margin-left: auto;
  align-self: center;
}

/* each cut carries its own client link — an icon that copies on tap. The cut
   name is a stretched link, so the whole row still opens the review room;
   everything in .cut-side sits above that overlay on one line. */
.cut-row { position: relative; }
.cut-open::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-panel);
}
.cut-side {
  position: relative;
  z-index: 1;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  row-gap: 6px;
}
.cut-link { width: 32px; height: 32px; color: var(--text-3); }
.cut-link:hover { border-color: var(--sky-strong); color: var(--sky-ink); }
.cut-link:active { background: var(--sky-dim); }

/* no client details and nobody watching — the cuts take the full width */
.proj-solo { grid-template-columns: 1fr; }

@media (max-width: 760px) {
  .link-pill-head { width: 100%; max-width: none; min-width: 0; margin-left: 0; margin-top: 4px; }
}

.k-short { display: none; }
.tabbar { display: none; }
.mode-mini { display: none; }
html[data-mode="suite"] .mode-mini .ic-day { display: none; }
html[data-mode="daylight"] .mode-mini .ic-suite { display: none; }

@media (max-width: 760px) {
  .field-row { flex-direction: column; align-items: stretch; }
  .page-head { display: block; }
  .page-head .page-sub { margin-top: 6px; white-space: nowrap; }
  .sub-wait { display: none; } /* the stat chips already say it */

  /* topbar children overflowed the draft's phone rules — let them wrap.
     backdrop-filter would trap the fixed-position popover, so it goes solid. */
  .topbar { flex-wrap: wrap; height: auto; min-height: var(--top-h); padding: 10px 14px; gap: 10px; backdrop-filter: none; background: var(--bg); }
  .crumb { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .notif-wrap { margin-left: auto; }

  /* the tab bar takes over navigation — sidebar and topbar primary retire */
  .side { display: none; }
  .topbar > .btn-primary { display: none; }
  .main { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }

  .tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 45;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: var(--bg-2);
    border-top: 1px solid var(--line);
    padding: 7px 6px calc(7px + env(safe-area-inset-bottom));
  }
  .tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 2px 0;
    font-family: var(--f-mono);
    font-size: 9.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3);
  }
  .tab.on { color: var(--sky-ink); }
  .tab-ic {
    position: relative;
    display: grid;
    place-items: center;
    width: 34px; height: 26px;
  }
  .tab-action .tab-ic {
    width: 40px; height: 40px;
    margin-top: -18px;
    border-radius: 50%;
    background: var(--sky-strong);
    color: var(--btn-primary-ink);
    box-shadow: var(--pop-shadow);
  }
  html[data-mode="suite"] .tab-action .tab-ic { background: var(--sky); color: #0C1114; }
  .tab-badge {
    position: absolute;
    top: -3px; right: -4px;
    min-width: 15px; height: 15px;
    padding: 0 3px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--tally);
    color: #FFF;
    font-size: 9px;
    letter-spacing: 0;
  }

  /* the bell lives in the tab bar on phones; its popover rises from there */
  .topbar #bell { display: none; }
  .mode-mini { display: grid; margin-left: auto; }
  .notif-wrap { margin-left: 0; }
  .notif-pop {
    position: fixed;
    top: auto;
    bottom: calc(78px + env(safe-area-inset-bottom));
    left: 12px; right: 12px;
    width: auto;
    max-height: 60vh;
    overflow-y: auto;
  }

  /* verdict stats: one row of compact chips instead of three stacked tiles */
  .stat-row { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
  .stat { padding: 10px 12px; gap: 9px; }
  .stat-n { font-size: 20px; }
  .stat-k { font-size: 11px; }
  .k-long { display: none; }
  .k-short {
    display: inline;
    font-family: var(--f-mono);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 10px;
  }
}

/* ---------- auth ---------- */
.auth-body {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.auth {
  width: min(360px, 100%);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.auth-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.auth-lockup .side-lockup-name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.01em;
}
.auth-h { font-family: var(--f-display); font-weight: 600; font-size: 22px; }
.auth-sub { font-size: 14px; color: var(--text-2); }
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}
.auth-form .btn { justify-content: center; margin-top: 4px; }
.auth-error { font-size: 13px; color: var(--tally-ink); }

/* --- team + tasks --- */
.rail-x { margin-left: auto; flex-shrink: 0; }
.rail-btn { margin-top: 10px; }
.rail-empty { color: var(--text-3); font-size: 13px; margin: 2px 0 0; }

/* card cog — manage a project from the dashboard, a cut from its row.
   The card link becomes a stretched overlay so the cog can sit on top. */
.proj-card { position: relative; overflow: visible; }
.proj-card .thumb { overflow: hidden; border-radius: calc(var(--r-panel) - 1px) calc(var(--r-panel) - 1px) 0 0; }
/* the overlay must beat the thumb (also positioned, later in source) or taps
   on the image select it instead of opening the project */
.proj-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-panel); }
.proj-name-row { display: flex; align-items: flex-start; gap: 8px; }
.proj-name-row .proj-name { flex: 1; min-width: 0; }
.card-drop, .cut-drop { position: relative; z-index: 2; }
.proj-name-row .card-drop { margin: -5px -6px -5px 0; }
.card-cog { width: 30px; height: 30px; border: 0; background: transparent; color: var(--text-3); }
.card-cog:hover { color: var(--text); background: var(--bg-3); }
.proj-card:has(.drop-pop.open), .cut-row:has(.drop-pop.open) { z-index: 5; }
@media (max-width: 760px) {
  /* static so the cog's absolute box anchors to the row (= thumb top right),
     not to this chip line; the icon buttons stay above the stretched link
     through their own positioning */
  .cut-side { width: 100%; justify-content: flex-start; position: static; }
  /* the cog rides the thumbnail in its own small box, top right — the chip
     line below stays a single line no matter how long the verdict runs */
  .cut-drop { position: absolute; top: 20px; right: 20px; }
  .cut-side .card-cog {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(232, 240, 243, 0.22);
    border-radius: var(--r-chip);
    background: rgba(10, 14, 17, 0.72);
    color: #E8F0F3;
    backdrop-filter: blur(4px);
  }
  .cut-side .card-cog:hover { color: #FFF; background: rgba(10, 14, 17, 0.85); }
  /* the copy toast rises above the tab bar, where thumbs actually look */
  .toast { bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 46; }
}

/* assign team — search the roster, tick editors on. Built for 100+ names. */
.dlg-sub { font-size: 13px; color: var(--text-2); margin: -6px 0 12px; }
.team-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-chip);
  background: var(--bg);
  color: var(--text-3);
  margin-bottom: 4px;
}
.team-search:focus-within { border-color: var(--sky-strong); }
.team-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
}
.team-list { max-height: min(300px, 45vh); overflow-y: auto; margin-bottom: 6px; }
.team-row { display: flex; align-items: center; gap: 12px; padding: 10px 2px; cursor: pointer; }
.team-row + .team-row { border-top: 1px solid var(--line); }
.team-name { font-size: 14px; font-weight: 500; }
.team-none { padding: 14px 2px; font-size: 13px; color: var(--text-3); }
.team-check { position: relative; margin-left: auto; width: 18px; height: 18px; flex: 0 0 auto; }
.team-check input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.team-check-ui {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: var(--r-chip);
  background: var(--bg);
  color: transparent;
  pointer-events: none;
  transition: background var(--d-3f) var(--ease-cut), border-color var(--d-3f) var(--ease-cut);
}
.team-check input:checked + .team-check-ui {
  background: var(--sky-strong);
  border-color: var(--sky-strong);
  color: var(--btn-primary-ink);
}
html[data-mode="suite"] .team-check input:checked + .team-check-ui { background: var(--sky); border-color: var(--sky); color: #0C1114; }
.team-check input:focus-visible + .team-check-ui { outline: 2px solid var(--sky-strong); outline-offset: 2px; }
.dlg .dlg-actions .btn { text-decoration: none; }
@media (max-width: 760px) {
  .team-search input { font-size: 16px; } /* or iOS zooms */
  .link-pill-head { margin-top: 10px; }
}
.task-row { align-items: center; }
.task-row .act-body { min-width: 0; }
.task-acts { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.task-due { font-family: var(--f-mono); font-size: 12px; color: var(--text-3); white-space: nowrap; }
.task-due.over { color: var(--text); font-weight: 600; }
.chip-rush { border: 1px solid var(--line-2); color: var(--text); text-transform: uppercase; letter-spacing: .04em; }
.task-sec { margin: 26px 0 10px; }
.task-sec h2 { font-size: 15px; margin: 0; }
.task-sec .sec-sub { color: var(--text-3); font-size: 13px; margin: 2px 0 0; }
.task-done { opacity: .6; }
.task-row .act-meta { display: block; }
@media (max-width: 760px) {
  .page-head .page-sub { white-space: normal; } /* long subs wrap, never clip */
  .task-row { flex-wrap: wrap; row-gap: 6px; }
  .task-row .act-body { flex: 1 1 calc(100% - 45px); }
  .task-row .chip-rush, .task-row .task-due, .task-row .task-acts { margin-left: 45px; }
  .task-row .chip-rush ~ .task-due, .task-row .chip-rush ~ .task-acts,
  .task-row .task-due ~ .task-acts { margin-left: 0; }
  .task-row .task-acts { justify-content: flex-start; }
}
.field textarea {
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-chip);
  background: var(--bg);
  color: inherit;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  resize: vertical;
}
.field textarea:focus { border-color: var(--sky-strong); }
@media (max-width: 760px) {
  .dlg .field input, .dlg .field select, .dlg .field textarea { font-size: 16px; } /* or iOS zooms */
}
.auth-alt { margin-top: 14px; font-size: 13px; color: var(--text-3); }
.auth-alt a { color: var(--sky-ink); }
.plan-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.plan-row:last-of-type { border-bottom: 0; }
.plan-row > span:first-child { color: var(--text-3); }
.plan-val { text-align: right; }
.plan-mono { font-family: var(--f-mono); font-size: 13px; }
.legal { max-width: 640px; margin: 0 auto; padding: 48px 22px 64px; }
.legal .auth-h { margin-top: 26px; }
.legal-updated { font-family: var(--f-mono); font-size: 12px; color: var(--text-3); margin: 4px 0 8px; }
.legal h2 { font-size: 16px; margin: 26px 0 8px; }
.legal p, .legal li { font-size: 14px; line-height: 1.65; color: var(--text-2); }
.legal ul { padding-left: 20px; margin: 8px 0; }
.legal li { margin: 6px 0; }
.legal a { color: var(--sky-ink); }
.legal-foot { margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--line); }
.auth-legal { margin-top: 26px; font-size: 12px; }
.auth-legal a { color: var(--text-3); }
.auth-legal a:hover { color: var(--text-2); }