/* dashboard.html layout: a head with the treasury status, then either the
   guest view (connect + calculator) or the holder view, then the treasury */
.dash {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  grid-template-rows: auto auto 1fr; /* the tall feed card stretches the last row, not the connect row */
  gap: 28px 40px;
  align-items: start;
  padding: calc(var(--nav-h) + 56px) var(--gutter) 96px;
  background: radial-gradient(circle, #232220 1px, transparent 1px) 0 0 / 16px 16px;
  isolation: isolate; /* keeps stacked cards' under-edges (z-index -1) above the grid */
}
.dash__head, .dash__holder { grid-column: 1 / -1; }

.dash__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.dash__sub { margin-top: 14px; font: 400 19px/28px var(--sans); letter-spacing: -0.01em; }

/* status: plain words, no coloured dots */
.dash__status { display: flex; gap: 36px; margin: 0; }
.dash__status dt { font: 400 13px/18px var(--sans); color: var(--faint); }
.dash__status dd { margin: 6px 0 0; font: 400 16px/20px var(--sans); white-space: nowrap; }
.dash__status output { font-variant-numeric: tabular-nums; }

.dash__h2 { font: 400 30px/1.1 var(--sans); letter-spacing: -0.04em; }

/* guest: connect panel and treasury on the left, the live feed on the right.
   The guest wrapper dissolves into the page grid; once connected, the holder
   view takes row 2 and the treasury and feed sit side by side below it. */
.dash__guest { display: contents; }
.dash__connect { grid-column: 1; grid-row: 2; }
.dash__treasury { grid-column: 1; grid-row: 3; }
.dash__live { grid-column: 2; grid-row: 2 / span 2; }
.dash:has([data-holder]:not([hidden])) .dash__live { grid-row: 3; }
/* connect on the left, look up any address on the right */
.dash__connect { display: grid; grid-template-columns: 1fr 1fr; padding: 0; }
.dash__pane { display: grid; align-content: start; justify-items: start; gap: 18px; padding: 32px; }
.dash__pane > p.muted { max-width: 440px; font: 400 17px/26px var(--sans); }
.dash__lookup { gap: 10px; border-left: 1px solid var(--line-soft); }
.dash__lookup .dlabel { margin-top: 8px; color: var(--text); }
.dash__lookup-field {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
  padding: 4px 4px 4px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: border-color 0.2s;
}
.dash__lookup-field:focus-within { border-color: var(--muted); }
.dash__lookup-field input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  font: 400 14px/1 var(--mono);
  color: var(--text);
  outline: none;
}
.dash__lookup-field input::placeholder { color: var(--faint); }
.dash__lookup-field input[aria-invalid="true"] { color: #f0a08c; }
.dash__lookup-error { min-height: 18px; font: 400 13px/18px var(--sans); color: #f0a08c; }

/* shown above the holder view when an address was looked up */
.dash__viewing { font: 400 15px/20px var(--sans); color: var(--muted); }
.dash__viewing span { font-family: var(--mono); font-size: 14px; color: var(--text); }
.dash__viewing button {
  margin-left: 8px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--faint);
  cursor: pointer;
}

/* holder: four tiles, pending beside received, then the drop history */
.dash__holder { display: grid; gap: 20px; }
.dash__tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid #2f2e2b;
  border-radius: 14px;
  background: linear-gradient(#141413, #0f0f0e);
}
.dtile { padding: 20px 22px; }
.dtile + .dtile { border-left: 1px solid var(--line-soft); }
.dash__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.dtreasury__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 18px; }
.dtreasury__head .dnote { max-width: 360px; text-align: right; }

/* header wallet pill: address, swapping to "Disconnect" on hover */
.dash__wallet { min-width: 128px; justify-content: center; text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.dash__wallet-off { display: none; }
.dash__wallet:is(:hover, :focus-visible) .dash__wallet-addr { display: none; }
.dash__wallet:is(:hover, :focus-visible) .dash__wallet-off { display: inline; }
.nav__links a[aria-current="page"] { background: rgb(255 255 255 / 0.08); }

@media (max-width: 1020px) {
  .dash__head { grid-template-columns: 1fr; align-items: start; }
  .dash__status { flex-wrap: wrap; gap: 16px 32px; }
  .dash { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .dash__connect, .dash__live, .dash__treasury, .dash:has([data-holder]:not([hidden])) .dash__live { grid-column: 1; grid-row: auto; }
  .dash__tiles { grid-template-columns: 1fr 1fr; }
  .dtile:nth-child(3) { border-left: 0; }
  .dtile:nth-child(n + 3) { border-top: 1px solid var(--line-soft); }
}
@media (max-width: 760px) {
  .dash { padding: calc(var(--nav-h) + 24px) var(--frame) 64px; gap: 20px; }
  .dash__grid { grid-template-columns: 1fr; }
  .dash__connect { grid-template-columns: 1fr; }
  .dash__pane { padding: 22px; }
  .dash__lookup { border-left: 0; border-top: 1px solid var(--line-soft); }
  .dtreasury__head { flex-direction: column; align-items: start; }
  .dtreasury__head .dnote { text-align: left; }
  .dcard[data-slot="history"], .dash__treasury { overflow-x: auto; }
}