/* The free-tool workbench: settings, previews with drawing layers, results.
   Loaded after pages/tools.css. Prefix tw-. Colours are tokens, except on the
   always-dark video stage and the layers drawn over a picture. */

/* ------------------------------------------------------------- settings */
.tw-fields { align-items: start; }
.tw-field { min-width: 0; }
.tw-field[data-wide], .tw-field--textarea, .tw-field--chips, .tw-field--range, .tw-field--check { grid-column: 1 / -1; }
.tw-brief { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); }
.tw-brief > .growth-note { grid-column: 1 / -1; margin: 0; }
@media (max-width: 479px) { .tw-brief { grid-template-columns: minmax(0, 1fr); } }
.growth-panel .tw-field textarea { margin-bottom: 0; }
.tw-label { display: block; margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-strong); }
.tw-unit { font-weight: var(--font-regular, 400); color: var(--text-muted); }
.tw-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.growth-panel label.tw-chip { position: relative; margin: 0; cursor: pointer; }
.growth-panel .tw-chip input { position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0; margin: 0; cursor: pointer; }
.tw-chip span { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 var(--space-4); border: var(--border-w) solid var(--border-strong); border-radius: var(--radius-full, 999px);
  font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text); background: var(--surface); transition: background var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default); }
.tw-chip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent, #fff); }
.tw-chip input:focus-visible + span { outline: var(--border-w-thick) solid var(--accent); outline-offset: 2px; }
.growth-panel input.tw-chip__num { width: 6.5rem; min-height: 2.75rem; }
.tw-range { display: flex; align-items: center; gap: var(--space-4); }
.growth-panel .tw-range input[type=range] { flex: 1; padding: 0; min-height: 2.75rem; border: 0; background: none; box-shadow: none; accent-color: var(--accent); }
.tw-range output { flex: none; min-width: 4.5rem; text-align: right; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted); }
.growth-panel label.tw-check { display: flex; align-items: center; gap: var(--space-3); min-height: 2.75rem; margin: 0; font-weight: var(--font-medium); cursor: pointer; }
.growth-panel input[type=color] { padding: 0.2rem; height: 2.75rem; cursor: pointer; }
.tw-presets { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.tw-preset { min-height: 2rem; padding: 0 var(--space-3); border: var(--border-w) solid var(--border); border-radius: var(--radius-full, 999px); background: var(--bg-subtle); color: var(--text); font-size: var(--text-xs); cursor: pointer; }
.tw-preset:hover { border-color: var(--border-strong); }
.tw-actions { margin-top: var(--space-6); }
.tw-linkbtn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; color: var(--text-link); }
.tw-input + .tw-input { margin-top: var(--space-5); }
.tw-input:not(.is-many) .tb-drop.has-file { display: none; }
.tw-input.is-many .tb-drop.has-file { padding-block: var(--space-3); }
.tw-input.is-many .tb-drop.has-file .tb-drop__icon, .tw-input.is-many .tb-drop.has-file > p:first-of-type { display: none; }
.growth-panel input.tw-file { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; opacity: 0; pointer-events: none; }
.tb-drop { position: relative; }
.tb-drop[data-dragging] { border-color: var(--accent); background: var(--accent-subtle); }

/* -------------------------------------------------------------- preview */
.tw-preview { margin: var(--space-5) 0; }
.tw-stage { display: flex; justify-content: center; border-radius: var(--radius-md); background: #0b0e11; overflow: hidden; }
.tw-stage:empty { display: none; }
.tw-fit { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.tw-fit--audio { display: block; width: 100%; padding: var(--space-4); background: var(--bg-subtle); }
.growth-panel .tw-fit video { width: auto; max-width: 100%; max-height: 24rem; border-radius: 0; background: #000; transition: transform var(--duration-base) var(--ease-default); }
.growth-panel .tw-fit audio { width: 100%; }
.tw-facts { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--text-muted); overflow-wrap: anywhere; }
.tw-widget { margin-top: var(--space-3); }
.tw-widget:empty { display: none; }
.tw-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-3); }
.tw-row .s-btn { min-height: 2.5rem; }
.tw-warn { margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--warning-subtle, #fff4e5); color: var(--warning-text, #7a4a00); font-size: var(--text-sm); line-height: 1.5; }

/* two handles on one bar */
.tw-trim__bar { position: relative; height: 3.5rem; border-radius: var(--radius-md); background: var(--bg-subtle); border: var(--border-w) solid var(--border); }
.tw-trim__wave { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.55; }
.tw-trim__sel { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--accent) 22%, transparent); border-inline: 3px solid var(--accent); pointer-events: none; }
.growth-panel .tw-trim__bar input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; pointer-events: none; appearance: none; -webkit-appearance: none; }
.tw-trim__bar input[type=range]::-webkit-slider-runnable-track { background: none; height: 100%; }
.tw-trim__bar input[type=range]::-moz-range-track { background: none; height: 100%; }
.tw-trim__bar input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; width: 1.25rem; height: 3.5rem; border: 0; border-radius: var(--radius-sm); background: var(--accent); cursor: ew-resize; box-shadow: 0 0 0 2px var(--surface); }
.tw-trim__bar input[type=range]::-moz-range-thumb { pointer-events: auto; width: 1.25rem; height: 3.5rem; border: 0; border-radius: var(--radius-sm); background: var(--accent); cursor: ew-resize; box-shadow: 0 0 0 2px var(--surface); }
.tw-trim__bar input[type=range]:focus-visible::-webkit-slider-thumb { outline: var(--border-w-thick) solid var(--text-strong); outline-offset: 2px; }
.tw-trim__len { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted); }
.tw-trim__len.is-over { color: var(--danger-text, #b42318); }

/* a layer drawn over the picture */
.tw-overlay { position: absolute; inset: 0; touch-action: none; }
.tw-box-layer { cursor: crosshair; }
.tw-box-layer--crop { cursor: grab; }
.tw-box { position: absolute; box-sizing: border-box; border: 2px solid #fff; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55); cursor: move; outline: 0; }
.tw-box-layer--region .tw-box { box-shadow: none; background: rgba(214, 81, 49, 0.35); border-color: #ff7a59; }
.tw-box:focus-visible { border-color: #7cc4ff; }
.tw-box__grip { position: absolute; right: -9px; bottom: -9px; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid #ff7a59; cursor: nwse-resize; }
.tw-place-layer { pointer-events: none; overflow: hidden; }
.tw-placed { position: absolute; max-width: 96%; }
.tw-placed--text { line-height: 1.2; font-family: Montserrat, var(--font-sans); font-weight: 600; text-align: center; white-space: pre-line; }
.tw-transport { flex-wrap: nowrap; }
.growth-panel .tw-scrub { flex: 1; min-height: 2.5rem; padding: 0; border: 0; background: none; box-shadow: none; accent-color: var(--accent); }
.tw-time { flex: none; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }

/* --------------------------------------------------------------- result */
.tw-status { font-weight: var(--font-medium); color: var(--text-strong); line-height: 1.5; }
.tw-status:empty { display: none; }
.tw-error { margin: var(--space-3) 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: var(--border-w) solid var(--danger-border, #f1b0a8); background: var(--danger-subtle, #fdecea); color: var(--danger-text, #8c1d18); font-size: var(--text-sm); line-height: 1.55; }
.growth-results progress { width: 100%; height: 0.5rem; margin: var(--space-3) 0; accent-color: var(--accent); }
.tw-output { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); min-width: 0; }
.tw-output:empty { display: none; }
.growth-results .tw-result-media { max-height: 26rem; object-fit: contain; }
.growth-results img.tw-result-media { background: repeating-conic-gradient(var(--bg-subtle) 0% 25%, var(--surface) 0% 50%) 50% / 20px 20px; }
.tw-table { width: 100%; font-size: var(--text-sm); }
.tw-table caption { text-align: left; padding-bottom: var(--space-2); font-weight: var(--font-semibold); color: var(--text-strong); }
.tw-table th[scope=row] { width: 38%; font-weight: var(--font-medium); color: var(--text-muted); text-align: left; }
.tw-table td { overflow-wrap: anywhere; }
.tw-note { margin: 0; line-height: 1.55; }
.tw-note--good { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--accent-subtle); color: var(--text); }
.tw-text { max-height: 22rem; overflow: auto; margin: 0; padding: var(--space-4); border-radius: var(--radius-md); background: var(--bg-subtle); font-family: var(--font-sans); font-size: var(--text-sm); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.tw-downloads { margin-top: var(--space-4); }
.tw-downloads a.is-off { opacity: 0.45; pointer-events: none; }
.tw-expiry { font-family: var(--font-mono); font-size: var(--text-xs); }
.tw-parts, .tw-cues { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tw-parts li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: var(--border-w) solid var(--border); font-size: var(--text-sm); }
.tw-parts li span { flex: 1 1 12rem; overflow-wrap: anywhere; }
.tw-cues { max-height: 20rem; overflow: auto; border: var(--border-w) solid var(--border); border-radius: var(--radius-md); }
.tw-cue { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: var(--space-3); width: 100%; padding: var(--space-2) var(--space-3); border: 0; border-bottom: var(--border-w) solid var(--border); background: none; color: var(--text); font: inherit; font-size: var(--text-sm); line-height: 1.5; text-align: left; cursor: pointer; }
.tw-cue:hover { background: var(--bg-subtle); }
.tw-cue time { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent-text); padding-top: 0.15rem; }
.tw-ab[aria-pressed=true] { background: var(--accent-subtle); color: var(--accent-text); }

/* cards for drafts */
.tw-cards { display: flex; flex-direction: column; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.tw-card { padding: var(--space-4); border: var(--border-w) solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.tw-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.tw-card__label { font-size: var(--text-xs); font-weight: var(--font-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.tw-card__text { margin: 0; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.tw-card__meta { margin-top: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
.tw-card__meta.is-over { color: var(--danger-text, #b42318); }
.tw-card .tw-copy, .tw-row .tw-copy { min-height: 2.25rem; padding-inline: var(--space-3); font-size: var(--text-sm); }
.tw-fold { background: color-mix(in srgb, var(--accent) 16%, transparent); border-radius: 2px; }
.tw-del { color: var(--danger-text, #b42318); text-decoration: line-through; }
.tw-ins { background: color-mix(in srgb, var(--success, #1a7f4b) 20%, transparent); border-radius: 2px; }
.tw-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-sm); color: var(--text-muted); }
.tw-checks li::before { content: "✓ "; color: var(--success-text, #1a7f4b); font-weight: 700; }
.tw-group-title { margin: var(--space-3) 0 0; font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-strong); }

/* ------------------------------------------------- engines drawn by script */
.tw-controls { display: flex; flex-direction: column; gap: var(--space-4); }
.tw-controls .growth-fields { margin: 0; }
.tw-controls h3 { font-size: var(--text-base); }
.tw-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tw-answer { padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--accent-subtle); }
.tw-answer b { display: block; font-family: var(--font-display); font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--text-strong); overflow-wrap: anywhere; }
.tw-answer span { display: block; margin-top: var(--space-1); font-size: var(--text-sm); color: var(--text-muted); }
.tw-method { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); line-height: 1.6; overflow-wrap: anywhere; }
.tw-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.tw-swatch { border: var(--border-w) solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); }
.tw-swatch i { display: block; height: 4rem; }
.tw-swatch div { padding: var(--space-2) var(--space-3); font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.5; }
.tw-swatch button { width: 100%; min-height: 2.25rem; border: 0; border-top: var(--border-w) solid var(--border); background: none; color: var(--text-link); font-size: var(--text-xs); cursor: pointer; }
.tw-canvas-wrap { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.tw-canvas-wrap canvas, .tw-canvas-wrap img { max-width: 100%; max-height: 26rem; height: auto; width: auto; }
.tw-small-preview { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); color: var(--text-muted); }
.tw-small-preview canvas { width: 168px; height: 94px; border-radius: 6px; border: var(--border-w) solid var(--border); }

/* caption editor */
.tw-cap-rows { display: flex; flex-direction: column; gap: var(--space-3); }
.tw-cap-row { padding: var(--space-3); border: var(--border-w) solid var(--border); border-radius: var(--radius-md); }
.tw-cap-row.is-now { border-color: var(--accent); box-shadow: 0 0 0 2px var(--ring); }
.tw-cap-row.is-flagged { border-color: var(--warning-border, #f0b35a); }
.tw-cap-row__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.tw-cap-row__n { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); min-width: 2rem; }
.growth-panel .tw-cap-row input.tw-tc { width: 8.25rem; min-height: 2.25rem; padding: 0.25rem 0.5rem; font-family: var(--font-mono); font-size: var(--text-sm); }
.growth-panel .tw-cap-row textarea { margin: 0; min-height: 0; font-size: var(--text-sm); }
.tw-cap-row__flags { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--warning-text, #7a4a00); }
.tw-mini { min-height: 2rem; padding: 0 var(--space-2); border: var(--border-w) solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: var(--text-xs); cursor: pointer; }
.tw-mini:hover { border-color: var(--border-strong); }
.tw-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); color: var(--text-muted); }
.tw-vid { position: relative; background: #000; border-radius: var(--radius-md); overflow: hidden; line-height: 0; }
.growth-panel .tw-vid video { width: 100%; max-height: 20rem; border-radius: 0; }
.tw-vid__cap { position: absolute; left: 4%; right: 4%; bottom: 14%; text-align: center; color: #fff; font-size: clamp(0.8rem, 2.2vw, 1.05rem); line-height: 1.3; text-shadow: 0 0 4px #000, 0 0 4px #000; white-space: pre-line; pointer-events: none; }

/* recording */
.tw-rec { position: relative; background: #0b0e11; border-radius: var(--radius-md); overflow: hidden; line-height: 0; min-height: 4rem; }
.growth-panel .tw-rec video { width: 100%; max-height: 28rem; border-radius: 0; background: #000; }
.tw-rec video.is-mirrored { transform: scaleX(-1); }
.tw-rec--portrait video { aspect-ratio: 9 / 16; width: auto; max-width: 100%; height: 28rem; margin-inline: auto; object-fit: cover; }
.tw-rec__bar { position: absolute; top: var(--space-3); left: var(--space-3); display: flex; align-items: center; gap: var(--space-2); padding: 0.35rem 0.7rem; border-radius: 999px; background: rgba(0, 0, 0, 0.7); color: #fff; font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1; }
.tw-rec__dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: #ff4d3d; animation: tw-pulse 1.2s infinite; }
.tw-rec__bar.is-paused .tw-rec__dot { background: #f5c451; animation: none; }
@keyframes tw-pulse { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .tw-rec__dot { animation: none; } }
.tw-count { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.55); color: #fff; font-family: var(--font-display); font-size: 6rem; line-height: 1; }
.tw-meter { position: relative; height: 0.75rem; border-radius: 999px; background: var(--bg-subtle); border: var(--border-w) solid var(--border); overflow: hidden; }
.tw-meter i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--success, #1a7f4b); transition: width 60ms linear; }
.tw-meter i.is-hot { background: var(--danger, #d92d20); }
.tw-meter b { position: absolute; top: 0; bottom: 0; left: 55%; width: 30%; border-inline: 1px dashed var(--text-subtle); }
.tw-meter-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; font-size: var(--text-xs); color: var(--text-muted); }
.tw-wavebox { width: 100%; height: 5rem; border-radius: var(--radius-md); background: var(--bg-subtle); }

/* teleprompter */
.tw-prompter { position: relative; height: 16rem; overflow: hidden; border-radius: var(--radius-md); background: #000; color: #fff; }
.tw-prompter__text { position: absolute; left: 0; right: 0; top: 0; padding: 45% 8% 60%; font-family: var(--font-sans); font-weight: 600; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; will-change: transform; }
.tw-prompter.is-mirrored .tw-prompter__text { scale: -1 1; }
.tw-prompter__line { position: absolute; left: 0; right: 0; top: 38%; height: 0; border-top: 2px solid rgba(255, 122, 89, 0.9); pointer-events: none; }
.tw-prompter__line::before { content: ""; position: absolute; left: 0; top: -8px; border: 8px solid transparent; border-left-color: rgba(255, 122, 89, 0.95); }
.tw-prompter:fullscreen { height: 100vh; border-radius: 0; }
.tw-prompter--over { position: absolute; inset: 0 0 auto 0; height: 46%; background: rgba(0, 0, 0, 0.62); border-radius: 0; }
.tw-prompter--over .tw-prompter__text { padding: 12% 8% 40%; }
.tw-prompter--over .tw-prompter__line { top: 30%; }
.tw-prompter__hud { position: absolute; right: var(--space-3); bottom: var(--space-3); padding: 0.3rem 0.6rem; border-radius: 999px; background: rgba(0, 0, 0, 0.65); color: #fff; font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.2; }

/* the specs and reading sections under the workbench */
.tw-specs { display: flex; flex-direction: column; margin: 0; border-top: var(--border-w) solid var(--border); }
.tw-specs > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4) 0; border-bottom: var(--border-w) solid var(--border); }
.tw-specs dt { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-strong); }
.tw-specs dd { margin: 0; color: var(--text-muted); line-height: 1.6; overflow-wrap: anywhere; }
.tw-specs dd b { color: var(--text); font-weight: var(--font-medium); }
@media (max-width: 479px) { .tw-specs > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); } }
.tw-know__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: var(--space-6) var(--space-8); }
.tw-know__grid h3 { font-size: var(--text-lg); letter-spacing: -0.01em; margin-bottom: var(--space-2); }
.tw-know__grid p { color: var(--text-muted); line-height: 1.65; }
.tw-know__grid a, .tw-faq a { color: var(--text-link); text-decoration: underline; text-underline-offset: 3px; }
.tw-faq .faq2 { max-width: 52rem; }