/* Profile Space skins (2026-11-11, space.js). Each skin sets the same tokens; the two colour pickers override --sp-hd
   (box headers) and --sp-pg (page background) from inline style. Text colours always come from the skin, so a picked
   colour can't make the writing unreadable. Standard = today's look plus the extra sections. */
html.sp-page,#prof .pview.sp-skin{
  --sk-pg:#e7ecf7; --sk-img:none; --sk-fg:#111; --sk-mute:#555; --sk-link:#0033cc; --sk-box:#fff; --sk-line:#6699cc;
  --sk-hd:#6699cc; --sk-hdfg:#fff; --sk-alt:#ffcc99; --sk-altfg:#cc5500; --sk-chip:#ffefd6; --sk-warn:#b00000; --sk-top:#003399; --sk-topfg:#fff;
}
#prof .pview.sp-skin{
  border:0; border-radius:0; padding:0; background:transparent; color:var(--sk-fg);
  font-family:Verdana,Tahoma,Geneva,sans-serif; font-size:14px; line-height:1.5;
}
/* The skin owns the whole page (2026-11-11, site admin: "a standard looking site, not cramped into a window"): page
   background, no wiki title block, no card around the profile, full width. The editor below keeps its own card. */
html.sp-page body{background-color:var(--sp-pg,var(--sk-pg));background-image:var(--sk-img);background-attachment:fixed}
html.sp-page.sp-sk-glitter body{background-size:90px 90px,130px 130px,60px 60px}
html.sp-page[style*="--sp-pg"] body{background-image:none}
html.sp-page::before,html.sp-page::after,html.sp-page canvas.iw-haze,html.sp-page canvas.iw-trail-haze{display:none!important}
html.sp-page main.page{max-width:1240px;padding-block:0 40px}
html.sp-page main.page>.titleblock{display:none}
html.sp-page #prof.blocks{max-width:none}
html.sp-page #prof>section.blk:first-child{background:transparent;border:0;box-shadow:none;padding:0;border-radius:0;backdrop-filter:none}
html.sp-page #prof .sp-skin p{max-width:none}
html.sp-page #prof .pacts{margin:10px 0}
#prof .sp-topbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;background:var(--sk-top);color:var(--sk-topfg);padding:10px 16px;margin:0 0 16px}
#prof .sp-topbar .sp-logo{font:700 1.35rem/1 "Pixelify Sans",Verdana,sans-serif;color:var(--sk-topfg);text-decoration:none;letter-spacing:.02em}
#prof .sp-topbar nav{display:flex;flex-wrap:wrap;gap:4px 16px}
#prof .sp-topbar nav a{color:var(--sk-topfg);text-decoration:none;font-size:.85rem}
#prof .sp-topbar nav a:hover,#prof .sp-topbar nav a:focus-visible{text-decoration:underline}
#prof .sp-emptybox{border-style:dashed;background:color-mix(in srgb,var(--sk-box) 70%,transparent)}
#prof .sp-emptybox .sp-in a{font-style:italic;color:var(--sk-mute)}
html.sp-page.sp-sk-glitter,#prof .pview.sp-sk-glitter{--sk-pg:#16001f; --sk-img:radial-gradient(circle at 20% 30%,#ff5ad888 0 2px,transparent 3px),radial-gradient(circle at 70% 80%,#7af7ff88 0 2px,transparent 3px),radial-gradient(circle at 40% 70%,#fff8 0 1px,transparent 2px); --sk-fg:#fbeaff; --sk-mute:#d6a9e6; --sk-link:#7af7ff; --sk-box:#2a0638; --sk-line:#ff5ad8; --sk-hd:#ff5ad8; --sk-hdfg:#2a0638; --sk-alt:#7af7ff; --sk-altfg:#2a0638; --sk-chip:#3d0b52; --sk-warn:#ff8a8a; --sk-top:#ff5ad8; --sk-topfg:#16001f}
html.sp-page.sp-sk-rainbow,#prof .pview.sp-sk-rainbow{--sk-pg:#fdf3ff; --sk-img:linear-gradient(100deg,#ffd6e8 0%,#fff1c9 22%,#d6ffe2 44%,#d4ecff 66%,#ead6ff 88%); --sk-fg:#2a2440; --sk-mute:#6b6385; --sk-link:#5a3fc0; --sk-box:#ffffffe0; --sk-line:#b9a6ef; --sk-hd:#8f7ae6; --sk-hdfg:#fff; --sk-alt:#ffb3cf; --sk-altfg:#6b1f45; --sk-chip:#f3ecff; --sk-warn:#b00020; --sk-top:#2a2440; --sk-topfg:#fff}
html.sp-page.sp-sk-notebook,#prof .pview.sp-sk-notebook{--sk-pg:#f4f1e6; --sk-img:repeating-linear-gradient(#f4f1e6 0 27px,#c6d6ea 27px 28px); --sk-fg:#1f2a44; --sk-mute:#56607a; --sk-link:#1d4fa8; --sk-box:#fffef8; --sk-line:#1f2a44; --sk-hd:#1f2a44; --sk-hdfg:#fffef8; --sk-alt:#e8524a; --sk-altfg:#fff; --sk-chip:#fff4c2; --sk-warn:#b00000; --sk-top:#e8524a; --sk-topfg:#fff}
/* a picked page colour replaces the skin's pattern too */

#prof .sp-skin a{color:var(--sk-link)}
#prof .sp-skin .muted,#prof .sp-skin .small.muted{color:var(--sk-mute);opacity:1}
#prof .sp-skin .pban{border-radius:0;border:1px solid var(--sk-line);margin-bottom:12px}
#prof .sp-cols{display:grid;grid-template-columns:minmax(0,350px) minmax(0,1fr);gap:14px;align-items:start}
@media (max-width:760px){#prof .sp-cols{grid-template-columns:minmax(0,1fr)}}
#prof .sp-col{display:flex;flex-direction:column;gap:14px;min-width:0}
#prof .sp-box{background:var(--sk-box,transparent);border:1px solid var(--sk-line,currentColor);min-width:0}
#prof .sp-skin .sp-h{margin:0;padding:3px 8px;font:700 13px Verdana,Tahoma,sans-serif;background:var(--sp-hd,var(--sk-hd));color:var(--sp-hdfg,var(--sk-hdfg))}
#prof .sp-skin .sp-box.alt>.sp-h{background:var(--sk-alt);color:var(--sk-altfg)}
#prof .sp-skin .sp-box.alt[class]>.sp-h{background:var(--sp-hd,var(--sk-alt));color:var(--sp-hdfg,var(--sk-altfg))}
#prof .sp-in{padding:8px 10px;min-width:0}
/* profile.js pieces inside the boxes */
#prof .sp-skin .sp-in>.psec>h3{margin:0 0 .4rem;font:700 13px Verdana,Tahoma,sans-serif;color:var(--sk-fg)}
#prof .sp-skin .sp-wrapbox>.sp-in>.psec{margin:0}
#prof .sp-skin .sp-wrapbox:not(:has(>.sp-h))>.sp-in>.psec>h3{margin:-8px -10px .5rem;padding:3px 8px;background:var(--sp-hd,var(--sk-hd));color:var(--sp-hdfg,var(--sk-hdfg))}
#prof .sp-skin .sp-wrapbox.alt:not(:has(>.sp-h))>.sp-in>.psec>h3{background:var(--sp-hd,var(--sk-alt));color:var(--sp-hdfg,var(--sk-altfg))}
#prof .sp-skin .psec a,#prof .sp-skin .pabout a,#prof .sp-skin .plinks a,#prof .sp-skin .pdoc a,#prof .sp-skin .pdosed a{color:var(--sk-link)}
#prof .sp-skin .phead{align-items:flex-start;padding:0}
#prof .sp-skin .pav{width:90px;height:90px;border-radius:0;font-size:2.8rem;border:1px solid var(--sk-line)}
@media (max-width:520px){#prof .sp-skin .pav{width:64px;height:64px;font-size:2rem}}
#prof .sp-skin.has-ban .pav{margin-top:0;box-shadow:none}
#prof .sp-skin .pname{color:var(--sk-fg);font:700 1.3rem/1.15 "Pixelify Sans",Verdana,sans-serif;overflow-wrap:break-word;min-width:0}
#prof .sp-skin .phead>div{min-width:0}
#prof .sp-skin .ptag{color:var(--sk-fg)}
#prof .sp-skin .pbadges{margin:0}
#prof .sp-skin .pbadges li{border-radius:0;border-color:var(--sk-line);background:var(--sk-chip)}
#prof .sp-skin .pabout{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);gap:2px;margin:0}
#prof .sp-skin .pabout dt,#prof .sp-skin .pabout dd{padding:3px 6px;border:1px solid var(--sk-box)}
#prof .sp-skin .pabout dt{background:var(--sk-chip);color:var(--sk-mute)}
#prof .sp-skin .pbio{margin:0 0 .5rem}
#prof .sp-skin .plinks{margin:0}
#prof .sp-skin .prole{border-radius:0}
#prof .sp-skin .ps-bans{background:var(--sk-box)}

/* our own pieces (all skins) */
#prof .sp-online{display:inline-flex;gap:5px;align-items:center;font-weight:700;font-size:.85rem;color:#1a8a1a;margin:.15rem 0}
#prof .sp-online i{width:8px;height:8px;border-radius:50%;background:#2bd42b;box-shadow:0 0 6px #2bd42b}
#prof .sp-sk-glitter .sp-online{color:#7dff7d}
#prof .sp-mood{margin:.15rem 0}
#prof .sp-network{border:1px solid var(--sk-line,currentColor);background:var(--sk-box,transparent);padding:10px;text-align:center;font:700 1rem "Pixelify Sans",Verdana,sans-serif}
#prof .sp-small{font-size:.8rem;color:var(--sk-mute,inherit);opacity:.9}
#prof .sp-player{display:flex;gap:8px;align-items:center}
#prof .sp-play,#prof .sp-prev{font:inherit;cursor:pointer;border:1px solid var(--sk-line,currentColor);background:var(--sk-chip,transparent);color:inherit}
#prof .sp-play{width:34px;height:34px;flex:none}
#prof .sp-prev{padding:.3rem .7rem;border-radius:999px;justify-self:start;margin-top:.3rem}
#prof .sp-t{min-width:0;display:grid}
#prof .sp-t b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#prof .sp-eq{display:flex;gap:2px;height:14px;align-items:flex-end;margin-top:3px}
#prof .sp-eq span{width:4px;height:3px;background:var(--sp-hd,var(--sk-hd,currentColor))}
@media (prefers-reduced-motion:no-preference){#prof .sp-player.on .sp-eq span{animation:speq .5s ease-in-out infinite alternate}#prof .sp-eq span:nth-child(2){animation-delay:.1s}#prof .sp-eq span:nth-child(3){animation-delay:.25s}#prof .sp-eq span:nth-child(4){animation-delay:.05s}#prof .sp-eq span:nth-child(5){animation-delay:.3s}}
@keyframes speq{to{height:14px}}
#prof .sp-listen{margin:.5rem 0 0;overflow-wrap:anywhere}
#prof .sp-kit{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
#prof .sp-kit li{border:1px solid var(--sk-line,currentColor);padding:2px 7px;background:var(--sk-chip,transparent)}
#prof .sp-dt{border-collapse:collapse;width:100%}
#prof .sp-dt th{text-align:left;vertical-align:top;width:38%;padding:3px 6px;background:var(--sk-chip,transparent);color:var(--sk-mute,inherit);border:1px solid var(--sk-box,transparent)}
#prof .sp-dt td{padding:3px 6px;border:1px solid var(--sk-box,transparent);overflow-wrap:anywhere}
#prof .sp-blinkies{display:flex;flex-wrap:wrap;gap:4px}
#prof .sp-blink{display:inline-block;font:9px/1 "Silkscreen","Courier New",monospace;padding:5px 6px;border:1px solid #0006;color:#fff;letter-spacing:.03em;white-space:nowrap;background:linear-gradient(90deg,#7a3aff,#ff3ad8)}
#prof .sp-b-test{background:linear-gradient(90deg,#ff4fa3,#ffb04f)} #prof .sp-b-lowslow{background:linear-gradient(90deg,#3a7bff,#3affd2);color:#002}
#prof .sp-b-alone{background:linear-gradient(90deg,#7a3aff,#ff3ad8)} #prof .sp-b-narcan{background:linear-gradient(90deg,#1a1a1a,#555)}
#prof .sp-b-hydrate{background:linear-gradient(90deg,#16a34a,#a3e635);color:#012} #prof .sp-b-cat{background:linear-gradient(90deg,#f59e0b,#ef4444)}
#prof .sp-b-sitter{background:linear-gradient(90deg,#0ea5e9,#6366f1)} #prof .sp-b-oneday{background:linear-gradient(90deg,#14b8a6,#0f766e)}
#prof .sp-b-sober{background:linear-gradient(90deg,#84cc16,#15803d)} #prof .sp-b-label{background:linear-gradient(90deg,#fde047,#f97316);color:#210}
#prof .sp-b-scale{background:linear-gradient(90deg,#94a3b8,#334155)} #prof .sp-b-myco{background:linear-gradient(90deg,#a16207,#fbbf24);color:#210}
#prof .sp-b-gamer{background:linear-gradient(90deg,#22c55e,#0ea5e9)} #prof .sp-b-rave{background:linear-gradient(90deg,#ec4899,#8b5cf6,#06b6d4)}
@media (prefers-reduced-motion:no-preference){#prof .sp-b-test,#prof .sp-b-alone,#prof .sp-b-rave{animation:spbl 1.2s steps(2) infinite}}
@keyframes spbl{50%{filter:brightness(1.35)}}
#prof .sp-streak .sp-in{display:flex;gap:10px;align-items:center}
#prof .sp-big{font:700 2rem/1 "Pixelify Sans",Verdana,sans-serif}
#prof .sp-meet{margin:.4rem 0 0;overflow-wrap:anywhere}
#prof .sp-c{display:grid;grid-template-columns:52px minmax(0,1fr);gap:8px;padding:8px 0;border-top:1px solid var(--sk-chip,color-mix(in srgb,currentColor 15%,transparent))}
#prof .sp-c:first-child{border-top:0}
#prof .sp-cav{width:52px;height:52px;display:grid;place-items:center;font-size:1.6rem;text-decoration:none;border:1px solid var(--sk-line,currentColor);background:var(--sk-chip,transparent)}
#prof .sp-when{color:var(--sk-mute,inherit);font-size:.75rem}
#prof .sp-flag{color:var(--sk-warn,#d33);font-size:.75rem;font-weight:700}
#prof .sp-cp{margin:2px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
#prof .sp-cacts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:3px}
#prof .sp-link{font:inherit;font-size:.78rem;background:none;border:0;padding:0;color:var(--sk-link,inherit);text-decoration:underline;cursor:pointer}
#prof .sp-cacts select{font:inherit;font-size:.8rem;padding:.15rem;border-radius:0}
#prof .sp-cform{display:grid;gap:6px;margin-top:8px;max-width:none}
#prof .sp-cform textarea{width:100%;box-sizing:border-box;min-height:58px;border-radius:0;border:1px solid var(--sk-line,currentColor);background:var(--sk-box,transparent);color:inherit;font:inherit}
#prof .sp-crow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#prof .sp-crow button{font:inherit;font-weight:700;padding:5px 12px;border:1px solid var(--sk-line,currentColor);background:var(--sp-hd,var(--sk-hd,transparent));color:var(--sp-hdfg,var(--sk-hdfg,inherit));cursor:pointer;border-radius:0}
#prof .sp-cmsg.bad{color:var(--sk-warn,#d33);font-weight:700}
#prof .sp-counter{display:flex;justify-content:center;gap:2px;padding:12px 0 2px}
#prof .sp-counter span{font:16px/1 "Silkscreen","Courier New",monospace;background:#000;color:#39ff14;padding:4px 5px;border:1px solid #333}
/* Standard skin: our boxes look like the profile's own sections */
#prof .sp-sk-standard .sp-box{border:0;background:transparent}
#prof .sp-sk-standard .sp-h{margin:1rem 0 .3rem;font-size:1rem;color:var(--pc)}
#prof .sp-sk-standard .sp-in{padding:0}
#prof .sp-sk-standard .sp-network{margin-top:.8rem}

/* editor */
#prof .sp-edit{display:grid;gap:.6rem;border-top:1px solid color-mix(in srgb,currentColor 25%,transparent);padding-top:.8rem}
#prof .sp-ed{display:grid;gap:.45rem}
#prof .sp-ed h4{margin:.4rem 0 0;font-size:.95rem}
#prof .sp-skins{display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:.4rem}
#prof .sp-skinpick{display:flex!important;align-items:center;gap:.4rem;font-weight:400!important;border:1px solid color-mix(in srgb,currentColor 30%,transparent);border-radius:8px;padding:.4rem .5rem;cursor:pointer}
#prof .sp-sw{display:inline-block;width:18px;height:18px;border-radius:4px;border:1px solid #0004;flex:none}
#prof .sp-sw-classic{background:linear-gradient(135deg,#6699cc 50%,#ffcc99 50%)} #prof .sp-sw-glitter{background:linear-gradient(135deg,#2a0638 50%,#ff5ad8 50%)}
#prof .sp-sw-rainbow{background:linear-gradient(135deg,#ffd6e8,#d4ecff,#ead6ff)} #prof .sp-sw-notebook{background:linear-gradient(135deg,#fffef8 50%,#e8524a 50%)} #prof .sp-sw-standard{background:var(--pc,#7c4dff)}
#prof .sp-colors{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem}
#prof .sp-cpick{display:flex;align-items:center;gap:.4rem}
#prof .sp-cpick input[type=color]{width:2.4rem;height:2rem;padding:0;border:1px solid currentColor;border-radius:6px;background:none;cursor:pointer}
#prof .sp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:.2rem .8rem}
#prof .sp-bgrid label.chk{gap:.4rem}
#prof .sp-msg{margin:0}
#prof .sp-edit .sp-prev{background:transparent;color:inherit;border-color:currentColor}
/* The social pages have their own top bar, so the wiki header and the separate Account settings button are hidden
   (2026-11-11, site admin: "we dont need the regular intoxicant.wiki header up top"). Account is in the top bar. */
html.sp-page header.site,html.sp-page #prof .pacts{display:none!important}
html.sp-page main.page{padding-top:16px}
#prof .sp-topbar .sp-back{margin-left:auto;padding:6px 14px;border:2px solid var(--sk-topfg);color:var(--sk-topfg);text-decoration:none;font-weight:700;font-size:.85rem;white-space:nowrap}
#prof .sp-topbar .sp-back:hover,#prof .sp-topbar .sp-back:focus-visible{background:var(--sk-topfg);color:var(--sk-top)}
/* /profile/ (own, no ?u) shows only the profile; the editor, dose list and friends box are on /profile/edit/. */
html.sp-ownview #prof .pedit,html.sp-ownview #prof .pdoses,html.sp-ownview #prof .psocial{display:none!important}