/* The Sword Sharpener stub styles: system fonts only, one spacing and type scale, left nav that collapses to a Menu button on small screens. */

/* Design tokens: colors (all text pairs meet WCAG AA contrast), spacing scale, type scale */
:root {
  --bg: #fbfaf7;
  --surface: #ffffff;
  --text: #1d1f24;
  --muted: #4f5561;
  --border: #dedad0;
  --nav-bg: #1f2a3a;
  --nav-text: #f2f4f7;
  --nav-hover: #2e3d54;
  --nav-active: #3a4c68;
  --accent: #d4a017;
  --focus: #ffbf47;
  --focus-dark: #1a4f8b;
  --note-bg: #fff8e1;
  --note-border: #b38600;
  --note-text: #6b4f00;
  --link: #1a4f8b;
  --input-border: #8a8f99;
  --hover: #eef1f6;
  --footer-bg: #eceae4;
  --th-bg: #f1efe9;
  --btn-text: #1f2a3a;
  --primary-bg: #1f2a3a;
  --primary-text: #f2f4f7;
  --wj-ui: #a3191f;
  --topbar-h: 3.5rem;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: clamp(1.75rem, 1.2rem + 2.5vw, 2.5rem);
  /* Ethiopic fonts at the end so Amharic (Ge'ez script) glyphs fall back to an installed system font. */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Ethiopic", "Nyala", "Abyssinica SIL", sans-serif;
  --font-serif: Georgia, "Times New Roman", "Noto Serif", "Noto Serif Ethiopic", "Abyssinica SIL", "Nyala", serif;
  --navwidth: 15rem;
  --radius: 4px;
}

/* Dark mode: data-theme is set before first paint by the inline head script (tss.theme override, else the
   system setting); the media query covers pages viewed with JavaScript off. Every text pair meets WCAG AA. */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] {
  --bg: #14171c; --surface: #1d2128; --text: #e8e6e1; --muted: #b4b8c0; --border: #3a3f48;
  --nav-bg: #0f141c; --nav-text: #eef1f5; --nav-hover: #1f2938; --nav-active: #2b3a52; --accent: #e0b23a;
  --focus: #ffbf47; --focus-dark: #8cc4ff; --note-bg: #2b2513; --note-border: #c9a227; --note-text: #f0d27a;
  --link: #8cc4ff; --input-border: #7b818c; --hover: #262c36; --footer-bg: #101318; --th-bg: #252a33;
  --btn-text: #e8e6e1; --primary-bg: #3a5f96; --primary-text: #ffffff; --wj-ui: #ff8f87;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    color-scheme: dark;
    --bg: #14171c; --surface: #1d2128; --text: #e8e6e1; --muted: #b4b8c0; --border: #3a3f48;
    --nav-bg: #0f141c; --nav-text: #eef1f5; --nav-hover: #1f2938; --nav-active: #2b3a52; --accent: #e0b23a;
    --focus: #ffbf47; --focus-dark: #8cc4ff; --note-bg: #2b2513; --note-border: #c9a227; --note-text: #f0d27a;
    --link: #8cc4ff; --input-border: #7b818c; --hover: #262c36; --footer-bg: #101318; --th-bg: #252a33;
    --btn-text: #e8e6e1; --primary-bg: #3a5f96; --primary-text: #ffffff; --wj-ui: #ff8f87;
  }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
}
p { margin: 0 0 var(--space-4); }
a { color: var(--link); }
button, input, select, textarea { color: var(--text); }
.srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html:not(.js) .jsonly { display: none !important; }

/* Accessibility helpers: skip link, visible focus ring on every interactive element */
.skiplink {
  position: absolute; inset-inline-start: var(--space-2); top: -10rem; z-index: 100;
  background: var(--focus); color: #000; padding: var(--space-2) var(--space-4); border-radius: var(--radius); font-weight: 600;
}
.skiplink:focus { top: var(--space-2); }
:focus-visible { outline: 3px solid var(--focus-dark); outline-offset: 2px; }
.sidenav :focus-visible, .topbar :focus-visible { outline-color: var(--focus); }
main:focus { outline: none; }

/* Sticky top bar on every page: Menu (phones), brand (phones), version selector or Read link, language, style, theme */
.topbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3);
  position: sticky; top: 0; z-index: 20; min-height: var(--topbar-h);
  padding: var(--space-2) var(--space-4); background: var(--nav-bg); color: var(--nav-text);
  border-bottom: 1px solid var(--nav-hover);
}
.topbar .brand { display: none; font-size: var(--text-lg); }
.navtoggle { display: none; }
.topcontrols { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-inline-start: auto; }
.topfield { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; }
.topfield select { font: inherit; font-weight: 400; min-height: 40px; max-width: 18rem; padding: 0 var(--space-2); border-radius: var(--radius); border: 1px solid var(--nav-text); background: var(--nav-hover); color: var(--nav-text); }
.toplink, .topbtn {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px; min-width: 40px; padding: 0 var(--space-3);
  font: inherit; font-size: var(--text-sm); color: var(--nav-text); background: transparent; text-decoration: none;
  border: 1px solid rgba(242,244,247,.55); border-radius: var(--radius); cursor: pointer;
}
.toplink:hover, .topbtn:hover, .topbtn[aria-expanded="true"] { background: var(--nav-hover); }
.toplinkver { font-weight: 700; }
.iconbtn { justify-content: center; padding: 0; }
.toppop { position: relative; }
.styledot { display: inline-block; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 1px solid var(--nav-text); }
.poppanel {
  position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 30; width: min(24rem, calc(100vw - 1.5rem));
  max-height: calc(100vh - var(--topbar-h) - 1rem); overflow: auto;
  padding: var(--space-3) var(--space-4) var(--space-4); background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 10px 28px rgba(0,0,0,.3);
}
.poptitle { font-size: var(--text-lg); margin: 0 0 var(--space-2); }
.popsub { font-size: var(--text-sm); color: var(--muted); margin: var(--space-3) 0 var(--space-2); font-weight: 600; }
.choicegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: var(--space-2); }
.stylegrid { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.choice {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 44px; padding: var(--space-2) var(--space-3);
  font: inherit; text-align: start; background: var(--surface); border: 1px solid var(--input-border); border-radius: var(--radius); cursor: pointer;
}
.choice:hover { background: var(--hover); }
.choice[aria-pressed="true"] { border: 2px solid var(--link); background: var(--hover); font-weight: 700; }
.choicename { font-size: var(--text-base); }
.choicesub { font-size: .78rem; color: var(--muted); font-weight: 400; }
/* Bible style swatches: a tiny open book in each style's binding, paper, and edge colors */
.styleswatch { display: flex; gap: 1px; width: 100%; height: 3rem; padding: 3px; border-radius: 3px; margin-bottom: var(--space-1); background: var(--swb); }
.swpage { flex: 1; background: var(--swp); border-radius: 1px; }
.styleswatch .swpage:first-child { border-inline-start: 3px solid var(--swe); }
.styleswatch .swpage:last-child { border-inline-end: 3px solid var(--swe); }
.sw-classic { --swb: #4a2c1d; --swp: #fbf6e8; --swe: #d9b45a; }
.sw-modern { --swb: #c9ced6; --swp: #ffffff; --swe: #ffffff; }
.sw-study { --swb: #1f3354; --swp: #fdfcf8; --swe: #fdfcf8; position: relative; }
.styleswatch.sw-study::after { content: ""; position: absolute; inset-inline-end: -5px; top: 8px; width: 6px; height: 1.8rem; background: linear-gradient(#8b1e2d 0 20%, #9a5b00 20% 40%, #1e6b3a 40% 60%, #5b2a86 60% 80%, #1f4e8c 80%); border-radius: 0 2px 2px 0; }
.sw-parchment { --swb: #5a3a1e; --swp: #e9d6a8; --swe: #b89a62; }
.styledot.sw-classic { background: linear-gradient(135deg, #4a2c1d 50%, #d9b45a 50%); }
.styledot.sw-modern { background: linear-gradient(135deg, #c9ced6 50%, #ffffff 50%); }
.styledot.sw-study { background: linear-gradient(135deg, #1f3354 50%, #1f4e8c 50%); }
.styledot.sw-parchment { background: linear-gradient(135deg, #5a3a1e 50%, #e9d6a8 50%); }

/* Layout: fixed width left nav plus content column */
.layout { display: flex; flex: 1; }
.sidenav {
  width: var(--navwidth);
  flex-shrink: 0;
  background: var(--nav-bg);
  color: var(--nav-text);
  padding: var(--space-5) 0;
}
.brand { color: inherit; text-decoration: none; font-weight: 700; font-family: var(--font-serif); }
.sidebrand {
  display: block; font-size: var(--text-lg);
  padding: 0 var(--space-5) var(--space-4); margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--nav-hover);
}
.sidenav ul { list-style: none; margin: 0; padding: 0; }

/* Nav links: hover tint; active page gets a gold bar, stronger tint, and bold text (not color alone) */
.sidenav li a {
  display: flex; align-items: center; min-height: 44px;
  padding: var(--space-2) var(--space-5);
  color: var(--nav-text); text-decoration: none;
  border-inline-start: 4px solid transparent;
}
.sidenav li a:hover { background: var(--nav-hover); text-decoration: underline; }
.sidenav li a[aria-current="page"] { background: var(--nav-active); border-inline-start-color: var(--accent); font-weight: 700; }
.sidenav :focus-visible { outline-offset: -3px; }

/* Main content */
main { flex: 1; min-width: 0; max-width: 46rem; padding: var(--space-6) clamp(var(--space-4), 4vw, var(--space-7)); }
main.widepage { max-width: 72rem; }
h1 { font-family: var(--font-serif); font-size: var(--text-xl); line-height: 1.2; margin: 0 0 var(--space-3); }
.tagline { font-size: var(--text-lg); color: var(--muted); }
.verse { margin: var(--space-6) 0; padding: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-inline-start: 4px solid var(--accent); border-radius: var(--radius); }
.verse blockquote { margin: 0; font-family: var(--font-serif); font-size: var(--text-lg); }
.verse blockquote p { margin: 0; }
.verse figcaption { margin-top: var(--space-3); color: var(--muted); font-size: var(--text-sm); }

/* Placeholder and TODO markers: dashed box so stub content is obvious at a glance */
.placeholder { padding: var(--space-3) var(--space-4); background: var(--note-bg); color: var(--text); border: 2px dashed var(--note-border); border-radius: var(--radius); }
.tag { font-weight: 700; color: var(--note-text); margin-inline-end: var(--space-1); }

/* Content pages: section headings, spaced lists, simple form, status list and table */
h2 { font-family: var(--font-serif); font-size: 1.35rem; line-height: 1.3; margin: var(--space-6) 0 var(--space-3); }
.spaced { padding-inline-start: var(--space-5); margin: 0 0 var(--space-4); }
.spaced li { margin-bottom: var(--space-3); }
.contactform fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); margin: 0; display: grid; gap: var(--space-2); max-width: 32rem; }
.contactform legend { font-weight: 700; padding: 0 var(--space-2); }
.contactform input, .contactform textarea { font: inherit; padding: var(--space-2); border: 1px solid var(--input-border); border-radius: var(--radius); background: var(--surface); }
.contactform button { justify-self: start; margin-top: var(--space-2); font: inherit; padding: var(--space-2) var(--space-5); min-height: 44px; border-radius: var(--radius); border: 1px solid var(--primary-bg); background: var(--primary-bg); color: var(--primary-text); }
.contactform fieldset:disabled { opacity: .7; }
.contactform fieldset:disabled button { cursor: not-allowed; }
.statuslist { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-5); margin: 0 0 var(--space-5); }
.statuslist dt { font-weight: 700; }
.statuslist dd { margin: 0; overflow-wrap: anywhere; }
.tablewrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.statustable { border-collapse: collapse; width: 100%; font-size: var(--text-sm); }
.statustable th, .statustable td { text-align: start; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); vertical-align: top; }
.statustable th { background: var(--th-bg); }
.footer a { color: var(--link); }

/* Yoruba and Igbo stack tone marks on dotted vowels (ọ̀, ẹ́, ụ); prefer fonts known to place combining marks well. */
:lang(yo), :lang(ig) { --font-serif: "Charis SIL", "Gentium Plus", "Noto Serif", "Times New Roman", serif; --font-sans: "Noto Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; }
:lang(am) { --font-sans: "Noto Sans Ethiopic", "Nyala", "Abyssinica SIL", system-ui, "Segoe UI", sans-serif; --font-serif: "Noto Serif Ethiopic", "Abyssinica SIL", "Nyala", Georgia, serif; }

/* Footer with version */
.footer { padding: var(--space-3) clamp(var(--space-4), 4vw, var(--space-7)); background: var(--footer-bg); color: var(--muted); font-size: var(--text-sm); border-top: 1px solid var(--border); }
.footer p { margin: 0; }

/* Phones: Menu button and brand join the top bar; the nav drops down under it. Without JS the nav simply stays open. */
@media (max-width: 48rem) {
  .topbar { padding: var(--space-2) var(--space-3); }
  .topbar .brand { display: inline; }
  .topcontrols { flex-basis: 100%; min-width: 0; margin-inline-start: 0; }
  .topfield { flex: 1 1 10rem; min-width: 0; }
  .topfield select { flex: 1; min-width: 0; max-width: none; }
  .toppop { position: static; }
  .poppanel { inset-inline: var(--space-2); width: auto; }
  .navtoggle {
    display: inline-flex; align-items: center; gap: var(--space-2);
    min-height: 44px; padding: var(--space-2) var(--space-3);
    background: transparent; color: inherit; font: inherit; cursor: pointer;
    border: 1px solid var(--nav-text); border-radius: var(--radius);
  }
  .navtoggleicon, .navtoggleicon::before, .navtoggleicon::after {
    display: block; width: 1.1rem; height: 2px; background: currentColor; content: "";
  }
  .navtoggleicon { position: relative; }
  .navtoggleicon::before, .navtoggleicon::after { position: absolute; left: 0; }
  .navtoggleicon::before { top: -6px; }
  .navtoggleicon::after { top: 6px; }
  [aria-expanded="true"] .navtoggleicon { background: transparent; }
  [aria-expanded="true"] .navtoggleicon::before { top: 0; transform: rotate(45deg); }
  [aria-expanded="true"] .navtoggleicon::after { top: 0; transform: rotate(-45deg); }
  .layout { flex-direction: column; }
  .sidenav { width: 100%; padding: var(--space-1) 0 var(--space-2); }
  .sidebrand { display: none; }
  .js .sidenav { display: none; }
  .js .sidenav.open { display: block; }
  main { padding-top: var(--space-5); }
}

/* User preferences: reduced motion, forced colors (Windows high contrast), print */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media (forced-colors: active) { .sidenav li a[aria-current="page"] { border-inline-start-color: Highlight; } .choice[aria-pressed="true"] { border-color: Highlight; } .placeholder { border-color: CanvasText; } }
@media print { .topbar, .sidenav, .skiplink { display: none !important; } main { max-width: none; padding: 0; } }
.comingsoon h2 { margin-top: 0; font-size: 1.15rem; }
.comingsoon ul { margin: 0 0 var(--space-3); }