/* prim.place base styles. Early-2000s social network look. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #e5e5e5; color: #000; font: 13px/1.4 Verdana, Arial, Helvetica, sans-serif; }
a { color: #003399; }
a:hover { color: #cc0000; }

/* Everything a supporter's CSS can style lives in #page; their selectors are
   all rewritten to start there. These pins out-rank anything they can write
   (html > body > #page beats #page, and both are !important), so #page is
   always its own stacking context under the safety bar. */
html > body > #page { position: relative !important; z-index: 0 !important; isolation: isolate !important; }
html > body > #page { padding-bottom: 48px !important; } /* room for the safety bar, in the member's own background */
#page { min-height: 100vh; background: #e5e5e5; }
#page .container { max-width: 820px; margin: 0 auto; }

nav .top { background: #003399; color: #fff; padding: 12px 10px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
nav .top .left { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
nav .top .right { margin-left: auto; font-size: 11px; }
nav .top a { color: #fff; }
nav .logo { font: bold 26px Arial, sans-serif; text-decoration: none; letter-spacing: -1px; }
nav .tag { color: #b3c7ff; font-size: 11px; }
nav ul.links { list-style: none; margin: 0; padding: 5px 10px; background: #6698cb; border-bottom: 1px solid #335f99; font-size: 11px; display: flex; flex-wrap: wrap; }
nav ul.links li:not(:last-child)::after { content: "|"; padding: 0 4px; color: #fff; } /* SpaceHey's own rule, so layouts that restyle it replace it */
nav ul.links a, nav ul.links .linkbtn { color: #fff; font-weight: bold; text-decoration: none; font-size: 11px; }
nav ul.links a:hover, nav ul.links .linkbtn:hover { text-decoration: underline; }

main { display: block; background: #fff; padding: 12px 10px 20px; min-height: 60vh; }
footer { font-size: 10px; color: #666; text-align: center; padding: 10px; }
footer p { margin: 0; }

/* The safety bar: site-owned, outside #page, unreachable by member CSS. */
html > body > #safety {
  position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
  z-index: 2147483647 !important; display: flex !important; visibility: visible !important; opacity: 1 !important;
  transform: none !important; filter: none !important; pointer-events: auto !important;
  align-items: center; gap: 12px; flex-wrap: wrap; min-height: 34px; padding: 5px 12px; margin: 0;
  background: #1d1d1d !important; color: #eee !important; border-top: 2px solid #ff6600 !important;
  font: 12px/1.3 Verdana, Arial, sans-serif !important; text-align: left; box-shadow: 0 -2px 6px rgba(0,0,0,.3);
}
#safety a { color: #ffcc99 !important; }
#safety .sb-site { font-weight: bold; color: #fff !important; text-decoration: none; }
#safety .sb-who { color: #ccc; overflow-wrap: anywhere; }
#safety .sb-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
#safety form { display: inline; margin: 0; }
#safety button { font: bold 11px Verdana, sans-serif; background: #444; color: #fff; border: 1px solid #777; padding: 2px 8px; cursor: pointer; }

.cols { display: flex; gap: 12px; align-items: flex-start; }
.col-main { flex: 1 1 auto; min-width: 0; }
.col-side { flex: 0 0 250px; }
@media (max-width: 640px) { .cols { flex-direction: column; } .col-side { flex-basis: auto; width: 100%; } }

.box { border: 1px solid #6698cb; margin-bottom: 12px; background: #fff; }
.box.narrow { max-width: 460px; margin: 20px auto; }
.box-head { background: #6698cb; color: #fff; font-weight: bold; padding: 3px 6px; font-size: 12px; }
.box-head .head-link { float: right; color: #fff; font-weight: normal; font-size: 10px; }
.box-body { padding: 8px; }
.box.alert { border-color: #ff6600; }
.box.alert .box-head { background: #ff6600; }

form.stack { display: flex; flex-direction: column; gap: 8px; }
form.stack label { display: flex; flex-direction: column; gap: 2px; font-weight: bold; font-size: 11px; }
form.inline { display: inline; margin: 0; }
input, textarea, select { font: 12px Verdana, sans-serif; padding: 3px; border: 1px solid #7f9db9; width: 100%; }
select { width: auto; }
button { font: bold 11px Verdana, sans-serif; background: #ff6600; color: #fff; border: 1px solid #cc5200; padding: 3px 10px; cursor: pointer; align-self: flex-start; }
button.secondary { background: #eee; color: #333; border-color: #999; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.mono, code { font-family: Menlo, Consolas, monospace; font-size: 12px; }
pre.mono { white-space: pre-wrap; background: #f4f4f4; padding: 6px; }
.err { color: #cc0000; font-weight: bold; }
.ok { color: #227700; font-weight: bold; }
small { font-weight: normal; color: #666; }

.grid8 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 6px; }
.friend { display: flex; flex-direction: column; align-items: center; text-decoration: none; font-size: 11px; text-align: center; overflow-wrap: anywhere; }
.friend .pic { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; background: #c3d3e8; color: #003399; font: bold 32px Arial, sans-serif; border: 1px solid #6698cb; margin-bottom: 3px; }

table.bulletins, table.list { width: 100%; border-collapse: collapse; font-size: 11px; }
table.bulletins th { background: #c3d3e8; text-align: left; padding: 3px; }
table.bulletins td, table.list td { padding: 4px 3px; border-bottom: 1px solid #ddd; vertical-align: top; }
table.bulletins td.date { white-space: nowrap; color: #666; }
table.list td.actions { text-align: right; white-space: nowrap; }
table.kv th { text-align: right; padding-right: 8px; color: #666; font-weight: normal; }
.text { white-space: pre-wrap; overflow-wrap: anywhere; }
.bulletin-body { border-top: 1px solid #ddd; margin: 10px 0; padding-top: 10px; }
ul.links { margin: 0; padding-left: 18px; }
.profile-pic { display: inline-flex; align-items: center; justify-content: center; width: 150px; height: 150px; flex: 0 0 150px; background: #c3d3e8; color: #003399; font: bold 72px Arial, sans-serif; border: 1px solid #6698cb; }
.profile-pic.small { width: 90px; height: 90px; flex-basis: 90px; font-size: 40px; }
.top8-edit { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px; margin-bottom: 10px; }
.top8-edit label { font-size: 11px; font-weight: bold; }

/* ---- profile ---- */
#profile { display: flex; gap: 12px; align-items: flex-start; padding: 4px; }
#profile > .profile { width: 100%; }
#profile .profile-left { flex: 0 0 300px; min-width: 0; }
#profile .profile-right { flex: 1 1 auto; min-width: 0; }
#profile .username { color: #666; font-size: 11px; margin-bottom: 6px; }
#profile .profile-card { display: flex; gap: 8px; margin: 6px 0 12px; }
#profile .profile-info p { margin: 0 0 6px; font-size: 11px; }
#profile .headline { font-style: italic; }
#profile .box-head { background: #ffcc99; color: #ff6600; }
#profile .box { border-color: #ffcc99; }
@media (max-width: 640px) { #profile { flex-direction: column; } #profile .profile-left { flex-basis: auto; width: 100%; } }
#profile .comment-form { margin-bottom: 8px; }
button.small { font-size: 10px; padding: 1px 6px; margin-top: 4px; }
.badge { background: #ff6600; color: #fff; border-radius: 8px; padding: 0 5px; font-size: 10px; }
table.mail tr.unread td { font-weight: bold; background: #fff7ef; }
.tabs { font-size: 11px; margin: 0 0 8px; }
.msg-actions { display: flex; gap: 8px; align-items: center; }
a.btnlink { font: bold 11px Verdana, sans-serif; background: #ff6600; color: #fff; border: 1px solid #cc5200; padding: 3px 10px; text-decoration: none; }
#profile .supporter { display: inline-block; font-size: 10px; font-weight: bold; color: #fff; background: #ff6600; border: 1px solid #cc5200; padding: 1px 6px; margin: 0 0 6px; }
#profile .supporter.permanent { background: #6a2c91; border-color: #4b1f68; }
.handle { color: #666; font-weight: normal; }
.friend .handle { display: block; font-size: 10px; }
#profile .supporter.staffbadge { background: #003399; border-color: #002266; }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-bottom: 12px; }
.admin-grid .box { margin: 0; }
table.kv td, table.kv th { vertical-align: top; padding: 2px 4px; }
.warn { color: #cc0000; font-weight: bold; }
form.row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 4px 0; }
form.row input[type=text], form.row input:not([type]) { width: auto; flex: 1 1 160px; }
.small-text { font-size: 11px; }
.comment-row { border-top: 1px solid #ddd; padding: 6px 0; }
.comment-row .text { margin: 2px 0 4px; }
/* ---- blog ---- */
#profile.blog { flex-direction: column; align-items: stretch; }
#profile.blog .profile .left { flex: 0 0 220px; }
#profile.blog .general-about .pfp-fallback { width: 90px; font-size: 40px; }
#profile.blog .general-about a { text-decoration: none; }
#profile .blog-bar { margin-bottom: 0; }
#profile .blog-bar .inner { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px; padding: 0; }
#profile .blog-entry { border: 1px solid #ffcc99; padding: 10px; margin-bottom: 12px; } /* no background, so a supporter's profile colours carry through */
#profile .blog-date { font-weight: bold; font-size: 12px; border-bottom: 1px dotted #ccc; padding-bottom: 3px; margin-bottom: 6px; }
#profile .blog-subject { margin: 0 0 4px; font-size: 15px; }
#profile .blog-subject a { color: #ff6600; text-decoration: none; }
#profile .privacy { font-size: 10px; font-weight: normal; background: #eee; color: #555; padding: 1px 5px; margin-left: 6px; vertical-align: middle; }
#profile .blog-meta { font-size: 11px; display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
#profile .blog-body { overflow-wrap: anywhere; line-height: 1.5; }
#profile .blog-body blockquote { border-left: 3px solid #ffcc99; margin: 6px 0; padding-left: 10px; opacity: .85; } /* inherits the page's text colour */
#profile .blog-body pre { white-space: pre-wrap; background: rgba(127, 127, 127, .12); padding: 6px; }
#profile .blog-currently { font-size: 11px; background: rgba(255, 153, 51, .08); border: 1px dashed #ffcc99; padding: 6px; margin-top: 10px; }
#profile .blog-footer { font-size: 10px; color: #666; margin-top: 8px; border-top: 1px dotted #ccc; padding-top: 4px; }
#profile .blog-actions { display: flex; gap: 8px; align-items: center; margin: -4px 0 12px; }
#profile .blog-pages { display: flex; justify-content: space-between; }
#profile .blog-filter { font-size: 11px; }
#profile.blog-single .profile .right { flex: 1 1 100%; }
form.stack label.check { flex-direction: row; align-items: center; gap: 6px; font-weight: normal; }
form.stack label.check input { width: auto; }
fieldset.currently { border: 1px solid #c3d3e8; display: flex; flex-direction: column; gap: 6px; }
fieldset.currently label { display: flex; flex-direction: column; font-size: 11px; font-weight: bold; }
a.profile-pic { text-decoration: none; }
.blog-pages { display: flex; justify-content: space-between; }
.blog-cats li { margin-bottom: 2px; }
.join .steps { margin: 0 0 10px; padding-left: 20px; }
.join .steps li { margin-bottom: 4px; }
.hint { font-size: 11px; color: #555; margin: 0; }
a.btnlink.bigbtn, button.bigbtn { font-size: 13px; padding: 6px 16px; display: inline-block; }
.login-help { margin-top: 8px; }

/* ---- profile page: SpaceHey markup, MySpace look ---- */
#profile .profile { flex: 1 1 auto; min-width: 0; display: flex; gap: 14px; align-items: flex-start; }
#profile .profile .left { flex: 0 0 40%; min-width: 0; }
#profile .profile .right { flex: 1 1 auto; min-width: 0; }
#profile .profile h1 { font-size: 20px; margin: 0; }
#profile .profile .username { color: #666; font-size: 11px; }
#profile .profile p { margin: 0 0 4px; }
#profile .general-about { display: flex; gap: 10px; margin: 8px 0; }
#profile .general-about .profile-pic { display: block; width: auto; height: auto; flex: 0 0 auto; background: none; border: 0; }
#profile .pfp-fallback { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; background: #c3d3e8; color: #003399; font: bold 32px Arial, sans-serif; border: 1px solid #6698cb; }
#profile .general-about .pfp-fallback { width: 150px; font-size: 72px; }
#profile .details { font-size: 11px; min-width: 0; overflow-wrap: anywhere; }
#profile .headline { font-style: italic; }
#profile .mood { font-size: 11px; margin-bottom: 10px; }
#profile .heading { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 3px 6px; background: #6698cb; }
#profile .heading h4 { margin: 0; font-size: 12px; color: #fff; }
#profile .heading .more { font-size: 10px; color: inherit; }
#profile .inner { padding: 6px; }
#profile .contact, #profile .table-section { border: 1px solid #6698cb; margin-bottom: 10px; }
#profile .f-row { display: flex; gap: 6px; }
#profile .f-col { flex: 1 1 50%; font-size: 11px; }
#profile .f-col .linkbtn { color: #003399; text-decoration: underline; font-size: 11px; }
#profile .url-info { border: 1px solid #000; padding: 4px 6px; margin-bottom: 10px; font-size: 11px; overflow-wrap: anywhere; }
#profile .details-table { width: 100%; font-size: 11px; }
#profile .details-table td { vertical-align: top; padding: 3px; }
#profile .details-table td:first-child { width: 30%; background: #b1d0f0; color: #336699; font-weight: bold; }
#profile .details-table td:last-child { background: #d5e8fb; overflow-wrap: anywhere; }
#profile .profile-info { border: 1px solid #000; padding: 4px 8px; margin-bottom: 10px; }
#profile .profile-info h3 { margin: 4px 0; font-size: 15px; }
#profile .blog-preview { margin-bottom: 10px; font-size: 11px; }
#profile .blog-preview h4 { margin: 0 0 4px; font-size: 12px; }
#profile .blurbs, #profile .friends { margin-bottom: 10px; }
#profile .blurbs .heading, #profile .friends .heading { background: #ffcc99; }
#profile .blurbs .heading h4, #profile .friends .heading h4 { color: #ff6600; }
#profile .blurbs .section h4 { color: #ff6600; margin: 6px 0 2px; font-size: 12px; }
#profile .friends-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 6px; }
#profile .person { text-align: center; font-size: 11px; overflow-wrap: anywhere; }
#profile .person a { text-decoration: none; }
#profile .person p { margin: 0 0 2px; }
#profile .person .handle { display: block; font-size: 10px; }
#profile .friends-grid .pfp-fallback { width: 72px; margin: 2px auto 0; }
#profile .comments-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
#profile .comments-table td { vertical-align: top; padding: 6px; border: 1px solid #fff; }
#profile .comments-table td:first-child { width: 100px; background: #ffcc99; }
#profile .comments-table td:last-child { background: #fff3e6; min-width: 0; overflow-wrap: anywhere; }
#profile .comments-table .pfp-fallback { width: 72px; margin: 2px auto 0; }
@media (max-width: 640px) { #profile .profile { flex-direction: column; align-items: stretch; width: 100%; } #profile .profile .left { flex-basis: auto; width: 100%; } }
fieldset.details-edit { border: 1px solid #c3d3e8; display: flex; flex-direction: column; gap: 6px; }
fieldset.details-edit legend { font-weight: bold; font-size: 12px; }
#profile .comment { display: flex; gap: 10px; border-top: 1px solid #ffcc99; padding: 8px 0; }
#profile .comment-author { flex: 0 0 90px; }
#profile .comment-main { flex: 1 1 auto; min-width: 0; }
#profile .comment-date { font-size: 10px; color: #666; font-weight: bold; margin-bottom: 4px; }
/* media players (htmlsan/embed.go) */
.embed { display: inline-block; max-width: 100%; vertical-align: top; }
.embed iframe { display: block; max-width: 100%; border: 0; }
#profile .blurbs .html { overflow-wrap: anywhere; }
form.row input.short { flex: 0 0 6em; width: 6em; }
/* profile pictures: SL pictures are 4:3, shown square, cropped to fill */
img.pfp, img.pic { display: block; object-fit: cover; padding: 0; }
.profile-pic.small { overflow: hidden; }
.profile-pic.small img.pfp { width: 100%; height: 100%; min-width: 0; min-height: 0; aspect-ratio: auto; border: 0; } /* a flex item won't shrink below the image's own size without min-width: 0 */
.friend img.pic { width: 72px; height: 72px; border: 1px solid #6698cb; margin-bottom: 3px; }
.pic-row { display: flex; gap: 12px; align-items: flex-start; }
.pic-row p { margin-top: 0; }