/* Apple HIG-informed web adaptation. Exact CSS values are Hearo decisions.
   Source-to-component mapping: ../APPLE-DESIGN-SYSTEM.md. */
@import url("./hearo-design-tokens.css");
html{font-size:16px;scroll-padding-top:calc(var(--demo-nav-height,76px) + 24px)}
body{font-family:var(--ui-font);font-size:var(--ui-body);line-height:1.5;background:var(--ui-canvas);background-image:none;color:var(--ui-label)}
#app *,dialog *, .demo-site-header *{font-family:var(--ui-font)}
#app :is(h1,h2,h3,h4){color:var(--ui-label);font-weight:600;line-height:1.25;letter-spacing:normal}
#app h1{font-size:var(--ui-title);letter-spacing:-.025em}
#app h2{font-size:var(--ui-heading)}
#app h3{font-size:var(--ui-body)}
#app :is(.subtext,.person-location,.client-detail,.page-note,.setting-row p,.speaker,.call-time,.player-note,.int-tool-description){color:var(--ui-secondary);font-size:var(--ui-control)}
#app :is(.eyebrow,.queue-eyebrow,.review-eyebrow){color:var(--ui-secondary);font-size:var(--ui-caption);font-weight:500;letter-spacing:.04em}
#app .main{max-width:1440px;padding:var(--ui-space-6)}
#app :is(.agency-page-column,.int-wrap,.settings-card){max-width:1040px;margin-inline:auto}
#app .main:has(.agency-page-column,.settings-card)>.page-heading{max-width:1040px;margin-inline:auto}
#app .page-heading{gap:var(--ui-space-5);margin-bottom:var(--ui-space-6)}
#app .icon{width:18px;height:18px;stroke-width:1.65;vertical-align:middle;flex-shrink:0}
/* Functional chrome receives translucency; record content remains opaque. */
.demo-site-header,#app .sidebar{background:var(--ui-glass);background-image:none;backdrop-filter:blur(24px) saturate(1.35);-webkit-backdrop-filter:blur(24px) saturate(1.35);border:1px solid var(--ui-separator);box-shadow:var(--ui-chrome-shadow);color:var(--ui-label)}
#app .sidebar{border-radius:20px}
#app .sidebar .nav-link{min-height:44px;gap:12px;padding:10px 12px;border-radius:var(--ui-control-radius);color:var(--ui-secondary);font-size:var(--ui-control);font-weight:500;box-shadow:none}
#app .sidebar .nav-link.active{color:var(--ui-label);background:var(--ui-surface);box-shadow:var(--ui-control-shadow)}
#app .sidebar .nav-link:hover:not(.active){background:var(--ui-fill)}
#app .sidebar :is(.brand-name,.profile-name){color:var(--ui-label)}
#app .sidebar :is(.workspace-label,.profile-caption){color:var(--ui-secondary)}
#app .sidebar .brand-name,.demo-site-navigation .demo-site-brand{font-weight:700;letter-spacing:-.045em}
.demo-site-navigation a{color:var(--ui-secondary)}
.demo-site-navigation :is(.demo-site-brand,.demo-site-home){color:var(--ui-label)}
.demo-site-current{background:var(--ui-fill);color:var(--ui-label);border:0;border-radius:999px}
.demo-site-mark,#app .brand-mark{background:#29292c;background-image:none;border:1px solid #66666a;box-shadow:0 1px 3px #0002;color:#fff}
#app :is(.card,.person-card,.stat,.call-surface,.int-tool,.followup-panel,.handoff-intake,.side-note){background:var(--ui-surface);background-image:none;border:1px solid var(--ui-separator);border-radius:var(--ui-card-radius);box-shadow:none;color:var(--ui-label)}
#app :is(.card-header,.review-header,.review-footer,.player-top,.table-footer){padding:var(--ui-space-5);background:var(--ui-surface);border-color:var(--ui-separator);color:var(--ui-secondary)}
#app :is(.table-head,.intake-heading,.additional-intake,.player-controls,.approval-list){background:var(--ui-group);border-color:var(--ui-separator)}
#app :is(.file-row,.insight-row,.event-list li,.setting-row,.export-row,.followup-item){color:var(--ui-label);border-color:var(--ui-separator);background:var(--ui-surface)}
#app :is(.file-row,.insight-row,.followup-item):hover{background:var(--ui-group)}
#app :is(.file-row .client-name,.insight-row strong,.event-list strong,.export-row>strong){color:var(--ui-label)}
#app :is(.file-row .client-detail,.insight-row .subtext,.event-list time,.export-row>span,.followup-item small){color:var(--ui-secondary)}
#app :is(.stat,.person-card,.setting-row){padding:var(--ui-space-5)}
#app .stat-value{font-size:2rem;font-weight:600;letter-spacing:-.025em;color:var(--ui-label);font-variant-numeric:tabular-nums}
#app :is(.stat-label,.stat-caption,.stat-percent){color:var(--ui-secondary)}
#app :is(.stat-symbol,.document-stack>span,.queue-icon,.avatar,.person-card .avatar){background:var(--ui-fill);color:var(--ui-secondary);border:0;box-shadow:none;border-radius:12px}
#app :is(.metric-sage .stat-label,.metric-sage .stat-value,.insight-ready){color:var(--ui-success)}
#app .stat-ring{box-shadow:none;background:conic-gradient(from -90deg,var(--ui-warning) var(--progress),var(--ui-fill) 0)}
#app .metric-sage .stat-ring{background:conic-gradient(from -90deg,var(--ui-success) var(--progress),var(--ui-fill) 0)}
#app .stat-ring>span{background:var(--ui-surface);color:var(--ui-warning)}
#app .metric-sage .stat-ring>span{color:var(--ui-success)}
/* One control family, shared targets and complete feedback states. */
:is(.btn,.icon-button,.verify-button,.source-target,.call-play){min-height:44px;min-width:44px;border:1px solid var(--ui-field-border);border-radius:var(--ui-control-radius);background:var(--ui-surface);background-image:none;color:var(--ui-label);box-shadow:var(--ui-control-shadow);font:500 var(--ui-control)/1.25 var(--ui-font);text-shadow:none;transition:background-color var(--ui-duration) var(--ui-easing),box-shadow var(--ui-duration) var(--ui-easing),transform var(--ui-duration) var(--ui-easing)}
.btn,.btn.small{padding:12px 16px;min-height:44px;font-size:var(--ui-control)}
:is(.btn.primary,.btn.accent,.export-actions .btn.primary,.call-play){background:var(--ui-accent);border-color:var(--ui-accent);color:var(--ui-on-accent);box-shadow:none}
:is(.btn.primary,.call-play) .icon{color:inherit}
:is(.btn,.icon-button,.verify-button,.source-target):hover:not(:disabled){background:var(--ui-fill)}
:is(.btn.primary,.btn.accent,.export-actions .btn.primary,.call-play):hover:not(:disabled){background:color-mix(in srgb,var(--ui-accent) 86%,var(--ui-surface));color:var(--ui-on-accent)}
:is(button,.btn):active:not(:disabled){transform:scale(.98)}
button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
[data-action="send-salesforce"][aria-busy="true"]{opacity:1;background:var(--ui-accent);color:var(--ui-on-accent)}
[data-action="send-salesforce"]:disabled:not([aria-busy="true"]),.source-verify:disabled{opacity:1;background:var(--ui-success-fill);border-color:var(--ui-success-line);color:var(--ui-success)}
:where(a,button,input,textarea,select,summary):focus-visible{outline:3px solid var(--ui-focus);outline-offset:3px}
#app .sidebar-toggle{min-height:44px;color:var(--ui-secondary);background:transparent;border:0;box-shadow:none}
#app .sidebar-toggle:hover{background:var(--ui-fill)}
/* Search is one compound control. Selection is distinct from verification. */
#app .workspace-search{min-height:44px;padding:0 12px;gap:8px;background:var(--ui-fill);border:1px solid transparent;border-radius:var(--ui-control-radius);box-shadow:none;color:var(--ui-secondary)}
#app .workspace-search>.icon{width:17px;height:17px;transform:none;align-self:center}
#app .workspace-search input{height:44px;font-size:var(--ui-control);color:var(--ui-label);line-height:normal;border:0;background:none;outline:0;box-shadow:none}
#app .workspace-search input::placeholder{color:var(--ui-secondary)}
#app .workspace-search:focus-within{background:var(--ui-surface);border-color:var(--ui-focus);outline:3px solid color-mix(in srgb,var(--ui-focus) 30%,transparent);outline-offset:2px}
#app .workspace-search-clear{width:44px;height:44px;color:var(--ui-secondary)}
#app .field-tabs{padding:8px 24px;gap:4px;background:var(--ui-surface);border-color:var(--ui-separator)}
#app :is(.field-tabs button,.desk-filter-pill,.int-feature-switch button){min-height:44px;padding:10px 14px;background:transparent;border:0;border-radius:var(--ui-control-radius);font-size:var(--ui-control);font-weight:500;color:var(--ui-secondary);box-shadow:none}
#app :is(.field-tabs button.selected,.desk-filter-pill.selected,.int-feature-switch button[aria-pressed="true"]){background:var(--ui-fill);color:var(--ui-label)}
#app :is(.field-tabs button,.desk-filter-pill,.int-feature-switch button):hover{background:var(--ui-group)}
#app .field-tabs button>span{color:inherit;opacity:.8}
#app :is(.badge,.count,.nav-count,.intake-count,.person-role){padding:4px 8px;border-radius:6px;border:0;box-shadow:none;background:var(--ui-fill);color:var(--ui-secondary);font-size:var(--ui-caption);font-weight:500;line-height:1.35}
#app :is(.badge.ready,.file-ready-status,.study-signal.is-ready){color:var(--ui-success);background:var(--ui-success-fill)}
#app :is(.badge.followup,.badge.review,.queue-count){color:var(--ui-warning);background:var(--ui-warning-fill)}
#app .study-signal{font-size:var(--ui-caption);color:var(--ui-warning)}
#app .study-signal::before{background:var(--ui-warning);box-shadow:0 0 0 3px var(--ui-warning-fill)}
#app .study-signal.is-ready::before{display:none}
/* Review and transcript use the same content hierarchy. */
#app .review-header h2{font-size:1.375rem}
#app .review-count{font-size:var(--ui-caption);color:var(--ui-secondary)}
#app .review-count strong{font-size:1.5rem;color:var(--ui-label)}
#app .review-count :is(strong span,span){color:var(--ui-secondary)}
#app .field-list{background:var(--ui-surface)}
#app .field-section{padding:24px 24px 8px;border-color:var(--ui-separator)}
#app .field-grid{gap:24px;padding-bottom:24px}
#app .compact-field .field-label{font-size:var(--ui-control);font-weight:500;color:var(--ui-secondary);margin-bottom:8px}
#app .field-input{min-height:44px;height:auto;padding:12px;font:400 var(--ui-body)/1.4 var(--ui-font);color:var(--ui-label);background:var(--ui-surface);border:1px solid var(--ui-field-border);border-radius:var(--ui-control-radius);box-shadow:none}
#app .is-verified .field-input{border-color:var(--ui-success-line)}
#app .needs-attention .field-input{background:var(--ui-warning-fill);border-color:var(--ui-warning-line)}
#app .compact-field.source-selected{background:var(--ui-warning-fill);box-shadow:0 0 0 1px var(--ui-warning-line)}
#app .compact-field.source-selected.is-verified:not(.needs-attention){background:var(--ui-success-fill);box-shadow:0 0 0 1px var(--ui-success-line)}
#app .field-input:focus{border-color:var(--ui-focus);outline:3px solid color-mix(in srgb,var(--ui-focus) 25%,transparent);outline-offset:2px}
#app :is(.additional-intake,.intake-jump){background:var(--ui-group);color:var(--ui-secondary)}
#app .additional-intake{margin:8px 24px 24px;border-radius:12px}
#app :is(.intake-kicker,.intake-item,.intake-footnote,.intake-heading p){color:var(--ui-secondary);font-size:var(--ui-caption)}
#app .intake-jump{padding:12px 24px;font-size:var(--ui-caption)}
#app .attention-banner{background:var(--ui-warning-fill);border:0;padding:12px 24px;color:var(--ui-warning);font-size:var(--ui-caption)}
#app .attention-banner button{color:var(--ui-warning);min-height:44px}
#app .progress-track{background:var(--ui-fill)}
#app .progress-track>div{background:var(--ui-success)}
#app .insight-row .progress-track>div{background:var(--ui-warning)}
#app .insight-row.is-ready .progress-track>div{background:var(--ui-success)}
#app .player-controls{margin:16px;padding:12px;background:var(--ui-group);border:0;border-radius:12px}
#app .waveform i{background:var(--ui-field-border)}
#app .waveform i.elapsed{background:var(--ui-success)}
#app .transcript-card{background:var(--ui-surface);color:var(--ui-label)}
#app .transcript-line{padding:16px 8px}
#app .transcript-line p{font-size:var(--ui-body);line-height:1.7;color:var(--ui-label)}
#app .transcript-line :is(.speaker,time){font-size:var(--ui-caption);color:var(--ui-secondary)}
#app .source-context{background:var(--ui-warning-fill);color:var(--ui-warning);border-color:var(--ui-warning-line)}
#app .source-context.is-verified-source{background:var(--ui-success-fill);color:var(--ui-success);border-color:var(--ui-success-line)}
#app .transcript-line.highlighted{background:var(--ui-warning-fill)}
#app .transcript-line.highlighted mark{background:var(--ui-warning-line);color:var(--ui-label)}
#app .call-surface:has(.is-verified-source) .transcript-line.highlighted{background:var(--ui-success-fill)}
#app .call-surface:has(.is-verified-source) .transcript-line.highlighted mark{background:var(--ui-success-line);color:var(--ui-label)}
/* Handoff, integration gallery and transient views. */
#app .handoff-banner{padding:24px;border-radius:var(--ui-card-radius);box-shadow:none}
#app .handoff-banner.complete{background:var(--ui-success-fill);border-color:var(--ui-success-line)}
#app .handoff-banner.followup{background:var(--ui-warning-fill);border-color:var(--ui-warning-line)}
#app .handoff-banner h2{font-size:var(--ui-heading)}
#app .handoff-banner p{color:var(--ui-secondary)}
#app .complete .handoff-symbol{background:var(--ui-success-fill);color:var(--ui-success)}
#app .followup .handoff-symbol{background:var(--ui-warning-fill);color:var(--ui-warning)}
#app .followup-panel-heading{background:var(--ui-warning-fill);color:var(--ui-warning)}
#app .export-section{font-size:var(--ui-caption);color:var(--ui-secondary);background:var(--ui-surface);letter-spacing:.025em}
#app .export-row{font-size:var(--ui-body);padding-block:12px}
#app .int-feature,#app .int-feature-body{background:var(--ui-group);background-image:none;border-color:var(--ui-separator)}
#app .int-feature-category{background:transparent;color:var(--ui-secondary);font-size:var(--ui-caption);letter-spacing:.025em}
#app .int-feature-example{background:var(--ui-surface);color:var(--ui-label);border-color:var(--ui-separator);box-shadow:none}
#app .int-feature-switch{background:var(--ui-surface);border-color:var(--ui-separator)}
#app .int-feature-copy p{color:var(--ui-secondary)}
#app :is(.int-mark,.brand-tile){background:#fff;border:1px solid #e5e5ea;box-shadow:none}
#app .int-availability{color:var(--ui-secondary)}
.modal,.salesforce-confirmation{background:var(--ui-surface);border:1px solid var(--ui-separator);border-radius:var(--ui-overlay-radius);box-shadow:var(--ui-overlay-shadow);color:var(--ui-label);font-family:var(--ui-font);overscroll-behavior:contain}
.modal::backdrop,.salesforce-confirmation-backdrop{background:rgb(0 0 0 / .25);backdrop-filter:blur(8px)}
.modal :is(.modal-header,.modal-body,.modal-footer){padding:24px;background:var(--ui-surface);color:var(--ui-label);border-color:var(--ui-separator)}
.modal h2,.salesforce-confirmation h2{font-size:1.25rem;font-weight:600;color:var(--ui-label)}
.modal :is(.approval-list,.modal-source){background:var(--ui-group);border-color:var(--ui-separator)}
.modal :is(.approval-row,.approval-row strong){color:var(--ui-label);border-color:var(--ui-separator)}
.modal :is(.approval-row>span:first-child,.acknowledgment){color:var(--ui-secondary)}
.modal :is(input,textarea,select){font:400 var(--ui-body)/1.5 var(--ui-font);color:var(--ui-label);background:var(--ui-surface);border-color:var(--ui-field-border)}
input[type="checkbox"]{accent-color:var(--ui-accent);width:20px;height:20px}
.acknowledgment{min-height:44px}
.salesforce-confirmation-check{background:var(--ui-success-fill);color:var(--ui-success);box-shadow:none}
.salesforce-confirmation p{color:var(--ui-secondary)}
.toast{background:var(--ui-accent);color:var(--ui-on-accent);box-shadow:var(--ui-overlay-shadow);border-radius:12px}
#app .workflow-step{color:var(--ui-secondary);font-size:var(--ui-caption)}
#app .workflow-step.done{color:var(--ui-success)}
#app .workflow-symbol{background:var(--ui-fill);border-color:var(--ui-separator);color:var(--ui-secondary);box-shadow:none}
#app .workflow-step.current .workflow-symbol{background:var(--ui-accent);color:var(--ui-on-accent);border-color:var(--ui-accent)}
#app .workflow-step.done .workflow-symbol{background:var(--ui-success-fill);color:var(--ui-success);border-color:var(--ui-success-line)}
@media(prefers-color-scheme:dark){:root{color-scheme:dark;--ui-label:#f5f5f7;--ui-secondary:#b2b2b9;--ui-tertiary:#9999a2;--ui-canvas:#1c1c1e;--ui-surface:#2c2c2e;--ui-group:#242426;--ui-fill:#3a3a3c;--ui-separator:#48484a;--ui-field-border:#636366;--ui-accent:#f5f5f7;--ui-on-accent:#1c1c1e;--ui-success:#84d99e;--ui-success-fill:#263d2e;--ui-success-line:#4a7858;--ui-warning:#edc266;--ui-warning-fill:#403622;--ui-warning-line:#8b7346;--ui-focus:#9bbdf3;--ui-glass:rgb(42 42 44 / .9);--ui-glass-edge:rgb(255 255 255 / .12)}}
@media(prefers-contrast:more){:root{--ui-secondary:var(--ui-label);--ui-separator:var(--ui-secondary);--ui-field-border:var(--ui-label)}.btn,.field-input{border-width:2px}}
@media(prefers-reduced-transparency:reduce){.demo-site-header,#app .sidebar{background:var(--ui-surface);backdrop-filter:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media(max-width:1000px){#app .main{padding:24px}#app .review-layout{grid-template-columns:1fr}#app .call-column{position:static}}
@media(max-width:700px){#app .main{padding:24px 16px}#app .field-grid{grid-template-columns:1fr}#app .field-input{font-size:1rem}#app .workspace-search input{font-size:1rem}#app .title-line h1{font-size:1.625rem}#app .heading-actions{flex-wrap:wrap}#app .export-actions{width:100%}#app .export-action-buttons{flex-wrap:wrap;justify-content:flex-start}#app .setting-row{flex-wrap:wrap}#app .field-tabs{padding-inline:12px}#app .field-tabs button{padding-inline:10px}#app .transcript-line p{font-size:1rem}#app .workflow{gap:8px}#app .workflow-divider{min-width:8px}#app .int-feature-category{font-size:.6875rem}}

:root[data-appearance="dark"]{color-scheme:dark;--ui-label:#f5f5f7;--ui-secondary:#b2b2b9;--ui-tertiary:#9999a2;--ui-canvas:#1c1c1e;--ui-surface:#2c2c2e;--ui-group:#242426;--ui-fill:#3a3a3c;--ui-separator:#48484a;--ui-field-border:#636366;--ui-accent:#f5f5f7;--ui-on-accent:#1c1c1e;--ui-success:#84d99e;--ui-success-fill:#263d2e;--ui-success-line:#4a7858;--ui-warning:#edc266;--ui-warning-fill:#403622;--ui-warning-line:#8b7346;--ui-focus:#9bbdf3;--ui-glass:rgb(42 42 44 / .9);--ui-glass-edge:rgb(255 255 255 / .12)}
#app .desk-grid>*{min-width:0}
#app .desk-filter-pills{flex-wrap:wrap;overflow:visible}
#app .desk-search-row{flex-wrap:wrap}
#app .desk-result-count{margin-left:auto}
/* Nested text and grouping surfaces inherit semantic roles, never legacy tints. */
#app .desk-list-tools{background:var(--ui-surface);border-color:var(--ui-separator)}
#app :is(.queue-copy strong,.int-tool-name,.person-meta dd,.setting-row h3,.player-top>span:first-child){color:var(--ui-label)}
#app :is(.queue-copy small,.queue-all,.desk-result-count,.person-meta dt,.intake-jump strong,.intake-jump button,.call-footnote,.back-link,.row-arrow,.line-type){color:var(--ui-secondary)}
#app .compact-field .field-label label{font-size:var(--ui-control);color:var(--ui-secondary);font-weight:500;letter-spacing:normal;text-transform:none}
#app .compact-field:hover:not(.source-selected),#app .compact-field:focus-within:not(.source-selected){background:var(--ui-group)}
#app :is(.queue-header,.queue-item,.person-meta,.person-meta>div,.profile,.intake-item,.intake-section h4){border-color:var(--ui-separator)}
#app .intake-section h4{color:var(--ui-secondary)}
#app :is(.stat-symbol.green,.event-symbol){background:var(--ui-success-fill);color:var(--ui-success)}
#app .stat-symbol.orange{background:var(--ui-warning-fill);color:var(--ui-warning)}
#app .person-meta{background:transparent}
.modal-warning{background:var(--ui-warning-fill);color:var(--ui-warning)}
#app :is(.int-page-head p,.card-header>span,.int-feature-example>div>strong){color:var(--ui-secondary);font-size:var(--ui-control)}
#app :is(.int-feature-example li,.int-feature-example strong){color:var(--ui-label);font-size:var(--ui-control)}
#app .int-feature-example>div{border-color:var(--ui-separator)}
#app .int-feature-example li .icon{background:var(--ui-success-fill);color:var(--ui-success)}
#app .int-provider-group>h2{font-size:var(--ui-control);font-weight:500;color:var(--ui-secondary)}
@layer legacy{html[data-apple-study] .int-directory .int-page-head h1{font-size:var(--ui-title)!important;letter-spacing:-.025em!important}}

/* Approved Hearo brand accent: quiet charcoal grain on navigation and file header only. */
:root{
 --ui-brand-charcoal:#232425;
 --ui-brand-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.10' filter='url(%23g)'/%3E%3C/svg%3E");
}
#app .sidebar,#app .review-header{
 background-color:var(--ui-brand-charcoal);
 background-image:var(--ui-brand-grain);
 background-size:180px 180px;
 color:#f5f5f7;
 backdrop-filter:none;
 -webkit-backdrop-filter:none;
}
#app .sidebar{border-color:#3d3e40;box-shadow:0 4px 16px rgb(0 0 0 / .10)}
#app .sidebar :is(.brand-name,.profile-name){color:#f5f5f7}
#app .sidebar :is(.workspace-label,.profile-caption){color:#bfc0c5}
#app .sidebar .nav-link{color:#d9dade}
#app .sidebar .nav-link:hover:not(.active){background:#ffffff12;color:#fff}
#app .sidebar .nav-link.active{background:#f3f3f5;color:#242426;box-shadow:none}
#app .sidebar .nav-link.active .icon{color:inherit}
#app .sidebar .nav-count{background:#ffffff14;color:#d9dade}
#app .sidebar .nav-link.active .nav-count{background:#dedee3;color:#4e4e54}
#app .sidebar .sidebar-toggle{color:#d9dade}
#app .sidebar .sidebar-toggle:hover{background:#ffffff12;color:#fff}
#app .sidebar .profile{border-color:#ffffff20}
#app .sidebar .avatar{background:#ffffff12;color:#e2e2e6}
#app .sidebar :is(a,button):focus-visible{outline-color:#aec8ee}
#app .review-header{border-bottom:1px solid #3d3e40}
#app .review-header :is(h2,.review-count strong){color:#f5f5f7}
#app .review-header :is(.subtext,.review-count,.review-count strong span,.review-count>span){color:#c8c9cf}
@media(prefers-contrast:more){#app .sidebar,#app .review-header{background-image:none;background-color:#1d1d1f}#app .sidebar :is(.workspace-label,.profile-caption),#app .review-header :is(.subtext,.review-count,.review-count strong span,.review-count>span){color:#fff}}

/* Collapsed selection joins the canvas instead of ending as a clipped pill. */
@media(min-width:701px){
 #app.sidebar-closed .sidebar{overflow:visible;--rail-join:20px;--rail-curve:12px}
 #app.sidebar-closed .sidebar .nav-list{overflow:visible}
 #app.sidebar-closed .sidebar .nav-link{position:relative;box-sizing:border-box;width:100%;height:44px;min-height:44px;justify-content:center;padding:0;margin:0;flex-shrink:0}
 #app.sidebar-closed .sidebar .nav-link.active,
 #app.sidebar-closed .sidebar .nav-link.active:hover{
  width:calc(100% + var(--rail-join));
  padding-right:var(--rail-join);
  border-radius:12px 0 0 12px;
  background:var(--ui-canvas);
  color:var(--ui-label);
  border:0;
  box-shadow:none;
  z-index:1;
 }
 /* One continuous silhouette avoids seams between separately scaled corners. */
 #app.sidebar-closed .sidebar .nav-link.active,
 #app.sidebar-closed .sidebar .nav-link.active:hover{background:transparent;isolation:isolate}
 #app.sidebar-closed .sidebar .nav-link.active::before{
  content:"";display:block;position:absolute;inset:-12px auto auto 0;
  width:calc(100% + 24px);height:68px;border:0;border-radius:0;
  pointer-events:none;opacity:1;box-shadow:none;z-index:-1;
  background:var(--ui-canvas);transform:none;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 68' preserveAspectRatio='none'%3E%3Cpath d='M96 0H61C61 6.6274 55.6274 12 49 12H12C5.3726 12 0 17.3726 0 24V44C0 50.6274 5.3726 56 12 56H49C55.6274 56 61 61.3726 61 68H96Z' fill='white'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
 }
 #app.sidebar-closed .sidebar .nav-link.active::after{content:none;display:none}
 #app.sidebar-closed .sidebar .nav-link.active:focus-visible{outline-offset:-4px;outline-color:var(--ui-focus)}
}
/* The landing walkthrough shares the workspace's selection and verified states. */
[data-walkthrough] .walkthrough-cursor::after{border-color:var(--ui-focus)}
[data-walkthrough] .walkthrough-target{outline-color:var(--ui-focus);background-color:var(--ui-group)}
[data-walkthrough] .source-context{border-left-color:var(--ui-field-border)}

/* Reserve the full hit target so it never spills into the selection outline. */
#app .compact-field{min-width:0;padding:12px}
#app .field-control{grid-template-columns:minmax(0,1fr) 44px;gap:8px;min-width:0}
#app .field-control .field-input{min-width:0;width:100%}
#app .field-control .source-target{width:44px;height:44px;min-width:44px;justify-self:end}
/* All workspace destinations remain visible in the small-screen menu. */
@media(max-width:700px){
 #app .sidebar .nav-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;overflow:visible;margin-top:16px;padding-bottom:12px}
 #app .sidebar .nav-link{width:100%;min-width:0;margin:0;justify-content:flex-start;border-radius:10px}
 #app .sidebar .workspace-label{margin:8px 0}
 #app .sidebar .sidebar-toggle-mobile-close{width:44px;height:44px}
 #app .sidebar .sidebar-heading{justify-content:space-between}
 #app .call-surface{scroll-margin-top:calc(var(--demo-nav-height,0px) + 12px)}
 .modal{max-height:calc(100dvh - 24px)}
 .modal form{max-height:calc(100dvh - 26px)}
 .modal :is(.modal-header,.modal-body,.modal-footer){padding:16px}
 .modal input,.modal textarea,.modal select{font-size:16px}
 .modal-footer{flex-wrap:wrap}
 .toast{bottom:calc(16px + env(safe-area-inset-bottom))}
}
/* The embedded mobile presentation focuses on the action rather than shrinking a desktop. */
@media(max-width:1000px){
 [data-walkthrough] #app .main{padding:24px 32px}
 [data-walkthrough] #app .mobile-open-control,[data-walkthrough] #app .footer{display:none}
 [data-walkthrough-view="desk"] #app .stats,[data-walkthrough-view="desk"] #app .desk-list-tools{display:none}
 [data-walkthrough-view="desk"] #app .page-heading .heading-actions{display:none}
 [data-walkthrough-view="desk"] #app .page-heading{margin-bottom:20px}
 [data-walkthrough] #app .file-row{padding:16px 12px}
 [data-walkthrough] #app .workflow{display:none}
 [data-walkthrough] #app .file-heading{margin-bottom:16px}
 [data-walkthrough] #app .review-header{padding:16px}
 [data-walkthrough] #app .field-list{max-height:225px;min-height:0}
 [data-walkthrough] #app .field-section{padding:12px 16px}
 [data-walkthrough] #app .review-footer,[data-walkthrough] #app .intake-jump{display:none}
 [data-walkthrough] #app .transcript-card .card-header{display:none}
 [data-walkthrough] #app .player-controls{margin:8px;padding:8px}
 [data-walkthrough] #app .player-top{padding:12px 16px}
 [data-walkthrough] #app .transcript-scroll{max-height:220px;min-height:0}
 [data-walkthrough] #app .source-context{padding:12px;gap:8px;flex-wrap:wrap}
 [data-walkthrough] #app .source-context .btn{margin-left:auto}
}
@media(max-width:1000px){
 #app .call-column .transcript-scroll{max-height:360px;min-height:0;overflow-y:auto;overscroll-behavior:contain}
}
@media(max-width:700px){
 #app .call-column .transcript-scroll{max-height:45svh;padding:8px 12px 16px}
 #app .source-context{scroll-margin-top:calc(var(--demo-nav-height,0px) + 12px)}
 [data-walkthrough] #app .call-column .transcript-scroll{max-height:220px}
}

@media(max-width:700px){[data-walkthrough] #app .main{padding:16px 12px}}

/* Phone layouts: compact overview, stable list rows, and one review pane at a time. */
.mobile-sidebar-backdrop,.mobile-review-switch{display:none}
@media(max-width:700px){
 html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
 html.workspace-menu-open{overflow:hidden}
 #app .mobile-open-control,#app.sidebar-closed .mobile-open-control{display:none}
 #app .main,#app.sidebar-closed .main{padding:24px 16px 32px}
 #app .sidebar{position:fixed;inset:calc(var(--demo-nav-height,0px) + 8px) 12px auto;margin:0;width:auto;max-height:calc(100dvh - var(--demo-nav-height,0px) - 24px);overflow:auto;padding:20px;z-index:60;border-radius:18px}
 #app:not(.sidebar-closed)>.mobile-sidebar-backdrop{display:block;position:fixed;inset:var(--demo-nav-height,0px) 0 0;background:#0005;z-index:59;border:0;width:100%;height:100%;padding:0}
 #app .sidebar .nav-list{grid-template-columns:1fr;margin:12px 0 0;padding:0;gap:4px}
 #app .sidebar .nav-link{min-height:46px;padding:10px 14px}
 #app .sidebar .workspace-label{margin:12px 0;font-size:11px}
 #app .sidebar .sidebar-bottom{display:none}
 #app .sidebar .brand{font-size:24px}
 #app .sidebar .brand-mark{width:30px;height:30px}
 #app .page-heading{margin-bottom:20px;gap:16px}
 #app h1,#app .title-line h1{font-size:26px;line-height:1.15}
 #app .page-heading .subtext{font-size:13px;line-height:1.55;margin-top:10px}
 #app .eyebrow{font-size:10px;margin-bottom:8px}
 #app .desk-heading>.btn{display:none}
 #app .stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:24px}
 #app .stats>.stat,#app .stats>.stat:nth-child(3){display:flex;flex-direction:column;align-items:flex-start;justify-content:center;grid-column:auto;min-height:102px;padding:14px 10px;border-radius:12px}
 #app .desk-stats>.stat .stat-copy,#app .desk-stats>.stat:nth-child(3) .stat-copy{display:flex;flex-direction:column;gap:7px;width:100%}
 #app .stats .stat-label{font-size:11px;line-height:1.3;min-height:28px;font-weight:500}
 #app .stats .stat-value{font-size:27px;line-height:1.1;font-weight:600}
 #app .stats .stat-number-line{margin:0}
 #app .stats :is(.stat-caption,.stat-percent,.stat-ring,.document-stack,.stat-symbol){display:none}
 #app .insights-stats .stat-label{margin-top:8px;min-height:0}
 #app .card-header{padding:16px;gap:12px}
 #app .card-header h2{font-size:17px}
 #app .card-header>.subtext,#app .quiet-meta{font-size:11px}
 #app .desk-list-tools{padding:12px 16px}
 #app .desk-filter-pills{display:flex;flex-wrap:nowrap;gap:6px;max-width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-padding-inline:2px;padding:3px 2px;scrollbar-width:none}
 #app .desk-filter-pills::-webkit-scrollbar{display:none}
 #app .desk-filter-pill:focus-visible{outline:2px solid #007aff;outline-offset:-2px}
 #app .desk-filter-pill{flex:0 0 auto;min-height:44px;padding:10px 14px;font-size:13px;justify-content:center;gap:6px;white-space:nowrap}
 #app .desk-search-row{gap:8px;margin-top:12px}
 #app .desk-search{width:100%;min-width:0}
 #app .desk-result-count{font-size:10px}
 #app .file-row{display:grid;grid-template-columns:38px minmax(0,1fr) 16px;gap:6px 10px;padding:16px;align-items:center}
 #app .file-row .client-cell{display:contents}
 #app .file-row .client-cell>.avatar{grid-column:1;grid-row:1 / 3;width:36px;height:36px;align-self:start;margin-top:2px;font-size:12px}
 #app .file-row .client-cell>div:last-child{grid-column:2;grid-row:1;min-width:0}
 #app .file-row .client-name{font-size:15px;font-weight:600}
 #app .file-row .client-detail{font-size:12px;line-height:1.4;margin-top:3px}
 #app .file-row .line-type{display:none}
 #app .file-row .desk-status-cell{grid-column:2;grid-row:2;display:flex;flex-wrap:wrap;align-items:center;gap:3px 8px;min-width:0;margin-top:3px}
 #app .file-row .study-signal{display:inline-flex;align-items:center;width:auto;gap:5px;font-size:11px;line-height:1.4;background:transparent;padding:0;white-space:normal}
 #app .file-row .study-signal .icon{width:13px;height:13px}
 #app .file-row .study-secondary{font-size:10px;line-height:1.4;margin:0}
 #app .file-row .row-arrow{display:block;grid-column:3;grid-row:1 / 3;width:16px}
 #app .table-footer{padding:12px 16px;font-size:11px;line-height:1.5;gap:8px}
 #app .insight-row{display:grid;grid-template-columns:minmax(0,1fr) 18px;padding:18px 16px;gap:12px;position:relative}
 #app .insight-row>div:first-child{grid-column:1;grid-row:1;min-width:0}
 #app .insight-client{display:flex;align-items:flex-start;flex-direction:column;gap:5px}
 #app .insight-client strong{font-size:15px}
 #app .insight-ready{font-size:11px}
 #app .insight-row .subtext{font-size:12px;line-height:1.5}
 #app .insight-progress{grid-row:2;grid-column:1 / -1;width:100%;max-width:none;margin:0;min-width:0}
 #app .insight-row>.icon{grid-column:2;grid-row:1;align-self:center}
 #app .back-link{min-height:36px;margin-bottom:12px;font-size:12px}
 #app .file-heading .heading-actions{justify-content:flex-start;width:auto}
 #app .file-heading .heading-actions>.btn{font-size:12px;min-height:40px;padding:8px 12px}
 #app .title-line{gap:8px;flex-wrap:wrap}
 #app .title-line .badge{font-size:10px;padding:4px 8px}
 #app .workflow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:0;margin:16px 0 20px;align-items:start}
 #app .workflow-divider{display:none}
 #app .workflow-step{display:flex;flex-direction:column;gap:6px;text-align:center;font-size:10px;line-height:1.3}
 #app .workflow-symbol{width:24px;height:24px;min-width:24px;font-size:10px}
 #app .workflow-symbol .icon{width:13px;height:13px}
 #app .mobile-review-switch{display:flex;padding:4px;background:var(--ui-fill);border-radius:10px;margin:0 0 16px;scroll-margin-top:calc(var(--demo-nav-height,0px) + 12px)}
 #app .mobile-review-switch button{flex:1;border:0;border-radius:7px;background:transparent;color:var(--ui-secondary);font:500 13px var(--ui-font);min-height:40px}
 #app .mobile-review-switch button[aria-pressed="true"]{background:var(--ui-surface);color:var(--ui-label);box-shadow:var(--ui-control-shadow)}
 #app[data-review-pane="details"] .call-column,#app[data-review-pane="transcript"] .fields-panel{display:none}
 #app .review-header{padding:18px 16px;gap:16px;align-items:center}
 #app .review-header h2{font-size:19px}
 #app .review-header .subtext{font-size:11px;line-height:1.5;max-width:190px}
 #app .review-count strong{font-size:23px}
 #app .review-count>span{font-size:10px}
 #app .attention-banner{padding:12px 16px;gap:8px;flex-wrap:wrap;font-size:12px}
 #app .attention-banner>button{margin-left:26px;min-height:32px}
 #app .field-tabs{display:flex;flex-wrap:nowrap;padding:4px 8px;gap:4px}
 #app .field-tabs button{flex:1;justify-content:center;gap:5px;font-size:11px;padding:10px 5px;min-height:42px}
 #app .field-tabs button>span{font-size:10px}
 #app .field-list{max-height:none;overflow:visible}
 #app .field-section{padding:16px}
 #app .field-section .section-heading{padding:0;margin:0 0 12px}
 #app .field-grid{gap:10px}
 #app .compact-field{padding:8px}
 #app .intake-jump{padding:10px 16px;gap:6px;font-size:11px}
 #app .intake-jump button{font-size:11px;min-height:32px}
 #app .call-column .transcript-scroll{max-height:none;overflow:visible;padding:12px 16px}
 #app .transcript-line{padding:12px 0;margin:0 0 8px}
 #app .transcript-line p{font-size:14px;line-height:1.65}
 #app .transcript-line .speaker{font-size:11px}
 #app .player-controls{margin:12px;padding:10px}
 #app .player-note{font-size:10px;margin:8px 0 12px}
 #app .source-context{padding:12px 16px;gap:8px}
 #app .call-footnote{font-size:10px;padding:12px 4px;line-height:1.5}
 #app .handoff-banner{padding:16px;gap:10px;margin-bottom:20px}
 #app .handoff-banner h2{font-size:16px;line-height:1.35}
 #app .handoff-banner p{font-size:12px;line-height:1.55}
 #app .export-action-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%}
 #app .export-action-buttons .btn{font-size:12px;min-height:44px;padding:8px;gap:8px;justify-content:center}
 #app .export-action-buttons [data-action="send-salesforce"]{grid-column:1/-1;grid-row:1}
 #app .export-row{font-size:13px;overflow-wrap:anywhere}
 #app .footer{padding:16px 20px calc(24px + env(safe-area-inset-bottom));margin:0;font-size:10px;line-height:1.5;gap:10px}
 #app .page-note{font-size:11px;margin-top:16px}
}

/* A complete phone walkthrough scene: no clipped iframe or nested scrolling. */
@media(max-width:700px){
 html[data-walkthrough],html[data-walkthrough] body{overflow:hidden;height:auto;min-height:0}
 [data-walkthrough] #app{display:block;padding:0}
 [data-walkthrough] #app .shell{display:block;min-height:0;margin:0;padding:0}
 [data-walkthrough] #app .main{padding:18px 14px;min-height:0;max-width:none}
 [data-walkthrough] #app :is(.sidebar,.mobile-review-switch,.mobile-open-control,.workflow,.back-link,.desk-heading>.btn,.desk-aside,.footer,.table-footer,.desk-list-tools,.table-head){display:none}
 [data-walkthrough] #app .page-heading{margin-bottom:16px;gap:10px}
 [data-walkthrough] #app .page-heading h1{font-size:23px}
 [data-walkthrough] #app .page-heading .subtext{font-size:11px;margin-top:6px;line-height:1.5}
 [data-walkthrough] #app .file-heading .heading-actions{display:none}
 [data-walkthrough-view="handoff"] #app .file-heading .heading-actions{display:block;width:100%}
 [data-walkthrough] #app .export-action-buttons{display:flex}
 [data-walkthrough] #app .export-action-buttons .btn:not([data-action="send-salesforce"]){display:none}
 [data-walkthrough] #app .export-action-buttons [data-action="send-salesforce"]{width:100%}
 [data-walkthrough] #app .review-layout{display:flex;flex-direction:column;gap:14px}
 [data-walkthrough] #app[data-review-pane] :is(.fields-panel,.call-column){display:block}
 [data-walkthrough] #app .review-header{padding:14px 16px}
 [data-walkthrough] #app .review-header h2{font-size:17px}
 [data-walkthrough] #app .review-header .subtext{display:none}
 [data-walkthrough] #app .review-count strong{font-size:20px}
 [data-walkthrough] #app .field-list{height:auto;max-height:none;overflow:visible}
 [data-walkthrough] #app :is(.field-tabs,.intake-jump,.additional-intake,.review-footer){display:none}
 [data-walkthrough] #app .field-section{padding:12px}
 [data-walkthrough] #app .field-section .section-heading{display:none}
 [data-walkthrough] #app .compact-field{display:none}
 [data-walkthrough] #app .field-section:not(:has(.source-selected)){display:none}
 [data-walkthrough] #app .compact-field.source-selected{display:block;margin:0}
 [data-walkthrough] #app .field-list:not(:has(.source-selected)) .field-section:first-child{display:block}
 [data-walkthrough] #app .field-list:not(:has(.source-selected)) .field-section:first-child .compact-field:first-child{display:block}
 [data-walkthrough] #app .field-input{font-size:14px}
 [data-walkthrough] #app :is(.sample-player,.call-footnote,.transcript-card>.card-header){display:none}
 [data-walkthrough] #app .transcript-scroll{height:auto;max-height:none;min-height:0;overflow:visible;padding:12px}
 [data-walkthrough] #app .transcript-line{display:none}
 [data-walkthrough] #app .transcript-line.highlighted{display:block;margin:0;padding:12px;border-radius:10px}
 [data-walkthrough] #app .transcript-line p{font-size:13px;line-height:1.65}
 [data-walkthrough] #app .source-context{padding:12px;flex-wrap:nowrap;align-items:center}
 [data-walkthrough] #app .source-context .btn{min-height:36px;font-size:11px;padding:6px 10px;white-space:nowrap}
 [data-walkthrough] #app .handoff-banner{margin-bottom:16px;padding:16px}
 [data-walkthrough] #app .handoff-banner h2{font-size:15px}
 [data-walkthrough] #app .handoff-banner p{font-size:12px}
 [data-walkthrough] #app .export-card:not(:first-child){display:none}
 [data-walkthrough] #app .export-fields>*{display:none}
 [data-walkthrough] #app .export-fields>.export-row:nth-child(-n+4){display:grid;padding:10px 0;grid-template-columns:14px 1fr}
 [data-walkthrough] #app .export-fields{padding:0 16px 10px}
 [data-walkthrough] #app .export-row strong{font-size:13px}
 [data-walkthrough] #app .export-row>span{font-size:11px}
 [data-walkthrough] #app .file-row{padding:14px 12px}
 [data-walkthrough] #app .file-row .study-secondary{display:none}
 [data-walkthrough] #app .desk-heading .subtext{max-width:270px}
 [data-walkthrough] .salesforce-confirmation{padding:24px;width:calc(100% - 32px)}
}
@media(max-width:700px){
 [data-walkthrough] #app .review-layout{align-items:stretch}
 [data-walkthrough] #app .review-layout>.fields-panel,[data-walkthrough] #app .review-layout>.call-column{width:100%;min-width:0;flex:none}
}
@media(max-width:700px){
 #app .stats>.stat,#app .stats .stat-label,#app .stats .stat-number-line{text-align:left}
 #app .desk-stats>.stat .stat-copy{align-items:flex-start}
 [data-walkthrough] #app .source-context{display:flex;flex-direction:row;text-align:left}
 [data-walkthrough] #app .source-summary{flex:1;text-align:left;align-items:flex-start}
}
@media(max-width:700px){
 html:not([data-walkthrough]) #app .call-column .transcript-scroll{max-height:50svh;min-height:220px;overflow-y:auto}
 #app .call-column .transcript-card>.card-header{display:none}
 #app .source-context{flex-direction:row;align-items:center;flex-wrap:nowrap}
 #app .source-summary{flex:1;min-width:0;text-align:left}
 #app .source-context .btn{white-space:nowrap;font-size:11px;min-height:38px;padding:8px 10px}
}
@media(max-width:700px){
 #app .source-context .source-actions{width:auto;max-width:55%;flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px;margin:0}
 #app .source-context .source-summary{min-width:80px}
}

/* Phone review keeps the file in place while its source opens in a sheet. */
.workflow-label-mobile,.mobile-review-actions,.attention-mobile,.intake-mobile{display:none}
.attention-desktop{display:flex;align-items:center;gap:12px;width:100%}
.attention-desktop>span{flex:1}
@media(max-width:700px){
 #app .workflow{position:relative;gap:0;margin:16px 0 24px}
 #app .workflow-divider{display:none}
 #app .workflow-step{position:relative;gap:7px}
 #app .workflow-step:not(:last-child)::after{content:'';position:absolute;top:12px;left:calc(50% + 19px);width:calc(100% - 38px);height:1px;background:var(--ui-separator)}
 #app .workflow-step.done::after{background:var(--ui-success)}
 #app .workflow-label-desktop{display:none}
 #app .workflow-label-mobile{display:block;font-size:11px}
 html:not([data-walkthrough]) #app .file-heading:has(+.workflow +.mobile-review-actions) .heading-actions{display:none}
 html:not([data-walkthrough]) #app .main:has(.mobile-review-actions){padding-bottom:100px}
 html:not([data-walkthrough]) #app .mobile-review-actions{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:45;gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--ui-surface);border-top:1px solid var(--ui-separator)}
 #app .mobile-review-actions .btn{flex:1;justify-content:center;font-size:13px;min-height:44px;padding:10px 8px}
 #app .mobile-review-actions .icon{width:16px;height:16px}
 html:not([data-walkthrough]) #app[data-review-pane] .fields-panel{display:block}
 html:not([data-walkthrough]) #app .review-layout>.call-column{display:none}
 #app .attention-banner{display:block;padding:0;border:0}
 #app .attention-desktop{display:none}
 #app .attention-mobile{display:flex;width:100%;margin:0;align-items:center;text-align:left;gap:12px;padding:14px 16px;border:0;background:transparent;font:inherit}
 #app .attention-mobile>span{flex:1;min-width:0}
 #app .attention-mobile strong{display:block;font-size:13px;line-height:1.4;font-weight:600}
 #app .attention-mobile small{display:block;font-size:11px;line-height:1.5;margin-top:3px}
 #app .attention-mobile>.icon{flex:none;width:18px;height:18px}
 #app .intake-desktop{display:none}
 #app .intake-mobile{display:block}
 #app .intake-jump{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:12px 16px 4px;font-size:12px}
 #app .intake-jump>span{font-weight:500}
 #app .intake-jump button{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:44px;margin:4px 0 0;padding:0;font-size:12px}
 #app .additional-intake{scroll-margin-top:calc(var(--demo-nav-height,60px) + 16px)}
 html.transcript-sheet-open{overflow:hidden}
 #app .mobile-transcript-sheet{position:fixed;inset:auto 0 0;margin:0;width:100%;max-width:none;height:85dvh;max-height:calc(100dvh - 24px);padding:0 0 env(safe-area-inset-bottom);border:1px solid var(--ui-separator);border-bottom:0;border-radius:22px 22px 0 0;background:var(--ui-surface);color:var(--ui-label);box-shadow:0 -8px 40px #0002;overflow:hidden;overscroll-behavior:contain}
 #app .mobile-transcript-sheet[open]{display:flex;flex-direction:column;animation:transcript-sheet-enter .22s ease-out}
 #app .mobile-transcript-sheet::backdrop{background:rgb(0 0 0 / .36)}
 #app .sheet-grabber{width:36px;height:4px;border-radius:4px;background:var(--ui-separator);margin:8px auto 0;flex:none}
 #app .transcript-sheet-heading{display:flex;align-items:center;justify-content:space-between;padding:4px 12px 8px 18px;flex:none;border-bottom:1px solid var(--ui-separator)}
 #app .transcript-sheet-heading h2{display:flex;align-items:center;gap:8px;font-size:16px;margin:0}
 #app .transcript-sheet-heading .icon-button{width:44px;height:44px;background:transparent;border:0;color:var(--ui-secondary)}
 #app[data-review-pane] .mobile-transcript-sheet .call-column{display:flex;flex-direction:column;min-height:0;flex:1;width:100%;margin:0;position:static}
 #app .mobile-transcript-sheet .call-surface{display:flex;flex-direction:column;min-height:0;flex:1;border:0;border-radius:0;box-shadow:none;overflow:hidden}
 #app .mobile-transcript-sheet .sample-player{flex:none}
 #app .mobile-transcript-sheet .player-top,#app .mobile-transcript-sheet .call-footnote{display:none}
 #app .mobile-transcript-sheet .player-controls{margin:12px 16px 6px}
 #app .mobile-transcript-sheet .player-note{margin:0 16px 10px;font-size:10px}
 #app .mobile-transcript-sheet .transcript-card{display:flex;flex-direction:column;min-height:0;flex:1;border:0;border-top:1px solid var(--ui-separator);border-radius:0;box-shadow:none}
 #app .mobile-transcript-sheet .source-context{flex:none;padding:12px 16px}
 #app .mobile-transcript-sheet .source-summary p{font-size:11px;line-height:1.4;margin:4px 0 0}
 html:not([data-walkthrough]) #app .mobile-transcript-sheet .transcript-scroll{flex:1;min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain;padding:12px 16px 24px}
 #app .mobile-transcript-sheet .transcript-line.highlighted{border-radius:10px;padding:12px}
 html.transcript-sheet-open .toast{bottom:calc(16px + env(safe-area-inset-bottom))}
}
@keyframes transcript-sheet-enter{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){#app .mobile-transcript-sheet[open]{animation:none}}
@media(max-width:700px){#app .attention-banner>.attention-mobile{margin-left:0}}
@media(max-width:700px){
 #app .mobile-transcript-sheet :is(.call-column,.call-surface,.sample-player,.transcript-card,.source-context,.transcript-scroll){min-width:0;max-width:100%;width:100%;box-sizing:border-box}
 #app .mobile-transcript-sheet .call-column{align-items:stretch}
 #app .mobile-transcript-sheet .waveform{min-width:0;overflow:hidden}
}

/* Phone interaction polish: real drag affordance, unobstructed feedback/actions. */
@media(max-width:700px){
 #app .sheet-grabber{width:100%;height:24px;margin:0;background:transparent;border-radius:0;display:grid;place-items:center;touch-action:none;cursor:grab}
 #app .sheet-grabber::after{content:'';display:block;width:36px;height:4px;border-radius:4px;background:var(--ui-separator)}
 #app .transcript-sheet-heading{touch-action:none;user-select:none;padding-top:0}
 #app .sheet-notice{flex:none;margin:0;padding:10px 16px;background:var(--ui-group);color:var(--ui-label);border-bottom:1px solid var(--ui-separator);font-size:12px;line-height:1.5}
 #app .sheet-notice[hidden]{display:none}
 html #toast.toast{top:calc(var(--demo-nav-height,60px) + 12px);bottom:auto;left:16px;right:16px;width:auto;max-width:none;padding:12px 16px;font-size:13px;line-height:1.5;text-align:left;transform:translateY(-8px);pointer-events:none}
 html #toast.toast.show{transform:translateY(0)}
 #app .file-heading .heading-actions:has(.export-actions){width:100%;align-self:stretch;min-width:0}
 #app .file-heading .export-actions{width:100%;min-width:0;align-items:stretch}
 #app .file-heading .export-action-buttons{width:100%;min-width:0;align-items:stretch}
 #app .file-heading .export-action-buttons>.btn{width:100%;min-width:0;margin:0;min-height:44px}
}

/* Guided phone scenes use one continuous transcript card, including its empty state. */
.walkthrough-source-empty,.walkthrough-handoff-action{display:none}
@media(max-width:700px){
 [data-walkthrough] #app .call-surface{border:1px solid var(--ui-separator);border-radius:var(--ui-card-radius);overflow:hidden;box-shadow:none}
 [data-walkthrough] #app .call-surface .transcript-card{border:0;border-radius:0;box-shadow:none;overflow:hidden}
 [data-walkthrough] #app .call-surface .source-context{border:0;border-bottom:1px solid var(--ui-warning-line);border-radius:0;box-shadow:none;margin:0}
 [data-walkthrough] #app .call-surface .source-context.is-verified-source{border-bottom-color:var(--ui-success-line)}
 [data-walkthrough] #app .walkthrough-source-empty{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:10px;padding:24px;min-height:200px;color:var(--ui-secondary);background:var(--ui-surface)}
 [data-walkthrough] #app .walkthrough-source-empty>.icon{width:22px;height:22px}
 [data-walkthrough] #app .walkthrough-source-empty strong{font-size:14px;color:var(--ui-label)}
 [data-walkthrough] #app .walkthrough-source-empty p{font-size:13px;line-height:1.6;margin:0;max-width:260px}
 [data-walkthrough] #app .call-surface:has(.walkthrough-source-empty)>.transcript-card{display:none}
 [data-walkthrough] #app .file-heading .heading-actions:not(:has(.export-actions)){display:none}
 [data-walkthrough-view="handoff"] #app .walkthrough-handoff-action{display:block;margin-top:16px}
 [data-walkthrough] #app .walkthrough-handoff-action>.btn{width:100%;min-height:44px;justify-content:center;font-size:13px}
}

/* One mobile top surface, including Safari's safe area and overscroll background. */
@media(max-width:700px){
 html[data-demo-site-nav]{--demo-nav-height:calc(60px + env(safe-area-inset-top,0px));background:#f5f5f7}
 html[data-demo-site-nav] .demo-site-header{box-sizing:border-box;height:var(--demo-nav-height);padding-top:env(safe-area-inset-top,0px);background:#f5f5f7;border:0;border-bottom:1px solid var(--ui-separator);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
 html[data-demo-site-nav] .demo-site-navigation{height:60px;width:auto;margin-left:max(16px,env(safe-area-inset-left));margin-right:max(16px,env(safe-area-inset-right))}
}