/* Mobile task hierarchy. Components here own the shared visual treatment. */
:root{--paper:#f8f7f3;--ink:#243b33;--muted:#69766e;--line:#e0e5dd;--green:#315f49;--surface:#fff;--soft:#f0f3eb;--gold:#c3a260}
body{background:var(--paper)}
header .brand{letter-spacing:1px}header .brand span{letter-spacing:2px;color:#68786b;font-size:12px}
.side{border-color:var(--line);border-radius:18px;box-shadow:0 3px 14px #243b3304}
button,a,input,summary{-webkit-tap-highlight-color:transparent}
button:active:not(:disabled){transform:translateY(1px)}
.primary{border-radius:12px;min-height:52px;font-size:16px;letter-spacing:.3px}
.hint,.muted{line-height:1.7}
.room-bar{margin-bottom:12px;color:var(--muted);font-size:11px}
.room-status{background:var(--soft);padding:16px;border:0;margin-bottom:16px}
.room-status .status-top h2{font-size:17px}.room-status .participant-progress{margin-top:12px}
.has-active-task .room-status{padding:10px 14px;margin-bottom:12px}
.has-active-task .room-status #status-detail,.has-active-task .participant-progress,.has-active-task .room-bar{display:none}
.has-active-task .room-status .status-top h2{font-size:13px}
.has-active-task .room-status .status-indicator{width:7px;height:7px}
.is-inviting .room-status .participant-progress,.is-inviting .room-bar{display:none}
#topic-setup>.muted{font-size:14px;margin:8px 0 18px}
#topic-setup .eyebrow{font-size:11px;letter-spacing:2px}
#topic-setup.is-reviewing>.voice-guide{display:none}
#topic-original{border:0;padding:0;margin:0}
#topic-original>summary{font-size:15px;font-weight:600;min-height:44px;display:flex;align-items:center;list-style:none}
#topic-original>summary::-webkit-details-marker{display:none}
.topic-text-heading{margin:0 0 10px}.topic-text-heading .text-label{display:none}
#topic-clear{margin-left:auto;border:0;background:transparent;font-size:12px;min-height:36px;padding:4px 0}
#topic-text{font-size:16px;line-height:1.8;min-height:112px;padding:14px;background:#fafbf8}
.stance-options{margin:18px 0}.stance-options label{min-height:64px;border-radius:12px;padding:12px 10px}
.stance-options small{margin-top:3px}.stance-options legend{font-size:13px;color:var(--muted)}
#topic-form>.hint{font-size:11px;margin:0 0 16px}
.record{min-height:64px!important;border-radius:14px!important;background:var(--green);border:0;color:#fff;font-size:17px;font-weight:650}
.record.active{background:#9d4a3f;color:#fff}.record .record-dot{width:12px;height:12px}
.audio-row{justify-content:center;margin:10px 0 16px;font-size:12px}
.voice-guide{border:0;background:transparent!important;padding:0!important;color:var(--muted);font-size:13px;line-height:1.8;margin:0 0 16px}
.side-title{margin-bottom:18px}.side-title .avatar{width:34px;height:34px;font-size:13px}.side-title h2{font-size:21px}.side-title p{font-size:12px;line-height:1.7}
#writer.is-reviewing>.side-title{margin-bottom:12px}#writer.is-reviewing>.side-title h2{font-size:16px}
#writer.is-reviewing>.side-title p{display:none}
.outline{margin:12px 0}.outline>h3{font-size:19px;color:var(--ink);margin:0 0 8px}.outline>.hint{font-size:12px}
.fact-card{border:0!important;border-radius:12px!important;background:#f3f5ee!important;padding:14px!important}
.submit-row{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin:18px 0 8px}
.submit-row>p{font-size:12px;color:var(--muted)}.submit-row small{font-size:11px}.submit-row .primary{width:100%}
.transcript,.review-recording-tools.is-reviewing{border-color:var(--line);margin-top:10px;padding-top:0}
.transcript>summary,.review-recording-tools>summary{min-height:44px;padding:12px 0;color:var(--muted);font-size:12px}
.responding #response-workbench{position:static;box-shadow:none}.responding .opponent-panel{border:0;padding:14px;background:var(--soft)}
.responding .recording-panel{display:block}.responding .recording-panel .record{min-height:48px!important;font-size:14px;background:#eaf0e5;color:var(--green)}
#skip-response{min-height:44px;border:0;background:transparent;font-size:13px;margin-top:8px}
#skip-note{font-size:11px;text-align:center}
.early-options{border:0;margin:16px 0;color:var(--muted)}.early-options>summary{font-size:13px;min-height:44px;padding:12px 0}
#early-decision{margin:0;padding:14px;border-radius:12px;background:var(--soft)}#early-decision h2{font-size:14px}
/* Results read as a conclusion followed by optional detail. */
#result{padding:0;border:0;background:transparent;margin:0 0 16px}
#result>.eyebrow{font-size:11px;letter-spacing:2px;color:var(--muted);margin:22px 2px 10px}
#verdict{font-size:19px;line-height:1.7;margin:0 2px 20px;font-weight:650}
.personal-advice{position:relative;margin:0 0 20px;background:white;border:1px solid var(--line);border-radius:16px;padding:18px}
.my-advice,.my-advice.viewing-other{border:0;padding:0;background:transparent}
.personal-advice h3{font-size:14px;margin:0 100px 16px 0;line-height:24px}
.personal-advice p{font-size:15px;line-height:1.85}
.perspective-toggle{width:auto;min-height:44px;margin:0;padding:8px 0;gap:5px;border:0;border-radius:0;background:transparent;font-size:12px}
.perspective-toggle strong{font-size:12px;font-weight:500}.perspective-toggle small{display:none}.perspective-icon{width:20px;height:20px;font-size:19px;background:transparent}
.personal-advice>.perspective-toggle{position:absolute;right:18px;top:8px}
.result-disclosure,#result>details:not(.next-disclosure){background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;padding:0;margin:0}
.result-disclosure>summary,#result>details>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;padding:14px 2px;font-size:14px;font-weight:600;list-style:none;color:var(--ink)}
.result-disclosure>summary::-webkit-details-marker,#result>details>summary::-webkit-details-marker{display:none}
.result-disclosure>summary>span{font-size:11px;font-weight:400;color:var(--muted)}
.result-disclosure>summary:after{content:'＋';font-size:18px;color:var(--muted)}.result-disclosure[open]>summary:after{content:'−'}
#reasoning{font-size:15px;line-height:1.85;padding:0 2px 22px;white-space:pre-wrap}
.argument-analysis h4{font-size:14px;margin:18px 0 10px}.argument-card{padding:14px;background:white;border-color:var(--line);margin:10px 0}.argument-card>summary h5{font-size:14px;font-weight:550}.argument-card p{font-size:14px;line-height:1.85}
#next-disclosure{margin:18px 0;border:0;padding:0}
#next-disclosure>summary{min-height:54px;padding:14px 18px;border-radius:12px;background:var(--green);color:#fff;font-size:16px;justify-content:center;gap:12px}
#next-disclosure[open]>summary{background:var(--soft);color:var(--green)}
#next-disclosure[open]>summary span{transform:rotate(45deg)}
#next-steps{margin:18px 0 0;padding:0;border:0}#next-steps h3{font-size:15px;margin-bottom:10px}
#next{font-size:15px;line-height:1.85}#say{font-size:15px;line-height:1.85;margin:18px 0;padding-left:14px}
.bridges{padding:18px;margin:20px 0;background:#f6f1e4;border:0;border-radius:14px}.bridges>h3{font-size:16px;margin-bottom:18px}.bridges p{font-size:15px;line-height:1.85}.bridges #bridge-toggle{margin-top:8px;background:transparent}
#appeal{margin:12px 0 22px}.appeal-launch{background:transparent;color:var(--green);border:1px solid #b8c8b6;font-size:15px;min-height:48px}.appeal-launch:hover{background:var(--soft)}
#decision-history,#feedback{padding:0 2px;border:0;background:transparent;box-shadow:none;margin:12px 0}
#decision-history>details{padding:0;border:0}#decision-history>details>summary{min-height:44px;padding:10px 0;font-size:13px;color:var(--muted)}
#feedback-disclosure>summary h2{font-size:13px;font-weight:500;color:var(--muted)}
.settlement{background:#243c32;border-radius:18px!important}.settlement h2{font-size:27px!important}.settlement-kicker{letter-spacing:2px}.settlement .scale-scene{max-width:210px!important}.settlement-stamp{letter-spacing:2px}.replay{min-height:36px;margin-top:8px}
@media(max-width:640px){main{padding:20px 16px 32px}.side{padding:20px 16px}.in-room header{margin-bottom:20px}.personal-advice{padding:16px}.personal-advice>.perspective-toggle{right:16px}.settlement{padding:22px 16px 16px!important}.room-status .status-top h2{line-height:1.5}}

/* Shared icons, playback and state transitions. */
.custom-audio{display:none!important}
.audio-player{display:flex;align-items:center;gap:12px;padding:10px 12px;margin:8px 0 12px;background:var(--soft);border:1px solid var(--line);border-radius:12px;flex-wrap:wrap}
.audio-play{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--surface);color:var(--green)}
.audio-play span{width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid currentColor;margin-left:3px}
.audio-play.is-playing span{width:10px;height:13px;border:0;border-left:3px solid currentColor;border-right:3px solid currentColor;margin-left:0}
.audio-track{flex:1;min-width:0}.audio-caption{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:var(--muted)}.audio-caption output{font-variant-numeric:tabular-nums;white-space:nowrap}
.audio-track input{display:block;accent-color:var(--green);width:100%;min-height:24px;margin:4px 0 0;padding:0;cursor:pointer}.audio-error{width:100%;font-size:12px;color:#9d4a3f}
.record .record-dot{width:20px;height:20px;border-radius:0;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='8' y='2' width='8' height='13' rx='4'/%3E%3Cpath d='M5 11v1a7 7 0 0 0 14 0v-1M12 19v3M9 22h6'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
.record.active .record-dot{width:13px;height:13px;border-radius:3px;mask:none;animation:record-breathe 1.6s ease-in-out infinite}
.record.active{box-shadow:0 0 0 4px #9d4a3f12}
@keyframes record-breathe{50%{opacity:.6}}
.topic-organizing,.organizing-notice,.audio-row:has(.processing-audio){display:flex;align-items:center;gap:12px;min-height:64px;margin:12px 0 16px;padding:14px 16px;border:1px solid #c9d7c6;border-radius:12px;background:#edf3e8;color:var(--green);font-size:15px;font-weight:600;scroll-margin-top:16px;text-align:left;justify-content:flex-start}
.topic-organizing strong{display:block;font-size:16px;line-height:1.5}.topic-organizing div>span{display:block;margin-top:3px;font-size:12px;line-height:1.6;color:var(--muted);font-weight:400}
.topic-organizing-spinner,.organizing-notice:before,.processing-audio:before{content:'';display:inline-block;flex:none;width:18px;height:18px;border:2px solid #c4d4bd;border-top-color:var(--green);border-radius:50%;animation:status-spin .9s linear infinite;vertical-align:-3px}
.processing-audio{font-size:13px;font-weight:500;line-height:1.7}.processing-audio:before{margin-right:10px}
.transcript>summary,.review-recording-tools>summary,.other-invitation>summary,.early-options>summary,#decision-history>details>summary{display:flex;align-items:center;gap:10px;list-style:none}
.transcript>summary::-webkit-details-marker,.review-recording-tools>summary::-webkit-details-marker,.other-invitation>summary::-webkit-details-marker,.early-options>summary::-webkit-details-marker,#decision-history>details>summary::-webkit-details-marker{display:none}
.transcript>summary:after,.review-recording-tools>summary:after,.other-invitation>summary:after,.early-options>summary:after,#decision-history>details>summary:after,.result-disclosure>summary:after{content:'';display:block;flex:none;width:7px;height:7px;margin-left:auto;margin-right:4px;border:0;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .18s ease}
.transcript[open]>summary:after,.review-recording-tools[open]>summary:after,.other-invitation[open]>summary:after,.early-options[open]>summary:after,#decision-history>details[open]>summary:after,.result-disclosure[open]>summary:after{content:'';transform:rotate(225deg)}
.perspective-icon{font-size:0;background:var(--green);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m15 3 4 4-4 4M5 7h14M9 13l-4 4 4 4m10-4H5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.outline,.topic-organizing,.organizing-notice,#appeal-panel,.result-disclosure[open]>p,#next-disclosure[open]>.advice{animation:content-arrive .2s ease-out}
@keyframes content-arrive{from{opacity:0}to{opacity:1}}
/* Weight, recoil, then one final seal; no extra layout movement. */
.settlement{border:1px solid #49604d;box-shadow:inset 0 1px 0 #ffffff0b,0 6px 20px #243c3208;background:radial-gradient(ellipse at 50% 58%,#3b514030,transparent 65%),#243c32}
.scale-stand,.beam-line{stroke-width:3.5}.scale-pan{stroke-width:1.5}.scale-pivot{stroke-width:2}
.settlement .scale-glow{background:radial-gradient(ellipse,#d6ba6530,transparent 70%)}
.decisive .settlement-stamp{background:#243c32;box-shadow:inset 0 0 0 3px #243c32,inset 0 0 0 4px #d0ad6238;padding:8px 18px;border-radius:4px}
@keyframes weigh{0%{transform:rotate(0deg)}22%{transform:rotate(calc(var(--tilt)*-.65))}48%{transform:rotate(calc(var(--tilt)*1.2))}66%{transform:rotate(calc(var(--tilt)*.94))}82%{transform:rotate(calc(var(--tilt)*1.02))}100%{transform:rotate(var(--tilt))}}
@keyframes pan-level{0%{transform:rotate(0deg)}22%{transform:rotate(calc(var(--counter)*-.65))}48%{transform:rotate(calc(var(--counter)*1.2))}66%{transform:rotate(calc(var(--counter)*.94))}82%{transform:rotate(calc(var(--counter)*1.02))}100%{transform:rotate(var(--counter))}}
.reveal.decisive .settlement-stamp{animation:final-seal .38s 1.4s both}.reveal.decisive h2{animation:content-arrive .25s 1s both}
@keyframes final-seal{0%{opacity:0;transform:scale(1.45) rotate(-8deg)}65%{opacity:1;transform:scale(.98) rotate(-3deg)}100%{opacity:1;transform:scale(1) rotate(-3deg)}}
@media(prefers-reduced-motion:reduce){.record.active .record-dot,.topic-organizing-spinner,.organizing-notice:before,.processing-audio:before,.outline,.topic-organizing,.organizing-notice,#appeal-panel,.result-disclosure[open]>p,#next-disclosure[open]>.advice,.reveal.decisive .settlement-stamp,.reveal.decisive h2{animation:none}.transcript>summary:after,.result-disclosure>summary:after{transition:none}}

/* Topic confirmation is a decision screen, not the recording form. */
.is-topic-review .room-bar{display:none}
#topic-setup.is-reviewing{padding:24px 20px}
#topic-setup.is-reviewing>.eyebrow,#topic-setup.is-reviewing>h2,#topic-setup.is-reviewing>.muted{display:none}
#topic-original>summary{display:none}
.topic-confirm-heading{font-size:13px;color:var(--muted);margin:0 0 16px}
#topic-setup #topic-preview{font-size:28px;line-height:1.5;letter-spacing:.2px;margin:0;font-weight:700;overflow-wrap:anywhere;color:var(--ink)}
.topic-edit{display:block;min-height:44px;padding:8px 0;margin:8px 0 16px;border:0;background:transparent;color:var(--muted);font-size:12px}
#topic-text,.topic-editor-label{display:none}
#topic-original.is-editing #topic-text{display:block;margin:0 0 16px;min-height:112px}
#topic-original.is-editing #topic-preview{display:none}
#topic-original.is-editing .topic-edit{color:var(--green)}
#topic-form .stance-options{margin:8px 0 16px}
#topic-form .stance-options legend{font-size:14px;color:var(--ink);margin-bottom:10px}
#topic-form .stance-options label{min-height:58px;padding:14px 12px}
#topic-form .stance-options strong{font-size:15px}
#topic-form .stance-options small{display:none}
#topic-form>.hint{font-size:12px;margin:0 0 18px}
#topic-form #topic-submit{min-height:56px}
#topic-more{margin:14px 0 0;border-top:1px solid var(--line)}
#topic-more>summary{justify-content:center;min-height:44px;padding:10px 0}
#topic-review-hint{display:none}
#topic-clear{margin:8px 0;min-height:44px;color:#985346}
@media(max-width:360px){#topic-setup.is-reviewing{padding:20px 16px}#topic-setup #topic-preview{font-size:25px}}

/* Journey acceptance: each server stage has one task and one primary action. */
.invite-copy{display:block;width:100%;margin-top:16px}
#invite>#invite-link:not([hidden]){display:block;width:100%;padding:12px;margin-top:12px;border:1px solid var(--line);border-radius:10px;font-size:14px}
.is-inviting #topic-card{padding:0 2px;margin:0 0 16px;border:0;background:transparent}
.is-inviting #topic-card .eyebrow{display:none}.is-inviting #topic-heading{font-size:15px;margin:0 0 4px}.is-inviting #topic-position{font-size:12px}
body[data-task="confirm-topic"] .room-bar,body[data-task="confirm-topic"] #room-status{display:none}
body[data-task="confirm-topic"] #topic-card{padding:22px 18px;background:white;border:1px solid var(--line);border-radius:18px}
body[data-task="confirm-topic"] #topic-heading{font-size:26px;line-height:1.5;margin:12px 0 16px}
body[data-task="confirm-topic"] #topic-position{font-size:16px;color:var(--green);font-weight:600}
#topic-confirmation>p{font-size:12px;line-height:1.8;margin:16px 0;color:var(--muted)}
.has-active-task #topic-card{border:0;border-radius:0;background:transparent;padding:0 2px;margin-bottom:16px}
.has-active-task #topic-card>.eyebrow{display:none}.has-active-task #topic-heading{font-size:15px;line-height:1.6;margin:0 0 4px}.has-active-task #topic-position{font-size:12px}
#writer.is-reviewing>.side-title,#writer.is-organizing>.side-title{display:none}
body[data-task="supplement"] #writer>.side-title p,body[data-task="respond"] #writer>.side-title p{display:none}
body[data-task="supplement"] #writer>.side-title h2,body[data-task="respond"] #writer>.side-title h2{font-size:20px}
body[data-task="supplement"] #question-choices>.hint{margin:0 0 14px}
#question{margin:0 0 16px;padding:0;border:0;background:transparent;font-size:17px;line-height:1.7}
#fact-responses{max-height:38svh;scrollbar-gutter:stable;overscroll-behavior:contain;padding-right:4px}
#fact-responses .fact-card{margin-top:0;margin-bottom:12px}
#fact-responses .fact-card:last-child{margin-bottom:0}
#review-preview>h2{font-size:14px;color:var(--muted)}
#review-preview>.hint{font-size:11px;line-height:1.6;margin-bottom:12px}
body[data-task="respond"] .recording-panel{position:static;padding-bottom:0}
body[data-task="respond"] .recording-panel:has(.record.active){position:sticky;bottom:0;padding:10px 0 max(10px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--surface);z-index:5}
body[data-task="supplement"] .review-recording-tools>summary,body[data-task="respond"] .review-recording-tools>summary{color:var(--green);font-size:13px}
body[data-task="wait"] .room-bar{display:none}
body[data-task="wait"] #room-status{padding:22px 18px!important;margin-bottom:18px}
body[data-task="wait"] #status-title{font-size:21px;line-height:1.5}
body[data-task="wait"] .participant-progress{margin-top:18px!important}
body[data-task="analysis"] #room-status{border:0;background:transparent;padding:0 2px!important;margin:0 0 12px}
body[data-task="analysis"] #room-status .status-top,body[data-task="analysis"] #status-detail,body[data-task="analysis"] .room-bar{display:none}
body[data-task="analysis"] #analysis-elapsed{margin:0;text-align:center;font-size:12px}
body[data-task="analysis-error"] #room-status{display:none}
body[data-task="analysis-error"] #waiting{padding:22px 18px}
body[data-task="analysis-error"] #retry-ai{width:100%;margin-top:20px}
#result #next-disclosure{margin:18px 0 24px}
#result #next-disclosure>summary{font-size:15px}
.settlement .duel-labels{margin-top:12px}.settlement .scale-scene{max-width:180px!important;margin-top:12px}.settlement h2{margin-top:8px}.settlement .replay{margin-top:6px;min-height:32px}
#appeal-panel>h2{font-size:21px;line-height:1.5}#appeal-panel>.hint{margin:10px 0 20px}
#appeal-panel:has(.outline:not([hidden]))>h2,#appeal-panel:has(.outline:not([hidden]))>.hint{display:none}
#decision-history>details>summary,#feedback-disclosure>summary{border-top:1px solid var(--line);min-height:48px}
#feedback-disclosure .feedback-body{padding:12px 0 18px}
@media(max-width:360px){body[data-task="confirm-topic"] #topic-heading{font-size:23px}.fact-choices{gap:5px}.fact-choices button{font-size:12px}#topic-submit{font-size:14px}}

/* Final page-by-page corrections found in phone review. */
body[data-task="speak"] #room-status,body[data-task="supplement"] #room-status{display:none}
body[data-task="wait"] #topic-card,body[data-task="analysis"] #topic-card,body[data-task="analysis-error"] #topic-card{padding:0 2px;margin:0 0 16px;border:0;background:transparent}
body[data-task="wait"] #topic-card>.eyebrow,body[data-task="analysis"] #topic-card>.eyebrow,body[data-task="analysis-error"] #topic-card>.eyebrow{display:none}
body[data-task="wait"] #topic-heading,body[data-task="analysis"] #topic-heading,body[data-task="analysis-error"] #topic-heading{font-size:14px;line-height:1.6;margin:0 0 4px}
body[data-task="wait"] #topic-position,body[data-task="analysis"] #topic-position,body[data-task="analysis-error"] #topic-position{font-size:11px}
.is-inviting #room-status{padding:10px 14px!important}.is-inviting #status-detail{display:none}.is-inviting #status-title{font-size:14px}
.is-inviting #invite-qr{width:176px;height:176px;margin:12px auto}
.is-inviting #room-code{font-size:30px;letter-spacing:8px;padding-left:8px}
.is-inviting .room-code-label{margin-top:8px;font-size:12px}.is-inviting .room-code-instruction{display:none}.is-inviting #room-code-help{margin-top:4px;font-size:11px}.is-inviting .invitation-main{padding-bottom:0}
#result #next-disclosure>summary{padding:14px 18px;color:white;justify-content:center;gap:10px}
#result #next-disclosure[open]>summary{color:var(--green)}
body[data-task="speak"] #writer>.side-title p{display:none}