/* Community Vault — reuses the archive's root tokens from ../styles.css */

body[data-page="vault"] {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

/* Desktop and tablet. The archive header is a 3-column grid built around a
   search box this page does not have, and responsive.css gives .top-nav-actions
   min-width: 0, so in that grid the Submit button's cell collapses to 0 and the
   button escapes it. Above phone width this page owns its header layout instead.
   At 760px and below none of this applies: the header is the homepage's burger
   header from responsive.css, untouched, so both pages behave the same. */
@media (min-width: 761px) {
  .vault-site-header {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }

  .vault-site-header .top-nav-left {
    flex: 0 1 auto;
    min-width: 0;
  }

  .vault-site-header .top-nav-actions {
    flex: 0 0 auto;
    min-width: auto;
    justify-self: auto;
    white-space: nowrap;
  }

  /* responsive.css hides .top-nav-action:first-child because the archive header
     carries two buttons and drops one on narrow screens. This header has only
     the one, so that rule would hide it entirely between ~760 and ~1100px. */
  .vault-site-header .top-nav-action:first-child {
    display: inline-flex;
  }
}

/* Same surface as the homepage's active pill (.top-nav-pills a[aria-pressed="true"]). */
.vault-site-header .top-nav-pills a[aria-current="page"] {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 1px 1px rgba(23, 23, 22, 0.025),
    0 6px 16px rgba(23, 23, 22, 0.045);
}

/* The header is position: fixed on phones, so give the page room underneath it. */
@media (max-width: 760px) {
  body[data-page="vault"] .vault-main {
    padding-top: 104px;
  }

  /* Small phones: the open menu is taller than the screen, and a late rule in
     responsive.css forces the header to overflow: visible (the homepage needs it
     for its search suggestions), which left "Submit your entry" unreachable. This
     header has no search, so let the open menu scroll, and hold the page still
     behind it (html carries overflow-x: clip, so locking body alone does nothing). */
  body.mobile-menu-open .vault-site-header {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  html:has(body[data-page="vault"].mobile-menu-open) {
    overflow: hidden;
  }

  /* Round closed: the menu's entry button greys out like the others. */
  .mobile-nav-cta.vault-cta[aria-disabled="true"] {
    color: var(--muted);
    background: rgba(23, 23, 22, 0.06);
    border-color: var(--line);
    box-shadow: none;
  }
}

.vault-main {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(28px, 6vw, 64px) clamp(16px, 4vw, 28px) 40px;
}

.vault-main h2 {
  margin: 0 0 6px;
  font-size: clamp(1.55rem, 2.65vw, 2.4rem);
  font-weight: 560;
  letter-spacing: -0.03em;
  line-height: 1;
}

/* ---------- 1. The pot ---------- */

.vault-pot {
  position: relative;
  padding-top: clamp(8px, 2vw, 26px);
  text-align: center;
}

.vault-pot::before {
  content: "";
  position: absolute;
  top: -10%;
  right: -14%;
  bottom: 10%;
  left: -14%;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(29, 79, 255, 0.09), transparent 66%);
  filter: blur(30px);
  pointer-events: none;
}

/* styles.css caps every h1 at 640px with no auto margin (the homepage title is
   left-anchored). Here that parked the box at the left of the 704px hero and put
   the centred title 32px off the page axis. The right padding cancels the
   negative tracking trimmed after the last letter, which otherwise nudges the
   ink ~2px off centre. */
.vault-pot h1 {
  max-width: none;
  margin: 0;
  padding-right: 0.05em;
  font-size: clamp(2.7rem, 8.5vw, 5rem);
  font-weight: 550;
  letter-spacing: -0.05em;
  line-height: 0.94;
}

.vault-lede {
  max-width: 44ch;
  margin: 16px auto 0;
  color: #46433d;
  font-size: clamp(0.98rem, 1.18vw, 1.08rem);
  font-weight: 500;
  line-height: 1.5;
}

.vault-hero-visuals {
  display: flex;
  justify-content: center;
  margin: 2px 0 20px;
}

.vault-polaroid {
  margin: 0;
  background: #fff;
  padding: 6px 6px 7px;
  border: 1px solid rgba(23, 23, 22, 0.07);
  border-radius: 6px;
  box-shadow:
    0 18px 42px rgba(23, 23, 22, 0.16),
    0 4px 12px rgba(23, 23, 22, 0.07);
}

.vault-polaroid img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
  background: #e9e5db;
}

.vault-polaroid figcaption {
  padding: 5px 2px 1px;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 660;
  letter-spacing: 0.02em;
  text-align: center;
}

/* Up to small laptops: a fanned hand of photos above the title (the desktop
   field needs ~1260px so its outer cards are not cut by the viewport) */
@media (max-width: 1259px) {
  .vault-polaroid:not(.is-mobile) {
    display: none;
  }

  .vault-polaroid {
    width: 86px;
    padding-bottom: 6px;
  }

  .vault-polaroid img {
    height: 94px;
  }

  .vault-polaroid figcaption {
    display: none;
  }

  .p-times {
    transform: rotate(-7deg);
    z-index: 4;
  }

  .p-race {
    margin-left: -16px;
    transform: rotate(4deg) translateY(6px);
    z-index: 3;
  }

  .p-podium {
    margin-left: -16px;
    transform: rotate(-3deg);
    z-index: 2;
  }

  .p-well {
    margin-left: -16px;
    transform: rotate(6deg) translateY(7px);
    z-index: 1;
  }
}

/* Desktop: the photo field around the pot */
@media (min-width: 1260px) {
  .vault-hero-visuals {
    display: block;
    margin: 0;
  }

  .vault-polaroid {
    position: absolute;
  }

  .p-times {
    top: -18px;
    left: -262px;
    width: 188px;
    transform: rotate(-6deg);
  }

  .p-times img {
    height: 226px;
  }

  .p-race {
    top: 268px;
    left: -218px;
    width: 148px;
    transform: rotate(4deg);
  }

  .p-race img {
    height: 186px;
  }

  .p-flag {
    top: 128px;
    left: -110px;
    width: 148px;
    transform: rotate(-3deg);
    z-index: 1;
  }

  .p-flag img {
    height: 52px;
  }

  .p-billboard {
    top: -26px;
    right: -240px;
    width: 168px;
    transform: rotate(5deg);
  }

  .p-billboard img {
    height: 158px;
  }

  .p-podium {
    top: 196px;
    right: -256px;
    width: 158px;
    transform: rotate(-4deg);
  }

  .p-podium img {
    height: 198px;
  }

  .p-plushie {
    top: 120px;
    right: -118px;
    width: 118px;
    transform: rotate(7deg);
    z-index: 1;
  }

  .p-plushie img {
    height: 142px;
  }

  .p-well {
    top: 452px;
    right: -226px;
    width: 176px;
    transform: rotate(3deg);
  }

  .p-well img {
    height: 128px;
  }
}

.pot-counter {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(26px, 5vw, 40px);
}

.pot-odometer {
  display: flex;
  gap: clamp(3px, 0.8vw, 6px);
}

.odo-cell {
  position: relative;
  width: clamp(2.4rem, 11vw, 4.1rem);
  height: clamp(3.4rem, 15vw, 5.6rem);
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow:
    inset 0 -1.4em 1em -1em rgba(23, 23, 22, 0.05),
    inset 0 1.4em 1em -1em rgba(255, 255, 255, 0.9),
    0 2px 8px rgba(23, 23, 22, 0.04);
}

/* the horizontal hairline of a mechanical counter drum */
.odo-cell::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  border-top: 1px solid rgba(23, 23, 22, 0.07);
  pointer-events: none;
}

.odo-strip {
  display: flex;
  flex-direction: column;
  transform: translateY(0);
}

.odo-cell.is-rolling .odo-strip {
  transition: transform 1.15s cubic-bezier(0.22, 1, 0.36, 1);
}

.odo-strip span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: clamp(3.4rem, 15vw, 5.6rem);
  font-size: clamp(2rem, 9vw, 3.4rem);
  font-weight: 640;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.odo-separator {
  align-self: center;
  color: rgba(23, 23, 22, 0.4);
  font-size: clamp(1.6rem, 7vw, 2.6rem);
  font-weight: 640;
}

/* The dollar sign is part of the number, not punctuation. */
.odo-prefix {
  color: rgba(23, 23, 22, 0.78);
  font-size: clamp(1.9rem, 8vw, 3rem);
  font-weight: 700;
}

.pot-currency {
  color: var(--toshi-blue);
  font-size: clamp(0.9rem, 3vw, 1.15rem);
  font-weight: 800;
  letter-spacing: 0.05em;
}

/* From tablets up there is room to centre the drums themselves on the page axis
   (under the title, over the button) and hang "$" and "in $TOSHI" either side.
   Centring the row as a whole put the drums ~35px left, because the label is
   longer than the "$". Phones keep the single centred row: it spans the screen.
   Every size here is at its clamp() maximum from 640px, so the offsets are fixed. */
@media (min-width: 640px) {
  .pot-counter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
  }

  .pot-odometer {
    position: relative;
    grid-column: 2;
  }

  .odo-prefix {
    position: absolute;
    top: 50%;
    right: 100%;
    margin-right: 6px;
    transform: translateY(-50%);
  }

  /* same height it had when it shared the "$" baseline */
  .pot-currency {
    position: relative;
    top: 0.55em;
    grid-column: 3;
    justify-self: start;
  }
}

.pot-round {
  margin: 20px 0 0;
  color: var(--toshi-blue);
  font-size: 0.82rem;
  font-weight: 820;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pot-countdown {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 560;
}

.pot-countdown time {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* ---------- 2. Prizes ---------- */

.section-lede {
  max-width: 68ch;
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.vault-prizes {
  margin-top: clamp(44px, 8vw, 72px);
}

.prize-list {
  display: grid;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.prize-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.prize-row.is-top {
  color: #fff;
  background: linear-gradient(145deg, var(--toshi-blue), var(--toshi-blue-dark));
  border-color: rgba(217, 245, 255, 0.56);
  box-shadow:
    inset 0 1px 0 rgba(241, 252, 255, 0.5),
    0 14px 34px rgba(7, 87, 164, 0.18);
}

.prize-place {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 780;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.prize-row.is-top .prize-place {
  color: #fff;
}

.prize-value {
  font-size: clamp(1.15rem, 3.4vw, 1.6rem);
  font-weight: 660;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ---------- 3. How it works & rules ---------- */

.vault-steps,
.vault-rules {
  margin-top: clamp(44px, 8vw, 72px);
}

.step-list {
  display: grid;
  gap: 16px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.step-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.step-num {
  display: flex;
  flex: 0 0 27px;
  height: 27px;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--toshi-blue);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 720;
  font-variant-numeric: tabular-nums;
}

.step-list p {
  margin: 3px 0 0;
  color: #46433d;
  font-size: 0.95rem;
  line-height: 1.5;
}

.step-note {
  margin: 22px 0 0;
  padding: 14px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.step-note p {
  margin: 0;
  color: #46433d;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Where to get the assets: one quiet card after "How it works". Same file and the
   same two buttons as the homepage's brand kit window; the buttons keep the
   shared .intro-button styles untouched. */
.vault-kit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin-top: clamp(28px, 5vw, 40px);
  padding: 18px 20px 18px 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(23, 23, 22, 0.05);
}

.kit-text {
  flex: 1 1 260px;
  min-width: 0;
}

.vault-main .vault-kit h2 {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.kit-text p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* .utility-actions is the homepage's own wrapper for these two buttons, so their
   size and the way they stack on phones come from the shared styles. */
.kit-actions {
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  /* Two short labels fit side by side, which keeps this a small card on phones
     (the homepage stacks them because its window has the room). */
  .vault-kit .kit-actions {
    flex: 1 1 100%;
    flex-direction: row;
  }

  .vault-kit .kit-actions .intro-button {
    flex: 1 1 0;
  }
}

.vault-picking {
  margin-top: clamp(44px, 8vw, 72px);
}

.pick-split {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
  margin-top: 18px;
}

@media (min-width: 640px) {
  .pick-split {
    grid-template-columns: 1fr 1fr;
  }
}

.pick-card {
  padding: 20px 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(23, 23, 22, 0.05);
}

.pick-card h3 {
  margin: 0 0 6px;
  color: var(--toshi-blue);
  font-size: 1rem;
  font-weight: 720;
}

.pick-card p {
  margin: 0;
  color: #46433d;
  font-size: 0.92rem;
  line-height: 1.5;
}

/* ---------- 4. Enter ---------- */

.pot-cta {
  margin-top: 24px;
}

.vault-cta[aria-disabled="true"] {
  color: var(--muted);
  background: rgba(23, 23, 22, 0.06);
  border-color: var(--line);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

.vault-cta[aria-disabled="true"]::before,
.vault-cta[aria-disabled="true"]::after {
  display: none;
}

.vault-enter-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.entry-dialog-note:empty {
  display: none;
}

/* ---------- Submit form ---------- */

/* styles.css gives .utility-dialog position: relative, which the homepage hides
   behind its body scroll lock. Here the dialog must stay pinned to the viewport
   or opening it mid-page scrolls the document to the top. */
#submitDialog {
  position: fixed;
  overscroll-behavior: contain;
}

/* Phone photo names run long (PXL_20260918_141523456.PORTRAIT.jpg). */
#submitDropHint,
#submitStatus {
  overflow-wrap: anywhere;
}

/* ---------- 5. The board ---------- */

.vault-board {
  margin-top: clamp(44px, 8vw, 72px);
}

.board-empty {
  margin: 16px 0 0;
  padding: 22px;
  color: #46433d;
  background: var(--panel);
  border: 1px dashed var(--line);
  border-radius: 18px;
  font-size: 0.94rem;
  text-align: center;
}

.board-list {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.board-row {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.board-open {
  display: grid;
  width: 100%;
  grid-template-columns: 26px 64px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px 10px 10px;
  background: transparent;
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background 150ms ease;
}

.board-open:hover,
.board-open:focus-visible {
  background: rgba(29, 79, 255, 0.04);
}

.board-row.is-my-vote {
  border-color: rgba(18, 108, 219, 0.45);
  box-shadow: 0 6px 18px rgba(18, 108, 219, 0.1);
}

.board-row.is-paid-place {
  border-color: rgba(18, 108, 219, 0.3);
  box-shadow: 0 6px 18px rgba(18, 108, 219, 0.07);
}

.board-rank {
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.board-row.is-paid-place .board-rank {
  color: var(--toshi-blue);
}

.board-media {
  width: 64px;
  height: 64px;
  overflow: hidden;
  background: #e9e5db;
  border-radius: 10px;
}

.board-media img,
.board-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.board-meta {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.board-meta strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 0.92rem;
  font-weight: 680;
  line-height: 1.3;
}

.board-meta span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-tally {
  display: grid;
  min-width: 46px;
  justify-items: center;
  gap: 1px;
  padding: 4px 8px;
  border-radius: 12px;
}

.board-tally strong {
  font-size: 1rem;
  font-weight: 720;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.board-tally small {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 620;
  letter-spacing: 0.02em;
}

.board-tally.is-mine {
  color: #fff;
  background: var(--toshi-blue);
}

.board-tally.is-mine small {
  color: rgba(255, 255, 255, 0.82);
}

/* ---------- Entry dialog ---------- */

.entry-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: min(860px, calc(100vh - 32px));
  padding: 0;
  overflow: auto;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  scrollbar-width: none;
}

.entry-dialog::-webkit-scrollbar {
  display: none;
}

.entry-dialog::backdrop {
  background: rgba(23, 23, 22, 0.48);
  backdrop-filter: blur(10px);
}

.entry-dialog .dialog-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 34px;
  height: 34px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}

.entry-dialog-media {
  width: 100%;
  background: #e9e5db;
}

.entry-dialog-media img,
.entry-dialog-media video {
  display: block;
  width: 100%;
  max-height: 60vh;
  object-fit: contain;
  background: #e9e5db;
}

.entry-dialog-body {
  padding: 20px clamp(18px, 4vw, 26px) clamp(20px, 4vw, 26px);
}

.entry-dialog-rank {
  margin: 0 0 6px;
  color: var(--toshi-blue);
  font-size: 0.78rem;
  font-weight: 820;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.entry-dialog h2 {
  margin: 0;
  font-size: clamp(1.3rem, 3.4vw, 1.7rem);
  font-weight: 620;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.entry-dialog-artist {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.entry-dialog-desc {
  margin: 12px 0 0;
  color: #46433d;
  font-size: 0.94rem;
  line-height: 1.5;
}

.entry-dialog-xlink {
  display: inline-flex;
  margin: 14px 0 0;
  color: var(--toshi-blue);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

.entry-dialog-xlink:hover,
.entry-dialog-xlink:focus-visible {
  text-decoration: underline;
}

.entry-dialog-actions {
  margin-top: 20px;
}

.entry-dialog-vote.intro-button {
  width: 100%;
  min-height: 50px;
  font-size: 0.98rem;
}

.entry-dialog-vote.is-voted,
.entry-dialog-vote.is-voted:hover {
  color: #fff;
  background: var(--toshi-blue);
  border-color: var(--toshi-blue);
}

.entry-dialog-vote:disabled:not(.is-voted),
.entry-dialog-vote:disabled:not(.is-voted):hover {
  color: var(--muted);
  background: rgba(23, 23, 22, 0.05);
  border-color: var(--line);
  box-shadow: none;
}

.entry-dialog-vote:disabled {
  cursor: default;
}

.entry-dialog-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  text-align: center;
}

@media (max-width: 460px) {
  .board-open {
    grid-template-columns: 22px 52px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 9px 10px 9px 8px;
  }

  .board-media {
    width: 52px;
    height: 52px;
  }

  .board-tally {
    min-width: 40px;
    padding: 4px 6px;
  }

}

/* ---------- 6. Ledger ---------- */

.vault-ledger {
  margin-top: clamp(44px, 8vw, 72px);
}

.ledger-lede {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.92rem;
}

.ledger-empty {
  margin: 0;
  padding: 22px;
  color: #46433d;
  background: var(--panel);
  border: 1px dashed var(--line);
  border-radius: 18px;
  font-size: 0.94rem;
  text-align: center;
}

.ledger-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.ledger-table th,
.ledger-table td {
  overflow-wrap: anywhere;
}

/* Give the handle room so a 15-character one stays on one line on phones. */
.ledger-table th:nth-child(3) {
  width: 9.5rem;
}

.ledger-table th:last-child {
  width: 4.5rem;
}

.ledger-table th {
  padding: 8px 10px;
  color: var(--muted);
  border-bottom: 1.5px solid var(--ink);
  font-size: 0.76rem;
  font-weight: 720;
  text-align: left;
}

.ledger-table td {
  padding: 10px;
  border-bottom: 1px solid var(--line);
}

.ledger-table td.ledger-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 680;
  white-space: nowrap;
}

.ledger-table a {
  color: var(--toshi-blue);
  font-weight: 640;
  text-decoration: none;
}

.ledger-table a:hover,
.ledger-table a:focus-visible {
  text-decoration: underline;
}

@media (max-width: 520px) {
  .ledger-table th:first-child,
  .ledger-table td:first-child {
    display: none;
  }

  .ledger-table th,
  .ledger-table td {
    padding-left: 6px;
    padding-right: 6px;
  }

  .ledger-table th:nth-child(3) {
    width: 9rem;
  }

  .ledger-table th:last-child {
    width: 4rem;
  }
}

/* ---------- Footer ---------- */

.vault-footer {
  margin-top: auto;
  padding: 28px 0 34px;
  text-align: center;
}

.vault-footer a {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 640;
  text-decoration: none;
}

.vault-footer a:hover,
.vault-footer a:focus-visible {
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .odo-cell.is-rolling .odo-strip {
    transition: none;
  }

  .vault-cta {
    transition: none;
  }
}