/* ==========================================================================
   TouchTo — Shell extras: app footer + read-aloud highlight
   Kept in its own file so it composes cleanly with redesign.css.
   ========================================================================== */

/* ── App footer (Powered by / legal links) ── */
.app-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 22px;
  margin-top: 40px;
  padding: 22px 24px calc(22px + 76px); /* bottom clears the fixed bottom-nav */
  border-top: 1px solid var(--c-border, #e4e7ee);
  font-family: var(--f-body, sans-serif);
  font-size: 13px;
  color: var(--c-fg2, #555e6e);
  text-align: center;
}
.app-footer__powered { color: var(--c-fg3, #818a99); }
.app-footer__powered strong { font-weight: 700; }
.app-footer__links { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.app-footer a {
  color: var(--c-accent, #4b698c);
  font-weight: 600;
  text-decoration: none;
}
.app-footer a:hover { text-decoration: underline; }
.app-footer__brand {
  display: inline-flex; align-items: center; gap: 6px;
}
.app-footer__brand img { height: 16px; width: auto; opacity: 0.8; }
@media print { .app-footer { display: none !important; } }

/* ── Input-method explanation (Eyetracker vs. Webcam) ── */
.input-method-help {
  margin-top: 12px;
  padding: 14px 16px;
  background: var(--c-bg-secondary, #f0f1f4);
  border-left: 4px solid var(--c-accent, #4b698c);
  border-radius: 10px;
  font-family: var(--f-body, sans-serif);
}
.input-method-help__head {
  font-family: var(--font-heading-condensed, 'Oswald', sans-serif);
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-fg3, #818a99); margin-bottom: 8px;
}
.input-method-help__line {
  font-size: 14px; line-height: 1.5; color: var(--c-fg2, #555e6e); margin: 0 0 8px;
}
.input-method-help__line:last-child { margin-bottom: 0; }
.input-method-help__line strong { color: var(--c-fg1, #1d1d1f); font-weight: 700; }

/* ── Read-aloud ("Vorlesen") highlight of the element currently spoken ── */
.tts-reading {
  background: rgba(75, 105, 140, 0.16) !important;
  outline: 2px solid var(--c-accent, #4b698c);
  outline-offset: 3px;
  border-radius: 6px;
  scroll-margin: 120px;
  transition: background 0.15s var(--ease-out, ease), outline-color 0.15s var(--ease-out, ease);
}
[data-theme="dark"] .tts-reading { background: rgba(126, 167, 212, 0.22) !important; }
[data-theme="contrast"] .tts-reading, .high-contrast .tts-reading {
  background: rgba(255, 214, 10, 0.28) !important;
  outline-color: #ffd60a;
}

/* ── In-app confirmation dialog (TouchToConfirm) ── */
.app-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 20px;
  animation: appConfirmFade 0.12s ease;
}
@keyframes appConfirmFade { from { opacity: 0; } to { opacity: 1; } }
.app-confirm {
  max-width: 440px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  text-align: center;
  border-radius: 20px;
}
.app-confirm__title {
  margin: 0;
  font-family: var(--font-headline, var(--f-display, serif));
  font-size: 1.4rem;
  line-height: 1.2;
}
.app-confirm__msg {
  margin: 0;
  color: var(--c-fg2, #4a4a4a);
  font-size: 1.05rem;
  line-height: 1.5;
}
.app-confirm__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 4px;
}
.app-confirm__actions button { min-height: 52px; padding: 0 24px; }
.app-confirm__danger {
  min-height: 52px;
  padding: 0 24px;
  border: none;
  border-radius: 999px;
  background: var(--color-error, #dc2626);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.12s ease;
}
.app-confirm__danger:hover { background: #b91c1c; }
.app-confirm__danger:focus-visible { outline: 3px solid #ffd60a; outline-offset: 2px; }

/* ── Prominent raised center bottom-nav button ("Mein Bereich") ── */
.bottom-nav__item--primary {
  position: relative;
  justify-content: flex-end;
}
.bottom-nav__primary-disc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-top: -30px;                 /* lift the disc above the nav bar */
  margin-bottom: 2px;
  background: linear-gradient(140deg, #4b698c, #2f4a6b);
  color: #fff;
  border: 4px solid var(--c-bg-primary, #fff);
  box-shadow: 0 8px 22px rgba(75, 105, 140, 0.5), 0 2px 6px rgba(0, 0, 0, 0.22);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.bottom-nav__primary-disc i,
.bottom-nav__primary-disc svg { width: 28px; height: 28px; color: #fff; }
.bottom-nav__item--primary .bottom-nav__label {
  color: var(--c-accent, #4b698c);
  font-weight: 700;
}
.bottom-nav__item--primary:hover .bottom-nav__primary-disc { transform: translateY(-2px) scale(1.04); }
.bottom-nav__item--primary.active .bottom-nav__primary-disc {
  transform: scale(1.06);
  box-shadow: 0 10px 26px rgba(75, 105, 140, 0.6), 0 0 0 3px rgba(255, 214, 10, 0.5);
}