@layer lesson-schedule;

@layer lesson-schedule {
  .lesson-schedule-page {
    --schedule-border: light-dark(#d7d7d7, #62676b);
    --schedule-muted: light-dark(#555, #c8c8c8);
    --schedule-surface: light-dark(#f5f5f5, #282b2e);
    --schedule-surface-strong: light-dark(#e9e9e9, #202326);
    --schedule-border-focus: #8ab4ffb8;
    --schedule-focus: #8ab4ff;
    --border-radius: .4rem;
    --schedule-accent-soft: color-mix(in srgb, var(--accent-color) 12%, var(--pagina-sfondo));
    --schedule-sticky-top: 0px;
    border: 1px solid var(--schedule-border);
    border-radius: var(--border-radius);
    color: var(--pagina-testo);
    padding-block-end: 3rem;
    box-shadow: 0 0.1rem 0.5rem light-dark(rgb(0 0 0 / 0.18), transparent);
  }

    .lesson-schedule-page :is(a, button, input, select):focus-visible {
      border-color: var(--schedule-border-focus);
      outline: 3px solid var(--schedule-focus);
      box-shadow: none;
    }

  .schedule-pending {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pagina-testo);
    text-align: center;
    font-size: 1.4rem;
    font-weight: 700;
    padding: 0.8rem;
  }

  .lesson-schedule-introduction {
    color: var(--schedule-muted);
    font-size: 1.05rem;
    margin: 0 0 1.5rem;
    max-inline-size: 65ch;
  }

  .lesson-schedule {
    container-type: inline-size;
    min-inline-size: 0;
    border-radius: .4rem;
  }

    .lesson-schedule[aria-busy="true"] {
      cursor: progress;
    }

  .lesson-schedule-message {
    background: var(--schedule-surface);
    border-inline-start: 0.35rem solid var(--accent-color);
    margin: 1rem;
    padding: 0.8rem 1rem;
    border-radius: .2em;
  }

    .lesson-schedule-message.error {
      --message-error: light-dark(#a61b1b, #ff9e9e);
      border-inline-start-color: var(--message-error);
      color: var(--message-error);
    }

    .lesson-schedule-message > button {
      background: transparent;
      border: 1px solid currentColor;
      border-radius: 0.25rem;
      color: inherit;
      font: inherit;
      font-weight: 700;
      margin-inline-start: 0.65rem;
      min-block-size: 2.75rem;
      padding: 0.35rem 0.7rem;
    }

  .lesson-schedule-filters {
    padding: 1em;
  }

    .lesson-schedule-filters > fieldset {
      display: grid;
      gap: 0.7rem;
    }

      .lesson-schedule-filters > fieldset[disabled] {
        opacity: 0.6;
      }

  .schedule-toolbar-primary,
  .schedule-toolbar-secondary {
    display: grid;
    gap: 0.6rem;
    min-inline-size: 0;
  }

  .schedule-toolbar-primary {
    grid-template-columns: minmax(6.5rem, 0.7fr) minmax(0, 1.3fr);
  }

  .course-filter {
    grid-column: 1 / -1;
  }

  .search-filter {
    grid-column: 2;
    grid-row: 1;
  }

  .search-filter,
  .select-filter {
    min-inline-size: 0;
  }

    .search-filter > input,
    .select-filter > select {
      appearance: none;
      background: var(--pagina-sfondo) linear-gradient(45deg, transparent 50%, currentColor 50%) calc(100% - 1rem) 50% / 0.42rem 0.42rem no-repeat, linear-gradient(135deg, currentColor 50%, transparent 50%) calc(100% - 0.72rem) 50% / 0.42rem 0.42rem no-repeat;
      border: 1px solid var(--schedule-border);
      border-radius: 0.3rem;
      box-sizing: border-box;
      color: var(--pagina-testo);
      font: inherit;
      inline-size: 100%;
      block-size: 2.65rem;
      min-block-size: 2.65rem;
      padding: 0.45rem 2rem 0.45rem 0.7rem;
      line-height: normal;
      vertical-align: middle;
    }

    .search-filter > input {
      appearance: auto;
      background: var(--pagina-sfondo);
      padding-inline-end: 0.7rem;
      transition: border-color .2s ease, box-shadow .2s ease;
    }

    .select-filter > select {
      appearance: auto;
      background: var(--pagina-sfondo);
      padding-inline-end: 0.7rem;
    }

  .schedule-toolbar-secondary {
    align-items: center;
    grid-template-areas:
      "period . lane ."
      "warning warning . ."
      "display display . ."
      "calendar calendar xlsx print";
    grid-template-columns: max-content minmax(0, 1fr) max-content max-content;
  }

  .schedule-switch-group,
  .display-options {
    align-items: center;
    display: flex;
    gap: 0.45rem;
    min-inline-size: 0;
  }

  .lane-filter {
    grid-area: lane;
  }

  .period-filter {
    grid-area: period;
  }

  .schedule-year-warning {
    grid-area: warning;
    justify-self: center;
  }

  .display-options {
    grid-area: display;
    justify-content: start;
  }

  .lesson-schedule abafr-switch {
    --abafr-switch-width: auto;
    --abafr-switch-height: 2.35rem;
    --abafr-switch-thumb: 1.65rem;
    --abafr-switch-thumb-zone: 2.25rem;
    --abafr-switch-padding: 0.15rem;
    flex: 0 0 auto;
  }

  .schedule-switch-group abafr-switch {
    --abafr-switch-width: 3.65rem;
  }

  .display-options abafr-switch {
    --abafr-switch-width: 7.25rem;
  }

    .display-options abafr-switch[name="showCalendarGrid"] {
      display: none !important;
    }

  .schedule-export {
    background: var(--pagina-sfondo);
    border: 1px solid var(--schedule-border);
    border-radius: 0.3rem;
    box-sizing: border-box;
    color: var(--pagina-testo);
    cursor: pointer;
    font: inherit;
    padding: 0;
    block-size: 2.35rem;
    inline-size: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

    .schedule-export[data-schedule-export="xlsx"] {
      grid-area: xlsx;
    }

    .schedule-export[data-schedule-export="pdf"] {
      grid-area: print;
    }

    .schedule-export:disabled {
      cursor: not-allowed;
      opacity: 0.55;
    }

  .schedule-didactic-calendar {
    align-items: center;
    color: var(--pagina-testo);
    display: inline-flex;
    justify-content: center;
    font-weight: normal;
    gap: 0.4rem;
    grid-area: calendar;
    justify-self: start;
    text-decoration: none;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
    text-transform: lowercase;
    border: 1px solid var(--schedule-border);
    box-sizing: border-box;
    block-size: 2.35rem;
    padding: 0 .75em;
    border-radius: 4em;
    font-size: .85em;
    line-height: 1;
  }

  .schedule-didactic-calendar > svg {
      block-size: 1em;
      flex: 0 0 auto;
      inline-size: 1em;
    }

  .schedule-export > svg {
    block-size: 1.25rem;
    display: block;
    inline-size: 1.25rem;
    margin: auto;
  }

  .schedule-didactic-calendar.is-unavailable {
    cursor: not-allowed;
    opacity: 0.55;
  }

  @container (min-width: 34rem) and (max-width: 63.99rem) {
    .schedule-toolbar-secondary {
      grid-template-areas:
        "period . . lane ."
        "warning warning warning . ."
        "display display calendar xlsx print";
      grid-template-columns: max-content minmax(0, 1fr) max-content max-content max-content;
    }
  }

  .schedule-results {
    position: relative;
  }

  .schedule-desktop {
    display: none;
  }

  .schedule-mobile {
    display: grid;
    gap: 1.25rem;
  }

  .schedule-group {
    display: grid;
    gap: 0.65rem;
  }

    .schedule-group > h3 {
      background: var(--schedule-surface-strong);
      border-inline-start: 0.35rem solid var(--accent-color);
      font-size: 1rem;
      line-height: 1.25;
      margin: 0;
      padding: 0.65rem 0.75rem;
      text-transform: uppercase;
    }

  .schedule-card {
    background: var(--pagina-sfondo);
    border: 1px solid var(--schedule-border);
    border-radius: 0.35rem;
    display: grid;
    gap: 0.8rem;
    padding: 1rem;
  }

    .schedule-card > header {
      display: grid;
      gap: 0.2rem;
    }

      .schedule-card > header > h4 {
        font-size: 1.12rem;
        line-height: 1.2;
        margin: 0;
      }

      .schedule-card > header > .schedule-teaching-details > p,
      .schedule-card > header > small {
        color: var(--schedule-muted);
        margin: 0;
      }

    .schedule-card a {
      color: var(--pagina-testo);
      text-decoration-thickness: 0.08em;
      text-underline-offset: 0.17em;
    }

    .schedule-card > header > .schedule-teaching-details {
      align-items: center;
      display: flex;
      gap: 0.5rem;
    }

      .schedule-card > header > .schedule-teaching-details > .schedule-teacher {
        margin: 0;
        min-inline-size: 0;
      }

    .schedule-card .schedule-teaching-actions {
      align-items: center;
      display: flex;
      flex: none;
      gap: 0.2rem;
      margin-inline-start: auto;
    }

    .schedule-card .schedule-teaching-action {
      align-items: center;
      block-size: 2rem;
      color: var(--schedule-muted);
      display: inline-flex;
      inline-size: 2rem;
      justify-content: center;
      text-decoration: none;
    }

      .schedule-card .schedule-teaching-action > svg {
        block-size: 1rem;
        display: block;
        inline-size: 1rem;
      }

      .schedule-card .schedule-teaching-action:not(.is-unavailable):hover {
        color: var(--accent-color);
      }

      .schedule-card .schedule-teaching-action:not(.is-unavailable):focus-visible {
        color: var(--accent-color);
        outline: 2px solid currentColor;
        outline-offset: 0.15em;
      }

      .schedule-mobile .schedule-card .schedule-teaching-action.is-unavailable {
        visibility: hidden;
      }

  .schedule-card,
  .schedule-teaching,
  .schedule-slot > * {
    min-inline-size: 0;
    overflow-wrap: anywhere;
  }

  .schedule-note {
    background: var(--schedule-accent-soft);
    border-radius: 0.25rem;
    margin: 0;
    padding: 0.6rem 0.7rem;
  }

    .schedule-note > strong {
      display: block;
      font-size: 0.78rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

  .schedule-days {
    display: grid;
    gap: 0.75rem;
    margin: 0;
  }

  .schedule-day {
    display: grid;
    gap: 0.3rem;
  }

    .schedule-day > dt {
      font-size: 0.82rem;
      font-weight: 800;
      text-transform: uppercase;
    }

    .schedule-day > dd {
      margin: 0;
    }

  .schedule-slots {
    display: grid;
    gap: 0.35rem;
    height: 100%;
  }

  .schedule-slot {
    align-items: start;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.3rem;
    grid-template-columns: max-content minmax(0, 1fr);
    min-inline-size: 0;
  }

  .schedule-time {
    font-weight: 400;
    font-size: 1.3em;
  }

  .schedule-slot:not(:last-child) {
    border-block-end: 1px dotted var(--schedule-border);
    padding-block-end: 1em;
  }

  .schedule-slot-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    min-inline-size: 0;
  }

    .schedule-slot-tags > abafr-tag {
      justify-self: start;
    }

      .schedule-slot-tags > abafr-tag > :not(.abafr-tag-label) {
        box-sizing: border-box !important;
      }

      .schedule-slot-tags > abafr-tag > :nth-child(1 of :not(.abafr-tag-label)),
      .schedule-slot-tags > abafr-tag > :nth-child(2 of :not(.abafr-tag-label)) {
        inline-size: 2.5em !important;
        justify-content: center !important;
      }

      .schedule-slot-tags > abafr-tag.schedule-slot-weeks > :nth-child(2 of :not(.abafr-tag-label)) {
        inline-size: auto !important;
        min-inline-size: 2.5em;
        padding-inline: 0.45em !important;
        white-space: nowrap;
      }
      .schedule-slot-tags > abafr-tag.schedule-slot-room > :nth-child(2 of :not(.abafr-tag-label)) {
        background-color: var(--tag-solid-color) !important;
        border-color: var(--tag-solid-color) !important;
        border-inline-start: 1px solid var(--tag-color-soft) !important;
        color: var(--tag-color-soft) !important;
      }

      .schedule-slot-tags > abafr-tag.schedule-slot-room > :nth-child(3 of :not(.abafr-tag-label)) {
        inline-size: 7.5em !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
      }

  .schedule-empty {
    margin: 0;
    padding: 1rem;
    text-align: center;
    font-family: 'Atkinson Hyperlegible Next';
    font-weight: bold;
    font-size: 2em;
  }

  @media (width < 64rem) {
    .lesson-schedule-page {
      border: 0;
      border-radius: 0;
      box-shadow: none;
      inline-size: 100vw;
      margin-inline: calc(50% - 50vw);
      padding: 0;
    }

    .lesson-schedule {
      border-radius: 0;
    }

    .schedule-card {
      border: 1px solid var(--schedule-border);
      border-radius: .4em;
      gap: 0;
      padding: 0;
      box-shadow: 0 0.1rem 0.2rem light-dark(rgb(0 0 0 / 0.18), transparent);
      margin: .5rem;
    }

      .schedule-card > header {
        gap: 0.35rem;
        padding: 0.5rem 1rem 0;
      }

        .schedule-card > header > .schedule-teaching-actions {
          justify-self: end;
          margin: 0;
        }

        .schedule-card > header > .schedule-teacher {
          color: var(--schedule-muted);
          font-size: 0.8em;
          margin: 0;
        }

        .schedule-card > header > h4 {
          font-size: 1rem;
        }

        .schedule-card > header > small {
          padding-block-end: 0.25rem;
        }

      .schedule-card .schedule-teaching-action {
        block-size: 2.25rem;
        inline-size: 2.25rem;
      }

        .schedule-card .schedule-teaching-action > svg {
          block-size: 1.15rem;
          inline-size: 1.15rem;
        }

      .schedule-card > .schedule-teaching-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
        padding: 0.55rem 1rem 0.75rem;
      }

        .schedule-card > .schedule-teaching-tags > abafr-tag {
          font-size: 0.76rem;
        }

      .schedule-card > .schedule-note {
        border-radius: 0;
        margin: 0;
        padding: 0.5rem 1rem;
      }

      .schedule-card > .schedule-days {
        gap: 0;
      }

        .schedule-card > .schedule-days > .schedule-day {
          border-block-start: 1px solid var(--schedule-border);
          gap: 0.35rem;
          padding: 0.65rem 1rem;
        }
  }

  @container (min-width: 64rem) {
    .schedule-toolbar-primary {
      grid-template-columns: minmax(7.5rem, 0.7fr) minmax(16rem, 1.8fr) minmax(14rem, 1.2fr);
    }

    .course-filter,
    .search-filter {
      grid-column: auto;
      grid-row: auto;
    }

    .schedule-toolbar-secondary {
      grid-template-areas: "period lane warning display calendar xlsx print";
      grid-template-columns: max-content max-content minmax(0, 1fr) max-content max-content max-content max-content;
    }

    .lane-filter {
      border-inline-start: 1px solid var(--schedule-border);
      padding-inline-start: 0.6rem;
    }

    .display-options {
      justify-content: end;
    }

      .display-options abafr-switch[name="showCalendarGrid"] {
        display: inline-block !important;
      }

    .schedule-mobile {
      display: none;
    }

    .schedule-desktop {
      display: block;
    }

    .lesson-schedule-filters {
      background: var(--pagina-sfondo);
      border-block-end: 1px solid var(--schedule-border);
      inset-block-start: 0;
      position: sticky;
      z-index: 5;
      border-radius: var(--border-radius) var(--border-radius) 0 0;
    }

    .schedule-columns-sentinel {
      block-size: 1px;
      inset-block-start: 24rem;
      inset-inline-start: 0;
      position: absolute;
    }

    .lesson-schedule:not(.schedule-columns-only) :is(.schedule-calendar, .schedule-timeline) > header {
      inset-block-start: var(--schedule-toolbar-height, 0px);
    }

    .lesson-schedule:not(.schedule-columns-only) .schedule-calendar > section > header {
      inset-block-start: calc(var(--schedule-toolbar-height, 0px) + 2.45rem);
    }

    .lesson-schedule:not(.schedule-columns-only) .schedule-timeline > section > header {
      inset-block-start: calc(var(--schedule-toolbar-height, 0px) + 3.4rem);
    }

    .lesson-schedule.schedule-columns-only > .lesson-schedule-filters {
      position: static;
    }

    .schedule-calendar {
      background: var(--pagina-sfondo);
      font-size: 0.72rem;
    }

      .schedule-calendar > header,
      .schedule-calendar > section > article {
        display: grid;
        grid-template-columns: minmax(0, 18rem) repeat(6, minmax(0, 1fr));
      }

      .schedule-calendar > header {
        background: var(--pagina-sfondo);
        inset-block-start: 0;
        position: sticky;
        text-align: center;
        z-index: 3;
        font-family: var(--font-tag);
        font-weight: 800;
        font-size: 1.2em;
      }

        .schedule-calendar > header > :is(strong, span) {
          border-block-end: 1px solid var(--schedule-border);
          border-inline-end: 1px solid var(--schedule-border);
          padding: 0.45rem;
        }

        .schedule-calendar > header > :last-child,
        .schedule-calendar > section > article > :last-child {
          border-inline-end: 0;
        }

      :is(.schedule-calendar, .schedule-timeline) > section > header {
        background: var(--pagina-sfondo);
        position: sticky;
        text-transform: uppercase;
        z-index: 2;
        text-align: left;
        font-size: 2.5em;
        border-top: 4px solid var(--schedule-border);
        border-bottom: 1px solid var(--schedule-border);
      }

      .schedule-calendar > section > header {
        inset-block-start: 2.45rem;
      }

      .schedule-timeline > section > header {
        inset-block-start: 3.4rem;
      }

        :is(.schedule-calendar, .schedule-timeline) > section > header > h3 {
          grid-column: 1 / -1;
          font-size: 1.2em;
          margin: 0;
          padding: .2em 1em;
        }

      .schedule-calendar > section > article > div {
        border-block-end: 1px solid var(--schedule-border);
        border-inline-end: 1px solid var(--schedule-border);
        min-inline-size: 0;
        overflow-wrap: anywhere;
        padding: .8em;
      }

        .schedule-calendar > section > article > div:first-child {
          font-size: 1rem;
          padding: 0.3rem;
        }

      .schedule-calendar .schedule-slots {
        gap: 0.3rem;
      }

      .schedule-calendar .schedule-slot {
        font-size: 0.78rem;
        grid-template-columns: max-content minmax(0, 1fr);
      }

    .schedule-timeline {
      background: var(--pagina-sfondo);
      border-block-start: 1px solid var(--schedule-border);
      box-sizing: border-box;
      font-size: 0.72rem;
    }

      .schedule-timeline > header,
      .schedule-timeline > section > header,
      .schedule-timeline > section > article {
        display: grid;
        grid-template-columns: minmax(0, 18rem) minmax(0, 8.5rem) repeat(30, minmax(0, 1fr));
      }

      .schedule-timeline > header {
        background: var(--pagina-sfondo);
        inset-block-start: 0;
        position: sticky;
        text-align: center;
        z-index: 3;
        font-family: var(--font-tag);
        font-weight: 700;
      }

        .schedule-timeline > header > span {
          border-block-end: 1px solid var(--schedule-border);
          border-inline-end: 1px dotted var(--schedule-border);
          box-sizing: border-box;
          min-inline-size: 0;
          padding: 0.3rem 0.1rem;
          white-space: nowrap;
        }

        .schedule-timeline > header > .schedule-timeline-teaching-heading {
          grid-column: 1 / 3;
          grid-row: 1 / 3;
          font-size: 2em;
          display: flex;
          line-height: 1;
          align-items: center;
          justify-content: center;
          text-transform: lowercase;
        }

        .schedule-timeline > header > span:nth-child(2) {
          grid-column: 3 / 13;
        }

        .schedule-timeline > header > span:nth-child(3) {
          grid-column: 13 / 23;
        }

        .schedule-timeline > header > span:nth-child(4) {
          grid-column: 23 / -1;
        }

        .schedule-timeline > header > span:nth-child(2),
        .schedule-timeline > header > span:nth-child(3),
        .schedule-timeline > header > span:nth-child(4),
        .schedule-timeline > header > span:nth-child(5),
        .schedule-timeline > header > span:nth-child(15),
        .schedule-timeline > header > span:nth-child(25) {
          border-inline-start: 2px solid var(--schedule-border);
        }

        .schedule-timeline > header > span:nth-child(n + 5) {
          color: var(--schedule-muted);
          font-size: 0.67rem;
          grid-row: 2;
        }

      .schedule-timeline > section > article > div {
        border-block-end: 1px solid var(--schedule-border);
        border-inline-end: 1px dotted var(--schedule-border);
        min-inline-size: 0;
        overflow-wrap: anywhere;
      }

        .schedule-timeline > section > article > div:first-child {
          font-size: 1rem;
          grid-row: span var(--timeline-row-count);
          padding: 0.3rem;
        }

        .schedule-timeline > section > article > div:nth-child(31n + 2):not(.schedule-pending) {
          font-size: 0.85rem;
          padding: 0.3rem;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }

        .schedule-timeline > section > article > div:nth-child(31n + 3),
        .schedule-timeline > section > article > div:nth-child(31n + 13),
        .schedule-timeline > section > article > div:nth-child(31n + 23) {
          border-inline-start: 2px solid var(--schedule-border);
        }

        .schedule-timeline > section > article > div:not(:first-child):not(:nth-child(31n + 2)) {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 0.2em;
          padding: .4em .2em;
        }

          .schedule-timeline > section > article > div:not(:first-child):not(:nth-child(31n + 2)) > span {
            align-items: center;
            color: transparent;
            display: flex;
            font-size: 0.64rem;
            font-weight: 800;
            height: 1.28rem;
            justify-content: center;
            padding: .2em;
            white-space: nowrap;
          }

            .schedule-timeline > section > article > div:not(:first-child):not(:nth-child(31n + 2)) > span.active:first-child {
              background: color-mix(in srgb, #78bce0 45%, var(--pagina-sfondo));
              color: light-dark(#2f7298, #fff);
            }

            .schedule-timeline > section > article > div:not(:first-child):not(:nth-child(31n + 2)) > span.active:last-child {
              background: color-mix(in srgb, #c7b18a 48%, var(--pagina-sfondo));
              color: light-dark(#796544, #fff);
            }

        .schedule-timeline > section > article > div:nth-child(31n + 2) > :is(strong, span, small) {
          display: block;
          margin: 0;
          padding: 0;
        }

        .schedule-timeline > section > article > div:nth-child(31n + 2) > strong {
          font-weight: 700;
          white-space: nowrap;
        }

        .schedule-timeline > section > article > div:nth-child(31n + 2) > :is(span, small) {
          color: var(--schedule-muted);
          font-size: 0.68rem;
        }

        .schedule-timeline > section > article > div:nth-child(31n + 2) > abafr-tag {
          align-self: start;
          font-size: 0.68rem;
        }

    :is(.schedule-calendar, .schedule-timeline) > section > article > .schedule-pending {
      grid-column: 2 / -1;
      border-inline-end: 0;
    }

    .schedule-teaching {
      display: flex;
      gap: 0;
      flex-direction: column;
      justify-content: center;
      height: 100%;
      padding: 0 0 .4em .4em;
    }

      .schedule-teaching > strong {
        font-size: 1em;
        line-height: 1.2;
      }

      .schedule-teaching > .schedule-teaching-details > .schedule-teacher {
        color: var(--schedule-muted);
        font-size: 0.8em;
      }

    .schedule-teaching-details {
      display: flex;
      align-items: flex-end;
      gap: 0.35rem;
      min-height: 2em;
      flex-grow: 1;
      padding-top: .2em;
    }

      .schedule-teaching-details > .schedule-teacher {
        flex: 1 1 auto;
        min-inline-size: 0;
      }

    .schedule-teaching > .schedule-teaching-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.25rem;
      padding-top: .4em;
    }

    .schedule-teaching-tags > abafr-tag {
      font-size: 0.76rem;
    }

    .schedule-teaching > small {
      background: var(--schedule-accent-soft);
      padding: 0.3rem;
    }

    .schedule-teaching-actions {
      align-self: start;
      display: flex;
      flex: none;
      gap: 0.5em;
      margin-inline-start: auto;
    }

    .schedule-teaching-action {
      align-items: center;
      block-size: 1em;
      color: var(--schedule-muted);
      display: inline-flex;
      justify-content: center;
      inline-size: 1em;
      text-decoration: none;
    }

      .schedule-teaching-action > svg {
        block-size: 100%;
        display: block;
        inline-size: 100%;
      }

      .schedule-teaching-action:not(.is-unavailable):hover {
        color: var(--accent-color);
      }

      .schedule-teaching-action:not(.is-unavailable):focus-visible {
        color: var(--accent-color);
        outline: 2px solid currentColor;
        outline-offset: 0.15em;
      }

      .schedule-teaching-action.is-unavailable {
        opacity: 0.62;
        position: relative;
      }

      .schedule-teaching-action.is-unavailable::after {
        border-block-start: 0.125em solid currentColor;
        content: "";
        inline-size: 1.25em;
        inset-inline-start: -0.125em;
        position: absolute;
        transform: rotate(-45deg);
      }
  }

  @media (prefers-reduced-motion: reduce) {
    .lesson-schedule-page * {
      scroll-behavior: auto !important;
    }
  }

  @media print {
    .lesson-schedule-filters,
    .lesson-schedule-message,
    .schedule-mobile {
      display: none !important;
    }

    .schedule-desktop {
      display: block !important;
    }

    .schedule-calendar,
    .schedule-timeline {
      font-size: 7pt;
      min-inline-size: 0 !important;
    }
  }
}