/*
 * The public look (D-166, D-167, D-168: blue-led) shared by every page people see before they are inside a portal: the home
 * page, sign in / register / password and email links, and the first-run setup. Put `pvPublic` on the page's root:
 * the public palette (--pv-public-* in tokens.css) then drives Proven's own components (through --pv-*) and UI5's
 * controls (through their --sap* variables, redeclared here because the bridge resolves them on :root).
 * Fraunces (SIL OFL 1.1, shared/fonts) is the display face; shapes are SVG masks in shared/img/public filled with
 * tokens, so no colour lives here.
 */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-full-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-full-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

.pvPublic {
  /* Proven's own tokens, public palette: components that use var(--pv-…) follow without changes. */
  --pv-bg: var(--pv-public-paper);
  --pv-surface: var(--pv-public-card);
  --pv-surface-2: var(--pv-public-paper);
  --pv-surface-3: var(--pv-public-paper-2);
  --pv-border: var(--pv-public-line);
  --pv-border-strong: var(--pv-public-accent);
  --pv-text: var(--pv-public-ink);
  --pv-text-muted: var(--pv-public-ink-soft);
  --pv-accent: var(--pv-public-primary);
  --pv-accent-hover: var(--pv-public-primary-hover);
  --pv-accent-active: var(--pv-public-primary-active);
  --pv-accent-soft: var(--pv-public-primary-soft);
  --pv-accent-soft-2: var(--pv-public-accent-soft);
  --pv-text-on-accent: var(--pv-public-on-primary);

  /* UI5's controls. */
  --sapBackgroundColor: var(--pv-public-paper);
  --sapTextColor: var(--pv-public-ink);
  --sapTitleColor: var(--pv-public-ink);
  --sapContent_LabelColor: var(--pv-public-ink-soft);
  --sapContent_FocusColor: var(--pv-public-primary);
  --sapHighlightColor: var(--pv-public-primary);
  --sapSelectedColor: var(--pv-public-primary);
  --sapLinkColor: var(--pv-public-primary);
  --sapLink_Hover_Color: var(--pv-public-primary-hover);
  --sapLink_Active_Color: var(--pv-public-primary-active);
  --sapButton_BorderCornerRadius: 999px;
  --sapButton_Background: var(--pv-public-card);
  --sapButton_BorderColor: var(--pv-public-line);
  --sapButton_TextColor: var(--pv-public-ink);
  --sapButton_IconColor: var(--pv-public-ink-soft);
  --sapButton_Hover_Background: var(--pv-public-paper);
  --sapButton_Hover_BorderColor: var(--pv-public-accent);
  --sapButton_Hover_TextColor: var(--pv-public-ink);
  --sapButton_Active_Background: var(--pv-public-paper-2);
  --sapButton_Active_BorderColor: var(--pv-public-accent);
  --sapButton_Active_TextColor: var(--pv-public-ink);
  --sapButton_Lite_TextColor: var(--pv-public-primary);
  --sapButton_Lite_Hover_Background: var(--pv-public-accent-soft);
  --sapButton_Lite_Hover_TextColor: var(--pv-public-primary-hover);
  --sapButton_Emphasized_Background: var(--pv-public-primary);
  --sapButton_Emphasized_BorderColor: var(--pv-public-primary);
  --sapButton_Emphasized_TextColor: var(--pv-public-on-primary);
  --sapButton_Emphasized_Hover_Background: var(--pv-public-primary-hover);
  --sapButton_Emphasized_Hover_BorderColor: var(--pv-public-primary-hover);
  --sapButton_Emphasized_Hover_TextColor: var(--pv-public-on-primary);
  --sapButton_Emphasized_Active_Background: var(--pv-public-primary-active);
  --sapButton_Emphasized_Active_BorderColor: var(--pv-public-primary-active);
  --sapButton_Emphasized_Active_TextColor: var(--pv-public-on-primary);
  --sapInformationBackground: var(--pv-public-accent-soft);
  --sapInformationBorderColor: var(--pv-public-accent);
  --sapMessage_InformationBorderColor: var(--pv-public-accent);
  --sapInformativeElementColor: var(--pv-public-primary);
  --sapInformativeTextColor: var(--pv-public-ink);
  --sapField_Background: var(--pv-public-paper);
  --sapField_Hover_Background: var(--pv-public-paper);
  --sapField_Focus_Background: var(--pv-public-paper);
  --sapField_BorderColor: var(--pv-public-line);
  --sapField_Hover_BorderColor: var(--pv-public-accent);
  --sapField_Focus_BorderColor: var(--pv-public-primary);
  --sapField_Active_BorderColor: var(--pv-public-primary);
  --sapField_ReadOnly_Background: var(--pv-public-paper-2);
  --sapField_BorderCornerRadius: 12px;
  --sapField_TextColor: var(--pv-public-ink);
  --sapField_PlaceholderTextColor: var(--pv-public-ink-soft);

  position: relative;
  background: var(--pv-public-paper);
  color: var(--pv-public-ink);
}

html .pvPublic .sapMText,
html .pvPublic .sapMTitle {
  color: inherit;
}

html .pvPublic .pvMuted.sapMText {
  color: var(--pv-public-ink-soft);
}

/* UI5 draws a field's focus ring inside the border with its own small radius (and a selector strong enough to win
   over a plain rule): lay it over the border, following the field's rounder corners. */
html .pvPublic .sapMFocus.sapMInputBase .sapMInputBaseContentWrapper:not(.sapMInputBaseDisabledWrapper)::before {
  inset: -1px;
  border-radius: inherit;
}

/* A button's icon never touches its label. */
html .pvPublic .sapMBtn .sapMBtnIcon:not(:only-child):not(.sapMBtnIconLast) {
  margin-inline-end: var(--pv-space-2);
}

html .pvPublic .sapMBtn .sapMBtnIconLast:not(:only-child) {
  margin-inline-start: var(--pv-space-2);
}

/* A whisper of paper grain over the page. */
.pvPublic__grain {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  background: var(--pv-public-ink);
  opacity: var(--pv-public-grain);
  -webkit-mask: url("../img/public/grain.svg") repeat;
  mask: url("../img/public/grain.svg") repeat;
}

/* Soft light: sky blue top right, lilac bottom left. Place inside a positioned, isolated block. */
.pvPublic__glow {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(70px);
  opacity: var(--pv-public-glow);
  pointer-events: none;
}

.pvPublic__glow--sun {
  width: 46rem;
  height: 34rem;
  top: -16rem;
  right: -10rem;
  background: radial-gradient(closest-side, var(--pv-public-glow-1), transparent);
}

.pvPublic__glow--primary-soft {
  width: 40rem;
  height: 30rem;
  bottom: -14rem;
  left: -14rem;
  background: radial-gradient(closest-side, var(--pv-public-glow-2), transparent);
}

/* The little wax-seal mark beside an organisation name. */
.pvPublic__mark {
  flex: none;
  width: 26px;
  height: 26px;
  background: var(--pv-public-primary);
  -webkit-mask: url("../img/public/seal.svg") center / contain no-repeat;
  mask: url("../img/public/seal.svg") center / contain no-repeat;
}

/* The display face for titles and names. */
html .pvPublic .pvPublic__display.sapMTitle,
html .pvPublic .pvPublic__display.sapMText,
.pvPublic .pvPublic__display {
  font-family: var(--pv-public-display);
  font-weight: 600;
  letter-spacing: -0.012em;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  color: var(--pv-public-ink);
}

/* A strip of tape holding a card to the page. */
.pvPublic__taped {
  position: relative;
}

.pvPublic__taped::before {
  content: "";
  position: absolute;
  top: -13px;
  left: 50%;
  width: 104px;
  height: 26px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--pv-public-accent) 55%, transparent);
  transform: translateX(-50%) rotate(-3deg);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .pvPublic *,
  .pvPublic *::before,
  .pvPublic *::after {
    animation: none !important;
    transition: none !important;
  }
}