/* Separate archive interface; recovered skin files and article rules are untouched. */
/* Safari sends Cmd+Up/Down and other scroll keys to the clicked overflow:hidden
   box instead of the page. overflow:clip looks the same but is not scrollable;
   flow-root keeps floats contained as overflow:hidden did. */
#layout, #content, #features, #content .entry { overflow: clip; }
#layout, #content .entry { display: flow-root; }
html { scroll-padding-top: 100px; }
/* Room for the bar on every era's pages. */
:is(body.blog-hu-archive, body.gm-archive) { padding-top: 76px; }
:root {
  /* Apple-style dark palette: a true black base, every tint a translucent grey laid
     over it (iOS/macOS dark-mode fills, labels and separators). */
  --archive-ui-surface: #000;                       /* bar and popups */
  --archive-ui-elevated: #1c1c1e;                   /* menus dropping from the bar */
  --archive-ui-text: #fff;                          /* label */
  --archive-ui-muted: rgb(235 235 245 / .6);        /* secondary label, placeholders */
  --archive-ui-hover: rgb(118 118 128 / .24);       /* tertiary fill: hover, selection, fields */
  --archive-ui-fill-strong: rgb(120 120 128 / .36); /* fill: focused fields, chips */
  --archive-ui-fill-stronger: rgb(120 120 128 / .5);
  --archive-ui-divider: rgb(84 84 88 / .4);         /* row dividers inside popups */
  --archive-ui-outline: #38383a;                    /* opaque separator: the quick search's border */
  --archive-ui-outline-focus: #48484a;
  --archive-ui-focus: #0a84ff;                      /* system blue focus ring */
  --archive-ui-radius: 16px;
  --archive-ui-shadow: 0 0 0 .5px rgb(84 84 88 / .5), 0 10px 30px rgb(0 0 0 / .35);
  --archive-ui-font: 14px/1.4 -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
}
.archive-controls, .archive-modal, .archive-modal-panel {
  color-scheme: dark;
  color: var(--archive-ui-text);
  font: var(--archive-ui-font);
  letter-spacing: normal;
  text-align: left;
}
.archive-controls {
  --archive-safe-top: env(safe-area-inset-top, 0px);
  --archive-safe-left: env(safe-area-inset-left, 0px);
  --archive-safe-right: env(safe-area-inset-right, 0px);
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%);
  width: calc(100vw - 20px); max-width: 960px; min-height: 64px;
  margin: 0; padding: 10px 14px; display: flex; align-items: center; gap: 14px;
  box-sizing: border-box; border: 0; border-radius: var(--archive-ui-radius);
  background: var(--archive-ui-surface); box-shadow: var(--archive-ui-shadow);
  z-index: 100;
}
.archive-controls[data-viewport] {
  top: 0; left: 0; width: var(--archive-width); max-width: none;
  transform-origin: 0 0;
  transform: translate(var(--archive-x), var(--archive-y)) scale(var(--archive-inverse-scale));
  will-change: transform;
}
.archive-controls * { box-sizing: border-box; }
.archive-controls a { color: var(--archive-ui-text); text-decoration: none; }
.archive-controls a:hover { color: var(--archive-ui-text); text-decoration: none; background: var(--archive-ui-hover); }
.archive-controls .desktop-navigation { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; }
.archive-controls .desktop-navigation a { padding: 9px 8px; border-radius: 7px; white-space: nowrap; }
.archive-controls .header-search {
  display: flex; width: 245px; flex: 0 1 245px; min-width: 0;
  margin: 0 0 0 auto; padding: 0; border: 0; background: transparent; gap: 0;
}
.archive-controls .header-search input {
  /* Explicit box model: era stylesheets (e.g. Gault&Millau's) restyle search fields. */
  box-sizing: border-box; margin: 0; -webkit-appearance: none; appearance: none;
  min-width: 0; width: 100%; height: 40px; padding: 9px 11px; color: var(--archive-ui-text);
  background: transparent; border: 1px solid var(--archive-ui-outline); border-radius: 9px;
  font: 16px/1.3 system-ui, -apple-system, sans-serif; box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.archive-controls .header-search input::placeholder { color: var(--archive-ui-muted); opacity: 1; }
/* Only the border shows at rest; the field fills in while it has focus. */
.archive-controls .header-search input:focus { outline: none; border-color: var(--archive-ui-outline-focus); background: var(--archive-ui-hover); }
/* Light clear (×) button to suit the dark field; the native one is dark grey. */
.archive-controls .header-search input::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin: 0 0 0 6px; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%238e8e93'/%3E%3Cpath d='M5.2 5.2l5.6 5.6M10.8 5.2l-5.6 5.6' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  opacity: .85;
}
.archive-controls .header-search input::-webkit-search-cancel-button:hover { opacity: 1; }
/* Era switcher: a compact chip naming the era; its list leads to the other eras and the
   "Választó lap". */
.archive-controls .era-switcher { position: relative; flex: none; }
.archive-controls .era-switcher summary {
  display: flex; align-items: center; gap: 4px; min-height: 30px; padding: 5px 10px 5px 11px; cursor: pointer;
  border-radius: 999px; background: var(--archive-ui-hover); color: var(--archive-ui-text);
  font-size: 13px; font-weight: 600; white-space: nowrap; list-style: none; -webkit-user-select: none; user-select: none;
}
.archive-controls .era-switcher summary::-webkit-details-marker { display: none; }
.archive-controls .era-switcher summary::after { content: "▾"; font-size: 10px; opacity: .7; }
.archive-controls .era-switcher summary:hover, .archive-controls .era-switcher[open] summary { background: var(--archive-ui-fill-strong); }
.archive-controls .era-switcher nav {
  position: absolute; top: calc(100% + 12px); left: 0; z-index: 2; min-width: 190px; padding: 6px;
  display: flex; flex-direction: column; border-radius: 12px;
  background: var(--archive-ui-elevated); box-shadow: var(--archive-ui-shadow);
}
.archive-controls .era-switcher:not([open]) nav { display: none; }
.archive-controls .era-switcher nav a, .archive-controls .era-switcher-pending {
  display: block; padding: 9px 10px; border-radius: 7px; line-height: 1.3; white-space: nowrap;
}
.archive-controls .era-switcher nav a[aria-current] { font-weight: 600; }
.archive-controls .era-switcher nav a[aria-current]::after { content: "✓"; float: right; margin-left: 14px; color: var(--archive-ui-muted); }
.archive-controls .era-switcher-pending { color: var(--archive-ui-muted); opacity: .6; cursor: default; }
.archive-controls .era-switcher hr { margin: 5px 4px; border: 0; border-top: 1px solid var(--archive-ui-divider); }
.archive-controls .mobile-menu { display: none; }
.archive-controls .mobile-menu summary {
  display: flex; align-items: center; gap: 5px; cursor: pointer; min-height: 40px;
  padding: 8px; color: var(--archive-ui-text); border-radius: 8px; white-space: nowrap; list-style: none;
}
.archive-controls .mobile-menu summary::-webkit-details-marker { display: none; }
.archive-controls .mobile-menu summary::after { content: "▾"; font-size: 12px; }
.archive-controls .mobile-menu[open] summary::after { content: "▴"; }
.archive-controls .mobile-menu summary:hover { background: var(--archive-ui-hover); }
.archive-controls .mobile-menu nav {
  position: absolute; top: calc(100% + 8px); right: 0; width: 280px;
  max-width: calc(100% - 2px); max-height: var(--archive-menu-height, 60dvh); overflow-y: auto;
  padding: 8px; gap: 0; border: 0; border-radius: 12px;
  background: var(--archive-ui-elevated); color: var(--archive-ui-text); box-shadow: var(--archive-ui-shadow);
  display: flex; flex-direction: column;
}
.archive-controls .mobile-menu nav a { display: block; padding: 12px; border-radius: 7px; line-height: 1.4; }
.archive-controls .mobile-menu:not([open]) nav { display: none; }
.archive-controls [hidden] { display: none !important; }
.archive-controls .live-search {
  position: absolute; top: calc(100% + 8px); right: 0; width: 480px; max-width: 100%;
  max-height: var(--archive-menu-height, 60dvh); overflow-y: auto;
  border: 0; border-radius: 12px; background: var(--archive-ui-elevated);
  box-shadow: var(--archive-ui-shadow); font: 14px/1.4 system-ui, -apple-system, sans-serif;
}
.archive-controls .live-search-status { margin: 0; padding: 14px; font-size: 12px; color: var(--archive-ui-muted); }
.archive-controls .live-search-results { margin: 0; padding: 0; list-style: none; }
.archive-controls .live-search-results li { margin: 0; padding: 0; background: none; list-style: none; }
.archive-controls .live-search-results a { display: block; padding: 12px 14px; }
/* Arrow keys move this highlight while typing stays in the search box. */
.archive-controls .live-search a[aria-selected=true] { color: var(--archive-ui-text); background: var(--archive-ui-hover); }
.archive-controls .live-search a:focus-visible { outline: none; background: var(--archive-ui-hover); }
.archive-controls .live-search-title { display: block; font-size: 15px; font-weight: 600; }
.archive-controls .live-search-date { display: block; margin-top: 4px; color: var(--archive-ui-muted); font-size: 11px; }
.archive-controls .live-search-excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 6px; font-size: 12px; color: var(--archive-ui-muted); }
.archive-controls .live-search-all { display: block; padding: 13px 14px; font-size: 13px; }
.archive-controls[data-compact] .live-search { width: 100%; }
.archive-controls :is(a, button, input, summary):focus-visible { outline: 2px solid var(--archive-ui-focus); outline-offset: 3px; }
.archive-controls .sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* A data attribute follows the visible width even when the page layout is 920px. */
.archive-controls[data-compact] { min-height: 58px; padding: 8px; gap: 8px; border-radius: 14px; }
.archive-controls[data-compact] .desktop-navigation { display: none; }
.archive-controls[data-compact] .header-search { width: auto; flex: 1 1 0; margin: 0; }
.archive-controls[data-compact] .mobile-menu { display: block; flex: none; margin-left: auto; }
.archive-controls[data-compact] .mobile-menu summary { padding: 8px 5px; font-size: 13px; }
@media (max-width: 880px) {
  .archive-controls:not([data-viewport]) { min-height: 58px; padding: 8px; gap: 8px; border-radius: 14px; }
  .archive-controls:not([data-viewport]) .desktop-navigation { display: none; }
  .archive-controls:not([data-viewport]) .header-search { width: auto; flex: 1 1 0; margin: 0; }
  .archive-controls:not([data-viewport]) .mobile-menu { display: block; flex: none; margin-left: auto; }
  .archive-controls:not([data-viewport]) .mobile-menu summary { padding: 8px 5px; font-size: 13px; }
}
.archive-controls[data-narrow] { gap: 5px; }
.archive-controls[data-narrow] .header-search input { padding: 9px 8px; }
.archive-controls[data-narrow] .mobile-menu summary { padding: 8px 3px; }
/* Archive-owned UI: the modal shares the bar's tokens and never inherits blog type. */
.archive-modal-panel {
  position: relative; box-sizing: border-box; width: min(var(--archive-modal-width, 520px), calc(100vw - 32px));
  max-height: calc(100dvh - 32px); overflow: hidden; padding: 20px 28px 32px;
  /* Title and × stay put; only the body scrolls when the content is long. */
  display: flex; flex-direction: column;
  border: 0; border-radius: var(--archive-ui-radius); background: var(--archive-ui-surface);
  box-shadow: var(--archive-ui-shadow);
}
.archive-modal-panel *, .archive-modal-panel *::before, .archive-modal-panel *::after { box-sizing: border-box; }
/* Opening focuses the panel itself (no ring); the × shows its ring only when tabbed to. */
.archive-modal-panel:focus, .archive-modal-body:focus { outline: none; }
.archive-modal-heading { display: flex; flex: none; align-items: center; min-height: 40px; margin: 0 0 10px; padding: 0 48px 0 0; }
.archive-modal-heading h1 {
  /* Not selectable: an accidental (Safari) selection would paint it in the system highlight colour. */
  -webkit-user-select: none; user-select: none;
  margin: 0; padding: 0; border: 0; background: none; color: inherit;
  font: inherit; font-size: 15px; font-weight: 600; letter-spacing: normal;
}
.archive-modal-body { min-height: 0; overflow: auto; overscroll-behavior: contain; margin: 0; padding: 0; color: var(--archive-ui-muted); font: inherit; }
.archive-modal-page .archive-modal-body { overflow: visible; }
.archive-modal-body a { color: var(--archive-ui-text); text-decoration: none; }
.archive-modal-body ul { margin: 0; padding: 0; list-style: none; }
.archive-modal-body li { margin: 0; padding: 0; background: none; list-style: none; }
.archive-modal-note { color: var(--archive-ui-muted); }
.archive-count { color: var(--archive-ui-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
/* "Évek szerint": one row per year, its months as a compact grid. */
.archive-years { display: grid; gap: 4px; }
.archive-year { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--archive-ui-divider); }
/* Years are labels, not links: only months open pages. */
.archive-year h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0; padding: 5px 8px; border: 0; background: none; color: var(--archive-ui-text); font: inherit; font-size: 15px; font-weight: 600; }
.archive-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 2px 8px; }
.archive-months a { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 5px 8px; border-radius: 7px; }
/* "Receptek": recipe titles in columns, each with the post it appears in. */
.archive-recipe-list { columns: 2 260px; column-gap: 18px; }
.archive-recipe-list li { break-inside: avoid; border-bottom: 1px solid var(--archive-ui-divider); }
.archive-recipe-list a { display: block; padding: 6px 8px; border-radius: 6px; line-height: 1.35; }
.archive-recipe-list .archive-recipe-post { display: block; margin-top: 2px; color: var(--archive-ui-muted); font-size: 12px; }
/* "Címkék": a dense index read down the columns, like a table. */
.archive-tag-table { columns: 3 190px; column-gap: 18px; }
.archive-tag-table li { break-inside: avoid; border-bottom: 1px solid var(--archive-ui-divider); }
.archive-tag-table a { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 3px 6px; border-radius: 5px; font-size: 13px; line-height: 1.45; }
.archive-tag-table a span:first-child { min-width: 0; overflow-wrap: anywhere; }
.archive-modal-body a:hover, .archive-modal-body a:focus-visible { color: var(--archive-ui-text); background: var(--archive-ui-hover); outline: none; }
.archive-modal-body p { margin: 0 0 14px; padding: 0; color: inherit; font: inherit; }
.archive-modal-body time { color: inherit; font: inherit; }
.archive-modal-body p:last-child { margin-bottom: 0; }
.archive-modal-close {
  /* Pinned to the panel's top-right corner, whatever the heading or text does. */
  position: absolute; top: 12px; right: 12px; z-index: 1;
  display: grid; place-items: center;
  width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 7px;
  background: transparent; color: var(--archive-ui-text); text-decoration: none; cursor: pointer;
  /* The "×" text is hidden; two drawn lines are centred exactly, whatever the font. */
  font-size: 0; line-height: 0;
}
.archive-modal-close::before, .archive-modal-close::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 2px;
  margin: -1px 0 0 -8px; border-radius: 1px; background: currentColor;
}
.archive-modal-close::before { transform: rotate(45deg); }
.archive-modal-close::after { transform: rotate(-45deg); }
.archive-modal-close:hover { color: var(--archive-ui-text); background: var(--archive-ui-hover); text-decoration: none; }
.archive-modal-close:focus-visible { outline: 2px solid var(--archive-ui-focus); outline-offset: 3px; background: var(--archive-ui-hover); }
/* The modal: a transparent shell around the panel, over a dimmed page. */
.archive-modal {
  width: fit-content; max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0;
  overflow: visible; border: 0; background: transparent;
}
.archive-modal[data-viewport] {
  position: fixed; inset: auto; left: var(--archive-dialog-x); top: var(--archive-dialog-y);
  width: var(--archive-dialog-width); max-height: none; margin: 0;
  transform-origin: 0 0; transform: scale(var(--archive-inverse-scale));
}
.archive-modal[data-viewport] .archive-modal-panel { width: 100%; max-height: var(--archive-dialog-height); }
.archive-modal[data-compact] { --archive-ui-radius: 14px; }
.archive-modal::backdrop { background: rgb(0 0 0 / .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.archive-modal[open] .archive-modal-panel { animation: archive-modal-in .24s cubic-bezier(.2, .8, .2, 1); }
.archive-modal[open]::backdrop { animation: archive-shim-in .24s ease-out; }
.archive-modal.is-closing .archive-modal-panel { animation: archive-modal-out .16s ease-in forwards; }
.archive-modal.is-closing::backdrop { animation: archive-shim-out .16s ease-in forwards; }
@keyframes archive-modal-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes archive-modal-out { to { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes archive-shim-in { from { opacity: 0; } }
@keyframes archive-shim-out { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .archive-modal-panel, .archive-modal::backdrop { animation: none !important; }
}
/* Tall modals (search) keep their full height while results change. */
.archive-modal[data-tall][data-viewport] .archive-modal-panel { height: min(var(--archive-dialog-height), 660px); }
.archive-modal-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* "Részletes keresés": fields like the bar's search box, results as dense rows. */
.archive-search-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; margin: 0 0 14px; }
/* In the modal the fields stay pinned while results scroll beneath them; a soft shadow
   appears below once anything has scrolled under (data-scrolled, set by archive-browse.js). */
.archive-modal .archive-search-form {
  position: sticky; top: 0; z-index: 3; margin: 0 0 4px; padding: 0 0 14px;
  background: var(--archive-ui-surface); transition: box-shadow .18s ease;
}
.archive-modal .archive-search-form[data-scrolled] { box-shadow: 0 14px 16px -14px rgb(0 0 0 / .7); }
.archive-search-form label { display: grid; gap: 4px; min-width: 0; margin: 0; color: var(--archive-ui-muted); font: inherit; font-size: 12px; }
.archive-search-query { grid-column: 1 / -1; }
.archive-search-form input, .archive-search-form select {
  box-sizing: border-box; width: 100%; min-width: 0; height: 40px; margin: 0; padding: 8px 11px;
  color: var(--archive-ui-text); background: var(--archive-ui-hover); border: 0; border-radius: 9px;
  font: 16px/1.3 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.archive-search-form input::placeholder { color: var(--archive-ui-muted); opacity: 1; }
/* No strokes: focus is shown by a slightly lighter field. */
.archive-search-form input:focus, .archive-search-form select:focus { outline: none; background: var(--archive-ui-fill-strong); }
.archive-search-status { margin: 0 0 6px; color: var(--archive-ui-muted); font-size: 12px; }
.archive-search-results { margin: 0; padding: 0; list-style: none; }
/* Generous space above and below each hit (beats the generic modal list reset). */
.archive-modal-body .archive-search-result, .archive-modal-page .archive-search-result {
  position: relative; margin: 0; padding: 22px 14px; list-style: none; background: none;
  border-top: 1px solid var(--archive-ui-divider); border-radius: 10px; cursor: pointer; transition: background-color .12s;
}
/* Each hit lights up on hover and is clickable as a whole: the title link covers the row.
   The comment link and tag chips sit above it and keep their own targets. */
.archive-modal-body .archive-search-result:hover, .archive-modal-page .archive-search-result:hover,
.archive-search-result:focus-within { background: var(--archive-ui-hover); }
.archive-search-title::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.archive-modal-body .archive-search-title:hover, .archive-modal-body .archive-search-title:focus-visible { background: none; }
.archive-search-meta a, .archive-search-tags a { position: relative; z-index: 1; }
.archive-search-title { display: inline-block; color: var(--archive-ui-text); font-size: 15px; font-weight: 600; line-height: 1.35; }
.archive-search-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 3px; color: var(--archive-ui-muted); font-size: 12px; }
.archive-search-excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 6px 0 0; color: var(--archive-ui-muted); font-size: 13px; }
.archive-search-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.archive-search-tags a { padding: 2px 8px; border-radius: 999px; background: var(--archive-ui-fill-strong); color: var(--archive-ui-muted); font-size: 12px; }
.archive-modal-body .archive-search-tags a:hover, .archive-modal-body .archive-search-tags a:focus-visible { background: var(--archive-ui-fill-stronger); color: var(--archive-ui-text); }
.archive-modal-body .archive-search-meta a { padding: 0; color: var(--archive-ui-muted); }
.archive-modal-body .archive-search-meta a:hover { background: none; color: white; text-decoration: underline; }
/* Same pager as the archive pages: a large « and », the position between. */
.archive-search-pages { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--archive-ui-divider); }
.archive-search-pages[hidden] { display: none; }
.archive-search-pages .pager-current { text-align: center; color: var(--archive-ui-muted); font-size: 13px; }
.archive-search-pages .pager-arrow { display: block; min-width: 88px; padding: 4px 28px 8px; border-radius: 8px; font-size: 28px; line-height: 1; text-align: center; }
/* Narrow screens (the modal sets data-compact from the visible width; the media query
   covers search.html opened on its own): the text field on its own line, then year,
   month and tag together on one line. Their labels are hidden from view (screen readers
   keep them) and the selects show the field's name until something is chosen
   (archive-browse.js). A year needs little room; month and tag share the rest. */
.archive-modal[data-compact] .archive-search-form { grid-template-columns: 4.8em minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.archive-modal[data-compact] .archive-search-form label:not(.archive-search-query) > span {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.archive-modal[data-compact] .archive-search-form select { padding: 8px 4px 8px 9px; }
@media (max-width: 640px) {
  body.archive-modal-page .archive-search-form { grid-template-columns: 4.8em minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  body.archive-modal-page .archive-search-form label:not(.archive-search-query) > span {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  body.archive-modal-page .archive-search-form select { padding: 8px 4px 8px 9px; }
}
/* While a modal is open the page behind doesn't scroll; only the modal's own content does.
   The gutter keeps the layout from shifting where scrollbars take up space. */
html { scrollbar-gutter: stable; }
html.archive-modal-open, html.archive-modal-open body { overflow: hidden; overscroll-behavior: none; }
/* Untitled modals: no heading row; the text keeps clear of the ×. */
.archive-modal-panel[data-modal-untitled] .archive-modal-heading { min-height: 0; margin: 0; padding: 0; }
.archive-modal-panel[data-modal-untitled] { padding-top: 28px; padding-bottom: 28px; }
.archive-modal-panel[data-modal-untitled] .archive-modal-body { padding-right: 40px; color: var(--archive-ui-text); font-size: 15px; line-height: 1.5; }
/* Links to content missing from the backup: grey, so they read as broken. */
:is(body.blog-hu-archive, body.gm-archive) :is(a.archive-missing-link, a.archive-missing-link:visited) { color: #8f8f8f !important; }
:is(body.blog-hu-archive, body.gm-archive) a.archive-missing-link:hover { color: #6f6f6f !important; }
/* A modal page opened directly (e.g. about.html): the panel centred on a dark page, under the bar. */
body.archive-modal-page {
  box-sizing: border-box; min-height: 100vh; min-height: 100dvh; margin: 0; padding: 96px 16px 32px;
  display: grid; place-items: center; background: var(--archive-ui-elevated);
}
.archive-modal-page .archive-modal-panel { max-height: none; }
@media print { .archive-modal { display: none !important; } }
@media print { :is(body.blog-hu-archive, body.gm-archive) { padding-top: 0; } .archive-controls { display: none !important; } }
/* Query-only paint; the recovered theme and saved article markup stay intact. */
::highlight(archive-search) { background-color: #ffe48a; color: #000; }
mark[data-archive-search-hit] { background: #ffe48a; color: #000; font: inherit; line-height: inherit; margin: 0; padding: 0; border: 0; }