/* =========================================
   SUBJECT PICKER
   ========================================= */

   .subject-modal,
   .subject-modal * {
       box-sizing: border-box;
   }
   
   .subject-modal {
       --picker-green: #166534;
       --picker-green-dark: #104b28;
       --picker-accent: #b9ef78;
       --picker-ink: #17211b;
       --picker-muted: #727c73;
       --picker-line: #e5e9e4;
   
       position: fixed;
       inset: 0;
       z-index: 10000;
       display: grid;
       place-items: center;
       padding: 24px;
       visibility: hidden;
       opacity: 0;
       pointer-events: none;
       transition:
           opacity 220ms ease,
           visibility 220ms ease;
   }
   
   .subject-modal.is-open {
       visibility: visible;
       opacity: 1;
       pointer-events: auto;
   }
   
   .subject-modal__backdrop {
       position: absolute;
       inset: 0;
       background: rgb(15 25 17 / 55%);
       backdrop-filter: blur(5px);
       -webkit-backdrop-filter: blur(5px);
   }
   
   .subject-modal__panel {
       position: relative;
       display: grid;
       grid-template-columns: 0.82fr 1.18fr;
       width: min(790px, 100%);
       max-height: min(680px, calc(100dvh - 48px));
       overflow-y: auto;
       background: #fff;
       box-shadow: 0 28px 100px rgb(0 0 0 / 22%);
       transform: translateY(12px) scale(0.985);
       transition: transform 240ms ease;
       outline: none;
   }
   
   .subject-modal.is-open .subject-modal__panel {
       transform: translateY(0) scale(1);
   }
   
   /* Left introduction panel */
   
   .subject-modal__intro {
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       min-height: 490px;
       padding: 35px 30px 27px;
       background: var(--picker-green-dark);
       color: #fff;
   }
   
   .subject-modal__eyebrow {
       display: flex;
       align-items: center;
       flex-wrap: wrap;
       gap: 8px;
       padding-right: 4px;
       font-size: 9px;
       font-weight: 600;
       letter-spacing: 0.09em;
   }
   
   .subject-modal__eyebrow > span:not(.subject-modal__status) {
       color: rgb(255 255 255 / 42%);
   }
   
   .subject-modal__status {
       width: 7px;
       height: 7px;
       flex: 0 0 7px;
       background: var(--picker-accent);
       border-radius: 50%;
   }
   
   .subject-modal__intro-content {
       margin: 40px 0;
   }
   
   .subject-modal__overline {
       display: block;
       margin-bottom: 17px;
       color: var(--picker-accent);
       font-size: 10px;
       font-weight: 600;
       letter-spacing: 0.16em;
   }
   
   .subject-modal__intro h2 {
       margin: 0;
       font-family: 'Space Grotesk', sans-serif;
       font-size: clamp(34px, 4vw, 45px);
       font-weight: 500;
       letter-spacing: -0.065em;
       line-height: 1.08;
   }
   
   .subject-modal__intro h2 span {
       color: var(--picker-accent);
   }
   
   .subject-modal__intro-content p {
       max-width: 230px;
       margin: 22px 0 0;
       color: rgb(255 255 255 / 72%);
       font-family: 'IBM Plex Sans', sans-serif;
       font-size: 12px;
       line-height: 1.9;
   }
   
   .subject-modal__footnote {
       display: flex;
       justify-content: space-between;
       gap: 12px;
       padding-top: 17px;
       border-top: 1px solid rgb(255 255 255 / 23%);
       color: rgb(255 255 255 / 66%);
       font-size: 9px;
       letter-spacing: 0.08em;
   }
   
   /* Right selection area */
   
   .subject-modal__choices {
       position: relative;
       display: flex;
       flex-direction: column;
       justify-content: center;
       min-width: 0;
       padding: 52px 30px 27px;
       background: #fff;
   }
   
   .subject-modal__close {
       position: absolute;
       top: 15px;
       right: 16px;
       z-index: 2;
       display: grid;
       place-items: center;
       width: 35px;
       height: 35px;
       padding: 0;
       border: 1px solid var(--picker-line);
       border-radius: 50%;
       background: #fff;
       color: var(--picker-ink);
       font-family: 'IBM Plex Sans', sans-serif;
       font-size: 24px;
       font-weight: 400;
       line-height: 1;
       cursor: pointer;
       transition:
           background 160ms ease,
           color 160ms ease,
           border-color 160ms ease;
   }
   
   .subject-modal__close:hover {
       border-color: var(--picker-green);
       background: var(--picker-green);
       color: #fff;
   }
   
   .subject-modal__choices-heading {
       display: flex;
       justify-content: space-between;
       gap: 12px;
       margin-bottom: 15px;
       color: var(--picker-muted);
       font-size: 8px;
       font-weight: 700;
       letter-spacing: 0.09em;
   }
   
   .subject-choice {
       display: grid;
       grid-template-columns: 25px minmax(0, 1fr) 20px;
       align-items: center;
       gap: 12px;
       width: 100%;
       min-height: 79px;
       padding: 14px 0;
       border: 0;
       border-top: 1px solid var(--picker-line);
       background: transparent;
       color: var(--picker-ink);
       text-align: left;
       cursor: pointer;
       font: inherit;
       transition:
           padding 180ms ease,
           background 180ms ease;
   }
   
   .subject-choice:last-of-type {
       border-bottom: 1px solid var(--picker-line);
   }
   
   .subject-choice:hover,
   .subject-choice:focus-visible {
       padding-right: 8px;
       padding-left: 8px;
       background: #f2f7f0;
       outline: none;
   }
   
   .subject-choice:focus-visible {
       box-shadow: inset 3px 0 var(--picker-green);
   }
   
   .subject-choice__number {
       align-self: start;
       padding-top: 4px;
       color: #89938a;
       font-size: 10px;
       font-weight: 600;
       font-variant-numeric: tabular-nums;
   }
   
   .subject-choice__content {
       display: flex;
       flex-direction: column;
       gap: 5px;
       min-width: 0;
   }
   
   .subject-choice__name {
       font-family: 'Space Grotesk', sans-serif;
       font-size: 17px;
       font-weight: 500;
       letter-spacing: -0.035em;
       line-height: 1.3;
   }
   
   .subject-choice__description {
       color: var(--picker-muted);
       font-family: 'IBM Plex Sans', sans-serif;
       font-size: 10px;
       line-height: 1.6;
   }
   
   .subject-choice__arrow {
       color: var(--picker-green);
       font-size: 18px;
       transition: transform 180ms ease;
   }
   
   .subject-choice:hover .subject-choice__arrow {
       transform: translate(3px, -3px);
   }
   
   .subject-modal__hint {
       margin: 17px 0 0;
       color: var(--picker-muted);
       font-family: 'IBM Plex Sans', sans-serif;
       font-size: 10px;
       line-height: 1.7;
   }
   
   /* Responsive */
   
   @media (max-width: 620px) {
       .subject-modal {
           padding: 14px;
       }
   
       .subject-modal__panel {
           grid-template-columns: 1fr;
           width: min(430px, 100%);
           max-height: calc(100dvh - 28px);
       }
   
       .subject-modal__intro {
           min-height: 0;
           padding: 25px 24px 21px;
       }
   
       .subject-modal__intro-content {
           margin: 27px 0 24px;
       }
   
       .subject-modal__intro h2 {
           font-size: clamp(32px, 9vw, 42px);
       }
   
       .subject-modal__intro h2 br {
           display: none;
       }
   
       .subject-modal__intro-content p {
           max-width: 310px;
           margin-top: 13px;
       }
   
       .subject-modal__footnote {
           padding-top: 12px;
       }
   
       .subject-modal__choices {
           padding: 27px 24px 22px;
       }
   
       .subject-modal__close {
           top: 13px;
           right: 13px;
           width: 32px;
           height: 32px;
       }
   
       .subject-modal__eyebrow {
           padding-right: 35px;
       }
   
       .subject-choice {
           min-height: 69px;
       }
   
       .subject-choice__name {
           font-size: 16px;
       }
   }
   
   @media (max-width: 360px) {
       .subject-modal__intro,
       .subject-modal__choices {
           padding-right: 18px;
           padding-left: 18px;
       }
   
       .subject-modal__intro h2 {
           font-size: 31px;
       }
   
       .subject-choice {
           grid-template-columns: 21px minmax(0, 1fr) 16px;
           gap: 9px;
       }
   
       .subject-choice__description {
           font-size: 9px;
       }
   }
   
   @media (prefers-reduced-motion: reduce) {
       .subject-modal,
       .subject-modal__panel,
       .subject-modal__close,
       .subject-choice,
       .subject-choice__arrow {
           transition: none;
       }
   }