/* The treasury airdrop page (airdrop.html), on the design system in styles.css (docs/design-system.md): tokens, .card,
   .pill, .stat, .disclosure, .tip, .check, .input, .btn sizes. This file only lays the page out and adds what it needs on
   top: the progress bar with the schedule's "unlocked so far" mark, the lookup and its result, the records.
   Nothing moves while the data arrives: every box that data fills has its final size from the first paint (one-line
   values, notes and lines with room for their longest wording at each width, check lines on an invisible copy of their
   longest wording); the lookup's result box takes its full room at the moment of the press. Motion: the bar's width and
   the press of a button, nothing loops; reduced motion turns it off (styles.css). Light theme only, like the site. */

.ad { max-width: calc(1080px + 2 * var(--gutter)); margin: 0 auto; padding: clamp(12px, 3vw, 32px) var(--gutter) clamp(48px, 8vw, 88px); }
.ad > * + * { margin-top: clamp(28px, 4.4vw, 44px); }
.ad > .ad-safety { margin-top: clamp(16px, 3vw, 24px); }
.ad-page [hidden] { display: none !important; }

/* ------------------------------------------------------------------ header -- */
.ad-page .page-head { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "mark title" "lede lede" "meta meta"; column-gap: 16px; row-gap: 12px; }
.ad-head__mark { grid-area: mark; align-self: center; }
.ad-page .page-head__title { align-self: center; font-size: var(--step-3x); }
.ad-page .page-head__lede { max-width: 52ch; }
@media (max-width: 600px) { .ad-head__mark { width: 48px; height: 48px; border-radius: var(--radius-md); } .ad-head__mark .icon { width: 24px; height: 24px; } }
@media (max-width: 340px) { .ad-page .page-head__lede { min-height: calc(3 * 1.32em); } }
.ad-status { align-items: center; row-gap: 2px; min-height: 27px; }
.ad-status .pill { font-size: var(--text-xs); }
.ad-status a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(51, 37, 22, .3); text-underline-offset: 3px; white-space: nowrap; }
.ad-status a:hover { text-decoration-color: currentColor; }
.ad-status a .icon { margin-left: 2px; color: var(--ink-3); }
@media (max-width: 860px) { .ad-page .ad-status { min-height: 50px; } }
@media (max-width: 460px) { .ad-page .ad-status { min-height: 73px; } }

/* the first thing to know: nothing to claim, never connect a wallet */
.ad-safety { display: flex; align-items: flex-start; gap: 12px; padding: 14px 20px; border: 1px solid var(--info-line); border-radius: var(--radius); background: var(--info-bg); font-size: var(--text-md); line-height: 1.55; color: var(--ink); }
.ad-safety .icon { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--info); }
.ad-safety strong { font-weight: 700; }

/* ---------------------------------------------------------------- sections -- */
.ad-section > * + * { margin-top: var(--space-4); }
.ad-sec__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ad-sec__title { display: flex; align-items: center; gap: 12px; font-size: var(--step-2); line-height: 1.2; }
.ad-sec__title .icon { width: 1.05em; height: 1.05em; color: var(--gold-ink); }
.ad-sec__lede { max-width: var(--measure); font-size: var(--text-md); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.ad-section > .ad-sec__lede { margin-top: var(--space-2); }
.ad-section a:not(.btn) { color: var(--gold-ink); text-underline-offset: 2px; }
.ad-section a:not(.btn):hover { color: var(--ink); }
.ad-section code { font-family: var(--font-mono); font-size: .84em; overflow-wrap: anywhere; }
/* the state: a pill and, before deployment, "Not deployed yet" beside it; on phones on its own line under the title, so a
   longer word never wraps the heading row */
.ad-state-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 26px; margin: 0; }
.ad-detail { font-size: var(--text-sm); font-weight: 700; color: var(--ink-2); }
@media (max-width: 639px) { .ad-ov .ad-sec__head { display: grid; justify-items: start; gap: 8px; } }
.ad-state .icon { width: 14px; height: 14px; }
.ad-note { font-size: var(--text-sm); line-height: 1.5; color: var(--ink-2); }
.ad-muted { color: var(--ink-3); }
.ad-warn { color: var(--warn); }
/* touch targets: the shared toggletip grown to 44 px without changing how it looks */
.ad-page .tip__btn { width: 44px; height: 44px; margin: -12px -10px; }
/* amounts: the compact label, every digit for screen readers and on hover */
.amount__compact { white-space: nowrap; }
.ad-page .amount__unit { white-space: nowrap; line-height: 1; }

/* ---------------------------------------------------------- the overview -- */
.ad-ov { display: grid; gap: var(--space-4); padding: clamp(16px, 3vw, 28px); }
.ad-ov > * + * { margin-top: 0; }
/* the state's sentence: room for the longest one at each width. "Try again" (only after a failed load) keeps its place
   beside it on wider screens; on phones it sits in the header's status row, in the room that row keeps anyway, and only
   while nothing could be loaded (with older data on screen the page retries by itself and says Delayed) */
.ad-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px 16px; }
.ad-line__text { min-height: calc(2 * 1.5em); max-width: 86ch; font-size: 1rem; line-height: 1.5; color: var(--ink); }
.ad-line__retry { visibility: hidden; }
.ad--retry .ad-line__retry { visibility: visible; }
.ad-status__retry { display: none; }
@media (max-width: 899px) { .ad-line__text { min-height: calc(3 * 1.5em); } }
@media (max-width: 639px) {
  .ad-line { grid-template-columns: minmax(0, 1fr); }
  .ad-line__retry { display: none; }
  .ad-line__text { min-height: calc(4 * 1.5em); }
  .ad--retry[data-state="error"] .ad-status__retry { display: inline-flex; flex-basis: 100%; }   /* its own line: the pill above never moves */
  .ad-status__retry::before { content: none !important; }
}
@media (max-width: 379px) { .ad-line__text { min-height: calc(5 * 1.5em); } }

.ad-prog { display: grid; gap: 8px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-1); }
.ad-prog > * { margin: 0; }
/* the paid count on its own line, "of 5,000 recipients paid" under it: a short number never leaves a gap or moves the words */
.ad-prog__count { display: grid; justify-items: start; gap: 2px; font-family: var(--font-display); font-size: var(--step-3); font-weight: 600; line-height: 1.15; }
.ad-prog__of { display: block; font-family: var(--font-body); font-size: var(--text-md); font-weight: 400; line-height: 1.5; color: var(--ink-2); }
.ad-prog__of .tip { margin-left: 4px; }
/* one bar: paid (confirmed), unlocked and not paid yet (striped, under it), and the schedule's mark at "unlocked so far".
   Both fills are full-width layers scaled from the left and the mark rides a full-width layer moved by a share of its
   own width: transforms only, so the bar moves nothing else when the data arrives or the clock ticks. */
.ad-bar { position: relative; height: 14px; margin: 8px 0 4px; overflow: hidden; overflow: clip visible; }   /* the moved layer never widens the page */
.ad-bar__track { position: relative; display: block; height: 100%; overflow: hidden; border-radius: var(--radius-pill); background: var(--surface-3); }
.ad-bar__track i { position: absolute; inset: 0; transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-3) var(--ease-out); }
.ad-bar__paid { background: var(--gold-ink); }
.ad-bar__open { background: repeating-linear-gradient(135deg, var(--gold) 0 3px, var(--gold-soft) 3px 6px); }
.ad-bar__at { position: absolute; inset: -6px 0; transform: translateX(0); transition: transform var(--dur-3) var(--ease-out); pointer-events: none; }
.ad-bar__mark { position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; border-radius: var(--radius-xs); background: var(--ink); box-shadow: 0 0 0 2px var(--surface-1); visibility: hidden; }
.ad-bar.has-mark .ad-bar__mark { visibility: visible; }
/* the recipient count keeps the width of "5,000" (in em, so a font swap can't change it either): "recipients paid" never
   slides when the number arrives */
.ad-prog__of .num { display: inline-block; min-width: 2.75em; }
.ad-prog__text { min-height: 1.45em; font-size: var(--text-sm); line-height: 1.45; color: var(--ink); font-variant-numeric: tabular-nums; }
.ad-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; font-size: var(--text-xs); color: var(--ink-3); }
.ad-legend li { display: inline-flex; align-items: center; gap: 8px; }
.ad-legend i { display: inline-block; width: 14px; height: 8px; border-radius: var(--radius-pill); background: var(--surface-3); }
.ad-legend i.is-paid { background: var(--gold-ink); }
.ad-legend i.is-open { background: repeating-linear-gradient(135deg, var(--gold) 0 3px, var(--gold-soft) 3px 6px); }
.ad-legend i.is-mark { width: 3px; height: 14px; border-radius: var(--radius-xs); background: var(--ink); }
.ad-prog__sched { min-height: calc(2 * 1.5em); max-width: 90ch; font-size: var(--text-md); line-height: 1.5; color: var(--ink-2); }
.ad-prog__final { min-height: 1.45em; font-size: var(--text-sm); line-height: 1.45; color: var(--ink-3); }
@media (max-width: 899px) { .ad-prog__sched { min-height: calc(3 * 1.5em); } .ad-prog__final { min-height: calc(2 * 1.45em); } }
@media (max-width: 639px) {
  .ad-prog { padding: 14px; }
  .ad-prog__text { min-height: calc(2 * 1.45em); }
  .ad-legend { min-height: calc(2 * 1.5em); }
  .ad-prog__sched { min-height: calc(5 * 1.5em); }
  .ad-prog__final { min-height: calc(3 * 1.45em); }
}

/* the four totals */
.ad-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; margin: 0; }
.ad-stats dd { margin: 0; }
.ad-stat { padding: 2px 0; }
.ad-stat__value { font-size: var(--step-2); white-space: nowrap; }
.ad-stat .stat__note { min-height: calc(2 * 1.4em); }
@media (max-width: 899px) { .ad-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) {
  .ad-stats { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ad-stat { display: grid; grid-template-columns: minmax(0, 1fr) 8.6rem; grid-template-areas: "label value" "note note"; align-items: baseline; column-gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
  .ad-stat .stat__label { grid-area: label; }
  .ad-stat .stat__value { grid-area: value; font-size: var(--text-lg); text-align: right; }
  .ad-stat .stat__note { grid-area: note; min-height: 1.4em; }
}

/* the schedule's facts */
.ad-sched { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 24px; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line); }
.ad-sched > div { min-width: 0; }
.ad-sched dt { display: flex; align-items: center; gap: 4px; min-height: 26px; font-size: var(--text-sm); color: var(--ink-2); }
.ad-sched dd { margin: 2px 0 0; min-height: calc(2 * 1.4em); font-weight: 700; font-size: var(--text-md); line-height: 1.4; font-variant-numeric: tabular-nums; }
@media (max-width: 899px) { .ad-sched { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the checks at a glance; each line sits on an invisible copy of its longest wording */
.ad-checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 20px; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line); list-style: none; }
.ad-check { display: flex; align-items: flex-start; gap: 8px; font-size: var(--text-sm); line-height: 1.45; color: var(--ink-2); }
.ad-check .icon { width: 18px; height: 18px; margin-top: 1px; color: var(--ink-3); }
.ad-check[data-tone="ok"] .icon { color: var(--ok); }
.ad-check[data-tone="warn"] .icon { color: var(--warn); }
.ad-check[data-tone="warn"] { color: var(--ink); }
.ad-check[data-tone="info"] .icon { color: var(--info); }
@media (max-width: 899px) { .ad-checks { grid-template-columns: minmax(0, 1fr); } }
.ad-fit { display: grid; min-width: 0; flex: 1 1 auto; }
.ad-fit > * { grid-area: 1 / 1; min-width: 0; }
.ad-fit__size { visibility: hidden; pointer-events: none; user-select: none; }

/* --------------------------------------------------------------- the lookup -- */
.ad-look__form { display: grid; gap: 8px; max-width: 760px; }
.ad-look__label { font-weight: 700; font-size: var(--text-md); }
.ad-look__row { display: flex; gap: 12px; }
.ad-look__input { flex: 1 1 auto; min-width: 0; font-family: var(--font-mono); font-size: var(--text-sm); }
.ad-look__input::placeholder { color: #A8977F; }
.ad-look__go { flex: none; min-width: 7.5rem; }
.ad-look__hint { font-size: var(--text-sm); color: var(--ink-3); }
@media (max-width: 479px) { .ad-look__row { flex-direction: column; } .ad-look__go { width: 100%; } }
/* the result: a quiet line while idle; at the press it takes the room of the longest answer, so the page below never moves */
.ad-look__result { display: grid; align-content: start; gap: 8px; max-width: 760px; min-height: 52px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-2); }
.ad-look__result > * { margin: 0; }
.ad-look__result.is-open { min-height: 360px; }
@media (max-width: 639px) { .ad-look__result.is-open { min-height: 520px; } }
@media (max-width: 379px) { .ad-look__result.is-open { min-height: 600px; } }
.ad-look__idle { color: var(--ink-3); font-size: var(--text-sm); }
.ad-look__result[data-kind="paid"] { background: var(--ok-bg); border-color: var(--ok-line); }
.ad-look__result[data-kind="not-yet"], .ad-look__result[data-kind="listed"] { background: var(--info-bg); border-color: var(--info-line); }
.ad-look__result[data-kind="invalid"], .ad-look__result[data-kind="error"] { background: var(--bad-bg); border-color: var(--bad-line); }
.ad-res__title { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; line-height: 1.25; }
.ad-res__title .icon { width: 22px; height: 22px; }
[data-kind="paid"] .ad-res__title .icon { color: var(--ok); }
[data-kind="not-yet"] .ad-res__title .icon, [data-kind="listed"] .ad-res__title .icon { color: var(--info); }
[data-kind="invalid"] .ad-res__title .icon, [data-kind="error"] .ad-res__title .icon { color: var(--bad); }
.ad-res__addr { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-2); overflow-wrap: anywhere; }
.ad-res__text { max-width: 70ch; font-size: var(--text-md); line-height: 1.5; color: var(--ink); }
.ad-res__receipt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--text-sm); }
.ad-res__cap { padding-top: 6px; font-size: var(--text-sm); color: var(--ink-2); }
.ad-res__ev { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 18px; }
.ad-res__ev > div { min-width: 0; }
.ad-res__ev dt { font-size: var(--text-xs); color: var(--ink-2); }
.ad-res__ev dd { margin: 0; font-weight: 700; font-size: var(--text-md); line-height: 1.35; }
.ad-res__trust { padding-top: 4px; font-size: var(--text-xs); color: var(--ink-3); }
@media (max-width: 639px) { .ad-res__ev { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* -------------------------------------------------------------- the records -- */
.ad-rows { display: grid; gap: 0; }
.ad-row { display: grid; grid-template-columns: 148px minmax(0, 1fr); align-items: start; gap: 4px 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.ad-row:last-child { border-bottom: 1px solid var(--line); }
.ad-row__label { display: flex; align-items: center; min-height: 32px; font-size: var(--text-sm); font-weight: 700; color: var(--ink-2); }
.ad-row__value { display: grid; gap: 8px; min-width: 0; font-size: var(--text-md); line-height: 1.5; color: var(--ink); }
.ad-row__value > * { margin: 0; }
.ad-row__value > p:first-child:not(.ad-links) { min-height: 32px; padding-top: 3px; }
@media (max-width: 639px) { .ad-row { grid-template-columns: minmax(0, 1fr); } }
.ad-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.ad-links a, .ad-row a, .ad-receipt a, .ad-res__receipt a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; white-space: nowrap; }
.ad-addr { font-family: var(--font-mono); font-size: var(--text-sm); padding: 2px 8px; border-radius: var(--radius-sm); background: var(--surface-2); overflow-wrap: anywhere; }
.ad-hash { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.ad-hash__k { flex: none; min-width: 6.5rem; font-size: var(--text-sm); font-weight: 700; color: var(--ink-2); }
.ad-hash__v { flex: 1 1 30ch; min-width: 0; font-family: var(--font-mono); font-size: var(--text-xs) !important; color: var(--ink); overflow-wrap: anywhere; }
.ad-receipts { display: grid; margin: 0; padding: 0; list-style: none; }
.ad-receipt { display: grid; grid-template-columns: 12rem minmax(0, 1fr) auto; align-items: center; gap: 0 14px; padding: 0; border-top: 1px dashed var(--line); font-size: var(--text-sm); line-height: 1.45; color: var(--ink-2); }
.ad-receipts > li:first-child { border-top: 0; }
.ad-receipt__when { font-variant-numeric: tabular-nums; }
.ad-receipt__what { color: var(--ink); }
.ad-receipt__tx { display: inline-flex; align-items: center; gap: 8px; }
.ad-receipt__tx a { font-family: var(--font-mono); font-size: var(--text-xs); }
.ad-receipts > li.ad-muted { display: flex; align-items: center; min-height: 32px; }
@media (max-width: 759px) {
  .ad-receipt { grid-template-columns: minmax(0, 1fr); padding-top: 8px; }
}
.ad-all { margin-top: 2px; }
.ad-all > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-size: var(--text-sm); font-weight: 700; color: var(--gold-ink); list-style: none; }
.ad-all > summary::-webkit-details-marker { display: none; }
.ad-all > summary::after { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-2) var(--ease-out); }
.ad-all[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.ad-all > .btn { margin-top: 8px; }
.ad-fin { margin-left: 2px; }
.ad-steps { display: grid; gap: 12px; margin: 0; padding-left: 1.3em; font-size: var(--text-md); line-height: 1.55; color: var(--ink-2); }
.ad-steps strong { color: var(--ink); }

/* -------------------------------------------------- method, notes, fine print -- */
.ad-about .disclosure__body p { max-width: 72ch; font-size: var(--text-md); line-height: 1.6; color: var(--ink-2); }
.ad-notes__list { display: grid; gap: 12px; max-width: 80ch; margin: 0; padding-left: 1.2em; list-style: disc; font-size: var(--text-md); line-height: 1.55; color: var(--ink-2); }
.ad-notes__list strong { color: var(--ink); }
.ad-fine { max-width: 80ch; font-size: var(--text-sm); line-height: 1.55; color: var(--ink-2); }