/* qr-memorial.com
   ---------------------------------------------------------------------------
   The whole visual idea in one line: warm paper, quiet green, plenty of air.

   Fonts are system stacks, not a web font service. That is a design decision
   and a privacy one: the site promises that reading a page contacts nobody,
   and a font request to a third party would quietly break that promise.
   The colours live in theme.css and are referred to here only by name, so
   retuning the site never means editing this file. See that one for how to
   override it on a running server.
   --------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

img { max-width: 100%; height: auto; display: block; }

/* --------------------------------------------------------------- typography */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.008em;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); }
h3 { font-size: 1.22rem; }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1.1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent); }

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

.lede {
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 60ch;
}

.muted { color: var(--muted); }
.small { font-size: .9rem; }

.eyebrow {
  font-size: .74rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 .5rem;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--surface); color: var(--ink);
  padding: .7rem 1rem; border-radius: var(--radius-sm); z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ------------------------------------------------------------------- layout */

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }
.wrap-narrow { max-width: var(--wrap-narrow); }

main { flex: 1 0 auto; padding: 2.5rem 0 5rem; }

.stack > * + * { margin-top: 1rem; }
.stack-lg > * + * { margin-top: 2.5rem; }

section + section { margin-top: 4rem; }

/* ------------------------------------------------------------------- header */

.site-header {
  border-bottom: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.2) blur(8px);
  position: sticky; top: 0; z-index: 40;
}

.site-header .wrap {
  display: flex; align-items: center; gap: .6rem 1.25rem;
  min-height: 66px; flex-wrap: wrap; padding-block: .55rem;
}

.brand {
  font-family: var(--serif); font-size: 1.24rem; font-weight: 600;
  color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; gap: .55rem;
  margin-right: auto;
}
.brand:hover { color: var(--accent-deep); }
.brand .mark { width: 26px; height: 26px; flex: none; color: var(--accent); }

.nav {
  display: flex; align-items: center; gap: .55rem 1.15rem;
  flex-wrap: wrap; justify-content: flex-end; min-width: 0;
}

/* Below this width the navigation cannot sit beside the wordmark without
   crowding it, so it takes a line of its own rather than overlapping. */
@media (max-width: 900px) {
  .brand { margin-right: 0; }
  .nav { width: 100%; justify-content: flex-start; }
}
/* :not(.btn) matters: without it this rule is more specific than .btn and
   silently strips the padding off the "create a page" button. */
.nav a:not(.btn) {
  color: var(--ink-soft); text-decoration: none; font-size: .95rem;
  padding: .3rem 0; border-bottom: 1px solid transparent;
}
.nav a:not(.btn):hover, .nav a:not(.btn)[aria-current="page"] {
  color: var(--ink); border-bottom-color: var(--accent);
}

/* Language switcher: a plain <details>, so it works without JavaScript. */
.lang-switch { position: relative; }
.lang-switch summary {
  list-style: none; cursor: pointer; font-size: .95rem; color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .1rem;
}
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary:hover { color: var(--ink); }
.lang-switch summary svg { width: 15px; height: 15px; opacity: .65; }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 50;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: .35rem; min-width: 168px;
}
.lang-menu a {
  display: block; padding: .45rem .7rem; border-radius: var(--radius-sm);
  color: var(--ink-soft); text-decoration: none; font-size: .93rem;
  border-bottom: 0;
}
.lang-menu a:hover { background: var(--accent-wash); color: var(--ink); }
.lang-menu a[aria-current="true"] { color: var(--accent-deep); font-weight: 600; }

/* ------------------------------------------------------------------ buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-size: .97rem; font-weight: 500;
  padding: .68rem 1.3rem; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  /* A button in the header sits in a flex row and must never be squeezed
     narrower than its own label. */
  white-space: nowrap; flex: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-deep); color: #fff; }
@media (prefers-color-scheme: dark) {
  .btn-primary { color: #14201A; }
  .btn-primary:hover { color: #14201A; }
}
.btn-quiet {
  background: var(--surface); color: var(--ink); border-color: var(--line);
}
.btn-quiet:hover { border-color: var(--accent); color: var(--accent-deep); }
.btn-plain { background: none; color: var(--ink-soft); padding: .5rem .2rem; }
.btn-plain:hover { color: var(--accent-deep); }
.btn-danger { background: none; color: var(--danger); border-color: var(--line); }
.btn-danger:hover { background: var(--danger-wash); border-color: var(--danger); }
.btn-sm { padding: .4rem .85rem; font-size: .88rem; }
.btn svg { width: 17px; height: 17px; flex: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* --------------------------------------------------------------------- home */

.hero { padding: 2rem 0 1rem; }
.hero h1 { max-width: 17ch; }
.hero .lede { margin-top: 1.4rem; font-size: 1.2rem; }
.hero .btn-row { margin-top: 2rem; }
.hero-note { margin-top: 1rem; font-size: .9rem; color: var(--muted); }

/* A hairline of leaves under the hero: quiet, decorative, never loud. */
.rule-leaf {
  display: flex; align-items: center; gap: 1rem;
  margin: 3.5rem 0; color: var(--line);
}
.rule-leaf::before, .rule-leaf::after {
  content: ""; height: 1px; background: var(--line); flex: 1;
}
.rule-leaf svg { width: 22px; height: 22px; color: var(--accent); opacity: .5; }

.promise-grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
}
.promise {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: 1.5rem 1.4rem;
  box-shadow: var(--shadow-sm);
}
.promise .icon {
  width: 26px; height: 26px; color: var(--accent); margin-bottom: .9rem;
}
.promise h3 { margin-bottom: .45rem; }
.promise p { font-size: .96rem; color: var(--ink-soft); margin: 0; }

.steps { counter-reset: step; display: grid; gap: 1.5rem; }
@media (min-width: 720px) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: 1.75rem; }
}
.step { position: relative; padding-top: 2.6rem; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 0; left: 0;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent-wash); color: var(--accent-deep);
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 1rem; font-weight: 600;
}
.step h3 { font-size: 1.06rem; margin-bottom: .35rem; }
.step p { font-size: .93rem; color: var(--ink-soft); margin: 0; }

.why {
  background: var(--surface-alt); border: 1px solid var(--line-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius); padding: 2rem 1.9rem;
}
.why p { font-size: 1.04rem; color: var(--ink-soft); }

.faq { display: grid; gap: 0; }
.faq details {
  border-bottom: 1px solid var(--line-soft); padding: 1.05rem 0;
}
.faq summary {
  cursor: pointer; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; color: var(--accent); font-size: 1.3rem; line-height: 1;
  font-family: var(--serif);
}
.faq details[open] summary::after { content: "–"; }
.faq p { margin: .7rem 0 0; color: var(--ink-soft); font-size: .97rem; }

/* -------------------------------------------------------------------- cards */

.card-grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.card {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.card:hover { box-shadow: var(--shadow); border-color: var(--line); }
@media (prefers-reduced-motion: no-preference) {
  .card:hover { transform: translateY(-2px); }
}

.card-media {
  aspect-ratio: 4 / 3; background: var(--bg-sunk);
  display: grid; place-items: center; overflow: hidden;
}
.card-media img { width: 100%; height: 100%; object-fit: cover; }

/* When there is no photograph, an initial on paper — never a broken frame. */
.monogram {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  background: linear-gradient(160deg, var(--accent-wash), var(--bg-sunk));
  font-family: var(--serif); font-size: 2.6rem; font-weight: 600;
  color: var(--accent); opacity: .8;
}

.card-body { padding: 1.05rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.card-body h3 { font-size: 1.1rem; }
.card-body h3 a { color: var(--ink); text-decoration: none; }
.card-body h3 a:hover { color: var(--accent-deep); }
.card-dates { font-size: .9rem; color: var(--muted); font-variant-numeric: oldstyle-nums; }
.card-sub { font-size: .92rem; color: var(--ink-soft); margin: .15rem 0 0; }
.card-place { font-size: .86rem; color: var(--muted); margin-top: auto; padding-top: .55rem; }

.tag {
  display: inline-block; font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; font-weight: 600;
  color: var(--accent-deep); background: var(--accent-wash);
  padding: .18rem .55rem; border-radius: 999px;
}
.tag-warm { background: var(--warm-wash); color: var(--warm); border-color: var(--warm); }

/* ------------------------------------------------------------------- browse */

.filters {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end;
  padding: 1.15rem; background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius); margin-bottom: 1.75rem;
}
.filters .field { margin: 0; }
.filters .field-search { flex: 1 1 240px; }

.pagination {
  display: flex; gap: .75rem; align-items: center; justify-content: center;
  margin-top: 3rem;
}
.pagination .page-of { color: var(--muted); font-size: .92rem; }

/* ----------------------------------------------------------- memorial page */

.memorial-head { margin-bottom: 2.5rem; }
.memorial-head .in-memory {
  font-family: var(--serif); font-style: italic; color: var(--muted);
  font-size: 1.05rem; margin-bottom: .4rem;
}
.memorial-head h1 { max-width: 20ch; }
.memorial-head .subtitle {
  font-family: var(--serif); font-size: 1.25rem; color: var(--ink-soft);
  margin-top: .6rem; font-style: italic;
}

.dateline {
  display: flex; flex-wrap: wrap; gap: .5rem 1.6rem;
  margin-top: 1.5rem; padding-top: 1.25rem;
  border-top: 1px solid var(--line-soft);
  font-variant-numeric: oldstyle-nums;
}
.dateline > div { min-width: 0; }
.dateline dt {
  font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin-bottom: .15rem;
}
.dateline dd { margin: 0; font-size: 1.02rem; }

.memorial-layout { display: grid; gap: 3rem; }
@media (min-width: 940px) {
  .memorial-layout { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  .memorial-aside { position: sticky; top: 90px; }
}

.prose { max-width: var(--measure); font-size: 1.06rem; }
.prose p { margin-bottom: 1.15em; }
.prose h3, .prose h4 { margin: 2rem 0 .6rem; }
.prose ul, .prose ol { padding-left: 1.35rem; margin: 0 0 1.15em; }
.prose li { margin-bottom: .4em; }
.prose blockquote {
  margin: 1.6rem 0; padding: .3rem 0 .3rem 1.25rem;
  border-left: 2px solid var(--accent); color: var(--ink-soft);
  font-family: var(--serif); font-size: 1.1rem; font-style: italic;
}

/* Photographs: the cover large, the rest in a quiet row beneath. */
.cover-figure { margin: 0 0 2.5rem; }
.cover-figure img {
  width: 100%; border-radius: var(--radius);
  border: 1px solid var(--line-soft); background: var(--bg-sunk);
}
.cover-figure figcaption {
  margin-top: .6rem; font-size: .87rem; color: var(--muted);
}

.gallery {
  display: grid; gap: .8rem; margin-top: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.gallery figure { margin: 0; }
.gallery img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--line-soft);
}
.gallery figcaption { font-size: .8rem; color: var(--muted); margin-top: .35rem; }

/* The still map is ours and loads with the page; the interactive one is
   Google's and waits for a tap. */
.map-panel {
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  overflow: hidden; background: var(--surface);
}
.map-holder { position: relative; display: block; line-height: 0; }
.map-still {
  display: block; width: 100%; height: auto; aspect-ratio: 8 / 5;
  object-fit: cover; background: var(--bg-sunk);
}
.map-open {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  position: relative; cursor: pointer; color: inherit; font: inherit;
}
.map-open-label {
  position: absolute; right: .5rem; bottom: .5rem;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .3rem .6rem; border-radius: 999px;
  background: var(--surface); color: var(--ink-soft);
  font-size: .78rem; line-height: 1.2; white-space: nowrap;
  box-shadow: 0 1px 6px rgb(0 0 0 / .2);
  transition: background .15s ease, color .15s ease;
}
.map-open-label svg { width: 13px; height: 13px; }
.map-open:hover .map-open-label,
.map-open:focus-visible .map-open-label { background: var(--accent); color: #fff; }
.map-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.map-absent {
  aspect-ratio: 8 / 5; background: var(--bg-sunk);
  display: grid; place-items: center; align-content: center;
  text-align: center; padding: 1.2rem; color: var(--accent);
}
.map-absent p {
  font-size: .9rem; color: var(--muted); margin: .7rem 0 0; max-width: 30ch;
}
.illus-horizon { width: 100%; max-width: 230px; height: auto; display: block; }
.map-panel iframe { width: 100%; aspect-ratio: 8 / 5; border: 0; display: block; }
.map-actions {
  display: flex; gap: .6rem; padding: .85rem; border-top: 1px solid var(--line-soft);
  flex-wrap: wrap;
}

.aside-block {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: 1.35rem;
}
.aside-block + .aside-block { margin-top: 1.25rem; }
.aside-block h2 { font-size: 1.08rem; margin-bottom: .6rem; }
.aside-block p { font-size: .92rem; color: var(--ink-soft); }

.qr-block { background: var(--warm-wash); border-color: color-mix(in srgb, var(--warm) 25%, transparent); }
.qr-block img {
  width: 190px; height: 190px; margin: .9rem auto 1rem;
  background: #fff; padding: 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-soft);
}

.notice {
  padding: .85rem 1.05rem; border-radius: var(--radius-sm);
  background: var(--accent-wash); color: var(--accent-deep);
  font-size: .93rem; border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.notice-warm { background: var(--warm-wash); color: var(--ink-soft);
  border-color: color-mix(in srgb, var(--warm) 25%, transparent); }
.notice-error { background: var(--danger-wash); color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 28%, transparent); }

/* -------------------------------------------------------------------- forms */

.field { margin-bottom: 1.5rem; }
.field > label, .field-label {
  display: block; font-weight: 600; font-size: .95rem; margin-bottom: .35rem;
}
.field .hint {
  font-size: .87rem; color: var(--muted); margin: -.15rem 0 .5rem; max-width: 56ch;
}
.field .req { color: var(--muted); font-weight: 400; font-size: .85rem; }

input[type="text"], input[type="email"], input[type="search"],
input[type="date"], select, textarea, .editable {
  width: 100%; font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .62rem .8rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus, .editable:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
input::placeholder, textarea::placeholder { color: var(--muted); }
select { appearance: none; padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23838D87' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .7rem center;
  background-size: 11px;
}

.field-error input, .field-error select, .field-error textarea, .field-error .editable {
  border-color: var(--danger);
}
.error-text { color: var(--danger); font-size: .87rem; margin-top: .35rem; }

.field-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.field-row > .field { flex: 1 1 180px; margin-bottom: 1.5rem; }

.choice-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.choice {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem; cursor: pointer; background: var(--surface);
  display: block; transition: border-color .15s ease, background-color .15s ease;
}
.choice:hover { border-color: var(--accent); }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); }
.choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.choice strong { display: block; font-size: 1rem; margin-bottom: .2rem; }
.choice span { font-size: .87rem; color: var(--ink-soft); }

.checkbox { display: flex; gap: .65rem; align-items: flex-start; font-size: .95rem; }
.checkbox input { margin-top: .32rem; accent-color: var(--accent); flex: none; }

/* The rich-text field. Buttons act on document.execCommand, and everything is
   sanitised again on the server; the toolbar is a convenience, not a
   trust boundary. */
.editor-toolbar {
  display: flex; gap: .25rem; flex-wrap: wrap;
  padding: .4rem; border: 1px solid var(--line); border-bottom: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--surface-alt);
}
.editor-toolbar button {
  font: inherit; font-size: .88rem; background: none; border: 1px solid transparent;
  border-radius: var(--radius-sm); padding: .3rem .6rem; cursor: pointer;
  color: var(--ink-soft); min-width: 32px;
}
.editor-toolbar button:hover { background: var(--accent-wash); color: var(--accent-deep); }
.editor-toolbar .sep { width: 1px; background: var(--line); margin: .2rem .3rem; }
.editable {
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  min-height: 260px; overflow-y: auto; line-height: 1.6;
}
.editable:empty::before { content: attr(data-placeholder); color: var(--muted); }
.editable p { margin: 0 0 .9em; }
.editable ul, .editable ol { padding-left: 1.3rem; }
.editable blockquote {
  margin: .8rem 0; padding-left: 1rem; border-left: 2px solid var(--accent);
  color: var(--ink-soft); font-style: italic;
}
.char-count { font-size: .84rem; color: var(--muted); margin-top: .4rem; text-align: right; }
.char-count.over { color: var(--danger); }

/* Map picker in the editor. */
.picker { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.picker-map { aspect-ratio: 16 / 10; background: var(--bg-sunk); }
.picker-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.picker-bar {
  display: flex; gap: .6rem; align-items: center; flex-wrap: wrap;
  padding: .75rem; border-top: 1px solid var(--line-soft); background: var(--surface-alt);
  font-size: .89rem; color: var(--muted);
}

.photo-slots { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.photo-slot { border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.photo-slot img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.photo-slot .slot-body { padding: .6rem; display: flex; flex-direction: column; gap: .4rem; }
.photo-slot .slot-body form { display: contents; }
.photo-slot.is-cover { border-color: var(--accent); }
.photo-slot .cover-flag {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--accent-deep); font-weight: 600;
}

/* -------------------------------------------------------- account & tables */

.page-list { display: grid; gap: .75rem; }
.page-row {
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  padding: 1rem 1.15rem; background: var(--surface);
  border: 1px solid var(--line-soft); border-radius: var(--radius);
}
.page-row .title { font-family: var(--serif); font-size: 1.1rem; font-weight: 600; margin-right: auto; }
.page-row .title a { color: var(--ink); text-decoration: none; }
.page-row .title a:hover { color: var(--accent-deep); }

.status {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 600; padding: .2rem .6rem; border-radius: 999px;
}
.status-published { background: var(--accent-wash); color: var(--accent-deep); }
.status-draft { background: var(--bg-sunk); color: var(--muted); }
.status-hidden { background: var(--warm-wash); color: var(--warm); }

.danger-zone {
  border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent);
  background: var(--danger-wash);
  border-radius: var(--radius); padding: 1.4rem;
}
.danger-zone h2 { font-size: 1.1rem; color: var(--danger); margin-bottom: .4rem; }

/* ------------------------------------------------------------------- footer */

.site-footer {
  border-top: 1px solid var(--line-soft); background: var(--surface-alt);
  padding: 2.5rem 0; margin-top: auto; font-size: .92rem; color: var(--muted);
}
.site-footer .wrap { display: flex; gap: 2rem; flex-wrap: wrap; justify-content: space-between; }
.site-footer nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.site-footer a { color: var(--ink-soft); text-decoration: none; }
.site-footer a:hover { color: var(--accent-deep); text-decoration: underline; }
.site-footer p { max-width: 42ch; margin: 0; }

/* ------------------------------------------------------------------- misc */

.empty {
  text-align: center; padding: 4rem 1rem; color: var(--muted);
}
.empty svg { width: 40px; height: 40px; opacity: .35; margin-bottom: 1rem; }

.center { text-align: center; }
.mt-lg { margin-top: 2.5rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-header, .site-footer, .btn, .map-panel, .no-print { display: none !important; }
  body { background: #fff; color: #000; }
  .memorial-layout { display: block; }
}

/* ------------------------------------------------- moderation & languages */

/* The language chips on a memorial. Deliberately quiet: a memorial is not a
   product page with a language selector at the top, it is someone's life. */
.page-langs {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  margin: 0 0 2rem; padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line-soft);
}
.page-langs-label {
  font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin-right: .35rem;
}
.page-lang {
  font-size: .86rem; text-decoration: none; color: var(--ink-soft);
  padding: .22rem .65rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
}
.page-lang:hover { border-color: var(--accent); color: var(--accent-deep); }
.page-lang.is-current {
  background: var(--accent-wash); border-color: transparent;
  color: var(--accent-deep); font-weight: 600;
}

.status-pending { background: var(--warm-wash); color: var(--warm); }
.status-archived { background: var(--bg-sunk); color: var(--muted); text-decoration: line-through; }

/* The editor's per-language panels. */
.lang-panels { margin: 2.5rem 0; }
.lang-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 .5rem; }
.lang-tab {
  cursor: pointer; font-size: .88rem; padding: .3rem .8rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  color: var(--ink-soft);
}
.lang-tab.is-filled { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.lang-tab:has(input:checked) {
  background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600;
}
@media (prefers-color-scheme: dark) { .lang-tab:has(input:checked) { color: #14201A; } }
.lang-tab:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.lang-panel {
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 0 1.1rem; margin-bottom: .7rem; background: var(--surface);
}
.lang-panel > summary {
  cursor: pointer; list-style: none; padding: .9rem 0; font-weight: 600;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.lang-panel > summary::-webkit-details-marker { display: none; }
.lang-panel[open] > summary { border-bottom: 1px solid var(--line-soft); margin-bottom: 1.2rem; }
.lang-panel .lang-state {
  font-size: .78rem; font-weight: 500; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em;
}
.lang-panel > :last-child { margin-bottom: 1.2rem; }

/* Inputs hidden behind a styled label.
   Not width:0/height:0 with opacity:0 — that removes the control from the
   accessibility tree in several browsers, and the anti-bot puzzle then
   cannot be solved with a keyboard or a screen reader at all. This is the
   clip pattern, which hides visually and keeps the control focusable. */
.choice input,
.lang-tab input,
.antibot-tile input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------- anti-bot */

/* Off-screen rather than display:none — a script that skips hidden inputs
   still sees this one, which is the point. */
.honeypot {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.antibot { border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1.2rem; margin-bottom: 1.5rem; background: var(--surface-alt); }
.antibot legend { padding: 0 .4rem; }
.antibot-tiles { display: flex; gap: .6rem; flex-wrap: wrap; margin: .8rem 0; }
.antibot-tile {
  cursor: pointer; border: 2px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: .5rem; line-height: 0;
  transition: border-color .15s ease, background-color .15s ease;
}
.antibot-tile svg { width: 46px; height: 46px; fill: var(--accent); }
.antibot-tile:hover { border-color: var(--accent); }
.antibot-tile:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); }
.antibot-tile:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ------------------------------------------------------------------ admin */

/* One person's tool, so it is dense where the rest of the site is airy. */
.admin { max-width: 1200px; }

.stat-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.stat {
  flex: 1 1 8rem; padding: .9rem 1rem; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius); display: flex; flex-direction: column; gap: .1rem;
}
a.stat:hover { border-color: var(--accent); }
.stat-urgent { border-color: var(--warm); background: var(--warm-wash); }
.stat-n { font-family: var(--serif); font-size: 1.7rem; color: var(--ink); line-height: 1; }
.stat-l { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.stat-sub { font-size: .78rem; color: var(--muted); }

.admin-tabs { display: flex; gap: 1.25rem; margin: 2rem 0 1rem;
  border-bottom: 1px solid var(--line-soft); }
.admin-tabs a {
  padding: .5rem 0; text-decoration: none; color: var(--ink-soft);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.admin-tabs a.is-current { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }

.bulk-bar {
  display: flex; gap: .75rem; align-items: center; flex-wrap: wrap;
  padding: .8rem 1rem; background: var(--surface-alt);
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  margin-bottom: .75rem; position: sticky; top: 70px; z-index: 20;
}
.bulk-note { flex: 1 1 16rem; }

.admin-table { font-size: .9rem; }
.admin-table th { white-space: nowrap; }
.admin-table td { vertical-align: middle; }
.admin-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.admin-table .row-pending { background: var(--warm-wash); }
.admin-table .row-blocked { opacity: .6; }
.admin-table input[type="checkbox"] { accent-color: var(--accent); }

/* ------------------------------------------------------ admin: telegram */
.admin-panel {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: 1.5rem; margin-top: 1.5rem;
}
.admin-panel h2 { font-size: 1.05rem; margin: 0 0 .9rem; }
.notice-ok { background: var(--accent-wash); border: 1px solid var(--accent); color: var(--ink); }
.notify-list { display: grid; gap: .2rem; }
.notify-row {
  display: flex; gap: .7rem; align-items: start;
  padding: .7rem .6rem; border-radius: var(--radius-sm); cursor: pointer;
}
.notify-row:hover { background: var(--bg-sunk); }
.notify-row input { margin-top: .25rem; flex: none; }
.notify-row .hint { display: block; margin-top: .15rem; }