/* Quiet specimen surfaces, clear controls, and the existing vermilion accent. */
body .library .font-grid .font-card { border-radius:6px; }
body .library .font-grid:not(.list) .font-card { padding-top:28px; }
body .library .font-grid .compare-add { position:absolute; top:4px; right:6px; padding:2px 6px; min-height:24px; border:1px solid transparent; border-radius:4px; background:transparent; color:var(--muted); font:11px/1.4 var(--sans); cursor:pointer; }
body .library .font-grid .compare-add:hover, body .library .font-grid .compare-add[aria-pressed=true] { color:var(--ink); border-color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,var(--card)); }
body .library .font-grid.list .font-card { padding-top:30px; }
.compare-notice { margin:0; color:var(--accent); font:12px/1.5 var(--sans); }
.compare-notice:not(:empty) { padding:4px 16px; }
.compare-tray { flex-shrink:0; padding:12px 16px; background:var(--panel); border-top:1px solid var(--accent); }
.compare-tray[hidden] { display:none; }
.compare-tray-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; font:12px var(--sans); }
.compare-tray-heading span { font-variant-numeric:tabular-nums; color:var(--muted); margin-left:8px; font-weight:400; }
.compare-tray button, #compareDialog button { cursor:pointer; font:12px/1.5 var(--sans); border:1px solid var(--line); border-radius:5px; padding:6px 10px; color:var(--ink); background:var(--card); }
#comparePicks { display:flex; gap:6px; flex-wrap:wrap; margin:8px 0; }
#comparePicks button { max-width:calc(50% - 3px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; }
.compare-tray .compare-primary { width:100%; background:var(--accent); color:#fff; border-color:var(--accent); font-weight:600; }
.compare-tray button:disabled { opacity:.5; cursor:default; }
#compareDialog { box-sizing:border-box; width:min(1400px,94vw); max-width:94vw; height:min(940px,92dvh); max-height:92dvh; margin:auto; padding:0; color:var(--ink); background:var(--bg); border:2px solid var(--muted); border-radius:10px; box-shadow:0 24px 100px #0008; }
#compareDialog[open] { display:flex; flex-direction:column; }
#compareDialog::backdrop { background:#000b; backdrop-filter:blur(5px); }
.compare-header { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 24px 16px; flex-shrink:0; }
.compare-eyebrow { color:var(--accent); font:11px var(--sans); letter-spacing:.15em; }
.compare-header h2 { margin:6px 0 0; font:500 26px/1.4 var(--serif); }
.compare-controls { padding:0 24px 16px; border-bottom:1px solid var(--line); flex-shrink:0; }
.compare-control-row { display:flex; align-items:center; gap:16px; justify-content:space-between; flex-wrap:wrap; }
.compare-segments,.compare-presets { display:flex; gap:4px; flex-wrap:wrap; }
#compareDialog button[aria-pressed=true] { background:var(--ink); color:var(--bg); border-color:var(--ink); }
.compare-text-label { display:flex; justify-content:space-between; gap:12px; margin:14px 0 6px; font:12px var(--sans); }
.compare-text-label span { color:var(--muted); }
#compareText { display:block; box-sizing:border-box; width:100%; resize:vertical; min-height:62px; max-height:130px; padding:10px 12px; margin:0 0 12px; border:1px solid var(--muted); border-radius:5px; color:var(--ink); background:var(--panel); font:14px/1.6 var(--sans); }
.compare-range { display:flex; align-items:center; gap:10px; font:12px var(--sans); }
.compare-range input { width:clamp(70px,10vw,150px); accent-color:var(--accent); }
.compare-range output { min-width:36px; font-variant-numeric:tabular-nums; color:var(--muted); }
#compareSheets { display:grid; grid-template-columns:repeat(var(--compare-count,2),minmax(0,1fr)); gap:1px; padding:1px; margin:20px 24px; background:var(--line); overflow:auto; flex:1; min-height:150px; align-content:start; }
.compare-sheet { min-width:0; padding:20px; background:var(--panel); }
.compare-sheet > header { display:flex; gap:12px; align-items:baseline; min-height:56px; }
.compare-number { color:var(--accent); font:12px var(--sans); font-variant-numeric:tabular-nums; }
.compare-sheet h3 { margin:0; font:500 14px/1.5 var(--sans); overflow-wrap:anywhere; }
.compare-meta { margin:4px 0 0; color:var(--muted); font:11px/1.5 var(--sans); overflow-wrap:anywhere; }
.compare-load-status { color:var(--muted); font:11px/1.5 var(--sans); margin:10px 0; }
.compare-specimen { font-size:var(--compare-size,36px); line-height:var(--compare-leading,1.7); font-weight:400; font-synthesis:none; white-space:pre-wrap; overflow-wrap:anywhere; min-height:180px; padding:18px 0 30px; }
.compare-specimen[hidden], #compareDialog button[hidden] { display:none; }
#compareDialog .compare-use { margin-top:12px; color:var(--accent); background:transparent; }
#compareSheets[data-layout=rows] { grid-template-columns:1fr; }
#compareSheets[data-layout=rows] .compare-specimen { min-height:60px; }
#compareSheets[data-layout=vertical] .compare-specimen { writing-mode:vertical-rl; height:340px; min-height:0; width:100%; box-sizing:border-box; overflow:auto; padding:12px; }
.compare-footer { flex-shrink:0; margin:0; padding:0 24px 16px; color:var(--muted); font:11px/1.6 var(--sans); }
#compareDialog :focus-visible, .compare-tray :focus-visible, .compare-add:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
@media(max-width:760px) {
 #compareDialog { width:96vw; max-width:96vw; height:94dvh; max-height:94dvh; }
 .compare-header { padding:14px; }
 .compare-header h2 { font-size:21px; }
 .compare-controls { padding:0 14px 12px; }
 .compare-control-row { gap:8px; }
 .compare-text-label span { display:none; }
 .compare-range { gap:6px; }
 #compareSheets { margin:12px; grid-template-columns:repeat(var(--compare-count),minmax(240px,1fr)); }
 #compareSheets[data-layout=rows] { grid-template-columns:minmax(0,1fr); }
 .compare-sheet { padding:14px; }
 .compare-footer { padding:0 14px 12px; }
 .compare-tray { padding:10px 12px; }
}
#compareSheets { background:var(--panel); border:1px solid var(--line); padding:0; gap:0; }
.compare-sheet { border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.compare-sheet:last-child { border-right:0; }
#compareSheets[data-layout=rows] .compare-sheet { border-right:0; }