/* GT Protocol vesting — claim page.
   Palette and the background wash are lifted from the portal this replaces, not invented:
   `bg-claim-gradient` and the theme object were read off its own stylesheet.
   Type is DM Sans, GT's own brand face, self-hosted so the page pulls nothing from a CDN. */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/dmsans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/dmsans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/dmsans-700.woff2') format('woff2');
}

:root {
  --base:      #21212C;
  --ink:       #FFFFFF;
  --muted:     #A6A4BC;
  --accent:    #542FE8;
  --accent-lift:#7550ff;
  --violet:    #7B61FF;
  --success:   #1EAE8C;
  --warning:   #E0A030;

  --line:      rgba(255, 255, 255, 0.07);
  --line-soft: rgba(255, 255, 255, 0.045);

  --sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter: 28px;
  --column: 1000px;
}

* { box-sizing: border-box; }

/* An author `display` rule outranks the user-agent [hidden] rule, so a grid or flex
   container stayed on screen while carrying the attribute. Make hidden mean hidden. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--base);
  color: var(--ink);
  font: 400 15px/1.6 var(--sans);
  letter-spacing: 0.005em;
  position: relative;
  /* Keeps the footer on the floor when a wallet holds only one round, instead of
     leaving it stranded halfway up a tall screen. */
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }

/* The wash, then grain over it. Grain sits on the substrate and never over the content:
   it kills the banding a gradient this wide would otherwise show. Both are one fixed
   layer behind everything, so the page reads as a single continuous surface. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(149.69% 331.61% at -6.87% 348.85%, #542fe8 0%, #21212c 100%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.bar, footer, main {
  padding-left: max(var(--gutter), calc((100% - var(--column)) / 2));
  padding-right: max(var(--gutter), calc((100% - var(--column)) / 2));
}

a { color: var(--ink); text-decoration: none; }

h1, h2 { margin: 0; font-weight: 500; }

.sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- header ---------- */

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 26px;
  padding-bottom: 26px;
}

.brand { display: inline-flex; }
.brand img { display: block; height: 26px; width: auto; }

.bar-right { display: flex; align-items: center; gap: 14px; }

.net {
  font: 500 12px/1 var(--sans);
  color: var(--warning);
  padding: 8px 0;
}

.wallet { display: flex; align-items: center; gap: 14px; }
.wallet-addr { font: 500 14px/1 var(--sans); color: var(--ink); }

/* ---------- buttons ---------- */

.btn {
  font: 500 14px/1 var(--sans);
  padding: 13px 22px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, opacity .16s ease;
}
.btn:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }

/* Their own button fill, kept flat and square-shouldered rather than a glowing pill. */
.btn-primary { background: linear-gradient(90deg, #542fe8, #7550ff); color: #fff; }
.btn-primary:hover { background: linear-gradient(90deg, #6039f5, #8a68ff); }

.btn-lg { padding: 16px 30px; font-size: 15px; }

.btn[disabled] {
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  cursor: not-allowed;
}
.btn.busy { opacity: .7; cursor: progress; }

/* A quiet text action. Not an underline that grows — the colour simply lifts. */
.linkbtn {
  border: 0;
  background: none;
  padding: 0;
  font: 400 14px/1 var(--sans);
  color: var(--muted);
  cursor: pointer;
  transition: color .16s ease;
}
.linkbtn:hover { color: var(--ink); }
.linkbtn:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }

/* ---------- layout ---------- */

main {
  padding-top: 40px;
  padding-bottom: 90px;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

/* Three different small-text roles, three different treatments. Giving all of them the
   same tracked-out caps is what makes a page read as a template. Only the column
   headers below keep the caps, because there they are doing a table's work. */
h2 {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 20px;
}

/* ---------- gate ---------- */

/* The wash rises from the bottom-left, so the statement sits down in the light rather
   than floating in the dark half. That is the composition, not a centered stack. */
.gate {
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;   /* or the button stretches the full column width */
  padding: 64px 0 40px;
}
.gate h1 {
  font-size: clamp(40px, 6.4vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 500;
  max-width: 11ch;          /* holds the line to two, never a four-line staircase */
}
.gate p {
  margin: 24px 0 40px;
  max-width: 42ch;
  color: var(--muted);
  font-size: 16px;
}

/* ---------- the figure ---------- */

.headline { padding-top: 8px; }

.headline-label {
  margin: 0 0 12px;
  font-size: 15px;
  color: var(--muted);
}
.headline-figure {
  margin: 0;
  font-weight: 500;
  font-size: clamp(40px, 7vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.headline-figure .unit {
  font-size: 0.42em;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin-left: 6px;
}
.headline-sub { margin: 8px 0 0; color: var(--muted); font-size: 14px; min-height: 1.2em; }

/* Two real segments of one allocation, so the bar is data and not decoration. */
.meter {
  margin-top: 34px;
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
  display: flex;
  max-width: 620px;
}
.meter span { display: block; height: 100%; }
.meter-claimed { background: rgba(255, 255, 255, 0.34); }
.meter-avail { background: var(--violet); }
.meter-held { background: var(--warning); }

.legend {
  margin: 14px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  font-size: 13px;
  color: var(--muted);
}
.key { display: inline-flex; align-items: center; gap: 8px; }
.key i { width: 8px; height: 8px; border-radius: 99px; display: inline-block; }
.key-claimed i { background: rgba(255, 255, 255, 0.34); }
.key-avail i { background: var(--violet); }
.key-held i { background: var(--warning); }

/* ---------- rounds ---------- */

.list { display: flex; flex-direction: column; }

.row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)) 116px 116px;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid var(--line-soft);
}
.row:first-child { border-top: 0; }

/* Column names sit once, above the list, so the three figures are never ambiguous. */
.row-labels {
  padding: 0 0 10px;
  border-top: 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.row-labels + .row { border-top: 0; }
.row-labels .cell { text-align: right; }

.row-name { font-weight: 500; }

.cell { text-align: right; }
.cell-label { display: none; font-size: 12px; color: var(--muted); }
.cell-value { font-variant-numeric: tabular-nums; }
.cell-value.dim { color: var(--muted); }

.status { font-size: 13px; }
.status.ok { color: var(--success); }
.status.wait { color: var(--warning); }
.status.dim { color: var(--muted); }

.row .btn { padding: 11px 20px; }

.state { color: var(--muted); padding: 4px 0 0; max-width: 60ch; }
.note { margin: 24px 0 0; color: var(--muted); font-size: 13px; max-width: 74ch; }

/* ---------- footer ---------- */

footer {
  border-top: 1px solid var(--line);
  padding-top: 26px;
  padding-bottom: 44px;
  color: var(--muted);
  font-size: 13px;
}
.foot-row { display: flex; flex-wrap: wrap; gap: 26px; align-items: baseline; }
.foot-row a { color: var(--muted); transition: color .16s ease; }
.foot-row a:hover { color: var(--ink); }
.foot-note { margin: 14px 0 0; }

/* ---------- toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  max-width: min(560px, calc(100vw - 32px));
  padding: 15px 20px;
  border-radius: 10px;
  background: #14141c;
  color: var(--ink);
  font-size: 14px;
  z-index: 10;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.toast.err { color: #ffd9a1; }
.toast.ok { color: #8ee9cf; }
.toast a { color: var(--violet); }

/* ---------- responsive ---------- */

@media (max-width: 820px) {
  .row {
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
    padding: 22px 0;
  }
  .row-labels { display: none; }   /* each cell carries its own label at this width */
  .row-head { grid-column: 1 / -1; }
  .cell { text-align: left; }
  .cell-label { display: block; margin-bottom: 2px; }
  .status { grid-column: 1 / -1; }
  .row .btn { grid-column: 1 / -1; width: 100%; margin-top: 6px; }
}

@media (max-width: 560px) {
  :root { --gutter: 20px; }
  main { padding-top: 24px; gap: 48px; }
  .gate { padding: 56px 0 72px; max-width: none; }
  .gate .btn { width: 100%; }
  .bar { padding-top: 20px; padding-bottom: 20px; }
  .bar-right { gap: 12px; }
  }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}