/* view styles: the public profile (/u/:name, views/user.js), Settings (/profile, views/profile.js) and the member card
   (js/usercard.js). One layer on app.css's tokens: a header box with the accent strip, the facts as stat rows, wells
   for numbers, the accent cap on the open settings section. */

/* skeleton blocks while a profile loads */
.pf-sk { display: block; height: 10px; background: linear-gradient(90deg, rgba(255,255,255,.035) 30%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.035) 70%) 0 0 / 300% 100%;
  animation: sk-shim 1.4s linear infinite; }
.pf-sk.tall { height: 16px; }
.pf-sk.av72 { width: 72px; height: 72px; flex: none; }
.pf-sk.av64 { width: 64px; height: 64px; flex: none; }
.pf-sk.av32 { width: 32px; height: 32px; flex: none; }
.pf-sk.w25 { width: 25%; } .pf-sk.w30 { width: 30%; } .pf-sk.w40 { width: 40%; } .pf-sk.w55 { width: 55%; } .pf-sk.w70 { width: 70%; }
.pf-skrows .fm, .pf-skcol { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }

.pf-page { min-width: 0; animation: fv-in var(--panel); }
.pf-crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; margin-bottom: var(--sp-3); font-size: var(--fs-md); color: var(--tx-3); }
.pf-crumbs a.lnk { color: var(--tx-2); transition: color var(--hover); }
.pf-crumbs a.lnk:hover { color: var(--ac-hi); }

/* ---------------------------------------------------------------- the public profile: the header box */
.pf-head::after { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: var(--ac-grad); pointer-events: none; }
.pf-head > .card-b { padding: 18px var(--g-r) 18px var(--g-l); }
.pf-hero { display: flex; align-items: center; gap: var(--sp-4) var(--sp-5); flex-wrap: wrap; }
.pf-face { position: relative; flex: none; width: 72px; height: 72px; }
.pf-face > .av { box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--e-line-2), 0 10px 22px -10px rgba(0,0,0,.9); }
.pf-face > .av .mono-l { font-size: var(--fs-xl); }
.pf-dot { position: absolute; right: -4px; bottom: -4px; width: 9px; height: 9px; background: linear-gradient(180deg, var(--ok), #446F3E); box-shadow: 0 0 0 1px #000; }
.pf-id { flex: 1 1 280px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pf-nmrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.pf-nm { font: 700 var(--fs-xl)/24px var(--ui); min-width: 0; overflow-wrap: anywhere; }
.pf-nm .who { font-weight: inherit; }
.pf-nmrow .badge.inline { margin-left: 0; }
.pf-sub { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--fs-md); line-height: 17px; color: var(--tx-2); }
.pf-tl { display: contents; }
.pf-pres { display: flex; min-width: 0; margin-top: 3px; font-size: var(--fs-md); }
.pf-pres:empty { display: none; }
.pf-pres .pv b, .pf-pres .pv .uc-at { color: var(--tx); font-weight: 400; }
/* the numbers: a well of cells, the value bold in the accent over its label */
.pf-nums { display: grid; grid-template-columns: repeat(3, minmax(88px, 1fr)); flex: none; background: var(--s-well); border: 1px solid #000;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.6), 0 1px 0 var(--bev-hi); }
.pf-n { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; padding: 8px 12px; }
.pf-n + .pf-n { border-left: 1px solid #000; box-shadow: inset 1px 0 0 var(--e-hair); }
.pf-n > b { font: 700 var(--fs-lg)/20px var(--ui); color: var(--ac-hi); font-variant-numeric: tabular-nums; }
.pf-n > span { display: block; max-width: 100%; font-size: var(--fs-sm); line-height: 15px; color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-n > span::first-letter { text-transform: uppercase; }
.pf-acts { display: flex; flex-wrap: wrap; gap: 6px; flex: none; }
.pf-acts:empty { display: none; }

/* the facts and the bio on the left, the profile posts on the right */
.pf-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--gap); align-items: start; }
.pf-facts { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #000; box-shadow: 0 1px 0 var(--e-hair); }
.pf-facts .kv { font-size: var(--fs-md); }
.pf-about .bio { color: var(--tx); }
.pf-sigw { margin-top: 14px; padding-top: 10px; border-top: 1px solid #000; box-shadow: inset 0 1px 0 var(--e-hair); }
.pf-sigw > .cap { margin-bottom: 4px; }
.pf-sig { font-size: var(--fs-md); line-height: 18px; color: var(--tx-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.pf-none { font-size: var(--fs-md); color: var(--tx-4); }
.pf-gone { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 16px; text-align: center; }
.pf-gone h1 { margin-top: 6px; font: 700 var(--fs-lg)/22px var(--ui); color: var(--tx); }
.pf-gone p { color: var(--tx-3); font-size: var(--fs-base); }

/* the wall: the composer on its own strip at the top, then the posts */
.pf-wall .card-h .pager .btn { height: 22px; width: 22px; }
.pf-wall .card-h .aside > span { color: var(--tx-4); }
.pf-compose:empty { display: none; }
.pf-compose { border-bottom: 1px solid #000; box-shadow: 0 1px 0 var(--e-hair); background: #111114; }
.pf-cform { display: flex; flex-direction: column; gap: 8px; padding: 12px var(--g-r) 12px var(--g-l); }
.pf-crow { display: flex; gap: 12px; align-items: flex-start; }
.pf-crow > .av { box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--e-line-2); }
.pf-crow > .fieldbox, .pf-crow > .ed { flex: 1; min-width: 0; }
.pf-cform .err-line, .pf-cform .msg-line .tl { padding-left: 44px; }
.pf-closed { display: flex; align-items: center; gap: 8px; padding: 10px var(--g-r) 10px var(--g-l); font-size: var(--fs-md); color: var(--tx-3); }
.pf-wall > .card-b > .msg-line { padding: 10px var(--g-r) 0 var(--g-l); }
.pf-list { transition: opacity var(--hover); }
.pf-list.busy { opacity: .55; }
.pf-list .fitem { transition: background var(--hover); }
.pf-list .fitem:hover { background: var(--s-hover); }
.pf-list .fitem:has(> .x) .l1 { padding-right: 28px; }
.pf-list .fitem > .av { box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--e-line-2); }

/* ---------------------------------------------------------------- the member card: a popup window with the strip, the
   face beside the name and the flat role, what they are doing in a well, the numbers as a well of cells, the buttons
   on a foot strip */
.uc { position: fixed; z-index: 960; width: 320px; max-width: calc(100vw - 16px); overflow: hidden; background: var(--s-pop); border: 1px solid #000; box-shadow: var(--el-2);
  animation: uc-in 170ms cubic-bezier(.2,.7,.2,1); transform-origin: 24px 0; }
.uc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--ac-grad); }
.uc.up { transform-origin: 24px 100%; }
.uc.out { opacity: 0; transform: translateY(2px); transition: opacity 140ms, transform 140ms; }
@keyframes uc-in { from { opacity: 0; transform: translateY(4px) scale(.98); } }
.uc-load { display: grid; place-items: center; height: 120px; }
.uc .empty { margin: 16px; }
.uc-in { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px var(--g-r) 0 var(--g-l); }
.uc-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.uc-av { position: relative; flex: none; }
.uc-av > .av { box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--e-line-2); }
.uc-av .av .mono-l { font-size: 15px; }
.uc-dot { position: absolute; right: -3px; bottom: -3px; width: 8px; height: 8px; background: linear-gradient(180deg, var(--ok), #446F3E); box-shadow: 0 0 0 1px #000; }
.uc-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.uc-nm { font: 700 var(--fs-lg)/20px var(--ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uc-nm a .who { font-weight: 700; }
.uc-role { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--fs-md); line-height: 17px; }
.uc-rl { display: inline-flex; align-items: center; gap: 5px; flex: none; }
.uc-title { font-size: var(--fs-md); color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uc-meta { display: flex; flex-direction: column; gap: 1px; margin-top: 2px; font-size: var(--fs-sm); line-height: 16px; color: var(--tx-3); }
.uc-act { display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; font-size: var(--fs-md); line-height: 17px; color: var(--tx-2); background: var(--s-well); border: 1px solid #000;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.5), 0 1px 0 var(--bev-hi); }
.uc-act > svg { flex: none; margin-top: 2px; color: var(--ok); }
.uc-act b, .uc-at { color: var(--tx); font-weight: 500; overflow-wrap: anywhere; }
.uc-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--s-well); border: 1px solid #000; box-shadow: inset 0 1px 3px rgba(0,0,0,.6), 0 1px 0 var(--bev-hi); }
.uc-n { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 7px 4px; }
.uc-n + .uc-n { box-shadow: inset 1px 0 0 #000, inset 2px 0 0 var(--e-hair); }
.uc-n > b { font: 700 var(--fs-base)/18px var(--ui); color: var(--ac-hi); }
.uc-n > span { max-width: 100%; font-size: var(--fs-sm); color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uc-ign { display: flex; align-items: center; gap: 6px; font-size: var(--fs-md); color: var(--warn); }
.uc-acts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 calc(-1 * var(--g-r)) 0 calc(-1 * var(--g-l)); padding: 8px var(--g-r) 8px var(--g-l); border-top: 1px solid #000;
  box-shadow: inset 0 1px 0 var(--e-hair); background: #101013; }
.uc-acts .btn { flex: 1 1 auto; }
.uc-acts .btn.rp-b { flex: none; }
.uc-in > :last-child:not(.uc-acts) { margin-bottom: 16px; }

/* ---------------------------------------------------------------- Settings: the section list in a box that sticks
   beside the cards; the open one lit like the tab pill */
.pf-set { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--gap); align-items: start; }
.pf-cards > .card { scroll-margin-top: calc(var(--hdr-h) + var(--sub-h) + 20px + var(--in-t)); }
.pf-navw { position: sticky; top: calc(2px + var(--hdr-h) + var(--sub-h) + var(--sp-4) + var(--in-t)); }
.pf-nav { display: flex; flex-direction: column; padding: 4px 0; background: var(--s-box); border: 1px solid var(--e-line); border-top-color: var(--g-edge-t);
  border-bottom-color: var(--g-edge-b); box-shadow: var(--el-1); }
.pf-nav-i { position: relative; display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 12px 0 var(--g-l); border: 0; background: transparent;
  font: 400 var(--fs-md)/16px var(--ui); color: var(--tx-3); text-align: left; white-space: nowrap; text-shadow: 1px 1px 0 #000; transition: color var(--hover), background var(--hover); }
.pf-nav-i .ic.ln, .pf-nav-i > svg { width: 14px; height: 14px; margin: 0; flex: none; color: var(--icon); transition: color var(--hover); }
.pf-nav-i:hover { color: var(--tx-2); background: rgba(255,255,255,.03); }
.pf-nav-i:hover .ic.ln, .pf-nav-i:hover > svg { color: var(--icon-hv); }
.pf-nav-i.on { color: var(--tx); background: linear-gradient(90deg, var(--tab-t), rgba(50,48,77,.35) 75%, transparent); }
.pf-nav-i.on::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--tick-on); }
.pf-nav-i.on .ic.ln, .pf-nav-i.on > svg { color: #EBD1EE; }
.pf-alerts .card-h > svg, .pf-ignc .card-h > svg { display: none; }
.pf-cards > .card.pf-danger { border-color: #4A2424; }
.pf-cards > .card.pf-danger > .card-h::before { background: linear-gradient(180deg, var(--err), #923131); }

.pf-p { font-size: var(--fs-base); line-height: 20px; color: var(--tx-2); }
.pf-lead { margin-bottom: 8px; }
.pf-form { display: flex; flex-direction: column; gap: 14px; }
.pf-form .fr2 .fl { width: 72px; }
.pf-foot { display: flex; align-items: center; gap: 12px; padding-top: 2px; font-size: var(--fs-md); color: var(--tx-3); }
.pf-busy { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-md); color: var(--tx-3); }

/* the account box: the face and the name, then the facts as label | value rows */
.pf-acct { display: flex; align-items: center; gap: 16px; padding-bottom: 16px; }
.pf-acct > .av { box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--e-line-2); }
.pf-acct-n { display: flex; align-items: center; gap: 8px; min-width: 0; font: 700 var(--fs-lg)/22px var(--ui); }
.pf-acct-n .who { font-weight: inherit; }
.pf-acct-n .badge.inline { margin-left: 0; }
.pf-acct-s { display: flex; align-items: center; gap: 8px; margin-top: 2px; font-size: var(--fs-md); }
.pf-dl { border-top: 1px solid #000; box-shadow: inset 0 1px 0 var(--e-hair); }
.pf-dt { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 10px 0; font-size: var(--fs-base); }
.pf-dt + .pf-dt { border-top: 1px solid var(--e-hair); }
.pf-dt:last-child { padding-bottom: 0; }
.pf-dt > .k { font-size: var(--fs-md); color: var(--tx-3); }
.pf-dt > .v { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; color: var(--tx); }
.pf-dt > .v.mono { font-size: var(--fs-md); color: var(--tx-2); }
.pf-dt-sub { flex-basis: 100%; font-size: var(--fs-md); line-height: 17px; color: var(--tx-3); }

/* the avatar box: the big preview in a well, the sizes it is shown at */
.pf-av { display: flex; gap: 20px; align-items: flex-start; }
.pf-av-prev { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: none; }
.pf-av-big { width: 96px; height: 96px; }
.pf-av-big > .av { box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--e-line-2), 0 10px 22px -10px rgba(0,0,0,.9); }
.pf-av-r { display: flex; flex-direction: column; gap: 12px; }
.pf-av-sizes { display: flex; flex-wrap: wrap; gap: 10px 24px; padding-top: 12px; border-top: 1px solid #000; box-shadow: inset 0 1px 0 var(--e-hair); }
.pf-av-sizes > div { display: flex; align-items: center; gap: 10px; font-size: var(--fs-md); color: var(--tx-3); }
.pf-av-sm { display: flex; align-items: center; gap: 8px; }

.pf-field { display: flex; flex-direction: column; gap: 6px; }
.pf-lab { display: flex; align-items: center; gap: 10px; min-height: 28px; font-size: var(--fs-md); color: var(--tx-2); }
.pf-prev { min-height: 40px; padding: 8px 10px; background: var(--s-well); border: 1px solid #000; box-shadow: inset 0 1px 3px rgba(0,0,0,.6), 0 1px 0 var(--bev-hi); }

/* a settings line: the title and a quiet note on the left, the control on the right */
.pf-opt { display: flex; align-items: center; gap: 16px; min-height: 40px; }
.pf-opt > .btn { flex: none; }
.pf-opt-t { font-size: var(--fs-base); line-height: 19px; color: var(--tx); }
.pf-opt-s { margin-top: 1px; font-size: var(--fs-md); line-height: 17px; color: var(--tx-3); }
.pf-opt + .msg-line { margin-top: 8px; }
.pf-opts > .pf-opt + .pf-opt { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--e-hair); }
.pf-opts.pf-tight > .pf-opt { min-height: 30px; }
.pf-opts.pf-tight > .pf-opt + .pf-opt { margin-top: 0; padding-top: 0; border-top: 0; }
.pf-opts.pf-sep { margin-top: 10px; padding-top: 12px; border-top: 1px solid #000; box-shadow: inset 0 1px 0 var(--e-hair); }
/* the ignore list */
.pf-ign { display: flex; flex-direction: column; margin-top: 10px; }
.pf-ign-r { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 0; animation: fade var(--panel); }
.pf-ign-r + .pf-ign-r { border-top: 1px solid var(--e-hair); }

/* your invitations: one row per code, the ones still to hand out first with their copy buttons */
.pf-inv { display: flex; flex-direction: column; margin-top: 10px; }
.pf-inv-r { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 0; }
.pf-inv-r + .pf-inv-r { border-top: 1px solid var(--e-hair); }
.pf-inv-r.off .pf-inv-c { color: var(--tx-3); }
.pf-inv-h { display: flex; align-items: center; gap: 10px; min-width: 0; height: 20px; }
.pf-inv-c { min-width: 0; font: 700 var(--fs-base)/20px var(--ui); letter-spacing: .05em; color: var(--tx); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-inv-s { display: flex; align-items: baseline; flex-wrap: wrap; margin-top: 2px; font-size: var(--fs-md); line-height: 18px; color: var(--tx-3); }
.pf-inv-a { display: flex; align-items: center; gap: 4px; flex: none; }
.pf-inv-empty { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--s-well); border: 1px solid #000;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.6), 0 1px 0 var(--bev-hi); }
.pf-inv-empty b { display: block; font: 700 var(--fs-md)/18px var(--ui); color: var(--tx-2); }
.pf-inv-empty span { display: block; font-size: var(--fs-md); line-height: 18px; color: var(--tx-3); }
.pf-inv-i { width: 32px; height: 32px; flex: none; display: grid; place-items: center; color: var(--tx-4); border: 1px solid #000;
  background: linear-gradient(180deg, #1D1D21, #151518); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.pf-inv-empty span.pf-inv-i { display: grid; }

/* ---------------------------------------------------------------- responsive */
@media (prefers-reduced-motion: reduce) { .uc { animation: none; } }
@media (max-width: 1100px) {
  .pf-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
}
@media (max-width: 1000px) {
  .pf-grid { grid-template-columns: minmax(0, 1fr); }
  .pf-set { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pf-navw { z-index: 4; margin: 0 calc(-1 * var(--pad)); padding: 8px var(--pad); background: linear-gradient(180deg, #111114, #0D0D10);
    border-bottom: 1px solid #000; box-shadow: 0 1px 0 var(--e-hair); }
  .pf-nav { flex-direction: row; overflow-x: auto; scrollbar-width: none; padding: 0; background: none; border: 0; box-shadow: none; }
  @supports not (animation-timeline: scroll()) {
    .pf-nav { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
  }
  .pf-nav::-webkit-scrollbar { display: none; }
  .pf-nav-i { flex: none; height: 30px; padding: 0 12px; }
  .pf-nav-i.on { background: var(--ac-grad) 0 100% / 100% 2px no-repeat, linear-gradient(180deg, var(--tab-t), var(--tab-b)); }
  .pf-nav-i.on::before { display: none; }
}
@media (max-width: 840px) {
  .pf-head > .card-b { padding: 14px var(--g-r) 14px var(--g-l); }
  .pf-hero { gap: 12px 14px; }
  .pf-face, .pf-hero > .pf-sk.av72 { width: 56px; height: 56px; }
  .pf-face > .av { width: 56px !important; height: 56px !important; }
  .pf-id { flex-basis: calc(100% - 72px); }
  .pf-nm { font-size: var(--fs-lg); line-height: 20px; }
  .pf-nums { flex: 1 1 100%; }
  .pf-acts { flex: 1 1 100%; }
  .pf-acts > .btn { flex: 1; }
  .pf-cform .err-line, .pf-cform .msg-line .tl { padding-left: 0; }
  .pf-crow > .av { display: none; }
  .pf-dt { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .pf-av { flex-direction: column; align-items: stretch; }
  .pf-av-prev { flex-direction: row; gap: 14px; }
  .pf-av-r .bar > .btn { flex: 1; }
  .pf-foot { flex-wrap: wrap; }
  .pf-foot > .btn { flex: 1 0 100%; }
  .pf-foot > .grow:empty { display: none; }
  .pf-opt { flex-wrap: wrap; }
  .pf-opt > .btn { flex: 1 0 100%; }
  .pf-inv-r { flex-wrap: wrap; row-gap: 8px; }
  .pf-inv-r > .grow { flex-basis: 100%; }
  .pf-inv-a { flex: 1 1 100%; }
  .pf-inv-a > .btn:not(.icon) { flex: 1; }
}