/* SDS Booking: page layout for the live app (app.html). Tokens only, same rules as ui.css. */

#app { padding: 0 var(--layout-gutter); }
@media (max-width: 719px) { #app { padding: 0; } }

/* Details / manage layout: summary + one wide column */
.panel--details { grid-template-columns: minmax(0, 360fr) minmax(0, 704fr); }
.panel--details .panel__wide { grid-column: auto; }
@media (max-width: 1119px) {
  .panel--details { grid-template-columns: 1fr; }
  .panel--details > .panel__wide { border-left: 0; }
}

.summary .back { align-self: flex-start; }
.panel__alert { margin-bottom: var(--space-5); }
.panel__col h2.slots__day { font-size: var(--text-base-size); line-height: var(--text-base-line); margin-bottom: var(--space-4); }
.times .prompt { margin-top: var(--space-2); }

/* Month grid extras */
.month-grid__pad { width: var(--layout-day-cell); height: var(--layout-day-cell); }
.day-skel { width: var(--layout-day-cell); height: var(--layout-day-cell); }
.day[aria-disabled="true"] { cursor: default; }
.notice .btn--ghost { height: auto; padding: 0; font-size: var(--text-sm-size); }

/* Time zone list: buttons */
.tz__list { padding-bottom: var(--space-2); }
.tz__opt { width: 100%; border: 0; background: none; text-align: left; gap: var(--space-3); font: inherit; font-size: var(--text-sm-size); color: var(--color-text); }
.tz__opt[aria-pressed="true"] { background: var(--color-accent); color: var(--color-on-accent); font-weight: 700; }
.tz__empty { padding: var(--space-3) var(--space-4); font-size: var(--text-sm-size); }
.tz__pop { position: absolute; z-index: 5; left: 0; bottom: calc(100% - var(--space-5)); }
@media (max-width: 719px) { .tz__pop { position: static; } }

/* Forms */
.form__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.chips--invalid { border-width: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cancel-form { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--color-border); width: 100%; }
.cancel-form h3 { font-size: var(--text-lg-size); line-height: var(--text-lg-line); }

/* Skeleton shapes */
.skel--line { height: var(--space-4); width: 70%; }
.skel--title { height: var(--space-6); width: 60%; margin-bottom: var(--space-4); }
.skel--block { height: var(--space-9); width: 100%; }

/* Page-level messages (404, offline) */
.page-message { max-width: 640px; margin: var(--layout-panel-top) auto; display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.page-message h1 { font-size: var(--text-xl-size); line-height: var(--text-xl-line); }

/* Call list (S01) */
.list-page { max-width: var(--layout-panel-max); margin: var(--layout-panel-top) auto; display: flex; flex-direction: column; gap: var(--space-6); }
.list-head { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.list-head__logo { width: 220px; max-width: 60vw; }
.list-head h1 { font-size: var(--text-display-size); line-height: var(--text-display-line); }
.card__title, .card__meta, .card__desc { display: block; }
.card--skel { display: block; min-height: calc(var(--space-9) + var(--space-5)); }
@media (max-width: 719px) {
  .list-page { margin: var(--space-6) var(--layout-gutter-sm); }
  .list-head h1 { font-size: var(--text-xl-size); line-height: var(--text-xl-line); }
  .cards { grid-template-columns: 1fr; }
}

/* Embedded in an iframe (?embed=1): no outer margins */
.is-embedded #app { padding: 0; }
.is-embedded .panel, .is-embedded .list-page, .is-embedded .page-message { margin-top: 0; margin-bottom: 0; }

/* Headings inside stacked forms: the stack's gap does the spacing */
.panel__col .form > h2, .panel__col .confirm > h2 { margin-bottom: 0; }