diff --git a/app/index.html b/app/index.html
index 7205dce..63e2113 100644
--- a/app/index.html
+++ b/app/index.html
@@ -111,7 +111,7 @@ body{
.kb-wrap{max-width:960px;margin:0 auto;padding:24px 20px 56px;}
/* ── Toolbar ──────────────────────────────────────────────────────────────── */
-.kb-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;padding-right:2px;}
+.kb-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.kb-toolbar .spacer{flex:1;}
.kb-seg{
display:inline-flex;align-items:center;gap:2px;
@@ -333,22 +333,20 @@ body{
.kb-footer .sep{opacity:.45;}
/* ── App wordmark (toolbar left) ──────────────────────────────────────────── */
-.app-wordmark{
- display:inline-flex;align-items:center;gap:8px;
- font:700 var(--fs-h1)/1 var(--font-sans);
- color:var(--text);letter-spacing:-0.01em;user-select:none;
-}
-.app-wordmark svg{width:1em;height:1em;flex:0 0 1em;vertical-align:middle;}
+.kb-doctitle h1{display:inline-flex;align-items:center;gap:9px;}
+.kb-doctitle h1 svg{flex-shrink:0;}
/* Language select in toolbar */
-.kb-toolbar-sel{
+.kb-toolbar select{
font:600 var(--fs-small)/1 var(--font-sans);color:var(--text-muted);
background:var(--surface);border:1px solid var(--border);
- border-radius:var(--radius-sm);padding:5px 24px 5px 9px;
- outline:none;appearance:none;cursor:pointer;transition:border-color .14s,box-shadow .14s;
- background-image:url("data:image/svg+xml;utf8,");
- background-repeat:no-repeat;background-position:right 7px center;
+ border-radius:var(--radius-sm);padding:5px 28px 5px 10px;
+ outline:none;appearance:none;cursor:pointer;
+ background-image:url("data:image/svg+xml;utf8,");
+ background-repeat:no-repeat;background-position:right 8px center;
+ transition:border-color .14s,color .14s;
}
-.kb-toolbar-sel:focus{border-color:var(--accent);box-shadow:var(--ring);}
+.kb-toolbar select:focus{border-color:var(--accent);box-shadow:var(--ring);color:var(--text);}
+.kb-toolbar select:hover{border-color:var(--accent-border);color:var(--text);}
/* ── Loading ──────────────────────────────────────────────────────────────── */
.kb-loading{text-align:center;padding:80px;color:var(--text-muted);}
@@ -705,20 +703,19 @@ function render() {
// ── Toolbar ──────────────────────────────────────────────────────────────
const toolbar = el('div', {className:'kb-toolbar'});
- toolbar.appendChild(el('div', {className:'spacer'}));
-
- // Language selector (only when CFG.languages has >1 entry)
+ // Language selector (only when CFG.languages has >1 entry) — goes first
if (Array.isArray(CFG.languages) && CFG.languages.length > 1) {
- const langSel = el('select', {className:'kb-toolbar-sel', 'aria-label':'Language'});
+ const langSel = el('select', {'aria-label':'Language'});
CFG.languages.forEach(lang => {
const code = typeof lang === 'object' ? lang.code : lang;
const name = typeof lang === 'object' ? lang.name : lang;
- const opt = el('option', {value: code}, name);
- langSel.appendChild(opt);
+ langSel.appendChild(el('option', {value: code}, name));
});
toolbar.appendChild(langSel);
}
+ toolbar.appendChild(el('div', {className:'spacer'}));
+
// Font size
const sizeSeg = el('div', {className:'kb-seg', role:'group', 'aria-label':'Text size'});
const sizeOpts = [{lbl:'A−', scale:0.9}, {lbl:'A', scale:1}, {lbl:'A+', scale:1.12}];
@@ -736,8 +733,8 @@ function render() {
// Theme toggle (single icon button: moon = light mode, sun = dark mode)
const themeBtn = el('button', {className:'kb-iconbtn', type:'button', 'aria-label':'Toggle theme'});
- const moonSVG = ``;
- const sunSVG = ``;
+ const moonSVG = ``;
+ const sunSVG = ``;
const currentTheme = () => document.documentElement.getAttribute('data-theme') ||
(window.matchMedia('(prefers-color-scheme:dark)').matches ? 'dark' : 'light');
const updateThemeBtn = () => { themeBtn.innerHTML = currentTheme() === 'dark' ? sunSVG : moonSVG; };
@@ -752,7 +749,7 @@ function render() {
// About
const aboutBtn = el('button', {className:'kb-iconbtn', type:'button', 'aria-label':'About', onClick: showAboutModal});
- aboutBtn.innerHTML = ``;
+ aboutBtn.innerHTML = ``;
toolbar.appendChild(aboutBtn);
wrap.appendChild(toolbar);
@@ -779,8 +776,8 @@ function render() {
brand.append(logoBox, orgSpan);
const docTitle = el('div', {className:'kb-doctitle'});
- const wordmark = el('div', {className:'app-wordmark'});
- wordmark.innerHTML = `reimburse`;
+ const h1 = el('h1');
+ h1.innerHTML = `reimburse`;
const periodMeta = el('div', {className:'meta'});
function fmtPeriodDate(iso) {
const [y, m, d] = iso.split('-').map(Number);
@@ -794,7 +791,7 @@ function render() {
else periodMeta.textContent = '';
}
updatePeriodMeta();
- docTitle.append(wordmark, periodMeta);
+ docTitle.append(h1, periodMeta);
hdr.append(brand, docTitle);
wrap.appendChild(hdr);