/* The development rail keeps a separate scroller and the existing data renderers. */
.development-pane { display:flex; flex-direction:column; min-width:0; min-height:0; border-left:1px solid var(--line); background:var(--panel); overflow:hidden; }
.sidebar-top { flex:none; padding:22px 20px 16px; }
.sidebar-title { display:flex; align-items:center; justify-content:space-between; gap:15px; }
.sidebar-title h2 { font-size:22px; font-weight:550; letter-spacing:-.4px; }
#latestVersion { font-size:16px; color:var(--accent); font-variant-numeric:tabular-nums; }
.sidebar-stats { display:flex; gap:15px; font-size:12px; color:var(--muted); margin-top:10px; }
.journal-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); flex:none; border-block:1px solid var(--line); }
.tab-button { min-width:0; border:0; border-bottom:2px solid transparent; padding:14px 6px; background:none; color:var(--muted); font-size:14px; text-align:center; }
.tab-button[aria-pressed=true] { color:var(--accent); border-bottom-color:var(--accent); background:var(--accent-wash); }
.tab-button:hover { color:var(--paper); }
.sidebar-scroll { flex:1; min-height:0; overflow-y:auto; padding:18px 18px 30px; scrollbar-width:thin; scrollbar-color:var(--scroll-thumb) var(--panel); overscroll-behavior:contain; }
.journal-toolbar { display:grid; gap:9px; }
.journal-search { display:block; min-width:0; }
.journal-toolbar input,.journal-toolbar select { width:100%; min-width:0; border:1px solid var(--line-strong); background:var(--surface); border-radius:2px; color:var(--paper); padding:10px 11px; font-size:16px; }
.journal-filter-row { display:flex; gap:8px; }
.journal-filter-row select { flex:1; }
.journal-filter-row button { min-height:34px; padding:7px 12px; font-size:13px; }
.development-pane:has([data-tab=guide][aria-pressed=true]) .journal-toolbar { display:none; }
.journal-status { font-size:12px; line-height:1.5; color:var(--muted); margin:10px 0 23px; overflow-wrap:anywhere; }
.column-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; }
.column-heading h3 { font-size:18px; font-weight:500; }
.column-heading p { font-size:12px; color:var(--muted); text-align:right; }
#content,#roadmapContent { display:grid; gap:14px; }
.release-card,.roadmap-milestone,.guide-controls,.mechanic-card { border:1px solid var(--line); padding:16px; border-radius:2px; background:var(--surface); min-width:0; }
.release-card > header { padding-bottom:13px; border-bottom:1px solid var(--line); }
.release-version { font-size:24px; font-weight:550; letter-spacing:-.5px; }
.release-date { font-size:13px; line-height:1.5; color:var(--muted); margin-top:6px; }
.release-badges { display:flex; flex-wrap:wrap; gap:4px; margin-top:11px; }
.release-entries { display:grid; gap:15px; margin-top:14px; }
.release-entry { display:grid; gap:7px; }
.release-entry > p { font-size:16px; line-height:1.7; color:var(--text); overflow-wrap:anywhere; }
.badge { display:inline-flex; align-items:center; width:fit-content; max-width:100%; gap:4px; border:1px solid var(--badge-line); padding:3px 5px; color:var(--text); background:var(--badge-bg); border-radius:2px; font-size:11px; line-height:1.4; font-weight:600; letter-spacing:.4px; text-transform:uppercase; }
.badge[class*=orange],.badge[class*=ember],.badge[class*=amber] { border-color:#b8854266; color:#e6b26e; }
.badge[class*=red],.badge[class*=rose] { border-color:#b8757566; color:#e4a1a1; }
.badge[class*=blue],.badge[class*=sky],.badge[class*=cyan],.badge[class*=rift] { border-color:#779bb766; color:#accce9; }
.badge[class*=violet],.badge[class*=purple],.badge[class*=pink],.badge[class*=fuchsia] { border-color:#9c779566; color:#c4a1bd; }
.roadmap-milestone > div:first-child { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.roadmap-milestone > div:first-child > div > p { font-size:12px; color:var(--accent); letter-spacing:.8px; text-transform:uppercase; }
.roadmap-milestone h3 { font-size:20px; line-height:1.45; margin-top:6px; font-weight:500; }
.roadmap-milestone > p { font-size:16px; line-height:1.7; color:var(--text); margin-top:12px; }
.roadmap-milestone > div:nth-child(3) { margin-top:15px; }
.roadmap-milestone > div:nth-child(3) > p { font-size:12px; text-transform:uppercase; letter-spacing:.7px; color:var(--muted); margin-bottom:7px; }
.roadmap-milestone > div:nth-child(3) > div { height:3px; background:var(--progress-track); overflow:hidden; }
.roadmap-milestone > div:nth-child(3) > div > div { height:100%; background:var(--accent); }
.roadmap-milestone > div:nth-child(4) { display:flex; flex-wrap:wrap; gap:4px; margin-top:12px; }
.roadmap-milestone > div:nth-child(5) { display:grid; gap:13px; margin-top:17px; }
.roadmap-milestone article { padding-top:13px; border-top:1px solid var(--line); }
.roadmap-milestone article > div { display:flex; align-items:center; flex-wrap:wrap; gap:5px; }
.roadmap-milestone article h4 { font-size:18px; font-weight:550; margin-top:9px; }
.roadmap-milestone article p { font-size:16px; line-height:1.7; color:var(--text); margin-top:6px; overflow-wrap:anywhere; }
.roadmap-milestone span[class*=uppercase]:not(.badge),.mechanic-card span { font-size:11px; line-height:1.4; letter-spacing:.4px; text-transform:uppercase; padding:3px 5px; border:1px solid var(--badge-line); color:var(--text); }
#guideHeading { font-size:24px; line-height:1.4; font-weight:500; letter-spacing:-.4px; }
.guide-note { font-size:16px; color:var(--muted); margin-top:9px; margin-bottom:22px; line-height:1.7; }
#guideContent { display:grid; gap:24px; }
.guide-controls > h3,.guide-mechanics > h3 { font-size:20px; font-weight:500; margin-bottom:16px; }
.guide-controls > p { margin-top:24px; margin-bottom:9px; font-size:12px; line-height:1.5; text-transform:uppercase; letter-spacing:1px; color:var(--accent); }
.control-row { display:grid; grid-template-columns:85px 1fr; gap:12px; align-items:start; padding:11px 0; border-bottom:1px solid var(--line); }
.control-row > div { display:flex; align-items:center; flex-wrap:wrap; gap:4px; }
.control-row p { font-size:16px; line-height:1.7; color:var(--text); overflow-wrap:anywhere; }
kbd { display:inline-flex; min-width:20px; padding:3px 5px; border:1px solid var(--line-strong); border-bottom-width:2px; border-radius:3px; font:12px "Segoe UI",sans-serif; background:var(--panel); color:var(--paper); }
.guide-mechanics { display:grid; gap:13px; }
.guide-mechanics > h3 { margin-bottom:0; }
.mechanic-card > div { display:flex; flex-direction:column; align-items:flex-start; gap:9px; }
.mechanic-card h4 { font-size:18px; font-weight:550; line-height:1.6; }
.mechanic-card p { font-size:16px; line-height:1.7; color:var(--text); margin-top:11px; }
@media (max-width:850px) { .development-pane { border-left:0; } .sidebar-top { padding-top:18px; } .sidebar-scroll { padding-inline:20px; } .control-row { grid-template-columns:100px 1fr; } }
/* Local system glyphs retain the badge/icon information without a font CDN. */
.fa-solid { display: inline-block; font-style: normal; font-family: "Segoe UI Symbol",sans-serif; margin-right: 3px; font-size: .95em; }
.fa-solid::before { content: "◇"; }
.fa-rotate-right::before { content: "↻"; }
.fa-keyboard::before { content: "⌨"; }
.fa-gears::before { content: "⚙"; }
.fa-gamepad::before { content: "⊞"; }
.fa-star::before { content: "☆"; }
.fa-bug-slash::before { content: "⨯"; }
.fa-map-location-dot::before { content: "⌖"; }
.fa-user-group::before { content: "♧"; }
.fa-gauge-high::before { content: "◴"; }
.fa-arrow-trend-up::before { content: "↗"; }
.fa-palette::before { content: "◈"; }
.fa-volume-high::before { content: "♪"; }
.fa-book-open::before { content: "▤"; }
.fa-language::before { content: "文"; }
.fa-sun::before { content: "☼"; }
.fa-triangle-exclamation::before { content: "△"; }
.fa-shield-halved::before { content: "⬡"; }
.fa-code-branch::before { content: "⑂"; }
.fa-code::before { content: "⌘"; }
.fa-wand-magic-sparkles::before { content: "✧"; }
.fa-skull::before { content: "☠"; }
.fa-person-running::before { content: "➟"; }
.fa-universal-access::before { content: "♿"; }
.fa-layer-group::before { content: "▱"; }
.fa-toolbox::before { content: "⊡"; }
.fa-flask-vial::before { content: "⚗"; }
.fa-rocket::before { content: "↑"; }
.fa-boxes-stacked::before { content: "⊟"; }
.fa-diagram-project::before { content: "⋈"; }