/* Accessibility: Screen-reader only class for visually hidden labels */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Accessibility: Skip link becomes visible on focus */
.sr-only-focusable:focus {
  position: fixed;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  padding: 12px 24px;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: #2c6fa0;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  z-index: 100000;
  text-decoration: none;
}

/* Accessibility: Global visible focus indicator */
*:focus-visible {
  outline: 2px solid #2c6fa0;
  outline-offset: 2px;
}

/* Base Layout */
body {
  font-family: Arial, sans-serif;
  padding: 1rem 1rem 0;
  background: #f9f9f9;
  color: #333;
  max-width: 1400px;
  margin: auto;
  overflow-x: hidden;
}

h1 {
  text-align: center;
  margin-bottom: 2rem;
}
/* ---- ETI "page" sections (Thank You / Comprehensive) ---- */
main.page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0px 16px;
}

/* Developer Dashboard needs extra width for all tabs */
section#page-admin-dashboard main.page {
  max-width: 1150px;
}

/* header area inside those pages */
.page .header {
  margin: 0 0 16px 0;
}
.page .header h1 {
  margin: 16px 0 6px 0;
  font-size: 1.6rem;
}
.page .header .muted,
.page .muted { color: #666; }

/* grid/rows used in Comprehensive + Thank You */
.page .row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}

/* cards */
.page .card, #feedback-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  padding: 1rem;
  flex: 1 1 520px;
  min-width: 280px;
  justify-content:center;
  margin-bottom: 2rem;
}

.page aside.card {
  flex: 0 0 280px;
}

/* key-value list */
.page .kv { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #eee; }
.page .kv:last-child { border-bottom: 0; }
.page .kv b { font-weight: 600; }
.page .kv span { color: #0b0f19; }

/* actions row (buttons/links at top of PDF card) */
.page .actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}

/* lightweight button look used on these pages */
.page .btn, .page .btn-primary {
  display: inline-block;
  margin: 0;
  padding: 9px 12px;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid #dbeafe;
  background: #e5f2ff;
  color: #0b0f19;
}
.page .btn-primary {
  background: #5599cc;
  border-color: #0b74ff;
  color: #fff;
}

/* PDF container states */
#pdf-container {
  background: #fafafa;
  border: 1px dashed #ddd;
  min-height: 240px;
  border-radius: 10px;
  display: grid;
  place-items: center;
}
#pdf-container.pdf-empty { color: #666; font-style: italic; }

/* Slide Presentation */
.slide {
  display: none;
  min-height: calc(78vh + 1px);
  width: 100%;
  /* Use padding for vertical spacing and to create a minimum horizontal gutter on small screens. */
  padding: 1rem;
  box-sizing: border-box; /* Ensures padding is included in the element's total width/height */
  transition: visibility 0.3s, opacity 0.3s ease-in-out;
}

/* Buttons */
button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  background-color: #5599cc;
  color: #fff;
  border: 1px solid #5599cc;
  border-radius: 6px;
  cursor: pointer;
}
button:hover {
  filter: brightness(0.95);
}

/* Next button centering for assessment */
.next-button {
  display: block;
  margin: 2rem auto 0 auto;
}

/* Question Styling */
.question {
  /* This is the key: Set a max-width so it doesn't get too wide on large screens. */
  max-width: 1000px; 
  
  /* Auto margins on left/right will center it perfectly within the .slide container. */
  /* We keep the original bottom margin for spacing between questions. */
  margin: 0 auto 1.5rem auto;

  padding: 1.5rem; /* Slightly increased padding for better internal spacing */
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 4px rgba(0,0,0,0.05);
}
.question p {
  margin-bottom: 0.5rem;
}
.question > label {
  display: block;
  margin-bottom: 0.5rem;
}

input[type="radio"] {
  margin-right: 0.5rem;
}

/* Results Grid Layout */
.results-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 3rem;
}

/* About page results-grid: image above text on phones */
@media (max-width: 768px) {
  .card > .results-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .card > .results-grid #results-hero {
    order: -1;
    margin: 0 auto 1rem auto;
    max-width: 400px;
  }
  .card > .results-grid #results-tabs {
    order: 1;
  }
}

/* ============================================= */
/* == ABOUT PAGE FRAMEWORK RESPONSIVENESS   == */
/* ============================================= */

#framework-pairs.is-carousel { position: relative; overflow: visible; }
#framework-pairs .fwk-track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:100%;
  overflow:hidden;                 /* hide scrollbar */
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;            /* Firefox */
  touch-action: pan-y pinch-zoom;  /* pass vertical to page; no horizontal pan */
  overscroll-behavior: auto;       /* do not trap page scroll */
}

#framework-pairs .fwk-track::-webkit-scrollbar{ display:none; } /* WebKit */

@media (max-width: 600px) {
  #framework-pairs .results-grid {
    grid-template-columns: 1fr;
  }
}

/* === Testimonials carousel layout === */
#testimonials .t-track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:100%;
  overflow:hidden;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  touch-action: pan-y pinch-zoom;  /* pass vertical to page; no horizontal pan */
  overscroll-behavior: auto;       /* do not trap page scroll */
}

#testimonials .t-item{ 
  scroll-snap-align:start;
  display:grid;
  grid-template-columns:56px 1fr;
  gap:12px;
  align-items:center;
  padding:8px 0;
}
#testimonials .t-avatar{
  width:56px; height:56px;
  border-radius:9999px;
  object-fit:cover;
  background:#e5e7eb; /* neutral fallback if image missing */
}
#testimonials blockquote{ margin:0; line-height:1.45; }
#testimonials figcaption{ margin-top:4px; font-weight:600; color:#374151; font-size:.95rem; }

#framework-pairs .fwk-slide{ scroll-snap-align:start; padding:0; }
#framework-pairs .fwk-slide > .results-grid{ margin-top:0; }

/* Center framework images inside the left card of each slide */
#framework-pairs .results-grid > .card:first-child{
  display: grid;
  place-items: center;   /* centers on both axes */
}

#framework-pairs .results-grid > .card:first-child img{
  display: block;
  margin: 0 auto;        /* horizontal centering safeguard */
  max-width: 100%;
  object-fit: contain;
}

/* arrows */
#framework-pairs .fwk-arrow{
  position:absolute; top:18%; transform:translateY(-50%);
  z-index:2;
  width:75px; height:75px;             
  display:grid; place-items:center;
  background:transparent; border:0;
  font-size:64px; line-height:1;
  color: #5599cc;               
  cursor:pointer; user-select:none;
  opacity:0; transition:opacity .15s ease, color .15s ease;
}
#framework-pairs.is-carousel:hover .fwk-arrow{ opacity:1; color:rgba(15,23,42,.55); }
#framework-pairs .fwk-arrow:hover{ color:rgba(15,23,42,.85); }
#framework-pairs .fwk-arrow.prev{ left:8px; }
#framework-pairs .fwk-arrow.next{ right:8px; }

/* dots: centered row 15px below */
/* Testimonials dots – same look as framework and stronger specificity than global button */
#testimonials .fwk-dots{
  display:flex; justify-content:center; align-items:center;
  gap:6px; margin-top:15px;
}
#testimonials .fwk-dots button{
  appearance:none;
  width:10px; height:10px;
  border-radius:999px;
  border:0; padding:0; margin:0;
  background:#d7dfeb; cursor:pointer;
}
#testimonials .fwk-dots button.active{ background:#5599cc; }

#framework-pairs .fwk-dots{
  display:flex; justify-content:center; align-items:center;
  gap:6px; margin-top:15px;
}
#framework-pairs .fwk-dots button{
  width:8px; height:8px; padding:0; margin:0;
  border:0; border-radius:50%;
  background:#c8d4e6; cursor:pointer;
}
#framework-pairs .fwk-dots button.active{ background:#5599cc; }

#framework-pairs .fwk-dots button {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: #d7dfeb;
  padding: 0; /* Explicitly remove padding */
  margin: 0;  /* This is the key fix to remove the unwanted margins */
}

#framework-pairs .fwk-dots button.active{ background:#5599cc; }

#results-tabs { max-width: 560px; margin: 0 auto; }
#results-tabs .accitem { border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04); overflow: hidden; }
#results-tabs .accitem + .accitem { margin-top: 12px; }
#results-tabs .acchead { padding: 12px 14px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
#results-tabs .acchead::after { content: '+'; font-weight: 700; color: #1f2937; }
#results-tabs .accitem.open .acchead::after { content: '−'; }
#results-tabs .accpanel { display: none; padding: 0 14px 14px; color: #475569; }
#results-tabs .accitem.open .accpanel { display: block; }

/* About → “Actionable Insights” hero image container */
#results-hero{
  position: relative;
  overflow: hidden;
  margin: 0 auto !important;   /* override inline negative margins */
  max-width: 560px;
  border-radius: 12px;
  aspect-ratio: 4 / 3;         /* stable height prevents flicker */
}
#results-hero img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;          /* no spill, no crop */
  border-radius: 12px;
  -webkit-transform: translateZ(0);
          transform: translateZ(0); /* iOS repaint hint */
}

@media (max-width: 900px){
  #results-hero{
    max-width: 100%;
    padding-top: 15px;      /* top spacing without breaking height */
    box-sizing: border-box; /* keeps aspect-ratio height stable */
    display: flex;
    align-items: flex-start; /* image sits just below the padding */
    justify-content: center; /* stays centered horizontally */
  }
  #results-hero img{
    margin: 0;              /* no margin on the image */
    width: 100%;
    height: 100%;           /* avoid calc() on iOS */
    object-fit: contain;
  }
}

.results-upper,
.results-lower {
  display: contents;
}

.results-upper-left {
  display: grid;
  justify-items: center;   /* center each item horizontally */
  align-content: center;   /* center the whole stack vertically */
  min-width: 0 !important; /* allow shrinking on small screens */
  gap: .75rem;             /* small breathing room between items */
}

@media (min-width: 901px) {
  .results-upper-left {
    grid-column: span 1;
  }
}

.results-lower-left {
  padding-top: 4rem;
}

.results-upper-left,
.results-lower-left,
.results-lower-right {
  padding: 1rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0,0,0,0.05);
}

@media (max-width: 900px) {
  #results-slide .results-grid {
    grid-template-columns: 1fr;
  }
}

/* Result Description */
.result-description {
  font-size: 1.1rem;
  line-height: 1.6;
  background: #fff;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0,0,0,0.05);
}

/* Subtype and Attribute Notes Blocks */
.attribute-notes {
  margin-top: 2rem;
  padding: 1.5rem;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 0 4px rgba(0,0,0,0.05);
  font-size: 1rem;
  line-height: 1.6;
}
.attribute-notes h4 {
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

/* Image Grid on Quiz Slides */
.image-grid label {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 0;
  padding: 0;
}

.image-grid label img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 1rem;
  justify-items: center;
}
@media (max-width: 900px) {
  .image-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.quiz-image {
  width: 100%;
  max-width: 100px;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  margin: 0.5rem 0;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.2s ease-in-out;
}

.quiz-image:hover {
  border-color: #2c7be5;
}

/* Show attribute names at ends */
.range-label {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  margin-bottom: .5rem;
  padding-bottom: 15px;
}
.range-label span {
  width: 50%;
  text-align: center;
}
.range-label span:first-child {
  text-align: left;
}
.range-label span:last-child {
  text-align: right;
}

.dual-wrapper {
  margin: 1.5rem 0;
  position: relative;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.dual-track {
  position: relative;
  width: 90%;
  height: 8px;
  background: #e0e0e0;
  margin: 1rem auto;
  border-radius: 4px;
  overflow: visible;
}

.range-bar {
  position: absolute;
  height: 100%;
  background: #000;
  border-radius: 4px;
  left: 0;
  right: 0;
}

/* Zero marker visual anchor */
.zero-marker {
  position: absolute;
  left: 50%;
  top: -26px;
  width: 4px;
  height: 60px;
  background: black;
  transform: translateX(-50%);
  z-index: 3;
}

/* Tick marks at 0%, 25%, 50%, 75%, 100% */
.dual-track .tick {
  position: absolute;
  top: -6px;
  width: 2px;
  height: 20px;
  background: #999;
  transform: translateX(-50%);
  z-index: 2;
}

.dual-track .tick-0   { left: 0%; }
.dual-track .tick-25  { left: 25%; }
.dual-track .tick-50  { left: 50%; }
.dual-track .tick-75  { left: 75%; }
.dual-track .tick-100 { left: 100%; }

/* Position percentage labels underneath the track */
.marker-labels {
  position: relative;
  height: 1.5rem;
  margin-top: 0.25rem;
}
.marker-labels .label-a,
.marker-labels .label-b {
  position: absolute;
  top: 15px;
  transform: translateX(-50%);
  font-size: 0.9rem;
  color: black;
}

.cover-slide {
  margin-top: -20px;
  text-align: center;
  padding: 3rem 2rem;
}

.cover-slide h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.cover-slide p {
  font-size: 1.125rem;
  margin-top: -20px;
  margin-bottom: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.cover-buttons {
  display: flex;
  flex-direction: column;
  align-items: stretch;    /* make buttons fill container width */
  gap: 0.75rem;            /* vertical space between each button */
  width: 100%;             /* ensure the container is full‐width */
  max-width: 300px;        /* optional: cap its width */
  margin: 0 auto;          /* center on the page */
}

.section-header {
  font-size: 1.25rem;
  font-weight: bold;
  margin-top: 2rem;
  margin-bottom: 1rem;
  text-align: left;
  color: #222;
}

#attributeResults {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
}

.readiness-block {
  max-width: 100%;
  margin: 0;
  padding: 1rem;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 0 6px rgba(0,0,0,0.05);
  font-size: 1.1rem;
  line-height: 1.7;
  word-wrap: break-word;
}

.strategy-guide h3 {
  margin-top: 1.5rem;
  font-size: 1.2rem;
  color: #2c7be5;
}

.strategy-guide h4 {
  margin-top: 1rem;
  margin-bottom: -12px;
  font-size: 1.2rem;
  font-weight: 600;
}

.strategy-guide ul {
  margin: 0.5rem 1rem 1rem;
  list-style: disc inside;
}

.strategy-guide p {
  margin: 0.5rem 0;
}

/* Roadmap responsive font sizing for phones (both orientations) */
@media (max-width: 768px) {
  .readiness-block {
    font-size: 1rem;
    line-height: 1.6;
  }
  .strategy-guide h3 {
    font-size: 1.1rem;
  }
  .strategy-guide h4 {
    font-size: 1.05rem;
  }
  .strategy-guide h5 {
    font-size: 1rem;
  }
  .strategy-guide h6 {
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  .readiness-block {
    font-size: 0.95rem;
    padding: 0.75rem;
  }
  .strategy-guide h3 {
    font-size: 1rem;
  }
  .strategy-guide h4 {
    font-size: 0.95rem;
  }
}

/* Horizontal phone landscape mode - prevent oversized text */
@media (max-height: 500px) and (orientation: landscape) {
  .readiness-block {
    font-size: 0.95rem;
    line-height: 1.5;
  }
  .strategy-guide h3 {
    font-size: 1rem;
  }
  .strategy-guide h4 {
    font-size: 0.95rem;
  }
  .part-intro-slide h2 {
    font-size: 1.5rem !important;
  }
  .part-intro-slide h3 {
    font-size: 1.2rem !important;
  }
  .part-intro-slide p {
    font-size: 1rem !important;
  }
}

/* Part Intro Content - move up to reduce gap below progress bar */
.part-intro-content {
  margin-top: -3rem;
}

#attribute-insights {
  grid-column: 1 / -1;
  padding: 1rem;
  margin: 0;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
  text-align: center;
}

#attribute-insights ul {
  list-style: none;
  padding-left: 0;
  margin: 0 0 1rem;  /* adjust bottom margin as needed */
}

#attribute-details {
  display: none;      /* hidden by default; JS toggles to grid */
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
@media (max-width: 700px) {
  #attribute-details { grid-template-columns: 1fr; gap: 1rem; }
}

#toggle-attributes {
  display: inline-block;  /* shrink‐to‐fit button */
  margin: 0;              /* reset default margins */
}

.paywall-block {
  text-align: center;
  margin-top: 1rem;
}
.paywall-block p {
  margin-bottom: 0.5rem;
  font-size: 1rem;
}
#unlock-results {
  display: inline-block;
  margin: 0 auto;
}

/* evenly distribute the attribute descriptions vertically */
#attributeDescriptions {
  display: flex;
  flex-direction: column;
  justify-content: space-between;  /* or space-evenly if you want padding above & below too */
  height: 100%;                     /* ensure it fills its parent’s height */
}

  .subtype-description {
    padding-bottom: 2rem;
}

@media print {
  /* 1) Collapse the results grid into one column */
  .results-grid {
    grid-template-columns: 1fr !important;  /* override the default 2-column layout */ 
  }

  /* 2) Make each grid cell span full width */
  .results-upper-left,
  .results-upper-right,
  .results-lower-left,
  .results-lower-right {
    min-width: 0 !important;    /* remove any leftover min-widths */
    width:     100% !important; /* force each cell to fill the page width */
  }

  /* 3) Ensure your radar chart and text blocks shrink to fit */
  #resultChartCanvas,
  .result-description,
  .subtype-description,
  .attribute-notes {
    max-width: 100% !important;
    width:     100% !important;
  }
}

@media (max-width: 900px) {
  /* allow the grid cells to shrink past their content’s min-width */
  .results-upper-left,
  .results-upper-right,
  .results-lower-left,
  .results-lower-right {
    min-width: 0;
  }
}

/* force all result-section paragraphs to wrap inside their boxes */
.result-description p,
.subtype-description p,
.attribute-notes p,
.strategy-guide p {
  /* legacy and modern wrapping */
  word-wrap:       break-word;
  overflow-wrap:   break-word;
}

/* 4×4 grid for the 16 subtype buttons */
.subtype-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-top: 1rem;
}
.subtype-grid button {
  padding: 0.5rem;
  font-size: 0.9rem;
  border: 1px solid #5599cc;
  border-radius: 6px;
  background: #5599cc;
  color: #fff;
  cursor: pointer;
}
.subtype-grid button:hover {
  filter: brightness(0.95);
}

/* in your main CSS (e.g. styles.css) */
.person-photo {
  width: 100%;        /* fill its container’s width */
  max-width: 14rem;   /* match the grid-column/button width */
  height: auto;       /* keep aspect ratio */
  border-radius: 0;   /* ensure it’s not rounded */
  display: block;     /* remove any inline spacing */
  margin: 0 auto;     /* center if needed */
}

.person-photo {
  display: block;
  width: 100%;
  height: auto;
}

/* make the photo look clickable */
.person-photo-container {
  position: relative;
  display: inline-block;
  width: 14rem;      /* same width as your buttons */
  cursor: pointer;
}

.person-photo-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0.5rem 0; /* space above & below text */
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 1.2rem;
  text-align: center;
  font-weight: bold;
  box-sizing: border-box;
}

.cover-person-grid {
  display: grid;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
  /* fallback for very old browsers: */
  grid-template-columns: repeat(1, 14rem);
}

.cover-person-grid button {
  margin-top: .5rem;
}

/* phones: 1 across (you already have that as the default) */
@media (min-width: 480px) {
  .cover-person-grid {
    grid-template-columns: repeat(2, 14rem);
  }
}

/* vertical iPad (~768px wide): 2 across → switch to 2 (same as phones) but you could bump to 3 above 768 if you like */
@media (min-width: 768px) {
  .cover-person-grid {
    grid-template-columns: repeat(2, 14rem);
  }
}

/* horizontal iPad (~1024px wide): 3 across */
@media (min-width: 1024px) {
  .cover-person-grid {
    grid-template-columns: repeat(4, 14rem);
  }
}

/* desktops and large screens: 4 across */
@media (min-width: 1280px) {
  .cover-person-grid {
    grid-template-columns: repeat(4, 14rem);
  }
}

/* Dashboard panel styling */
.dashboard-panel {
  display: none;
  background-color: #f5f7fa; /* light gray-blue background */
  border: 1px solid #d1d5db;  /* subtle gray border */
  border-radius: 0.5rem;      /* rounded corners */
  padding: 1rem;              /* inner space */
  margin-top: 2rem;           /* separation from grid */
  box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* slight drop-shadow */
}

#panel-summary {
  font-weight: 500;
  font-size: 1rem;
  color: #1f2937;
  margin-bottom: 0.5rem;
}
#panel-influencer {
  font-size: 0.95rem;
  color: #374151;
  margin-bottom: 0.5rem;
}
#panel-count {
  font-size: 0.95rem;
  color: #374151;
  margin-bottom: 1rem;
}

#panel-overview {
  font-size: 0.95rem;
  color: #1f2937;
  margin-bottom: 1rem;
}
#panel-overview div {
  margin-bottom: 0.25rem;
}
#panel-overview strong {
  font-weight: 600;
}

/* Temporarily hide legacy email gate */
#user-info { display: none !important; }

/* === ETI: fixed top-right auth bar (blue), tabs only, fixed height === */
#eti-topbar{
  position:fixed; top:0; left:0; right:0;
  z-index:2000;
  background:#5599cc;
  height:64px;                 /* fixed height for all screens */
}
#eti-topbar .inner{
  display:flex; justify-content:flex-end; align-items:center; gap:14px;
  height:64px;                 /* match the bar height */
  padding:0 45px 0 30px;              /* right padding so "Login" isn't against the edge */
  width:100vw;                 /* ensures full-bleed alignment */
  box-sizing:border-box;
}

/* Tabs (words) on the right, white text with underline on hover/active */
#eti-topbar .tabs{ display:inline-flex; gap:12px; align-items:center; color:#fff; margin-right: 12px;}
#eti-topbar .sep{ color:#fff; opacity:.95; }
#eti-topbar .tab{
  position:relative; padding:2px 0; cursor:pointer; color:#fff; font-weight:600; user-select:none;
}
#eti-topbar .tab::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:transparent; transition:background .15s ease;
}
#eti-topbar .tab:hover::after,
#eti-topbar .tab[aria-selected="true"]::after{ background:rgba(255,255,255,.95); }

/* Logged-in email chip (replaces tabs) */
#eti-topbar .user-chip{
  padding:6px 10px; border-radius:9999px;
  background:transparent; border:1px solid rgba(255,255,255,.55);
  color:#fff; font-weight:600; cursor:pointer;
}

@media (max-width: 600px) {
  #eti-topbar .inner {
    padding: 0 15px;
  }
}

/* Initial page spacer so title isn't under the fixed bar; JS toggles on scroll */
body.eti-topbar-space{ padding-top:74px; } /* 64 bar + ~10 gap */

/* === Popup/dropdown (fixed, right-aligned, clamped width) === */
#eti-auth-pop{
  position:fixed;
  top:74px;                    /* keep aligned just under the bar */
  right:12px;
  width:min(360px, 94vw);      /* never falls off the edge */
  box-sizing:border-box;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  box-shadow:0 10px 25px rgba(0,0,0,.15);
  padding:12px;
  z-index:2100;
  display:none;
}
#eti-auth-pop.show{ display:block; }
#eti-auth-pop .panel{ display:none; }
#eti-auth-pop .panel.active{ display:block; }

/* Inputs never spill: minmax collapses long placeholders */
#eti-auth-pop .grid{ display:grid; gap:8px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
#eti-auth-pop .grid.one{ grid-template-columns:minmax(0,1fr); }

#eti-auth-pop input[type="email"],
#eti-auth-pop input[type="password"],
#eti-auth-pop input[type="text"]{
  width:100%; box-sizing:border-box;
  padding:10px; border:1px solid #cbd5e1; border-radius:6px;
}

#eti-auth-pop .row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:6px; }
#eti-auth-pop .actions{ display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; margin-top:8px; }
#eti-auth-pop .warn{ color:#dc2626; font-weight:600; font-size:14px; }

/* verification banner + resend button */
#eti-auth-pop .verify-banner button{
  background:#fff; 
  color:#0b0f19; 
  border:1px solid #cbd5e1;
  border-radius:8px; 
  padding:6px 10px; 
  cursor:pointer;
}
#eti-auth-pop .verify-banner button:hover{ filter:brightness(.95); }

/* generic primary button (used by inline registration “Create account & continue”) */
.btn-primary{
  background:#5599cc; 
  color:#fff; 
  border:1px solid #5599cc; 
  border-radius:6px;
  padding:10px 16px; 
  font-weight:600; 
  cursor:pointer;
}
.btn-primary:hover{ filter:brightness(.97); }

/* hide paywall until user is eligible */
#paywall-section.readiness-block {
    display:none;
    margin-top: -.5rem;
    margin-bottom: .5rem;
}

body.pro-eligible #paywall-section{
    display:block !important;
}

body.pro-eligible #paywall-section.readiness-block {
    display: block !important;
}

#actionPanel .cta-wrap{ display:flex; gap:35px; flex-wrap:wrap; margin:-20px 0 8px 0; justify-content:center; align-items:center; }
#actionPanel .cta-note{ margin-top:6px; color:#555; font-size:14px; }
#actionPanel { scroll-margin-top: 80px; } /* adjust 80px to your header height */

/* === About: Learn More card === */
.about-learn-card h3{ margin:0 0 8px 0; }
.about-learn-grid{
  display:grid; gap:16px; align-items:center;
  grid-template-columns: 1.2fr 1fr;
}

@media (max-width: 900px){
  .about-learn-grid{ grid-template-columns:1fr; }
  .about-media{ order:-1; }

  /* Prevent oversized image on vertical tablets */
  .about-carousel{
    max-width: 560px;   /* cap to laptop-ish size */
    margin: 0 auto;     /* center the capped width */
  }
}

/* simple fade carousel; all images same box */
.about-carousel{
  position:relative; width:100%;
  aspect-ratio: 4 / 3;
  border-radius:12px; overflow:hidden; background:#eef2f7;
}
.about-carousel img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  opacity:0; transition:opacity .5s ease;
}
.about-carousel img.active{ opacity:1; }

/* === Development Roadmap Horizontal Accordion === */
.roadmap-horizontal {
  display: flex;
  min-height: 320px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}
.roadmap-h-phase {
  display: flex;
  flex-direction: row;
  transition: flex 0.4s ease;
  flex: 0 0 auto;
  min-width: 0;
}
.roadmap-h-phase.active {
  flex: 1 1 auto;
}
.roadmap-h-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem 0.75rem;
  min-width: 60px;
  background: #f9fafb;
  border: none;
  border-right: 1px solid #e5e7eb;
  cursor: pointer;
  transition: background 0.2s ease, min-width 0.3s ease;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
.roadmap-h-phase:last-child .roadmap-h-tab {
  border-right: none;
}
.roadmap-h-tab:hover {
  background: #f3f4f6;
}
.roadmap-h-phase.active .roadmap-h-tab {
  background: #5599cc;
  color: white;
}
.roadmap-h-phase.active .roadmap-h-tab .roadmap-status-badge {
  background: rgba(255,255,255,0.2);
  color: white;
}
.roadmap-h-title {
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
}
.roadmap-h-arrow {
  font-size: 1.2rem;
  transition: transform 0.3s ease;
  transform: rotate(0deg);
}
.roadmap-h-phase.active .roadmap-h-arrow {
  transform: rotate(90deg);
}
.roadmap-h-panel {
  display: none;
  padding: 1.25rem;
  background: #fff;
  overflow-y: auto;
  animation: panelSlideIn 0.3s ease-out;
}
.roadmap-h-phase.active .roadmap-h-panel {
  display: block;
  flex: 1;
  border-left: 1px solid #e5e7eb;
}
.roadmap-h-panel ul {
  margin: 0;
  padding-left: 1.25rem;
  list-style: disc;
}
.roadmap-h-panel li {
  margin-bottom: 0.5rem;
  line-height: 1.5;
  color: #4b5563;
  font-size: 0.95rem;
}
.roadmap-h-panel li:last-child {
  margin-bottom: 0;
}
.roadmap-h-panel li strong {
  color: #1f2937;
}

/* Status badges (shared) */
.roadmap-status-badge,
.dev-status-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  writing-mode: horizontal-tb;
}
.roadmap-status-badge.completed,
.dev-status-badge.completed {
  background: #dcfce7;
  color: #166534;
}
.roadmap-status-badge.current,
.dev-status-badge.current {
  background: #dbeafe;
  color: #1e40af;
}
.roadmap-status-badge.upcoming,
.dev-status-badge.upcoming {
  background: #fef3c7;
  color: #92400e;
}

/* Development Roadmap Horizontal Accordion (like Strategic Roadmaps) */
.dev-disciplines-container {
  display: flex;
  gap: 0;
  margin: 1.5rem 0;
  min-height: 320px;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.dev-discipline-bar {
  flex: 0 0 2.5rem;
  position: relative;
  border-right: 1px solid #e5e7eb;
  cursor: pointer;
  transition: flex 0.4s ease;
  overflow: hidden;
  background: #fff;
}

.dev-discipline-bar:last-child {
  border-right: none;
}

.dev-discipline-bar:hover {
  opacity: 0.9;
}

.dev-discipline-bar.active {
  flex: 1 1 auto;
}

.dev-discipline-label {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  z-index: 1;
  background: #f3f4f6;
  color: #374151;
}

.dev-discipline-content {
  margin-left: 2.5rem;
  padding: 1rem 1.5rem;
  overflow-y: auto;
  max-height: 400px;
  width: calc(100% - 2.5rem);
  min-width: 280px;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
  animation: fadeInContent 0.5s ease-in-out;
}

.dev-discipline-content ul {
  margin: 0;
  padding-left: 1.25rem;
  list-style: disc;
}

.dev-discipline-content li {
  margin-bottom: 0.5rem;
  line-height: 1.5;
  color: #4b5563;
  font-size: 0.95rem;
}

.dev-discipline-content li:last-child {
  margin-bottom: 0;
}

.dev-discipline-content li strong {
  color: #1f2937;
}

/* Phase-specific colors for labels */
.dev-phase-poc .dev-discipline-label {
  background: #dcfce7;
  color: #166534;
}

.dev-phase-mvp .dev-discipline-label {
  background: #dcfce7;
  color: #166534;
}

.dev-phase-v1 .dev-discipline-label {
  background: #dbeafe;
  color: #1e40af;
}

.dev-phase-v2 .dev-discipline-label {
  background: #fef3c7;
  color: #92400e;
}

/* Mobile: stack vertically */
@media (max-width: 768px) {
  .dev-disciplines-container {
    flex-direction: column;
    min-height: auto;
  }

  .dev-discipline-bar {
    flex: 0 0 auto;
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
  }

  .dev-discipline-bar:last-child {
    border-bottom: none;
  }

  .dev-discipline-label {
    position: relative;
    width: 100%;
    height: 2.5rem;
    writing-mode: horizontal-tb;
    transform: none;
    padding: 0 1rem;
    justify-content: flex-start;
  }

  .dev-discipline-content {
    margin-left: 0;
    width: 100%;
    min-width: auto;
    max-height: none;
  }

  .dev-discipline-bar.active {
    flex: 0 0 auto;
  }
}

@keyframes panelSlideIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Mobile: stack vertically */
@media (max-width: 768px) {
  .roadmap-horizontal {
    flex-direction: column;
    min-height: auto;
  }
  .roadmap-h-phase {
    flex-direction: column;
  }
  .roadmap-h-tab {
    writing-mode: horizontal-tb;
    flex-direction: row;
    justify-content: space-between;
    padding: 1rem;
    min-width: auto;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
  }
  .roadmap-h-phase:last-child .roadmap-h-tab {
    border-bottom: 1px solid #e5e7eb;
  }
  .roadmap-h-phase.active .roadmap-h-tab {
    border-bottom: none;
  }
  .roadmap-h-arrow {
    transform: rotate(90deg);
  }
  .roadmap-h-phase.active .roadmap-h-arrow {
    transform: rotate(-90deg);
  }
  .roadmap-h-phase.active .roadmap-h-panel {
    border-left: none;
    border-top: 1px solid #e5e7eb;
  }
}

/* === Assessment Comparison Animations === */
@keyframes slideInRow {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

#assessment-compare-select {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#assessment-compare-select:hover {
  border-color: #5599cc;
}
#assessment-compare-select:focus,
#assessment-compare-select:focus-visible {
  outline: 2px solid #2c6fa0;
  outline-offset: 2px;
  border-color: #5599cc;
  box-shadow: 0 0 0 3px rgba(85, 153, 204, 0.2);
}

#comparison-content {
  transition: opacity 0.4s ease-in-out;
}

@media (max-width: 768px) {
  .comparison-row {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }
  .comparison-row > div {
    text-align: center !important;
    padding: 0.5rem 0;
  }
  .comparison-row > div:first-child {
    font-weight: 700;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 0.75rem;
    margin-bottom: 0.5rem;
  }
}

/* === Partners marquee (For Educational Institutions) === */
.partner-marquee{ position:relative; overflow:hidden; padding:8px 0; margin-top:10px; }
.partner-marquee::before,
.partner-marquee::after{
  content:""; position:absolute; top:0; bottom:0; width:48px; pointer-events:none; z-index:1;
  background:linear-gradient(to right, #fff, rgba(255,255,255,0));
}
.partner-marquee::before{ left:0; }
.partner-marquee::after{
  right:0; left:auto;
  background:linear-gradient(to left, #fff, rgba(255,255,255,0));
}
.pm-track{ display:flex; gap:36px; align-items:center; width:max-content; animation:pm-scroll 28s linear infinite; }
.pm-group{ display:flex; gap:36px; align-items:center; }
.pm-logo{ height:34px; width:auto; object-fit:contain; flex:0 0 auto; filter:grayscale(1); opacity:.9; }
.pm-badge{ flex:0 0 auto; padding:8px 12px; border:1px solid #e5e7eb; border-radius:8px; background:#f8fafc; color:#374151; font-weight:600; }
.partner-marquee:hover .pm-track{ animation-play-state:paused; }

@keyframes pm-scroll{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* requires two identical .pm-group blocks */
}

@media (max-width:700px){
  .pm-logo{ height:28px; }
}
@media (prefers-reduced-motion: reduce){
  .pm-track{ animation: none; }
}

/* ===== ETI Footer ===== */
#eti-footer {
    background: #5599cc;
    color: #fff;
    margin-top: auto;   /* Part of sticky footer */
    margin-bottom: 0;   /* Keep for sticky footer */
    width: 100vw;       /* Force full viewport width */
    position: relative; /* Needed for transform positioning */
    left: 50%;          /* Shift left edge to viewport center */
    transform: translateX(-50%); /* Pull back half its width to center it */
    box-sizing: border-box;
    padding: 0;
}

#eti-footer .inner {
  max-width: 1100px; /* Maximum width of your content */
  margin: 0 auto;     /* Center the content block horizontally */
  padding: 30px 15px; /* Keep your vertical/horizontal padding */
  display: grid;
  gap: 18px;
  grid-template-columns: 1.2fr 1fr 1.2fr;
  width: 100%;        /* Ensure inner takes full width *up to* max-width */
  box-sizing: border-box;
  /* overflow-x: hidden; */ /* REMOVED THIS LINE */
}

/* subtle gutter so footer content doesn’t kiss the edges */
#eti-footer .inner > * {
  padding: 0 8px;           /* ← a few pixels left/right on all three columns */
  box-sizing: border-box;
}

/* make paragraph and form respect the same right edge */
#eti-footer .brand p,
#eti-footer .support form {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;               /* they inherit the 8px column gutter above */
}

/* inputs already set to width:100%; ensure no overrun and same box model */
#eti-footer .support input,
#eti-footer .support textarea {
  max-width: 100%;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

/* Footer columns can shrink; long words/URLs wrap instead of overflowing */
#eti-footer .brand,
#eti-footer .links,
#eti-footer .support { min-width:0; }

#eti-footer .brand p,
#eti-footer .links,
#eti-footer .support,
#eti-footer .legal {
  overflow-wrap:anywhere;  /* modern wrap */
  word-break:break-word;   /* legacy fallback */
}

/* Inputs already width:100%; make sure they can't exceed their column */
#eti-footer .support input,
#eti-footer .support textarea { max-width:100%; box-sizing:border-box; }

@media (max-width: 900px){ #eti-footer .inner { grid-template-columns:1fr; } }

#eti-footer a { color:#fff; text-decoration:none; }
#eti-footer a:hover { text-decoration:underline; }

#eti-footer .brand h4 { margin:0 0 6px 0; font-size:20px; line-height:1.2; }
#eti-footer .brand p  { margin:0; opacity:.95; text-align:justify; text-justify:inter-word; }

#eti-footer .links h5,
#eti-footer .support h5 { margin:0 0 8px 0; font-size:18px; line-height:1.2; }
#eti-footer .links ul { list-style:none; padding:0; margin:0; display:grid; gap:6px; }
#eti-footer .links li { margin:0; }

#eti-footer .support form { display:grid; gap:8px; }
#eti-footer .support input,
#eti-footer .support textarea {
  width:100%; padding:9px 10px; border-radius:6px; border:1px solid rgba(255,255,255,1);
  background:rgba(255,255,255,1); color:#000;
}
#eti-footer .support textarea { min-height:80px; resize:vertical; }
#eti-footer .support button {
  appearance:none; border:0; border-radius:6px; padding:10px 25px;
  background:#fff; color:#0b0f19; font-weight:600; cursor:pointer;
}
#eti-footer .legal {
  border-top:1px solid rgba(255,255,255,.25); margin-top:8px; padding:10px 16px; font-size:14px;
}

#eti-footer .support { min-width: 0; }
#eti-footer .support form { width: 100%; }
#eti-footer .support input,
#eti-footer .support textarea {
  box-sizing: border-box;
  max-width: 100%;
}

/* give the inner some extra breathing room on very small screens */
@media (max-width: 480px){
  #eti-footer .inner { padding: 24px 12px; }
}

@media (max-width: 480px){
  #eti-footer .links li { width:100%; max-width:100%; } /* stop max-content overflow */
}

#eti-footer { position: relative; }

#eti-footer .links { text-align: center; }
#eti-footer .links ul { justify-items: center; }
#eti-footer .links li { width: max-content; margin: 0 auto; }

html, body { margin:0 auto 0 auto; }
#eti-footer { margin-bottom:0; }
#eti-footer .legal { margin-bottom:0; }
body > :last-child { margin-bottom:0 !important; }

/* === START: Sticky Footer Solution (Forced) === */
html {
  height: 100%;
}

body {
  min-height: 100vh;
  /* Force the body to be a flex container */
  display: flex !important;
  flex-direction: column;
}

/* Force the main page content to grow and push the footer down */
body > section {
  flex: 1 0 auto !important;
}

#eti-footer {
  margin-top: auto;
  flex-shrink: 0;
  overflow-x: initial;
}
/* === END: Sticky Footer Solution (Forced) === */

/* Persona overlay: hard edges, expands to top, subtle bounce */
.person-photo-container {
  position: relative;
  overflow: hidden;
}

.person-photo-overlay {
  /* collapsed height for the bottom label strip */
  --collapsed: 40px;

  position: absolute;
  inset: 0;                /* top:0 right:0 bottom:0 left:0 */
  background: rgba(0,0,0,.65);   /* solid, no gradient */
  color: #fff;
  padding: 10px 12px;
  box-sizing: border-box;

  /* Start “parked” at the bottom, showing only the collapsed strip */
  transform: translateY(calc(100% - var(--collapsed)));
  transition: transform .28s cubic-bezier(.2,.8,.2,1);

  /* Don’t steal clicks from your existing handler */
  pointer-events: none;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
}

/* Keep name larger (adjust to match your original size) */
.person-photo-overlay .ppo-name {
  font-weight: 700;
  font-size: 18px;  /* ← bump this up/down to match your old overlay */
  line-height: 1.15;
}

/* Description stays modest */
.person-photo-overlay .ppo-desc {
  font-size: 14px;
  line-height: 1.35;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity .2s ease, max-height .2s ease;
}

/* Hover/focus/touch “open” state */
.person-photo-container:hover .person-photo-overlay,
.person-photo-container:focus-within .person-photo-overlay,
.person-photo-container.hover .person-photo-overlay {
  transform: translateY(0); /* overlay now butts the top of the image */
}

.person-photo-container:hover .person-photo-overlay .ppo-desc,
.person-photo-container:focus-within .person-photo-overlay .ppo-desc,
.person-photo-container.hover .person-photo-overlay .ppo-desc {
  opacity: 1;
  max-height: 220px;
}

/* Subtle bounce of the inner content when revealed */
.ppo-inner { will-change: transform; }
.person-photo-container:hover .ppo-inner,
.person-photo-container:focus-within .ppo-inner,
.person-photo-container.hover .ppo-inner {
  animation: etiOverlayBounce .32s cubic-bezier(.22,1.4,.36,1);
}

@keyframes etiOverlayBounce {
  0%   { transform: translateY(6px); }
  60%  { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .person-photo-overlay { transition: none; }
  .person-photo-overlay .ppo-desc { transition: none; }
  .ppo-inner { animation: none !important; }
}

/* Recommended: gap between name and description */
.ppo-inner{
  display: flex;
  flex-direction: column;
  gap: 10px;   /* tweak: 6–14px */
}

/* === Topbar "Menu" button: hamburger always === */
#eti-menu-toggle {
  position: relative;
  font-weight: 700;
  padding-left: 28px;          /* tighter, keeps text aligned */
}

/* Always show the icon (no media query) */
#eti-menu-toggle::before {
  content: "";
  position: absolute;
  left: 5px;                   /* closer to the left edge */
  top: 50%;
  width: 18px;
  height: 12px;
  transform: translateY(-50%);
  background:
    linear-gradient(#fff,#fff) 0 0/100% 2px,
    linear-gradient(#fff,#fff) 0 5px/100% 2px,
    linear-gradient(#fff,#fff) 0 10px/100% 2px;
  background-repeat: no-repeat;
  border-radius: 2px;
  opacity: 0.95;
}

/* === Combined Menu Styling (Nav & Chip) === */

/* Container Styles */
#eti-nav-menu,
#eti-chip-menu {
  position: fixed;
  z-index: 10000;
  min-width: 200px;
  max-width: 280px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
  padding: 8px;
  font-size: 14px;
  overflow: hidden;
}

/* Specific Positions */
#eti-nav-menu { top: 74px; left: 12px; z-index: 10000; }
#eti-chip-menu { top: 74px; right: 22px; z-index: 2100; }

/* Shared Header Style */
#eti-nav-menu .eti-menu-header,
#eti-chip-menu .eti-menu-header {
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  margin: -8px -8px 8px -8px;
  padding: 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

#eti-nav-menu .eti-menu-header > div,
#eti-chip-menu .eti-menu-header > div {
    padding: 12px 12px 8px 12px;
}

/* Shared Item Styles (Base & Hover) */
#eti-nav-menu .eti-nav-item,
#eti-nav-menu a[role="menuitem"],
#eti-chip-menu .eti-nav-item,
#eti-chip-menu a[role="menuitem"] {
  display:block;
  width:100%;
  padding:10px 12px;
  border-radius:8px;
  text-align:left;
  text-decoration:none !important;
  color:#0b0f19 !important;
  background:none;
  border:0;
  margin:0;
  line-height:1.25;
  box-sizing:border-box;
  cursor: pointer;
  font-weight: normal;
}

#eti-nav-menu .eti-nav-item:hover,
#eti-nav-menu a[role="menuitem"]:hover,
#eti-chip-menu .eti-nav-item:hover,
#eti-chip-menu a[role="menuitem"]:hover {
  background:#e5f2ff !important;
  text-decoration:none !important;
}

/* Specific Item Styles (Chip Menu Only) */
#eti-chip-menu .eti-chip-logout {
    font-weight: 600 !important;
}

#eti-chip-menu .eti-nav-item.active-chip-link {
  font-weight: 600 !important;
}

/* Shared Focus Style */
#eti-nav-menu .eti-nav-item:focus,
#eti-chip-menu .eti-nav-item:focus {
    outline: 2px solid #2c6fa0;
    outline-offset: 2px;
}

/* If user is Pro, hide paywall UI everywhere */
body.has-pro #paywall-section,
body.has-pro #pp-5645-wrap,
body.has-pro form[action*="paypal.com/cgi-bin/webscr"] {
  display:none !important;
}

.pro-gate .inline-register input { width: 100%; }
@media (min-width: 700px){
  .pro-gate .inline-register .grid { grid-template-columns: 1fr 1fr; }
}

/* ===== Inline Pro gate (Step-1) ===== */
.pro-gate .inline-register {
  border:1px solid #e5e7eb; border-radius:6px; padding:15px;
  margin-top: -12px;
  background:#fff;
  position: relative;
  z-index: 5;
}
.pro-gate .inline-register .title {
  font-weight:600; margin-bottom:8px; text-align:center;
}
.pro-gate .inline-register .grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));  /* no overflow */
  gap:8px;
  margin-bottom:10px;
}
@media (max-width: 700px){
  .pro-gate .inline-register .grid { grid-template-columns:1fr; }
}
.pro-gate .inline-register input {
  width:100%; box-sizing:border-box;
  padding:10px;
  border:1px solid #cbd5e1; border-radius:8px;
  font:inherit;
}
.pro-gate .inline-register #pro-reg-warn {
  margin-bottom:8px;
  color:#b91c1c;
}
.pro-gate .inline-register .actions {
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
}
.pro-gate .inline-register .btn-primary {
  padding:8px 12px; border-radius:6px; border:1px solid #2f6fb3;
  background:#5599cc; color:#fff; cursor:pointer;
}
.pro-gate .inline-register .btn-primary:disabled {
  opacity:.6; cursor:not-allowed;
}

/* Gate: hide the entire paywall section by default. Reveal only when the app marks body.pro-eligible */
#paywall-section { display: none; }
body.pro-eligible #paywall-section { display: block; }

#eti-auth-pop .verify-banner { margin-bottom: 10px; }

:root { --bleed-fix: 8px; }

#readiness-profile,
#business-readiness,
#pro-gate,
#paywall-section,
#about-paywall-content {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Styling for the new Readiness Profile section */
#dk-summary p {
  margin-bottom: 1rem;
}

.dk-breakdown {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e5e7eb;
}

.dk-breakdown h4, .resources-section h4 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  color: #374151;
  font-size: 1.1rem;
}

.dk-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid #f3f4f6;
}

.dk-item:last-child {
  border-bottom: none;
}

.dk-label {
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8rem;
}

.dk-label.well-calibrated { background-color: #d1fae5; color: #065f46; }
.dk-label.overconfident { background-color: #fee2e2; color: #991b1b; }
.dk-label.under-confident { background-color: #dbeafe; color: #1e40af; }

/* ============================================= */
/* == SUCCESS QUOTIENT (SQ) SECTION          == */
/* ============================================= */

.sq-section {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e5e7eb;
}

.sq-section h4 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  color: #374151;
  font-size: 1.1rem;
}

.sq-score-display {
  text-align: center;
  margin: 1rem 0;
}

.sq-pill {
  display: inline-block;
  font-weight: 600;
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  font-size: 1.1rem;
}

.sq-pill.sq-high { background-color: #d1fae5; color: #065f46; }
.sq-pill.sq-moderate { background-color: #fef3c7; color: #92400e; }
.sq-pill.sq-developing { background-color: #dbeafe; color: #1e40af; }
.sq-pill.sq-needs { background-color: #fee2e2; color: #991b1b; }

.sq-breakdown {
  margin: 1rem 0;
}

.sq-breakdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0;
}

.sq-breakdown-label {
  flex: 0 0 160px;
  font-size: 0.9rem;
  color: #374151;
}

.sq-breakdown-bar-container {
  flex: 1;
  height: 12px;
  background-color: #e5e7eb;
  border-radius: 6px;
  overflow: hidden;
}

.sq-breakdown-bar {
  height: 100%;
  border-radius: 6px;
  transition: width 0.3s ease;
}

.sq-breakdown-bar.sq-bar-high { background-color: #10b981; }
.sq-breakdown-bar.sq-bar-mid { background-color: #f59e0b; }
.sq-breakdown-bar.sq-bar-low { background-color: #ef4444; }

.sq-breakdown-value {
  flex: 0 0 45px;
  text-align: right;
  font-size: 0.9rem;
  font-weight: 600;
  color: #374151;
}

.sq-modifiers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0;
  justify-content: center;
}

.sq-modifier {
  font-size: 0.85rem;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
}

.sq-modifier.sq-penalty { background-color: #fee2e2; color: #991b1b; }
.sq-modifier.sq-bonus { background-color: #d1fae5; color: #065f46; }

.sq-explanation {
  font-size: 0.9rem;
  color: #6b7280;
  text-align: center;
  margin-top: 1rem;
}

.sq-explanation a {
  color: #5599cc;
}

.sq-not-available {
  color: #6b7280;
  font-style: italic;
  text-align: center;
}

@media (max-width: 600px) {
  .sq-breakdown-label {
    flex: 0 0 100px;
    font-size: 0.8rem;
  }
  .sq-breakdown-value {
    flex: 0 0 40px;
    font-size: 0.8rem;
  }
}

/* SQ Dashboard Tab Styles */
.sq-dashboard {
  display: grid;
  gap: 1.5rem;
}

.sq-score-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  padding: 1.5rem;
}

.sq-score-card h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  color: #374151;
}

.sq-updated {
  font-size: 0.85rem;
  color: #6b7280;
  text-align: center;
  margin-top: 1rem;
  margin-bottom: 0;
}

.sq-update-section {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  padding: 1.5rem;
  margin-bottom:25px;
}

.sq-update-section h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: #374151;
}

.sq-update-section > p {
  color: #6b7280;
  margin-bottom: 1rem;
}

.sq-form-section {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e5e7eb;
}

.sq-form-section:last-of-type {
  border-bottom: none;
}

.sq-form-section h4 {
  color: #5599cc;
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.sq-form-question {
  margin-bottom: 1.25rem;
}

.sq-form-question p {
  margin-bottom: 0.5rem;
}

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

.sq-form-option {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: #f9fafb;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}

.sq-form-option:hover {
  background: #f3f4f6;
}

.sq-form-option input[type="radio"] {
  margin-top: 3px;
  flex-shrink: 0;
}

.sq-form-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Adds a top border and spacing to the "Recommended Resources" header */
.resources-heading {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

.resources-section {
  margin-top: 1.5rem;
}

.resource-group {
  margin-bottom: 1rem;
}

.resource-group ul {
  list-style: disc;
  padding-left: 1.25rem;
  margin-top: 0.25rem;
}

.resource-group li {
  margin-bottom: 0.25rem;
}

#share-container .actions a,
#share-container .actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; 
  height: 52px;  
  margin-bottom: 40px;
  padding: 0;
  border-radius: 50%;
  background-color: #5599cc;
  transition: background-color 0.2s ease;
}

#share-container .actions svg {
  width: 28px;
  height: 28px; 
  fill: #ffffff; 
}

#share-container .actions a:hover {
  background-color: #ffffff;
}

#share-container .actions svg:hover {
  fill: #5599cc;
}

/* Center the PayPal block on all pages */
[id$="-pp-5645-wrap"] { 
  text-align: center; 
}

/* Center the table inside the PayPal block */
[id$="-pp-5645-wrap"] > table { 
  display: inline-table; 
  margin: 0 auto; 
}

/* Styling for the new Inline Auth Widget */
.inline-auth-widget {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 15px;
  background: #fff;
  position: relative;
  z-index: 5;
  width: 100%;
  box-sizing: border-box;
}
.inline-auth-widget .title {
  font-weight: 600;
  margin-bottom: 8px;
  text-align: center;
}
.inline-auth-widget .tabs {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
  color: #333;
  user-select: none;
}
.inline-auth-widget .tabs .sep {
  opacity: 0.5;
}
.inline-auth-widget .tabs .tab {
  cursor: pointer;
  font-weight: 600;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.inline-auth-widget .tabs .tab[aria-selected="true"] {
  color: #5599cc;
  border-bottom-color: #5599cc;
}
.inline-auth-widget .panel .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.inline-auth-widget .panel .grid.one {
    grid-template-columns: 1fr;
}
@media (max-width: 700px){
  .inline-auth-widget .panel .grid { grid-template-columns:1fr; }
}
.inline-auth-widget .panel input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font: inherit;
}
.inline-auth-widget .panel .warn {
  margin-bottom: 8px;
  color: #b91c1c;
  text-align: center;
  font-weight: 600;
}
.inline-auth-widget .panel .actions {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

/* Force centering and spanning for the inline auth widget */
#pro-gate .inline-auth-widget,
#about-paywall-content .inline-auth-widget {
  display: block;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: -10px;
}

/* Make the History toggle match our primary buttons */
#eti-history {
  background-color: #5599cc;
  color: #fff;
}
#eti-history:hover {
  background-color: #fff;
  color: #5599cc;
}

/* History rows: normal by default; bold when selected */
.history-link { font-weight: 400; }
.history-link.history-selected { font-weight: 700; }

/* Phones: shrink text & prevent horizontal cut-off in the history list */
@media (max-width: 480px) {
  #history-list {
    max-width: 100%;
    box-sizing: border-box;
    padding-right: 8px;         /* keep inside the screen edge */
    overflow-x: hidden;         /* no horizontal scroll */
  }
  #history-list .history-link {
    font-size: 0.95rem;
    line-height: 1.15;
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;        /* keep to one line */
    text-overflow: ellipsis;    /* show … if too long */
    overflow: hidden;
    max-width: calc(100% - 96px); /* leave room for the Delete button inline */
  }
  #history-list .history-delete {
    font-size: 0.85rem;
    padding: 6px 10px;          /* more compact button */
  }
}

/* ===== Tooltip Styles ===== */
.tooltip-container {
  position: relative;
  display: inline-block;
  cursor: help;
}

/* The actual tooltip text */
.tooltip-container .tooltip-text {
  visibility: hidden;
  width: 240px; /* A slightly wider default */
  max-width: 90vw; /* Prevent it from being wider than the screen */
  background-color: #222;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px;
  position: absolute;
  z-index: 100;
  bottom: 125%; 
  left: 50%;
  transform: translateX(calc(-50% - 30px));
  margin-left: 0;
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 0.9rem;
  font-weight: normal;
  line-height: 1.4;
}

/* Tooltip arrow */
.tooltip-container .tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #222 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* 'i' icon style for info tooltips */
.tooltip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  background-color: transparent;
  color: #555;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  font-style: italic;
  margin-left: 2px;
  vertical-align: middle;
  border: 2px solid #888;
  width: 20px;
  height: 20px;
  padding: 0;
  box-sizing: content-box;
}

/* === Final Styles for Menu Arrow & Tooltip (New Horizontal Design) === */

/* This wrapper aligns the "Menu" button and the arrow side-by-side */
#menu-wrapper {
  display: flex;
  align-items: center;
  gap: 4px; /* Adjusts the space between "Menu" and the arrow */
}

/* This is the container for the arrow and tooltip. It's the hover target. */
.tooltip-arrow-container {
  position: relative; /* Context for the tooltip text */
  width: 40px;      /* Width of the arrow shape */
  height: 40px;     /* Height of the arrow shape & hover area */
  cursor: help;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The visible, bouncing arrow element */
.tooltip-arrow {
  position: relative;
  width: 100%;
  height: 100%;
  transform: scale(0.5); /* Set the base scale for the arrow */
  animation: horizontal-bounce 1.5s infinite;
  will-change: transform;
}

/* Arrowhead (a left-pointing white triangle) */
.tooltip-arrow::before {
  content: '';
  position: absolute;
  left: 0; /* Aligns the point of the arrow to the left */
  top: 50%;
  transform: translateY(-50%);
  width: 0; 
  height: 0; 
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 20px solid white; /* Creates the left-pointing triangle */
}

/* Arrow stem (white) */
.tooltip-arrow::after {
  content: '';
  position: absolute;
  left: 20px; /* Attaches to the base of the arrowhead */
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 12px;
  background-color: white;
}

/* The tooltip text box, positioned below the topbar */
.tooltip-arrow-container .tooltip-text {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s;
  position: absolute;
  top: 45px; /* Pushes it down to clear the 64px topbar */
  left: 0; /* Aligns its left edge with the arrow's left edge */
  transform: none;
  width: 280px;
  background-color: #222;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 8px;
  font-size: 0.9rem;
  line-height: 1.4;
  z-index: 2002;
}

/* Shows the tooltip text when hovering the arrow's container */
.tooltip-arrow-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* The new horizontal bounce animation */
@keyframes horizontal-bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(0) scale(0.5);
  }
  40% {
    transform: translateX(-8px) scale(0.5);
  }
  60% {
    transform: translateX(-4px) scale(0.5);
  }
}

/* === PRO CTA styles (new) === */
.btn-pro {
  display: inline-block;
  padding: 9px 12px;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid #ffcf33;
  background: #FFC439; /* PayPal yellow */
  color: #111;
  cursor: pointer;
}
.btn-pro:hover { filter: brightness(0.97); }

/* When the user is Pro, pro-CTAs switch to standard primary */
body.has-pro .btn-pro {
  background: #5599cc;
  border-color: #5599cc;
  color: #fff;
}

/* === Generic blurred-content wrapper (heading outside stays visible) === */
.blur-wrap { position: relative; }
.blur-target { filter: blur(4px); user-select: none; pointer-events: none; }
.blur-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px; /* Reduced space between blurb and button */
  padding: 12px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(2px);
  text-align: center;
}
body.has-pro .blur-target { filter: none; pointer-events: auto; }
body.has-pro .blur-overlay { display: none; }

/* === Partner legend-like placeholder (below the chart) === */
#partner-chart-box {
  width: 100%;
  float: none;
  clear: both;
  margin-top: 10px;
  text-align: left;
}

.chart-legend-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #f3f4f6;       /* light grey pill */
  color: #666;
  border: 1px solid #e5e7eb;
}

.chart-legend-ghost .swatch {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: #d1d5db;       /* greyed-out swatch */
  border: 1px solid #bbb;
}

/* Keep the invite button visually distinct from Go-Pro (blue always) */
.btn-invite {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  background: #5599cc;
  color: #fff;
  border: 1px solid #2f6fb3;
}
.btn-invite:hover { filter: brightness(0.97); }

/* Make the partner blur overlay participate in layout so the card grows. */
#ideal-partner-block .blur-overlay {
  background: rgba(255,255,255,0.85);
  border: 1px solid #eee;
  border-radius: 10px;
  margin-top: 6px;
  padding: 12px;
}

#ideal-partner-block .blur-wrap { margin-bottom: 12px; } /* give it some breathing room */

.subtype-description { margin-bottom: -45px; } /* was larger by default */

/* --- Partner legend-style block under the radar chart --- */
.partner-legend-wrap{
  width: 100%;
  max-width: 520px;
  margin: 6px auto 0;
  text-align: left;
}

.partner-legend-wrap .legend-mimic{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #595959;
  opacity: .8;               /* looks "greyed" pre-Pro */
}

/* Go-Pro button look: PayPal yellow when not Pro; theme blue once Pro */
.btn-pro{
  display: inline-block;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 700;
  border: 1px solid #e0b000;
  background: #ffc439;   /* PayPal yellow */
  color: #111;
}
.has-pro .btn-pro{
  background: #5599cc;   /* theme blue for Pro users */
  border-color: #5599cc;
  color: #fff;
}

/* Center/tighten the right-side Invite button */
#invite-partner-btn{
  display: block;
  margin: 10px auto 0;
}

.partner-legend-wrap, .user-legend-wrap {
  width: 100%;
  max-width: 540px;
  margin: 8px auto;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.partner-legend-wrap .legend-mimic,
.user-legend-wrap .legend-mimic {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #f3f4f6;
  color: #333;
  border: 1px solid #e5e7eb;
  font-size: 14px;             /* match the bigger size you wanted */
}

.partner-legend-wrap .legend-mimic .swatch,
.user-legend-wrap .legend-mimic .swatch {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid #bbb;
  position: relative;      /* needed for the ::after checkmark */
  display: inline-block;
  vertical-align: -1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  color: #fff;
}

.partner-legend-wrap .btn-pro,
.user-legend-wrap .btn-pro {
  margin-top: 8px;
}

/* When a dataset is visible, checkbox shown next to the legend text — styled consistently */
.partner-legend-wrap input[type="checkbox"],
.user-legend-wrap input[type="checkbox"] {
  transform: translateY(-1px);
}

/* Chart + legends unified wrapper — center & allow wide desktops */
#chart-legend-container {
  width: 100%;
  max-width: 100%; /* Ensures the container never exceeds its parent's width */
  margin: 0 auto;
  display: grid;
  place-items: center;
}

/* center the invite button under the partner blurb */
button.btn-invite {
  display: block;
  margin: 12px auto 0;
}

/* Checkmark inside legend swatches (shown only when aria-checked="true") */
.legend-mimic .swatch::after {
  content: "✓";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -58%);
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  color: #fff;               /* stays visible on black/blue swatches */
  opacity: 0;                /* hidden by default */
  pointer-events: none;
}
.legend-mimic .swatch[aria-checked="true"]::after {
  opacity: 1;                /* show ✓ when ON */
}

/* Attribute Details paywall overlay */
#attr-details-wrap { position: relative; }

#attr-details-wrap .blur-overlay {
  position: absolute;
  inset: 0;                 /* cover the blurred details area */
  display: none;            /* JS will flip to flex when open + non-Pro */
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  /* optional: lightly dim the area for contrast, comment out if you prefer pure blur */
  /* background: rgba(255,255,255,0.65); */
}

#attr-details-wrap .blur-overlay { 
  display: none;
}

#attr-details-wrap .blur-overlay p {
  margin: 0;
}

#attr-details-wrap .blur-overlay,
#attr-details-wrap .blur-overlay p,
#attr-details-wrap .blur-overlay button {
  /* stack blurb + button together, nicely spaced */
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

/* Ensure the details take the full width inside the wrapper */
#attribute-details { width: 100%; }

/* === PAYWALL OVERLAY: center + tight spacing (no display override) === */
#attr-details-wrap .blur-overlay,
#resources-wrap .blur-overlay {
  justify-items: center;   /* works for grid/flex without forcing display */
  align-content: center;
  text-align: center;
  gap: 6px;
}
#attr-details-wrap .blur-overlay p,
#resources-wrap .blur-overlay p { margin: 0; line-height: 1.25; }
#attr-details-wrap .blur-overlay .btn-pro,
#resources-wrap .blur-overlay .btn-pro { margin: 0; }

/* Ensure Pros don't see the overlay even if other rules set display */
body.has-pro #attr-details-wrap .blur-overlay,
body.has-pro #resources-wrap .blur-overlay { display: none !important; }

/* Strategic Roadmap per-phase CTA */
.strategy-guide .phase-cta {
  display: flex;
  justify-content: center;
  margin: 8px 0 24px;
}

/* Phase spacing - add margin above each phase block except first */
.phase-block + .phase-block {
  margin-top: 1.5rem;
  border-top: 2px solid #ccc;
}

/* Step headers - slightly larger but not as large as phase headers */
.phase-block h5 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.phase-block h5 + h5 {
  margin-bottom: -0.25rem;
}

/* Task headers - indented once */
.phase-block h6 {
  margin-left: 2rem;
  font-size: 1rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Paragraphs - base styling */
.phase-block p {
  font-size: 0.9rem;    
  margin: 10px 0;
}

/* Paragraphs under task headers - indented once */
.phase-block h6 + p {
  margin-left: 2rem;
}

/* Bullets - base styling */
.strategy-guide .phase-block ul {
  font-size: .9rem;
  margin: 6px 0 12px 0px;
}

/* Bullets under task headers - indented twice */
.phase-block h6 ~ ul,
.phase-block p + ul {
  margin-left: 2.5rem;
}

/* === Action Panel: History list (spacing, zebra, selection, delete) === */
:root {
  --history-row-h: 30px;   /* row height */
  --history-gap-top: 5px; /* tighter gap between buttons and list */
}

#history-wrap { margin-top: var(--history-gap-top); }
#history-title { margin: 0 0 6px 0; font-weight: 700; }

/* show exactly 5 rows without scrolling; 6+ will scroll */
#history-scroll {
  max-height: calc(var(--history-row-h) * 5);
  overflow-y: auto;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
}

/* each row contains the link + (conditionally visible) delete button */
#history-list .history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: var(--history-row-h);
  padding: 0 12px;                     /* no added top/btm space */
  line-height: 1.3;
}

/* zebra striping */
#history-list .history-row:nth-child(odd)  { background: #fff; }
#history-list .history-row:nth-child(even) { background: #f8fbff; }

/* selected row highlight (match your blue theme) */
#history-list .history-row.is-selected {
  background: #e8f2ff;
  font-weight: 700;
}

/* clickable label */
#history-list .history-link {
  flex: 1;
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 8px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* small red delete shown only on selected, non-latest rows */
#history-list .history-delete {
  display: none;
  background: #dc2626;
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 12px;
  cursor: pointer;
  margin-top: -2rem;
  margin-right: 15px;
  margin-bottom: -2rem;
}
#history-list .history-row.is-selected:not([data-latest="1"]) .history-delete {
  display: inline-block;
}

/* Hide per-row delete by default */
#history-list .history-delete { display: none; }

/* (Optional) If you want CSS to also handle visibility whenever a link is selected) */
#history-list .history-link.history-selected ~ .history-delete { display: inline-block; }

/* phones: keep row inline and tighten spacing so Delete fits */
@media (max-width: 560px) {
  /* prevent right-edge cut-off while keeping scroll area width-safe */
  #history-scroll {
    max-width: 100%;
    box-sizing: border-box;
    padding-right: 8px;
    overflow-x: hidden;
  }

  #history-list .history-row {
    flex-direction: row;      /* stay inline on phones */
    align-items: center;
    padding: 6px 12px;
    gap: 8px;
  }

  /* shrink the link slightly and keep it on one line */
  #history-list .history-link {
    font-size: 0.95rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* shrink the Delete button and neutralize the negative margins on phones */
  #history-list .history-delete {
    font-size: 11px;
    padding: 2px 8px;
    margin: 0 8px 0 8px;        /* kill margin-top/-bottom:-2rem and the big right margin */
    align-self: center;       /* vertical centering in the row */
  }
}

/* --- Styles for Password Toggle Icon (High Specificity Version) --- */

/* The wrapper MUST be a positioning context */
.password-toggle-wrap {
  position: relative !important;
  width: 100%;
}

/* Force ALL password fields to have padding for the icons */
input[type="password"],
.password-toggle-wrap input[type="text"] {
  /* This padding creates the space inside the field */
  padding-right: 35px !important;
}

/* Force the icon to be positioned absolutely inside the wrapper */
.password-toggle-wrap .password-toggle-icon {
  position: absolute !important;
  display: inline-flex !important; /* Overrides the global "display: block" on buttons */
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important; /* Override global button margins */
  padding: 0 !important;
  cursor: pointer !important;
  background: transparent !important;
  border: 0 !important;
  color: #374151 !important;
  z-index: 10 !important;
}

/* Override any global button hover effects */
.password-toggle-wrap .password-toggle-icon:hover {
  background: transparent !important;
  color: #000 !important;
}

.password-toggle-wrap .password-toggle-icon svg {
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* --- New Labeled Grid Styles --- */

/* Main wrapper for labels and the grid itself */
.labeled-grid-wrapper {
    display: grid;
    /* Columns: 1 for row labels, 4 for persona cells */
    grid-template-columns: 80px repeat(4, 1fr);
    align-items: center;
    margin: 2rem auto;
    max-width: 1200px;
}

/* Container for the top column labels */
.col-labels-container {
    /* Span it across the 4 persona columns */
    grid-column: 2 / 6;
    display: flex;
    justify-content: space-around;
    padding-bottom: 1rem;
}

.grid-col-label {
    font-size: 1.1rem;
    font-weight: 600;
    color: #374151;
    text-align: center;
    flex: 1;
}

/* The main container holding all the rows */
.master-grid-container {
    grid-column: 1 / 6; /* Span all columns */
}

/* Each row is a flex container */
.grid-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* The container for the rotated row labels */
.grid-row-label {
    flex: 0 0 80px; /* Fixed width to match the grid column */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: #374151;
    height: 100%;
}

/* The span inside gets rotated for better centering control */
.grid-row-label span {
    display: block;
    transform: rotate(-45deg);
    white-space: nowrap;
}

/* Each persona cell inside a row */
.person-cell {
    flex: 1;
    min-width: 0; /* Important for flexbox shrinking */
}

/* --- Responsive Adjustments --- */
@media (max-width: 1024px) {
    /* On smaller screens, hide the new labels for simplicity */
    .col-labels-container,
    .grid-row-label {
        display: none;
    }

    /* Revert the wrapper to a simple block container */
    .labeled-grid-wrapper {
        display: block;
    }
    
    /* Let the original flex-wrap logic take over for the grid */
    .grid-row {
        display: contents; /* Makes the row container "disappear" so cells wrap directly */
    }
    
    /* Use the cover-person-grid class from the old enforcer script to wrap items */
    .master-grid-container {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }

    .person-cell {
        /* 2 columns on tablet */
        flex: 1 1 calc(50% - 12px);
    }
}

@media (max-width: 640px) {
    .person-cell {
        /* 1 column on mobile */
        flex: 1 1 100%;
    }
}

/* This is the new hover target for the 'i' icon */
.info-tooltip-container {
  position: relative; /* Establishes the positioning context for the tooltip */
  display: flex;
  align-items: center;
  cursor: help;
}

/* 1. This rule hides the tooltip by default. */
.info-tooltip-container .tooltip-text {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s;
  position: absolute;
  top: 45px; /* Position below the 64px topbar */
  left: 0;
  width: 280px;
  background-color: #222;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 8px;
  font-size: 0.9rem;
  line-height: 1.4;
  z-index: 2002;
  pointer-events: none; /* Prevents the tooltip from interfering with the cursor */
}

/* 2. This rule shows the tooltip when you hover over the icon's container. */
.info-tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* Nudges for topbar menu arrow and icon alignment */
#menu-wrapper {
  /* This prevents the arrow and icon from wrapping to a new line on smaller screens */
  flex-wrap: nowrap;
}

.tooltip-arrow {
  /* This restores the 40px area the arrow used to occupy, fixing its size */
  width: 40px;
  height: 40px;
  flex-shrink: 0; /* Prevents the flex container from squishing it */
}

.info-tooltip-container {
  /* This nudges the 'i' icon down slightly to visually center it with the arrow */
  transform: translateY(2px);
}

/* === Concise Download Centering (scoped) === */
#concise-download { display:flex; justify-content:center; }
#concise-download .btn { display:inline-flex; }

/* Hide the download button container by default */
#concise-download {
    display: none;
    text-align: center; /* Center the button inside */
    margin-top: 1rem;
}

/* ONLY show the download button when the results slide itself is visible */
.slide#results-slide[style*="display: block"] #concise-download {
    display: block;
}

/* === Testimonials carousel (no card wrapper) === */
#testimonials { margin-top: 16px; }

#testimonials .t-track::-webkit-scrollbar{ display:none; }

#testimonials .t-slide{
  scroll-snap-align: center;
  scroll-snap-stop: always;
  padding: 8px 12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
}

#testimonials .t-avatar{
  width:56px; height:56px; border-radius:50%;
  object-fit:cover; display:block;
}
#testimonials .t-quote{ font-size:1rem; line-height:1.5; font-style:italic; margin:0; }
#testimonials .t-name{ font-weight:600; font-size:.95rem; opacity:.9; }
#testimonials .t-website-btn{ transition: background 0.2s ease, transform 0.1s ease; }
#testimonials .t-website-btn:hover{ background:#3d7ab8 !important; transform: translateY(-1px); }

/* reuse the exact dot look from the framework carousel */
#testimonials .fwk-dots{
  display:flex; justify-content:center; align-items:center;
  gap:6px; margin-top:12px;
}
#testimonials .fwk-dots button{
  width:10px; height:10px; border-radius:999px; border:0; cursor:pointer;
  background:#d7dfeb; padding:0; margin:0;
}
#testimonials .fwk-dots button.active{ background:#5599cc; }

/* If we ever nest it inside .results-grid, span full width */
.results-grid #feedback-card{ grid-column:1 / -1; }

/* Center feedback forms inside the Results section */
#feedback-card #feedback-forms{
  width: 100%;
  max-width: 100%;
  margin: 0 auto;               /* centers the whole form block */
  display: grid;
  justify-items: center;         /* centers all child rows */
  gap: 12px;
}

/* center tables/grids inside the form */
#feedback-card .likert-table,
#feedback-card .mismatch-table{
  margin-left: auto;
  margin-right: auto;
}

/* center the submit row */
#feedback-card .feedback-actions{
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* --- Footer Sponsorship Section --- */
#sponsorship-info {
    background-color: #f0f8ff; /* Light AliceBlue background */
    border: 1px solid #b0e0e6; /* PowderBlue border */
    border-radius: 8px;
    padding: 20px;
    margin-top: 15px;
    color: #333; /* Darker text for readability */
    grid-column: 1 / -1; /* Ensure it spans footer grid columns */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

#sponsorship-info h2,
#sponsorship-info h3 {
    color: #4682b4; /* SteelBlue headings */
    margin-top: 0;
    margin-bottom: 10px;
}

#sponsorship-info ul {
    margin-bottom: 15px;
    padding-left: 20px;
}

#sponsorship-info li {
    margin-bottom: 5px;
}

#sponsorship-info a {
    color: #5599cc; /* ETI blue for links */
    text-decoration: underline;
}

#sponsorship-info button {
  display: inline-block; /* Allow it to sit nicely */
  margin: 15px 0 0 0; /* Remove default auto margins */
  padding: 8px 16px;
  font-size: 0.9rem;
  background-color: #e7e7e7; /* Lighter gray */
  color: #333;
  border: 1px solid #ccc;
  border-radius: 6px;
  cursor: pointer;
}
#sponsorship-info button:hover {
    background-color: #dcdcdc; /* Slightly darker gray on hover */
}

/* Show the feedback card only when the Results slide is actually visible */
.slide#results-slide[style*="display: block"] #feedback-card { 
  display: block; 
}

/* Keep the styling, but don't force display globally */
#feedback-card {
    max-width: 100%;
    margin: 0;
    padding: 1rem !important;
    border-radius: 8px !important;
    box-shadow: 0 0 6px rgba(0,0,0,0.05) !important;
    background: #ffffff !important;
    margin-top: 1rem !important;
    margin-bottom: 1.5rem !important;
}

/* 3. Ensure internal text centering (This was already in the previous fix) */
#feedback-card h3, 
#feedback-card p {
    text-align: center !important;
}

/* 4. Ensure the immediate container for the actions and dynamic content is also centered */
#feedback-card #feedback-quick-actions,
#feedback-card #fb-dynamic {
    max-width: 860px !important; 
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ============================================= */
/* == BEGIN ADMIN PORTAL STYLES (v4 - H-Tabs) == */
/* ============================================= */

/* Feedback Review table fit */
#admin-feedback-table { width: 100%; }
#admin-feedback-table th,
#admin-feedback-table td { overflow: hidden; text-overflow: ellipsis; }

/* Let comments wrap so the row fits */
#admin-feedback-table td:nth-child(3) { white-space: normal; word-break: break-word; }

/* --- Horizontal "Folder Tab" Navigation --- */
/* We use the page ID for high specificity to prevent overrides */
/* Applies to admin, user dashboards, and help center */
section[id^="page-admin-"] .admin-folder-tabs,
section#page-user-dashboard .admin-folder-tabs,
section#page-help .admin-folder-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 0 1rem;
    border-bottom: none; /* Remove border - content area handles it */
    margin-top: 1rem;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
}

section[id^="page-admin-"] .admin-folder-tab,
section#page-user-dashboard .admin-folder-tab,
section#page-help .admin-folder-tab {
    padding: 10px 18px;
    font-size: 1rem;
    font-weight: 600;
    color: #374151; /* Default tab color */
    background: #f3f4f6; /* Inactive tab background */
    border: 1px solid #d1d5db;
    border-bottom: 1px solid #d1d5db; /* Bottom border for inactive tabs */
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    position: relative;
    margin-bottom: -1px; /* Overlap with content border */
    transition: all 0.2s ease;
}
section[id^="page-admin-"] .admin-folder-tab:hover,
section#page-user-dashboard .admin-folder-tab:hover,
section#page-help .admin-folder-tab:hover {
    background: #f9fafb;
    color: #111827;
}
section[id^="page-admin-"] .admin-folder-tab.active,
section#page-user-dashboard .admin-folder-tab.active,
section#page-help .admin-folder-tab.active {
    background: #ffffff; /* Active tab is white */
    color: #5599cc; /* ETI blue */
    border-color: #d1d5db;
    border-bottom-color: #ffffff; /* White bottom to blend with content */
    box-shadow: 0 -2px 4px rgba(0,0,0,0.03);
}

/* --- Tab Content Area (The "Folder") --- */
section[id^="page-admin-"] .admin-folder-content,
section#page-user-dashboard .admin-folder-content,
section#page-help .admin-folder-content {
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 0 0 12px 12px;
    padding: 1.5rem;
    min-height: 60vh;
    box-shadow: 0 3px 6px rgba(0,0,0,0.04);
    position: relative;
    margin-bottom: 2rem;
}
section[id^="page-admin-"] .admin-tab-panel,
section#page-user-dashboard .admin-tab-panel,
section#page-help .admin-tab-panel {
    display: none;
}
section[id^="page-admin-"] .admin-tab-panel.active,
section#page-user-dashboard .admin-tab-panel.active,
section#page-help .admin-tab-panel.active {
    display: block;
}

/* --- NEW: Inline Edit Row ("Distinguished Space") --- */
.admin-table .admin-edit-row td {
    background-color: #f0f7ff !important; /* Light blue background */
    padding: 1rem 1.5rem !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
    /* Remove bottom border to blend with the row below */
    border-bottom: none; 
}
/* Ensure the row *above* the edit row also loses its bottom border */
.admin-table tr.editing-user + tr.admin-edit-row > td {
    border-top: 1px solid #bce0ff; /* Add a top border to the blue box */
}
.admin-table tr.editing-user > td {
    border-bottom-color: #f0f7ff; /* Match the blue bg */
}

.admin-edit-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem; /* More spacing */
    justify-content: space-between;
}
.admin-edit-form .form-group {
    flex: 1 1 200px; /* Allow fields to grow */
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.admin-edit-form .form-group label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
}
.admin-edit-form .form-group select,
.admin-edit-form .form-group input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
}
.admin-edit-form .actions-group {
    flex: 0 0 auto; /* Don't grow */
    display: flex;
    gap: 8px;
    padding-top: 1.25rem; /* Align with form labels */
}
/* --- END: Inline Edit Row --- */

/* --- NEW: Search Bar --- */
.admin-search-bar {
    margin-bottom: 1rem;
}
.admin-search-bar input {
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
}

/* --- Admin Table Styling ("Spreadsheet" Look) --- */
.admin-table-wrapper {
    width: 100%;
    max-width: 100%; 
    margin: 1rem auto; 
    border: 1px solid #d1d5db; 
    border-radius: 8px;
    overflow-x: auto; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    /* NEW: Set max-height for sticky headers to work */
    max-height: 70vh;
    position: relative;
}
.admin-table {
    width: 100%;
    border-collapse: collapse;
    /* table-layout: fixed; */ /* Removed for flexibility */
}
.admin-table th {
    /* NEW: Sticky Headers */
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    z-index: 10;
}
.admin-table th,
.admin-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
    /* overflow: hidden; */ /* Removed to prevent cutting off content */
    /* text-overflow: ellipsis; */ /* Removed */
}
.admin-table th {
    background-color: #f9fafb;
    font-weight: 600;
    color: #374151;
    border-bottom-width: 2px;
    border-bottom-color: #d1d5db;
}
.admin-table tbody tr {
    background-color: #ffffff !important;
}
.admin-table tbody tr:nth-child(even) {
    background-color: #f9fafb !important;
}
.admin-table .actions-cell {
    width: 150px; 
    text-align: right;
    white-space: nowrap;
}
.admin-table .title-cell {
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Admin Forms (Create Portal) --- */
.admin-form-grid {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto;
    gap: 10px;
    align-items: center;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1rem;
}
.admin-form-grid input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
}
.admin-form-grid label {
    font-weight: 600;
}

/* --- Admin Modal (Legacy, just in case) --- */
.admin-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9990;
    display: flex;
    align-items: center;
    justify-content: center;
}
.admin-modal {
    background: #fff;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    width: 90%;
    max-width: 500px;
    z-index: 9991;
}
.admin-modal h3 {
    margin-top: 0;
}
.admin-modal .form-group {
    margin-bottom: 1rem;
}
.admin-modal .form-group label {
    display: block;
    margin-bottom: 0.3rem;
    font-weight: 600;
}
.admin-modal .form-group input,
.admin-modal .form-group select {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
}
.admin-modal .modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 1.5rem;
}

/* ============================================= */
/* == END ADMIN PORTAL STYLES                 == */
/* ============================================= */

#back-to-top-btn {
    display: none;
    position: fixed;
    bottom: 100px;
    right: 15px;
    z-index: 9990;
    width: 42px;
    height: 42px;
    background-color: #5599cc;
    color: white;
    border: none;
    border-radius: 50%; /* "enclosed by a circle" */
    padding: 0;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    text-decoration: none;
    
    /* Center the icon */
    align-items: center;
    justify-content: center;
}

#back-to-top-btn svg {
    width: 22px;
    height: 22px;
}

/* The "Radiating Circle" Pulse */
#back-to-top-btn::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background-color: #5599cc;
    border-radius: 50%;
    animation: radiatingPulse 2.2s infinite ease-out;
}

#back-to-top-btn:hover {
    background-color: #4a7eb3;
    color: white;
}

#back-to-top-btn:hover::before {
    animation-play-state: paused;
}

/* Keyframes for the new pulse */
@keyframes radiatingPulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.7;
    }
    100% {
        transform: translate(-50%, -50%) scale(2.5); /* "radiating circle growing" */
        opacity: 0;
    }
}

/* ============================================= */
/* == BEGIN TICKET SYSTEM STYLES            == */
/* ============================================= */

/* --- Ticket Status Pills --- */
.ticket-status {
    display: inline-block;
    padding: 4px 10px;
    font-size: 0.85em;
    font-weight: 600;
    border-radius: 999px;
    white-space: nowrap;
    text-transform: capitalize;
}
.ticket-status-open {
    background-color: #dbeafe; /* Light Blue */
    color: #1e40af; /* Dark Blue */
}
.ticket-status-closed {
    background-color: #f3f4f6; /* Light Gray */
    color: #4b5563; /* Dark Gray */
}

/* ============================================= */
/* == BEGIN COOKIE CONSENT STYLES           == */
/* ============================================= */

#eti-cookie-consent-banner {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    width: 90%;
    max-width: 380px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 10000;
    font-size: 0.95rem;
    line-height: 1.5;
    transform: translateY(200%);
    transition: transform 0.5s ease-in-out;
}

#eti-cookie-consent-banner.show {
    transform: translateY(0);
}

.cookie-banner-content {
    padding: 1.25rem;
}

.cookie-banner-content p {
    margin: 0 0 1rem 0;
}

.cookie-banner-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
}

.cookie-banner-actions .btn-cookie {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}

.cookie-banner-actions .btn-cookie-primary {
    background: #5599cc;
    color: #fff;
}

.cookie-banner-actions .btn-cookie-secondary {
    background: #f1f1f1;
    color: #333;
}

/* Modal for Preferences */
#cookie-prefs-modal {
    display: none; /* Hidden by default */
    background: #fff;
    border-radius: 12px;
    flex-direction: column;
}

#cookie-prefs-modal.show {
    display: flex;
}

.cookie-modal-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #eee;
}

.cookie-modal-header h4 {
    margin: 0;
}

.cookie-modal-body {
    flex-grow: 1;
    padding: 1.25rem;
    overflow-y: auto;
}

.cookie-modal-body p {
    margin: 0 0 1rem 0;
    font-size: 0.9rem;
    color: #555;
}

.cookie-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f1f1f1;
}
.cookie-toggle:last-child {
    border-bottom: none;
}

.cookie-toggle label {
    font-weight: 600;
    margin-right: 1rem;
}

.cookie-toggle .switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.cookie-toggle .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cookie-toggle .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}

.cookie-toggle .slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

.cookie-toggle input:checked + .slider {
    background-color: #5599cc;
}

.cookie-toggle input:checked + .slider:before {
    transform: translateX(20px);
}

.cookie-toggle input:disabled + .slider {
    background-color: #e9e9e9;
    cursor: not-allowed;
}
.cookie-toggle input:disabled + .slider:before {
    background-color: #f9f9f9;
}


.cookie-modal-footer {
    padding: 1rem;
    border-top: 1px solid #eee;
}

/* ============================================= */
/* == UNIFIED PROGRESS BAR                   == */
/* ============================================= */

#eti-unified-progress {
    max-width: 900px;
    margin: 2.5rem auto 2.5rem auto;
    padding: 0 1rem;
}

.eti-progress-parts {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.eti-progress-part {
    flex: 1;
    text-align: center;
    padding: 0.25rem 0.5rem;
    transition: all 0.3s ease;
}

.eti-progress-part .part-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    color: #737373;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.eti-progress-part .part-title {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: #666;
    margin-top: 2px;
}

.eti-progress-part.active .part-label,
.eti-progress-part.active .part-title {
    color: #5599cc;
}

.eti-progress-part.completed .part-label,
.eti-progress-part.completed .part-title {
    color: #22c55e;
}

.eti-progress-track {
    position: relative;
    height: 8px;
    background-color: #e0e0e0;
    border-radius: 4px;
    overflow: visible;
}

.eti-progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, #5599cc 0%, #77bbee 100%);
    border-radius: 4px;
    transition: width 0.4s ease-out;
}

.eti-progress-markers {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    pointer-events: none;
}

.eti-progress-marker {
    position: absolute;
    top: -4px;
    width: 2px;
    height: 16px;
    background-color: #ccc;
    transform: translateX(-50%);
}

.eti-progress-marker.reached {
    background-color: #5599cc;
}

/* Mobile responsiveness for unified progress bar */
@media (max-width: 768px) {
    .eti-progress-part .part-title {
        display: none;
    }

    .eti-progress-part .part-label {
        font-size: 0.65rem;
    }

    #eti-unified-progress {
        margin-bottom: 1.5rem;
    }
}

@media (max-width: 480px) {
    .eti-progress-part .part-label {
        font-size: 0.6rem;
    }
}

/* ============================================= */
/* == QUIZ PROGRESS BAR REFINEMENTS (LEGACY) == */
/* ============================================= */

#quiz-progress-container {
    margin-top: 15px;  /* Nudges the bar down 15px */
    position: relative;
    padding-bottom: 1.2rem; /* Makes space underneath for the label */
}

#quiz-progress {
    width: 100%;
    height: 8px;
    border: none;
    background-color: #e0e0e0;
    border-radius: 4px; /* Optional: adds rounded corners */
}

#quiz-progress-label {
    position: absolute;
    left: 0;
    top: 100%;        /* Positions label directly below the container */
    margin-top: -8px;
    font-size: 0.8rem;
    color: #555;
}

/* --- WebKit (Chrome, Safari, Edge) --- */
#quiz-progress::-webkit-progress-bar {
    background-color: #e0e0e0;
    border-radius: 4px;
}

#quiz-progress::-webkit-progress-value {
    background-color: #5599cc; /* Your desired color */
    border-radius: 4px;
}

/* --- Firefox --- */
#quiz-progress::-moz-progress-bar {
    background-color: #5599cc; /* Your desired color */
    border-radius: 4px;
}

/* center the whole block */
#pp-5645-wrap {
    text-align: center;
}

/* center the table itself */
#pp-5645-wrap>table {
    display: inline-table;
    margin: 0 auto;
}

/* center labels + selects and keep spacing */
#pp-5645-wrap td {
    text-align: center;
}

#pp-5645-wrap select {
    margin-top: 8px;
    margin-bottom: 12px;
}

/* Prevent hard-refresh FOUC; reveal when app is ready */
html:not([data-eti-ready]) section[id^="page-"]:not(#page-home) {
    display: none;
}

html:not([data-eti-ready]) #page-home { display:block; }

/* 1. Hide the body by default to prevent content flash */
html:not([data-eti-ready]) body {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear 0.3s, opacity 0.3s ease-in-out;
}

/* 2. When the 'eti-ready' class is added, make the body visible */
body.eti-ready {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

/* 3. Style for the loading spinner */
#eti-loader {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    /* Light grey */
    border-top: 5px solid #5599cc;
    /* Blue */
    border-radius: 50%;
    z-index: 10001;
    /* Ensure it's on top of everything */
    animation: spin 1s linear infinite;
    transition: opacity 0.3s ease-in-out;
}

/* 4. Hide the loader when the body is ready */
body.eti-ready #eti-loader {
    opacity: 0;
    pointer-events: none;
    /* Make it unclickable */
}

/* 5. The spinning animation */
@keyframes spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Generic admin-folder-tab styles removed - using specific selectors in section above */
/* ============================================= */
/* == ADMIN TABLE RESPONSIVENESS (CARD-STACK) == */
/* ============================================= */

@media (max-width: 768px) {
    /* This rule targets tables ONLY inside admin pages */
    section[id^="page-admin-"] .admin-table-wrapper {
        overflow-x: hidden;
        border: none;
        box-shadow: none;
        max-height: none; /* Allow full height */
    }

    section[id^="page-admin-"] .admin-table {
        width: 100%;
        display: block;
        border-collapse: separate;
        border-spacing: 0 1rem; /* Creates space between "cards" */
    }

    section[id^="page-admin-"] .admin-table thead {
        display: none; /* Hide table headers, we use labels */
    }

    section[id^="page-admin-"] .admin-table tbody {
        display: block;
        width: 100%;
    }

    section[id^="page-admin-"] .admin-table tr {
        display: block;
        width: 100%;
        box-sizing: border-box;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    /* Keep special rows (like headers/edit forms) looking normal */
    section[id^="page-admin-"] .admin-table tr.part-header,
    section[id^="page-admin-"] .admin-table tr.admin-edit-row {
        display: table-row;
        border: none;
        box-shadow: none;
        border-radius: 0;
    }
    section[id^="page-admin-"] .admin-table tr.admin-edit-row td {
        display: table-cell;
    }
    section[id^="page-admin-"] .admin-table tr.part-header td {
        display: table-cell;
        padding: 10px 14px;
    }

    section[id^="page-admin-"] .admin-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: right;
        padding: 12px 14px;
        padding-left: 45%; /* Make room for the label */
        position: relative;
        white-space: normal; /* Allow text to wrap */
        border-bottom: 1px solid #e5e7eb;
    }

    section[id^="page-admin-"] .admin-table tr.admin-edit-row td {
        padding-left: 1.5rem !important; /* Reset padding for edit row */
    }

    section[id^="page-admin-"] .admin-table td:last-child {
        border-bottom: none;
    }

    section[id^="page-admin-"] .admin-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 14px;
        top: 12px;
        width: calc(45% - 24px); /* (Padding-left) - (left-padding) - (right-padding) */
        text-align: left;
        font-weight: 600;
        color: #374151;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Actions cell doesn't need a label and should stay right-aligned */
    section[id^="page-admin-"] .admin-table .actions-cell {
        text-align: right;
        padding-left: 14px; /* Reset padding */
        border-top: 1px solid #f3f4f6;
    }
    section[id^="page-admin-"] .admin-table .actions-cell::before {
        content: "";
        display: none;
    }
}

.collapsible-header {
  cursor: pointer;
  user-select: none;
}

.collapsible-header:hover {
  opacity: 0.8;
}

.toggle-icon {
  display: inline-block;
  width: 1em;
  margin-right: 0.5em;
  font-size: 0.8em;
  transition: transform 0.2s;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-variant-emoji: text;
}

.phase-content,
.step-content,
.task-content {
  display: block;
  margin-left: 1.5em;
}

.discipline-header {
  margin-top: 1.5rem;
  padding: 0.5rem 0.75rem;
  border-left: 4px solid;
  font-weight: 600;
}

.discipline-ol {
  border-left-color: #5599cc;
  background-color: #f0f5fa;
}

.discipline-mr {
  border-left-color: #28a745;
  background-color: #f0f9f4;
}

.discipline-ps {
  border-left-color: #ffc107;
  background-color: #fffbf0;
}

.discipline-la {
  border-left-color: #dc3545;
  background-color: #fdf0f2;
}

.disciplines-container {
  display: flex;
  gap: 0;
  margin: 1.5rem 0;
  min-height: 400px;
  width: 100%;             /* FIX: Force container to respect page width */
  overflow: hidden;        /* FIX: Cut off anything that tries to spill */
  box-sizing: border-box;
  border-radius: 8px;      /* Optional: looks nicer */
}

.discipline-bar {
  flex: 0 0 2.5rem;
  position: relative;
  border: 1px solid #ddd;
  cursor: pointer;
  transition: flex 0.4s ease; /* Smooth out the animation */
  overflow: hidden;           /* FIX: Vital for containing the spill */
  background: #fff;
  transform: translate3d(0,0,0); /* FIX: Prevents painting flashes on some browsers */
}

.discipline-bar:hover {
  opacity: 0.9;
}

.discipline-bar.active {
  flex: 1 1 auto;
}

.discipline-label {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  z-index: 1;
}

.discipline-content {
  margin-left: 2.5rem;
  padding: 1rem 1.5rem;
  overflow-y: auto;
  max-height: 600px;
  
  /* FIXES FOR THE FLASH/SPILL: */
  width: calc(100% - 2.5rem); /* Constrain width to remaining space */
  min-width: 300px;           /* Prevent content from squashing too thin during closing */
  box-sizing: border-box;
  word-wrap: break-word;      /* Force text to wrap */
  overflow-wrap: break-word; 
  animation: fadeInContent 0.5s ease-in-out;
}

@keyframes fadeInContent {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.discipline-ol {
  background-color: #FFF3E0;
}

.discipline-ol .discipline-label {
  background-color: #FF9800;
  color: white;
}

.discipline-mr {
  background-color: #F3E5F5;
}

.discipline-mr .discipline-label {
  background-color: #9C27B0;
  color: white;
}

.discipline-ps {
  background-color: #E8F5E9;
}

.discipline-ps .discipline-label {
  background-color: #4CAF50;
  color: white;
}

.discipline-la {
  background-color: #F9FBE7;
}

.discipline-la .discipline-label {
  background-color: #CDDC39;
  color: #333;
}

.discipline-bar h6 {
  margin-top: 1rem;
  font-weight: 600;
  color: #333;
}

.task-header {
  cursor: pointer;
  user-select: none;
  margin-top: 1rem;
  font-weight: 600;
  color: #333;
}

.task-header:hover {
  opacity: 0.8;
}

.task-content {
  margin-left: 1.5rem;
}

.roadmap-paywall {
  margin: 2rem 0;
  padding: 2rem;
  text-align: center;
  background: #f8f9fa;
  border: 2px solid #dee2e6;
  border-radius: 8px;
}

.roadmap-paywall p {
  margin-bottom: 1rem;
  font-size: 1.1rem;
  color: #495057;
}

.pro-only-step {
  opacity: 0.5;
}

input, select, textarea {
    font-size: 16px;
}

#sponsorship-info {
  box-sizing: border-box;
  padding: 16px 16px !important;
  margin: -10px auto 0 auto !important;
  max-width: 800px !important;
  width: calc(100% - 10px) !important;
}

#eti-footer .support {
  box-sizing: border-box;
  padding: 0 16px;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}

/* ====================================================== */
/* == MOBILE ROADMAP: Vertical Stack Only (No Style Changes) == */
/* ====================================================== */

@media (max-width: 768px) {
    /* 1. Pivot Main Container to Column */
    .disciplines-container {
        flex-direction: column;
        height: auto !important;
        min-height: 0;
        border: 1px solid #ddd;
        border-radius: 8px;
    }

    /* 2. Make Discipline Bars Full Width Rows */
    .discipline-bar {
        width: 100%;
        flex: 0 0 auto; /* Stop flex-growing */
        border-right: none;
        border-bottom: 1px solid #eee;
        transition: none;
    }
    .discipline-bar:last-child { border-bottom: none; }
    
    .discipline-bar.active { flex: 0 0 auto; }

    /* 3. Flip Colored Label to Horizontal Top Bar */
    .discipline-label {
        position: relative;
        top: auto; left: auto; bottom: auto;
        width: 100%;
        height: 50px; /* Standard touch height */
        writing-mode: horizontal-tb; /* Normal text direction */
        transform: none; /* Remove rotation */
        justify-content: flex-start;
        padding-left: 1.5rem;
        font-size: 1rem;
    }

    /* 4. Reset Content Area Position */
    .discipline-content {
        margin-left: 0; /* Remove desktop indentation */
        width: 100%;    /* Full width */
        max-width: 100%;
        padding: 1.5rem; /* Keep original padding */
        box-sizing: border-box; /* Prevent overflow */
        max-height: none; /* Let content grow */
        overflow: visible;
        
        /* Ensure hidden/shown state works with the vertical stack */
        display: none; 
    }

    /* Show content only when active */
    .discipline-bar.active .discipline-content {
        display: block;
    }
}

/* Share Text Selection Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.modal-content {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.modal-content h3 {
    margin-top: 0;
    margin-bottom: 1.5rem;
    text-align: center;
    color: #333;
}

.share-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.share-option {
    display: flex;
    align-items: flex-start;
    padding: 1rem;
    border: 2px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.share-option:hover {
    border-color: #007bff;
    background: #f8f9fa;
}

.share-option input[type="radio"] {
    margin-right: 1rem;
    margin-top: 0.25rem;
}

.share-option input[type="radio"]:checked + .option-preview {
    color: #007bff;
}

.option-preview strong {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 1.1rem;
}

.option-preview p {
    margin: 0;
    font-size: 0.9rem;
    color: #666;
}

.pro-badge {
    display: inline-block;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-weight: bold;
    margin-left: 0.5rem;
    vertical-align: middle;
}

.share-option.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.share-option.disabled:hover {
    border-color: #ddd;
    background: white;
}

.btn-secondary {
    background: #6c757d;
    color: white;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    margin-top: 1rem;
}

.btn-secondary:hover {
    background: #5a6268;
}

.platform-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    margin: 0;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    width: 100%;
}

.platform-btn:hover {
    background: #f9fafb;
    border-color: #5599cc;
    transform: translateY(-2px);
}

.platform-btn svg {
    flex-shrink: 0;
    color: #5599cc;
}

.platform-btn span {
    flex: 1;
    font-weight: 600;
    font-size: 16px;
    color: #0b0f19;
}

.platform-btn small {
    font-size: 12px;
    color: #6b7280;
    font-weight: normal;
}

/* Partnership Slideshow Modal */
.slideshow-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slideshow-container {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: -45px;
}

.slideshow-container img {
    max-width: 100%;
    max-height: 85vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.slideshow-close {
    position: absolute;
    top: 20px;
    right: 30px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    font-size: 40px;
    font-weight: 300;
    color: #333;
    cursor: pointer;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: all 0.2s ease;
    z-index: 10001;
}

.slideshow-close:hover {
    background: #fff;
    transform: scale(1.1);
}

.slideshow-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.slideshow-nav {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    font-size: 40px;
    font-weight: 300;
    color: #333;
    cursor: pointer;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: all 0.2s ease;
}

.slideshow-nav:hover {
    background: #fff;
    transform: scale(1.1);
}

.slideshow-counter {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    min-width: 60px;
}

.slideshow-download {
    background: #5599cc;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.slideshow-download:hover {
    background: #4a7fb8;
    transform: scale(1.05);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .slideshow-container {
        max-width: 95%;
        max-height: 95%;
    }

    .slideshow-container img {
        max-height: 80vh;
    }

    .slideshow-close {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        font-size: 30px;
    }

    .slideshow-nav {
        width: 50px;
        height: 50px;
        font-size: 50px;
    }

    .slideshow-prev {
        left: 10px;
    }

    .slideshow-next {
        right: 10px;
    }
}

/* ============================================= */
/* == GAME HUB STYLES                         == */
/* ============================================= */

/* Game Hub Page Layout */
#page-games .games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

/* Game Cards */
.game-card {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
    padding: 0;
}

.game-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.game-card-image {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.game-card-content {
    padding: 1.25rem;
}

.game-card-content h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    color: #1f2937;
}

.game-card-content p {
    margin: 0 0 0.75rem 0;
    color: #6b7280;
    font-size: 0.95rem;
    line-height: 1.5;
}

.game-card-content .badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.game-card-content .badge-free {
    background: #d1fae5;
    color: #065f46;
}

.game-card-content .badge-registered {
    background: #dbeafe;
    color: #1e40af;
}

.game-card-content .badge-pro {
    background: #fef3c7;
    color: #92400e;
}

.game-card .coming-soon-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 0.35rem 0.85rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Leaderboard Section */
#page-games .leaderboard-section {
    margin-top: 3rem;
}

.leaderboard-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.leaderboard-tab {
    padding: 0.5rem 1rem !important;
    font-size: 0.9rem !important;
    background: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
    color: #374151 !important;
}

.leaderboard-tab.active {
    background: #5599cc !important;
    border-color: #5599cc !important;
    color: #fff !important;
}

.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.leaderboard-table th,
.leaderboard-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

.leaderboard-table th {
    background: #f9fafb;
    font-weight: 600;
    color: #374151;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.leaderboard-table tr:hover td {
    background: #f9fafb;
}

.leaderboard-table .rank-1 td:first-child::before { content: "🥇 "; }
.leaderboard-table .rank-2 td:first-child::before { content: "🥈 "; }
.leaderboard-table .rank-3 td:first-child::before { content: "🥉 "; }

/* My Stats Section */
#page-games .stats-section {
    margin-top: 3rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.stat-card {
    background: #f9fafb;
    padding: 1.25rem;
    border-radius: 10px;
    text-align: center;
}

.stat-card .stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: #5599cc;
    margin-bottom: 0.25rem;
}

.stat-card .stat-label {
    color: #6b7280;
    font-size: 0.9rem;
}

/* Game Modals */
.game-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
    overflow-y: auto;
}

.game-modal-content {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    padding: 1.5rem;
}

.game-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f3f4f6;
    border: none;
    font-size: 24px;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    z-index: 10;
    transition: background 0.2s, color 0.2s;
}

.game-modal-close:hover {
    background: #e5e7eb;
    color: #1f2937;
}

/* Guess Who Game Styles */
.guess-who-header {
    padding: 1.5rem 1.5rem 1rem;
    border-bottom: 1px solid #e5e7eb;
    text-align: center;
}

.guess-who-header h2 {
    margin: 0 0 0.5rem 0;
    color: #1f2937;
}

.guess-who-header .question-count {
    font-size: 0.95rem;
    color: #6b7280;
}

.guess-who-header .question-count strong {
    color: #5599cc;
}

.guess-who-body {
    padding: 1.5rem;
}

/* Persona Grid */
.persona-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 600px) {
    .persona-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.persona-card {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.75rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.persona-card:hover:not(.eliminated):not(.selected) {
    border-color: #5599cc;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(85, 153, 204, 0.2);
}

.persona-card.eliminated {
    opacity: 0.35;
    filter: grayscale(1);
    pointer-events: none;
}

.persona-card.selected {
    border-color: #10b981;
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
}

.persona-card .persona-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #e2e8f0;
    margin: 0 auto 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.persona-card .persona-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: #374151;
    line-height: 1.2;
}

.persona-card .persona-type {
    font-size: 0.65rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

/* Questions Section */
.questions-section {
    margin-top: 1.5rem;
}

.questions-section h4 {
    margin: 0 0 0.75rem 0;
    color: #374151;
    font-size: 0.95rem;
}

.question-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.question-category-btn {
    padding: 0.4rem 0.85rem !important;
    font-size: 0.85rem !important;
    background: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
    color: #374151 !important;
    border-radius: 20px !important;
}

.question-category-btn.active {
    background: #5599cc !important;
    border-color: #5599cc !important;
    color: #fff !important;
}

.question-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 200px;
    overflow-y: auto;
}

.question-btn {
    text-align: left;
    padding: 0.75rem 1rem !important;
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    color: #374151 !important;
    font-size: 0.9rem !important;
    border-radius: 8px !important;
    transition: all 0.2s ease;
}

.question-btn:hover {
    background: #f3f4f6 !important;
    border-color: #5599cc !important;
}

.question-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Answer Display */
.answer-display {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-radius: 10px;
    padding: 1rem;
    margin: 1rem 0;
    text-align: center;
}

.answer-display .question-asked {
    font-weight: 600;
    color: #1e40af;
    margin-bottom: 0.5rem;
}

.answer-display .answer {
    font-size: 1.5rem;
    font-weight: 700;
}

.answer-display .answer.yes {
    color: #059669;
}

.answer-display .answer.no {
    color: #dc2626;
}

/* Guess Mode Toggle */
.guess-mode-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
    text-align: center;
}

.guess-mode-toggle {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 600 !important;
    padding: 0.75rem 1.5rem !important;
}

.guess-mode-toggle:hover {
    filter: brightness(1.05);
}

/* Game Result Display */
.game-result {
    padding: 2rem;
    text-align: center;
}

.game-result.win {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
}

.game-result.lose {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
}

.game-result h2 {
    margin: 0 0 1rem 0;
}

.game-result .score {
    font-size: 3rem;
    font-weight: 700;
    color: #5599cc;
    margin: 1rem 0;
}

.game-result .score-breakdown {
    color: #6b7280;
    margin-bottom: 1.5rem;
}

/* Business Boo Styles */
.business-boo-header {
    padding: 1.5rem;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    text-align: center;
    color: #fff;
}

.business-boo-header h2 {
    margin: 0 0 0.5rem 0;
}

.business-boo-body {
    padding: 1.5rem;
}

.subtype-selection-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin: 1.5rem 0;
}

@media (max-width: 600px) {
    .subtype-selection-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.subtype-option {
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    padding: 0.85rem 0.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.subtype-option:hover {
    border-color: #f5576c;
    background: #fff;
}

.subtype-option.selected {
    border-color: #f5576c;
    background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
}

.subtype-option .subtype-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
}

.subtype-option .subtype-type {
    font-size: 0.7rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

/* Invite Form */
.invite-form {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

.invite-form label {
    display: block;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
}

.invite-form input[type="email"],
.invite-form input[type="text"] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 1rem;
    margin-bottom: 1rem;
    box-sizing: border-box;
}

.invite-form input:focus,
.invite-form input:focus-visible {
    outline: 2px solid #2c6fa0;
    outline-offset: 2px;
    border-color: #5599cc;
    box-shadow: 0 0 0 3px rgba(85, 153, 204, 0.15);
}

.invite-form .invite-btn {
    width: 100%;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 600 !important;
    padding: 0.85rem !important;
}

/* Fantasy League Preview Styles */
.fantasy-preview-header {
    padding: 2rem;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    text-align: center;
    color: #fff;
}

.fantasy-preview-header h2 {
    margin: 0 0 0.5rem 0;
    font-size: 1.75rem;
}

.fantasy-preview-body {
    padding: 1.5rem;
}

.fantasy-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.fantasy-feature {
    background: #f9fafb;
    padding: 1.25rem;
    border-radius: 10px;
    text-align: center;
}

.fantasy-feature .feature-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.fantasy-feature h4 {
    margin: 0 0 0.5rem 0;
    color: #1f2937;
}

.fantasy-feature p {
    margin: 0;
    color: #6b7280;
    font-size: 0.9rem;
}

/* Waitlist Form */
.waitlist-form {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    padding: 1.5rem;
    border-radius: 12px;
    margin-top: 1.5rem;
    text-align: center;
}

.waitlist-form h4 {
    margin: 0 0 0.5rem 0;
    color: #1e40af;
}

.waitlist-form p {
    color: #3b82f6;
    margin-bottom: 1rem;
}

.waitlist-form .form-row {
    display: flex;
    gap: 0.75rem;
    max-width: 400px;
    margin: 0 auto;
}

.waitlist-form input[type="email"] {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid #93c5fd;
    border-radius: 8px;
    font-size: 1rem;
}

.waitlist-form .waitlist-btn {
    background: #3b82f6 !important;
    border: none !important;
    color: #fff !important;
    padding: 0.75rem 1.5rem !important;
    white-space: nowrap;
}

.waitlist-form .notification-options {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1rem;
}

.waitlist-form .notification-options label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #1e40af;
    font-size: 0.9rem;
    cursor: pointer;
}

/* Game history in stats */
.game-history {
    margin-top: 1.5rem;
}

.game-history h4 {
    margin: 0 0 1rem 0;
    color: #374151;
}

.history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e5e7eb;
}

.history-item:last-child {
    border-bottom: none;
}

.history-item .game-type {
    font-weight: 600;
    color: #374151;
}

.history-item .game-date {
    color: #6b7280;
    font-size: 0.85rem;
}

.history-item .game-score {
    font-weight: 700;
    color: #5599cc;
}

/* Responsive adjustments for game modals */
@media (max-width: 768px) {
    .game-modal-content {
        max-height: 95vh;
        border-radius: 12px;
    }

    .persona-grid {
        gap: 0.5rem;
    }

    .persona-card {
        padding: 0.5rem;
    }

    .persona-card .persona-avatar {
        width: 36px;
        height: 36px;
        font-size: 1.25rem;
    }

    .persona-card .persona-name {
        font-size: 0.65rem;
    }

    .subtype-selection-grid {
        gap: 0.5rem;
    }

    .subtype-option {
        padding: 0.65rem 0.35rem;
    }

    .subtype-option .subtype-name {
        font-size: 0.7rem;
    }

    .waitlist-form .form-row {
        flex-direction: column;
    }
}

/* ===== v1.2.1: Enrollment & Milestone UX Polish ===== */

/* Loading spinner pattern */
.eti-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 2rem;
    color: #64748b;
    font-size: 0.9rem;
}
.eti-loading::before {
    content: '';
    width: 20px;
    height: 20px;
    border: 2px solid #e2e8f0;
    border-top-color: #5599cc;
    border-radius: 50%;
    animation: eti-spin 0.6s linear infinite;
}
@keyframes eti-spin {
    to { transform: rotate(360deg); }
}

/* Empty state pattern */
.eti-empty-state {
    text-align: center;
    padding: 2rem 1rem;
    color: #64748b;
}
.eti-empty-state .eti-empty-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}
.eti-empty-state p {
    margin: 0.25rem 0;
    font-size: 0.9rem;
}

/* Breadcrumb navigation */
.eti-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    margin-bottom: 1rem;
    color: #64748b;
}
.eti-breadcrumb a {
    color: #5599cc;
    text-decoration: none;
}
.eti-breadcrumb a:hover {
    text-decoration: underline;
}
.eti-breadcrumb .eti-bc-sep {
    color: #cbd5e1;
    font-size: 0.75rem;
}
.eti-breadcrumb .eti-bc-current {
    color: #1e293b;
    font-weight: 600;
}

/* =============================================
   ADA / WCAG 2.1 AA Compliance Fixes (v1.4.0)
   ============================================= */

/* --- Touch target minimums (WCAG 2.5.8: 44x44px) --- */
.fwk-dots button {
    min-width: 44px !important;
    min-height: 44px !important;
    position: relative;
    background: transparent !important;
    border: none !important;
}
.fwk-dots button::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 10px; height: 10px;
    border-radius: 999px;
    background: #d7dfeb;
}
.fwk-dots button.active::after { background: #5599cc; }

.game-modal-close { min-width: 44px; min-height: 44px; }
.password-toggle-wrap .password-toggle-icon { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
#back-to-top-btn { width: 48px; height: 48px; }
#history-list .history-delete { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* --- Minimum font sizes (WCAG 1.4.4) --- */
.roadmap-status-badge, .dev-status-badge { font-size: 0.75rem; }
.persona-card .persona-type { font-size: 0.75rem; }
.subtype-option .subtype-type { font-size: 0.75rem; }
.pro-badge { font-size: 0.75rem; }
@media (max-width: 768px) {
    .eti-progress-part .part-label { font-size: 0.75rem; }
    .persona-card .persona-name { font-size: 0.75rem; }
}
@media (max-width: 480px) {
    .eti-progress-part .part-label { font-size: 0.75rem; }
}

/* --- Reduced motion (WCAG 2.3.3) --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* --- High contrast mode support (WCAG 1.4.11) --- */
@media (forced-colors: active) {
    .sq-breakdown-bar, .eti-progress-fill, .eti-progress-track {
        border: 1px solid CanvasText;
    }
    .cookie-toggle .slider {
        border: 2px solid CanvasText;
    }
    .cookie-toggle .slider::before {
        border: 1px solid CanvasText;
    }
    .roadmap-status-badge, .dev-status-badge, .sq-pill, .dk-label {
        border: 1px solid CanvasText;
    }
    .persona-card.eliminated {
        border: 2px dashed GrayText;
    }
    .fwk-dots button::after {
        forced-color-adjust: none;
        border: 1px solid CanvasText;
    }
}

/* ---- Applicant Pipeline: Status badges & filter pills ---- */
.status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
    white-space: nowrap;
}
.status-submitted { background: #e0e7ff; color: #3730a3; }
.status-scored { background: #fef3c7; color: #92400e; }
.status-under_review { background: #fce7f3; color: #9d174d; }
.status-approved { background: #dcfce7; color: #166534; }
.status-rejected { background: #fee2e2; color: #991b1b; }
.status-waitlisted { background: #fff7ed; color: #9a3412; }
.status-enrolled { background: #dbeafe; color: #1e40af; }

.status-filter-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
    transition: background 0.15s, color 0.15s;
}
.status-filter-pill:hover {
    background: #e5e7eb;
}
.status-filter-pill.active {
    background: #5599cc;
    color: #fff;
    border-color: #5599cc;
}

/* Attendance Dots (Admin Enrollments) */
.attendance-dots { display: inline-flex; gap: 3px; align-items: center; flex-wrap: wrap; }
.attendance-dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid #d1d5db; cursor: pointer; padding: 0; transition: transform 0.15s; }
.attendance-dot:hover { transform: scale(1.3); }
.attendance-dot:focus-visible { outline: 2px solid #5599cc; outline-offset: 2px; }
.att-unmarked { background: #e5e7eb; border-color: #d1d5db; }
.att-in_person { background: #22c55e; border-color: #16a34a; }
.att-virtual { background: #3b82f6; border-color: #2563eb; }
.att-absent { background: #ef4444; border-color: #dc2626; }
.att-detail-btn:hover { border-color: #374151 !important; transform: scale(1.15); }
.att-detail-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }