@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/emboss/fonts/inter-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/emboss/fonts/inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/emboss/fonts/inter-greek-ext.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/emboss/fonts/inter-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/emboss/fonts/inter-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/emboss/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/emboss/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "APHfont";
  src: url("/emboss/fonts/APH_Braille_Shadows.woff2") format("woff2"),
       url("/emboss/fonts/APH_Braille_Shadows.woff") format("woff"),
       url("/emboss/fonts/APH_Braille_Shadows.ttf") format("truetype");
  font-weight: normal; font-style: normal; font-display: swap;
  unicode-range: U+2800-28FF;
}

:root {
  /* The Paige palette (feedback 30 Sep, item 18: the same as Translate after Paramveer's brand pass, PaigeBraille/translate#10).
     White grounds; body text the brand's darkest grey, never black; --accent (Paige blue, 4.1:1 on white) only for lines, rings and
     the caret; --accent-text for blue text that is read. There is no --accent-fill any more: Translate has no button
     filled with colour, so neither has Emboss (Paul, 17 Oct 2026). */
  --line: #eaebec;
  --bg: #ffffff;
  --bg-grad: #ffffff;
  --pane-bg: #ffffff;
  --panel: #ffffff;
  --panel-head: #ffffff;
  --ink: #444444;
  --muted: #5c6462;
  --accent: #2a7de1;
  --accent-text: #0d2e80;
  --accent-ink: #ffffff;
  --link: #fcedbf;
  --linkb: #f5b800;
  /* A dropdown's arrow: Iconoir's nav-arrow-down in --muted (PB, 23 Oct 2026) */
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6462' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9L12 15L18 9'/%3E%3C/svg%3E");
  --word-hl: #f8ca40;   /* the word clicked, in both panes (PB, 23 Oct 2026; it was --linkb's #f5b800; #fadc80 was tried) */
  --hover-wash: #e9f2fc;
  --warn-bg: #fcedbf;
  --warn-ink: #444444;
  --sel: color-mix(in srgb, var(--accent) 25%, transparent);
  --ok: var(--muted);
  --err: var(--danger);
  --radius: 16px;
  --pill-bg: #ffffff;
  --head-bg: #ffffff;
  --btn-bg: #ffffff;
  --code-bg: #fafbfc;
  --select-bg: #ffffff;
  --sb-bg: #ffffff;
  /* Translate's other colours, named (Paul, 17 Oct 2026: "make the colour scheme of Emboss exactly the same as that of Translate").
     Each is a value Translate's own stylesheet uses: --chip-bg its <kbd> fill; --tint its word-hover and maths tint; --danger,
     --danger-line, --danger-wash its Clear button; --warn-text and --warn-line its amber "repair" lead and rule; --c0 to --c6 its
     explanation-bar chips. --on-mark is the text on a light mark (highlight, warning box, chip): Translate keeps those light in
     dark mode too, with near-black text. Translate has no green and no button filled with colour, so neither has Emboss now. */
  --chip-bg: #fafbfc;
  --tint: #e9f2fc;
  --danger: #aa1111;
  --danger-line: #e6bcbc;
  --danger-wash: #fdf0f0;
  --on-mark: #444444;
  --warn-text: #8a5b00;
  --warn-line: #e0cf9a;
  /* The Paige mark in the header: its own blue on light, white on dark (PB, 22 Oct 2026). */
  --logo: #2a7de1;
  --c0: #fcedbf; --c1: #cadef7; --c2: #e3f0de; --c3: #ffdad2; --c4: #e8dbff; --c5: #bfe9e6; --c6: #f7d9ee;
  color-scheme: light;
  font-family: "Inter", "APHfont", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --line: #30363d;
    --bg: #0d1117;
    --bg-grad: #0d1117;
    --pane-bg: #161b22;
    --panel: #161b22;
    --panel-head: #21262d;
    --ink: #e6edf3;
    --muted: #8b949e;
    --accent: #e9f2fc;
    --accent-text: #e9f2fc;
      --accent-ink: #ffffff;
    --warn-ink: #0d1117;
    --hover-wash: rgba(129, 140, 248, 0.20);
    --link: #fcedbf;
    --linkb: #f5b800;
    --word-hl: #f8ca40;
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9L12 15L18 9'/%3E%3C/svg%3E");
    --pill-bg: #21262d;
    --head-bg: #161b22;
    --btn-bg: #21262d;
    --code-bg: #21262d;
    --select-bg: #161b22;
    --sb-bg: #161b22;
    --chip-bg: #21262d;
    --tint: rgba(129, 140, 248, 0.20);
    --danger: #ffb0a2;
    --danger-wash: #21262d;
    --on-mark: #0d1117;
    --warn-text: #f2c94c;
    --warn-line: #5c4415;
    --logo: #ffffff;
    color-scheme: dark;
  }
}
:root.dark {
  --line: #30363d;
  --bg: #0d1117;
  --bg-grad: #0d1117;
  --pane-bg: #161b22;
  --panel: #161b22;
  --panel-head: #21262d;
  --ink: #e6edf3;
  --muted: #8b949e;
  --accent: #e9f2fc;
  --accent-text: #e9f2fc;
  --accent-ink: #ffffff;
  --warn-ink: #0d1117;
  --hover-wash: rgba(129, 140, 248, 0.20);
  --link: #fcedbf;
  --linkb: #f5b800;
  --word-hl: #f8ca40;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9L12 15L18 9'/%3E%3C/svg%3E");
  --pill-bg: #21262d;
  --head-bg: #161b22;
  --btn-bg: #21262d;
  --code-bg: #21262d;
  --select-bg: #161b22;
  --sb-bg: #161b22;
  --chip-bg: #21262d;
  --tint: rgba(129, 140, 248, 0.20);
  --danger: #ffb0a2;
  --danger-wash: #21262d;
  --on-mark: #0d1117;
  --warn-text: #f2c94c;
  --warn-line: #5c4415;
  --logo: #ffffff;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; font-size: 15px; background: var(--bg-grad); color: var(--ink); line-height: 1.5; min-height: 100vh; transition: background 0.3s ease, color 0.3s ease; }

header { padding: 18px 16px; background: var(--head-bg); border-bottom: 1px solid var(--line); flex: 0 0 auto; transition: background 0.3s ease; }
.header-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* The Paige mark, as Translate's header has it (PB, 22 Oct 2026): 36px high, and NOT rounded off - the mark's own corners are
   tighter than the 11px this used to clip it to, which shaved the outline's corners. Inline SVG, so --logo can turn it white in dark. */
.app-logo { width: auto; height: 36px; flex-shrink: 0; display: block; color: var(--logo); }
.app-logo-link { display: inline-flex; flex-shrink: 0; border-radius: 11px; line-height: 0; }
.app-logo-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.app-logo-link:hover .app-logo { opacity: .85; }
header h1 { margin: 0; font-size: 1rem; color: var(--ink); font-weight: 500; }
.brl-title { font-weight: 400; letter-spacing: 0.06em; }
.sub { margin: 2px 0 0; color: var(--muted); font-size: 0.82rem; }
main > .sub { margin: 4px 2px 10px; }
.toolbar { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.icon-btn {
  width: 34px; height: 34px; padding: 0; border-radius: 8px; font-size: 1.15rem; font-weight: 600;
  background: var(--pill-bg); color: var(--ink); border: 1px solid var(--line); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
  transition: all 0.2s ease;
}
.icon-btn:hover, .icon-btn:focus-visible {
  border-color: var(--accent);
  color: var(--accent-text);
}
.icon-btn svg { display: block; }
/* Iconoir line icons (web/icons.mjs): em-sized, so an icon follows the text it sits in; stroke is currentColor. */
.icon { width: 1.2em; height: 1.2em; flex: 0 0 auto; }
.icon-inline { width: 1em; height: 1em; vertical-align: -0.15em; display: inline-block; }
.icon-caret { width: 0.95em; height: 0.95em; margin-left: 2px; vertical-align: -0.15em; }

body:not(.editor-page) main, .converter-main { max-width: min(96vw, 1440px); margin: 0 auto; padding: 10px 20px 40px; }

.dropzone {
  position: relative; border: 1px solid var(--line); border-radius: 16px;
  background: var(--pane-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 52px 24px 44px; text-align: center; cursor: pointer;
  transition: all 0.2s ease;
}
.dropzone:hover { border-color: var(--accent); }
.dropzone.drag { border-color: var(--accent); background: var(--sel); }
.dropzone:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.dz-inner { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dz-icon {
  width: 96px; height: 96px; display: grid; place-items: center; margin-bottom: 10px;
  border-radius: 50%; background: var(--hover-wash); color: var(--accent); transition: transform .15s, background .15s;
}
.dz-icon .icon { width: 48px; height: 48px; }
.dropzone.drag .dz-icon { background: var(--sel); color: var(--accent-text); transform: scale(1.05); }
.dz-title { font-size: 1.3rem; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.dz-or { color: var(--muted); margin: 8px 0; font-size: 0.9rem; }
.dz-inner #chooseBtn { min-height: 44px; padding: 0 28px; font-size: 1rem; }
.dz-formats { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 22px; }
.chip {
  font-size: 0.72rem; font-weight: 700; letter-spacing: .04em; color: var(--muted);
  background: var(--code-bg); border: 1px solid var(--line); border-radius: 4px; padding: 4px 11px;
}
.dz-file { margin: 16px 0 0; font-weight: 600; color: var(--accent-text); min-height: 1.2em; }

button {
  font: inherit; font-weight: 600; color: var(--ink); background: var(--pill-bg);
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 18px; cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-text); }
/* A phone: Quick Mode only (Paul, 18 Oct 2026) - no way to the editor, and no "Start in Quick Mode" choice (html.is-phone, set before paint) */
html.is-phone #advancedBtn, html.is-phone .phone-hide { display: none !important; }

button:disabled { background: var(--pane-bg); color: var(--muted); cursor: not-allowed; }
.icon-btn:disabled { background: var(--panel); }

.status { min-height: 1.3em; margin: 8px 2px; font-size: 0.82rem; color: var(--muted); text-align: center; }
.status.err { color: var(--err); font-weight: 600; }
.status.ok { color: var(--ok); }
/* One look for a warning (as Translate's yellow boxes): the pale yellow fill, no border, ink text, 6px corners; the same in dark, where only
   the ink changes (--warn-ink). It was amber text on the page. */
.status.warn { display: block; width: fit-content; max-width: 100%; margin: 8px auto; padding: 6px 12px; border-radius: 6px; background: var(--warn-bg); color: var(--warn-ink); font-weight: 600; }
.import-notice[hidden] { display: none; }
.import-notice { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; text-align: left; font-size: .95rem; }
.import-notice-dismiss { font: 600 .8rem/1 inherit; padding: 6px 10px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--warn-ink) 40%, transparent); background: transparent; color: inherit; cursor: pointer; }
.import-notice-dismiss:hover, .import-notice-dismiss:focus-visible { background: color-mix(in srgb, var(--warn-ink) 12%, transparent); }

/* The "Loading the braille engine…" state (F9 item I, Paul 9 Oct 2026): a small spinner and words in the page's own font and colours,
   in the editor's braille pane and Quick Mode's status line. Still when the reader prefers reduced motion. */
.engine-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 8px; color: var(--muted);
  font: 500 .95rem/1.4 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; letter-spacing: normal; white-space: normal; word-break: normal; }
.status .engine-loading { display: inline-flex; padding: 0; font: inherit; }
.engine-spinner { width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; box-sizing: border-box;
  border: 2.5px solid color-mix(in srgb, var(--accent) 22%, transparent); border-top-color: var(--accent); animation: engine-spin .9s linear infinite; }
@keyframes engine-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .engine-spinner { animation: none; border-right-color: var(--accent); } }

.result { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.result-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
#resultMeta { color: var(--muted); font-size: 0.9rem; }
/* The warning triangle on a badge (Iconoir warning-triangle, web/icons.mjs) — drawn here, in the text's colour, rather than the ⚠
   character the strings used to start with, which some phones draw as a coloured emoji (feedback 30 Sep, item 18). */
.warn-badge::before, .proof-badge.warn::before, .table-warn-badge::before {
  content: ''; display: inline-block; width: 1.15em; height: 1.15em; margin-right: 5px; vertical-align: -0.25em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.0429 21H3.95705C2.41902 21 1.45658 19.3364 2.22324 18.0031L10.2662 4.01533C11.0352 2.67792 12.9648 2.67791 13.7338 4.01532L21.7768 18.0031C22.5434 19.3364 21.581 21 20.0429 21Z'/%3E%3Cpath d='M12 9V13'/%3E%3Cpath d='M12 17.01L12.01 16.9989'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.0429 21H3.95705C2.41902 21 1.45658 19.3364 2.22324 18.0031L10.2662 4.01533C11.0352 2.67792 12.9648 2.67791 13.7338 4.01532L21.7768 18.0031C22.5434 19.3364 21.581 21 20.0429 21Z'/%3E%3Cpath d='M12 9V13'/%3E%3Cpath d='M12 17.01L12.01 16.9989'/%3E%3C/svg%3E") center / contain no-repeat;
}
.warn-badge { font: 600 .72rem/1 -apple-system,system-ui,sans-serif; padding: 4px 9px; border-radius: 4px; white-space: nowrap; letter-spacing: .01em; background: var(--warn-bg); color: var(--warn-ink); border: 0; margin-left: 8px; }
.export-warn-notice { position: fixed; z-index: 70; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--warn-bg); color: var(--warn-ink); border-radius: 6px; font: 600 .82rem/1.4 -apple-system,system-ui,sans-serif; max-width: 92vw; }
.export-warn-notice[hidden] { display: none; }
.export-warn-notice button { font: 600 .8rem/1 inherit; padding: 6px 10px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--warn-ink) 40%, transparent); background: transparent; color: inherit; cursor: pointer; }
.export-warn-notice button:hover, .export-warn-notice button:focus-visible { background: color-mix(in srgb, var(--warn-ink) 12%, transparent); }
/* Quick Mode only: the editor has its own .warn-badge and notice (and its own focus style on the badge), which this must not reach. */
body:not(.editor-page) .export-warn-notice button:focus-visible,
body:not(.editor-page) .warn-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* dialogs */
/* EVERY <dialog> (brand pass, as Translate's #10): no browser border or black text, 16px corners like the panes, no drop shadow. */
dialog { border: none; border-radius: 16px; color: var(--ink); background: var(--head-bg, #ffffff); }
dialog::backdrop { background: rgba(0,0,0,.35); backdrop-filter: blur(4px); }
.dialog { border: none; border-radius: 16px; padding: 0; max-width: 680px; width: calc(100% - 32px); max-height: 85vh; margin: auto; color: var(--ink); background: var(--head-bg, #ffffff); opacity: 1 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.dialog::backdrop { background: rgba(0,0,0,.35); backdrop-filter: blur(4px); }
.dialog-body { padding: 18px 20px 20px; background: inherit; }
/* Help is as wide as Translate's Help (PB, 22 Oct 2026): the window less 36px, not the 680px the other dialogs keep. */
#helpDialog.dialog { width: calc(100% - 36px); max-width: calc(100% - 36px); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; }
/* Translate's Help look on every dialog (PB, 22 Oct 2026): the title in a bar the dialog's full width, a rule under it, the close an icon
   button. The bar reaches past .dialog-body's 18px x 20px padding (both pages use that padding) to the dialog's edges. */
.dialog-body > .dialog-head { margin: -18px -20px 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.dialog-head h2 { margin: 0; font-size: 1.1rem; color: var(--ink); font-weight: 700; }
.dialog-head button { width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--pill-bg); color: var(--ink);
  font-size: 1.45rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .2s ease, color .2s ease; }
.dialog-head button:hover { border-color: var(--accent); color: var(--accent-text); background: var(--pill-bg); }
.dialog-head button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Tabbed Settings Dialog (Left Column Navigation) */
.settings-layout { display: flex; gap: 16px; min-height: 200px; max-height: 65vh; margin-top: 8px; }
.settings-nav { width: 180px; flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; border-right: 1px solid var(--line); padding-right: 12px; }
/* THE RULE BESIDE THE TABS RUNS THE DIALOG'S FULL HEIGHT (PB, 22 Oct 2026): from the title bar's rule to the dialog's bottom edge, past the
   Done row, rather than stopping with the tab list. Drawn on the form, where the nav's own border was: 20px of the form's padding plus the
   nav's 180px; it starts under the title bar (a 38px close button, 14px above and below it, and its 1px rule). */
@media (min-width: 601px) {
  #settingsDialog .dialog-body { position: relative; }
  #settingsDialog .settings-nav { border-right: 0; }
  #settingsDialog .dialog-body::before { content: ''; position: absolute; top: 67px; bottom: 0; left: 199px; width: 1px; background: var(--line); pointer-events: none; }
}
.settings-nav .tab-btn { width: 100%; }
.tab-btn {
  display: flex; align-items: center; gap: 8px; width: auto; padding: 8px 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink); opacity: 0.78; font: inherit; font-size: 0.86rem; font-weight: 600; text-align: left; cursor: pointer; transition: background .15s, color .15s, opacity .15s;
}
.tab-btn:hover { background: var(--btn-bg); opacity: 1; color: var(--ink); }
.tab-btn.active { background: var(--hover-wash); color: var(--accent-text); opacity: 1; font-weight: 700; }
.hardware-expert-only { display: none !important; }
body.expert-hardware .hardware-expert-only { display: inline-flex !important; }
body.expert-hardware .tab-btn.hardware-expert-only { display: flex !important; }
.settings-panels { flex: 1; min-width: 0; overflow-y: auto; padding-right: 4px; display: grid; }
/* EVERY TAB IN THE SAME CELL (PB, 22 Oct 2026: switching tabs resized the window and made it jump). The panels are stacked in one grid cell,
   so the cell - and the dialog - is as big as the biggest of them; only the chosen one is visible. visibility, not display, is what keeps the
   others' size while still taking them out of the tab order and away from a screen reader. The embosser tab counts only when it can be shown. */
.settings-panel { grid-area: 1 / 1; visibility: hidden; }
.settings-panel.active { visibility: visible; }
body:not(.expert-hardware) #tab-hardware { display: none; }
.settings-panel h3 { margin: 0 0 10px; font-size: 0.98rem; font-weight: 700; color: var(--accent-text); border-bottom: 1px solid var(--line); padding-bottom: 6px; }

.dialog .field { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.dialog .field.field-check,
.dialog .field:has(.check-label) { margin-top: 6px; }
.dialog .field-row { display: flex; gap: 14px; }
.dialog .field-row .field { flex: 1; }
.field label { font-size: 0.75rem; color: var(--ink); opacity: 0.8; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.field select, .field input[type="number"], .field input[type="text"] {
  font: inherit; font-size: 0.88rem; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--select-bg); width: 100%; color: var(--ink);
}
/* THE ARROW HAS ROOM ROUND IT (PB, 23 Oct 2026): the browser's own arrow sat hard against the right edge. Ours is Iconoir's, 14px, 12px in
   from the edge - the same space the text has on the left - with room kept for it so a long option never runs under it. */
.field select { appearance: none; -webkit-appearance: none; padding-right: 36px;
  background-image: var(--select-arrow); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px 14px; }

.check-label {
  display: flex !important; align-items: center !important; gap: 10px !important;
  cursor: pointer !important; font-size: 0.88rem !important; color: var(--ink) !important;
  text-transform: none !important; font-weight: 400 !important; letter-spacing: normal !important;
  padding: 2px 0 !important; margin: 0 !important;
}
.check-label input { width: 17px !important; height: 17px !important; margin: 0 !important; flex-shrink: 0; cursor: pointer; }
.check-label strong { font-weight: 600; color: var(--ink); }
.check-label span { font-size: 0.84rem; color: var(--ink); opacity: 0.85; }
.dialog-foot { margin-top: 20px; display: flex; justify-content: flex-end; }

/* Dropdown Menus */
.menu-wrap { position: relative; display: inline-flex; }
.menu-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--head-bg, #ffffff) !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px;
  min-width: 190px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.menu-dropdown.align-right {
  left: auto;
  right: 0;
}
.menu-dropdown[hidden] { display: none !important; }
.menu-dropdown-item[hidden] { display: none; }   /* PEF download hidden (Paul, 25 Sep) */
.menu-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: .84rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  width: 100%;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
/* Lit by the mouse or by the keyboard (:focus-visible), never just because opening the menu focused its first item (as #10). */
.menu-dropdown-item:hover, .menu-dropdown-item:focus-visible {
  background: var(--hover-wash);
  color: var(--accent-text);
}
.menu-dropdown-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.menu-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  min-width: 22px;
  font-size: 1rem;
  flex-shrink: 0;
  text-align: center;
  line-height: 1;
}
.menu-item-lbl {
  flex: 1 1 auto;
  text-align: left;
}

/* Unified Download Pill Button */
.download-group {
  display: inline-flex; align-items: center; height: 46px; border-radius: 8px;
  border: 1.5px solid var(--line); background: var(--pill-bg, #fff); color: var(--ink);
  font: inherit; font-size: 0.92rem; font-weight: 600; overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.download-group:hover, .download-group:focus-within { border-color: var(--accent); }
.download-group button {
  height: 100%; border: 0; background: transparent; color: inherit; font: inherit;
  font-weight: 600; padding: 0 10px 0 16px; border-radius: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; transition: background .15s, color .15s;
}
.download-group button:hover, .download-group button:focus-visible { border-color: var(--accent); color: var(--accent-text); }
.download-group select {
  height: 100%; border: 0; border-left: 1.5px solid var(--line); background: transparent;
  color: inherit; font: inherit; font-weight: 600; padding: 0 28px 0 10px; border-radius: 0;
  cursor: pointer; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 14px) 20px, calc(100% - 9px) 20px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.download-group select:hover { background-color: var(--sel); }
.download-group select:focus { outline: none; }

.help-content { color: var(--ink); line-height: 1.6; }
.help-content h2, .help-content h3 { color: var(--ink); font-weight: 700; margin: 16px 0 6px; font-size: 1.05rem; }
.help-content p, .help-content li { font-size: 0.92rem; color: var(--ink); line-height: 1.55; }
.help-content strong { color: var(--ink); font-weight: 700; }
.help-content em { color: var(--ink); }
.help-content .help-note {
  color: var(--ink); font-style: italic; font-size: 0.86rem;
  background: var(--btn-bg); border-left: 3px solid var(--accent);
  padding: 8px 12px; border-radius: 4px; margin: 8px 0;
}
.help-content ol, .help-content ul { margin: 6px 0; padding-left: 22px; }
.help-content li { margin: 4px 0; }
.help-content code, .help-content kbd {
  background: var(--code-bg); color: var(--ink); border: 1px solid var(--line);
  padding: 2px 6px; border-radius: 5px; font-size: 0.88em;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
.help-content a { color: var(--accent-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.help-content a:hover { filter: brightness(1.2); }
.credits { list-style: none; padding-left: 0; margin: 8px 0; }
.credits li { margin-bottom: 7px; padding-left: 14px; position: relative; color: var(--ink); }
.credits li strong { color: var(--ink); }
.credits li::before { content: "•"; position: absolute; left: 0; color: var(--accent); font-weight: bold; }

@media (max-width: 600px) {
  .settings-layout { flex-direction: column; }
  .settings-nav { width: 100%; border-right: 0; border-bottom: 1px solid var(--line); flex-direction: row; overflow-x: auto; padding-right: 0; padding-bottom: 8px; }
  .tab-btn { white-space: nowrap; }
}

@media (max-width: 820px) {
  header { padding: 12px 16px; }
  .app-logo { height: 30px; }
}
@media (max-width: 560px) {
  .sub { font-size: 0.82rem; padding-left: 0; }
}

/* 3D Physical Emboss Relief Simulator Shading */
.brl-emboss-relief {
  background: var(--chip-bg) !important;
  background-image: radial-gradient(var(--chip-bg) 15%, transparent 16%), radial-gradient(var(--chip-bg) 15%, transparent 16%) !important;
  background-size: 16px 16px !important;
  background-position: 0 0, 8px 8px !important;
  padding: 12px !important;
  border-radius: 8px !important;
}
.brl-emboss-relief .don {
  fill: var(--ink) !important;
  filter: none !important;
}
.brl-emboss-relief .doff {
  fill: var(--line) !important;
  opacity: 0.5 !important;
}
/* Volume Split Divider Styling */
.brl-volumebreak {
  margin: 16px 0 10px;
  padding: 8px 14px;
  background: var(--btn-bg, var(--chip-bg));
  border: 1.5px solid var(--accent, var(--accent));
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--ink, var(--ink));
  font: 700 0.8rem/1.4 system-ui, -apple-system, sans-serif;
}
.brl-vol-tag {
  background: var(--tint);
  color: var(--accent-text);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
}
.brl-vol-page {
  color: var(--muted, var(--muted));
  font-size: 0.76rem;
  font-weight: 500;
}

/* Interline Print View Pill Styling */
.brl-interline-print {
  display: inline-block;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--chip-bg);
  border-left: 3px solid var(--accent);
  padding: 3px 8px;
  margin: 6px 0 4px 0;
  border-radius: 0 4px 4px 0;
  line-height: 1.3;
}

.brl-text-wrap {
  font-family: "APHfont", "Apple Braille", "Segoe UI Symbol", monospace;
  line-height: 1.35;
  min-height: 1.35em;
  letter-spacing: 0.04em;
  white-space: pre;
  overflow: visible;
  display: block;
}
.bcell {
  display: inline-block;
  font-family: "APHfont", "Apple Braille", "Segoe UI Symbol", monospace;
  cursor: pointer;
  box-sizing: border-box;
}
.bcell:hover {
  background: var(--sel);
  border-radius: 2px;
}

/* Math Field & Equation Styling (Light & Dark Mode) */
math-field {
  color: var(--ink);
  background: transparent;
  --math-mode-color: var(--ink);
  --text-color: var(--ink);
  --caret-color: var(--accent);
  --selection-background-color: var(--sel);
  --selection-color: var(--ink);
  border-radius: 6px;
  font-size: 1.05em;
  vertical-align: middle;
  display: inline-flex;
}
/* MathLive menu hidden (print styling only) (G11). Its virtual-keyboard toggle is hidden too: it draws its own keyboard glyph, which is not an Iconoir icon
   (Paul, 17 Oct 2026, feedback item 3b). The editor adds its own button in its place (.math-kb-btn, editor.mjs), which opens and closes the same keyboard. */
math-field::part(menu-toggle),
math-field::part(virtual-keyboard-toggle) {
  display: none !important;
}
math-field:focus, math-field:focus-within, math-field[focused] {
  outline: 2px solid var(--accent) !important;
  outline-offset: 1px !important;
  background: var(--sel) !important;
}
@media (prefers-color-scheme: dark) {
  :root:not(.light) math-field {
    color: #e6edf3;
    --math-mode-color: #e6edf3;
    --text-color: #e6edf3;
    --caret-color: #e9f2fc;
  }
  :root:not(.light) math-field:focus,
  :root:not(.light) math-field:focus-within,
  :root:not(.light) math-field[focused] {
    outline: 2px solid var(--accent) !important;
    background: var(--sel) !important;
    color: var(--ink) !important;
    --math-mode-color: #e6edf3 !important;
    --text-color: #e6edf3 !important;
  }
  :root:not(.light) math-virtual-keyboard,
  :root:not(.light) .ML__keyboard,
  :root:not(.light) .MLK__backdrop {
    --keyboard-background: #161b22;
    --keyboard-toolbar-text: #e6edf3;
    --keyboard-toolbar-text-active: #e9f2fc;
    --keyboard-toolbar-background: #0d1117;
    --keycap-background: #21262d;
    --keycap-background-active: #30363d;
    --keycap-background-hover: #30363d;
    --keycap-text: #e6edf3;
    --keycap-secondary-text: #8b949e;
    --keycap-border: #30363d;
    --keycap-border-bottom: #21262d;
    --keycap-modifier-background: #161b22;
    --keycap-modifier-border: #30363d;
  }
}
/* Same colours when dark mode is forced with the theme toggle (class on <html>). */
:root.dark math-field {
  color: #e6edf3;
  --math-mode-color: #e6edf3;
  --text-color: #e6edf3;
  --caret-color: #e9f2fc;
}
:root.dark math-field:focus,
:root.dark math-field:focus-within,
:root.dark math-field[focused] {
  outline: 2px solid var(--accent) !important;
  background: var(--sel) !important;
  color: var(--ink) !important;
  --math-mode-color: #e6edf3 !important;
  --text-color: #e6edf3 !important;
}
:root.dark math-virtual-keyboard,
:root.dark .ML__keyboard,
:root.dark .MLK__backdrop {
  --keyboard-background: #161b22;
  --keyboard-toolbar-text: #e6edf3;
  --keyboard-toolbar-text-active: #e9f2fc;
  --keyboard-toolbar-background: #0d1117;
  --keycap-background: #21262d;
  --keycap-background-active: #30363d;
  --keycap-background-hover: #30363d;
  --keycap-text: #e6edf3;
  --keycap-secondary-text: #8b949e;
  --keycap-border: #30363d;
  --keycap-border-bottom: #21262d;
  --keycap-modifier-background: #161b22;
  --keycap-modifier-border: #30363d;
}


/* Paragraph resumed after a print page turn (parser split it; braille resumes in cell 1) */
.ed-p.bana-continuation,
p.bana-continuation {
  text-indent: 0;
  border-top: 1px solid var(--line);
  padding-top: 2px;
}

/* BANA Block Style Indicators in Print View Editor */
.ed-p.bana-style-note,
p.bana-style-note,
[data-bana-style="note"] {
  border-left: 3.5px solid var(--accent);
  background: var(--tint);
  padding: 6px 12px;
  border-radius: 6px;
  margin: 8px 0;
  color: var(--ink);
}
:root.dark .ed-p.bana-style-note,
:root.dark p.bana-style-note,
:root.dark [data-bana-style="note"] {
  border-left: 3.5px solid var(--accent);
  background: var(--tint);
  color: var(--ink);
}

.ed-p.bana-style-stage,
p.bana-style-stage,
[data-bana-style="stage"] {
  margin-left: 2.5rem;
  font-style: italic;
  color: var(--muted, var(--muted));
}
:root.dark .ed-p.bana-style-stage,
:root.dark p.bana-style-stage,
:root.dark [data-bana-style="stage"] {
  color: var(--ink);
}

.ed-p.bana-style-dialogue,
p.bana-style-dialogue,
[data-bana-style="dialogue"] {
  margin-left: 1.75rem;
  text-indent: -1.75rem;
  color: var(--ink);
}

.ed-p.bana-style-caption,
p.bana-style-caption,
caption,
[data-bana-style="caption"] {
  font-size: 0.92em;
  font-style: italic;
  color: var(--muted, var(--muted));
  margin: 6px 0 10px 0;
}
:root.dark .ed-p.bana-style-caption,
:root.dark p.bana-style-caption,
:root.dark caption,
:root.dark [data-bana-style="caption"] {
  color: var(--ink);
}

.ed-p.bana-style-footnote,
p.bana-style-footnote,
note.footnote,
[data-bana-style="footnote"] {
  font-size: 0.88em;
  border-top: 1px solid var(--line);
  padding-top: 6px;
  margin-top: 10px;
  color: var(--muted, var(--muted));
}
:root.dark .ed-p.bana-style-footnote,
:root.dark p.bana-style-footnote,
:root.dark note.footnote,
:root.dark [data-bana-style="footnote"] {
  border-top-color: var(--line);
  color: var(--ink);
}

.ed-p.bana-style-poem,
p.bana-style-poem,
poem,
[data-bana-style="poem"],
[data-bana-style="verse"] {
  margin-left: 2rem;
  white-space: pre-wrap;
  line-height: 1.55;
  color: var(--ink);
}

.ed-p.bana-style-quote,
p.bana-style-quote,
blockquote.bana-style-quote,
[data-bana-style="quote"] {
  border-left: 3.5px solid var(--accent, var(--accent));
  padding: 8px 14px;
  margin: 10px 0;
  font-style: italic;
  background: var(--tint);
  border-radius: 0 6px 6px 0;
  color: var(--ink);
}
:root.dark .ed-p.bana-style-quote,
:root.dark p.bana-style-quote,
:root.dark blockquote.bana-style-quote,
:root.dark [data-bana-style="quote"] {
  background: var(--tint);
  border-left-color: var(--accent);
  color: var(--ink);
}

.ed-p.bana-style-attribution,
p.bana-style-attribution,
byline,
[data-bana-style="attribution"] {
  margin-left: 3rem;
  font-size: 0.95em;
  font-style: italic;
  color: var(--muted, var(--muted));
  margin-top: 4px;
  margin-bottom: 8px;
}
:root.dark .ed-p.bana-style-attribution,
:root.dark p.bana-style-attribution,
:root.dark byline,
:root.dark [data-bana-style="attribution"] {
  color: var(--ink);
}

.bana-style-glossary,
[data-bana-style="glossary"] {
  list-style-type: none;
  padding-left: 0;
  margin: 8px 0;
}
.bana-style-glossary > li,
[data-bana-style="glossary"] > li {
  /* Hanging indent via padding, not margin: `.editor .emboss-plain-list > li` resets the
     margin to 0, which left the -1.5rem first line poking out of the pane (G10). */
  padding-left: 1.5rem;
  text-indent: -1.5rem;
  margin-bottom: 6px;
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) .ed-p.bana-style-note,
  :root:not(.light) p.bana-style-note,
  :root:not(.light) [data-bana-style="note"] {
    border-left: 3.5px solid var(--accent);
    background: var(--tint);
    color: var(--ink);
  }
  :root:not(.light) .ed-p.bana-style-stage,
  :root:not(.light) p.bana-style-stage,
  :root:not(.light) [data-bana-style="stage"] {
    color: var(--ink);
  }
  :root:not(.light) .ed-p.bana-style-caption,
  :root:not(.light) p.bana-style-caption,
  :root:not(.light) caption,
  :root:not(.light) [data-bana-style="caption"] {
    color: var(--ink);
  }
  :root:not(.light) .ed-p.bana-style-footnote,
  :root:not(.light) p.bana-style-footnote,
  :root:not(.light) note.footnote,
  :root:not(.light) [data-bana-style="footnote"] {
    border-top-color: var(--line);
    color: var(--ink);
  }
  :root:not(.light) .ed-p.bana-style-attribution,
  :root:not(.light) p.bana-style-attribution,
  :root:not(.light) byline,
  :root:not(.light) [data-bana-style="attribution"] {
    color: var(--ink);
  }
  :root:not(.light) .ed-p.bana-style-quote,
  :root:not(.light) p.bana-style-quote,
  :root:not(.light) blockquote.bana-style-quote,
  :root:not(.light) [data-bana-style="quote"] {
    background: var(--tint);
    border-left-color: var(--accent);
    color: var(--ink);
  }
}

.bana-style-exercise,
[data-bana-style="exercise"],
[data-list-kind="exercise"] {
  list-style-type: decimal;
  margin-left: 1.5rem;
  margin-top: 6px;
  margin-bottom: 6px;
}

.bana-style-exercise-sub,
[data-bana-style="exercise-sub"] {
  list-style-type: lower-alpha;
  margin-left: 3.0rem;
  margin-top: 4px;
  margin-bottom: 4px;
}

/* Plain lists, TOC lists, and index lists: zero bullets */
.emboss-plain-list,
.bana-style-toc,
.bana-style-index,
[data-bana-style="toc"],
[data-bana-style="index"],
[data-list-kind="toc"],
[data-list-kind="index"],
[data-list-kind="plain"] {
  list-style: none !important;
  list-style-type: none !important;
  padding-left: 0 !important;
  margin-left: 0.5rem;
}

.emboss-plain-list > li,
.bana-style-toc > li,
.bana-style-index > li,
[data-bana-style="toc"] > li,
[data-bana-style="index"] > li {
  list-style: none !important;
  list-style-type: none !important;
  margin: 4px 0;
  position: relative;
}

/* Multi-level TOC & Plain list indentation */
.emboss-plain-list > li[data-level="1"],
.bana-style-toc > li[data-level="1"],
li.bana-style-toc-entry[data-level="1"] {
  margin-left: 1.5rem !important;
}

.emboss-plain-list > li[data-level="2"],
.bana-style-toc > li[data-level="2"],
li.bana-style-toc-entry[data-level="2"] {
  margin-left: 3.0rem !important;
}

.emboss-plain-list > li[data-level="3"],
.bana-style-toc > li[data-level="3"],
li.bana-style-toc-entry[data-level="3"] {
  margin-left: 4.5rem !important;
}

/* TOC entry layout with tabular page numbering. Not flex: in a flex row every text run
   (bold "POEM", the plain title, a line break) became its own column, so a long entry
   broke into ragged columns (G9). The entry flows as ordinary text with a hanging indent,
   room is kept on the right, and the page number sits at the right of its last line. */
.bana-style-toc > li[data-page],
li.bana-style-toc-entry[data-page] {
  display: block;
  padding-right: 4.5rem;
  padding-left: 1.5rem !important;   /* the li can carry the list's own class, whose padding-left: 0 !important would win */
  text-indent: -1.5rem;
}

.bana-style-toc > li[data-page]::after,
li.bana-style-toc-entry[data-page]::after {
  content: attr(data-page);
  position: absolute;
  right: 0;
  bottom: 0;
  text-indent: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  max-width: 4.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}

:root.dark .bana-style-toc > li[data-page]::after,
:root.dark li.bana-style-toc-entry[data-page]::after {
  color: var(--muted);
}
@media (prefers-color-scheme: dark) {
  :root:not(.light) .bana-style-toc > li[data-page]::after,
  :root:not(.light) li.bana-style-toc-entry[data-page]::after {
    color: var(--muted);
  }
}

/* Sidebar / Box Visual Callout Cards (Representing BANA Top & Bottom Boxlines) */
.emboss-sidebar-card,
aside.bana-style-sidebar,
[data-bana-style="sidebar"] {
  /* Paul, 17 Oct 2026: the SAME blue line on all four sides (the right edge was the pale --line, so it seemed to vanish, especially in nested boxes). */
  border: 2.5px solid var(--accent);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
  background: var(--tint);
  position: relative;
  box-sizing: border-box;
}

.emboss-sidebar-card > h1:first-child,
.emboss-sidebar-card > h2:first-child,
.emboss-sidebar-card > h3:first-child,
aside.bana-style-sidebar > h1:first-child,
aside.bana-style-sidebar > h2:first-child,
aside.bana-style-sidebar > h3:first-child {
  margin-top: 0;
  color: var(--accent-dark, var(--accent-text));
  font-size: 1.1rem;
  font-weight: 700;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.5rem;
  margin-bottom: 0.75rem;
}

.emboss-sidebar-card > :last-child,
aside.bana-style-sidebar > :last-child {
  margin-bottom: 0;
}

:root.dark .emboss-sidebar-card,
:root.dark aside.bana-style-sidebar,
:root.dark [data-bana-style="sidebar"] {
  background: var(--tint);
  border-color: var(--accent);
}
:root.dark .emboss-sidebar-card > h1:first-child,
:root.dark .emboss-sidebar-card > h2:first-child,
:root.dark .emboss-sidebar-card > h3:first-child,
:root.dark aside.bana-style-sidebar > h1:first-child,
:root.dark aside.bana-style-sidebar > h2:first-child,
:root.dark aside.bana-style-sidebar > h3:first-child {
  color: var(--accent-text);
  border-bottom-color: var(--line);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) .emboss-sidebar-card,
  :root:not(.light) aside.bana-style-sidebar,
  :root:not(.light) [data-bana-style="sidebar"] {
    background: var(--tint);
    border-color: var(--accent);
  }
  :root:not(.light) .emboss-sidebar-card > h1:first-child,
  :root:not(.light) .emboss-sidebar-card > h2:first-child,
  :root:not(.light) .emboss-sidebar-card > h3:first-child,
  :root:not(.light) aside.bana-style-sidebar > h1:first-child,
  :root:not(.light) aside.bana-style-sidebar > h2:first-child,
  :root:not(.light) aside.bana-style-sidebar > h3:first-child {
    color: var(--accent-text);
    border-bottom-color: var(--line);
  }
}

/* Style Inspector Live Status Badge */
.style-inspector-badge {
  font-size: 0.92em;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 4px;
  background: var(--btn-bg, var(--chip-bg));
  border: 1px solid var(--line, var(--line));
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.style-inspector-badge:hover {
  border-color: var(--accent);
  color: var(--accent-text);
}
.style-inspector-badge:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
:root.dark .style-inspector-badge {
  background: #21262d;
  border-color: #30363d;
  color: #e6edf3;
}
:root.dark .style-inspector-badge:hover {
  border-color: var(--accent);
  color: var(--accent-text);
}
@media (prefers-color-scheme: dark) {
  :root:not(.light) .style-inspector-badge {
    background: #21262d;
    border-color: #30363d;
    color: #e6edf3;
  }
  :root:not(.light) .style-inspector-badge:hover {
    border-color: var(--accent);
    color: var(--accent-text);
  }
}

/* Loading Overlay */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  pointer-events: auto;
}
.loading-overlay[hidden] {
  display: none !important;
}
.loading-card {
  background: var(--panel-bg, #ffffff);
  color: var(--ink, var(--ink));
  border: 1px solid var(--line, var(--line));
  border-radius: 14px;
  padding: 28px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 280px;
  max-width: 420px;
  text-align: center;
}
.loading-spinner {
  width: 38px;
  height: 38px;
  border: 3.5px solid var(--line);
  border-top-color: var(--accent, var(--accent));
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.loading-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink, var(--ink));
}
.loading-msg {
  font-size: 0.85rem;
  color: var(--muted, var(--muted));
  min-height: 1.2rem;
}
.loading-percent {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--accent, var(--accent-text));
  min-height: 1.5rem;
  letter-spacing: 0.5px;
}
:root.dark .loading-card,
@media (prefers-color-scheme: dark) {
  :root:not(.light) .loading-card {
    background: var(--pane-bg);
    border-color: var(--line);
    color: var(--ink);
  }
  :root:not(.light) .loading-title {
    color: var(--ink);
  }
  :root:not(.light) .loading-msg {
    color: var(--muted);
  }
  :root:not(.light) .loading-percent {
    color: var(--accent-text);
  }
}


/* =====================================================================================================================
   QUICK MODE'S BUTTONS, MENU BAR AND MENU: Translate's vocabulary (tester feedback 10 Oct, item 6; Paul: "I am happy with Translate's").
   The header carries the Paige mark, as Translate's does (PB, 22 Oct 2026); the name stays Emboss.
     .pill-btn   an action: white, a hairline border, 8px corners, regular weight; the border turns Paige blue on hover. The TEXT turns
                 --accent-text, not Translate's --accent: that blue is 4.1:1 on white and these labels are read text (it needs 4.5:1);
                 --accent-text is 12:1, and in dark it is the near-white. (An icon-only button's drawing may take --accent: it only needs 3:1.)
     .icon-btn   a square, icon-only action (the gear, the dialogs' close buttons): the same border and corners
     the focus ring is a 2px blue line two pixels out, on both, as the other focused controls here have; the transition names its
     properties instead of "all", so the ring is there at once and does not grow from nothing over a fifth of a second
     .menu-dropdown   the Download menu, in the metrics of Translate's Export menu: 10px corners, 4px padding, a blue wash on the item
   Every rule is scoped to body:not(.editor-page): the editor has its own header and its own copy of these classes in its page, and is
   not changed by this.
   ===================================================================================================================== */
body:not(.editor-page) .head-right { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; position: relative; flex: 1 1 auto; }
/* Advanced Editor sits on the left, by the name, as the editor's Quick Mode does (PB, 22 Oct 2026); still the toolbar's first stop. */
body:not(.editor-page) #advancedBtn { margin-right: auto; }
/* min-height, not Translate's fixed height, so a label that wraps (a long translation) grows the button rather than spilling out of it. */
body:not(.editor-page) .pill-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--pill-bg); color: var(--ink); filter: none;
  font: inherit; font-size: .88rem; font-weight: 400; white-space: nowrap; cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
body:not(.editor-page) .icon-btn { transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease; }
body:not(.editor-page) .pill-btn:hover { border-color: var(--accent); color: var(--accent-text); filter: none; }
body:not(.editor-page) .pill-btn:focus-visible,
body:not(.editor-page) .icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body:not(.editor-page) .pill-btn:disabled { opacity: .55; cursor: not-allowed; }
body:not(.editor-page) .pill-btn:disabled:hover { border-color: var(--line); color: var(--ink); }
/* The gear, scaled as Translate's is: 34px square, the drawing at 0.9em of a 1.3rem button. */
body:not(.editor-page) #settingsBtn { font-size: calc(1.45rem * 34 / 38); }
body:not(.editor-page) #settingsBtn .icon { width: 0.9em; height: 0.9em; }
body:not(.editor-page) .menu-dropdown { top: calc(100% + 4px); min-width: 220px; border-radius: 10px; padding: 4px; gap: 0; }
body:not(.editor-page) .menu-dropdown-item { padding: 8px 10px; border-radius: 7px; font-size: .94rem; font-weight: 400; }
body:not(.editor-page) .menu-dropdown-item:hover,
body:not(.editor-page) .menu-dropdown-item:focus-visible { background: var(--sel); color: var(--ink); }

/* Service-worker "new version available" toast (created by the inline registration
   script in index.html and editor/index.html; role=status so it is announced). */
.sw-update-toast {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 10000;
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  max-width: calc(100vw - 32px); padding: 10px 14px;
  background: var(--panel-head, #fff); color: var(--ink, #444444);
  border: 1px solid var(--line, #eaebec); border-radius: 10px;
  font-size: 0.95rem;
}
.sw-update-toast:empty { display: none; }
.sw-update-toast button {
  font: inherit; padding: 6px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); background: var(--pill-bg); color: var(--ink);
}
.sw-update-toast button.sw-update-later { background: transparent; color: var(--ink, #444444); border-color: var(--line, #eaebec); }
.sw-update-toast button:focus-visible { outline: 3px solid var(--linkb, #f5b800); outline-offset: 2px; }

/* "Report a problem" (A89 step 2): the row at the top of Help, and its dialog (web/problem-report.mjs). */
.report-problem-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; padding: 8px 12px; border-radius: 6px; background: var(--hover-wash); color: var(--ink); font-size: .92rem; }
.report-problem-row .pill-btn { height: 34px; padding: 0 12px; border: 1px solid var(--line); background: var(--pill-bg); color: var(--ink); border-radius: 8px; font: inherit; font-size: .88rem; font-weight: 400; cursor: pointer; }
.report-problem-row .pill-btn:hover, .report-problem-row .pill-btn:focus-visible { border-color: var(--accent); color: var(--accent-text); }
.problem-dialog { max-width: 560px; }
.problem-dialog .problem-intro { margin: 4px 0 12px; line-height: 1.5; }
.problem-dialog .problem-label { display: block; font-weight: 600; margin-bottom: 4px; }
.problem-dialog textarea { width: 100%; font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--select-bg); color: var(--ink); resize: vertical; }
.problem-dialog .problem-include { margin-top: 12px !important; }
.problem-dialog .problem-foot { gap: 8px; }
.problem-dialog .problem-foot .pill-btn { min-height: 34px; padding: 0 12px; border: 1px solid var(--line); background: var(--pill-bg); color: var(--ink); border-radius: 8px; font: inherit; font-size: .88rem; font-weight: 400; cursor: pointer; }


/* =====================================================================================================================
   THE BRAILLE AS DRAWN BY web/braille-render.mjs (renderBraille): the editor's braille pane and, since 17 Oct 2026 (feedback item 8), Quick Mode's
   preview. These rules used to live in the editor's page; they are here so both pages draw the same cells, page markers and spacing.
   ===================================================================================================================== */
.braille {
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-family: "APHfont", "Apple Braille", "Segoe UI Symbol", monospace;
  line-height: 1.4;
  letter-spacing: normal;
  white-space: pre-wrap;
  word-break: break-all;
}
.braille:focus-visible {
  box-shadow: inset 0 0 0 2px var(--accent);
}
.braille .brl-row {
  line-height: 1.4;
  margin: 0;
  padding: 0;
  white-space: pre;
  border-radius: 4px;
  cursor: pointer;
  overflow: visible;
  box-sizing: border-box;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: normal;
}
.braille .brl-text-wrap {
  line-height: 1.4;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: normal;
  white-space: pre;
  box-sizing: border-box;
}
.braille .bcell {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: normal;
}
.braille .brl-row.brl-linked { background:var(--link); color:var(--on-mark); }
.braille .brl-row.brl-reading { background:var(--c2); color:var(--on-mark); }
/* The word linked between print and braille looks the same in both panes (Paul, 7 Oct 2026), in a strong yellow that stands out
   (the pale --link was too faint): #ffd23f with the text in its own colour (6.7:1); in dark mode a bright gold with dark text (9.7:1). */
/* The word clicked stands out from its line (18 Oct 2026: with both in Translate's pale --link the word could not be seen): the line keeps
   --link, the word's own cells take Paige yellow (--linkb, Translate's own colour), with near-black dots; the unraised dots pale. */
.braille .bcell.cell-hl { background:var(--word-hl); color:var(--on-mark); border-radius:4px; }
/* ONE BOX ROUND THE WORD, NOT ONE PER CELL (PB, 23 Oct 2026): Translate's 4px corners on the word's two ends only, square where cells meet. */
.braille .bcell.cell-hl + .bcell.cell-hl { border-top-left-radius:0; border-bottom-left-radius:0; }
.braille .bcell.cell-hl:has(+ .bcell.cell-hl) { border-top-right-radius:0; border-bottom-right-radius:0; }
.braille rect.cell-box { fill:var(--word-hl); }
:root.dark .braille .bcell.cell-hl { background:var(--word-hl); color:#0d1117; }
@media (prefers-color-scheme: dark) { :root:not(.light) .braille .bcell.cell-hl { background:var(--word-hl); color:#0d1117; } }
.braille .bcell.cell-hl circle.doff { fill:var(--link); }
.braille .bcell.cell-speaking circle.don { fill:var(--accent-text); }
.braille .brl-sr-hint { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.braille .brl-svg { display:block; width:100%; max-width:100%; height:auto; }
.braille .brl-svg .don { fill:var(--ink); }
.braille .brl-svg .doff { fill:var(--line); }
.braille .brl-pagebreak { color:var(--muted); font:600 .7rem/2 -apple-system,system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase; text-align:center; border-top:1px solid var(--line); margin:6px 0; }
.braille .brl-volumebreak { margin:14px 0 8px; padding:6px 12px; background:var(--btn-bg, var(--chip-bg)); border:1.5px solid var(--accent, var(--accent)); border-radius:6px; display:flex; align-items:center; justify-content:space-between; color:var(--ink); font:700 .78rem/1.4 system-ui,-apple-system,sans-serif; }
.braille .brl-vol-tag { background:var(--tint); color:var(--accent-text); padding:2px 7px; border-radius:4px; font-size:.7rem; letter-spacing:.04em; text-transform:uppercase; font-weight:700; }
.braille .brl-vol-page { color:var(--muted); font-size:.74rem; font-weight:500; }

/* Quick Mode's preview: the same drawing in a box of its own (the editor's pane is a flex item with its own padding and background) */
.result .braille.preview { padding: 14px; background: var(--panel); max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; box-sizing: border-box; border-radius: 0 0 14px 14px; }
.result .braille.preview:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }