/* Photo Group — one hand-written stylesheet.
   Dark charcoal look after Lightroom Classic; 14px base; touch targets at least 44px; works on an iPad. */

:root {
    /* Dark charcoal grays after Adobe Lightroom Classic: photos sit on near-black, panels are mid-gray,
       text is light gray, highlights are lighter gray rather than color. */
    color-scheme: dark;
    --bg: #262626;            /* behind the photos (Loupe background) */
    --surface: #383838;       /* panels and cards */
    --surface-sunk: #2e2e2e;  /* panel headers, table heads, text fields */
    --surface-hover: #4a4a4a;
    --header: #1e1e1e;        /* identity-plate strip at the top */
    --text: #d6d6d6;
    --text-strong: #f0f0f0;
    --muted: #a0a0a0;
    --border: #1b1b1b;        /* the dark hairlines between panels */
    --line: #555555;          /* outlines of buttons and fields */
    --rule: #2c2c2c;          /* lines between table rows */
    --accent: #d0d0d0;        /* selected / primary: light gray, as in Lightroom */
    --accent-text: #1c1c1c;
    --accent-hover: #ffffff;
    --accent-soft: #4a4a4a;
    --link: #8fb7e8;
    --link-hover: #b9d3f3;
    --zoom: #0b5cff;
    --zoom-hover: #2f74ff;
    --ok: #82c98f;
    --ok-soft: #26402c;
    --warn: #e7b65c;
    --warn-soft: #3a3324;
    --danger: #f08080;
    --danger-soft: #4b2525;
    --focus: #8fb7e8;
    --radius: 3px;            /* Lightroom's controls are nearly square */
    --gap: 1rem;
    --target: 3.15rem;        /* 44px at the 14px base */
    /* Type: Source Sans 3 for everything you read and press. It's Adobe's open-source humanist sans, the
       family Lightroom's own Adobe Clean grew from, so the interface feels right. Source Serif 4, its designed
       companion (same proportions and vertical metrics, by the same team), sets the identity plate, page titles
       and photographers' names, the way Lightroom's identity plate and slideshow titles carry a display face.
       A superfamily pairing: contrast in style, harmony in structure. Both self-hosted (OFL), see fonts/. */
    --font: "Source Sans 3", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
    /* Lightroom's engraved panel edges: a dark line with a faint light one under it. */
    --bevel: inset 0 1px 0 rgb(255 255 255 / 0.06);
}

/* Source Sans 3 and Source Serif 4, variable weights, Latin and accented Latin. SIL Open Font License 1.1
   (fonts/OFL-*.txt). Downloaded from Google Fonts and served from here: nothing loads from Google. */
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap;
    src: url("../fonts/source-sans-3.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap;
    src: url("../fonts/source-sans-3-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 200 900; font-display: swap;
    src: url("../fonts/source-sans-3-italic.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 200 900; font-display: swap;
    src: url("../fonts/source-sans-3-italic-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap;
    src: url("../fonts/source-serif-4.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap;
    src: url("../fonts/source-serif-4-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

*, *::before, *::after { box-sizing: border-box; }

/* Material Symbols Outlined, self-hosted subset (tools/update-icons.ps1). Apache License 2.0. */
@font-face {
    font-family: "Material Symbols Outlined";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("../fonts/material-symbols-outlined.woff2?v=0dde77c88352") format("woff2");
}

.icon {
    font-family: "Material Symbols Outlined";
    font-weight: normal;
    font-style: normal;
    font-size: 1.25em;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    vertical-align: -0.25em;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    user-select: none;
    flex-shrink: 0;
}
.btn .icon, .nav .icon { vertical-align: middle; }
.btn-zoom .icon { font-size: 1.6em; }

html {
    font-size: 87.5%; /* 14px, and still follows the browser's text-size setting */
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Page titles in the display serif; section heads like Lightroom's panel headers: small, semibold sans. */
h1, h2, h3 { line-height: 1.25; margin: 1.25rem 0 0.6rem; color: var(--text-strong); }
h1 { font-family: var(--font-display); font-size: 2rem; font-weight: 400; letter-spacing: -0.005em; }
h2 { font-size: 1.15rem; font-weight: 600; }
h3 { font-size: 1rem; font-weight: 600; color: #e2e2e2; }
p { margin: 0 0 0.85rem; }

a { color: var(--link); text-underline-offset: 0.15em; }
a:hover { color: var(--link-hover); }

:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

code { font-size: 0.9em; background: var(--surface-sunk); padding: 0.1em 0.3em; border-radius: 4px; }

.wrap {
    max-width: 84rem;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Pages with ViewData["Wide"] (the schedule grid) use the whole window. */
.wrap-wide {
    max-width: none;
    padding: 0 clamp(1rem, 2vw, 2.5rem);
}

main.wrap { padding-bottom: 3rem; }

.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--surface);
    padding: 0.75rem 1rem;
    z-index: 10;
}
.skip-link:focus { left: 0.5rem; }

.muted { color: var(--muted); }
.small { font-size: 0.875rem; }
.nowrap { white-space: nowrap; }
.visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Header and navigation ---------- */

/* Lightroom's top panel: the identity plate on the left, the module picker on the right. */
.site-header {
    background: linear-gradient(#232323, #1a1a1a);
    border-bottom: 1px solid #0d0d0d;
    box-shadow: 0 1px 0 #2f2f2f;
}

.header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
    min-height: 4rem;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

/* The identity plate. */
.site-name {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 300;
    letter-spacing: 0.01em;
    color: #e8e8e8;
    text-decoration: none;
}

.header-row nav { margin-left: auto; }
.nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
/* The module picker's thin bars between names. */
.nav li + li::before { content: ""; width: 1px; height: 1.1rem; background: #4a4a4a; display: inline-block; vertical-align: middle; }
.nav li { display: flex; align-items: center; }

.nav a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.nav a {
    min-height: var(--target);
    padding: 0 0.7rem;
    text-decoration: none;
    color: #8a8a8a;
    font-size: 1.15rem;
    font-weight: 300;
    letter-spacing: 0.01em;
}
.nav .icon { font-size: 1.1em; opacity: 0.8; }
/* Like Lightroom's module picker: dim names, the current one bright. */
.nav a:hover { color: #cfcfcf; }
.nav a[aria-current="page"] { color: #f2f2f2; font-weight: 400; }

.account { margin-left: 0; }

.header-search { display: flex; align-items: center; gap: 0.25rem; }
.header-search input[type="search"] { width: 8.5rem; min-height: 2.5rem; background: #2a2a2a; }
.header-search .icon-btn { border-color: transparent; }

/* Narrower screens: name, search and menu button on the first line, the nav links below. */
@media (max-width: 75rem) {
    .header-row nav { order: 3; flex-basis: 100%; margin-left: 0; }
    .header-search { margin-left: auto; }
    .nav li:first-child a { padding-left: 0; }
}

/* ---------- Drop-down menus (header account menu, row action menus) ----------
   <details class="menu"><summary class="btn icon-btn">…</summary><div class="menu-list">links/buttons</div></details>
   Works without JavaScript; menu.js closes it on outside click and Escape. */

.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { background: var(--surface-hover); }

.menu-list {
    position: absolute;
    right: 0;
    top: calc(100% + 0.3rem);
    z-index: 30;
    min-width: 15rem;
    display: flex;
    flex-direction: column;
    padding: 0.35rem;
    background: #404040;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 10px 28px rgb(0 0 0 / 0.55);
}
.menu-list form { margin: 0; }
.menu-list a, .menu-list button {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    min-height: var(--target);
    padding: 0 0.75rem;
    border: 0;
    border-radius: calc(var(--radius) - 2px);
    background: none;
    color: var(--text);
    font: inherit;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.menu-list a:hover, .menu-list button:hover { background: var(--surface-hover); color: var(--text-strong); }
.menu-list .menu-danger { color: var(--danger); }
.menu-list .menu-danger:hover { background: var(--danger-soft); }
.menu-heading {
    padding: 0.4rem 0.75rem 0.5rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--line);
    font-size: 0.85rem;
    color: var(--muted);
}
.menu-heading strong { display: block; color: var(--text-strong); font-size: 1rem; }
.menu-divider { height: 1px; margin: 0.25rem 0; background: var(--line); }

/* A square button holding only an icon (it must have an aria-label). */
.icon-btn { min-width: var(--target); padding: 0 0.5rem; }
.icon-btn .icon { font-size: 1.5rem; }
/* Menu buttons (hamburger, three dots) have no outline; just a soft background on hover or when open. */
.menu > summary.icon-btn { border-color: transparent; background: transparent; box-shadow: none; }
.menu > summary.icon-btn:hover, .menu[open] > summary.icon-btn { background: var(--surface-hover); }

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: var(--target);
    padding: 0.35rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font: inherit;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    /* Lightroom's raised gray buttons: a soft top-to-bottom shade, a dark edge, a faint highlight on top. */
    background: linear-gradient(#5a5a5a, #484848);
    color: #ececec;
    border-color: #1f1f1f;
    box-shadow: var(--bevel), 0 1px 1px rgb(0 0 0 / 0.25);
    letter-spacing: 0.01em;
}
.btn:hover { background: linear-gradient(#666, #525252); color: #fff; }
.btn:active { background: linear-gradient(#444, #4f4f4f); box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.35); }

/* The light buttons Lightroom uses for its main actions (Import..., Export...). */
.btn-primary { background: linear-gradient(#e2e2e2, #bdbdbd); border-color: #1f1f1f; color: var(--accent-text); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6), 0 1px 1px rgb(0 0 0 / 0.3); }
.btn-primary:hover { background: linear-gradient(#f2f2f2, #cdcdcd); color: var(--accent-text); }
.btn-primary:active { background: linear-gradient(#b5b5b5, #c8c8c8); }

.btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); box-shadow: none; }
.btn-danger:hover { background: var(--danger-soft); color: var(--danger); }

.btn-quiet { background: transparent; border-color: var(--line); color: var(--text); box-shadow: none; }
.btn-quiet:hover { background: rgb(255 255 255 / 0.06); }

.btn-small { min-height: 2.5rem; padding: 0.2rem 0.75rem; font-size: 0.9rem; }

.btn-zoom {
    min-height: 3.75rem;
    padding: 0.6rem 2rem;
    font-size: 1.3rem;
    background: linear-gradient(#2a72ff, var(--zoom));
    border-color: #06348f;
    color: #fff;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2), 0 1px 1px rgb(0 0 0 / 0.3);
}
.join-zoom { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; }
.btn-hero { min-height: 3.75rem; padding: 0.6rem 1.5rem; font-size: 1.1rem; }
.btn-zoom:hover { background: linear-gradient(#4a88ff, var(--zoom-hover)); color: #fff; }

.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    margin: 1rem 0;
}
.actions form { margin: 0; }

/* ---------- Forms ---------- */

.form { max-width: 34rem; }
.form-wide { max-width: none; }

.field { margin-bottom: 1rem; }

label, .label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: #c8c8c8;
}

.hint { display: block; color: var(--muted); font-size: 0.875rem; margin-top: 0.25rem; }

input[type="text"], input[type="email"], input[type="password"], input[type="url"],
input[type="number"], input[type="date"], input[type="time"], input[type="search"],
input[type="month"], select, textarea {
    width: 100%;
    min-height: var(--target);
    padding: 0.4rem 0.65rem;
    border: 1px solid #1a1a1a;
    border-radius: var(--radius);
    background: #232323;
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.45), 0 1px 0 rgb(255 255 255 / 0.05);
    color: var(--text-strong);
    font: inherit;
}
textarea { min-height: 6rem; }
input:focus, select:focus, textarea:focus { border-color: #8a8a8a; background: #1d1d1d; }
input[readonly] { color: var(--muted); }
::placeholder { color: #7a7a7a; }

.check {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: var(--target);
    font-weight: 600;
    cursor: pointer;
}
.check input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--accent); }

.field-error, .validation-summary-errors {
    color: var(--danger);
    font-weight: 600;
}
.validation-summary-errors ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.input-validation-error { border-color: var(--danger) !important; }

fieldset { border: 1px solid #222; box-shadow: var(--bevel); border-radius: var(--radius); padding: 0.85rem 1rem; margin: 0 0 1rem; background: rgb(255 255 255 / 0.02); }
legend { font-weight: 600; color: var(--text-strong); padding: 0 0.4rem; }

.inline-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}
.inline-fields .field { margin-bottom: 0; }

/* ---------- Messages ---------- */

.flash {
    margin: 1rem 0;
    padding: 0.65rem 1rem;
    border-radius: var(--radius);
    border-left: 4px solid var(--ok);
    background: var(--ok-soft);
    color: var(--text-strong);
    font-weight: 600;
}
.flash-warn { border-color: var(--warn); background: var(--warn-soft); }
.flash-error { border-color: var(--danger); background: var(--danger-soft); }

.badge {
    display: inline-block;
    padding: 0.05rem 0.55rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--text-strong);
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-muted { background: #303030; color: var(--muted); }
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-role { background: var(--accent); color: var(--accent-text); }

/* A page title with its main buttons on the same line (wraps on narrow screens). */
.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}
.page-head h1 { margin-bottom: 0.25rem; }
.page-head .actions { margin: 0.75rem 0 0; }

.table td.row-menu { width: 1%; text-align: right; }
.table td.row-menu .menu { display: inline-block; text-align: left; }
.table td.row-menu .icon-btn { min-height: 2.5rem; min-width: 2.5rem; }
.table td.row-menu .icon-btn .icon { font-size: 1.3rem; }

/* ---------- Cards ---------- */

.card {
    background: linear-gradient(#3b3b3b, #363636 6rem);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--bevel), 0 1px 3px rgb(0 0 0 / 0.35);
    padding: 1rem 1.25rem;
    margin: 1rem 0;
}
/* A panel's header: the heading sits on an engraved line, like Navigator, Histogram or Keywording. */
.card > h2:first-child, .card > h3:first-child {
    margin: -0.15rem -1.25rem 0.85rem;
    padding: 0 1.25rem 0.6rem;
    border-bottom: 1px solid #262626;
    box-shadow: 0 1px 0 #454545;
    font-size: 1.05rem;
}
.card > h2:first-child .icon, .card > h3:first-child .icon { color: var(--muted); }

.card-hero { border-color: #121212; background: linear-gradient(#424242, #383838 8rem); }
.hero-date { font-family: var(--font-display); font-size: 2.1rem; font-weight: 400; margin: 0; }
.hero-format { font-size: 1.05rem; color: var(--muted); margin: 0.2rem 0 0.85rem; }

.who {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.4rem 1.25rem;
    margin: 0 0 1.25rem;
}
.who dt { color: var(--muted); }
.who dd { margin: 0; font-weight: 600; }

/* ---------- Upload page ---------- */

.drop-zone {
    border: 2px dashed var(--line);
    border-radius: calc(var(--radius) * 2);
    background: var(--surface-sunk);
    margin: 1rem 0 1.5rem;
    transition: border-color 0.15s, background 0.15s;
}
.drop-zone.is-over { border-color: var(--accent); background: var(--surface-hover); }
.drop-zone-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2.25rem 1rem;
    text-align: center;
}
.drop-zone-inner p { margin: 0; }
.drop-icon .icon { font-size: 3rem; color: var(--muted); }
.btn-big-choose { min-height: 3.25rem; padding: 0.5rem 1.75rem; font-size: 1.1rem; }
.drop-zone input[type=file]:focus-visible + * , .btn-big-choose:focus-within { outline: 3px solid var(--focus); }

.photos-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }

.photo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.photo-card {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: start;
    padding: 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.photo-card.is-dragging { opacity: 0.5; }
.photo-card.is-failed { border-color: var(--danger); }
.photo-thumb { position: relative; aspect-ratio: 1; background: #1f1f1f; border-radius: calc(var(--radius) - 2px); overflow: hidden; }
.photo-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.photo-thumb img:not([src]), .photo-thumb img[src=""] { visibility: hidden; }
.photo-progress { position: absolute; left: 0.5rem; right: 0.5rem; bottom: 0.5rem; height: 0.5rem; background: rgb(0 0 0 / 0.6); border-radius: 999px; overflow: hidden; }
.photo-progress-bar { height: 100%; width: 0; background: var(--accent); transition: width 0.2s; }
.photo-card.is-processing .photo-progress-bar { background: var(--ok); animation: pulse 1s ease-in-out infinite alternate; }
@keyframes pulse { from { opacity: 0.55; } to { opacity: 1; } }
.photo-name { overflow-wrap: anywhere; margin-bottom: 0.35rem; }
.photo-error { color: var(--danger); font-weight: 600; margin: 0.25rem 0; }
.photo-text textarea { min-height: 3.5rem; }
.photo-text .slot-label { margin-top: 0.4rem; }
.photo-tools { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.photo-tools form { margin: 0; }
.photo-tools .icon-btn { border-color: transparent; background: transparent; }
.photo-tools .icon-btn:hover { background: var(--surface-hover); }
.photo-delete { color: var(--danger); }
.drag-handle { cursor: grab; color: var(--muted); padding: 0.4rem; display: none; }
.js .drag-handle { display: block; }
.photo-card.is-uploading .photo-tools, .photo-card.is-uploading .photo-text { visibility: hidden; }

@media (max-width: 560px) {
    .photo-card { grid-template-columns: 6rem minmax(0, 1fr); }
    .photo-tools { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; }
    .drag-handle { display: none !important; }
}

/* ---------- Admin photo curation ---------- */

.curate-lock { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; }
.curate-lock h2, .curate-lock p { margin: 0; }
.curate-lock p { margin-top: 0.25rem; }
.curate-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.curate-head h3 { margin: 0; flex: 1; }
.curate-number {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border-radius: 999px; background: var(--accent); color: var(--accent-text); font-weight: 700;
}
.curate-order { display: flex; align-items: center; gap: 0.25rem; }
.curate-order form { margin: 0; }
.curate-photos { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.75rem; }
.curate-photos li { position: relative; background: linear-gradient(#444, #3c3c3c); border: 1px solid #1f1f1f; box-shadow: var(--bevel); border-radius: 2px; padding: 0.4rem; }
.curate-photos img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #1f1f1f; border-radius: calc(var(--radius) - 2px); display: block; }
.curate-photos li.is-hidden img { opacity: 0.35; }
.curate-photos .badge { position: absolute; top: 0.75rem; left: 0.75rem; }
.curate-photos .menu { position: absolute; top: 0.5rem; right: 0.5rem; }
.curate-photos .menu > summary { background: rgb(0 0 0 / 0.55); }
.curate-title { margin-top: 0.35rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-move { padding: 0.25rem 0.75rem 0.5rem; }
.menu-move select { margin: 0.2rem 0 0.3rem; }
.menu-move button { padding: 0; min-height: 2.25rem; }

/* ---------- Meeting record ---------- */

.date-link { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 0.2em; }
.date-link:hover { color: var(--link-hover); text-decoration-color: currentColor; }

/* Photographers' names in the display serif, like a slideshow title. */
.photo-group-name { margin: 1.5rem 0 0.6rem; font-family: var(--font-display); font-size: 1.35rem; font-weight: 400; }
/* Lightroom's Grid view: each photo sits in its own lighter cell, with the cell's number large and faint in the
   corner, the photo centered with a little shadow; hovering lightens the cell, the selected one is lightest. */
.gallery {
    list-style: none; margin: 0; padding: 0.5rem; counter-reset: cell;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 0.35rem;
    background: var(--bg); border: 1px solid var(--border); box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.4);
}
.gallery li {
    position: relative; counter-increment: cell;
    background: linear-gradient(#444, #3c3c3c); border: 1px solid #1f1f1f; border-radius: 2px; box-shadow: var(--bevel);
    padding: 1.6rem 0.9rem 0.5rem;
}
.gallery li::before {
    content: counter(cell); position: absolute; top: 0.1rem; left: 0.45rem;
    font-size: 1.6rem; font-weight: 700; line-height: 1.2; color: rgb(255 255 255 / 0.08); pointer-events: none;
}
.gallery li:hover { background: linear-gradient(#4e4e4e, #464646); }
.gallery li:target, .gallery li:focus-within { background: linear-gradient(#5e5e5e, #555); border-color: #bdbdbd; }
.gallery a { display: block; }
.gallery img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.55)); }
.gallery-title { font-size: 0.85rem; color: #b5b5b5; margin-top: 0.4rem; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.item-group { margin: 1.5rem 0 0.5rem; font-size: 1.05rem; }
.item-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.item {
    display: flex; align-items: flex-start; gap: 0.75rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem 0.9rem;
}
.item:target { border-color: var(--accent); }
.item-main { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.item-title { font-weight: 600; color: var(--text-strong); }
.item-title .muted { font-weight: 400; margin-left: 0.35rem; }
.item-note, .item-body { margin-top: 0.15rem; }
.item-note:first-child { margin-top: 0; }
.item-by { margin-top: 0.4rem; }
.book-cover { float: left; width: 4rem; margin: 0 0.85rem 0.25rem 0; border-radius: 3px; box-shadow: 0 1px 4px rgb(0 0 0 / 0.5); }
.item-book .item-main::after { content: ""; display: block; clear: both; }
.item-menu { flex: none; margin: -0.35rem -0.4rem 0 0; }
.item-menu > summary { border-color: transparent; }

.add-items { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-start; }
.add-item > summary { list-style: none; }
.add-item > summary::-webkit-details-marker { display: none; }
.add-item[open] { flex-basis: 100%; }
.add-item[open] > summary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.add-item .card { margin-top: 0.6rem; max-width: 40rem; }

.upload-progress { height: 0.6rem; background: var(--surface-sunk); border-radius: 999px; overflow: hidden; margin-bottom: 1rem; }
.upload-progress-bar { height: 100%; width: 0; background: var(--accent); transition: width 0.2s; }

.chat-links { list-style: none; margin: 0 0 0.5rem; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.chat-links li { border-bottom: 1px solid var(--rule); padding-bottom: 0.5rem; }
.chat-url { overflow-wrap: anywhere; font-weight: 600; }
.chat-links .inline-fields .field { flex: 1 1 16rem; margin-bottom: 0.25rem; }

.calendar-how { padding-left: 1.2rem; }
.calendar-how li { margin: 0.35rem 0; }

.fairness .num { text-align: right; font-variant-numeric: tabular-nums; }
.fairness tr.is-booked td { color: var(--muted); }

/* ---------- Help ---------- */

.help-toc { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1rem 0; }
.help { max-width: 48rem; scroll-margin-top: 1rem; }
.help h2 { display: flex; align-items: center; gap: 0.5rem; }
.help ol, .help ul { padding-left: 1.4rem; }
.help li { margin: 0.6rem 0; line-height: 1.55; }
.help-keys { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1.25rem; margin: 1rem 0; }
.help-keys dt { font-family: ui-monospace, Consolas, monospace; color: var(--text-strong); }
.help-keys dd { margin: 0; }

/* ---------- People, Reading list ---------- */

.people-list, .book-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 0.75rem; }
.people-list .card, .book-list .card { margin: 0; }
.people-name { font-weight: 600; font-size: 1.05rem; }
.people-bio { font-style: italic; color: var(--text); margin: 0.25rem 0; }
.book-list .card::after { content: ""; display: block; clear: both; }
.turn-list li { padding: 0.35rem 0; border-bottom: 1px solid var(--rule); }

/* ---------- Search ---------- */

.search-row { display: flex; gap: 0.6rem; max-width: 44rem; }
.search-row input { flex: 1; }
.search-filters { margin: 0.75rem 0 1rem; }
.search-filters > summary { cursor: pointer; color: var(--link); min-height: var(--target); display: inline-flex; align-items: center; }
.search-filters .inline-fields .field { flex: 1 1 11rem; }
.search-group h2 { font-size: 1.1rem; margin: 1.5rem 0 0.5rem; }
.search-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.search-results li {
    display: flex; gap: 0.85rem; align-items: flex-start;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.65rem 0.85rem;
}
.search-thumb { width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: 4px; flex: none; }
.search-title { font-weight: 600; display: flex; align-items: center; gap: 0.4rem; }
.search-kind { color: var(--muted); display: inline-flex; }
.search-snippet { color: var(--text); margin-top: 0.2rem; overflow-wrap: anywhere; }
.search-snippet mark { background: var(--warn-soft); color: var(--text-strong); border-radius: 2px; padding: 0 0.1em; }

/* Full-window photo from a gallery (js/lightbox.js). */
.lightbox {
    width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0;
    border: 0; background: rgb(0 0 0 / 0.95); color: #e6e6e6;
}
.lightbox::backdrop { background: rgb(0 0 0 / 0.8); }
.lightbox-img { position: absolute; inset: 0 0 3.5rem; width: 100%; height: calc(100% - 3.5rem); object-fit: contain; }
.lightbox-caption { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; text-align: center; }
.lightbox-caption span { color: #a8a8a8; }
.lightbox-btn {
    position: absolute; min-width: var(--target); min-height: var(--target); border: 0; border-radius: var(--radius);
    background: rgb(255 255 255 / 0.08); color: #f0f0f0; cursor: pointer;
}
.lightbox-btn:hover { background: rgb(255 255 255 / 0.18); }
.lightbox-btn .icon { font-size: 2rem; }
.lightbox-close { top: 0.75rem; right: 0.75rem; }
.lightbox-prev, .lightbox-next { top: 50%; transform: translateY(-50%); height: 5rem; }
.lightbox-prev { left: 0.75rem; }
.lightbox-next { right: 0.75rem; }

/* ---------- Settings: label / value rows ---------- */

.settings-list {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
    gap: 0.6rem 1.25rem;
    align-items: center;
    margin: 0 0 0.75rem;
}
.settings-list dt { font-weight: 600; }
.settings-list dd { margin: 0; overflow-wrap: anywhere; }
.settings-list input { max-width: 26rem; }
.server-chip {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0 0.45rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    font-size: 0.75rem;
    font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
    white-space: nowrap;
}
.mail-status { margin-bottom: 1rem; }
.test-email { max-width: 34rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.test-email h2, .test-email p { margin: 0; }

@media (max-width: 560px) {
    .settings-list { grid-template-columns: 1fr; gap: 0.15rem; }
    .settings-list dd { margin-bottom: 0.6rem; }
}

/* ---------- Lists and tables ---------- */

.plain-list { list-style: none; padding: 0; margin: 0; }
.plain-list > li { padding: 0.85rem 0; border-bottom: 1px solid var(--rule); }
.plain-list > li:last-child { border-bottom: 0; }

.table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--bevel); }
.table th, .table td {
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid var(--rule);
    text-align: left;
    vertical-align: middle;
}
.table th { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #9a9a9a;
    background: linear-gradient(#303030, #292929); border-bottom: 1px solid #1a1a1a; }
.table tr.is-past td { color: var(--muted); }
.table td a { color: var(--text-strong); text-decoration: none; }
.table td a:hover { text-decoration: underline; }
.table tr.is-inactive td { color: var(--muted); }
.table tr.needs-review { background: var(--warn-soft); }

/* Members' Schedule page: every row the height of the tallest kind (three lines: guest, topic, website),
   alternating shades and a dark divider so each week reads as its own band. */
@media (min-width: 701px) {
    .schedule-list td { height: 4.75rem; vertical-align: middle; }
}
.schedule-list tbody tr:nth-child(even) td { background: #404040; }
.schedule-list tbody tr td { border-bottom: 1px solid var(--border); }
.schedule-list tbody tr:hover td { background: var(--surface-hover); }

/* Upcoming guest weeks with nobody booked: members need to find a speaker. */
.schedule-list tbody tr.needs-guest td { background: #4a3a17; }
.schedule-list tbody tr.needs-guest td:first-child { box-shadow: inset 6px 0 0 var(--warn); }
.schedule-list tbody tr.needs-guest:hover td { background: #574420; }
.badge-alert { background: var(--warn); color: #1c1c1c; font-size: 0.85rem; padding: 0.15rem 0.6rem; margin-top: 0.25rem; }
.badge-alert .icon { font-size: 1.1em; vertical-align: -0.2em; }
.guest-wanted { color: var(--text-strong); }
.take-it { display: inline-block; margin: 0.15rem 0 0.15rem 0.6rem; vertical-align: middle; }
.take-it .btn { min-height: 2.25rem; }
.guest-wanted strong { color: var(--warn); }
.guest-wanted a, .table td .guest-wanted a { color: var(--warn); font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
.guest-wanted a:hover, .table td .guest-wanted a:hover { color: #f5d08a; }

/* Tables reflow into labeled cards on narrow screens (phones, iPad portrait in split view). */
@media (max-width: 700px) {
    .table-stack thead { display: none; }
    .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
    .table-stack tr {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        margin-bottom: 1rem;
        padding: 0.5rem 0;
    }
    .table-stack td { border: 0; padding: 0.35rem 1rem; }
    .table-stack td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.85rem;
        color: var(--muted);
        font-weight: 600;
    }
}

/* A row of controls that all share one height and center line (Edit schedule). */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1.25rem;
    margin: 1rem 0;
}
.toolbar-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; }
.toolbar-end { margin-left: auto; }
.toolbar .btn, .toolbar input, .toolbar select {
    height: var(--target);
    min-height: var(--target);
    font-size: 0.95rem;
}
.toolbar .btn { padding-block: 0; }
.toolbar input[type="month"] { width: 11rem; }
.toolbar select { width: 8.5rem; }

/* ---------- Schedule grid editor ---------- */

/* Narrow screens scroll the grid sideways; wide ones show it all and pin the headings. */
.grid-scroll {
    position: relative; /* keeps visually-hidden text inside, so only the grid scrolls, not the page */
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.grid { min-width: 64rem; }
.grid th, .grid td { padding: 0.5rem 0.6rem; vertical-align: bottom; }
/* Controls line up along the bottom (some have a small label above); the date reads from the top. */
.grid td.col-date, .grid tr.review-row td { vertical-align: top; }
.grid thead th { white-space: nowrap; }
.grid select, .grid input[type="text"] { min-height: 2.75rem; padding: 0.3rem 0.5rem; font-size: 0.95rem; }

/* Minimum widths fit "Photos + discussion" and the longest member names without clipping. */
.grid .col-date { width: 7.5rem; }
.grid select[data-format] { min-width: 12rem; }
.grid .col-who select, .grid .col-who input { min-width: 12.5rem; }
.grid .col-who { width: 15%; }
.grid .col-text input { min-width: 11rem; }
.grid .col-notes { width: 15%; }
.grid .col-notes input { min-width: 8rem; }
.grid .col-save { width: 6.5rem; }

.grid-date { font-weight: 700; white-space: nowrap; }
.grid .col-date .small { display: inline-block; margin-top: 0.15rem; }

/* A labeled control inside a cell; which ones show depends on the meeting kind. */
.slot + .slot { margin-top: 0.4rem; }
.slot-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--muted);
    margin: 0 0 0.15rem;
}
.slot-note { color: var(--muted); min-height: 2.75rem; display: flex; align-items: center; }
[hidden] { display: none !important; }

.grid tr.month-row th {
    background: var(--surface-sunk);
    color: var(--text-strong);
    font-size: 0.95rem;
    font-weight: 600;
    border-top: 1px solid var(--border);
    padding: 0.45rem 0.75rem;
}
.grid tr.is-past td { background: #303030; }
.grid tr.is-past td, .grid tr.is-past .grid-date { color: var(--muted); }
.grid tr.is-next td { border-top: 2px solid var(--ok); }
.grid tr.is-dirty td { background: var(--accent-soft); }
.grid tr.needs-review td { background: var(--warn-soft); }
.grid tr.review-row td { padding-top: 0; font-size: 0.95rem; border-top: 0; }
.grid tr:has(+ tr.review-row) td { border-bottom: 0; }

.grid .row-status { display: block; min-width: 5.5rem; font-size: 0.85rem; font-weight: 600; margin-top: 0.4rem; }
.grid .row-status.ok { color: var(--ok); }
.grid .row-status.error { color: var(--danger); }

@media (min-width: 80rem) {
    .grid-scroll { overflow: visible; }
    .grid thead th { position: sticky; top: 0; z-index: 2; }
}

/* ---------- Import report ---------- */

.report {
    white-space: pre-wrap;
    font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
    font-size: 0.9rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    max-height: 40rem;
    overflow: auto;
}

@media print {
    .site-header, .actions, .skip-link { display: none; }
    :root {
        color-scheme: light;
        --bg: #fff; --surface: #fff; --surface-sunk: #f2f2f2; --text: #000; --text-strong: #000;
        --muted: #444; --rule: #ccc; --line: #999; --link: #000;
    }
    body { background: #fff; }
}