/* Caption-specific workspace. Three columns are deliberate at every supported dock width. */
body .workspace main[data-pane=captions]>.preset-panel{display:none!important}
body .workspace main[data-pane=captions] [hidden]{display:none!important}
body .workspace main[data-pane=captions] {gap:8px!important}
#caption-gallery{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 3px 8px 1px;scrollbar-width:thin}
.caption-gallery-heading{display:flex;align-items:baseline;justify-content:space-between;padding:4px 1px 10px;gap:8px}
.caption-gallery-heading h1{font-size:14px;font-weight:650;line-height:20px;margin:0;color:var(--text,#eee);letter-spacing:-.2px}
.caption-gallery-heading>span{font-size:10px;color:var(--muted,#999)}
#caption-grid{margin:0 auto;width:100%;display:flex;flex-direction:column;gap:7px}
#caption-grid>[role=row]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
#caption-grid [role=gridcell]{min-width:0}
body .workspace #caption-grid .caption-tile{position:relative;display:block;width:100%;height:auto;min-height:0;aspect-ratio:1;padding:0!important;margin:0;overflow:hidden;border-radius:9px;border:1px solid #343438;background:#000!important;box-shadow:none!important;transition:border-color .12s;cursor:pointer;transform:none}
#caption-grid .caption-tile canvas{display:block;position:absolute;width:100%;height:calc(100% - 19px);left:0;top:0;pointer-events:none}
body .workspace #caption-grid .caption-tile>span{position:absolute;bottom:0;left:0;right:0;display:block;padding:3px 3px 5px;font-size:10px;line-height:12px;font-weight:500;color:#bfbfc5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;background:#000}@media (hover:hover) and (pointer:fine){body .workspace #caption-grid .caption-tile:hover{border-color:#85858e}}
body .workspace #caption-grid .caption-tile.selected{border-color:#2f7bff}
body .workspace #caption-grid .caption-tile.selected>span{color:#8cc1ff}
#caption-controls-head{display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;gap:8px;height:33px;padding:0 2px}
#caption-controls-head>div{display:flex;gap:7px;align-items:baseline;min-width:0;margin-left:auto}
#caption-controls-head strong{font-size:12px;font-weight:650;overflow:hidden;text-overflow:ellipsis}
#caption-controls-head div>span{font-size:10px;color:var(--muted,#999)}
body .workspace #caption-controls-head button{background:transparent;box-shadow:none;border:1px solid var(--border,#444);border-radius:7px;min-height:28px;min-width:28px;padding:3px 7px;font-size:12px;line-height:18px;color:inherit}
#caption-back span{font-size:11px}
body .workspace main[data-pane=captions]>article{padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
body .workspace main[data-pane=captions] .workspace-scroll{padding:0 2px!important}
body .workspace main[data-pane=captions] .preview-card{padding-bottom:5px!important;margin-bottom:2px!important}
body .workspace main[data-pane=captions] .preview.khs-preview{width:min(120px,23vh)!important;max-height:120px!important;border-radius:9px!important}
body .workspace main[data-pane=captions] .parameters-card{background:var(--surface,#27272a)!important;border:1px solid var(--border,#38383d)!important;border-radius:9px!important;padding:9px!important}
body .workspace main[data-pane=captions] #caption-core{margin-top:8px;gap:8px!important}
body .workspace main[data-pane=captions] #params{position:relative;gap:8px!important}
#params .khs-swatches{flex-wrap:wrap}
body .workspace main[data-pane=captions] #reset-style{order:5;justify-self:end;background:transparent!important;border:0!important;box-shadow:none!important;color:var(--muted,#999)!important;padding:0!important;min-height:18px;font-size:9px!important;margin:0!important}
#caption-style-options{margin-top:10px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--border,#444)}
#caption-style-options:empty{display:none}
#params-asr{margin-top:10px;padding-top:10px;border-top:1px solid var(--border,#444)}
#caption-language{margin:10px 0}
body .workspace main[data-pane=captions] .caption-custom-reading{display:none!important}
#caption-core .khs-dd-btn{font-size:11px;min-height:28px;padding:4px 7px}
body .workspace main[data-pane=captions] .khs-form>label{grid-template-columns:58px minmax(0,1fr)!important}
#caption-style-options>label{display:grid;grid-template-columns:90px minmax(0,1fr);align-items:center;gap:6px}
body .workspace main[data-pane=captions] .apply-row{margin-top:3px!important;padding:4px 1px 1px;box-shadow:none!important}
@media(max-width:320px){#caption-grid,#caption-grid>[role=row]{gap:5px}.caption-gallery-heading h1{font-size:12px}#caption-grid .caption-tile>span{font-size:9px!important}.caption-gallery-heading>span{font-size:9px}#caption-controls-head div>span{display:none}body .workspace main[data-pane=captions] .parameters-card{padding:7px!important}}
@media(min-width:620px){#caption-gallery{max-width:660px;width:100%;align-self:center}#caption-grid,#caption-grid>[role=row]{gap:10px}body .workspace #caption-grid .caption-tile>span{font-size:12px;line-height:16px;padding-bottom:7px}body .workspace main[data-pane=captions]>article{max-width:580px;width:100%;align-self:center}}
@media(prefers-reduced-motion:reduce){#caption-grid .caption-tile{transition:none!important}}

/* essentials first; the rest of the styles open under one quiet toggle */
#caption-grid .caption-more-row{display:flex;justify-content:center;margin:6px 0 2px}
#caption-grid .caption-more{appearance:none;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:rgba(255,255,255,.72);font:600 12px/1 -apple-system,"SF Pro Text","Segoe UI",sans-serif;padding:9px 16px;border-radius:999px;cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease}@media (hover:hover) and (pointer:fine){#caption-grid .caption-more:hover{background:rgba(255,255,255,.09);color:#fff;border-color:rgba(255,255,255,.2)}}
#caption-grid:not(.more-open)>.caption-more-items{display:none!important}
html:not(.dark-mode) #caption-grid .caption-more{border-color:rgba(0,0,0,.12);background:rgba(0,0,0,.03);color:rgba(0,0,0,.7)}