/* Skywold Fields - huisstijl uit skywold-website/huisstijl.md.
   Accent BLAUW (Skywold default #1e88e5) — Fields = zakelijke data-analyse-tak.
   (Wildredding gebruikt warm oranje voor urgentie/redding.) */

:root {
  --c-zwart: #000000;
  --c-donker-1: #0a0a0a;
  --c-donker-2: #111111;
  --c-licht: #f5f5f5;
  --c-wit: #ffffff;
  --c-grijs-licht: #a3a3a3;
  --c-grijs: #525252;
  --c-accent: #1e88e5;
  --c-accent-hover: #42a5f5;
  --c-success: #16a34a;
  --c-danger: #dc2626;
  --border-licht: rgba(255,255,255,0.10);
  --border-zichtbaar: rgba(255,255,255,0.20);
  --radius: 0.5rem;
  --radius-lg: 0.75rem;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--c-zwart); color: var(--c-wit);
  font-family: "Geist", "Geist Sans", Arial, Helvetica, sans-serif;
  font-size: 16px; line-height: 1.5;
}
a { color: var(--c-accent); text-decoration: none; }
a:hover { color: var(--c-accent-hover); }

/* Header */
.header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; padding: 0 1.5rem;
  background: rgba(0,0,0,0.85); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-licht);
}
.header .logo { height: 32px; width: auto; }
.header .merk {
  display: flex; align-items: center; gap: 0.75rem; text-decoration: none;
}
.header .sub-merk {
  font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.15em; color: var(--c-accent); font-weight: 600;
}
.header nav { display: flex; align-items: center; gap: 1.25rem; }
.header nav a {
  font-size: 0.875rem; color: var(--c-grijs-licht);
}
.header nav a:hover, .header nav a.actief { color: var(--c-wit); }
.user-info { font-size: 0.8125rem; color: var(--c-grijs-licht); }

/* Containers */
.container { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.container-narrow { max-width: 480px; margin: 0 auto; padding: 4rem 1.5rem; }

/* Typografie */
h1, h2, h3 {
  font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.15; margin: 0 0 0.5rem;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.125rem; }
.section-label {
  display: inline-block;
  font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.15em; font-weight: 600;
  color: var(--c-accent); margin-bottom: 0.75rem;
}
.lead { color: var(--c-grijs-licht); margin: 0 0 2rem; }

/* Formulier */
.form-group { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.25rem; }
.form-group label { font-size: 0.875rem; color: var(--c-grijs-licht); font-weight: 500; }
input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="number"], select, textarea {
  background: var(--c-donker-2); border: 1px solid var(--border-licht);
  border-radius: var(--radius); color: var(--c-wit);
  padding: 0.75rem 1rem; font-size: 1rem; font-family: inherit; width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--c-accent);
}
.fout {
  background: rgba(220, 38, 38, 0.15);
  border: 1px solid var(--c-danger);
  color: #fca5a5;
  padding: 0.75rem 1rem; border-radius: var(--radius);
  font-size: 0.875rem; margin-bottom: 1rem;
}

/* Knoppen */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem; padding: 0.75rem 1.25rem;
  border: none; border-radius: var(--radius);
  font-size: 0.9375rem; font-weight: 500; font-family: inherit;
  cursor: pointer; text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-primary { background: var(--c-accent); color: var(--c-wit); }
.btn-primary:hover { background: var(--c-accent-hover); }
.btn-secondary {
  background: transparent; color: var(--c-grijs-licht);
  border: 1px solid var(--border-zichtbaar);
}
.btn-secondary:hover { color: var(--c-wit); border-color: var(--c-wit); }
.btn-block { width: 100%; }

/* Tabel */
table.lijst {
  width: 100%; border-collapse: collapse;
  background: var(--c-donker-1);
  border: 1px solid var(--border-licht); border-radius: var(--radius);
  overflow: hidden;
}
table.lijst th, table.lijst td {
  padding: 0.75rem 1rem; text-align: left;
  border-bottom: 1px solid var(--border-licht);
}
table.lijst th {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--c-grijs-licht); font-weight: 600;
}
table.lijst tr:last-child td { border-bottom: none; }
table.lijst tr:hover td { background: var(--c-donker-2); }

/* Kaartjes (perceel-tegels) */
.tegels {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem; margin-top: 1.5rem;
}
.tegel {
  background: var(--c-donker-1); border: 1px solid var(--border-licht);
  border-radius: var(--radius-lg); padding: 1.25rem;
  text-decoration: none; color: var(--c-wit);
  transition: border-color 0.15s, transform 0.15s;
}
.tegel:hover { border-color: var(--c-accent); transform: translateY(-2px); }
.tegel h3 { margin: 0 0 0.25rem; }
.tegel .meta { font-size: 0.8125rem; color: var(--c-grijs-licht); }
.tegel .stats { display: flex; gap: 1rem; margin-top: 0.75rem; }
.tegel .stat { font-size: 0.8125rem; }
.tegel .stat strong { display: block; font-size: 1.25rem; color: var(--c-accent); }

/* Badges (rol-aanduiding) */
.badge {
  display: inline-block; padding: 0.1875rem 0.625rem;
  border-radius: 999px; font-size: 0.6875rem;
  text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
}
.badge-admin { background: var(--c-danger); color: var(--c-wit); }
.badge-boer { background: var(--c-success); color: var(--c-wit); }
.badge-onderzoek { background: var(--c-accent); color: var(--c-wit); }

.footer {
  padding: 2rem 1.5rem; text-align: center;
  font-size: 0.75rem; color: var(--c-grijs);
  border-top: 1px solid var(--border-licht); margin-top: 3rem;
}

/* Paneel-blokken (plant count, alerts, tijdlijn) */
.paneel-kader {
  background: var(--c-donker-1);
  border: 1px solid var(--border-licht);
  border-radius: var(--radius-lg);
  padding: 1rem;
  font-size: 0.875rem;
}
.paneel-kader .paneel-titel {
  font-weight: 700; font-size: 0.875rem;
  letter-spacing: 0.05em; text-transform: uppercase;
  margin-bottom: 0.75rem; color: var(--c-grijs-licht);
}
.paneel-kader button {
  background: rgba(255,255,255,0.06);
  color: var(--c-tekst);
  border: 1px solid rgba(255,255,255,0.15);
  padding: 0.25rem 0.6rem; border-radius: 0.25rem;
  font-size: 0.75rem; cursor: pointer;
}
.paneel-kader button:hover { background: rgba(255,255,255,0.12); }

/* Tile-status banner boven kaart */
.tile-banner {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.875rem 1rem;
  border-radius: var(--radius-lg);
  margin-top: 1rem;
}
.tile-banner-running {
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.45);
  color: var(--c-tekst);
}
.tile-banner-failed {
  background: rgba(220, 38, 38, 0.12);
  border: 1px solid rgba(220, 38, 38, 0.45);
  color: var(--c-tekst);
}
.spinner {
  width: 1.5rem; height: 1.5rem;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: var(--c-skywold, #6366f1);
  border-radius: 50%;
  animation: spin 0.85s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Vluchtdetail layout (kaart 60% + side panel 40%, sinds fase 32) */
.vlucht-layout {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 1.5rem;
  margin-top: 1rem;
}
@media (max-width: 900px) {
  .vlucht-layout { grid-template-columns: 1fr; }
}

/* Leaflet kaart in vluchtdetail */
.kaart-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-licht);
  margin-bottom: 1.5rem;
}
#kaart {
  height: 640px;
  width: 100%;
  background: var(--c-donker-1);
}
#kaart:fullscreen, .kaart-wrap:fullscreen { background: var(--c-zwart); }
#kaart:fullscreen { height: 100vh; }

/* Side panel met stoplicht-analyse */
.side-paneel {
  background: var(--c-donker-1);
  border: 1px solid var(--border-licht);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  min-height: 200px;
}
.side-paneel .paneel-titel {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--c-accent);
  font-weight: 600;
  margin-bottom: 0.625rem;
}
.side-paneel .paneel-leeg {
  color: var(--c-grijs-licht);
  font-size: 0.875rem;
  padding: 1rem 0;
}
.perceel-info {
  background: var(--c-donker-2);
  border-radius: var(--radius);
  padding: 0.875rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.875rem;
}
.perceel-info .label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-grijs-licht);
}
.perceel-info .waarde {
  color: var(--c-wit);
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.perceel-info .waarde:last-child { margin-bottom: 0; }

/* Stoplicht-balk */
.stoplicht-balk {
  display: flex;
  height: 32px;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}
.stoplicht-deel {
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 600;
  color: #111; min-width: 0;
}
.stoplicht-deel.goed   { background: #1a9850; color: #fff; }
.stoplicht-deel.matig  { background: #fee08b; }
.stoplicht-deel.slecht { background: #d73027; color: #fff; }
.stoplicht-legenda {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  font-size: 0.75rem; color: var(--c-grijs-licht);
  margin-bottom: 1rem;
}
.stoplicht-legenda b { margin-right: 2px; }

/* Zone-cards */
.zone-card {
  background: var(--c-donker-2);
  border-left: 4px solid #888;
  padding: 0.625rem 0.875rem;
  margin-bottom: 0.5rem;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.zone-card-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 0.25rem;
}
.zone-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #111;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.zone-card-stats {
  display: flex; gap: 0.75rem;
  font-size: 0.8125rem; color: var(--c-grijs-licht);
}
.zone-card-stats span:first-child {
  color: var(--c-wit); font-weight: 600;
}
.zone-card-indices {
  font-size: 0.6875rem;
  color: var(--c-grijs-licht);
  margin-top: 0.25rem;
}
.zone-card-indices strong { color: var(--c-wit); font-weight: 600; }

#kaart-legenda {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.75rem;
  background: var(--c-donker-1);
  border-top: 1px solid var(--border-licht);
}
#kaart-legenda .legenda-item img {
  max-height: 60px;
  display: block;
  background: white;
  padding: 4px;
  border-radius: 4px;
}

/* Leaflet UI styling */
.leaflet-popup-content-wrapper { background: #fff; color: #111; }
.popup-waarde { font-size: 12px; min-width: 240px; }
.popup-waarde .popup-coords {
  color: #666; font-size: 11px; margin-bottom: 6px;
  font-family: monospace;
}
.popup-waarde table { width: 100%; border-collapse: collapse; }
.popup-waarde td { padding: 2px 0; }
.popup-waarde td:first-child { color: #444; }
.popup-waarde td:last-child { text-align: right; }
.popup-waarde .val-laag    { color: #d73027; }
.popup-waarde .val-medium  { color: #cf8b30; }
.popup-waarde .val-hoog    { color: #1a9850; }
.popup-waarde .popup-gmaps {
  display: block; margin-top: 6px;
  font-size: 11px; color: var(--c-accent);
}
.popup-loading { font-size: 12px; color: #666; }

/* Fase 33: floating layer-switcher is verplaatst naar #layer-paneel in het
   zijpaneel. Hard-hide blijft staan als fail-safe — mocht een library of
   stale browser-cache ooit alsnog L.control.layers aanmaken, dan blijft 'ie
   onzichtbaar. NIET verwijderen. */
.leaflet-control-layers { display: none !important; }

.fullscreen-btn a {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; text-decoration: none; color: #111;
}
#kaart-legenda {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.75rem;
  background: var(--c-donker-1);
  border-top: 1px solid var(--border-licht);
}
#kaart-legenda .legenda-item img {
  max-height: 60px;
  display: block;
  background: white;
  padding: 4px;
  border-radius: 4px;
}
.leaflet-popup-content-wrapper {
  background: #fff;
  color: #111;
}
/* Tweede instantie van .leaflet-control-layers — eveneens hard-hide
   (zie fase-33 opmerking hierboven). */

/* Absolute referentie-score banner (compact in side-paneel sinds fase 32) */
.score-banner {
  display: flex; align-items: center; gap: 1rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-licht, #333);
  border-left: 4px solid #888;
  border-radius: 0.5rem; padding: 0.75rem 1rem;
}
.score-getal {
  font-size: 2.25rem; font-weight: 700; line-height: 1;
  letter-spacing: -0.03em; min-width: 80px;
}
.score-info { flex: 1; min-width: 0; }
.score-categorie {
  font-size: 1rem; font-weight: 600;
  margin-bottom: 0.25rem;
}
.score-detail {
  font-size: 0.8125rem; color: var(--c-tekst, #eee);
  margin-bottom: 0.125rem;
}
.score-meta {
  font-size: 0.75rem; color: var(--c-grijs-licht, #888);
}

/* Layer-paneel knoppen (vervangt Leaflet floating layer-switcher) */
.layer-groep {
  display: flex; flex-wrap: wrap; gap: 0.375rem;
}
.layer-knop {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-licht, #333);
  color: var(--c-tekst, #eee);
  padding: 0.375rem 0.75rem; border-radius: 0.375rem;
  font-size: 0.8125rem; cursor: pointer;
  transition: all 0.15s;
}
.layer-knop:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(30,136,229,0.5);
}
.layer-knop.actief {
  background: #1e88e5;
  color: white;
  border-color: #1565c0;
  font-weight: 600;
}
.layer-basis { font-size: 0.75rem; }

/* ============================================================ */
/* FASE 22-23 WIDGETS                                            */
/* ============================================================ */

/* --- AI Chat-widget (rechtsonder, sticky) --- */
.chat-widget {
  position: fixed; bottom: 1rem; right: 1rem;
  z-index: 9999;
  font-family: inherit;
}
.chat-toggle {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e88e5, #1565c0);
  color: white; font-size: 1.5rem;
  border: none; cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.chat-toggle:hover { transform: scale(1.05); }
.chat-paneel {
  position: absolute; bottom: 70px; right: 0;
  width: 360px; max-width: calc(100vw - 2rem);
  height: 480px; max-height: calc(100vh - 6rem);
  background: var(--c-donker-1, #1a1a1a);
  border: 1px solid var(--border-licht, #333);
  border-radius: var(--radius-lg, 0.75rem);
  display: flex; flex-direction: column;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  overflow: hidden;
}
.chat-collapsed .chat-paneel { display: none; }
.chat-titel {
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, #1e88e5, #1565c0);
  color: white;
  display: flex; justify-content: space-between; align-items: center;
}
.chat-titel button {
  background: transparent; color: white; border: none;
  font-size: 1.25rem; cursor: pointer; padding: 0 0.25rem;
}
.chat-berichten {
  flex: 1; overflow-y: auto;
  padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem;
}
.chat-msg {
  padding: 0.625rem 0.875rem; border-radius: 0.75rem;
  font-size: 0.875rem; line-height: 1.4;
  max-width: 85%; word-wrap: break-word;
}
.chat-msg-user {
  background: #1e88e5; color: white;
  align-self: flex-end; border-bottom-right-radius: 0.25rem;
}
.chat-msg-assistant {
  background: rgba(255,255,255,0.06); color: var(--c-tekst, #eee);
  align-self: flex-start; border-bottom-left-radius: 0.25rem;
}
.chat-laden::after {
  content: ''; animation: chat-dots 1.4s infinite;
}
@keyframes chat-dots {
  0%, 20% { content: '.'; }
  40% { content: '..'; }
  60%, 100% { content: '...'; }
}
.chat-meta {
  font-size: 0.6875rem; color: var(--c-grijs-licht, #888);
  text-align: center; font-style: italic;
}
.chat-form {
  padding: 0.5rem; border-top: 1px solid var(--border-licht, #333);
  display: flex; gap: 0.25rem;
}
.chat-form input {
  flex: 1; padding: 0.5rem 0.75rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-licht, #333);
  color: var(--c-tekst, #eee);
  border-radius: 0.375rem; font-size: 0.875rem;
}
.chat-form button {
  background: #1e88e5; color: white;
  border: none; border-radius: 0.375rem;
  padding: 0 1rem; cursor: pointer; font-size: 1.125rem;
}
.chat-form button:disabled { opacity: 0.4; cursor: wait; }

/* --- Weer-widget --- */
.weer-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem; margin-bottom: 1rem;
}
.weer-card {
  background: rgba(30, 136, 229, 0.1);
  border: 1px solid rgba(30, 136, 229, 0.3);
  padding: 0.625rem; border-radius: 0.5rem; text-align: center;
}
.weer-label { font-size: 0.6875rem; opacity: 0.7; text-transform: uppercase; }
.weer-waarde { font-size: 1.125rem; font-weight: 600; margin-top: 0.25rem; }
.weer-tabel { width: 100%; font-size: 0.75rem; border-collapse: collapse; }
.weer-tabel th, .weer-tabel td {
  padding: 0.25rem 0.5rem; text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.weer-tabel th { color: var(--c-grijs-licht, #888); font-weight: 500; }

/* --- Oogstvenster --- */
.oogst-titel { font-size: 0.875rem; opacity: 0.7; margin-bottom: 0.25rem; }
.oogst-datum { font-size: 1.75rem; font-weight: 600; color: #4ade80; }
.oogst-meta { font-size: 0.75rem; opacity: 0.7; }
.oogst-advies { margin-top: 0.5rem; font-size: 0.875rem; }

/* --- Foto-lijst --- */
.foto-lijst {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.5rem;
}
.foto-item {
  background: rgba(255,255,255,0.03);
  border-radius: 0.5rem; overflow: hidden;
}
.foto-item img { width: 100%; height: 100px; object-fit: cover; display: block; }
.foto-meta { padding: 0.25rem 0.5rem; font-size: 0.6875rem; opacity: 0.7; }
.foto-notitie { padding: 0 0.5rem 0.375rem; font-size: 0.75rem; }

/* --- Notities --- */
.notitie {
  background: rgba(255,255,255,0.03);
  padding: 0.5rem 0.75rem; margin-top: 0.5rem;
  border-radius: 0.375rem; font-size: 0.875rem;
}
.notitie-meta { font-size: 0.6875rem; opacity: 0.6; }

/* --- Form-elementen in widgets --- */
.paneel-kader form { display: grid; gap: 0.5rem; }
.paneel-kader form input, .paneel-kader form select, .paneel-kader form textarea {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-licht, #333);
  color: var(--c-tekst, #eee);
  padding: 0.5rem 0.75rem; border-radius: 0.375rem;
  font-size: 0.875rem; font-family: inherit;
}
.paneel-kader form textarea { min-height: 60px; resize: vertical; }
.paneel-kader form label { font-size: 0.75rem; color: var(--c-grijs-licht, #888); display: block; }

/* --- Tijdlijn-slider --- */
.tl-label { margin-top: 0.5rem; font-weight: 600; }
.tl-stats { font-size: 0.875rem; opacity: 0.85; margin-top: 0.25rem; }

/* ============================================================ */
/* MOBIEL-RESPONSIEF — touch-friendly bij telefoon-breedte      */
/* ============================================================ */

@media (max-width: 768px) {
  body { font-size: 16px; }    /* voorkom iOS zoom op input-focus */
  .container, .container-narrow {
    padding-left: 1rem; padding-right: 1rem;
  }
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.25rem; }

  /* Vluchtdetail: 1-koloms onder side panel */
  .vlucht-layout {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  #kaart { height: 360px !important; }
  .side-paneel { padding: 1rem; }

  /* Tabellen scrollbaar maken */
  .lijst {
    display: block; overflow-x: auto;
    white-space: nowrap;
  }

  /* Knoppen ≥ 44×44 px voor vinger-tap */
  .btn, button, .btn-primary {
    min-height: 44px;
    padding: 0.625rem 1rem;
    font-size: 1rem;
  }

  /* Form-velden ruim */
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="date"], select, textarea {
    min-height: 44px;
    font-size: 1rem;
    width: 100%;
  }

  /* Banner kleiner */
  .tile-banner { padding: 0.625rem 0.75rem; font-size: 0.875rem; }
  .spinner { width: 1.25rem; height: 1.25rem; }

  /* Footer compact */
  .footer { padding: 1.5rem 1rem; font-size: 0.7rem; }

  /* Side-by-side cards vouwen */
  .grid-2col, .grid-3col, .grid-4col {
    grid-template-columns: 1fr !important;
  }

  /* Modal/dialog: full-screen */
  .modal { width: 100% !important; max-height: 100vh; }
}

@media (max-width: 480px) {
  h1 { font-size: 1.25rem; }
  .lead { font-size: 0.9375rem; }
  #kaart { height: 280px !important; }
  /* Verberg minder-belangrijke kolommen in tabellen */
  .lijst th:nth-child(n+4), .lijst td:nth-child(n+4) { display: none; }
}

/* Touch-feedback */
@media (hover: none) {
  .btn:active, button:active { opacity: 0.7; }
}