/* Standalone defaults. On site pages site.css (themes.css) redefines these
   tokens and the theme applies; the var() fallbacks below are for standalone. */
:root { color-scheme: dark; --stone:#111315; --surface:#202326; --text:#E8DEC9; --muted:#BEB8AA; --gold:#D6B469; --azure:#78C8F2; --line:#5F6468; }
* { box-sizing:border-box; }
body { margin:0; background:var(--stone); color:var(--text); font:16px/1.55 Verdana,sans-serif; }
main { max-width:1200px; margin:0 auto; padding:32px clamp(16px,4vw,48px) 64px; }
h1 { margin:0; color:var(--gold); font:normal clamp(28px,5vw,40px)/1.2 var(--font-display,Georgia,serif); }
h2 { margin:0 0 12px; color:var(--gold); font-size:20px; }
h3 { font-size:18px; } h4 { margin:0 0 8px; font-size:16px; }
p { max-width:78ch; margin:8px 0 16px; }
.subtitle { margin:4px 0 20px; color:var(--azure); font-size:20px; }
label { display:block; margin:16px 0 6px; font-weight:bold; }
textarea { width:100%; max-width:100%; resize:vertical; padding:12px; border:1px solid var(--line); border-radius:var(--radius,3px); background:var(--surface); color:var(--text); font:14px/1.5 var(--mono,monospace); overflow-wrap:anywhere; }
button { padding:9px 14px; margin:4px 8px 4px 0; border:1px solid var(--azure); border-radius:var(--radius,3px); background:var(--surface); color:var(--azure); font:inherit; cursor:pointer; }
button:hover { background:var(--surface-2,#2C3942); } button:disabled { border-color:var(--line); color:var(--muted); cursor:default; }
:focus-visible { outline:3px solid var(--focus,var(--azure)); outline-offset:3px; }
.actions { display:flex; flex-wrap:wrap; margin:12px 0; }
#import-status { color:var(--muted); }
.result { overflow-wrap:anywhere; margin-top:28px; display:grid; grid-template-columns:minmax(0,1fr) minmax(230px,.42fr); gap:24px; }
.status { grid-column:1/-1; padding-bottom:16px; border-bottom:1px solid var(--line); }
.declared { grid-column:2; grid-row:2; }
.content { grid-column:1; grid-row:2; min-width:0; }
.ordered,.raw,.inspection { min-width:0; }
.raw { grid-row:auto; } .inspection { grid-column:1/-1; padding:16px; border:1px solid var(--line); background:var(--surface); }
.step { border-left:3px solid var(--azure); padding:12px 0 12px 16px; margin:16px 0; }
.raw-row { padding:8px 0; border-bottom:1px solid var(--line); }
pre { margin:8px 0; font:13px/1.6 var(--mono,monospace); white-space:pre-wrap; overflow-wrap:anywhere; }
.path { color:var(--muted); font-size:13px; overflow-wrap:anywhere; }
.caution,.problem { color:var(--warn,var(--gold)); }
[hidden] { display:none !important; }
@media(max-width:760px) { .result { display:block; } .result>section { margin-bottom:24px; } main { padding-top:20px; } button { min-height:44px; } }
.import-pane,.compare-input { min-width:0; }
.compare-input { border-top:1px solid var(--line); margin-top:24px; padding-top:24px; }
.compare-input nav { display:flex; flex-wrap:wrap; margin-top:16px; }
.compare-input button[aria-pressed="true"] { background:var(--surface-2,#2C3942); border-width:2px; }
.comparison { grid-column:1/-1; min-width:0; }
.comparison .step h3 { margin-top:0; }

.source-navigation { display:flex; flex-wrap:wrap; gap:4px; border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:24px; }
.source-navigation button[aria-pressed="true"] { color:var(--text); border-color:var(--gold); border-bottom-width:3px; }
.bundled-browser { min-width:0; }
.bundled-browser select { max-width:100%; padding:9px 12px; border:1px solid var(--line); border-radius:var(--radius,3px); background:var(--surface); color:var(--text); font:inherit; }
#catalog-list { list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); gap:8px 16px; }
#catalog-list li { min-width:0; }
#catalog-list button { width:100%; height:100%; text-align:left; overflow-wrap:anywhere; margin:0; }
#catalog-list button[aria-pressed="true"] { border-color:var(--gold); color:var(--text); }

.draft-editor { min-width:0; margin-top:24px; padding:20px; border:1px solid var(--line); border-top:3px solid var(--gold); border-radius:var(--radius,3px); }
.draft-fields { display:grid; grid-template-columns:minmax(0,1fr) minmax(160px,.6fr); gap:12px 32px; }
.draft-editor select,.draft-editor input { max-width:100%; min-height:44px; padding:9px 12px; border:1px solid var(--line); border-radius:var(--radius,3px); background:var(--surface); color:var(--text); font:inherit; }
.draft-editor input { width:100%; }
.draft-editor [aria-invalid="true"] { border:2px solid var(--warn,var(--gold)); }
.draft-editor :disabled { color:var(--muted); }
#draft-status { color:var(--muted); }
#draft-steps { display:block; border-top:1px solid var(--line); margin-top:20px; padding-top:4px; }
#draft-step-select { width:100%; }
#draft-step-context { overflow-wrap:anywhere; margin-top:12px; }
#draft-changes { overflow-wrap:anywhere; }
@media(max-width:760px) { .draft-editor { padding:16px; } .draft-fields { grid-template-columns:minmax(0,1fr); gap:0; } }