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

  .week-nav { 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: .9rem; }
    @media (max-width: 430px) {
      button { gap: 4px; padding: 6px; font-size: .8rem; }
      .arrow-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: .66rem; font-weight: bold;
      &[data-weekday="0"] { color: var(--danger); }
      &[data-weekday="6"] { color: var(--accent); }
    }
    .cell {
      min-height: 0;
      border: 0;
      border-radius: 6px;
      background: #fff;
      transition: transform .12s ease, outline-color .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(.93); }
      &[data-past="true"][data-state="available"] { background: #e9ecef; cursor: default; }
      .shell:has(.booking-toggle:checked) &:not(:disabled):active { transform: scale(.88); }
    }
  }

  .legend { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; color: var(--ink-soft); font-size: .75rem;
    span { display: inline-flex; align-items: center; gap: 5px; }
    i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; 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; width: 58px; height: 58px; flex: 0 0 auto; overflow: hidden; padding: 0; border: 0; border-radius: 999px; background: var(--theme); color: #fff; cursor: pointer; transition: width .55s cubic-bezier(.22,1,.36,1), background .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 .2s ease, transform .35s ease, filter .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 .22s ease, filter .3s ease, transform .4s cubic-bezier(.22,1,.36,1); }
      .fab-arrow { position: absolute; right: 25px; top: 17px; display: flex; opacity: 0; filter: blur(8px); transform: translateX(-8px); transition: opacity .25s ease, filter .3s ease, transform .4s ease; }
      &:disabled { cursor: default;
        .fab-label, .fab-arrow { color: rgb(255 255 255 / 55%); }
      }
    }
    .cancel-booking { position: relative; z-index: 1; 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 .18s ease, filter .25s ease, transform .4s ease, visibility .4s ease; pointer-events: none; }
  }

  .booking-toggle:checked ~ .booking-actions {
    .fab { width: 120px;
      .fab-plus { opacity: 0; filter: blur(8px); transform: rotate(90deg) scale(.6); }
      .fab-label { opacity: 1; filter: blur(0); transform: translateX(0); transition-delay: .13s; }
      .fab-arrow { opacity: 1; filter: blur(0); transform: translateX(0); transition-delay: .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: .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 .2s ease, color .2s ease; font-size: .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: .85rem; }
    button { padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--ink); }
    [data-weekday="0"] { color: var(--danger); }
    [data-weekday="6"] { color: var(--accent); }
    [data-current-month="false"] { opacity: .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: .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 .45s cubic-bezier(.22,1,.36,1); pointer-events: none; }
  }

}