/* Delegation page. Uses the site's tokens (css/style.css), loaded on this page only. */
.dl-hero { max-width: 760px; margin: 0 0 12px; }
.dl-hero h1 { margin: 6px 0 4px; font-size: 25px; line-height: 1.12; font-weight: 680; letter-spacing: -0.03em; color: var(--text-1); }
.dl-hero p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.dl-optional {
  display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 560;
  color: var(--deleg-ink); background: var(--deleg-dim);
}

.dl-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; min-height: 62px; }
.dl-kv.dl-tile {
  flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 3px; padding: 9px 14px; border-radius: 12px;
  background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--card-shadow);
}
.dl-kv.dl-tile span { font-size: 12px; color: var(--text-3); }
.dl-kv.dl-tile b { font-size: 17px; font-weight: 640; letter-spacing: -0.02em; color: var(--text-1); text-align: left; }

.dl-steps { list-style: none; counter-reset: dl; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 12px; padding: 0; }
.dl-steps li { counter-increment: dl; position: relative; padding: 8px 12px 8px 42px; border-radius: 12px; background: var(--deleg-dim); }
.dl-steps li::before {
  content: counter(dl); position: absolute; left: 11px; top: 10px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13.5px; font-weight: 660; color: #fff; background: var(--deleg-b);
}
[data-theme="dark"] .dl-steps li::before { color: #06231d; }
.dl-steps b { display: block; font-size: 13.5px; font-weight: 600; color: var(--text-1); }
.dl-steps span { display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.35; color: var(--text-2); }

.dl-faq { margin-bottom: 10px; border-radius: 14px; border: 1px solid var(--card-border); background: var(--card-bg); }
.dl-faq summary { cursor: pointer; padding: 8px 14px; font-size: 13.5px; font-weight: 560; color: var(--text-1); }
.dl-faq dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 4px 28px; margin: 0; padding: 0 16px 14px; }
.dl-faq dt { margin-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--text-1); }
.dl-faq dd { margin: 2px 0 6px; font-size: 13.5px; line-height: 1.45; color: var(--text-2); grid-column: auto; }
.dl-faq dl { grid-auto-flow: row; }

.dl-card { margin-bottom: 10px; }
.dl-listhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.dl-search {
  width: 220px; max-width: 100%; padding: 5px 11px; font: inherit; font-size: 13px; color: var(--text-1);
  background: var(--well, var(--surface-2)); border: 1px solid var(--card-border); border-radius: 10px;
}
.dl-search:focus { outline: 2px solid var(--deleg-b); outline-offset: 1px; }
#dlListError { margin-bottom: 12px; }

.dl-sort {
  all: unset; cursor: pointer; font: inherit; color: inherit; white-space: nowrap; border-radius: 4px;
}
.dl-sort.active { color: var(--text-1); font-weight: 560; }
.dl-sort:hover { color: var(--text-1); }
.dl-sort:focus-visible { outline: 2px solid var(--deleg-b); outline-offset: 2px; }
.dl-rank { width: 44px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.dl-name { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.dl-name b { font-weight: 600; color: var(--text-1); }
.dl-action { width: 1%; text-align: right; }
.dl-more { display: block; margin: 14px auto 0; }
.dl-more[hidden] { display: none; }
.dl-off td { opacity: 0.58; }
.dl-off .dl-action { opacity: 1; }
.dl-table td.mono { white-space: nowrap; }

/* ---- My delegations ---- */
.dl-mine { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 14px; }
.dl-mine > .dl-gate, .dl-mine > .dl-walletbar, .dl-mine > .notice, .dl-mine > .dl-empty, .dl-mine > p { grid-column: 1 / -1; }
.dl-gate { max-width: 460px; }
.dl-gate h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; color: var(--text-1); }
.dl-gate p { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.dl-walletbar {
  display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px;
  background: var(--well, var(--surface-2)); border: 1px solid var(--card-border);
}
.dl-walletbar .dl-kv { flex-direction: column; align-items: flex-start; gap: 1px; border: 0; padding: 0; }
.dl-walletbar-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.dl-empty { margin: 0; padding: 20px; text-align: center; font-size: 14px; color: var(--text-3); border: 1px dashed var(--card-border-strong); border-radius: 12px; }
.dl-item { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--card-border); border-radius: 12px; }
[data-theme="light"] .dl-item { background: #E8F3F7; border-color: rgba(32, 120, 150, 0.24); }
.dl-item-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.dl-item-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dl-amount { font-size: 20px; font-weight: 640; letter-spacing: -0.02em; color: var(--text-1); font-variant-numeric: tabular-nums; }
.dl-amount small { font-size: 13px; font-weight: 520; color: var(--text-3); letter-spacing: 0; }
.dl-item-seq { margin: 0; font-size: 14px; font-weight: 560; color: var(--text-1); }
.dl-item-text { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.dl-stopcost { display: flex; flex-direction: column; gap: 3px; padding-top: 7px; border-top: 1px solid var(--card-border); }
.dl-stopcost .dl-kv { font-size: 13.5px; }
.dl-stopcost .dl-kv b { font-weight: 640; }
.dl-stopcost p { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--text-3); }
.dl-cost-label { display: inline-flex; align-items: center; gap: 6px; }
.dl-info {
  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; padding: 0; border: 1px solid var(--text-3); border-radius: 50%;
  background: none; color: var(--text-2); font: italic 600 11px/1 Georgia, serif; cursor: pointer;
}
.dl-info::after { content: ""; position: absolute; inset: -9px; }
.dl-info:hover, .dl-info[aria-expanded="true"] { border-color: var(--text-1); color: var(--text-1); }
.dl-cost-detail { display: flex; flex-direction: column; gap: 3px; margin: 3px 0; padding: 8px 10px; border: 1px solid var(--card-border); border-radius: 8px; }
.dl-cost-detail[hidden] { display: none; }
.dl-stopcost .dl-cost-detail .dl-kv { font-size: 12.5px; }
.dl-stopcost .dl-cost-detail .dl-kv b { font-weight: 560; white-space: nowrap; }
.dl-cost-detail p { margin-top: 3px; }
.dl-total { padding-top: 9px; border-top: 1px solid var(--card-border); }
.dl-total .dl-kv b { font-weight: 640; }

/* ---- Rows of figures ---- */
.dl-kv { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 14px; }
.dl-kv span { color: var(--text-2); }
.dl-kv b { font-weight: 560; color: var(--text-1); font-variant-numeric: tabular-nums; text-align: right; }

/* ---- Sheet ---- */
dialog.dl-sheet {
  border: 0; padding: 0; width: 100%; max-width: 480px; max-height: 92dvh; margin: auto auto 0;
  border-radius: 22px 22px 0 0; color: var(--text-1); background: var(--surface-1, var(--card-bg)); box-shadow: var(--card-shadow-hover);
}
dialog.dl-sheet[open] { display: flex; flex-direction: column; animation: dl-up 240ms cubic-bezier(.2, .9, .3, 1) both; }
dialog.dl-sheet::backdrop { background: rgba(5, 8, 12, 0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
@keyframes dl-up { from { transform: translateY(28px); opacity: 0; } }
@media (min-width: 640px) { dialog.dl-sheet { margin: auto; border-radius: 22px; } }
@media (prefers-reduced-motion: reduce) { dialog.dl-sheet[open] { animation: none; } }
.dl-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 6px; }
.dl-sheet-head h2 { margin: 0; font-size: 18px; font-weight: 640; letter-spacing: -0.015em; color: var(--text-1); }
.dl-close { all: unset; cursor: pointer; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; font-size: 21px; color: var(--text-2); }
.dl-close:hover { background: var(--row-hover); color: var(--text-1); }
.dl-close:focus-visible { outline: 2px solid var(--deleg-b); }
.dl-sheet-body { display: flex; flex-direction: column; gap: 13px; padding: 10px 20px 22px; overflow: auto; }
.dl-sheet-body .notice p { margin: 0; font-size: 13.5px; line-height: 1.45; }
.dl-wide { width: 100%; justify-content: center; }
.dl-buttons { display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.dl-buttons .btn { justify-content: center; }

.dl-progress { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; }
.dl-progress li { flex: 1; padding-top: 7px; border-top: 3px solid var(--card-border-strong); font-size: 12.5px; color: var(--text-3); }
.dl-progress li.active { border-color: var(--deleg-b); color: var(--text-1); font-weight: 560; }
.dl-progress li.done { border-color: var(--deleg-b); color: var(--text-2); }

.dl-seqbox { padding: 11px 13px; border-radius: 12px; background: var(--deleg-dim); }
.dl-seqbox-name { display: flex; align-items: center; gap: 8px; font-size: 14.5px; }
.dl-seqbox-name b { font-weight: 620; color: var(--text-1); }
.dl-seqbox-facts { display: flex; flex-wrap: wrap; gap: 3px 14px; margin-top: 3px; font-size: 13px; color: var(--text-2); }

.dl-field { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; color: var(--text-2); }
.dl-field input, .dl-field select {
  width: 100%; padding: 11px 12px; font: inherit; font-size: 15px; color: var(--text-1);
  background: var(--well, var(--surface-2)); border: 1px solid var(--card-border-strong); border-radius: 10px;
}
.dl-field input:focus, .dl-field select:focus { outline: 2px solid var(--deleg-b); outline-offset: 1px; }
.dl-unlock { display: flex; flex-direction: column; gap: 11px; }
.dl-unlock .form-msg:empty { display: none; }
.dl-amount-input { display: flex; align-items: center; gap: 6px; padding: 0 8px 0 0; background: var(--well, var(--surface-2)); border: 1px solid var(--card-border-strong); border-radius: 12px; }
.dl-amount-input:focus-within { outline: 2px solid var(--deleg-b); outline-offset: 1px; }
.dl-amount-input input { flex: 1; min-width: 0; padding: 12px 13px; border: 0; background: transparent; font-size: 22px; font-weight: 620; font-variant-numeric: tabular-nums; }
.dl-amount-input input:focus { outline: 0; }
.dl-unit { font-size: 13.5px; font-weight: 560; color: var(--text-3); }
.dl-max { all: unset; cursor: pointer; padding: 5px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--deleg-ink); background: var(--deleg-dim); }
.dl-max:hover { background: var(--deleg-dim-strong); }
.dl-max:focus-visible { outline: 2px solid var(--deleg-b); }
.dl-hint { margin: -6px 0 0; font-size: 13px; line-height: 1.4; color: var(--text-3); }
.dl-hint.err { color: var(--danger); }
.dl-estimate { display: flex; flex-direction: column; gap: 5px; }
.dl-estimate:empty { display: none; }

.dl-recap { display: flex; flex-direction: column; gap: 9px; padding: 14px 15px; border-radius: 14px; border: 1px solid var(--card-border); }
.dl-kv.big { flex-direction: column; align-items: center; gap: 0; padding-bottom: 9px; border-bottom: 1px solid var(--card-border); }
.dl-kv.big b { font-size: 26px; font-weight: 680; letter-spacing: -0.025em; }
.dl-bulk-rows { gap: 5px; padding: 10px 15px; max-height: 158px; overflow: auto; }
.dl-bulk-rows .dl-kv { font-size: 13.5px; }
.dl-terms { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.dl-address { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--well, var(--surface-2)); }
.dl-address code { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; user-select: all; }
.dl-sending { margin: 18px 0; text-align: center; color: var(--text-2); }
.dl-result { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 0 4px; text-align: center; }
.dl-result h3 { margin: 4px 0 0; font-size: 19px; font-weight: 640; color: var(--text-1); }
.dl-result p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.dl-check { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; font-size: 25px; color: #fff; background: var(--deleg-b); }
[data-theme="dark"] .dl-check { color: #06231d; }

@media (max-width: 960px) {
  .dl-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dl-steps { grid-template-columns: 1fr; }
  .dl-hero h1 { font-size: 28px; }
}
/* Table → one compact card per sequencer */
@media (max-width: 860px) {
  .dl-table thead { display: none; }
  .dl-table table, .dl-table tbody { display: block; width: auto; }
  .dl-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; padding: 13px 2px; border-bottom: 1px solid var(--card-border); }
  .dl-table tr:last-child { border-bottom: 0; }
  .dl-table td { display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: auto; padding: 0; border: 0; text-align: left; }
  .dl-table td.right { text-align: left; }
  .dl-table td::before { content: attr(data-label); font-family: var(--font-ui); font-size: 12px; font-weight: 400; color: var(--text-3); }
  .dl-table td.dl-namecell, .dl-table td.dl-action { grid-column: 1 / -1; }
  .dl-table td.dl-namecell::before, .dl-table td.dl-rank { display: none; }
  .dl-table td.dl-action { padding-top: 4px; }
  .dl-table td.dl-action .btn { width: 100%; justify-content: center; }
  .dl-table tr:hover td { background: none; }
}
@media (max-width: 460px) {
  .dl-tiles { gap: 8px; }
  .dl-kv.dl-tile { padding: 12px 13px; }
  .dl-kv.dl-tile b { font-size: 18px; }
  .dl-walletbar-actions { margin-left: 0; }
}

/* Sequencer list: tighter rows */
@media (min-width: 761px) {
  .dl-table td { padding-top: 5px; padding-bottom: 5px; }
  .dl-table .btn { min-height: 28px; padding: 0 11px; font-size: 12.5px; }
}