/* Profiles (#70, D60): one fixed layout, eight themes, and a member's own CSS nested under .pf-custom (served as
   /@handle/profile.css). Theme variables are set on .pf; everything below reads them. */
.pf { --pf-bg: #fff; --pf-fg: #000; --pf-box: #fff; --pf-box-border: #8aa6c7; --pf-bar: #6699cc; --pf-bar-fg: #fff; --pf-link: #003399; --pf-dim: #666; --pf-head: #d5e4f7; --pf-font: Verdana, Arial, sans-serif; --pf-head-font: Verdana, Arial, sans-serif; --pf-radius: 0; --pf-shadow: none; --pf-pattern: none;
  background: var(--pf-bg); background-image: var(--pf-pattern); color: var(--pf-fg); font: 13px/1.5 var(--pf-font); border: 1px solid var(--pf-box-border); border-radius: var(--pf-radius); box-shadow: var(--pf-shadow), 0 0 24px rgba(11, 222, 251, .3); margin: 4px 0 24px; padding: 14px; }
.pf a { color: var(--pf-link); } .pf .dim { color: var(--pf-dim); }
.pf-head { display: flex; gap: 16px; align-items: flex-start; background: var(--pf-head); border: 1px solid var(--pf-box-border); border-radius: var(--pf-radius); padding: 12px; margin: 0 0 12px; }
.pf-dp { width: 120px; height: 120px; border: 2px solid var(--pf-box-border); background: #fff; object-fit: cover; flex: none; }
.pf-id { min-width: 0; flex: 1; } .pf-id h1 { margin: 0; font: bold 24px var(--pf-head-font); color: var(--pf-fg); overflow-wrap: anywhere; }
.pf-handle { margin: 2px 0; color: var(--pf-dim); } .pf-tagline { font-style: italic; } .pf-mood { margin: 6px 0; font-size: 15px; } .pf-status { margin: 2px 0 8px; color: var(--pf-dim); }
.pf-st { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #999; vertical-align: middle; } .pf-st-online, .pf-person-st.pf-st-online { background: #2ecc40; } .pf-st-away, .pf-person-st.pf-st-away { background: #ffb400; } .pf-st-busy, .pf-person-st.pf-st-busy { background: #e03030; }
.pf-buttons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .pf-friend { font-weight: bold; color: var(--pf-link); }
.pf-cols { display: grid; grid-template-columns: 300px 1fr; gap: 12px; } .pf-left, .pf-right { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.pf-box { background: var(--pf-box); border: 1px solid var(--pf-box-border); border-radius: var(--pf-radius); overflow: hidden; }
.pf-box h3 { margin: 0; background: var(--pf-bar); color: var(--pf-bar-fg); font: bold 13px var(--pf-head-font); padding: 4px 8px; } .pf-box h3 .dim { color: inherit; opacity: .75; }
.pf-box > :not(h3) { margin: 8px; } .pf-box p { margin: 0 0 6px; } .pf-text p { overflow-wrap: anywhere; }
.pf-details table { border-collapse: collapse; width: calc(100% - 16px); } .pf-details th { text-align: left; color: var(--pf-dim); font-weight: normal; padding: 2px 8px 2px 0; width: 38%; vertical-align: top; } .pf-details td { padding: 2px 0; overflow-wrap: anywhere; }
.pf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .pf-grid.small { grid-template-columns: repeat(6, 1fr); }
.pf-person { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; text-decoration: none; font-size: 11px; position: relative; padding: 4px; border: 1px solid transparent; }
.pf-person:hover { border-color: var(--pf-box-border); background: var(--pf-head); } .pf-person img { width: 48px; height: 48px; object-fit: cover; border: 1px solid var(--pf-box-border); background: #fff; } .pf-grid.small .pf-person img { width: 40px; height: 40px; }
.pf-person-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pf-person-st { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: #999; border: 1px solid #fff; }
.pf-site-link { display: block; text-decoration: none; } .pf-site-title { display: block; font-weight: bold; font-size: 15px; }
.pf-wallform { display: flex; gap: 6px; align-items: flex-start; } .pf-wallform textarea { flex: 1; min-width: 0; font: inherit; padding: 4px 6px; border: 1px solid var(--pf-box-border); background: #fff; color: #000; }
.pf-notes { list-style: none; padding: 0; } .pf-note { display: flex; gap: 8px; padding: 6px 0; border-top: 1px dotted var(--pf-box-border); } .pf-note img { width: 40px; height: 40px; flex: none; border: 1px solid var(--pf-box-border); background: #fff; } .pf-note > div { min-width: 0; flex: 1; } .pf-note p { margin: 2px 0; overflow-wrap: anywhere; }
.pf-x { border: 0; background: none; color: var(--pf-dim); font: bold 14px/1 sans-serif; cursor: pointer; padding: 0 4px; } .pf-report { font-size: 11px; }
.pf-tl { list-style: none; padding: 0; } .pf-tl li { padding: 3px 0; border-top: 1px dotted var(--pf-box-border); display: flex; gap: 8px; align-items: baseline; } .pf-tl-ico { width: 1.4em; text-align: center; } .pf-tl-when { color: var(--pf-dim); font-family: 'Courier New', monospace; font-size: 12px; white-space: nowrap; }
.pf-player audio { width: 100%; } .pf-player iframe { border: 1px solid var(--pf-box-border); display: block; } .pf-song-title { margin: 4px 0 0; font-size: 12px; }
.pf-foot { margin: 12px 0 0; font-size: 11px; text-align: right; } .pf-flash { margin: 0 0 10px; }
.pf-linked a { margin-right: 4px; }
/* ---- themes ---- */
.pf-theme-classic { --pf-bg: #fff; --pf-head: #d5e4f7; --pf-bar: #6699cc; --pf-box-border: #8aa6c7; --pf-link: #003399; }
.pf-theme-midnight { --pf-bg: #050816; --pf-fg: #e8ecff; --pf-box: #0c1226; --pf-box-border: #2a3a7a; --pf-bar: #1b2a6b; --pf-bar-fg: #cfe0ff; --pf-link: #8fb8ff; --pf-dim: #8c96c4; --pf-head: #0a1030; --pf-shadow: 0 0 30px rgba(80, 120, 255, .35); --pf-pattern: radial-gradient(circle at 20% 10%, rgba(255,255,255,.15) 0 1px, transparent 2px), radial-gradient(circle at 70% 60%, rgba(255,255,255,.12) 0 1px, transparent 2px), radial-gradient(circle at 40% 85%, rgba(255,255,255,.1) 0 1px, transparent 2px); }
.pf-theme-bubblegum { --pf-bg: #ffd6ec; --pf-fg: #4a1038; --pf-box: #fff0f8; --pf-box-border: #ff7ac6; --pf-bar: #ff4fb3; --pf-bar-fg: #fff; --pf-link: #c2007a; --pf-dim: #9a5b85; --pf-head: #ffe3f3; --pf-radius: 12px; --pf-font: 'Comic Sans MS', 'Comic Neue', Verdana, sans-serif; --pf-head-font: 'Comic Sans MS', 'Comic Neue', Verdana, sans-serif; --pf-pattern: radial-gradient(circle at 10% 20%, rgba(255,255,255,.6) 0 2px, transparent 3px), radial-gradient(circle at 80% 70%, rgba(255,255,255,.6) 0 2px, transparent 3px); }
.pf-theme-terminal { --pf-bg: #000; --pf-fg: #39ff8a; --pf-box: #000; --pf-box-border: #1d6b3e; --pf-bar: #0b3d20; --pf-bar-fg: #7fffb0; --pf-link: #9cffd0; --pf-dim: #2faa66; --pf-head: #031a0c; --pf-font: 'Courier New', ui-monospace, monospace; --pf-head-font: 'Courier New', ui-monospace, monospace; --pf-shadow: inset 0 0 40px rgba(0, 255, 120, .08); }
.pf-theme-terminal .pf-dp, .pf-theme-terminal .pf-person img, .pf-theme-terminal .pf-note img { filter: grayscale(1) sepia(1) hue-rotate(80deg) saturate(3); }
.pf-theme-paper { --pf-bg: #f6f0dc; --pf-fg: #2b2416; --pf-box: #fffbef; --pf-box-border: #c9b98a; --pf-bar: #e8dcb8; --pf-bar-fg: #3a2f14; --pf-link: #7a4a00; --pf-dim: #8a7b57; --pf-head: #f1e7c8; --pf-font: Georgia, 'Times New Roman', serif; --pf-head-font: Georgia, serif; --pf-pattern: repeating-linear-gradient(0deg, transparent 0 23px, rgba(120, 90, 30, .12) 23px 24px); }
.pf-theme-chrome { --pf-bg: linear-gradient(180deg, #e8eef7, #b9c6d8); --pf-fg: #0a1a33; --pf-box: #f4f7fb; --pf-box-border: #7f8fa6; --pf-bar: linear-gradient(180deg, #ffffff, #9fb3cc 60%, #6b7f99); --pf-bar-fg: #0a1a33; --pf-link: #0033aa; --pf-dim: #5b6a80; --pf-head: linear-gradient(135deg, #ffffff, #c7d3e3 50%, #ffffff); --pf-radius: 8px; --pf-shadow: 0 6px 20px rgba(0, 20, 60, .3); }
.pf-theme-chrome .pf-box h3 { text-shadow: 0 1px 0 #fff; } .pf-theme-chrome .pf-box, .pf-theme-chrome .pf-head { box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(0,0,0,.2); }
.pf-theme-goth { --pf-bg: #0b0210; --pf-fg: #d9c7e8; --pf-box: #140420; --pf-box-border: #5a1a7a; --pf-bar: #3b0a5c; --pf-bar-fg: #e7c8ff; --pf-link: #d08cff; --pf-dim: #8c6aa8; --pf-head: #1c0630; --pf-font: Georgia, serif; --pf-head-font: 'Palatino Linotype', Georgia, serif; --pf-shadow: 0 0 30px rgba(160, 60, 255, .35); }
.pf-theme-goth .pf-box h3 { letter-spacing: .08em; text-transform: uppercase; }
.pf-theme-arcade { --pf-bg: #0a0a0a; --pf-fg: #f0f0f0; --pf-box: #111; --pf-box-border: #ff2bd6; --pf-bar: linear-gradient(90deg, #ff2bd6, #0bdefb); --pf-bar-fg: #000; --pf-link: #0bdefb; --pf-dim: #9a9a9a; --pf-head: #15151c; --pf-font: 'Trebuchet MS', Verdana, sans-serif; --pf-head-font: Impact, 'Arial Black', sans-serif; --pf-pattern: repeating-conic-gradient(#0f0f0f 0 25%, #151515 0 50%); background-size: 24px 24px; --pf-shadow: 0 0 20px rgba(255, 43, 214, .4); }
.pf-theme-arcade .pf-id h1 { letter-spacing: .04em; text-transform: uppercase; }
/* the edit page */
.pf-editform textarea, .pf-editform select { width: 100%; box-sizing: border-box; } .pf-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 10px; } .pf-pick label { display: flex; align-items: center; gap: 6px; } .pf-pick img { border: 1px solid #555; }
@media (max-width: 760px) { .pf-cols { grid-template-columns: 1fr; } .pf-head { flex-direction: column; align-items: center; text-align: center; } .pf-buttons { justify-content: center; } .pf-grid { grid-template-columns: repeat(4, 1fr); } .pf-grid.small { grid-template-columns: repeat(4, 1fr); } }
/* Frames from the nux store (#77) around the picture. */
.pf-frame-gold .pf-dp { outline: 4px solid #e8c547; outline-offset: 2px; box-shadow: 0 0 16px rgba(232, 197, 71, .6); }
.pf-frame-neon .pf-dp { outline: 3px solid var(--nx-magenta); outline-offset: 3px; animation: nu-hum 2.4s ease-in-out infinite; }
@keyframes nu-hum { 0%, 100% { box-shadow: 0 0 18px var(--nx-magenta); } 50% { box-shadow: 0 0 26px var(--nx-cyan); } }
.pf-frame-film .pf-dp { outline: 6px solid #111; border-left: 10px dashed #eee; border-right: 10px dashed #eee; box-sizing: border-box; }