.calendar-area{min-width:0;container-type:inline-size}.header{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:14px}.title{margin:0;font-size:30px}.subtitle{margin-top:5px;color:var(--muted);font-size:14px}.legend{display:flex;gap:7px;flex-wrap:wrap}.legend-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);background:var(--card);border:1px solid var(--border);padding:6px 9px;border-radius:999px}.dot{width:9px;height:9px;border-radius:50%}.dot.busy{background:#A5AF79}.dot.shared{background:#E8A07C}.dot.pending{background:#c98261}.dot.friend{background:#827148}.view-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}.view-switch,.date-nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.view-btn{border:1px solid var(--border);background:var(--card);border-radius:10px;padding:8px 11px;cursor:pointer;font-weight:700}.view-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}.range-label{font-weight:700;min-width:150px;text-align:center}.calendar{display:grid;gap:10px;align-items:start}.calendar.week-view{grid-template-columns:repeat(7,minmax(145px,1fr))}.calendar.day-view{grid-template-columns:minmax(280px,760px);justify-content:center}.calendar.month-view{grid-template-columns:repeat(7,minmax(105px,1fr));gap:8px}.day-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:11px;min-height:640px;overflow:hidden}.day-card.today{border:2px solid var(--accent)}.day-name,.date{text-align:center}.day-name{font-weight:700}.date{color:var(--muted);font-size:13px;margin-top:2px}.timeline-wrap{position:relative;margin-top:10px;height:960px;border:1px solid #e5d8bc;border-radius:12px;overflow:hidden;background:var(--card)}.timeline-grid{position:absolute;inset:0;pointer-events:none;z-index:0}.timeline-line{position:absolute;left:0;right:0;border-top:1px solid #eee1c8}.timeline-label{position:absolute;right:4px;transform:translateY(-50%);font-size:9px;color:#9b8c69;background:#fff;padding:0 3px;z-index:3;direction:ltr}.timeline-hit{position:absolute;left:0;right:0;cursor:pointer;z-index:1}.timeline-hit:hover{background:rgba(165,175,121,.12)}.timeline-block{position:absolute;left:7px;right:7px;border-radius:9px;padding:6px 8px;font-size:11px;line-height:1.2;overflow:hidden;z-index:4;box-shadow:0 1px 3px rgba(79,67,43,.10);border:1px solid transparent;cursor:pointer}.timeline-block.busy{background:var(--busy);color:var(--busy-t);border-color:#c8cf9f}.timeline-block.shared{background:var(--shared);color:var(--shared-t);border-color:#e8a07c}.timeline-block.friendbusy{background:var(--friend);color:var(--friend-t);border-color:#d8cba8;cursor:pointer}.timeline-block.pending{background:var(--pending);color:var(--pending-t);border-color:#e8a07c}.timeline-block strong{display:block;text-align:center;direction:ltr;unicode-bidi:isolate;margin-bottom:3px}.block-label{text-align:center;font-size:10px;overflow-wrap:anywhere}.month-cell{background:var(--card);border:1px solid var(--border);border-radius:12px;min-height:112px;padding:8px;cursor:pointer}.month-cell.today{border:2px solid var(--accent)}.month-cell.outside{opacity:.42}.month-date{font-weight:700;font-size:13px;margin-bottom:6px}.month-item{font-size:10px;border-radius:6px;padding:3px 5px;margin:3px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.month-item.busy{background:var(--busy);color:var(--busy-t)}.month-item.shared{background:var(--shared);color:var(--shared-t)}.month-item.friendbusy{background:var(--friend);color:var(--friend-t)}.month-item.pending{background:var(--pending);color:var(--pending-t)}
/* Stage 2 — calendar visual system. Presentation only; no calendar/business logic changes. */
.calendar-area{position:relative}
.calendar{gap:12px}
.day-card{
  position:relative;
  padding:10px 9px 9px;
  border-color:color-mix(in srgb,var(--border) 62%,transparent);
  border-radius:18px;
  background:color-mix(in srgb,var(--card) 91%,transparent);
  box-shadow:0 5px 18px rgba(79,67,43,.035);
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.day-card:hover{border-color:color-mix(in srgb,var(--border) 92%,transparent);box-shadow:0 8px 22px rgba(79,67,43,.06)}
.day-card.today{border:1px solid color-mix(in srgb,var(--accent) 78%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent-soft) 58%,transparent),0 8px 22px rgba(79,67,43,.055)}
.day-card.today .day-name{color:var(--text)}
.day-card.today .date{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:22px;margin:3px auto 0;padding:0 7px;border-radius:999px;background:var(--accent);color:#fff;font-weight:800}
.day-name{font-size:12px;font-weight:800;letter-spacing:.01em;color:var(--text)}
.date{font-size:11px;margin-top:3px;color:var(--muted);font-weight:650}

.timeline-wrap{
  margin-top:9px;
  border-color:color-mix(in srgb,var(--border) 48%,transparent);
  border-radius:14px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--card) 94%,transparent),color-mix(in srgb,var(--bg) 17%,var(--card)));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.timeline-line{border-top-color:color-mix(in srgb,var(--border) 35%,transparent)}
.timeline-line:nth-child(2n){border-top-color:color-mix(in srgb,var(--border) 52%,transparent)}
.timeline-label{right:5px;padding:1px 4px;border-radius:5px;background:color-mix(in srgb,var(--card) 91%,transparent);color:color-mix(in srgb,var(--muted) 84%,transparent);font-size:8px;font-weight:700;box-shadow:0 0 0 1px color-mix(in srgb,var(--border) 16%,transparent)}
.timeline-hit{left:2px;right:2px;border-radius:7px;transition:background-color .12s ease,box-shadow .12s ease}
.timeline-hit:hover{background:color-mix(in srgb,var(--accent-soft) 54%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 13%,transparent)}

.timeline-block{
  left:6px;right:6px;
  border-radius:10px;
  padding:6px 7px;
  box-shadow:0 3px 9px rgba(79,67,43,.09),inset 0 1px 0 rgba(255,255,255,.38);
  transition:transform .14s ease,box-shadow .14s ease,filter .14s ease;
  border-width:1px;
}
.timeline-block:hover{transform:translateY(-1px);box-shadow:0 6px 15px rgba(79,67,43,.14),inset 0 1px 0 rgba(255,255,255,.42);filter:saturate(1.02)}
.timeline-block strong{margin-bottom:2px;font-size:10px;font-weight:850;letter-spacing:-.05px;opacity:.92}
.block-label{font-size:10px;line-height:1.2;font-weight:720;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.timeline-block.busy{background:color-mix(in srgb,var(--busy) 88%,#fff);border-color:color-mix(in srgb,var(--busy-t) 21%,transparent)}
.timeline-block.shared{background:color-mix(in srgb,var(--shared) 88%,#fff);border-color:color-mix(in srgb,var(--shared-t) 22%,transparent)}
.timeline-block.friendbusy{background:color-mix(in srgb,var(--friend) 88%,#fff);border-color:color-mix(in srgb,var(--friend-t) 20%,transparent)}
.timeline-block.pending{
  background:repeating-linear-gradient(-45deg,color-mix(in srgb,var(--pending) 80%,#fff) 0 7px,color-mix(in srgb,var(--pending) 61%,#fff) 7px 14px);
  border-color:color-mix(in srgb,var(--pending-t) 20%,transparent)
}
.timeline-block.google{box-shadow:0 3px 9px rgba(79,67,43,.08),inset 3px 0 0 color-mix(in srgb,var(--accent) 62%,transparent)}
.google-tag{display:inline-flex;margin-inline-start:4px;padding:1px 4px;border-radius:999px;background:rgba(255,255,255,.45);font-size:8px;font-weight:800;vertical-align:1px}

/* Month view: cleaner day cells and compact event pills. */
.calendar.month-view{gap:7px}
.month-cell{
  position:relative;
  border-color:color-mix(in srgb,var(--border) 58%,transparent);
  border-radius:14px;
  background:color-mix(in srgb,var(--card) 92%,transparent);
  transition:border-color .14s ease,box-shadow .14s ease,transform .14s ease;
}
.month-cell:hover{border-color:color-mix(in srgb,var(--accent) 32%,var(--border));box-shadow:0 6px 16px rgba(79,67,43,.06);transform:translateY(-1px)}
.month-cell.today{border:1px solid color-mix(in srgb,var(--accent) 72%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent-soft) 72%,transparent)}
.month-cell.outside{opacity:.34}
.month-date{font-size:12px;margin-bottom:7px;color:var(--muted)}
.month-cell.today .month-date{display:inline-flex;align-items:center;justify-content:center;min-width:23px;height:23px;padding:0 6px;border-radius:999px;background:var(--accent);color:#fff}
.month-item{padding:4px 6px;margin:3px 0;border-radius:7px;font-size:9px;font-weight:740;border:1px solid transparent}
.month-item.busy{border-color:color-mix(in srgb,var(--busy-t) 13%,transparent)}
.month-item.shared{border-color:color-mix(in srgb,var(--shared-t) 14%,transparent)}
.month-item.friendbusy{border-color:color-mix(in srgb,var(--friend-t) 13%,transparent)}
.month-item.pending{border-color:color-mix(in srgb,var(--pending-t) 14%,transparent)}

@media(max-width:980px){
  .calendar.week-view{gap:10px}
  .day-card{border-radius:16px}
}
@media(max-width:560px){
  .calendar{gap:9px}
  .day-card{padding:9px 7px 7px;min-height:1132px}
  .day-name{font-size:13px}.date{font-size:11px}
  .timeline-wrap{margin-top:8px;border-radius:13px}
  .timeline-block{left:8px;right:8px;padding:7px 9px;border-radius:11px}
  .timeline-block strong{font-size:11px}.block-label{font-size:11px}
  .timeline-label{font-size:8px}
  .calendar.month-view{gap:5px}.month-cell{border-radius:11px}.month-date{font-size:10px}.month-item{font-size:8px;padding:3px 4px}
}

/* Adapt the calendar to the width it actually receives, not only viewport width.
   This keeps desktop landscape unchanged while making portrait/tablet layouts fit. */
@container (max-width:920px){
  .calendar.week-view{grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}
  .calendar.month-view{grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
  .day-card,.month-cell,.timeline-wrap{min-width:0}
  .day-card{padding:8px 5px 7px}
  .day-name{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .date{font-size:10px}
  .timeline-block{left:3px;right:3px;padding:5px 3px;border-radius:8px}
  .timeline-block strong{font-size:8px;letter-spacing:-.25px}
  .block-label{font-size:8px;line-height:1.15}
  .timeline-label{right:2px;padding:0 2px;font-size:7px}
  .month-cell{padding:6px;min-height:96px}
  .month-date{font-size:10px;margin-bottom:5px}
  .month-item{font-size:8px;padding:3px 4px}
}

/* Below this width seven readable timeline columns cannot realistically fit.
   Keep each day usable and allow horizontal movement instead of crushing content. */
@container (max-width:620px){
  .calendar.week-view{grid-template-columns:repeat(7,minmax(108px,1fr));overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px;overscroll-behavior-inline:contain}
  .calendar.week-view .day-card{scroll-snap-align:start}
  .calendar.month-view{grid-template-columns:repeat(7,minmax(0,1fr));overflow:visible}
  .month-cell{padding:5px 3px;min-height:84px}
  .month-item{font-size:7px;padding:2px 3px}
}