/* ============================================================
   SHARED GLOBAL STYLES (HEADER / NAV / FOOTER / MODALS)
   ============================================================ */

:root{
  --blue:#3a7bd5;
  --nav-bg:#b3b1ac;
  --ink:#222;
}

/* RESET */
*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }

/* ============================================================
   NOTICE BAR
   ============================================================ */
.notice{
  position:sticky;
  top:0;
  z-index:3000;
  background:#0e1523;
  color:#fff;
  padding:.6rem .8rem;
  text-align:center;
  font-size:.95rem;
}
.notice a{ color:#bfe0ff }

/* ============================================================
   HEADER
   ============================================================ */
header{
  background:var(--blue);
  color:#fff;
  text-align:center;
  padding:1.1rem 0 1rem;
}
header h1{
  margin:0;
  font-size:2.4rem;
}
header p{
  margin:.3rem 0 0;
  opacity:.95;
}

/* ============================================================
   NAVBAR (FIXED — NO SCROLL)
   ============================================================ */
nav{
  background:var(--nav-bg);
  border-bottom:2px solid #222;
  position:relative;
  z-index:2000;
}

/* Wrapper — centered, NOT scrollable */
.navbar-wrap{
  max-width:1200px;
  margin:0 auto;
  overflow:visible;           /* ✅ FIX */
}

/* Actual navbar */
.navbar{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.7rem;
  padding:.35rem .6rem;
  white-space:normal;         /* ✅ FIX */
  flex-wrap:wrap;             /* ✅ FIX */
}

/* Links */
.nav-link{
  font-family:Georgia, serif;
  font-weight:700;
  color:#fff;
  text-decoration:none;
  padding:.6rem .9rem;
  border-radius:.9rem .9rem 0 0;
}
.nav-link:hover{
  background:#f7fafc;
  color:#222;
}

/* ============================================================
   DROPDOWN (Web Apps)
   ============================================================ */
.nav-link.dropdown{
  position:relative;
}

.dropbtn{
  cursor:pointer;
}

/* Menu */
.dropdown-menu{
  display:none;
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  background:#fff;
  min-width:240px;
  border-radius:10px;
  box-shadow:0 14px 32px rgba(0,0,0,.25);
  z-index:5000;
}

.dropdown-menu a{
  display:block;
  padding:.7rem 1.1rem;
  color:#222;
  text-decoration:none;
  font-weight:600;
}
.dropdown-menu a:hover{
  background:#f2f5f8;
}

/* Desktop hover */
@media (min-width:801px){
  .nav-link.dropdown:hover .dropdown-menu{
    display:block;
  }
}

/* Mobile click */
.nav-link.dropdown.open .dropdown-menu{
  display:block;
}

/* ============================================================
   FOOTER (CLEAN & CENTERED)
   ============================================================ */

.site-footer{
  text-align:center;
  padding:28px 16px 20px;
  color:#444;
  font-size:.95rem;
}

.site-footer a{
  color:var(--blue);
  text-decoration:none;
}
.site-footer a:hover{
  text-decoration:underline;
}

.footer-line{
  font-weight:500;
  margin-bottom:12px;
}

.footer-meta{
  line-height:1.55;
  margin-bottom:12px;
}

.footer-meta em{
  color:#666;
  font-size:.9rem;
}

.footer-visits{
  font-size:.9rem;
  color:#666;
}


/* ============================================================
   MODAL — FIXED SCROLLABLE CONTENT
   ============================================================ */

.modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(15,25,45,.65);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 5000;
  overflow-y: auto;          /* ✅ allow page-level scroll */
  padding: 24px 0;           /* breathing space on small screens */
}

.modal{
  background: #fff;
  width: 92vw;
  max-width: 760px;
  max-height: 88vh;          /* ✅ critical */
  overflow-y: auto;          /* ✅ enable scrolling */
  border-radius: 14px;
  padding: 28px 32px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  position: relative;
}

/* Close button */
.modal .modal-close{
  position:absolute;
  top:14px;
  right:16px;
  border:none;
  background:#fff;
  font-size:1.4rem;
  cursor:pointer;
  color:#555;
  border-radius:50%;
  width:36px;
  height:36px;
}
.modal .modal-close:hover{
  background:#f2f5f8;
  color:#000;
}


/* Headings */
.modal h1{
  font-size:1.9rem;
  color:#0a2540;
  margin-top:0;
  margin-bottom:1rem;
}
.modal h2{
  font-size:1.25rem;
  color:#0a2540;
  margin-top:1.6rem;
  margin-bottom:.4rem;
}

/* Body text */
.modal p{
  font-size:1rem;
  line-height:1.65;
  color:#222;
  margin-bottom:.9rem;
}

/* Divider */
.modal hr{
  border:none;
  border-top:1px solid #e3e6eb;
  margin:1.6rem 0;
}

/* Links */
.modal a{
  color:#3a7bd5;
  text-decoration:none;
  font-weight:500;
}
.modal a:hover{
  text-decoration:underline;
}

.modal .note{
  font-size:.92rem;
  color:#555;
  margin-top:1.2rem;
}

/* ============================================================
   PROGRESS BAR — INDETERMINATE
   ============================================================ */

.progress-wrap{
  display:none;
  margin-top:.75rem;
}

.progress{
  height:10px;
  background:#e8edf3;
  border-radius:999px;
  overflow:hidden;
  position:relative;
}

.progress .bar{
  height:100%;
  background:linear-gradient(
    90deg,
    #3a7bd5,
    #67b2f3,
    #3a7bd5
  );
}

.progress .bar.indeterminate{
  width:40%;
  position:absolute;
  left:-40%;
  animation:progress-slide 1.2s linear infinite;
}

@keyframes progress-slide{
  from{ left:-40% }
  to{ left:100% }
}

/* ============================================================
   RESULT VIEW
   ============================================================ */

.result-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.2rem;
}

.result-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.6rem;
  width:100%;
  max-width:1000px;
}

.result-box{
  border:1px solid #dbe2ef;
  border-radius:12px;
  padding:.6rem;
  background:#fafcff;
  height:320px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.result-title{
  font-weight:700;
  margin-bottom:.4rem;
  color:#3a7bd5;
}

.result-img{
  max-width:100%;
  max-height:260px;
  object-fit:contain;
  border-radius:12px;
  display:none;
}

.result-text{
  text-align:center;
  font-size:1.05rem;
  line-height:1.6;
}

.download-btn{
  display:inline-block;
  margin-top:.6rem;
  padding:.5rem 1.2rem;
  background:#3a7bd5;
  color:#fff;
  border-radius:8px;
  text-decoration:none;
  font-weight:600;
}
.download-btn:hover{
  background:#215b99;
}

/* Mobile */
@media (max-width:768px){
  .result-grid{
    grid-template-columns:1fr;
  }
  .result-box{
    height:260px;
  }
}





/* ============================================================
   AIGS PANELS — DUAL MODE (EXPLANATION vs RESULT)
   ============================================================ */

/* ---------- BASE PANEL ---------- */
.result-box{
  border:1px solid #dbe2ef;
  border-radius:12px;
  padding:0.6rem;
  background:#fafcff;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* ---------- EXPLANATION PANELS (AUTO HEIGHT) ---------- */
#exampleArea .result-box{
  height:auto;                 /* ✅ KEY FIX */
  justify-content:flex-start;  /* text flows naturally */
}

/* Explanation images */
#exampleArea .result-img{
  max-height:180px;
  margin-bottom:0.6rem;
}

/* Explanation text */
#exampleArea .result-text{
  font-size:0.75rem;
  line-height:1.25;
  text-align:left;
  width:100%;
}

/* ---------- RESULT PANELS (FIXED HEIGHT) ---------- */
#resultArea .result-box{
  height:320px;                /* ✅ only results are fixed */
  justify-content:center;
}

/* Result images */
#resultArea .result-img{
  max-height:260px;
  width:100%;
  object-fit:contain;
}

/* Hide text in result panels */
#resultArea .result-text{
  display:none;
}

/* Titles */
.result-title{
  font-size:1rem;
  margin-bottom:0.5rem;
  text-align:center;
}



/* ============================================================
   SUPPORT SECTION
   ============================================================ */

.support-section{
  max-width:1000px;
  margin: 0 auto;
  padding: 2.2rem 1.2rem 2.6rem;
}

.support-title{
  text-align:center;
  margin: 0 0 .6rem 0;
  font-size: 2rem;
  color: #0a2540;
}

.support-subtitle{
  text-align:center;
  margin: 0 auto 1.4rem;
  max-width: 860px;
  line-height: 1.7;
  color: #222;
  opacity: .9;
}

.support-card{
  height: auto !important;            /* allow natural height */
  justify-content: flex-start !important;
  align-items: stretch;
  padding: 1rem 1rem 1.1rem;
}

.support-body{
  text-align:left;
  padding: .2rem .2rem 0;
}

.support-list{
  margin: .3rem 0 0;
  padding-left: 1.15rem;
  line-height: 1.85;
  font-size: .98rem;
}

.support-text{
  margin: .35rem 0 .8rem;
  line-height: 1.7;
  font-size: .98rem;
}

.support-small{
  margin: .9rem 0 0;
  font-size: .92rem;
  color:#333;
  opacity: .9;
}

.support-tags{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin: .3rem 0 .9rem;
}

.support-tag{
  border:1px solid #dbe2ef;
  background:#fff;
  border-radius:999px;
  padding:.32rem .65rem;
  font-size:.85rem;
  color:#222;
}

.support-btn{
  display:inline-block;
  margin-top:.2rem;
  padding:.55rem 1rem;
  background: var(--blue);
  color:#fff;
  border-radius:10px;
  text-decoration:none;
  font-weight:700;
  text-align:center;
}

.support-btn:hover{
  background:#215b99;
}

.support-details{
  margin-top: .95rem;
  border-top: 1px solid #e3e6eb;
  padding-top: .8rem;
}

.support-details summary{
  cursor:pointer;
  font-weight:700;
  color:#0a2540;
}

.support-policy p{
  margin: .7rem 0 0;
  line-height: 1.7;
  font-size: .95rem;
  color:#222;
  opacity:.9;
}




/* ============================================================
   MOBILE FIX — AIGS PANELS
   ============================================================ */
@media (max-width: 768px) {

  /* Stack cleanly */
  .result-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }



/* Navbar must stay above app UI */
  nav {
    position: relative;
    z-index: 10000;
  }

  /* Dropdown menu always on top */
  .dropdown-menu {
    position: absolute;
    z-index: 10001;
  }



  /* Let panels grow naturally */
  .result-box {
    height: auto !important;
    min-height: unset !important;
    padding: 0.8rem !important;

    /* CRITICAL: stop vertical centering */
    justify-content: flex-start !important;
    align-items: center;
  }

  /* Images: smaller, no overlap */
  .result-box .result-img {
    max-height: 180px !important;
    width: 100%;
    margin-bottom: 0.6rem;
  }

  /* Text: readable */
  .result-text {
    font-size: 0.9rem;
    line-height: 1.45;
    text-align: left;
    width: 100%;
  }

  .result-text ul {
    margin-left: 1.1rem;
  }

  /* Titles */
  .result-title {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    text-align: center;
  }

  /* RESULT MODE — image only */
  .result-box.has-results {
    justify-content: center !important;
  }

  .result-box.has-results .result-img {
    max-height: 220px !important;
  }

  .result-box.has-results .result-text {
    display: none !important;
  }
}