/* ============================================================
   Lectio — a quiet reading environment for scripture
   ============================================================ */

:root {
    --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --measure: 34rem;
    --rail: 20rem;
    --radius: 10px;
}

:root[data-theme="light"] {
    --bg: #fbfaf7;
    --panel: #ffffff;
    --panel-2: #f5f2ec;
    --ink: #24211b;
    --muted: #726a5c;
    --faint: #a49a89;
    --line: #e6e0d4;
    --line-strong: #d8d0c0;
    --accent: #9c7a3c;      /* brass — verse numbers, active state */
    --accent-soft: #f0e7d5;
    --woj: #a2382b;         /* words of Jesus */
    --shadow: 0 1px 2px rgba(40, 34, 22, .05), 0 8px 24px rgba(40, 34, 22, .06);
}

:root[data-theme="dark"] {
    --bg: #14161a;
    --panel: #1b1e24;
    --panel-2: #21252c;
    --ink: #e7e2d7;
    --muted: #98917f;
    --faint: #6a6456;
    --line: #2a2e36;
    --line-strong: #363b45;
    --accent: #c99f52;
    --accent-soft: #2c2a20;
    --woj: #e07a68;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden; /* guard against any element spilling past the viewport */
}

#app { height: 100%; }

/* ---- Boot loader --------------------------------------------------------- */

.app-loading {
    height: 100%;
    display: grid;
    place-content: center;
    gap: .5rem;
    color: var(--muted);
    text-align: center;
}
.app-loading__mark { font-size: 2rem; color: var(--accent); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* ---- Shell --------------------------------------------------------------- */

.shell {
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr;
}

.topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .7rem 1.1rem;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: saturate(140%) blur(6px);
    position: sticky;
    top: 0;
    z-index: 20;
}

.brand {
    display: flex;
    align-items: baseline;
    gap: .55rem;
    font-family: var(--serif);
    letter-spacing: .01em;
}
.brand__logo { height: 1.7rem; width: auto; align-self: center; display: block; }
.brand__name { font-size: 1.15rem; font-weight: 600; }
.brand__tag { font-size: .78rem; color: var(--faint); font-family: var(--sans); letter-spacing: .06em; text-transform: uppercase; }

.topbar__spacer { flex: 1; }

.iconbtn {
    appearance: none;
    border: 1px solid var(--line-strong);
    background: var(--panel);
    color: var(--muted);
    height: 34px;
    padding: 0 .7rem;
    border-radius: 999px;
    font-size: .8rem;
    font-family: var(--sans);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    transition: color .15s, border-color .15s, background .15s;
}
.iconbtn:hover { color: var(--ink); border-color: var(--accent); }
.iconbtn[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

.menu-toggle { display: none; }
.rail-toggle {
    display: inline-flex;
    width: 34px;
    padding: 0;
    justify-content: center;
    font-size: 1rem;
}

/* ---- Body layout --------------------------------------------------------- */

.body {
    display: grid;
    grid-template-columns: var(--rail) 1fr;
    min-height: 0;
}

.body.rail-collapsed { grid-template-columns: 1fr; }
.body.study-open.rail-collapsed { grid-template-columns: 1fr var(--study); }
.body.rail-collapsed .rail { display: none; }

.rail {
    border-right: 1px solid var(--line);
    background: var(--panel);
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

.rail__section > h2 {
    font-family: var(--sans);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--faint);
    margin: 0 0 .6rem;
    font-weight: 600;
}

/* Translation picker */
.search {
    width: 100%;
    height: 38px;
    padding: 0 .8rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--ink);
    font-size: .9rem;
    font-family: var(--sans);
}
.search:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.translation-list {
    margin-top: .55rem;
    max-height: 15rem;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.translation-list__group {
    padding: .3rem .7rem;
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--faint);
    background: var(--panel-2);
    position: sticky;
    top: 0;
}
.translation-item {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    color: var(--ink);
    padding: .5rem .7rem;
    font-size: .88rem;
    font-family: var(--sans);
    cursor: pointer;
    border-top: 1px solid var(--line);
}
.translation-item:first-child { border-top: 0; }
.translation-item:hover { background: var(--panel-2); }
.translation-item[aria-current="true"] { color: var(--accent); font-weight: 600; }
.translation-item small { display: block; color: var(--faint); font-size: .74rem; }

.current-translation {
    margin-top: .6rem;
    font-size: .82rem;
    color: var(--muted);
}
.current-translation strong { color: var(--ink); font-weight: 600; }

/* Book picker */
.book-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-height: 40vh;
    overflow-y: auto;
}
.book-item {
    text-align: left;
    border: 0;
    background: transparent;
    color: var(--ink);
    padding: .45rem .55rem;
    border-radius: 8px;
    font-size: .92rem;
    font-family: var(--serif);
    cursor: pointer;
}
.book-item:hover { background: var(--panel-2); }
.book-item[aria-current="true"] { background: var(--accent-soft); color: var(--accent); }

/* Chapter grid */
.chapter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(2.4rem, 1fr));
    gap: .35rem;
}
.chapter-cell {
    aspect-ratio: 1;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--muted);
    border-radius: 8px;
    font-size: .85rem;
    font-family: var(--sans);
    cursor: pointer;
    transition: border-color .12s, color .12s;
}
.chapter-cell:hover { border-color: var(--accent); color: var(--ink); }
.chapter-cell[aria-current="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
:root[data-theme="dark"] .chapter-cell[aria-current="true"] { color: #14161a; }

/* ---- Reading pane -------------------------------------------------------- */

.reading {
    overflow-y: auto;
    padding: clamp(1.5rem, 4vw, 3.5rem) 1.25rem 6rem;
}
.reading__inner { max-width: var(--measure); margin: 0 auto; }

.folio {
    text-align: center;
    margin-bottom: 2.2rem;
    border-bottom: 1px solid var(--line);
    padding-bottom: 1.4rem;
}
.folio__book {
    font-family: var(--sans);
    font-size: .74rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--faint);
}
.folio__chapter {
    font-family: var(--serif);
    font-size: clamp(3rem, 12vw, 4.5rem);
    line-height: 1;
    color: var(--accent);
    margin-top: .25rem;
    font-weight: 500;
}

.scripture {
    font-family: var(--serif);
    font-size: 1.24rem;
    line-height: 1.85;
    color: var(--ink);
    letter-spacing: .003em;
}

.scripture h3.heading {
    font-family: var(--sans);
    font-size: .82rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
    margin: 2rem 0 .9rem;
}

.scripture .subtitle {
    font-style: italic;
    color: var(--muted);
    font-size: 1.05rem;
    margin: 0 0 1rem;
}

.scripture p.para { margin: 0 0 1.15rem; }

.vnum {
    font-family: var(--sans);
    font-size: .62em;
    font-weight: 600;
    color: var(--accent);
    vertical-align: .35em;
    margin: 0 .28em 0 .1em;
    user-select: none;
}
.vnum:first-child { margin-left: 0; }

.woj { color: var(--woj); }
:root:not(.red-letter) .woj { color: inherit; }

.poem-line {
    display: block;
    padding-left: calc(var(--indent, 0) * 1.4rem);
    text-indent: -0.6rem;
}

.fnref {
    font-family: var(--sans);
    font-size: .6em;
    vertical-align: .35em;
    color: var(--accent);
    cursor: help;
    text-decoration: none;
    margin: 0 .1em;
    font-weight: 600;
}

/* Footnotes */
.footnotes {
    margin-top: 2.5rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--line);
    font-family: var(--sans);
    font-size: .82rem;
    line-height: 1.55;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.footnotes h4 {
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--faint);
    margin: 0 0 .3rem;
}
.footnote__id { color: var(--accent); font-weight: 600; margin-right: .4rem; }

/* Prev / next */
.chapter-nav {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    max-width: var(--measure);
    margin: 3rem auto 0;
}
.chapter-nav button {
    flex: 1;
    border: 1px solid var(--line-strong);
    background: var(--panel);
    color: var(--muted);
    padding: .8rem 1rem;
    border-radius: var(--radius);
    font-family: var(--sans);
    font-size: .85rem;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.chapter-nav button:hover:not(:disabled) { border-color: var(--accent); color: var(--ink); }
.chapter-nav button:disabled { opacity: .35; cursor: default; }
.chapter-nav .next { text-align: right; }

/* States */
.state {
    display: grid;
    place-content: center;
    height: 100%;
    color: var(--muted);
    text-align: center;
    gap: .5rem;
    padding: 2rem;
}
.state .spinner {
    width: 26px; height: 26px;
    border: 2.5px solid var(--line-strong);
    border-top-color: var(--accent);
    border-radius: 50%;
    margin: 0 auto;
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.state button {
    margin-top: .5rem;
    border: 1px solid var(--accent);
    color: var(--accent);
    background: transparent;
    padding: .5rem 1rem;
    border-radius: var(--radius);
    cursor: pointer;
    font-family: var(--sans);
}

/* ---- Responsive ---------------------------------------------------------- */

@media (max-width: 820px) {
    .menu-toggle { display: inline-flex; }
    .rail-toggle { display: none; }
    .body { grid-template-columns: 1fr; }
    .rail {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(88vw, var(--rail));
        z-index: 30;
        transform: translateX(-100%);
        transition: transform .22s ease;
        box-shadow: var(--shadow);
    }
    .rail.open { transform: translateX(0); }
    .scrim {
        position: fixed; inset: 0; z-index: 25;
        background: rgba(0, 0, 0, .35);
    }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* Blazor error banner */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    padding: .7rem 1.2rem;
    background: #b3402f;
    color: #fff;
    font-family: var(--sans);
    font-size: .85rem;
    z-index: 100;
}
#blazor-error-ui .reload { color: #fff; text-decoration: underline; margin-left: .5rem; }
#blazor-error-ui .dismiss { cursor: pointer; float: right; }

/* ============================================================
   Study features: audio, verse actions, commentary, credits
   ============================================================ */

:root { --study: 22rem; }

.body.study-open { grid-template-columns: var(--rail) 1fr var(--study); }

/* Verse numbers are now interactive buttons */
button.vnum {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0 .28em 0 .1em;
    cursor: pointer;
    font-family: var(--sans);
    font-size: .62em;
    font-weight: 600;
    color: var(--accent);
    vertical-align: .35em;
    line-height: 1;
    border-radius: 3px;
}
button.vnum:hover { text-decoration: underline; }
button.vnum:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.verse { border-radius: 4px; transition: background .3s; }
.verse--active { background: var(--accent-soft); box-shadow: 0 0 0 .35em var(--accent-soft); }

/* Audio */
.audio-bar {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex-wrap: wrap;
    padding: .7rem .9rem;
    margin: 0 0 2rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
}
.audio-bar__label {
    font-family: var(--sans);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--faint);
}
.audio-bar__reader {
    height: 32px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: .82rem;
    padding: 0 .5rem;
}
.audio-bar__player { height: 34px; flex: 1; min-width: 12rem; }

/* Study panel */
.study {
    border-left: 1px solid var(--line);
    background: var(--panel);
    overflow-y: auto;
    padding: 1rem 1.1rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
}
.study__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.study__ref { font-family: var(--serif); font-size: 1.3rem; color: var(--ink); }
.study__sub { font-family: var(--sans); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }

.study__actions { display: flex; gap: .5rem; }
.pill {
    flex: 1;
    border: 1px solid var(--line-strong);
    background: var(--bg);
    color: var(--muted);
    border-radius: 999px;
    padding: .5rem .6rem;
    font-family: var(--sans);
    font-size: .8rem;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.pill:hover { border-color: var(--accent); color: var(--ink); }

.study__section > h3 {
    font-family: var(--sans);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--faint);
    margin: 0 0 .6rem;
    font-weight: 600;
}
.study__muted { color: var(--muted); font-family: var(--sans); font-size: .85rem; margin: .3rem 0; }
.study__muted.small { font-size: .78rem; font-style: italic; }

.xref-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.xref {
    border: 1px solid var(--line-strong);
    background: var(--bg);
    color: var(--accent);
    border-radius: 8px;
    padding: .35rem .6rem;
    font-family: var(--sans);
    font-size: .82rem;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.xref:hover { background: var(--accent-soft); border-color: var(--accent); }

.commentary-text {
    margin-top: .7rem;
    font-family: var(--serif);
    font-size: .98rem;
    line-height: 1.65;
    color: var(--ink);
    white-space: pre-wrap;
}

/* Rail about link */
.rail__about {
    margin-top: auto;
    border: 0;
    background: transparent;
    color: var(--muted);
    text-align: left;
    font-family: var(--sans);
    font-size: .8rem;
    cursor: pointer;
    padding: .5rem 0 0;
    text-decoration: underline;
}
.rail__about:hover { color: var(--accent); }

/* About modal */
.modal-scrim {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(0, 0, 0, .45);
    display: grid; place-items: center;
    padding: 1.2rem;
}
.modal {
    background: var(--panel);
    color: var(--ink);
    border-radius: 14px;
    box-shadow: var(--shadow);
    max-width: 34rem;
    width: 100%;
    max-height: 82vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.modal__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid var(--line);
}
.modal__head h2 { margin: 0; font-family: var(--serif); font-size: 1.2rem; }
.modal__body { padding: 1.2rem; overflow-y: auto; font-family: var(--sans); font-size: .9rem; line-height: 1.6; color: var(--muted); }
.modal__body h3 { color: var(--ink); font-size: .95rem; margin: 1.2rem 0 .3rem; }
.modal__body p { margin: .3rem 0 .8rem; }
.modal__body a { color: var(--accent); }
.credit-list { margin: .3rem 0 .8rem; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .25rem; }

/* Toast */
.toast {
    position: fixed;
    bottom: 1.4rem; left: 50%;
    transform: translateX(-50%);
    background: var(--ink);
    color: var(--bg);
    padding: .6rem 1.1rem;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: .85rem;
    z-index: 80;
    box-shadow: var(--shadow);
}

/* Study panel as a drawer on narrower screens */
@media (max-width: 1100px) {
    .body.study-open { grid-template-columns: var(--rail) 1fr; }
    .study {
        position: fixed;
        inset: 0 0 0 auto;
        width: min(92vw, 26rem);
        z-index: 40;
        box-shadow: var(--shadow);
    }
}

@media (max-width: 820px) {
    .study { width: 100vw; }
}

/* ============================================================
   Collapsible sidebar sections, audio options, soft-follow
   ============================================================ */

/* Accordion headers (replace the old .rail__section > h2) */
.rail__head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: .1rem 0 .5rem;
    margin: 0;
    color: var(--faint);
    font-family: var(--sans);
    text-align: left;
}
.rail__head:hover { color: var(--accent); }
.rail__head-left { display: flex; align-items: baseline; gap: .45rem; min-width: 0; }
.rail__head-label {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.rail__head-cur {
    font-size: .8rem;
    font-weight: 600;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rail__chev { font-size: .8rem; color: var(--faint); flex: none; }
.rail__head:hover .rail__chev { color: var(--accent); }

/* Audio options (auto-advance, follow) */
.audio-bar__opts {
    display: inline-flex;
    align-items: center;
    gap: .9rem;
    margin-left: auto;
    flex-wrap: wrap;
}
.audio-bar__opt {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--sans);
    font-size: .8rem;
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
}
.audio-bar__opt input {
    width: 15px;
    height: 15px;
    accent-color: var(--accent);
    cursor: pointer;
}

/* Soft "follow along" highlight (distinct from the study --active ring) */
.verse--reading {
    background: color-mix(in srgb, var(--accent-soft) 65%, transparent);
    border-radius: 4px;
}

/* ============================================================
   Floating chapter arrows — anchored just outside the centered
   text column, shown only on desktop / landscape-tablet widths.
   ============================================================ */

:root {
    --fab-gap: .85rem;   /* distance from the text column to the arrow */
    --fab-size: 2.5rem;
}

/* Full-height, click-through layer spanning the reading area. It centers a
   track the same width as the text column, so the arrows sit in the gutter
   right beside the text regardless of how wide the screen is. Hidden by
   default; enabled only at desktop / landscape-tablet widths below. */
.chapter-fab-rail {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: var(--rail);
    right: 0;
    z-index: 20;
    pointer-events: none;              /* let text/scroll interactions pass through */
    justify-content: center;
}
.chapter-fab-rail__track {
    position: relative;
    width: var(--measure);
    max-width: 100%;
    height: 100%;
}

.chapter-fab {
    pointer-events: auto;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--fab-size);
    height: var(--fab-size);
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: color-mix(in srgb, var(--panel) 85%, transparent);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    color: var(--muted);
    font-family: var(--sans);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: color .15s, border-color .15s, opacity .15s, background .15s;
}
.chapter-fab:hover:not(:disabled) { color: var(--ink); border-color: var(--accent); }
.chapter-fab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chapter-fab:disabled { opacity: 0; pointer-events: none; }

/* Just outside the text column, on each side. */
.chapter-fab--prev { right: 100%; margin-right: 1.5rem; }
.chapter-fab--next { left: 100%; margin-left: .9rem; }

/* Track spans the reading area; shift its bounds with the rail / study panel. */
.body.rail-collapsed .chapter-fab-rail { left: 0; }
.body.study-open .chapter-fab-rail { right: var(--study); }   /* study is a column (>1100px) */
@media (max-width: 1100px) {
    .body.study-open .chapter-fab-rail { right: 0; }          /* study is an overlay drawer */
}

/* Show the side arrows only when there's room: desktop / landscape tablets.
   Below this the reading column fills the width, so the bottom Prev/Next nav
   is used instead. */
@media (min-width: 1024px) {
    .chapter-fab-rail { display: flex; }
}

/* With the study panel taking a column, the text column narrows — only show
   the side arrows once the window is wide enough to keep a comfortable gutter. */
@media (min-width: 1101px) and (max-width: 1349px) {
    .body.study-open .chapter-fab-rail { display: none; }
}

/* ============================================================
   Mobile state reset — the desktop "rail collapsed" and "study open"
   states must not leak into the phone layout, where the rail and study
   panel are both overlay drawers. Placed last so it wins by source order.
   ============================================================ */
@media (max-width: 820px) {
    /* Always a single reading column, whatever the desktop toggles were. */
    .body,
    .body.rail-collapsed,
    .body.study-open,
    .body.study-open.rail-collapsed { grid-template-columns: 1fr; }

    /* Keep the rail drawer usable even if it was collapsed on desktop
       (otherwise it stays display:none and the menu opens only the scrim). */
    .body.rail-collapsed .rail { display: flex; }
}

/* Narrow screens: keep the top bar on one line within the viewport so it can't
   spill past the right edge (which was clipping the reading text on ~375px
   phones). Dropping the "Bible Reader" subtitle frees the needed width. */
@media (max-width: 820px) {
    .topbar { gap: .55rem; padding: .7rem .8rem; }
    .brand { min-width: 0; }
    .brand__name { white-space: nowrap; }
    .brand__tag { display: none; }

    /* Theme toggle becomes icon-only (a round button like the menu toggle). */
    .theme-toggle { width: 34px; padding: 0; justify-content: center; font-size: 1rem; }
    .theme-toggle .iconbtn__label { display: none; }

    /* About is reachable from the sidebar's "About & credits" link, so drop the
       top-bar button on phones. */
    .about-toggle { display: none; }
}