/* Shared typography, header, cards, buttons and footer come from site.css and jawi.css. */
.workspace { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:1.25rem; align-items:start; }
.paper { min-width:0; }
.toolbar { display:flex; justify-content:space-between; gap:1rem; margin-bottom:.5rem; color:#35445a; font-weight:800; }
#count { color:#637083; font-size:.82rem; font-weight:650; font-variant-numeric:tabular-nums; }
.editor-wrap { position:relative; height:370px; border:1px solid #aeb9c7; border-radius:10px; background:#fff; overflow:hidden; }
#editor, #highlights { position:absolute; inset:0; width:100%; height:100%; margin:0; border:0; padding:1rem; font:17px/1.75 system-ui,-apple-system,"Segoe UI",sans-serif; letter-spacing:normal; white-space:pre-wrap; overflow-wrap:break-word; tab-size:4; overflow:auto; border-radius:0; }
#highlights { color:transparent; pointer-events:none; scrollbar-width:none; }
#highlights::-webkit-scrollbar { display:none; }
#editor { resize:none; background:transparent; color:#172033; caret-color:#172033; }
#editor::placeholder { color:#788391; }
.tatabahasa-page #editor:focus { outline-offset:-3px; }
mark { color:transparent; background:transparent; text-decoration-line:underline; text-decoration-style:wavy; text-decoration-color:#159447; text-decoration-thickness:2px; text-underline-offset:5px; }
.aside-heading { display:flex; justify-content:space-between; align-items:center; }
.aside-heading h2 { margin:0; font-size:1.3rem; }
.dot { height:.55rem; width:.55rem; border-radius:50%; background:#16803b; }
#status, .note { color:#637083; font-size:.85rem; }
.suggestion { border-top:1px solid #dfe5ec; padding:1rem 0; }
.suggestion p { color:#536174; font-size:.85rem; margin:.5rem 0 .75rem; }
.suggestion strong { overflow-wrap:anywhere; }
.suggestion button { min-height:44px; border:1px solid #9cbbe0; border-radius:8px; padding:.55rem .9rem; background:#f5f9ff; color:#07549f; font:inherit; font-size:.85rem; font-weight:750; cursor:pointer; max-width:100%; overflow-wrap:anywhere; }
.suggestion button:hover { background:#e9f3ff; border-color:#075fc6; }
.about > a { font-size:.86rem; }
@media(max-width:850px) { .workspace { grid-template-columns:1fr; } }
@media(max-width:560px) { .editor-wrap { height:280px; } }