/* Design tokens taken from the EU-LIFE4EPR RRG prototype. */
:root {
  --navy-900: #0e2440;
  --navy-700: #1f4e79;
  --navy-500: #2e75b6;
  --yellow: #ffd617;
  --ink: #1a2b42;
  --ink-muted: #3a4a61;
  --slate: #5a6b82;
  --slate-light: #8b99ac;
  --page: #ebeef3;
  --surface: #ffffff;
  --surface-muted: #f8fafc;
  --surface-sunken: #f1f4f8;
  --border: #d5dce4;
  --border-light: #e1e7ee;
  --border-card: #dde3eb;
  --disabled-bg: #eef1f5;
  --disabled-fg: #a6b0bf;
  --danger-bg: #fbe4e1;
  --danger-fg: #b23a2e;
  --success-bg: #dff3e6;
  --success-fg: #1e7a46;
  --warning-bg: #fbf0da;
  --warning-fg: #9a6410;
  --info-bg: #e3f0fb;
  --info-fg: #1f5c97;
  --radius-input: 8px;
  --radius-button: 9px;
  --radius-card: 14px;
  --shadow-card: 0 2px 10px rgba(14, 36, 64, 0.05);
  /* Material Symbols "check" path, used as a mask so it inherits the colour. */
  --tick: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17Z"/></svg>');
  --box-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Zm-9 14-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9Z"/></svg>');
  --box-blank: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 5v14H5V5h14m0-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Z"/></svg>');
  --warning-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M1 21h22L12 2 1 21Zm12-3h-2v-2h2v2Zm0-4h-2v-4h2v4Z"/></svg>');
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: Inter, system-ui, sans-serif;
  background: var(--page);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: #c3ccd8;
  border-radius: 6px;
  border: 2px solid var(--page);
}

/* Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  padding: 24px 26px;
}

.card--elevated {
  border-color: var(--border);
  padding: 28px;
  box-shadow: var(--shadow-card);
}

.card__heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.card__icon {
  width: 20px;
  height: 20px;
  color: var(--navy-700);
  flex: none;
}

/* Form fields */
.field {
  margin-bottom: 14px;
}

.field--wide {
  grid-column: 1 / -1;
}

.field__label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-muted);
  margin-bottom: 6px;
}

.field__input,
.field__select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  padding: 11px 12px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--ink);
  background: var(--surface);
}

.field__input:focus,
.field__select:focus {
  outline: none;
  border-color: var(--navy-500);
  box-shadow: 0 0 0 3px rgba(46, 117, 182, 0.15);
}

.field__input--error,
.field__select--error {
  border-color: var(--danger-fg);
  background: var(--danger-bg);
}

.field__error {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--danger-fg);
}

.field__help {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--slate-light);
}

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

/* Password requirements: floats over the form while the field has focus, so it
   never pushes the layout around. Narrow screens have no room to float, so
   there it simply sits under the input. */
.field--hinted {
  position: relative;
}

.password-hint {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  min-width: 15rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  background: var(--surface);
  box-shadow: 0 8px 20px rgba(16, 32, 48, 0.14);
  padding: 10px 12px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms ease;
}

.field--hinted:focus-within .password-hint,
.field--hinted:hover .password-hint {
  opacity: 1;
  visibility: visible;
}

.password-hint__title {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
}

.password-hint__list {
  margin: 0;
  padding-left: 16px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--slate-light);
}

@media (max-width: 640px) {
  .password-hint {
    position: static;
    width: auto;
    min-width: 0;
    margin-top: 6px;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
  }
}


/* Buttons */
.button {
  border-radius: var(--radius-button);
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.button--primary {
  background: var(--navy-700);
  color: #fff;
  border: none;
}

.button--primary:hover {
  background: var(--navy-900);
}

.button--secondary {
  background: var(--surface);
  color: var(--ink-muted);
  border: 1px solid var(--border);
}

.button--secondary:hover {
  background: var(--surface-muted);
}

.button--block {
  width: 100%;
}

.button:disabled,
.button[aria-disabled="true"] {
  background: var(--disabled-bg);
  color: var(--disabled-fg);
  border: 1px solid var(--border-light);
  cursor: not-allowed;
}

.button-row {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Messages and alerts */
.alert {
  border-radius: var(--radius-input);
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 16px;
}

.alert--error {
  background: var(--danger-bg);
  color: var(--danger-fg);
}

.alert--success {
  background: var(--success-bg);
  color: var(--success-fg);
}

.alert--warning {
  background: var(--warning-bg);
  color: var(--warning-fg);
}

.alert--info {
  background: var(--info-bg);
  color: var(--info-fg);
}

.alert__list {
  margin: 0;
  padding-left: 18px;
}

/* Utilities */
.pill {
  font-size: 11px;
  font-weight: 600;
  color: var(--slate-light);
  background: var(--surface-sunken);
  border: 1px solid var(--border-light);
  padding: 3px 9px;
  border-radius: 20px;
}

.link {
  color: var(--navy-500);
  font-weight: 600;
  text-decoration: none;
}

.link:hover {
  text-decoration: underline;
}

.back-link {
  font-size: 12.5px;
  color: var(--navy-500);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 16px;
}

.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-light);
}

.divider__label {
  font-size: 11.5px;
  color: var(--slate-light);
  font-weight: 500;
}

.field__input--readonly {
  background: var(--surface-muted);
}

.field__error--live::before {
  content: "⚠ ";
}

/* Keyboard focus has to be visible on everything that takes it, not only on
   the controls that styled it themselves. */
:focus-visible {
  outline: 2px solid var(--navy-500);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Reaching the content without tabbing through the whole sidebar. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  background: var(--navy-700);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 8px 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.12s;
}

.skip-link:focus {
  top: 0;
}

main:focus {
  outline: none;
}