/* css/overrides.css: later rules for single pages (clips, the editor's Find, Episodes, Settings, cuts, admin);
   they come after the rest on purpose.
   Part 9 of 10 of the app's stylesheet (app.css until Phase 3). Every page loads all the parts, in the
   order of CSS in lib/views/parts.js, so a later part still wins a tie, as further down the one file did. */
/* clips page: thumbnails and the player draw the clip as it will look (draw.js) */
.thumb .tcv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.thumb .pbtn {
  opacity: 0.92;
}
.stage canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* the editor's Find: results from the whole transcript */
.findres {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
}
.findres .hit {
  text-align: left;
  background: #fff;
  border: 2px solid var(--edge);
  border-radius: 10px;
  padding: 8px 10px;
  font: 500 14px/1.4 var(--body);
  cursor: pointer;
  color: var(--fg);
}
.findres .hit:hover,
.findres .hit[aria-current="true"] {
  background: #fff6d6;
}
.findres .hit .mono {
  font-weight: 700;
  margin-right: 8px;
}
.findres mark {
  background: var(--mustard);
  color: var(--fg);
  border-radius: 3px;
  padding: 0 2px;
}
.findbar,
.findsync {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
}
.findbar[hidden],
.findsync[hidden] {
  display: none;
}
.findsync input[type="range"] {
  width: 100%;
}

.trreplace {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  margin-top: 12px;
}
.trreplace .hint {
  flex: 1 1 280px;
}
/* the editor: Caption timing (everyone) and the Timeline (Advanced) */
.captime {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  padding-top: 6px;
  border-top: 2px dashed var(--line, #d9cfbd);
}
.captime #capShift {
  min-width: 110px;
  text-align: center;
}
.captime > .hint:last-child {
  flex: 1 1 220px;
}
.tlwrap {
  width: 100%;
  border: 3px solid var(--edge);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.tlwrap canvas {
  display: block;
  width: 100%;
  height: 180px;
  touch-action: none;
  cursor: default;
}
.tlbar {
  align-items: center;
}

/* the Episodes list: the whole row opens the episode; × deletes it */
.eprow {
  position: relative;
}
.eprow .rowlink {
  color: inherit;
  text-decoration: none;
}
.eprow .rowlink::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
}
.xbtn {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  border: 2px solid var(--edge);
  border-radius: 999px;
  background: #fff;
  font: 800 20px/1 var(--body);
  color: var(--fg);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.xbtn:hover,
.xbtn:focus-visible {
  background: var(--pen, #e4412b);
  color: #fff;
}
.xbtn[disabled] {
  opacity: 0.5;
  cursor: default;
}

/* a clip marked ready */
.opt.approve[aria-pressed="true"] {
  background: #557f2c;
  color: #fff;
  border-color: #17130f;
}
.captime[hidden] {
  display: none;
}

/* renaming an episode on the Episodes list */
.xbtn.ren {
  font-size: 16px;
}
.xbtn.ren:hover,
.xbtn.ren:focus-visible {
  background: var(--mustard);
  color: var(--fg);
}
.eprow .rename {
  position: relative;
  z-index: 1;
  flex: 1 1 260px;
  min-width: 0;
  font: 800 17px var(--body);
  border: 2px solid var(--edge);
  border-radius: 10px;
  padding: 6px 10px;
}

/* Settings, Postiz: the shape each platform gets */
.rowl .shapef {
  flex: 0 0 140px;
  margin: 0;
}
.rowl .shape {
  flex: 0 0 140px;
  font-size: 13px;
  color: var(--muted, #6b6259);
  padding-left: 4px;
}

/* the editor's shape strip: the same clip as 9:16, 1:1 and 16:9 */
.shapes {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}
.shapes .opt[aria-selected="true"] {
  background: var(--edge, #17130f);
  color: #fff;
}
.shapes .opt.unused:not([aria-selected="true"]) {
  opacity: 0.55;
}
.shapeto {
  min-height: 1.3em;
  margin: 0 0 8px;
}
.canvaswrap.wide {
  width: min(560px, 92vw);
}

/* cuts inside a clip (Advanced) */
.words .w.cut {
  text-decoration: line-through 2px var(--tomato, #e4412b);
  color: #a39789;
}
.cutbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  padding-top: 6px;
  margin-top: 8px;
  border-top: 2px dashed var(--line, #d9cfbd);
}
.cutbar[hidden] {
  display: none;
}
.cutbar > .hint:last-child {
  flex: 1 1 100%;
}

/* /admin: the trial-to-paid funnel */
.tablewrap {
  overflow-x: auto;
}
table.funnel {
  border-collapse: collapse;
  width: 100%;
  font-size: 15px;
}
table.funnel th,
table.funnel td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid #eee4d4;
  white-space: nowrap;
}
table.funnel thead th {
  font-size: 13px;
  color: var(--muted, #6b6259);
}

/* every page: privacy, terms and contact */
.appfoot {
  text-align: center;
  font-size: 13px;
  color: var(--muted, #6b6259);
  padding: 28px 16px 32px;
}
.appfoot a {
  color: inherit;
}