/* The customers' site. Two sources decide how it looks, both in misc/:

   - "Stellar - Identidade Visual.pdf", the brand: Azul Stellar, Amarelo
     Estelar and white, the slogan. It wins wherever it says something.
     Since 2026-10-29 the product is NOHM: its logo, in the same blue and
     yellow, replaced Stellar's, and the yellow O of that logo replaced the
     A-and-star symbol.
   - Stellar-Design-System-v1.2, for everything the identity is silent on:
     status colours, spacing, the components and how they behave.

   Made for a phone held next to a charger: one column, 48 px controls,
   nothing that needs a hover. */

@font-face { font-family: Sora; src: url("/site/fonts/Sora-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: Sora; src: url("/site/fonts/Sora-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: Manrope; src: url("/site/fonts/Manrope-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Manrope; src: url("/site/fonts/Manrope-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: Manrope; src: url("/site/fonts/Manrope-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: Manrope; src: url("/site/fonts/Manrope-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: Manrope; src: url("/site/fonts/Manrope-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }

/* The identity's titles are set in Azonix, which is not in the repository
   yet. Until it is, Sora stands in; the text face is the design system's. */

/* Tokens. The names are the design system's; the brand's three colours are
   the identity's, used in its proportions: blue for large areas, white for
   text and air, yellow for what should be noticed or pressed. Status
   colours are the design system's, as the identity has none. */
:root {
  --brand-blue: #0f2e54;
  --brand-yellow: #ffd54f;
  --brand-edge: #2a4d7d;

  --bg: #f3f5fa;
  --surface: #ffffff;
  --surfaceSunken: #eef1f6;
  --text: #0f2e54;
  --muted: #526176;
  --border: #d9e0ea;
  --borderStrong: #7a8899;
  --action: #ffd54f;
  --onAction: #0f2e54;
  --link: #0f2e54;
  --focus: #0f2e54;
  --success: #166534;
  --successBg: #dcfce7;
  --warning: #92400e;
  --warningBg: #fef3c7;
  --error: #b42318;
  --errorBg: #fee4e2;
  --info: #0f2e54;
  --infoBg: #e4ecf7;
  --neutral: #526176;
  --neutralBg: #eef1f6;

  --font: Manrope, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: Sora, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow: 0 8px 28px #0f2e5412;
  --shadow-float: 0 12px 32px rgba(15, 46, 84, 0.18);
  color-scheme: light dark;
}

/* Dark is the brand's own ground: Azul Stellar, with cards a step lighter. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f2e54;
    --surface: #173c69;
    --surfaceSunken: #0b2444;
    --text: #ffffff;
    --muted: #c0cde0;
    --border: #3c5f8f;
    --borderStrong: #8fa6c6;
    --link: #ffd54f;
    --focus: #ffd54f;
    --success: #86efac;
    --successBg: #123b2a;
    --warning: #fcd34d;
    --warningBg: #422e16;
    --error: #fda29b;
    --errorBg: #48211f;
    --info: #d6e4f7;
    --infoBg: #24507f;
    --neutral: #c0cde0;
    --neutralBg: #24466f;
    --shadow: none;
    --shadow-float: 0 12px 32px rgba(0, 0, 0, 0.5);
  }
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 500 16px/24px var(--font);
  font-variant-numeric: tabular-nums;
}

h1,
h2,
h3,
p,
dl,
ol {
  margin: 0;
}

h1,
h2,
.metric {
  font-family: var(--font-display);
  font-weight: 600;
}

h1 {
  font-size: 28px;
  line-height: 35px;
  letter-spacing: -0.02em;
}

h2 {
  font-size: 22px;
  line-height: 29px;
}

a {
  color: var(--link);
}

strong {
  font-weight: 700;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.muted {
  color: var(--muted);
}

.small {
  font-size: 14px;
  line-height: 21px;
}

.overline {
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* An icon from /site/icons, drawn in the colour of the text around it. */
.icon {
  display: inline-block;
  flex: none;
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.icon.s16 {
  width: 16px;
  height: 16px;
}

/* --- Shell --- */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 8px 16px;
  background: var(--brand-blue);
  color: #fff;
  border-bottom: 1px solid var(--brand-edge);
}

.top :focus-visible {
  outline-color: var(--brand-yellow);
}

.brand {
  display: flex;
}

/* The logo comes on its own blue plate, the same blue as the bar. */
.brand img {
  display: block;
  width: 130px;
  height: 45px;
}

.account a,
.account .button.text {
  color: #fff;
  font-weight: 700;
}

main {
  flex: 1;
  width: min(520px, 100%);
  margin: 0 auto;
  padding: 16px;
}

.foot {
  padding: 24px 16px 32px;
  text-align: center;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The way to the terms and the privacy policy, on every page. Quiet, but each a target a finger can hit. */
.foot-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 24px;
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0;
  text-transform: none;
}

.foot-links a {
  padding: 12px 4px;
  color: inherit;
}

/* --- Terms and privacy: pages of text --- */

.legal h2 {
  font-size: 18px;
  line-height: 26px;
}

.legal section {
  gap: 12px;
}

.legal ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* A countdown and what it counts: the words wrap beside the icon, never under it. */
.timed {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.timed > :last-child {
  flex: 1;
  min-width: 0;
}

.spread {
  justify-content: space-between;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

/* --- Buttons --- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  min-width: 44px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--action);
  color: var(--onAction);
  font: 700 16px/20px var(--font);
  text-decoration: none;
  cursor: pointer;
  transition: filter 120ms, transform 120ms;
}

.button:hover {
  filter: brightness(0.93);
}

.button:active {
  transform: translateY(1px);
}

.button.wide {
  width: 100%;
}

.button.secondary {
  background: var(--surface);
  border-color: var(--borderStrong);
  color: var(--text);
}

.button.text {
  background: transparent;
  color: var(--link);
}

.button.danger {
  background: var(--error);
  color: var(--surface);
}

/* Disabled has colours of its own, not opacity. */
.button:disabled {
  background: var(--surfaceSunken);
  color: var(--muted);
  border-color: transparent;
  filter: none;
  transform: none;
  cursor: not-allowed;
}

.button[aria-busy="true"] {
  cursor: progress;
}

/* --- Fields --- */

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field > .label,
legend {
  font-weight: 700;
  line-height: 20px;
}

input[type="text"],
input[type="email"],
textarea,
.secure {
  width: 100%;
  min-height: 48px;
  padding: 12px;
  border: 1.5px solid var(--borderStrong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

input[aria-invalid="true"] {
  border: 2px solid var(--error);
}

/* Mercado Pago draws its own input inside; this is only the box around it. */
.secure {
  height: 48px;
  padding-block: 0;
}

.help {
  font-size: 14px;
  line-height: 21px;
  color: var(--muted);
}

.error {
  color: var(--error);
  font-weight: 600;
}

.error:empty,
.help:empty {
  display: none;
}

input.code {
  font: 600 28px/36px var(--font-display);
  letter-spacing: 0.3em;
  text-align: center;
}

textarea.pix {
  resize: none;
  font: 13px/20px ui-monospace, Consolas, monospace;
  word-break: break-all;
}

fieldset {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  padding: 0;
  margin-bottom: 4px;
}

.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* A choice among a few: a native radio, with the whole row as its target. */
.option {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-height: 56px;
  padding: 12px 16px;
  border: 1.5px solid var(--borderStrong);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
}

.option input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--link);
}

.option .grow {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 6em;
  font-weight: 700;
}

.option .grow small {
  font-size: 14px;
  line-height: 21px;
  font-weight: 500;
  color: var(--muted);
}

.option:has(input:checked) {
  border-color: var(--link);
  box-shadow: inset 0 0 0 1px var(--link);
  background: var(--infoBg);
}

.option:has(input:disabled) {
  border-color: var(--border);
  background: var(--surfaceSunken);
  color: var(--muted);
  cursor: not-allowed;
}

.option:has(input:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.chips {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.chips .option {
  position: relative;
  justify-content: center;
  min-height: 48px;
  font: 600 18px/24px var(--font-display);
}

/* The choice that is not an amount ("Até completar a bateria"), across the row. */
.chips .option.whole {
  grid-column: 1 / -1;
  text-align: center;
}

.chips .option.whole small {
  display: block;
  font: 500 14px/20px var(--font);
  color: var(--muted);
}

/* The radio is still there for the keyboard and for screen readers. */
.chips .option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* --- Status --- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font: 600 14px/21px var(--font);
  letter-spacing: 0;
  white-space: nowrap;
}

.badge.success {
  color: var(--success);
  background: var(--successBg);
}

.badge.warning {
  color: var(--warning);
  background: var(--warningBg);
}

.badge.error {
  color: var(--error);
  background: var(--errorBg);
}

.badge.info {
  color: var(--info);
  background: var(--infoBg);
}

.badge.neutral {
  color: var(--neutral);
  background: var(--neutralBg);
}

.notice {
  display: flex;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--infoBg);
}

.notice.warning {
  background: var(--warningBg);
}

.notice.error {
  background: var(--errorBg);
}

.notice.plain {
  background: var(--surface);
}

/* --- A charge --- */

.metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.metric {
  display: block;
  font-size: 36px;
  line-height: 40px;
}

.metric small {
  font: 600 16px/24px var(--font);
  color: var(--muted);
}

progress {
  display: block;
  width: 100%;
  height: 10px;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: var(--border);
  accent-color: var(--action);
}

progress::-webkit-progress-bar {
  background: var(--border);
}

progress::-webkit-progress-value {
  background: var(--action);
}

progress::-moz-progress-bar {
  background: var(--action);
}

.facts {
  display: grid;
  grid-template-columns: auto 1fr;
  row-gap: 8px;
}

.facts dt {
  color: var(--muted);
}

.facts dd {
  margin: 0;
  padding-left: 16px;
  text-align: right;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.facts .total {
  padding-top: 8px;
  border-top: 1px solid var(--border);
  color: var(--text);
}

.facts dd.total {
  font: 600 22px/29px var(--font-display);
}

.qr {
  align-self: center;
  width: min(100%, 240px);
  padding: 8px;
  border-radius: var(--radius-md);
  background: #fff;
  line-height: 0;
}

.links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding: 0 8px;
}

/* --- Front page --- */

.hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--brand-edge);
  border-radius: 24px;
  background: var(--brand-blue);
  color: #fff;
}

.hero > div {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hero img {
  width: 56px;
  height: auto;
}

.hero h1 {
  font-size: 32px;
  line-height: 38px;
}

.hero .accent {
  color: var(--brand-yellow);
}

.hero p {
  color: #c0cde0;
}

.how {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
  list-style: none;
}

.how li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.how .icon {
  margin-top: 2px;
  color: var(--link);
}

.how strong {
  display: block;
}

.session-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 12px;
  min-height: 64px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: inherit;
  text-decoration: none;
}

.session-row.live {
  border-color: var(--link);
  background: var(--infoBg);
}

.session-row small {
  grid-column: 1 / -1;
  font-size: 14px;
  line-height: 21px;
  color: var(--muted);
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  text-align: center;
  color: var(--muted);
}

.empty .icon {
  width: 48px;
  height: 48px;
}

/* --- The map --- */

.map {
  position: relative;
  height: 320px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surfaceSunken);
}

/* What the box says until Google's map is in it. */
.map > p {
  display: grid;
  place-items: center;
  height: 100%;
  margin: 0;
  color: var(--muted);
}

/* Google's map is made in here, and styles everything inside by itself. */
.map-canvas {
  height: 100%;
}

/* A pin. Google's marker around it is the button, and puts the place at the
   middle of the bottom edge of this 44 px target; the drop is the picture,
   with the icon of the status on it, so that it is not told by colour alone.
   The word for the status is in the marker's name and in the list below. */
.map-pin {
  position: relative;
  display: block;
  width: 44px;
  height: 44px;
  cursor: pointer;
}

/* Grey unless a tone below says otherwise: a pin is never left without a
   colour, which once made one invisible. */
.map-pin::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 6px;
  width: 32px;
  height: 32px;
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 0;
  background: #64748b;
  rotate: -45deg;
  box-shadow: 0 2px 6px rgba(15, 46, 84, 0.5);
}

.map-pin::after {
  content: "";
  position: absolute;
  top: 11px;
  left: 14px;
  width: 16px;
  height: 16px;
  background: #fff;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.map-pin[data-tone="success"]::before {
  background: #16a34a;
}

.map-pin[data-tone="warning"]::before {
  background: #d97706;
}

.map-pin[data-tone="error"]::before {
  background: #dc2626;
}

.map-pin[data-tone="neutral"]::before {
  background: #64748b;
}

.map-pin.selected::before {
  border-color: var(--brand-yellow);
}

.card.chosen {
  border-color: var(--link);
  box-shadow: inset 0 0 0 1px var(--link);
}

.plugs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.plugs li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.plugs li > span:first-child {
  display: flex;
  flex-direction: column;
}

.plugs small {
  font-size: 14px;
  line-height: 21px;
  color: var(--muted);
}

.account {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* --- Dialog and toast --- */

dialog {
  width: min(420px, calc(100% - 32px));
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-float);
}

dialog::backdrop {
  background: #0b244499;
}

dialog form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

dialog menu {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 8px 0 0;
  padding: 0;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 600;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 12px 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--brand-edge);
  background: var(--brand-blue);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--shadow-float);
}

@media (prefers-color-scheme: dark) {
  .toast {
    background: #0b2444;
  }
}

@media (min-width: 768px) {
  main {
    padding: 24px;
  }

  dialog menu {
    flex-direction: row-reverse;
  }
}

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