/* Slate calendar page. View styles live in cal-core.css; this file holds the page frame, toolbar, dialogue, feed and availability. */

/* Page frame: the footer hint sits at the bottom and never moves as content arrives */
body.cal-page { min-height: 100dvh; display: flex; flex-direction: column; }
body.cal-page > main { flex: 1 0 auto; width: 100%; }
body.cal-page > .hint { margin-top: auto; flex: none; }
.cal-wrap { padding-bottom: 24px; }
.cal-page .page-head { min-height: 96px; align-items: flex-end; }


/* Toolbar: sticky under the header, fixed height */
.cal-bar {
  position: sticky; top: var(--bar-h, 53px); z-index: 15; background: var(--paper); border-bottom: 1px solid var(--rule);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; padding: 10px 0; margin-bottom: 14px; min-height: 58px;
}
.cal-bar .row, .feed .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cal-label { font-family: var(--font-display); font-size: 22px; margin-left: 8px; min-width: 9.5em; display: inline-block; }

/* Period stack: old and new periods overlap while they cross-fade */
.cal-view { display: grid; min-height: 560px; align-content: start; transition: opacity var(--dur-2) var(--ease); }
.cal-view > * { grid-area: 1 / 1; min-width: 0; }
.cal-view.busy { opacity: .6; }
.cal-view > .leaving { pointer-events: none; }

.toast-slot { min-height: 0; }


/* Feed and availability */
.feed { margin-top: 32px; border: 1px solid var(--rule); border-radius: var(--radius-tile); padding: 20px; background: var(--paper-2); display: flex; flex-direction: column; gap: 12px; }
.feed-import { min-height: 296px; }
.feed-avail { min-height: 340px; }
.feed + .feed { margin-top: 16px; }
.feed h2 { font-size: 22px; }
.feed h3 { font-weight: 400; padding-top: 8px; border-top: 1px solid var(--rule); }
.feed p { margin: 0; }
.feed-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.feed-list li { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; border: 1px solid var(--rule); border-radius: 12px; padding: 6px 6px 6px 12px; }
.feed-list li .btn { margin-left: auto; }
.feed-reveal { border: 1px solid var(--ink); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--paper); }
.feed-reveal input { flex: 1; min-width: 200px; font-family: var(--font-mono); font-size: 12px; }
.feed input[type=file] { max-width: 100%; }
.reauth { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--ink); border-radius: 12px; padding: 14px; background: var(--paper); max-width: 420px; }
.reauth label { display: flex; flex-direction: column; gap: 4px; }
.av-body { display: flex; flex-direction: column; gap: 16px; }
.av-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px 12px; align-items: start; }
.av-form label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.av-form input:not([type=checkbox]) { box-sizing: border-box; height: 40px; min-height: 40px; }
.av-days { display: flex; gap: 6px; flex-wrap: wrap; grid-column: 1 / -1; }
.av-check { grid-column: 1 / -1; flex-direction: row !important; align-items: center; gap: 10px !important; }
.av-body .row { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 720px) {
  .cal-label { font-size: 18px; margin-left: 0; min-width: 0; }
  .cal-bar { flex-direction: column; align-items: stretch; gap: 8px; }
  .cal-bar .row { justify-content: space-between; }
  .cal-view { min-height: 420px; }
  .feed { padding: 16px; }
}