/* ==========================================================================
   rill — /stake (stake/index.html, js/stakepage.js): the rill-stake program on
   solana devnet. loaded after styles.css (tokens, font, buttons, tags, modal,
   toast) and trail.css (top bar, kicker, footer, ca button). every rule here
   is scoped to body.stakepage or an .sk- class.
   ========================================================================== */

.stakepage .sk { width: 100%; }
.sk-view {
  flex: 1 0 auto; width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--gutter) clamp(56px, 8vw, 104px);
}
.sk-view > * { min-width: 0; }
.sk-muted { color: var(--ink-2); }
.sk-nw { white-space: nowrap; }
.sk-sep { color: var(--ink-3); white-space: pre; }
.sk-link {
  display: inline; font-size: inherit; letter-spacing: inherit; color: var(--ink);
  border-bottom: 1px solid var(--ink); padding-bottom: 1px; overflow-wrap: anywhere;
  transition: color .15s, border-color .15s;
}
.sk-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.stakepage main:focus { outline: none; }

/* ---------- the devnet banner: under the top bar, always on screen ---------- */
.sk-banner {
  position: sticky; top: var(--nav-h); z-index: 30;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 0;
  margin: 0; padding: 11px var(--gutter);
  background: var(--accent); color: #fff;
  font-size: clamp(12px, 1.05vw, 14px); font-weight: 500; letter-spacing: .1em; text-align: center;
}
.sk-banner__sep { white-space: pre; opacity: .7; }
.sk-banner__dot {
  display: inline-block; width: 7px; height: 7px; margin-right: 10px; border-radius: 50%; flex: none;
  background: currentColor;
}
@media (prefers-reduced-motion: no-preference) { .sk-banner > .sk-banner__dot { animation: sk-blink 1.4s ease-in-out infinite; } }
@keyframes sk-blink { 50% { opacity: .3; } }

/* ---------- header ---------- */
.sk-head { padding: clamp(32px, 5vw, 64px) 0 clamp(26px, 3.5vw, 40px); }
.sk-title { margin-top: 14px; font-size: clamp(38px, 5.6vw, 72px); font-weight: 300; line-height: 1.02; letter-spacing: .01em; }
.sk-lede {
  margin-top: 20px; max-width: 66ch;
  font-size: clamp(14px, 1.15vw, 16px); line-height: 1.7; letter-spacing: .02em; text-wrap: pretty;
}
.sk-noscript { margin-top: 16px; font-size: 13px; line-height: 1.6; }
.sk-noscript a { border-bottom: 1px solid var(--ink); }

/* ---------- loading / error / off ---------- */
.sk-loading, .sk-error {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 28px 0;
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--hair);
  font-size: 12.5px; letter-spacing: .06em; color: var(--ink-2);
}
.sk-loading[hidden], .sk-error[hidden], .sk-off[hidden], .sk-live[hidden] { display: none; }
.sk-error { color: var(--ink); }
.sk-off {
  display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
  padding: clamp(40px, 6vw, 72px) 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--hair);
}
.sk-off .empty__mark { width: 11px; height: 11px; }
.sk-off__line { max-width: 46ch; font-size: clamp(16px, 1.6vw, 21px); line-height: 1.5; letter-spacing: .03em; text-wrap: balance; }
.sk-off__sub { max-width: 56ch; font-size: 13px; line-height: 1.7; letter-spacing: .03em; color: var(--ink-2); text-wrap: balance; }
.sk-off__sub[hidden] { display: none; }
.sk-off .sk-link { font-size: 12.5px; letter-spacing: .06em; }

/* ---------- totals ---------- */
.sk-totals { border-top: 1px solid var(--ink); }
.sk-sums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.sk-sum { min-width: 0; padding: 22px 24px 24px 0; }
.sk-sum + .sk-sum { padding-left: 24px; border-left: 1px solid var(--hair); }
.sk-sum dt { font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.sk-sum dd { margin: 14px 0 0; min-width: 0; }
.sk-sum__n {
  display: block; font-size: clamp(24px, 3.2vw, 46px); font-weight: 300; line-height: 1.1; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.sk-sum.is-none .sk-sum__n { color: var(--ink-2); }
.sk-totals__note {
  padding: 12px 0 0; border-top: 1px solid var(--hair);
  font-size: 11.5px; line-height: 1.6; letter-spacing: .04em; color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.sk-program { border-top: 0; padding-top: 4px; }
.sk-program:empty { display: none; }
.sk-program .sk-link { color: var(--ink-2); border-bottom-color: var(--hair); }

/* ---------- labelled rows: your wallet, lock ---------- */
.sk-row {
  display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 10px 24px; align-items: baseline;
  margin-top: clamp(28px, 3.5vw, 44px); padding: 18px 0 20px;
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--hair);
}
.sk-row + .sk-row { margin-top: 0; border-top: 0; }
.sk-row__label { justify-self: start; font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 400; }
.sk-row__main { min-width: 0; }
.sk-wallet .sk-row__main { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.sk-wallet__line { min-width: 0; flex: 1 1 32ch; font-size: 14px; line-height: 1.6; letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.sk-wallet__sub { flex-basis: 100%; font-size: 11.5px; line-height: 1.6; letter-spacing: .04em; color: var(--ink-2); }
.sk-wallet__sub .sk-link { color: var(--ink-2); border-bottom-color: var(--hair); }

/* ---------- the lock form ---------- */
.sk-lock { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 16px 32px; align-items: start; }
.sk-field, .sk-field > span {
  display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; padding: 0;
  font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
}
.sk-field em { font-style: normal; text-transform: none; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.sk-lock__in { display: flex; gap: 8px; }
.sk-lock__in input {
  flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 12px;
  border: 1px solid var(--hair); border-radius: 0; background: var(--paper); color: var(--ink);
  font-size: 15px; letter-spacing: .02em; font-variant-numeric: tabular-nums;
  -webkit-appearance: none; appearance: none; transition: border-color .15s;
}
.sk-lock__in input:hover { border-color: var(--ink-3); }
.sk-lock__in input:focus { outline: none; border-color: var(--ink); }
.sk-lock__in input:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.sk-lock__in input[aria-invalid="true"] { border-color: var(--accent); }
.sk-lock__in input:disabled { background: var(--paper); color: var(--ink-2); cursor: not-allowed; }
.sk-lock__in .btn { min-height: 40px; }
.sk-lock__tiers { min-width: 0; margin: 0; padding: 0; border: 0; }
.sk-tiers-pick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--hair); }
.sk-tier {
  position: relative; display: flex; flex-direction: column; gap: 4px; padding: 9px 12px; min-width: 0;
  cursor: pointer; font-variant-numeric: tabular-nums; transition: background .15s, color .15s;
}
.sk-tier + .sk-tier { border-left: 1px solid var(--hair); }
.sk-tier input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sk-tier__d { font-size: 13px; letter-spacing: .03em; white-space: nowrap; }
.sk-tier__w { font-size: 11.5px; letter-spacing: .06em; color: var(--ink-2); }
.sk-tier:hover { background: var(--accent-soft); }
.sk-tier:has(input:checked) { background: var(--ink); color: var(--paper); }
.sk-tier:has(input:checked) .sk-tier__w { color: var(--paper); }
.sk-tier:has(input:focus-visible) { outline: 1px solid var(--accent); outline-offset: 2px; z-index: 1; }
.sk-tier:has(input:disabled) { cursor: not-allowed; color: var(--ink-2); }
.sk-tier:has(input:disabled:checked) { background: var(--hair); color: var(--ink-2); }
.sk-lock__when, .sk-lock__error, .sk-lock__note, .sk-lock__go { grid-column: 1 / -1; }
.sk-lock__when { font-size: 12px; letter-spacing: .04em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sk-lock__when:empty { display: none; }
.sk-lock__error, .sk-lock__note { font-size: 12.5px; line-height: 1.6; letter-spacing: .03em; }
.sk-lock__error { color: var(--accent); }
.sk-lock__note { color: var(--ink-2); }
.sk-lock__error[hidden], .sk-lock__note[hidden] { display: none; }
.sk-lock__go .btn { min-width: 180px; }
.sk-lock__go .btn:disabled { background: var(--paper); border-color: var(--hair); color: var(--ink-2); cursor: not-allowed; }
.sk-lock__go .btn[aria-busy="true"] { opacity: .6; cursor: progress; }

/* ---------- the result of the last transaction ---------- */
.sk-result {
  margin-top: 18px; padding: 12px 14px; border: 1px solid var(--accent); color: var(--accent);
  font-size: 13px; line-height: 1.6; letter-spacing: .03em; overflow-wrap: anywhere;
}
.sk-result[hidden] { display: none; }
.sk-result:focus { outline: none; }
.sk-result:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
.sk-result .sk-link { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- your positions ---------- */
.sk-mine { margin-top: clamp(40px, 5vw, 64px); }
.sk-mine[hidden] { display: none; }
.sk-pos-status, .sk-pos-empty {
  padding: 18px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--hair);
  font-size: 12.5px; line-height: 1.6; letter-spacing: .04em; color: var(--ink-2);
}
.sk-pos-status.is-error { color: var(--accent); border-top-color: var(--accent); }
.sk-pos-status[hidden], .sk-pos-empty[hidden], .sk-positions[hidden] { display: none; }
.sk-positions { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.sk-pos {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2.4fr) auto; gap: 12px 28px; align-items: center;
  padding: 16px 0; border-bottom: 1px solid var(--hair);
}
.sk-pos__head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.sk-pos__amount { font-size: 17px; letter-spacing: .02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sk-pos__facts { display: grid; grid-template-columns: repeat(4, minmax(0, auto)); gap: 6px 24px; margin: 0; min-width: 0; }
.sk-fact { min-width: 0; }
.sk-pos__facts dt, .sk-dlg__facts dt { font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.sk-pos__facts dd { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.sk-pos__ready { color: var(--accent); }
.sk-pos__acts { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.sk-pos__ext { display: inline-flex; gap: 6px; }
.sk-pos__to {
  height: 32px; padding: 0 28px 0 10px; border: 1px solid var(--hair); border-radius: 0; background: var(--paper); color: var(--ink);
  font: inherit; font-size: 12px; letter-spacing: .03em; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 10px) 50%; background-size: 4px 4px; background-repeat: no-repeat;
}
.sk-pos__to:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.sk-pos .btn:disabled { background: var(--paper); border-color: var(--hair); color: var(--ink-2); cursor: not-allowed; }
.sk-pos .btn[aria-busy="true"] { opacity: .6; cursor: progress; }
.sk-pos__longest { font-size: 11.5px; letter-spacing: .04em; }
.sk-pos__acct { grid-column: 1 / -1; justify-self: start; font-size: 11px; letter-spacing: .06em; color: var(--ink-2); border-bottom-color: var(--hair); }

/* ---------- the tiers ---------- */
.sk-tiers { margin-top: clamp(44px, 5.5vw, 72px); }
.sk-table { width: 100%; border-collapse: collapse; font-size: 13px; letter-spacing: .03em; border-top: 1px solid var(--ink); font-variant-numeric: tabular-nums; }
.sk-table th {
  padding: 10px 12px 10px 0; text-align: left; font-weight: 400;
  font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); border-bottom: 1px solid var(--hair);
}
.sk-table td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--hair); }
.sk-table td:nth-child(2) { color: var(--accent); }
.sk-table .sk-c-note { color: var(--ink-2); }
.sk-fine { margin-top: 14px; max-width: 84ch; font-size: 11.5px; line-height: 1.65; letter-spacing: .04em; color: var(--ink-2); }
.sk-view[data-state="loading"] .sk-tiers { opacity: .55; }

/* ---------- the confirm dialog ---------- */
.sk-dlg { width: min(540px, calc(100vw - 32px)); }
.sk-dlg__devnet {
  display: flex; align-items: center; margin-bottom: 14px; padding: 7px 10px;
  background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 500; letter-spacing: .1em;
}
.sk-dlg__facts { margin: 0; border-top: 1px solid var(--ink); }
.sk-dlg__facts .sk-fact {
  display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 4px 16px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--hair);
}
.sk-dlg__facts dd { margin: 0; font-size: 12.5px; line-height: 1.55; letter-spacing: .03em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sk-dlg__amount { font-size: 17px; font-weight: 500; letter-spacing: .03em; }
.sk-dlg__warn {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 10px 12px;
  border: 1px solid var(--accent); color: var(--accent); font-size: 12px; line-height: 1.55; letter-spacing: .03em;
}
.sk-dlg__warn[hidden] { display: none; }
.sk-dlg__mark {
  display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; margin-top: 1px;
  border: 1px solid var(--accent); border-radius: 50%; font-size: 11px; font-weight: 500;
}
.sk-dlg__go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.sk-dlg__go .btn:disabled { opacity: .5; cursor: not-allowed; }
.sk-dlg__status { margin-top: 12px; font-size: 12px; line-height: 1.6; letter-spacing: .04em; color: var(--ink); overflow-wrap: anywhere; }
.sk-dlg__status:empty { display: none; }
.sk-dlg__status.is-error { color: var(--accent); }
.sk-dlg__status.is-error .sk-link { color: var(--accent); border-bottom-color: var(--accent); }
.sk-dlg__status.is-busy::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 9px; border-radius: 50%;
  background: var(--accent); vertical-align: .12em;
}
@media (prefers-reduced-motion: no-preference) { .sk-dlg__status.is-busy::before { animation: sk-blink 1.1s ease-in-out infinite; } }

/* ---------- tablets and phones ---------- */
@media (max-width: 1100px) {
  .sk-pos { grid-template-columns: minmax(0, 1fr) auto; }
  .sk-pos__facts { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sk-pos__acts { grid-column: 2; grid-row: 1; }
}
@media (max-width: 860px) {
  .sk-row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sk-lock { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .sk-banner { font-size: 11.5px; letter-spacing: .06em; padding-block: 9px; }
  .sk-sums { grid-template-columns: minmax(0, 1fr); }
  .sk-sum { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; }
  .sk-sum + .sk-sum { padding-left: 0; border-left: 0; border-top: 1px solid var(--hair); }
  .sk-sum dd { margin: 0; text-align: right; }
  .sk-sum__n { font-size: 24px; }
  .sk-tiers-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sk-tier:nth-child(3) { border-left: 0; }
  .sk-tier:nth-child(n + 3) { border-top: 1px solid var(--hair); }
  .sk-lock__go .btn { width: 100%; }
  .sk-pos { grid-template-columns: minmax(0, 1fr); }
  .sk-pos__acts { grid-column: 1; grid-row: auto; justify-content: flex-start; }
  .sk-pos__facts { grid-row: auto; }
  .sk-table .sk-c-note { display: none; }
}
@media (max-width: 480px) {
  .sk-dlg__facts .sk-fact { grid-template-columns: 84px minmax(0, 1fr); gap: 2px 10px; padding: 8px 0; }
  .sk-dlg__facts dd { font-size: 12px; }
  .sk-dlg__go { display: grid; grid-template-columns: 1fr; }
  .sk-dlg__go .btn { width: 100%; white-space: normal; line-height: 1.35; padding-block: 8px; }
}