/* The consent card and the Settings row (js/core/consent.js).
   The card floats at the foot of the page column, just above the mini player, like a Mac popover:
   the translucent menu surface, 16 px corners, the amber symbol in its tinted circle (as Home's
   support row draws its heart), the small capsule buttons with Allow in the accent. It never
   covers the sidebar, steps above the compact tab bar and mini player below 640 px, and hides
   while Stage Mode is up. */

.consent-card {
  position: fixed; z-index: 16;
  /* Physical, as the shell places the sidebar and .mini (left in every language, RTL too). */
  left: calc(var(--sidebar-w) + 8px + 24px);
  right: 24px;
  bottom: calc(16px + 60px + 12px + env(safe-area-inset-bottom, 0px));
  margin-inline: auto;
  max-width: 560px;
  display: flex; align-items: center; gap: 12px;
  padding-block: 12px;
  padding-inline: 14px 12px;
  border-radius: var(--radius-sheet);
  background: var(--menu);
  -webkit-backdrop-filter: blur(30px) saturate(1.6);
  backdrop-filter: blur(30px) saturate(1.6);
  box-shadow: var(--menu-shadow);
  color: var(--label);
  text-align: start;
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity 0.22s var(--snappy), transform 0.3s var(--snappy);
}
.consent-card.shown { opacity: 1; transform: none; }
.consent-card.closing { opacity: 0; transform: translateY(6px); transition-duration: 0.2s; pointer-events: none; }

.consent-symbol {
  flex: none;
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--accent-15);
  color: var(--accent);
}
.consent-symbol .icon { width: 17px; height: 17px; stroke-width: 1.9; }

.consent-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.consent-text { margin: 0; font-size: calc(13px * var(--text-scale)); line-height: 1.35; color: var(--label); }
.consent-more { justify-self: start; font-size: calc(11px * var(--text-scale)); font-weight: 500; color: var(--accent-text); }
.consent-more:hover { text-decoration: underline; }

.consent-buttons { flex: none; display: flex; gap: 8px; }
.consent-btn { min-height: 28px; padding-inline: 14px; }

/* Stage Mode takes the whole window; the question waits behind it. */
:root.stage .consent-card { visibility: hidden; }

/* Compact window: above the mini player, which sits above the tab bar; buttons on a row of their own. */
@media (max-width: 639px) {
  .consent-card {
    left: 16px; right: 16px;
    bottom: calc(12px + 58px + 10px + 60px + 10px + env(safe-area-inset-bottom, 0px));
    flex-wrap: wrap;
    gap: 10px 12px;
    padding-inline: 14px;
  }
  .consent-body { flex-basis: calc(100% - 44px); }
  .consent-buttons { width: 100%; }
  .consent-btn { flex: 1; min-height: 34px; }
}

/* Very short windows (a phone held sideways): no room above the bars, so it sits on them. */
@media (max-height: 420px) {
  .consent-card { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); z-index: 25; }
}

@media print { .consent-card { display: none; } }

/* ---------------------------------------------------------------- Settings row */

/* Inside Settings' .form group it takes the shared .form-row look; on its own it still lays out. */
.consent-row { display: flex; align-items: center; gap: 12px; min-height: 36px; cursor: pointer; }
.consent-row > .label { flex: 1; min-width: 0; }
.consent-row .consent-note { margin-top: 2px; line-height: 1.35; }
.consent-row .consent-more { font-size: inherit; }
.consent-row.consent-locked { cursor: default; }