/* Sheets: the preview bid sheet, the preview connect sheet and the era sheet. Bottom sheet on phones, dialog on desktop. */

.sheet { position: fixed; inset: 0; z-index: 85; display: flex; align-items: flex-end; justify-content: center; }
.sheet-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .64); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: fade .2s ease; }
@keyframes fade { from { opacity: 0; } }
.sheet-box {
  position: relative; width: 100%; max-height: calc(100svh - var(--bar-h) - 8px);
  display: flex; flex-direction: column;
  border-radius: 14px 14px 0 0;
  border: 1px solid rgba(255, 255, 255, .16); border-bottom: 0;
  background: #05060a;
  box-shadow: 0 -24px 80px rgba(0, 0, 0, .7);
  padding-bottom: env(safe-area-inset-bottom);
  animation: sheet-up .26s cubic-bezier(.2, .8, .2, 1);
}
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } }
.sheet-box::before {
  content: ""; position: absolute; left: 18px; right: 18px; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, #19e3ff, #43ff8c, #d2ff2a, transparent);
  box-shadow: 0 0 8px rgba(67, 255, 140, .8);
}
.sheet-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 6px; }
.sheet-title { font: 600 19px/1.2 var(--f-text); letter-spacing: -.015em; }
.sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: 6px 18px 20px; }
.sheet-open body { overflow: hidden; }

/* bid sheet */
.sh-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 8px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); }
.sh-tabs button { height: 36px; border: 0; border-radius: 6px; background: none; font: 600 12.5px/1 var(--f-mono); letter-spacing: .03em; color: var(--ink-3); }
.sh-tabs button[aria-selected="true"] { background: #fff; color: #000; }
.sh-pane { margin-top: 14px; }
.sh-pay { font-size: 15px; line-height: 1.5; color: #fff; text-wrap: pretty; }
.sh-lines { margin-top: 10px; display: grid; gap: 7px; }
.sh-lines li { position: relative; padding-left: 16px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.sh-lines li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-4); }
.sh-lines li.win::before { background: #43ff8c; box-shadow: 0 0 8px rgba(67, 255, 140, .8); }
.sh-lines li.out::before { background: var(--ember); box-shadow: 0 0 8px rgba(255, 91, 58, .8); }
.sh-lines li.warn { color: #ffb39c; }
.sh-lines li.warn::before { background: var(--ember); }
.sh-field { margin-top: 14px; display: grid; gap: 6px; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.sh-field input {
  height: 42px; padding: 0 12px; border-radius: var(--r);
  border: 1px solid rgba(255, 255, 255, .22); background: #000; color: #fff;
  font: 500 14px/1 var(--f-mono);
}
.sh-field input:focus { outline: none; border-color: #43ff8c; box-shadow: 0 0 0 3px rgba(67, 255, 140, .16); }
.sh-slip { grid-template-columns: minmax(0, 1fr) 92px; align-items: center; }
.sh-note em { font: 500 11.5px/1 var(--f-mono); font-style: normal; color: var(--ink-3); justify-self: end; }
.sh-tip { margin-top: 12px; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.sh-cast-btn { margin-top: 12px; padding: 0; border: 0; background: none; font: 500 12px/1.4 var(--f-mono); color: var(--ink-2); border-bottom: 1px dashed rgba(255, 255, 255, .35); }
.sh-cast-btn[aria-expanded="true"] { color: #fff; }
.sh-cast { margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .1); background: #000; font: 400 11px/1.65 var(--f-mono); color: #d8ffe9; white-space: pre-wrap; overflow-wrap: anywhere; }
.sh-confirm {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 52px; margin-top: 16px;
  border: 0; border-radius: var(--r);
  background: linear-gradient(180deg, #fff 0%, #eef1f4 100%); color: #000;
  font: 600 14px/1 var(--f-mono); letter-spacing: .07em;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .2);
}
.sh-confirm:hover { filter: brightness(1.04); }
.sh-confirm.is-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.sh-confirm.is-ember { background: linear-gradient(180deg, #ff7a5c, #ff5b3a); color: #000; }
.sh-preview { margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--ink-3); text-align: center; text-wrap: pretty; }

/* era sheet */
.es-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.es-range { font: 500 12.5px/1.3 var(--f-mono); color: var(--ink-2); }
.es-dates { margin-top: 12px; display: grid; gap: 4px; font: 400 12.5px/1.5 var(--f-mono); color: var(--ink-3); }
.es-msg { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.es-dl { margin: 14px 0 0; display: grid; border-top: 1px solid var(--line); }
.es-dl > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.es-dl dt { font: 500 11.5px/1.5 var(--f-mono); letter-spacing: .04em; color: var(--ink-3); }
.es-dl dd { margin: 0; min-width: 0; font-size: 13.5px; line-height: 1.5; color: #fff; overflow-wrap: anywhere; }
.es-dl dd q { color: #fff; }
.es-dl dd .btn-mini { height: 24px; margin-left: 4px; vertical-align: middle; font-size: 11px; }
.es-hash { font: 400 11.5px/1.5 var(--f-mono); color: #d8ffe9; word-break: break-all; }
.es-btns { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 6px; vertical-align: middle; }
.es-result { margin-top: 12px; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .12); background: #000; font: 400 12px/1.6 var(--f-mono); color: var(--ink-2); }
.es-acts { display: grid; gap: 8px; }
.es-verify { margin-top: 16px; }
.es-vtop { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 600 11px/1.3 var(--f-mono); letter-spacing: .16em; color: #fff; text-transform: uppercase; }
.es-verify .verify-code { margin-top: 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.n4444 { font-family: var(--f-mono); color: var(--ember-ink); }
.dim { color: var(--ink-3); }
.fromlogs { font: 500 10px/1 var(--f-mono); font-style: normal; letter-spacing: .08em; color: #9cf5c9; border: 1px solid rgba(156, 245, 201, .35); border-radius: 4px; padding: 2px 5px; vertical-align: 1px; white-space: nowrap; }

/* live sheet: status, warnings, the private-RPC step, the wallet list */
.sh-status { margin-top: 12px; min-height: 0; font: 500 12.5px/1.5 var(--f-mono); color: var(--ink-2); }
.sh-status:empty { display: none; }
.sh-status.ok { color: #7cffb2; }
.sh-status.err { color: #ffb39c; }
.sh-warn { margin-top: 8px; font-size: 13px; line-height: 1.5; color: #ffb39c; }
.sh-check { margin-top: 14px; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255, 194, 122, .45); background: rgba(255, 194, 122, .05); font-size: 13px; line-height: 1.5; color: #fff; cursor: pointer; }
.sh-check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: #7cffb2; }
.sh-field select { height: 42px; padding: 0 10px; border-radius: var(--r); border: 1px solid rgba(255, 255, 255, .22); background: #000; color: #fff; font: 500 14px/1 var(--f-mono); }
.sh-confirm:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.wl { display: grid; gap: 8px; }
.wl-item { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); color: #fff; font: 600 14px/1 var(--f-text); text-align: left; }
.wl-item:hover { border-color: rgba(124, 255, 178, .6); }
.wl-item img, .wl-item i { width: 28px; height: 28px; border-radius: 7px; flex: none; background: rgba(255, 255, 255, .1); }

@media (min-width: 760px) {
  .sheet { align-items: center; }
  .sheet-box { width: min(100% - 40px, 560px); max-height: min(88vh, 860px); border-radius: 14px; border-bottom: 1px solid rgba(255, 255, 255, .16); padding-bottom: 0; }
  .sheet-era .sheet-box { width: min(100% - 40px, 720px); }
  .sheet-top { padding: 18px 22px 6px; }
  .sheet-body { padding: 6px 22px 22px; }
  .es-dl > div { grid-template-columns: 170px minmax(0, 1fr); }
}