/*
  Layout
*/

.u-container     { max-inline-size: 1200px; }
.u-container-xl  { max-inline-size: 2400px; }
.u-container-m   { max-inline-size: 1000px; }
.u-container-s   { max-inline-size: 800px; }
.u-container-xs  { max-inline-size: 600px; }
.u-container-xxs { max-inline-size: 400px; }

.u-center { margin: auto; }

/* Align */
.u-align-start { text-align: start; }
.u-align-center { text-align: center; }
.u-align-end { text-align: end; }

/* Stack */
.u-stack,
.u-stack-s,
.u-stack-2xs,
.u-stack-3xs,
.u-stack-4xs,
.u-stack-l,
.u-stack-horizontal,
.u-stack-horizontal-first {
  display: flex;
  justify-content: flex-start;
  flex-flow: column;
  gap: var(--space-xs);
}

.u-stack-s {
  gap: var(--space-s);
}

.u-stack-2xs {
  gap: var(--space-2xs);
}

.u-stack-3xs {
  gap: var(--space-3xs);
}

.u-stack-4xs {
  gap: var(--space-4xs);
}

.u-stack-l {
  gap: var(--space-l);
}

.u-stack-horizontal,
.u-stack-horizontal-first {
  align-items: center;
  flex-flow: column wrap;
  flex-direction: row;
}

.u-stack-horizontal-first > :first-child {
  flex: 1;
}

/* Column */
.u-column,
.u-column-l {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
}

.u-column-l {
  max-width: 900px;
}

/* Font Weights */
.u-medium {
  font-weight: var(--font-medium);
}

/* Required */
.u-required {
  font-weight: var(--font-bold);
  color: var(--color-danger);
  margin-inline-start: var(--space-4xs);
  vertical-align: middle;
}


/* Error */
.u-error {
  color: var(--color-danger);
}

/* Header */
.u-header,
.u-header-nav {
  display: flex;
  flex-flow: row;
  align-items: center;
  gap: var(--space-m);
}

.u-header-end {
  margin-inline-start: auto;
}

.u-header-nav a {
  font-weight: 600;
  text-decoration: none;
}

/* Notices and Alerts */
.u-notice,
.u-alert {
  position: fixed;
  top: var(--space-s);
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 40px);
  max-width: 500px;
  text-align: center;
  border-radius: var(--radius-m);
  background: var(--color-warning);
  color: var(--color-white);
  z-index: var(--index-toast);
  animation: 3s ease forwards fadeToastInAndOut;
}

.u-alert {
  background: var(--color-danger);
  color: var(--color-white);
}

/* Loading */
.u-loading {
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: var(--space-s);
  color: var(--color-grey);
}

/* Misc. */
hr {
  background: var(--color-border);
  display: block;
  margin: 0;
  border: 0;
  block-size: 1px;
  inline-size: 100%;
}

/* Lists */
.u-plain-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.u-inline-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}
.u-inline-list li {
  margin: 0 var(--space-2xs);
  position: relative;
  white-space: nowrap;
}
.u-inline-list li:first-child {
  margin-left: 0;
}


/* Content */
.u-content {
  background-color: var(--color-white);
  border-top: 1px solid var(--color-cc-sand-2);
}

.u-content h2 { margin-bottom: var(--space-2xs); }
.u-content h3 { margin-bottom: var(--space-3xs); }

/* Map */
.u-map {
  border-radius: var(--radius);
}

/* Intro Text  */

.u-intro {
  font-size: var(--text-size-l);
  margin-bottom: var(--space-m);
}

/* Summary + Details */
summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding-left: var(--space-m);
  font-weight: var(--font-medium);
  color: var(--color-cc-burgandy);
  display: inline-block;
}
summary::-webkit-details-marker { display: none; }

summary::before {
  content: "▶";
  position: absolute;
  left: 0;
  font-size: var(--text-size-xs);
  transition: transform .14s;
}

details[open] summary::before { transform: rotate(90deg); }

/* Table */
table {
  inline-size: 100%;
  text-align: start;
  border-spacing: 0;
  border-collapse: separate;
  font-variant-numeric: tabular-nums;
}

th {
  border-block-end: 1px solid var(--color-cc-sand-3);
  text-align: start;
  font-weight: var(--font-medium);
  background: var(--color-cc-sand-2);
}

th, td {
  padding: var(--space-2xs) var(--space-xs);
}

/* Sticky */
.u-sticky {
  position: sticky;
  top: 0;
  z-index: var(--index-sticky);
}

/* Display */
.u-display-ib { display: inline-block;}
.u-display-b { display: block;}
.u-display-i { display: inline;}
.u-display-f { display: flex;}

/* Align */
.u-align-t { vertical-align: top;}
.u-align-m { vertical-align: middle;}
.u-align-b { vertical-align: bottom;}

/* Padding */
.u-padding { padding: var(--space-m); }

.u-padding-t { padding-top: var(--space-m); }
.u-padding-t-s { padding-top: var(--space-s); }
.u-padding-t-xs { padding-top: var(--space-xs); }

.u-padding-b { padding-bottom: var(--space-m); }
.u-padding-b-s { padding-bottom: var(--space-s); }

.u-padding-x {
  padding-left: var(--space-m);
  padding-right: var(--space-m);
}
.u-padding-y {
  padding-top: var(--space-m);
  padding-bottom: var(--space-m);
}
.u-padding-y-2xs {
  padding-top: var(--space-2xs);
  padding-bottom: var(--space-2xs);
}
.u-padding-y-3xs {
  padding-top: var(--space-3xs);
  padding-bottom: var(--space-3xs);
}

/* Margin */
.u-margin { margin: var(--space-m); }
.u-margin-t { margin-top: var(--space-m); }
.u-margin-b { margin-bottom: var(--space-m); }
.u-margin-x {
  margin-left: var(--space-m);
  margin-right: var(--space-m);
}
.u-margin-y {
  margin-top: var(--space-m);
  margin-bottom: var(--space-m);
}

.u-margin-s { margin: var(--space-s); }
.u-margin-t-s { margin-top: var(--space-s); }
.u-margin-b-s { margin-bottom: var(--space-s); }
.u-margin-x-s {
  margin-left: var(--space-s);
  margin-right: var(--space-s);
}
.u-margin-y-s {
  margin-top: var(--space-s);
  margin-bottom: var(--space-s);
}

.u-margin-xs { margin: var(--space-xs); }
.u-margin-t-xs { margin-top: var(--space-xs); }
.u-margin-b-xs { margin-bottom: var(--space-xs); }
.u-margin-x-xs {
  margin-left: var(--space-xs);
  margin-right: var(--space-xs);
}
.u-margin-y-xs {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-xs);
}

.u-margin-t-2xs { margin-top: var(--space-2xs); }
.u-margin-y-2xs { margin-top: var(--space-2xs); margin-bottom: var(--space-2xs); }
.u-margin-y-3xs { margin-top: var(--space-3xs); margin-bottom: var(--space-3xs); }
.u-margin-y-0 { margin-top: 0; margin-bottom: 0; }

.u-margin-l { margin: var(--space-l); }
.u-margin-t-l { margin-top: var(--space-l); }
.u-margin-b-l { margin-bottom: var(--space-l); }
.u-margin-x-l {
  margin-left: var(--space-l);
  margin-right: var(--space-l);
}
.u-margin-y-l {
  margin-top: var(--space-l);
  margin-bottom: var(--space-l);
}