/* KRNS shared theme. Loaded after each service's own stylesheet. */
:root {
  --krns-navy: #122337;
  --krns-navy-deep: #0a1728;
  --krns-gold: #d6b773;
  --krns-gold-light: #f3e4be;
  --krns-paper: #f7f6f2;
  --krns-line: #e2e3df;
  --krns-ink: #243344;
  --krns-muted: #637080;
  --krns-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
html[data-krns-page] {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 90px;
}
html[data-krns-page] body {
  min-width: 0;
  padding-top: 0px !important;
  font-family: var(--krns-font);
  overflow-wrap: anywhere;
}
html[data-krns-page] :is(input, select, textarea) { min-width: 0; max-width: 100%; }
html[data-krns-page] :is(button, .button, .primary-button) { overflow-wrap: anywhere; }
html[data-krns-page] :is(img, video) { max-width: 100%; }
html[data-krns-page] .site-header { top: 0 !important; }
html[data-krns-page] .skip-link { z-index: 3000; }
html[data-krns-page] .skip-link:focus { top: 8px; }
html[data-krns-page] :is(.hero-layout, .hero-grid, .story-grid, .cross-layout, .resurrection-grid,
  .comfort-layout, .board-layout, .world-grid, .release-grid, .history-grid, .gospel-grid,
  .invitation-card, .contact-card, .truth-card, .reflection-grid, .community-head, .notes-list,
  .search-condition-row, .verses) > * { min-width: 0; }
html[data-krns-page] :is(.button, .primary-button) {
  border-radius: 12px;
  max-width: 100%;
  white-space: normal;
  line-height: 1.5;
}
html[data-krns-page] :is(.language-switch, .lang-button, .language-button, .menu-button, .nav-toggle, .menu-toggle) { flex-shrink: 0; }
html[data-krns-page] :is(.footer-links, .footer-grid, .footer-row) { flex-wrap: wrap; }

/* Shared palette; retain the illustrated scenes and each service's structure. */
html[data-krns-page="church"] {
  --bg: var(--krns-paper); --surface: #fff; --surface-soft: #f5f3ed;
  --primary: var(--krns-navy); --primary-dark: var(--krns-navy-deep);
  --accent: #a37b38; --text: var(--krns-ink); --muted: var(--krns-muted);
  --line: var(--krns-line); --success-soft: #eef1f4;
  --radius-lg: 24px; --radius-md: 18px; --radius-sm: 12px;
  --shadow: 0 14px 36px rgba(18, 35, 55, .08);
}
html[data-krns-page="church"] .site-header { background: rgba(247, 246, 242, .97); }
html[data-krns-page="church"] .hero-card { background: linear-gradient(150deg, #233b55, #0c1b2d); }
html[data-krns-page="church"] .brand { flex-shrink: 0; }
html[data-krns-page="church"] .desktop-nav { min-width: 0; gap: clamp(12px, 1.4vw, 20px); }
html[data-krns-page="church"] .desktop-nav a { text-align: center; line-height: 1.5; }
html[data-krns-page="church"] :is(.hero h1, .page-hero-box h1) { overflow-wrap: anywhere; }
html[data-krns-page="church"] :is(.board-search, .form-field, .question-card, .question-meta, .board-toolbar-top) { min-width: 0; }
html[data-krns-page="church"] .board-toolbar-top { flex-wrap: wrap; }
html[data-krns-page="church"] .board-compose { top: 92px; }
html[data-krns-page="church"] .bottom-nav { bottom: max(10px, env(safe-area-inset-bottom, 0px)); }
html[data-krns-page="church"] .bottom-nav a { font-size: 12px; text-align: center; line-height: 1.4; }
@media (max-width: 1119px) {
  html[data-krns-page="church"] .desktop-nav { display: none; }
  html[data-krns-page="church"] .menu-button { display: grid !important; }
  html[data-krns-page="church"] .mobile-menu { display: none !important; }
  html[data-krns-page="church"] .mobile-menu.open { display: grid !important; }
  html[data-krns-page="church"] .mobile-menu {
    max-height: calc(100vh - 142px);
    max-height: calc(var(--krns-visual-height, 100dvh) - 90px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  html[data-krns-page="church"] .nav { gap: 9px; }
  html[data-krns-page="church"] .brand { margin-right: auto; }
  html[data-krns-page="church"] .board-compose { position: static; }
}

html[data-krns-page="gospel"], html[data-krns-page="notes"] {
  --navy-950: var(--krns-navy-deep); --navy-900: var(--krns-navy);
  --gold: var(--krns-gold); --gold-light: var(--krns-gold-light);
  --ink: var(--krns-ink); --muted: var(--krns-muted);
  --paper: var(--krns-paper); --line: var(--krns-line);
}
html[data-krns-page="gospel"] .nav { gap: 16px; }
html[data-krns-page="gospel"] .brand { min-width: 0; }
html[data-krns-page="gospel"] .nav-links { gap: clamp(12px, 1.7vw, 26px); }
html[data-krns-page="gospel"] .story-sticky { top: 110px; }
html[data-krns-page="gospel"] .hero { min-height: 100svh; }
html[data-krns-page="gospel"] .modal-dialog { min-width: 0; }
html[data-krns-page="gospel"] .modal-dialog > .eyebrow { padding-right: 38px; }
html[data-krns-page="gospel"] .nav-links.open {
  max-height: calc(100vh - 152px);
  max-height: calc(var(--krns-visual-height, 100dvh) - 100px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (min-width: 901px) and (max-width: 1119px) {
  html[data-krns-page="gospel"] .nav-toggle { display: grid; margin-left: auto; place-items: center; }
  html[data-krns-page="gospel"] .language-switch { margin-left: 0; }
  html[data-krns-page="gospel"] .nav-links {
    position: absolute;
    top: 76px;
    right: 20px;
    left: 20px;
    display: none;
    padding: 18px;
    border: 1px solid #415065;
    border-radius: 16px;
    background: var(--krns-navy);
  }
  html[data-krns-page="gospel"] .nav-links.open { display: grid; gap: 4px; }
  html[data-krns-page="gospel"] .nav-links a { padding: 12px; }
}

html[data-krns-page="story"] {
  --paper: var(--krns-paper); --paper-2: #efeee8;
  --ink: var(--krns-ink); --gold: var(--krns-gold); --navy: var(--krns-navy);
}
html[data-krns-page="story"] .site-header { background: rgba(10, 23, 40, .97); }
html[data-krns-page="story"] .gospel-side { top: 100px; }
html[data-krns-page="story"][lang="en"] #heroTitle .hero-title-line { white-space: normal; }
html[data-krns-page="story"] .story-card { min-width: 0; }
html[data-krns-page="story"] .story-body { min-width: 0; }
html[data-krns-page="story"] .story-card p,
html[data-krns-page="story"].embedded .story-card p { font-size: .9rem !important; line-height: 1.65 !important; }
html[data-krns-page="story"] .story-kicker,
html[data-krns-page="story"].embedded .story-kicker { font-size: .75rem !important; line-height: 1.5; }
html[data-krns-page="story"] .story-card h3,
html[data-krns-page="story"].embedded .story-card h3 { font-size: 1.12rem !important; line-height: 1.4 !important; }
html[data-krns-page="story"] .nav-links.open { max-height: calc(100dvh - 144px); overflow-y: auto; }
@media (min-width: 701px) {
  html[data-krns-page="story"] .story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html[data-krns-page="story"] .story-card,
  html[data-krns-page="story"].embedded .story-card { grid-template-columns: minmax(100px, 30%) minmax(0, 1fr) !important; }
  html[data-krns-page="story"] .story-media,
  html[data-krns-page="story"].embedded .story-media { width: 100% !important; max-width: none !important; height: 100% !important; min-height: 180px !important; }
  html[data-krns-page="story"] .story-body,
  html[data-krns-page="story"].embedded .story-body { padding: 18px !important; }
}
@media (min-width: 1280px) {
  html[data-krns-page="story"] .story-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

html[data-krns-page="garden"] {
  --paper: var(--krns-paper); --cream: #efece4; --ink: var(--krns-ink);
  --muted: var(--krns-muted); --night: var(--krns-navy-deep); --night-soft: var(--krns-navy);
  --teal: #294960; --teal-dark: #172f45; --gold: var(--krns-gold); --gold-light: var(--krns-gold-light);
}
html[data-krns-page="garden"] :is(.nav, .nav-actions, .nav-links) { min-width: 0; flex-wrap: wrap; gap: 12px 20px; }
html[data-krns-page="garden"] .button { padding-block: 11px; }
html[data-krns-page="garden"] .map-toolbar { flex-wrap: wrap; }
html[data-krns-page="garden"] .map-picker { flex: 1 1 320px; flex-wrap: wrap; }
html[data-krns-page="garden"] #map-status { white-space: normal; }
html[data-krns-page="garden"] .map-picker select { flex: 1 1 180px; min-width: 0; max-width: 100%; min-height: 44px; height: auto; font-size: 16px; }
html[data-krns-page="garden"] .history-country-head,
html[data-krns-page="garden"] .history-country-row { grid-template-columns: 60px minmax(0, 1fr) minmax(64px, auto); padding-block: 10px; }
html[data-krns-page="garden"] :is(.history-bar-label, .burden-row) > :last-child { flex-shrink: 0; }
html[data-krns-page="garden"] .garden-country-name { white-space: normal; line-height: 1.5; }
html[data-krns-page="garden"] .completion-card { overflow-y: auto; max-height: 100%; }
@media (max-width: 980px) {
  html[data-krns-page="garden"] .hero { min-height: 0; padding-bottom: 32px; }
  html[data-krns-page="garden"] .hero-grid { min-height: 0; padding: 32px 0; gap: 24px; }
  html[data-krns-page="garden"] .stats-strip { position: relative; inset: auto; transform: none; margin-inline: auto; }
}

/* Today uses the same light reading surface as the guides and notes. */
html[data-krns-page="today"] {
  --panel: #fff; --line: var(--krns-line); --text: var(--krns-ink);
  --muted: var(--krns-muted); --soft: #46576a; --accent: #86642e; --accent-strong: var(--krns-gold-light);
  --danger: #ab3e3e; --success: #2e624a; --shadow: 0 14px 40px rgba(18, 35, 55, .06);
}
html[data-krns-page="today"] body { background: var(--krns-paper); }
html[data-krns-page="today"] :is(.ambient-one, .ambient-two) { display: none; }
html[data-krns-page="today"] :is(.hero-card, .quote-card, .reflection-card, .empty-state) { border-radius: 20px; }
html[data-krns-page="today"] :is(textarea, .privacy-note, .reveal-card, .community-lock-card, .answered-state) { background: #f6f7f8; }
html[data-krns-page="today"] .primary-button { color: #fff; background: var(--krns-navy); padding-block: 12px; }
html[data-krns-page="today"] :is(.site-header, .header-actions, .main-nav) { flex-wrap: wrap; gap: 12px 20px; }
html[data-krns-page="today"] :is(.hero-card h1, .question-text, .reflection-text, .own-answer, .verse-text) { overflow-wrap: anywhere; }
html[data-krns-page="today"] .mood-chip span { color: #4c5c6b; border-color: #d8dee3; background: #fff; }
html[data-krns-page="today"] .mood-chip input:checked + span { color: #fff; border-color: var(--krns-navy); background: var(--krns-navy); }
html[data-krns-page="today"] :is(.selected-mood, .mood-badge, .lock-badge, .owner-badge) { color: #705426; border-color: #e2d3b4; background: #fbf5e8; }
html[data-krns-page="today"] :is(.notice-success, .success-notice) { color: #2e624a; background: #eef5f0; }
html[data-krns-page="today"] .card-line { background: var(--krns-line); }
html[data-krns-page="today"] .verse-card::after { color: rgba(134, 100, 46, .09); }
html[data-krns-page="today"] .card-question { color: #5b6978; font-size: 14px; }
html[data-krns-page="today"] :is(.hearts-intro, .verse-reflection, .unlocked-card p) { font-size: 14px; }

html[data-krns-page="notes"] :is(.panel-head, .card-head, .card-footer, .notes-summary) { flex-wrap: wrap; }
html[data-krns-page="notes"] :is(.panel-head > div, .note-card, .note-content, .note-modal-head > div) { min-width: 0; overflow-wrap: anywhere; }
html[data-krns-page="notes"] .button { flex-wrap: wrap; }
html[data-krns-page="notes"] .note-modal-head { flex: 0 0 auto; }
html[data-krns-page="notes"] .note-modal-content { min-height: 0; overscroll-behavior: contain; }

html[data-krns-page="search"] { --ink: var(--krns-ink); --muted: var(--krns-muted); --border: var(--krns-line); --card: #fff; --verse-card: #f5f6f7; }
html[data-krns-page="search"] body { display: block; padding: 28px 28px 28px !important; background: var(--krns-paper); }
html[data-krns-page="search"] main { min-width: 0; min-height: 0; margin-inline: auto; border-radius: 24px; box-shadow: 0 18px 48px rgba(18, 35, 55, .07); }
html[data-krns-page="search"] h1 { font-size: clamp(2.2rem, 5.8vw, 4.8rem); line-height: 1.15; }
html[data-krns-page="search"] .search-input { min-width: 0; font-size: 16px; }
html[data-krns-page="search"] .search-operator { font-size: 16px; }
html[data-krns-page="search"] .search-button { background: var(--krns-navy); color: #fff; }
html[data-krns-page="search"] .history-button-label { white-space: normal; overflow-wrap: anywhere; }
html[data-krns-page="search"] .history-button { min-height: 48px; }

/* Fixed dialogs use the visible height, including short landscape windows. */
html[data-krns-page="story"] .modal,
html[data-krns-page="gospel"] .modal,
html[data-krns-page="notes"] .note-modal,
html[data-krns-page="garden"] .light-completion {
  z-index: 2000;
  top: var(--krns-visual-top, 0px);
  bottom: auto;
  height: 100vh;
  height: var(--krns-visual-height, 100dvh);
  padding: 16px;
  overflow: hidden;
  overscroll-behavior: contain;
}
html[data-krns-page] :is(.modal-dialog, .note-modal-dialog) { max-height: 100%; min-height: 0; }
html[data-krns-page="story"] .modal-dialog { overflow-y: auto; }
html[data-krns-page="story"] .modal-image-wrap { min-height: 0; aspect-ratio: auto; }
html[data-krns-page="story"] .modal-image { max-height: calc(var(--krns-visual-height, 100dvh) - 32px); }
html[data-krns-page="story"] .modal-image { object-fit: contain; }
html[data-krns-page="story"] .modal-copy { min-height: 0; }

/* The game keeps its interactive canvas; controls and dialogs fit around it. */
html[data-krns-page="path"] #app {
  width: 100%;
  height: 100vh;
  height: var(--krns-game-height, 100dvh);
}
html[data-krns-page="path"] .chat-bar { max-width: 100%; }
html[data-krns-page="path"] :is(.chat-input, .blessing-input) { font-size: 16px; }
html[data-krns-page="path"] .blessing-modal { padding: 12px; overflow: hidden; }
html[data-krns-page="path"] .blessing-modal-panel {
  width: min(520px, 100%);
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y pinch-zoom;
}
html[data-krns-page="path"] .blessing-display { top: 8%; max-height: 80%; display: none; }
html[data-krns-page="path"] .blessing-display.visible { display: flex; }
html[data-krns-page="path"] .blessing-display-card { width: 100%; overflow-y: auto; overscroll-behavior: contain; }
html[data-krns-page="path"] :is(.blessing-modal-help, .blessing-display-title, .blessing-pending-counter, .blessing-manage-heading) { overflow-wrap: anywhere; }
html[data-krns-page="path"] .light-path-guide-list { max-height: max(60px, calc(var(--krns-game-height, 100dvh) - 170px)); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y pinch-zoom; }

@media (max-width: 760px) {
  html[data-krns-page] :is(input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]), select, textarea) { font-size: 16px; }
  html[data-krns-page] :is(.language-switch a, .lang-button, .language-button, .text-button, .icon-button, .page-button, .pagination-page, .pagination-button) { min-height: 44px; }
  html[data-krns-page="church"] .language-switch { height: 44px; }
  html[data-krns-page] :is(.button, .primary-button) { font-size: 15px; }
  html[data-krns-page="church"] :is(.container, .reading) { width: calc(100% - 28px); }
  html[data-krns-page="church"] .hero h1 { font-size: clamp(2rem, 9vw, 3.3rem); line-height: 1.2; }
  html[data-krns-page="church"] :is(.hero-card, .board-compose) { padding: 20px; }
  html[data-krns-page="church"] .site-footer { padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px)); }
  html[data-krns-page="church"] .toast { bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
  html[data-krns-page="gospel"] .hero h1 { font-size: clamp(2.4rem, 11.5vw, 4.3rem); line-height: 1.18; }
  html[data-krns-page="gospel"] .nav { gap: 8px; }
  html[data-krns-page="gospel"] .language-switch { margin-left: 0; }
  html[data-krns-page="gospel"] .story-grid { gap: 30px; }
  html[data-krns-page="gospel"] .prayer { padding: 18px; }
  html[data-krns-page="story"] .chapter-card { grid-template-columns: 42px minmax(0, 1fr); }
  html[data-krns-page="story"] .chapter-card .button { grid-column: 2; justify-self: start; }
  html[data-krns-page="story"] .hero h1 { font-size: clamp(2.15rem, 9.6vw, 3.7rem); }
  html[data-krns-page="story"] .modal-dialog { display: block; }
  html[data-krns-page="story"] .modal-image-wrap { height: auto; min-height: 0; }
  html[data-krns-page="story"] .modal-image { height: auto; width: 100%; max-height: 42vh; max-height: calc(var(--krns-visual-height, 100dvh) * .42); }
  html[data-krns-page="story"] .modal-copy { overflow: visible; padding: 24px 20px; }
  html[data-krns-page="story"] .modal-controls { margin-top: 22px; flex-wrap: wrap; }
  html[data-krns-page="today"] .site-header { padding-block: 14px; align-items: center; }
  html[data-krns-page="today"] .header-actions { align-items: center; }
  html[data-krns-page="today"] .main-nav { flex-direction: row; align-items: center; gap: 12px; }
  html[data-krns-page="today"] .language-switch { font-size: 12px; }
  html[data-krns-page="today"] .language-switch a { display: inline-flex; align-items: center; padding-inline: 4px; }
  html[data-krns-page="today"] .nav-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
  html[data-krns-page="today"] .hero-card h1 { font-size: clamp(1.7rem, 7vw, 2.4rem); line-height: 1.35; }
  html[data-krns-page="today"] .privacy-note { font-size: 13px; }
  html[data-krns-page="today"] :is(.filters, .card-top) { flex-wrap: wrap; }
  html[data-krns-page="today"] .mood-chip span { min-height: 44px; padding: 8px 10px; font-size: 14px; }
  html[data-krns-page="today"] .mood-fieldset { min-width: 0; }
  html[data-krns-page="today"] :is(.filter-pill, .page-number, .page-nav) { min-height: 44px; }
  html[data-krns-page="notes"] .panel-head { gap: 12px; }
  html[data-krns-page="notes"] .notes-summary { font-size: 13px; }
  html[data-krns-page="notes"] .search-bar .button { padding-inline: 9px; gap: 4px; }
  html[data-krns-page="notes"] .note-modal-close { width: 44px; height: 44px; }
  html[data-krns-page="search"] body { padding: 12px 12px 20px !important; }
  html[data-krns-page="search"] main { padding: 24px 14px; border-radius: 20px; gap: 20px; }
  html[data-krns-page="search"] :is(.search-section, .verse-card) { padding: 18px 14px; border-radius: 16px; }
  html[data-krns-page="search"] .search-condition-row { grid-template-columns: minmax(0, 1fr); }
  html[data-krns-page="search"] :is(.search-input, .search-operator) { width: 100%; min-width: 0; }
  html[data-krns-page="search"] .search-result { padding: 15px; }
  html[data-krns-page="search"] .search-actions { flex-wrap: wrap; }
  html[data-krns-page="search"] :is(.search-button, .search-reset) { padding-inline: 10px; }
}
@media (max-width: 700px) {
  html[data-krns-page="garden"] .nav { padding-block: 16px; }
  html[data-krns-page="garden"] .nav-actions { width: 100%; justify-content: space-between; align-items: flex-start; }
  html[data-krns-page="garden"] .nav-links { display: flex; flex: 1 1 190px; gap: 4px 14px; font-size: 14px; }
  html[data-krns-page="garden"] .nav-links a { display: inline-flex; align-items: center; min-height: 44px; }
  html[data-krns-page="garden"] .language-switch { padding-block: 0; }
  html[data-krns-page="garden"] .language-switch a { display: inline-flex; align-items: center; }
  html[data-krns-page="garden"] .hero-orbit { min-height: 245px; }
  html[data-krns-page="garden"] .hero-globe { width: 185px; }
  html[data-krns-page="garden"] .orbit-ring-two { width: 285px; height: 285px; }
  html[data-krns-page="garden"] .stat { min-width: 0; padding: 16px 6px; }
  html[data-krns-page="garden"] .stat span { font-size: 12px; }
  html[data-krns-page="garden"][lang="ko"] :is(.hero-title-line-primary, .hero-title-line-secondary, .garden-heading-title) { white-space: normal; overflow-wrap: anywhere; }
  html[data-krns-page="garden"] .hero-title-line-primary { font-size: 1.3rem; }
  html[data-krns-page="garden"] .hero-title-line-secondary { font-size: clamp(1.7rem, 6vw, 2.4rem); }
  html[data-krns-page="garden"] .section { padding-block: 56px; }
  html[data-krns-page="garden"] .map-card { padding: 14px; }
  html[data-krns-page="garden"] .map-picker { flex: 0 1 auto; align-items: stretch; }
  html[data-krns-page="garden"] .map-picker select { flex: 0 1 auto; height: 44px !important; min-height: 44px !important; max-height: none; font-size: 16px; line-height: normal; }
  html[data-krns-page="garden"] .history-country-head,
  html[data-krns-page="garden"] .history-country-row { grid-template-columns: 32px minmax(0, 1fr) minmax(44px, auto); gap: 8px; padding-inline: 10px; font-size: 14px; }
  html[data-krns-page="garden"] .garden-country-ranking { padding-inline: 0; }
  html[data-krns-page="garden"] .completion-card { padding: 30px 22px; }
}
@media (max-width: 400px) {
  html[data-krns-page="church"] .brand { font-size: 16px; gap: 7px; }
  html[data-krns-page="church"] .brand-mark { width: 30px; height: 30px; flex-shrink: 0; }
  html[data-krns-page="church"] :is(.hero-card, .board-compose, .question-card) { padding: 16px; }
  html[data-krns-page="garden"] .garden-country-ranking { grid-template-columns: minmax(0, 1fr); }
  html[data-krns-page="path"] .chat-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; }
  html[data-krns-page="path"] .chat-input { grid-column: 1 / 3; width: 100%; }
  html[data-krns-page="path"] .today-question-button { grid-column: 1 / 3; }
  html[data-krns-page="path"] :is(.chat-send-button, .today-question-button, .language-toggle-button) { min-height: 44px; }
}
@media (hover: none) and (pointer: coarse) {
  html[data-krns-page] :is(.button, .story-card, .chapter-card, .history-button, .search-button):hover { transform: none; }
  html[data-krns-page="path"] :is(.blessing-modal-close, .blessing-display-close, .scripture-language-toggle, .blessing-manage-delete, .blessing-amen-button) { min-width: 44px; min-height: 44px; }
}
@media print {
  html[data-krns-page] body { padding-top: 0 !important; }
}

/* One compact language selector shared by every KRNS service. */
html[data-krns-page] {
  --krns-lang-bg: rgba(255, 255, 255, .84);
  --krns-lang-border: rgba(18, 35, 55, .18);
  --krns-lang-text: var(--krns-muted);
  --krns-lang-active-bg: var(--krns-navy);
  --krns-lang-active-text: #fff;
}

html[data-krns-page="gospel"],
html[data-krns-page="story"],
html[data-krns-page="garden"],
html[data-krns-page="path"] {
  --krns-lang-bg: rgba(7, 17, 31, .46);
  --krns-lang-border: rgba(255, 255, 255, .28);
  --krns-lang-text: rgba(255, 255, 255, .84);
  --krns-lang-active-bg: var(--krns-gold-light);
  --krns-lang-active-text: var(--krns-navy-deep);
}

html[data-krns-page] :is(.language-switch, .language) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 2px !important;
  min-width: 0 !important;
  min-height: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 2px !important;
  border: 1px solid var(--krns-lang-border) !important;
  border-radius: 999px !important;
  background: var(--krns-lang-bg) !important;
  box-shadow: 0 4px 12px rgba(18, 35, 55, .14) !important;
  color: var(--krns-lang-text) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  backdrop-filter: blur(10px);
}

html[data-krns-page] :is(.language-switch, .language) > :is(a, button, .language-button, .lang-button) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 34px !important;
  min-height: 26px !important;
  height: 26px !important;
  padding: 4px 8px !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: inherit !important;
  background: transparent !important;
  font: inherit !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  letter-spacing: 0 !important;
  cursor: pointer;
  touch-action: manipulation;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}

html[data-krns-page] :is(.language-switch, .language) > span {
  color: currentColor !important;
  opacity: .55;
  font-size: 10px !important;
  line-height: 1 !important;
}

html[data-krns-page] :is(.language-switch, .language) > :is(a, button, .language-button, .lang-button):hover,
html[data-krns-page] :is(.language-switch, .language) > :is(a, button, .language-button, .lang-button):focus-visible {
  color: var(--krns-lang-active-bg) !important;
  background: rgba(18, 35, 55, .10) !important;
}

html[data-krns-page] :is(.language-switch, .language) > :is(a, button, .language-button, .lang-button):is(.is-active, .selected, .active, [aria-current="true"], [aria-current="page"], [aria-pressed="true"]) {
  color: var(--krns-lang-active-text) !important;
  background: var(--krns-lang-active-bg) !important;
  box-shadow: 0 3px 9px rgba(18, 35, 55, .20) !important;
}

html[data-krns-page] :is(.language-switch, .language) > :is(a, button, .language-button, .lang-button):focus-visible,
html[data-krns-page] :is(.language-toggle-button, .scripture-language-toggle):focus-visible {
  outline: 2px solid var(--krns-lang-active-bg) !important;
  outline-offset: 2px;
}

/* The metaverse uses a single compact toggle in its chat bar and scripture card. */
html[data-krns-page] :is(.language-toggle-button, .scripture-language-toggle) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 34px !important;
  min-height: 30px !important;
  height: 30px !important;
  padding: 4px 9px !important;
  border: 1px solid var(--krns-lang-border) !important;
  border-radius: 999px !important;
  color: var(--krns-lang-active-text) !important;
  background: var(--krns-lang-active-bg) !important;
  box-shadow: 0 3px 9px rgba(18, 35, 55, .20) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

html[data-krns-page] :is(.language-toggle-button, .scripture-language-toggle)[hidden] {
  display: none !important;
}

/* History is also embedded in the Today service. Keep its compact selector dark
   in the embedded header so the inactive language remains readable. */
html[data-krns-page="story"].embedded .site-header .language-switch {
  background: rgba(7, 17, 31, .88) !important;
  border-color: rgba(255, 255, 255, .30) !important;
}

html[data-krns-page="story"].embedded .site-header .language-switch > .lang-button:not(.active) {
  color: rgba(255, 255, 255, .94) !important;
  background: transparent !important;
}