/* All text, headings and running text alike, is set in Manrope (variable font,
 * weights 200-800). The file lives in assets/fonts/, which is gitignored and
 * uploaded on its own; if it is missing, the system font takes over. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/Manrope-VariableFont_wght.ttf") format("truetype");
}

:root {
  --font-heading: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  /* the studio palette (yellow accent), for the admin and the client gallery alike */
  --bg: #ffffff;
  --panel: #ffffff;
  --border: #e4e4e4;
  --text: #222222;
  --text-dim: #767676;
  --accent: #e9a23b;
  --accent-dark: #d29235;
  --on-accent: #23201a;
  --link: #2b2925;
  --danger: #b3402f;
  --radius: 10px;
  font-family: var(--font-body);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

a { color: var(--link); }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px 60px; }
.page-top { padding-top: 28px; }

.icon { width: 1.15em; height: 1.15em; flex-shrink: 0; vertical-align: middle; }

/* ---------- admin top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  height: 56px;
  padding: 0 20px;
  background: #14141a; /* the background of SEYAselect-Logo-Dark.png, so the logo blends in */
  color: #fff;
}
.topbar a { color: #fff; text-decoration: none; }
.topbar.light { background: #fff; color: var(--text); border-bottom: 1px solid #e6e6e6; }
.topbar.light a, .topbar.light .crumb, .topbar.light .crumb.current { color: var(--text); }
.topbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar .brand { flex-shrink: 0; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.95rem; }
.crumb { display: inline-flex; align-items: center; gap: 8px; color: #e6e6e6; min-width: 0; white-space: nowrap; }
.crumb span { overflow: hidden; text-overflow: ellipsis; }
.crumb.current { font-weight: 700; color: #fff; }
.crumb-sep { opacity: 0.45; }
.topbar-right { display: flex; align-items: center; gap: 14px; font-size: 0.9rem; flex-shrink: 0; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: #3457d1; color: #fff; font-weight: 700; font-size: 0.8rem;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0; font-family: inherit; cursor: pointer;
}
.avatar:hover { background: #2b48ad; }
.avatar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* the round light bulb beside it, which opens the help (help.js) */
.help-btn {
  width: 34px; height: 34px; border-radius: 50%; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.4); cursor: pointer;
}
.help-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.7); }
.help-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.help-btn .icon { width: 18px; height: 18px; }
/* recent activity, left of the bulb and round like it (activity.js): a pulse line, and while there is
 * something new a small dot on the top right of the ring, set off from it by a gap in the bar's colour */
.activity-btn {
  position: relative;
  width: 34px; height: 34px; border-radius: 50%; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.4); cursor: pointer;
}
.activity-btn:hover, .activity-btn[aria-expanded="true"] { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.7); }
.activity-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.activity-btn .icon { width: 18px; height: 18px; }
.activity-dot {
  display: none; position: absolute; top: -3px; right: -3px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #3457d1; box-shadow: 0 0 0 2.5px #14141a; /* the blue of the user button */
}
.activity-btn.has-news .activity-dot { display: block; }

/* the panel slides down from under the bar (z-index below .topbar) */
.activity-panel {
  position: fixed; top: 56px; right: 16px; z-index: 29;
  width: min(380px, calc(100vw - 32px)); max-height: calc(100vh - 72px); overflow-y: auto;
  background: #fff; color: var(--text); border-radius: 0 0 12px 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
  transform: translateY(-100%); visibility: hidden;
  transition: transform 0.3s ease, visibility 0s linear 0.3s;
}
.activity-panel.open { transform: none; visibility: visible; transition: transform 0.3s ease; }
@media (prefers-reduced-motion: reduce) { .activity-panel, .activity-panel.open { transition: none; } }
.activity-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 18px 10px; border-bottom: 1px solid var(--border); }
.activity-head h2 { margin: 0; font-size: 0.95rem; }
.activity-head span { font-size: 0.75rem; color: var(--text-dim); }
.activity-list { list-style: none; margin: 0; padding: 6px 0; }
.act-link { display: flex; align-items: flex-start; gap: 12px; padding: 10px 18px; color: var(--text); text-decoration: none; }
.act-link:hover { background: #f6f6f6; }
.act-icon {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #f1f1f1; color: #555;
}
.act-icon .icon { width: 15px; height: 15px; }
.act-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.act-text { font-size: 0.86rem; line-height: 1.4; overflow-wrap: anywhere; }
.act-when { font-size: 0.75rem; color: var(--text-dim); }
.act.is-new .act-link { background: #fdf5e8; }
.act.is-new .act-link:hover { background: #faecd6; }
.act.is-new .act-icon { background: var(--accent); color: var(--on-accent); }
.act.is-new .act-when { color: var(--text); font-weight: 700; }
.activity-more {
  display: block; width: 100%; padding: 11px 18px; border: 0; border-top: 1px solid var(--border);
  background: transparent; color: #3457d1; font: inherit; font-size: 0.84rem; font-weight: 700; cursor: pointer;
}
.activity-more:hover { background: #f6f6f6; }
.activity-more:focus-visible { outline: 2px solid #3457d1; outline-offset: -2px; }
.activity-empty { margin: 0; padding: 18px; font-size: 0.86rem; line-height: 1.5; color: var(--text-dim); }
.topbar.light .topbar-right { gap: 4px; }
.topbar .brand:has(.app-logo) { line-height: 0; }
/* the dark version of the product logo, on the dark admin bar */
.app-logo { display: block; height: 34px; width: auto; }
.brand-logo { display: block; height: 34px; width: auto; max-width: 220px; object-fit: contain; }

/* the space below the head looks as big as the one between the admin bar and the heading (.page-top 28px plus its line spacing) */
.page-head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 35px; }
.page-head h1 { margin: 0; }
/* short black rule between the heading and the figures under it */
.page-rule { width: 50px; height: 2px; margin: 6px 0; background: #000; }
/* total of all files on the gallery overview, under the heading: count and size, the types below
 * (a little smaller) */
.library-total { margin: 0; font-size: 0.85rem; line-height: 1.5; color: var(--text-dim); }
.library-total strong { color: var(--text); }
.library-total .types { display: block; font-size: calc(0.75rem - 1pt); }
/* the figures on the left, the sort and Grid / List switches right-aligned on the same line (overview.js) */
.page-head-row { align-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.overview-tools { display: flex; align-items: baseline; gap: 6px 22px; flex-wrap: wrap; margin-left: auto; font-size: 0.85rem; }
/* a switch as plain words: "Sort  Name  Date"; the chosen one dark and underlined, the others grey */
.text-toggle { display: inline-flex; align-items: baseline; gap: 12px; }
.text-toggle + .text-toggle { padding-left: 22px; border-left: 1px solid var(--border); }
.text-toggle-label { color: #9a9a9a; font-size: calc(0.75rem - 1pt); }
.text-toggle button {
  display: inline-flex; flex-direction: column; align-items: center;
  padding: 0 0 2px; background: none; border: 0; border-bottom: 1px solid transparent; border-radius: 0;
  color: var(--text-dim); font: inherit; cursor: pointer;
}
/* an invisible bold copy of the word keeps the width the same, so nothing moves when it turns bold */
.text-toggle button::after { content: attr(data-label); height: 0; overflow: hidden; visibility: hidden; font-weight: 700; }
.text-toggle button:hover { color: var(--text); }
.text-toggle button.on { color: var(--text); font-weight: 700; border-bottom-color: currentColor; }
.text-toggle button:focus-visible { outline: 2px solid #3457d1; outline-offset: 2px; }

/* ---------- auth ---------- */

/* login and "Forgot password?": the dark bar of the admin with the SEYAselect logo, the grey card (the grey of
   the "New gallery" tile) in the middle of the white page, the studio footer (white here) at the bottom
   (login.php, forgot.php, login.js) */
body.auth-page { display: flex; flex-direction: column; min-height: 100vh; background: #fff; }
.auth-bar { position: static; }
body.auth-page .site-footer { background: #fff; }
.auth-main { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; padding: 48px 16px 64px; }
.auth-card {
  width: 100%; max-width: 400px; padding: 40px 36px 34px;
  background: #f4f4f4; border-radius: 14px;
}
.auth-title { margin: 0; font-size: 1.9rem; line-height: 1.2; letter-spacing: -0.01em; }
#auth-title { white-space: nowrap; }
/* the caret while the greeting is typed; it keeps the line's height while the text is empty */
.auth-title.is-typing span::after {
  content: ""; display: inline-block; width: 2px; height: 0.95em; margin-left: 3px; vertical-align: -0.1em;
  background: currentColor; animation: caret-blink 1s steps(1) infinite;
}
.auth-title.is-typing.is-busy span::after { animation: none; }
@keyframes caret-blink { 50% { opacity: 0; } }
.auth-sub { margin: 8px 0 26px; color: var(--text-dim); font-size: 0.92rem; }
.auth-error {
  margin: -8px 0 20px; padding: 10px 12px; border-radius: 8px;
  background: #fbecea; color: var(--danger); font-size: 0.88rem; font-weight: 600;
}
.auth-form label { margin: 0 0 6px; font-size: 0.85rem; }
.auth-form input[type=text], .auth-form input[type=email], .auth-form input[type=password] {
  margin: 0 0 18px; padding: 11px 12px; border-color: #dcdcdc; border-radius: 8px;
}
.auth-form input:focus-visible { outline: 2px solid #3457d1; outline-offset: -1px; border-color: transparent; }
.pw-field { position: relative; }
.pw-field input { padding-right: 46px !important; }
.pw-toggle {
  position: absolute; top: 0; right: 0; width: 44px; height: calc(100% - 18px);
  display: flex; align-items: center; justify-content: center; padding: 0;
  background: none; border: 0; border-radius: 0 8px 8px 0; color: #8b8b8b; cursor: pointer;
}
.pw-toggle:hover { color: var(--text); }
.pw-toggle:focus-visible { outline: 2px solid #3457d1; outline-offset: -2px; }
.pw-toggle svg { width: 18px; height: 18px; }
.pw-toggle svg[hidden] { display: none; }
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin: 2px 0 24px; font-size: 0.87rem; }
.auth-form .auth-check { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 0.87rem; font-weight: 500; cursor: pointer; }
.auth-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.auth-row a, .auth-foot a { color: #3457d1; text-decoration: none; font-weight: 600; }
.auth-row a:hover, .auth-foot a:hover { text-decoration: underline; }
.auth-submit { display: block; width: 100%; padding: 12px 16px; border-radius: 8px; font-size: 1rem; font-weight: 700; }
.auth-foot { margin: 0; font-size: 0.87rem; }
.auth-form + .auth-back { margin-top: 18px; text-align: center; }
/* the platform area (platform/, admin.seyaselect.com) */
.platform-who { color: #bdbdc4; }
.topbar .link-btn { padding: 0; border: 0; background: none; color: #fff; font: inherit; cursor: pointer; }
.topbar .link-btn:hover { text-decoration: underline; }
.topbar-right form { margin: 0; }
.platform-section + .platform-section { margin-top: 40px; }
.platform-list { list-style: none; margin: 0 0 14px; padding: 0; }
.platform-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.platform-list .hint { display: block; margin: 2px 0 0; }
.platform-list form { margin: 0; }
.platform-section { max-width: 640px; }
.platform-section h2 { margin: 0 0 6px; font-size: 1.15rem; }
.platform-section .hint { margin: 0 0 14px; }
.platform-section .hint.platform-intro { margin-bottom: 24px; }
.platform-line { display: flex; gap: 10px; flex-wrap: wrap; }
.platform-line input { flex: 1 1 260px; width: auto; margin: 0; }
.platform-line select { width: auto; margin: 0; }
.platform-nav { display: flex; gap: 18px; margin-right: 10px; }
.topbar .platform-nav a { display: inline; color: #bdbdc4; text-decoration: none; }
.topbar .platform-nav a:hover { color: #fff; }
.topbar .platform-nav a.on { color: #fff; font-weight: 700; }
.wrap.platform-wide { max-width: 1280px; }
/* narrow windows: the pages and Sign out stay, the email (and on phones the "Platform" tag) go */
@media (max-width: 900px) { .platform-who { display: none; } }
@media (max-width: 520px) {
  .platform-bar .crumb-tag { display: none; }
  .platform-bar .app-logo { height: 24px; width: auto; }
  .platform-bar .topbar-right { gap: 10px; font-size: 0.82rem; }
  .platform-nav { gap: 10px; margin-right: 0; }
}
.platform-back { margin: 0 0 14px; font-size: 0.85rem; }
.platform-back a { color: var(--text-dim); text-decoration: none; }
.platform-back a:hover { color: var(--text); }
.platform-error { margin: 0 0 20px; }
.platform-section h3 { margin: 28px 0 6px; font-size: 1rem; }
.platform-section.wide { max-width: 900px; }
.page-head h1 .status-pill { margin-left: 8px; vertical-align: 0.3em; }
/* the studio form: three columns (the three limits in a row), name, notes and the button across all */
.platform-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 16px; }
.platform-form .span-2 { grid-column: 1 / -1; }
.platform-form .row-start { grid-column-start: 1; }
.platform-form label .hint { display: inline; margin: 0 0 0 6px; font-weight: 400; }
.platform-form p.hint { margin: 0 0 16px; }
@media (max-width: 560px) { .platform-form { grid-template-columns: 1fr; } .platform-form .row-start { grid-column-start: auto; } }
/* the filter above the tables ("Status All Beta ..."): links in the look of .text-toggle's buttons */
.platform-filter { flex-wrap: wrap; margin: 0 0 16px; font-size: 0.85rem; }
.text-toggle a { display: inline-flex; flex-direction: column; align-items: center; padding: 0 0 2px; border-bottom: 1px solid transparent; color: var(--text-dim); text-decoration: none; }
.text-toggle a::after { content: attr(data-label); height: 0; overflow: hidden; visibility: hidden; font-weight: 700; }
.text-toggle a:hover { color: var(--text); }
.text-toggle a.on { color: var(--text); font-weight: 700; border-bottom-color: currentColor; }
.platform-table-wrap { overflow-x: auto; }
.platform-table { width: 100%; border-collapse: collapse; font-size: 0.87rem; }
.platform-table th { padding: 0 14px 8px 0; border-bottom: 1px solid var(--border); text-align: left; font-weight: 400; font-size: calc(0.75rem - 1pt); color: #9a9a9a; white-space: nowrap; }
.platform-table th a { color: inherit; text-decoration: none; }
.platform-table th a:hover, .platform-table th a.on { color: var(--text); }
.platform-table th a.on { font-weight: 700; }
.platform-table th[aria-sort=ascending] a::after { content: " ↑"; }
.platform-table th[aria-sort=descending] a::after { content: " ↓"; }
.platform-table td { padding: 11px 14px 11px 0; border-bottom: 1px solid var(--border); vertical-align: top; white-space: nowrap; }
.platform-table td .hint { display: block; margin: 1px 0 0; font-size: 0.78rem; }
.platform-table .num { text-align: right; }
.platform-table td.num .hint { display: inline; }
.platform-name { color: var(--text); font-weight: 700; text-decoration: none; }
.platform-name:hover { text-decoration: underline; }
.platform-actions { text-align: right; }
.platform-actions form { display: inline-block; margin: 0 0 0 6px; }
/* the buttons take no more height than a line of text, so the rows stay even */
.platform-actions .btn-ghost.small { margin: -7px 0; padding: 5px 12px; }
/* a studio's status: beta in the user button's blue, active green, past due in the accent, suspended red, closed grey */
.status-pill { display: inline-block; padding: 1px 8px; border: 1px solid currentColor; border-radius: 999px; font-size: 0.75rem; font-weight: 700; line-height: 1.5; }
.status-pill.is-beta { color: #3457d1; }
.status-pill.is-active { color: #2f7d4f; }
.status-pill.is-past_due { color: #b9771c; }
.status-pill.is-suspended { color: var(--danger); }
.status-pill.is-closed { color: #8b8b8b; }
/* how much of its storage limit a studio uses */
.usage { display: block; width: 90px; height: 4px; margin: 5px 0 0 auto; border-radius: 2px; background: #e6e6e6; overflow: hidden; }
.usage > span { display: block; height: 100%; background: #3457d1; }
.usage.is-full > span { background: #d64545; }
.usage.usage-wide { width: 220px; margin: 6px 0; }
.auth-hint { margin: -8px 0 18px; color: var(--text-dim); font-size: 0.8rem; line-height: 1.45; }
/* the invitation's consent: a line that may wrap, its box at the first line */
.auth-form .auth-consent { display: flex; align-items: flex-start; margin: 0 0 24px; line-height: 1.45; }
.auth-consent input { flex: none; margin-top: 2px; }
.auth-consent a { color: #3457d1; font-weight: 600; text-decoration: none; }
.auth-consent a:hover { text-decoration: underline; }
@media (max-width: 480px) {
  .auth-main { align-items: flex-start; padding-top: 28px; }
  .auth-card { padding: 30px 22px 26px; }
}

/* ---------- forms & buttons ---------- */

label { display: block; margin-bottom: 14px; font-weight: 600; font-size: 0.9rem; }
input[type=text], input[type=email], input[type=password], input[type=date], textarea, select {
  width: 100%;
  margin-top: 5px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
  background: #fff;
  color: var(--text);
}
textarea { resize: vertical; }

/* :where() keeps the default button look at zero specificity, so any class can restyle a button. */
:where(button) {
  display: inline-block;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  padding: 9px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
  text-decoration: none;
  font-family: inherit;
}
:where(button:hover) { background: var(--accent-dark); border-color: var(--accent-dark); }

.error { color: var(--danger); font-weight: 600; }
/* "Saved." at the bottom centre of the window; it fades out by itself after 5 seconds (admin.js removes it) */
.notice {
  position: fixed; left: 50%; bottom: 28px; z-index: 60; margin: 0; padding: 10px 20px;
  transform: translateX(-50%); pointer-events: none;
  background: #1f1f1f; color: #fff; border-radius: 8px; font-weight: 600;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
  animation: notice-out 5s linear forwards;
}
@keyframes notice-out {
  0%, 92% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}
/* the upload toast (admin.js): "Uploading 3 of 12" with the file name sliding in below while it
 * works, then "12 files uploaded." with the names running through the bar before it fades */
.notice.is-busy { animation: none; }
.upload-notice {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: min(380px, calc(100vw - 32px)); padding: 9px 18px 10px; text-align: center;
}
.un-title { font-variant-numeric: tabular-nums; }
/* the x that cancels the upload; the toast itself lets clicks through, the button does not */
.upload-notice.is-busy { padding-left: 38px; padding-right: 38px; }
.un-cancel {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: #cfcfcf; pointer-events: auto; cursor: pointer;
}
.un-cancel:hover { background: rgba(255, 255, 255, 0.14); border-color: transparent; color: #fff; }
.un-cancel .icon { width: 16px; height: 16px; }
.un-ticker {
  display: block; width: 100%; overflow: hidden; white-space: nowrap;
  font-size: 0.8rem; font-weight: 500; color: #cfcfcf;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.un-ticker:empty { display: none; }
/* while it works: "Please keep this page open ..." */
.un-stay { margin-top: 3px; font-size: 0.72rem; font-weight: 500; color: #9a9a9a; }
.un-name { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: top; animation: un-in 0.22s ease-out; }
.un-track { display: inline-block; white-space: pre; }
@keyframes un-in {
  from { transform: translateX(70%); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.empty, .hint { color: var(--text-dim); }

/* ---------- folders ---------- */

/* every row as tall as the tallest tile (the "New gallery" tile with its field), so all rows line up */
.folder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 1fr;
  gap: 16px;
  margin-bottom: 18px;
}
.folder-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}
.folder-card-cover {
  position: relative;
  flex: none;
  aspect-ratio: 4 / 3;
  background: #ece8e1 center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* absolute, so a portrait cover cannot stretch the box beyond 4:3 */
.folder-card-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* the body fills the card, so the activity lines (or the new-gallery field) sit at its foot in every card of a row */
.folder-card-body { flex: 1 1 auto; display: flex; flex-direction: column; padding: 10px 12px 12px; }
.folder-card-body strong { display: block; overflow-wrap: anywhere; }
.folder-card-body .count { font-size: 0.8rem; color: var(--text-dim); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* delete and deactivate icons on a gallery tile: shown on hover or keyboard focus, always on touch screens */
.folder-tile { position: relative; display: flex; }
.folder-tile > .folder-card { flex: 1 1 auto; min-width: 0; }
.folder-actions { position: absolute; top: 8px; left: 8px; display: flex; gap: 6px; opacity: 0; transition: opacity 0.12s; }
.folder-actions form { margin: 0; }
.folder-tile:hover .folder-actions, .folder-actions:focus-within { opacity: 1; }
/* the same round white button as the delete icon on the photo cards (.card-actions) */
.folder-actions button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  background: #fff; border: 1px solid #d9d9d9; border-radius: 50%;
  color: #333; cursor: pointer;
}
.folder-actions button:hover { background: #f0f0f0; }
.folder-delete button:hover { color: var(--danger); }
@media (hover: none) { .folder-actions { opacity: 1; } }
/* the settings button of a gallery tile or row, the same round button as the two before it */
.folder-settings {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; background: #fff; border: 1px solid #d9d9d9; border-radius: 50%; color: #333;
}
.folder-settings:hover { background: #f0f0f0; }
/* a gallery in presentation mode: its preview has a 3 px frame in the blue of the editor's, over the picture (grid and list) */
.folder-card-cover.is-presentation::before {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 3px #3457d1;
}
/* a deactivated gallery keeps its tile, with the preview darkened */
.folder-tile.is-disabled .folder-card-cover::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.62); }
.folder-off {
  position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%);
  color: #fff; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}

/* a gallery without a cover image: the grey box and folder symbol of the set tiles in the editor */
.folder-card-cover.no-cover { background-color: #f4f4f4; color: #8b8b8b; }
.folder-card-cover.no-cover .icon { width: 44px; height: 44px; stroke-width: 1.4; }
.folder-tile:hover .folder-card-cover.no-cover { background-color: #ebebeb; color: #555; }
.folder-tile:hover .folder-card:has(.no-cover) { border-color: #cfcfcf; }
.folder-grid.is-list .folder-card-cover.no-cover .icon { width: 26px; height: 26px; }

/* the bin ("Deleted files"): a line under the galleries, at the right, set like the figures under the heading
 * (the name like .library-total strong, what is in it like its .types line); the rule is as far below the galleries as the galleries are below those figures
 * (.page-head margin-bottom 35px; it collapses with the grid's own 18px) */
.bin-line { display: flex; justify-content: flex-end; margin: 35px 0 0; padding-top: 12px; border-top: 1px solid var(--border); }
.bin-link { display: inline-flex; align-items: baseline; gap: 6px; color: var(--text); font-size: 0.85rem; line-height: 1.5; text-decoration: none; }
.bin-link .icon { align-self: center; }
.bin-link-count { color: var(--text-dim); font-size: calc(0.75rem - 1pt); }
.bin-link:hover strong { text-decoration: underline; }

/* "New gallery" is the first tile of the overview grid, the same card as every gallery */
.new-card { margin: 0; }
/* the empty tile for a new gallery looks like a set tile in the editor: the same grey, the same darkening on hover */
.new-card .folder-card-cover { margin: 0; background-color: #f4f4f4; color: #8b8b8b; cursor: text; }
.new-card:hover { border-color: #cfcfcf; }
.new-card:hover .folder-card-cover { background-color: #ebebeb; color: #555; }
.new-card .folder-card-cover .icon { width: 44px; height: 44px; stroke-width: 1.5; }
.new-card .folder-card-body .error { margin: 6px 0 0; font-size: 0.85rem; }
.new-row { display: flex; gap: 8px; margin-top: auto; padding-top: 18px; }
.new-row input[type=text] { flex: 1 1 auto; width: auto; min-width: 0; margin: 0; }
.new-row .btn-primary { flex: none; width: 42px; padding: 0; }
.new-row .btn-primary .icon { width: 20px; height: 20px; }

/* the overview as a list (#folder-grid.is-list, overview.js): one row per gallery, the preview on the left,
 * then name, files, sets, created, modified, client activity, and the two round buttons at the end.
 * The column widths are shared by the heads (.folder-list-head) and every row. */
.folder-list-head, .folder-cols { display: none; }
.folder-grid.is-list {
  display: flex; flex-direction: column; gap: 0;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.folder-grid.is-list .folder-list-head {
  display: flex; align-items: center; gap: 16px; padding: 9px 14px;
  border-bottom: 1px solid var(--border); background: #fafafa;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim);
}
.folder-grid.is-list .fl-cover { flex: none; width: 88px; }
.folder-grid.is-list .fl-name { flex: 1 1 auto; min-width: 0; }
.folder-grid.is-list .fl-col { flex: none; width: 92px; white-space: nowrap; }
.folder-grid.is-list .fl-num { width: 46px; text-align: right; }
/* the size right-aligned like the two counts, with room before the dates */
.folder-grid.is-list .fl-size { width: 72px; margin-right: 22px; text-align: right; }
.folder-grid.is-list .fl-act { width: 112px; }
.folder-grid.is-list .fl-actions { flex: none; width: 102px; }
.folder-grid.is-list .fl-label { display: none; }
.folder-grid.is-list > .folder-tile, .folder-grid.is-list > .new-card { align-items: center; border-bottom: 1px solid var(--border); }
.folder-grid.is-list > :last-child { border-bottom: 0; }
.folder-grid.is-list .folder-card { flex-direction: row; align-items: center; gap: 16px; padding: 8px 14px; border: 0; border-radius: 0; background: transparent; }
.folder-grid.is-list .folder-tile > .folder-card { padding-right: 0; }
/* the "New gallery" row is a .folder-card itself, so it gets its line back */
.folder-grid.is-list > .new-card { border-bottom: 1px solid var(--border); }
.folder-grid.is-list .folder-tile:hover { background: #fafafa; }
.folder-grid.is-list .folder-card-cover { width: 88px; border-radius: 4px; overflow: hidden; }
.folder-grid.is-list .folder-off { font-size: 0.56rem; letter-spacing: 0.04em; }
.folder-grid.is-list .folder-card-body { flex-direction: row; align-items: center; gap: 16px; min-width: 0; padding: 0; }
.folder-grid.is-list .folder-card-body > strong { flex: 1 1 auto; min-width: 0; }
.folder-grid.is-list .folder-card-body .count { display: none; }
.folder-grid.is-list .folder-cols { display: flex; gap: 16px; flex: none; font-size: 0.85rem; color: var(--text-dim); }
.folder-grid.is-list .folder-actions { position: static; flex: none; width: 102px; margin: 0 14px 0 16px; opacity: 1; }
.folder-grid.is-list .new-card .folder-card-cover { height: 66px; aspect-ratio: auto; }
.folder-grid.is-list .new-card .folder-card-cover .icon { width: 26px; height: 26px; }
.folder-grid.is-list .new-card .folder-card-body { flex-wrap: wrap; }
.folder-grid.is-list .new-card .new-title { display: none; }
/* the name field of a new gallery takes the whole width of its row */
.folder-grid.is-list .new-row { flex: 1 1 100%; margin: 0; padding: 0; }
/* narrow windows: no column heads, the figures wrap under the name with their labels */
@media (max-width: 760px) {
  .folder-grid.is-list .folder-list-head { display: none; }
  .folder-grid.is-list .folder-card { gap: 12px; padding: 8px 10px; }
  .folder-grid.is-list .folder-card-body { flex-direction: column; align-items: flex-start; gap: 4px; }
  .folder-grid.is-list .folder-card-body > strong { flex: none; }
  .folder-grid.is-list .folder-cols { flex: none; flex-wrap: wrap; gap: 2px 12px; font-size: 0.78rem; }
  .folder-grid.is-list .fl-col { width: auto; text-align: left; }
  .folder-grid.is-list .fl-label { display: inline; }
  .folder-grid.is-list .fl-size { margin-right: 0; }
  .folder-grid.is-list .folder-actions { flex-direction: column; width: auto; margin: 0 10px 0 8px; }
  .folder-grid.is-list .new-card .folder-card-body { flex-wrap: nowrap; }
  .folder-grid.is-list .new-row { flex: none; align-self: stretch; min-width: 0; }
}

/* ---------- admin: the bin (bin.php, bin.js) ----------
 * The overview's tiles and list (.folder-grid, overview.js), one tile per entry, with a restore and
 * a delete-for-good button in the place of the overview's round buttons. */

.btn-ghost .icon { width: 16px; height: 16px; }
/* no preview (a set without a cover, a file without one): grey like the "New gallery" tile */
.bin-entry .folder-card-cover { background-color: #f4f4f4; color: #8b8b8b; }
.bin-entry .folder-card-cover .icon { width: 44px; height: 44px; stroke-width: 1.5; }
.folder-grid.is-list .bin-entry .folder-card-cover .icon { width: 26px; height: 26px; }
.bin-type { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; }
.bin-name { display: flex; flex-direction: column; min-width: 0; }
.bin-place { font-size: 0.8rem; color: var(--text-dim); overflow-wrap: anywhere; }
.bin-blocked { font-size: 0.78rem; color: var(--text-dim); font-style: italic; }
.bin-left { font-variant-numeric: tabular-nums; }
.folder-tile.is-soon .bin-left { color: var(--danger); font-weight: 600; }
.folder-actions button:disabled { opacity: 0.35; cursor: not-allowed; }
.folder-actions button:disabled:hover { background: #fff; }
.folder-grid.is-list .bin-name { flex: 1 1 auto; }
.folder-grid.is-list .fl-left { width: 112px; }
.folder-grid.is-list .folder-cols .bin-left { color: var(--text); }
.folder-grid.is-list .folder-tile.is-soon .folder-cols .bin-left { color: var(--danger); }
@media (max-width: 760px) {
  .folder-grid.is-list .bin-name { flex: none; }
  .folder-grid.is-list .fl-left { width: auto; }
}

/* ---------- admin: gallery editor (sidebar + card grid) ---------- */

.shell { display: grid; grid-template-columns: 290px minmax(0, 1fr); }

.sidebar {
  position: sticky;
  top: 56px;
  align-self: start;
  height: calc(100vh - 56px);
  overflow-y: auto;
  /* the room of the scrollbar is always kept, so the contents do not jump when it comes and goes */
  scrollbar-gutter: stable;
  padding: 22px 18px 40px;
  background: #f2f2f2;
  border-right: 1px solid #e6e6e6;
}
.side-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
.side-title h1, .side-title h2 { font-size: 1.35rem; line-height: 1.25; margin: 0; overflow-wrap: anywhere; }
/* on a set page the title reads "… / Set": the gallery and the sets above are in the breadcrumb; "… /" leads one step up */
.side-title-up { color: var(--text-dim); font-weight: 400; text-decoration: none; }
a.side-title-up:hover { color: var(--text); }

.menu { position: relative; flex-shrink: 0; }
.menu > summary {
  list-style: none; cursor: pointer;
  width: 34px; height: 34px; border-radius: 8px; background: #e4e4e4;
  display: flex; align-items: center; justify-content: center;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover { background: #d9d9d9; }
.menu-list {
  position: absolute; right: 0; top: 40px; z-index: 15; min-width: 230px;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #dcdcdc; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); padding: 6px;
}
.menu-list a, .menu-list button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border: 0; border-radius: 6px; background: none;
  color: #222; text-decoration: none; text-align: left;
  font: inherit; font-size: 0.92rem; cursor: pointer;
}
.menu-list a:hover, .menu-list button:hover { background: #f2f2f2; }
.menu-list .menu-danger { color: var(--danger); }

.tool-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 14px; }
.tool {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 4px; border: 0; border-radius: 8px; background: #e6e6e6;
  color: #222; text-decoration: none; font: inherit; font-size: 0.85rem; cursor: pointer;
}
.tool .icon { width: 22px; height: 22px; }
.tool span { text-align: center; line-height: 1.2; }
.tool:hover { background: #dbdbdb; }

.btn-primary, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border-radius: 8px; font: inherit; font-weight: 500;
  cursor: pointer; text-decoration: none;
}
.btn-primary { background: var(--accent); border: 1px solid var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn-ghost { background: transparent; border: 1px solid #c9c9c9; color: #222; }
.btn-ghost:hover { background: #f0f0f0; }
.btn-primary.block { width: 100%; margin-bottom: 10px; }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary:disabled:hover { background: var(--accent); border-color: var(--accent); }

.side-section { margin-top: 26px; }
.side-section h2 { font-size: 1.15rem; margin: 0 0 12px; }

.search {
  display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 0 10px;
  background: #fff; border: 1px solid #d6d6d6; border-radius: 8px;
  color: #666; font-weight: 400;
}
.search input {
  width: 100%; margin: 0; padding: 9px 0; border: 0; outline: 0;
  background: transparent; font: inherit; color: var(--text);
}

.filter-icons { display: flex; flex-wrap: wrap; gap: 4px; }
.filter-icons button, #sort-dir, #group-dir {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  color: #555; cursor: pointer;
}
.filter-icons button .icon { width: 19px; height: 19px; }
.filter-icons button.colored { color: var(--c); }
.filter-icons button.colored .icon { fill: currentColor; }
.filter-icons button:hover { background: #e4e4e4; }
/* the heart turns red (the red of the hearts) only while its filter is on */
.filter-icons button[data-filter=fav].on { color: #d64545; }
.filter-icons button[data-filter=fav].on .icon { fill: currentColor; }
.filter-icons button.on, #sort-dir.on, #group-dir.on { background: #fff; border-color: #b9b9b9; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06); }

.field-label { font-size: 0.85rem; font-weight: 700; margin-bottom: 6px; }
.field-label-gap { margin-top: 16px; }
.sort-row { display: flex; gap: 8px; }
.sort-row select { margin: 0; }
#sort-dir, #group-dir { width: 40px; height: 40px; flex-shrink: 0; background: #e6e6e6; }
#sort-dir:hover, #group-dir:hover { background: #dbdbdb; }

/* download dialog */
label.dl-option {
  display: flex; align-items: center; gap: 12px; margin: 0 0 8px; padding: 11px 14px;
  border: 1px solid var(--border); border-radius: 8px;
  font-size: 1rem; font-weight: 500; cursor: pointer;
}
label.dl-option:hover { background: #fafafa; }
label.dl-option[hidden] { display: none; }
label.dl-option:has(input:checked) { border-color: #b9b9b9; background: #f7f7f7; }
label.dl-option.is-disabled { color: #999; cursor: default; }
label.dl-option.is-disabled:hover { background: transparent; }
.dl-option input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: #3a3a3a; }
.dl-option .dl-count { margin-left: auto; color: var(--text-dim); font-size: 0.85rem; font-weight: 400; }
.dlg-note { margin: 0 0 14px; color: var(--text-dim); font-size: 0.9rem; }
.dl-group { margin-bottom: 14px; }
.dl-group .dl-option:last-child { margin-bottom: 0; }
/* "Move gallery": the places to choose from, scrolling when there are many */
.move-list { max-height: min(50vh, 420px); overflow-y: auto; }
/* upload of a file name that exists already: the names, and the two ways to go on */
.conflict-names { margin: -6px 0 16px; padding-left: 20px; font-size: 0.9rem; overflow-wrap: anywhere; }
label.conflict-option { align-items: flex-start; }
.conflict-option input { margin-top: 3px; }
.conflict-option span { display: flex; flex-direction: column; gap: 2px; }
.conflict-option small { color: var(--text-dim); font-size: 0.85rem; font-weight: 400; }
.dl-marks { display: grid; gap: 8px; margin: 2px 0 10px 30px; }
.dl-marks[hidden] { display: none; }
.dl-mark { align-items: center; }
.dl-mark-icon { width: 18px; height: 18px; flex: none; }

/* Grid / List switch */
.view-toggle { display: inline-flex; gap: 3px; padding: 3px; background: #e6e6e6; border-radius: 8px; }
.view-toggle button {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px;
  background: transparent; border: 0; border-radius: 6px;
  color: #555; font: inherit; font-size: 0.9rem; cursor: pointer;
}
.view-toggle button:hover { color: #222; }
.view-toggle button.on { background: #fff; color: #222; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14); }
/* "Export file names" (admin selection): the app switch over the full width, then the names */
.export-apps { display: flex; width: 100%; margin-bottom: 12px; }
.export-apps button { flex: 1; justify-content: center; }
.export-names { width: 100%; margin: 0; font-size: 0.9rem; line-height: 1.5; }

.set-list { list-style: none; margin: 12px 0 0; padding: 0; }
.set-list a {
  display: flex; align-items: center; gap: 10px; padding: 7px 6px;
  border-radius: 6px; color: #222; text-decoration: none; font-size: 0.92rem;
}
.set-list a:hover { background: #e6e6e6; }
.set-list a span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-list small { color: #888; }
/* "Show photos of all sets" in the Sets heading (sets_heading_html()); while gridview.js fetches the
 * other grid, the photos fade a little */
.card-grid.is-loading { opacity: 0.45; pointer-events: none; transition: opacity 0.15s; }
/* a section heading with a control at its right end (the Sets heading with that switch) */
.side-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
.side-head h2 { margin: 0; }
label.switch.side-switch { flex-shrink: 0; }
.side-switch .slider { width: 30px; height: 16px; }
.side-switch .slider::after { width: 12px; height: 12px; }
.side-switch input:checked + .slider::after { transform: translateX(14px); }

.content { position: relative; min-width: 0; padding: 28px 32px 60px; }
/* admin editor: the content column is as tall as the sidebar at least, so the upload note
 * sits at the bottom of the page, in one line (it wraps only when the window is too narrow) */
.content.editor-col { display: flex; flex-direction: column; padding-bottom: 20px; }
/* "No photos here yet" (a page without photos or sets) fills the free height of the column, in the middle both ways:
 * a light picture symbol, the short heading, one grey line */
.editor-col > #empty-note:not([hidden]) {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  margin: 0; text-align: center; color: #a3a3a3; font-size: 0.85rem; line-height: 1.5;
}
/* the client's empty set: the same symbol and heading, without the upload line, in the middle of the free space
 * between the back button and the footer (.shell.is-empty, view.php) */
body.client .shell.is-empty, body.client .shell.is-empty > .content, body.client .shell.is-empty .content-inner { display: flex; flex-direction: column; }
body.client .shell.is-empty > .content, body.client .shell.is-empty .content-inner { flex: 1; }
body.client #empty-note:not([hidden]) {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  margin: 0; padding: 40px 0; text-align: center;
}
#empty-note .icon { width: 40px; height: 40px; margin-bottom: 4px; color: #c4c4c4; stroke-width: 1.5; }
#empty-note strong { color: #444; font-size: 1rem; font-weight: 600; }
.editor-foot { margin-top: auto; padding-top: 44px; }
.editor-foot p { margin: 0; padding-top: 14px; border-top: 1px solid #e6e6e6; text-align: center; font-size: 0.8rem; line-height: 1.5; color: var(--text-dim); }
/* "Make the missing previews (3)": videos, and TIFF/PSD without Imagick, get their preview from this browser */
.editor-foot .link-btn { margin-left: 4px; padding: 0; border: 0; background: none; color: #3457D1; font: inherit; text-decoration: underline; cursor: pointer; }
.editor-foot .link-btn[hidden] { display: none; }

/* client gallery: cover image across the full content column, then the grid */
.content.flush { padding: 0 0 60px; }
.content-inner { padding: 28px 32px 0; }
.hero { position: relative; display: flex; min-height: clamp(320px, 62vh, 680px); background: #2a2a2a; overflow: hidden; }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* clicks on the empty overlay fall through to the image (lightbox); only the text is interactive */
.hero-overlay {
  position: relative; flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 56px 28px; text-align: center; color: #fff; pointer-events: none;
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5));
}
.hero-content { max-width: 46em; pointer-events: auto; }
.hero h1 { margin: 0 0 14px; font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.1; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45); }
/* a short white rule between the title and the welcome message */
.hero-rule { width: 50px; height: 2px; margin: 26px auto; background: #fff; box-shadow: 0 1px 10px rgba(0, 0, 0, 0.4); }
.hero .message { margin: 0 auto; color: #fff; font-size: clamp(1rem, 1.6vw, 1.3rem); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }
.hero .message a { color: #fff; text-decoration: underline; }
.hero .message ul, .hero .message ol { display: inline-block; text-align: left; }
.hero-plain { padding: 44px 32px 6px; text-align: center; }
.hero-plain h1 { margin: 0 0 10px; font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.15; }
.hero-plain .message { margin: 0 auto; }
.hero-plain .message ul, .hero-plain .message ol { display: inline-block; text-align: left; }
/* where the title and message stand (message_position_classes(), the toolbar of the welcome message): in the header image
 * top, middle or bottom and left, centred or right; without an image only left, centred or right */
.hero.pos-v-top .hero-overlay { align-items: flex-start; }
.hero.pos-v-bottom .hero-overlay { align-items: flex-end; }
.hero.pos-h-left .hero-overlay { justify-content: flex-start; text-align: left; }
.hero.pos-h-right .hero-overlay { justify-content: flex-end; text-align: right; }
/* clear of the drawer's grip at the left edge (and the same at the right) */
.hero.pos-h-left .hero-overlay, .hero.pos-h-right .hero-overlay { padding-left: clamp(44px, 6vw, 88px); padding-right: clamp(44px, 6vw, 88px); }
.pos-h-left .hero-rule { margin-left: 0; }
.pos-h-right .hero-rule { margin-right: 0; }
.hero-plain.pos-h-left { text-align: left; }
.hero-plain.pos-h-left .message { margin-left: 0; }
.hero-plain.pos-h-right { text-align: right; }
.hero-plain.pos-h-right .message { margin-right: 0; }
/* the editor's preview above the photos follows the horizontal choice */
.editor-col > .message.pos-h-center { margin-left: auto; margin-right: auto; text-align: center; }
.editor-col > .message.pos-h-right { margin-left: auto; text-align: right; }
.gallery-card .card-frame { cursor: zoom-in; }

/* Client gallery: the sidebar is a drawer, hidden at first, so the content (and its
 * header image) takes the full width. The grip at the left edge (.side-handle) slides
 * it in over the page and moves along with its edge (gallery.js, body.side-open). */
body.client { --drawer-w: 290px; }
body.client .shell { display: block; }
body.client .sidebar {
  position: fixed; top: 56px; left: 0; bottom: 0; z-index: 25;
  width: var(--drawer-w); height: auto; align-self: auto;
  display: flex; flex-direction: column; padding-bottom: 0;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transform: translateX(-100%); visibility: hidden;
  transition: transform 0.28s ease, box-shadow 0.28s ease, visibility 0s linear 0.28s;
}
body.client.side-open .sidebar {
  transform: none; visibility: visible; box-shadow: 6px 0 30px rgba(0, 0, 0, 0.18);
  transition: transform 0.28s ease, box-shadow 0.28s ease, visibility 0s;
}
.side-handle {
  position: fixed; left: 0; top: calc(50% + 28px); z-index: 26;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  width: 30px; height: 88px; padding: 0; margin-top: -44px;
  background: #f2f2f2; color: #444; cursor: pointer;
  border: 1px solid #dcdcdc; border-left: 0; border-radius: 0 12px 12px 0;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.12);
  transition: transform 0.28s ease, background 0.15s, color 0.15s;
}
.side-handle:hover { background: #e8e8e8; color: #111; }
.side-handle .icon { width: 18px; height: 18px; }
.side-handle-arrow { display: inline-flex; transition: transform 0.28s ease; }
body.client.side-open .side-handle { transform: translateX(var(--drawer-w)); }
body.client.side-open .side-handle-arrow { transform: rotate(180deg); }
/* the hint on a first visit (gallery.js): the drawer peeks out by --peek-w and goes back */
body.client { --peek-w: 44px; }
body.client.side-peek .sidebar {
  transform: translateX(calc(var(--peek-w) - 100%)); visibility: visible; box-shadow: 6px 0 30px rgba(0, 0, 0, 0.18);
  transition: transform 0.4s ease, box-shadow 0.4s ease, visibility 0s;
}
body.client.side-peek .side-handle { transform: translateX(var(--peek-w)); transition: transform 0.4s ease, background 0.15s, color 0.15s; }
/* while a filter is active (drawer open or closed), a dot in the accent on the grip's top right,
 * like the one of the recent activity in the admin bar, set off by a ring in the page colour */
.side-handle-dot {
  display: none; position: absolute; top: -3px; right: -3px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 2.5px var(--bg);
}
.side-handle.has-filter .side-handle-dot { display: block; }
/* no "Save image" callout on a long press (iOS), like the context menu (gallery.js) */
body.client .card-frame img, body.client .lightbox-stage img, body.client .hero > img { -webkit-touch-callout: none; }
/* Pinned (html.side-pinned, remembered in localStorage and set by the script in the page
 * head, gallery.js): the drawer stays open without a shadow and the content and footer
 * move over beside it. Only in a wide window; below that it stays a drawer over the page. */
body.client .side-pin { display: none; margin: -5px -6px 0 0; }
.side-pin .icon { width: 17px; height: 17px; }
body.client .shell > .content, body.client .site-footer { transition: margin-left 0.28s ease; }
@media (min-width: 901px) {
  body.client .side-pin { display: inline-flex; }
  html.side-pinned body.client .side-pin { background: #e2e2e2; color: #111; }
  html.side-pinned body.client .side-pin .icon { fill: currentColor; }
  html.side-pinned body.client .sidebar {
    transform: none; visibility: visible; box-shadow: none;
    transition: transform 0.28s ease, box-shadow 0.28s ease, visibility 0s;
  }
  html.side-pinned body.client .side-handle { display: none; }
  html.side-pinned body.client .shell > .content, html.side-pinned body.client .site-footer { margin-left: var(--drawer-w); }
  html.side-pinned body.client .select-bar { left: calc(50% + var(--drawer-w) / 2); }
}
.side-download { margin-top: auto; position: sticky; bottom: 0; padding: 14px 0 22px; background: #f2f2f2; }
.side-download .btn-primary { margin-bottom: 0; }

.upload-progress { list-style: none; padding: 0; margin: 0 0 14px; font-size: 0.85rem; }
.upload-progress li { padding: 2px 0; }
.upload-progress li.error { color: var(--danger); }
.upload-progress li.done { color: #2e7d32; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 26px 18px;
}
.card { min-width: 0; }
.card[hidden] { display: none; }
.card[draggable=true] { cursor: grab; }
.card.dragging { opacity: 0.35; }

.card-frame {
  position: relative; aspect-ratio: 1; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid #e3e3e3; border-radius: 8px;
}
.card-frame img { width: 100%; height: 100%; object-fit: contain; display: block; }
.card-placeholder {
  width: 100%; height: 100%; background: #f4f4f4; color: #9a9a9a;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; letter-spacing: 0.08em;
}
/* a video: the round play symbol in the middle of its picture (clicks go through to the lightbox) */
.card-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%; background: rgba(0, 0, 0, 0.5); color: #fff;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.card-play .icon { width: 20px; height: 20px; margin-left: 3px; fill: currentColor; stroke: none; }
.card-placeholder + .card-play { top: calc(50% + 34px); width: 34px; height: 34px; }
.card-placeholder + .card-play .icon { width: 15px; height: 15px; margin-left: 2px; }

.card-pills { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; background: #fff; border: 1px solid #e0e0e0; border-radius: 6px;
  color: #333; font-size: 0.8rem; line-height: 1.4;
}
.pill[hidden] { display: none; }
.pill .icon { width: 14px; height: 14px; }
.pill-fav { color: #d64545; }
.pill-fav .icon, .pill-flag .icon { fill: currentColor; }
.pill-flag { color: var(--c); }
/* the client's heart is a button: outline until favorited */
.pill-btn { font: inherit; cursor: pointer; }
.pill-btn.pill-fav { color: #777; }
.pill-btn.pill-fav .icon { fill: none; }
.pill-btn.pill-fav:hover { color: #d64545; }
.pill-btn.pill-fav.is-on { color: #d64545; }
.pill-btn.pill-fav.is-on .icon { fill: currentColor; }
.pill-btn.pill-flag { color: #777; }
.pill-btn.pill-flag .icon { fill: none; }
.pill-btn.pill-flag:hover { color: #333; }
.pill-btn.pill-flag.is-on { color: var(--c); }
.pill-btn.pill-flag.is-on .icon { fill: currentColor; }
/* the black flag says what it means: "Final" (card_pills_html(), marks.js), small enough that its pill keeps the
 * height of the others (a button inherits the page's font size) */
.pill-final { display: none; font-size: 0.75rem; line-height: 14px; font-weight: 700; }
.pill-flag.is-final .pill-final { display: inline; }

/* small labels at the bottom right of a photo: the length of a video, the file type (all but JPG), "CMYK" and, when the same file
 * name was uploaded again and both were kept, the version ("v2"; admin and client) */
.card-tags { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 4px; }
/* The heart and the flag on a photo show when the pointer is on the photo (or the keyboard is in it, or its flag menu
 * is open) and while they are on. The empty ones take no room meanwhile, so what is set (and the comment count)
 * always starts at the top; on hover the empty ones come back in their places. Touch screens have no hover and
 * always show them. */
@media (hover: hover) {
  .card .pill-btn:not(.is-on), .set-card .pill-btn:not(.is-on) { display: none; }
  .card:hover .pill-btn, .card:has(:focus-visible) .pill-btn, .card.is-menu-open .pill-btn,
  .set-card:hover .pill-btn, .set-card:has(:focus-visible) .pill-btn, .set-card.is-menu-open .pill-btn { display: inline-flex; }
}

.tag {
  padding: 2px 7px; border-radius: 5px;
  background: rgba(255, 255, 255, 0.92); border: 1px solid #e0e0e0;
  color: #444; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em;
}
.tag-version { letter-spacing: 0; }

/* cover and delete buttons of the admin editor: shown on hover, on touch screens always; the cover
 * photo keeps its cover button visible, inverted (dark with a white icon), instead of carrying a label */
.card-actions { position: absolute; top: 8px; left: 8px; display: flex; gap: 6px; }
.card-actions button {
  display: none; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  background: #fff; border: 1px solid #d9d9d9; border-radius: 50%;
  color: #333; cursor: pointer;
}
.card:hover .card-actions button, .card:focus-within .card-actions button { display: inline-flex; }
@media (hover: none) { .card-actions button { display: inline-flex; } }
.card.is-cover .card-actions button[data-action=cover] { display: inline-flex; background: #222; border-color: #222; color: #fff; }
.card-actions button:hover { background: #f0f0f0; }
.card.is-cover .card-actions button[data-action=cover]:hover { background: #000; }
.card-actions button[data-action=delete]:hover { color: var(--danger); }

.card-name { margin-top: 8px; text-align: center; color: #777; font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* start and end shown, only the middle is cut: the end part never shrinks */
.card-name.split { display: flex; justify-content: center; text-overflow: clip; }
.card-name .nm-start { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: pre; }
.card-name .nm-end { flex: none; white-space: pre; }

/* sets (sub-galleries) as folder tiles before the photos, admin and client */
.set-card { display: block; min-width: 0; color: inherit; text-decoration: none; }
.set-card .card-frame { background: #f4f4f4; color: #8b8b8b; }
.set-card .card-frame > .icon { width: 34%; height: 34%; stroke-width: 1.4; }
.set-card:hover .card-frame { background: #ebebeb; border-color: #cfcfcf; color: #555; }
.set-text { display: block; margin-top: 8px; text-align: center; }
.set-name { display: block; font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-count { display: block; color: var(--text-dim); font-size: 0.8rem; }

/* client gallery: the thumbnail size slider above the photos (gallery.js). --cols fixes the
 * photos per row of the grid (3 to 8), --list-scale enlarges the list's previews (1 to 2.5, 120 to 300 px). */
.size-bar { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin: -10px 0 16px; }
/* a set page: a square button with "‹" at the left, one step up in the gallery (its name in the tooltip), plain like
 * the client drawer's pin, in the client gallery and the editor alike */
.size-bar.has-back { justify-content: space-between; }
.back-btn .icon { width: 20px; height: 20px; }
/* level with the drawer's pin, whatever the height of the slider beside it */
.size-bar .back-btn { align-self: flex-start; margin: -1px 0 0 -7px; }
.editor-back { display: flex; margin: -6px 0 12px; }
.editor-back .back-btn { margin-left: -7px; }
.size-control { display: inline-flex; align-items: center; gap: 8px; color: var(--text-dim); cursor: pointer; }
.size-control .size-small .icon { width: 13px; height: 13px; }
.size-control .size-big .icon { width: 20px; height: 20px; }
.size-control input[type=range] { width: 140px; margin: 0; accent-color: var(--accent); cursor: pointer; }
@media (min-width: 761px) {
  .card-grid.has-cols:not(.is-list) { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
}

/* list view: the same cards as rows */
.card-info { display: none; }
.card-grid.is-list { display: flex; flex-direction: column; gap: 14px; }
.card-grid.is-list .card, .card-grid.is-list .set-card {
  display: flex; gap: 14px; padding: 12px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
}
.card-grid.is-list .card[hidden] { display: none; }
/* the preview sits whole in its square, as in the grid */
.card-grid.is-list .card-frame { flex: none; width: calc(120px * var(--list-scale, 1)); height: calc(120px * var(--list-scale, 1)); aspect-ratio: auto; }
/* the list names the length of a video next to the picture */
.card-grid.is-list .tag-duration { display: none; }
.card-grid.is-list .card-play { width: 32px; height: 32px; }
.card-grid.is-list .card-play .icon { width: 14px; height: 14px; margin-left: 2px; }
.card-grid.is-list .card-placeholder + .card-play { top: calc(50% + 22px); width: 26px; height: 26px; }
.card-grid.is-list .card-placeholder + .card-play .icon { width: 11px; height: 11px; }
.card-grid.is-list .card-pills, .card-grid.is-list .card-name { display: none; }
/* the file name, size and badges on the left, the comments in a column of their own to the right */
.card-grid.is-list .card-info { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 4px 28px; align-items: start; flex: 1; min-width: 0; }
.card-grid.is-list .set-text { flex: 1; min-width: 0; margin: 0; text-align: left; }
.card-grid.is-list .set-name { font-size: 1rem; white-space: normal; overflow-wrap: anywhere; }
.card-grid.is-list .set-card:hover { border-color: #cfcfcf; }
/* an active filter hides the set tiles (gridview.js); after the display rules above, so it wins */
.set-card[hidden], .card-grid.is-list .set-card[hidden] { display: none; }
/* a set tile in the editor carries the same two round buttons as the gallery tiles of the overview (.folder-actions):
 * a div with the link stretched over it, the buttons above the link */
.set-tile { position: relative; }
.set-link { position: absolute; inset: 0; z-index: 1; border-radius: 8px; }
.set-link:focus-visible { outline: 2px solid #3457d1; outline-offset: 2px; }
.set-tile .folder-actions { z-index: 2; }
/* a set's own heart and flag (set_tile_html()), above the link stretched over the tile; in the list they stay
 * on the tile too (a set has no list badges) */
.set-tile .card-pills { z-index: 2; }
.card-grid.is-list .set-card .card-pills { display: flex; }
.set-tile:hover .folder-actions { opacity: 1; }
.card-grid.is-list .set-tile .folder-actions { top: 20px; left: 20px; }
.set-tile.is-disabled .card-frame::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.62); }
.card-info .info-name { display: block; overflow-wrap: anywhere; }
.card-info .info-meta { margin-top: 2px; color: var(--text-dim); font-size: 0.8rem; }
/* The favorite and flag badges are the list's buttons for them: an unset one (.is-off) shows only while the pointer is on
 * the row (or the keyboard, or its flag menu is open), as an outline in the place where it shows once set; touch screens always show it. */
.card-info .badge { font: inherit; font-size: 0.75rem; line-height: 1.5; color: inherit; cursor: pointer; }
.card-info .badge.favorite:not(.is-off) { border: 1px solid transparent; }
.card-info .badge.is-off { display: none; background: transparent; border: 1px solid #d6d6d6; color: #8a8a8a; }
.card-info .badge.is-off .icon { fill: none; color: currentColor; }
.card-info .badge.favorite.is-off:hover { color: #d64545; border-color: #e7b3b3; }
.card-info .badge.flag.is-off:hover { color: #333; border-color: #b5b5b5; }
.card-info .badge:not(.is-off):hover { filter: brightness(0.96); }
.card:hover .card-info .badge.is-off, .card:focus-within .card-info .badge.is-off, .card.is-menu-open .card-info .badge.is-off { display: inline-block; }
@media (hover: none) { .card-info .badge.is-off { display: inline-block; } }
.card-info .comment-list li span { white-space: pre-line; }
.card-info .comment-list li:first-child { padding-top: 0; border-top: 0; }

/* selecting several photos (selection.js): the round tick at the bottom left of a card, shown on hover,
 * on touch screens always, and on every card once one is ticked; the bar with the actions at the bottom */
.card-check {
  position: absolute; left: 8px; bottom: 8px; z-index: 1;
  display: none; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0;
  background: rgba(0, 0, 0, 0.35); border: 2px solid #fff; border-radius: 50%;
  color: transparent; cursor: pointer; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.card-check .icon { width: 15px; height: 15px; stroke-width: 3; }
.card-check:hover { background: rgba(0, 0, 0, 0.55); color: rgba(255, 255, 255, 0.75); }
.card:hover .card-check, .card:focus-within .card-check, .card-grid.has-selection .card-check,
.card.is-selected .card-check, .card-grid.is-list .card-check { display: inline-flex; }
@media (hover: none) { .card-check { display: inline-flex; } }
.card.is-selected .card-check { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); }
.card.is-selected .card-frame { outline: 3px solid var(--accent); outline-offset: -3px; }
.card-grid.is-list .card.is-selected { border-color: var(--accent-dark); background: color-mix(in srgb, var(--accent) 14%, var(--panel)); }
body.has-selection .content, body.has-selection .content.flush { padding-bottom: 110px; }

.select-bar {
  position: fixed; left: calc(50% + 145px); bottom: 24px; z-index: 35; transform: translateX(-50%);
  display: flex; align-items: center; gap: 2px; max-width: calc(100vw - 24px);
  padding: 6px 8px 6px 16px;
  background: #14141a; color: #fff; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}
.select-bar[hidden] { display: none; }
/* the client's sidebar is a drawer over the page, so the bar centres on the window */
@media (min-width: 761px) { body.client .select-bar { left: 50%; } }
.sel-count { margin-right: 6px; font-weight: 700; font-size: 0.9rem; white-space: nowrap; }
.sel-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px;
  background: transparent; border: 0; border-radius: 8px;
  color: #fff; font: inherit; font-size: 0.9rem; white-space: nowrap; cursor: pointer;
}
.sel-btn:hover { background: rgba(255, 255, 255, 0.14); }
.sel-btn:disabled { opacity: 0.4; cursor: default; }
.sel-btn:disabled:hover { background: transparent; }
.sel-btn .icon { width: 18px; height: 18px; }
.sel-btn.is-on { color: #ff6b6b; }
.sel-btn.is-on .icon { fill: currentColor; }
.sel-btn.sel-danger:hover { background: var(--danger); color: #fff; }
.sel-icon { padding: 8px; }
.sel-sep { flex: none; width: 1px; height: 22px; margin: 0 6px; background: rgba(255, 255, 255, 0.22); }
/* the admin's bar (about 1020 px with every label) beside the sidebar: in a smaller window its buttons are symbols only,
 * named by their tooltips, like on phones */
@media (min-width: 901px) and (max-width: 1360px) {
  body.admin .sel-btn:not([data-sel=all]) span { display: none; }
  body.admin .sel-btn:not([data-sel=all]) { padding: 8px 10px; }
}

.drop-overlay {
  position: fixed; top: 56px; right: 0; bottom: 0; left: 290px; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: rgba(233, 162, 59, 0.18); border: 3px dashed var(--accent-dark);
  font-size: 1.3rem; font-weight: 700; pointer-events: none;
}
.drop-overlay[hidden] { display: none; }

/* dialogs */
dialog.dlg {
  width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto;
  padding: 0; border: 0; border-radius: 12px;
  color: var(--text); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
dialog.dlg::backdrop { background: rgba(20, 20, 20, 0.5); }
.dlg-body { padding: 22px 24px 20px; }
.dlg-body header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.dlg-body h2 { margin: 0; font-size: 1.2rem; }
.dlg-body footer { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 18px; }
.dlg-x {
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: #666; font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.dlg-x:hover { background: #f0f0f0; }
.share-input { font-size: 0.85rem; }

/* settings dialog */
dialog.dlg.wide { width: min(860px, calc(100vw - 32px)); overflow: hidden; }

/* head, tabs and footer stay put; only the rows scroll */
.settings { display: flex; flex-direction: column; max-height: calc(100vh - 32px); }
.settings-head, .dlg-tabs, .settings-foot { flex: none; }
.set-rows { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.set-rows > .set-row:last-child, .tab-pane > .set-row:last-child { border-bottom: 0; }
.tab-pane[hidden] { display: none; }

.settings-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px 4px; }
.settings-head h2 { margin: 0; font-size: 1.25rem; }
.dlg-tabs { display: flex; gap: 22px; margin-top: 8px; padding: 0 24px; border-bottom: 1px solid #ececec; }
.dlg-tab {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px;
  background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0;
  color: #666; font: inherit; font-size: 0.95rem;
}
button.dlg-tab { cursor: pointer; }
button.dlg-tab:hover { color: #222; }
.dlg-tab.active { color: #3457d1; background: #eef1fb; border-bottom-color: #3457d1; }

.set-row {
  display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 10px 24px;
  padding: 20px 24px; border-bottom: 1px solid #ececec;
}
.set-row h3 { margin: 0; padding-top: 2px; font-size: 1rem; }
.set-controls { min-width: 0; }
.set-controls > * + * { margin-top: 12px; }
.set-controls input[type=text], .set-controls input[type=email], .set-controls input[type=password], .set-controls input[type=date], .set-controls select { margin-top: 0; }
.set-controls input[type=date] { width: auto; min-width: 12em; }
.set-controls .field-label { margin: 0 0 6px; font-weight: 600; }
.set-controls .field-label-gap { margin-top: 18px; }
.set-controls .check { margin: 8px 0 0; }

/* "Mode" of a gallery (Selection | Presentation): two radio buttons drawn like the Grid / List switch */
.mode-toggle { display: inline-flex; gap: 3px; padding: 3px; background: #e6e6e6; border-radius: 8px; }
.mode-toggle label { margin: 0; cursor: pointer; }
.mode-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.mode-toggle span { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 6px; color: #555; font-size: 0.9rem; font-weight: 400; }
.mode-toggle label:hover span { color: #222; }
.mode-toggle input:checked + span { background: #fff; color: #222; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14); }
.mode-toggle input:focus-visible + span { outline: 2px solid #3457d1; outline-offset: 2px; }
/* the presentation page always offers the downloads: the "Allow downloads" switch is on, dimmed and locked (common.js sets the class with the mode) */
.is-presentation .downloads-switch { opacity: 0.4; cursor: default; }
/* two controls of a settings row side by side: the downloads switch and the link's expiry */
.set-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; }
.line-field { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 0.9rem; font-weight: 600; white-space: nowrap; }
.set-controls .line-field select { width: auto; }
/* marks a gallery in presentation mode, in the blue of the user button: in the bottom right corner of its tile
 * in the overview (a little smaller; next to its name in the list view), at the end of the path in the editor's admin bar */
.mode-tag {
  display: inline-block; padding: 2px 7px; border-radius: 5px; background: #3457d1; color: #fff;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; vertical-align: middle;
}
.folder-card-body { position: relative; }
.folder-card-body .mode-tag { position: absolute; right: 12px; bottom: 13px; padding: 2px 6px; font-size: 0.54rem; line-height: 1.5; }
/* in a row of low tiles the pill is on the line of the counts: they leave it its place and wrap instead of running under it */
.folder-card-body.has-mode .count { padding-right: 92px; }
/* in the list the pill follows the name, set off from it */
.folder-grid.is-list .folder-card-body .mode-tag { position: static; margin-left: 14px; }
.mode-line { display: flex; align-items: center; gap: 8px; margin: 0 0 22px; color: var(--text-dim); font-size: 0.85rem; }
/* the editor of a gallery in presentation mode: the pill at the end of the path in the admin bar, and a 5 px frame in its blue
 * around the content column */
.crumb-tag { flex: none; margin-left: 2px; }
.editor-col.is-presentation { box-shadow: inset 0 0 0 5px #3457d1; }
.message + .mode-line { margin-top: -10px; }

label.switch { position: relative; display: flex; align-items: center; gap: 12px; margin: 0; font-weight: 400; font-size: 1rem; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .slider { position: relative; flex-shrink: 0; width: 44px; height: 24px; border-radius: 24px; background: #d6d6d6; transition: background 0.15s; }
.switch .slider::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.15s;
}
.switch input:checked + .slider { background: var(--accent); }
.switch input:checked + .slider::after { transform: translateX(20px); }
.switch input:focus-visible + .slider { outline: 2px solid #3457d1; outline-offset: 2px; }

label.check { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 400; font-size: 0.95rem; cursor: pointer; }
label.check input { width: 18px; height: 18px; margin: 0; accent-color: #3a3a3a; }

.editor { border: 1px solid #d6d6d6; border-radius: 8px; overflow: hidden; background: #fff; }
.editor:focus-within { border-color: #99abe8; }
.editor-bar { display: flex; align-items: center; gap: 2px; padding: 8px 10px; border-bottom: 1px solid #e6e6e6; }
.editor-bar button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: #333; font-size: 1rem; cursor: pointer;
}
.editor-bar button:hover { background: #f0f0f0; }
.editor-bar button[aria-pressed=true] { background: #e6e6e6; color: #111; }
.editor-bar .icon { width: 18px; height: 18px; }
.editor-sep { width: 1px; height: 20px; margin: 0 6px; background: #dedede; }
.editor-area { min-height: 130px; max-height: 260px; overflow: auto; padding: 12px 14px; outline: none; }
.editor-area[hidden] { display: none; }

.settings-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px 18px; border-top: 1px solid #ececec; }

/* user dialog: logo, footer details, message next to the save button */
#account-form .set-rows { min-height: min(480px, calc(100vh - 220px)); }
.set-controls .hint { margin: 6px 0 0; font-size: 0.85rem; }
.pane-note { margin: 0; padding: 16px 24px 0; color: var(--text-dim); font-size: 0.9rem; }

/* help dialog (includes/help.php): tabs in one row that scrolls sideways when narrow,
 * a fixed height so switching tabs does not make the dialog jump */
.help-tabs { gap: 4px; overflow-x: auto; scrollbar-width: none; }
.help-tabs::-webkit-scrollbar { display: none; }
.help-tabs .dlg-tab { flex: none; white-space: nowrap; }
.help-dlg .set-rows { height: min(600px, calc(100vh - 150px)); }
.help-pane { padding: 4px 24px 26px; }
.help-pane h3 {
  margin: 24px 0 12px; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-dim);
}
.help-tips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
/* "Good to know" (<!-- cards -->): white cards, the symbol of each in a round tint of the accent */
.help-tips li { padding: 16px; border-radius: 10px; background: #fff; border: 1px solid #ececec; }
.help-tips .help-tip-icon {
  display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-bottom: 10px;
  border-radius: 50%; background: #fbf0de; color: #b87818;
}
.help-tip-icon .icon { width: 16px; height: 16px; }
.help-tips strong { display: block; margin-bottom: 4px; font-size: 0.95rem; }
.help-tips span { color: #555; font-size: 0.9rem; line-height: 1.5; }
/* shortcuts (<!-- keys -->): a tile per shortcut, the keys large on top, a few words below */
.help-keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.help-keys li {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 10px 13px;
  border: 1px solid #ececec; border-radius: 10px; text-align: center;
}
.help-keys li > span:last-child { color: #555; font-size: 0.82rem; line-height: 1.4; }
.help-key-combo { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 3px; color: #999; font-size: 0.8rem; }
.help-pane .help-key-combo kbd { min-width: 2.2em; padding: 4px 7px; font-size: 0.9rem; border-bottom-width: 3px; border-radius: 7px; }
.help-list { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 0 24px; margin: 0; }
.help-list dt, .help-list dd { padding: 10px 0; border-bottom: 1px solid #efefef; }
.help-list dt:last-of-type, .help-list dd:last-of-type { border-bottom: 0; }
.help-list dt { font-weight: 700; font-size: 0.92rem; }
.help-list dd { margin: 0; color: #444; font-size: 0.92rem; line-height: 1.55; }
.help-list dd.help-wide { grid-column: 1 / -1; }
.help-note { margin: 12px 0 0; color: var(--text-dim); font-size: 0.85rem; }
.help-pane kbd {
  display: inline-block; min-width: 1.7em; padding: 1px 6px;
  border: 1px solid #cfcfcf; border-bottom-width: 2px; border-radius: 5px;
  background: #fafafa; color: #222; font: inherit; font-size: 0.78rem; font-weight: 700;
  line-height: 1.5; text-align: center; white-space: nowrap;
}
.help-pane code { padding: 1px 5px; border-radius: 4px; background: #f0f0f0; font-size: 0.85em; }
.logo-current {
  display: flex; align-items: center; min-height: 68px; padding: 12px 16px;
  border: 1px dashed #cfcfcf; border-radius: 8px; background: #fafafa;
}
.logo-current img { display: block; max-width: 100%; max-height: 44px; object-fit: contain; }
.logo-current img[hidden] { display: none; }
.logo-none { color: var(--text-dim); font-size: 0.9rem; }
.phone-rows > * + * { margin-top: 8px; }
.phone-row { display: flex; align-items: center; gap: 8px; }
.phone-row input { margin-top: 0; }
.phone-row .ph-label { flex: 0 0 9em; width: 9em; }
.phone-row .ph-number { flex: 1 1 auto; min-width: 0; }
.icon-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: #666; cursor: pointer;
}
.icon-btn:hover { background: #f0f0f0; color: #222; }
.btn-ghost.small { padding: 7px 12px; font-size: 0.9rem; }
.phone-rows + .btn-ghost { margin-top: 10px; }
.account-msg { flex: 1 1 14em; margin: 0; font-size: 0.9rem; color: var(--danger); font-weight: 600; }
.account-msg[hidden] { display: none; }
.settings-foot .btn-primary { margin-left: auto; }

/* client gallery footer with the studio's contact details */
body.client { min-height: 100vh; display: flex; flex-direction: column; }
body.client .shell { flex: 1 0 auto; }
.site-footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 32px;
  padding: 22px 32px; background: #f2f2f2; border-top: 1px solid #e6e6e6;
  color: #666; font-size: 0.85rem;
}
.footer-legal strong { font-weight: 700; color: #333; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.site-footer a { color: #444; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* welcome message shown above the grid (admin preview and client gallery) */
.message { max-width: 60em; margin: 0 0 24px; }
.message > :first-child { margin-top: 0; }
.message > :last-child { margin-bottom: 0; }
.message p, .message ul, .message ol { margin: 0 0 8px; }
.message ul, .message ol { padding-left: 1.4em; }
.message a { color: #3457d1; }
.editor-area.message { max-width: none; margin: 0; }

/* group headings the client gallery inserts between groups of photos */
.group-title { grid-column: 1 / -1; margin: 6px 0 -8px; padding-bottom: 8px; font-size: 1.15rem; border-bottom: 1px solid #ececec; }
.group-title:first-child { margin-top: 0; }

/* shared flag dropdown (cards and lightbox) */
.flag-menu {
  position: fixed; z-index: 70; min-width: 160px; max-height: calc(100vh - 16px); overflow-y: auto; padding: 6px;
  background: #fff; border: 1px solid #dcdcdc; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}
.flag-menu[hidden] { display: none; }
.flag-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px;
  background: none; border: 0; border-radius: 6px; color: #222;
  font: inherit; font-size: 0.9rem; text-align: left; cursor: pointer;
}
.flag-menu button:hover { background: #f2f2f2; }
.flag-menu button.is-current { background: #f2f2f2; font-weight: 700; }
.flag-menu .icon { width: 18px; height: 18px; color: var(--c); fill: currentColor; }
.flag-menu button[data-flag=none] .icon { color: #777; fill: none; }

/* ---------- selections admin view ---------- */

/* the favorite badge and the flag, each on a line of its own */
.badges { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 4px 0 8px; }
.badge { font-size: 0.75rem; padding: 2px 8px; border-radius: 20px; background: #f1ede5; }
.badge.favorite { background: #fdecec; }
.badge.favorite .icon { width: 0.95em; height: 0.95em; margin-top: -2px; color: #d64545; fill: currentColor; }
.badge.flag { background: color-mix(in srgb, var(--flag-color) 18%, white); border: 1px solid var(--flag-color); color: var(--flag-color); }
.badge.flag .icon { width: 1.1em; height: 1.1em; margin-top: -2px; vertical-align: middle; fill: currentColor; }
.badge.flag .flag-name:not(.sr-only) { margin-left: 4px; }
.comment-list { list-style: none; padding: 0; margin: 0; font-size: 0.85rem; }
.comment-list li { padding: 6px 0; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.comment-list li span { flex: 1 1 12em; min-width: 0; overflow-wrap: anywhere; }
.comment-list small { color: var(--text-dim); }

/* ---------- lightbox ---------- */

.lightbox {
  position: fixed; inset: 0; background: #0a0908;
  display: flex; align-items: stretch; z-index: 50;
}
.lightbox.hidden { display: none; }
.lightbox-stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 64px 20px 20px; min-width: 0; }
.lightbox-img { max-width: 100%; max-height: calc(100vh - 100px); object-fit: contain; }
.lightbox-video { max-width: 100%; max-height: calc(100vh - 100px); background: #000; }
.lightbox-noprev { max-width: 26em; text-align: center; color: #cfc8ba; }
.lightbox-noprev strong { display: block; margin-bottom: 8px; color: #fff; overflow-wrap: anywhere; }
.lightbox-prev, .lightbox-next {
  align-self: center; padding: 0 16px;
  background: none; border: none; color: #fff; font-size: 2rem; cursor: pointer; opacity: 0.8;
}
.lightbox-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; justify-content: flex-end; align-items: center; gap: 4px;
  padding: 10px 12px; pointer-events: none;
}
.lb-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: #fff; font-size: 1.8rem; line-height: 1;
  text-decoration: none; cursor: pointer; pointer-events: auto;
}
.lb-icon:hover { background: rgba(255, 255, 255, 0.14); }
.lb-icon .icon { width: 22px; height: 22px; }
#lightbox-fav.active { color: #ff6b6b; }
#lightbox-fav.active .icon { fill: currentColor; }
/* a set flag is drawn in its colour with a light outline, so a black flag still shows on the dark background */
#lightbox-flag.is-on .icon { fill: var(--c); stroke: #fff; }
/* the black flag ("Final") would look like no flag there: it is filled white */
#lightbox-flag.is-on[data-flag=black] .icon { fill: #fff; }
.lightbox-panel {
  width: 300px; flex-shrink: 0; background: #17140f; color: #eee; color-scheme: dark;
  padding: 64px 20px 20px; overflow-y: auto;
  display: flex; flex-direction: column;
}
/* the comment list takes the free height, so the input fields sit at the bottom of the panel */
.lightbox-panel .comments { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.comments #lightbox-comments { flex: 1 1 auto; min-height: 0; font-size: 0.85rem; margin-bottom: 10px; overflow-x: hidden; overflow-y: auto; }
.comments .comment-item { padding: 6px 0; border-top: 1px solid #332f27; overflow-wrap: anywhere; }
/* admin only: the comment and, to its right, a small x that deletes it */
.comments .comment-item:has(.comment-delete) { display: flex; align-items: flex-start; gap: 8px; }
.comments .comment-body { flex: 1; min-width: 0; }
.comments .comment-delete {
  flex: none; margin: -2px -4px 0 0; padding: 0 5px; border: 0; border-radius: 4px; background: none;
  color: #a39a89; font-size: 1.25rem; line-height: 1.3; cursor: pointer;
}
.comments .comment-delete:hover, .comments .comment-delete:focus-visible { color: #fff; background: #3b362d; }
.comments .comment-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-bottom: 2px; }
.comments .comment-meta strong { color: #fff; font-weight: 600; }
.comments .comment-item small { color: #a39a89; }
#comment-name, #comment-text { background: #2a2620; color: #eee; border-color: #443f36; }
#comment-name { margin: 0 0 8px; }
#comment-text { min-height: 60px; }
#comment-form button { margin-top: 8px; width: 100%; }

@media (max-width: 900px) {
  .select-bar { left: 50%; }
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; height: auto; border-right: 0; border-bottom: 1px solid #e6e6e6; }
  .content { padding: 20px 16px 50px; }
  .content.flush { padding: 0 0 50px; }
  .content-inner { padding: 20px 16px 0; }
  .site-footer { padding: 20px 16px; }
  .drop-overlay { left: 0; }
  .topbar { padding: 0 14px; }
  .topbar-right a { display: none; }

  /* client gallery: the drawer leaves the grip in view on a phone */
  body.client { --drawer-w: min(290px, calc(100vw - 44px)); }
}

@media (max-width: 760px) {
  .lightbox { flex-direction: column; }
  .lightbox-panel { width: auto; max-height: 42vh; padding-top: 20px; }
  .lightbox-stage { padding: 56px 10px 10px; min-height: 0; }
  .lightbox-img, .lightbox-video { max-height: 100%; }
  .lightbox-prev, .lightbox-next {
    position: absolute; top: 25%; z-index: 2;
    width: 40px; height: 40px; padding: 0; border-radius: 50%;
    background: rgba(0,0,0,0.45); line-height: 1;
  }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
  .card-grid.is-list .card-frame { width: 80px; height: 80px; }
  /* phones and small windows keep the default sizes; the back button of a set page stays */
  .size-bar:not(.has-back) { display: none; }
  .size-bar .size-control { display: none; }
  /* list view: on a narrow screen the comments go below the name again */
  .card-grid.is-list .card-info { grid-template-columns: minmax(0, 1fr); }
  .card-info .comment-list li:first-child { padding-top: 6px; border-top: 1px solid var(--border); }
  .select-bar { left: 12px; right: 12px; bottom: 12px; max-width: none; transform: none; flex-wrap: wrap; justify-content: space-around; padding: 8px; }
  .sel-count { flex: 1 0 100%; margin: 2px 0 2px 8px; }
  .sel-btn span { display: none; }
  .sel-sep { display: none; }
}

@media (max-width: 700px) {
  .set-row { grid-template-columns: minmax(0, 1fr); padding: 16px 18px; }
  .help-pane { padding: 0 18px 22px; }
  .help-tips { grid-template-columns: minmax(0, 1fr); }
  .help-list { grid-template-columns: minmax(0, 1fr); }
  .help-list dt { padding-bottom: 2px; border-bottom: 0; }
  .help-list dd { padding-top: 0; }
  .phone-row .ph-label { flex-basis: 6.5em; width: 6.5em; }
  .settings-head, .settings-foot { padding-left: 18px; padding-right: 18px; }
  .dlg-tabs { padding: 0 18px; }
}

@media (max-width: 480px) {
  .folder-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid { grid-template-columns: repeat(2, 1fr); gap: 18px 10px; }
}

/* ---------- client gallery: presentation mode ---------- */

/* The final selection on one plain page (presentation.php): the header image over the whole
 * window, then the photos (the sets under their own headings) and the contact details. */
body.presentation .present { flex: 1 0 auto; }
.hero.hero-full { min-height: calc(100vh - 56px); min-height: calc(100svh - 56px); }
/* The grip at the foot of the header image, the one of the filter drawer (.side-handle) lying on its side,
 * with just an arrow: a tab of the page below that reaches up into the picture and leads down to the photos. It rises a
 * little under the pointer. On a first visit the page peeks up by --peek-w for a moment, the grip
 * with it (body.present-peek, present.js), as the drawer does in the selection gallery. */
.hero-tab {
  position: absolute; left: 50%; bottom: 0; z-index: 2; margin-left: -44px;
  display: flex; align-items: center; justify-content: center;
  width: 88px; height: 30px; background: var(--bg); color: #444;
  border-radius: 12px 12px 0 0; box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12);
  transition: height 0.2s ease, color 0.15s;
}
.hero-tab:hover, .hero-tab:focus-visible { height: 38px; color: #111; }
.hero-tab .icon { width: 18px; height: 18px; }
.hero-tab-arrow { display: inline-flex; transform: rotate(90deg); }
.present { transition: transform 0.4s ease; }
body.present-peek .present { transform: translateY(calc(-1 * var(--peek-w))); }
/* the top bar stays in place, so a jump to the photos stops below it */
.present-body { max-width: 1560px; margin: 0 auto; padding: 44px 32px 84px; scroll-margin-top: 56px; }
/* "Download all files (N)", in the middle above the photos: the shape of the other buttons (.btn-primary),
 * as an outline in the blue of the user button that fills on hover */
.present-bar { display: flex; justify-content: center; margin-bottom: 44px; }
.present-download {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border: 1px solid #3457d1; border-radius: 8px; background: transparent; color: #3457d1;
  font-weight: 500; text-decoration: none; transition: background 0.15s, color 0.15s;
}
.present-download:hover { background: #3457d1; color: #fff; }
.present-download:focus-visible { outline: 2px solid #3457d1; outline-offset: 3px; }
.present-section + .present-section { margin-top: 60px; }
.present-title { margin: 0 0 24px; padding-bottom: 10px; border-bottom: 1px solid #ececec; font-size: 1.15rem; }
/* a group of the gallery's "Group By" (file type, upload date): a quiet label over its photos */
.present-group { margin: 0 0 16px; color: var(--text-dim); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.present-grid + .present-group { margin-top: 44px; }
/* The photos stand free in their own proportions, without the frame of the selection gallery, three in a
 * row whatever their shape (two in a narrower window, one on a phone). Each stands in the middle of its
 * column and of its row: a wide one as wide as the column, an upright or square one three quarters of it. */
.present-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: center; }
.present-card { width: 100%; justify-self: center; }
.present-card.is-portrait { width: 75%; }
/* the photos come up softly, each once it comes into view (present.js; never without the script or with "reduce motion") */
body.present-reveal .present-card {
  opacity: 0; transform: translateY(32px);
  transition: opacity 1s ease-out, transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
body.present-reveal .present-card.is-in { opacity: 1; transform: none; }
.present-grid .card-frame { background: transparent; border: 0; border-radius: 0; cursor: zoom-in; }
/* the length of a video moves to the left, the download button has the right corner */
.present-grid .card-tags { left: 8px; right: auto; }
/* the original of one photo: a round button at its bottom right, on hover (always on touch screens) */
.card-download {
  position: absolute; right: 10px; bottom: 10px; display: none; align-items: center; justify-content: center;
  width: 34px; height: 34px; background: #fff; border: 1px solid #d9d9d9; border-radius: 50%; color: #333;
}
.card-download .icon { width: 17px; height: 17px; }
.card-download:hover { background: #f0f0f0; }
.present-card:hover .card-download, .present-card:focus-within .card-download { display: inline-flex; }
@media (hover: none) { .card-download { display: inline-flex; } }
/* the studio's contact details close the page */
.present-contact { padding: 60px 32px 44px; background: #f2f2f2; border-top: 1px solid #e6e6e6; text-align: center; }
.present-contact p { margin: 0; }
.contact-label { color: var(--text-dim); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.present-contact .contact-name { margin-top: 12px; font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; }
.contact-lines { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 30px; margin-top: 14px; }
.contact-lines a { color: var(--text); text-decoration: none; }
.contact-lines a:hover { text-decoration: underline; }
.contact-lines a span { color: var(--text-dim); }
.present-contact .contact-legal { margin-top: 34px; color: var(--text-dim); font-size: 0.8rem; }
@media (max-width: 900px) {
  .present-body { padding: 28px 16px 60px; }
  .present-contact { padding: 44px 16px 34px; }
}
@media (max-width: 1000px) {
  .present-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .present-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* ---------- client gallery: light / dark switch ---------- */

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--text); cursor: pointer;
}
.theme-toggle:hover { background: rgba(0, 0, 0, 0.07); }
.theme-toggle .icon { width: 20px; height: 20px; }
.theme-toggle .ico-sun { display: none; }
html[data-theme="dark"] .theme-toggle .ico-moon { display: none; }
html[data-theme="dark"] .theme-toggle .ico-sun { display: inline-flex; }

/* The dark theme only exists on the client pages (the attribute is set by the
 * script in their head). It overrides the light colours used there; the
 * lightbox is dark in both themes. */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] body.client {
  --bg: #141414; --panel: #1e1e1e; --border: #333333;
  --text: #ececec; --text-dim: #9a9a9a; --link: #e6e6e6;
}
html[data-theme="dark"] body.client .theme-toggle:hover { background: rgba(255, 255, 255, 0.12); }
/* the logo's dark version (logo_dark_path(): its dark grey and black parts made light, the colours kept); an SVG
 * logo has none and becomes a white silhouette */
.brand-logo-dark { display: none; }
html[data-theme="dark"] body.client .brand-logo.has-dark { display: none; }
html[data-theme="dark"] body.client .brand-logo-dark { display: block; }
html[data-theme="dark"] body.client .brand-logo:not(.has-dark):not(.brand-logo-dark) { filter: brightness(0) invert(1); }

/* header, sidebar, footer */
html[data-theme="dark"] body.client .topbar.light { background: #141414; border-bottom-color: #2e2e2e; }
html[data-theme="dark"] body.client .sidebar { background: #1b1b1b; border-color: #2e2e2e; }
html[data-theme="dark"] body.client .side-download { background: #1b1b1b; }
html[data-theme="dark"] body.client .side-handle { background: #1b1b1b; border-color: #2e2e2e; color: #bbb; box-shadow: 2px 0 12px rgba(0, 0, 0, 0.5); }
html[data-theme="dark"] body.client .side-handle:hover { background: #262626; color: #fff; }
html[data-theme="dark"] body.client .side-pin { color: #999; }
html[data-theme="dark"] body.client .side-pin:hover { background: #262626; color: #fff; }
html[data-theme="dark"].side-pinned body.client .side-pin { background: #303030; color: #fff; }
html[data-theme="dark"] body.client .site-footer { background: #1b1b1b; border-top-color: #2e2e2e; color: #999; }
html[data-theme="dark"] body.client .footer-legal strong { color: #ddd; }
html[data-theme="dark"] body.client .site-footer a { color: #ccc; }

/* sidebar controls */
html[data-theme="dark"] body.client .tool { background: #2a2a2a; color: var(--text); }
html[data-theme="dark"] body.client .tool:hover { background: #343434; }
html[data-theme="dark"] body.client .search { background: #242424; border-color: #3a3a3a; color: #aaa; }
html[data-theme="dark"] body.client input[type=text],
html[data-theme="dark"] body.client input[type=password],
html[data-theme="dark"] body.client select,
html[data-theme="dark"] body.client textarea { background: #242424; border-color: #3a3a3a; color: var(--text); }
html[data-theme="dark"] body.client .filter-icons button,
html[data-theme="dark"] body.client #sort-dir,
html[data-theme="dark"] body.client #group-dir { color: #bbb; }
html[data-theme="dark"] body.client .filter-icons button.colored { color: var(--c); }
html[data-theme="dark"] body.client .filter-icons button[data-filter=fav].on { color: #d64545; }
html[data-theme="dark"] body.client .filter-icons button[data-flag=black] { color: #e6e6e6; }
html[data-theme="dark"] body.client .filter-icons button:hover { background: #2e2e2e; }
html[data-theme="dark"] body.client .filter-icons button.on,
html[data-theme="dark"] body.client #sort-dir.on,
html[data-theme="dark"] body.client #group-dir.on { background: #333; border-color: #5a5a5a; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] body.client #sort-dir,
html[data-theme="dark"] body.client #group-dir { background: #2a2a2a; }
html[data-theme="dark"] body.client #sort-dir:hover,
html[data-theme="dark"] body.client #group-dir:hover { background: #343434; }
html[data-theme="dark"] body.client .view-toggle { background: #2a2a2a; }
html[data-theme="dark"] body.client .view-toggle button { color: #aaa; }
html[data-theme="dark"] body.client .view-toggle button:hover { color: #fff; }
html[data-theme="dark"] body.client .view-toggle button.on { background: #444; color: #fff; box-shadow: none; }
html[data-theme="dark"] body.client .set-list a { color: var(--text); }
html[data-theme="dark"] body.client .set-list a:hover { background: #2a2a2a; }
html[data-theme="dark"] body.client #empty-note .icon { color: #555; }
html[data-theme="dark"] body.client #empty-note strong { color: #ddd; }
html[data-theme="dark"] body.client .back-btn { color: #999; }
html[data-theme="dark"] body.client .back-btn:hover { background: #262626; color: #fff; }
html[data-theme="dark"] body.client .switch .slider { background: #444; }
html[data-theme="dark"] body.client .switch input:checked + .slider { background: var(--accent); }
html[data-theme="dark"] body.client .btn-ghost { border-color: #444; color: var(--text); }
html[data-theme="dark"] body.client .btn-ghost:hover { background: #2a2a2a; }

/* photos, sets, list rows */
html[data-theme="dark"] body.client .card-frame { background: #1e1e1e; border-color: #333; }
html[data-theme="dark"] body.client .card-placeholder { background: #262626; }
html[data-theme="dark"] body.client .pill { background: #222; border-color: #3a3a3a; color: #ddd; }
html[data-theme="dark"] body.client .tag { background: #222; border-color: #3a3a3a; color: #ddd; }
html[data-theme="dark"] body.client .pill-btn.pill-fav,
html[data-theme="dark"] body.client .pill-btn.pill-flag { color: #999; }
html[data-theme="dark"] body.client .pill-btn.pill-flag:hover { color: #fff; }
html[data-theme="dark"] body.client .pill-btn.pill-fav:hover,
html[data-theme="dark"] body.client .pill-btn.pill-fav.is-on { color: #ff6b6b; }
html[data-theme="dark"] body.client .pill-btn.pill-flag.is-on { color: var(--c); }
html[data-theme="dark"] body.client .card[data-flag=black] .pill-btn.pill-flag.is-on,
html[data-theme="dark"] body.client .set-card[data-flag=black] .pill-btn.pill-flag.is-on { color: #f2f2f2; }
html[data-theme="dark"] body.client .card-name { color: #9a9a9a; }
html[data-theme="dark"] body.client .set-card .card-frame { background: #222; color: #888; }
html[data-theme="dark"] body.client .set-card:hover .card-frame { background: #2a2a2a; border-color: #444; color: #ccc; }
html[data-theme="dark"] body.client .card-grid.is-list .set-card:hover { border-color: #555; }
html[data-theme="dark"] body.client .group-title { border-bottom-color: #333; }
html[data-theme="dark"] body.client .badge { background: #2a2a2a; color: var(--text); }
html[data-theme="dark"] body.client .badge.favorite { background: #3d2222; }
html[data-theme="dark"] body.client .badge.favorite .icon { color: #ff6b6b; }
html[data-theme="dark"] body.client .badge.flag {
  background: color-mix(in srgb, var(--flag-color) 26%, #1b1b1b);
  border-color: color-mix(in srgb, var(--flag-color) 55%, #888);
  color: var(--flag-color);
}
html[data-theme="dark"] body.client .card[data-flag=black] .badge.flag { color: #f2f2f2; }
html[data-theme="dark"] body.client .card-info .badge.is-off { background: transparent; border-color: #444; color: #999; }
html[data-theme="dark"] body.client .card-info .badge.favorite.is-off:hover { color: #ff6b6b; border-color: #6a3a3a; }
html[data-theme="dark"] body.client .card-info .badge.flag.is-off:hover { color: #fff; border-color: #777; }
html[data-theme="dark"] body.client .message a { color: #3457d1; }

/* dialogs and the flag menu */
html[data-theme="dark"] body.client dialog.dlg { background: #1e1e1e; color: var(--text); }
html[data-theme="dark"] body.client dialog.dlg::backdrop { background: rgba(0, 0, 0, 0.65); }
html[data-theme="dark"] body.client .dlg-x { color: #aaa; }
html[data-theme="dark"] body.client .dlg-x:hover { background: #2e2e2e; }
html[data-theme="dark"] body.client label.dl-option:hover { background: #262626; }
html[data-theme="dark"] body.client label.dl-option:has(input:checked) { border-color: #5a5a5a; background: #2a2a2a; }
html[data-theme="dark"] body.client label.dl-option.is-disabled { color: #666; }
html[data-theme="dark"] body.client label.dl-option.is-disabled:hover { background: transparent; }
html[data-theme="dark"] body.client label.check input,
html[data-theme="dark"] body.client .dl-option input { accent-color: var(--accent); }
html[data-theme="dark"] body.client .flag-menu { background: #222; border-color: #3a3a3a; }
html[data-theme="dark"] body.client .flag-menu button { color: #eee; }
html[data-theme="dark"] body.client .flag-menu button:hover,
html[data-theme="dark"] body.client .flag-menu button.is-current { background: #2e2e2e; }
html[data-theme="dark"] body.client .flag-menu button[data-flag=black] .icon { color: #f2f2f2; }

/* help dialog in the dark theme */
html[data-theme="dark"] body.client .dlg-tabs,
html[data-theme="dark"] body.client .help-list dt,
html[data-theme="dark"] body.client .help-list dd { border-color: #2e2e2e; }
html[data-theme="dark"] body.client .dlg-tab { color: #aaa; }
html[data-theme="dark"] body.client button.dlg-tab:hover { color: #fff; }
html[data-theme="dark"] body.client .dlg-tab.active { color: #9db1ff; background: rgba(52, 87, 209, 0.2); border-bottom-color: #7f98f5; }
html[data-theme="dark"] body.client .help-tips li { background: transparent; border-color: #2e2e2e; }
html[data-theme="dark"] body.client .help-tips .help-tip-icon { background: rgba(233, 162, 59, 0.16); color: var(--accent); }
html[data-theme="dark"] body.client .help-keys li { border-color: #2e2e2e; }
html[data-theme="dark"] body.client .help-keys li > span:last-child,
html[data-theme="dark"] body.client .help-tips span,
html[data-theme="dark"] body.client .help-list dd { color: #c8c8c8; }
html[data-theme="dark"] body.client .help-pane kbd { background: #2a2a2a; border-color: #4a4a4a; color: #eee; }
html[data-theme="dark"] body.client .help-pane code { background: #2a2a2a; }

/* presentation mode in the dark theme */
html[data-theme="dark"] body.client .present-title { border-bottom-color: #333; }
html[data-theme="dark"] body.client .present-grid .card-frame { background: transparent; }
html[data-theme="dark"] body.client .present-contact { background: #1b1b1b; border-top-color: #2e2e2e; }
html[data-theme="dark"] body.client .present-download { border-color: #3457d1; color: #3457d1; }
html[data-theme="dark"] body.client .hero-tab { color: #bbb; box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.5); }
html[data-theme="dark"] body.client .hero-tab:hover { color: #fff; }
html[data-theme="dark"] body.client .present-download:hover { background: #3457d1; border-color: #3457d1; color: #fff; }