/* /public/assets/css/site.css - the site's own styles, on top of Bootstrap 5.3 */

/* ---------------------------------------------------------------------
   Themes
   The visitor picks one from the "Display" menu (see site.js); the choice
   is stored in their browser and set on <html> as data-yb-theme, with
   Bootstrap's own data-bs-theme set to light or dark underneath.

   Pages never use colour values directly: only the --yb-* variables
   below and Bootstrap's classes. A new colour means a new variable,
   defined in every theme. Text colours in every theme pass WCAG AA
   contrast (4.5:1 or better).
   --------------------------------------------------------------------- */

:root,
[data-yb-theme="light"] {
    --yb-page-bg: #f7f7f9;
    --yb-brand: #5b3f8c;             /* site name, active menu item */
    --yb-bar-bg: #cdbfe0;            /* menu bar and footer; matches the logo's background */
    --yb-bar-border: #5a4975;
    --yb-nav-active-bg: #5a4975;        /* the menu item for the page you are on */
    --yb-nav-active-color: #ffffff;
    --yb-panel-bg: #ccbfe0;          /* highlighted panels */
    --yb-panel-color: #332d53;
    --yb-notice-bg: #fff3cd;         /* preview banner */
    --yb-notice-color: #664d03;
    --yb-label-color: #495057;       /* field names on the record page */
    --yb-chart: #6f4fa8;             /* chart marks; checked for each theme's surface */
    /* admin dashboard groups: each group's colour (its hue is set on the page) at this theme's strength and lightness;
       title bar tint and text, then icons from the first shade, stepping down the list (darker to lighter, or the reverse when dark) */
    --yb-group-sat: 62%;
    --yb-group-head-l: 89%;
    --yb-group-text-l: 22%;
    --yb-group-icon-l: 30%;
    --yb-group-icon-step: 5%;
}

[data-yb-theme="dark"] {
    --yb-page-bg: #17191c;
    --yb-brand: #d6c4f5;
    --yb-bar-bg: #2e2540;
    --yb-bar-border: #5a4975;
    --yb-nav-active-bg: #5a4975;        /* the menu item for the page you are on */
    --yb-nav-active-color: #ffffff;
    --yb-panel-bg: #3a2f52;
    --yb-panel-color: #ece4f8;
    --yb-notice-bg: #3d3413;
    --yb-notice-color: #ffe69c;
    --yb-label-color: #adb5bd;
    --yb-chart: #9072d4;
    /* admin dashboard groups: each group's colour (its hue is set on the page) at this theme's strength and lightness;
       title bar tint and text, then icons from the first shade, stepping down the list (darker to lighter, or the reverse when dark) */
    --yb-group-sat: 45%;
    --yb-group-head-l: 20%;
    --yb-group-text-l: 86%;
    --yb-group-icon-l: 82%;
    --yb-group-icon-step: -4%;
}

/* High contrast: black on white, strong borders, underlined links. */
[data-yb-theme="contrast"] {
    --yb-page-bg: #ffffff;
    --yb-brand: #000000;
    --yb-bar-bg: #ffffff;
    --yb-bar-border: #000000;
    --yb-nav-active-bg: #000000;        /* the menu item for the page you are on */
    --yb-nav-active-color: #ffffff;
    --yb-panel-bg: #ffffff;
    --yb-panel-color: #000000;
    --yb-notice-bg: #ffffff;
    --yb-notice-color: #000000;
    --yb-label-color: #000000;
    --yb-chart: #2450c8;
    --yb-primary: #0033aa;
    --yb-primary-hover: #002277;

    --bs-body-bg: #ffffff;
    --bs-body-color: #000000;
    --bs-emphasis-color: #000000;
    --bs-secondary-color: #222222;
    --bs-tertiary-color: #222222;
    --bs-secondary-bg: #ffffff;
    --bs-tertiary-bg: #ffffff;
    --bs-border-color: #000000;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-body-color-rgb: 0, 0, 0;
    --bs-emphasis-color-rgb: 0, 0, 0;
    --bs-secondary-bg-rgb: 255, 255, 255;
    --bs-tertiary-bg-rgb: 255, 255, 255;
    --bs-link-color: #0033aa;
    --bs-link-color-rgb: 0, 51, 170;
    --bs-link-hover-color: #002277;
    --bs-link-hover-color-rgb: 0, 34, 119;
    /* admin dashboard groups: each group's colour (its hue is set on the page) at this theme's strength and lightness;
       title bar tint and text, then icons from the first shade, stepping down the list (darker to lighter, or the reverse when dark) */
    --yb-group-sat: 0%;
    --yb-group-head-l: 100%;
    --yb-group-text-l: 0%;
    --yb-group-icon-l: 0%;
    --yb-group-icon-step: 0%;
}

/* Soft (sepia): warm, low-glare colours for long reading sessions. */
[data-yb-theme="sepia"] {
    --yb-page-bg: #f3ead7;
    --yb-brand: #5a3418;
    --yb-bar-bg: #e6d6b3;
    --yb-bar-border: #8a6a3f;
    --yb-nav-active-bg: #5a3418;        /* the menu item for the page you are on */
    --yb-nav-active-color: #ffffff;
    --yb-panel-bg: #e9dcc0;
    --yb-panel-color: #3b2f22;
    --yb-notice-bg: #efe0b0;
    --yb-notice-color: #5a4410;
    --yb-label-color: #5b4a36;
    --yb-chart: #9a5a1c;
    --yb-primary: #8a4b12;
    --yb-primary-hover: #6e3b0e;

    --bs-body-bg: #fbf5e6;
    --bs-body-color: #3b2f22;
    --bs-emphasis-color: #2a2118;
    --bs-secondary-color: #6b5a45;
    --bs-tertiary-color: #6b5a45;
    --bs-secondary-bg: #efe3c8;
    --bs-tertiary-bg: #f6eddb;
    --bs-border-color: #d8c8a8;
    --bs-body-bg-rgb: 251, 245, 230;
    --bs-body-color-rgb: 59, 47, 34;
    --bs-emphasis-color-rgb: 42, 33, 24;
    --bs-secondary-bg-rgb: 239, 227, 200;
    --bs-tertiary-bg-rgb: 246, 237, 219;
    --bs-link-color: #8a4b12;
    --bs-link-color-rgb: 138, 75, 18;
    --bs-link-hover-color: #6e3b0e;
    --bs-link-hover-color-rgb: 110, 59, 14;
    /* admin dashboard groups: each group's colour (its hue is set on the page) at this theme's strength and lightness;
       title bar tint and text, then icons from the first shade, stepping down the list (darker to lighter, or the reverse when dark) */
    --yb-group-sat: 35%;
    --yb-group-head-l: 85%;
    --yb-group-text-l: 24%;
    --yb-group-icon-l: 30%;
    --yb-group-icon-step: 4.5%;
}

/* Bootstrap's blue buttons are built into its CSS, so themes with their own
   main colour (--yb-primary) restyle them here. */
[data-yb-theme="contrast"] .btn-primary,
[data-yb-theme="sepia"] .btn-primary {
    --bs-btn-bg: var(--yb-primary);
    --bs-btn-border-color: var(--yb-primary);
    --bs-btn-hover-bg: var(--yb-primary-hover);
    --bs-btn-hover-border-color: var(--yb-primary-hover);
    --bs-btn-active-bg: var(--yb-primary-hover);
    --bs-btn-active-border-color: var(--yb-primary-hover);
}

[data-yb-theme="contrast"] .btn-outline-primary,
[data-yb-theme="sepia"] .btn-outline-primary {
    --bs-btn-color: var(--yb-primary);
    --bs-btn-border-color: var(--yb-primary);
    --bs-btn-hover-bg: var(--yb-primary);
    --bs-btn-hover-border-color: var(--yb-primary);
    --bs-btn-active-bg: var(--yb-primary-hover);
    --bs-btn-active-border-color: var(--yb-primary-hover);
}

[data-yb-theme="contrast"] .text-primary,
[data-yb-theme="sepia"] .text-primary {
    color: var(--yb-primary) !important;
}

[data-yb-theme="contrast"] a:not(.btn):not(.nav-link):not(.navbar-brand) {
    text-decoration: underline;
}

[data-yb-theme="contrast"] .card,
[data-yb-theme="contrast"] .bg-body-tertiary,
[data-yb-theme="contrast"] .site-nav,
[data-yb-theme="contrast"] .site-footer,
[data-yb-theme="contrast"] .home-volunteer,
[data-yb-theme="contrast"] .preview-banner {
    border: 2px solid #000 !important;
}

[data-yb-theme="contrast"] .site-nav .nav-link {
    color: #000;
}

[data-yb-theme="contrast"] .nav-link.active {
    text-decoration: underline;
    font-weight: 600;
}

[data-yb-theme="contrast"] .site-nav .navbar-nav .nav-link.active {
    color: var(--yb-nav-active-color);
}

[data-yb-theme="contrast"] :focus-visible {
    outline: 3px solid #000;
    outline-offset: 2px;
}

/* Text size, from the Display menu. Bootstrap sizes everything in rem,
   so the whole page scales. */
[data-yb-text="large"] {
    font-size: 112.5%;
}

[data-yb-text="larger"] {
    font-size: 125%;
}

/* ---------------------------------------------------------------------
   Layout
   --------------------------------------------------------------------- */

body {
    background: var(--yb-page-bg);
}

.preview-banner {
    background: var(--yb-notice-bg);
    color: var(--yb-notice-color);
}

.site-nav {
    background: var(--yb-bar-bg);
    border-bottom: 2px solid var(--yb-bar-border);
}

/* The logo has the light theme's lilac built in; in other themes it sits
   in a rounded frame so the colour looks deliberate. */
.site-logo {
    display: block;
    width: 200px;
    height: auto;
}

[data-yb-theme="dark"] .site-logo,
[data-yb-theme="contrast"] .site-logo,
[data-yb-theme="sepia"] .site-logo {
    border-radius: 0.5rem;
}

[data-yb-theme="contrast"] .site-logo {
    outline: 2px solid #000;
}

@media (max-width: 575.98px) {
    .site-logo {
        width: 150px;
    }
}

.site-nav .navbar-brand {
    color: var(--yb-brand);
}

/* The menu item for the page you are on: a filled tab with its icon, as the
   current site shows it. */
.site-nav .navbar-nav .nav-link.active {
    background: var(--yb-nav-active-bg);
    color: var(--yb-nav-active-color);
    font-weight: 600;
    border-radius: .5rem;
    padding-left: .75rem;
    padding-right: .75rem;
}

.site-nav .navbar-nav .nav-link.active:hover,
.site-nav .navbar-nav .nav-link.active:focus {
    color: var(--yb-nav-active-color);
    opacity: .9;
}

.site-footer {
    background: var(--yb-bar-bg);
}

/* Display menu: hidden until site.js has set it up. */
.display-menu .dropdown-menu {
    min-width: 15rem;
}

/* ---------------------------------------------------------------------
   Pages
   --------------------------------------------------------------------- */

.results-table td {
    vertical-align: top;
}

.record-table th {
    width: 32%;
    padding-left: 1rem;
    font-weight: 600;
    color: var(--yb-label-color);
}

.record-table td {
    padding-right: 1rem;
}

/* Register page view: a page of the register as in the book. Many
   columns, so it scrolls sideways on narrow screens; headings wrap. */
.register-book table {
    font-size: 0.875rem;
}

.register-book th {
    min-width: 5rem;
    vertical-align: bottom;
    font-weight: 600;
}

.register-book .register-flag {
    width: 2rem;
    min-width: 2rem;
    text-align: center;
}

.register-goto {
    width: 6rem;
}

/* Photo edit form */
.photo-edit-image {
    max-height: 32rem;
    object-fit: contain;
}

.inscription-edit-text {
    font-family: Georgia, "Times New Roman", serif;
}

/* Record page History: field names beside old and new values */
.history-table th {
    width: 35%;
    font-weight: 600;
    color: var(--yb-label-color);
}

/* Template builder (/admin/template) */
.template-drag {
    cursor: grab;
}

.template-column.is-dragging {
    opacity: 0.5;
}

.template-column.drop-before {
    box-shadow: inset 0 3px 0 var(--bs-primary);
}

.template-slot-label {
    flex: 0 0 8.5rem;
}

.template-columns .list-group-item::before {
    padding-top: 0.25rem;
}

#preview.is-loading {
    opacity: 0.6;
}

/* On wide screens the preview stays in view while the columns are edited. */
@media (min-width: 1200px) {
    .template-preview-card {
        position: sticky;
        top: 1rem;
        max-height: calc(100vh - 2rem);
        overflow: auto;
    }
}

.template-register-list {
    max-height: 22rem;
    overflow-y: auto;
}

.template-register-choice {
    max-height: 32rem;
    overflow-y: auto;
}

/* Home page */
.home-banner {
    border-radius: 1rem;
    max-height: 280px;
    object-fit: cover;
}

.home-volunteer {
    background: var(--yb-panel-bg);
    color: var(--yb-panel-color);
}

.countup {
    font-variant-numeric: tabular-nums;
}

/* With larger text, the totals need two to a row to fit. */
@media (min-width: 992px) {
    [data-yb-text="large"] .home-stat,
    [data-yb-text="larger"] .home-stat {
        flex: 0 0 auto;
        width: 50%;
    }
}

.home-list-item {
    padding: 0.95rem 1rem;
}

.home-thumb {
    height: 150px;
    object-fit: cover;
}

.sex-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 999px;
    border: 1px solid var(--bs-border-color);
    margin-top: 2px;
}

.sex-icon-sm {
    width: 24px;
    height: 24px;
    margin: 0 0.35rem 0 0;
    font-size: 0.8rem;
    vertical-align: middle;
}

.sex-male {
    color: #0d6efd;
    background: rgba(13, 110, 253, .08);
}

.sex-female {
    color: #d63384;
    background: rgba(214, 51, 132, .08);
}

.sex-unknown {
    color: var(--bs-secondary-color);
    background: rgba(108, 117, 125, .10);
}

[data-yb-theme="dark"] .sex-male {
    color: #6ea8fe;
}

[data-yb-theme="dark"] .sex-female {
    color: #e685b5;
}

/* Maps (cemetery-map.js) */
.cemetery-map {
    height: 70vh;
    min-height: 420px;
    border-radius: 1rem;
    border: 1px solid var(--bs-border-color);
}

.nearby-map {
    height: 340px;
    border-radius: 1rem;
    border: 1px solid var(--bs-border-color);
}

.map-pin span {
    display: block;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .45);
}

.map-cluster span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .45);
    color: #fff;
    font-weight: 700;
    text-shadow: 0 0 3px #000, 0 0 2px #000;
}

.map-search-results {
    z-index: 1100;
    max-height: 22rem;
    overflow-y: auto;
}

/* Cemetery page */
/* Named text colours for notes (src/formatters.php safe_html, the notes editor): darker in the light theme, lighter in the dark one. */
.note-red { color: #b02a37; }
.note-blue { color: #0a58ca; }
.note-green { color: #146c43; }
.note-orange { color: #a14e00; }
.note-purple { color: #6f42c1; }
[data-bs-theme="dark"] .note-red { color: #ea868f; }
[data-bs-theme="dark"] .note-blue { color: #6ea8fe; }
[data-bs-theme="dark"] .note-green { color: #75b798; }
[data-bs-theme="dark"] .note-orange { color: #ffa94d; }
[data-bs-theme="dark"] .note-purple { color: #c29ffa; }
.cemetery-notes h2 { font-size: 1.25rem; margin: 1rem 0 .5rem; }
.cemetery-notes h3 { font-size: 1.1rem; margin: 1rem 0 .5rem; }
.cemetery-notes blockquote { border-left: 4px solid var(--bs-border-color); padding-left: 1rem; margin: 1rem 0; color: var(--bs-secondary-color); }
.html-editor-area { min-height: 10rem; max-height: 28rem; overflow: auto; }
.html-editor-area h2 { font-size: 1.25rem; }
.html-editor-area h3 { font-size: 1.1rem; }
.html-editor-area blockquote { border-left: 4px solid var(--bs-border-color); padding-left: 1rem; color: var(--bs-secondary-color); }
.html-editor-source { font-family: var(--bs-font-monospace); min-height: 10rem; }
.cemetery-photo {
    width: 100%;
    height: 100%;
    min-height: 240px;
    max-height: 380px;
    object-fit: cover;
}

.cemetery-details dt {
    font-weight: 600;
    color: var(--yb-label-color);
}

.cemetery-details dd {
    margin-bottom: 0.75rem;
}

.cemetery-notes ul {
    padding-left: 1.25rem;
}

.resource-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
}

/* Charts (charts.js) and inline bars in tables */
.column-chart {
    position: relative;
    min-height: 260px;
}

.chart-svg {
    display: block;
    overflow: visible;
}

.chart-bar {
    fill: var(--yb-chart);
}

.chart-grid {
    stroke: var(--bs-border-color);
    stroke-width: 1;
    opacity: 0.6;
}

.chart-baseline {
    stroke: var(--bs-secondary-color);
    stroke-width: 1;
}

.chart-axis {
    fill: var(--bs-secondary-color);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.chart-value {
    fill: var(--bs-body-color);
    font-size: 0.8rem;
    font-weight: 600;
}

.chart-hit {
    fill: transparent;
    cursor: default;
    outline: none;
}

.chart-hit.is-active,
.chart-hit:focus-visible {
    fill: var(--bs-body-color);
    fill-opacity: 0.06;
}

.chart-tip {
    position: absolute;
    pointer-events: none;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 0.35rem 0.6rem;
    font-size: 0.875rem;
    white-space: nowrap;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, .15);
}

.inline-bar {
    height: 8px;
    min-width: 2px;
    border-radius: 0 4px 4px 0;
    background: var(--yb-chart);
}

.num {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

/* Share of a total: a bar on a faint track */
.share-track {
    height: 8px;
    border-radius: 4px;
    background: var(--bs-secondary-bg);
}

.share-track .inline-bar {
    border-radius: 4px;
}

/* Area colour dot (area_swatch): the area's map colour, with a thin outline
   so pale colours still show on light backgrounds. */
.area-swatch {
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin-right: 0.4em;
    border-radius: 50%;
    vertical-align: -0.05em;
    box-shadow: 0 0 0 1px var(--bs-body-bg), 0 0 0 2px rgba(0, 0, 0, .35);
}

[data-yb-theme="dark"] .area-swatch {
    box-shadow: 0 0 0 1px var(--bs-body-bg), 0 0 0 2px rgba(255, 255, 255, .45);
}

/* Search panel (templates/search.php): a <details> that folds the form away
   after a search, showing a one-line summary instead. */
.search-panel > summary {
    list-style: none;
    cursor: pointer;
}

.search-panel > summary::-webkit-details-marker {
    display: none;
}

.search-panel[open] .search-panel-closed,
.search-panel:not([open]) .search-panel-open {
    display: none;
}

.search-panel:not([open]) > summary:hover {
    background: var(--bs-tertiary-bg);
}

/* Sort buttons above search results: stay in view while scrolling the
   results, and scroll sideways on narrow screens rather than wrapping. */
.sort-bar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    overflow-x: auto;
    padding: 0.5rem 0;
    margin-bottom: 0.25rem;
    background: var(--yb-page-bg);
    border-bottom: 1px solid var(--bs-border-color);
    white-space: nowrap;
}

/* Column filter boxes under the results headings */
.results-table .filter-row th {
    padding-top: 0;
    font-weight: normal;
}

.results-table .filter-row input {
    min-width: 7rem;
}

#searchResults.is-loading .results-table tbody {
    opacity: 0.5;
    transition: opacity 0.15s;
}

/* Record page */
.copy-btn {
    color: var(--bs-secondary-color);
    vertical-align: baseline;
}

.copy-btn:hover,
.copy-btn:focus-visible,
.copy-btn.is-copied {
    color: var(--bs-link-color);
}

.grave-thumb {
    width: 110px;
    height: 110px;
    object-fit: cover;
}

.inscription-snippet {
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    overflow-wrap: anywhere;
}

.min-w-0 {
    min-width: 0;
}

@media (max-width: 575.98px) {
    .grave-thumb {
        width: 80px;
        height: 80px;
    }
}

.record-cemetery-photo {
    max-height: 200px;
    object-fit: cover;
}

.citation {
    font-family: Georgia, "Times New Roman", serif;
    overflow-wrap: anywhere;
}

/* The search result opened most recently ("Last viewed"); scrolled to when
   coming back from a record, clear of the sort bar that stays in view. */
.results-table tr.row-last-viewed > td,
.register-book tr.row-last-viewed > td {
    background: var(--bs-warning-bg-subtle);
}

.results-table tr.row-last-viewed > td:first-child,
.register-book tr.row-last-viewed > td:first-child {
    box-shadow: inset 4px 0 0 var(--bs-warning);
}

/* Where "Back to ..." lands on the register page: a little above the row. */
.register-anchor {
    display: block;
    scroll-margin-top: 4rem;
}

.results-table tr {
    scroll-margin-top: 4.5rem;
}

/* Footer */
.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
}

.footer-links a {
    color: var(--bs-body-color);
}

/* "Support Yorkshire Burials" (Buy Me a Coffee) - the site's own purple */
.btn-support {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--yb-bar-border);
    --bs-btn-border-color: var(--yb-bar-border);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #45375c;
    --bs-btn-hover-border-color: #45375c;
}

/* Reading pages: About, Help, Volunteer, Reproduction policy */
.prose {
    font-size: 1.05rem;
    line-height: 1.65;
}

.prose h2 {
    color: var(--yb-brand);
}

/* Guides (/help/guide): screenshots, and parts linked to from other pages */
.guide-shot {
    margin: 1rem 0 1.25rem;
}

.guide-shot img {
    cursor: zoom-in;
}

.guide [id] {
    scroll-margin-top: 1rem;
}

.support-panel {
    background: var(--yb-panel-bg);
    color: var(--yb-panel-color);
}

.volunteer-banner {
    max-height: 320px;
    object-fit: cover;
}

/* Contact form: the field robots fill in and people never see */
.contact-extra {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* News and feedback */
.news-pinned {
    border-left: 4px solid var(--yb-brand) !important;
}

.news-thumb {
    width: 100%;
    height: 100%;
    min-height: 160px;
    max-height: 220px;
    object-fit: cover;
}

.news-comment {
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    margin-bottom: 0.75rem;
}

.news-comment p:last-child {
    margin-bottom: 0;
}

.news-comment.is-admin {
    background: var(--yb-panel-bg);
    color: var(--yb-panel-color);
    margin-left: 2rem;
}

.news-comment.is-pending {
    border-style: dashed;
}

.home-news {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
}

.home-news:hover {
    border-color: var(--yb-brand);
}

/* Inscription page */
/* The photo on the inscription page: shown whole; clicking opens the viewer. */
.inscription-photo {
    max-height: 75vh;
    object-fit: contain;
    background: #1b1b1b;
    cursor: zoom-in;
}

/* Photo viewer pop-up (photo-viewer.js). Dark in every theme. */
.photo-viewer-modal {
    background: #111;
}

.photo-viewer {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.photo-viewer-frame {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: none;
    cursor: zoom-in;
}

.photo-viewer-frame.is-zoomed {
    cursor: grab;
}

.photo-viewer-frame.is-zoomed:active {
    cursor: grabbing;
}

.photo-viewer-frame:focus-visible {
    outline: 3px solid var(--yb-brand);
    outline-offset: -3px;
}

.photo-viewer-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transform-origin: center center;
    transition: transform 0.12s ease-out;
    user-select: none;
}

.photo-viewer-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    background: rgba(0, 0, 0, 0.8);
}

.photo-viewer-zoom {
    width: 14rem;
    max-width: 40vw;
}

.photo-viewer-level {
    min-width: 3rem;
}

.photo-viewer-divider {
    width: 1px;
    height: 1.5rem;
    background: rgba(255, 255, 255, 0.3);
    margin: 0 0.25rem;
}

.inscription-text {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.1rem;
    line-height: 1.6;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* Menu items never break over two lines. */
.site-nav .nav-link {
    white-space: nowrap;
}

/* The photo opened most recently, in the photo search results */
.grave-photos .item-last-viewed {
    background: var(--bs-warning-bg-subtle);
    box-shadow: inset 4px 0 0 var(--bs-warning);
    scroll-margin-top: 4.5rem;
}

/* Page links (pager_html) */
.pager .pagination {
    --bs-pagination-font-size: 0.95rem;
}

.pager-go {
    width: 5.5rem;
}

/* Upload form: a grave number suggested (Next / Same) rather than typed */
.is-suggested {
    background-color: var(--bs-info-bg-subtle);
}

/* Upload form: the Photos box while photos are dragged over the form */
.photo-drop {
    border-style: dashed;
}
.photo-drop.is-dragging {
    border-color: var(--yb-brand);
    border-width: 2px;
    background-color: var(--yb-panel-bg);
    color: var(--yb-panel-color);
}

/* Upload pages: the uploader's last few photos */
.last-upload-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
}

/* Map: a pin with the uploader's photo count on it (My places, Near me) */
.map-pin-count span {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    text-shadow: 0 0 2px rgba(0, 0, 0, .6);
}

/* Uploader pages: the bar of uploader pages (partials/uploader_nav.php) */
.uploader-nav {
    border-bottom: 1px solid var(--bs-border-color);
    padding-bottom: .5rem;
}

/* The menu on laptop widths (the full menu shows from 1200px): Display and the
   account show as icons only, and items sit closer, so it stays on one line. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .site-nav .nav-label {
        display: none;
    }
    .site-nav .navbar-nav .nav-link {
        padding-left: .4rem;
        padding-right: .4rem;
    }
    .site-nav .navbar-nav .nav-link.active {
        padding-left: .55rem;
        padding-right: .55rem;
    }
}

/* My work: "My cemeteries" scrolls within itself when there are many (Lynnie has 170) */
.my-cemeteries {
    max-height: 26rem;
    overflow-y: auto;
}

/* Photo viewer: the look controls (brightness, contrast, invert, grey) on their own line */
.photo-viewer-break {
    flex-basis: 100%;
    height: 0;
}
.photo-viewer-look {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.photo-viewer-look .form-range {
    width: 7rem;
}
.photo-viewer-controls .btn-outline-light.active {
    background: #f8f9fa;
    color: #111;
}

/* Transcribe panel (partials/transcribe_panel.php): the photo beside the
   form, the left half of the screen, or the top half on a phone. Dark in
   every theme, like the photo viewer. */
.transcribe-panel {
    position: fixed;
    z-index: 1035;
    display: flex;
    flex-direction: column;
    background: #111;
    color: #fff;
}
.transcribe-panel[hidden] {
    display: none;
}
.transcribe-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    background: rgba(0, 0, 0, .8);
}
.is-transcribing-card {
    outline: 3px solid var(--yb-brand);
    outline-offset: 2px;
}
@media (min-width: 992px) {
    .transcribe-panel {
        top: 0;
        bottom: 0;
        left: 0;
        width: 50vw;
    }
    body.is-transcribing main.container {
        margin-left: 50vw;
        width: 50vw;
        max-width: none;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}
@media (max-width: 991.98px) {
    .transcribe-panel {
        top: 0;
        left: 0;
        right: 0;
        height: 48vh;
    }
    body.is-transcribing {
        padding-top: 48vh;
    }
    /* Scrolled to, the inscription box stops below the panel, not behind it. */
    body.is-transcribing textarea {
        scroll-margin-top: calc(48vh + 1rem);
    }
}
@media (max-width: 575.98px) {
    /* On a phone the panel is small: pinch to zoom, so no slider; smaller controls. */
    .transcribe-panel .photo-viewer-zoom,
    .transcribe-panel .photo-viewer-level,
    .transcribe-panel .photo-viewer-divider,
    .transcribe-panel [data-action="reset"] {
        display: none;
    }
    .transcribe-panel .photo-viewer-controls {
        padding: .35rem .5rem;
        gap: .3rem;
    }
    .transcribe-panel .photo-viewer-break {
        display: none;
    }
    .transcribe-panel .photo-viewer-look .form-range {
        width: 4.5rem;
    }
    .transcribe-panel .btn-sm {
        padding: .15rem .4rem;
    }
    /* The form's own copy of the photo is in the panel above. */
    body.is-transcribing .photo-edit-image,
    body.is-transcribing [data-preview-col] {
        display: none;
    }
}

/* Transcribe panel: the text read from the photo ("Read text") */
.transcribe-read {
    padding: .5rem .75rem .75rem;
    background: rgba(0, 0, 0, .85);
    border-top: 1px solid rgba(255, 255, 255, .15);
}
.transcribe-read[hidden] {
    display: none;
}
.transcribe-read textarea {
    font-family: Georgia, "Times New Roman", serif;
}
@media (max-width: 991.98px) {
    .transcribe-read textarea {
        max-height: 5.5rem;
    }
}

/* YAS memorial form: a person ticked to be removed */
.yas-person.is-removed {
    opacity: .5;
    border-style: dashed;
}

/* Words searched for, marked in inscriptions (search results and the pages opened from them) */
.inscription-snippet mark,
.inscription-text mark {
    padding: 0 .1em;
    border-radius: .2em;
}
/* YAS results: the memorial's extract sits under its person, as one row */
.results-table tr:has(+ .yas-snippet-row) td {
    border-bottom-width: 0;
}

/* Place finder (admin): the lists beside the map scroll. */
.place-list { max-height: 230px; overflow-y: auto; }

/* Admin dashboard: a colour for each group of pages (hue from --g-h on the card), shades from --i (the place in the list) */
.admin-group > .card-header {
    background: hsl(var(--g-h) var(--yb-group-sat) var(--yb-group-head-l));
    color: hsl(var(--g-h) var(--yb-group-sat) var(--yb-group-text-l));
    border-bottom: 2px solid hsl(var(--g-h) var(--yb-group-sat) var(--yb-group-icon-l));
}
.admin-group > .card-header h2 {
    color: inherit;
}
.admin-group .admin-group-icon {
    color: hsl(var(--g-h) var(--yb-group-sat) clamp(0%, calc(var(--yb-group-icon-l) + var(--i, 0) * var(--yb-group-icon-step)), 100%));
    font-size: 1.15rem;
}

/* the small map of a grave and its neighbours on a record (plot_minimap_svg()) */
.grave-minimap {
    width: 100%;
    max-width: 640px;
    height: auto;
    border-radius: .25rem;
}