/* ═══════════════════════════════════════════════════
   Chatbottrappen.html Specific Styles
   TRAPP Framework — Interactive Staircase Model
   Using NLA Design System
*/

:root {
  --c1: var(--nla-green-50);  --c1a: var(--nla-green-800);
  --c2: var(--nla-rust-50);  --c2a: var(--nla-rust-800);
  --c3: var(--nla-sand-100);  --c3a: #92400e;
  --c4: #dcc9b8;  --c4a: #704d35;
  --c5: var(--nla-rose-100);  --c5a: var(--nla-rose);
}

/* ── HEADER ── */
.header-origin {
  display: inline-block;
  background: var(--nla-ink);
  color: #fff;
  font-size: var(--fs-body);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-md);
  line-height: var(--lh-loose);
  max-width: 56ch;
}

.header-origin em {
  color: var(--nla-rust-300);
  font-style: italic;
}

/* ── SAMR STRIP ── */
.samr-strip {
  border: 1px solid var(--nla-line);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-4);
  margin-bottom: var(--s-8);
  background: var(--nla-paper);
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
  box-shadow: var(--shadow-sm);
}

@media (min-width: 768px) {
  .samr-strip {
    flex-direction: row;
    padding: var(--s-5) var(--s-6);
  }
}

.samr-intro {
  font-size: var(--fs-body);
  color: var(--nla-gray);
  line-height: var(--lh-loose);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--nla-line);
  margin-bottom: var(--s-4);
  display: flex;
  align-items: center;
}

@media (min-width: 768px) {
  .samr-intro {
    padding-right: var(--s-5);
    padding-bottom: 0;
    border-bottom: none;
    border-right: 1px solid var(--nla-line);
    margin-right: var(--s-5);
    margin-bottom: 0;
    min-width: 200px;
  }
}

.samr-intro-inner strong {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--nla-ink);
  margin-bottom: var(--s-1);
}

.samr-levels {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  flex: 1;
  align-items: center;
}

@media (min-width: 768px) {
  .samr-levels {
    flex-direction: row;
    gap: var(--s-1);
  }
}

.samr-box {
  flex: 1;
  text-align: center;
  padding: var(--s-3) var(--s-2);
  border-radius: var(--r-sm);
}

.samr-box-letter {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: var(--s-1);
}

.samr-box-name {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  line-height: 1.3;
  opacity: 0.85;
}

.samr-box-note {
  font-size: var(--fs-micro);
  line-height: 1.4;
  margin-top: var(--s-1);
  opacity: 0.7;
}

.samr-box.s { background: var(--c1); color: var(--c1a); }
.samr-box.a { background: var(--c2); color: var(--c2a); }
.samr-box.m { background: var(--c3); color: var(--c3a); }
.samr-box.t { background: var(--c5); color: var(--c5a); }

.samr-arrow {
  color: var(--nla-gray);
  font-size: 1rem;
  padding: 0 var(--s-1);
  display: flex;
  align-items: center;
}

.samr-threshold {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--s-3);
  color: var(--nla-gray);
}

.samr-threshold-line {
  width: 1px;
  flex: 1;
  background: var(--nla-line);
  margin-bottom: var(--s-1);
}

.samr-threshold-label {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-align: center;
  line-height: 1.4;
  opacity: 0.6;
}

.samr-threshold-line2 {
  width: 1px;
  flex: 1;
  background: var(--nla-line);
  margin-top: var(--s-1);
}

/* ── TRAPP LEGEND ── */
.trapp-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s-2);
  margin-bottom: var(--s-5);
}

@media (min-width: 768px) {
  .trapp-legend {
    display: flex;
    grid-template-columns: unset;
  }
}

.trapp-letter-box {
  flex: 1;
  text-align: center;
  padding: var(--s-3) var(--s-2);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out);
}

.trapp-letter-box:hover {
  transform: translateY(-2px);
}

.trapp-letter {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: var(--s-1);
}

.trapp-name {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  line-height: 1.3;
  margin-bottom: var(--s-1);
}

.trapp-samr {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  opacity: 0.55;
}

.trapp-letter-box:nth-child(1) { background: var(--c1); color: var(--c1a); }
.trapp-letter-box:nth-child(2) { background: var(--c2); color: var(--c2a); }
.trapp-letter-box:nth-child(3) { background: var(--c3); color: var(--c3a); }
.trapp-letter-box:nth-child(4) { background: var(--c4); color: var(--c4a); }
.trapp-letter-box:nth-child(5) { background: var(--c5); color: var(--c5a); }
.trapp-letter-box.active { outline: 2px solid var(--nla-ink); outline-offset: -2px; }

/* ── INTERACTIVE STAIRCASE ── */
.staircase-section {
  margin-bottom: var(--s-8);
}

.stair-container {
  background: var(--nla-paper);
  border: 1px solid var(--nla-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.stair-top {
  padding: var(--s-4);
}

@media (min-width: 768px) {
  .stair-top {
    padding: var(--s-6);
  }
}

.stair-hint {
  font-size: var(--fs-small);
  color: var(--nla-gray);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}

.stair-hint svg,
.stair-hint i {
  width: 16px;
  height: 16px;
  stroke: var(--nla-gray);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
}

.stair-visual {
  display: flex;
  align-items: flex-end;
  gap: var(--s-2);
  height: clamp(200px, 60vw, 320px);
  min-height: 200px;
}

@media (max-width: 480px) {
  .stair-visual {
    height: clamp(150px, 80vw, 250px);
  }
}

.stair-bar {
  flex: 1;
  border-radius: var(--r-md) var(--r-md) 0 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--s-4) var(--s-3);
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
  user-select: none;
  min-width: 0;
}

.stair-bar:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.stair-bar.active {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.stair-bar.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--nla-ink);
  opacity: 0.3;
}

.stair-bar:nth-child(1) { height: 120px; background: var(--c1); }
.stair-bar:nth-child(2) { height: 160px; background: var(--c2); }
.stair-bar:nth-child(3) { height: 200px; background: var(--c3); }
.stair-bar:nth-child(4) { height: 240px; background: var(--c4); }
.stair-bar:nth-child(5) { height: 280px; background: var(--c5); }

.bar-num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: var(--s-1);
}

.bar-name {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  line-height: 1.35;
}

.bar-samr {
  position: absolute;
  bottom: var(--s-3);
  left: 0;
  right: 0;
  text-align: center;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  opacity: 0.55;
}

.stair-bar:nth-child(1) .bar-num,
.stair-bar:nth-child(1) .bar-name,
.stair-bar:nth-child(1) .bar-samr { color: var(--c1a); }
.stair-bar:nth-child(2) .bar-num,
.stair-bar:nth-child(2) .bar-name,
.stair-bar:nth-child(2) .bar-samr { color: var(--c2a); }
.stair-bar:nth-child(3) .bar-num,
.stair-bar:nth-child(3) .bar-name,
.stair-bar:nth-child(3) .bar-samr { color: var(--c3a); }
.stair-bar:nth-child(4) .bar-num,
.stair-bar:nth-child(4) .bar-name,
.stair-bar:nth-child(4) .bar-samr { color: var(--c4a); }
.stair-bar:nth-child(5) .bar-num,
.stair-bar:nth-child(5) .bar-name,
.stair-bar:nth-child(5) .bar-samr { color: var(--c5a); }

/* ── DETAIL PANEL ── */
.stair-detail {
  border-top: 1px solid var(--nla-line);
  padding: var(--s-4);
}

@media (min-width: 768px) {
  .stair-detail {
    padding: var(--s-6);
  }
}

.detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-3);
}

.detail-eyebrow {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  margin-bottom: var(--s-1);
}

.detail-title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-snug);
}

.detail-samr-badge {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-md);
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: var(--s-1);
}

.detail-test-q {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  background: rgba(26, 31, 29, 0.05);
  border-radius: var(--r-md);
  padding: var(--s-3);
  margin-bottom: var(--s-4);
  font-size: var(--fs-small);
  font-style: italic;
  color: var(--nla-ink);
  line-height: var(--lh-loose);
}

.detail-test-q svg,
.detail-test-q i {
  width: 16px;
  height: 16px;
  stroke: var(--nla-gray);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
  margin-top: var(--s-1);
}

.detail-focus {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--nla-gray);
  margin-bottom: var(--s-4);
}

.detail-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
}

.detail-desc {
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--nla-ink);
  text-wrap: pretty;
}

.detail-example {
  background: var(--nla-sand-50);
  border-radius: var(--r-md);
  padding: var(--s-4);
  font-size: var(--fs-small);
  line-height: var(--lh-loose);
  color: var(--nla-gray);
  margin-bottom: var(--s-3);
}

.detail-example strong {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  margin-bottom: var(--s-1);
  color: var(--nla-ink);
}

.detail-filter-note {
  font-size: var(--fs-body);
  color: var(--nla-gray);
  line-height: var(--lh-loose);
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--nla-line);
  margin-bottom: var(--s-3);
}

.detail-filter-note em {
  color: var(--nla-ink);
  font-style: italic;
}

.detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.detail-tag {
  font-size: var(--fs-micro);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.detail-l1 .detail-eyebrow { color: var(--c1a); }
.detail-l1 .detail-samr-badge { background: var(--c1); color: var(--c1a); }
.detail-l1 .detail-tag { background: rgba(45, 106, 79, 0.12); color: var(--c1a); }
.detail-l2 .detail-eyebrow { color: var(--c2a); }
.detail-l2 .detail-samr-badge { background: var(--c2); color: var(--c2a); }
.detail-l2 .detail-tag { background: rgba(29, 78, 216, 0.1); color: var(--c2a); }
.detail-l3 .detail-eyebrow { color: var(--c3a); }
.detail-l3 .detail-samr-badge { background: var(--c3); color: var(--c3a); }
.detail-l3 .detail-tag { background: rgba(146, 64, 14, 0.1); color: var(--c3a); }
.detail-l4 .detail-eyebrow { color: var(--c4a); }
.detail-l4 .detail-samr-badge { background: var(--c4); color: var(--c4a); }
.detail-l4 .detail-tag { background: rgba(192, 57, 43, 0.1); color: var(--c4a); }
.detail-l5 .detail-eyebrow { color: var(--c5a); }
.detail-l5 .detail-samr-badge { background: var(--c5); color: var(--c5a); }
.detail-l5 .detail-tag { background: rgba(107, 33, 168, 0.1); color: var(--c5a); }

/* ── EXERCISE SECTION ── */
.exercise-section {
  margin-bottom: var(--s-8);
}

.exercise-intro {
  font-size: var(--fs-body);
  color: var(--nla-gray);
  line-height: var(--lh-loose);
  margin-bottom: var(--s-6);
  max-width: 56ch;
  text-wrap: pretty;
}

.ex-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
}

.ex-card {
  border: 1px solid var(--nla-line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  background: var(--nla-paper);
  transition: all var(--dur-med) var(--ease-out);
}

.ex-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--nla-green-300);
}

.ex-card-name {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  margin-bottom: var(--s-1);
  color: var(--nla-ink);
}

.ex-card-desc {
  font-size: var(--fs-small);
  color: var(--nla-gray);
  line-height: var(--lh-loose);
  margin-bottom: var(--s-4);
}

.ex-levels {
  display: flex;
  gap: var(--s-1);
  flex-wrap: wrap;
  margin-bottom: var(--s-3);
}

.ex-level-btn {
  flex: 1;
  min-width: 44px;
  border: 1.5px solid var(--nla-line);
  border-radius: var(--r-md);
  background: var(--nla-paper);
  cursor: pointer;
  padding: var(--s-2);
  text-align: center;
  font-size: var(--fs-small);
  font-weight: 700;
  font-family: var(--font-display);
  transition: all var(--dur-fast) var(--ease-out);
  color: var(--nla-ink);
}

.ex-level-btn:hover {
  border-color: var(--nla-ink);
}

.ex-level-btn.selected-1 { background: var(--c1); border-color: var(--c1a); color: var(--c1a); }
.ex-level-btn.selected-2 { background: var(--c2); border-color: var(--c2a); color: var(--c2a); }
.ex-level-btn.selected-3 { background: var(--c3); border-color: var(--c3a); color: var(--c3a); }
.ex-level-btn.selected-4 { background: var(--c4); border-color: var(--c4a); color: var(--c4a); }
.ex-level-btn.selected-5 { background: var(--c5); border-color: var(--c5a); color: var(--c5a); }

.ex-feedback {
  display: none;
  margin-top: var(--s-1);
  border-radius: var(--r-md);
  overflow: hidden;
  font-size: var(--fs-small);
  line-height: var(--lh-loose);
}

.ex-feedback.visible {
  display: block;
}

.ex-verdict {
  padding: var(--s-2);
  font-weight: 700;
  font-size: var(--fs-small);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.ex-verdict-correct {
  background: var(--nla-green-100);
  color: var(--nla-green-800);
}

.ex-verdict-debate {
  background: var(--nla-rust-100);
  color: var(--nla-rust-800);
}

.ex-feedback-text {
  padding: var(--s-3);
  background: #f9f8f7;
  color: var(--nla-ink);
}

.ex-debate-note {
  padding: var(--s-2);
  background: var(--nla-rust-50);
  border-top: 1px solid var(--nla-rust-300);
  color: var(--nla-rust-800);
  font-size: var(--fs-small);
  font-style: italic;
}

/* ── PEDAGOGIC FRAMEWORK TEASER ── */
.ramme-teaser {
  margin-bottom: var(--s-8);
}

.ramme-teaser-inner {
  background: var(--nla-forest);
  color: #fff;
  border-radius: var(--r-lg);
  padding: var(--s-7);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-7);
  align-items: center;
  box-shadow: var(--shadow-lg);
}

.ramme-teaser-text h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  margin-bottom: var(--s-2);
  line-height: var(--lh-snug);
}

.ramme-teaser-text h3 em {
  font-style: italic;
  font-weight: 400;
  color: var(--nla-green-300);
}

.ramme-teaser-text p {
  font-size: var(--fs-body);
  opacity: 0.88;
  line-height: var(--lh-loose);
}

.ramme-phases {
  display: flex;
  gap: var(--s-2);
  align-items: center;
}

.ramme-phase-chip {
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  text-align: center;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.ramme-phase-chip-word {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: var(--s-1);
}

.ramme-phase-chip-en {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  opacity: 0.5;
}

.ramme-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-4);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--nla-green-300);
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.ramme-cta:hover {
  opacity: 0.8;
}

.ramme-cta svg,
.ramme-cta i {
  width: 16px;
  height: 16px;
  stroke: var(--nla-green-300);
  fill: none;
  stroke-width: 2.5;
}

/* ── REFLECTION QUESTIONS ── */
.reflection-section {
  margin-bottom: var(--s-8);
}

.questions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
}

.question-card {
  background: var(--nla-sand-50);
  border: 1px solid var(--nla-line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}

.question-card .q-icon {
  margin-bottom: var(--s-3);
}

.question-card .q-icon i,
.question-card .q-icon svg {
  display: block;
  width: 24px;
  height: 24px;
  stroke: var(--nla-green);
  stroke-width: 1.5;
  fill: none;
}

.question-card p {
  font-family: var(--font-sans);
  font-style: italic;
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--nla-ink);
}


/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .ex-grid,
  .questions-grid {
    grid-template-columns: 1fr;
  }
  .connection,
  .ramme-teaser-inner {
    grid-template-columns: 1fr;
  }
  .detail-body {
    grid-template-columns: 1fr;
  }

  .samr-strip {
    flex-direction: column;
  }

  .samr-intro {
    padding-right: 0;
    border-right: none;
    margin-right: 0;
    border-bottom: 1px solid var(--nla-line);
    padding-bottom: var(--s-4);
    margin-bottom: var(--s-4);
  }
}