/*
 * Accesso's pages, in the brand's colours. `tokens.css` beside this is a copy of the fork's, which
 * `ci/brand-tokens.test.mjs` keeps identical. The pairs below are the panel's, whose contrast that
 * test checks. Dark by default, as the chat starts, and light when the system asks for it.
 */
@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/poppins-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/open-sans-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/open-sans-latin-600-normal.woff2') format('woff2');
}

:root {
  color-scheme: dark;
  --page: var(--pa-charcoal);
  --raised: var(--pa-raised);
  --hover: var(--pa-hover);
  --heading: var(--pa-grey-200);
  --body: var(--pa-warm-300);
  --muted: var(--pa-warm-400);
  --border: var(--pa-warm-700);
  --border-control: var(--pa-warm-550);
  --link: var(--pa-cognitive);
  --accent: var(--pa-cognitive);
  --button: var(--pa-cognitive-mid);
  --button-hover: var(--pa-cognitive-mid-hover);
  --on-button: var(--pa-white);
  --ok: var(--pa-geo);
  --ok-subtle: var(--pa-success-subtle-dark);
  --warning: var(--pa-flow);
  --error: var(--pa-error-on-dark);
  --error-subtle: var(--pa-error-subtle-dark);
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --page: var(--pa-grey-100);
    --raised: var(--pa-white);
    --hover: var(--pa-warm-150);
    --heading: var(--pa-charcoal);
    --body: var(--pa-warm-700);
    --muted: var(--pa-warm-600);
    --border: var(--pa-warm-300);
    --border-control: var(--pa-warm-500);
    --link: var(--pa-cognitive-deep);
    --accent: var(--pa-cognitive-deep);
    --button: var(--pa-cognitive-deep);
    --button-hover: var(--pa-cognitive-deep-hover);
    --on-button: var(--pa-white);
    --ok: var(--pa-success-on-light);
    --ok-subtle: var(--pa-success-subtle-light);
    --warning: var(--pa-warning-on-light);
    --error: var(--pa-error-on-light);
    --error-subtle: var(--pa-error-subtle-light);
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: rgb(var(--page));
  color: rgb(var(--body));
  font-family: 'Open Sans', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

h1,
h2,
.brand-name {
  color: rgb(var(--heading));
  font-family: Poppins, 'Open Sans', system-ui, sans-serif;
  font-weight: 600;
}

h1 {
  margin: 0 0 0.5rem;
  font-size: 1.6rem;
  line-height: 1.3;
}

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

:focus-visible {
  outline: 2px solid rgb(var(--accent));
  outline-offset: 2px;
}

.masthead,
.card,
.foot {
  width: min(34rem, calc(100% - 2rem));
  margin-inline: auto;
}

.masthead {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-block: 2.5rem 1rem;
}

.mark {
  width: 2.75rem;
  height: 2.75rem;
}

.brand {
  margin: 0;
  font-size: 1.15rem;
}

.brand-section {
  color: rgb(var(--muted));
}

.card {
  padding: 1.75rem;
  border: 1px solid rgb(var(--border));
  border-radius: 8px;
  background: rgb(var(--raised));
}

.foot {
  margin-block: 1rem 2.5rem;
  color: rgb(var(--muted));
  font-size: 0.8rem;
  text-align: center;
}

.lead {
  margin: 0 0 1.25rem;
}

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

.small {
  font-size: 0.85rem;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.divider {
  margin: 1.25rem 0 0.75rem;
  color: rgb(var(--muted));
  text-align: center;
}

.notice {
  margin: 0 0 1rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid rgb(var(--border-control));
  border-radius: 5px;
  color: rgb(var(--heading));
}

.notice-ok {
  border-color: rgb(var(--ok));
  background: rgb(var(--ok-subtle));
}

.notice-error {
  border-color: rgb(var(--error));
  background: rgb(var(--error-subtle));
}

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.55rem 1rem;
  border: 2px solid rgb(var(--border-control));
  border-radius: 4px;
  background: transparent;
  color: rgb(var(--heading));
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}

.button:hover {
  background: rgb(var(--hover));
}

.button-primary {
  border-color: rgb(var(--button));
  background: rgb(var(--button));
  color: rgb(var(--on-button));
}

.button-primary:hover {
  border-color: rgb(var(--button-hover));
  background: rgb(var(--button-hover));
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: rgb(var(--heading));
  font-size: 0.9rem;
  font-weight: 600;
}

.field input {
  min-height: 2.75rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid rgb(var(--border-control));
  border-radius: 4px;
  background: rgb(var(--raised));
  color: rgb(var(--heading));
  font: inherit;
  font-weight: 400;
}

.enti {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.ente {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  border: 1px solid rgb(var(--border));
  border-radius: 6px;
}

.ente-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.ente-name {
  margin: 0;
  font-size: 1.1rem;
}

.ente p {
  margin: 0;
}

.badge {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  border: 1px solid rgb(var(--border-control));
  border-radius: 4px;
  color: rgb(var(--heading));
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.badge-ready {
  border-color: rgb(var(--ok));
}

.badge-no_seat {
  border-color: rgb(var(--warning));
}

.badge-contract_ended {
  border-color: rgb(var(--error));
}