*{box-sizing:border-box}body{margin:0;background:#f1f6f8;color:#183744;font:16px/1.5 system-ui,-apple-system,sans-serif}header{background:#063455;color:white;display:flex;justify-content:space-between;padding:20px max(20px,calc((100vw - 980px)/2))}.brand{color:inherit;text-decoration:none;font-size:22px}.brand strong{font-weight:500;margin-left:12px}header span{font-size:14px;align-self:center}main{max-width:980px;margin:40px auto;padding:0 20px}.heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px}h1{font-size:32px;margin:0;font-weight:600}h2{font-size:20px}#mode{color:#53697f}section#start{background:white;padding:30px;border-radius:12px;border:1px solid #d9e2ec}button{font:inherit;border:0;border-radius:8px;padding:12px 18px;background:#086c80;color:white;cursor:pointer;min-height:46px}button:disabled{opacity:.6;cursor:wait}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #1594a9;outline-offset:2px}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}#status{color:#48627c}textarea{display:block;width:100%;min-height:45vh;resize:vertical;font:19px/1.65 system-ui;padding:24px;border:1px solid #c7d8df;border-radius:10px;background:white;color:#163744}textarea[readonly]{background:#fff}input{font:16px system-ui;padding:12px;width:100%;border:1px solid #c7d8df;border-radius:7px;background:white}#sharing{margin-top:28px;border-top:1px solid #ccd8e4;padding-top:10px}.linkrow{display:flex;gap:10px;margin-bottom:12px}.linkrow input{min-width:0}details{margin-top:20px}summary{cursor:pointer}details button{margin-top:10px}.hint{color:#53697f;font-size:15px}#error{color:#a32424;white-space:pre-wrap}footer{max-width:980px;margin:30px auto;padding:0 20px;color:#63778c;font-size:14px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}[hidden]{display:none!important}@media(max-width:600px){main{margin-top:24px}.heading{display:block}h1{font-size:28px}#mode{display:block;margin-top:6px}.linkrow{flex-direction:column}textarea{padding:16px;min-height:40vh}.toolbar{font-size:14px}header{padding:16px 20px}.toolbar button{padding:10px 12px}}
/* V1.0.1: native dialog supplies focus trap and Escape support. */
dialog{width:min(560px,calc(100% - 24px));max-height:90dvh;overflow:auto;border:1px solid #c7d8df;border-radius:12px;padding:24px;color:#183744;background:white}dialog::backdrop{background:rgb(10 25 40 / 65%)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.dialog-heading h2{margin:0}.dialog-heading button{flex-shrink:0}#pairing-qr{width:min(100%,320px);margin:18px auto;background:white}#pairing-qr svg{display:block;width:100%;height:auto}.pairing-entry{padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid #ccd8e4}#pairing-status{color:#a32424}@media(max-width:600px){dialog{padding:16px}.dialog-heading{align-items:flex-start}.dialog-heading h2{font-size:19px}}

/* V1.0.2: keep JUREC navy/blue hierarchy; reserve red for confirmation. */
.text-actions,.confirmation-actions{display:flex;gap:10px;flex-wrap:wrap}.text-actions{justify-content:flex-end}.button-secondary{color:#063455;background:#fff;border:1px solid #8fa8be}.button-danger{background:#a32424;color:#fff}.dialog-brand{color:#063455;font-size:14px;font-weight:600;letter-spacing:.04em}#clear-dialog h2{font-size:24px;margin:12px 0}#clear-message{color:#a32424}.confirmation-actions{justify-content:flex-end;margin-top:24px}@media(max-width:600px){.toolbar{align-items:stretch;flex-direction:column}.text-actions{justify-content:stretch}.text-actions button{flex:1}.confirmation-actions button{flex:1}}

/* V1.0.3: accessible language selector in the existing JUREC header. */
.header-tools{display:flex;align-items:center;gap:16px}.header-tools select{font:inherit;color:#fff;background:#063455;border:1px solid #91abc1;border-radius:6px;min-height:44px;padding:6px 10px}select:focus-visible{outline:3px solid #1594a9;outline-offset:2px}#pairing-help{white-space:pre-line}@media(max-width:600px){header{gap:12px;flex-wrap:wrap}.header-tools{gap:12px}.brand{font-size:20px}}

/* V1.0.4: guided start in the existing JUREC visual hierarchy. */
.start-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:32px}.start-grid h2{margin-top:0;color:#063455}.start-local{border-left:1px solid #d9e2ec;padding-left:28px}.start-steps{list-style:none;counter-reset:step;padding:0;margin:24px 0}.start-steps li{counter-increment:step;position:relative;padding-left:42px;margin:18px 0}.start-steps li::before{content:counter(step);position:absolute;left:0;top:0;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#e9f1f8;color:#063455;font-weight:700}#start-status:empty{display:none}@media(max-width:700px){.start-grid{grid-template-columns:1fr;gap:24px}.start-local{border-left:0;border-top:1px solid #d9e2ec;padding:24px 0 0}section#start{padding:22px}.start-grid button{width:100%}}

/* Unreleased code pairing, matching the existing JUREC controls. */
.working-notice{padding:8px 12px;border-left:3px solid #1594a9;background:#fff7e7;color:#67440b;font-size:14px}.join-code-section,.code-pairing-section{border-top:1px solid #d9e2ec;margin-top:24px;padding-top:20px}.code-pairing-section{border-top:0;margin-top:0;padding-bottom:24px;border-bottom:1px solid #d9e2ec;margin-bottom:24px}.code-input-row{display:flex;gap:12px;margin-top:8px}.code-input-row input{max-width:260px;font-size:24px;letter-spacing:.15em}#pair-code-panel{margin-top:20px}#pair-code-output{display:block;font:700 34px/1.4 ui-monospace,monospace;letter-spacing:.1em;color:#063455}#join-code-status,#pair-code-status{color:#48627c}@media(max-width:600px){.code-input-row{flex-direction:column}.code-input-row input{max-width:none}}

/* V1.0.6: email handoff follows the existing responsive JUREC controls. */
.code-email-form{margin:20px 0;padding-top:16px;border-top:1px solid #d9e2ec}.code-email-row{display:flex;gap:12px;margin-top:8px;align-items:stretch}.code-email-row input{min-width:0;flex:1}.code-email-row button{flex-shrink:0}#code-email-status{color:#48627c}@media(max-width:600px){.code-email-row{flex-direction:column}.code-email-row button{width:100%}}

/* V1.0.8: JUREC mark with a Q-shaped speech bubble and a voice waveform. */
.brand{display:flex;align-items:center;gap:12px}.brand-icon{display:block;flex:none;width:44px;height:44px}.brand .brand-name{font-size:22px;white-space:nowrap}.brand strong{margin-left:8px}.connection-status{display:inline-flex;align-items:center;min-height:24px;min-width:24px}.connection-dot{display:inline-block;width:12px;height:12px;border-radius:50%;background:#178447;box-shadow:0 0 0 4px #e4f3e9;flex:none}@media(max-width:600px){.brand .brand-name{font-size:20px}.brand-icon{width:38px;height:38px}}