/* YouTube Caption Cleaner workspace: the caption drop zone sits in the first
   screen under a one-line headline. Loaded by /app/youtube-caption-cleaner only. */

main { display: flex; flex-direction: column; }
#toolState:not([hidden]) { display: flex; flex-direction: column; }
#toolState > .feed-hero { order: 0; }
#toolState > .notice { order: 1; }
#toolState > .steps { order: 2; }
#toolState > .workspace { order: 3; }
#toolState > .guest-note { order: 4; }
#toolState > .history { order: 5; }

/* Compact header: one headline, one sentence, two limit chips. */
#toolState > .feed-hero {
  gap: 10px 20px;
  margin-bottom: 14px;
  padding: 16px 20px;
  align-items: center;
}
#toolState > .feed-hero .eyebrow { display: none; }
#toolState > .feed-hero h1 {
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 6px;
}
#toolState > .feed-hero p:not(.eyebrow) { margin: 0; font-size: .98rem; }
#toolState > .feed-hero .hero-facts { gap: 8px; }
#toolState > .feed-hero .hero-facts span { padding: 8px 12px; min-width: 0; }
/* The package price is shown again at the review step; a "0 credits" tile
   before any file is added only confuses. */
#toolState > .feed-hero .hero-facts span:has(#heroCost) { display: none; }

/* The step bar is only useful once work has started. */
body.wt-tool-page #toolState:has(#uploadPanel:not([hidden])) > .steps { display: none !important; }

/* Upload panel: caption zone first and large, media as a slim optional row. */
#uploadPanel .panel-heading { margin-bottom: 12px; }
#uploadPanel .panel-heading .eyebrow { display: none; }
#uploadPanel .panel-heading h2 { margin-top: 0; }
#uploadPanel .panel-heading p { margin-bottom: 0; }
#uploadPanel .caption-upload-grid { grid-template-columns: 1fr; gap: 10px; }
/* (the shared product shell sets drop zones to 145px with !important) */
body.wt-tool-page #captionDrop { min-height: 150px !important; padding: 18px; }
#captionDrop b { font-size: 1.2rem; }
body.wt-tool-page #mediaDrop {
  min-height: 52px !important;
  padding: 10px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 2px 10px;
  border: 1px dashed #b3c2d6 !important;
  background: #fbfcfe !important;
}
#mediaDrop b { font-size: .95rem; }
#mediaDrop span { font-size: .88rem; }
#uploadPanel .drop-zone:focus-within { outline: 3px solid #1769ff; outline-offset: 3px; }
#uploadPanel .actions { margin-top: 14px; }

/* The shared "Start here / prepared example" intro repeats the upload control;
   the example stays one link away (context bar and the line under the button). */
#uploadPanel > .wt-start-grid { display: none; }

.ycc-get {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid #e3e9f2;
  color: #4a5b74;
  font-size: .9rem;
  line-height: 1.5;
}
.ycc-get strong { color: #10213d; }
.ycc-get a {
  display: inline-block;
  padding: 10px 0;
  margin: -10px 0;
  color: #1255d6;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ycc-get a:focus-visible { outline: 3px solid #1769ff; outline-offset: 2px; border-radius: 4px; }

/* One free-tier line: guests already get the guest note (limits, retention,
   terms), so the separate access banner and header pill are left out. */
main:has(.guest-note) > aside.wt-access[data-state="signed-out"],
main:has(.guest-note) > aside.wt-access[data-state="free-ok"] { display: none; }
body[data-guest="1"] .wt-context-status { display: none; }
#toolState > .guest-note {
  margin: 12px 0 0;
  padding: 10px 14px;
  font-size: .84rem;
  line-height: 1.5;
}

/* Signed-out access bar, when shown, stays one slim line. */
main > aside.wt-access[data-state="signed-out"] { margin-bottom: 12px; padding: 8px 14px; }
main > aside.wt-access[data-state="signed-out"] .wt-access__link { min-height: 40px; display: inline-flex; align-items: center; }

/* Fallback card (tool unavailable): drop the repeated free-tier note. */
#gateState .gate-standard-note { display: none; }

@media (max-width: 760px) {
  #toolState > .feed-hero { padding: 14px 16px; margin-bottom: 10px; }
  #toolState > .feed-hero h1 { font-size: 1.35rem; margin-bottom: 4px; }
  #toolState > .feed-hero p:not(.eyebrow) { font-size: .9rem; }
  #toolState > .feed-hero .hero-facts { display: none; }
  #uploadPanel .panel-heading { flex-wrap: wrap; gap: 4px 10px; margin-bottom: 10px; }
  #uploadPanel .panel-heading h2 { font-size: 1.1rem; }
  #uploadPanel .panel-heading > span,
  #uploadPanel .panel-heading p { display: none; }
  body.wt-tool-page #captionDrop { min-height: 120px !important; }
  #uploadPanel .actions .primary { width: 100%; }
  main > aside.wt-access[data-state="signed-out"] { flex-direction: row; align-items: center; gap: 10px; padding: 6px 12px; margin-bottom: 10px; }
  main > aside.wt-access[data-state="signed-out"] .wt-access__copy { gap: 0; }
  main > aside.wt-access[data-state="signed-out"] .wt-access__copy strong { font-size: .84rem; }
  main > aside.wt-access[data-state="signed-out"] .wt-access__copy span { font-size: .78rem; }
  main > aside.wt-access[data-state="signed-out"] .wt-access__actions { flex-direction: row; }
  main > aside.wt-access[data-state="signed-out"] .wt-access__link { width: auto; white-space: nowrap; }
  #gateState .creator-gate-preview { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #uploadPanel .drop-zone { transition: none; }
}