/* Header and item tabs stay outside the scrolling comparison body. */
.detail{overflow:hidden;min-height:0}
.detail-top,.detail-foot{flex:0 0 auto}
.detail-top{min-width:0}
.detail-body{flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable}
.detail-reading{width:100%;max-width:900px;margin-inline:auto;min-width:0}
.node-title{flex-wrap:wrap}
.node-title h2,.meta{overflow-wrap:anywhere}
.field-tabs{overflow-x:auto;overflow-y:hidden;max-width:100%;scrollbar-width:thin;scrollbar-color:#80729f #20202b}
.field-tabs{gap:22px}
.field-tabs button{flex:0 0 auto;white-space:nowrap}
.field-name{font-weight:600;overflow-wrap:anywhere;min-width:0}
.field-status{font-size:11px;color:var(--muted);flex-shrink:0;margin-left:12px}
.field-status.is-target{color:#c4b8ff}
.source-content,#translation{width:100%;margin:0;padding:18px 20px;border:1px solid var(--line);border-radius:8px;background:#17171f;color:var(--ink);font:15px/1.95 "Segoe UI","Yu Gothic UI",Meiryo,sans-serif;white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;tab-size:4;max-width:100%;min-height:116px}
.source-content,#translation{height:clamp(230px,30vh,360px);min-height:230px;overflow-y:auto}
#translation{margin-top:8px;border-color:#5c4b93;background:#1d1b2b;resize:none}
.preview-notice{font-size:12px;line-height:1.8;color:#b9b1d2;background:#211e32;padding:12px 14px;border-radius:7px;margin:0 0 14px}
.preview-label{display:block;margin-top:12px;font-size:12px;color:var(--muted)}
.section-label{gap:10px}.section-label small{flex-shrink:0}
.detail-body .note{margin:0 0 20px}
#loadStatus:empty,#loadError[hidden]{display:none}
@media(min-width:601px){body{height:100dvh;display:flex;flex-direction:column;overflow:hidden}header,.page-foot,#loadStatus,#loadError{flex-shrink:0}.workspace{flex:1 1 0;height:auto;min-height:0;width:calc(100% - 64px);grid-template-rows:minmax(0,1fr)}.page-foot{padding-bottom:12px}.workspace{margin-block:16px}#loadStatus,#loadError{margin-block:10px!important}}
@media(min-width:1500px){.workspace{width:calc(100% - 64px)}}
@media(min-width:601px) and (max-width:850px){.workspace{width:calc(100% - 32px)}}
@media(max-width:600px){.detail{height:75vh;min-height:440px}.source-content,#translation{padding:14px;font-size:14px}.detail-top{padding-top:16px}.meta{margin-bottom:12px}.field-tabs{gap:18px}.section-label{flex-wrap:wrap}}
.scroll-sync{display:flex;align-items:center;gap:6px;margin-bottom:20px;font-size:12px;color:var(--muted);cursor:pointer}.scroll-sync input{flex:none}
.tree .node{padding-block:7px;margin-block:2px}.tree .node button{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.node-status{font-size:10px;color:var(--muted)}

.tree .node{display:flex;align-items:center;gap:8px}.tree .node button{flex:1;min-width:0}.group summary{align-items:center}.selection{gap:10px;flex-wrap:wrap}

/* Fixed controls occupy normal header space; only the comparison body scrolls. */
.detail-top .meta{margin-bottom:8px}
.detail-top .scroll-sync{margin:0;padding:4px 0;font-size:12px;min-height:28px}

.detail-top{background:#1a1a24}


/* Two independent horizontal splits. Minimums take priority on narrow screens. */
body{height:100dvh;display:flex;flex-direction:column;overflow:hidden}
header,.page-foot,#loadStatus,#loadError{flex-shrink:0}
header{padding:12px 2.5vw 10px}.toolbar{margin-top:12px}.page-foot{padding:0 2.5vw 8px}
#loadStatus,#loadError{margin:5px 2.5vw!important;max-height:48px;overflow:auto}
.workspace{display:grid;width:95%;max-width:none;margin:8px auto;flex:1 1 0;height:auto;min-height:0;overflow:auto;grid-template-columns:var(--outer-left,minmax(220px,.25fr)) 10px var(--outer-right,minmax(480px,.75fr));grid-template-rows:minmax(0,1fr)}
.workspace>aside{min-width:0;min-height:0;overflow:hidden;border-right:0}.tree{min-height:0;flex:1 1 0;max-height:none}.aside-foot,.panel-head,.selection,.search{flex-shrink:0}
.workspace>.detail{height:auto;min-height:0;min-width:0;overflow:hidden}.detail-top{padding:12px 16px 0}.detail-body{padding:12px 16px;overflow:auto;scrollbar-gutter:auto}.detail-foot{padding:8px 16px}
.detail-reading{max-width:none;min-height:100%;display:flex;flex-direction:column;gap:8px}.detail-body .note{margin:0}
.comparison{display:grid;flex:1 0 280px;min-height:280px;min-width:450px;grid-template-columns:minmax(220px,1fr) 10px minmax(220px,1fr);grid-template-rows:auto minmax(140px,1fr) auto;gap:0}
.comparison-source,.comparison-preview{min-width:0;min-height:0;display:grid;grid-template-rows:subgrid;grid-row:1 / 3}
.comparison-source{grid-column:1}.comparison-preview{grid-column:3}
.pane-heading{grid-row:1;min-width:0;padding:0 0 10px}.pane-heading .section-label{flex-wrap:wrap;margin-bottom:6px}
.comparison .source-content,.comparison #translation{grid-row:2;height:100%;min-height:0;overflow-y:auto;margin:0;resize:none;padding:14px;font-size:14px}
.comparison #preview-panel{grid-row:2;min-height:0;min-width:0;position:relative}
.comparison .preview-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0}
.comparison>.preview-notice{grid-column:1 / -1;grid-row:3;margin:10px 0 0;padding:7px 10px;font-size:11px}
.comparison>.comparison-divider{grid-column:2;grid-row:1 / 3;background:linear-gradient(to right,transparent 4px,#454256 4px,#454256 6px,transparent 6px)}
.splitter{position:relative;cursor:col-resize;touch-action:none;user-select:none;background:#20202c;min-width:10px;outline-offset:-3px}
.splitter:after{content:"";position:absolute;inset:0 4px;background:#454256;border-radius:2px}
.splitter:hover:after,.splitter.dragging:after,.splitter:focus-visible:after{background:#aa91ff}.splitter.dragging{background:#3a305a}
.resizing-panes,.resizing-panes *{cursor:col-resize!important;user-select:none!important}
@media(max-width:850px){.panel-head,.selection,.aside-foot{padding:10px}.search{margin:0 10px 10px}.detail-top,.detail-body{padding-left:12px;padding-right:12px}}
@media(max-width:600px){header{padding-top:8px}.workspace{width:95%;display:grid}.detail-top{padding-top:10px}.node-title h2{font-size:18px}.workspace>aside{border:0}.page-foot{font-size:10px}}


.node-meta-row{display:flex;align-items:center;gap:8px 20px;flex-wrap:wrap;padding:5px 0}
.detail-top .node-meta-row .meta{margin:0;min-width:0}
.detail-top .node-meta-row .scroll-sync{margin:0;padding:0;min-height:24px}
.preview-heading-row{display:flex;align-items:center;gap:12px;min-width:0;margin-bottom:4px}
.preview-heading-row .section-label{margin:0;flex:none;white-space:nowrap}



.working-language{display:flex;align-items:center;gap:6px;font-size:13px}.working-language select{max-width:260px;padding:8px 10px;border:1px solid var(--line);border-radius:7px;background:#20202b;color:var(--ink);font:inherit}.working-language select:focus-visible{outline:3px solid #a493ff;outline-offset:3px}.preview-language{font-size:12px;color:#c4b8ff;overflow-wrap:anywhere}


/* Match backgrounds sit behind the original readonly textarea. */
.comparison .source-highlight-wrap{grid-row:2;position:relative;min-height:0;min-width:0;background:#17171f;border-radius:8px;isolation:isolate}
.comparison .source-highlight-wrap .source-content{position:relative;background:transparent;z-index:1}
.comparison .source-highlights{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:14px;border:1px solid transparent;border-radius:8px;font:14px/1.95 "Segoe UI","Yu Gothic UI",Meiryo,sans-serif;white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;tab-size:4;overflow:auto;overflow-y:scroll;scrollbar-gutter:stable;color:transparent;background:transparent;pointer-events:none;z-index:0}
.comparison .source-highlight-wrap .source-content{scrollbar-gutter:stable;overflow-y:scroll}
.source-highlights::-webkit-scrollbar{background:transparent}
.source-highlights::-webkit-scrollbar-thumb{background:transparent}
.source-highlights mark{color:transparent;background:#facc1570;border-radius:2px}
.detail-controls{display:flex;align-items:center;gap:16px;min-width:0;border-bottom:1px solid var(--line)}
.detail-controls .field-tabs{flex:1;min-width:0;border-bottom:0}
#macroEntry{flex:none;max-width:180px;padding:7px 10px;border:1px solid var(--line);border-radius:7px;background:#20202b;color:var(--ink);font:inherit}
#macroEntry[hidden]{display:none}
.macro-node-info{flex:none;font-size:12px;color:var(--muted);margin-top:8px}
.macro-node-info summary{cursor:pointer}
.pattern-list{display:flex;flex-direction:column;gap:16px}
.pattern-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;min-width:450px}
.pattern-pair>div{min-width:0}
.pattern-pair label{display:block;font-size:12px;color:var(--muted);margin-bottom:8px}
.pattern-pair textarea{margin:0;height:44px;min-height:44px;resize:none;padding:7px 14px;font:14px/1.95 "Segoe UI","Yu Gothic UI",Meiryo,sans-serif;white-space:pre-wrap;overflow-wrap:anywhere}
.pattern-pair [data-pattern-source]{background:#17171f;border-color:var(--line)}
/* Keep scrollbar space identical on both sides of each comparison. */
.comparison .source-content,.comparison #translation,.pattern-pair textarea{overflow-y:scroll;scrollbar-gutter:stable}
/* String variable values show approximately five lines. */
.variable-comparison{flex:0 0 auto;min-height:0;grid-template-rows:auto 153px auto}
.comparison.variable-comparison .source-content,.comparison.variable-comparison #translation,.comparison.variable-comparison .source-highlights{height:153px;min-height:153px;padding:7px 14px}
/* Trigger string values retain the compact one-line trigger-word height. */
.trigger-comparison{flex:0 0 auto;min-height:0;grid-template-rows:auto 44px auto}
.comparison.trigger-comparison .source-content,.comparison.trigger-comparison #translation,.comparison.trigger-comparison .source-highlights{height:44px;min-height:44px;padding:7px 14px}

.pattern-pair .preview-heading-row{margin-bottom:10px}.pattern-pair .preview-heading-row label.section-label{display:flex;margin:0;color:var(--ink);font-weight:600}


.pattern-row:not(:first-child) .preview-heading-row{display:none}

.pattern-pair textarea{scrollbar-width:none;scrollbar-gutter:auto}.pattern-pair textarea::-webkit-scrollbar{display:none}

.comparison.trigger-comparison textarea{scrollbar-width:none;scrollbar-gutter:auto}.comparison.trigger-comparison textarea::-webkit-scrollbar{display:none}

/* Render replacement highlights from the original match spans beneath readonly text. */
.preview-highlight-wrap,.pattern-highlight-wrap{position:relative;isolation:isolate;background:#1d1b2b;border-radius:8px;min-width:0;min-height:0}
.comparison .preview-highlight-wrap #translation,.pattern-pair .pattern-highlight-wrap textarea{position:relative;z-index:1;background:transparent}
.preview-highlights mark{color:transparent;background:#facc1570;border-radius:2px}
.pattern-pair .preview-highlights{position:absolute;inset:0;width:100%;height:44px;min-height:44px;margin:0;padding:7px 14px;border:1px solid transparent;border-radius:8px;font:14px/1.95 "Segoe UI","Yu Gothic UI",Meiryo,sans-serif;white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;tab-size:4;overflow:auto;scrollbar-width:none;color:transparent;background:transparent;pointer-events:none;z-index:0}
.pattern-pair .preview-highlights::-webkit-scrollbar{display:none}
.comparison.trigger-comparison .source-highlights{scrollbar-width:none;scrollbar-gutter:auto}

.pattern-source-highlight-wrap{background:#17171f}

/* AFTER token count stays at the right edge of its header. */
.comparison-preview .preview-heading-row{flex-wrap:wrap}
.token-count-label{margin-left:auto;color:var(--muted);font-size:11px;white-space:nowrap}
.token-count{white-space:nowrap;color:#fff;font-size:12px;font-variant-numeric:tabular-nums}
.token-count.over-limit{color:#ff7474}