/* Waldcard: shared styles for the public page and the admin area. Mobile first (360 px). */

:root {
  color-scheme: light dark;
  --bg: #f6f7f2;
  --surface: #ffffff;
  --surface-2: #eef1e8;
  --fg: #1c271d;
  --muted: #566457;
  --line: #d9dfd2;
  --accent: #2f6b34;
  --accent-fg: #ffffff;
  --accent-soft: #dcebd5;
  --leaf: #3d7f42;
  --leaf-vein: #f6f7f2;
  --stamp: #2f6b34;
  --stamp-fg: #ffffff;
  --stamp-open: #9aa898;
  --warn-bg: #fff3d1;
  --warn-fg: #5f4300;
  --warn-line: #e8c96d;
  --bad: #b3261e;
  --bad-bg: #fde7e4;
  --on-bad: #ffffff;
  --ok: #2f6b34;
  --ok-bg: #e2f0dc;
  --focus: #1f5fbf;
  --radius: 14px;
  --shadow: 0 1px 2px rgb(20 40 20 / .06), 0 2px 8px rgb(20 40 20 / .05);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111611;
    --surface: #182019;
    --surface-2: #1f2a20;
    --fg: #e5ebe2;
    --muted: #a0ae9d;
    --line: #2c382c;
    --accent: #8ccc83;
    --accent-fg: #0f1a10;
    --accent-soft: #23381f;
    --leaf: #8ccc83;
    --leaf-vein: #111611;
    --stamp: #8ccc83;
    --stamp-fg: #0f1a10;
    --stamp-open: #5b6858;
    --warn-bg: #36290a;
    --warn-fg: #f3d58c;
    --warn-line: #6e5518;
    --bad: #ff9b91;
    --bad-bg: #3b1a17;
    --on-bad: #2a0d0a;
    --ok: #8ccc83;
    --ok-bg: #1f3320;
    --focus: #8ab4ff;
    --shadow: none;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
main { max-width: 40rem; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
h1, h2, h3 { line-height: 1.25; }
a { color: var(--accent); text-underline-offset: .15em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.num, .stat-value, .count, .badge { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.notice {
  background: var(--warn-bg); color: var(--warn-fg); border: 1px solid var(--warn-line);
  padding: .7rem .9rem; border-radius: 10px; margin: 1rem 0;
}

/* Header with leaf */
.brand { display: flex; align-items: center; gap: .55rem; }
.brand h1 { font-size: 1.65rem; margin: 0; letter-spacing: -.01em; }
.leaf { color: var(--leaf); flex: none; }
.lead { margin: .4rem 0 0; color: var(--muted); }

/* Key figures */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .65rem .6rem; box-shadow: var(--shadow); min-width: 0;
}
.stat-value { display: block; font-size: 1.5rem; font-weight: 700; line-height: 1.15; }
.stat-label { display: block; font-size: .8rem; color: var(--muted); line-height: 1.25; }

/* Search field */
.search { margin: 1rem 0 0; }
.search-sticky {
  position: sticky; top: 0; z-index: 5;
  margin-left: -1rem; margin-right: -1rem; padding: .6rem 1rem;
  background: var(--bg);
  border-bottom: 1px solid transparent;
}
.search-sticky.is-stuck { border-bottom-color: var(--line); }
.search-row { display: flex; gap: .5rem; }
.search input {
  flex: 1; min-width: 0; min-height: 48px; padding: .6rem .9rem .6rem 2.5rem;
  font: inherit; color: var(--fg); background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23778577' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: .75rem center;
}
.search input:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; }
.search-status { margin: .4rem 0 0; font-size: .875rem; color: var(--muted); }
.search-status:empty { margin: 0; }

/* Buttons and chips */
.button, .chip, .seg a {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 44px; padding: .5rem 1rem; border-radius: 999px;
  font: inherit; font-size: .95rem; text-decoration: none; white-space: nowrap;
  color: var(--fg); background: var(--surface); border: 1px solid var(--line); cursor: pointer;
}
.button:hover, .chip:hover, .seg a:hover { border-color: var(--accent); }
.button-primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); font-weight: 600; }
.js .no-js-only { display: none; }

/* Stamp cards on the public page */
.summary { margin: .25rem 0 0; color: var(--muted); font-size: .9rem; }
.hint { margin: .5rem 0 0; padding: .6rem .85rem; font-size: .9rem; border-radius: 10px; background: var(--surface-2); color: var(--fg); }

/* Collapsible sections: the whole head row toggles, closed by default */
.cards { margin-top: .6rem; }
[data-current-year] > .cards:first-child { margin-top: 1.25rem; }
.previous { margin-top: 2rem; }
.cards-head {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  min-height: 48px; padding: .5rem .85rem; cursor: pointer; list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
}
.cards-head::-webkit-details-marker { display: none; }
.cards-head:hover { border-color: var(--accent); }
.cards-head .chev { width: 1.1rem; height: 1.1rem; flex: none; }
.cards-title { font-size: 1.05rem; margin: 0; }
h2.year.cards-title { font-size: 1.15rem; }
h3.cards-title { font-size: 1rem; }
.cards-count { color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }
details[open] > .cards-head { margin-bottom: .5rem; }
.previous-body { padding: 0 0 0 .5rem; }
.section-empty { margin: 0 0 .5rem; padding: .5rem .85rem; color: var(--muted); font-size: .9rem; }
@media (prefers-reduced-motion: reduce) {
  .chev { transition: none; }
}
.people-cards { list-style: none; margin: 0; padding: 0; }
.people-cards li {
  display: grid; grid-template-columns: 1fr auto; gap: .45rem .75rem; align-items: center;
  padding: .7rem .85rem; margin-bottom: .4rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
}
.people-cards .name { overflow-wrap: anywhere; font-weight: 500; }
.people-cards .points { font-weight: 700; font-variant-numeric: tabular-nums; }
.stampcard { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.stamps {
  display: grid; grid-template-columns: repeat(var(--cols, 10), minmax(0, 1.6rem)); gap: .25rem;
  flex: 0 1 auto; min-width: 0;
}
.stamp {
  aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px dashed var(--stamp-open);
}
.stamp.is-filled { border: 0; background: var(--stamp); color: var(--stamp-fg); --leaf-vein: var(--stamp); }
.stamp svg { width: 64%; height: 64%; }
.stamp-extra { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; white-space: nowrap; }
.stamp-extra .plus { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.stamp-extra .full {
  padding: .1rem .55rem; border-radius: 999px; background: var(--accent-soft); color: var(--fg); font-weight: 600;
}
.empty { padding: 1rem; text-align: center; color: var(--muted); background: var(--surface); border: 1px dashed var(--line); border-radius: 12px; }

/* Personal card for exactly one search hit */
.me {
  margin: 1rem 0 0; padding: 1rem; border-radius: var(--radius);
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--stamp) 45%, var(--line)); box-shadow: var(--shadow);
}
.me-hello { font-size: 1.2rem; margin: 0 0 .75rem; overflow-wrap: anywhere; }
.me .stamps { grid-template-columns: repeat(var(--cols, 10), minmax(0, 2.1rem)); gap: .3rem; }
.me-rest { margin: .75rem 0 0; font-weight: 600; }
.me-next { margin: .35rem 0 0; color: var(--muted); }

/* Footer */
.footer { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.footer p { margin: .75rem 0 0; }
.footer .footer-lead { margin: 0 0 1rem; }
.footer .button { width: 100%; }

/* ---------- Admin ---------- */
.admin main { max-width: 64rem; }
.admin-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1rem; }
.admin-head a { display: inline-flex; align-items: center; min-height: 44px; }
h2.section { font-size: 1.2rem; margin: 2rem 0 .5rem; }

/* Status card as traffic light */
.status {
  margin: 1rem 0 0; padding: .9rem 1rem; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); border-left-width: 6px; box-shadow: var(--shadow);
}
.status-ok { border-left-color: var(--ok); }
.status-warn { border-left-color: var(--warn-line); background: var(--warn-bg); }
.status-error { border-left-color: var(--bad); background: var(--bad-bg); }
.status-head { display: flex; align-items: center; gap: .6rem; }
.status-head h2 { font-size: 1.1rem; margin: 0; }
.lamp { width: 14px; height: 14px; border-radius: 50%; flex: none; background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 22%, transparent); }
.status-warn .lamp { background: #d39b00; box-shadow: 0 0 0 4px rgb(211 155 0 / .25); }
.status-error .lamp { background: var(--bad); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bad) 25%, transparent); }
.status ul.reasons { margin: .5rem 0 0; padding-left: 1.2rem; }
.times { display: grid; grid-template-columns: 1fr; gap: .15rem 1rem; margin: .75rem 0 0; }
.times div { display: flex; justify-content: space-between; gap: 1rem; }
.times dt { color: var(--muted); }
.times dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }
.status details { margin-top: .5rem; }
.status summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--accent); }
.diag { list-style: none; padding: 0; margin: .25rem 0 .75rem; }
.diag li { padding: .15rem 0; }
.diag .ok { color: var(--ok); } .diag .no { color: var(--bad); }
dl.facts { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
dl.facts dt { color: var(--muted); font-size: .85rem; margin-top: .5rem; }
dl.facts dd { margin: 0; overflow-wrap: anywhere; }

/* Sticky toolbar */
.toolbar {
  position: sticky; top: 0; z-index: 5;
  margin: 1rem -1rem 0; padding: .5rem 0;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.toolbar-row {
  display: flex; gap: .5rem; align-items: center;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  padding: .2rem 1rem; scrollbar-width: none;
}
.toolbar-row::-webkit-scrollbar { display: none; }
.toolbar-row > * { flex: none; scroll-snap-align: start; }
.chip[aria-current] { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); font-weight: 600; }
.chip .warn-sign { color: #b07a00; }
.chip[aria-current] .warn-sign { color: inherit; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); padding: 2px; }
.seg a { border: 0; background: transparent; padding: .5rem .85rem; min-height: 40px; }
.seg a[aria-current] { background: var(--accent-soft); color: var(--fg); font-weight: 600; }
.count {
  display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 .4rem;
  border-radius: 999px; font-size: .8rem; font-weight: 700; background: var(--surface-2); color: var(--fg);
}
.count.is-alert { background: var(--bad); color: var(--on-bad); }
.toolbar .divider { width: 1px; height: 28px; background: var(--line); }

/* Person list */
.people { margin-top: .5rem; }
.person {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; margin-bottom: .4rem;
}
.person > summary {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .1rem .6rem;
  min-height: 52px; padding: .5rem .85rem; cursor: pointer; list-style: none;
}
.person > summary::-webkit-details-marker, .card > summary::-webkit-details-marker { display: none; }
.person .who { min-width: 0; }
.person .who strong { display: block; font-weight: 600; overflow-wrap: anywhere; }
.id { font-size: .8rem; color: var(--muted); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.chev { width: 1rem; height: 1rem; color: var(--muted); transition: transform .15s ease; }
details[open] > summary .chev { transform: rotate(90deg); }
.person-body { padding: 0 .85rem .85rem; }

.badge {
  display: inline-flex; align-items: center; gap: .25rem; padding: .1rem .55rem; border-radius: 999px;
  font-size: .8rem; font-weight: 600; white-space: nowrap; background: var(--accent-soft); color: var(--fg);
}
.badge-points { font-size: .95rem; padding: .2rem .7rem; }
.badge-dup { background: var(--warn-bg); color: var(--warn-fg); border: 1px solid var(--warn-line); }
.badge-tag { background: var(--warn-bg); color: var(--warn-fg); }
.badge-zero { background: var(--surface-2); color: var(--muted); }
.badge-late { background: var(--bad-bg); color: var(--bad); border: 1px solid currentColor; }

/* Entries: cards below 640 px, table above */
.entries { width: 100%; border-collapse: collapse; font-size: .92rem; }
.entries thead { display: none; }
.entries, .entries tbody { display: block; }
.entries tr {
  display: grid; grid-template-columns: 1fr auto auto; column-gap: .4rem;
  grid-template-areas: "person person person" "date weight dup" "type type type" "note note note" "sub sub sub";
  padding: .7rem .8rem; margin: .5rem 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2);
}
.entries td { display: block; padding: 0; min-width: 0; overflow-wrap: anywhere; }
.entries td:empty { display: none; }
.entries .c-person { grid-area: person; margin-bottom: .2rem; }
.entries .c-date { grid-area: date; font-weight: 600; }
.entries .c-weight { grid-area: weight; }
.entries .c-dup { grid-area: dup; }
.entries .c-type { grid-area: type; margin-top: .15rem; }
.entries .c-note { grid-area: note; color: var(--muted); margin-top: .15rem; }
.entries .c-sub { grid-area: sub; color: var(--muted); font-size: .8rem; margin-top: .35rem; }
.entries .c-note::before, .entries .c-sub::before { content: attr(data-label) " "; font-weight: 600; }
.entries tr.dup .c-type, .entries tr.dup .c-date,
.entries tr.late .c-type, .entries tr.late .c-date { text-decoration: line-through; color: var(--muted); }
.card-only { display: inline; }

@media (min-width: 640px) {
  .entries { display: table; }
  .entries thead { display: table-header-group; }
  .entries tbody { display: table-row-group; }
  .entries tr { display: table-row; padding: 0; margin: 0; border: 0; background: none; }
  .entries th, .entries td { display: table-cell; text-align: left; vertical-align: top; padding: .45rem .5rem; border-bottom: 1px solid var(--line); }
  .entries td:empty { display: table-cell; }
  .entries th { font-size: .8rem; color: var(--muted); font-weight: 600; }
  .entries .c-note::before, .entries .c-sub::before { content: none; }
  .entries .c-sub, .entries .c-note { font-size: inherit; margin: 0; }
  .entries .c-date, .entries .c-type { margin: 0; }
  .entries .c-weight, .entries .c-dup { text-align: center; }
  .card-only { display: none; }

  .times { grid-template-columns: repeat(3, auto); justify-content: start; }
  .times div { display: block; }
  .times dd { text-align: left; }
  dl.facts { grid-template-columns: max-content 1fr; gap: .3rem 1rem; }
  dl.facts dt { margin: 0; }
  .footer .button { width: auto; }
}

/* Review list as cards */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  margin-bottom: .5rem; box-shadow: var(--shadow); scroll-margin-top: 8rem;
}
.card > summary {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: .6rem;
  min-height: 56px; padding: .6rem .9rem; cursor: pointer; list-style: none;
}
.card .letter {
  display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%;
  background: var(--surface-2); font-weight: 700; font-size: .85rem;
}
.card.has-items .letter { background: var(--warn-bg); color: var(--warn-fg); }
.card-body { padding: 0 .9rem .9rem; }
#pruefliste, #formular { scroll-margin-top: 8rem; }

/* Section "Formular": cards without letter, simple tables */
.card.card-plain > summary { grid-template-columns: 1fr auto auto; }
.table-wrap { overflow-x: auto; }
table.plain { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.plain th, table.plain td { text-align: left; vertical-align: top; padding: .45rem .5rem; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
table.plain th { font-size: .8rem; color: var(--muted); font-weight: 600; }
table.plain .num { text-align: center; font-variant-numeric: tabular-nums; }

@media (min-width: 900px) {
  main { padding-top: 2rem; }
  .stat-value { font-size: 1.8rem; }
}

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