/* Layout of the public page. Controls and colours come from ui.css. */

:root {
  /* Width of the EU flag (the blue rectangle) in the partners' row. Every logo size and gap on the
     page derives from it. The client's rule: from the last letter of „Uniunea Europeană” to the
     Government's logo the distance is the length of that rectangle; the visual identity guide adds
     that no other logo may be taller than the emblem. Each logo file ends exactly where its drawing
     ends, so the gap between two images is the distance the eye sees.
     The row is 7.44 flags wide: 3.27 (EU) + 1 + 0.67 (Government) + 1 + 1.50 (PoAT). */
  --flag-w: clamp(40px, calc((100vw - 32px) / 7.45), 84px);
  --flag-h: calc(var(--flag-w) * 2 / 3);
}

/* Partners: EU, Government, PoAT, in this order, on white, at the top of the first screen */
.partners {
  /* Above the programme's decorative arcs: nothing may sit over a logo. */
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--flag-w);
  padding: 14px 16px 12px;
  background: #fff;
}
.partners img {
  width: auto;
  height: var(--flag-h);
}

.layout {
  display: grid;
}

/* Programme figures */
.programme {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 26px 20px 30px;
}
/* The sky-blue arcs of the programme's printed materials. */
.programme::before,
.programme::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 50%;
}
.programme::before {
  width: 150vw;
  max-width: 900px;
  aspect-ratio: 1;
  top: -22%;
  left: -62%;
  background: var(--surface-3);
}
.programme::after {
  width: 118vw;
  max-width: 720px;
  aspect-ratio: 1;
  top: -9%;
  left: -52%;
  background: var(--surface);
}
.eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}
.programme h1 {
  margin-top: 6px;
  font-size: clamp(1.7rem, 7.4vw, 2.6rem);
  font-weight: 760;
  line-height: 1.08;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.years {
  display: block;
  margin-top: 4px;
  font-weight: 350;
  letter-spacing: -0.01em;
  color: var(--ink-2);
}
.total {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 16px;
}
.total__value {
  font-size: clamp(3.6rem, 19vw, 5.6rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  background: var(--brand-sweep);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.total__unit {
  font-size: clamp(1.4rem, 6vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.priorities {
  margin-top: 22px;
  padding: 6px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: rgb(255 255 255 / 0.92);
  box-shadow: var(--shadow-1);
}
.priorities__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  font-size: var(--text-m);
  font-weight: 700;
  line-height: 1.2;
  border-bottom: 1px solid var(--line);
}
.priorities__sum {
  flex: none;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: var(--text-m);
  font-weight: 800;
  color: var(--amount);
  background: var(--ok-soft);
  white-space: nowrap;
}
.priority {
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 14px;
  align-items: center;
  padding: 12px 0;
}
.priority + .priority {
  border-top: 1px solid var(--line);
}
.priority__icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--hue);
  background: color-mix(in srgb, var(--hue) 13%, white);
}
.priority--water {
  --hue: var(--blue);
}
.priority--circular {
  --hue: var(--teal);
}
.priority--nature {
  --hue: var(--green);
}
.priority--climate {
  --hue: var(--cyan);
}
.priority--energy {
  --hue: var(--lime);
}
.priority__amount {
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--amount);
}
.priority__label {
  font-size: var(--text-s);
  line-height: 1.35;
  color: var(--ink-2);
}
.priority__label strong {
  font-weight: 700;
  color: var(--ink);
}
.more {
  margin-top: 18px;
  font-size: var(--text-s);
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

/* Entry: waiting, the form, or the confirmation, always in the same card */
.entry {
  padding: 4px 12px calc(96px + env(safe-area-inset-bottom));
  background: linear-gradient(var(--surface), var(--surface-2) 120px);
  scroll-margin-top: 8px;
}
.card {
  padding: 24px 18px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}
.view {
  display: none;
}
.entry[data-view='loading'] .view--loading,
.entry[data-view='closed'] .view--closed,
.entry[data-view='open'] .view--open,
.entry[data-view='sent'] .view--sent {
  display: block;
  animation: view-in var(--slow) var(--ease-out);
}
@keyframes view-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
/* The moment staff open the form on a page that was waiting. */
.entry[data-just-opened] .card {
  animation: card-open 1.4s var(--ease-out);
}
@keyframes card-open {
  0% {
    box-shadow: 0 0 0 0 rgb(18 165 207 / 0.55), var(--shadow-2);
  }
  100% {
    box-shadow: 0 0 0 22px rgb(18 165 207 / 0), var(--shadow-2);
  }
}
.view__title {
  font-size: var(--text-xl);
  font-weight: 760;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.view__text {
  margin-top: 8px;
  color: var(--ink-2);
}
.view__text strong {
  color: var(--ink);
}

.skeleton--title {
  width: 70%;
  height: 26px;
}
.skeleton--line {
  height: 14px;
  margin-top: 14px;
}
.skeleton--short {
  width: 55%;
}

.view--closed,
.view--sent {
  text-align: center;
}
.waiting {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 6px 0 18px;
}
.waiting span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--brand-sweep);
  background-size: 400% 100%;
  animation: waiting 1.3s var(--ease-out) infinite;
}
.waiting span:nth-child(2) {
  background-position: 50% 0;
  animation-delay: 0.16s;
}
.waiting span:nth-child(3) {
  background-position: 100% 0;
  animation-delay: 0.32s;
}
@keyframes waiting {
  0%,
  70%,
  100% {
    transform: translateY(0);
    opacity: 0.45;
  }
  35% {
    transform: translateY(-9px);
    opacity: 1;
  }
}
.view--closed .notice {
  margin-top: 14px;
  text-align: left;
}
.checking {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-3);
}
.checking .live-dot {
  color: var(--teal);
}
.checking[data-offline] .live-dot {
  color: var(--wait);
}

.thanks {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-m);
  color: var(--ink-2);
}
.thanks strong {
  display: block;
  font-weight: 760;
  color: var(--accent-strong);
}
.view--open .notice {
  margin-top: 14px;
}
.fields {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}
.required-note {
  margin-top: 10px;
  font-size: var(--text-xs);
  color: var(--ink-3);
}
.consents {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.consents .field__error {
  margin: 6px 0 0 38px;
}
.rating {
  margin-top: 18px;
  padding: 16px 14px 14px;
  border-radius: var(--radius-m);
  background: var(--surface-2);
}
.rating__question {
  /* A legend sits on its fieldset's edge unless it is floated into the box. */
  float: left;
  width: 100%;
  font-size: var(--text-m);
  line-height: 1.35;
  color: var(--ink-2);
}
.rating__question strong {
  display: block;
  font-size: var(--text-l);
  font-weight: 760;
  color: var(--accent-strong);
}
.rating__row {
  clear: both;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 2px -7px;
}
.rating__value {
  font-size: var(--text-s);
  font-weight: 700;
  color: var(--ink-2);
  white-space: nowrap;
}
.rating__scale {
  font-size: var(--text-xs);
  color: var(--ink-3);
}

.done {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin: 4px auto 16px;
  border-radius: 50%;
  color: #fff;
  background: var(--brand-sweep);
  box-shadow: 0 10px 26px rgb(18 137 124 / 0.35);
  animation: done-in 0.7s var(--ease-out);
}
.done__tick {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: tick 0.5s 0.25s var(--ease-out) forwards;
}
@keyframes done-in {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
}
@keyframes tick {
  to {
    stroke-dashoffset: 0;
  }
}

/* The programme's logo appears once on the page: here, beside the send button. */
.card__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.programme-logo {
  flex: none;
  width: auto;
  height: var(--flag-h);
}
.card__foot .button {
  flex: 1;
}
.entry:not([data-view='open']) .card__foot .button {
  display: none;
}

/* Dock: what the form is doing, in reach of the thumb while the card is off screen */
.dock {
  position: fixed;
  inset: auto 0 0;
  z-index: 20;
  display: flex;
  justify-content: center;
  padding: 0 12px calc(12px + env(safe-area-inset-bottom));
  pointer-events: none;
  animation: dock-in var(--slow) var(--ease-out);
}
@keyframes dock-in {
  from {
    transform: translateY(120%);
  }
}
.dock__pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  max-width: 100%;
  padding: 0 20px 0 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font: 650 var(--text-s) / 1.25 var(--font);
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--shadow-2);
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.dock__pill .live-dot {
  color: var(--wait);
}
.dock__arrow {
  flex: none;
  color: var(--ink-3);
}
.dock[data-view='open'] .dock__pill {
  border: 0;
  font-size: var(--text-m);
  color: #fff;
  background: var(--brand-sweep);
}
.dock[data-view='open'] .live-dot {
  display: none;
}
.dock[data-view='open'] .dock__arrow {
  color: #fff;
  animation: nudge 1.4s var(--ease-out) infinite;
}
@keyframes nudge {
  50% {
    transform: translateY(3px);
  }
}

.optional {
  display: inline-block;
  margin-right: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--ink-2);
  background: var(--surface-3);
}

/* The Regulament and the GDPR note, as pages (written by scripts/import_document.py) */
.document {
  max-width: 760px;
  margin-inline: auto;
  padding: 20px 20px 64px;
}
.document__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 20px;
}
.document__head {
  padding: 22px 0 6px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.document h1 {
  font-size: var(--text-l);
  font-weight: 760;
  line-height: 1.35;
  text-wrap: balance;
}
.document__head p {
  margin-top: 8px;
  color: var(--ink-2);
}
.document h2 {
  margin-top: 30px;
  scroll-margin-top: 16px;
  font-size: var(--text-m);
  font-weight: 760;
  line-height: 1.3;
  color: var(--accent-strong);
}
.document p {
  margin-top: 12px;
  line-height: 1.6;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.document__table {
  margin-top: 16px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
}
.document table {
  width: 100%;
  /* Equal columns that wrap their text: a table never runs off a phone's screen. */
  table-layout: fixed;
  border-collapse: collapse;
  font-size: var(--text-xs);
  line-height: 1.45;
}
.document th,
.document td {
  padding: 10px;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.document th {
  font-weight: 700;
  background: var(--surface-2);
}
.document tr + tr > * {
  border-top: 1px solid var(--line);
}
.document td + td,
.document th + th {
  border-left: 1px solid var(--line);
}

@media (min-width: 560px) {
  .programme {
    padding-inline: 32px;
  }
  .entry {
    padding-inline: 24px;
  }
  .card {
    padding: 30px 28px 24px;
  }
  .fields {
    grid-template-columns: 1fr 1fr;
  }
  .field--wide {
    grid-column: 1 / -1;
  }
}

/* Wide screens: the figures on the left, the form on the right, as in the client's draft */
@media (min-width: 980px) {
  .partners {
    padding-block: 22px 18px;
  }
  .layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
    align-items: start;
    gap: 24px;
    max-width: 1180px;
    margin-inline: auto;
    padding: 8px 24px 64px;
  }
  .programme {
    position: sticky;
    top: 0;
    padding: 36px 32px 40px;
    overflow: visible;
  }
  .programme::before {
    top: -8%;
    left: -34%;
    width: 760px;
  }
  .programme::after {
    top: 2%;
    left: -27%;
    width: 610px;
  }
  .entry {
    padding: 28px 0 0;
    background: none;
  }
}