/* App layout only. Colours, type and components come from the Paramount design system (pm/). */

.demo-banner {
  background: var(--pm-warning-soft);
  color: var(--pm-warning-text);
  border-bottom: var(--pm-border-width) solid var(--pm-warning-border);
  padding: var(--pm-space-2) var(--pm-space-4);
  text-align: center;
  font-size: var(--pm-text-sm);
  font-weight: var(--pm-weight-semibold);
}

.signin { max-width: 40rem; margin-inline: auto; display: flex; flex-direction: column; gap: var(--pm-space-4); }
.signin__points { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: var(--pm-space-2); color: var(--pm-text); }

.workspace { display: grid; gap: var(--pm-space-5); align-items: start; }
@media (min-width: 60em) {
  .workspace { grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr); }
  .picker { position: sticky; top: calc(5rem + env(safe-area-inset-top, 0px)); max-height: calc(100dvh - 6rem); }
}

.picker { display: flex; flex-direction: column; gap: var(--pm-space-4); min-width: 0; }
.picker__filters { display: flex; flex-direction: column; gap: var(--pm-space-3); }
.picker__list { display: flex; flex-direction: column; gap: var(--pm-space-1); overflow-y: auto; min-height: 6rem; margin-inline: calc(var(--pm-space-2) * -1); padding-inline: var(--pm-space-2); }
@media (max-width: 59.99em) { .picker__list { max-height: 22rem; } }
.picker__day { font-size: var(--pm-text-xs); font-weight: var(--pm-weight-bold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--pm-text-muted); padding: var(--pm-space-3) var(--pm-space-2) var(--pm-space-1); }
.picker__more summary, #paste-box summary { cursor: pointer; font-weight: var(--pm-weight-semibold); color: var(--pm-primary-text); padding-block: var(--pm-space-2); }
.picker__more[open] > *:not(summary) { margin-top: var(--pm-space-3); }

.meeting {
  display: grid; grid-template-columns: 1fr auto; gap: 0 var(--pm-space-2);
  width: 100%; text-align: left; font: inherit; color: inherit;
  padding: var(--pm-space-2) var(--pm-space-3);
  border: var(--pm-border-width) solid transparent; border-radius: var(--pm-radius-md);
  background: transparent; cursor: pointer;
}
.meeting:hover { background: var(--pm-surface-sunken); }
.meeting:focus-visible { outline: 2px solid var(--pm-focus, var(--pm-primary)); outline-offset: 1px; }
.meeting[aria-current="true"] { background: var(--pm-selected); border-color: var(--pm-primary); }
.meeting__subject { font-weight: var(--pm-weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meeting__time { grid-column: 1; font-size: var(--pm-text-sm); color: var(--pm-text-muted); }
.meeting__badge { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
.meeting[data-organizer="false"] .meeting__subject { color: var(--pm-text-muted); font-weight: var(--pm-weight-medium); }

.detail { min-width: 0; display: flex; flex-direction: column; gap: var(--pm-space-4); }
.detail h2 { margin: 0; }

.controls { display: flex; flex-wrap: wrap; gap: var(--pm-space-4); align-items: flex-end; }
.controls__threshold .pm-input { width: 5.5rem; }
.controls__actions { margin-left: auto; }
@media (max-width: 40em) { .controls__actions { margin-left: 0; width: 100%; } .controls__actions .pm-btn { flex: 1; } }

.signups-source { display: flex; flex-wrap: wrap; gap: var(--pm-space-3); align-items: center; justify-content: space-between; padding: var(--pm-space-3) var(--pm-space-4); border: var(--pm-border-width) solid var(--pm-border); border-radius: var(--pm-radius-md); background: var(--pm-surface-sunken); }
.file-btn { position: relative; }
.file-btn:focus-within { outline: 2px solid var(--pm-primary); outline-offset: 2px; }

.pm-table td .pm-small { display: block; }
.who { display: flex; flex-direction: column; }
.who__name { font-weight: var(--pm-weight-semibold); color: var(--pm-heading); }
.cell-muted { color: var(--pm-text-muted); }

.tiles { --pm-grid-min: 9.5rem; --pm-gap: var(--pm-space-3); }
.tiles .pm-score__value { font-size: var(--pm-text-xl); }