/* Finishing layer for the accepted work surface. No layout or evidence changes. */
:root {
  --ui-ease: cubic-bezier(.2,.7,.2,1);
  --ui-fast: 140ms;
  --ui-normal: 220ms;
  --ui-focus: #74628f;
  --ui-border: #e4e0eb;
}
svg { stroke-width:1.7; }
.ui-icon { width:13px; height:13px; flex-shrink:0; }
.btn svg,.text-btn svg,.title-with-icon svg { overflow:visible; }
.btn,.icon-btn,.text-btn,.queue-filters button,.action-options button,.line-item {
  transition:background-color var(--ui-fast) var(--ui-ease),border-color var(--ui-fast) var(--ui-ease),color var(--ui-fast) var(--ui-ease),transform var(--ui-fast) var(--ui-ease);
}
.btn:not(:disabled):active,.icon-btn:not(:disabled):active,.action-options button:not(:disabled):active { transform:translateY(1px); }
.btn.primary { border:1px solid #191a1e; }
.btn.primary:hover:not(:disabled) { background:#34313b; border-color:#34313b; }
.btn.secondary:hover:not(:disabled),.icon-btn:hover:not(:disabled) { background:#f7f5fa; border-color:#cfc7dc; }
.btn:not(:disabled):focus-visible,.icon-btn:not(:disabled):focus-visible,.action-options button:focus-visible,.queue-filters button:focus-visible {
  outline:2px solid var(--ui-focus); outline-offset:3px;
}
button:disabled { opacity:.46; }
.btn.primary svg { transition:transform var(--ui-fast) var(--ui-ease); }
@media(hover:hover) {
  #save-next:hover:not(:disabled) svg,#open-delivery:hover:not(:disabled) svg { transform:translateX(2px); }
  .line-item:hover:not(.active) { background:#e9e5f0; }
}
.text-btn:focus-visible { outline:2px solid var(--ui-focus); outline-offset:3px; border-radius:4px; }
.card-heading .text-btn { gap:4px; padding:3px 5px; margin-right:-5px; color:#74677f; }
.card-heading .text-btn svg { width:12px; height:12px; }
.queue-filters button { border-radius:7px; }
.queue-filters button:not(.active):hover { background:#e6e1ed; }
.line-item.active { background:#fff; border-color:#e6dfed; box-shadow:0 2px 6px #372a4b04; }
.line-state:has(.ui-icon)::before { display:none; }
.line-state { display:flex; align-items:flex-start; gap:5px; }
.line-state .ui-icon { width:12px; height:12px; margin-top:1px; }
.line-state span { min-width:0; }
.line-item .role { color:#5b5365; }
.line-excerpt { line-height:1.65; }
.outcome { gap:4px; }
.outcome .ui-icon { width:11px; height:11px; }
.badge { font-size:11px; padding:4px 9px; border:1px solid transparent; }
.badge.success { border-color:#dcece3; background:#eff7f2; }
.badge.warning { border-color:#f1e5cf; background:#fff8eb; }
.badge.danger { border-color:#f1dde1; background:#fff2f4; }
.counter { font-variant-numeric:tabular-nums; }
.search-box,input[type=text],select,textarea {
  transition:border-color var(--ui-fast) var(--ui-ease),background-color var(--ui-fast) var(--ui-ease),box-shadow var(--ui-fast) var(--ui-ease);
}
.search-box:focus-within { border-color:#b6a9c8; box-shadow:0 0 0 3px #78618e0e; }
select:not(:disabled):hover,input[type=text]:not(:disabled):hover,textarea:not(:disabled):not(.transcript-input):hover { border-color:#cfc5db; }
select:focus-visible,input[type=text]:focus-visible,textarea:not(.transcript-input):focus-visible { outline:2px solid #89789f; outline-offset:2px; }
.transcript-input:focus-visible { outline:2px solid #89789f; outline-offset:4px; border-radius:3px; }
.transcript-input::placeholder { font-size:12px; line-height:1.8; }
.card-heading .eyebrow { color:#62546f; }
.version-context-heading { align-items:flex-start; }
.version-context-heading span { line-height:1.6; }
.take-summary>div { gap:4px; }
.take-summary span,.diff-head { display:flex; align-items:center; gap:5px; }
.take-summary span { color:#786a83; }
.take-summary strong { font-weight:500; line-height:1.65; }
.diff-head { align-items:flex-start; line-height:1.75; }
.diff-head .ui-icon { margin-top:2px; }
.diff-panel mark { border-radius:3px; padding:1px 2px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.comparison-hint { color:#817589; }
.detail-card { border-color:#ebe7f0; }
.detail-card summary { transition:color var(--ui-fast) var(--ui-ease); }
.detail-card summary:hover { color:#403448; }
.detail-card summary::after { content:''; width:7px; height:7px; flex-shrink:0; margin:0 3px 3px 8px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); transition:transform var(--ui-fast) var(--ui-ease); }
.detail-card[open] summary::after { transform:rotate(225deg); margin-bottom:-3px; }
.detail-card[open] { background:#fdfcfe; }
.detail-card .event { position:relative; padding-left:14px; margin-left:3px; border-left:1px solid #e7e0ed; }
.detail-card .event::before { content:''; position:absolute; top:13px; left:-3px; width:5px; height:5px; border-radius:50%; background:#b0a4be; box-shadow:0 0 0 3px #fdfcfe; }
.stage-screen { border-color:#24232c; box-shadow:inset 0 0 0 1px #ffffff05; }
.stage-source-tag { border:1px solid #ffffff12; background:#15151bcc; backdrop-filter:blur(8px); }
.stage-toolbar .icon-btn { width:30px; height:30px; border:1px solid #ece8f0; background:#f8f6fb; }
.stage-toolbar .icon-btn:hover:not(:disabled) { background:#eae4f2; }
.stage-toolbar .text-btn { color:#74677f; min-height:28px; }
.stage-time { font-variant-numeric:tabular-nums; }
.stage-heading-tools .icon-btn[aria-pressed=true] { color:#625078; border-color:#d6c9e3; background:#f3eef9; }
.stage-expanded { overflow:auto; }
.stage-expanded .stage-screen { flex:1 1 auto; min-height:160px; }
.action-options button:hover:not(.active) { background:#f8f5fc; border-color:#cfc2de; }
.action-options button.active { border-color:#1c1b21; }
.listen-check { display:flex; align-items:flex-start; padding:9px 10px; border:1px solid #ece7f1; border-radius:8px; background:#faf8fc; color:#6a5a78; transition:background-color var(--ui-fast) var(--ui-ease),border-color var(--ui-fast) var(--ui-ease); }
.listen-check:has(input:checked) { background:#f0f6f2; border-color:#dbe8df; color:#446451; }
.listen-check:focus-within { outline:2px solid var(--ui-focus); outline-offset:2px; }
.listen-check input { accent-color:#4c6f58; margin-top:2px; flex-shrink:0; }
.listen-check input:focus-visible { outline:none; }
#draft-state:not(:empty) { padding:2px 6px; background:#f3eff7; border-radius:4px; color:#776281; }
.save-state { display:inline-flex; align-items:center; gap:5px; min-height:16px; }
.save-state::before { content:''; width:11px; height:11px; flex-shrink:0; color:#7c7384; }
.save-state[data-saving=pending]::before { width:10px; height:10px; border:1.4px solid #e1d8e8; border-top-color:#877496; border-radius:50%; animation:ui-spin 800ms linear infinite; }
.save-state[data-saving=saved]::before { background:#718178; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12 4 4L19 6' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.save-state[data-saving=error]::before { content:'!'; display:grid; place-items:center; background:#a64c59; color:white; font-size:8px; font-weight:700; border-radius:50%; }
[aria-busy=true]#transcribe::before,[aria-busy=true]#batch-transcribe::before { content:''; width:11px; height:11px; flex-shrink:0; border:1.4px solid #ded6e6; border-top-color:#766185; border-radius:50%; animation:ui-spin 800ms linear infinite; }
#progress-fill { transition:width 280ms var(--ui-ease); }
.review-footer { background:#fff; }
.navigation .icon-btn { background:#fbfafd; }
.shortcut-hint kbd,.voice-shortcut { border-color:#e8e3ee; color:#9b90a4; font-size:9px; }
.toast { display:flex; align-items:center; gap:10px; background:#fff; color:#38313f; border:1px solid #e3dce9; border-radius:10px; box-shadow:0 8px 32px #29203012,0 2px 5px #29203006; padding:12px 16px; }
.toast::before { content:''; width:18px; height:18px; flex-shrink:0; background:#59775f; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='m8 12 3 3 5-6' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.toast.error { background:#fff9fa; color:#934553; border-color:#efd8df; }
.toast.error::before { background:#a64c59; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M12 7v6m0 4h.01' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.modal[open] { animation:ui-dialog-in 200ms var(--ui-ease); }
.modal::backdrop { background:#29233138; backdrop-filter:blur(5px); animation:ui-backdrop-in 160ms ease-out; }
.modal-heading { padding:22px 26px 20px; }
.modal-heading h2 { font-size:19px; letter-spacing:-.2px; }
.modal-body { padding:22px 26px; }
.modal-footer { padding:16px 26px; background:#faf9fc; }
.upload-zone { transition:background-color var(--ui-fast) var(--ui-ease),border-color var(--ui-fast) var(--ui-ease); }
.upload-zone:hover { background:#f4effa; border-color:#bdb0ce; }
.voice-transport { padding:2px 0 0; }
.voice-transport-head { display:flex; align-items:center; gap:10px; margin:10px 0 15px; }
.voice-play { display:grid; place-items:center; width:38px; height:38px; flex-shrink:0; border:1px solid #26232d; background:#25222c; color:#fff; border-radius:50%; transition:background-color var(--ui-fast) var(--ui-ease),transform var(--ui-fast) var(--ui-ease); }
.voice-play svg { width:17px; height:17px; }
.voice-play use[href="#i-play"] { fill:currentColor; stroke-width:0; }
.voice-play:hover:not(:disabled) { background:#47394f; }
.voice-play:active:not(:disabled) { transform:scale(.96); }
.voice-play:focus-visible { outline:2px solid var(--ui-focus); outline-offset:3px; }
.voice-play:disabled { background:#817987; border-color:#817987; }
.voice-caption { display:flex; flex:1; min-width:0; flex-direction:column; gap:2px; }
.voice-caption>span:first-child { color:#584960; font-size:11px; font-weight:500; }
#voice-state { color:#74677f; font-size:10px; line-height:1.5; }
.voice-shortcut { background:#faf7fd; border:1px solid #e6dfed; border-radius:4px; padding:2px 4px; }
.voice-seek-wrap { position:relative; display:flex; align-items:center; height:18px; }
.voice-buffer { position:absolute; inset:7px 0; background:#e7e0ed; border-radius:99px; overflow:hidden; pointer-events:none; }
.voice-buffer::after { content:''; display:block; width:var(--buffered,0%); height:100%; background:#d6cbe1; }
.voice-seek { appearance:none; -webkit-appearance:none; background:transparent; height:18px; width:100%; margin:0; position:relative; cursor:pointer; accent-color:#766187; border:0; padding:0; }
.voice-seek::-webkit-slider-runnable-track { height:4px; border-radius:99px; background:linear-gradient(to right,#776284 var(--played,0%),transparent var(--played,0%)); }
.voice-seek::-moz-range-track { height:4px; border-radius:99px; background:transparent; }
.voice-seek::-moz-range-progress { height:4px; background:#776284; border-radius:99px; }
.voice-seek::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:10px; height:10px; margin-top:-3px; background:#776284; border:2px solid #faf9fc; box-shadow:0 0 0 1px #776284; border-radius:50%; }
.voice-seek::-moz-range-thumb { width:7px; height:7px; background:#776284; border:2px solid #faf9fc; box-shadow:0 0 0 1px #776284; border-radius:50%; }
.voice-seek:focus-visible { outline:2px solid var(--ui-focus); outline-offset:4px; border-radius:2px; }
.voice-seek:disabled { opacity:.4; cursor:default; }
.voice-timestamps { display:flex; align-items:center; justify-content:space-between; font:10px/1.5 'Consolas',monospace; color:#74677f; margin-top:4px; }
.voice-enhanced>audio { display:none; }
.voice-enhanced.has-playback-error>audio { display:block; }
#voice-error { margin:10px 0 0; font-size:11px; }
#player-wrap { border-color:#e6dfed; background:#faf8fc; }
.playback-tools { margin-top:10px; padding-top:10px; border-top:1px solid #e9e2ef; }
.playback-tools .text-btn { gap:4px; }
.playback-tools .text-btn svg { width:12px; height:12px; }
.comparison-panel,.audio-panel,.line-list,.modal { scrollbar-width:thin; scrollbar-color:#d2c9dd transparent; }
.comparison-panel::-webkit-scrollbar,.audio-panel::-webkit-scrollbar,.line-list::-webkit-scrollbar,.modal::-webkit-scrollbar { width:5px; height:5px; }
.comparison-panel::-webkit-scrollbar-thumb,.audio-panel::-webkit-scrollbar-thumb,.line-list::-webkit-scrollbar-thumb,.modal::-webkit-scrollbar-thumb { background:#d2c9dd; border-radius:99px; }
.comparison-panel::-webkit-scrollbar-track,.audio-panel::-webkit-scrollbar-track,.line-list::-webkit-scrollbar-track,.modal::-webkit-scrollbar-track { background:transparent; }
@keyframes ui-spin { to { transform:rotate(360deg); } }
@keyframes ui-dialog-in { from { opacity:0; translate:0 6px; } to { opacity:1; translate:0 0; } }
@keyframes ui-backdrop-in { from { opacity:0; } to { opacity:1; } }
@media(max-width:700px) { .modal-heading,.modal-body { padding:20px; } .modal-footer { padding:15px 20px; } .voice-shortcut { display:none; } }
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { transition:none!important; animation:none!important; scroll-behavior:auto!important; }
}
@media(forced-colors:active) {
  .voice-play,.action-options button.active,.queue-filters button.active { background:Highlight; color:HighlightText; border-color:Highlight; }
  .voice-seek { appearance:auto; }
  .voice-buffer { display:none; }
  .line-item.active,.listen-check:has(input:checked) { border-color:Highlight; }
  .save-state::before,.toast::before { display:none; }
}