/* /public/assets/css/volcano-vei.css · VEI-Skala (Redesign 2026-10)
   Desktop: 9 Kacheln nebeneinander, Treppenbalken zeigt die logarithmische Steigerung.
   Mobile (≤760px): vertikale Liste, Balken horizontal.
   Kontraste: alle Textfarben ≥ 4.5:1 auf ihrer Kachel. */

.qmk-vei{
  --vei-ink: var(--v-ink, #162b3b);
  --vei-muted: var(--v-muted, #5c6e80);
  --vei-line: var(--v-line, #e2e8ee);
  --vei-blue: var(--v-blue, #2f5591);
  --vei-0-bg:#f1f5f9; --vei-0-fg:#162b3b;
  --vei-1-bg:#fdf2e9; --vei-1-fg:#3b2a1f;
  --vei-2-bg:#fde4cf; --vei-2-fg:#3b2a1f;
  --vei-3-bg:#fbc9a4; --vei-3-fg:#3b2a1f;
  --vei-4-bg:#f6a173; --vei-4-fg:#2a160b;
  --vei-5-bg:#e8743f; --vei-5-fg:#1f0f06;
  --vei-6-bg:#c2410c; --vei-6-fg:#ffffff;
  --vei-7-bg:#9a3412; --vei-7-fg:#ffffff;
  --vei-8-bg:#6c2410; --vei-8-fg:#ffffff;
  color: var(--vei-ink);
}

.qmk-vei__title{ font-size:24px; line-height:1.3; letter-spacing:-.5px; font-weight:650; margin:0 0 8px; }
.qmk-vei__lead{ max-width:760px; margin:0 0 22px; font-size:13px; line-height:1.8; color:var(--vei-muted); }

/* ===== Skala ===== */
.qmk-vei__scale{
  list-style:none; margin:0; padding:16px;
  display:grid; grid-template-columns:repeat(9, minmax(0,1fr)); gap:6px;
  background:#fff; border:1px solid var(--vei-line); border-radius:12px;
}

.qmk-vei__step{
  position:relative;
  display:flex; flex-direction:column; justify-content:flex-end; gap:8px;
  min-height:168px; padding:12px 10px 10px;
  border-radius:9px; overflow:hidden;
}

/* Treppenbalken oben in der Kachel: gemeinsame Grundlinie, wächst nach oben */
.qmk-vei__bar{
  position:absolute; left:10px; right:10px;
  top:calc(58px - (6px + var(--vei-i, 0) * 5px));
  height:calc(6px + var(--vei-i, 0) * 5px);
  border-radius:3px; background:currentColor; opacity:.22;
}

.qmk-vei__n{ font-size:26px; font-weight:800; line-height:1; letter-spacing:-.5px; font-variant-numeric:tabular-nums; }
.qmk-vei__body{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.qmk-vei__label{ font-size:12px; font-weight:650; line-height:1.25; overflow-wrap:anywhere; hyphens:auto; }
.qmk-vei__meta{ display:flex; flex-direction:column; gap:2px; font-size:10.5px; line-height:1.35; font-variant-numeric:tabular-nums; }
.qmk-vei__k{ font-weight:600; opacity:.9; }

/* Farben je Stufe */
.qmk-vei__step--0{ --vei-i:0; background:var(--vei-0-bg); color:var(--vei-0-fg); }
.qmk-vei__step--1{ --vei-i:1; background:var(--vei-1-bg); color:var(--vei-1-fg); }
.qmk-vei__step--2{ --vei-i:2; background:var(--vei-2-bg); color:var(--vei-2-fg); }
.qmk-vei__step--3{ --vei-i:3; background:var(--vei-3-bg); color:var(--vei-3-fg); }
.qmk-vei__step--4{ --vei-i:4; background:var(--vei-4-bg); color:var(--vei-4-fg); }
.qmk-vei__step--5{ --vei-i:5; background:var(--vei-5-bg); color:var(--vei-5-fg); }
.qmk-vei__step--6{ --vei-i:6; background:var(--vei-6-bg); color:var(--vei-6-fg); }
.qmk-vei__step--7{ --vei-i:7; background:var(--vei-7-bg); color:var(--vei-7-fg); }
.qmk-vei__step--8{ --vei-i:8; background:var(--vei-8-bg); color:var(--vei-8-fg); }

/* Hervorgehobene Stufe (Steckbrief) */
.qmk-vei__step.is-current{ box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--vei-ink); }
.qmk-vei__here{
  position:absolute; top:8px; right:8px;
  max-width:calc(100% - 16px);
  padding:3px 7px; border-radius:999px;
  background:var(--vei-ink); color:#fff;
  font-size:9.5px; font-weight:700; line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ===== Beispiele ===== */
.qmk-vei__examples{ margin-top:14px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; }
.qmk-vei__examples-title{ margin:0; font-size:11px; font-weight:600; color:var(--vei-muted); }
.qmk-vei__examples ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.qmk-vei__examples li{
  display:inline-flex; align-items:center; gap:8px;
  min-height:40px; padding:0 6px 0 14px;
  background:#fff; border:1px solid var(--vei-line); border-radius:999px;
  font-size:12px;
}
.qmk-vei__examples a{ font-weight:650; color:var(--vei-ink); text-decoration:none; }
.qmk-vei__examples a:hover{ color:var(--vei-blue); text-decoration:underline; text-underline-offset:3px; }
.qmk-vei__period{ color:var(--vei-muted); font-variant-numeric:tabular-nums; }
.qmk-vei__chip{ display:inline-flex; align-items:center; height:26px; padding:0 9px; border-radius:999px; font-size:11px; font-weight:700; }
.qmk-vei__chip--0{ background:var(--vei-0-bg); color:var(--vei-0-fg); }
.qmk-vei__chip--1{ background:var(--vei-1-bg); color:var(--vei-1-fg); }
.qmk-vei__chip--2{ background:var(--vei-2-bg); color:var(--vei-2-fg); }
.qmk-vei__chip--3{ background:var(--vei-3-bg); color:var(--vei-3-fg); }
.qmk-vei__chip--4{ background:var(--vei-4-bg); color:var(--vei-4-fg); }
.qmk-vei__chip--5{ background:var(--vei-5-bg); color:var(--vei-5-fg); }
.qmk-vei__chip--6{ background:var(--vei-6-bg); color:var(--vei-6-fg); }
.qmk-vei__chip--7{ background:var(--vei-7-bg); color:var(--vei-7-fg); }
.qmk-vei__chip--8{ background:var(--vei-8-bg); color:var(--vei-8-fg); }

.qmk-vei__source{ margin:12px 0 0; font-size:10px; color:var(--vei-muted); }

/* ===== Tablet ===== */
@media (max-width:1050px){
  .qmk-vei__scale{ padding:12px; gap:5px; }
  .qmk-vei__step{ min-height:180px; padding:10px 8px 8px; }
  .qmk-vei__n{ font-size:22px; }
  .qmk-vei__label{ font-size:11px; }
  .qmk-vei__meta{ font-size:10px; }
}

/* ===== Mobile: vertikale Liste ===== */
@media (max-width:760px){
  .qmk-vei__title{ font-size:22px; letter-spacing:-.6px; }
  .qmk-vei__lead{ font-size:13px; margin-bottom:16px; }
  .qmk-vei__scale{ grid-template-columns:1fr; gap:4px; padding:8px; }
  .qmk-vei__step{
    min-height:56px; padding:10px 12px;
    flex-direction:row; align-items:center; justify-content:flex-start; gap:12px;
  }
  .qmk-vei__n{ width:28px; flex:none; font-size:22px; text-align:center; }
  .qmk-vei__body{ flex:1; gap:2px; }
  .qmk-vei__label{ font-size:14px; }
  .qmk-vei__meta{ flex-direction:row; flex-wrap:wrap; gap:0 12px; font-size:11px; }
  /* Balken horizontal am rechten Rand */
  .qmk-vei__bar{
    position:static; order:3; flex:none; align-self:center;
    width:calc(8px + var(--vei-i, 0) * 6px); height:8px; opacity:.3;
  }
  .qmk-vei__here{ position:static; order:4; max-width:40%; }
  .qmk-vei__step.is-current{ box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--vei-ink); }
  .qmk-vei__examples{ align-items:flex-start; flex-direction:column; }
}

/* ===== Global VEI colours (chips in tables, profile facts, VEI page) ===== */
:root{
  --vei-0-bg:#f1f5f9; --vei-0-fg:#162b3b; --vei-1-bg:#fdf2e9; --vei-1-fg:#3b2a1f;
  --vei-2-bg:#fde4cf; --vei-2-fg:#3b2a1f; --vei-3-bg:#fbc9a4; --vei-3-fg:#3b2a1f;
  --vei-4-bg:#f6a173; --vei-4-fg:#2a160b; --vei-5-bg:#e8743f; --vei-5-fg:#1f0f06;
  --vei-6-bg:#c2410c; --vei-6-fg:#ffffff; --vei-7-bg:#9a3412; --vei-7-fg:#ffffff;
  --vei-8-bg:#6c2410; --vei-8-fg:#ffffff;
}
a.qmk-vei__chip{ text-decoration:none; }
a.qmk-vei__chip:hover{ box-shadow:inset 0 0 0 2px rgba(22,43,59,.35); }
a.qmk-vei__chip:focus-visible,.qmk-vei__hit:focus-visible{ outline:2px solid var(--v-blue,#2f5591); outline-offset:2px; }
.qmk-vei__more{ font-weight:650; color:var(--v-blue,#2f5591); }

/* Scale tiles as anchors (VEI page) */
.qmk-vei__hit{ position:absolute; inset:0; border-radius:inherit; z-index:1; }
.qmk-vei__step:has(.qmk-vei__hit:hover){ box-shadow:0 0 0 2px #fff, 0 0 0 4px rgba(22,43,59,.45); }
.qmk-vei--bare{ padding-top:0; }

/* ===== Eruption history table (profile + /volcanoes panel) ===== */
.v-history .qmk-vei__chip{ height:22px; padding:0 8px; font-size:10.5px; }
.v-history-scroll.is-long{ max-height:460px; overflow-y:auto; border-bottom:1px solid var(--v-line,#e2e8ee); }
.v-history-scroll.is-long thead th{ position:sticky; top:0; background:var(--v-panel,#fff); z-index:1; }
.v-history th a{ color:inherit; text-decoration:underline dotted; text-underline-offset:3px; }
.v-history tr[id]{ scroll-margin-top:90px; }
.v-history tr:target td{ background:#fff4d6; }

/* Profile fact */
.vp-fact-vei dd{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; }
.vp-fact-vei .qmk-vei__chip{ height:24px; font-size:11px; }
.vp-fact-vei small{ font-size:10.5px; color:var(--v-muted,#5c6e80); font-weight:500; }
.vp-fact-vei small a{ color:var(--v-blue,#2f5591); }

/* ===== VEI page ===== */
.vei-page .vei-lead{ max-width:780px; margin:6px 0 18px; font-size:13.5px; line-height:1.8; color:var(--v-muted,#5c6e80); }
.vei-page .vei-note{ max-width:780px; margin:10px 0 0; font-size:12px; line-height:1.7; color:var(--v-muted,#5c6e80); }
.vei-page h2{ margin:0 0 4px; }

.vei-freq{ list-style:none; margin:0; padding:14px 16px; display:grid; gap:6px; background:#fff; border:1px solid var(--v-line,#e2e8ee); border-radius:12px; }
.vei-freq a{ display:grid; grid-template-columns:62px minmax(0,1fr) 64px; align-items:center; gap:12px; min-height:30px; color:var(--v-ink,#162b3b); text-decoration:none; }
.vei-freq a:hover .vei-freq__n{ text-decoration:underline; text-underline-offset:3px; }
.vei-freq__n{ font-size:12px; font-weight:700; }
.vei-freq__track{ height:14px; border-radius:4px; background:#f3f6f9; overflow:hidden; }
.vei-freq__bar{ display:block; height:100%; width:var(--w,0%); border-radius:4px; padding:0; }
.vei-freq__count{ text-align:right; font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; }

.vei-cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:12px; }
.vei-card{ padding:18px; background:#fff; border:1px solid var(--v-line,#e2e8ee); border-radius:12px; }
.vei-card h3{ margin:0 0 8px; font-size:15px; }
.vei-card p{ margin:0 0 10px; font-size:13px; line-height:1.75; color:var(--v-ink,#162b3b); }

.vei-level{ margin-top:22px; padding-top:18px; border-top:1px solid var(--v-line,#e2e8ee); scroll-margin-top:80px; }
.vei-level__head{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
.vei-level__head h3{ margin:0; font-size:17px; }
.vei-level__count{ font-size:12px; color:var(--v-muted,#5c6e80); }
.vei-table-wrap{ margin-top:10px; overflow-x:auto; background:#fff; border:1px solid var(--v-line,#e2e8ee); border-radius:10px; }
.vei-table-wrap.is-long{ max-height:520px; overflow-y:auto; }
.vei-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.vei-table th{ position:sticky; top:0; background:#f8fafc; text-align:left; font-size:11px; font-weight:600; color:var(--v-muted,#5c6e80); }
.vei-table th,.vei-table td{ padding:9px 12px; border-bottom:1px solid var(--v-line,#e2e8ee); vertical-align:top; }
.vei-table tr:last-child td{ border-bottom:0; }
.vei-table td a{ font-weight:650; color:var(--v-ink,#162b3b); }
.vei-table td a:hover{ color:var(--v-blue,#2f5591); }
.vei-table small{ display:block; font-size:10px; color:var(--v-muted,#5c6e80); }
.vei-table .v-flags img{ vertical-align:-3px; margin-right:6px; }

.vei-faq{ display:grid; gap:8px; margin-top:12px; max-width:860px; }
.vei-faq details{ background:#fff; border:1px solid var(--v-line,#e2e8ee); border-radius:10px; padding:0 16px; }
.vei-faq summary{ cursor:pointer; padding:14px 0; font-size:14px; font-weight:650; }
.vei-faq p{ margin:0 0 14px; font-size:13px; line-height:1.75; }

@media (max-width:900px){ .vei-cards{ grid-template-columns:1fr; } }
@media (max-width:760px){
  .vei-freq{ padding:10px; }
  .vei-freq a{ grid-template-columns:52px minmax(0,1fr) 52px; gap:8px; }
  .vei-table{ font-size:12px; }
  .vei-table th,.vei-table td{ padding:8px 9px; }
}

/* Consistent columns across level tables; faint low levels need an edge */
.vei-table{ table-layout:fixed; min-width:560px; }
.vei-table th:nth-child(1){ width:34%; } .vei-table th:nth-child(2){ width:32%; } .vei-table th:nth-child(3){ width:22%; } .vei-table th:nth-child(4){ width:12%; }
.vei-table .qmk-vei__chip{ height:22px; padding:0 8px; font-size:10.5px; }
.vei-freq__bar{ box-shadow:inset 0 0 0 1px rgba(22,43,59,.22); }
@media (max-width:760px){
  /* Phones: country as flag only so start date and VEI stay visible */
  .vei-table{ min-width:0; }
  .vei-table th:nth-child(1){ width:42%; } .vei-table th:nth-child(2){ width:16%; } .vei-table th:nth-child(3){ width:27%; } .vei-table th:nth-child(4){ width:15%; }
  .vei-table td:nth-child(2){ font-size:0; }
  .vei-table td:nth-child(2) .v-flags img{ margin-right:2px; }
  .vei-table th:nth-child(2){ font-size:0; }
}