@charset "UTF-8";
/**
 * Telar - Digital Storytelling Framework CSS
 *
 * @version v0.6.2-beta
 */
/* CSS Variables with hardcoded paisajes defaults as ultimate fallback */
:root {
  /* Text colors */
  --color-heading: #2c3e50;
  --color-body: #333333;
  --color-link: #8b4513;
  --color-button-text: #FFFFFF;
  --color-panel-layer1-text: #2c3e50;
  --color-panel-layer2-text: #FFFFFF;
  --color-panel-glossary-text: #333333;
  /* Background colors */
  --color-button-bg: #2c3e50;
  --color-panel-layer1-bg: #A8C5D4;
  --color-panel-layer2-bg: #3d2645;
  --color-panel-glossary-bg: #F5EDE1;
  /* Fonts */
  --font-headings: "Playfair Display", serif;
  --font-body: "Source Sans Pro", sans-serif;
}

/* Typography */
body {
  font-family: var(--font-body);
  color: var(--color-body);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headings);
  color: var(--color-heading);
}

/* Global link styling - theme color with underline */
a {
  color: var(--color-link);
  text-decoration: underline;
}

a:hover {
  opacity: 0.8;
}

/* Display headings - ensure proper word wrapping on mobile */
.navbar-brand {
  white-space: normal !important;
}

@media (max-width: 767px) {
  .display-4 {
    font-size: 2.5rem;
  }
}
/* Navigation */
.site-header .navbar-brand {
  font-family: var(--font-headings);
  font-size: 1.5rem;
  color: var(--color-heading);
}

.site-header .site-logo {
  max-height: 80px;
  width: auto;
}

.navbar-toggler {
  margin-left: auto;
}

/* Footer */
.site-footer {
  border-top: 1px solid #dee2e6;
}

.footer-link {
  color: #6c757d;
  text-decoration: none;
}

.footer-link:hover {
  color: var(--color-link);
  text-decoration: underline;
}

/* Page Content */
.page-content {
  font-size: 1.25rem;
  font-weight: 300;
}

.page-content h1 {
  margin-bottom: 1.5rem;
  font-weight: 400;
}

.page-content h2 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  font-weight: 400;
}

.page-content p {
  margin-bottom: 1.5rem;
}

.page-content img {
  max-width: 100%;
  height: auto;
}

/* User Page Widget Styling - styled as if inside panel-layer1 */
/* Widgets span full column width (no max-width constraint) */
/* Carousel captions - same as panel-layer1 (uses layer2 colors for contrast) */
.user-page .telar-widget-carousel .carousel-caption-below {
  background: var(--color-panel-layer2-bg);
  color: var(--color-panel-layer2-text);
}

.user-page .telar-widget-carousel .carousel-caption-below small,
.user-page .telar-widget-carousel .carousel-caption-below .caption-credit {
  color: rgba(255, 255, 255, 0.7);
}

/* Accordion styling - user pages use layer2 colors (like panel-layer1) */
.user-page .telar-widget-accordion .accordion-item {
  background: var(--color-panel-layer2-bg);
  border-color: rgba(255, 255, 255, 0.1);
}

.user-page .telar-widget-accordion .accordion-button {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-panel-layer2-text);
}

.user-page .telar-widget-accordion .accordion-button:not(.collapsed) {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-panel-layer2-text);
}

.user-page .telar-widget-accordion .accordion-body {
  color: var(--color-panel-layer2-text);
}

/* Tabs styling - user pages use layer2 colors (like accordions in panel-layer1) */
.user-page .telar-widget-tabs {
  background: transparent;
  border: none;
}

.user-page .telar-widget-tabs .nav-tabs {
  border-bottom: none;
  padding: 0;
  margin: 0;
  background: transparent;
}

.user-page .telar-widget-tabs .nav-tabs .nav-item {
  margin: 0;
}

.user-page .telar-widget-tabs .nav-tabs .nav-item:first-child .nav-link {
  margin-left: 0;
}

.user-page .telar-widget-tabs .nav-tabs .nav-link {
  border: none;
  border-radius: 0.5rem 0.5rem 0 0;
  padding: 0.75rem 1.25rem;
  margin: 0;
  background: var(--color-panel-layer2-bg);
  color: var(--color-panel-layer2-text);
  opacity: 0.7;
}

.user-page .telar-widget-tabs .nav-tabs .nav-link.active {
  background: var(--color-panel-layer2-bg);
  color: var(--color-panel-layer2-text);
  border: none;
  opacity: 1;
}

.user-page .telar-widget-tabs .tab-content {
  background: var(--color-panel-layer2-bg);
  color: var(--color-panel-layer2-text);
  border-radius: 0 0.5rem 0 0;
}

/* Site Description - Links appear darker than body text, show theme color and underline on hover */
.site-description a {
  color: var(--color-body);
  text-decoration: none;
  transition: all 0.3s ease;
  filter: brightness(0.7);
}

.site-description a:hover {
  color: var(--color-link);
  text-decoration: underline;
  filter: brightness(1);
}

/* Story Layout - Split Screen with Card Stacking */
.story-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background: #000;
}

.narrative-column {
  flex: 0 0 40%;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  position: relative;
  scroll-snap-type: y proximity;
  scroll-padding-top: 10vh;
}

.viewer-column {
  flex: 1;
  position: sticky;
  top: 0;
  height: 100vh;
  background: #000;
  overflow: hidden;
}

/* Viewer Card Stacking System */
#viewer-cards-container {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ============================================================================
   VIEWER CARD TRANSITIONS (v0.6.2)

   Fade-only transitions for all viewports. Slide-up animation removed in v0.6.2
   to reduce timing complexity and improve perceived performance.
   Z-index handles card stacking; opacity handles visibility transitions.
   ============================================================================ */
.viewer-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Fade-only transition - no slide animation */
  transition: opacity 300ms ease-out;
}

.card-below {
  opacity: 0;
  pointer-events: none;
}

.card-active {
  opacity: 1;
  pointer-events: auto;
}

/* Skeleton loading shimmer - subtle loading indicator during viewer initialization */
#viewer-cards-container.skeleton-loading::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Subtle gradient that sweeps across */
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 100%);
  animation: skeleton-shimmer 2s infinite;
  z-index: 999;
  pointer-events: none; /* Don't block viewer interactions */
}

@keyframes skeleton-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
/* Story Steps Container - Fixed height for absolute positioning */
.story-steps {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

/* Story Step - Absolute positioned cards that stack */
.story-step {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  padding: 2rem;
  background: #fff;
  border-left: 3px solid transparent;
  transform: translateY(100%);
  opacity: 0;
  transition: border-color 0.3s ease, opacity 0.4s ease-out, transform 0.4s ease-out;
  /* Flex layout for content and button */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Main content wrapper - centered vertically */
.step-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

/* Active state - slides up to visible position */
.story-step.is-active {
  border-left-color: var(--color-primary);
  opacity: 1;
  transform: translateY(0);
}

/* Return Home Button - at bottom of last step */
.step-home-button {
  padding-top: 1.5rem;
  padding-bottom: 0.5rem;
  border-top: 1px solid #e0e0e0;
  width: 100%;
}

/* Intro Step - First step in narrative column */
.story-intro {
  /* Uses same absolute positioning as normal steps */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-left: none !important;
  background: #f5f7fa;
  /* Start visible (like normal step) */
  transform: translateY(0) !important;
  opacity: 1 !important;
}

.intro-content {
  text-align: center;
  max-width: 600px;
  padding: 2rem;
}

.intro-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--color-primary);
  line-height: 1.2;
}

.intro-demo-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-accent, #6c757d);
  margin-bottom: 0.5rem;
  font-family: var(--font-body);
}

.intro-byline {
  font-size: 1.1rem;
  color: #5a6c7d;
  margin-top: 0.75rem;
  margin-bottom: 1.5rem;
  font-weight: 400;
}

.intro-description {
  font-size: 1.25rem;
  color: #5a6c7d;
  margin-bottom: 2rem;
  line-height: 1.6;
}

.intro-hint {
  margin-top: 3rem;
  opacity: 0.6;
}

/* Responsive hint text - show appropriate hint for device */
.hint-mobile {
  display: none;
}

@media (max-width: 768px) {
  .hint-desktop {
    display: none;
  }
  .hint-mobile {
    display: inline;
  }
}
.btn-home {
  position: fixed !important;
  top: 2rem !important;
  left: 2rem !important;
  text-decoration: none;
  color: #5a6c7d;
  padding: 0.5rem 1rem;
  border: 1px solid #cbd5e0;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
  z-index: 1040 !important;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-home:hover {
  background: white;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Home button icon - hidden on desktop */
.btn-home-icon {
  display: none;
}

/* Outro Step - End card in narrative column only */
.story-outro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-left: none !important;
  background: #f5f7fa;
}

.outro-content {
  text-align: center;
  max-width: 600px;
  padding: 2rem;
}

.outro-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--color-primary);
}

.outro-text {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  color: #5a6c7d;
}

.story-step h2 {
  font-size: 1.75rem;
  margin-bottom: 1rem;
}

.story-step p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

/* Panels - Theme-aware trigger buttons */
.panel-trigger {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  background: var(--color-button-bg);
  color: var(--color-button-text);
  text-decoration: none;
  cursor: pointer;
  font-weight: 600;
  border-radius: 20px;
  border: none;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

.panel-trigger:hover {
  background: var(--color-button-bg);
  color: var(--color-button-text);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  opacity: 0.9;
}

/* Layer 1 Panel - Light blue background, wide coverage */
#panel-layer1 {
  width: 65% !important;
  max-width: 800px;
  background: var(--color-panel-layer1-bg);
}

#panel-layer1 .offcanvas-header {
  background: var(--color-panel-layer1-bg);
  border-bottom: none;
  padding: 2rem 2rem 1rem 2rem;
}

#panel-layer1 .offcanvas-body {
  background: var(--color-panel-layer1-bg);
  color: var(--color-panel-layer1-text);
  padding: 2rem;
  font-size: 1.05rem;
  line-height: 1.8;
}

#panel-layer1 .offcanvas-title {
  color: var(--color-panel-layer1-text);
  font-family: var(--font-headings);
  font-size: 2rem;
  font-weight: 400;
}

/* Layer 2 Panel - Dark purple background, narrower than layer1 */
#panel-layer2 {
  width: 55% !important;
  max-width: 750px;
  background: var(--color-panel-layer2-bg);
}

#panel-layer2 .offcanvas-header {
  background: var(--color-panel-layer2-bg);
  border-bottom: none;
  padding: 2rem 2rem 1rem 2rem;
}

#panel-layer2 .offcanvas-body {
  background: var(--color-panel-layer2-bg);
  color: var(--color-panel-layer2-text);
  padding: 2rem;
  font-size: 1.05rem;
  line-height: 1.8;
}

#panel-layer2 .offcanvas-title {
  color: var(--color-panel-layer2-text);
  font-family: var(--font-headings);
  font-size: 2rem;
  font-weight: 400;
}

#panel-layer2 .offcanvas-body h2,
#panel-layer2 .offcanvas-body h3,
#panel-layer2 .offcanvas-body h4 {
  color: var(--color-panel-layer2-text);
}

/* Panel text max-width for readability (centered, images/widgets span full width) */
.offcanvas-body p,
.offcanvas-body ul,
.offcanvas-body ol,
.offcanvas-body blockquote,
.offcanvas-body h1,
.offcanvas-body h2,
.offcanvas-body h3,
.offcanvas-body h4,
.offcanvas-body h5,
.offcanvas-body h6 {
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
}

/* Increase h1 spacing in panels for better visual hierarchy */
.offcanvas-body h1 {
  margin-bottom: 1.5rem;
}

/* Layer 2 panel - narrower text for better proportions */
#panel-layer2 .offcanvas-body p,
#panel-layer2 .offcanvas-body ul,
#panel-layer2 .offcanvas-body ol,
#panel-layer2 .offcanvas-body blockquote,
#panel-layer2 .offcanvas-body h1,
#panel-layer2 .offcanvas-body h2,
#panel-layer2 .offcanvas-body h3,
#panel-layer2 .offcanvas-body h4,
#panel-layer2 .offcanvas-body h5,
#panel-layer2 .offcanvas-body h6 {
  max-width: 600px;
}

/* Widgets - constrain to same width as text */
.offcanvas-body .telar-widget-accordion,
.offcanvas-body .telar-widget-carousel,
.offcanvas-body .telar-widget-tabs {
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
}

#panel-layer2 .offcanvas-body .telar-widget-accordion,
#panel-layer2 .offcanvas-body .telar-widget-carousel,
#panel-layer2 .offcanvas-body .telar-widget-tabs {
  max-width: 600px;
}

/* Panel buttons styling */
#panel-layer1 .btn-close,
#panel-layer2 .btn-close {
  filter: brightness(0) invert(1);
  opacity: 0.7;
}

#panel-layer1 .btn-close:hover,
#panel-layer2 .btn-close:hover {
  opacity: 1;
}

#panel-layer1-back,
#panel-layer2-back {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 0.5rem 1rem;
  border-radius: 20px;
}

#panel-layer1-back:hover,
#panel-layer2-back:hover {
  background: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}

/* Glossary Panel - Cream/beige background */
#panel-glossary {
  width: 45% !important;
  max-width: 700px;
  background: var(--color-panel-glossary-bg);
}

#panel-glossary .offcanvas-header {
  background: var(--color-panel-glossary-bg);
  border-bottom: none;
  padding: 2rem 2rem 1rem 2rem;
}

#panel-glossary .offcanvas-body {
  background: var(--color-panel-glossary-bg);
  color: var(--color-panel-glossary-text);
  padding: 2rem;
  font-size: 1.05rem;
  line-height: 1.8;
}

#panel-glossary .offcanvas-title {
  color: var(--color-panel-glossary-text);
  font-family: var(--font-headings);
  font-size: 2rem;
  font-weight: 400;
}

#panel-glossary .btn-close {
  filter: none;
  opacity: 0.7;
}

#panel-glossary .btn-close:hover {
  opacity: 1;
}

/* Glossary panel - narrower text for better proportions */
#panel-glossary .glossary-term-prefix,
#panel-glossary .offcanvas-title,
#panel-glossary .offcanvas-body p,
#panel-glossary .offcanvas-body ul,
#panel-glossary .offcanvas-body ol,
#panel-glossary .offcanvas-body blockquote,
#panel-glossary .offcanvas-body h1,
#panel-glossary .offcanvas-body h2,
#panel-glossary .offcanvas-body h3,
#panel-glossary .offcanvas-body h4,
#panel-glossary .offcanvas-body h5,
#panel-glossary .offcanvas-body h6 {
  max-width: 550px;
  margin-left: auto;
  margin-right: auto;
}

#panel-glossary .offcanvas-body .telar-widget-accordion,
#panel-glossary .offcanvas-body .telar-widget-carousel,
#panel-glossary .offcanvas-body .telar-widget-tabs {
  max-width: 550px;
}

/* Glossary back button uses default Bootstrap outline-secondary styling */
/* Viewer Containers */
#viewer-container {
  width: 100%;
  height: 100%;
}

#object-viewer {
  width: 100%;
  height: 600px;
}

/* UniversalViewer - Clean Story Viewer Display */
/* Hide all UV controls in story pages for clean presentation */
.viewer-instance .headerPanel,
.viewer-instance .footerPanel,
.viewer-instance .leftPanel,
.viewer-instance .rightPanel,
.viewer-instance .mobilePanel,
.viewer-instance .btn,
.viewer-instance .download,
.viewer-instance .share,
.viewer-instance .embed,
.viewer-instance .more,
.viewer-instance .pagingToggle,
.viewer-instance .searchButton,
.viewer-instance .bookmark,
.viewer-instance .zoomIn,
.viewer-instance .zoomOut,
.viewer-instance .goHome {
  display: none !important;
}

/* Extra aggressive hiding for left panel thumbnails/color bars */
.viewer-card .leftPanel,
.viewer-card .thumbsView,
.viewer-card .galleryView,
.uv .leftPanel,
.uv .thumbsView,
.uv .galleryView {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
}

/* Keep only the essential image viewing area */
.viewer-instance .centerPanel {
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

/* Remove UV branding, titles, and info overlays */
.viewer-instance .informationBox,
.viewer-instance .moreInfoButton,
.viewer-instance .attribution,
.viewer-instance .title,
.viewer-instance .subtitle,
.viewer-instance .titlePanel,
.viewer-instance .metadata,
.viewer-instance h1,
.viewer-instance h2 {
  display: none !important;
}

/* UniversalViewer - Clean Object Page Display */
/* Hide all UV controls on object pages for clean presentation */
#object-viewer .headerPanel,
#object-viewer .footerPanel,
#object-viewer .leftPanel,
#object-viewer .rightPanel,
#object-viewer .mobilePanel,
#object-viewer .btn,
#object-viewer .download,
#object-viewer .share,
#object-viewer .embed,
#object-viewer .more,
#object-viewer .pagingToggle,
#object-viewer .searchButton,
#object-viewer .bookmark,
#object-viewer .zoomIn,
#object-viewer .zoomOut,
#object-viewer .goHome {
  display: none !important;
}

/* Keep only the essential image viewing area */
#object-viewer .centerPanel {
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

/* Remove UV branding, titles, and info overlays */
#object-viewer .informationBox,
#object-viewer .moreInfoButton,
#object-viewer .attribution,
#object-viewer .title,
#object-viewer .subtitle,
#object-viewer .titlePanel,
#object-viewer .metadata,
#object-viewer h1,
#object-viewer h2 {
  display: none !important;
}

/* Story Cards - Paisajes Colonial Style */
.story-card {
  display: block;
  color: inherit;
  transition: transform 0.3s ease;
}

.story-card:hover {
  transform: translateY(-5px);
}

.story-card .card {
  transition: box-shadow 0.3s ease;
}

.story-card:hover .card {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

.story-card .card-body {
  text-align: left;
}

.story-card h3 {
  font-family: var(--font-headings);
  color: var(--color-primary);
  font-size: 1.2rem;
  margin-top: 1rem;
  font-weight: 400;
}

.story-card-byline {
  font-size: 0.85rem;
  color: #666;
  margin-top: 0.25rem;
  margin-bottom: 0;
}

/* Demo story badge */
.story-card .card {
  position: relative;
}

.story-card .card.demo-story {
  background: rgba(0, 0, 0, 0.03);
}

.demo-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background: rgba(108, 117, 125, 0.85);
  color: white;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.3rem 0.6rem;
  border-radius: 0.3rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  z-index: 10;
  font-family: var(--font-body);
}

/* Inline demo badge for lists and inline contexts */
.demo-badge-inline {
  display: inline-block;
  background: rgba(108, 117, 125, 0.15);
  color: #6c757d;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-left: 0.5rem;
  vertical-align: middle;
  font-family: var(--font-body);
}

.object-demo-label {
  font-size: 1.75rem;
  font-weight: 500;
  color: var(--color-accent, #6c757d);
  margin-bottom: 0.25rem;
  font-family: var(--font-body);
}

.story-thumbnail {
  width: 100%;
  border-radius: 0.25rem 0.25rem 0 0;
}

.story-thumbnail-placeholder {
  font-family: var(--font-headings);
  font-size: 3rem;
  font-weight: 700;
  border-radius: 0.25rem 0.25rem 0 0;
}

/* Story Byline */
.story-byline {
  font-size: 0.9rem;
  color: #6c757d;
  margin-top: 0.5rem;
  margin-bottom: 0;
}

/* Collection Gallery */
.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 2rem;
  padding: 2rem 0;
}

.collection-item {
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease;
  position: relative;
}

.collection-item:hover {
  transform: translateY(-5px);
}

.collection-item img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 4px;
}

.collection-item h3 {
  font-size: 1.2rem;
  margin-top: 1rem;
}

/* Glossary Index */
.glossary-list {
  padding: 2rem 0;
}

.glossary-letter {
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  font-size: 2rem;
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 0.5rem;
}

.glossary-term {
  margin-bottom: 1rem;
  padding: 1rem;
  border-left: 3px solid var(--color-secondary);
  background: #f8f9fa;
}

.glossary-term h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}

.glossary-term-link {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-link);
  text-decoration: none;
  display: inline;
  transition: color 0.2s ease;
}

.glossary-term-link:hover {
  color: var(--color-link);
  text-decoration: underline;
  opacity: 0.8;
}

/* Glossary Inline Links (in story panel content) */
.glossary-inline-link {
  background-color: var(--color-panel-glossary-bg);
  color: var(--color-panel-glossary-text);
  padding: 0.02em 0.4em; /* Minimal vertical padding for very snug fit */
  border-radius: 6px; /* Increased for more rounded corners */
  text-decoration: none;
  font-size: 0.95em;
  display: inline-block;
  transition: opacity 0.2s ease;
}

.glossary-inline-link:hover {
  opacity: 0.85;
  text-decoration: none;
  color: var(--color-panel-glossary-text);
}

/* Glossary Link Error Indicator (nonexistent terms) */
.glossary-link-error {
  background-color: #fff3cd;
  color: #856404;
  padding: 0.02em 0.4em; /* Minimal vertical padding for very snug fit */
  border-radius: 6px; /* Increased for more rounded corners */
  border: 1px solid #ffc107;
  font-size: 0.95em;
  display: inline-block;
}

/* Global Button Styling - Rounded like panel-trigger buttons */
.btn {
  border-radius: 20px !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Theme-aware button colors */
.btn-primary {
  background-color: var(--color-button-bg) !important;
  border-color: var(--color-button-bg) !important;
  color: var(--color-button-text) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--color-button-bg) !important;
  border-color: var(--color-button-bg) !important;
  opacity: 0.9;
  color: var(--color-button-text) !important;
}

/* Footnotes Styling */
/* Footnote reference links in text (superscript numbers) */
.offcanvas-body a[href^="#_ftn"] {
  font-size: 0.75em;
  vertical-align: super;
  line-height: 0;
  text-decoration: none;
  font-weight: 600;
  padding: 0 0.15em;
}

/* Layer 1 (light blue) footnote references */
#panel-layer1 .offcanvas-body a[href^="#_ftn"] {
  color: var(--color-link);
}

#panel-layer1 .offcanvas-body a[href^="#_ftn"]:hover {
  color: #1a252f;
  text-decoration: underline;
}

/* Layer 2 (dark purple) footnote references */
#panel-layer2 .offcanvas-body a[href^="#_ftn"] {
  color: var(--color-link);
}

#panel-layer2 .offcanvas-body a[href^="#_ftn"]:hover {
  color: #C5DBE8;
  text-decoration: underline;
}

/* Horizontal rule separator before footnotes */
.offcanvas-body hr {
  margin: 2.5rem 0 1.5rem 0;
  border: 0;
  border-top: 2px solid rgba(0, 0, 0, 0.1);
  opacity: 0.5;
}

#panel-layer2 .offcanvas-body hr {
  border-top-color: rgba(255, 255, 255, 0.2);
}

/* Footnote section styling */
.offcanvas-body p:has(a[href^="#_ftnref"]) {
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 0.75rem;
  opacity: 0.9;
}

/* Footnote number at start of footnote */
.offcanvas-body a[href^="#_ftnref"] {
  font-size: 0.85em;
  text-decoration: none;
  font-weight: 600;
  margin-right: 0.5em;
}

/* Layer 1 footnote numbers */
#panel-layer1 .offcanvas-body a[href^="#_ftnref"] {
  color: var(--color-link);
}

#panel-layer1 .offcanvas-body a[href^="#_ftnref"]:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Layer 2 footnote numbers */
#panel-layer2 .offcanvas-body a[href^="#_ftnref"] {
  color: var(--color-link);
}

#panel-layer2 .offcanvas-body a[href^="#_ftnref"]:hover {
  color: #E8DCC4;
  text-decoration: underline;
}

/* Blockquote Styling */
.offcanvas-body blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.5rem;
  border-left: 4px solid;
  font-style: italic;
  position: relative;
}

/* Layer 1 (light blue) blockquotes */
#panel-layer1 .offcanvas-body blockquote {
  border-left-color: var(--color-primary);
  background: rgba(44, 62, 80, 0.05);
  color: var(--color-primary);
}

/* Layer 2 (dark purple) blockquotes */
#panel-layer2 .offcanvas-body blockquote {
  border-left-color: var(--color-panel-layer1-bg);
  background: rgba(168, 197, 212, 0.1);
  color: #C5DBE8;
}

/* Blockquote paragraph spacing */
.offcanvas-body blockquote p {
  margin-bottom: 0;
}

.offcanvas-body blockquote p:last-child {
  margin-bottom: 0;
}

/* General Hyperlinks in Panels (non-footnote links) */
.offcanvas-body a:not([href^="#_ftn"]):not([href^="#_ftnref"]) {
  color: var(--color-link);
  text-decoration: underline;
}

.offcanvas-body a:not([href^="#_ftn"]):not([href^="#_ftnref"]):hover {
  opacity: 0.8;
}

/* Panel Images - centered with max-height */
.offcanvas-body img {
  max-width: 100%;
  max-height: 80vh;
  height: auto;
  display: block;
  object-fit: contain;
  margin: 1rem auto;
}

/* Image figures with captions */
.telar-image-figure {
  display: block;
  margin: 1rem auto;
  text-align: center;
}

.telar-image-figure img {
  margin: 0 auto 0.25rem auto;
}

.telar-image-caption {
  font-size: 1rem;
  opacity: 0.9;
  margin-top: 0.25rem;
  text-align: center;
  display: block;
  max-width: 70%;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.2;
  font-weight: 400;
}

/* Responsive */
@media (max-width: 768px) {
  .story-container {
    flex-direction: column;
    height: auto;
  }
  .viewer-column {
    flex: 0 0 60vh;
    order: 1;
    position: relative;
    height: 60vh;
    margin-bottom: 0;
  }
  .narrative-column {
    flex: 0 0 40vh;
    height: 40vh !important;
    order: 2;
    overflow-y: auto !important;
  }
  /* Mobile Button Navigation System */
  /* Fix story steps container height */
  .story-steps {
    height: auto;
    min-height: 40vh;
    position: relative;
  }
  /* Hide all story steps by default on mobile */
  .story-step {
    display: none;
    position: static !important;
    height: auto !important;
    min-height: 40vh;
    max-height: 40vh;
    padding: 1.5rem;
    overflow-y: auto;
    transform: none !important;
    opacity: 1 !important;
  }
  /* Show only the active step */
  .story-step.mobile-active {
    display: flex;
  }
  /* Mobile intro styling - smaller text, left-aligned */
  .story-intro .intro-content {
    text-align: left;
    max-width: 100%;
    padding: 1rem;
  }
  .story-intro .intro-title {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
  .story-intro .intro-byline {
    font-size: 0.95rem;
    margin-bottom: 1rem;
  }
  .story-intro .intro-description {
    font-size: 1rem;
    margin-bottom: 1rem;
  }
  .story-intro .intro-hint {
    font-size: 0.9rem;
    margin-top: 1.5rem;
  }
  /* Move panel trigger buttons to bottom on mobile */
  .story-step .step-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  .story-step .panel-trigger {
    margin-top: auto;
    align-self: flex-start;
  }
  /* Mobile Navigation Buttons - positioned on right side */
  .mobile-nav {
    position: fixed;
    right: 1rem;
    bottom: 50%;
    transform: translateY(50%);
    z-index: 1040;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .mobile-nav button {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid rgba(0, 0, 0, 0.1);
    color: #333;
    font-size: 1.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mobile-nav button:hover:not(:disabled) {
    background: rgb(255, 255, 255);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }
  .mobile-nav button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }
  /* Panel System - full width bottom sheets */
  /* Layer 1 Panel - most content, tallest panel */
  #panel-layer1 {
    width: 100% !important;
    height: 65vh !important;
    max-width: 100% !important;
    max-height: 65vh !important;
  }
  /* Layer 2 Panel - medium content */
  #panel-layer2 {
    width: 100% !important;
    height: 60vh !important;
    max-width: 100% !important;
    max-height: 60vh !important;
  }
  /* Glossary Panel - brief definitions, shortest panel */
  #panel-glossary {
    width: 100% !important;
    height: 55vh !important;
    max-width: 100% !important;
    max-height: 55vh !important;
  }
  /* Touch Target Optimization - 44x44px minimum for accessibility */
  .panel-trigger {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Mobile home button - match navigation button style */
  .btn-home {
    min-height: 44px;
    min-width: 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    top: 1rem !important;
    left: 1rem !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid rgba(0, 0, 0, 0.1);
    color: #333;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
  /* Hide text on mobile, show only icon */
  .btn-home-text {
    display: none;
  }
  .btn-home-icon {
    display: block !important; /* Override desktop hide */
    font-size: 1.5rem;
  }
  .offcanvas-header .btn-close {
    width: 33px;
    height: 33px;
    padding: 0.5rem;
  }
  /* Mobile Offcanvas Panel Positioning - Option 2B (Right-Slide with Fixed Size & Top/Bottom Gaps) */
  .offcanvas-end {
    position: fixed !important;
    right: 0 !important;
    left: auto !important;
    box-shadow: -4px 4px 20px rgba(0, 0, 0, 0.3);
    transition: transform 300ms ease-out;
    border-radius: 0 !important;
    transform: translateX(100%);
  }
  .offcanvas-end.show {
    transform: translateX(0);
  }
  /* Layer 1 - "Go Deeper" panels */
  #panel-layer1.offcanvas-end {
    top: 12vh !important;
    height: 76vh !important;
    max-height: 76vh !important;
    width: 98vw !important;
    max-width: 98vw !important;
    z-index: 1050;
  }
  /* Layer 2 - "Learn More" panels */
  #panel-layer2.offcanvas-end {
    top: 10vh !important;
    height: 76vh !important;
    max-height: 76vh !important;
    width: 96vw !important;
    max-width: 96vw !important;
    z-index: 1051;
  }
  /* Glossary */
  #panel-glossary.offcanvas-end {
    top: 8vh !important;
    height: 76vh !important;
    max-height: 76vh !important;
    left: 6vw !important;
    width: 94vw !important;
    max-width: 94vw !important;
  }
  .offcanvas-body {
    overflow-y: auto;
  }
  /* Hide Back buttons on mobile - X button is sufficient */
  #panel-layer1-back,
  #panel-layer2-back,
  #panel-glossary-back {
    display: none !important;
  }
  /* Center close button when Back button is hidden */
  .offcanvas-header {
    justify-content: flex-end;
  }
  /* Unified panel scrolling - header transparent, buttons float over content */
  .offcanvas {
    display: flex !important;
    flex-direction: column !important;
  }
  .offcanvas-header {
    position: absolute !important;
    top: 0;
    right: 0;
    left: 0;
    z-index: 10;
    background: transparent !important;
    border: none !important;
    padding: 1rem !important;
    padding-top: max(1rem, env(safe-area-inset-top)) !important;
    min-height: auto !important;
  }
  .offcanvas-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    position: static !important;
    padding: 1.5rem !important;
    padding-top: 1.5rem !important;
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom)) !important;
  }
  /* Title is now inside body - add top margin to clear floating close button */
  .offcanvas-body .offcanvas-title {
    margin-top: max(3rem, env(safe-area-inset-top) + 2.5rem);
    margin-bottom: 1.5rem;
  }
  /* Float close button over content - match navigation button style */
  .offcanvas-header .btn-close {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    /* Remove white filter on mobile - show dark X like arrows/home */
    filter: none !important;
    opacity: 1 !important;
  }
  /* Back button gets same treatment on desktop */
  .offcanvas-header .btn-outline-secondary {
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
  /* Glossary Index - reduce spacing on mobile */
  .glossary-letter {
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-size: 1.5rem;
  }
  .glossary-term {
    margin-bottom: 0.5rem;
    padding: 0.75rem;
  }
  .glossary-term h3 {
    font-size: 1.1rem;
  }
  .glossary-term-link {
    font-size: 1rem;
  }
  /* Glossary inline links - slightly smaller on mobile */
  .glossary-inline-link,
  .glossary-link-error {
    padding: 0.1em 0.35em;
    font-size: 0.9em;
  }
}
/* Mobile responsive grid - override auto-fill behavior */
@media (max-width: 768px) {
  .collection-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  .collection-item img {
    height: 180px;
  }
}
/* Single column for screens up to 441px (iPhone Pro Max at 440px stays 1 column) */
@media (max-width: 441px) {
  .collection-grid {
    grid-template-columns: 1fr;
  }
  .collection-item img {
    height: 200px;
  }
}
/* ============================================================================
   HEIGHT-BASED RESPONSIVE DESIGN FOR SMALL MOBILE SCREENS (v0.4.0)
   Progressive reductions in typography and spacing for phones with limited
   vertical space (iPhone SE, small Android devices). Ensures "Learn More"
   buttons and other UI elements remain visible and accessible.
   ============================================================================ */
/* Tier 1: Small Mobile - phones with 700px or less height */
@media (max-width: 768px) and (max-height: 700px) {
  .story-step {
    padding: 1.3rem !important;
  }
  .story-step h2 {
    font-size: 1.5rem;
    margin-bottom: 0.9rem;
  }
  .story-step p {
    font-size: 1rem;
    margin-bottom: 1.3rem;
  }
  .panel-trigger {
    font-size: 0.85rem;
    padding: 0.45rem 1.1rem;
  }
  /* Offcanvas panels - 10-15% reduction */
  #panel-layer1 .offcanvas-body,
  #panel-layer2 .offcanvas-body,
  #panel-glossary .offcanvas-body {
    padding: 1.75rem !important;
    font-size: 1rem;
    line-height: 1.5;
  }
  #panel-layer1 .offcanvas-body .offcanvas-title,
  #panel-layer2 .offcanvas-body .offcanvas-title,
  #panel-glossary .offcanvas-body .offcanvas-title {
    font-size: 1.75rem;
    margin-bottom: 1.3rem;
  }
  #panel-layer1 .offcanvas-body blockquote,
  #panel-layer2 .offcanvas-body blockquote,
  #panel-glossary .offcanvas-body blockquote {
    margin: 1.3rem 0;
    padding: 0.9rem 1.3rem;
  }
  #panel-layer1 .offcanvas-body hr,
  #panel-layer2 .offcanvas-body hr,
  #panel-glossary .offcanvas-body hr {
    margin: 2.2rem 0 1.3rem 0;
  }
  #panel-layer1 .offcanvas-body p:has(a[href^="#_ftnref"]),
  #panel-layer2 .offcanvas-body p:has(a[href^="#_ftnref"]),
  #panel-glossary .offcanvas-body p:has(a[href^="#_ftnref"]) {
    font-size: 0.85rem;
    margin-bottom: 0.65rem;
  }
  /* Site-wide content - 10-15% reduction */
  .page-content {
    font-size: 1.125rem;
  }
  .page-content h1 {
    margin-bottom: 1.3rem;
  }
  .page-content h2 {
    margin-top: 2.2rem;
    margin-bottom: 0.9rem;
  }
  .page-content p {
    margin-bottom: 1.3rem;
  }
  .collection-grid {
    gap: 1.75rem;
    padding: 1.75rem 0;
  }
  .collection-item h3 {
    font-size: 1.1rem;
    margin-top: 0.9rem;
  }
  .navbar-brand {
    font-size: 1.35rem;
  }
}
/* Tier 2: Tiny Mobile - phones with 667px or less height (iPhone SE, etc.) */
@media (max-width: 768px) and (max-height: 667px) {
  /* Adjust viewer:panel ratio from 60:40 to 55:45 for more step panel space */
  .viewer-column {
    flex: 0 0 55vh !important;
    height: 55vh !important;
  }
  .narrative-column {
    flex: 0 0 45vh !important;
    height: 45vh !important;
  }
  .story-steps {
    min-height: 45vh !important;
  }
  .story-step {
    min-height: 45vh !important;
    max-height: 45vh !important;
    padding: 1.2rem !important;
  }
  .story-step h2 {
    font-size: 1.4rem;
    margin-bottom: 0.85rem;
  }
  .story-step p {
    font-size: 0.95rem;
    margin-bottom: 1.2rem;
  }
  .panel-trigger {
    font-size: 0.8rem;
    padding: 0.4rem 1rem;
  }
  /* Offcanvas panels - 20-25% reduction */
  #panel-layer1 .offcanvas-body,
  #panel-layer2 .offcanvas-body,
  #panel-glossary .offcanvas-body {
    padding: 1.5rem !important;
    font-size: 0.95rem;
    line-height: 1.4;
  }
  #panel-layer1 .offcanvas-body .offcanvas-title,
  #panel-layer2 .offcanvas-body .offcanvas-title,
  #panel-glossary .offcanvas-body .offcanvas-title {
    font-size: 1.6rem;
    margin-bottom: 1.2rem;
  }
  #panel-layer1 .offcanvas-body blockquote,
  #panel-layer2 .offcanvas-body blockquote,
  #panel-glossary .offcanvas-body blockquote {
    margin: 1.2rem 0;
    padding: 0.8rem 1.2rem;
  }
  #panel-layer1 .offcanvas-body hr,
  #panel-layer2 .offcanvas-body hr,
  #panel-glossary .offcanvas-body hr {
    margin: 2rem 0 1.2rem 0;
  }
  #panel-layer1 .offcanvas-body p:has(a[href^="#_ftnref"]),
  #panel-layer2 .offcanvas-body p:has(a[href^="#_ftnref"]),
  #panel-glossary .offcanvas-body p:has(a[href^="#_ftnref"]) {
    font-size: 0.75rem;
    margin-bottom: 0.6rem;
  }
  #panel-layer1 .offcanvas-body img,
  #panel-layer2 .offcanvas-body img,
  #panel-glossary .offcanvas-body img {
    max-width: 100%;
    margin: 0.8rem auto;
  }
  /* Site-wide content - 20-25% reduction */
  .page-content {
    font-size: 1rem;
  }
  .page-content h1 {
    margin-bottom: 1.2rem;
  }
  .page-content h2 {
    margin-top: 2rem;
    margin-bottom: 0.8rem;
  }
  .page-content p {
    margin-bottom: 1.2rem;
  }
  .collection-grid {
    gap: 1.5rem;
    padding: 1.5rem 0;
  }
  .collection-item img {
    height: 200px;
  }
  .collection-item h3 {
    font-size: 1rem;
    margin-top: 0.8rem;
  }
  .navbar-brand {
    font-size: 1.25rem;
  }
  /* Navigation buttons - smaller for tiny screens */
  .mobile-nav button {
    width: 45px !important;
    height: 45px !important;
  }
}
/* Tier 3: Micro Mobile - very small Android phones with 600px or less height */
@media (max-width: 768px) and (max-height: 600px) {
  /* Maintain 55:45 ratio, further reduce typography */
  .story-step {
    padding: 1rem !important;
  }
  .story-step h2 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
  }
  .story-step p {
    font-size: 0.9rem;
    margin-bottom: 1rem;
  }
  .panel-trigger {
    font-size: 0.75rem;
    padding: 0.35rem 0.9rem;
  }
  /* Offcanvas panels - 30-35% reduction */
  #panel-layer1 .offcanvas-body,
  #panel-layer2 .offcanvas-body,
  #panel-glossary .offcanvas-body {
    padding: 1.3rem !important;
    font-size: 0.9rem;
    line-height: 1.35;
  }
  #panel-layer1 .offcanvas-body .offcanvas-title,
  #panel-layer2 .offcanvas-body .offcanvas-title,
  #panel-glossary .offcanvas-body .offcanvas-title {
    font-size: 1.4rem;
    margin-bottom: 1rem;
  }
  #panel-layer1 .offcanvas-body blockquote,
  #panel-layer2 .offcanvas-body blockquote,
  #panel-glossary .offcanvas-body blockquote {
    margin: 1rem 0;
    padding: 0.7rem 1rem;
  }
  #panel-layer1 .offcanvas-body hr,
  #panel-layer2 .offcanvas-body hr,
  #panel-glossary .offcanvas-body hr {
    margin: 1.75rem 0 1rem 0;
  }
  #panel-layer1 .offcanvas-body p:has(a[href^="#_ftnref"]),
  #panel-layer2 .offcanvas-body p:has(a[href^="#_ftnref"]),
  #panel-glossary .offcanvas-body p:has(a[href^="#_ftnref"]) {
    font-size: 0.7rem;
    margin-bottom: 0.5rem;
  }
  #panel-layer1 .offcanvas-body img,
  #panel-layer2 .offcanvas-body img,
  #panel-glossary .offcanvas-body img {
    max-width: 100%;
    margin: 0.7rem auto;
  }
  /* Site-wide content - 30-35% reduction */
  .page-content {
    font-size: 0.875rem;
  }
  .page-content h1 {
    margin-bottom: 1rem;
  }
  .page-content h2 {
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
  }
  .page-content p {
    margin-bottom: 1rem;
  }
  .collection-grid {
    gap: 1.25rem;
    padding: 1.25rem 0;
  }
  .collection-item img {
    height: 175px;
  }
  .collection-item h3 {
    font-size: 0.9rem;
    margin-top: 0.7rem;
  }
  .navbar-brand {
    font-size: 1.125rem;
  }
  /* Navigation buttons - smaller for micro screens */
  .mobile-nav button {
    width: 45px !important;
    height: 45px !important;
  }
}
/* Small Phones: 576px and below - adjust collection grid spacing */
@media (max-width: 576px) {
  .collection-grid {
    gap: 0.75rem;
  }
  .collection-item img {
    height: 150px;
  }
}
/* Hide UniversalViewer UI controls for cleaner viewing */
.uv .leftPanel,
.uv .rightPanel,
.uv .footerPanel .options,
.uv .headerPanel .options,
.uv .moreInfo,
.uv .download,
.uv .share,
.uv .bookmark,
.uv .toggle {
  display: none !important;
}

/* Keep only essential navigation controls */
.uv .footerPanel .zoom {
  display: block;
}

/* Telar Alert Standardization */
.telar-alert {
  max-width: 900px !important;
  margin-bottom: 1.5rem !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
}

/* Step Indicator Toggle */
.hide-step-indicators .step-indicator {
  display: none !important;
}

/* ========================================
   WIDGET SYSTEM STYLES
   ======================================== */
/* Base Widget Container */
.telar-widget {
  margin: 2rem 0;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Panel-specific widget colors: widgets use opposite panel colors */
#panel-layer1 .telar-widget {
  background: var(--color-panel-layer2-bg);
  color: var(--color-panel-layer2-text);
  border-color: rgba(255, 255, 255, 0.1);
}

#panel-layer2 .telar-widget {
  background: var(--color-panel-layer1-bg);
  color: var(--color-panel-layer1-text);
  border-color: rgba(0, 0, 0, 0.1);
}

/* Widget Error Display */
.telar-widget-error {
  padding: 1rem;
  background: #fff3cd;
  border: 2px solid #ffc107;
  border-radius: 4px;
  color: #856404;
  font-weight: 500;
  margin: 1rem 0;
}

/* ========================================
   CAROUSEL WIDGET
   ======================================== */
.telar-widget-carousel {
  padding: 0;
  background: transparent;
  border: none;
}

.telar-widget-carousel .carousel {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  background: #000;
}

.telar-widget-carousel .carousel-inner {
  height: 550px;
}

.telar-widget-carousel .carousel-item {
  height: 100%;
}

.telar-widget-carousel .carousel-image-container {
  height: calc(100% - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.telar-widget-carousel .carousel-item img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.telar-widget-carousel .carousel-caption-below {
  height: 80px;
  padding: 0.5rem 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
}

.telar-widget-carousel .carousel-caption-below .caption-text {
  margin-bottom: 0.25rem;
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 100;
  opacity: 0.9;
}

.telar-widget-carousel .carousel-caption-below .caption-credit {
  margin-bottom: 0;
  font-size: 0.8rem;
  line-height: 1.2;
}

/* Panel-specific carousel caption colors */
#panel-layer1 .telar-widget-carousel .carousel-caption-below {
  background: var(--color-panel-layer2-bg);
  color: var(--color-panel-layer2-text);
}

#panel-layer1 .telar-widget-carousel .carousel-caption-below small,
#panel-layer1 .telar-widget-carousel .carousel-caption-below .caption-credit {
  color: rgba(255, 255, 255, 0.7);
}

#panel-layer2 .telar-widget-carousel .carousel-caption-below {
  background: var(--color-panel-layer1-bg);
  color: var(--color-panel-layer1-text);
}

#panel-layer2 .telar-widget-carousel .carousel-caption-below small,
#panel-layer2 .telar-widget-carousel .carousel-caption-below .caption-credit {
  color: rgba(0, 0, 0, 0.6);
}

.telar-widget-carousel .carousel-control-prev,
.telar-widget-carousel .carousel-control-next {
  width: 8%;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.telar-widget-carousel .carousel-control-prev:hover,
.telar-widget-carousel .carousel-control-next:hover {
  opacity: 1;
}

.telar-widget-carousel .carousel-control-prev-icon,
.telar-widget-carousel .carousel-control-next-icon {
  width: 2.5rem;
  height: 2.5rem;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  padding: 0.5rem;
}

.telar-widget-carousel .carousel-indicators {
  bottom: 90px;
  margin-bottom: 0;
}

.telar-widget-carousel .carousel-indicators button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.8);
  opacity: 0.7;
  transition: all 0.3s ease;
}

.telar-widget-carousel .carousel-indicators button.active {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.9);
  transform: scale(1.2);
}

/* Carousel size variants (auto-detected based on image aspect ratios) */
.carousel-size-compact .carousel-inner {
  height: 400px;
}

.carousel-size-tall .carousel-inner {
  height: 700px;
}

.carousel-size-portrait .carousel-inner {
  height: 850px;
}

/* ========================================
   COMPARISON WIDGET (Before/After Slider)
   ======================================== */
.telar-widget-comparison {
  padding: 0;
  background: transparent;
  border: none;
}

.comparison-container {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.comparison-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16/9;
}

.comparison-before,
.comparison-after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.comparison-before {
  z-index: 1;
}

.comparison-after {
  z-index: 2;
  width: 50%; /* Controlled by slider */
  overflow: hidden;
}

.comparison-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Comparison Slider Input */
.comparison-slider-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  opacity: 0;
  cursor: ew-resize;
  margin: 0;
}

/* Divider Line */
.comparison-divider {
  position: absolute;
  top: 0;
  left: 50%; /* Controlled by slider */
  width: 3px;
  height: 100%;
  background: var(--color-link);
  z-index: 5;
  pointer-events: none;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  transition: left 0.05s ease;
}

.comparison-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  background: var(--color-button-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.comparison-arrow {
  color: var(--color-button-text);
  font-size: 1.2rem;
  font-weight: bold;
  user-select: none;
}

/* Comparison Labels */
.comparison-label {
  position: absolute;
  top: 1.5rem;
  padding: 0.5rem 1rem;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 500;
  z-index: 3;
  backdrop-filter: blur(4px);
}

.comparison-label-before {
  left: 1.5rem;
}

.comparison-label-after {
  right: 1.5rem;
}

/* Comparison Credits */
.comparison-credits {
  display: flex;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: rgba(0, 0, 0, 0.02);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  font-size: 0.85rem;
  color: #666;
}

.comparison-credit {
  flex: 1;
}

.comparison-credit-before {
  text-align: left;
}

.comparison-credit-after {
  text-align: right;
}

/* ========================================
   TABS WIDGET
   ======================================== */
.telar-widget-tabs {
  padding: 0;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.telar-widget-tabs .nav-tabs {
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.02);
  margin-bottom: 0;
  padding: 0.5rem 1rem 0;
}

.telar-widget-tabs .nav-link {
  color: var(--color-body);
  border: none;
  border-bottom: 3px solid transparent;
  padding: 0.75rem 1.25rem;
  font-weight: 500;
  transition: all 0.3s ease;
  background: transparent;
}

.telar-widget-tabs .nav-link:hover {
  color: var(--color-link);
  border-bottom-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.02);
}

.telar-widget-tabs .nav-link.active {
  color: var(--color-link);
  border-bottom-color: var(--color-link);
  background: #fff;
  font-weight: 600;
}

.telar-widget-tabs .tab-content {
  padding: 0;
}

.telar-widget-tabs .tab-pane-content {
  padding: 2rem;
  line-height: 1.8;
}

.telar-widget-tabs .tab-pane-content img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 1rem 0;
}

.telar-widget-tabs .tab-pane-content p {
  margin-bottom: 1rem;
}

.telar-widget-tabs .tab-pane-content h1,
.telar-widget-tabs .tab-pane-content h2,
.telar-widget-tabs .tab-pane-content h3,
.telar-widget-tabs .tab-pane-content h4 {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

/* Panel-specific tabs styling */
/* Panel-layer1: uses layer2 colors (dark purple) */
#panel-layer1 .telar-widget-tabs {
  background: transparent;
  border: none;
}

#panel-layer1 .telar-widget-tabs .nav-tabs {
  background: transparent;
  border-bottom: none;
  padding: 0;
  margin: 0;
}

#panel-layer1 .telar-widget-tabs .nav-tabs .nav-item {
  margin: 0;
}

#panel-layer1 .telar-widget-tabs .nav-tabs .nav-link {
  border: none;
  border-radius: 0.5rem 0.5rem 0 0;
  padding: 0.75rem 1.25rem;
  margin: 0;
  background: var(--color-panel-layer2-bg);
  color: var(--color-panel-layer2-text);
  opacity: 0.7;
}

#panel-layer1 .telar-widget-tabs .nav-tabs .nav-link.active {
  background: var(--color-panel-layer2-bg);
  color: var(--color-panel-layer2-text);
  border: none;
  opacity: 1;
}

#panel-layer1 .telar-widget-tabs .tab-content {
  background: var(--color-panel-layer2-bg);
  color: var(--color-panel-layer2-text);
  border-radius: 0 0.5rem 0 0;
}

/* Panel-layer2: uses layer1 colors (light purple) */
#panel-layer2 .telar-widget-tabs {
  background: transparent;
  border: none;
}

#panel-layer2 .telar-widget-tabs .nav-tabs {
  background: transparent;
  border-bottom: none;
  padding: 0;
  margin: 0;
}

#panel-layer2 .telar-widget-tabs .nav-tabs .nav-item {
  margin: 0;
}

#panel-layer2 .telar-widget-tabs .nav-tabs .nav-link {
  border: none;
  border-radius: 0.5rem 0.5rem 0 0;
  padding: 0.75rem 1.25rem;
  margin: 0;
  background: var(--color-panel-layer1-bg);
  color: var(--color-panel-layer1-text);
  opacity: 0.7;
}

#panel-layer2 .telar-widget-tabs .nav-tabs .nav-link.active {
  background: var(--color-panel-layer1-bg);
  color: var(--color-panel-layer1-text);
  border: none;
  opacity: 1;
}

#panel-layer2 .telar-widget-tabs .tab-content {
  background: var(--color-panel-layer1-bg);
  color: var(--color-panel-layer1-text);
  border-radius: 0 0.5rem 0 0;
}

/* ========================================
   ACCORDION WIDGET
   ======================================== */
.telar-widget-accordion {
  padding: 0;
  background: transparent;
  border: none;
}

.telar-widget-accordion .accordion {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.telar-widget-accordion .accordion-item {
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #fff;
}

.telar-widget-accordion .accordion-item:first-child {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.telar-widget-accordion .accordion-item:last-child {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.telar-widget-accordion .accordion-header {
  margin-bottom: 0;
}

.telar-widget-accordion .accordion-button {
  font-family: var(--font-headings);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-heading);
  background: rgba(0, 0, 0, 0.02);
  padding: 1.25rem 1.5rem;
  transition: all 0.3s ease;
}

.telar-widget-accordion .accordion-button:not(.collapsed) {
  background: var(--color-button-bg);
  color: var(--color-button-text);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125);
}

.telar-widget-accordion .accordion-button:focus {
  border-color: var(--color-link);
  box-shadow: 0 0 0 0.25rem rgba(var(--color-link), 0.25);
}

.telar-widget-accordion .accordion-button::after {
  transition: transform 0.3s ease;
}

.telar-widget-accordion .accordion-body {
  padding: 1.5rem;
  line-height: 1.8;
}

.telar-widget-accordion .accordion-body img {
  max-width: 100%;
  max-height: 80vh;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  margin: 1rem 0;
}

.telar-widget-accordion .accordion-body p {
  margin-bottom: 1rem;
}

.telar-widget-accordion .accordion-body h1,
.telar-widget-accordion .accordion-body h2,
.telar-widget-accordion .accordion-body h3,
.telar-widget-accordion .accordion-body h4 {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

/* Panel-specific accordion styling */
#panel-layer1 .telar-widget-accordion .accordion-item {
  background: var(--color-panel-layer2-bg);
  border-color: rgba(255, 255, 255, 0.1);
}

#panel-layer1 .telar-widget-accordion .accordion-button {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-panel-layer2-text);
}

#panel-layer1 .telar-widget-accordion .accordion-button:not(.collapsed) {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-panel-layer2-text);
}

#panel-layer1 .telar-widget-accordion .accordion-body {
  color: var(--color-panel-layer2-text);
}

#panel-layer2 .telar-widget-accordion .accordion-item {
  background: var(--color-panel-layer1-bg);
  border-color: rgba(0, 0, 0, 0.1);
}

#panel-layer2 .telar-widget-accordion .accordion-button {
  background: rgba(0, 0, 0, 0.02);
  color: var(--color-panel-layer1-text);
}

#panel-layer2 .telar-widget-accordion .accordion-button:not(.collapsed) {
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-panel-layer1-text);
}

#panel-layer2 .telar-widget-accordion .accordion-body {
  color: var(--color-panel-layer1-text);
}

/* ========================================
   MOBILE RESPONSIVENESS
   ======================================== */
@media (max-width: 768px) {
  .telar-widget {
    margin: 1.5rem 0;
    padding: 1rem;
  }
  /* Carousel Mobile */
  .telar-widget-carousel .carousel-item img {
    max-height: 400px;
  }
  .telar-widget-carousel .carousel-caption {
    padding: 1rem;
    bottom: 1rem;
    width: 95%;
  }
  .telar-widget-carousel .carousel-caption .caption-text {
    font-size: 0.9rem;
  }
  .telar-widget-carousel .carousel-caption .caption-credit {
    font-size: 0.75rem;
  }
  .telar-widget-carousel .carousel-control-prev-icon,
  .telar-widget-carousel .carousel-control-next-icon {
    width: 2rem;
    height: 2rem;
  }
  /* Comparison Mobile */
  .comparison-slider {
    aspect-ratio: 4/3;
  }
  .comparison-handle {
    width: 40px;
    height: 40px;
  }
  .comparison-arrow {
    font-size: 1rem;
  }
  .comparison-label {
    top: 1rem;
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
  }
  .comparison-label-before {
    left: 1rem;
  }
  .comparison-label-after {
    right: 1rem;
  }
  .comparison-credits {
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
  }
  .comparison-credit-before,
  .comparison-credit-after {
    text-align: left;
  }
  /* Tabs Mobile */
  .telar-widget-tabs .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .telar-widget-tabs .nav-link {
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    white-space: nowrap;
  }
  .telar-widget-tabs .tab-pane-content {
    padding: 1.25rem;
    font-size: 0.95rem;
  }
  /* Accordion Mobile */
  .telar-widget-accordion .accordion-button {
    font-size: 1rem;
    padding: 1rem;
  }
  .telar-widget-accordion .accordion-body {
    padding: 1rem;
    font-size: 0.95rem;
  }
}
@media (max-width: 480px) {
  /* Extra small screens */
  .telar-widget-carousel .carousel-item img {
    max-height: 300px;
  }
  .comparison-slider {
    aspect-ratio: 1/1;
  }
  .telar-widget-tabs .nav-link {
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
  }
}
/* =========================================
   EMBED MODE
   ========================================= */
/* Embed mode: Hide navigation chrome for Canvas LMS / iframe embedding */
body.embed-mode {
  /* Hide home button */
  /* Hide share button */
  /* Hide viewer overlay (contains "Loading..." text) */
  /* Show embed banner */
  /* Maximize content area */
  /* Always show navigation buttons in embed mode (like mobile) */
  /* Show mobile hint in embed mode (hide desktop hint) */
  /**
   * Embed mode navigation pattern (v0.5.0):
   * - Button navigation (like mobile) for iframe/Canvas LMS compatibility
   * - Desktop-style layout and vertical centering
   * - Static positioning instead of absolute (simpler show/hide logic)
   */
  /* Hide all story steps by default */
  /* Show only the active step with desktop flex layout */
  /* Preserve desktop-style vertical centering via .step-content */
  /* Show mobile navigation buttons in embed mode (even on desktop viewports) */
  /* Positioned over narrative panel, horizontally centered, with dynamic bottom spacing */
  /**
   * Width and height-responsive typography for embed mode
   * Ensures content remains readable in narrow or short iframes
   */
  /* Narrow viewports (< 900px width) */
  /* Medium-short viewports (< 650px height) */
  /* Very short viewports (< 500px height) */
}
body.embed-mode .btn-home {
  display: none !important;
}
body.embed-mode .share-button {
  display: none !important;
}
body.embed-mode .viewer-overlay {
  display: none !important;
}
body.embed-mode .telar-embed-banner {
  display: flex !important;
}
body.embed-mode .story-container {
  padding-top: 0;
}
body.embed-mode .story-navigation {
  display: block !important;
}
body.embed-mode .hint-desktop {
  display: none;
}
body.embed-mode .hint-mobile {
  display: inline;
}
body.embed-mode .story-step {
  display: none;
  position: static;
  height: 100vh;
  width: 100%;
  padding: 2rem;
  background: #fff;
  border-left: 3px solid transparent;
  /* Remove desktop transforms and transitions */
  transform: none;
  opacity: 1;
  transition: none;
}
body.embed-mode .story-step.mobile-active {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
body.embed-mode .story-step .step-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}
body.embed-mode .mobile-nav {
  position: fixed !important;
  left: 20% !important;
  bottom: max(8%, 1.5rem) !important;
  transform: translateX(-50%) !important;
  z-index: 1040 !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 0.75rem !important;
}
body.embed-mode .mobile-nav button {
  width: 66px !important;
  height: 66px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border: 2px solid rgba(0, 0, 0, 0.1) !important;
  color: #333 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body.embed-mode .mobile-nav button:hover:not(:disabled) {
  background: rgb(255, 255, 255) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important;
}
body.embed-mode .mobile-nav .mobile-prev:hover:not(:disabled) {
  transform: scale(1.1) translateY(-4px) !important;
}
body.embed-mode .mobile-nav .mobile-next:hover:not(:disabled) {
  transform: scale(1.1) translateY(4px) !important;
}
body.embed-mode .mobile-nav button:disabled {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
}
@media (max-width: 900px) {
  body.embed-mode .story-step {
    padding: 1.5rem !important;
  }
  body.embed-mode .story-intro .intro-title {
    font-size: 2.75rem !important;
    line-height: 1.2 !important;
  }
  body.embed-mode .story-intro .intro-byline {
    font-size: 0.95rem !important;
  }
  body.embed-mode .story-intro .intro-description {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }
  body.embed-mode .story-step .step-content {
    font-size: 1rem !important;
    line-height: 1.7 !important;
  }
  body.embed-mode .story-step h2 {
    font-size: 1.65rem !important;
  }
}
@media (max-height: 650px) {
  body.embed-mode .story-step {
    padding: 1.5rem !important;
  }
  body.embed-mode .story-intro .intro-title {
    font-size: 2.5rem !important;
    line-height: 1.2 !important;
    margin-bottom: 0.75rem !important;
  }
  body.embed-mode .story-intro .intro-byline {
    font-size: 0.95rem !important;
    margin-bottom: 0.75rem !important;
  }
  body.embed-mode .story-intro .intro-description {
    font-size: 1rem !important;
    line-height: 1.5 !important;
    margin-bottom: 0.75rem !important;
  }
  body.embed-mode .story-step .step-content {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }
  body.embed-mode .story-step h2 {
    font-size: 1.5rem !important;
    margin-bottom: 0.75rem !important;
  }
}
@media (max-height: 500px) {
  body.embed-mode .story-step {
    padding: 1rem !important;
  }
  body.embed-mode .story-intro .intro-title {
    font-size: 2rem !important;
    line-height: 1.1 !important;
    margin-bottom: 0.5rem !important;
  }
  body.embed-mode .story-intro .intro-byline {
    font-size: 0.875rem !important;
    margin-bottom: 0.5rem !important;
  }
  body.embed-mode .story-intro .intro-description {
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
    margin-bottom: 0.5rem !important;
  }
  body.embed-mode .story-step .step-content {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
  }
  body.embed-mode .story-step h2 {
    font-size: 1.25rem !important;
    margin-bottom: 0.5rem !important;
  }
  body.embed-mode .story-step p {
    margin-bottom: 0.75rem !important;
  }
}

/* Mobile-sized embeds: revert to mobile positioning (right side, vertically stacked) */
/* This media query is at root level to ensure proper source order over desktop embed rules */
@media (max-width: 768px) {
  body.embed-mode .mobile-nav {
    right: 1rem !important;
    left: auto !important;
    bottom: 50% !important;
    transform: translateY(50%) !important;
    flex-direction: column !important;
  }
  body.embed-mode .mobile-nav button:hover:not(:disabled) {
    background: rgb(255, 255, 255) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  }
  body.embed-mode .mobile-nav .mobile-prev:hover:not(:disabled),
  body.embed-mode .mobile-nav .mobile-next:hover:not(:disabled) {
    transform: scale(1.05) !important;
  }
}
/* "View full site" floating modal (only visible in embed mode) */
.telar-embed-banner {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 1050;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.875rem;
  font-family: var(--font-body);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  max-width: min(380px, 100% - 40px);
  line-height: 1.5;
  backdrop-filter: blur(2px);
}
.telar-embed-banner-text {
  color: #6c757d;
}
.telar-embed-banner-text .material-symbols-outlined {
  display: none;
}
.telar-embed-banner-text a {
  color: var(--color-link);
  text-decoration: none;
}
.telar-embed-banner-text a:hover {
  text-decoration: underline;
}
.telar-embed-banner-link {
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.telar-embed-banner-link::after {
  content: "→";
  font-size: 1.1em;
}
.telar-embed-banner-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  color: #adb5bd;
  line-height: 1;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: -2px;
}
.telar-embed-banner-close .material-symbols-outlined {
  font-size: 1.25rem;
}
.telar-embed-banner-close:hover {
  color: #6c757d;
}

/* Hide banner in normal (non-embed) mode */
body:not(.embed-mode) .telar-embed-banner {
  display: none;
}

/* =========================================
   SHARE & EMBED UI
   ========================================= */
/* Share Button - Light Style (matches Back to Home button) */
.share-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem; /* Slightly taller to match home button height */
  background: rgba(255, 255, 255, 0.8);
  color: #5a6c7d;
  border: 1px solid #cbd5e0;
  border-radius: 20px;
  font-size: 0.9rem;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  line-height: 1;
}
.share-button .share-button-icon {
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
}
.share-button:hover {
  background: white;
  color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.share-button:focus {
  outline: 2px solid #cbd5e0;
  outline-offset: 2px;
}

/* Icon+text variant (story pages) - fixed position floating on right side of narrative column */
.share-button-icon-text {
  position: fixed !important;
  top: 2rem !important;
  left: 40% !important;
  transform: translateX(calc(-100% - 2rem)) !important;
  z-index: 1040 !important;
  /* Mobile: Ghost/transparent style (Option 2) */
}
.share-button-icon-text .share-button-text {
  display: inline;
}
@media (max-width: 768px) {
  .share-button-icon-text {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    left: auto !important;
    right: 1rem !important;
    top: 1rem !important;
    transform: none !important;
    /* Ghost style - very subtle when not hovered */
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: rgba(255, 255, 255, 0.6); /* Icon matches border color */
    /* Solid on hover */
  }
  .share-button-icon-text .share-button-icon {
    color: rgba(255, 255, 255, 0.6); /* Ensure SVG icon matches */
    fill: rgba(255, 255, 255, 0.6);
  }
  .share-button-icon-text .share-button-text {
    display: none;
  }
  .share-button-icon-text:hover {
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid rgba(0, 0, 0, 0.1);
    color: #333;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
  .share-button-icon-text:hover .share-button-icon {
    color: #333;
    fill: #333;
  }
}

/* Navbar variant (for header) - styled as button with nav colors */
.share-button-navbar {
  position: static !important;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.55);
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  border-radius: 20px;
  margin-left: 0.5rem;
}
.share-button-navbar:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.3);
  color: rgba(0, 0, 0, 0.7);
  transform: none;
  box-shadow: none;
}
.share-button-navbar .share-button-text {
  display: inline;
}
.share-button-navbar .share-button-icon {
  width: 1.1rem;
  height: 1.1rem;
}
@media (max-width: 991px) {
  .share-button-navbar {
    width: 48px;
    height: 48px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    color: rgba(0, 0, 0, 0.75);
  }
  .share-button-navbar .share-button-text {
    display: none;
  }
  .share-button-navbar .share-button-icon {
    width: 1.3rem;
    height: 1.3rem;
    color: rgba(0, 0, 0, 0.75);
    fill: rgba(0, 0, 0, 0.75);
  }
  .share-button-navbar:hover {
    color: rgba(0, 0, 0, 0.75);
  }
  .share-button-navbar:hover .share-button-icon {
    color: rgba(0, 0, 0, 0.75);
  }
}

.navbar-toggler {
  border-radius: 50px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  width: 48px;
  height: 48px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.navbar-toggler:hover {
  background: rgba(0, 0, 0, 0.05);
}
.navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.1);
}
.navbar-toggler .navbar-toggler-icon {
  width: 1.3rem;
  height: 1.3rem;
}

@media (max-width: 991px) {
  .navbar-collapse .navbar-nav {
    text-align: center;
  }
  .navbar-collapse .navbar-nav .nav-item .nav-link {
    font-size: 1.1rem;
    padding: 0.75rem 1rem;
  }
}
/* Share Panel Modal */
#panel-share {
  z-index: 1080 !important;
}
#panel-share .modal-dialog {
  max-width: 600px;
  width: 90vw;
  margin: 1.75rem auto;
}
@media (max-width: 768px) {
  #panel-share .modal-dialog {
    width: 95vw;
    max-width: 95vw;
    margin: 1rem auto;
  }
}
#panel-share .offcanvas-title {
  font-family: var(--font-headings);
  color: var(--color-heading);
  font-size: 1.5rem;
  margin-bottom: 0;
}
#panel-share .nav-tabs {
  border-bottom: 1px solid #dee2e6;
}
#panel-share .nav-tabs .nav-link {
  color: #6c757d;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  padding: 0.75rem 1rem;
  transition: all 0.2s;
}
#panel-share .nav-tabs .nav-link:hover {
  color: var(--color-link);
  border-bottom-color: var(--color-link);
}
#panel-share .nav-tabs .nav-link.active {
  color: var(--color-link);
  border-bottom-color: var(--color-link);
  background: none;
}
#panel-share .share-section {
  padding-top: 1rem;
}
#panel-share .share-success-message {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  margin-top: 1rem;
  border-radius: 4px;
}
#panel-share .share-success-message .material-symbols-outlined {
  font-size: 1.2rem;
}
#panel-share .btn .material-symbols-outlined {
  font-size: 1.1rem;
  vertical-align: middle;
}
#panel-share .btn-icon {
  margin-right: 0;
}
@media (max-width: 576px) {
  #panel-share .btn-text {
    display: none;
  }
  #panel-share .btn-icon {
    margin-right: 0;
  }
}
#panel-share #embed-code-textarea {
  font-family: "Courier New", monospace;
  font-size: 0.75rem;
  line-height: 1.4;
  resize: vertical;
  background: #f8f9fa;
}
@media (max-width: 768px) {
  #panel-share #embed-code-textarea {
    font-size: 0.65rem;
    line-height: 1.3;
  }
}
#panel-share .form-label {
  font-weight: 600;
  color: var(--color-body);
  margin-bottom: 0.5rem;
}
#panel-share .form-control,
#panel-share .form-select {
  border-radius: 4px;
  border: 1px solid #ced4da;
}
#panel-share .form-control:focus,
#panel-share .form-select:focus {
  border-color: var(--color-link);
  box-shadow: 0 0 0 0.2rem rgba(139, 69, 19, 0.25);
}
#panel-share .btn-primary.w-100 {
  width: 80% !important;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
#panel-share .text-muted a {
  color: var(--color-link);
  text-decoration: underline;
}
#panel-share .text-muted a:hover {
  color: var(--color-link-hover);
  text-decoration: none;
}

/* Story intro share button placement */
.story-intro .share-button {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/*# sourceMappingURL=telar.css.map */