/* Shared palette follows JUREC NotePad; controls retain generous touch targets. */
:root{--jurec-navy:#063455;--jurec-petrol:#086c80;--jurec-line:#c7d8df}
.format-buttons{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.format-buttons button{font-size:14px;min-height:44px;padding:8px 12px}.download-tools{display:flex;gap:8px}.download-tools select{font:inherit;min-height:44px;border:1px solid var(--jurec-line);border-radius:7px;padding:8px;color:var(--jurec-navy);background:white}.editor-shell{position:relative;isolation:isolate;min-width:0}.editor-shell.rich-editor-ready #text,.editor-shell.rich-editor-ready #editor-mirror{font:18px/1.65 Consolas,'Courier New',monospace;letter-spacing:0;tab-size:2;white-space:pre-wrap;overflow-wrap:break-word;word-break:normal;padding:20px;border:1px solid var(--jurec-line);border-radius:10px;text-align:left;box-sizing:border-box}.editor-shell.rich-editor-ready #text{position:relative;z-index:1;color:transparent;-webkit-text-fill-color:transparent;caret-color:#163744;background:transparent;margin:0}.editor-shell.rich-editor-ready #text::selection{background:#087d9140;color:transparent}.editor-shell.rich-editor-ready #editor-mirror{position:absolute;z-index:0;inset:0;margin:0;overflow:hidden;pointer-events:none;background:white;color:#163744}.editor-shell.rich-editor-ready #editor-mirror strong{font-weight:700}#tag-suggestions{position:absolute;z-index:3;left:8px;right:8px;bottom:8px;display:flex;gap:6px;flex-wrap:wrap;padding:8px;background:white;border:1px solid var(--jurec-petrol);border-radius:6px}#tag-suggestions button{min-height:44px}#tag-suggestions button[aria-selected=true]{background:#063455}.content-preview{background:white;min-height:45vh;padding:24px;border:1px solid var(--jurec-line);border-radius:10px;overflow-wrap:anywhere;line-height:1.65;white-space:normal}.content-preview h1{font-size:30px}.content-preview h2{font-size:25px}.content-preview a{color:var(--jurec-petrol)}.content-preview pre{overflow:auto}.content-preview:empty::before{content:'…';color:#526871}.content-tags{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}.tag-chip{font-size:14px;background:#e3eef2;color:#063455;border-radius:6px;padding:6px 10px;min-height:32px}#content-dialog label{display:block;margin:12px 0 6px}#content-dialog [role=alert],#content-status{color:#8f2634}#content-status:empty{display:none}#content-dialog input{width:100%}@media(max-width:600px){.download-tools{flex-wrap:wrap}.format-buttons button{flex:1 1 auto}.content-preview{padding:16px}.editor-shell.rich-editor-ready #text,.editor-shell.rich-editor-ready #editor-mirror{padding:16px;font-size:17px}.text-actions{flex-wrap:wrap}}@media(forced-colors:active){.editor-shell.rich-editor-ready #text{color:CanvasText;-webkit-text-fill-color:CanvasText;background:Canvas}.editor-shell.rich-editor-ready #editor-mirror{display:none}}

.editor-shell:not(.rich-editor-ready) #editor-mirror{display:none}

.reader-presence{display:flex;align-items:center;gap:10px;margin:12px 0;padding:10px 12px;border:1px solid #c7d8df;background:#fff;border-radius:8px;color:#526871;font-size:15px}.presence-dot{width:10px;height:10px;border-radius:50%;background:#75848d;flex:none}.reader-presence.is-connected{color:#165d35;background:#edf8f1}.is-connected .presence-dot{background:#178447}

/* V1.1.1: source/preview precede actions in DOM and keyboard order.
   Compact labels reduce wrapping while retaining 36px touch targets. */
#workspace > .toolbar{margin:8px 0;gap:8px}
.format-buttons{gap:5px;margin:8px 0}
.format-buttons button{flex:0 0 auto;min-height:36px;min-width:36px;padding:5px 9px;font-size:13px;border-radius:5px}
#workspace .toolbar button{min-height:36px;padding:5px 10px;font-size:13px}
.reader-presence{margin:6px 0;padding:5px 9px;font-size:13px}
.content-tags .tag-chip{font-weight:700}
.content-preview strong{font-weight:700}
@media(max-width:600px){
 header{padding:8px 12px;gap:8px}.brand .brand-name{font-size:17px}.brand-icon{width:30px;height:30px}.brand{gap:6px}.brand strong{margin-left:3px}
 .header-tools{gap:6px}.header-tools select{min-height:36px;padding:4px;font-size:13px}.header-tools>span{font-size:11px}
 main{padding:0 12px;margin-top:12px}.heading{display:flex;margin-bottom:8px;gap:8px}.heading h1{font-size:21px}#mode{font-size:12px;margin:0}
 #workspace .toolbar{flex-direction:row;align-items:center;flex-wrap:wrap}
 #workspace .text-actions{gap:5px;flex-wrap:wrap}#workspace .text-actions button{flex:0 0 auto}
 .editor-shell #text{min-height:clamp(160px,32svh,300px)}
 .editor-shell.rich-editor-ready #text,.editor-shell.rich-editor-ready #editor-mirror{padding:12px;font-size:16px;line-height:1.5}
 .format-buttons button{flex:0 0 auto}.hint{font-size:12px;margin:6px 0}
 .content-preview{min-height:32svh;padding:12px}
}

/* V1.1.2: supplied original JPEG, fully visible without crop or recoloring. */
.brand-icon{width:52px;height:52px;object-fit:contain;background:#fff;border-radius:6px}
@media(max-width:600px){.brand-icon{width:40px;height:40px;border-radius:4px}}

/* V1.1.3: JUREC white header, navy text and petrol rule (NotePad reference). */
header{background:#fff;color:#063455;border-bottom:3px solid #087d91}
.header-tools select{background:#fff;color:#063455;border-color:#c7d8df}
.ui-icon{display:block;width:21px;height:21px;flex:none;pointer-events:none}
button[data-icon]{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;min-width:36px;min-height:36px;padding:6px!important;flex:0 0 36px!important}
.hash-symbol{font-size:23px;font-weight:600;line-height:1}
.format-buttons button{min-width:36px}
button[aria-pressed=true]{background:#d9eef2;border-color:#087d91}
.status-slots{position:relative;display:flex;align-items:center;gap:4px;flex:0 0 76px;min-width:76px;height:36px}
.status-indicator{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;min-width:36px;min-height:36px;padding:6px!important;border:1px solid #c7d8df;border-radius:5px;background:#fff;color:#526871}
.status-indicator svg{display:none}
[data-state=ok] .state-ok,[data-state=pending] .state-pending,[data-state=error] .state-error,[data-state=info] .state-info,[data-state=connected] .state-connected,[data-state=disconnected] .state-disconnected,[data-state=unknown] .state-unknown{display:block}
[data-state=ok],[data-state=connected]{color:#178447}
[data-state=pending]{color:#086c80}
[data-state=error]{color:#a32424}
[data-state=pending] .ui-icon{animation:status-turn 1.2s linear infinite}
@keyframes status-turn{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){[data-state=pending] .ui-icon{animation:none}}
.symbol-ui #reader-presence{display:flex;position:static;margin:0;padding:0;border:0;background:transparent;width:36px;height:36px}
.symbol-ui #status,.symbol-ui #reader-presence-label{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.symbol-ui #connection-dot{display:none!important}
.symbol-ui .connection-status{min-width:0;min-height:0}
.status-tip{position:absolute;top:42px;left:0;z-index:5;width:max-content;max-width:min(280px,80vw);background:#063455;color:white;border-radius:5px;padding:8px 10px;font-size:13px;box-shadow:0 2px 6px #06345533}
#workspace .toolbar{min-height:36px;align-items:center}
@media(max-width:600px){#workspace .toolbar{flex-wrap:nowrap}.format-buttons{gap:5px}#workspace .download-tools{gap:5px}.download-tools select{max-width:145px;padding:4px;min-height:36px;font-size:12px}}

[data-state=live]{color:#178447}[data-state=live] .state-live{display:block}
