/* ============================================
   SIMULATION STORY PAGE
   ============================================ */

@layer components {
  .simulation-story-page {
    position: relative;
    padding-block: var(--space-xl);
    overflow: hidden;

    [data-md] {
      p {
        margin: 0 0 0.35em;
      }
      p:last-child {
        margin-bottom: 0;
      }
      ul {
        margin: 0.35em 0;
        padding-left: 1.4em;
      }
      li {
        margin-bottom: 0.2em;
        line-height: 1.65;
      }
      code {
        font-size: 0.85em;
        padding: 0.1em 0.35em;
        border-radius: 4px;
        background: light-dark(oklch(0.95 0 0), oklch(0.25 0 0));
      }
    }

    /* === STAGE 2 TABS === */
    .stage2-tabs {
      display: inline-flex;
      border-radius: 100px;
      overflow: hidden;
      padding: var(--space-3xs);
      align-self: center;
    }

    .stage2-tab {
      padding: var(--space-xs) var(--space-xl);
      border: none;
      background: transparent;
      cursor: pointer;
      font-size: var(--fs-small);
      border-radius: 100px;
      transition: all 0.2s ease-out;
      font-weight: var(--fw-medium);
    }

    /* === TAB PANELS === */
    .tab-panel {
      display: none;
      flex-direction: column;
      gap: var(--space-lg);

      &.active {
        display: flex;
      }
    }

    /* === MAIN CONTENT === */
    .story-content {
      flex: 1;
      min-inline-size: 300px;
      display: flex;
      flex-direction: column;
      gap: var(--space-lg);
    }

    .card {
      padding: var(--space-lg);
      border-radius: 12px;
    }

    .story-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .difficulty {
        font-size: var(--fs-small);
      }

      .status-badge {
        padding: var(--space-3xs) var(--space-sm);
        border-radius: 100px;
        font-size: var(--fs-xsmall);
      }

      .duration-edit {
        display: flex;
        align-items: center;
        gap: var(--space-xs);
        font-size: var(--fs-small);

        .duration-input {
          inline-size: 7ch;
          padding: var(--space-3xs) var(--space-sm);
          border-radius: 100px;
          font-size: var(--fs-xsmall);
        }

        .duration-save-btn {
          padding: var(--space-3xs) var(--space-md);
          border-radius: 100px;
          font-size: var(--fs-xsmall);
          cursor: pointer;
        }
      }
    }

    .duration-advisory {
      margin-block-start: var(--space-2xs);
      font-size: var(--fs-xsmall);
    }

    .story-title {
      font-size: var(--fs-xl);
    }

    .story-intro {
      font-family: var(--font-body);
      line-height: 1.75;
      letter-spacing: 0.01em;
      padding: var(--space-lg);
      border-radius: 10px;
    }

    .mission-section,
    .chapters-section {
      h3 {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        margin-block-end: var(--space-lg);

        .section-icon {
          display: inline-flex;
          justify-content: center;
          align-items: center;
          inline-size: 32px;
          block-size: 32px;
          border-radius: 8px;
          font-size: var(--fs-small);
        }
      }

      .chapter-count {
        font-weight: var(--fw-regular);
        font-size: var(--fs-small);
      }
    }

    .skill-tags,
    .chapter-tags {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-xs);
      margin-block-start: var(--space-md);

      .tag {
        padding: var(--space-3xs) var(--space-sm);
        border-radius: 100px;
        font-size: var(--fs-xsmall);
      }
    }

    .chapter-card {
      interpolate-size: allow-keywords;
      overflow-anchor: none;
      border-radius: 12px;
      margin-block-end: var(--space-md);
      transition: all 0.2s ease-out;

      summary {
        display: flex;
        gap: var(--wire-gap);
        align-items: flex-start;
        padding: var(--space-lg);
        cursor: pointer;
        list-style: none;
        user-select: none;
        transition: all 0.15s ease-out;

        &::-webkit-details-marker {
          display: none;
        }
      }

      &[open] summary {
        padding-block-end: var(--space-md);
      }

      /* When expanded, the full brief shows in the Candidate view panel — hide
         the summary's hint so it doesn't repeat as a tall, thin strip of text
         in the narrow left column. The hint still previews on collapsed cards. */
      &[open] .chapter-content > p {
        display: none;
      }

      &::details-content {
        block-size: 0;
        overflow: clip;
        transition:
          block-size 0.3s ease,
          content-visibility 0.3s allow-discrete;
      }

      &[open]::details-content {
        block-size: auto;
      }

      .chapter-number {
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        inline-size: 40px;
        block-size: 40px;
        border-radius: 50%;
        font-size: var(--fs-small);
        transition: all 0.2s ease-out;
      }

      .chapter-content {
        flex: 1;

        > strong:first-child {
          display: block;
          margin-block-end: var(--space-3xs);
        }

        .chapter-type {
          display: block;
          font-size: var(--fs-xsmall);
          margin-block-end: var(--space-xs);
        }

        p {
          font-family: var(--font-body);
          font-size: 0.9rem;
          line-height: 1.75;
          letter-spacing: 0.01em;
        }
      }

      .chapter-arrow {
        flex-shrink: 0;
        transition: transform 0.2s ease-out;
      }

      &[open] .chapter-arrow {
        transform: rotate(90deg);
      }
    }

    /* === DIRECT-MANIPULATION EDITING === */
    .editable-field {
      position: relative;
    }

    .editable-trigger {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      inline-size: 24px;
      block-size: 24px;
      padding: 0;
      border-radius: 50%;
      cursor: pointer;
      opacity: 0.55;
      transition:
        opacity 0.15s ease-out,
        background 0.15s ease-out,
        color 0.15s ease-out;
    }

    .editable-field:hover > .editable-trigger,
    .editable-trigger:focus-visible {
      opacity: 1;
    }

    .story-title-row {
      display: flex;
      align-items: flex-start;
      gap: var(--space-sm);
      padding-inline-end: calc(24px + var(--space-sm));
    }

    .story-title-row > .editable-trigger,
    .story-intro-row > .editable-trigger {
      position: absolute;
      inset-block-start: var(--space-sm);
      inset-inline-end: var(--space-sm);
    }

    .difficulty.editable-field {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2xs);
    }

    .editable-field.editing > .editable-display,
    .editable-field.editing > .editable-trigger {
      display: none;
    }

    .editable-editor {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-xs);
      inline-size: 100%;
    }

    .editable-input {
      flex: 1;
      min-inline-size: 12ch;
      padding: var(--space-2xs) var(--space-sm);
      border-radius: 8px;
      font: inherit;
      font-size: var(--fs-small);
    }

    textarea.editable-input {
      min-block-size: 5lh;
      resize: vertical;
      line-height: 1.6;
    }

    select.editable-input {
      flex: 0 0 auto;
      cursor: pointer;
    }

    .editable-actions {
      display: flex;
      flex-shrink: 0;
      gap: var(--space-xs);
    }

    .editable-save,
    .editable-cancel {
      padding: var(--space-3xs) var(--space-md);
      border-radius: 100px;
      font-size: var(--fs-xsmall);
      cursor: pointer;
    }

    .chapter-actions {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: var(--space-3xs);
      opacity: 0;
      transition: opacity 0.15s ease-out;
    }

    .chapter-card summary:hover .chapter-actions,
    .chapter-actions:focus-within {
      opacity: 1;
    }

    .task-action-btn {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      inline-size: 28px;
      block-size: 28px;
      padding: 0;
      border-radius: 8px;
      cursor: pointer;
      transition:
        background 0.15s ease-out,
        color 0.15s ease-out;
    }

    /* === CHAPTER DETAIL (expanded) === */
    .chapter-detail {
      padding: var(--space-sm) var(--space-lg) var(--space-lg);
      display: flex;
      flex-direction: column;
      gap: var(--space-md);
    }

    /* === CANDIDATE VIEW / ADMIN SPLIT === */
    .candidate-view {
      display: flex;
      flex-direction: column;
      gap: var(--space-md);
      padding: var(--space-md);
      border-radius: 10px;
    }

    .candidate-view-banner {
      display: flex;
      align-items: center;
      gap: var(--space-xs);
      font-size: var(--fs-xsmall);
      text-transform: uppercase;
      letter-spacing: 0.05em;

      .badge--type {
        margin-inline-start: auto;
      }
    }

    .admin-view {
      display: flex;
      flex-direction: column;
      gap: var(--space-md);
    }

    .detail-section {
      display: flex;
      flex-direction: column;
      gap: var(--space-xs);
    }

    .detail-label {
      font-size: var(--fs-xsmall);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-weight: var(--fw-semibold);
    }

    .detail-text {
      font-size: var(--fs-small);
      line-height: 1.7;
    }

    .badge--type {
      display: inline-flex;
      align-items: center;
      padding: var(--space-3xs) var(--space-sm);
      border-radius: 100px;
      font-size: var(--fs-xsmall);
      font-weight: var(--fw-medium);
      white-space: nowrap;
      width: fit-content;
    }

    .choices-list,
    .questions-list {
      display: flex;
      flex-direction: column;
      gap: var(--space-xs);
      padding-inline-start: var(--space-lg);

      li {
        font-size: var(--fs-small);
        line-height: 1.6;
      }
    }

    /* === ANSWER KEY (admin-only) === */
    .choices-list .choice-correct {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
    }

    .choice-correct .choice-text {
      flex: 1;
    }

    .choice-correct-badge {
      flex-shrink: 0;
      padding: var(--space-3xs) var(--space-sm);
      border-radius: 100px;
      font-size: var(--fs-xsmall);
      font-weight: var(--fw-semibold);
      white-space: nowrap;
    }

    .admin-only-tag {
      margin-inline-start: var(--space-xs);
      padding: 0 var(--space-xs);
      border-radius: 4px;
      font-size: var(--fs-xsmall);
      font-weight: var(--fw-regular);
      text-transform: none;
      letter-spacing: normal;
      vertical-align: middle;
    }

    .code-block {
      padding: var(--space-md);
      border-radius: 8px;
      font-family: monospace;
      font-size: var(--fs-xsmall);
      line-height: 1.6;
      overflow-x: auto;
      white-space: pre;
    }

    /* Two-part layout so a Graphviz LR pipeline (natural aspect often
       ~10:1) stays READABLE in the admin preview. Without this, a
       3000×200 SVG hits `max-width: 100%` of an 800px card and the
       browser preserves aspect by collapsing the height to ~53 px —
       a one-pixel strip the admin can't read.
       The frame caps both dimensions and lets the SVG scroll
       horizontally when it would otherwise render thin; the img
       inside keeps its NATURAL width (no max-width) so it never gets
       scaled down past readability. */
    .stimulus-preview-frame {
      /* The combination of `display: block` + `inline-size: 100%` +
         `contain: inline-size` is the rock-solid way to make this
         frame's width depend ONLY on its parent, never on the
         (potentially huge) img inside it. Without `contain: inline-size`
         a wide replaced child (img with natural width 3000 px) can
         inflate the frame's intrinsic size through the chain of flex
         containers above, defeating any max-inline-size cap.
         `inline-size: 100%` makes the frame's width a DEFINITE value
         (100% of its containing block), required for `contain:
         inline-size` to actually constrain anything. `overflow-x: auto`
         then scrolls the wide img inside the now-bounded frame.
         The img keeps its NATURAL width (the inner `.stimulus-preview`
         rule clears the global `max-inline-size: 100%` reset). */
      display: block;
      inline-size: 100%;
      max-inline-size: 100%;
      max-block-size: 70vh;
      contain: inline-size;
      overflow-x: auto;
      overflow-y: auto;
      border-radius: 8px;
    }

    .stimulus-preview {
      display: block;
      /* No width — the frame caps it via overflow. height: auto
         preserves the natural aspect.
         max-inline-size: none EXPLICITLY overrides the global reset
         in shared/css/base.css:
             img, picture, svg { max-inline-size: 100%; }
         Without this opt-out a wide LR-rank Graphviz pipeline
         (natural ~10:1) gets scaled down to the frame width and the
         height collapses to a 1-pixel strip — the bug we were trying
         to fix. */
      max-inline-size: none;
      height: auto;
    }

    /* === AUDIO BEHAVIOR FORM === */
    .audio-behavior-form {
      display: flex;
      flex-direction: column;
      gap: var(--space-xl);
    }

    .form-section {
      display: flex;
      flex-direction: column;
      gap: var(--space-md);
      padding: var(--space-lg);
      border-radius: 12px;
    }

    .form-section-header {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      padding-block-end: var(--space-md);

      h3 {
        font-size: var(--fs-body);
      }
    }

    .form-section-icon {
      display: flex;
      justify-content: center;
      align-items: center;
      inline-size: 32px;
      block-size: 32px;
      border-radius: 8px;
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-md);
    }

    .form-group {
      display: flex;
      flex-direction: column;
      gap: var(--space-3xs);

      label {
        font-size: var(--fs-xsmall);
        font-weight: var(--fw-medium);
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }

      input[type='text'],
      select {
        padding: var(--space-sm) var(--space-md);
        border-radius: 8px;
        border: 1px solid transparent;
        font-size: var(--fs-small);
        font-family: inherit;
        outline: none;
        transition: border-color 0.15s ease-out;
        text-transform: capitalize;

        &:focus {
          border-color: var(--accent-primary);
        }
      }
    }

    /* === SLIDERS === */
    .slider-group {
      display: flex;
      flex-direction: column;
      gap: var(--space-3xs);
    }

    .slider-label {
      display: flex;
      justify-content: space-between;
      align-items: baseline;

      label {
        font-size: var(--fs-small);
        font-weight: var(--fw-medium);
      }

      .slider-value {
        font-size: var(--fs-xsmall);
        font-weight: var(--fw-semibold);
        min-inline-size: 2.5em;
        text-align: end;
      }
    }

    .slider-range-labels {
      display: flex;
      justify-content: space-between;
      font-size: var(--fs-xsmall);
    }

    input[type='range'] {
      -webkit-appearance: none;
      appearance: none;
      inline-size: 100%;
      block-size: 6px;
      border-radius: 100px;
      outline: none;
      cursor: pointer;

      &::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        inline-size: 18px;
        block-size: 18px;
        border-radius: 50%;
        cursor: pointer;
        border: 2px solid transparent;
        transition: transform 0.15s ease-out;
      }

      &::-webkit-slider-thumb:hover {
        transform: scale(1.15);
      }
    }

    /* === BEHAVIOR RATIONALE === */
    .behavior-rationale {
      display: flex;
      flex-direction: column;
      gap: var(--space-xs);
      padding: var(--space-md) var(--space-lg);
      border-radius: 10px;
      line-height: 1.7;
    }

    .rationale-header {
      display: flex;
      align-items: center;
      gap: var(--space-xs);
      font-size: var(--fs-xsmall);
      font-weight: var(--fw-semibold);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .rationale-text {
      font-size: var(--fs-small);
      margin: 0;
      transition: opacity 0.2s ease-out;
    }

    /* === ENTRANCE ANIMATIONS === */
    .page-header {
      animation: entrance-slide-right 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    .chat-sidebar {
      animation: entrance-slide-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both;
    }

    .story-content > .card {
      animation: entrance-slide-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
      animation-delay: calc(0.1s + 0.08s * sibling-index());
    }

    .chapter-card {
      animation: entrance-slide-up 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
      animation-delay: calc(0.2s + 0.08s * sibling-index());
    }

    .page-bg-orb {
      animation: entrance-fade-in 1.2s ease-out both;
      animation-delay: calc(0.2s + 0.3s * sibling-index());
    }
  }
}

/* --- THEME --- */
@layer theme {
  .simulation-story-page {
    /* Markdown-rendered AI content */
    .story-content strong,
    .chapter-content strong {
      color: var(--accent-primary, oklch(0.65 0.15 250));
      font-weight: 600;
    }

    /* === STAGE 2 TABS === */
    .stage2-tabs {
      background: light-dark(oklch(0% 0 0 / 0.03), oklch(100% 0 0 / 0.04));
      border: 1px solid light-dark(oklch(0% 0 0 / 0.06), oklch(100% 0 0 / 0.08));
    }

    .stage2-tab {
      color: var(--text-secondary);

      &.active {
        background: light-dark(oklch(100% 0 0 / 0.9), oklch(100% 0 0 / 0.1));
        color: var(--text-primary);
        box-shadow: 0 1px 3px oklch(0% 0 0 / 0.08);
      }

      &:hover:not(.active) {
        color: var(--text-primary);
      }
    }

    /* === STORY META === */
    .story-meta {
      .difficulty {
        padding: var(--space-xs) var(--space-md);
        background: light-dark(oklch(0% 0 0 / 0.03), oklch(100% 0 0 / 0.04));
        border-radius: 100px;
        border: 1px solid light-dark(oklch(0% 0 0 / 0.06), oklch(100% 0 0 / 0.08));
        backdrop-filter: blur(8px);
        color: var(--text-secondary);
      }

      .status-badge {
        background: oklch(from var(--color-warning) l c h / 0.12);
        border: 1px solid oklch(from var(--color-warning) l c h / 0.25);
        color: var(--color-warning);
      }

      .duration-edit {
        .duration-label,
        .duration-unit {
          color: var(--text-secondary);
        }

        .duration-input {
          background: light-dark(oklch(0% 0 0 / 0.03), oklch(100% 0 0 / 0.04));
          border: 1px solid light-dark(oklch(0% 0 0 / 0.06), oklch(100% 0 0 / 0.08));
          color: var(--text-primary);
        }

        .duration-save-btn {
          background: oklch(from var(--accent-primary) l c h / 0.14);
          border: 1px solid oklch(from var(--accent-primary) l c h / 0.3);
          color: var(--accent-primary);

          &:hover {
            background: oklch(from var(--accent-primary) l c h / 0.22);
          }

          &:focus-visible {
            outline: 2px solid var(--accent-primary);
            outline-offset: 1px;
          }
        }
      }
    }

    .duration-advisory {
      color: var(--text-secondary);
    }

    /* === STORY INTRO === */
    .story-intro {
      color: light-dark(oklch(40% 0.01 250), oklch(78% 0.01 250));
      background: light-dark(oklch(0% 0 0 / 0.02), oklch(100% 0 0 / 0.03));
      border-inline-start: 3px solid var(--accent-primary);
    }

    /* === CHAPTER CARDS === */
    .chapter-card {
      background: light-dark(oklch(0% 0 0 / 0.02), oklch(100% 0 0 / 0.03));
      border: 1px solid oklch(from var(--glass-tint) l c h / 0.06);
      backdrop-filter: blur(8px);

      summary:hover {
        .chapter-number {
          background: var(--accent-primary);
          color: var(--button-text-color);
          border-color: transparent;
        }

        .chapter-arrow {
          color: var(--accent-primary);
        }
      }

      &[open] summary {
        border-block-end: 1px solid oklch(from var(--glass-tint) l c h / 0.06);
      }

      .chapter-number {
        border: 1px solid light-dark(oklch(0% 0 0 / 0.08), oklch(100% 0 0 / 0.1));
      }

      .chapter-content {
        .chapter-type {
          color: var(--text-secondary);
        }

        p {
          color: light-dark(oklch(40% 0.01 250), oklch(78% 0.01 250));
        }
      }

      .chapter-arrow {
        color: var(--text-secondary);
      }
    }

    /* === DIRECT-MANIPULATION EDITING === */
    .editable-trigger {
      background: none;
      border: none;
      color: var(--text-secondary);

      &:hover {
        background: light-dark(oklch(0% 0 0 / 0.05), oklch(100% 0 0 / 0.06));
        color: var(--accent-primary);
      }

      &:focus-visible {
        outline: 2px solid var(--accent-primary);
        outline-offset: 1px;
      }
    }

    .editable-input {
      background: light-dark(oklch(100% 0 0 / 0.7), oklch(100% 0 0 / 0.06));
      border: 1px solid light-dark(oklch(0% 0 0 / 0.1), oklch(100% 0 0 / 0.12));
      color: var(--text-primary);

      &:focus-visible {
        outline: none;
        border-color: var(--accent-primary);
      }
    }

    .editable-save {
      background: oklch(from var(--accent-primary) l c h / 0.14);
      border: 1px solid oklch(from var(--accent-primary) l c h / 0.3);
      color: var(--accent-primary);

      &:hover {
        background: oklch(from var(--accent-primary) l c h / 0.22);
      }

      &:focus-visible {
        outline: 2px solid var(--accent-primary);
        outline-offset: 1px;
      }
    }

    .editable-cancel {
      background: light-dark(oklch(0% 0 0 / 0.04), oklch(100% 0 0 / 0.05));
      border: 1px solid light-dark(oklch(0% 0 0 / 0.08), oklch(100% 0 0 / 0.1));
      color: var(--text-secondary);

      &:hover {
        color: var(--text-primary);
      }
    }

    /* Drop the pill chrome off the difficulty badge while its editor is open. */
    .difficulty.editable-field.editing {
      padding: 0;
      background: none;
      border: none;
      backdrop-filter: none;
    }

    .task-action-btn {
      background: light-dark(oklch(0% 0 0 / 0.03), oklch(100% 0 0 / 0.04));
      border: 1px solid light-dark(oklch(0% 0 0 / 0.06), oklch(100% 0 0 / 0.08));
      color: var(--text-secondary);

      &:hover {
        background: oklch(from var(--accent-primary) l c h / 0.14);
        color: var(--accent-primary);
      }

      &.task-delete:hover {
        background: oklch(from var(--color-error) l c h / 0.14);
        color: var(--color-error);
      }

      &:focus-visible {
        outline: 2px solid var(--accent-primary);
        outline-offset: 1px;
      }
    }

    .chapter-detail {
      background: light-dark(oklch(0% 0 0 / 0.01), oklch(100% 0 0 / 0.015));
    }

    /* === CANDIDATE VIEW / ADMIN SPLIT === */
    /* Frame the candidate's view like a screen so it reads as "what they see",
       distinct from the admin-only answer key / interviewer prompts below it. */
    .candidate-view {
      background: light-dark(oklch(100% 0 0 / 0.5), oklch(100% 0 0 / 0.03));
      border: 1px solid light-dark(oklch(0% 0 0 / 0.07), oklch(100% 0 0 / 0.09));
    }

    .candidate-view-banner {
      color: var(--text-secondary);
    }

    .detail-label {
      color: light-dark(
        oklch(from var(--accent-primary) calc(l - 0.05) calc(c - 0.03) h),
        oklch(from var(--accent-primary) calc(l + 0.1) calc(c - 0.03) h)
      );
    }

    .detail-text {
      color: var(--text-secondary);
    }

    /* === ANSWER KEY (admin-only) === */
    .choices-list .choice-correct {
      color: var(--text-primary);
      font-weight: var(--fw-medium);
    }

    .choice-correct-badge {
      background: oklch(from var(--color-success) l c h / 0.15);
      border: 1px solid oklch(from var(--color-success) l c h / 0.3);
      color: var(--color-success);
    }

    .admin-only-tag {
      background: oklch(from var(--color-warning) l c h / 0.14);
      border: 1px solid oklch(from var(--color-warning) l c h / 0.28);
      color: var(--color-warning);
    }

    /* Sensitive block — give it a warning-tinted edge so admins read it as
       answer-key material that must not be shared with candidates. */
    .detail-section--answer-key {
      padding-inline-start: var(--space-md);
      border-inline-start: 2px solid oklch(from var(--color-warning) l c h / 0.4);
    }

    .badge--type {
      background: light-dark(
        oklch(from var(--accent-primary) l c h / 0.1),
        oklch(from var(--accent-primary) l c h / 0.15)
      );
      color: light-dark(
        oklch(from var(--accent-primary) calc(l - 0.1) c h),
        oklch(from var(--accent-primary) calc(l + 0.1) c h)
      );
    }

    .code-block {
      background: light-dark(oklch(0.15 0 0), oklch(0.12 0 0));
      color: light-dark(oklch(0.85 0 0), oklch(0.85 0.01 200));
      border: 1px solid oklch(from var(--glass-tint) l c h / 0.08);
    }

    /* Border on the frame, not the img — the img is allowed to overflow
       its natural width into the scrolling frame, so a border on the
       img itself would slide off-screen with the content. */
    .stimulus-preview-frame {
      border: 1px solid oklch(from var(--glass-tint) l c h / 0.08);
    }

    /* === AUDIO BEHAVIOR FORM === */
    .form-section {
      background: light-dark(oklch(100% 0 0 / 0.7), oklch(100% 0 0 / 0.03));
      border: 1px solid oklch(from var(--glass-tint) l c h / 0.06);
    }

    .form-section-header {
      border-block-end: 1px solid oklch(from var(--glass-tint) l c h / 0.06);
    }

    .form-section-icon {
      background: linear-gradient(
        135deg,
        light-dark(
          oklch(from var(--accent-primary) l c h / 0.15),
          oklch(from var(--accent-primary) l c h / 0.25)
        ),
        light-dark(
          oklch(from var(--accent-primary) l c h / 0.05),
          oklch(from var(--accent-primary) l c h / 0.1)
        )
      );
      border: 1px solid
        light-dark(
          oklch(from var(--accent-primary) l c h / 0.2),
          oklch(from var(--accent-primary) l c h / 0.3)
        );
      color: var(--accent-primary);
    }

    .form-group {
      label {
        color: light-dark(
          oklch(from var(--accent-primary) calc(l - 0.05) calc(c - 0.03) h),
          oklch(from var(--accent-primary) calc(l + 0.1) calc(c - 0.03) h)
        );
      }

      input[type='text'],
      select {
        background: light-dark(oklch(100% 0 0 / 0.8), oklch(100% 0 0 / 0.05));
        border-color: oklch(from var(--glass-tint) l c h / 0.08);
        color: var(--text-primary);
      }
    }

    .slider-value {
      color: var(--accent-primary);
    }

    .slider-range-labels {
      color: var(--text-secondary);
    }

    input[type='range'] {
      background: light-dark(oklch(0% 0 0 / 0.06), oklch(100% 0 0 / 0.08));

      &::-webkit-slider-thumb {
        background: var(--accent-primary);
        border-color: light-dark(oklch(100% 0 0), oklch(0.15 0 0));
        box-shadow: 0 2px 6px oklch(from var(--accent-primary) l c h / 0.3);
      }
    }

    /* === BEHAVIOR RATIONALE === */
    .behavior-rationale {
      background: light-dark(
        oklch(from var(--accent-primary) l c h / 0.06),
        oklch(from var(--accent-primary) l c h / 0.08)
      );
      border: 1px solid
        light-dark(
          oklch(from var(--accent-primary) l c h / 0.12),
          oklch(from var(--accent-primary) l c h / 0.15)
        );
    }

    .rationale-header {
      color: light-dark(
        oklch(from var(--accent-primary) calc(l - 0.05) calc(c - 0.03) h),
        oklch(from var(--accent-primary) calc(l + 0.1) calc(c - 0.03) h)
      );
    }

    .rationale-text {
      color: var(--text-secondary);
    }

    /* === SECTION ICONS === */
    .section-icon {
      background: linear-gradient(
        135deg,
        light-dark(
          oklch(from var(--accent-primary) l c h / 0.15),
          oklch(from var(--accent-primary) l c h / 0.25)
        ),
        light-dark(
          oklch(from var(--accent-primary) l c h / 0.05),
          oklch(from var(--accent-primary) l c h / 0.1)
        )
      );
      border: 1px solid
        light-dark(
          oklch(from var(--accent-primary) l c h / 0.2),
          oklch(from var(--accent-primary) l c h / 0.3)
        );
      color: var(--accent-primary);
      box-shadow: 0 2px 12px
        light-dark(
          oklch(from var(--accent-primary) l c h / 0.08),
          oklch(from var(--accent-primary) l c h / 0.15)
        );
    }

    .chapters-section .chapter-count {
      color: var(--text-secondary);
    }

    /* === CHIPS === */
    .chip {
      backdrop-filter: blur(8px);
      transition: all 0.2s ease-out;

      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px oklch(0% 0 0 / 0.15);
      }
    }
  }
}

/* ════════════════════════════════════════════════════
   Recruiter-authored task questions

   Sub-layered under `components.questions` / `theme.questions` so the
   feature carries its provenance in the layer name. Sub-layers cascade
   exactly like their parent (the order declared in base.css), so these
   slot in alongside the rest of `components` / `theme` — the dot suffix
   is only a label that scopes the feature when scanning the file.
   ════════════════════════════════════════════════════ */

@layer components.questions {
  .simulation-story-page {
    .detail-section--questions {
      padding: var(--space-sm) var(--space-md);
      border-radius: 8px;
    }
  }
}

@layer theme.questions {
  .simulation-story-page {
    /* Accent tint + accent border so the recruiter can confirm at a
       glance which items the AI is required to raise during the candidate
       interview. Alphas mirror the `.badge--type` convention so the tint
       reads as a subtle highlight in dark mode and a slightly stronger
       one in light mode. */
    .detail-section--questions {
      background: light-dark(
        oklch(from var(--accent-primary) l c h / 0.08),
        oklch(from var(--accent-primary) l c h / 0.12)
      );
      border-inline-start: 3px solid var(--accent-primary);
    }
  }
}

/* ════════════════════════════════════════════════════
   Honey-pot probes

   Visually distinct from must-ask `--questions` so the recruiter doesn't
   confuse "interview content the AI must cover" with "detection probes the
   AI raises neutrally to feed the cheat detector". Uses --color-warning to
   read as a flagged-for-attention surface, not a content surface.
   ════════════════════════════════════════════════════ */

@layer components.honeypots {
  .simulation-story-page {
    .detail-section--honeypots {
      padding: var(--space-sm) var(--space-md);
      border-radius: 8px;

      .detail-hint {
        margin: var(--space-3xs) 0 var(--space-xs);
        font-size: var(--fs-xsmall);
        color: var(--text-secondary);
        font-style: italic;
      }
    }
  }
}

@layer theme.honeypots {
  .simulation-story-page {
    .detail-section--honeypots {
      background: light-dark(
        oklch(from var(--color-warning) l c h / 0.08),
        oklch(from var(--color-warning) l c h / 0.12)
      );
      border-inline-start: 3px solid var(--color-warning);
    }
  }
}