/* === Theme: warm golden + good typography === */
:root {
  --gold: #996600;
  --text-blue: #3333cc;
  --navy: navy;
  --bg-gold: #edd286;
  --bg-content: #fcfbf4;
  --border-gold: #edd286;
}

/* Override Pico defaults */
html, body { background-color: var(--bg-gold) !important; color: #333 !important; }
main.container { background: var(--bg-content); padding: 0; border-left: 1rem solid var(--bg-gold); border-right: 1rem solid var(--bg-gold); }

/* Typography — our v1 spacing + original colors */
article { text-align: justify; hyphens: auto; line-height: 1.7; color: var(--text-blue); font-family: sans-serif; padding: 2rem 2rem 0; }
article p { margin-bottom: 1.2em; color: var(--text-blue); }
article p:first-child { }
article h1 { text-align: center; color: var(--gold); font-size: 2rem; margin: 1.5rem 0; text-indent: 0; }
article h2 { text-align: left; color: var(--gold); font-size: 1.5rem; margin: 1.5rem 0 0.8rem; text-indent: 0; }
article h3 { text-align: left; color: var(--navy); font-size: 1.2rem; text-indent: 0; }
article h1 strong, article h1 b, article h2 strong, article h2 b, article h3 strong, article h3 b { color: inherit; }
article em, article i { color: inherit; }
article a { color: var(--navy); }
article li { color: var(--text-blue); }
/* Content tables: Pico colors th/td with its own --pico-color (grey), which
   overrides the inherited article blue. Force the content text color back. */
article table, article thead, article tbody, article tr, article th, article td { color: var(--text-blue); }
article th { color: var(--text-blue); }
/* A wide table must not spill past the article's padding onto main.container's
   golden side border. Cap it to the content width and scroll horizontally when
   its cells need more room (matters on narrow/mobile screens). */
article table { display: block; width: 100%; max-width: 100%; overflow-x: auto; }
/* Content lists — native markers with a hanging indent (same as the email):
   marker sits OUTSIDE, padding-left gives the indent, so wrapped lines align
   under the text (not under the marker). Pico forces list-style on the LI, so
   restore it explicitly. justify is inherited from `article`. */
article ul { list-style-type: disc; margin: 0; padding-left: 1.5rem; }
article ol { list-style-type: decimal; margin: 0; padding-left: 1.5rem; }
article ul > li { list-style-type: disc; }
article ol > li { list-style-type: decimal; }
article ul > li, article ol > li { color: var(--text-blue); padding-left: 0.25rem; }
article img { display: block; margin: 1.5rem auto; max-width: 100%; border-radius: 4px; }
/* Content horizontal rule (markdown '---'): a thin flat golden line, replacing
   the browser's default 3D groove. */
article hr { border: 0; border-top: 2px solid var(--gold); margin: 1.5rem 0; }
/* Lead paragraph: apply in markdown with '{: .lead}' after the block — golden,
   centered, 150% size. */
article .lead { color: var(--gold); text-align: center; font-size: 1.5em; }

/* Admin-only control bar on the front page: "generate -st page" button + its
   result link. Sits above the article, inside the content gutter. */
.gen-start-bar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1rem 2rem 0; }
.gen-start-bar button { width: auto; margin: 0; }
.gen-start-bar a { color: var(--navy); }

/* Site header */
.site-header { text-align: center; padding: 0; margin: 0; background: var(--bg-content); }
.site-banner { display: block; width: 100%; height: auto; margin: 0; padding: 0; }
.site-header a { color: #191970 !important; font-size: 1.5rem; font-weight: bold; text-decoration: none; font-family: sans-serif; display: block; padding: 0.8rem; }
.site-header a:hover { color: var(--navy) !important; }

/* Nav */
nav.sticky-header { position: sticky; top: 0; z-index: 1000; background: var(--bg-content); padding: 0.4rem 1rem !important; border-bottom: 1px solid var(--border-gold); }
nav.sticky-header > ul { display: flex !important; align-items: center; gap: 1.2rem; margin: 0 !important; padding: 0 !important; list-style: none; flex-wrap: wrap; width: 100%; }
nav.sticky-header > ul > li { position: relative; margin: 0 !important; padding: 0 !important; }
nav.sticky-header > ul > li.push-right { margin-left: auto !important; }
nav.sticky-header a, nav.sticky-header a:visited { color: var(--navy) !important; text-decoration: none; }
nav.sticky-header a:hover { color: var(--gold) !important; }
nav.sticky-header a.active { color: var(--gold) !important; font-weight: bold; }
/* Signed-in admin's email in the nav: muted, non-interactive, sits to the right
   just before Logout. */
nav.sticky-header .admin-who { color: #666; font-size: 0.85rem; }

/* Recent-login history: its own /admin/logins section. The table sits in a
   bordered, scrollable frame; sort + pagination are client-side
   (admin-logins.js). */
.login-history-wrap { margin: 1rem; color: #666; }
.login-frame { margin: 1rem; border: 1px solid var(--border-gold); border-radius: 8px; max-height: 60vh; overflow: auto; overscroll-behavior: contain; }
.login-history { width: 100%; margin: 0; border-collapse: collapse; font-size: 0.9rem; }
.login-history th, .login-history td { padding: 0.35rem 1rem; text-align: left; border-bottom: 1px solid #eee; white-space: nowrap; }
.login-history th { color: #666; font-weight: 600; position: sticky; top: 0; background: var(--bg-content); cursor: pointer; user-select: none; }
.login-history tbody tr:last-child td { border-bottom: none; }
.logins-pager { margin: 1rem 1rem 0; }

/* Page fills the viewport so the footer sits at the very bottom */
#page { display: flex; flex-direction: column; min-height: 100vh; }
#page article { flex: 1 0 auto; }

/* Footer */
footer.sticky-footer { flex-shrink: 0; background: var(--bg-content); padding: 0.5rem 1rem; border-top: 1px solid var(--border-gold); text-align: center; }
footer.sticky-footer p { color: #666; margin: 0; }

/* Sidebar */
.sidebar-toggle { font-size: 1.3rem; cursor: pointer; text-decoration: none; }
#sidebar-container { display: none; }
#sidebar-container.open { display: block; }
.sidebar-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 1100; }
.sidebar { position: fixed; top: 0; left: 0; width: 280px; height: 100%; background: var(--bg-content); z-index: 1200; overflow-y: auto; padding: 1rem 0; transform: translateX(-100%); transition: transform 0.25s ease; box-shadow: 4px 0 15px rgba(0,0,0,0.2); }
#sidebar-container.open .sidebar { transform: translateX(0); }
.sidebar-close { display: block; text-align: right; padding: 0.5rem 1rem; font-size: 1.5rem; text-decoration: none; cursor: pointer; color: var(--gold); }
.sidebar-link { display: block; padding: 0.35rem 1.5rem; text-decoration: none; color: var(--navy) !important; }
.sidebar-link:hover { background: var(--border-gold); }
.sidebar-link.active { color: var(--gold) !important; font-weight: bold; }
.sidebar-section { padding: 0.7rem 1.5rem; font-weight: bold; color: var(--gold); border-bottom: 1px solid var(--border-gold); margin-top: 0.5rem; }
.sidebar-divider { border-top: 2px solid var(--border-gold); margin: 0.5rem 0; }
/* Sidebar rendered from markdown: strip list chrome so <ul><li><a> looks like
   the old flat link list, and style the '---' divider (<hr>). */
.sidebar ul { list-style: none; margin: 0; padding: 0; }
.sidebar li { margin: 0; }
.sidebar hr { border: 0; border-top: 2px solid var(--border-gold); margin: 0.5rem 0; }

/* Admin page list — filterable, sortable table */
/* main.container has padding:0, so admin page chrome needs its own gutter. */
main.container > h2, main.container > .lang-filters, main.container > .admin-filter, main.container > .admin-pages, main.container > .pages-table-wrap { margin-left: 1rem; margin-right: 1rem; }
.lang-filters { display: flex; gap: 0.5rem; margin: 0.5rem 0; }
.lang-filters .lang-filter { padding: 0.2rem 0.9rem; background: var(--bg-content); color: var(--navy); border: 1px solid var(--border-gold); border-radius: 4px; cursor: pointer; width: auto; margin: 0; font-size: 0.9rem; }
.lang-filters .lang-filter:hover { background: var(--border-gold); }
.lang-filters .lang-filter.active { background: var(--gold); color: #fff; border-color: var(--gold); }
.admin-filter { max-width: 320px; margin: 0.5rem 0 1rem; }
/* Filter + pagination on one row: filter left, pager (prev/next, page info,
   page-size select) right. */
/* One knob for the whole toolbar's height: --ctl-h. It sets the height of the
   two group containers (search form, pager) and the two standalone buttons;
   align-items:stretch inside the groups then propagates that height to every
   control (input, buttons, select) automatically. Change --ctl-h in this one
   place and the entire row resizes; nothing else carries a vertical size.
   Controls keep only horizontal padding — vertical centering of their text is
   native (buttons/inputs center their own label). */
/* One knob for the whole toolbar's height: --ctl-h. It sets the height of the
   two group containers (search form, pager) and the two standalone buttons;
   every control inside is height:100% + flex-centered, so all of them fill the
   row and center their label/icon vertically. Change --ctl-h in this one place
   and the entire row resizes, staying vertically centered throughout. */
.pages-toolbar { --ctl-h: 2.5rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1rem; margin: 0.5rem 1rem 1rem; }
.pages-toolbar .pages-search-form,
.pages-toolbar .pages-pager,
.pages-toolbar #pages-reindex,
.pages-toolbar #pages-create-btn { height: var(--ctl-h); }
.pages-toolbar .admin-filter { margin: 0; }
.pages-pager { display: flex; align-items: center; gap: 0.5rem; }
.pages-pager button,
.pages-pager .pages-size { box-sizing: border-box; margin: 0; height: 100%; line-height: 1; }
.pages-pager button { display: inline-flex; align-items: center; justify-content: center; width: auto; padding-left: 0.6rem; padding-right: 0.6rem; }
.pages-page-info { color: #666; font-size: 0.9rem; white-space: nowrap; min-width: 6.5rem; text-align: center; }
.pages-size { width: auto; padding-left: 0.5rem; padding-right: 1.6rem; }

/* Search form (🔍 button + input) and the reindex button sit in the toolbar's
   flex row. Pico defaults buttons/inputs to width:100%, which made the 🔍
   button balloon above the field — force auto width; each control fills the
   row height (100%) and centers its content. */
.pages-search-form { display: flex; align-items: center; gap: 0.4rem; margin: 0; }
.pages-search-form .pages-search-btn,
.pages-search-form .admin-filter,
#pages-reindex {
  box-sizing: border-box; margin: 0; width: auto; height: 100%; line-height: 1;
}
.pages-search-form .pages-search-btn,
.pages-search-form .pages-help-btn { display: inline-flex; align-items: center; justify-content: center; padding-left: 0.7rem; padding-right: 0.7rem; }
.pages-search-form .pages-help-btn {
  box-sizing: border-box; margin: 0; width: auto; height: 100%; line-height: 1;
  background: var(--bg-content); color: var(--navy); border: 1px solid var(--border-gold);
}
.pages-search-form .admin-filter { min-width: 18rem; padding-left: 0.6rem; padding-right: 0.6rem; }
#pages-reindex { display: inline-flex; align-items: center; justify-content: center; padding-left: 0.8rem; padding-right: 0.8rem; }
#pages-create-btn { display: inline-flex; align-items: center; justify-content: center; }

/* Search button (🔍): blends into the page — no fill or border, just the icon,
   a plain affordance next to the field. */
.pages-search-form .pages-search-btn {
  background: transparent; border: 1px solid transparent; color: var(--navy);
}
.pages-search-form .pages-search-btn:hover { background: var(--bg-content); }

/* Reindex button (🗘): the accented action — filled with the theme gold so it
   stands out as the one heavier operation in the toolbar. */
#pages-reindex {
  background: var(--gold); border: 1px solid var(--gold); color: #fff;
}
#pages-reindex:hover:not(:disabled) { filter: brightness(0.93); }
#pages-reindex:disabled { opacity: 0.6; }

/* Create button — height comes from --ctl-h (set above), content flex-centered.
   Clicking it prompts for a slug (admin-pages.js), no inline form. */
#pages-create-btn {
  box-sizing: border-box; margin: 0; width: auto;
  line-height: 1; padding-left: 0.8rem; padding-right: 0.8rem;
}

/* Search help popover (native popover API). Non-modal, no backdrop dimming —
   floats near the top of the page, lightly translucent, click-outside/Esc to
   close. Positioned centered horizontally, just below the toolbar. */
.search-help-pop {
  max-width: 460px; margin: 0; inset: auto; position: fixed;
  top: 5rem; left: 50%; transform: translateX(-50%);
  /* Cap to the viewport (starts at top:5rem, leave ~2rem at the bottom) and
     scroll inside when the help outgrows it — the content is now several
     tables tall. overscroll-contain keeps a scroll at the popover's edge from
     bubbling to the page behind it. */
  max-height: calc(100vh - 7rem); overflow-y: auto; overscroll-behavior: contain;
  background: rgba(255, 255, 255, 0.97); border: 1px solid var(--border-gold);
  border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,0.18);
  padding: 1rem 1.4rem; color: var(--navy);
}
.search-help-pop::backdrop { background: transparent; }   /* no page dimming */
.search-help-pop h3 { margin-top: 0; margin-bottom: 0.4rem; }
.search-help-pop p { margin: 0.4rem 0; }
.search-help-pop table { margin: 0.5rem 0; border-collapse: collapse; width: 100%; }
.search-help-pop td { padding: 0.2rem 0.5rem 0.2rem 0; vertical-align: top; border: none; }
.search-help-pop td:first-child { white-space: nowrap; }
.search-help-pop code {
  display: inline-block; background: var(--gold); color: #fff; font-weight: 600;
  padding: 0.1rem 0.5rem; border-radius: 4px;
}

/* Scroll a too-wide table inside its gutter instead of spilling over the
   container edge (matters on narrow/mobile screens). */
.pages-table-wrap { position: relative; overflow-x: auto; }

/* Top progress bar (indeterminate activity indicator). Fixed sliver at the top
   of the viewport; hidden until admin-pages.js adds .active during a
   search/reindex request. The fill sweeps left→right on a loop — no real
   percentage, the server op is atomic. */
.pages-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1000;
  background: transparent; overflow: hidden;
  opacity: 0; transition: opacity 0.2s ease; pointer-events: none;
}
.pages-progress.active { opacity: 1; }
.pages-progress-fill {
  height: 100%; width: 40%; background: var(--gold);
  transform: translateX(-100%);
}
/* Indeterminate (search): the fill sweeps left→right on a loop. */
.pages-progress.active:not(.determinate) .pages-progress-fill {
  animation: pages-progress-sweep 1s ease-in-out infinite;
}
@keyframes pages-progress-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}
/* Determinate (reindex): JS sets the width to done/total %, no sweep. */
.pages-progress.determinate .pages-progress-fill {
  transform: none; width: 0; transition: width 0.2s ease;
}
.admin-pages { width: auto; border-collapse: collapse; }
.admin-pages th, .admin-pages td { text-align: left; padding: 0.3rem 1.5rem 0.3rem 0; border-bottom: 1px solid var(--border-gold); }
.admin-pages th { user-select: none; color: var(--gold); }
.admin-pages th[data-sort]:hover, .admin-pages th[data-sort-key]:hover { color: #7a5500; }
.admin-pages th[data-sort-key] { cursor: pointer; }

/* Pages table (grouped by slug): create form, per-language edit links + dates,
   row actions. */
main.container > .new-page-form { margin: 0.5rem 1rem; }
.new-page-form { display: flex; align-items: center; gap: 0.5rem; }
.new-page-form .new-page-slug { max-width: 320px; margin: 0; }
.new-page-form button { margin: 0; padding: 0.4rem 0.9rem; width: auto; }
main.container > #pages-result { margin: 0.25rem 1rem; font-size: 0.9rem; }
#pages-result p { margin: 0.2rem 0; }
.page-slug { font-weight: bold; color: var(--navy); }
.page-lang { white-space: nowrap; }
.page-lang .lang-date { color: #666; font-size: 0.85rem; text-decoration: none; }
.page-lang .lang-date:hover { color: var(--navy); text-decoration: underline; }
.page-lang .lang-view { margin-left: 0.4rem; font-size: 0.85rem; text-decoration: none; opacity: 0.7; }
.page-lang .lang-view:hover { opacity: 1; }
.page-lang-add { white-space: nowrap; color: var(--gold); }
.page-actions { white-space: nowrap; }
.page-copy, .page-ren, .page-del { width: auto; margin: 0 0 0 0.35rem; padding: 0 0.4rem; font-size: 0.85rem; line-height: 1.6; cursor: pointer; background: var(--bg-content); border-radius: 3px; }
.page-copy, .page-ren { color: var(--navy); border: 1px solid var(--navy); }
.page-copy:hover, .page-ren:hover { background: var(--navy); color: #fff; }
.page-del { color: #b00000; border: 1px solid #b00000; }
.page-del:hover { background: #b00000; color: #fff; }

/* Edit button for admins */
/* Shared by the Edit link (<a>) and the Mailouts button (<button>). Reset the
   native button chrome (border/shadow/width/margin) Pico adds, so a <button>
   with this class is visually identical to the <a>. */
.edit-btn { display: inline-block; width: auto; margin: 0; padding: 0.15rem 0.7rem; background: var(--gold); color: #fff !important; text-decoration: none; border: none; border-radius: 4px; font-size: 0.85rem; line-height: 1.4; cursor: pointer; }
.edit-btn:hover { background: #7a5500; color: #fff !important; }
.edit-btn:focus, .edit-btn:focus-visible { outline: none; box-shadow: none; }

/* Mailouts page (/admin/mailouts/<slug>): action bar + the results table. */
.mailouts-page { padding: 1rem 2rem; }
.mailouts-notice { color: #c62828; font-weight: bold; }
.mailouts-bar { display: flex; gap: 0.6rem; align-items: center; margin: 0 0 1rem; flex-wrap: wrap; }
.mailouts-form { margin: 0; display: inline; }
.mailouts-bar button { width: auto; margin: 0; }
.mailouts-list { width: 100%; border-collapse: collapse; margin: 0; }
.mailouts-list th, .mailouts-list td { padding: 0.3rem 0.5rem; text-align: left; border-bottom: 1px solid var(--border-gold); color: var(--text-blue); }
/* Desktop: no clipping, so the absolute filter popover can overflow the table.
   Horizontal scroll is only turned on for narrow screens (see @media below),
   where the popover is a fixed bottom-sheet and isn't clipped by this wrapper. */
.mailouts-table-wrap { overflow: visible; -webkit-overflow-scrolling: touch; }
.mailouts-list th { color: var(--gold); }
.mailouts-list th.mailouts-sort { white-space: nowrap; }
/* The label is the sort hit-area; the arrow sits after it. */
.mailouts-th-label { cursor: pointer; user-select: none; }
.mailouts-th-label::after { content: "\2195"; opacity: 0.35; margin-left: 0.25rem; font-size: 0.85em; }
.mailouts-list th.sorted-asc .mailouts-th-label::after { content: "\2191"; opacity: 1; }
.mailouts-list th.sorted-desc .mailouts-th-label::after { content: "\2193"; opacity: 1; }
.mailouts-th-label:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Email filter: a small text input to the RIGHT of the "Email" label. The
   high-specificity selector + box-sizing override PicoCSS's input{width:100%;
   margin-bottom; height:calc(...)} which otherwise blows the field up to the
   full column width. */
.mailouts-th-email { white-space: nowrap; }
.mailouts-list th .mailouts-filter-text {
  display: inline-block; width: 10rem; max-width: 10rem; box-sizing: border-box;
  vertical-align: middle; margin: 0 0 0 0.4rem; padding: 0.1rem 0.35rem;
  font-size: 0.8rem; height: 1.6rem; line-height: 1.3; font-weight: normal;
  color: var(--text-blue); }
/* Excel-style checkbox filter (Lang / Status): funnel button + popover list. */
.mailouts-filter-wrap { position: relative; display: inline-block; margin-left: 0.25rem; }
.mailouts-funnel { width: auto; margin: 0; padding: 0 0.15rem; font-size: 0.7em; line-height: 1;
  background: none; border: none; color: var(--gold); opacity: 0.55; cursor: pointer; }
.mailouts-funnel:hover { opacity: 1; }
.mailouts-funnel.active { opacity: 1; color: var(--navy); }
.mailouts-filter-pop { position: absolute; top: 100%; left: 0; z-index: 20; margin-top: 0.2rem;
  padding: 0.3rem 0.5rem; background: #fff; border: 1px solid var(--border-gold);
  border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); min-width: 8rem; text-align: left; }
.mailouts-filter-opt { display: flex; align-items: center; gap: 0.45rem; margin: 0;
  padding: 0.1rem 0; font-size: 0.85rem; font-weight: normal; color: var(--text-blue);
  white-space: nowrap; cursor: pointer; user-select: none; -webkit-user-select: none; }
/* Normal square checkboxes: PicoCSS restyles input[type=checkbox] into tall
   thin bars, so force a plain 1rem square box here (high specificity). */
.mailouts-list th .mailouts-filter-pop input[type="checkbox"] {
  -webkit-appearance: checkbox; appearance: checkbox;
  width: 1rem; height: 1rem; min-width: 1rem; margin: 0; padding: 0;
  flex: 0 0 auto; background: none; border: initial; border-radius: 0;
  vertical-align: middle; }
.mailouts-filter-opt:first-child { border-bottom: 1px solid var(--border-gold);
  padding-bottom: 0.3rem; margin-bottom: 0.2rem; }
.mailouts-list tr.status-sending td { color: #996600; }
.mailouts-list tr.status-sent td { color: #2e7d32; }
.mailouts-list tr.status-error td { color: #c62828; }
.mailouts-list tr.status-no_page td, .mailouts-list tr.status-no td { color: #999; }
.mailouts-status { margin-left: 0.5rem; color: #666; font-size: 0.9rem; }
.mailouts-pages-row { margin: 0 0 0.6rem; font-size: 0.9rem; }
.mailouts-pages-label { color: var(--gold); }
.mailouts-pages { color: var(--navy); font-family: monospace; }
.mailouts-report { margin: 0.8rem 0 0; }
.mailouts-report:empty { display: none; }
.mailouts-report-head { font-weight: bold; color: #2e7d32; margin-bottom: 0.4rem; }
.mailouts-report.cancelled .mailouts-report-head { color: #c62828; }
.mailouts-report-table { border-collapse: collapse; font-size: 0.9rem; }
.mailouts-report-table th, .mailouts-report-table td { border: 1px solid var(--border-gold); padding: 0.2rem 0.6rem; text-align: right; color: var(--text-blue); }
.mailouts-report-table th:first-child, .mailouts-report-table td:first-child { text-align: left; }
.mailouts-report-table th { color: var(--gold); }
.mailouts-report-table tr.mailouts-report-total td { font-weight: bold; }

/* Toast UI Editor overrides */
.toastui-editor-defaultUI { border-color: #ccc; }

/* Markdown syntax markers (#, *, -, `, [](), >, etc.) ship near-invisible light
   grey by default. Colour ONLY the meta/delimiter tokens (the actual markup
   characters) dark red — NOT `-marked-text`, which wraps the whole emphasised/
   linked content and would tint the text itself. !important beats Toast UI's
   inline-scoped defaults. */
.toastui-editor-md-meta,
.toastui-editor-md-delimiter,
.toastui-editor-md-link .toastui-editor-md-link-desc.toastui-editor-md-marked-text,
.toastui-editor-md-link-url.toastui-editor-md-marked-text,
.toastui-editor-md-image .toastui-editor-md-meta,
.toastui-editor-md-link .toastui-editor-md-meta { color: #8b0000 !important; font-weight: 700 !important; }

/* Admin editor page — full-viewport layout.
   Toast UI is created with height:'100%', which only resolves if every ancestor
   has a DEFINITE height. So the chain is: main.editor-page (100vh, definite)
   → .admin-editor-page (flex child) → #editor-container (flex child).
   min-height:0 on the flex children lets them shrink instead of overflowing. */
main.editor-page { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
/* The admin nav must not stretch in the flex column. */
main.editor-page > nav.sticky-header { flex: 0 0 auto; }
.admin-editor-page { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0 1.5rem 1rem; }
.admin-toolbar { flex: 0 0 auto; display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.75rem; }
.admin-toolbar .toolbar-form { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.edit-lang-switch { display: flex; align-items: center; gap: 0.4rem; }
.edit-lang { padding: 0.2rem 0.6rem; border: 1px solid var(--border-gold); border-radius: 4px; text-decoration: none; color: var(--navy) !important; }
.edit-lang:hover { background: var(--border-gold); }
.edit-lang.current { background: var(--gold); color: #fff !important; border-color: var(--gold); font-weight: bold; }
.admin-toolbar button { margin: 0; padding: 0.4rem 0.9rem; width: auto; }
.admin-toolbar input[type=file] { margin: 0; width: auto; }
.admin-toolbar #save-result, .admin-toolbar #upload-result { margin: 0; font-size: 0.9rem; }
/* #gallery is scoped to the editor: on /admin/media the grid must grow freely.
   Hidden by default and revealed via .open (toggleGallery() in admin-editor.js);
   the head (filter input) is server-rendered up front either way, so opening
   never needs to (re)create it — only #gallery-body is ever fetched. */
.admin-editor-page #gallery { flex: 0 0 auto; max-height: 40vh; overflow-y: auto; display: none; }
.admin-editor-page #gallery.open { display: block; }
#editor-container { flex: 1 1 auto; min-height: 0; }

/* Media library page (/admin/media) */
main.container > .media-drop,
main.container > #media-result, main.container > #gallery { margin-left: 1rem; margin-right: 1rem; }
.media-drop { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; border: 2px dashed var(--border-gold); border-radius: 6px; padding: 1rem; margin: 0.75rem 1rem; }
.media-drop.dragover { background: var(--border-gold); border-color: var(--gold); }
.media-drop input[type=file] { margin: 0; width: auto; }
.media-drop button { margin: 0; padding: 0.4rem 0.9rem; width: auto; }
.media-drop .drop-hint { flex: 1 1 100%; margin: 0; font-size: 0.85rem; color: #666; }
#media-result { font-size: 0.9rem; }
#media-result p { margin: 0.2rem 0; }
#media-result pre { margin: 0.4rem 0 0; padding: 0.4rem 0.6rem; font-size: 0.8rem; }

/* Image gallery (admin editor) */
.gallery-box { margin: 0.75rem 0; }
/* Filter input left, pager right — same row. justify-content:space-between
   needs the input's own max-width (below) so it doesn't stretch to fill the
   row and push the pager off; #gallery-pager stays put (empty) even before
   the gallery is first opened, so nothing jumps when it fills in. */
.gallery-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.gallery-head input[name=q] { max-width: 320px; margin: 0; }
.gallery-pager { display: flex; align-items: stretch; gap: 0.5rem; }
/* Prev/next buttons and the page-size <select> share one height: same
   box-sizing + vertical padding + line-height, and align-items:stretch on the
   flex row so both fill it identically. */
.gallery-pager button,
.gallery-pager .gallery-size { box-sizing: border-box; margin: 0; height: auto; line-height: 1.4; padding-top: 0.15rem; padding-bottom: 0.15rem; }
.gallery-pager button { width: auto; padding-left: 0.7rem; padding-right: 0.7rem; }
.gallery-page-info { font-size: 0.85rem; color: #666; white-space: nowrap; align-self: center; }
.gallery-size { width: auto; padding-left: 0.5rem; padding-right: 1.6rem; }
#gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.75rem; }
.gallery-item { position: relative; margin: 0; cursor: pointer; border: 1px solid var(--border-gold); border-radius: 4px; padding: 0.3rem; text-align: center; transition: background 0.15s; }
.gallery-item:hover { background: var(--border-gold); }
.gallery-item img { width: 100%; height: 90px; object-fit: cover; border-radius: 3px; display: block; }
.gallery-item figcaption { font-size: 0.75rem; word-break: break-all; margin-top: 0.25rem; color: #666; }
/* Transient feedback after click-to-copy on the media page */
.gallery-item.copied { background: var(--gold); }
.gallery-item.copied figcaption { color: #fff; }
/* Manage-mode buttons, stacked in the top-right corner of the thumbnail */
.gallery-del, .gallery-ren, .gallery-zoom { position: absolute; top: 0.25rem; width: auto; margin: 0; padding: 0 0.35rem; font-size: 0.8rem; line-height: 1.5; background: rgba(255,255,255,0.85); border-radius: 3px; cursor: pointer; }
.gallery-del { right: 0.25rem; color: #b00000; border: 1px solid #b00000; }
.gallery-del:hover { background: #b00000; color: #fff; }
.gallery-ren { right: 2rem; color: var(--navy); border: 1px solid var(--navy); }
.gallery-ren:hover { background: var(--navy); color: #fff; }
/* Zoom sits top-left so it never collides with rename/delete (top-right, manage only) */
.gallery-zoom { left: 0.25rem; color: var(--navy); border: 1px solid var(--navy); }
.gallery-zoom:hover { background: var(--navy); color: #fff; }

/* Full-size image lightbox (media library) */
.mm-lightbox { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.85); cursor: zoom-out; padding: 2rem; }
.mm-lightbox.open { display: flex; align-items: center; justify-content: center; }
.mm-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 0 30px rgba(0,0,0,0.5); }

/* htmx request indicator */
.htmx-indicator { display: none; margin-left: 0.4rem; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-block; animation: htmx-pulse 1s infinite; }
@keyframes htmx-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

/* === Mobile: tiny horizontal gutters — content nearly full width === */
@media (max-width: 600px) {
  /* thin golden side borders instead of the desktop 1rem */
  main.container { border-left-width: 0; border-right-width: 0; }
  /* small side padding for the text */
  article { padding-left: 0.4rem; padding-right: 0.4rem; }
  .gen-start-bar { padding-left: 0.4rem; padding-right: 0.4rem; }
  /* admin chrome that carries its own 1rem side gutter */
  main.container > h2,
  main.container > .lang-filters,
  main.container > .admin-filter,
  main.container > .admin-pages,
  main.container > .pages-table-wrap { margin-left: 0.4rem; margin-right: 0.4rem; }

  /* Trim the mailouts page's side padding so the table gets the full width. */
  .mailouts-page { padding-left: 0.5rem; padding-right: 0.5rem; }
  /* Narrow screens: let the wide table scroll sideways instead of clipping. */
  .mailouts-table-wrap { overflow-x: auto; }
  /* The table scrolls sideways in its wrapper; the filter popover must NOT be
     clipped by it. On mobile show it as a bottom sheet pinned to the viewport
     (full width, always on-screen regardless of which column opened it). */
  .mailouts-filter-pop { position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: auto; max-width: none; max-height: 50vh; overflow-y: auto;
    border-radius: 8px 8px 0 0; box-shadow: 0 -2px 12px rgba(0,0,0,0.25);
    padding: 0.8rem 1rem; }
  .mailouts-filter-opt { padding: 0.4rem 0; font-size: 1rem; }
  /* Email field: smaller so the header doesn't widen the table needlessly. */
  .mailouts-list th .mailouts-filter-text { width: 6rem; max-width: 6rem; }
}

blockquote, blockquote p {
  font-style: italic !important;
  text-align: justify;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
article blockquote {
  margin: 0 !important;
  padding-left: 1.5rem !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}