.dash {
  --dash-max: 1080px;
  --dash-auth: 420px;
}

.dash-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.dash-head .lede { margin-top: 10px; }

.dash-logout {
  flex-shrink: 0;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  background: var(--color-fill);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.dash-logout:hover { border-color: color-mix(in srgb, var(--color-accent) 40%, transparent); }

.dash-logout.is-loading {
  opacity: 0.5;
  pointer-events: none;
}

.dash-lots {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 24px;
}

.dash-lot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  min-height: 56px;
  padding: 14px 16px;
  border: 1px solid var(--color-line);
  border-radius: 16px;
  background: var(--color-fill);
  text-align: left;
}

.dash-lot:hover { border-color: color-mix(in srgb, var(--color-accent) 40%, transparent); }

.dash-lot-name {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

.dash-lot-meta {
  color: var(--color-text-faint);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.dash-label {
  display: block;
  margin: 0 0 6px;
  color: var(--color-text-faint);
  font-size: var(--text-sm);
}

.dash-form .field { margin-top: 24px; }

.dash-actions { margin-top: 28px; }

#lot-id { font-family: var(--font-mono); }

#lot-unpaid-wrap {
  grid-column: 1 / -1;
  margin-top: 28px;
}

#lot-loading[hidden],
#lot-empty[hidden] { display: none; }

@media (min-width: 560px) {
  .shell-wide {
    --chrome-side: 40px;
    max-width: var(--dash-max);
    width: 100%;
    min-height: 0;
  }

  .shell-wide .view.is-active { flex: 0 1 auto; }

  .shell-wide h1 { font-size: var(--text-display); }

  .dash-head {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
  }

  .shell-wide [data-view=phone] .body,
  .shell-wide [data-view=phone] .foot,
  .shell-wide [data-view=code] .body,
  .shell-wide [data-view=code] .foot {
    max-width: var(--dash-auth);
    width: 100%;
    margin-inline: auto;
  }

  .dash-actions {
    display: flex;
    justify-content: flex-end;
  }

  .dash-actions .cta {
    width: auto;
    min-width: 200px;
    padding-inline: 24px;
  }
}

@media (min-width: 720px) {
  .dash-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
  }

  .dash-form .field:nth-child(-n + 2) { margin-top: 16px; }

  .dash .sheet-panel {
    top: 50%;
    bottom: auto;
    width: min(var(--dash-auth), calc(100% - 48px));
    max-height: min(72dvh, 640px);
    border-radius: 20px;
    transform: translate(-50%, -50%);
    padding-bottom: 12px;
  }

  .dash .sheet-handle { display: none; }
}