@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@200..800&display=swap');

@keyframes nav-lessons-hue {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

:root {
  --border-color: #ccd5db;
  --border-emphasis-color: #777a7c;
  --selected-color: #d0d7df;
  --link-color: #176eb6;
  --sidebar-module-background-color: #f2f4f5;
}

body.school {
  font-size: 16px;

  .nav-lessons {
    cursor: pointer;
    display: none;
    width: 36px;
    height: auto;
    border: 0;
    background: transparent;
    padding: 0;
    animation: nav-lessons-hue 6s linear infinite;
  }

  .row.page-content {
    padding: 20px 0px;
  }

  .school-container {
    * {
      line-height: 2em;
      font-family: Assistant, sans-serif;
      margin: 0;
      box-sizing: border-box;
      margin: 0;
    }

    ol,
    ul {
      list-style-position: inside;
    }
  }

  .school-container.classroom {
    min-height: 100vh;

    width: 100%;
    display: grid;
    grid-template-columns: 450px 1fr;

    label {
      margin: 0;
    }

    a {
      color: var(--link-color);
      &:hover {
        color: black;
      }
    }

    .school-sidebar {
      height: 100%;
      max-height: 100vh;
      overflow: scroll;

      .sidebar-header {
        top: 0;
        position: sticky;
        z-index: 2;
        background-color: white;
        font-weight: bold;
        padding: 0.8rem;
        border: 1px solid var(--border-color);
        border-right: 0;
        display: flex;
        gap: 10px;
        align-items: center;

        > label, > .course-name {
          flex-grow: 1;
          font-size: 1.2rem;
        }
        .course-duration {
          display: none;
        }
        .back-to-lobby {
          display: flex;
          align-items: center;
          cursor: pointer;
          img {
            width: 20px;
            height: 20px;
          }
          &:hover { opacity: 0.6; }
        }
        .course-options {
          width: 20px;
          height: 20px;
          cursor: pointer;
        }
        .close-sidebar {
          width: 20px;
          height: 20px;
          cursor: pointer;
          display: none;
        }
      }

      .sidebar-module {
        background: var(--sidebar-module-background-color);
        border: 0;
        border-left: 1px solid var(--border-color);
        transition: height 0.1s ease-in-out;

        .sidebar-module-header {
          padding: 1.6rem;
          cursor: pointer;
          display: grid;
          grid-template-columns: 1fr 20px;
          border-bottom: solid 1px var(--border-color);

          align-items: center;
          * {
            cursor: pointer;
          }
          .opener {
            font-size: 1.4rem;
            display: grid;
            align-items: center;
            justify-content: center;
            transition: transform 0.1s ease-in-out;
            transform-origin: center center;
          }
        }

        &:last-child {
          .sidebar-lesson:last-child {
            border-bottom: solid 1px var(--border-color);
          }
        }

        .sidebar-lesson {
          display: none;
          justify-content: space-between;
          align-items: center;
          /* Four logical slots, right→left in RTL:
             ?lock | !label | ?skip | !progress-icon.
             The two `auto` tracks collapse to 0 when their optional item is
             absent, so non-locked / non-selected rows look identical to the
             old 2-column layout. */
          grid-template-columns: auto 1fr auto 20px;
          width: 100%;
          padding: 0.8rem 1.6rem;
          background: white;
          cursor: pointer;

          &:hover,
          &.selected {
            background: var(--selected-color);
          }

          * {
            cursor: pointer;
          }

          /* Pin each item to its logical column so auto-placement can't put
             the icon (or anything else) on the wrong line if an optional
             slot is missing. */
          > label             { grid-column: 2; }
          > .skip-lesson-sidebar { grid-column: 3; }
          > img.play-icon {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            grid-column: 4;
          }

          &.locked {
            &,
            * {
              color: #b0b0b0;
              cursor: not-allowed;
            }
            pointer-events: none;

            &::before {
              content: '';
              display: inline-block;
              grid-column: 1;
              width: 18px;
              height: 18px;
              background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 1024 1024"><path fill="%23ababab" d="M800 384h-32V261.872C768 115.024 661.744 0 510.816 0C359.28 0 256 117.472 256 261.872V384h-32c-70.592 0-128 57.408-128 128v384c0 70.592 57.408 128 128 128h576c70.592 0 128-57.408 128-128V512c0-70.592-57.408-128-128-128zM320 261.872C320 152.784 394.56 64 510.816 64C625.872 64 704 150.912 704 261.872V384H320V261.872zM864.001 896c0 35.28-28.72 64-64 64h-576c-35.28 0-64-28.72-64-64V512c0-35.28 28.72-64 64-64h576c35.28 0 64 28.72 64 64v384zm-352-320c-35.344 0-64 28.656-64 64c0 23.632 12.96 44.032 32 55.12V800c0 17.664 14.336 32 32 32s32-14.336 32-32V695.12c19.04-11.088 32-31.504 32-55.12c0-35.344-28.656-64-64-64z"/></svg>');
              background-size: contain;
              background-repeat: no-repeat;
              background-position: center;
              color: #ababab;
            }
          }
        }

        &.open {
          height: min-content;

          .sidebar-lesson {
            display: grid;
            gap: 10px;
          }

          .sidebar-module-header {
            .opener {
              transform: rotate(-90deg) translate(-4px, -5px);
            }
          }
        }
      }
    }

    .lesson {
      height: 100vh;
      display: grid;
      /* The video pane caps at 450px and takes 45% of the viewport below that,
         but never goes under 340px. A fixed height here was the original bug
         behind "there is no fullscreen button": the row grew shorter than the
         fixed-size player and clipped the control strip out of view.
         The 340px floor answers the second half of the same complaint. Vimeo
         collapses its right-hand controls — fullscreen included — behind a
         "more" chevron once the video is too narrow, and measured against the
         real player that happens at a player box under ~250px tall (the video
         is letterboxed to 16:9, so 250px tall is only ~444px wide). 340px of
         pane leaves ~284px for the player once the nav has taken its share,
         which renders the full control bar with room to spare. */
      /* The video pane's height is one length that all three layouts write, so
         switching between them interpolates instead of jumping — the panes
         grow and shrink into place. --tabs-height is what the materials pane
         keeps when it is folded, and is the one number the maximised video
         state has to know. */
      --tabs-height: 58px;
      grid-template-rows: var(--video-pane, clamp(340px, 45vh, 450px)) minmax(0, 1fr);
      transition: grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1);

      @media (prefers-reduced-motion: reduce) {
        transition: none;
      }

      /* Text folded away: the video takes everything the tabs row does not
         need. The row stays on screen — it holds the button that unfolds it. */
      &.no-materials {
        --video-pane: calc(100% - var(--tabs-height));

        .lesson-materials {
          /* The same 58px the row has when open — collapsing it to `auto` let
             the tabs lose height the moment the text folded away. */
          grid-template-rows: 58px;
          overflow: hidden;
        }

        .lesson-content-viewer,
        .skip-lesson-floating,
        .current-lesson-title {
          display: none;
        }
      }

      &.no-videos {
        --video-pane: 0px;

        .lesson-videos {
          /* Collapsed to nothing rather than display:none, so the pane can be
             seen shrinking on the way out. */
          overflow: hidden;
        }
        .lesson-materials {
          grid-template-rows: 58px 58px auto 1fr;

          .lesson-materials-nav {
            height: 60px;
            border: solid 1px var(--border-color);
          }

          .current-lesson-title {
            padding: 0.8rem;
            border-top: solid 1px var(--border-color);
            gap: 4px;
            border-left: 0;
            border-right: 0;
            display: flex;
            align-items: center;

            > .lesson-header {
              flex-grow: 1;
              display: flex;
              justify-content: center;

              .lesson-title {
                font-size: 1rem;
                font-weight: bold;
                white-space: break-spaces;
                line-height: 1.2rem;
              }
            }

            > * {
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
          }
        }
      }

      .lesson-videos {
        padding: 0;
        border-left: 0;
        border-right: 0;
        /* The nav sizes to its content and the player takes whatever is left.
           minmax(0, 1fr) rather than 1fr so that track is allowed to shrink
           below the player's natural size instead of overflowing the pane. */
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);

        .current-lesson-title {
          position: relative;
          overflow: visible;
          display: flex;
          width: 100%;
          justify-content: center;
          align-items: center;
          gap: 8px;

          > .lesson-title {
            flex-grow: 1;
            font-size: 1rem;
            font-weight: bold;
            text-align: center;
            width: min-content;
            white-space: break-spaces;
            line-height: 1.2rem;
          }

          .lesson-header {
            .multiple-video-indication {
              font-size: 0.8rem;
              background: red;
              text-align: center;
              border-radius: 4px;
              color: white;
              width: max-content;
              padding-left: 4px;
              position: absolute;
              left: 50%;
              transform: translate(-50%, 28px);
              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0,0,256,256' width='16px' height='16px' fill-rule='nonzero'%3E%3Cg fill='%23ffffff' fill-rule='nonzero' stroke='none' stroke-width='1' stroke-linecap='butt' stroke-linejoin='miter' stroke-miterlimit='10' stroke-dasharray='' stroke-dashoffset='0' font-family='none' font-weight='none' font-size='none' text-anchor='none' style='mix-blend-mode: normal'%3E%3Cg transform='scale(5.12,5.12)'%3E%3Cpath d='M25,2c-12.6907,0 -23,10.3093 -23,23c0,12.69071 10.3093,23 23,23c12.69071,0 23,-10.30929 23,-23c0,-12.6907 -10.30929,-23 -23,-23zM25,4c11.60982,0 21,9.39018 21,21c0,11.60982 -9.39018,21 -21,21c-11.60982,0 -21,-9.39018 -21,-21c0,-11.60982 9.39018,-21 21,-21zM25,11c-1.65685,0 -3,1.34315 -3,3c0,1.65685 1.34315,3 3,3c1.65685,0 3,-1.34315 3,-3c0,-1.65685 -1.34315,-3 -3,-3zM21,21v2h1h1v13h-1h-1v2h1h1h4h1h1v-2h-1h-1v-15h-1h-4z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
              background-repeat: no-repeat;
              background-position: right 4px center;
              padding-right: 26px;

              &.hidden {
                display: none;
              }
            }
          }
        }

        .lesson-videos-nav {
          padding: 0.8rem;
          border: solid 1px var(--border-color);
          gap: 4px;
          border-left: 0;
          border-right: 0;
          display: flex;
          justify-content: space-between;

          .lesson-header {
            flex-grow: 1;
            display: flex;
            justify-content: center;

            .lesson-title {
              font-size: 1rem;
              font-weight: bold;
            }
          }
          > * {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }

          a.hide {
            display: none;
          }
        }

        .video-container {
          background: black;
          display: grid;
          place-items: center;
          min-height: 0;
          overflow: hidden;

          &.no-videos-available {
            background-color: white;
            color: black;
          }

          /* The player fills the box it is given rather than carrying a size of
             its own, so its control bar always lands on the bottom edge of
             something visible. Vimeo letterboxes the video inside the iframe,
             which is why no aspect-ratio is needed here — and why an
             aspect-ratio would in fact break it: with width:auto the iframe
             stretches to the grid area and then derives its height from the
             ratio, overriding height:100% and growing past the row. */
          iframe {
            width: 100%;
            height: 100%;
            /* Explicit rather than relying on the deprecated frameborder
               attribute: the UA's default 2px iframe border is added outside a
               content-box height and puts the control bar back over the edge. */
            border: 0;
            box-sizing: border-box;
            /* A grid item will not shrink below its intrinsic size by default,
               and an iframe's is 150px — enough to push the controls out of a
               short pane on a small or heavily zoomed window. */
            min-height: 0;
            min-width: 0;
          }

          video {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }
      }

      .lesson-materials {
        display: grid;
        /* Middle `auto` row holds the floating skip button when it's visible
           and collapses to 0 when it isn't, so the materials layout stays
           identical for non-sequential courses. */
        grid-template-rows: 58px auto 1fr;
        overflow: scroll;

        .current-lesson-title {
          display: none;
        }

        .lesson-materials-nav {
          list-style: none;
          display: flex;
          gap: 1.6rem;
          padding: 0.8rem 0 0 0;
          border-bottom: 2px solid var(--border-color);

          li {
            display: grid;
            align-items: center;
            line-height: 1rem;
            padding: 0.8rem;
            padding-top: 0;
            padding-bottom: 0;
            cursor: pointer;

            &.selected {
              font-weight: bold;
              border-bottom: solid 2px var(--border-emphasis-color);
              position: relative;
              padding-bottom: 2px;
              top: 2px;
            }

            /* One three-state control instead of a pair of folds: the icons
               show how the pane is divided, and the filled band is the share
               the video gets. Wrapped in a hairline frame so the three read as
               one switch, with a thumb that slides between them. */
            &.layout-toggle {
              /* Logical, so the auto margin still pushes it to the far edge in
                 either direction — and the switch keeps clear of the screen
                 edge instead of sitting flush against it. */
              margin-inline-start: auto;
              margin-inline-end: 0.8rem;
              align-self: center;
              position: relative;
              display: flex;
              align-items: center;
              gap: 2px;
              padding: 2px;
              border: 1px solid #e6e8ea;
              border-radius: 7px;
              background: rgba(0, 0, 0, 0.02);

              /* The selected segment's fill, as one element that moves instead
                 of three that light up — that is what makes it read as a
                 switch being thrown. JS sets the two custom properties from
                 the segment's own box, so this needs no arithmetic and works
                 in either text direction. */
              .layout-thumb {
                position: absolute;
                top: 0;
                left: 0;
                width: var(--thumb-w, 0);
                height: var(--thumb-h, 0);
                border-radius: 4px;
                background: rgba(0, 0, 0, 0.08);
                transform: translate(var(--thumb-x, 0), var(--thumb-y, 0));
                transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                            width 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                            height 0.2s cubic-bezier(0.4, 0, 0.2, 1);
                pointer-events: none;
              }

              .layout-option {
                position: relative;
                z-index: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 3px 5px;
                border: 0;
                border-radius: 4px;
                background: transparent;
                color: #9aa0a6;
                cursor: pointer;
                transition: color 0.15s ease;

                &:hover {
                  color: #4a4f54;
                }

                &.selected {
                  color: #1a1a1a;
                }
              }
            }

          }
        }

        .lesson-content-viewer {
          padding: 0.8rem;
          line-height: 1.4rem;
          height: 100%;
          overflow: scroll;

          pre {
            line-height: 1.4rem;
          }

          img {
            max-width: 100%;
            height: auto;
          }

          .notebook-container {
            position: relative;
            width: 100%;
            height: 300px;
            overflow: auto;
            border: 1px solid #ccc;
            font-family: monospace;
            font-size: 1.2rem;
            line-height: 24px;

            .notebook-lines {
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              height: 2000px; /* long enough */
              background: repeating-linear-gradient(to bottom, #ffff001a, #ffff001a 23px, #e0e0e0 24px);
              pointer-events: none;
              z-index: 0;
            }

            .student-notes {
              position: relative;
              z-index: 1;
              padding: 0 8px; /* no vertical padding */
              min-height: 100%;
              outline: none;
              white-space: pre-wrap;
              line-height: 24px;
            }
            .student-notes * {
              line-height: 24px;
            }
          }

          .faq-item {
            border-bottom: 1px solid #e5e7eb;
            padding: 0;

            summary {
              padding: 12px 0;
              font-weight: 700;
              font-size: 15px;
              cursor: pointer;
              list-style: none;
              display: flex;
              justify-content: space-between;
              align-items: center;

              &::after {
                content: '+';
                font-size: 20px;
                font-weight: 400;
                color: #999;
                transition: transform 0.2s;
              }

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

            &[open] summary::after {
              content: '−';
            }

            .faq-answer {
              padding: 0 0 12px;
              color: #555;
            }
          }

          .wp-block-table {
            td {
              border: solid 1px #656f74;
              padding: 4px 6px;
            }
          }

          .broker-table {
            width: 100%;
            border-collapse: collapse;

            thead th {
              color: white;
              font-weight: 600;
            }

            tbody tr {
              border-bottom: 1px solid #e5e7eb;

              &:nth-child(even) {
                background: #f0f6ff;
              }

              &[data-href] {
                cursor: pointer;

                &:hover {
                  background: #e8f0fe;
                }
              }
            }

            .cta-link {
              display: inline-block;
              color: white;
              text-decoration: none;
              margin-top: 8px;
            }
          }
        }
      }
    }
  }

  .personal-container {
    padding: 20px 50px;

    .class-header {
      h1 {
        font-size: 1.6rem;
      }
      h2 {
        font-size: 1.3rem;
      }
      margin: 20px 0;
    }
    .school-content {
      .message {
        width: 100%;
        border: solid 1px #59c359;
        background: rgba(0, 128, 0, 0.18);
        padding: 10px;
      }

      .form-content {
        padding-top: 30px;

        .row {
          display: grid;
          grid-gap: 10px;
          padding: 10px;
          grid-template-columns: 100px 1fr;
          align-items: center;

          label {
            margin-bottom: 0;
          }

          input {
            border: solid 1px #e0e0e0;
            padding: 4px;
          }

          button {
            color: #404040;
            background: #fafafa;
            border: solid 1px #808080;
            cursor: pointer;
          }

          .description {
            grid-column: 2;
            font-size: 0.85em;
          }
        }
      }
    }
  }

  .school-container.lobby {
    min-height: 100vh;

    margin: 0 auto;

    .school-header {
      padding: 0 20px;
      display: flex;
      flex-direction: column;
      gap: 8px;

      .school-header-greeting {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        color: #374151;

        .hello {
          font-weight: 500;
        }

        .hello-back {
          color: #2563eb;
          font-size: 14px;
          text-decoration: none;
          &:hover {
            text-decoration: underline;
          }
        }
      }

      .school-header-nav {
        display: flex;
        align-items: center;
      }

      .tabs {
        display: flex;
        align-items: stretch;
        > a {
          padding: 8px 14px;
          border-radius: 8px 8px 0 0;
          font-size: 14px;
          transition: background-color 0.15s;
          display: inline-flex;
          align-items: center;
          &.selected {
            background-color: #efefef;
          }
          &:hover {
            text-decoration: none;
            background-color: #e0e0e0;
          }
        }

        .help-link {
          gap: 4px;
          color: #6b7280;
          &:hover {
            color: #2563eb;
          }
        }

        .divider {
          width: 1px;
          border-left: solid 1px white;
        }
      }
    }

    .school-courses {
      padding: 20px;
      padding-top: 2px;
      display: grid;
      gap: 20px;

      .welcome-back {
        background-image: none;
        background-size: cover;
        background-color: rgba(255, 255, 255, 0.5);
        padding: 20px 40px;
        background: #fafafa;
        border-radius: 10px;
        display: grid;
        grid-template-areas:
          'slogan'
          'about';
        row-gap: 20px;
        justify-content: start;

        .welcome-about {
          grid-area: about;
          font-size: 1.2rem;
          line-height: 1.6rem;
          font-weight: bold;
          color: black;
          background: linear-gradient(90deg, transparent, white);
          padding: 4px 8px;
          display: inline-block;
          border-radius: 20px;
          height: fit-content;
          align-self: end;
          justify-self: end;
        }

        .welcome-slogan {
          grid-area: slogan;
          font-size: 3rem;
          line-height: 1.6rem;
          font-weight: bold;
          color: black;
          justify-self: end;
          align-self: center;
          height: fit-content;
          text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5), -1px 1px 0 rgba(255, 255, 255, 0.5),
            1px -1px 0 rgba(255, 255, 255, 0.5), -1px -1px 0 rgba(255, 255, 255, 0.5);
        }
      }

      .courses-header {
        padding: 5px 20px;
        color: #494949;
        background: #e6f1f9;
        border-radius: 5px;
      }

      .course-list {
        box-sizing: border-box;
        display: grid;
        width: 100%;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        grid-gap: 10px;
        overflow: hidden;
        * {
          box-sizing: border-box;
        }

        > .course-card {
          width: 100%;
          background: #f6f6f6;
          display: grid;
          align-content: start;
          gap: 6px;
          grid-template-rows: max-content 1fr;
          position: relative;

          &.featured {
            border: solid 2px #b908b9;

            &::after {
              content: 'Popular';
              position: absolute;
              top: 10px;
              left: 10px;
              background: #b908b9;
              color: white;
              font-weight: bold;
              padding: 0px 6px;
              border-radius: 4px;
              box-shadow: 0px 0px 10px white;
            }
          }

          .course-icon {
            max-width: 100%; /* Make sure the image does not exceed the parent's width */
            max-height: 100%; /* Make sure the image does not exceed the parent's height */
            object-fit: contain; /* Ensure the image is contained within the box while keeping its aspect ratio */
            width: auto;
            height: auto;
          }

          .course-details {
            padding: 0 10px 10px 10px;
            position: relative;
            display: flex;
            flex-direction: column;
            > * {
              margin: 0;
              line-height: 1.3rem;
            }

            .course-name {
              font-weight: bold;
              font-size: 1.1rem;
            }

            .course-author {
              font-weight: 100;
              font-size: 0.9rem;
            }

            .read-more-indicator {
              background: #186ff9;
              cursor: pointer;
              width: max-content;
              padding: 0 7px;
              border-radius: 7px;
              color: white;
              font-weight: bold;
              font-size: 1rem;
              margin: 0;
              height: 16px;
              display: flex;
              align-items: end;
              position: relative;
              top: -7px;
            }

            &:has(.read-more-indicator:hover) .course-short-desc {
              overflow: auto;

              .course-read-more {
                display: block;
              }
              .read-more-arrow {
                display: block;
              }
            }

            .course-short-desc {
              margin: 10px 0;
              font-size: 0.95rem;
              max-height: calc(1.2rem * 4);
              text-overflow: ellipsis;
              overflow: hidden;

              &,
              * {
                line-height: 1.2rem;
              }

              &:has(.course-read-more:hover) {
                overflow: auto;

                .course-read-more {
                  display: block;
                }
                .read-more-arrow {
                  display: block;
                }
              }

              .course-read-more {
                display: none; /* Hidden by default */
                position: absolute;
                bottom: 60px;
                background-color: #fff;
                color: #333;
                padding: 10px;
                width: calc(100% - 20px);
                max-height: calc(1.2rem * 15); /* Limit balloon height to 10 rows */
                overflow-y: auto; /* Make it scrollable if the content is too long */
                box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Drop shadow */
                border-radius: 5px;
                z-index: 9998;
              }
              .read-more-arrow {
                display: none;
                position: absolute;
                width: 10px;
                height: 10px;
                background-color: white;
                bottom: 55px;
                left: 50%;
                transform: translate(50%) rotate(45deg);
                z-index: 9999;
              }
            }
          }
        }
      }

      .course-details {
        .course-details {
          display: flex;
          flex-direction: column;
          > * {
            margin: 0;
            line-height: 1.3rem;
          }
          .course-icon {
            width: 100%;
            max-height: 200px;
            object-fit: cover;
            overflow: hidden;
          }

          .course-name {
            margin-top: 14px;
            font-size: 1.2rem;
            font-weight: bold;
          }
          .course-author {
            font-weight: 100;
          }
          .course-short-desc {
            background: #f8f8f8;
            padding: 10px;
            margin: 10px 0;
          }

          .course-price {
            font-weight: bold;
            margin-bottom: 8px;
          }

          .buy-now {
            border: 0;
            cursor: pointer;
            background: #b908b9;
            color: white;
            line-height: 2rem;
            padding: 5px 10px;
            font-weight: bold;
            width: 100%;
            max-width: 200px;
            text-align: center;
          }
        }
      }

      .my-courses {
        .course-card {
          .course-details {
            margin-top: 10px;
          }
          .course-short-desc {
            margin-bottom: 10px;
          }

          .course-progress {
            flex-grow: 1;
            align-content: end;

            .course-progress-bar {
              line-height: 2rem;
              border-radius: 1rem;
              padding: 0 1rem;
              margin-bottom: 10px;
              border: solid 1px #46da9c;
              display: block;
              width: 100%;
            }
          }

          .enter-course {
            border: 0;
            cursor: pointer;
            background: #b908b9;
            color: white;
            line-height: 2rem;
            padding: 5px 10px;
            font-weight: bold;
            width: 100%;
          }

          .diploma-download {
            display: block;
            text-align: center;
            border: 2px solid #b08d57;
            color: #b08d57;
            line-height: 2rem;
            padding: 5px 10px;
            font-weight: bold;
            width: 100%;
            margin-top: 6px;
            text-decoration: none;
            box-sizing: border-box;
            &:hover {
              background: #b08d57;
              color: white;
              text-decoration: none;
            }
          }
        }
      }

      .available-courses {
        .course-card {
          .course-details {
            .course-price {
              font-weight: bold;
              flex-grow: 1;
              align-content: end;
            }

            .add-to-cart {
              background-color: #b908b9;
              border: 0;
              line-height: 2rem;
              color: white;
              text-align: center;
              text-decoration: none;
              padding: 5px 10px;
              font-weight: bold;
              margin-top: 10px;
              display: flex;
              width: 100%;
              align-items: center;
              justify-content: center;
              cursor: pointer;
              gap: 10px;
              > img {
                width: 20px;
                height: 20px;
              }
            }
          }

          .course-icon {
            max-width: 100%; /* Make sure the image does not exceed the parent's width */
            max-height: 100%; /* Make sure the image does not exceed the parent's height */
            object-fit: contain; /* Ensure the image is contained within the box while keeping its aspect ratio */
            width: auto;
            height: auto;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 1350px) {
  body.school {
    .school-container.classroom {
      grid-template-columns: 300px 1fr;
    }
  }
}

@media screen and (max-width: 991px) {
  body.school {
    font-size: 14px;

    nav.navbar {
      justify-content: flex-end;
      padding: 8px;
      min-height: 68px;
    }

    .school-container.lobby .school-courses {
      .welcome-back {
        row-gap: 10px;

        .welcome-title {
          height: 180px;
          width: 180px;
          font-size: 1.6rem;
          line-height: 1.8rem;
        }
        .welcome-slogan {
          font-size: 2.5rem;
        }
        .welcome-about {
          font-size: 1rem;
          font-weight: normal;
        }
      }
    }
  }
}

@media screen and (max-width: 900px) {
  body.school {
    .school-container.classroom {
      .nav-lessons {
        display: block;
        position: relative;
      }
    }

    .school-container.lobby .school-courses {
      .welcome-back {
        padding: 6px 12px;

        .welcome-title {
          height: 120px;
          width: 120px;
          font-size: 1.3rem;
          box-shadow: 8px 2px 0px #43aaff;
          line-height: 1.4rem;
        }
        .welcome-slogan {
          font-size: 1.8rem;
          line-height: 1.8rem;
          text-align: center;
        }
        .welcome-about {
          font-size: 0.9rem;
          font-weight: normal;
        }
      }
    }

    .school-container.classroom {
      grid-template-columns: 1fr;

      .school-sidebar {
        display: none;
        width: 100%;
        z-index: 2;

        &.show {
          display: block;
          position: fixed;
          top: 0;
          height: 100vh;
          left: 0;
          overflow: scroll;
          background: white;
        }

        .sidebar-header {
          .close-sidebar {
            display: block;
            cursor: pointer;
            width: 20px;
            height: 20px;
          }
          > label, > .course-name {
            font-size: 1rem;
            line-height: 1.2;
            text-align: center;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 500px) {
  body.school {
    font-size: 12px;

    .school-sidebar .sidebar-header {
      > label, > .course-name {
        font-size: 1rem;
        line-height: 1.2;
        text-align: center;
      }
    }

    .personal-container {
      .school-content .form-content .row {
        grid-template-columns: 80px 1fr;
      }
    }

    .school-container {
      &.lobby {
        .school-courses {
          .welcome-back {
            padding: 6px 12px;

            .welcome-title {
              height: 100px;
              width: 100px;
              font-size: 0.95rem;
              box-shadow: 6px 2px 0px #43aaff;
            }
            .welcome-slogan {
              font-size: 2rem;
              line-height: 1.8rem;
            }
            .welcome-about {
              display: none;
            }
          }

          .courses-header {
            font-size: 1.4rem;
            padding: 5px 20px;
            color: #494949;
            background: #e6f1f9;
            border-radius: 40px;
          }
        }
      }

      &.classroom {
        .lesson {
          .lesson-videos .lesson-videos-nav {
            font-size: 0.8rem;
          }
          .lesson-materials .lesson-materials-nav {
            gap: 0.2rem;
            font-size: 0.8rem;
            /* The row is as tall as the stacked switch here, so it needs room
               under the tabs as well as over them for the switch to look
               centred in it rather than sitting low. */
            padding-bottom: 0.8rem;

            /* Labels sit on the bottom edge by the active-tab underline. The
               items still stretch, so the underline stays on the row's edge —
               only the text moves down. Scoped to the tabs so the switch keeps
               its own centring. */
            li[tab-id] {
              align-items: end;
            }

            /* Stacked on a phone: the four tab labels need the width more than
               the switch does. The thumb follows without any change — it is
               placed from the segment's box, which is now above or below its
               neighbours rather than beside them. */
            .layout-toggle {
              flex-direction: column;
              gap: 1px;

              .layout-option {
                padding: 2px 4px;

                svg {
                  width: 16px;
                  height: 16px;
                }
              }
            }
          }

          /* A stacked switch is taller than the 58px the row has on a desktop,
             so the row takes its height from its content here — and the
             maximised video state has to leave that much behind. */
          --tabs-height: 104px;

          .lesson-materials {
            grid-template-rows: auto auto 1fr;
          }

          &.no-materials .lesson-materials {
            grid-template-rows: auto;
          }

          textarea.student-notes {
            font-size: 0.8rem;
          }
        }
      }
    }
  }
}

.lobby-footer {
  text-align: center;
  padding: 24px 0 8px;
  margin-top: 32px;
  border-top: 1px solid var(--border-color);
}

.lobby-footer a {
  color: #6b7280;
  font-size: 14px;
  text-decoration: none;
}

.lobby-footer a:hover {
  color: #2563eb;
  text-decoration: underline;
}

/* Nav icon blink animation */
@keyframes nav-blink {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

/* Classroom loading overlay */
.classroom-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s;
}

.classroom-loader.hidden {
  opacity: 0;
  pointer-events: none;
}

.classroom-loader-content {
  text-align: center;
  direction: rtl;
}

.classroom-loader-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  margin: 0 auto 16px;
  animation: loader-spin 0.8s linear infinite;
}

@keyframes loader-spin {
  to { transform: rotate(360deg); }
}

.classroom-loader-text {
  font-size: 1.1rem;
  font-weight: 500;
  color: #fff;
}

.classroom-loader-fallback {
  display: none;
  margin-top: 20px;
}

.classroom-loader-fallback.show {
  display: block;
}

.classroom-loader-fallback p {
  color: #d1d5db;
  font-size: 0.9rem;
  margin-bottom: 12px;
}

.classroom-loader-fallback button {
  padding: 8px 20px;
  margin: 0 4px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  color: #374151;
  transition: background 0.15s;
}

.classroom-loader-fallback button:hover {
  background: #f3f4f6;
}

.nav-lessons, .nav-lessons.blink {
  position: relative;
  overflow: visible !important;
  z-index: 1;
}

.nav-lessons.blink::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: darkorange;
  z-index: -1;
  animation: nav-blink 0.5s ease-in-out 4;
}

/* ---------------------------------------------------------------------------
   Sequential-progress "Skip lesson" buttons
   - .skip-lesson-floating: a centered pill below the video, mobile only.
     Auto-hidden when the mobile sidebar overlay (`.school-sidebar.show`) is
     open so it can't be seen through it.
   - .skip-lesson-sidebar: a small inline button rendered into every counted
     sidebar row; CSS makes it visible only on the currently `.selected` row,
     so the user always has a one-click skip on the lesson they're playing.
   --------------------------------------------------------------------------- */

/* Floating skip button — sits inside .lesson-materials between the tab nav
   and the content viewer (an extra `auto` row in the materials grid holds
   it). Compact pill, centered, only on mobile, and hidden while the mobile
   sidebar overlay is up. */
body.school .lesson-materials .skip-lesson-floating {
  display: none;
}
@media screen and (max-width: 900px) {
  /* `block` + `width: fit-content` + `margin: 14px auto 8px` is the most
     reliable centering — it doesn't rely on justify-self (which the grid
     parent can flake on for inline-block items) or on the parent being a
     flex/grid with the right alignment. */
  body.school .lesson-materials .skip-lesson-floating:not(.hidden) {
    display: block;
    width: fit-content;
    margin: 14px auto 0;
    padding: 4px 14px;
    background: #fff;
    color: #1a1a1a;
    border: 1px solid #1a1a1a;
    border-radius: 999px;
    font-size: 0.85rem;
    line-height: 1.3;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: background 0.15s ease, color 0.15s ease;
  }
  body.school .lesson-materials .skip-lesson-floating:not(.hidden):hover {
    background: #1a1a1a;
    color: #fff;
  }
  /* Hide while the mobile sidebar overlay is up. */
  body.school:has(.school-sidebar.show) .lesson-materials .skip-lesson-floating {
    display: none;
  }
}

/* Sidebar inline "דלג" button. Always slotted into column 3 by the base
   .sidebar-lesson grid; CSS just controls whether it's visible. We only
   show it on the currently `.selected` row — that's the lesson the
   student is playing, so it's the only one a skip is meaningful for. */
.sidebar-lesson .skip-lesson-sidebar {
  display: none;
}
.sidebar-lesson.selected .skip-lesson-sidebar {
  display: inline-block;
  margin-inline: 8px;
  padding: 2px 10px;
  background: #fff;
  color: #333;
  border: 1px solid #999;
  border-radius: 999px;
  font-size: 0.78rem;
  line-height: 1.3;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.sidebar-lesson.selected .skip-lesson-sidebar:hover {
  background: #1a1a1a;
  color: #fff;
  border-color: #1a1a1a;
}

/* ---------------------------------------------------------------------------
   Module quiz
   - The quiz row sits last inside its module in the sidebar and reuses the
     .sidebar-lesson grid, so it lines up with the lessons above it. The score
     badge takes the same column the "דלג" button uses on lesson rows.
   - .quiz-view takes over the whole .lesson area (see .lesson.quiz-mode): a
     quiz has no video, no materials tabs and no notes, so keeping the lesson
     chrome around it would just leave dead controls on screen.
   --------------------------------------------------------------------------- */

/* Quiz shield. Sits in the same 4th column the lesson rows give their
   play/text icon, so the icons line up down the sidebar. Everything is drawn
   with currentColor, so state is a single `color` swap — and the
   `.sidebar-lesson.locked *` rule greys it out on its own. */
body.school .sidebar-quiz > .quiz-icon {
  grid-column: 4;
  width: 20px;
  height: 20px;
  color: #4a4a4a;
  overflow: visible;
}
body.school .sidebar-quiz > .quiz-icon .quiz-icon-shield {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linejoin: round;
  /* Dashed until the student has actually submitted an attempt. Dash lengths
     match the rhythm of play.svg / text.svg's dashed ring (~4 units in the
     50-unit viewBox) so the icons still read as a set. */
  stroke-dasharray: 4 3.4;
}
body.school .sidebar-quiz > .quiz-icon.attempted .quiz-icon-shield {
  stroke-dasharray: none;
}
/* Verdict colours only exist for a quiz with a minimum pass score; a
   completed self-check quiz stays neutral (see showSidebar). */
body.school .sidebar-quiz > .quiz-icon.passed {
  color: #16a34a;
}
body.school .sidebar-quiz > .quiz-icon.failed {
  color: #c62828;
}
body.school .sidebar-quiz > .quiz-icon .quiz-icon-mark {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
}
body.school .sidebar-quiz > .quiz-icon .quiz-icon-dot {
  fill: currentColor;
}

body.school .sidebar-quiz .quiz-score-badge {
  grid-column: 3;
  justify-self: end;
  padding: 1px 9px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: #fff;
  color: #333;
  font-size: 0.78rem;
  line-height: 1.6;
  white-space: nowrap;
}
body.school .sidebar-quiz .quiz-score-badge.passed {
  background: #e8f8f1;
  border-color: #46da9c;
  color: #12805a;
}
body.school .sidebar-quiz .quiz-score-badge.failed {
  background: #fdecec;
  border-color: #e08c8c;
  color: #a32020;
}

/* Hidden until showQuiz flips .lesson into quiz-mode. These carry the full
   `.school-container.classroom` chain on purpose: the base `.lesson`,
   `.lesson-videos` and `.lesson-materials` rules are nested under it, so a
   shorter selector here would lose the specificity contest and leave the
   lesson chrome on screen behind the quiz. */
body.school .quiz-view {
  display: none;
}
body.school .school-container.classroom .lesson.quiz-mode {
  grid-template-rows: 1fr;
}
body.school .school-container.classroom .lesson.quiz-mode .lesson-videos,
body.school .school-container.classroom .lesson.quiz-mode .lesson-materials {
  display: none;
}
body.school .school-container.classroom .lesson.quiz-mode .quiz-view {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100vh;
  overflow: hidden;
}

body.school .quiz-view .quiz-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0.8rem;
  border: solid 1px var(--border-color);
  border-left: 0;
  border-right: 0;
}
body.school .quiz-view .quiz-title {
  flex-grow: 1;
  text-align: center;
  font-size: 1rem;
  font-weight: bold;
}

body.school .quiz-view .quiz-body {
  overflow-y: auto;
  padding: 1.6rem;
}

body.school .quiz-view .quiz-intro {
  color: #555;
  margin-bottom: 1.2rem;
}

body.school .quiz-view .quiz-question {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1.2rem;
  margin-bottom: 1rem;
  background: #fff;
}

body.school .quiz-view .quiz-question-text {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-weight: 600;
  line-height: 1.6em;
  margin-bottom: 0.8rem;
}
body.school .quiz-view .quiz-question-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sidebar-module-background-color);
  border: 1px solid var(--border-color);
  color: #333;
  font-size: 0.85rem;
  line-height: 24px;
  text-align: center;
}

body.school .quiz-view .quiz-answers {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.school .quiz-view .quiz-answer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  font-weight: normal;
  margin: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}
body.school .quiz-view .quiz-answer:hover {
  background: var(--sidebar-module-background-color);
}
body.school .quiz-view .quiz-answer.checked {
  border-color: var(--border-emphasis-color);
  background: var(--selected-color);
}
body.school .quiz-view .quiz-answer input[type='radio'] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}

/* Review state — shown only when the quiz reveals its answers. */
body.school .quiz-view .quiz-answer.reviewed {
  cursor: default;
}
body.school .quiz-view .quiz-answer.reviewed:hover {
  background: #fff;
}
body.school .quiz-view .quiz-answer.reviewed.correct {
  background: #e8f8f1;
  border-color: #46da9c;
}
body.school .quiz-view .quiz-answer.reviewed.correct:hover {
  background: #e8f8f1;
}
body.school .quiz-view .quiz-answer.reviewed.wrong {
  background: #fdecec;
  border-color: #e08c8c;
}
body.school .quiz-view .quiz-answer.reviewed.wrong:hover {
  background: #fdecec;
}
/* The student's own pick on a quiz that doesn't reveal answers: shown so the
   review still says what they chose, but deliberately neutral — no green or
   red, because we're not telling them whether it was right. */
body.school .quiz-view .quiz-answer.reviewed.chosen {
  background: var(--selected-color);
  border-color: var(--border-emphasis-color);
}
body.school .quiz-view .quiz-answer.reviewed.chosen:hover {
  background: var(--selected-color);
}

body.school .quiz-view .quiz-answer-mark {
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  font-weight: bold;
}
body.school .quiz-view .quiz-answer.reviewed.correct .quiz-answer-mark {
  color: #12805a;
}
body.school .quiz-view .quiz-answer.reviewed.wrong .quiz-answer-mark {
  color: #a32020;
}

body.school .quiz-view .quiz-score-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 1.6rem;
  margin-bottom: 1rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--sidebar-module-background-color);
}
body.school .quiz-view .quiz-score-card.passed {
  background: #e8f8f1;
  border-color: #46da9c;
}
body.school .quiz-view .quiz-score-card.failed {
  background: #fdecec;
  border-color: #e08c8c;
}
body.school .quiz-view .quiz-score-value {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.2em;
}
body.school .quiz-view .quiz-score-detail {
  color: #555;
}

body.school .quiz-view .quiz-verdict {
  text-align: center;
  margin-bottom: 1.2rem;
}
body.school .quiz-view .quiz-verdict.passed { color: #12805a; font-weight: 600; }
body.school .quiz-view .quiz-verdict.failed { color: #a32020; font-weight: 600; }

body.school .quiz-view .quiz-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 1rem 0 2rem;
}
body.school .quiz-view .quiz-actions button {
  padding: 8px 28px;
  background: #1a1a1a;
  color: #fff;
  border: 1px solid #1a1a1a;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.4;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
body.school .quiz-view .quiz-actions button:hover:not(:disabled) {
  background: #fff;
  color: #1a1a1a;
}
body.school .quiz-view .quiz-actions button:disabled {
  background: #fff;
  color: #b0b0b0;
  border-color: var(--border-color);
  cursor: not-allowed;
}
body.school .quiz-view .quiz-actions .quiz-reset {
  background: #fff;
  color: #1a1a1a;
}
body.school .quiz-view .quiz-actions .quiz-reset:hover {
  background: #1a1a1a;
  color: #fff;
}