/* =========================
   Fonts
========================= */

@font-face {
  font-family: 'EstragonEdu';
  src: url('../fonts/ABCEstragonEdu-cRegular1.woff') format('woff');
}

@font-face {
  font-family: 'OracleEdu';
  src: url('../fonts/ABCOracleEdu-Regular.woff') format('woff');
}

@font-face {
  font-family: 'GaisyrEdu';
  src: url('../fonts/ABCGaisyrEdu-Book.woff') format('woff');
  font-feature-settings: "ss01" 1;
}

/* =========================
   Root variables
========================= */

:root {
  --topPosition: 80px;
  --posterWidth: 500px;
  --inbetweenMargin: 30px;
  --graphRightMargin: 60px;
  --fs: #ff0000;
  --cfs: #22ff00;
  --ps: #0037ff;
  --aus: #e100ff;
  --pis: #fffb00;
}


/* =========================
   Base document
========================= */

html,
body {
  overflow-x: hidden;
}

html {
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  position: relative;
  min-height: 100vh;
  font-family: 'GaisyrEdu', serif;
}

main {
  margin-top: 120px;
}


input[type="range"] {
  -webkit-appearance: none;
  width: 50%;
  background: transparent;
}

/* TRACK */
input[type="range"]::-webkit-slider-runnable-track {
  height: 16px;
  /* ← thick slider */
  background: #ffffff;
  border: 1px solid black;
}

/* THUMB = thin line INSIDE track */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 3px;
  height: 14px;
  /* ← SAME as track */
  background: black;
  margin-top: 0;
  /* ← important */
  cursor: pointer;
}

/* FIREFOX */
input[type="range"]::-moz-range-track {
  height: 16px;
  background: white;
  border: 1px solid black;
}

input[type="range"]::-moz-range-thumb {
  width: 4px;
  height: 16px;
  background: black;
  border: none;
  border-radius: 1px;
  cursor: pointer;
}

/* =========================
   Typography
========================= */

h1 {
  margin-top: 4px;
  font-size: 32px;
  letter-spacing: -0.03em;
}

h1,
h2,
h3,
.top-row a {
  font-family: 'OracleEdu', sans-serif;
  font-weight: normal;
}

h2 {
  margin-bottom: 8px;
  margin-top: 0px;
  max-width: none;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -2%;
}

h3 {
  margin: 0;
  margin-top: 40px;
  max-width: none;
  font-size: 21px;
  line-height: 1.4;
}

p {
  margin: 0 0 40px 0;
  max-width: none;
  font-size: 18px;
  line-height: 1.4;
  font-family: 'GaisyrEdu', serif;
}


.caps-font {
  font-family: 'EstragonEdu', sans-serif;
}

/* =========================
   Links
========================= */

a {
  font-size: 18px;
  font-family: 'OracleEdu', sans-serif;
  color: black;
  text-decoration: none;
}

/* =========================
   Buttons
========================= */



/* =========================
   Header / nav
========================= */

header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 999;
  background: white;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 16px;
  padding-right: clamp(8px, 3vw, 40px);
  height: 60px;
}
.header-content h1 {
  padding-top: clamp(0px, 1.5vw, 16px);
}

.top-row {
  position: static;
  gap: clamp(8px, 3vw, 80px);
  right: unset;
  top: unset;
}

.top-row a {
  padding: 4px 16px;
  letter-spacing: -0.03em;
}
.top-row a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: #c001ba;
}

.top-row a[aria-current="page"] {
  box-shadow: 0 0 0 1px #c001ba;
  border-radius: 999px;
  text-decoration: none;
  cursor: default;
}

/* =========================
   Shared content blocks
========================= */

.about-section {
  margin-top: 100px;
  margin-bottom: 100px;
  text-align: left;
  padding: 0 16px;
}

.about-section p {
  margin-bottom: 12px;
}


/* =========================
   Evaluate page layout
========================= */

.evaluate-layout {
  position: relative;
  display: flex;
  top: 42px;
  align-items: flex-start;
  gap: var(--inbetweenMargin);
  width: fit-content;
  margin-top: var(--topPosition);
  margin-left: auto;
  margin-right: auto;
}

#poster {
  position: relative;
  display: block;
  width: var(--posterWidth);
  height: auto;
  border: 1px solid black;
  flex-shrink: 0;
}

.options-column {
  max-width: 850px;
  width: 100%;
  margin: 0 auto;
}

p.question-title {
  margin-bottom: 0;
  font-size: 24px;
}

.question-page {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  max-width: 100%;
}

.question-page.active {
  display: block;
}

.nav-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
}

#message {
  margin-top: 160px;
  /* move it down */
  text-align: left;
}

/* =========================
   Evaluate page answer buttons
========================= */

.answer-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.answer-btn {
  padding: 8px 16px;
  font-size: 24px;
  font-family: 'GaisyrEdu', sans-serif;
  color: black;
  background: rgb(255, 255, 255);
  border: 1px solid #c001ba;
  border-radius: 999px;
  cursor: pointer;
}

.answer-btn:hover {
  background-color: rgb(255, 255, 255);
  border: 1px solid #c001ba;
}


/* =========================
   Stats page controls
========================= */

.graph-controls {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.control-group {
  display: flex;
  align-items: center;
  gap: 12px;
}


.control-group+.control-group {
  margin-left: 64px;
}


.graph-controls label {
  font-size: 16px;
  line-height: 1;
  margin-right: 8px;
}

.graph-controls select {
  padding: 6px 10px;
  font-size: 16px;
  font-family: 'GaisyrEdu', sans-serif;
  background: white;
  border: 1px solid black;
}

.graph-controls-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* =========================
   Stats page graph
========================= */
.graph-wrapper {
  position: absolute;
  top: 180px;
  left: 50%;
  width: min(2000px, 90vw);
  transform: translateX(-50%);
}

.graph-frame {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 600px;
  padding-bottom: 60px;
  padding-left: 60px;
  transform: scale(1);
  transform-origin: bottom center;
  transition: transform 0.1s ease-out, width 0.1s ease-out, max-width 0.1s ease-out;
}

#y-axis-label {
  position: absolute;
  top: 210px;
  font-size: 16px;
  font-weight: bold;
  white-space: nowrap;
  transform: rotate(-90deg) translateX(-50%);
  transform-origin: left top;
}

#axis {
  position: absolute;
  top: 0;
  right: var(--graphRightMargin);
  bottom: 60px;
  left: 60px;
  overflow: visible;
  z-index: 2;
}

.diag-overlay {
  position: absolute;
  top: 0;
  right: var(--graphRightMargin);
  bottom: 60px;
  left: 60px;
  width: auto;
  height: auto;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}

.diag-overlay line {
  stroke: black;
  stroke-width: 1;
}

.x-axis-line {
  position: absolute;
  right: var(--graphRightMargin);
  bottom: 60px;
  left: 60px;
  height: 1px;
  background-color: black;
}

.y-axis-line {
  position: absolute;
  top: 0;
  bottom: 60px;
  left: 60px;
  width: 1px;
  background-color: black;
}

.x-labels {
  position: absolute;
  right: var(--graphRightMargin);
  bottom: 25px;
  left: 60px;
  display: flex;
  justify-content: space-between;
  font-size: 18px;
}

.y-labels {
  position: absolute;
  top: 0;
  bottom: 60px;
  left: 20px;
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  align-items: flex-end;
  width: 30px;
  font-size: 18px;
}

.axis-title {
  position: absolute;
  right: var(--graphRightMargin);
  bottom: 0;
  left: 60px;
  font-size: 16px;
  text-align: center;
}

/* =========================
   Poster stack
========================= */

.poster-stack-group {
  position: absolute;
}

.poster-stack-group.is-stack {
  cursor: pointer;
}

.poster-stack-group.is-open {
  cursor: default;
}

.poster-stack-hoverbox {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
  width: var(--hoverbox-width);
  height: var(--hoverbox-height);
  pointer-events: auto;
  background: transparent;
  transform: translate(-50%, -50%);
}

.poster-item {
  position: absolute;
  z-index: 1;
  text-align: center;
  transform:
    translate(-50%, -50%) translate(var(--stack-x, 0px), var(--stack-y, 0px));
  transition:
    transform 2s cubic-bezier(.25, .8, .25, 1),
    z-index 0.25s ease;
}

.poster-stack-group.is-single .poster-item {
  pointer-events: auto;
}

.poster-stack-group.is-stack .poster-item,
.poster-stack-group.is-opening .poster-item {
  pointer-events: none;
}

.poster-stack-group.is-open .poster-item {
  transform:
    translate(-50%, -50%) translate(var(--expand-x, 0px), var(--expand-y, 0px));
  transition:
    transform 0.25s cubic-bezier(.4, 0, .2, 1),
    z-index 0.25s ease;
}

.poster-stack-group.is-expanded-hoverable .poster-item {
  pointer-events: auto;
}

.poster-stack-group.is-expanded-hoverable .poster-stack-hoverbox {
  pointer-events: none;
}

.poster-item:hover {
  z-index: 9999 !important;
}

.poster-item img {
  display: block;
  width: 40px;
  height: auto;
  background: white;
  border: 0.5px solid black;
  transition: width 0.25s ease;
}

.poster-item:hover img {
  width: 60px;
  cursor: pointer;
}

.poster-item .rating {
  margin-top: 5px;
  padding: 2px 4px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 3px;
}

/* =========================
   Posters page
========================= */

.posters-page {
  padding: 24px 32px 40px;
  max-width: 1600px;
  margin: 0 auto;
}


.posters-grid {
  --poster-size: 180px;
  display: grid;
  margin-top: 160px;
  grid-template-columns: repeat(auto-fill, var(--poster-size));
  gap: 12px;
  justify-content: start;
  align-items: start;
}

.poster-grid-item {
  width: 100%;
  cursor: pointer;
  outline: 1px solid black;
  /* ← use outline instead of border */
  outline-offset: 0;
  transition: transform .18s ease;
  transform-origin: center;
  will-change: transform;
}

.poster-grid-item:hover {
  transform: scale(1.04);
  z-index: 5;
}

.poster-grid-item img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

@media (max-width: 1000px) {
  .posters-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .posters-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .posters-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .posters-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================
   Poster overlay
========================= */

.poster-overlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(20px);
  transition: opacity 0.35s ease;

}

.poster-overlay.active {
  display: flex;
}

.poster-overlay img {
  position: fixed;
  top: 50%;
  left: 50%;
  width: auto;
  max-width: 95vw;
  height: 95vh;
  object-fit: contain;
  transform: translate(-50%, -50%) scale(1);
  transition: transform 0.45s cubic-bezier(.22, .8, .25, 1);
  will-change: transform;
}

body.poster-open {
  overflow: hidden;
}


#poster,
.poster-item,
.poster-item img,
.poster-stack-hoverbox {
  cursor: pointer;
}

.poster-overlay,
.poster-overlay img {
  cursor: zoom-out;
}

.evaluate-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 2rem;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  padding-left: 96px;
  padding-right: 96px;
}

#poster {
  flex: 0 0 auto;
  max-width: 420px;
  width: 100%;
  height: auto;
  display: block;
}

.options-column.single-page-options {
  flex: 1 1 0%;
  min-width: 550px;
  max-width: 850px;
  display: flex;
  flex-direction: column;
}

.scale-header,
.question-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) repeat(5, 70px);
  gap: 0.75rem;
  align-items: start;
}

.scale-header {
  margin-top: 0;
  margin-bottom: 1rem;
  text-align: center;
  font-size: 16px;
}

.scale-title {
  text-align: left;
  font-size: 20px;
  letter-spacing: -2%;
  font-family: 'OracleEdu', sans-serif;
}

.scale-header>div:first-child {
  text-align: left;
}

.scale-header>div:not(:first-child),
.question-row>div:not(:first-child) {
  display: flex;
  justify-content: center;
  align-items: center;
}

.question-row {
  padding: 0.75rem 0;
  border-bottom: 1px solid #ddd;
}

.question-text {
  text-align: left;
  line-height: 1.2;
  font-size: 20px;
}

.question-row input[type="radio"] {
  justify-self: center;
  align-self: center;
  margin: 0;
}

#poster-overlay {
  position: fixed;
  inset: 0;
  overflow: visible;
  /* 🔥 THIS is important */
}

.submit-row {
  display: flex;
  flex-direction: column;
  /* stack vertically */
  align-items: flex-end;
  /* keep them right-aligned */
  gap: 0.75rem;
  margin-top: 1.5rem;
}


/* Base style for all buttons */
#submitBtn,
#nextPosterBtn,
#evaluateMoreBtn {
  padding: 10px 18px;
  font-size: 18px;
  font-family: 'GaisyrEdu', sans-serif;
  color: black;
  background-color: white;
  border: 1px solid #c001ba;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s ease;
}

/* Hover (only when enabled) */
#submitBtn:hover:enabled,
#nextPosterBtn:hover:enabled,
#evaluateMoreBtn:hover:enabled {
  background-color: #c001ba;
  color: white;
  border-color: #c001ba;
}

/* Active (click) */
#submitBtn:active:enabled,
#nextPosterBtn:active:enabled,
#evaluateMoreBtn:active:enabled {
  background-color: #ddd;
  transform: translateY(1px);
}

/* Disabled state */
#submitBtn:disabled,
#nextPosterBtn:disabled,
#evaluateMoreBtn:disabled {
  background-color: #e0e0e0;
  color: #888;
  border-color: #d0d0d0;
  cursor: not-allowed;
}

#message {
  margin-top: 0.75rem;
  text-align: right;
}

input[type="radio"] {
  cursor: pointer;
  transform: scale(1.2);

}

/* === Overlay must allow elements outside image bounds === */
#poster-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  overflow: visible !important;
  /* prevent clipping */
}

/* === Stats panel (force visibility + layering) === */
#poster-stats {
  position: fixed;
  z-index: 10000 !important;
  pointer-events: none;

  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 16px;
  border-radius: 8px;

  font-size: 15px;
  line-height: 1.6;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* === Safety: prevent any parent clipping issues === */
body.poster-open {
  overflow: hidden;
}

/* === Optional: ensure poster itself doesn't create weird stacking === */
#poster {
  position: relative;
  z-index: 1;
}

#poster-overlay-img {
  position: relative;
  z-index: 9999;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.graph-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

#toggle-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 32px;
  padding: 0 8px;
  font-size: 12px;
  cursor: pointer;
  box-sizing: border-box;
}

/* do NOT override poster positioning globally */
.poster-item {
  position: absolute;
}

/* poster mode */
#axis.poster-mode .poster-item img {
  display: block;
}

/* dot mode: hide poster, draw centered dot */
#axis.dot-mode .poster-item img {
  display: none;
}

#axis.dot-mode .poster-item::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: black;
  pointer-events: none;
}

.characteristic-buttons {
  display: flex;
  gap: 12px;
}

.characteristic-btn {
  padding: 6px 14px;
  font-family: 'OracleEdu', sans-serif;
  font-size: 16px;
  cursor: pointer;
  border-radius: 999px;
  box-shadow: 0 0 0 1px #cacaca;
}

.characteristic-btn.active {
  box-shadow: 0 0 0 1px #c001ba;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border-color: 1px solid black;
  display: inline-block;
}

.graph-dot {
  border: 1px solid rgba(0, 0, 0, 0.7);
}

.graph-dot.dot-fascination {
  background-color: var(--fs);
}

.graph-dot.dot-creative-freedom {
  background-color: var(--cfs);
}

.graph-dot.dot-professionalism {
  background-color: var(--ps);
}

.graph-dot.dot-autonomy {
  background-color: var(--aus);
}

.graph-dot.dot-personal-interest {
  background-color: var(--pis);
}

.dot--fs {
  background-color: var(--fs);
}

.dot--cfs {
  background-color: var(--cfs);
}

.dot--ps {
  background-color: var(--ps);
}

.dot--pis {
  background-color: var(--pis);
}

.dot--aus {
  background-color: var(--aus);
}

.axis-title-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 12px;

  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 100%;
}

.axis-title {
  position: static !important;
  text-align: center;
  margin: 0;
}

.dot-legend-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 14px;
  width: 100%;

  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0;
}

.legend-item {
  display: flex;
  margin-top: 2px;
  align-items: center;
  gap: 6px;
  font-size: 16px;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #000;
  flex-shrink: 0;
}

/* =========================
   Responsive
========================= */

@media (max-width: 900px) {
  .evaluate-layout {
    flex-direction: column;
    padding-left: 16px;
    padding-right: 16px;
    align-items: center;
  }

  #poster {
    max-width: 280px;
    width: 100%;
    transition: width 0.1s ease-out, max-width 0.1s ease-out;
  }

  .graph-frame {
    transform: scale(0.95);
  }

  .graph-controls {
    align-items: flex-end;
  }

  .graph-controls-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    width: min(220px, 100%);
    max-width: 220px;
  }

  .graph-controls-left label {
    display: block;
    width: 100%;
    max-width: 100%;
    white-space: normal;
  }

  .graph-controls-left select {
    width: 100%;
    max-width: 220px;
  }

  .options-column.single-page-options {
    min-width: unset;
    width: 100%;
  }
}

@media (max-width: 640px) {
    #poster {
    max-width: 100px;
  }
  .graph-frame {
  transform: scale(0.9);
}

  .graph-controls {
    align-items: flex-end;
  }

  .graph-controls-left {
    width: min(200px, 100%);
    max-width: 200px;
  }

  .graph-controls-left select {
    width: 100%;
    max-width: 200px;
  }

  .scale-header,
  .question-row {
    display: grid;
    grid-template-columns: minmax(0, 50%) repeat(5, minmax(0, calc(50% / 5)));
    gap: 0.25rem;
  }

  .scale-title {
    font-size: 0;
  }

  .scale-title::after {
    content: "Please evaluate:";
    font-size: 14px;
  }

  .scale-header > div:nth-child(3),
  .scale-header > div:nth-child(4),
  .scale-header > div:nth-child(5) {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0;
  }

  .scale-header > div:nth-child(3)::after {
    content: "2";
    font-size: 14px;
  }

  .scale-header > div:nth-child(4)::after {
    content: "3";
    font-size: 14px;
  }

  .scale-header > div:nth-child(5)::after {
    content: "4";
    font-size: 14px;
  }

  .scale-header > div:nth-child(2) {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0;
  }

  .scale-header > div:nth-child(2)::after {
    content: "1";
    font-size: 14px;
  }

  .scale-header > div:nth-child(6) {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0;
  }

  .scale-header > div:nth-child(6)::after {
    content: "5";
    font-size: 14px;
  }

  .question-text {
    font-size: 16px;
  }

  main {
    margin-top: 80px;
  }

  .options-column.single-page-options {
    top: -24px;
  }

  .evaluate-layout {
    margin-top: 20px;
    padding-bottom: 80px;
    gap: 0.75rem;
  }



    .control-group:nth-child(2) {
    display: none;
  }
.dot-legend-row {
  gap: clamp(6px, 3vw, 14px);
}

.legend-item {
  font-size: clamp(9px, 1.8vw, 16px);
}

.legend-dot {
  width: clamp(8px, 1.5vw, 10px);
  height: clamp(8px, 1.5vw, 10px);
}

.question-row{
  padding-top: 6px;
  padding-bottom: 6px;
}
.submit-row{
  margin-top: 8px;
  transform: scale(0.8);
  transform-origin: top right;
}

}

h1 {
  font-size: clamp(16px, 3vw, 32px);
}

.top-row {
  gap: clamp(8px, 3vw, 80px);
  right: clamp(8px, 3vw, 40px);
}

.top-row a {
  padding: 4px clamp(4px, 1.5vw, 16px);
  font-size: clamp(12px, 1.8vw, 18px);
}