:root {
  --app-bg: #f6f5f1;
  --app-surface: #ffffff;

  --app-text: #1d2521;
  --app-muted: #68716c;

  --app-border: #dfe3df;
  --app-border-strong: #b8c0bb;

  --app-accent: #234f3f;
  --app-accent-hover: #1b4033;

  --app-danger: #9b2c2c;
  --app-danger-bg: #fff6f6;

  --app-success: #245b43;
  --app-success-bg: #f4faf6;

  --app-radius-sm: 0.5rem;
  --app-radius-md: 0.875rem;

  --app-space-1: 0.5rem;
  --app-space-2: 0.75rem;
  --app-space-3: 1rem;
  --app-space-4: 1.5rem;
  --app-space-5: 2rem;
  --app-space-6: 3rem;

  --app-content-max: 72rem;
  --app-sidebar-width: 15rem;
}


/* ============================================================
   Global Foundation
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 0;
}

body {
  margin: 0;
  min-width: 0;

  background: var(--app-bg);
  color: var(--app-text);

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  line-height: 1.6;
}

a {
  color: inherit;
}


/* ============================================================
   Application Shell
   ============================================================ */

.app-shell {
  min-height: 100vh;

  display: flex;
  flex-direction: column;
}


/* ============================================================
   Header
   ============================================================ */

.app-header {
  min-height: 4.5rem;

  padding:
    var(--app-space-3)
    clamp(1rem, 4vw, 3rem);

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: var(--app-space-3);

  background: var(--app-surface);

  border-bottom:
    1px solid var(--app-border);
}

.app-brand {
  font-size: 1.125rem;
  font-weight: 700;

  text-decoration: none;
}

.app-brand:hover,
.app-brand:focus-visible {
  text-decoration: underline;
}

.app-context {
  color: var(--app-muted);

  font-size: 0.875rem;
}


/* ============================================================
   Main Layout
   ============================================================ */

.app-layout {
  width: 100%;
  max-width: var(--app-content-max);

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    var(--app-sidebar-width)
    minmax(0, 1fr);

  flex: 1;
}


/* ============================================================
   Sidebar Navigation
   ============================================================ */

.app-sidebar {
  padding:
    var(--app-space-5)
    var(--app-space-3);

  border-right:
    1px solid var(--app-border);
}

.app-nav {
  display: grid;

  gap: 0.25rem;
}

.app-nav__link {
  padding:
    var(--app-space-2)
    var(--app-space-3);

  border-radius:
    var(--app-radius-sm);

  color: var(--app-muted);

  text-decoration: none;

  font-weight: 600;
}

.app-nav__link:hover,
.app-nav__link:focus-visible {
  background: var(--app-surface);

  color: var(--app-text);
}

.app-nav__link--active {
  background: var(--app-surface);

  color: var(--app-accent);
}


/* ============================================================
   Main View
   ============================================================ */

.app-main {
  min-width: 0;

  padding:
    clamp(2rem, 6vw, 5rem)
    clamp(1rem, 5vw, 4rem);
}

.app-view {
  width: 100%;
  max-width: 44rem;
}

.app-eyebrow {
  margin:
    0
    0
    var(--app-space-2);

  color: var(--app-accent);

  font-size: 0.8rem;
  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}

.app-view h1 {
  max-width: 12ch;

  margin: 0;

  font-size:
    clamp(2rem, 6vw, 4rem);

  line-height: 1.05;

  letter-spacing: -0.035em;
}

.app-lead {
  max-width: 38rem;

  margin:
    var(--app-space-4)
    0
    var(--app-space-5);

  color: var(--app-muted);

  font-size:
    clamp(1rem, 2vw, 1.125rem);
}


/* ============================================================
   Generic Status
   ============================================================ */

.app-status {
  padding:
    var(--app-space-4);

  display: grid;

  gap: 0.25rem;

  background:
    var(--app-surface);

  border:
    1px solid
    var(--app-border);

  border-radius:
    var(--app-radius-md);
}

.app-status__label {
  color: var(--app-muted);

  font-size: 0.8rem;

  text-transform: uppercase;

  letter-spacing: 0.06em;
}

.app-status--error {
  background:
    var(--app-danger-bg);

  color:
    var(--app-danger);

  border-color:
    color-mix(
      in srgb,
      var(--app-danger) 25%,
      transparent
    );
}


/* ============================================================
   Authentication Form
   ============================================================ */

.auth-form {
  width: 100%;

  max-width: 32rem;

  display: grid;

  gap: var(--app-space-4);
}

.auth-form__field {
  display: grid;

  gap: var(--app-space-1);
}

.auth-form__label {
  font-weight: 650;
}

.auth-form__input {
  width: 100%;

  min-height: 3rem;

  padding:
    0.75rem
    0.875rem;

  background:
    var(--app-surface);

  color:
    var(--app-text);

  border:
    1px solid
    var(--app-border-strong);

  border-radius:
    var(--app-radius-sm);

  font: inherit;
}

.auth-form__input:hover {
  border-color:
    var(--app-muted);
}

.auth-form__input:focus {
  outline:
    3px solid
    color-mix(
      in srgb,
      var(--app-accent) 25%,
      transparent
    );

  outline-offset: 2px;

  border-color:
    var(--app-accent);
}

.auth-form__input[aria-invalid="true"] {
  border-color:
    var(--app-danger);
}

.auth-form__hint {
  margin: 0;

  color: var(--app-muted);

  font-size: 0.875rem;
}

.auth-form__actions {
  padding-top:
    var(--app-space-1);

  display: grid;

  gap: var(--app-space-3);
}

.auth-form__submit {
  min-height: 3rem;

  padding:
    0.75rem
    1rem;

  border: 0;

  border-radius:
    var(--app-radius-sm);

  background:
    var(--app-accent);

  color: #ffffff;

  font: inherit;
  font-weight: 700;

  cursor: pointer;
}

.auth-form__submit:hover {
  background:
    var(--app-accent-hover);
}

.auth-form__submit:focus-visible {
  outline:
    3px solid
    color-mix(
      in srgb,
      var(--app-accent) 35%,
      transparent
    );

  outline-offset: 3px;
}

.auth-form__submit:disabled {
  cursor: wait;

  opacity: 0.7;
}

.auth-form__alternate {
  margin: 0;

  color:
    var(--app-muted);

  font-size: 0.925rem;
}

.auth-form__alternate a {
  color:
    var(--app-accent);

  font-weight: 650;
}


/* ============================================================
   Authentication Messages
   ============================================================ */

.auth-message {
  min-height: 1.5rem;

  margin: 0;

  padding:
    var(--app-space-3);

  border:
    1px solid
    transparent;

  border-radius:
    var(--app-radius-sm);
}

.auth-message:empty {
  display: none;
}

.auth-message[data-state="error"] {
  background:
    var(--app-danger-bg);

  color:
    var(--app-danger);

  border-color:
    color-mix(
      in srgb,
      var(--app-danger) 25%,
      transparent
    );
}

.auth-message[data-state="ready"] {
  background:
    var(--app-success-bg);

  color:
    var(--app-success);

  border-color:
    color-mix(
      in srgb,
      var(--app-success) 25%,
      transparent
    );
}


/* ============================================================
   Profile Form
   ============================================================ */

.profile-form {
  width: 100%;

  max-width: 36rem;

  display: grid;

  gap: var(--app-space-4);
}

.profile-form__field {
  display: grid;

  gap: var(--app-space-1);
}

.profile-form__label {
  font-weight: 650;
}

.profile-form__input {
  width: 100%;

  min-height: 3rem;

  padding:
    0.75rem
    0.875rem;

  background:
    var(--app-surface);

  color:
    var(--app-text);

  border:
    1px solid
    var(--app-border-strong);

  border-radius:
    var(--app-radius-sm);

  font: inherit;
}

.profile-form__textarea {
  min-height: 8rem;

  resize: vertical;
}

.profile-form__input:hover {
  border-color:
    var(--app-muted);
}

.profile-form__input:focus {
  outline:
    3px solid
    color-mix(
      in srgb,
      var(--app-accent) 25%,
      transparent
    );

  outline-offset: 2px;

  border-color:
    var(--app-accent);
}

.profile-form__input[aria-invalid="true"] {
  border-color:
    var(--app-danger);
}

.profile-form__hint {
  margin: 0;

  color:
    var(--app-muted);

  font-size: 0.875rem;
}

.profile-form__actions {
  padding-top:
    var(--app-space-1);

  display: grid;

  gap: var(--app-space-3);
}

.profile-form__submit {
  min-height: 3rem;

  padding:
    0.75rem
    1rem;

  border: 0;

  border-radius:
    var(--app-radius-sm);

  background:
    var(--app-accent);

  color: #ffffff;

  font: inherit;
  font-weight: 700;

  cursor: pointer;
}

.profile-form__submit:hover {
  background:
    var(--app-accent-hover);
}

.profile-form__submit:focus-visible {
  outline:
    3px solid
    color-mix(
      in srgb,
      var(--app-accent) 35%,
      transparent
    );

  outline-offset: 3px;
}

.profile-form__submit:disabled {
  cursor: wait;

  opacity: 0.7;
}


/* ============================================================
   Profile Messages
   ============================================================ */

.profile-message {
  min-height: 1.5rem;

  margin: 0;

  padding:
    var(--app-space-3);

  border:
    1px solid
    transparent;

  border-radius:
    var(--app-radius-sm);
}

.profile-message:empty {
  display: none;
}

.profile-message[data-state="error"] {
  background:
    var(--app-danger-bg);

  color:
    var(--app-danger);

  border-color:
    color-mix(
      in srgb,
      var(--app-danger) 25%,
      transparent
    );
}

.profile-message[data-state="ready"] {
  background:
    var(--app-success-bg);

  color:
    var(--app-success);

  border-color:
    color-mix(
      in srgb,
      var(--app-success) 25%,
      transparent
    );
}


/* ============================================================
   Language Relationships
   ============================================================ */

.language-panel {
  width: 100%;
  max-width: 40rem;

  margin-top:
    var(--app-space-5);

  padding:
    var(--app-space-4);

  background:
    var(--app-surface);

  border:
    1px solid
    var(--app-border);

  border-radius:
    var(--app-radius-md);
}

.language-panel__header {
  margin-bottom:
    var(--app-space-4);
}

.language-panel__header h2 {
  margin:
    0
    0
    var(--app-space-1);

  font-size:
    clamp(
      1.125rem,
      3vw,
      1.4rem
    );
}

.language-panel__header p {
  margin: 0;

  color:
    var(--app-muted);
}

.language-form {
  display: grid;

  gap:
    var(--app-space-4);
}

.language-form__field {
  display: grid;

  gap:
    var(--app-space-1);
}

.language-form__label {
  font-weight: 650;
}

.language-form__input {
  width: 100%;

  min-height: 3rem;

  padding:
    0.75rem
    0.875rem;

  background:
    var(--app-surface);

  color:
    var(--app-text);

  border:
    1px solid
    var(--app-border-strong);

  border-radius:
    var(--app-radius-sm);

  font: inherit;
}

.language-form__input:hover {
  border-color:
    var(--app-muted);
}

.language-form__input:focus {
  outline:
    3px solid
    color-mix(
      in srgb,
      var(--app-accent) 25%,
      transparent
    );

  outline-offset: 2px;

  border-color:
    var(--app-accent);
}

.language-form__input[aria-invalid="true"] {
  border-color:
    var(--app-danger);
}

.language-form__input:disabled {
  opacity: 0.7;
}

.language-form__hint {
  margin: 0;

  color:
    var(--app-muted);

  font-size:
    0.875rem;
}

.language-form__actions {
  padding-top:
    var(--app-space-1);
}

.language-form__submit {
  min-height: 3rem;

  padding:
    0.75rem
    1rem;

  border: 0;

  border-radius:
    var(--app-radius-sm);

  background:
    var(--app-accent);

  color: #ffffff;

  font: inherit;
  font-weight: 700;

  cursor: pointer;
}

.language-form__submit:hover {
  background:
    var(--app-accent-hover);
}

.language-form__submit:focus-visible {
  outline:
    3px solid
    color-mix(
      in srgb,
      var(--app-accent) 35%,
      transparent
    );

  outline-offset: 3px;
}

.language-form__submit:disabled {
  cursor: wait;

  opacity: 0.7;
}


/* ============================================================
   Language Messages
   ============================================================ */

.language-message {
  min-height: 1.5rem;

  margin: 0;

  padding:
    var(--app-space-3);

  border:
    1px solid
    transparent;

  border-radius:
    var(--app-radius-sm);
}

.language-message:empty {
  display: none;
}

.language-message[data-state="error"] {
  background:
    var(--app-danger-bg);

  color:
    var(--app-danger);

  border-color:
    color-mix(
      in srgb,
      var(--app-danger) 25%,
      transparent
    );
}

.language-message[data-state="ready"] {
  background:
    var(--app-success-bg);

  color:
    var(--app-success);

  border-color:
    color-mix(
      in srgb,
      var(--app-success) 25%,
      transparent
    );
}


/* ============================================================
   Language Relationship List
   ============================================================ */

.language-list {
  display: grid;

  gap:
    var(--app-space-3);
}

.language-empty {
  margin: 0;

  padding:
    var(--app-space-4);

  color:
    var(--app-muted);

  border:
    1px dashed
    var(--app-border-strong);

  border-radius:
    var(--app-radius-sm);
}

.language-card {
  min-width: 0;

  padding:
    var(--app-space-3);

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap:
    var(--app-space-3);

  border:
    1px solid
    var(--app-border);

  border-radius:
    var(--app-radius-sm);
}

.language-card__content {
  min-width: 0;
}

.language-card__title {
  margin: 0;

  overflow-wrap: anywhere;

  font-size: 1rem;
}

.language-card__relationship {
  margin:
    0.125rem
    0
    0;

  color:
    var(--app-accent);

  font-size:
    0.875rem;

  font-weight: 700;
}

.language-card__region {
  margin:
    var(--app-space-1)
    0
    0;

  color:
    var(--app-muted);

  overflow-wrap: anywhere;

  font-size:
    0.875rem;
}

.language-card__remove {
  flex:
    0
    0
    auto;

  min-height: 2.5rem;

  padding:
    0.5rem
    0.75rem;

  background:
    transparent;

  color:
    var(--app-danger);

  border:
    1px solid
    color-mix(
      in srgb,
      var(--app-danger) 35%,
      var(--app-border)
    );

  border-radius:
    var(--app-radius-sm);

  font: inherit;
  font-weight: 650;

  cursor: pointer;
}

.language-card__remove:hover {
  background:
    var(--app-danger-bg);
}

.language-card__remove:focus-visible {
  outline:
    3px solid
    color-mix(
      in srgb,
      var(--app-danger) 25%,
      transparent
    );

  outline-offset: 2px;
}

.language-card__remove:disabled {
  cursor: wait;

  opacity: 0.7;
}

/* ============================================================
   Participation Interests
   ============================================================ */

.participation-panel {
  width: 100%;
  max-width: 40rem;

  margin-top:
    var(--app-space-5);

  padding:
    var(--app-space-4);

  background:
    var(--app-surface);

  border:
    1px solid
    var(--app-border);

  border-radius:
    var(--app-radius-md);
}


.participation-panel__header {
  margin-bottom:
    var(--app-space-4);
}


.participation-panel__header h2 {
  margin:
    0
    0
    var(--app-space-1);

  font-size:
    clamp(
      1.125rem,
      3vw,
      1.4rem
    );
}


.participation-panel__header p {
  margin: 0;

  color:
    var(--app-muted);
}


/* ============================================================
   Participation Form
   ============================================================ */

.participation-form {
  display: grid;

  gap:
    var(--app-space-4);
}


.participation-form__fieldset {
  min-width: 0;

  margin: 0;
  padding: 0;

  border: 0;
}


.participation-form__legend {
  margin-bottom:
    var(--app-space-3);

  padding: 0;

  font-weight: 650;
}


.participation-options {
  display: grid;

  gap:
    var(--app-space-2);
}


/* ============================================================
   Participation Option
   ============================================================ */

.participation-option {
  min-width: 0;

  padding:
    var(--app-space-3);

  display: flex;
  align-items: flex-start;

  gap:
    var(--app-space-3);

  background:
    var(--app-surface);

  border:
    1px solid
    var(--app-border-strong);

  border-radius:
    var(--app-radius-sm);

  cursor: pointer;
}


.participation-option:hover {
  border-color:
    var(--app-muted);
}


.participation-option:focus-within {
  outline:
    3px solid
    color-mix(
      in srgb,
      var(--app-accent) 25%,
      transparent
    );

  outline-offset: 2px;

  border-color:
    var(--app-accent);
}


.participation-option:has(
  .participation-option__input:checked
) {
  background:
    color-mix(
      in srgb,
      var(--app-accent) 6%,
      var(--app-surface)
    );

  border-color:
    var(--app-accent);
}


.participation-option:has(
  .participation-option__input:disabled
) {
  cursor: wait;

  opacity: 0.7;
}


.participation-option__input {
  flex:
    0
    0
    auto;

  width: 1.125rem;
  height: 1.125rem;

  margin:
    0.2rem
    0
    0;

  accent-color:
    var(--app-accent);

  cursor: pointer;
}


.participation-option__input:disabled {
  cursor: wait;
}


.participation-option__content {
  min-width: 0;

  display: grid;

  gap: 0.125rem;
}


.participation-option__label {
  overflow-wrap: anywhere;

  color:
    var(--app-text);
}


.participation-option__description {
  color:
    var(--app-muted);

  overflow-wrap: anywhere;

  font-size:
    0.875rem;

  line-height: 1.5;
}


/* ============================================================
   Participation Actions
   ============================================================ */

.participation-form__actions {
  padding-top:
    var(--app-space-1);
}


.participation-form__submit {
  min-height: 3rem;

  padding:
    0.75rem
    1rem;

  border: 0;

  border-radius:
    var(--app-radius-sm);

  background:
    var(--app-accent);

  color: #ffffff;

  font: inherit;
  font-weight: 700;

  cursor: pointer;
}


.participation-form__submit:hover {
  background:
    var(--app-accent-hover);
}


.participation-form__submit:focus-visible {
  outline:
    3px solid
    color-mix(
      in srgb,
      var(--app-accent) 35%,
      transparent
    );

  outline-offset: 3px;
}


.participation-form__submit:disabled {
  cursor: wait;

  opacity: 0.7;
}


/* ============================================================
   Participation Messages
   ============================================================ */

.participation-message {
  min-height: 1.5rem;

  margin: 0;

  padding:
    var(--app-space-3);

  border:
    1px solid
    transparent;

  border-radius:
    var(--app-radius-sm);
}


.participation-message:empty {
  display: none;
}


.participation-message[data-state="error"] {
  background:
    var(--app-danger-bg);

  color:
    var(--app-danger);

  border-color:
    color-mix(
      in srgb,
      var(--app-danger) 25%,
      transparent
    );
}


.participation-message[data-state="ready"] {
  background:
    var(--app-success-bg);

  color:
    var(--app-success);

  border-color:
    color-mix(
      in srgb,
      var(--app-success) 25%,
      transparent
    );
}


/* ============================================================
   Current Participation Interests
   ============================================================ */

.participation-current {
  min-width: 0;
}


.participation-empty {
  margin: 0;

  padding:
    var(--app-space-4);

  color:
    var(--app-muted);

  border:
    1px dashed
    var(--app-border-strong);

  border-radius:
    var(--app-radius-sm);
}


.participation-current__list {
  margin: 0;
  padding: 0;

  display: grid;

  gap:
    var(--app-space-2);

  list-style: none;
}


.participation-current__item {
  min-width: 0;

  padding:
    var(--app-space-3);

  background:
    color-mix(
      in srgb,
      var(--app-accent) 5%,
      var(--app-surface)
    );

  border:
    1px solid
    var(--app-border);

  border-radius:
    var(--app-radius-sm);
}


.participation-current__label {
  display: block;

  overflow-wrap: anywhere;

  color:
    var(--app-accent);

  font-size:
    0.925rem;
}

/* ============================================================
   Footer
   ============================================================ */

.app-footer {
  padding:
    var(--app-space-3)
    clamp(1rem, 4vw, 3rem);

  color:
    var(--app-muted);

  border-top:
    1px solid
    var(--app-border);

  font-size:
    0.8rem;
}

.app-footer p {
  margin: 0;
}


/* ============================================================
   Responsive Layer
   ============================================================ */

@media (max-width: 48rem) {

  .app-layout {
    display: block;
  }

  .app-sidebar {
    padding:
      var(--app-space-2)
      var(--app-space-3);

    overflow-x: auto;

    border-right: 0;

    border-bottom:
      1px solid
      var(--app-border);
  }

  .app-nav {
    width: max-content;

    display: flex;

    gap:
      var(--app-space-1);
  }

  .app-nav__link {
    white-space: nowrap;
  }

  .app-main {
    padding:
      var(--app-space-6)
      var(--app-space-4);
  }

  .auth-form,
  .profile-form,
  .language-panel,
  .participation-panel {
    max-width: none;
  }

  .language-card {
    align-items: stretch;

    flex-direction: column;
  }

  .language-card__remove {
    width: 100%;
  }

}


/* ============================================================
   Reduced Motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }

}