/* girok — memorial archive
   muted, somber, serif-leaning palette. minimal ornamentation. */
:root{
  --bg:        #f6f5f2;
  --bg-soft:   #ecebe6;
  --ink:       #1c1c1c;
  --ink-soft:  #4a4a4a;
  --muted:     #8a8a85;
  --line:      #d8d6cf;
  --line-soft: #e5e3dc;
  --accent:    #2a2a2a;
  --mark:                  #6b1e1e;   /* default = tragedy: somber red */
  --mark-tragedy:          #6b1e1e;
  --mark-celebration:      #a07b1c;   /* warm gold */
  --mark-milestone:        #3c5a78;   /* somber blue-grey */
  --today-bg:  #1c1c1c;
  --today-fg:  #f6f5f2;
  --input-bg:  #fdfcfa;
  --input-bg-focus: #ffffff;
  --shadow-color: rgba(0,0,0,0.05);
}

/* warm-dark palette — night vigil, not cold "tech dark" */
[data-theme="dark"]{
  --bg:        #14130f;
  --bg-soft:   #1c1a16;
  --ink:       #e9e5d8;
  --ink-soft:  #b8b3a4;
  --muted:     #7a7468;
  --line:      #2e2b25;
  --line-soft: #232019;
  --accent:    #d6d1c2;
  --mark:                  #c66052;
  --mark-tragedy:          #c66052;
  --mark-celebration:      #d4a747;
  --mark-milestone:        #6e8aa6;
  --today-bg:  #e9e5d8;
  --today-fg:  #14130f;
  --input-bg:  #1c1a16;
  --input-bg-focus: #232019;
  --shadow-color: rgba(0,0,0,0.4);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);}
body{
  font-family:'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight:300;
  line-height:1.7;
  font-size:16px;
  letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Noto Serif KR', serif;
  font-weight:500;
  line-height:1.35;
  color:var(--ink);
  margin:1.2em 0 0.6em;
  letter-spacing:-0.02em;
}
h1{font-size:1.8rem}
h2{font-size:1.35rem}
h3{font-size:1.1rem}
p{margin:0.6em 0}
a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line)}
a:hover{border-bottom-color:var(--ink)}
.muted{color:var(--muted)}
.container{max-width:780px; margin:0 auto; padding:0 1.2rem;}

/* header */
.site-header{
  border-bottom:1px solid var(--line);
  background:var(--bg);
  position:sticky; top:0; z-index:10;
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:1rem; padding-bottom:1rem;
}
.brand{
  font-family:'Noto Serif KR', serif;
  font-size:1.15rem;
  font-weight:500;
  border:none;
  display:flex; align-items:center; gap:0.4em;
}
.brand-mark{color:var(--mark); font-size:1.6em; line-height:0.5; transform:translateY(-2px)}

/* event_type variants — applied to anniv badges, calendar marks, and incidents */
.incident.event-celebration .anniv,
.anniv.event-celebration{background:var(--mark-celebration); color:#fff}
.incident.event-milestone  .anniv,
.anniv.event-milestone {background:var(--mark-milestone); color:#fff}
/* anniv.soon (D-N) — subtle, just hint the type via left border */
.anniv.soon.event-celebration{border-left:3px solid var(--mark-celebration); padding-left:0.5em}
.anniv.soon.event-milestone {border-left:3px solid var(--mark-milestone);  padding-left:0.5em}
.anniv.soon.event-tragedy   {border-left:3px solid var(--mark-tragedy);    padding-left:0.5em}

/* calendar marks coloured by event_type */
.calendar .cell .mark.event-celebration{background:var(--mark-celebration)}
.calendar .cell .mark.event-milestone {background:var(--mark-milestone)}
/* default .mark already uses var(--mark) which equals tragedy red */
.site-nav a{
  margin-left:1.2rem;
  border:none;
  font-size:0.95rem;
  color:var(--ink-soft);
}
.site-nav a:hover{color:var(--ink)}
.site-nav a.admin-link{color:var(--mark)}

/* hero on home */
.today-block{
  margin:2rem 0 1.5rem;
  padding-bottom:1.5rem;
  border-bottom:1px solid var(--line);
}
.today-block .date{
  font-family:'Noto Serif KR', serif;
  font-size:2rem;
  font-weight:500;
  letter-spacing:-0.03em;
}
.today-block .label{
  color:var(--muted);
  font-size:0.9rem;
  text-transform:uppercase;
  letter-spacing:0.15em;
}

/* incident card */
.incident{
  padding:1.2rem 0;
  border-bottom:1px solid var(--line-soft);
}
.incident:last-child{border-bottom:none}
.incident-name{
  font-family:'Noto Serif KR', serif;
  font-size:1.15rem;
  font-weight:500;
  margin:0 0 0.3rem;
}
.incident-name a{border:none}
.incident-flag{
  display:inline-block;
  margin-right:0.25em;
  font-size:0.9em;
  vertical-align:0.05em;
  filter:saturate(0.85);
  cursor:help;
}
.detail-header h1 .incident-flag{font-size:0.75em; margin-right:0.4em; vertical-align:0.18em}

/* country filter chips */
.country-filter{
  display:flex;
  flex-wrap:wrap;
  gap:0.4rem 0.5rem;
  margin:1.2rem 0 1.5rem;
  padding-bottom:1rem;
  border-bottom:1px solid var(--line-soft);
}
.country-filter .chip{
  display:inline-flex;
  align-items:center;
  gap:0.35em;
  padding:0.25em 0.7em;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:0.82rem;
  color:var(--ink-soft);
  background:transparent;
  text-decoration:none;
  letter-spacing:0.04em;
  transition:border-color 0.15s, color 0.15s, background 0.15s;
}
.country-filter .chip:hover{border-color:var(--ink-soft); color:var(--ink)}
.country-filter .chip.active{
  background:var(--ink);
  color:var(--bg);
  border-color:var(--ink);
}
.country-filter .chip-flag{filter:saturate(0.85)}
.country-filter .chip-count{
  font-size:0.72em;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.country-filter .chip.active .chip-count{color:var(--bg-soft)}

/* user groups */
.group-dot{
  display:inline-block;
  width:0.7em; height:0.7em;
  border-radius:50%;
  background:var(--line);
  vertical-align:-0.05em;
  margin-right:0.25em;
}
.group-dot.dashed{
  background:transparent;
  border:1px dashed var(--muted);
}
.color-picker{
  display:flex;
  flex-wrap:wrap;
  gap:0.6rem;
  margin-top:0.4rem;
}
.color-picker label{
  display:inline-flex;
  align-items:center;
  cursor:pointer;
}
.color-picker input[type="radio"]{
  appearance:none;
  -webkit-appearance:none;
  width:0; height:0;
  margin:0;
}
.color-picker input[type="radio"] + .group-dot{
  width:1.4em; height:1.4em;
  margin-right:0;
  outline:2px solid transparent;
  outline-offset:2px;
  transition:outline-color 0.15s;
}
.color-picker input[type="radio"]:checked + .group-dot{
  outline-color:var(--ink);
}
.group-filter{
  display:flex;
  flex-wrap:wrap;
  gap:0.4rem 0.5rem;
  margin:1rem 0 1.5rem;
  padding-bottom:1rem;
  border-bottom:1px solid var(--line-soft);
}
.group-filter .chip{
  display:inline-flex;
  align-items:center;
  gap:0.35em;
  padding:0.25em 0.7em;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:0.86rem;
  color:var(--ink-soft);
  background:transparent;
  text-decoration:none;
  transition:border-color 0.15s, color 0.15s, background 0.15s;
}
.group-filter .chip:hover{border-color:var(--ink-soft); color:var(--ink)}
.group-filter .chip.active{
  background:var(--ink);
  color:var(--bg);
  border-color:var(--ink);
}
.group-filter .chip.active .group-dot{
  outline:1px solid var(--bg);
  outline-offset:1px;
}
.group-filter .chip-count{
  font-size:0.72em;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.group-filter .chip.active .chip-count{color:var(--bg-soft)}

/* groups admin table */
.groups-table .group-dot{width:1.1em; height:1.1em}
.groups-table details summary{cursor:pointer; color:var(--ink-soft); font-size:0.9rem; padding:0.2em 0}
.groups-table details summary:hover{color:var(--ink)}
.groups-table .link-button{
  background:transparent;
  border:none;
  color:var(--mark);
  cursor:pointer;
  font:inherit;
  padding:0.2em 0;
}
.groups-table .link-button:hover{text-decoration:underline}

/* locale switcher on incident detail page */
.locale-switcher{
  margin-top:0.8rem;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0.3rem 0.4rem;
}
.locale-switcher .lv-link{
  display:inline-block;
  padding:0.15em 0.55em;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:0.72rem;
  letter-spacing:0.08em;
  color:var(--ink-soft);
  text-decoration:none;
}
.locale-switcher .lv-link:hover{border-color:var(--ink-soft); color:var(--ink)}
.locale-switcher .lv-link.active{
  background:var(--ink);
  color:var(--bg);
  border-color:var(--ink);
}
/* multi-flag spacing */
.incident-name .incident-flag + .incident-flag,
.detail-header h1 .incident-flag + .incident-flag{
  margin-left:-0.15em;
}

/* admin locale-block (repeating section in admin form) */
.locale-block{
  border:1px solid var(--line);
  background:var(--bg-soft);
  padding:1rem 1rem 0.6rem;
  margin:0.8rem 0;
}
.locale-block .locale-head{
  display:flex;
  align-items:center;
  gap:0.6rem;
  margin-bottom:0.8rem;
  padding-bottom:0.6rem;
  border-bottom:1px solid var(--line-soft);
}
.locale-block .locale-head label{
  display:inline-flex;
  align-items:center;
  gap:0.3em;
  margin:0;
  font-size:0.85rem;
  color:var(--ink-soft);
}
.locale-block .lang-code{
  flex:1;
  max-width:14rem;
  font-family:monospace;
  letter-spacing:0.05em;
}
.locale-block .remove-locale{
  font-size:0.82rem;
  padding:0.3em 0.7em;
  margin-left:auto;
}
.locale-block label{
  margin:0.5rem 0;
}
.incident-meta{
  color:var(--ink-soft);
  font-size:0.9rem;
  display:flex; flex-wrap:wrap; gap:0.6rem 1rem;
  margin-top:0.3rem;
}
.incident-meta .sep{color:var(--line)}
.incident-summary{
  color:var(--ink-soft);
  font-size:0.95rem;
  margin-top:0.5rem;
}

/* anniversary badge */
.anniv{
  display:inline-block;
  padding:0.15em 0.6em;
  background:var(--today-bg);
  color:var(--today-fg);
  font-family:'Noto Serif KR', serif;
  font-size:0.85rem;
  font-weight:500;
  letter-spacing:0.05em;
}
.anniv.soon{background:var(--bg-soft); color:var(--ink); border:1px solid var(--line)}
.dplus{
  font-family:'Noto Serif KR', serif;
  color:var(--muted);
  font-size:0.85rem;
  font-variant-numeric:tabular-nums;
}

/* incident detail */
.detail-header{
  margin:2rem 0 1.5rem;
  padding-bottom:1.5rem;
  border-bottom:1px solid var(--line);
}
.detail-header h1{font-size:2rem; margin-bottom:0.4rem}
.detail-numbers{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
  gap:1rem;
  margin:1.5rem 0;
  padding:1.2rem;
  background:var(--bg-soft);
}
.detail-numbers .num{
  font-family:'Noto Serif KR', serif;
  font-size:1.6rem;
  font-weight:500;
}
.detail-numbers .lbl{
  font-size:0.85rem;
  color:var(--muted);
  letter-spacing:0.05em;
}

/* calendar */
.cal-nav{
  display:flex; align-items:center; justify-content:space-between;
  margin:1.5rem 0 1rem;
}
.cal-nav h2{margin:0; display:inline-flex; align-items:baseline; gap:0.7rem}
.cal-nav a{border:none; color:var(--ink-soft); font-size:1rem; padding:0.3em 0.6em}
.cal-nav a:hover{color:var(--ink)}
.cal-nav h2 .today-link{
  font-family:'Noto Sans KR', sans-serif;
  font-size:0.78rem;
  font-weight:400;
  letter-spacing:0.08em;
  color:var(--mark);
  border:1px solid var(--line);
  padding:0.25em 0.7em;
  border-radius:999px;
  transition:border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.cal-nav h2 .today-link:hover{
  border-color:var(--mark);
  background:var(--mark);
  color:var(--bg);
}
.calendar{
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.calendar .dow,
.calendar .cell{
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:0.5rem;
  min-height:80px;
  min-width:0;
  font-size:0.85rem;
  background:var(--bg);
  position:relative;
  overflow:hidden;
}
.calendar .dow{
  min-height:0;
  text-align:center;
  font-weight:500;
  background:var(--bg-soft);
  color:var(--ink-soft);
}
.calendar .dow.sun{color:var(--mark)}
.calendar .cell.other{background:var(--line-soft); color:var(--muted)}
.calendar .cell.today{background:var(--today-bg); color:var(--today-fg)}
.calendar .cell .daynum{
  font-family:'Noto Serif KR', serif;
  font-size:1rem;
  font-weight:500;
}
.calendar .cell .mark{
  display:block;
  margin-top:0.3rem;
  padding:0.15em 0.4em;
  background:var(--mark);
  color:#fff;
  font-size:0.75rem;
  border:none;
  line-height:1.4;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.calendar .cell.today .mark{background:#fff; color:var(--today-bg)}

/* form (admin) */
form.stack{display:flex; flex-direction:column; gap:1rem; max-width:560px; margin:1.5rem 0}
form.stack label{display:flex; flex-direction:column; gap:0.3rem; font-size:0.9rem; color:var(--ink-soft)}
form.stack input[type="text"],
form.stack input[type="date"],
form.stack input[type="number"],
form.stack input[type="password"],
form.stack textarea,
form.stack select{
  font-family:inherit;
  font-size:0.95rem;
  padding:0.55rem 0.7rem;
  border:1px solid var(--line);
  background:var(--input-bg);
  color:var(--ink);
  border-radius:0;
}
form.stack input[type="date"]::-webkit-calendar-picker-indicator{
  filter: var(--cal-icon-filter, none);
}
[data-theme="dark"] form.stack input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(0.85);
}
form.stack textarea{min-height:140px; resize:vertical; font-family:'Noto Sans KR', sans-serif}
form.stack .row{display:grid; grid-template-columns:1fr 1fr 1fr; gap:0.8rem}
form.stack button,
.btn{
  display:inline-block;
  font-family:inherit;
  font-size:0.95rem;
  padding:0.6rem 1.2rem;
  background:var(--ink);
  color:var(--bg);
  border:none;
  cursor:pointer;
  border-radius:0;
}
form.stack button.secondary,
.btn.secondary{background:transparent; color:var(--ink); border:1px solid var(--line)}
form.stack button.danger,
.btn.danger{background:var(--mark)}
.flash{padding:0.8rem 1rem; background:var(--bg-soft); border-left:3px solid var(--ink); margin:1rem 0; font-size:0.95rem}
.flash.error{border-left-color:var(--mark)}
.flash.success{border-left-color:#4a7a4a}
.checkbox-row{display:flex; align-items:center; gap:0.6rem; font-size:0.92rem; padding:0.4rem 0}
.checkbox-row input[type="checkbox"]{width:1.05rem; height:1.05rem; flex:0 0 auto}
.oauth-btn.disabled{opacity:0.45; pointer-events:none; filter:saturate(0.5)}
.ad-slot{margin:2rem 0; min-height:1px; text-align:center; overflow:hidden}
.ad-slot ins{display:block; margin:0 auto}
.field.shake{animation:shakeField 0.4s}
@keyframes shakeField{
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

/* admin table */
table.admin{
  width:100%; border-collapse:collapse; margin:1.5rem 0;
  font-size:0.92rem;
}
table.admin th, table.admin td{
  text-align:left; padding:0.7rem 0.6rem; border-bottom:1px solid var(--line-soft);
}
table.admin th{color:var(--muted); font-weight:500; font-size:0.85rem; letter-spacing:0.05em}
table.admin a{border:none}
table.admin .actions a{margin-right:0.8rem; color:var(--ink-soft)}
table.admin .actions a.del{color:var(--mark)}

/* footer */
.site-footer{
  border-top:1px solid var(--line);
  margin-top:4rem;
  padding:2rem 0;
  color:var(--ink-soft);
  font-size:0.9rem;
  text-align:center;
}
.site-footer p{margin:0.3em 0}
.site-footer .muted{font-family:'Noto Serif KR', serif; font-size:1rem}
.site-footer .footer-links{
  margin-top:0.9rem;
  font-size:0.82rem;
  color:var(--muted);
}
.site-footer .footer-links a{
  color:var(--ink-soft);
  border:none;
  padding:0 0.4em;
}
.site-footer .footer-links a:hover{color:var(--ink); text-decoration:underline}
.site-footer .footer-sep{color:var(--line); user-select:none}

.memorial-legal-notice{
  text-align:center;
  margin:1.5rem 0 0;
  font-size:0.78rem;
  line-height:1.7;
  color:var(--muted);
  padding:0 0.5rem;
}
.memorial-legal-notice a{
  color:var(--ink-soft);
  border-bottom:1px solid var(--line);
}
.memorial-legal-notice a:hover{color:var(--ink); border-bottom-color:var(--ink-soft)}

/* company info definition list (about page) */
.company-info{
  display:grid;
  grid-template-columns:max-content 1fr;
  gap:0.5rem 1.2rem;
  margin:1rem 0 1.5rem;
  padding:1.2rem 1.4rem;
  background:var(--bg-soft);
  border:1px solid var(--line-soft);
  font-size:0.95rem;
}
.company-info dt{
  color:var(--muted);
  font-size:0.85rem;
  letter-spacing:0.04em;
  margin:0;
  align-self:start;
  padding-top:0.15em;
}
.company-info dd{
  margin:0;
  color:var(--ink);
  line-height:1.6;
}
.company-info a{
  border:none;
  color:var(--ink);
  border-bottom:1px solid var(--line);
}
.company-info a:hover{border-bottom-color:var(--ink)}

@media (max-width: 600px){
  .company-info{
    grid-template-columns:1fr;
    gap:0.15rem 0;
    padding:1rem;
  }
  .company-info dt{margin-top:0.7rem; padding-top:0}
  .company-info dt:first-child{margin-top:0}
}

/* empty state */
.empty{
  padding:3rem 1rem;
  text-align:center;
  color:var(--muted);
  border:1px dashed var(--line);
  margin:2rem 0;
}

/* sources */
.sources{margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--line)}
.sources h3{font-size:0.95rem; color:var(--muted); margin-bottom:0.5rem; letter-spacing:0.05em}
.sources ul{padding-left:1.2rem; margin:0.3rem 0}
.sources li{font-size:0.9rem; margin:0.2rem 0}

/* ------------ memorial-tone auth pages (signup, login) ------------ */
.memorial-page{
  max-width:460px;
  margin:0 auto;
  padding:4rem 1.5rem 2rem;
  text-align:center;
}
.memorial-ornament{
  font-family:'Noto Serif KR', serif;
  font-size:2.4rem;
  color:var(--mark);
  line-height:0.5;
  margin-bottom:3rem;
  user-select:none;
}
.memorial-heading{
  font-family:'Noto Serif KR', serif;
  font-size:1.55rem;
  font-weight:500;
  letter-spacing:-0.02em;
  color:var(--ink);
  margin:0 0 2rem;
  line-height:1.5;
}
.memorial-intro{
  font-family:'Noto Serif KR', serif;
  font-size:1.02rem;
  font-weight:400;
  color:var(--ink-soft);
  line-height:2.0;
  margin:0 0 1.8rem;
}
.memorial-intro p{margin:0}
.memorial-private{
  color:var(--muted);
  font-size:0.88rem;
  margin:0 0 2rem;
  letter-spacing:0.02em;
}
.memorial-divider{
  width:48px;
  height:0;
  border:none;
  border-top:1px solid var(--line);
  margin:2rem auto 2.8rem;
}
.memorial-form{
  text-align:left;
  margin:0 auto;
}
.memorial-form .field{
  margin-bottom:1.4rem;
}
.memorial-form .field-label{
  display:block;
  font-family:'Noto Sans KR', sans-serif;
  font-size:0.82rem;
  font-weight:500;
  color:var(--ink-soft);
  margin-bottom:0.5rem;
  letter-spacing:0.05em;
}
.memorial-form .field-label .opt{
  color:var(--muted);
  font-size:0.76rem;
  font-weight:400;
  margin-left:0.4em;
  letter-spacing:0;
}
.memorial-form input{
  width:100%;
  display:block;
  border:1px solid var(--line);
  background:var(--input-bg);
  padding:0.78rem 0.95rem;
  font-size:1rem;
  color:var(--ink);
  font-family:inherit;
  border-radius:0;
  transition:border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  -webkit-appearance:none;
  appearance:none;
}
.memorial-form input:hover{
  border-color:var(--ink-soft);
}
.memorial-form input:focus{
  outline:none;
  border-color:var(--ink);
  background:var(--input-bg-focus);
  box-shadow:inset 0 -2px 0 0 var(--ink);
}
.memorial-form input::placeholder{color:var(--line)}
.memorial-form input:-webkit-autofill{
  -webkit-box-shadow:0 0 0 100px var(--input-bg) inset;
  -webkit-text-fill-color:var(--ink);
}
.memorial-cta{
  text-align:center;
  margin:3rem 0 1rem;
}
.memorial-cta button{
  font-family:'Noto Serif KR', serif;
  font-size:0.98rem;
  font-weight:500;
  padding:0.85rem 3rem;
  background:var(--ink);
  color:var(--bg);
  border:none;
  cursor:pointer;
  letter-spacing:0.5em;
  text-indent:0.5em;
  transition:opacity 0.2s ease;
}
.memorial-cta button:hover{opacity:0.85}
.memorial-footnote{
  text-align:center;
  color:var(--muted);
  font-size:0.9rem;
  margin:1.5rem 0 0;
}
.memorial-footnote a{
  border:none;
  color:var(--ink-soft);
  margin-left:0.35em;
  border-bottom:1px solid var(--line);
}
.memorial-footnote a:hover{border-bottom-color:var(--ink); color:var(--ink)}
.memorial-page .flash{
  text-align:left;
  margin:0 0 2rem;
}

/* oauth (Google / SNS) buttons on memorial auth pages */
.oauth-divider{
  display:flex;
  align-items:center;
  gap:0.7rem;
  margin:1.5rem 0 1rem;
  color:var(--muted);
  font-size:0.82rem;
  letter-spacing:0.08em;
}
.oauth-divider::before,
.oauth-divider::after{
  content:"";
  flex:1;
  height:0;
  border-top:1px solid var(--line);
}
.oauth-divider span{padding:0 0.2em}
.oauth-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.55em;
  width:100%;
  padding:0.6rem 1rem;
  border:1px solid var(--line);
  background:var(--input-bg);
  color:var(--ink);
  text-decoration:none;
  font-family:'Noto Sans KR', sans-serif;
  font-size:0.92rem;
  font-weight:500;
  transition:border-color 0.18s ease, background 0.18s ease;
  margin:0.5rem 0;
}
.oauth-btn:hover{
  border-color:var(--ink-soft);
  background:var(--input-bg-focus);
}
.oauth-btn .oauth-icon{
  width:14px; height:14px;
  flex-shrink:0;
}

/* hide the global site-header on memorial auth pages to preserve focus */
body.memorial-body .site-header{
  background:transparent;
  border-bottom:none;
  position:static;
}
body.memorial-body .site-header .site-nav{visibility:hidden}
body.memorial-body .site-footer{border-top:none}

/* ============== theme toggle button ============== */
.theme-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.9rem; height:1.9rem;
  padding:0;
  margin-left:0.6rem;
  background:transparent;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--ink-soft);
  cursor:pointer;
  font-size:0.95rem;
  line-height:1;
  transition:border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
  font-family:inherit;
  position:relative;
  flex-shrink:0;
}
.theme-toggle:hover{
  border-color:var(--ink);
  color:var(--ink);
}
.theme-toggle .theme-icon-sun,
.theme-toggle .theme-icon-moon{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity 0.2s ease, transform 0.2s ease;
}
/* default (light) shows the moon — click to go dark */
.theme-toggle .theme-icon-sun{opacity:0; transform:rotate(-90deg)}
.theme-toggle .theme-icon-moon{opacity:1; transform:rotate(0)}
/* in dark mode, show the sun — click to go light */
[data-theme="dark"] .theme-toggle .theme-icon-sun{opacity:1; transform:rotate(0)}
[data-theme="dark"] .theme-toggle .theme-icon-moon{opacity:0; transform:rotate(90deg)}

/* hide on memorial-body auth pages (we hide nav there anyway, but keep toggle reachable in top-right) */
body.memorial-body .theme-toggle{visibility:visible; position:fixed; top:1rem; right:1rem}

/* ============== language toggle (dropdown) ============== */
.lang-toggle{
  position:relative;
  display:inline-flex;
  margin-left:0.5rem;
  flex-shrink:0;
}
.lang-btn{
  display:inline-flex;
  align-items:center;
  gap:0.25em;
  background:transparent;
  border:1px solid var(--line);
  color:var(--ink-soft);
  font-family:inherit;
  font-size:0.78rem;
  letter-spacing:0.06em;
  padding:0.3em 0.65em;
  border-radius:999px;
  cursor:pointer;
  line-height:1.4;
  transition:border-color 0.18s ease, color 0.18s ease;
}
.lang-btn:hover{border-color:var(--ink); color:var(--ink)}
.lang-menu{
  position:absolute;
  top:calc(100% + 0.4rem);
  right:0;
  width:18rem;
  max-width:90vw;
  margin:0;
  background:var(--bg);
  border:1px solid var(--line);
  box-shadow:0 6px 18px var(--shadow-color);
  z-index:50;
  display:none;
  flex-direction:column;
  overflow:hidden;
}
.lang-toggle.open .lang-menu{display:flex}
.lang-menu .lang-search{
  width:100%;
  padding:0.6rem 0.9rem;
  border:none;
  border-bottom:1px solid var(--line);
  background:var(--input-bg);
  color:var(--ink);
  font-family:inherit;
  font-size:0.92rem;
  outline:none;
}
.lang-menu .lang-search:focus{background:var(--input-bg-focus)}
.lang-menu .lang-list{
  list-style:none;
  margin:0; padding:0.25rem 0;
  max-height:60vh;
  overflow-y:auto;
  overscroll-behavior:contain;        /* stop scroll chaining to <body> */
  -webkit-overflow-scrolling:touch;
}
.lang-menu .lang-list li{margin:0}
.lang-menu .lang-list button{
  display:flex;
  align-items:center;
  gap:0.7em;
  width:100%;
  padding:0.5rem 0.9rem;
  background:transparent;
  border:none;
  font-family:inherit;
  font-size:0.92rem;
  color:var(--ink);
  text-align:left;
  cursor:pointer;
  line-height:1.4;
}
.lang-menu .lang-list button:hover{background:var(--bg-soft)}
.lang-menu .lang-list button.kb-highlight{
  background:var(--bg-soft);
  outline:2px solid var(--ink-soft);
  outline-offset:-2px;
}
.lang-menu .lang-list button.active{
  background:var(--bg-soft);
  font-weight:500;
}
.lang-menu .lang-list button.active::after{
  content:"✓";
  margin-left:auto;
  color:var(--mark);
  font-size:0.9em;
}

/* body scroll lock when the language picker is open */
body.lang-menu-open{overflow:hidden; touch-action:none}
/* keep the page positioned (avoid layout jump from scrollbar removal) */
body.lang-menu-open{padding-right:var(--scrollbar-width, 0px)}

/* mobile: bottom-sheet style */
@media (max-width: 600px){
  .lang-toggle.open .lang-menu{
    position:fixed;
    top:auto;
    bottom:0;
    left:0;
    right:0;
    width:100%;
    max-width:none;
    border-left:none;
    border-right:none;
    border-bottom:none;
    border-radius:14px 14px 0 0;
    box-shadow:0 -8px 24px var(--shadow-color);
    z-index:100;
    animation:lang-slide-up 0.22s ease-out;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .lang-menu .lang-list{max-height:calc(80vh - 60px)}
  .lang-menu .lang-search{font-size:16px}  /* iOS: avoid auto-zoom */
  /* backdrop */
  body.lang-menu-open::before{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.45);
    backdrop-filter:blur(2px);
    z-index:99;
    animation:lang-fade-in 0.18s ease-out;
  }
  /* drag handle on mobile sheet */
  .lang-toggle.open .lang-menu::before{
    content:"";
    display:block;
    width:36px; height:4px;
    background:var(--line);
    border-radius:2px;
    margin:0.55rem auto 0.4rem;
  }
}
@keyframes lang-slide-up{
  from{transform:translateY(100%); opacity:0.6}
  to{transform:translateY(0); opacity:1}
}
@keyframes lang-fade-in{
  from{opacity:0} to{opacity:1}
}
.lang-menu .lang-list .lang-code{
  font-family:monospace;
  font-size:0.72rem;
  color:var(--muted);
  letter-spacing:0.05em;
  min-width:2.5em;
  flex-shrink:0;
}
.lang-menu .lang-list .lang-native{flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lang-menu .lang-empty{
  padding:1rem 0.9rem;
  text-align:center;
  color:var(--muted);
  font-size:0.85rem;
  display:none;
}

/* ============== RTL adjustments ============== */
html[dir="rtl"] body{font-family:'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans KR', sans-serif}
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4{font-family:'Noto Naskh Arabic', 'Noto Serif Hebrew', 'Noto Serif KR', serif}
html[dir="rtl"] .site-header .container{flex-direction:row-reverse}
html[dir="rtl"] .site-nav{flex-direction:row-reverse}
html[dir="rtl"] .lang-menu{right:auto; left:0}
html[dir="rtl"] .lang-menu .lang-list button{flex-direction:row-reverse; text-align:right}
html[dir="rtl"] .incident-meta{justify-content:flex-end; flex-direction:row-reverse}
html[dir="rtl"] .country-filter{justify-content:flex-end}
html[dir="rtl"] .memorial-form{text-align:right}
html[dir="rtl"] .memorial-form .field-label{text-align:right}
html[dir="rtl"] .memorial-form .field-label .opt{margin-left:0; margin-right:0.4em}
html[dir="rtl"] .cal-nav a:first-child::before{content:"→ "}
html[dir="rtl"] .cal-nav a:first-child{}
html[dir="rtl"] .footer-links a{direction:rtl}

body.memorial-body .lang-toggle{visibility:visible; position:fixed; top:1rem; right:3.6rem}

/* ============== responsive (mobile / small tablet) ============== */

/* prevent brand text from breaking across lines on any width */
.brand{white-space:nowrap; flex-shrink:0}
.brand-name{white-space:nowrap}

/* header layout: wrap nav onto its own line when there is no room */
.site-header .container{flex-wrap:wrap; row-gap:0.4rem}
.site-nav{display:flex; flex-wrap:wrap; row-gap:0.2rem; column-gap:1.1rem}
.site-nav a{margin-left:0; white-space:nowrap}

@media (max-width: 600px){
  body{font-size:15px}
  .container{padding:0 1rem}

  /* header: brand on top row, nav wraps onto a second row at smaller font */
  .site-header{position:static}  /* don't eat vertical space on mobile */
  .site-header .container{padding-top:0.8rem; padding-bottom:0.8rem; align-items:flex-start}
  .site-nav{font-size:0.85rem; column-gap:0.9rem; width:100%; margin-top:0.4rem}

  h1{font-size:1.5rem}
  h2{font-size:1.2rem}

  .today-block{margin:1.5rem 0 1rem; padding-bottom:1rem}
  .today-block .date{font-size:1.55rem}

  /* incident cards: tighter meta wrap */
  .incident{padding:0.9rem 0}
  .incident-meta{font-size:0.85rem; gap:0.4rem 0.7rem}
  .incident-meta .sep{display:none}  /* dots noisy when meta already wraps */

  /* detail page */
  .detail-header h1{font-size:1.55rem}
  .detail-numbers{padding:1rem; gap:0.6rem; grid-template-columns:repeat(2, 1fr)}
  .detail-numbers .num{font-size:1.35rem}

  /* calendar: keep 7-col grid but compact, replace text marks with dots */
  .cal-nav{flex-wrap:wrap; gap:0.5rem}
  .cal-nav h2{font-size:1.1rem; flex:1 1 100%; text-align:center; order:-1; justify-content:center}
  .cal-nav a{font-size:0.88rem; padding:0.2em 0.4em}
  .cal-nav h2 .today-link{font-size:0.72rem; padding:0.2em 0.55em}
  .calendar .dow{padding:0.3rem 0.1rem; font-size:0.78rem}
  .calendar .cell{
    padding:0.3rem 0.2rem;
    min-height:54px;
    font-size:0.75rem;
  }
  .calendar .cell .daynum{font-size:0.85rem}
  /* on mobile, marks become small dots stacked vertically (no text) */
  .calendar .cell .mark{
    width:6px; height:6px;
    padding:0; margin:0.15rem auto 0;
    background:var(--mark);
    border-radius:50%;
    overflow:hidden;
    text-indent:-9999px;
    display:block;
  }
  .calendar .cell.today .mark{background:var(--today-fg)}

  /* stacked admin form 3-col row → single column on mobile */
  form.stack .row{grid-template-columns:1fr}
  form.stack input[type="text"],
  form.stack input[type="date"],
  form.stack input[type="number"],
  form.stack input[type="password"],
  form.stack textarea,
  form.stack select{font-size:1rem; padding:0.6rem 0.7rem}
  form.stack button, .btn{padding:0.7rem 1.1rem; font-size:0.95rem}

  /* admin table → card-like rows on mobile (hide table head, stack cells) */
  table.admin thead{display:none}
  table.admin, table.admin tbody, table.admin tr, table.admin td{display:block; width:100%}
  table.admin tr{
    padding:0.8rem 0;
    border-bottom:1px solid var(--line-soft);
  }
  table.admin td{
    padding:0.15rem 0;
    border:none;
    font-size:0.92rem;
  }
  table.admin td:nth-child(1){color:var(--muted); font-size:0.85rem}
  table.admin td:nth-child(2){font-weight:500}
  table.admin td.actions{margin-top:0.3rem}

  /* sources */
  .sources li{font-size:0.85rem; word-break:break-all}

  /* memorial auth pages — already narrow but tighten further */
  .memorial-page{padding:2rem 1rem 1.5rem; max-width:100%}
  .memorial-heading{font-size:1.35rem}
  .memorial-intro{font-size:0.98rem; line-height:1.9}
  .memorial-cta button{padding:0.78rem 2.4rem; letter-spacing:0.4em}
}

@media (max-width: 380px){
  .calendar .cell{min-height:44px; padding:0.2rem 0.1rem}
  .calendar .cell .daynum{font-size:0.78rem}
  .site-nav{font-size:0.8rem; column-gap:0.75rem}
}

/* =========== Cookie consent banner =========== */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0;
  background:var(--surface, #fffaf3);
  color:var(--text, #1c1a17);
  border-top:1px solid var(--border, #d8cebd);
  box-shadow:0 -4px 18px rgba(0,0,0,0.12);
  z-index:10000;
  animation:cookieSlideUp 240ms ease-out;
}
[data-theme="dark"] .cookie-banner{
  background:#1a1816;
  color:#eee8de;
  border-top-color:#3a342d;
}
.cookie-banner-inner{
  max-width:960px; margin:0 auto;
  padding:1rem 1.2rem;
  display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap;
}
.cookie-banner-text{ flex:1 1 280px; min-width:0; }
.cookie-banner-text strong{ display:block; font-size:0.95rem; margin-bottom:0.2rem; }
.cookie-banner-text p{ margin:0; font-size:0.85rem; line-height:1.55; opacity:0.85; }
.cookie-banner-text a{ color:inherit; text-decoration:underline; }
.cookie-banner-options{
  display:flex; flex-direction:column; gap:0.35rem;
  font-size:0.85rem; padding:0 0.5rem;
  border-left:1px solid var(--border, #d8cebd);
}
.cookie-banner-options label{ display:flex; align-items:center; gap:0.4rem; cursor:pointer; white-space:nowrap; }
.cookie-banner-options input[type="checkbox"]{ width:1rem; height:1rem; }
.cookie-banner-buttons{ display:flex; gap:0.5rem; flex-shrink:0; }
.cookie-banner-buttons button{
  font:inherit;
  padding:0.55rem 1.1rem;
  border-radius:6px;
  border:1px solid var(--border, #c8bda9);
  cursor:pointer;
  font-size:0.85rem;
  white-space:nowrap;
}
.cookie-banner-buttons .btn-ghost{
  background:transparent; color:inherit;
}
.cookie-banner-buttons .btn-ghost:hover{
  background:rgba(0,0,0,0.04);
}
[data-theme="dark"] .cookie-banner-buttons .btn-ghost:hover{
  background:rgba(255,255,255,0.06);
}
.cookie-banner-buttons .btn-primary{
  background:var(--accent, #5a4a37);
  color:#fff8eb;
  border-color:transparent;
}
.cookie-banner-buttons .btn-primary:hover{ opacity:0.9; }
@keyframes cookieSlideUp{
  from{ transform:translateY(100%); opacity:0; }
  to  { transform:translateY(0);    opacity:1; }
}
@media (max-width: 520px){
  .cookie-banner-inner{ flex-direction:column; align-items:stretch; padding:0.9rem 1rem; gap:0.8rem; }
  .cookie-banner-options{ border-left:none; padding:0; border-top:1px solid var(--border, #d8cebd); padding-top:0.6rem; }
  .cookie-banner-buttons{ justify-content:flex-end; }
}