/* =============================================================================
   MEMBER MINDER PRO — LOGIN PAGE STYLES
   Clean, modern, accessible. Split-pane layout: Login (left) + Stories (right)

   This file is organized into sections for easy navigation and customization.
   Brand-specific colors are dynamically injected via JavaScript from manifests.
   ============================================================================= */

/* =============================================================================
   1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)

   All color tokens reference the Member Minder Pro brand-assets stylesheet
   (https://cdn.jsdelivr.net/gh/memberminderpro/brand-assets@main/css/colors.css),
   loaded in index.html before this file. Defaults use brand-assets variables
   (e.g. --mmp-ui-blue-semi-dark, --mmp-red, --mmp-gray). JS overrides --brand,
   --accent, --bg, --color-background, --color-panel-background, and semantic
   colors from the manifest; manifest values can be literal hex/rgb/hsl or
   brand-assets variable names (e.g. mmp-ui-blue-semi-dark, mmp-red). No
   hard-coded hex/rgb/hsl in this file so theming stays consistent with
   brand-assets definitions.

   CUSTOMIZATION: Modify spacing, radius, shadows here for global changes.
   ============================================================================= */

:root {
  /* === COLOR PALETTE (all from Member Minder Pro brand-assets CDN; no fallbacks so failures are visible) === */

  /* --brand: set by JS from manifest.brand_color; default MMP Blue (DACdb UI) */
  --brand: var(--mmp-blue);

  /* --brand-ink: calculated from --brand */
  --brand-ink: color-mix(in srgb, var(--brand) 85%, var(--black));

  /* --accent: set by JS from manifest.accent_color; default from CDN */
  --accent: var(--mmp-gold);

  /* === TEXT COLORS (from brand-assets; MMP UI Blue for UI contexts) === */
  --ink: color-mix(in srgb, var(--mmp-ui-blue-ultra-dark) 85%, var(--black)); 
  --muted-ink: var(--mmp-gray);

  /* === BACKGROUND COLORS === */
  /* --bg: set by JS from manifest.background_color; default MMP UI Blue */
  --bg: var(--mmp-ui-blue);
  --panel: var(--white);
  --panel-ink:  var(--ink);

  /* === STORY CARD COLORS === */
  --card: var(--white);
  --card-ink: var(--ink);

  /* === UI ELEMENT COLORS (from brand-assets) === */
  --border: var(--mmp-gray-light);
  --ring: var(--mmp-gold);
  --charcoal: var(--charcoal);

  /* === SEMANTIC COLORS (overridden by JS from manifest; use these for theming) === */
  --color-heading: var(--brand-ink);
  --color-label: var(--brand-ink);
  --color-link: var(--brand-ink);
  --color-text: var(--charcoal);
  --color-background: var(--bg);
  --color-panel-background: var(--bg);
  --color-border: var(--border);

  /* === SPACING SCALE (rem-based for accessibility) === */
  /* Base: 1rem = 16px in most browsers */
  --space-xxs: 0.25rem;        /* 4px  - Minimal spacing */
  --space-xs: 0.5rem;          /* 8px  - Tight spacing */
  --space-sm: 1rem;            /* 16px - Small spacing */
  --space-md: 1.5rem;          /* 24px - Medium spacing */
  --space-lg: 2rem;            /* 32px - Large spacing */
  --space-xl: 3rem;            /* 48px - Extra large spacing */
  --space-2xl: 5rem;           /* 80px - 2X extra large */
  --space-3xl: 7.5rem;         /* 120px - 3X extra large */

  /* Component-specific spacing (compact so card fits in viewport) */
  --login-padding-y: var(--space-md);    /* Vertical padding inside login pane */
  --login-padding-x: var(--space-lg);   /* Horizontal padding inside login pane */
  --login-gap: var(--space-sm);         /* Gap between login form elements */

  /* === VISUAL EFFECTS === */
  --focus: 2px solid var(--ring);
  --radius: 1rem;
  --shadow: 0 10px 30px color-mix(in srgb, var(--black) 12%, transparent);
}

/* =============================================================================
   2. GLOBAL RESET & BASE STYLES

   Sets up box-sizing, typography, and basic page layout.
   ============================================================================= */

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Accessibility: Hide content visually but keep it for screen readers */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* =============================================================================
   3. SPLIT-PANE LAYOUT (DESKTOP)

   Main container with 50/50 split: Login (left) and Stories (right).
   On mobile (<768px), panes stack (login first, content second). Page scrolls 
   so login can scroll out of view to reveal the stories.
   CUSTOMIZATION: Change grid-template-columns to adjust split ratio.
   Example: "1fr 2fr" would make stories pane twice as wide.
   ============================================================================= */

.shell {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh; /* Login and story panes each fill viewport height */
  height: 100vh;
}

.pane {
  position: relative;
  overflow-y: auto; /* Enable vertical scrolling when content overflows */
  overflow-x: hidden;
}

/* =============================================================================
   4. LOGIN PANE (LEFT SIDE)

   Contains the login form, branding, and footer.
   Background color uses --brand variable (set by JavaScript).

   CUSTOMIZATION:
   - Adjust .login-container max-width to change form width
   - Modify .login-container border to change container border style
   - Change padding values to adjust spacing around form
   ============================================================================= */

.login-pane {
  /* Background from manifest panel_background_color or background_color (--color-panel-background) */
  background: var(--color-panel-background);
  color: var(--color-text);
  padding: clamp(0.5rem, 1.25vw, 1.5rem) clamp(0.75rem, 2vw, 2rem);
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  align-items: center;
  min-height: 100%;
}

.login-container {
  background: var(--panel);
  border: 4px solid var(--charcoal);
  border-radius: var(--space-md);
  padding: clamp(0.5rem, 1.25vw, 1.25rem);
  margin: 0;
  width: 100%;
  max-width: min(90%, 28rem);
  display: flex;
  flex-direction: column;
  gap: clamp(0.35rem, 1vw, 0.875rem);
}

/* No scrollbar on the card: card grows with content; pane scrolls if needed */

/* === BRANDING SECTION === */
/* Logo and title at top of login form */

.brand {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-xs) / 2);
}

.brand__logos {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.brand__logo {
  width: min(10rem, 52%);
  max-height: min(4rem, 11vh);
  height: auto;
  object-fit: contain;
}

.account-logo {
  max-height: min(4rem, 11vh);
  max-width: min(15rem, 60%);
  height: auto;
  width: auto;
  object-fit: contain;
  margin-left: auto;
}

/* Title is visually hidden but accessible to screen readers */
.brand__title {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.brand__subtitle {
  margin: 0;
  color: var(--muted-ink);
  font-size: clamp(0.6875rem, 1.4vw, 0.8125rem);
}

/* === FORM HEADING === */
.form-heading {
  margin: 0;
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  font-weight: 700;
  color: var(--color-heading);
  line-height: 1.2;
}

/* =============================================================================
   5. FORM COMPONENTS

   Form fields, inputs, labels, buttons, and form-specific UI elements.

   CUSTOMIZATION:
   - Adjust input padding/border-radius for different field styles
   - Modify --space-sm in .form gap to change spacing between fields
   - Change input border colors for different visual styles
   ============================================================================= */

.form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.field label {
  font-weight: 600;
  font-size: clamp(0.8125rem, 1.6vw, 0.9375rem);
  color: var(--color-label);
}

/* Label row with action link on right (e.g., "Password" + "Reset password" link) */
.field-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* === PASSWORD FIELD WITH SHOW/HIDE TOGGLE === */
/* Eye icon positioned inside password input field */

.password-wrapper {
  position: relative;
  width: 100%;
}

.password-wrapper input {
  padding-right: 3rem !important; /* Make room for eye icon */
  width: 100% !important;
}

.toggle-password-icon {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: var(--color-link);
  cursor: pointer;
  padding: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
  z-index: 10;
}

.toggle-password-icon:hover {
  background-color: color-mix(in srgb, var(--black) 5%, transparent);
}

.toggle-password-icon:focus {
  outline: var(--focus);
  outline-offset: 0.125rem;
}

.toggle-password-icon .eye-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-link);
}

/* Toggle between open/closed eye icons */
.toggle-password-icon .eye-closed {
  display: none;
}

.toggle-password-icon.active .eye-open {
  display: none;
}

.toggle-password-icon.active .eye-closed {
  display: block;
}

/* === INPUT FIELDS === */
/* Applies to text, email, and password inputs */

.field input[type="text"],
.field input[type="email"],
.field input[type="password"] {
  appearance: none;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: clamp(0.5rem, 1.25vw, 0.625rem) clamp(0.625rem, 1.5vw, 0.75rem);
  font-size: clamp(0.8125rem, 1.8vw, 0.9375rem);
  background: var(--white);
  color: var(--color-text);
  outline: none;
}

.field input:focus {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ring) 28%, transparent);
  border-color: var(--ring);
}

/* === CHECKBOX FIELDS === */
.field--inline {
  align-items: flex-start;
}

.checkbox {
  display: flex;
  align-items: center;
  gap: calc(var(--space-sm) * 0.625);
  user-select: none;
  cursor: pointer;
}

.checkbox input {
  width: 1.125rem; /* 18px checkbox */
  height: 1.125rem;
}

/* =============================================================================
   6. BUTTONS

   Primary, accent, and utility button styles.

   CUSTOMIZATION:
   - Change padding/font-size for different button sizes
   - Modify box-shadow for different elevation effects
   - Add new button modifiers (e.g., .btn--outline) as needed
   ============================================================================= */

.actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-weight: 600;
  padding: clamp(0.5rem, 1.25vw, 0.625rem) clamp(0.75rem, 1.5vw, 0.875rem);
  border-radius: 0.375rem;
  box-shadow: var(--shadow);
  font-size: clamp(0.8125rem, 1.8vw, 0.9375rem);
  transition: background-color 0.2s ease;
}

/* Primary button (uses brand color) */
.btn--primary {
  background: var(--brand);
  color: var(--white);
}

.btn--primary:focus {
  outline: var(--focus);
}

/* Disabled state: greyed out, not interactive */
.btn--primary:disabled {
  background: var(--muted-ink);
  box-shadow: none;
  cursor: not-allowed;
}

/* Hover: only when enabled and not loading */
.btn--primary:not(:disabled):not(.btn--loading):hover {
  background: var(--brand-ink);
}

/* Loading state: spinner replaces label text */
.btn--loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
  cursor: not-allowed;
}

.btn--loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  margin: -0.5em 0 0 -0.5em;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* Full-width button */
.btn--block {
  width: 100%;
  display: block;
}

/* Small button variant */
.btn--sm {
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
}

/* === SESSION PREFERENCE MODAL BUTTONS === */
/* Green "Yes" and Red "No" buttons for session preference modal */

.btn-session-yes {
  background: var(--grass);
  color: var(--white);
  font-weight: 600;
}

.btn-session-yes:hover {
  background: var(--mmp-ui-green-semi-dark);
}

.btn-session-no {
  background: var(--mmp-red);
  color: var(--white);
  font-weight: 600;
}

.btn-session-no:hover {
  background: var(--mmp-red-dark);
}

/* === LINK-STYLE BUTTONS === */
/* Text buttons with animated underline (e.g., "Reset password", "Retrieve username") */

.link-btn {
  background: transparent;
  border: 0;
  color: var(--color-link);
  cursor: pointer;
  text-decoration: none;
  font-weight: 600;
  padding: 0.125rem 0;
  position: relative;
  padding-bottom: 0.25rem;
}

/* Animated underline on hover */
.link-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0.125rem;
  background-color: var(--accent);
  transition: width 0.3s ease;
}

.link-btn:hover::after {
  width: 100%;
}

.link-btn:focus {
  outline: var(--focus);
}

/* =============================================================================
   7. TURNSTILE (CAPTCHA) & LEGAL TEXT

   Cloudflare Turnstile widget and Terms/Privacy links.
   ============================================================================= */

/* Force Turnstile iframe to be full-width */
#turnstile-container,
#turnstile-container > div,
#turnstile-container iframe {
  width: 100% !important;
  max-width: 100% !important;
  display: block;
}

/* Legal text with linked terms/privacy */
.legal.small {
  font-size: 0.8125rem;
  color: var(--muted-ink);
  margin: 0 0 var(--space-xxs) 0;
}

.legal.small a {
  color: var(--color-link);
  text-decoration: none;
  position: relative;
  padding-bottom: 0.125rem;
}

/* Animated underline on legal links */
.legal.small a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0.125rem;
  background-color: var(--accent);
  transition: width 0.3s ease;
}

.legal.small a:hover::after {
  width: 100%;
}

/* =============================================================================
   8. FOOTER

   SecurityMetrics badge and footer links.

   CUSTOMIZATION: Adjust font-size or gap for different footer layouts.
   ============================================================================= */

.footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: 0.25rem;
}

.sm-badge img {
  display: block;
  filter: saturate(0.9); /* Slightly desaturate badge */
}

.footer-links {
  margin: 0;
  font-size: 0.75rem; /* 12px small text */
  color: var(--muted-ink);
  line-height: 1.5;
}

.footer-links a {
  color: var(--color-link);
  text-decoration: none;
  position: relative;
  padding-bottom: 0.125rem;
}

/* Animated underline on footer links */
.footer-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0.125rem;
  background-color: var(--accent);
  transition: width 0.3s ease;
}

.footer-links a:hover::after {
  width: 100%;
}

/* =============================================================================
   9. CONTENT PANE (RIGHT SIDE - STORIES)

   Displays brand stories with background image and gradient overlay.
   Hidden on mobile (<768px).

   CUSTOMIZATION:
   - Modify .content-bg gradients to change overlay appearance
   - Adjust .content-bg::before opacity to lighten/darken overlay
   - Change story-view max-height to control story card height
   ============================================================================= */

.content-pane {
  position: relative;
  color: var(--white);
  display: flex;
  align-items: stretch;
  min-height: 100%; /* Ensure pane fills container height */
}

/* Background with brand-themed overlay */
.content-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 1200px at 100% 0%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 60%),
    radial-gradient(1200px 1200px at 0% 100%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 60%),
    var(--ink);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: transform;
  transform: translateZ(0); /* Hardware acceleration */
  filter: saturate(1.1);
}

/* Brand-colored gradient overlay on background */
.content-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--brand) 90%, var(--white)),
    var(--brand),
    color-mix(in srgb, var(--brand) 80%, black)
  );
  opacity: 0.80; /* Adjust for lighter/darker overlay */
  pointer-events: none;
}

.content-inner {
  position: relative;
  z-index: 1;
  padding: clamp(1.25rem, 3vw, 2.5rem); /* Responsive padding */
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  backdrop-filter: blur(0);
}

/* === FEATURED STORY CARD === */
/* Large story display at top of content pane */

.story-view {
  background: color-mix(in srgb, var(--black) 35%, transparent);
  border: 1px solid color-mix(in srgb, var(--white) 12%, transparent);
  border-radius: var(--radius);
  box-shadow: 0 0.75rem 2.5rem color-mix(in srgb, var(--black) 25%, transparent);
  overflow: auto; /* Single scroll: image + body scroll together */
  max-height: none;
  display: flex;
  flex-direction: column;
}

.story-media {
  flex-shrink: 0;
}

.story-media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  max-height: 17.5rem;
}

.story-body {
  padding: clamp(1rem, 2.4vw, 1.5rem); /* Responsive padding */
  flex: 1 1 auto;
}

.story-title {
  margin: 0 0 0.5rem;
  font-size: clamp(1rem, 2.6vw, 1.5rem); /* Responsive font size: 16px to 24px */
  color: var(--white);
}

.story-html {
  font-size: clamp(0.875rem, 2vw, 1rem); /* Responsive body text: 14px to 16px */
  line-height: 1.55;
  color: var(--white);
}

.story-html img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  display: block;
  margin: 1rem 0;
}

.story-html video,
.story-html audio,
.story-html iframe {
  max-width: 100%;
  border-radius: 0.5rem;
  display: block;
  margin: 1rem 0;
}

.story-html figure {
  margin: 1rem 0;
  padding: 0;
}

.story-html figcaption {
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--white) 70%, transparent);
  font-style: italic;
  margin-top: 0.5rem;
  text-align: center;
}

.story-html a {
  color: var(--mmp-ui-blue-light);
  text-decoration: underline;
}

.story-html p {
  margin: 0 0 0.75rem;
}

.story-html blockquote {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--brand);
  background: color-mix(in srgb, var(--white) 5%, transparent);
  border-radius: 0.25rem;
}

.story-html pre {
  background: color-mix(in srgb, var(--black) 30%, transparent);
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 1rem 0;
}

.story-html code {
  background: color-mix(in srgb, var(--black) 30%, transparent);
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  font-family: 'Courier New', monospace;
  font-size: 0.875em;
}

.story-html pre code {
  background: none;
  padding: 0;
}

.story-html hr {
  border: none;
  border-top: 1px solid color-mix(in srgb, var(--white) 20%, transparent);
  margin: 1.5rem 0;
}

/* Error/technical details in story view (uses brand-assets muted color) */
.story-details-muted {
  font-size: 0.875rem;
  color: var(--muted-ink);
  margin-top: 1rem;
}
.story-details-muted summary {
  cursor: pointer;
}

/* === STORY CARDS CAROUSEL === */
/* Horizontal scrolling carousel of story cards */

.carousel-container {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.carousel-container[hidden] {
  display: none;
}

.content-inner:has(> .carousel-container[hidden]) {
  justify-content: center;
}

.carousel-nav {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--white) 90%, transparent);
  color: var(--brand);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--black) 15%, transparent);
  z-index: 10;
}

.carousel-nav:hover {
  background: var(--white);
  transform: scale(1.1);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--black) 20%, transparent);
}

.carousel-nav:active {
  transform: scale(0.95);
}

.carousel-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: scale(1);
}

.carousel-nav svg {
  display: block;
}

.cards {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.5rem;
  /* Hide scrollbar but keep functionality */
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--white) 20%, transparent) transparent;
  user-select: none; /* Prevent text selection while dragging */
}

.cards.dragging {
  scroll-snap-type: none; /* Disable snap during drag */
  scroll-behavior: auto;
}

.cards.dragging .card {
  pointer-events: none; /* Prevent card interactions while dragging */
}

.cards::-webkit-scrollbar {
  height: 6px;
}

.cards::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--white) 5%, transparent);
  border-radius: 3px;
}

.cards::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--white) 20%, transparent);
  border-radius: 3px;
}

.cards::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--white) 30%, transparent);
}

.card {
  background: var(--card);
  color: var(--card-ink);
  border: 1px solid var(--color-border);
  border-radius: 0.875rem;
  padding: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-shadow: var(--shadow);
  /* Fixed width to show 2.33 cards - accounting for gaps between cards */
  flex: 0 0 calc((100% - (1rem * 1.33)) / 2.33);
  min-width: 0; /* Prevent flex items from overflowing */
  scroll-snap-align: start;
  transition: all 0.2s ease;
  cursor: pointer;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--black) 15%, transparent);
}

/* Active card styling */
.card--active {
  border-color: var(--brand);
  border-width: 2px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 10%, transparent), var(--shadow);
}

.card__title {
  margin: 0;
  font-weight: 700;
  font-size: clamp(0.875rem, 2vw, 1rem); /* Responsive card title: 14px to 16px */
}

.card__snippet {
  margin: 0;
  color: var(--mmp-gray-dark);
  font-size: clamp(0.75rem, 1.8vw, 0.875rem); /* Responsive snippet: 12px to 14px */
  line-height: 1.45;
  max-height: 6.5em;
  overflow: scroll;
}

.card__cta {
  margin-top: auto;
  align-self: flex-start;
}

.card__cta .btn {
  background: var(--brand);
  color: var(--white);
}

/* =============================================================================
   10. MODAL DIALOGS

   Reusable modal component for password reset, username retrieval, etc.

   CUSTOMIZATION:
   - Adjust .modal max-width to change modal size
   - Modify animations (fadeIn, slideUp) for different entrance effects
   - Change modal backdrop-filter for different blur effects
   ============================================================================= */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--ink) 85%, transparent);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  animation: fadeIn 0.2s ease;
}

.modal-overlay.hidden {
  display: none;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal {
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px color-mix(in srgb, var(--black) 30%, transparent);
  padding: var(--space-xl);
  max-width: 28rem; /* 448px max modal width */
  width: 100%;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.modal__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-md);
}

.modal__title {
  margin: 0;
  font-size: 1.5rem; /* 24px */
  font-weight: 700;
  color: var(--panel-ink);
  line-height: 1.2;
}

.modal__close {
  background: transparent;
  border: 0;
  color: var(--muted-ink);
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
}

.modal__close:hover {
  background: color-mix(in srgb, var(--black) 5%, transparent);
  color: var(--panel-ink);
}

.modal__close:focus {
  outline: var(--focus);
  outline-offset: 0.125rem;
}

.modal__body {
  margin-bottom: var(--space-md);
}

.modal__body p {
  margin: 0 0 var(--space-sm);
  color: var(--muted-ink);
  line-height: 1.5;
}

.modal__actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: flex-end;
}

.modal__actions .btn {
  min-width: 6rem;
}

.modal .field {
  margin-bottom: var(--space-sm);
}

.modal .cf-turnstile {
  margin-bottom: var(--space-sm);
}

/* === MODAL ALERT MESSAGES === */
/* Error and success messages within modals */

.modal-error {
  background: var(--mmp-red-ultra-light);
  border: 1px solid var(--mmp-red-light);
  color: var(--mmp-red-dark);
  padding: var(--space-sm);
  border-radius: 0.375rem;
  margin-bottom: var(--space-sm);
  font-size: 0.875rem;
}

.modal-success {
  background: var(--mmp-ui-green-light);
  border: 1px solid var(--mmp-ui-green-semi-light);
  color: var(--mmp-ui-green-dark);
  padding: var(--space-sm);
  border-radius: 0.375rem;
  margin-bottom: var(--space-sm);
  font-size: 0.875rem;
}

/* =============================================================================
   11. SYSTEM REQUIREMENTS MODAL

   Full-screen modal for displaying system requirements iframe.
   Scoped to #system-requirements-modal to avoid conflicting with auth modals
   (Reset Password, Retrieve Username) which use .modal-overlay > .modal.
   90% width/height on desktop, 100% on mobile.
   ============================================================================= */

#system-requirements-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--ink) 95%, transparent);
  backdrop-filter: blur(4px);
  animation: fadeIn 0.2s ease;
}

#system-requirements-modal.hidden {
  display: none;
}

#system-requirements-modal .modal__overlay {
  position: absolute;
  inset: 0;
  cursor: pointer;
}

#system-requirements-modal .modal__content {
  position: relative;
  width: 90vw;
  height: 90vh;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px color-mix(in srgb, var(--black) 50%, transparent);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideUp 0.3s ease;
  z-index: 1;
}

#system-requirements-modal .modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 3rem;
  height: 3rem;
  background: color-mix(in srgb, var(--mmp-red) 95%, transparent);
  border: 0;
  border-radius: 50%;
  color: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--black) 30%, transparent);
  transition: all 0.2s ease;
}

#system-requirements-modal .modal__close:hover {
  background: var(--mmp-red-dark);
  transform: scale(1.1);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--black) 40%, transparent);
}

#system-requirements-modal .modal__close:focus {
  outline: 3px solid var(--ring);
  outline-offset: 3px;
}

#system-requirements-modal .modal__close svg {
  width: 1.5rem;
  height: 1.5rem;
  stroke-width: 3;
}

#system-requirements-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--white);
}

/* Mobile: Full screen modal */
@media (max-width: 768px) {
  #system-requirements-modal .modal__content {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }

  #system-requirements-modal .modal__close {
    top: 0.75rem;
    right: 0.75rem;
    width: 3.5rem;
    height: 3.5rem;
  }

  #system-requirements-modal .modal__close svg {
    width: 1.75rem;
    height: 1.75rem;
  }
}

/* Tablet: Slightly larger modal */
@media (min-width: 769px) and (max-width: 1024px) {
  #system-requirements-modal .modal__content {
    width: 95vw;
    height: 95vh;
  }
}

/* =============================================================================
   12. COOKIE CONSENT BANNER

   Fixed banner at bottom of page for cookie consent.
   Hidden after user dismisses.
   ============================================================================= */

.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: color-mix(in srgb, var(--mmp-gold) 95%, transparent);
  color: var(--white);
  padding: 0.625rem;
  border-top: 1px solid color-mix(in srgb, var(--white) 20%, transparent);
}

.consent.hidden {
  display: none;
}

.consent__inner {
  max-width: 75rem;
  margin: 0 auto;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
}

.consent p {
  margin: 0;
  font-size: 0.875rem;
}

/* =============================================================================
   12. ACCESSIBILITY

   Focus styles and reduced motion support.
   ============================================================================= */

:focus {
  outline: var(--focus);
  outline-offset: 0.125rem;
}

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* =============================================================================
   13. RESPONSIVE DESIGN

   Mobile-first breakpoints for different screen sizes.

   BREAKPOINTS:
   - max-width: 1200px - Tablet landscape (2-column story cards)
   - max-width: 900px  - Login card expands to fill pane/screen width
   - max-width: 768px  - Mobile portrait (stack panes; both visible)
   - max-height: 700px - Short viewport: scale login card spacing/typography so card fits

   CUSTOMIZATION: Adjust breakpoint values or add new ones as needed.
   ============================================================================= */

/* Tablet: Adjust carousel for smaller screens */
@media (max-width: 1200px) {
  .card {
    /* Show 1.5 cards on tablet */
    flex: 0 0 calc(100% / 1.5 - 0.67rem);
  }
}

/*
 * When viewport is narrow or short: card becomes full-bleed (full width, full height,
 * no border). No scrollbar on the card; pane scrolls if content overflows.
 */
@media (max-width: 900px), (max-height: 700px) {
  .login-pane {
    padding: 0;
  }

  .login-container {
    width: 100%;
    max-width: 100%;
    min-height: 100%; /* Fill pane height; pane scrolls if content overflows */
    border: 0;
    border-radius: 0;
    flex: 1; /* Fill pane when in flex layout */
  }
}

/* Short viewport only: scale spacing and typography so form fits without scrolling */
@media (max-height: 700px) {
  .login-container {
    padding: clamp(0.5rem, 1.5vw, 2rem);
    gap: clamp(0.35rem, 1vw, 1rem);
  }

  .brand__logo {
    max-height: min(4rem, 12vh);
    margin-bottom: var(--space-xs);
  }

  .form-heading {
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    margin-bottom: 0.25rem;
  }

  .form {
    gap: clamp(0.35rem, 1vw, 0.75rem);
  }

  .field label {
    font-size: clamp(0.8125rem, 1.5vw, 0.9375rem);
  }

  .field input[type="text"],
  .field input[type="email"],
  .field input[type="password"] {
    padding: clamp(0.5rem, 1vw, 0.625rem) clamp(0.625rem, 1.5vw, 0.75rem);
    font-size: clamp(0.8125rem, 1.8vw, 0.9375rem);
  }

  .legal.small {
    font-size: clamp(0.6875rem, 1.2vw, 0.8125rem);
  }

  .footer {
    padding-top: var(--space-xs);
  }

  .footer-links {
    font-size: clamp(0.6875rem, 1.2vw, 0.8125rem);
  }
}

/*
 * RESPONSIVE BREAKPOINTS AFFECTING LAYOUT
 * ---------------------------------------
 * - Base (no media): .shell grid 100vh, 50/50 columns (lines 136-141). Desktop layout.
 * - (max-width: 900px) or (max-height: 700px): .login-container full-bleed, flex: 1 (lines 1281-1293).
 * - (max-height: 700px): typography/spacing only (lines 1297-1338).
 * - (max-width: 768px): Mobile stacked. Login = content height. Content pane min = login height (JS), max = 100vh.
 */

/* Mobile: Login = content height; content pane min = login height (JS), max 100vh; page scrolls */
@media (max-width: 768px) {
  body {
    overflow-y: auto;
    overflow-x: hidden;
    height: auto;
    min-height: 100%;
  }

  main.shell,
  .shell {
    display: flex !important;
    flex-direction: column;
    height: auto !important;
    min-height: auto;
    grid-template-columns: unset;
    grid-template-rows: unset;
  }

  /* Login pane: height = content + padding (no white gap); scrolls out of view when user scrolls */
  .login-pane {
    height: auto;
    min-height: 0;
    flex-shrink: 0;
    overflow: visible;
    padding: 0;
    background: var(--panel);
  }

  /* Content pane: min-height set by JS to match login; max-height 100vh; story scrolls inside */
  .content-pane {
    display: flex;
    flex-direction: column;
    max-height: 100vh;
    flex: 1 0 auto;
    overflow: hidden;
  }

  .content-inner {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .story-view {
    flex: 1;
    min-height: 0;
    overflow: auto;
  }

  /* Carousel remains horizontally scrollable (existing .cards overflow-x: auto) */

  /* Remove login container border and rounded corners on mobile */
  .login-container {
    margin: 0;
    max-width: 100%;
    border: 0;
    border-radius: 0;
    background: var(--panel);
    padding: var(--space-md);
    padding-top: var(--space-sm);
  }

  /* Adjust modal padding on mobile */
  .modal {
    padding: var(--space-md);
  }

  /* Stack modal buttons vertically on mobile */
  .modal__actions {
    flex-direction: column-reverse;
  }

  .modal__actions .btn {
    width: 100%;
  }
}