/* === 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 lists start at the exact left edge of paragraphs. The native marker
   (even with list-style-position:inside) reserves space to the LEFT of the li
   content in Chromium, so the marker hangs left of the paragraph edge. We drop
   the native marker entirely (list-style:none, zero padding/margin) and draw
   our own bullet with ::before, which sits IN the text flow — nothing hangs
   left. Ordered lists keep their native numbers via a counter. */
article ul, article ol { margin: 0 !important; padding-left: 0 !important; }
/* Pico sets the native marker via `ul li{list-style:square}` (on the LI), so
   list-style must be killed on the LI too — killing it on the UL alone leaves
   the native square, which is what hung left of the paragraph edge. */
article ul > li, article ol > li { list-style: none !important; padding-left: 0; }
article ul > li::before { content: "\25AA\00A0"; color: var(--text-blue); }   /* ▪ + nbsp */
article ol { counter-reset: item; }
article ol > li { counter-increment: item; }
article ol > li::before { content: counter(item) ".\00A0"; color: var(--text-blue); }
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; }

/* 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;
}

.pages-table-wrap { position: relative; }

/* 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 */
.edit-btn { display: inline-block; padding: 0.15rem 0.7rem; background: var(--gold); color: #fff !important; text-decoration: none; border-radius: 4px; font-size: 0.85rem; }
.edit-btn:hover { background: #7a5500; color: #fff !important; }

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

/* 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; } }