/* Coach by DAQLI (PV-222): app styles on top of the Daqli.UI tokens.
   Fonts come only from --dq-font-ui / --dq-font-mono: no @font-face, no font files. */

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--dq-bg);
  color: var(--dq-text);
  font-family: var(--dq-font-ui);
  font-size: var(--dq-fs-body);
}

[hidden] {
  display: none !important;
}

/* Wordmark "Coach by DAQLI" (PV-834): "Coach by" is UI-font text, DAQLI is the logo in curves (inline SVG, fill = currentColor,
   so it follows the theme). The logo font is not used for the wordmark any more. */
.dqp-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--dq-text);
  text-decoration: none;
  white-space: nowrap;
}
.dqp-wordmark-pre {
  font-family: var(--dq-font-ui);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dq-text-3);
}
.dqp-wordmark-svg {
  height: 1.15rem;
  width: auto;
  aspect-ratio: 4084 / 848;
  display: block;
}
@media (max-width: 450px) {
  .dqp-wordmark-pre {
    display: none;
  }
}

/* Slotted wrappers that must not add a box to the shell grid. */
.dqp-contents {
  display: contents;
}

#app {
  min-height: 100dvh;
}

/* Layout without the shell: sign-in, registration, ... (PV-992, O-166 variant 2 "Clean card").
   Language menu in the top-right corner; the logo above a card, both centred in the middle of the screen. */
.dqp-bare {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--dq-bg);
  background-image: var(--dq-mesh);
}
.dqp-bare-head {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
}
.dqp-bare-main {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  padding: 72px 16px;
}
/* margin: auto centres the stack in both axes and, when the content is taller than the screen, lets the page scroll. */
.dqp-bare-stack {
  margin: auto;
  width: min(480px, 100%);
  display: grid;
  gap: 32px;
}
/* The logo with the Daqli Pulse line under it (the sport backdrop of the frame is dqp-sport-backdrop, behind everything). */
.dqp-bare-brand {
  display: grid;
  justify-items: center;
  gap: 6px;
}
.dqp-bare-line {
  max-width: 100%;
}
.dqp-bare-brand .dqp-wordmark {
  gap: 14px;
}
.dqp-bare-brand .dqp-wordmark-svg {
  height: 2.75rem;
}
.dqp-bare-brand .dqp-wordmark-pre {
  display: inline;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
}
.dqp-bare-card {
  box-sizing: border-box;
  min-width: 0;
  padding: 36px 40px 32px;
  background: var(--dq-surface);
  border: 1px solid var(--dq-border-soft);
  border-radius: var(--dq-r-lg);
  box-shadow: 0 1px 2px var(--dq-shadow-clr), var(--dq-shadow);
  /* Touch targets of at least 44 px for the fields and buttons of the public pages (the tokens are inherited by the components). */
  --dq-ctl-h: 44px;
  --dq-input-pad: 11px 14px;
}
/* Views that bring their own card (registration screens) lose it here: the frame is the card. */
.dqp-bare-card .dqp-auth {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.dqp-bare-card > .dqp-outlet {
  width: 100%;
}
@media (max-width: 450px) {
  .dqp-bare-main {
    padding: 64px 16px;
  }
  .dqp-bare-stack {
    gap: 24px;
  }
  .dqp-bare-brand .dqp-wordmark-svg {
    height: 2.25rem;
  }
  .dqp-bare-card {
    padding: 28px 20px 24px;
  }
}

/* Layout inside the shell */
.dqp-content {
  padding: 20px 24px 40px;
  max-width: 1240px;
  box-sizing: border-box;
}
@media (max-width: 450px) {
  .dqp-content {
    padding: 16px 12px 32px;
  }
}
.dqp-banner {
  margin-bottom: 16px;
}
.dqp-banner p {
  margin: 0;
}
.dqp-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.dqp-username {
  font-size: var(--dq-fs-sm);
  color: var(--dq-text-2);
  max-width: 18ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .dqp-username {
    display: none;
  }
}

.dqp-fatal {
  max-width: 480px;
  margin: 15vh auto 0;
  padding: 0 16px;
  display: grid;
  gap: 12px;
}