html,
body {
    min-height: 100%;
}

:root {
    --page-bg: #f6f4ef;
    --surface: #ffffff;
    --surface-soft: #fffdf9;
    --surface-strong: #eef5fb;
    --text: #303030;
    --heading: #222222;
    --muted: #6b6258;
    --border: #ddd6ca;
    --control-border: #c8d1d9;
    --accent: #2e6da4;
    --accent-strong: #204c74;
    --accent-soft: #dcebf7;
    --success: #2f6f3e;
    --reader-bg: #ffffff;
    --reader-text: #303030;
    --frame-bg: #f0eee8;
    --frame-border: #c9d3dc;
    --shadow: rgba(40, 34, 28, 0.14);
    --mark-bg: #fff0a8;
    --mark-text: #222222;
}

body[data-theme="dark"] {
    --page-bg: #111418;
    --surface: #191f26;
    --surface-soft: #161b21;
    --surface-strong: #243141;
    --text: #e9edf2;
    --heading: #ffffff;
    --muted: #aeb8c4;
    --border: #303a46;
    --control-border: #3a4654;
    --accent: #8ebcff;
    --accent-strong: #bfd8ff;
    --accent-soft: #1f3045;
    --success: #83d29a;
    --reader-bg: #0f1318;
    --reader-text: #f3f6fa;
    --frame-bg: #0a0d11;
    --frame-border: #394656;
    --shadow: rgba(0, 0, 0, 0.36);
    --mark-bg: #5a470f;
    --mark-text: #fff5c2;
}

body[data-theme="sepia"] {
    --page-bg: #efe5d2;
    --surface: #fff8eb;
    --surface-soft: #fbefd8;
    --surface-strong: #ead8b9;
    --text: #3e3023;
    --heading: #2f241a;
    --muted: #7c674d;
    --border: #dac6a7;
    --control-border: #c9ad81;
    --accent: #8a5a2b;
    --accent-strong: #5f3d1e;
    --accent-soft: #f1dec0;
    --reader-bg: #fff9ec;
    --reader-text: #4a2f17;
    --frame-bg: #e2d0b3;
}

body[data-theme="slate"] {
    --page-bg: #e8edf1;
    --surface: #fbfcfd;
    --surface-soft: #f1f5f8;
    --surface-strong: #dfe8ef;
    --text: #26313b;
    --heading: #141b22;
    --muted: #667582;
    --border: #c9d3dc;
    --accent: #3f647e;
    --accent-strong: #29465a;
    --accent-soft: #d7e4ec;
    --reader-bg: #ffffff;
    --reader-text: #233f57;
    --frame-bg: #dbe4ea;
    --mark-bg: #dfeeff;
    --mark-text: #141b22;
}

body[data-theme="forest"] {
    --page-bg: #e9f0e6;
    --surface: #fbfff8;
    --surface-soft: #f1f8ed;
    --surface-strong: #d9e8d2;
    --text: #263224;
    --heading: #172414;
    --muted: #63745b;
    --border: #c8d8bf;
    --accent: #3d7448;
    --accent-strong: #285232;
    --accent-soft: #dcebd8;
    --reader-bg: #fefff9;
    --reader-text: #1e4a2a;
    --frame-bg: #d9e5d2;
    --mark-bg: #e1f3cc;
    --mark-text: #172414;
}

body[data-theme="ocean"] {
    --page-bg: #e4f1f3;
    --surface: #fbfeff;
    --surface-soft: #eff9fb;
    --surface-strong: #d4ebef;
    --text: #223237;
    --heading: #112429;
    --muted: #5f7880;
    --border: #bdd7dd;
    --accent: #237286;
    --accent-strong: #135365;
    --accent-soft: #d7eef3;
    --reader-bg: #ffffff;
    --reader-text: #0e5361;
    --frame-bg: #d1e7ec;
    --mark-bg: #d9f5fb;
    --mark-text: #112429;
}

body[data-theme="sunrise"] {
    --page-bg: #fff0e5;
    --surface: #fffaf5;
    --surface-soft: #fff2e8;
    --surface-strong: #ffe1ce;
    --text: #3b2d27;
    --heading: #2a1c17;
    --muted: #84685c;
    --border: #edcbbb;
    --accent: #c05e3a;
    --accent-strong: #8d3e24;
    --accent-soft: #ffe2d4;
    --reader-bg: #fffdf9;
    --reader-text: #793b24;
    --frame-bg: #f4d8ca;
    --mark-bg: #ffe2a8;
    --mark-text: #2a1c17;
}

body[data-theme="rose"] {
    --page-bg: #f7ebef;
    --surface: #fffafd;
    --surface-soft: #fbf1f5;
    --surface-strong: #efd9e1;
    --text: #362930;
    --heading: #25171f;
    --muted: #78606a;
    --border: #dec6d0;
    --accent: #9a4b68;
    --accent-strong: #70304a;
    --accent-soft: #f1dce5;
    --reader-bg: #ffffff;
    --reader-text: #6e2845;
    --frame-bg: #ead5dd;
    --mark-bg: #f7d9e7;
    --mark-text: #25171f;
}

body[data-theme="violet"] {
    --page-bg: #f0ecf7;
    --surface: #fdfbff;
    --surface-soft: #f6f1fb;
    --surface-strong: #e4d9f3;
    --text: #302a3b;
    --heading: #211936;
    --muted: #685f78;
    --border: #d0c4e2;
    --accent: #6f55a2;
    --accent-strong: #4d3679;
    --accent-soft: #e6def4;
    --reader-bg: #ffffff;
    --reader-text: #4b2e79;
    --frame-bg: #ded4ee;
    --mark-bg: #eadfff;
    --mark-text: #211936;
}

body[data-theme="mint"] {
    --page-bg: #e9f5ef;
    --surface: #fbfffd;
    --surface-soft: #effaf5;
    --surface-strong: #d6ede2;
    --text: #24332c;
    --heading: #13241c;
    --muted: #5b7668;
    --border: #bfdbcf;
    --accent: #2f8067;
    --accent-strong: #1f5d4a;
    --accent-soft: #d8efe7;
    --reader-bg: #ffffff;
    --reader-text: #1b5a48;
    --frame-bg: #d3e8dd;
    --mark-bg: #d5f4e4;
    --mark-text: #13241c;
}

body[data-theme="contrast"] {
    --page-bg: #ffffff;
    --surface: #ffffff;
    --surface-soft: #f5f5f5;
    --surface-strong: #eeeeee;
    --text: #000000;
    --heading: #000000;
    --muted: #333333;
    --border: #000000;
    --control-border: #000000;
    --accent: #003cff;
    --accent-strong: #001f86;
    --accent-soft: #dce5ff;
    --reader-bg: #ffffff;
    --reader-text: #000000;
    --frame-bg: #eeeeee;
    --frame-border: #000000;
    --shadow: rgba(0, 0, 0, 0.22);
    --mark-bg: #ffea00;
    --mark-text: #000000;
}

body[data-theme="paper"] {
    --page-bg: #f3f0e8;
    --surface: #fffdfa;
    --surface-soft: #f8f4eb;
    --surface-strong: #e9e1d1;
    --text: #282522;
    --heading: #1a1714;
    --muted: #6f675c;
    --border: #d7cebe;
    --accent: #566b7f;
    --accent-strong: #384d60;
    --accent-soft: #dbe4ea;
    --reader-bg: #fffefa;
    --reader-text: #4d4231;
    --frame-bg: #e4ddd0;
    --mark-bg: #efe3bb;
    --mark-text: #1a1714;
}

body[data-theme="midnight"] {
    --page-bg: #0b1020;
    --surface: #121a2d;
    --surface-soft: #18223a;
    --surface-strong: #24304d;
    --text: #edf3ff;
    --heading: #ffffff;
    --muted: #aebbd0;
    --border: #2d3a59;
    --control-border: #3a4a6f;
    --accent: #9fb7ff;
    --accent-strong: #d6e1ff;
    --accent-soft: #25365e;
    --success: #8dd7bd;
    --reader-bg: #0f1728;
    --reader-text: #f6f9ff;
    --frame-bg: #070b16;
    --frame-border: #38476a;
    --shadow: rgba(0, 0, 0, 0.42);
    --mark-bg: #55461d;
    --mark-text: #fff1b8;
}

body[data-theme="warm-gray"] {
    --page-bg: #eeebe6;
    --surface: #fbfaf7;
    --surface-soft: #f1eee8;
    --surface-strong: #e2ddd4;
    --text: #2f2c28;
    --heading: #1f1b18;
    --muted: #706960;
    --border: #d2cbc0;
    --control-border: #c1b8aa;
    --accent: #6d665d;
    --accent-strong: #49433c;
    --accent-soft: #e5dfd5;
    --reader-bg: #fffefa;
    --reader-text: #49433c;
    --frame-bg: #ded8ce;
    --frame-border: #bfb5a6;
    --shadow: rgba(43, 37, 31, 0.16);
}

body {
    margin: 0;
    background: var(--page-bg);
    color: var(--text);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    line-height: 1.55;
}

a,
a:hover,
a:focus {
    color: #2e6da4;
}

.site-header {
    background: #ffffff;
    border-bottom: 1px solid #ddd6ca;
}

.site-title-wrap {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    min-height: 64px;
    padding: 14px 0;
}

.site-title {
    color: #222222;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
}

.site-title:hover,
.site-title:focus {
    color: #222222;
    text-decoration: none;
}

.site-subtitle {
    color: #6b6258;
    font-size: 15px;
}

.main-shell {
    padding-top: 18px;
    padding-bottom: 32px;
}

.app-shell {
    width: 100%;
    padding-right: 14px;
    padding-left: 14px;
}

.reader-layout {
    display: grid;
    grid-template-columns: minmax(290px, 340px) minmax(0, 1fr);
    gap: 18px;
    max-width: 1500px;
    margin: 0 auto;
    align-items: start;
    transition: grid-template-columns 0.18s ease;
}

.reader-layout.drawer-collapsed {
    grid-template-columns: 42px minmax(0, 1fr);
}

.control-drawer {
    position: sticky;
    top: 12px;
    min-width: 0;
    padding-right: 12px;
}

.control-drawer-content {
    overflow: visible;
    transition: opacity 0.12s ease;
}

.drawer-toggle {
    position: absolute;
    top: 8px;
    right: -10px;
    z-index: 30;
    width: 32px;
    min-height: 44px;
    padding: 0;
    border: 1px solid #c9d3dc;
    border-radius: 5px;
    background: #ffffff;
    color: #2e6da4;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(40, 34, 28, 0.14);
}

.drawer-toggle-icon {
    display: block;
    font-size: 28px;
    line-height: 1;
}

.drawer-toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.reader-layout.drawer-collapsed .control-drawer {
    min-height: 260px;
    padding-right: 0;
}

.reader-layout.drawer-collapsed .control-drawer-content {
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.reader-layout.drawer-collapsed .drawer-toggle {
    position: sticky;
    top: 88px;
    right: auto;
    width: 42px;
    height: 190px;
    min-height: 190px;
    border-radius: 6px;
    writing-mode: vertical-rl;
}

.reader-layout.drawer-collapsed .drawer-toggle-icon {
    margin-bottom: 8px;
    font-size: 24px;
}

.reader-layout.drawer-collapsed .drawer-toggle-label {
    position: static;
    width: auto;
    height: auto;
    clip: auto;
    overflow: visible;
    white-space: normal;
}

.reader-column {
    min-width: 0;
}

.panel {
    border-radius: 6px;
}

.control-panel .panel-heading,
.reader-panel .panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.control-heading {
    gap: 12px;
    position: relative;
}

.control-panel .panel-title,
.reader-panel .panel-title {
    font-size: 20px;
}

.account-menu {
    position: relative;
    margin-left: auto;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.account-menu summary {
    display: block;
    min-width: 92px;
    padding: 6px 12px;
    border: 1px solid #b7c7d6;
    border-radius: 5px;
    background: #ffffff;
    color: #2e6da4;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}

.account-menu summary::-webkit-details-marker {
    display: none;
}

.account-menu summary:after {
    content: " ▾";
    color: #6b6258;
    font-size: 11px;
}

.account-menu[open] summary {
    border-color: #2e6da4;
    box-shadow: 0 0 0 2px rgba(46, 109, 164, 0.12);
}

.account-menu-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 20;
    min-width: 180px;
    padding: 8px;
    border: 1px solid #d8d2c8;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(40, 34, 28, 0.16);
}

.account-menu-popover a,
.account-menu-popover button {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #303030;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.35;
    text-align: left;
}

.account-menu-popover a:hover,
.account-menu-popover a:focus,
.account-menu-popover button:hover,
.account-menu-popover button:focus {
    background: #eef5fb;
    color: #2e6da4;
    text-decoration: none;
}

.account-menu-popover form {
    margin: 0;
}

.control-drawer .panel {
    margin-bottom: 12px;
}

.control-drawer .panel-body {
    padding: 14px;
}

.control-drawer .row {
    margin-right: 0;
    margin-left: 0;
}

.control-drawer .row > [class*="col-"] {
    float: none;
    width: 100%;
    padding-right: 0;
    padding-left: 0;
}

.control-row > [class*="col-"],
.action-row > [class*="col-"] {
    margin-bottom: 14px;
}

.control-row label,
.share-label {
    color: #4b453f;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

.form-control,
.btn {
    border-radius: 5px;
}

.button-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.control-drawer .button-cluster {
    flex-direction: column;
}

.button-cluster .btn {
    flex: 1 1 auto;
}

.search-group {
    width: 100%;
}

.copy-status {
    min-height: 20px;
    padding-top: 4px;
    color: #2f6f3e;
    font-size: 13px;
}

.reader-heading {
    min-height: 45px;
}

.loader {
    color: #2e6da4;
    font-size: 13px;
    font-weight: 700;
}

.reader-output {
    font-size: 18px;
    transition: opacity 0.15s ease-in-out;
}

.reader-output.is-loading {
    opacity: 0.55;
}

.version-tab-shell {
    margin-bottom: 12px;
}

.bible-version-tabs {
    margin-bottom: 18px;
}

.control-drawer .bible-version-tabs {
    margin-bottom: 0;
    border-bottom: 0;
}

.control-drawer .bible-version-tabs > li {
    display: block;
    float: none;
    margin-bottom: 6px;
}

.bible-version-tabs > li > a {
    border-radius: 5px 5px 0 0;
}

.control-drawer .bible-version-tabs > li > a {
    border: 1px solid #ddd6ca;
    border-radius: 5px;
    background: #ffffff;
}

.control-drawer .bible-version-tabs > li.active > a,
.control-drawer .bible-version-tabs > li.active > a:hover,
.control-drawer .bible-version-tabs > li.active > a:focus {
    border-color: #2e6da4;
    background: #eef5fb;
    color: #2e6da4;
}

.bible-version-content h2 {
    margin-top: 0;
    font-size: 28px;
}

.bible-version-content h2 small {
    color: #6b6258;
}

.bible-version-content h3,
.result-heading {
    margin-top: 22px;
    font-size: 22px;
}

.version-block + .version-block {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.version-block > h2 {
    margin-top: 0;
}

.passage-lines {
    margin-bottom: 20px;
}

.verse-line {
    margin: 0 0 8px;
}

.verse-line sup {
    color: var(--accent);
    font-weight: 700;
}

.reader-nav {
    display: grid;
    gap: 10px;
    max-width: 360px;
    margin: 14px auto 18px;
}

.reader-nav-row {
    display: grid;
    grid-template-columns: 54px minmax(120px, 1fr) 54px;
    gap: 8px;
    align-items: center;
}

.nav-control {
    border: 1px solid #c8d1d9;
    border-radius: 6px;
    background: #ffffff;
    color: #2e6da4;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    transition: background 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
}

.nav-control:hover,
.nav-control:focus {
    border-color: #2e6da4;
    background: #eef5fb;
}

.nav-control:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.nav-arrow {
    height: 48px;
    padding: 0;
    font-size: 30px;
    line-height: 1;
}

.reader-nav-label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border: 1px solid #ddd6ca;
    border-radius: 6px;
    background: #fffdf9;
    color: #4b453f;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.search-card {
    margin-bottom: 12px;
}

.search-card mark {
    background: var(--mark-bg);
    color: var(--mark-text);
    padding: 0 2px;
}

.empty-version {
    color: #6b6258;
}

.top-link {
    white-space: normal;
}

.site-footer {
    padding: 20px 0 0;
    text-align: center;
}

.donate-link {
    color: #6b6258;
}

.auth-shell {
    max-width: 980px;
}

.auth-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.auth-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.auth-form {
    max-width: 520px;
}

.auth-form label,
.profile-card dt {
    color: #4b453f;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

.profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.8fr);
    gap: 20px;
}

.profile-card {
    padding: 16px;
    border: 1px solid #e0d9cf;
    border-radius: 6px;
    background: #fffdf9;
}

.account-summary h2 {
    margin: 0 0 16px;
    font-size: 22px;
}

.account-summary dd {
    margin-bottom: 12px;
}

.signout-form {
    margin-top: 14px;
}

.auth-notes {
    margin-top: 16px;
}

.site-header,
.panel,
.account-menu-popover,
.profile-card {
    background: var(--surface);
    border-color: var(--border);
}

.panel-default > .panel-heading,
.panel-info > .panel-heading {
    background: var(--surface-soft);
    border-color: var(--border);
    color: var(--heading);
}

.site-title,
.site-title:hover,
.site-title:focus,
.panel-title,
.bible-version-content h2,
.account-summary h2 {
    color: var(--heading);
}

a,
a:hover,
a:focus,
.account-menu summary,
.drawer-toggle,
.nav-control {
    color: var(--accent);
}

.site-subtitle,
.bible-version-content h2 small,
.empty-version,
.donate-link,
.reader-nav-label,
.control-row label,
.share-label,
.display-label,
.auth-form label,
.profile-card dt {
    color: var(--muted);
}

.form-control,
.account-menu summary,
.reader-nav-label,
.theme-grid button,
.segmented-control button {
    background: var(--surface);
    border-color: var(--control-border);
    color: var(--text);
}

.form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}

.account-menu-popover a,
.account-menu-popover button {
    color: var(--text);
}

.account-menu-popover a:hover,
.account-menu-popover a:focus,
.account-menu-popover button:hover,
.account-menu-popover button:focus,
.nav-control:hover,
.nav-control:focus,
.theme-grid button:hover,
.theme-grid button:focus,
.theme-grid button.active,
.segmented-control button:hover,
.segmented-control button:focus,
.segmented-control button.active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-strong);
}

.btn-primary,
.btn-primary:focus {
    border-color: var(--accent-strong);
    background: var(--accent);
    background-image: none;
    color: var(--surface);
    text-shadow: none;
}

.btn-primary:hover {
    border-color: var(--accent-strong);
    background: var(--accent-strong);
    background-image: none;
    color: var(--surface);
}

.btn-success,
.btn-success:focus {
    border-color: color-mix(in srgb, var(--success) 72%, #000000);
    background: var(--success);
    background-image: none;
    color: var(--surface);
    text-shadow: none;
}

.btn-success:hover {
    border-color: color-mix(in srgb, var(--success) 72%, #000000);
    background: color-mix(in srgb, var(--success) 82%, #000000);
    background-image: none;
    color: var(--surface);
}

.btn-danger,
.btn-warning,
.btn-danger:focus,
.btn-warning:focus {
    border-color: var(--accent-strong);
    background: var(--accent-strong);
    background-image: none;
    color: var(--surface);
    text-shadow: none;
}

.btn-danger:hover,
.btn-warning:hover {
    border-color: var(--accent);
    background: var(--accent);
    background-image: none;
    color: var(--surface);
}

.btn-default,
.btn-default:focus {
    border-color: var(--control-border);
    background: var(--surface);
    background-image: none;
    color: var(--accent);
    text-shadow: none;
}

.btn-default:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    background-image: none;
    color: var(--accent-strong);
}

.drawer-toggle,
.nav-control {
    background: var(--surface);
    border-color: var(--control-border);
    box-shadow: 0 4px 14px var(--shadow);
}

.control-drawer .bible-version-tabs > li > a {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}

.control-drawer .bible-version-tabs > li.active > a,
.control-drawer .bible-version-tabs > li.active > a:hover,
.control-drawer .bible-version-tabs > li.active > a:focus {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-strong);
}

#reader-frame,
.reader-frame {
    width: 100%;
    min-width: 320px;
    min-height: 360px;
    max-width: 100%;
    max-height: calc(100vh - 120px);
    overflow: auto;
    resize: both;
    padding: 10px;
    border: 1px solid var(--frame-border);
    border-radius: 6px;
    background: var(--frame-bg);
    color: var(--reader-text);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--surface) 55%, transparent), 0 16px 36px var(--shadow);
}

#reader-frame .reader-panel,
.reader-frame .reader-panel {
    min-height: 100%;
    margin-bottom: 0;
    background: var(--reader-bg);
    color: var(--reader-text);
}

#reader-frame .panel-body,
.reader-frame .panel-body {
    background: var(--reader-bg);
    color: var(--reader-text);
}

#reader-frame #fillme,
#reader-frame .reader-output,
#reader-frame .bible-version-content,
#reader-frame .bible-version-content .version-block,
#reader-frame .bible-version-content .passage-lines,
#reader-frame .bible-version-content .verse-line,
#reader-frame .bible-version-content .search-card .panel-body,
.reader-output,
.bible-version-content,
.bible-version-content .version-block,
.bible-version-content .passage-lines,
.bible-version-content .verse-line,
.bible-version-content .search-card .panel-body {
    color: var(--reader-text);
}

#reader-frame .bible-version-content h2,
#reader-frame .bible-version-content h3,
#reader-frame .bible-version-content h4,
#reader-frame .bible-version-content p,
#reader-frame .bible-version-content li,
#reader-frame .bible-version-content div,
#reader-frame .bible-version-content article,
.bible-version-content h2,
.bible-version-content h3,
.bible-version-content h4,
.bible-version-content p,
.bible-version-content li,
.bible-version-content div,
.bible-version-content article {
    color: inherit !important;
}

.bible-version-content h2 small {
    color: var(--muted);
}

.bible-version-content a {
    color: var(--accent);
}

.reader-frame-compact {
    width: min(620px, 100%);
    height: 520px;
}

.reader-frame-tall {
    width: min(760px, 100%);
    height: calc(100vh - 145px);
}

.reader-frame-wide {
    width: 100%;
    height: 620px;
}

.reader-frame-fluid {
    width: 100%;
    height: auto;
}

.display-panel .panel-title {
    font-size: 18px;
}

.display-group + .display-group {
    margin-top: 16px;
}

.display-label {
    display: block;
    margin-bottom: 8px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

.segmented-control {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.segmented-control button,
.theme-grid button {
    min-height: 36px;
    padding: 7px 8px;
    border: 1px solid var(--control-border);
    border-radius: 5px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.2;
    text-align: left;
}

.segmented-control button {
    text-align: center;
}

.theme-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 7px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    vertical-align: -2px;
}

.swatch-classic { background: linear-gradient(135deg, #f6f4ef 0 50%, #2e6da4 50%); }
.swatch-dark { background: linear-gradient(135deg, #111418 0 50%, #8ebcff 50%); }
.swatch-sepia { background: linear-gradient(135deg, #efe5d2 0 50%, #8a5a2b 50%); }
.swatch-slate { background: linear-gradient(135deg, #e8edf1 0 50%, #3f647e 50%); }
.swatch-forest { background: linear-gradient(135deg, #e9f0e6 0 50%, #3d7448 50%); }
.swatch-ocean { background: linear-gradient(135deg, #e4f1f3 0 50%, #237286 50%); }
.swatch-sunrise { background: linear-gradient(135deg, #fff0e5 0 50%, #c05e3a 50%); }
.swatch-rose { background: linear-gradient(135deg, #f7ebef 0 50%, #9a4b68 50%); }
.swatch-violet { background: linear-gradient(135deg, #f0ecf7 0 50%, #6f55a2 50%); }
.swatch-mint { background: linear-gradient(135deg, #e9f5ef 0 50%, #2f8067 50%); }
.swatch-contrast { background: linear-gradient(135deg, #ffffff 0 50%, #003cff 50%); }
.swatch-paper { background: linear-gradient(135deg, #f3f0e8 0 50%, #566b7f 50%); }
.swatch-midnight { background: linear-gradient(135deg, #0b1020 0 50%, #9fb7ff 50%); }
.swatch-warm-gray { background: linear-gradient(135deg, #eeebe6 0 50%, #6d665d 50%); }

@media (max-width: 767px) {
    .site-title-wrap {
        align-items: flex-start;
        flex-direction: column;
    }

    .button-cluster {
        display: grid;
        grid-template-columns: 1fr;
    }

    .app-shell {
        padding-right: 8px;
        padding-left: 8px;
    }

    .reader-layout {
        grid-template-columns: minmax(250px, 310px) minmax(0, 1fr);
        gap: 10px;
    }

    .bible-version-tabs > li {
        width: 100%;
    }

    .bible-version-tabs > li > a {
        border-radius: 5px;
        margin-right: 0;
    }

    .control-heading,
    .auth-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .account-menu {
        width: 100%;
    }

    .account-menu summary {
        width: 100%;
        text-align: left;
    }

    .account-menu-popover {
        left: 0;
        right: auto;
        width: 100%;
    }

    .profile-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .reader-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .reader-layout.drawer-collapsed {
        grid-template-columns: minmax(0, 1fr);
    }

    .control-drawer {
        position: relative;
        top: auto;
        padding-right: 0;
    }

    .drawer-toggle {
        right: 8px;
    }

    .reader-layout.drawer-collapsed .control-drawer {
        min-height: 42px;
    }

    .reader-layout.drawer-collapsed .drawer-toggle {
        position: relative;
        top: auto;
        width: 100%;
        height: 42px;
        min-height: 42px;
        writing-mode: horizontal-tb;
    }

    .reader-layout.drawer-collapsed .drawer-toggle-icon,
    .reader-layout.drawer-collapsed .drawer-toggle-label {
        display: inline-block;
        margin: 0 4px;
    }
}