/* GayStash — public profile tabs and profile settings. The profile header
   itself lives in modern.css: a person and a community are the same shape
   of thing here. */

/* ── notify ─────────────────────────────────────────────────────
   The one toggle in .pro-acts that does not follow the row's rule. Follow,
   Join and Subscribe are invitations, so off is loud; this is a preference
   on a relationship you already have, so off is quiet and on is marked.
   Same specificity as the .pro-acts rule in modern.css, and this sheet
   loads after it — hence no !important and no extra class. */
.pro-acts .notify{width:38px;padding:0;flex:none}
.pro-acts .notify[aria-pressed=false]{background:var(--surface-2);color:var(--text-3)}
.pro-acts .notify[aria-pressed=false]:hover{background:var(--surface-3);color:var(--text)}
.pro-acts .notify[aria-pressed=true]{background:var(--surface-2);color:var(--accent)}
.pro-acts .notify[aria-pressed=true] .icon{fill:currentColor}
@media (pointer:coarse){.pro-acts .notify{width:44px}}

/* ── tab panes ──────────────────────────────────────────────────── */
/* One pane is rendered by the server from ?tab=; the rest carry `hidden` and
   the script swaps them. No animation between them — a tab swap that takes
   200ms to settle reads as a page load, which is the thing tabs avoid. */
.ptab[hidden]{display:none}

/* A line of orientation above a list, where the list alone would be
   ambiguous — what the order is, what the counts add up to. Not a lede:
   these are one sentence and they answer a question, not set a mood. */
.pnote{
  max-width:66ch;padding:0 14px 14px;
  font-size:13px;font-weight:500;line-height:1.55;color:var(--text-3);
}
.pnote b{color:var(--text-2);font-weight:700;font-variant-numeric:tabular-nums}

/* ── people and things you follow ───────────────────────────────── */
/* Deliberately not the .fol component from /following. That one is a feed —
   it carries three thumbnails per row because its job is to show what has
   arrived. A list of who someone follows is a list: identity, size, control. */
.prows{display:flex;flex-direction:column;padding:0 14px}
.prow{
  display:flex;align-items:center;gap:12px;min-width:0;
  padding:11px 0;border-top:1px solid var(--line);
}
.prow:first-child{border-top:0}

.prow .av{width:38px;height:38px;font-size:15px}
/* a collection leads with a scrap of what is in it rather than an initial */
.prow-cov{
  width:38px;height:38px;flex:none;border-radius:var(--r-sm);overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:1px;
  background:var(--surface-2);
}
.prow-cov span:not(.av){display:block}
.prow-cov.ptile{grid-template-columns:1fr;grid-template-rows:1fr}
.prow-hash{
  width:38px;height:38px;flex:none;border-radius:var(--r-sm);
  background:var(--surface-2);display:grid;place-items:center;
  font-size:17px;font-weight:800;color:var(--text-3);
}

.prow-b{flex:1;min-width:0}
.prow-b strong{
  display:block;font-size:14.5px;font-weight:700;letter-spacing:-.012em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.prow-b:hover strong{color:var(--accent)}
/* Direct child, and :not(.av). Descendant would also catch the .dot spans
   inside this line and turn every separator into its own row — which is what
   it did — and would reset an avatar's grid centring if one is ever nested
   here. Both guards are load-bearing. */
.prow-b > span:not(.av){
  display:block;padding-top:2px;
  font-size:12.5px;font-weight:500;line-height:1.4;color:var(--text-3);
}
.prow-b .dot{margin:0 5px}
.prow-b b{color:var(--text-2);font-weight:700;font-variant-numeric:tabular-nums}
.prow .btn{flex:none}

/* On a phone the sub-line runs to three lines and the rows stop being rows.
   One segment per row is marked as the one to lose — not always the last,
   because it isn't always the last that matters least: a stasher can drop
   "likes each", a follower drops their own follower count and keeps when
   they followed you. */
@media (max-width:699px){
  .prow-b .mq{display:none}
}

/* Following is the quiet state, Follow the loud one — inverted from the
   default, so a list of ten subscriptions isn't ten accent buttons. Driven
   off aria-pressed alone, with no class to keep in sync, so the toggle
   script only has to set the attribute it was already setting. */
.prow .btn[aria-pressed=true]{background:var(--surface-2);color:var(--text-2)}
.prow .btn[aria-pressed=true]:hover{background:var(--surface-3);color:var(--text)}
.prow .btn[aria-pressed=false]{background:var(--accent);color:var(--accent-ink)}
.prow .btn[aria-pressed=false]:hover{filter:brightness(1.08)}

/* the long tail: most followers have never stashed anything. Shown, but not
   competing with the ones worth a click. */
.prow.thin strong{color:var(--text-2);font-weight:600}
.prow.thin .av{opacity:.6}

.pmore{padding:16px 14px 0}

/* ── which record ───────────────────────────────────────────────
   A page loses the one thing an inline form had for free: you can no
   longer see what you're editing. This buys it back for 60px rather than
   re-rendering the poster — the cover, the title as it stands, and the two
   facts that identify the record. It is not a link; you are already here. */
.sid{
  display:flex;align-items:center;gap:13px;min-width:0;
  padding:12px;margin-bottom:14px;
  background:var(--surface);border-radius:var(--r-md);
}
.sid-cov{width:86px;aspect-ratio:16/9;flex:none;border-radius:var(--r-sm)}
.sid-b{min-width:0}
.sid-b strong{
  display:block;font-size:14.5px;font-weight:700;letter-spacing:-.012em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.sid-b > span{
  display:block;padding-top:3px;
  font-size:12.5px;font-weight:500;color:var(--text-3);
}
.sid-b .dot{margin:0 5px}

/* the link as it stands — monospace, because it is an address and you are
   about to compare it with another one */
.e-cur{
  padding:11px 13px;border-radius:var(--r-sm);background:var(--bg);
  font:600 13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--text-3);word-break:break-all;
}
.e-cur b{color:var(--text-2)}

/* a file input wearing a link's clothes */
.up{color:var(--accent);font-weight:700;cursor:pointer}

/* ── edit form ──────────────────────────────────────────────────── */
/* one column, not two: every field here is about the same person, and a
   second column would only be filled with explanation nobody reads */
.pedit{max-width:640px;margin:0 auto;padding:14px 14px 30px}
/* selects match the text fields — same box, same border, same focus */
.fld select{
  width:100%;padding:11px 13px;border-radius:var(--r-sm);
  background:var(--bg);border:1px solid var(--line-2);
  font-size:14.5px;font-weight:500;color:var(--text);
}
.fld select:focus{border-color:var(--accent);outline:none}
.pane + .pane{margin-top:14px}
.pane > h2{font-size:16px;line-height:1.3}
.pane > h2 + p{font-size:13px;font-weight:500;color:var(--text-3);padding-top:4px}

.avset{display:flex;align-items:center;gap:15px;padding-top:16px}
.avset .pro-av{
  width:72px;height:72px;font-size:29px;flex:none;
  background-size:cover;background-position:center;
}
.avset-acts{display:flex;flex-wrap:wrap;gap:8px}
/* the label is the control, so it needs the button's pointer not a caret */
.avset-acts label.btn{cursor:pointer}

/* With a photo the letter has to go, or it sits on top of the face. Driven
   off data-a rather than a class the script has to keep in sync — same
   reason the follow buttons run off aria-pressed. */
.avset[data-a="1"] .pro-av{color:transparent;background-color:var(--surface-2)}
.avset[data-a="0"] #av-rm{display:none}

/* ── banner upload ───────────────────────────────────────────────
   Same shape as .avset — a preview and the two things you can do to it —
   but stacked rather than side by side, because the preview is the width
   of the form and there is nothing to sit beside it. Shown at the ratio it
   will actually be cropped to, so a moderator finds out here that their
   portrait photo loses its top and bottom, not after saving. */
.bset{padding-top:16px}
/* No background here. This sheet loads after modern.css, so a background on
   .bprev out-orders the .t1–.t8 image classes at equal specificity and every
   preview renders as an empty grey box. The empty state below owns the
   placeholder instead. */
.bprev{display:block;width:100%;aspect-ratio:5/1;border-radius:var(--r-md)}
.bprev i{display:none}
.bset-acts{display:flex;flex-wrap:wrap;gap:8px;padding-top:11px}
/* a file input inside a label — the label is the control, so it needs the
   button's pointer rather than a text caret */
.bset-acts label.btn{cursor:pointer}

/* No banner is the common state, so it is a state and not a broken one: an
   outline at the size the strip will be, saying what it is. Nothing to
   remove, so nothing offers to. */
.bset[data-b="0"] .bprev{
  background:transparent;box-shadow:inset 0 0 0 1px var(--line-2);
  display:grid;place-items:center;
}
.bset[data-b="0"] .bprev i{
  display:block;font-style:normal;
  font-size:13px;font-weight:600;color:var(--text-3);
}
.bset[data-b="0"] #cban-rm{display:none}

/* radios as rows, so the choice and its consequence read together */
.opt2{display:flex;align-items:flex-start;gap:11px;padding:12px 0;border-top:1px solid var(--line)}
.opt2:first-of-type{border-top:0}
.opt2 input{
  appearance:none;width:18px;height:18px;flex:none;margin:2px 0 0;
  border:2px solid var(--line-2);border-radius:50%;
}
.opt2 input:checked{border-color:var(--accent);border-width:5.5px}
.opt2 span:not(.av){display:block;font-size:14.5px;font-weight:700}
.opt2 em{display:block;font-style:normal;font-size:13px;font-weight:500;color:var(--text-3);line-height:1.5;padding-top:2px}

/* ── danger zone ────────────────────────────────────────────────── */
/* No coloured border round the panel — the heading says what it is and the
   outlined button is the only red thing on the page. Deleting is gated on
   typing the username: the archive is shared, so a slip here is lossy for
   other people's collections, not just this account. */
.danger ul{margin:0;padding:12px 0 0 19px;font-size:13.5px;font-weight:500;color:var(--text-2);line-height:1.7}
.danger .keep{
  margin-top:14px;padding-top:13px;border-top:1px solid var(--line);
  font-size:13px;font-weight:500;color:var(--text-3);line-height:1.55;
}
.danger .keep b{color:var(--text-2);font-weight:700}
/* .btn-danger moved to modern.css — it is a button variant, not a
   profile-settings thing, and two page sheets were carrying it. */

/* one save control, at the end, always reachable */
/* "Always reachable" was not true on a phone. .tabs is fixed to the bottom
   at z-index 30; a sticky bar at bottom:0 with z-index 10 pins to the same
   edge and goes underneath it, so Save sat behind the nav on all three
   edit pages. .main's padding-bottom reserves room for the bar in normal
   flow, but sticky positions against the viewport, not that reserve. */
.savebar{
  position:sticky;bottom:calc(58px + env(safe-area-inset-bottom));z-index:10;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:14px;padding:14px;
  background:var(--surface);border-radius:var(--r-lg);
}
.savebar p{flex:1;min-width:180px;font-size:13px;font-weight:500;color:var(--text-3)}

/* Below ~560 the message and both buttons can't share a row, and wrapping
   left Save stranded on a line of its own away from Discard. The message
   takes the whole first row instead, so the two buttons stay together. */
@media (max-width:559px){
  .savebar p{flex:1 0 100%;min-width:0}
  .savebar .btn{flex:1}
}

/* the tab bar is gone from tablet up, so the bar goes back to the edge */
@media (min-width:700px){
  .savebar{bottom:0}
}

@media (min-width:1000px){
  .pro{padding:28px 22px 0;gap:16px}
  .pro-av{width:72px;height:72px;font-size:29px}
  .stats{padding:14px 22px 0}
  .pempty{padding:40px 22px 46px}
  .pedit{padding:22px 22px 34px}
  .pnote{padding:0 22px 16px}
  /* capped, not full width: a 1600px row puts the follow button a screen
     away from the name it belongs to */
  .prows{padding:0 22px;max-width:820px}
  .prow{padding:13px 0}
  .pmore{padding:18px 22px 0}
}