/* Captain Transcripts — app-specific rules on top of styles.css (shared design system). */

.page-head .actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-left: auto; }
.page-head > div:first-child { flex: 1; min-width: 14rem; }

/* styles.css: .btn:hover (muted bg) beats .btn-white:hover (opacity only) -> unreadable active button */
.btn-white:hover { background: var(--primary); color: var(--primary-foreground); }

/* documents tree on a project page */
.doc-children { display: flex; flex-direction: column; gap: 0.45rem; margin: -0.15rem 0 0.15rem 2.2rem; }
.doc-children .row-card { padding: 0.6rem 0.9rem; }
.doc-children .branch { color: var(--muted-foreground); flex: none; display: inline-flex; }
.doc-children .branch .icon { width: 1rem; height: 1rem; }
.row-card a.row-link { color: inherit; text-decoration: none; }
.row-card a.row-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.row-card .row-actions { position: relative; z-index: 1; }

/* jobs */
.jobs { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.4rem; }
.job-row { display: flex; align-items: center; gap: 0.75rem; border: 1px solid var(--border); border-radius: 0.85rem; background: var(--card); padding: 0.7rem 0.9rem; font-size: 0.9rem; }
.job-row .job-body { flex: 1; min-width: 0; }
.job-row .job-title { font-weight: 700; overflow-wrap: anywhere; }
.job-row .job-stage { color: var(--muted-foreground); font-size: 0.84rem; margin-top: 0.1rem; overflow-wrap: anywhere; }
.job-row.error { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.job-row.error .job-stage { color: var(--danger); }
.job-row .job-icon { flex: none; display: inline-flex; color: var(--muted-foreground); }
.job-row.done .job-icon { color: var(--success); }
.job-row.error .job-icon { color: var(--danger); }
.job-row .job-icon .icon { width: 1.15rem; height: 1.15rem; }

/* document page */
.doc-head { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.5rem; }
.doc-head .page-title { flex: 1; min-width: 0; overflow-wrap: anywhere; margin: 0; }
.doc-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; color: var(--muted-foreground); font-size: 0.85rem; margin-bottom: 1rem; align-items: center; }
.doc-meta > span, .doc-meta > a { display: inline-flex; align-items: center; gap: 0.35rem; }
.doc-meta .icon { width: 0.95rem; height: 0.95rem; }
.doc-meta a { color: var(--muted-foreground); }
.doc-meta a:hover { color: var(--accent); }
.related { border: 1px solid var(--border); border-radius: 0.85rem; background: var(--card); padding: 0.7rem 1rem; margin-bottom: 1rem; font-size: 0.88rem; }
.related-title { font-weight: 700; color: var(--muted-foreground); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.35rem; }
.related a { display: flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0; color: var(--foreground); text-decoration: none; font-weight: 600; min-height: 2rem; }
.related a:hover { color: var(--accent); }
.related .icon { width: 1rem; height: 1rem; color: var(--muted-foreground); flex: none; }
.related .muted { font-weight: 500; font-size: 0.8rem; }

.speakers { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; align-items: center; }
.speaker-chip { display: inline-flex; align-items: center; gap: 0.4rem; height: 2.2rem; padding: 0 0.75rem; border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--foreground); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.speaker-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.speaker-chip:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.speaker-chip .n { color: var(--muted-foreground); font-weight: 500; font-size: 0.78rem; }
.dot { display: inline-block; width: 0.62rem; height: 0.62rem; border-radius: 50%; flex: none; }

/* find bar: sticks to the top of the scrolling content */
.findbar { position: sticky; top: -1px; z-index: 5; display: flex; gap: 0.4rem; align-items: center; padding: 0.55rem 0; margin-bottom: 0.6rem; background: var(--background); border-bottom: 1px solid var(--border); }
.findbar .input { flex: 1; min-width: 0; }
.findbar .count:empty { display: none; }
.findbar .count { font-size: 0.8rem; color: var(--muted-foreground); white-space: nowrap; min-width: 4.5rem; text-align: center; font-variant-numeric: tabular-nums; }

mark.hl { background: color-mix(in srgb, var(--warn) 35%, transparent); color: inherit; border-radius: 0.2rem; padding: 0 0.05em; }
mark.hl.cur { background: var(--accent); color: #fff; }

/* transcript */
.transcript { max-width: var(--doc-width); }
.seg { display: grid; grid-template-columns: 3.6rem 1fr; gap: 0 0.8rem; padding: 0.35rem 0.4rem; border-radius: 0.5rem; scroll-margin-top: 5rem; }
.seg.flash { background: color-mix(in srgb, var(--accent) 12%, transparent); transition: background 1.2s; }
.seg-time { font-size: 0.75rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; padding-top: 0.25rem; text-align: right; }
.seg-speaker { grid-column: 2; display: flex; align-items: center; gap: 0.4rem; font-weight: 800; font-size: 0.85rem; margin-top: 0.7rem; }
.seg-text { grid-column: 2; line-height: 1.65; color: var(--doc-fg); overflow-wrap: anywhere; }
.seg.first .seg-speaker { margin-top: 0; }

/* markdown text */
.doc.md { max-width: var(--doc-width); overflow-wrap: anywhere; }
.doc li.task { list-style: none; margin-left: -1.3rem; }
.doc li.task input { margin: 0 0.35rem 0 0; vertical-align: -0.1em; }
.doc .md-table { overflow-x: auto; margin: 0.6rem 0; border: 1px solid var(--border); border-radius: 0.6rem; }
.doc .md-table table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.doc .md-table th, .doc .md-table td { overflow-wrap: normal; min-width: 7rem; padding: 0.45rem 0.7rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.doc .md-table th { background: var(--muted); font-weight: 700; }
.doc .md-table tr:last-child td { border-bottom: 0; }
.doc del { opacity: 0.7; }
.editor-area { min-height: 60dvh; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88rem; line-height: 1.55; }

/* search */
.search-form { display: flex; gap: 0.5rem; margin-bottom: 1.2rem; }
.search-form .input { flex: 1; min-width: 0; }
.hit { border: 1px solid var(--border); border-radius: 0.85rem; background: var(--card); padding: 0.8rem 1rem; margin-bottom: 0.7rem; }
.hit-title { font-weight: 800; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.hit-title a { color: var(--foreground); text-decoration: none; }
.hit-title a:hover { color: var(--accent); }
.hit-title .icon { width: 1rem; height: 1rem; color: var(--muted-foreground); }
.hit-sub { font-size: 0.8rem; color: var(--muted-foreground); margin: 0.1rem 0 0.4rem; }
.hit-match { display: flex; gap: 0.6rem; padding: 0.35rem 0.4rem; border-radius: 0.45rem; color: var(--doc-fg); text-decoration: none; font-size: 0.9rem; line-height: 1.5; }
.hit-match:hover { background: var(--muted); }
.hit-match .t { flex: none; font-size: 0.75rem; color: var(--muted-foreground); width: 3.4rem; text-align: right; padding-top: 0.15rem; font-variant-numeric: tabular-nums; }
.hit-match .who { font-weight: 700; color: var(--foreground); }
.hit-match mark { background: color-mix(in srgb, var(--warn) 35%, transparent); color: inherit; border-radius: 0.2rem; }

/* modal form */
.form-stack { display: flex; flex-direction: column; gap: 0.85rem; }
.form-stack label.field > span { font-size: 0.82rem; font-weight: 700; color: var(--muted-foreground); }
.form-stack .hint { font-size: 0.8rem; color: var(--muted-foreground); margin: 0; }
.form-error { color: var(--danger); font-size: 0.86rem; }
.progress { height: 0.4rem; border-radius: 999px; background: var(--muted); overflow: hidden; }
.progress > div { height: 100%; background: var(--accent); width: 0; transition: width 0.2s; }
.speaker-list { max-height: 52dvh; overflow-y: auto; margin: 0 -0.3rem; padding: 0 0.3rem; }
.speaker-form-row .input::placeholder { font-style: italic; opacity: 0.55; }
.speaker-form-row { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.6rem; align-items: center; padding: 0.55rem 0; border-bottom: 1px solid var(--border); }
.speaker-form-row:last-child { border-bottom: 0; }
.speaker-form-row .sample { grid-column: 2; font-size: 0.8rem; color: var(--muted-foreground); line-height: 1.4; }

@media (max-width: 760px) {
  #nav-bottom { display: none; }  /* the avatar opens the profile */
  .speakers { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 0.1rem; }
  .speakers::-webkit-scrollbar { display: none; }
  .speaker-chip { flex: none; }
  .hotkeys { display: none; }
  .modal .tabs .tab { padding: 0.35rem 0.65rem; }
  .modal .form-actions { flex-direction: column-reverse; align-items: stretch; }
  .modal .form-actions .btn { width: 100%; }
  .doc-children { margin-left: 1rem; }
  .seg { grid-template-columns: 1fr; padding: 0.3rem 0.2rem; }
  .seg-time { text-align: left; padding: 0; grid-row: auto; }
  .seg-speaker, .seg-text { grid-column: 1; }
  .seg-time { order: 0; }
  .page-head .actions { margin-left: 0; }
  .hit-match { flex-direction: column; gap: 0.1rem; }
  .hit-match .t { text-align: left; width: auto; }
}

@media (max-width: 400px) {
  .sidebar .brand { display: none; }
}