@layer components {
  .shell:has(.booking-toggle:checked) .booking-curtain {
    transform: translateY(0);
  }

  .week-nav {
    .portal-icon {
      width: 24px;
      height: 24px;
      font-size: 24px;
    }
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 20px;
    button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 44px;
      padding: 8px 12px;
      border: 0;
      border-radius: 10px;
      background: transparent;
      color: var(--ink);
      font-weight: bold;
    }
    .week-label {
      background: #fff;
      font-size: 0.9rem;
    }
    @media (max-width: 430px) {
      button {
        gap: 4px;
        padding: 6px;
        font-size: 0.8rem;
      }
      .portal-icon {
        width: 20px;
        height: 20px;
      }
    }
  }

  .timetable {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: var(--timetable-rows);
    gap: 3px;
    padding: 0;
    background: transparent;

    .day {
      display: grid;
      min-height: 30px;
      place-items: center;
      color: var(--ink-soft);
      font-size: 0.66rem;
      font-weight: bold;
      &[data-weekday="0"] {
        color: var(--danger);
      }
      &[data-weekday="6"] {
        color: var(--accent);
      }
    }
    .cell {
      min-height: 0;
      border: 0;
      border-radius: 10px;
      background: #fff;
      transition:
        transform 0.12s ease,
        outline-color 0.12s ease;

      &[data-state="reserved"] {
        background: var(--reservation-color, var(--theme));
      }
      &[data-state="unavailable"] {
        background: repeating-linear-gradient(
          135deg,
          #aec8cb 0 6px,
          #d7e5e4 6px 12px
        );
      }
      &[data-mine="true"] {
        outline: 3px solid var(--ink);
        outline-offset: -3px;
      }
      &[data-selected="true"] {
        outline: 3px solid var(--accent);
        outline-offset: -3px;
        transform: scale(0.93);
      }
      &[data-past="true"][data-state="available"] {
        background: #e9ecef;
        cursor: default;
      }
      .shell:has(.booking-toggle:checked) &:not(:disabled):active {
        transform: scale(0.88);
      }
    }
  }

  .legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 14px;
    color: var(--ink-soft);
    font-size: 0.75rem;
    span {
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }
    i {
      display: inline-block;
      width: 12px;
      height: 12px;
      border-radius: 10px;
      background: #fff;
    }
    .mine {
      outline: 2px solid var(--ink);
      outline-offset: -2px;
    }
    .busy {
      background: var(--theme);
    }
  }

  .booking-toggle {
    display: none;
  }

  .booking-actions {
    position: fixed;
    z-index: 8;
    right: max(20px, calc((100vw - 1280px) / 2));
    bottom: max(22px, env(safe-area-inset-bottom));
    display: flex;
    gap: 12px;
    align-items: center;
    .fab {
      position: relative;
      z-index: 2;
      overflow: hidden;
      transition:
        width 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.2s ease,
        background 0.2s ease;
      .fab-plus {
        position: absolute;
        right: 0;
        top: 0;
        display: grid;
        width: 58px;
        height: 58px;
        place-items: center;
        font-size: 2rem;
        opacity: 1;
        transform: rotate(0);
        filter: blur(0);
        transition:
          opacity 0.2s ease,
          transform 0.35s ease,
          filter 0.25s ease;
      }
      .fab-label {
        position: absolute;
        left: 25px;
        top: 0;
        display: flex;
        height: 58px;
        align-items: center;
        white-space: nowrap;
        font-weight: bold;
        opacity: 0;
        filter: blur(10px);
        transform: translateX(20px);
        transition:
          opacity 0.22s ease,
          filter 0.3s ease,
          transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
      }
      .fab-arrow {
        position: absolute;
        right: 25px;
        top: 17px;
        display: flex;
        opacity: 0;
        filter: blur(8px);
        transform: translateX(-8px);
        transition:
          opacity 0.25s ease,
          filter 0.3s ease,
          transform 0.4s ease;
      }
      &:disabled {
        cursor: default;
        .fab-label,
        .fab-arrow {
          color: rgb(255 255 255 / 55%);
        }
      }
    }
    .cancel-booking {
      position: relative;
      z-index: 1;
      display: inline-flex;
      gap: 6px;
      align-items: center;
      justify-content: center;
      min-width: 112px;
      height: 58px;
      padding: 0 16px;
      border: 0;
      border-radius: 999px;
      background: var(--surface);
      color: var(--ink);
      font-weight: bold;
      opacity: 0;
      visibility: hidden;
      filter: blur(8px);
      transform: translateX(126px);
      transition:
        opacity 0.18s ease,
        filter 0.25s ease,
        transform 0.4s ease,
        visibility 0.4s ease;
      pointer-events: none;
    }
  }

  .booking-toggle:checked ~ .booking-actions {
    .fab {
      width: 120px;
      .fab-plus {
        opacity: 0;
        filter: blur(8px);
        transform: rotate(90deg) scale(0.6);
      }
      .fab-label {
        opacity: 1;
        filter: blur(0);
        transform: translateX(0);
        transition-delay: 0.13s;
      }
      .fab-arrow {
        opacity: 1;
        filter: blur(0);
        transform: translateX(0);
        transition-delay: 0.2s;
      }
    }
    .cancel-booking {
      opacity: 1;
      visibility: visible;
      filter: blur(0);
      transform: translate(0, 0);
      pointer-events: auto;
    }
  }

  .department-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
    padding: 0;
    border: 0;
    legend {
      width: 100%;
      margin-bottom: 10px;
      font-size: 0.88rem;
      font-weight: bold;
    }
    .department-choice {
      display: block;
      width: fit-content;
      position: relative;
      cursor: pointer;
      input {
        position: absolute;
        width: 1px;
        height: 1px;
        min-height: 0;
        padding: 0;
        opacity: 0;
      }
      span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 36px;
        padding: 8px 16px;
        border-radius: 999px;
        background: var(--surface);
        transition:
          background 0.2s ease,
          color 0.2s ease;
        font-size: 0.88rem;
        font-weight: bold;
        &::before {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: var(--color, var(--ink-soft));
          content: "";
        }
      }
      input:checked + span {
        background: var(--theme-pale);
        color: var(--ink);
      }
      input:checked + span::after {
        margin-left: auto;
        content: "✓";
      }
      input:focus-visible + span {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }
    }
  }

  .month-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    button {
      display: grid;
      place-items: center;
      width: 40px;
      height: 40px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: var(--surface);
    }
  }

  .month-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    span,
    button {
      display: grid;
      place-items: center;
      min-height: 38px;
      font-size: 0.85rem;
    }
    button {
      padding: 0;
      border: 0;
      border-radius: 10px;
      background: transparent;
      color: var(--ink);
    }
    [data-weekday="0"] {
      color: var(--danger);
    }
    [data-weekday="6"] {
      color: var(--accent);
    }
    [data-current-month="false"] {
      opacity: 0.4;
    }
    [data-in-week="true"] {
      background: var(--theme-pale);
      font-weight: bold;
      opacity: 1;
    }
  }

  .timetable-frame {
    --label-width: 32px;
    --slot-height: 46px;
    --timetable-rows: 38px var(--slot-height) var(--slot-height)
      calc(var(--slot-height) / 2) repeat(5, var(--slot-height));
    position: relative;
    left: 50%;
    display: grid;
    grid-template-columns: var(--label-width) minmax(0, 1fr);
    gap: 3px;
    width: min(calc(100vw - 20px), 1280px);
    padding: 3px;
    border-radius: var(--radius-outer) var(--radius-outer) 10px
      var(--radius-outer);
    background: var(--surface);
    overflow: hidden;
    transform: translateX(-50%);
    @media (min-width: 640px) {
      --label-width: 50px;
      --slot-height: 58px;
    }
  }

  .slot-column {
    display: grid;
    grid-template-rows: var(--timetable-rows);
    gap: 3px;
    .slot-label {
      display: grid;
      place-items: center;
      color: var(--ink-soft);
      font-size: 0.68rem;
      font-weight: bold;
    }
  }

  .days-viewport {
    min-width: 0;
    overflow: hidden;
  }

  .week-track {
    display: flex;
    width: 100%;
    .timetable {
      flex: 0 0 100%;
      min-width: 0;
    }
    &.is-moving {
      transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
      pointer-events: none;
    }
  }
}