/* App shell: top bar, calendar column, side panel column. */
.topbar {
  flex: none; display: flex; align-items: center; gap: 14px; padding: 10px 18px;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 8px; color: var(--accent); margin-right: 6px; }
.brand-name { font: 600 18px/1 var(--font-display); letter-spacing: -0.01em; color: var(--ink); }
.nav-ctrl { display: flex; align-items: center; gap: 4px; }
.btn--bar { min-height: 40px; }

/* Period title: light, large; the year is quieter. */
.period { margin-right: auto; font: 300 28px/1.1 var(--font-display); letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.period-main { color: var(--ink); }
.period-sub { color: var(--muted); font-size: 0.62em; font-weight: 400; letter-spacing: 0; margin-left: 4px; }

.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-3); border-radius: 10px; }
.seg-btn { min-height: 34px; padding: 0 14px; border-radius: 8px; font-weight: 600; font-size: 14px; color: var(--ink-2); }
.seg-btn:hover { color: var(--ink); }
.seg-btn[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(6, 16, 26, 0.22); }

.actions { display: flex; align-items: center; gap: 6px; }
.user { display: flex; align-items: center; gap: 2px; }
.user-name { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 13px; }

.layout { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 328px; }
.calendar { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--surface); }
.cal-content { flex: 1; min-height: 0; position: relative; }
.cal-content > * { height: 100%; }
.cal-progress { position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 6; overflow: hidden; background: transparent; }
.cal-progress::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 30%; background: var(--sun);
  animation: slide 1.1s ease-in-out infinite;
}
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(340%); } }

.cal-skeleton { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 10px; padding: 16px; align-content: start; }
.sk-block {
  height: 64px; border-radius: var(--r-s); background: var(--surface-2);
  animation: pulse 1.6s ease-in-out infinite; animation-delay: calc(var(--i) * 70ms);
}
.sk-block:nth-child(3n) { height: 110px; }
@keyframes pulse { 50% { opacity: 0.45; } }

@media (max-width: 1100px) {
  .brand-name { display: none; }
  .layout { grid-template-columns: minmax(0, 1fr) 280px; }
  .period { font-size: 24px; }
}

/* Mobile: two header rows, panel becomes bottom tabs + sheet. */
@media (max-width: 720px) {
  .topbar {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title actions" "ctrl seg";
    gap: 6px 8px; padding: 8px 12px;
  }
  .brand { display: none; }
  .period { grid-area: title; font-size: 22px; margin: 0; align-self: center; }
  .period-sub { display: block; font-size: 12px; margin: 0; }
  .actions { grid-area: actions; gap: 2px; }
  .nav-ctrl { grid-area: ctrl; gap: 2px; }
  .seg { grid-area: seg; justify-self: end; }
  .seg-btn { padding: 0 9px; min-height: 36px; font-size: 13px; }
  .btn--create { padding: 0 12px; }
  .btn--create span, .btn--bar .btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .btn--create { width: 44px; padding: 0; }
  .actions .btn--bar { width: 44px; padding: 0; position: relative; }
  .actions .user .btn--bar { width: auto; padding: 0 8px; font-size: 13px; }
  .user-name { display: none; }
  .actions .badge { position: absolute; top: 2px; right: 0; }
  .layout { display: block; position: relative; }
  .calendar { height: 100%; padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
}