:root { --ink: #231f20; --rosette: #d59fce; --panel: #f6f6f4; --line: #d8d6d0;
        --hover: #1d6fd0; --tint: #b03a2e; --selected: #0b7a6a; --warn: #9a3412;
        --words-font: serif; }
* { box-sizing: border-box; }
body { margin: 0; font: 13px/1.5 ui-sans-serif, system-ui, sans-serif; color: var(--ink); }

.bar { display: flex; gap: 14px; align-items: center; padding: 8px 12px;
       border-bottom: 1px solid var(--line); background: var(--panel); flex-wrap: wrap; }
.bar input[type="number"] { width: 5em; }
.bar .modes { border: 0; padding: 0; margin: 0; display: flex; gap: 10px; }
.bar .off { color: #8a8a8a; cursor: help; }
#status { color: var(--warn); }
.panel-toggle { display: none; }

main { display: flex; height: calc(100vh - 44px); }
#stage { flex: 1; overflow: auto; background: #fff; padding: 16px; }
#canvas-wrap { display: inline-block; }
#page-render svg { width: 640px; height: auto; display: block; }

#panel { width: 380px; overflow: auto; border-left: 1px solid var(--line);
         background: var(--panel); padding: 0 12px 24px; }
#panel h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
            color: #6b6b6b; margin: 18px 0 6px; }
#panel ol, #panel ul { list-style: none; margin: 0; padding: 0; }
#panel li { padding: 4px 6px; border-bottom: 1px solid var(--line); cursor: default; }
#panel li:hover { background: #ececea; }
#ayas li { cursor: pointer; }
#ayas li.is-tinted { background: #f6e0dd; }
#defects .detail { color: #6b6b6b; }
#build .warn { color: var(--warn); }

.word { display: flex; justify-content: space-between; gap: 10px; }
.word .arabic { font-family: var(--words-font); font-size: 20px; direction: rtl; }
.word .meta { color: #6b6b6b; font-size: 11px; white-space: nowrap; }

/* The dark ink of a QVF render follows the Text colour. data-kind is on QVF paths only, so a
   source SVG keeps its own colours. These come before the state rules below, which win. */
#page-render path[data-kind="word"], #page-render path[data-kind="surah_title"],
#page-render path[data-kind="aya_number"] { fill: var(--ink); }
#page-render path.is-tinted { fill: var(--tint); }
#page-render path.is-hovered { fill: var(--hover); }
#page-render path[id^="w"] { cursor: pointer; }

/* Reflow: the page is a stream of words wrapping at the stage width, so the stage never
   scrolls sideways; a word wider than the line is clipped rather than scrolled to. */
#stage.reflow { overflow-x: hidden; }
#page-render path.is-dropped, #page-render path.is-unplaced { display: none; }
#page-render text.page-number { font: 14px ui-sans-serif, system-ui, sans-serif; fill: #6b6b6b; }

#diff-verdict { margin: 0 0 10px; font-size: 12px; }
#diff-verdict.pass { color: #14663a; }
#diff-verdict.fail { color: var(--warn); font-weight: 600; }
#stage:not([data-mode="diff"]) #diff-verdict { display: none; }
#page-render canvas { height: auto; }

#decode p { margin: 4px 0; }
#decode .streams { color: #6b6b6b; font-size: 11px; }
#decode .selected { margin-top: 8px; padding: 6px; background: #fff;
                    border: 1px solid var(--line); }
#decode .selected.hint { color: #8a8a8a; font-style: italic; }
#page-render path.is-selected { fill: var(--selected); }
#page-render svg { cursor: crosshair; }

.switcher { position: relative; }
#mushaf-button { font: inherit; font-weight: 600; padding: 3px 8px; max-width: 360px;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
                 border: 1px solid var(--line); border-radius: 4px; background: #fff;
                 cursor: pointer; }
#mushaf-menu { position: absolute; z-index: 10; top: calc(100% + 4px); left: 0;
               min-width: 320px; max-width: 480px; max-height: 70vh; overflow: auto;
               margin: 0; padding: 4px 0; list-style: none; background: #fff;
               border: 1px solid var(--line); border-radius: 4px;
               box-shadow: 0 6px 20px rgba(0, 0, 0, .12); }
#mushaf-menu li { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px;
                  cursor: pointer; }
#mushaf-menu li:hover, #mushaf-menu li:focus { background: #ececea; outline: none; }
#mushaf-menu li[aria-selected="true"] .name::before { content: "✓ "; }
#mushaf-menu .name { font-weight: 600; }
#mushaf-menu .description { color: #6b6b6b; }
#mushaf-menu .error { color: var(--warn); }
#mushaf-menu .badges { display: flex; flex-wrap: wrap; gap: 4px; }
#mushaf-menu .badge { font-size: 11px; padding: 0 6px; color: #6b6b6b;
                      border: 1px solid var(--line); border-radius: 8px; }
.note { margin: 0 0 6px; color: #6b6b6b; font-size: 11px; }

/* A frame or rosette drawn over by the reader's artwork: invisible, but still there to click.
   Selected, it shows again, so the inspector's highlight is never hidden. */
#page-render path.is-replaced { fill-opacity: 0; }
#page-render path.is-replaced.is-selected { fill-opacity: 1; }
#style-section { margin-top: 12px; }
#style-section summary { font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
                         color: #6b6b6b; cursor: pointer; }
.style-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.style-row .thumb { width: 48px; height: 32px; object-fit: contain; background: #fff;
                    border: 1px solid var(--line); }
.style-colors { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin: 6px 0; }
.style-colors label { display: flex; align-items: center; justify-content: space-between; }
.style-actions { display: flex; gap: 8px; margin: 6px 0; }

@media (max-width: 768px) {
body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
main { flex: 1; min-height: 0; height: auto; position: relative; }
.panel-toggle { display: inline; }
body:not(:has(#show-panel:checked)) #panel { display: none; }
body:has(#show-panel:checked) #panel { position: absolute; inset: 0; width: auto; border-left: 0; }
#stage { padding: 8px; }
#prev, #next { display: none; }
#canvas-wrap { display: block; }
#page-render svg { width: 100%; }
.bar input, .bar select, .bar button, #panel input { font-size: 16px; }
}