/* /members: signed out, the wall of the people and what they make; signed in, the members area.
   /members/login: signing in. */
.members [hidden] { display: none !important; }

/* The wall: square tiles from edge to edge of the window. The header sits over the top row (its fade keeps it
   readable) and the bottom row fades into the page. One tile at a time turns over (members-wall.js).
   clip, not just hidden: a hidden box still scrolls, so tabbing to the bottom row would slide the tiles under the fades. */
.wall { --head: 76px; position: relative; block-size: 100vh; block-size: 100svh; overflow: hidden; overflow: clip; }
.wall::before, .wall::after { content: ""; position: absolute; z-index: 1; inset-inline: 0; }
/* Solid behind the header (its logo, pages and buttons), then into the tiles. --head is where the header ends.
   It takes clicks, so tapping the empty band never opens a tile hidden under it. */
.wall::before { inset-block-start: 0; block-size: calc(env(safe-area-inset-top) + var(--head) + 60px); background: linear-gradient(var(--bg) calc(env(safe-area-inset-top) + var(--head)), #08090b00); }
.wall::after { inset-block-end: 0; block-size: 96px; background: linear-gradient(#08090b00, var(--bg)); pointer-events: none; }
@media (max-width: 760px) { .wall { --head: 104px; } }   /* the header's second row, the pages, ends lower */
.wall-grid {
  --gap: 10px; display: grid; grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr)); gap: var(--gap);
  margin: 0; padding: var(--top, var(--gap)) var(--gap) var(--gap); list-style: none;
}
.wall-tile { aspect-ratio: 1; perspective: 1200px; }
.wall-flip { block-size: 100%; }
.wall-card { position: relative; display: grid; place-items: center; block-size: 100%; border-radius: 10px; overflow: hidden; background: #111215; color: #e6e7ea; }
/* The thin outline sits over the picture, so photos get it too. */
.wall-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px #e6e7ea2e; pointer-events: none; transition: box-shadow 200ms var(--ease-out); }
/* An empty tile: room for someone's work, quieter than the people so they stand out. */
.wall-card:empty { background: #0c0d10; }
.wall-card:empty::after { box-shadow: inset 0 0 0 1px #e6e7ea12; }
.wall-avatar { display: grid; inline-size: 46%; aspect-ratio: 1; }
.wall-avatar svg { inline-size: 100%; block-size: 100%; }
.wall-card > :is(img, video) { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.wall-label { position: absolute; inset: auto 0 0; display: grid; padding: 28px 12px 10px; background: linear-gradient(#08090b00, #08090be0); font-size: 13px; line-height: 1.35; opacity: 0; transition: opacity 200ms var(--ease-out); }
.wall-label > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wall-name { color: var(--strong); }
.wall-by { color: var(--text); }
.wall-card:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.wall-card:focus-visible .wall-label { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .wall-card:hover .wall-label { opacity: 1; }
  .wall-card:hover::after { box-shadow: inset 0 0 0 1px #e6e7eaa6; }
}

/* Nobody on the wall yet: one quiet line in the middle of the empty tiles, below the header. */
.wall-empty {
  position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; margin: 0;
  padding: calc(env(safe-area-inset-top) + var(--head)) var(--gutter) 0; color: var(--text); font-size: 15px; text-align: center; text-wrap: balance; pointer-events: none;
}

/* Member login stays in the bottom right corner while the wall shows (a member at /members?all gets Your account).
   It's hidden until members-area.js knows the visitor is signed out, so a signed-in member never sees it, and it
   fades in as it's shown. */
.wall-login {
  position: fixed; z-index: 10; inset: auto max(var(--gutter), env(safe-area-inset-right)) max(28px, calc(env(safe-area-inset-bottom) + 16px)) auto;
  box-shadow: 0 10px 30px #08090bcc; animation: wall-login 400ms var(--ease-out);
}
@keyframes wall-login { from { opacity: 0; transform: translateY(6px); } }

@media (max-width: 600px) {
  .wall-grid { --gap: 6px; --top: calc(env(safe-area-inset-top) + 56px); }   /* small tiles: start lower so the top row still shows under the header */
  .wall-card { border-radius: 8px; }
  .wall-label { padding: 20px 8px 7px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .wall-login { animation: none; }
  .wall-label, .wall-card::after { transition: none; }
}

/* The members area: hello, then cards. Rent is the big one. */
.dash { inline-size: min(100% - 2 * var(--gutter), 64rem); margin: 0 auto; padding: 128px 0 14vh; }
.dash-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.dash-hello { display: flex; align-items: center; gap: 22px; }
.dash-hello .polaroid { inline-size: 92px; padding: 6px 6px 10px; gap: 6px; }
.dash-hello .polaroid-name { font-size: 13px; }
.dash-kicker { margin: 0 0 2px; font-size: 14px; color: var(--faint); }
.dash-head h1 { margin: 0; font-size: clamp(26px, 4vw, 36px); font-weight: 500; letter-spacing: -.01em; color: var(--strong); }
.dash-out { padding: 6px 2px; border: 0; background: none; color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.dash-out:focus-visible { outline: 2px solid var(--faint); outline-offset: 3px; border-radius: 4px; }
@media (hover: hover) and (pointer: fine) { .dash-out:hover { color: var(--strong); } }
.dash-demo { margin: 22px 0 0; padding: 10px 14px; border-radius: 10px; background: #f3d59e0f; box-shadow: inset 0 0 0 1px #f3d59e2e; font-size: 13px; color: #d9c49b; }

.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-block-start: 28px; }
.dash-card { display: grid; align-content: start; justify-items: start; gap: 12px; padding: 22px; border-radius: 18px; background: #0d0e11; box-shadow: inset 0 0 0 1px var(--line); }
/* Set up your page: first and across the grid until their page is on, outlined in the house's one warm colour. */
.dash-setup { grid-column: 1 / -1; box-shadow: inset 0 0 0 1px #f3d59e33; }

.dash-card .mark-head { justify-self: stretch; margin-block-end: 4px; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; }
.dash-card .mark { inline-size: 48px; block-size: 48px; }
.dash-card .mark svg { inline-size: 32px; block-size: 32px; }
.dash-card h2 { margin: 0; font-size: 17px; font-weight: 500; color: var(--strong); }
.dash-card h3 { margin: 18px 0 0; font-size: 13px; font-weight: 500; color: var(--faint); justify-self: stretch; padding-block-start: 18px; border-block-start: 1px solid var(--line); }
.dash-card p { margin: 0; text-wrap: pretty; }
.dash-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 6px; }
.dash-actions .button { height: 40px; padding-inline: 18px; font-size: 14px; }
.dash-note { font-size: 14px; color: var(--faint); min-block-size: 1.4em; }

.rent-plan { color: var(--text); }
.rent-amount { font-size: 40px; letter-spacing: -.02em; line-height: 1.1; color: var(--strong); font-variant-numeric: tabular-nums; }
.rent-amount span { font-size: 17px; letter-spacing: 0; color: var(--text); }
.rent-due { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--text); }
.rent-due b { font-weight: 500; color: var(--strong); }
.zelle-qr { display: block; inline-size: 120px; block-size: 120px; border-radius: 10px; background: #fff; }
.zelle-qr[hidden] { display: none; }
.pill { display: inline-flex; align-items: center; block-size: 26px; padding-inline: 10px; border-radius: 999px; background: #f3d59e1c; box-shadow: inset 0 0 0 1px #f3d59e55; color: var(--lamp); font-size: 13px; }
.history { list-style: none; margin: 0; padding: 0; justify-self: stretch; }
.history li { display: flex; flex-wrap: wrap; gap: 8px 16px; padding-block: 8px; border-block-end: 1px solid var(--line); font-size: 14px; }
.history-empty { font-size: 14px; color: var(--faint); }

@media (max-width: 760px) {
  .dash-grid { grid-template-columns: minmax(0, 1fr); }

  .dash-head { align-items: flex-start; }
  .dash-hello { gap: 16px; }
  .dash-hello .polaroid { inline-size: 72px; }
}

/* /members/login: Discord as the main pill, then an underlined email field and a quiet pill, in one column. */
.sign-in { max-inline-size: 26rem; }
.sign-in h1 { margin: 0 0 8px; font-size: 17px; font-weight: 500; color: var(--strong); }
.sign-in .sign-in-lede { margin: 0 0 28px; text-wrap: pretty; }
.sign-in-discord { gap: 10px; }
.sign-in-discord svg { inline-size: 18px; block-size: 18px; fill: currentColor; flex: none; }
.sign-in .sign-in-email { margin-block-start: 36px; }
.sign-in .form-note:empty, .sign-in .form-error:empty { display: none; }
.sign-in-asides { margin-block-start: 28px; }
.sign-in .sign-in-asides p { margin: 0; font-size: 14px; color: var(--faint); }
.sign-in .sign-in-asides p + p { margin-block-start: 8px; }
.turnstile:empty { display: none; }