/* Hallmark · redesign: full · theme: locked docs/DESIGN.md · scope: app · modes: light+dark · v2.0.0 */
/* Critique: quieter navigation, legible form hierarchy, and consistent surfaces across account tools. */
/* RoleGymAI presentation. Values derive from the supplied design tokens. */
.ui-icon{width:var(--space-20);height:var(--space-20);fill:none;stroke:currentColor;stroke-width:calc(var(--stroke)*2);stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
::selection{background:var(--accent);color:var(--accent-foreground)}
/* Shared application composition; all fields and movable workspace nodes stay intact. */
.sidebar{background:var(--background)}
.sidebar .brand{padding-block:var(--space-12)}
.sidebar .session-button{border-color:transparent;background:transparent;border-radius:var(--radius-control)}
.sidebar .session-button:hover{background:var(--muted)}
.sidebar .session-button.active{background:var(--card);color:var(--foreground);border-color:var(--border);box-shadow:var(--shadow-card);border-inline-start:3px solid var(--accent)}
.sidebar .session-button small{color:var(--muted-foreground)}
.topbar{background:var(--card)}
.page-heading h1{letter-spacing:-.035em}
.main-content>.page-heading{padding-bottom:var(--space-24);border-bottom:var(--stroke) solid var(--border)}
.context-panel .panel-heading h2{font-size:var(--text-title)}
.context-panel textarea{background:var(--card);min-height:120px}
.context-panel input:not([type=checkbox]),.context-panel select{background:var(--card)}
.context-panel .panel-heading{align-items:flex-start}
.setup-aside .note-card{background:var(--background);border-color:transparent;border-inline-start:var(--stroke) solid var(--border);border-radius:0}
.auth-layout .auth-card{box-shadow:var(--shadow-card);padding:var(--space-32)}
.auth-card h1{letter-spacing:-.035em;line-height:1.15}
.support-page{max-width:1120px;margin-inline:auto}
.support-page h1{letter-spacing:-.035em}
:is(.eyebrow,.sidebar-label,.subtle-label){text-transform:none;letter-spacing:normal}
.provider-tag::before{display:none}
:is(button,a,input,textarea,select,summary):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
button:active:not(:disabled),a.primary:active,a.secondary:active{transform:translateY(1px)}
.dark .auth-card,.dark .sidebar .session-button.active{box-shadow:none}
button,a,input,textarea,select,summary{ -webkit-tap-highlight-color:var(--muted) }
button:focus-visible,a:focus-visible,summary:focus-visible{outline:calc(var(--stroke)*2) solid var(--accent);outline-offset:var(--space-4)}
.primary,.secondary,.danger-button{min-height:var(--space-48);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);text-decoration:none;max-width:100%;white-space:normal}
.secondary:hover:not(:disabled){background:var(--muted);color:var(--muted-foreground)}
.icon-button{width:var(--space-32);height:var(--space-32);padding:var(--space-8)}
.theme-toggle.icon-button{width:auto;min-height:var(--space-32);height:auto;padding:var(--space-8) var(--space-12);font-size:var(--text-caption)}
.panel,.auth-card,.note-card{box-shadow:var(--shadow-soft)}
.panel-heading .eyebrow{font-size:var(--text-small)}
.chip,.provider-tag{font-size:var(--text-label);font-weight:500}
.provider-tag{display:inline-flex;align-items:center;gap:var(--space-8)}
.provider-tag::before{content:'';width:var(--space-4);height:var(--space-4);border-radius:var(--radius-pill);background:var(--accent)}
input:not([type=checkbox]),select,textarea{background:var(--muted);color:var(--foreground);border-radius:var(--radius-control)}
input:not([type=checkbox]):focus,select:focus,textarea:focus{background:var(--card);color:var(--card-foreground);outline:var(--stroke) solid var(--accent)}
input:not([type=checkbox]),select{min-height:var(--space-48)}
label{overflow-wrap:anywhere}
input[type=checkbox]{margin-inline-start:0}
.field-hint{line-height:var(--line-body)}
.sidebar{padding:var(--space-24) var(--space-16);gap:var(--space-8);overflow-y:auto}
.sidebar>*{flex-shrink:0}
.sidebar .brand{margin:0 0 var(--space-16);padding-inline:var(--space-8)}
.brand-mark{border-radius:var(--radius-card);width:var(--space-32);height:var(--space-32)}
.brand{font-size:var(--text-title);line-height:var(--line-body)}
.brand-light{font-size:var(--text-small);line-height:var(--line-caption)}
.sidebar-label{padding-inline:var(--space-8)}
.new-button{margin:0 0 var(--space-8)}
.sessions-heading{padding:var(--space-8);font-size:var(--text-caption)}
#sessions{min-height:var(--space-64);flex:1 1 calc(var(--space-64)*2);padding:var(--space-4)}
.session-button{border-color:var(--card);border-radius:var(--radius-control);padding:var(--space-12);padding-inline-end:var(--space-32)}
.session-button:hover{background:var(--muted);color:var(--muted-foreground)}
.session-button.active{background:var(--muted);color:var(--foreground);border-color:var(--border);border-inline-start:var(--space-4) solid var(--accent)}
.session-button strong{font-size:var(--text-caption);font-weight:600}
.session-button small{display:block;margin-top:var(--space-4);color:var(--muted-foreground)}
/* Interview schedule: upcoming reads green, past reads red, in both themes. */
.session-when{white-space:nowrap;font-weight:600}
.session-item.upcoming .session-when{color:var(--success)}
.session-item.past .session-when{color:var(--destructive)}
.session-item.upcoming .session-button:not(.active){box-shadow:inset var(--space-4) 0 var(--success)}
.session-item.past .session-button:not(.active){box-shadow:inset var(--space-4) 0 var(--destructive)}
.interview-table tbody tr.upcoming .schedule-cell{color:var(--success);font-weight:600}
.interview-table tbody tr.past .schedule-cell{color:var(--destructive);font-weight:600}
.session-delete{font-size:var(--text-reading);background:var(--secondary);color:var(--secondary-foreground)}
.sidebar .mock-interview-button{font-weight:600;text-decoration:none;text-align:center;white-space:normal}
.interview-practice-links{margin-block-end:var(--space-16);min-inline-size:0}.practice-links-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--space-12);flex-wrap:wrap}.practice-links-heading h3{margin:0}.practice-links-heading a{text-decoration:none;white-space:normal}.practice-links-list{padding:0;list-style:none}.practice-links-list li{display:flex;align-items:center;justify-content:space-between;gap:var(--space-12);padding-block:var(--space-8);border-block-start:1px solid var(--border)}.practice-links-list a{overflow-wrap:anywhere;min-inline-size:0}.practice-links-list small{color:var(--muted-foreground)}.interview-practice-disclosure{margin-block-end:var(--space-16)}.interview-practice-disclosure>summary{cursor:pointer;font-weight:600;margin-block-end:var(--space-12)}
.sessions-browse{font-size:var(--text-label);padding:var(--space-8) var(--space-12);margin-bottom:var(--space-8)}
.sidebar-tools{display:grid;gap:var(--space-4);padding:var(--space-12) 0;border-top:var(--stroke) solid var(--border)}
.sidebar-tools .settings-button,.sidebar-bottom .settings-button,.sidebar-bottom .text-button{display:flex;align-items:center;gap:var(--space-12);min-height:var(--space-32);font-size:var(--text-caption);padding:var(--space-4) var(--space-12);text-decoration:none}
.sidebar-tools .settings-button:hover{background:var(--muted);color:var(--foreground)}
.sidebar-tools .ui-icon{width:var(--space-16);height:var(--space-16);color:var(--muted-foreground)}
.sidebar-tools .support-unread-badge{margin-inline-start:auto;min-width:var(--space-20);padding-inline:var(--space-4);border-radius:var(--radius-pill);background:var(--accent);color:var(--accent-foreground);font-size:var(--text-tiny);font-weight:600;text-align:center}
.sidebar-bottom{margin-top:0;gap:var(--space-8);padding-top:var(--space-16)}
.account-summary{padding:0 var(--space-12);margin:0;min-width:0}
.account-summary strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.account-summary small{font-size:var(--text-small);margin-top:var(--space-4)}
.topbar{position:sticky;top:0;z-index:10;background:var(--card);color:var(--card-foreground);padding:var(--space-12) var(--space-32);min-height:var(--space-64)}
.topbar-right{gap:var(--space-8)}
.language-control{gap:var(--space-8)}
.qa-editor{display:grid;gap:var(--space-8);margin-top:var(--space-8)}
.qa-editor input,.qa-editor textarea{width:100%}
.admin-qa-list{display:grid;gap:var(--space-8);margin-top:var(--space-12)}
.qa-item{padding:var(--space-8) var(--space-12);border:var(--stroke) solid var(--border);border-radius:var(--radius-control);background:var(--muted)}
.qa-item summary{cursor:pointer;font-weight:600}
.qa-item p{margin:var(--space-8) 0;white-space:pre-wrap}
.language-control select{min-height:var(--space-32);height:var(--space-32);font-size:var(--text-caption);padding:var(--space-4) var(--space-8);max-width:calc(var(--space-64)*2)}
.main-content{padding:var(--space-32);max-width:calc(var(--space-64)*24)}
.page-heading{margin-bottom:var(--space-24);align-items:flex-end}
.page-heading .eyebrow{font-size:var(--text-small);font-weight:500}
.page-heading h1{font-weight:600;margin:var(--space-12) 0}
.page-heading p{font-size:var(--text-caption);line-height:var(--line-body)}
.interview-selected .page-heading h1{font-size:var(--text-title);line-height:var(--line-reading)}
.workflow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-8);padding:var(--space-8);background:var(--card);color:var(--card-foreground);border:var(--stroke) solid var(--border);border-radius:var(--radius-card);margin-bottom:var(--space-24)}
.workflow i{display:none}
.workflow-step{padding:var(--space-8) var(--space-12);background:var(--card);color:var(--muted-foreground);border-radius:var(--radius-control);min-width:0;gap:var(--space-12);text-align:start;font-size:var(--text-caption)}
.workflow-step span{border:0;background:var(--muted);color:var(--muted-foreground);width:var(--space-24);height:var(--space-24);flex-shrink:0}
.workflow-step.active{background:var(--muted);color:var(--foreground)}
.workflow-step.active span{background:var(--accent);color:var(--accent-foreground)}
.workflow-step:hover:not(.active){background:var(--muted);color:var(--foreground)}
.welcome{grid-template-columns:minmax(0,1fr) minmax(0,calc(var(--space-64)*5));min-height:calc(var(--space-64)*6);box-shadow:var(--shadow-soft)}
.welcome-copy{grid-column:1;grid-row:1;padding:var(--space-48);align-self:center}
.welcome-copy h2{font-size:var(--text-display);line-height:calc(var(--line-reading)*2);font-weight:500}
.welcome-copy>p{font-size:var(--text-body);line-height:var(--line-reading)}
.welcome-art{grid-column:2;grid-row:1;background:var(--primary);color:var(--primary-foreground);padding:var(--space-32);border:0;gap:var(--space-16)}
.flow-card{display:flex;align-items:center;gap:var(--space-12);padding:var(--space-16);border-radius:var(--radius-card);background:var(--card);color:var(--card-foreground);width:100%;text-align:start;border:var(--stroke) solid var(--border);font-size:var(--text-caption)}
.flow-card .ui-icon{color:var(--accent)}
.flow-card:last-of-type{background:var(--accent);color:var(--accent-foreground);border-color:var(--accent)}
.flow-card:last-of-type .ui-icon{color:var(--accent-foreground)}
.flow-card small{display:block;font-size:var(--text-small);margin-top:var(--space-4)}
.welcome-art .art-label{color:var(--primary-foreground);margin:var(--space-16) 0 0;font-size:var(--text-small)}
.welcome-features{padding-top:var(--space-20);border-top:var(--stroke) solid var(--border);gap:var(--space-12)}
.setup-grid{grid-template-columns:minmax(0,1fr) calc(var(--space-64)*4);align-items:start}
.context-panel{padding:var(--space-32)}
.context-panel .panel-heading{padding-bottom:var(--space-20);border-bottom:var(--stroke) solid var(--border)}
.context-panel .label-row{margin-top:var(--space-24);align-items:center}
.context-panel .label-row label{margin:0}
.context-panel .button-row{margin:var(--space-16) 0}
.context-panel .toggle-label{display:flex;font-weight:400;font-size:var(--text-caption)}
.upload-button{display:inline-flex;align-items:center;min-height:var(--space-32);padding:var(--space-8) var(--space-12);white-space:normal;text-align:center}
.setup-aside{position:sticky;top:calc(var(--space-64) + var(--space-24))}
.note-card{padding:var(--space-24);box-shadow:none}
.checklist-item{padding:var(--space-16) 0;margin:0;border-top:var(--stroke) solid var(--border)}
.checklist-item>span{font-size:var(--text-caption);font-weight:600;min-width:var(--space-24)}
.checklist-item strong{font-weight:600}
.quiet-note{padding:var(--space-16);border-inline-start:var(--space-4) solid var(--accent);background:var(--muted);color:var(--muted-foreground);border-radius:var(--radius-control);margin-top:var(--space-16)}
.quiet-note p{margin-bottom:0}
.form-footer{flex-wrap:wrap;align-items:center;gap:var(--space-16)}
.form-footer button{min-width:0;max-width:100%;white-space:normal}
.prepare-grid .panel{padding:var(--space-32)}
.prepare-grid .panel-description{font-size:var(--text-body);line-height:var(--line-reading)}
.next-bar{background:var(--card);color:var(--card-foreground);border:var(--stroke) solid var(--border);border-radius:var(--radius-card);padding:var(--space-20) var(--space-24);flex-wrap:wrap}
.live-active .page-heading{display:block;margin:0}
.live-active .page-heading>div{position:absolute;width:var(--stroke);height:var(--stroke);padding:0;margin:calc(0px - var(--stroke));overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.live-active .page-heading>#export{display:none}
.live-active .main-content{padding:var(--space-20) var(--space-24)}
.live-active .workflow{padding:var(--space-4);margin-bottom:var(--space-16)}
.live-controls{padding:var(--space-16);background:var(--card);color:var(--card-foreground);border:var(--stroke) solid var(--border);border-radius:var(--radius-card)}
.live-status #elapsed{font-variant-numeric:tabular-nums;font-size:var(--text-body);border-inline-start:var(--stroke) solid var(--border);padding-inline-start:var(--space-12)}
.live-voice-state{display:inline-flex;align-items:center;gap:var(--space-12);padding:var(--space-8) var(--space-12);border:var(--stroke) solid var(--border);border-radius:var(--radius-control);background:var(--muted);color:var(--muted-foreground)}
.live-voice-state>span:last-child{display:flex;flex-direction:column;line-height:var(--line-caption)}
.live-voice-state strong{font-size:var(--text-label);font-weight:600;color:var(--card-foreground)}
.live-voice-state small{font-size:var(--text-tiny);white-space:nowrap}
.live-wave{display:flex;align-items:center;justify-content:center;gap:var(--space-4);width:var(--space-48);height:var(--space-32);--voice-scale:.45}
.live-wave i{display:block;width:var(--space-4);height:var(--space-24);min-height:var(--space-8);background:var(--border);border-radius:var(--radius-pill);transform:scaleY(var(--voice-scale));transition:transform 120ms ease,background 120ms ease}
.live-voice-state.active{background:var(--accent);color:var(--accent-foreground);border-color:var(--accent);box-shadow:var(--shadow-control)}
.live-voice-state.active strong{color:var(--accent-foreground)}
.live-voice-state.active .live-wave i{background:var(--accent-foreground)}
.listening-toggle{padding:0;min-height:var(--space-48);overflow:hidden}
.listening-toggle .live-voice-state{border:0;border-radius:0;background:transparent;color:inherit;padding:var(--space-8) var(--space-12);width:100%;height:100%}
.listening-toggle .live-voice-state strong{color:inherit}
.listening-toggle.active{background:var(--accent);color:var(--accent-foreground);border-color:var(--accent);box-shadow:var(--shadow-control)}
.listening-toggle.active .live-voice-state{background:transparent;border-color:transparent;box-shadow:none}
.listening-toggle:not(.active):disabled{background:var(--muted);color:var(--muted-foreground);border-color:var(--border)}
.live-wave.speaking i{animation:live-wave 720ms ease-in-out infinite alternate}
.live-wave.speaking i:nth-child(2){animation-delay:-180ms}.live-wave.speaking i:nth-child(3){animation-delay:-360ms}.live-wave.speaking i:nth-child(4){animation-delay:-540ms}.live-wave.speaking i:nth-child(5){animation-delay:-240ms}
@keyframes live-wave{from{transform:scaleY(.55)}to{transform:scaleY(1.3)}}
@media (prefers-reduced-motion:reduce){.live-wave.speaking i{animation:none;transition:none}}
.reading-voice-state{margin-inline-start:auto;flex-shrink:0}
.live-control-actions .primary,.live-control-actions .secondary{min-height:var(--space-32);padding:var(--space-8) var(--space-16);font-size:var(--text-caption)}
.audio-notice{margin-top:var(--space-8);background:var(--background);color:var(--muted-foreground);border:0;padding:var(--space-8) 0}
.live-toolbar{align-items:center;margin:var(--space-8) 0 var(--space-16)}
.live-toolbar strong{font-weight:500;margin:0 0 var(--space-4)}
.automation-options{font-size:var(--text-caption);color:var(--muted-foreground)}
.automation-options summary{cursor:pointer;padding:var(--space-4) 0;font-weight:500}
.automation-options[open]{padding:var(--space-12);background:var(--muted);color:var(--muted-foreground);border:var(--stroke) solid var(--border);border-radius:var(--radius-control)}
.automation-options .toggle-label{margin-top:var(--space-12)}
.live-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-16)}
.live-grid>.panel{min-height:calc(var(--space-64)*9);height:calc(100dvh - var(--space-64)*4);max-height:none;border-radius:var(--radius-card);box-shadow:none}
.live-grid .panel-heading{padding:var(--space-16) var(--space-20);gap:var(--space-12)}
.live-grid .panel-heading h2{font-size:var(--text-reading);line-height:var(--line-reading);font-weight:600}
.live-grid .panel-heading .eyebrow{font-size:var(--text-small)}
.answer-panel{border-top:var(--space-4) solid var(--accent)}
.answer-panel .panel-heading{padding-top:var(--space-12)}
.transcript-list,.answer-list{padding:var(--space-20)}
.transcript-entry{padding:var(--space-16);margin-bottom:var(--space-16);border:var(--stroke) solid var(--border);border-inline-start:var(--space-4) solid var(--border);border-radius:var(--radius-control);background:var(--muted);color:var(--muted-foreground)}
.transcript-entry.other,.transcript-entry.interviewer{background:var(--card);color:var(--card-foreground);border-inline-start-color:var(--accent)}
.entry-meta{font-size:var(--text-small);margin-bottom:var(--space-12)}
.entry-meta strong{font-weight:600}
.entry-select{width:var(--space-16);height:var(--space-16)}
.entry-action{margin-top:var(--space-12);min-height:var(--space-24);font-size:var(--text-small)}
.transcript-footer{background:var(--card);color:var(--muted-foreground);padding:var(--space-12) var(--space-16)}
.transcript-listening-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-12);padding-bottom:var(--space-12);margin-bottom:var(--space-12);border-bottom:var(--stroke) solid var(--border)}
.transcript-listening-bar .live-voice-state{flex:1;min-width:0}
.transcript-listening-bar button{flex-shrink:0}
.selection-actions{flex-wrap:wrap}
.selection-actions .listening-toggle{margin-inline-start:auto}
.answer-card{border-radius:var(--radius-control);margin-bottom:var(--space-16)}
.answer-question{font-size:var(--text-caption);font-weight:600;line-height:var(--line-body);padding:var(--space-16) var(--space-20)}
.answer-content{font-size:var(--text-reading);padding:var(--space-20);line-height:var(--line-reading)}
.answer-meta{font-size:var(--text-small);padding:var(--space-8) var(--space-20)}
.empty-state{flex:1;min-height:calc(var(--space-64)*4);gap:var(--space-8)}
.empty-state h3{font-size:var(--text-reading);margin:0}
.empty-state p{max-width:calc(var(--space-64)*5);font-size:var(--text-caption)}
.empty-symbol{width:var(--space-48);height:var(--space-48);display:flex;align-items:center;justify-content:center;border:var(--stroke) solid var(--border);border-radius:var(--radius-card);background:var(--muted);color:var(--accent);font-size:var(--text-title);margin-bottom:var(--space-16)}
.question-composer{background:var(--card);color:var(--card-foreground);border-radius:var(--radius-card);border:var(--stroke) solid var(--border);padding:var(--space-12);margin-top:var(--space-16);box-shadow:var(--shadow-soft)}
.question-composer textarea{background:var(--card);color:var(--card-foreground);padding:var(--space-8);border:0;margin:0;min-height:var(--space-48)}
.question-composer .primary{padding:var(--space-12) var(--space-20)}
.workspace-footer{font-size:var(--text-small);line-height:var(--line-caption)}
.support-launcher{min-height:var(--space-32);font-size:var(--text-caption);padding:var(--space-8) var(--space-12);border-radius:var(--radius-pill)}
dialog{padding:var(--space-32);border-radius:var(--radius);box-shadow:var(--shadow-dialog)}
.dialog-heading{padding-bottom:var(--space-20);border-bottom:var(--stroke) solid var(--border);margin-bottom:var(--space-24)}
.dialog-heading .icon-button{flex-shrink:0}
.global-voice-settings{margin-top:0;border-top:0;padding-top:0}
.sound-check{padding:var(--space-24);text-align:start}
.sound-check .wave-meter{margin-bottom:var(--space-20)}
.voice-script{font-size:var(--text-title);font-weight:500;padding:var(--space-20);line-height:var(--line-reading)}
.plan-card{padding:var(--space-24);display:flex;flex-direction:column;gap:var(--space-12)}
#plan-cards .plan-card[data-billing-plan=plus]{border:calc(var(--stroke)*2) solid var(--accent);box-shadow:var(--shadow-soft)}
.plan-card h3{font-size:var(--text-title)}
.plan-price{font-weight:600;margin:var(--space-8) 0}
.plan-card p{margin:0}
.plan-features{list-style:none;display:grid;gap:var(--space-12);padding:var(--space-16) 0;margin:0;border-top:var(--stroke) solid var(--border);border-bottom:var(--stroke) solid var(--border);font-size:var(--text-caption);line-height:var(--line-body)}
.plan-features li{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-8);flex-wrap:wrap}
.plan-features strong{font-size:var(--text-reading);font-weight:600;min-width:var(--space-32);font-variant-numeric:tabular-nums}
.plan-card>label{margin-top:auto}
.plan-card .button-row{margin-top:0;align-items:stretch}
.plan-card .button-row>.primary{width:100%}
.plan-card .button-row>.secondary{font-size:var(--text-caption)}
.metric{background:var(--card);color:var(--muted-foreground);padding:var(--space-20)}
.metric strong{font-variant-numeric:tabular-nums}
.table-wrap{border:var(--stroke) solid var(--border);border-radius:var(--radius-control)}
th{padding:var(--space-12) var(--space-16);font-size:var(--text-label);font-weight:600}
td{padding:var(--space-16);line-height:var(--line-body)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--muted);color:var(--muted-foreground)}
.interviews-heading{align-items:flex-end;padding-bottom:var(--space-24);border-bottom:var(--stroke) solid var(--border);margin-bottom:var(--space-24)}
.interviews-heading h1{font-weight:600}
.interview-filters{background:var(--card);color:var(--card-foreground);padding:var(--space-24);gap:var(--space-20)}
.interview-filters label{font-size:var(--text-caption);font-weight:500;flex-basis:calc(var(--space-64)*4)}
.interview-filters .toggle-label{font-weight:400}
.interview-table td .text-button{max-width:calc(var(--space-64)*5);white-space:normal;text-align:start}
.auth-layout{max-width:calc(var(--space-64)*20);padding:var(--space-64) var(--space-48);gap:var(--space-64)}
.auth-story .brand{margin-bottom:var(--space-48)}
.auth-story h1{font-weight:600}
.auth-story h1 em{font-style:normal;color:var(--accent)}
.auth-story>p{font-size:var(--text-body);line-height:var(--line-reading)}
.auth-card{padding:var(--space-32);box-shadow:var(--shadow-soft)}
.auth-card h2{font-size:var(--text-title);font-weight:600;margin:var(--space-12) 0}
.auth-card .field-hint{font-size:var(--text-caption);line-height:var(--line-body)}
.auth-card #auth-form{margin:var(--space-24) 0}
.auth-crypto-note{display:grid;gap:var(--space-8);margin-top:var(--space-24);padding:var(--space-16);border:var(--stroke) solid var(--accent);border-radius:var(--radius-card);background:color-mix(in srgb,var(--accent) 10%,var(--muted));color:var(--card-foreground)}
.auth-crypto-note .eyebrow{color:var(--accent);font-size:var(--text-small);font-weight:700}.auth-crypto-note strong{font-size:var(--text-caption)}.auth-crypto-note p{margin:0;color:var(--muted-foreground);font-size:var(--text-small);line-height:var(--line-body)}
.admin-list-controls{display:flex;align-items:end;flex-wrap:wrap;gap:var(--space-12);margin:var(--space-16) 0}.admin-list-controls label{display:grid;gap:var(--space-4);min-width:calc(var(--space-64)*3);font-size:var(--text-caption);font-weight:500}.admin-list-controls input,.admin-list-controls select{min-height:var(--space-40)}.admin-pagination{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-8);margin-top:calc(var(--space-12)*-1);font-size:var(--text-caption)}.admin-pagination button{min-height:var(--space-32);padding:var(--space-4) var(--space-12)}
.auth-flow{display:grid;gap:var(--space-12);padding:var(--space-20);margin-top:var(--space-32);border:var(--stroke) solid var(--border);border-radius:var(--radius);background:var(--card);color:var(--card-foreground);max-width:calc(var(--space-64)*7)}
.auth-flow .flow-card{border-radius:var(--radius-control);padding:var(--space-12);background:var(--muted);color:var(--muted-foreground)}
.auth-flow .flow-card:last-of-type{background:var(--accent);color:var(--accent-foreground)}
.auth-flow .flow-card>.flow-number{margin-inline-start:auto;font-size:var(--text-small);font-variant-numeric:tabular-nums}
.auth-features{display:none}
.support-page{max-width:calc(var(--space-64)*22);padding:var(--space-32)}
.support-heading{padding-bottom:var(--space-24);border-bottom:var(--stroke) solid var(--border)}
.support-intro{margin:var(--space-32) 0}
.support-intro h1{font-weight:600}
.support-intro p{font-size:var(--text-body);line-height:var(--line-reading)}
.support-layout{grid-template-columns:calc(var(--space-64)*4 + var(--space-32)) minmax(0,1fr)}
.support-topics{box-shadow:none;padding:var(--space-24)}
#support-suggestions button{background:var(--muted);color:var(--muted-foreground);justify-content:flex-start;border:var(--stroke) solid var(--border);font-size:var(--text-caption);padding:var(--space-12)}
#support-suggestions button:hover{border-color:var(--accent);color:var(--foreground)}
.support-chat{padding:var(--space-24);min-height:calc(var(--space-64)*9)}
.support-messages{flex:1;min-height:calc(var(--space-64)*4);gap:var(--space-16)}
.support-message{background:var(--muted);color:var(--muted-foreground);padding:var(--space-20)}
.support-message.user-message{background:var(--accent);color:var(--accent-foreground)}
.support-message .chip{font-size:var(--text-small)}
.support-message p{font-size:var(--text-body);line-height:var(--line-reading)}
.support-note{font-size:var(--text-caption);line-height:var(--line-body)}
.support-note p{line-height:var(--line-body)}
.support-chat form{border-top:var(--stroke) solid var(--border);padding-top:var(--space-20);margin-top:var(--space-16)}
.payment-page,.setup-guide{border:var(--stroke) solid var(--border);box-shadow:var(--shadow-soft);padding:var(--space-32)}
.setup-guide h2{padding-top:var(--space-24);border-top:var(--stroke) solid var(--border);margin-top:var(--space-32)}
.payment-page .language-floating,.setup-guide .language-floating{position:static;margin-bottom:var(--space-24)}
@media(max-width:calc(64px * 18)){
 .app-shell{grid-template-columns:calc(var(--space-64)*3 + var(--space-32)) minmax(0,1fr)}
 .main-content,.live-active .main-content{padding:var(--space-24)}
 .topbar{padding:var(--space-12) var(--space-24)}
 .topbar-right .language-control>span:first-child{display:none}
 .setup-grid{grid-template-columns:minmax(0,1fr)}
 .setup-aside{display:none}
 .welcome{grid-template-columns:minmax(0,1fr)}
 .welcome-art{grid-column:1;grid-row:2;flex-direction:row;flex-wrap:wrap;padding:var(--space-24)}
 .welcome-art .flow-card{flex:1;min-width:calc(var(--space-64)*2)}
 .welcome-art .art-label{width:100%;text-align:center;margin:0}
 .welcome-copy{padding:var(--space-32)}
 .auth-layout{gap:var(--space-32);padding:var(--space-64) var(--space-32);grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media(max-width:calc(64px * 12)){
 .sidebar{padding:var(--space-16);gap:var(--space-12);height:auto;overflow:visible}
 .sidebar .brand{margin:0;padding:0}
 .sidebar-tools,.sidebar-bottom{display:none}
 .new-button{min-height:var(--space-32);margin:0}
 .sidebar .mock-interview-button{grid-column:2;grid-row:2}
 #sessions{min-height:0;padding:0;max-height:calc(var(--space-64) + var(--space-8));flex:initial}
 .session-item{min-width:calc(var(--space-64)*3);max-width:calc(var(--space-64)*4)}
 .session-button{padding:var(--space-8) var(--space-12);padding-inline-end:var(--space-32)}
 .sessions-browse{grid-column:1/-1;margin:0;padding:var(--space-4) 0}
 .topbar{position:static;padding:var(--space-12) var(--space-16);gap:var(--space-12);min-height:var(--space-64)}
 .topbar-right{gap:var(--space-8);margin-inline-start:auto}
 .topbar .provider-tag{display:none}
 .language-control select{min-height:var(--space-32);font-size:var(--text-caption)}
 .main-content,.live-active .main-content{padding:var(--space-20) var(--space-16)}
 .page-heading{align-items:flex-start;gap:var(--space-12)}
 .page-heading h1{font-size:var(--text-title);line-height:var(--line-reading)}
 .page-heading .eyebrow{font-size:var(--text-small);line-height:var(--line-caption)}
 .page-heading>button{padding:var(--space-8);font-size:var(--text-small);min-height:var(--space-32)}
 .workflow,.live-active .workflow{gap:var(--space-4);padding:var(--space-4);overflow:visible}
 .workflow-step{flex-direction:column;justify-content:center;gap:var(--space-8);font-size:var(--text-small);padding:var(--space-8) var(--space-4);white-space:normal;text-align:center;line-height:var(--line-caption)}
 .workflow-step span{width:var(--space-24);height:var(--space-24)}
 .context-panel,.prepare-grid .panel{padding:var(--space-20)}
 .form-row{grid-template-columns:minmax(0,1fr)}
 .label-row{flex-wrap:wrap}
 .context-panel .label-row{margin-top:var(--space-20)}
 .form-footer .primary{width:100%}
 .welcome-copy{padding:var(--space-24)}
 .welcome-copy h2{font-size:var(--text-title);line-height:var(--line-reading)}
 .welcome-art{display:none}
 .welcome-features{font-size:var(--text-label);gap:var(--space-8)}
 .live-control-actions{width:100%}
 .live-controls{padding:var(--space-16);gap:var(--space-16)}
 .live-voice-state{order:-1;width:100%;justify-content:center}
 .reading-header{flex-wrap:wrap}
 .reading-header .reading-voice-state{margin-inline-start:0}
 .live-control-actions .primary,.live-control-actions .secondary{flex:1;min-height:var(--space-48)}
 .transcript-listening-bar{flex-wrap:wrap}
 .transcript-listening-bar .live-voice-state{width:100%;justify-content:center}
 .live-toolbar{align-items:stretch;flex-direction:column;gap:var(--space-12)}
 .live-toolbar .secondary{min-height:var(--space-32);font-size:var(--text-caption)}
 .live-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-20)}
 .live-grid>.panel{min-height:calc(var(--space-64)*7);height:calc(var(--space-64)*8)}
 .live-grid .panel-heading{padding:var(--space-16)}
 .transcript-list,.answer-list{padding:var(--space-16)}
 .panel-actions .text-button{font-size:var(--text-small);white-space:normal}
 .selection-actions{gap:var(--space-8)}
 .selection-actions .listening-toggle{margin-inline-start:0;flex:1;min-width:100%}
 .transcript-entry{padding:var(--space-12)}
 .entry-meta time{margin-inline-start:0}
 .question-composer{padding:var(--space-12)}
 .question-composer .primary{width:100%}
 .question-composer textarea{font-size:var(--text-reading)}
 .next-bar{padding:var(--space-20)}
 .next-bar .primary{width:100%}
 dialog,.wide-dialog{padding:var(--space-20);width:calc(100vw - var(--space-24));max-height:calc(100dvh - var(--space-24))}
 .dialog-heading{gap:var(--space-12)}
 .dialog-heading h2{font-size:var(--text-title);line-height:var(--line-reading)}
 .plan-cards,.metric-grid,#usage-cards{grid-template-columns:minmax(0,1fr)}
 .plan-card{padding:var(--space-24)}
 .plan-price{font-size:var(--text-display)}
 .auth-layout{display:flex;flex-direction:column;align-items:stretch;padding:calc(var(--space-64) + var(--space-32)) var(--space-20) var(--space-32);gap:var(--space-24);min-height:100dvh}
 .auth-story .brand{margin-bottom:var(--space-24)}
 .auth-story h1{font-size:var(--text-title);line-height:var(--line-reading);margin:var(--space-16) 0}
 .auth-story>p{font-size:var(--text-caption);line-height:var(--line-body);margin:0}
 .auth-flow{display:none}
 .auth-card{padding:var(--space-24)}
 .admin-list-controls{align-items:stretch}.admin-list-controls label{width:100%}.admin-list-controls .secondary{width:100%}.admin-pagination{justify-content:space-between}
 .support-page,.interviews-page{padding:var(--space-20) var(--space-16)}
 .support-heading{gap:var(--space-16);padding-bottom:var(--space-20)}
 .support-heading>.button-row{width:100%;justify-content:space-between;gap:var(--space-8)}
 .support-heading .secondary,.interviews-actions .secondary{min-height:var(--space-32);padding:var(--space-8) var(--space-12);font-size:var(--text-caption)}
 .support-intro{margin:var(--space-24) 0}
 .support-intro h1{font-size:var(--text-title);line-height:var(--line-reading)}
 .support-layout,.support-admin-grid{grid-template-columns:minmax(0,1fr)}
 .support-chat{padding:var(--space-20);min-height:calc(var(--space-64)*8);grid-row:1}
 .support-topics{padding:var(--space-20)}
 .support-message{padding:var(--space-16)}
 .support-message.user-message{margin-inline-start:var(--space-16)}
 .interviews-heading{align-items:stretch;gap:var(--space-16);flex-direction:column}
 .interviews-actions{gap:var(--space-8)}
 .interview-filters{padding:var(--space-20);gap:var(--space-16)}
 .interview-filters label{flex-basis:100%;min-width:0}
 .interview-filters>button{width:100%}
 .payment-page,.setup-guide{padding:var(--space-20);margin:var(--space-16)}
}
@media(prefers-reduced-motion:reduce){.wave-meter.recording span{animation:none}}
.visual-context-controls { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-8); }
.visual-context-controls .field-hint { margin: 0; }
#windows-caption-help { width: 100%; }
#windows-caption-help summary { cursor: pointer; }
#windows-caption-help p { margin-block: var(--space-8); }
.transcript-footer { max-height: 50%; overflow-y: auto; }
.manual-question-actions { display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap; flex-shrink: 0; }
.manual-question-actions .toggle-label { font-size: var(--text-caption); }
@media (max-width: 760px) {
 .manual-question-actions { width: 100%; }
}

.ai-settings-group { min-width: 0; margin: 0 0 var(--space-20); padding: var(--space-16); border: var(--stroke) solid var(--border); border-radius: var(--radius-card); }
.ai-settings-group legend,.ai-settings-group summary { font-size: var(--text-body); font-weight: 600; padding-inline: var(--space-4); }
.ai-settings-group summary { cursor: pointer; }
.ai-settings-save { display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap; position: sticky; top: 0; z-index: 2; padding-block: var(--space-12); margin-block-end: var(--space-16); background: var(--card); border-block-end: var(--stroke) solid var(--border); }
.ai-settings-save .field-hint { margin: 0; }
.ai-settings-group>label,.ai-settings-group>div { margin-block-start: var(--space-12); }
.speech-fields { display: grid; gap: var(--space-12); min-width: 0; }
.speech-fields label { margin: 0; min-width: 0; }
.speech-fields select,.speech-fields input:not([type="checkbox"]) { width: 100%; min-width: 0; max-width: 100%; }
.speech-engine-checks { min-width: 0; margin: 0; padding: var(--space-12); border: var(--stroke) solid var(--border); border-radius: var(--radius-control); }
.speech-engine-checks legend { font-size: var(--text-body); }
.speech-engine-checks .toggle-label { margin-block: var(--space-12); white-space: normal; }
.speech-engine-checks input { flex-shrink: 0; }
#prepare-audio-settings .toggle-label { margin-block: var(--space-16) var(--space-8); white-space: normal; }
.live-control-actions .toggle-label { white-space: normal; }
.speech-fields [hidden],.prepare-speech-settings [hidden] { display: none!important; }
.speech-model-label { display: block; font-weight: 500; margin-block-end: var(--space-8); }
.speech-fields output { display: block; overflow-wrap: anywhere; padding: var(--space-12); background: var(--muted); border: var(--stroke) solid var(--border); border-radius: var(--radius-control); }
.speech-fields .field-hint { margin: 0; }
.prepare-speech-settings { padding-block-end: var(--space-20); border-block-end: var(--stroke) solid var(--border); }
.prepare-speech-settings .button-row { flex-wrap: wrap; }
.prepare-speech-settings button { max-width: 100%; white-space: normal; }
.audio-source-settings { padding-block-start: var(--space-20); }
.audio-source-settings h3 { font-size: var(--text-body); margin-block-end: var(--space-8); }
.prepare-speech-settings select:disabled { opacity: 1; color: var(--foreground); }

/* Flexible live panels keep the same ratio when moved into the reader. */
.live-grid { grid-template-columns: minmax(0,var(--transcript-size,1fr)) var(--space-16) minmax(0,var(--answer-size,1fr)); gap: 0; }
.live-grid>.panel { min-width: 0; }
.panel-divider { display: flex; align-items: center; justify-content: center; cursor: col-resize; touch-action: none; outline-offset: 0; }
.panel-divider::before { content: ''; width: calc(var(--stroke)*2); height: 100%; background: var(--border); border-radius: var(--radius-pill); }
.panel-divider:hover::before,.panel-divider:focus-visible::before,.resizing .panel-divider::before { width: var(--space-4); background: var(--accent); }
.live-grid.resizing { user-select: none; cursor: col-resize; }
.transcript-panel { container-type: inline-size; }
.transcript-footer { display: grid; grid-template-rows: minmax(0,1fr) auto; align-items: stretch; overflow: hidden; }
.transcript-audio-options { display: flex; flex-direction: column; gap: var(--space-8); min-height: 0; max-height: calc(var(--space-64)*2); overflow-y: auto; }
.selection-actions { width: 100%; min-width: 0; }
.selection-actions .selection-hint { flex-basis: 100%; }
.selected-guidance-controls { display: flex; flex-direction: column; gap: var(--space-8); flex: 1 1 calc(var(--space-64)*3); min-width: 0; max-width: 100%; }
.selected-guidance-controls .toggle-label { font-size: var(--text-caption); white-space: normal; }
.selection-actions #guidance-selected,.selection-actions .listening-toggle { flex: 1 1 calc(var(--space-64)*3); min-width: 0; max-width: 100%; margin-inline-start: 0; white-space: normal; overflow-wrap: anywhere; }
.selection-actions .selected-guidance-controls #guidance-selected { flex: initial; width: 100%; }
.listening-toggle .live-voice-state { min-width: 0; justify-content: center; flex-wrap: wrap; }
.listening-toggle .live-voice-state>span:last-child { min-width: 0; }
.visual-context-controls,.panel-actions { min-width: 0; max-width: 100%; flex-wrap: wrap; }
.visual-context-controls>button { min-width: 0; max-width: 100%; white-space: normal; }
.entry-text,.answer-content,.answer-card h3 { overflow-wrap: anywhere; }
.answer-content pre { max-width: 100%; overflow-x: auto; }
#reading-footer { flex-shrink: 0; max-height: 50%; overflow-y: auto; }
#reading-footer .question-composer { margin-top: var(--space-12); }
#reading-footer .workspace-footer { margin-bottom: 0; }
#manual-question-section { min-width: 0; }
.answer-visual-recovery { display: flex; flex-wrap: wrap; gap: var(--space-8); flex-basis: 100%; min-width: 0; }
.answer-visual-recovery .field-hint { flex-basis: 100%; margin: 0; }
.answer-visual-recovery button { white-space: normal; max-width: 100%; }
.question-composer textarea { min-width: 0; flex: 1; }
@container (max-width: 384px) {
 .selection-actions .selection-hint { display: none; }
 .selection-actions #guidance-selected,.selection-actions .listening-toggle { flex-basis: 100%; }
 .selection-actions .selected-guidance-controls { flex-basis: 100%; }
 .listening-toggle .live-wave { width: var(--space-32); }
}
@media(max-width:calc(64px * 12)) {
 .live-grid { grid-template-columns: minmax(0,1fr); gap: var(--space-20); }
 .panel-divider { display: none; }
 .manual-question-actions { width: 100%; }
 #reading-footer .workspace-footer { display: none; }
}
/* Discount recipients share existing form surfaces and remain usable on phones. */
.discount-recipients { min-inline-size: 0; }
.discount-recipients [data-results] { display: flex; flex-wrap: wrap; gap: 8px; }
.discount-recipients button, .discount-recipients bdi { overflow-wrap: anywhere; white-space: normal; max-inline-size: 100%; }
.discount-recipient-list { max-block-size: 240px; overflow: auto; }
.inbox-message { padding-block: var(--space-16); border-block-end: 1px solid var(--border); overflow-wrap: anywhere; }
.inbox-message summary { cursor: pointer; font-weight: 600; }
.inbox-message-body { white-space: pre-wrap; }
.support-unread-badge[hidden] { display: none; }
#plan-cards .discount-actions { margin-block-start: var(--space-16); }
/* Compact, equal action targets within application toolbars. */
body :is(.button-row,.interviews-actions,.mock-row,.meeting-controls,.marketing-actions) {
  align-items: center;
  gap: var(--space-8);
}
body :is(.button-row,.interviews-actions,.mock-row,.meeting-controls) :is(button,a.primary,a.secondary) {
  box-sizing: border-box;
  min-height: 32px;
  height: 32px;
  min-block-size: 32px;
  block-size: 32px;
  padding-block: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}