@layer components {
  .scheduling-week-workspace { gap: 1.25rem; }
  .scheduling-week-workspace > .scheduling-heading { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .scheduling-week-workspace .scheduling-heading h1 { font-size: 2rem; }
  .scheduling-week-content { display: grid; gap: 1.5rem; min-width: 0; }
  .weekly-calendar .scheduling-section-heading { padding: 1rem 1.25rem; }
  .weekly-calendar .scheduling-section-heading h2 { font-family: var(--font-sans); font-size: 1rem; font-weight: 600; }
  .weekly-linking-notice { margin: 0; background: var(--warning-soft); border: 1px solid var(--warning-border); border-radius: 8px; }
  .weekly-linking-notice a { display: flex; align-items: center; min-height: 44px; padding: .65rem 1rem; color: var(--warning-ink); font-size: .875rem; text-decoration: underline; text-underline-offset: .2em; }
  .weekly-empty { padding: .75rem 1.25rem; color: var(--muted); font-size: .875rem; border-bottom: 1px solid var(--line); }
  .weekly-calendar-scroll { max-height: 70vh; overflow: auto; overscroll-behavior: contain; }
  .weekly-calendar-scroll:focus-visible { outline: 3px solid var(--periwinkle); outline-offset: -3px; }
  .weekly-calendar-canvas { min-width: calc(3.5rem + 7 * 7rem); }
  .weekly-day-headings, .weekly-all-day-row, .weekly-time-grid { display: grid; grid-template-columns: 3.5rem repeat(7, minmax(0, 1fr)); }
  .weekly-day-headings { position: sticky; top: 0; z-index: 5; background: var(--surface); border-bottom: 1px solid var(--line-strong); }
  .weekly-corner { position: sticky; left: 0; z-index: 3; background: var(--surface); padding: .65rem .3rem; color: var(--muted); font-size: .625rem; display: grid; align-content: center; text-align: center; border-right: 1px solid var(--line-strong); }
  .weekly-day-heading { border-right: 1px solid var(--line); min-height: 84px; text-align: center; }
  .weekly-day-heading a { display: grid; align-content: center; justify-items: center; min-height: 84px; padding: .5rem; color: var(--ink); }
  @media (hover: hover) and (pointer: fine) {
    .weekly-day-heading a:hover { background: var(--paper); }
  }
  .weekly-day-heading time { display: grid; gap: .15rem; }
  .weekly-day-heading time span { font-size: .75rem; color: var(--muted); text-transform: capitalize; }
  .weekly-day-heading time strong { font-size: 1.25rem; font-weight: 600; }
  .weekly-day-heading small { color: var(--periwinkle); font-size: .625rem; }
  .weekly-day-heading.is-today { background: var(--lilac-soft); }
  .weekly-all-day-row { border-bottom: 1px solid var(--line-strong); }
  .weekly-all-day-cell { min-width: 0; padding: .25rem; border-right: 1px solid var(--line); display: grid; align-content: start; gap: .25rem; }
  .weekly-time-grid { height: calc(var(--week-hours) * 90px); }
  .weekly-time-axis { position: sticky; left: 0; z-index: 3; background: var(--surface); border-right: 1px solid var(--line-strong); }
  .weekly-hour { height: 90px; padding: .3rem .25rem; text-align: center; color: var(--muted); font-size: .625rem; font-variant-numeric: tabular-nums; }
  .weekly-day-column { position: relative; min-width: 0; border-right: 1px solid var(--line); }
  .weekly-day-column.is-today { background: var(--lilac-soft); }
  .weekly-hour-rule { height: 90px; border-bottom: 1px solid var(--line-strong); position: relative; }
  .weekly-hour-rule::after { content: ""; position: absolute; top: 45px; left: 0; right: 0; border-top: 1px dotted var(--line); pointer-events: none; }
  .weekly-new-slot { display: block; height: 45px; }
  .weekly-new-slot:focus-visible { background: var(--lilac-soft); outline: 2px solid var(--periwinkle); outline-offset: -2px; }
  @media (hover: hover) and (pointer: fine) {
    .weekly-new-slot:hover { background: var(--lilac-soft); outline: 2px solid var(--periwinkle); outline-offset: -2px; }
  }
  .weekly-event-slot { position: absolute; min-height: 44px; padding: 1px 2px; }
  .weekly-event { display: flex; flex-direction: column; gap: 0; height: 100%; min-width: 0; overflow: hidden; padding: 2px .3rem; border: 1px solid var(--periwinkle); border-radius: 5px; background: var(--lilac-soft); color: var(--ink); font-size: .75rem; line-height: 1.1; }
  @media (hover: hover) and (pointer: fine) {
    .weekly-event:hover { background: var(--surface); }
  }
  .weekly-event:focus-visible { position: relative; z-index: 4; outline: 3px solid var(--periwinkle); outline-offset: 1px; }
  .weekly-event time { font-size: .625rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .weekly-event strong, .weekly-event span, .weekly-event small { flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .weekly-event strong { font-weight: 600; }
  .weekly-event span, .weekly-event small { font-size: .625rem; }
  .weekly-event-slot:not(.is-roomy) .weekly-event small { display: none; }
  .weekly-event.is-cancelled { background: var(--paper); border-color: var(--line-strong); color: var(--muted); }
  .weekly-event.is-cancelled strong { text-decoration: line-through; }
  .weekly-event.needs-linking { border-color: var(--warning-border); background: var(--warning-soft); color: var(--warning-ink); }
  .weekly-event.is-available { border-style: dashed; }
  .weekly-all-day-cell .weekly-event { height: auto; min-height: 44px; }
  @media (max-width: 650px) {
    .weekly-calendar .scheduling-section-heading { align-items: start; padding: .75rem; }
    .weekly-calendar .scheduling-section-heading h2 { font-size: .875rem; }
    .weekly-calendar-scroll { max-height: 65vh; }
    .scheduling-week-workspace > .scheduling-heading { align-items: start; }
  }
}

@layer components {
  .weekly-drag-status:empty { display: none; }
  .weekly-calendar { position: relative; }
  .weekly-drag-status { position: absolute; bottom: 0; inset-inline: 0; z-index: 8; margin: 0; padding: .75rem 1.25rem; color: var(--ink); background: var(--surface); border-top: 1px solid var(--line); pointer-events: none; }
  [data-calendar-event="true"] { touch-action: none; }
  [data-calendar-event="true"] .weekly-event { cursor: grab; user-select: none; padding-bottom: 10px; }
  .weekly-event-slot.is-dragging { z-index: 6; pointer-events: none; opacity: .85; }
  .weekly-event-slot.is-dragging .weekly-event { cursor: grabbing; }
  .weekly-resize-handle { position: absolute; bottom: 1px; inset-inline: 3px; width: calc(100% - 6px); height: 12px; min-height: 0; padding: 0; border: 0; background: transparent; cursor: ns-resize; touch-action: none; }
  .weekly-resize-handle::after { content: ""; display: block; width: 18px; max-width: 70%; height: 3px; margin: auto; border-radius: 2px; background: var(--periwinkle); }
  .weekly-resize-handle:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
  .weekly-calendar[aria-busy="true"] [data-calendar-event="true"] { pointer-events: none; opacity: .65; }
}

@layer components {
  .weekly-event.is-past { background: var(--paper); border-color: var(--line-strong); color: var(--muted); opacity: .7; }
  .weekly-day-heading > time { display: grid; align-content: center; min-height: 84px; gap: .15rem; color: var(--muted); }
  .weekly-day-heading > time span { font-size: .75rem; }
  .weekly-day-heading > time strong { font-size: 1.25rem; font-weight: 600; }
  .weekly-new-slot.is-past { cursor: not-allowed; background: repeating-linear-gradient(135deg, transparent, transparent 6px, var(--line) 6px, var(--line) 7px), var(--paper); }
  @media (hover: hover) and (pointer: fine) {
    .weekly-new-slot.is-past:hover { outline: none; background: repeating-linear-gradient(135deg, transparent, transparent 6px, var(--line) 6px, var(--line) 7px), var(--paper); }
  }
  .weekly-day-heading.is-past { background: var(--paper); cursor: not-allowed; }
  .weekly-day-heading.is-past strong { text-decoration: line-through; }
  .weekly-day-heading.is-past small { font-size: .625rem; }
  .weekly-event.is-past { opacity: 1; cursor: pointer; }
  .appointment-read-only { display: grid; gap: 1rem; }
  .appointment-read-only > div { display: grid; gap: .25rem; }
  .appointment-read-only dt { color: var(--muted); font-size: .875rem; }
  .appointment-read-only dd { margin: 0; }
}