/* The account page. It shares the top bar and the palette of the search page (search.css) and
   owns everything under .profile, so nothing here reaches the list or the lot window. */
body.profile { background: var(--bg); }
/* search.css sizes the bar for a row of filters and owns .more as a dark overlay: neither fits here. */
.profile .topbar { height: 56px; flex-wrap: nowrap; }
.profile .me { margin-left: 0; }
.profile .pback { color: #cfcac0; font-size: 13px; text-decoration: none; margin-right: auto; margin-left: 1rem; }
.profile .pback:hover { color: #fff; }
.pwrap { width: min(980px, calc(100% - 2rem)); margin: 1.6rem auto 4rem; display: grid; gap: 1.6rem; }

.phead { display: flex; align-items: center; gap: 1rem; }
.phead .avatar { width: 58px; height: 58px; flex: none; display: grid; place-items: center; background: var(--accent); color: #111; border: 2px solid #111; border-radius: 4px; box-shadow: var(--shadow); font-family: var(--hfont); font-size: 20px; }
.phead h1 { font-family: var(--hfont); font-weight: 400; font-size: 26px; line-height: 1.15; margin: 0; }
.phead .mail { color: var(--muted); font-size: 13.5px; }
.pwarn { margin: 0; border: 2px solid var(--warn); background: #fff8e6; border-radius: 4px; padding: .6rem .8rem; font-size: 13.5px; }

.ptiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.tile-s { background: #fff; border: 2px solid #111; border-radius: 4px; box-shadow: var(--shadow); padding: .8rem 1rem; }
.tile-s.hot { background: var(--accent-bg); }
.tile-s .l { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.tile-s .v { font-family: var(--hfont); font-size: 28px; line-height: 1.2; }
.tile-s .s { font-size: 12.5px; color: var(--muted); }
.tile-s .tag { background: #9be29e; color: #111; font-size: 11px; font-weight: 700; border-radius: 2px; padding: .05rem .35rem; }

.psec h2, .pmore h2 { font-family: var(--hfont); font-weight: 400; font-size: 17px; margin: 0 0 .7rem; display: flex; align-items: center; gap: .5rem; }
.psec h2 .n { font-family: var(--font); font-weight: 600; font-size: 12px; background: #111; color: #fff; border-radius: 2px; padding: 0 .4rem; line-height: 18px; }
.pnote { margin: .7rem 0 0; font-size: 12.5px; color: var(--muted); }
.pmuted { margin: 0; color: var(--muted); }

.rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .9rem; }
.rcard { display: block; background: #fff; border: 2px solid #111; border-radius: 4px; box-shadow: 3px 3px 0 #111; color: inherit; text-decoration: none; overflow: hidden; }
.rcard:hover, .rcard:focus-visible { box-shadow: 3px 3px 0 var(--accent); outline: none; }
.rcard .ph { aspect-ratio: 4 / 3; background: var(--soft); display: grid; place-items: center; border-bottom: 2px solid #111; }
.rcard .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rcard .ph span { font-family: var(--hfont); font-size: 30px; color: #b5b0a4; }
.rcard .body { padding: .6rem .75rem .75rem; }
.rcard .t { font-family: var(--hfont); font-size: 15px; line-height: 1.2; }
.rcard .m { margin-top: .3rem; font-size: 13px; }
.rcard .new { background: #9be29e; border-radius: 2px; padding: .05rem .35rem; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.rcard .d { margin-top: .15rem; font-size: 12px; color: var(--muted); }

.pempty { display: grid; gap: .5rem; justify-items: start; background: #fff; border: 2px dashed #111; border-radius: 4px; padding: 1.1rem; }
.pempty span { color: var(--muted); max-width: 46rem; }
.pbtn { display: inline-flex; align-items: center; justify-content: center; padding: .55rem 1rem; border: 2px solid #111; border-radius: 4px; background: #fff; color: #111; font-weight: 600; box-shadow: 3px 3px 0 #111; text-decoration: none; white-space: nowrap; }
.pbtn.go { background: var(--accent); }
.pbtn:active { box-shadow: none; transform: translate(3px, 3px); }

.hist { background: #fff; border: 2px solid #111; border-radius: 4px; }
.hrow { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .55rem .8rem; }
.hrow + .hrow { border-top: 1px solid var(--soft); }
.hrow .q { font-family: var(--hfont); font-size: 15px; text-align: center; border-radius: 3px; padding: .1rem 0; }
.hrow .q.plus { background: #d9f2da; color: #1d5a20; }
.hrow .q.minus { background: var(--soft); color: #111; }
.hrow .w { display: grid; min-width: 0; }
.hrow .w i { font-style: normal; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hrow .d { font-size: 12.5px; color: var(--muted); white-space: nowrap; }

.pmore { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; background: #111; color: #fff; border-radius: 4px; padding: 1.1rem 1.2rem; box-shadow: 5px 5px 0 var(--accent); }
.pmore h2 { margin-bottom: .2rem; }
.pmore p { margin: 0; color: #e6e2d8; max-width: 38rem; }
.pmore .pbtn { box-shadow: 3px 3px 0 #fff; }

@media (max-width: 700px) {
  .ptiles { grid-template-columns: 1fr; }
  .pmore { flex-direction: column; align-items: stretch; }
  .hrow { grid-template-columns: 2.6rem minmax(0, 1fr); }
  .hrow .d { grid-column: 2; }
  .profile .pback { display: none; }
}

.mailpref { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: #fff; border: 2px solid #111; border-radius: 4px; padding: .7rem .9rem; }
.mailpref label { display: flex; align-items: center; gap: .55rem; font-size: 14.5px; cursor: pointer; }
.mailpref input { width: 18px; height: 18px; accent-color: #111; margin: 0; }

/* What an account opened, without credits: models with their end date, single sales, and the
   subscription that is not for sale yet. */
.rcard .d .over { color: var(--bad); font-weight: 600; }
a.hrow.salerow { color: inherit; text-decoration: none; }
a.hrow.salerow:hover { background: var(--accent-bg); }
.pmore .psubs { display: flex; gap: .5rem; flex-wrap: wrap; }
.pbtn.off { opacity: .55; cursor: not-allowed; box-shadow: none; background: #e8e5de; }