/* transcriber-web.css — Video Transcriber tool styles.
   Loads AFTER styles.css which provides: :root variables, reset, body,
   a, .site-header, .brand, .brand-mark, .nav-links, .button, .eyebrow,
   .hero, .section, .site-footer, .lede, .small-note, .status-pill, etc.
   This file handles: tool-specific layout and components only.
*/

/* ── Override header bottom border to match tool-page feel ─── */
.site-header {
  border-bottom-width: 2px;
}
.transcriber-main{display:flex;flex-direction:column}
.transcriber-main>*{order:4}
.transcriber-main>.tool-hero{order:0}
.transcriber-main>.workspace{order:1}
.transcriber-main>.topic-pointer-wrap{order:2}
.transcriber-main>.primary-instructions{order:3}
.primary-instructions{margin-bottom:clamp(30px,5vw,60px)}

/* ── Headings — keep editorial serif for the tool ─────────────── */
h1, h2, h3 {
  font-family: Georgia, "Palatino Linotype", Palatino, serif;
  letter-spacing: 0;
  line-height: 1.04;
}
h1 { max-width: 900px; font-size: clamp(42px, 6vw, 72px); }
h2 { font-size: clamp(27px, 3.5vw, 42px); }
h3 { margin: 0 0 7px; font-size: 20px; line-height: 1.2; }
.lede { max-width: 760px; margin: 20px 0 0; color: var(--muted); font-size: clamp(17px, 2vw, 22px); }

/* ── Tool hero ─────────────────────────────────────────────────── */
.tool-hero {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(260px,360px);
  gap: clamp(24px,5vw,70px);
  align-items: end;
  padding: clamp(46px,7vw,78px) clamp(18px,6vw,76px) clamp(34px,5vw,58px);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, #fffdfa 0%, #edf7f4 54%, #f8eadb 100%);
}

/* ── Status panel (top-right of hero) ──────────────────────────── */
.limit-panel {
  display: grid;
  gap: 6px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f4fbf9;
  box-shadow: var(--shadow);
}
.limit-panel span, .limit-panel small { color: var(--muted); }
.limit-panel strong { color: var(--deep); font-size: 24px; line-height: 1.1; }

/* ── Workspace two-column layout ───────────────────────────────── */
.workspace {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(360px,.82fr);
  gap: 18px;
  padding: clamp(24px,5vw,46px) clamp(18px,6vw,76px) clamp(54px,7vw,82px);
}
.panel {
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.stack { display: grid; gap: 16px; align-content: start; }
.panel-heading, .meta-row, .result-toolbar, .toolbar-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* ── Status chip ───────────────────────────────────────────────── */
.status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  max-width: 100%;
  padding: 6px 10px;
  border: 1px solid #9bd4cd;
  border-radius: 8px;
  background: #eaf7f5;
  color: var(--deep);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* ── Form fields ───────────────────────────────────────────────── */
.field { display: grid; gap: 7px; font-weight: 900; }
.field span { color: var(--deep); }
.url-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; }

input, textarea, select {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  color: var(--ink);
  font: inherit;
  font-size: 16px; /* prevent iOS zoom */
}
input:focus, textarea:focus, select:focus {
  outline: 3px solid rgba(36,98,71,.25);
  outline-offset: 1px;
  background: #fff;
}

textarea { min-height: 126px; resize: vertical; }
.large-text {
  min-height: 360px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 14px;
}
.control-grid { display: grid; grid-template-columns: 1.2fr 1fr .82fr; gap: 12px; }
.meta-row { color: var(--muted); font-weight: 800; flex-wrap: wrap; }

/* ── Safety / note box ─────────────────────────────────────────── */
.safety-note {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid #cdd8d5;
  border-radius: 8px;
  background: #f6f8f7;
  color: var(--muted);
  font-weight: 800;
}

/* ── Buttons — extend site .button with tool sizes ─────────────── */
.button.small { min-height: 38px; padding: 0 12px; font-size: 13px; }
.button.full  { width: 100%; }
.button[disabled] { cursor: not-allowed; opacity: .65; }

/* ── Error box ─────────────────────────────────────────────────── */
.error-box {
  padding: 14px;
  border: 1px solid #e5a79f;
  border-radius: 8px;
  background: #fff2f0;
  color: #9f2d20;
  font-weight: 850;
}

/* ── Result panel ──────────────────────────────────────────────── */
.result-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #f8fafc;
}
.result-toolbar {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  flex-wrap: wrap;
}
.toolbar-actions { justify-content: flex-start; flex-wrap: wrap; }
#result-output {
  min-height: 280px;
  max-height: 560px;
  margin: 0;
  padding: 16px 20px;
  overflow: auto;
  color: var(--ink);
  font: 15px/1.65 Inter, ui-sans-serif, system-ui, sans-serif;
}
#result-output h2 { font-size: 1.15rem; margin: 1.2rem 0 .4rem; color: var(--deep); }
#result-output h3 { font-size: 1rem; margin: 1rem 0 .3rem; color: var(--deep); }
#result-output h4 { font-size: .9rem; margin: .8rem 0 .25rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
#result-output p  { margin: .4rem 0; }
#result-output ul, #result-output ol { margin: .4rem 0 .4rem 1.25rem; padding: 0; }
#result-output li { margin: .2rem 0; }
#result-output strong { font-weight: 600; }
#result-output em { font-style: italic; }

/* ── Search result list ────────────────────────────────────────── */
.search-result-list { display: grid; gap: 10px; padding: 12px; }
.search-result {
  display: block;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  background: #fff;
}
.search-result:hover { border-color: #9bd4cd; background: #f6fbfa; }
.search-result strong, .search-result span { display: block; }
.search-result span { margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.45; }

/* ── Video pick list ───────────────────────────────────────────── */
.video-pick-list { display: flex; flex-direction: column; gap: 0; }
.video-pick { border-bottom: 1px solid var(--line); }
.video-pick:last-of-type { border-bottom: none; }
.pick-row {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 10px; align-items: start; padding: 12px 14px; cursor: pointer;
}
.pick-row:hover { background: rgba(36,98,71,.04); }
.pick-check { margin-top: 3px; width: 18px; height: 18px; cursor: pointer; accent-color: var(--accent); }
.pick-info { display: flex; flex-direction: column; gap: 3px; }
.pick-info strong { font-size: .9rem; line-height: 1.4; }
.pick-channel { font-size: .78rem; color: var(--muted); }
.pick-angle   { font-size: .78rem; color: var(--accent); font-weight: 500; }
.pick-why     { font-size: .78rem; color: var(--muted); line-height: 1.4; }
.pick-badge { display: inline-block; margin-top: 4px; padding: 2px 7px; border-radius: 4px; font-size: .72rem; font-weight: 600; }
.ready-badge  { background: #e8f5f3; color: var(--accent); }
.search-badge { background: #fef9e7; color: #b7791f; text-decoration: none; }
.search-badge:hover { text-decoration: underline; }
.pick-status { font-size: .75rem; color: var(--muted); white-space: nowrap; padding-top: 3px; min-width: 80px; text-align: right; }
.pick-actions { display: flex; gap: .6rem; flex-wrap: wrap; padding: 12px 14px; border-top: 1px solid var(--line); background: rgba(128,128,128,.03); }
.pick-progress { padding: 10px 14px; font-size: .83rem; color: var(--muted); display: flex; flex-direction: column; gap: .5rem; }

/* ── Standalone CTA / email capture ────────────────────────────── */
.standalone-cta {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 18px;
  border: 1px solid #9bd4cd;
  border-radius: 8px;
  background: #f4fbf9;
}
.standalone-cta p { margin: 0; color: var(--muted); }
.email-capture { padding-top: 2px; }

/* ── Instructions component ─────────────────────────────────────── */
details.instructions { margin: 0 0 22px; border: 1px solid #9bd4cd; border-radius: 10px; background: linear-gradient(180deg, #f4fbf9, #ffffff); box-shadow: var(--shadow-soft); overflow: hidden; }
details.instructions > summary { display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none; font-weight: 900; color: var(--deep); }
details.instructions > summary::-webkit-details-marker { display: none; }
details.instructions > summary:hover { background: #eef7f4; }
.instructions-icon { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--accent); color: #fff; font: 900 15px/1 Inter, system-ui, sans-serif; }
.instructions-label { font-size: 16px; }
.instructions-hint { margin-left: auto; color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
details.instructions > summary:after { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg); transition: transform .2s ease; }
details.instructions[open] > summary:after { transform: rotate(-135deg); }
details.instructions[open] > summary { border-bottom: 1px solid #cfe9e4; }
.instructions-body { padding: 16px 20px 20px; }
.instructions-body > p { margin: .1rem 0 1rem; color: var(--muted); }
ol.instructions-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 13px; }
ol.instructions-steps > li { position: relative; padding: 3px 0 3px 42px; counter-increment: step; line-height: 1.55; color: var(--ink); }
ol.instructions-steps > li:before { content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft, #e0edab); color: var(--accent); font-weight: 900; font-size: 13px; }
ol.instructions-steps > li strong { color: var(--deep); }
.instructions-trouble { margin: 18px 0 0; padding: 12px 14px; border: 1px solid #e6d9b8; border-radius: 8px; background: #fdf8ec; color: #7a5b16; font-size: 14px; font-weight: 700; line-height: 1.5; }
.instructions-trouble strong { color: #5e4612; }

/* ── Topic-finder pointer banner ─────────────────────────────────── */
.topic-finder-pointer { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 13px 18px; border: 1px solid #9bd4cd; border-radius: 10px; background: linear-gradient(120deg, var(--accent) 0%, var(--deep) 100%); color: #fff; text-decoration: none; box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .15s ease; }
.topic-finder-pointer:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(23,33,43,.18); }
.tfp-badge { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--gold); color: #3a2a06; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.tfp-text { flex: 1 1 320px; min-width: 240px; font-size: 14px; line-height: 1.45; color: rgba(255,255,255,.92); }
.tfp-text strong { color: #fff; }
.tfp-arrow { flex: none; margin-left: auto; padding: 8px 14px; border-radius: 8px; background: rgba(255,255,255,.16); font-size: 13px; font-weight: 900; white-space: nowrap; }
.topic-finder-pointer:hover .tfp-arrow { background: rgba(255,255,255,.26); }

/* ── Responsive breakpoints ────────────────────────────────────── */
@media (max-width: 980px) {
  .tool-hero, .workspace, .control-grid, .standalone-cta { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  /* nav-links remain visible; site-nav.js or wrap handles them */
  .url-row { grid-template-columns: 1fr; }
  .tool-hero, .workspace { padding-left: 18px; padding-right: 18px; }
  .panel { padding: 18px; }
  h1 { font-size: 36px; }
  .toolbar-actions { width: 100%; }
  .instructions-hint { display: none; }
  .tfp-arrow { margin-left: 0; width: 100%; text-align: center; }
  .tool-hero{display:block;padding-top:34px;padding-bottom:26px}
  .tool-hero .limit-panel{margin-top:18px;padding:16px}
  .workspace{padding-top:22px}
}

@media (max-width: 480px) {
  .pick-check { width: 22px; height: 22px; }
}