/* Shared pixel-border frame used across panels, inputs, and buttons */
.border-pixel,
.border-thin-pixel,
.panel-box,
.auth-box,
.btn,
.menu-btn,
.field-input,
.field-select,
.field-select-plain {
  clip-path: polygon(
    0 calc(100% - 6px),
    3px calc(100% - 6px),
    3px calc(100% - 3px),
    6px calc(100% - 3px),
    6px 100%,
    calc(100% - 6px) 100%,
    calc(100% - 6px) calc(100% - 3px),
    calc(100% - 3px) calc(100% - 3px),
    calc(100% - 3px) calc(100% - 6px),
    100% calc(100% - 6px),
    100% 6px,
    calc(100% - 3px) 6px,
    calc(100% - 3px) 3px,
    calc(100% - 6px) 3px,
    calc(100% - 6px) 0,
    6px 0,
    6px 3px,
    3px 3px,
    3px 6px,
    0 6px
  );
  border: 3px solid #fff;
  position: relative;
}

.border-pixel--wrapper {
  width: fit-content;
  height: fit-content;
  clip-path: polygon(
    0 calc(100% - 6px),
    3px calc(100% - 6px),
    3px calc(100% - 3px),
    6px calc(100% - 3px),
    6px 100%,
    calc(100% - 6px) 100%,
    calc(100% - 6px) calc(100% - 3px),
    calc(100% - 3px) calc(100% - 3px),
    calc(100% - 3px) calc(100% - 6px),
    100% calc(100% - 6px),
    100% 6px,
    calc(100% - 3px) 6px,
    calc(100% - 3px) 3px,
    calc(100% - 6px) 3px,
    calc(100% - 6px) 0,
    6px 0,
    6px 3px,
    3px 3px,
    3px 6px,
    0 6px
  );
  position: relative;
}

.border-pixel::after,
.border-thin-pixel::after,
.border-pixel--wrapper::after,
.panel-box::after,
.auth-box::after,
.btn::after,
.menu-btn::after,
.field-input::after,
.field-select::after,
.field-select-plain::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: -3px;
  z-index: 400;
  pointer-events: none;
  background: #fff;
  clip-path: polygon(
    0 calc(100% - 6px),
    3px calc(100% - 6px),
    3px calc(100% - 3px),
    6px calc(100% - 3px),
    6px 100%,
    calc(100% - 3px) 100%,
    calc(100% - 6px) calc(100% - 3px),
    calc(100% - 3px) calc(100% - 3px),
    calc(100% - 3px) calc(100% - 6px),
    100% calc(100% - 6px),
    100% 6px,
    calc(100% - 3px) 6px,
    calc(100% - 3px) 3px,
    calc(100% - 6px) 3px,
    calc(100% - 6px) 0,
    6px 0,
    6px 3px,
    3px 3px,
    3px 6px,
    0 6px,
    0 50%,
    3px 50%,
    3px 6px,
    6px 6px,
    6px 3px,
    calc(100% - 6px) 3px,
    calc(100% - 6px) 6px,
    calc(100% - 3px) 6px,
    calc(100% - 3px) calc(100% - 6px),
    calc(100% - 6px) calc(100% - 6px),
    calc(100% - 6px) calc(100% - 3px),
    6px calc(100% - 3px),
    6px calc(100% - 6px),
    3px calc(100% - 6px),
    3px 50%,
    0 50%
  );
}

.border-pixel-focus-ring:focus,
.border-thin-pixel-focus-ring:focus,
.btn:focus,
.menu-btn:focus,
.field-input:focus,
.field-select:focus,
.field-select-plain:focus {
  border-color: #ca8a04;
  outline: none;
}

.btn {
  align-items: center;
  background: #fff;
  color: #000;
  cursor: pointer;
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 0.5rem 1rem;
  text-decoration: none;
  text-transform: uppercase;
}

.btn-danger {
  background: #b91c1c;
  border-color: #b91c1c;
  color: #fff;
}

.btn-danger::after {
  background: #b91c1c;
  border-color: #b91c1c;
}

.btn-ring:focus {
  box-shadow: 0 0 0 2px #ca8a04, 0 0 0 4px #fff;
}

.menu-btn {
  align-items: center;
  background: #fff;
  color: #6b7280;
  cursor: pointer;
  display: inline-flex;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1rem;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
}

.menu-btn-center {
  justify-content: center;
}

.field-input,
.field-select,
.field-select-plain {
  align-items: center;
  background: #fff;
  color: #000;
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 0.5rem 1rem;
}

.field-select,
.field-select-plain {
  appearance: none;
}

.field-input {
  width: 100%;
}

.field-select {
  text-transform: uppercase;
}

.panel-box {
  background: #000;
  border-radius: 0;
  overflow: hidden;
}

.panel-content {
  color: #fff;
  padding: 1.5rem;
}

.auth-box {
  align-items: center;
  background: #000;
  display: flex;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  max-width: 28rem;
  padding: 1rem 1.5rem;
  width: 100%;
}

.auth-box-body {
  color: #fff;
  margin-inline: auto;
  max-width: 28rem;
  width: 100%;
}

.auth-box-body-wide {
  max-width: 36rem;
}

.form-actions {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.consent-row {
  align-items: flex-start;
  color: #fff;
  display: flex;
  font-size: 0.875rem;
  gap: 0.5rem;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

.consent-row-inline {
  align-items: center;
}

.intro-text {
  color: #fff;
  display: block;
  flex: 1;
}

.link-list {
  display: block;
  line-height: 1.2;
  padding: 0.22rem 0.08rem;
  text-align: left;
  width: 100%;
}

@media (max-width: 1023px) {
  .link-list {
    min-height: 1.9rem;
    padding: 0.34rem 0.1rem;
  }
}

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

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

.statbar {
  border: 1px solid rgba(255, 255, 255, 0.25);
  height: 8px;
  margin-bottom: 4px;
  width: 100%;
}

.bar {
  height: 100%;
  min-width: 2px;
}

@media (hover: hover) {
  .btn:hover,
  .menu-btn:hover {
    background: #ca8a04;
    border-color: #ca8a04;
    color: #374151;
  }

  .btn-danger:hover {
    background: #991b1b;
    border-color: #991b1b;
    color: #fff;
  }

  .btn:hover::after,
  .menu-btn:hover::after,
  .hover\:bg-yellow-600.border-pixel:hover::after,
  .hover\:bg-yellow-600.border-pixel--wrapper:hover::after,
  .hover\:bg-yellow-600.border-pixel:hover,
  .hover\:bg-yellow-600.border-pixel--wrapper:hover {
    background: #ca8a04;
    border-color: #ca8a04;
  }

  .btn-danger:hover::after {
    background: #991b1b;
    border-color: #991b1b;
  }

  .link-list:hover,
  .link-inline:hover,
  .link-hover:hover {
    color: #ca8a04;
  }
}

.btn:active,
.menu-btn:active,
.active\:bg-yellow-600.border-pixel:active,
.active\:bg-yellow-600.border-pixel--wrapper:active {
  background: #ca8a04;
  border-color: #ca8a04;
  color: #374151;
}

.btn:active::after,
.menu-btn:active::after,
.active\:bg-yellow-600.border-pixel:active::after,
.active\:bg-yellow-600.border-pixel--wrapper:active::after {
  background: #ca8a04;
  border-color: #ca8a04;
}

.btn-danger:active {
  background: #7f1d1d;
  border-color: #7f1d1d;
  color: #fff;
}

.btn-danger:active::after {
  background: #7f1d1d;
  border-color: #7f1d1d;
}

.nav-active {
  background: #ca8a04;
  border-color: #ca8a04;
  color: #374151;
}

.nav-active::after,
.nav-active.border-pixel::after,
.nav-active.border-pixel--wrapper::after {
  background: #ca8a04;
  border-color: #ca8a04;
}