/* Copyright Ayers Electronics Inc. All rights reserved. */
/* the dialog every explaining or asking card wears. */

/* ---- one dialog family: the introduction (js/intro-card.js), the confirm (js/confirm.js), the
   full-seats card (js/full-card.js) and the demo's idle gate. The host covers the screen with the soft
   scrim, so the channel and its band stay in view and a press never lands under it; its one panel is
   centred and as wide as its words, up to --card-dialog-max-w. Each host keeps its own layer: the
   introduction in tips.css, the questions in demo-gate.css. ---- */
.card-dialog {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(24px + var(--safe-top)) calc(24px + var(--safe-right)) calc(24px + var(--safe-bottom))
    calc(24px + var(--safe-left));
  background: var(--scrim-soft);
  --card-step: 12px;
}
.card-dialog-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: var(--card-dialog-max-w);
  padding: 24px 28px;
  box-sizing: border-box;
  border-radius: var(--radius-card);
  background: var(--panel);
  color: var(--on-panel);
  text-align: center;
}
.card-dialog .brand {
  font-size: var(--type-heading); /* the wordmark's own face and colour */
}
.card-dialog h2 {
  margin: 8px 0 0;
  font-size: var(--type-heading);
  font-weight: 600;
}
.card-dialog p {
  margin: 0;
  max-width: 34em;
  color: var(--on-panel-variant);
  font-size: var(--type-label);
  line-height: 1.5;
}
/* The stack's step, carried on each child rather than on the panel, so a child that sets a margin of
   its own states the whole distance. A heading stands one step and its own 8 clear of what is above
   it. */
.card-dialog-panel > * + * {
  margin-top: var(--card-step);
}
.card-dialog-panel > * + p {
  margin-top: var(--card-step);
}
.card-dialog-panel > * + h2 {
  margin-top: calc(var(--card-step) + 8px);
}