/* OneTimeLogin Jarvis public pages. Tailwind (/vendors/tailwind/tailwind.min.css)
   does layout and colour; this file holds only what Tailwind's standard classes
   cannot: motion, focus, the modal and its scrollbar. Units: rem only. */

:root {
  color-scheme: dark;
  --jv-accent: #0f766e;
  --jv-accent-ink: #115e59;
  --jv-focus: #f59e0b;
  --jv-scroll-track: #e2e8f0;
  --jv-scroll-thumb: #0f766e;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --jv-accent: #2dd4bf;
  --jv-accent-ink: #5eead4;
  --jv-focus: #fbbf24;
  --jv-scroll-track: #1e293b;
  --jv-scroll-thumb: #14b8a6;
}

html[data-theme="light"] {
  color-scheme: light;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-wrap: break-word;
}

/* Visible keyboard focus on every interactive element, both themes. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 0.1875rem solid var(--jv-focus);
  outline-offset: 0.1875rem;
  border-radius: 0.375rem;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 60;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  background: #0f172a;
  color: #ffffff;
  transition: top 0.15s ease-out;
}

.skip-link:focus {
  top: 1rem;
}

/* Touch targets: 2.75rem minimum for controls that are not inline links. */
.tap {
  min-height: 2.75rem;
  min-width: 2.75rem;
}

/* Gentle entrance. Disabled entirely under prefers-reduced-motion. */
@keyframes jv-rise {
  from { opacity: 0; transform: translateY(0.75rem); }
  to { opacity: 1; transform: none; }
}

.rise {
  animation: jv-rise 0.5s ease-out both;
}

.rise-2 { animation-delay: 0.08s; }
.rise-3 { animation-delay: 0.16s; }
.rise-4 { animation-delay: 0.24s; }

.lift {
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.lift:hover {
  transform: translateY(-0.125rem);
}

.review-tag {
  display: inline-block;
  margin: 0 0.25rem;
  padding: 0.0625rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02rem;
  text-transform: uppercase;
  background: #fef3c7;
  color: #78350f;
  border: 0.0625rem solid #f59e0b;
}

/* ---- Modal: "What Jarvis can and cannot see" ------------------------------
   max-height 85vh (85dvh where supported); header and footer stay fixed and
   only .modal-body scrolls, with a calculated max-height. */
.modal {
  width: min(40rem, calc(100vw - 2rem));
  max-height: 85vh;
  max-height: 85dvh;
  padding: 0;
  border: 0;
  border-radius: 1rem;
  overflow: hidden;
  --modal-header: 4rem;
  --modal-footer: 4.5rem;
}

.modal[open] {
  display: flex;
  flex-direction: column;
  animation: jv-rise 0.25s ease-out both;
}

.modal::backdrop {
  background: rgba(2, 6, 23, 0.7);
}

.modal-header,
.modal-footer {
  flex: 0 0 auto;
}

.modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  max-height: calc(85vh - var(--modal-header) - var(--modal-footer));
  max-height: calc(85dvh - var(--modal-header) - var(--modal-footer));
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--jv-scroll-thumb) var(--jv-scroll-track);
}

.modal-body::-webkit-scrollbar {
  width: 0.5rem;
}

.modal-body::-webkit-scrollbar-track {
  background: var(--jv-scroll-track);
  border-radius: 0.5rem;
}

.modal-body::-webkit-scrollbar-thumb {
  background: var(--jv-scroll-thumb);
  border-radius: 0.5rem;
}

/* Theme toggle: show the icon for the theme you would switch TO. */
html[data-theme="dark"] .icon-moon,
html[data-theme="light"] .icon-sun {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise,
  .modal[open] { animation: none; }
  .lift,
  .skip-link { transition: none; }
  .lift:hover { transform: none; }
}

@media print {
  .no-print { display: none; }
}