.voting-filters {
  grid-template-columns:
    minmax(
      220px,
      1fr
    )
    minmax(
      160px,
      210px
    )
    auto
    auto;
}

.voting-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    18px;
}

.voting-card {
  position:
    relative;

  display:
    flex;

  min-width:
    0;

  flex-direction:
    column;

  padding:
    22px;

  overflow:
    hidden;

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

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

  background:
    var(
      --surface
    );

  transition:
    border-color
    var(
      --transition
    ),
    transform
    var(
      --transition
    );
}

.voting-card::before {
  position:
    absolute;

  top:
    -1px;

  left:
    22px;

  width:
    46px;

  height:
    2px;

  background:
    var(
      --primary
    );

  content:
    "";
}

.voting-card:hover {
  border-color:
    var(
      --border-strong
    );

  transform:
    translateY(
      -2px
    );
}

.voting-card__header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    14px;
}

.voting-card__header > div {
  min-width:
    0;
}

.voting-card__header > div > span {
  color:
    var(
      --primary
    );

  font-family:
    monospace;

  font-size:
    9px;

  letter-spacing:
    0.12em;
}

.voting-card__header h3 {
  margin:
    7px
    0
    0;

  overflow:
    hidden;

  color:
    var(
      --text
    );

  font-size:
    19px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.voting-card__problem {
  display:
    -webkit-box;

  min-height:
    66px;

  margin:
    18px
    0;

  overflow:
    hidden;

  color:
    var(
      --text-secondary
    );

  line-height:
    1.6;

  -webkit-box-orient:
    vertical;

  -webkit-line-clamp:
    3;
}

.voting-card__metrics {
  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(
        0,
        1fr
      )
    );

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

  border-left:
    1px solid
    var(
      --border
    );
}

.voting-card__metrics article {
  display:
    grid;

  min-width:
    0;

  gap:
    5px;

  padding:
    12px;

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

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

  background:
    var(
      --background-secondary
    );
}

.voting-card__metrics span {
  color:
    var(
      --text-muted
    );

  font-family:
    monospace;

  font-size:
    8px;

  letter-spacing:
    0.08em;
}

.voting-card__metrics strong {
  color:
    var(
      --text
    );

  font-family:
    monospace;

  font-size:
    19px;
}

.voting-card__meta {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    15px;

  margin-top:
    16px;

  color:
    var(
      --text-muted
    );

  font-size:
    11px;
}

.voting-card__meta span {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;
}

.voting-card__meta svg {
  width:
    14px;

  height:
    14px;
}

.voting-card__actions {
  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  gap:
    8px;

  margin-top:
    auto;

  padding-top:
    20px;
}

.voting-danger {
  color:
    var(
      --danger
    );
}

.voting-loading,
.voting-empty {
  grid-column:
    1 /
    -1;

  padding:
    55px;

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

  background:
    var(
      --surface
    );

  color:
    var(
      --text-muted
    );

  text-align:
    center;
}

.voting-send-summary {
  display:
    grid;

  gap:
    5px;

  margin-bottom:
    22px;

  padding:
    15px;

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

  background:
    var(
      --background-secondary
    );
}

.voting-send-summary span,
.voting-detail__section > span,
.voting-detail__hero > div > span {
  color:
    var(
      --primary
    );

  font-family:
    monospace;

  font-size:
    9px;

  letter-spacing:
    0.12em;
}

.voting-send-summary strong {
  color:
    var(
      --text
    );

  font-size:
    17px;
}

.voting-detail {
  display:
    grid;

  gap:
    18px;
}

.voting-detail__hero {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    18px;

  padding-bottom:
    18px;

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

.voting-detail__hero h3 {
  margin:
    7px
    0
    0;

  font-size:
    22px;
}

.voting-detail__metrics {
  display:
    grid;

  grid-template-columns:
    repeat(
      5,
      minmax(
        0,
        1fr
      )
    );

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

  border-left:
    1px solid
    var(
      --border
    );
}

.voting-detail__metrics article {
  display:
    grid;

  gap:
    4px;

  padding:
    13px;

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

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

  background:
    var(
      --background-secondary
    );
}

.voting-detail__metrics span {
  color:
    var(
      --text-muted
    );

  font-family:
    monospace;

  font-size:
    8px;
}

.voting-detail__metrics strong {
  font-family:
    monospace;

  font-size:
    20px;
}

.voting-detail__section {
  padding:
    17px;

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

  background:
    var(
      --background-secondary
    );
}

.voting-detail__section p {
  margin:
    10px
    0
    0;

  color:
    var(
      --text-secondary
    );

  line-height:
    1.7;

  white-space:
    pre-wrap;
}

.voting-recipient-list {
  display:
    grid;

  gap:
    8px;

  margin-top:
    13px;
}

.voting-recipient {
  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    auto;

  align-items:
    center;

  gap:
    12px;

  padding:
    12px;

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

  background:
    var(
      --surface
    );
}

.voting-recipient > div {
  display:
    grid;

  gap:
    2px;
}

.voting-recipient > div span {
  color:
    var(
      --text-muted
    );

  font-size:
    11px;
}

.voting-recipient p {
  grid-column:
    1 /
    -1;

  margin:
    0;

  padding-top:
    9px;

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

.public-vote-body {
  background:
    var(
      --background
    );
}

.public-vote-page {
  display:
    grid;

  min-height:
    100vh;

  place-items:
    center;

  padding:
    28px;
}

.public-vote-shell {
  width:
    min(
      100%,
      920px
    );

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

  background:
    var(
      --surface
    );
}

.public-vote-header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  padding:
    18px
    22px;

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

.public-vote-brand {
  display:
    flex;

  align-items:
    center;

  gap:
    11px;
}

.public-vote-brand > span {
  display:
    grid;

  width:
    38px;

  height:
    38px;

  place-items:
    center;

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

  color:
    var(
      --primary
    );

  font-family:
    monospace;

  font-weight:
    700;
}

.public-vote-brand div {
  display:
    grid;
}

.public-vote-brand strong {
  letter-spacing:
    0.14em;
}

.public-vote-brand small {
  color:
    var(
      --text-muted
    );

  font-family:
    monospace;

  font-size:
    8px;

  letter-spacing:
    0.1em;
}

.public-vote-hero {
  padding:
    34px;

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

  background:
    var(
      --background-secondary
    );
}

.public-vote-hero > span,
.public-vote-section > span {
  color:
    var(
      --primary
    );

  font-family:
    monospace;

  font-size:
    9px;

  letter-spacing:
    0.12em;
}

.public-vote-hero h1 {
  max-width:
    720px;

  margin:
    12px
    0;

  font-size:
    clamp(
      27px,
      5vw,
      42px
    );
}

.public-vote-hero p,
.public-vote-hero small {
  color:
    var(
      --text-secondary
    );
}

.public-vote-section {
  padding:
    28px
    34px;

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

.public-vote-section p {
  margin:
    12px
    0
    0;

  color:
    var(
      --text-secondary
    );

  font-size:
    16px;

  line-height:
    1.8;

  white-space:
    pre-wrap;
}

.public-vote-form {
  display:
    grid;

  gap:
    22px;

  padding:
    34px;
}

.public-vote-options {
  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );

  gap:
    12px;
}

.public-vote-options label {
  cursor:
    pointer;
}

.public-vote-options input {
  position:
    absolute;

  width:
    1px;

  height:
    1px;

  opacity:
    0;
}

.public-vote-options label > span {
  display:
    flex;

  min-height:
    150px;

  flex-direction:
    column;

  align-items:
    flex-start;

  gap:
    7px;

  padding:
    20px;

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

  background:
    var(
      --background-secondary
    );

  transition:
    border-color
    var(
      --transition
    ),
    background
    var(
      --transition
    ),
    transform
    var(
      --transition
    );
}

.public-vote-options label:hover > span {
  border-color:
    var(
      --border-strong
    );

  transform:
    translateY(
      -2px
    );
}

.public-vote-options input:checked + span {
  border-color:
    var(
      --primary
    );

  background:
    var(
      --primary-muted
    );
}

.public-vote-options svg {
  width:
    25px;

  height:
    25px;

  margin-bottom:
    auto;

  color:
    var(
      --primary
    );
}

.public-vote-options strong {
  color:
    var(
      --text
    );
}

.public-vote-options small {
  color:
    var(
      --text-muted
    );

  line-height:
    1.5;
}

.public-vote-result,
.public-vote-error,
.public-vote-loading {
  display:
    flex;

  min-height:
    360px;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  padding:
    40px;

  text-align:
    center;
}

.public-vote-result > div {
  display:
    grid;

  width:
    70px;

  height:
    70px;

  place-items:
    center;

  margin-bottom:
    18px;

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

  color:
    var(
      --primary
    );
}

.public-vote-result.is-success > div {
  border-color:
    var(
      --success
    );

  color:
    var(
      --success
    );
}

.public-vote-result p,
.public-vote-error p {
  max-width:
    520px;

  color:
    var(
      --text-secondary
    );

  line-height:
    1.7;
}

@media (
  max-width:
    1100px
) {
  .voting-grid {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }
}

@media (
  max-width:
    800px
) {
  .voting-filters {
    grid-template-columns:
      minmax(
        0,
        1fr
      )
      minmax(
        140px,
        190px
      );
  }

  .voting-detail__metrics {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

  .public-vote-options {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }

  .public-vote-options label > span {
    min-height:
      125px;
  }
}

@media (
  max-width:
    600px
) {
  .voting-filters {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }

  .voting-card {
    padding:
      17px;
  }

  .voting-card__metrics {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

  .voting-card__actions
  .button {
    flex:
      1;
  }

  .public-vote-page {
    padding:
      10px;
  }

  .public-vote-header,
  .public-vote-hero,
  .public-vote-section,
  .public-vote-form {
    padding:
      20px;
  }

  .public-vote-header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .voting-detail__hero {
    flex-direction:
      column;
  }
}