/* FriendCrib (c) 2026 www.friendcrib.com. All rights reserved. Proprietary, see LICENSE. */
/* Bungee logo font, hosted here (SIL Open Font License, see /fonts/OFL.txt). Only the Latin letters we use: about 11 KB. */
@font-face{font-family:"Bungee";src:url(/fonts/bungee.woff) format("woff");font-display:swap;font-weight:400;font-style:normal}
/* Layout: 2006-era two-column profile page — left identity column, right social column, under a chunky nav bar */
:root{
  --sky:#cfe6ff; --navy:#1b3a8a; --orange:#ff7a1a; --bg:var(--sky); --bar:var(--navy); --accent:var(--orange); --panel:#ffffff; --ink:#1d2433; --muted:#5d6a85; --line:#9fbbe6; --pink:#ff4fa3; --link:var(--navy); --cursor:auto;
  --display:"Bungee",Impact,sans-serif; --body:Verdana,Tahoma,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0;background:var(--sky) repeating-linear-gradient(45deg,transparent 0 14px,rgba(255,255,255,.35) 14px 28px);color:var(--ink);font:13px/1.5 var(--body);padding-inline:16px;padding-block:0 32px}
a{color:var(--link);font-weight:bold}
a:focus-visible,button:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.wrap{max-width:1200px;margin:0 auto}
header.top{background:var(--navy);color:#fff;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:14px 18px;margin-top:16px;}
.logo{font-family:var(--display);font-size:28px;letter-spacing:1px;color:#fff}
.logo .wm{color:#fff}.logo .wm span{color:var(--orange)}
.search{display:flex;gap:6px;flex:1;min-width:0;max-width:340px}
.search input{flex:1;min-width:0;padding:5px 8px;border:2px solid var(--line);font:inherit}
.search button,.btn{background:var(--orange);color:#fff;border:0;padding:5px 12px;font:bold 12px var(--body);cursor:pointer}
nav.bar{background:var(--orange);display:flex;flex-wrap:wrap;gap:4px 12px;padding:6px 14px;}
nav.bar a{color:#fff;text-decoration:none;font-size:11.5px;white-space:nowrap}
nav.bar a:hover{text-decoration:underline}
.grid{display:grid;grid-template-columns:340px 1fr;gap:20px;margin-top:16px}
@media(max-width:720px){.grid{grid-template-columns:1fr}}
.col{display:flex;flex-direction:column;gap:16px;min-width:0}
.box{background:var(--panel);border:2px solid var(--line);}
.box h2{margin:0;background:var(--navy);color:#fff;font:bold 13px var(--body);padding:5px 10px}
.box h2.o{background:var(--orange)}
.box .in{padding:10px 12px}
.name{font-family:var(--display);font-size:22px;color:var(--link);margin:0 0 8px;text-wrap:balance}
.idrow{display:flex;gap:12px}
.avatar{width:110px;height:110px;flex:none;border:3px solid var(--pink);background:conic-gradient(from 30deg,#ffd166,#ff4fa3,#7b5cff,#2ec4ff,#ffd166);display:grid;place-items:center;font:44px var(--display);color:#fff;text-shadow:2px 2px 0 var(--navy)}
.status{font-style:italic;color:var(--muted)}
.online{display:inline-block;background:#2fbf4a;color:#fff;font-size:10px;font-weight:bold;padding:1px 6px;margin-top:4px}
.mood{font-size:12px;margin-top:8px}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.actions a{font-size:12px}
table.det{width:100%;border-collapse:collapse;font-size:12px}
table.det th{text-align:left;color:var(--link);width:42%;padding:4px 6px;background:color-mix(in srgb,var(--link) 10%,var(--panel));vertical-align:top}
table.det td{padding:4px 6px}
table.det tr+tr th,table.det tr+tr td{border-top:1px solid color-mix(in srgb,var(--ink) 12%,var(--panel))}
.player{display:flex;align-items:center;gap:10px;background:#1d2433;color:#d7f7ff;padding:8px 10px;font-size:12px}
.player button{background:#2a3247;color:#fff;border:1px solid #55617f;width:28px;height:28px;cursor:pointer}
.eq{display:flex;gap:2px;align-items:flex-end;height:16px;margin-left:auto}
.eq i{width:3px;background:var(--orange);height:4px}
.playing .eq i{animation:eq .6s infinite alternate}
.eq i:nth-child(2){animation-delay:.15s}.eq i:nth-child(3){animation-delay:.3s}.eq i:nth-child(4){animation-delay:.45s}
@keyframes eq{to{height:16px}}
@media(prefers-reduced-motion:reduce){.playing .eq i{animation:none;height:10px}}
.blurb h3{margin:0 0 4px;color:var(--orange);font-size:14px}
.blurb p{margin:0 0 12px}
.net{font-size:15px;font-weight:bold;color:var(--link)}
.top8{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:8px}
@media(max-width:420px){.top8{grid-template-columns:repeat(2,1fr)}}
.friend{text-align:center;font-size:11px}
.friend .pic{aspect-ratio:1;max-width:100%;border:2px solid var(--line);display:grid;place-items:center;font:22px var(--display);color:#fff}
.blog li{margin-bottom:4px}
.blog{margin:0;padding-left:18px}
.comment{display:grid;grid-template-columns:70px 1fr;gap:10px;padding:8px 0;border-top:1px dashed var(--line)}
.comment:first-of-type{border-top:0}
.comment .pic{width:64px;height:64px;display:grid;place-items:center;font:20px var(--display);color:#fff;border:2px solid var(--line)}
.comment .who{font-weight:bold;color:var(--link)}
.comment .when{color:var(--muted);font-size:11px}
.comment p{margin:4px 0 0}
form.add{display:flex;flex-direction:column;gap:6px;margin-top:10px}
form.add textarea{font:inherit;padding:6px;border:2px solid var(--line);min-height:60px}
form.add .row{display:flex;gap:6px}
form.add input{flex:1;min-width:0;font:inherit;padding:5px;border:2px solid var(--line);}
.glitter{background:linear-gradient(90deg,var(--pink),var(--orange),#7b5cff,var(--pink));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sh 4s linear infinite}
@keyframes sh{to{background-position:300% 0}}
@media(prefers-reduced-motion:reduce){.glitter{animation:none}}
footer{text-align:center;font-size:11px;color:var(--muted);margin-top:20px}
.counter{font-family:monospace;background:#000;color:#4dff6a;padding:2px 6px;letter-spacing:2px}

/* Per-crib colors: crib.php sets --bg, --bar and --accent on <body> */
body{background-color:var(--bg)}
header.top,.box h2{background:var(--bar)}
nav.bar,.box h2.o,.search button,.btn{background:var(--accent)}
.blurb h3{color:var(--accent)}
.logo{text-decoration:none}
.who-am-i{margin-left:auto;font-size:12px}
.who-am-i a{color:#fff}
.flash{background:#fff8c5;border:2px solid #e8d36a;padding:8px 12px;margin-top:12px;}
.error{background:#ffe3e3;border:2px solid #e89a9a;padding:8px 12px;}
main{display:block}
.narrow{max-width:460px}
.stack{display:flex;flex-direction:column;gap:6px}
.stack input,.stack textarea,.stack select{font:inherit;padding:6px;border:2px solid var(--line);width:100%}
.stack textarea{min-height:90px}
.stack .btn{align-self:flex-start;margin-top:6px}
.hint{color:var(--muted);font-size:11px;margin:-2px 0 4px}
.colors{display:flex;flex-wrap:wrap;gap:12px}
.colors label{display:flex;flex-direction:column;gap:4px;font-size:12px}
.colors input{width:70px;height:36px;padding:2px}
a.pic{text-decoration:none}
.friend a{display:block;color:var(--link)}
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px}
.person{text-align:center;font-size:12px}
.person .pic{aspect-ratio:1;display:grid;place-items:center;font:28px var(--display);color:#fff;border:2px solid var(--line)}
.row-list{display:flex;flex-direction:column;gap:8px}
.row-item{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.row-item .pic{width:44px;height:44px;display:grid;place-items:center;font:18px var(--display);color:#fff;border:2px solid var(--line);flex:none}
.row-item .grow{flex:1;min-width:0}
.row-item form{display:inline}
.linkbtn{background:none;border:0;padding:0;color:var(--link);font:bold 12px var(--body);text-decoration:underline;cursor:pointer}
.rank{width:56px;font:inherit;padding:3px;border:2px solid var(--line);}
.hero{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;margin-top:16px}
@media(max-width:720px){.hero{grid-template-columns:1fr}}
.hero h1{font-family:var(--display);color:var(--bar);font-size:30px;line-height:1.1;margin:0 0 8px;text-wrap:balance}
.empty{color:var(--muted);font-style:italic}
.check{display:flex;gap:8px;align-items:flex-start;font-size:12px;margin-top:6px}
.check input{width:auto;margin-top:2px}
footer a{color:var(--muted)}
*,*::before,*::after{border-radius:0!important}
.user-html img{max-width:100%;height:auto}
.user-html marquee{max-width:100%}
.blink{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{visibility:hidden}}
@media(prefers-reduced-motion:reduce){.blink{animation:none}}
.presence{display:inline-block;color:#fff;font-size:10px;font-weight:bold;padding:1px 6px;margin-top:6px;background:#2fbf4a}
.presence.p-away{background:#e0a100}
.presence.p-busy{background:#c0392b}
.away{font-style:italic;background:#fffbe0}
.status-line{margin-bottom:6px}
table.bul th{width:auto}

/* Themed cribs: colors, font, cursor and background come from the owner's choices */
body.themed{--line:color-mix(in srgb,var(--bar) 40%,var(--panel));--muted:color-mix(in srgb,var(--ink) 62%,var(--panel));background-color:var(--bg);background-image:none;font-family:var(--body);cursor:var(--cursor)}
body.themed input,body.themed textarea,body.themed select{background:var(--panel);color:var(--ink)}
body.themed .flash{color:#222}
body.pat-stripes{background-image:repeating-linear-gradient(45deg,transparent 0 14px,rgba(255,255,255,.3) 14px 28px)}
body.pat-dots{background-image:radial-gradient(rgba(255,255,255,.4) 3px,transparent 3.5px);background-size:22px 22px}
body.pat-checker{background-image:conic-gradient(rgba(255,255,255,.09) 25%,transparent 0 50%,rgba(255,255,255,.09) 0 75%,transparent 0);background-size:32px 32px}
body.pat-grid{background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);background-size:24px 24px}
body.pat-stars{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M12 4l2.4 5 5.6.8-4 3.9.9 5.5L12 16.6l-4.9 2.6.9-5.5-4-3.9 5.6-.8z' fill='%23ffffff' fill-opacity='.5'/%3E%3Cpath d='M36 28l1.5 3.1 3.4.5-2.5 2.4.6 3.4-3-1.6-3 1.6.6-3.4-2.5-2.4 3.4-.5z' fill='%23ffffff' fill-opacity='.35'/%3E%3C/svg%3E");background-size:48px 48px}
body.pat-hearts{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M14 26s-8-5-8-10.5A4.5 4.5 0 0 1 14 13a4.5 4.5 0 0 1 8 2.5C22 21 14 26 14 26z' fill='%23ff4fa3' fill-opacity='.35'/%3E%3C/svg%3E");background-size:44px 44px}
body.has-bgimg{background-image:var(--bgimg);background-repeat:repeat;background-size:auto}
.themes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
@media(min-width:1000px){.themes{grid-template-columns:repeat(10,minmax(0,1fr))}}
@media(max-width:560px){.themes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.theme-pick{display:flex;flex-direction:column;gap:4px;padding:6px;border:2px solid var(--line);background:var(--panel);cursor:pointer;font-size:12px}
.theme-pick input{position:absolute;opacity:0;pointer-events:none}
.theme-pick:has(input:checked){outline:3px solid var(--accent)}
.theme-pick:focus-within{outline:3px solid var(--accent)}
.swatch{display:flex;height:26px;border:1px solid rgba(0,0,0,.2)}
.swatch i{flex:1}
.entry{padding:8px 0;border-top:1px dashed var(--line)}.entry:first-of-type{border-top:0}
body.pat-plaid{background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 6px,transparent 6px 18px,rgba(0,0,0,.18) 18px 22px,transparent 22px 40px),repeating-linear-gradient(90deg,rgba(0,0,0,.28) 0 6px,transparent 6px 18px,rgba(0,0,0,.18) 18px 22px,transparent 22px 40px),repeating-linear-gradient(90deg,transparent 0 30px,rgba(255,215,0,.25) 30px 31px,transparent 31px 40px)}
table.survey th{width:55%}
.qlist{margin:0;padding-left:22px;columns:2;column-gap:28px}
@media(max-width:600px){.qlist{columns:1}}
/* 88x31 share badges: two-tone, pixel border, tiny type */
.share{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.share-label{font-size:11px;font-weight:bold;margin-right:4px;width:100%}
.badge88{display:inline-flex;align-items:stretch;width:88px;height:31px;border:1px solid #000;outline:1px solid rgba(255,255,255,.6);outline-offset:-2px;background:var(--panel);color:var(--ink);text-decoration:none;font:bold 8px/1 Verdana,Tahoma,sans-serif;text-transform:uppercase;letter-spacing:0;cursor:pointer;padding:0;overflow:hidden}
.badge88 i{display:grid;place-items:center;width:24px;flex:none;font:bold 10px/1 Verdana,Tahoma,sans-serif;letter-spacing:-.3px;color:#fff;background:var(--bar);border-right:1px solid #000}
.badge88 span{display:grid;place-items:center;flex:1;min-width:0;padding:0 3px;white-space:nowrap;text-align:center;background:linear-gradient(var(--panel),color-mix(in srgb,var(--accent) 22%,var(--panel)))}
.badge88:hover span,.badge88:focus-visible span{background:var(--accent);color:#fff}
.badge88.copied span{background:#2fbf4a;color:#fff}
.badge88 i svg{display:block}
/* FriendCrib pixel icons */
.ico{width:16px;height:16px;vertical-align:-3px;flex:none;image-rendering:pixelated}
nav.bar a .ico{margin-right:4px}
.logo{display:inline-flex;align-items:center;gap:8px}
.logo .logo-ico{width:32px;height:32px;color:var(--accent);vertical-align:0}
.badge88 i .ico{width:16px;height:16px;vertical-align:0}
.box h2 .ico{vertical-align:-.25em}
/* Customize: color pickers fill the whole box */
.colors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.colors label{display:flex;flex-direction:column;gap:4px;font-size:12px}
.colors input{width:100%;height:38px;padding:2px}
@media(max-width:420px){.colors{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Pics */
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.thumbs.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.thumb{display:block;border:2px solid var(--line);background:var(--panel)}
.thumb img{display:block;width:100%;height:auto;aspect-ratio:1}
.thumb:hover,.thumb:focus-visible{border-color:var(--accent)}
.is-hidden{opacity:.45;outline:2px dashed #c0392b}
.photo-frame{text-align:center;background:color-mix(in srgb,var(--ink) 6%,var(--panel));padding:8px;border:1px solid var(--line)}
.photo-frame img{max-width:100%;height:auto;max-height:80vh;width:auto}
.photo-nav{display:flex;justify-content:space-between;margin-bottom:8px;font-size:12px}
.caption{font-size:14px;margin:8px 0 2px}
.albums{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:4px}
.albums a.on{background:var(--accent);color:#fff;padding:0 4px;text-decoration:none}
/* Moderation */
.mod-row{display:flex;gap:12px;align-items:flex-start;padding:10px;border:1px solid var(--line)}
.mod-row.urgent{border:2px solid #c0392b;background:#fff1f1}
.mod-row img{display:block;border:1px solid var(--line)}
.mod-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.btn.danger{background:#c0392b}
.tag{display:inline-block;background:#c0392b;color:#fff;font-size:10px;font-weight:bold;padding:0 5px;margin-left:4px}
.mod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.mod-tile{position:relative;border:1px solid var(--line)}
.mod-tile img{display:block;width:100%;height:auto;aspect-ratio:1}
.mod-tile form{position:absolute;top:4px;right:4px}
.mod-tile .x{width:30px;height:30px;border:2px solid #fff;background:#c0392b;color:#fff;font:bold 16px/1 Verdana,sans-serif;cursor:pointer}
.mod-tile .by{display:block;font-size:10px;padding:2px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top8-pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0}
@media(max-width:560px){.top8-pick{grid-template-columns:1fr}}
.slot{display:flex;align-items:center;gap:8px;border:2px solid var(--line);padding:6px;background:var(--panel)}
.slot-no{font:20px var(--display);color:var(--accent);width:36px;text-align:center;flex:none}
.slot select{flex:1;min-width:0;font:inherit;padding:5px;border:2px solid var(--line)}
.danger-zone{border-color:#c0392b}.danger-zone h2{background:#c0392b!important}
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.cf-turnstile{margin:6px 0}
.bday{display:inline-flex;align-items:center;gap:4px;font-weight:bold;color:var(--accent);margin-top:6px}
.online-list{display:flex;flex-direction:column;gap:4px}
.online-who{display:flex;align-items:center;gap:6px}
.dot{width:8px;height:8px;flex:none;background:#2fbf4a}
.dot.p-away{background:#e0a100}.dot.p-busy{background:#c0392b}
.person .presence{font-size:9px;margin:2px 0}
.pager{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
/* Groups & forums */
.tablewrap{overflow-x:auto}
table.topics th{width:auto}
table.topics td:nth-child(2){text-align:center;width:60px}
table.topics td:nth-child(3){width:120px;font-size:11px}
.tag.pin{background:var(--accent)}
.tag.new{background:#1d5fbf}
.post-who .dot{display:inline-block}
.sig{margin-top:10px;padding-top:6px;border-top:1px dashed var(--line);font-size:12px;color:var(--muted);font-style:italic}
.recent-topics{margin:0;padding-left:18px}.recent-topics li{margin:4px 0}
.group-row{padding:8px 0;border-top:1px dashed var(--line)}
.group-row:first-child{border-top:0}
.group-about{font-size:12px;margin-top:2px}
.posts{display:flex;flex-direction:column;gap:10px;margin:10px 0}
.post{display:grid;grid-template-columns:120px 1fr;gap:12px;border:1px solid var(--line);padding:10px}
@media(max-width:560px){.post{grid-template-columns:1fr}}
.post-who{font-size:12px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}
.post-who .pic{width:64px;height:64px;display:grid;place-items:center;font:22px var(--display);color:#fff;border:2px solid var(--line);text-decoration:none}
.post-body{min-width:0;overflow-wrap:anywhere}
.post-actions{margin-top:8px;font-size:12px}
.permalink{color:var(--muted);text-decoration:none}
.user-html blockquote,.post-body blockquote{margin:6px 0;padding:6px 10px;border-left:3px solid var(--accent);background:color-mix(in srgb,var(--ink) 5%,var(--panel))}
.mod-quote{margin:6px 0;padding:6px 10px;border-left:3px solid #c0392b;background:#fff8f8;font-size:12px}
/* Music */
.band-row{display:flex;gap:10px;align-items:center}
.band-swatch{width:36px;height:36px;display:grid;place-items:center;color:#fff;flex:none;border:1px solid #000}
.band-avatar{background:var(--accent)}
.band-avatar .ico{width:64px;height:64px;color:#fff}
.songs{display:flex;flex-direction:column;gap:6px}
.song{display:flex;align-items:center;gap:10px;padding:6px;background:#1d2433;color:#d7f7ff;border:1px solid #000}
.song .when{color:#9fb3d1}
.song .linkbtn{color:#ffd166}
.song.playing{background:#26304a;outline:2px solid var(--accent)}
.song-play{width:32px;height:32px;flex:none;background:#2a3247;color:#fff;border:1px solid #55617f;cursor:pointer;font-size:12px}
.song-play.on{background:var(--accent)}
.mail-body{white-space:normal;overflow-wrap:anywhere;padding:10px;border:1px solid var(--line);background:color-mix(in srgb,var(--ink) 3%,var(--panel))}
table.mailbox tr.unread td{font-weight:bold}
.tags{margin:8px 0;font-size:12px}.tagged{white-space:nowrap}.tagged .linkbtn{margin-left:2px;text-decoration:none;color:var(--muted)}
/* Videos: a retro frame around a click-to-play card */
.videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.video{display:flex;flex-direction:column;gap:4px;min-width:0}
.video-card{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:2px solid var(--line);background:#000;cursor:pointer;overflow:hidden}
.video-card img{width:100%;height:100%;object-fit:cover;display:block;opacity:.85}
.video-card:hover img,.video-card:focus-visible img{opacity:1}
.video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:38px;display:grid;place-items:center;background:var(--accent);color:#fff;font-size:18px;border:2px solid #fff}
.video-frame{width:100%;aspect-ratio:16/9;border:2px solid var(--line);background:#000}
.video-title{font-weight:bold;font-size:12px;overflow-wrap:anywhere}
/* Events */
.event-row{display:flex;gap:12px;align-items:flex-start;padding:8px 0;border-top:1px dashed var(--line)}
.event-row:first-child{border-top:0}
.event-date{width:48px;flex:none;text-align:center;border:2px solid var(--line);background:var(--panel)}
.event-date span{display:block;background:var(--accent);color:#fff;font-size:10px;font-weight:bold;text-transform:uppercase}
.event-date b{display:block;font:20px var(--display);padding:2px 0}
.rsvp{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.rsvp .btn{background:color-mix(in srgb,var(--accent) 35%,var(--panel));color:var(--ink)}
.rsvp .btn.on{background:var(--accent);color:#fff}
/* Instant messages: retro chat windows */
.im-app{display:grid;grid-template-columns:240px 1fr;gap:16px;margin-top:16px}
.im-app .prefs{grid-column:1}
.im-app .chat{grid-column:2;grid-row:1 / span 2}
@media(max-width:720px){.im-app{grid-template-columns:1fr}.im-app .chat{grid-column:1;grid-row:auto}}
.im-window{border:2px solid #000;background:var(--panel);box-shadow:3px 3px 0 rgba(0,0,0,.25);display:flex;flex-direction:column;min-width:0}
.im-title{background:linear-gradient(var(--bar),color-mix(in srgb,var(--bar) 70%,#000));color:#fff;font-weight:bold;font-size:12px;padding:5px 8px;display:flex;align-items:center;gap:6px}
.im-status{font-weight:normal;opacity:.9;margin-left:auto}
.im-body{padding:8px;display:flex;flex-direction:column;gap:6px;min-height:0}
.im-me{font-size:12px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.im-group{font-weight:bold;font-size:11px;margin-top:8px;color:var(--muted)}
.im-buddy{display:flex;align-items:center;gap:6px;padding:3px 4px;text-decoration:none;color:var(--ink);font-weight:normal}
.im-buddy:hover,.im-buddy.on{background:color-mix(in srgb,var(--accent) 20%,var(--panel))}
.im-buddy.off{opacity:.55}
.im-buddy .bname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.im-log{height:360px;overflow-y:auto;border:2px inset #ccc;background:#fff;color:#000;padding:8px;font-size:13px}
.im-line{margin:2px 0;overflow-wrap:anywhere;white-space:pre-wrap}
.im-line.mine .im-who{color:#cc0000;font-weight:bold}
.im-line.theirs .im-who{color:#0000cc;font-weight:bold}
.im-report{font-size:10px;color:#999;margin-left:6px;visibility:hidden}
.im-line:hover .im-report,.im-report:focus{visibility:visible}
.im-system{color:#666;font-style:italic;font-size:12px;margin:4px 0}
.im-send{display:flex;gap:6px}
.im-send textarea{flex:1;min-width:0;font:inherit;padding:6px;border:2px inset #ccc;resize:vertical;background:#fff;color:#000}
.im-preview{border:2px inset #ccc;background:#fff;padding:6px}

/* ---- Phones and small tablets ---- */
details.fold>summary{list-style:none;cursor:pointer}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary h2::after{content:'▸';float:right}
details.fold[open]>summary h2::after{content:'▾'}
@media(max-width:720px){
  .results-first>.col:last-child{order:-1}
}
@media(max-width:600px){
  body{padding-inline:8px}
  header.top{padding:10px 12px;gap:8px 12px;margin-top:8px}
  .logo .wm{font-size:22px}
  .logo .logo-ico{width:24px;height:24px}
  .search{order:3;flex-basis:100%;max-width:none}
  .who-am-i{font-size:11px}
  /* one swipeable row of nav links */
  nav.bar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:0 14px;padding:8px 12px}
  nav.bar::-webkit-scrollbar{display:none}
  nav.bar::after{content:'›';position:sticky;right:-12px;flex:none;margin-left:-8px;padding:0 10px 0 26px;background:var(--accent);color:#fff;font:bold 18px/1 Verdana,sans-serif;display:flex;align-items:center;pointer-events:none}
  nav.bar.at-end::after{visibility:hidden}
  nav.bar a{flex:none;font-size:12px;padding:2px 0}
  .grid{gap:12px;margin-top:12px}
  .col{gap:12px}
  /* forum posts: author on one compact line */
  .post{grid-template-columns:1fr;gap:6px}
  .post-who{flex-direction:row;text-align:left;justify-content:flex-start;gap:8px}
  .post-who .pic{width:34px;height:34px;font-size:14px}
  .idrow{gap:10px}
  .avatar{width:96px;height:96px;font-size:38px}
  .name{font-size:19px}
  .im-log{height:300px}
  .top8{gap:8px}
}
/* Landing page */
.landing{display:grid;grid-template-columns:1fr 330px;gap:16px;margin-top:16px}
@media(max-width:820px){.landing{grid-template-columns:1fr}}
.hero-box .in{padding:18px 20px}
.hero-title{font-family:var(--display);font-size:30px;line-height:1.15;color:var(--navy);margin:0 0 10px;text-wrap:balance}
.hero-sub{font-size:14px;margin:0 0 12px}
.hero-points{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:8px}
.hero-points li{position:relative;padding-left:24px}
.hero-points .ico{position:absolute;left:0;top:2px;color:var(--accent)}
.btn.big{font-size:15px;padding:10px 18px}
.grid.two{grid-template-columns:1fr 1fr;margin-top:0}
@media(max-width:720px){.grid.two{grid-template-columns:1fr}}
.ranked{margin:0;padding-left:20px}
.ranked li{margin:3px 0}
/* Home */
.home-avatar{text-decoration:none}
.hello{font-family:var(--display);font-size:18px;color:var(--link)}
.home-links{font-size:12px;margin-top:8px}
.alerts .in{display:flex;flex-direction:column;gap:6px}
.alert-line{display:flex;align-items:center;gap:6px;color:#c0392b;font-weight:bold;text-decoration:none}
.alert-line:hover{text-decoration:underline}
.status-row{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px dashed var(--line)}
.status-row:first-of-type{border-top:0}
.status-row .pic{width:40px;height:40px;flex:none;display:grid;place-items:center;font:16px var(--display);color:#fff;border:2px solid var(--line);text-decoration:none}
.feed{list-style:none;margin:0;padding:0}
.feed li{padding:6px 0;border-top:1px dashed var(--line)}
.feed li:first-child{border-top:0}
@media(max-width:600px){.hero-title{font-size:23px}.landing{gap:12px;margin-top:12px}}
.crib-grid{grid-template-columns:repeat(auto-fill,minmax(80px,104px));justify-content:start}
@media(max-width:720px){
  .home{display:flex;flex-direction:column}
  .home>.col{display:contents}
  .h-hello{order:1}.h-alerts{order:2}.h-status{order:3}.h-bul{order:4}.h-feed{order:5}.h-mystatus{order:6}.h-cool{order:7}
}

/* =====================================================================
   FriendCrib palette ("Site Look: FriendCrib"). Flat, 1px borders, square corners.
   Blue = you/profile info · Orange = friends/social · Peach = comments · White = content.
   Applies to the site and to plain Classic Crib cribs; themed cribs keep their own colors.
   ===================================================================== */
body.site-friendcrib{
  --crib-blue:#174A8B; --crib-blue-deep:#10376B; --profile-blue:#6D9FD1; --sky-blue:#B8D6F2; --ice-blue:#E1EFFB;
  --crib-orange:#F47A20; --soft-orange:#F6A04D; --peach:#FCE2C5; --web-gray:#F2F2F2; --retro-red:#C9362B;
  --navy:#174A8B; --orange:#F47A20; --ink:#222222; --muted:#666666; --line:#6D9FD1; --link:#174A8B;
}
body.site-friendcrib:not(.themed){background:var(--web-gray);color:var(--ink)}
/* header: white, with the two-tone logo */
body.site-friendcrib header.top{background:#E1EFFB;color:var(--ink);border:1px solid var(--profile-blue);border-bottom:0;padding:12px 16px}
body.site-friendcrib .logo .wm{color:var(--crib-blue)}
body.site-friendcrib .logo .wm span{color:var(--crib-orange)}
body.site-friendcrib .logo .logo-ico{color:var(--crib-orange)}
body.site-friendcrib .who-am-i{color:var(--muted)}
body.site-friendcrib .who-am-i a{color:var(--crib-blue)}
body.site-friendcrib .search input{border:1px solid var(--profile-blue)}
body.site-friendcrib .search button,body.site-friendcrib:not(.themed) .btn{background:var(--crib-orange);color:#fff}
body.site-friendcrib:not(.themed) .btn:hover{background:#d9650f}
body.site-friendcrib:not(.themed) .btn.danger{background:var(--retro-red)}
/* main navigation: Crib Blue */
body.site-friendcrib nav.bar{background:var(--crib-blue)}
body.site-friendcrib nav.bar a{padding:2px 4px}
body.site-friendcrib nav.bar a:hover{background:var(--crib-blue-deep);text-decoration:none}
/* boxes: white content, 1px borders, colored title bars */
body.site-friendcrib:not(.themed) .box{background:#fff;border:1px solid var(--profile-blue)}
body.site-friendcrib:not(.themed) .box h2{background:var(--sky-blue);color:var(--crib-blue);border-bottom:1px solid var(--profile-blue)}
body.site-friendcrib:not(.themed) .box:has(>h2.o),body.site-friendcrib:not(.themed) .box:has(>summary>h2.o){border-color:var(--soft-orange)}
body.site-friendcrib:not(.themed) .box h2.o{background:var(--soft-orange);color:#222;border-bottom-color:var(--soft-orange)}
body.site-friendcrib:not(.themed) table.det th{background:var(--ice-blue);color:var(--crib-blue)}
body.site-friendcrib:not(.themed) table.det tr+tr th,body.site-friendcrib:not(.themed) table.det tr+tr td{border-top:1px solid var(--ice-blue)}
/* comments: peach */
body.site-friendcrib:not(.themed) .comment{background:var(--peach);border:0;padding:8px;margin-top:6px}
body.site-friendcrib:not(.themed) .comment:first-of-type{border-top:0}
/* text, links, alerts */
body.site-friendcrib:not(.themed) a{color:var(--link)}
body.site-friendcrib:not(.themed) .when,body.site-friendcrib:not(.themed) .hint{color:var(--muted)}
body.site-friendcrib .alert-line,body.site-friendcrib .tag{color:var(--retro-red)}
body.site-friendcrib .tag{background:var(--retro-red);color:#fff}
body.site-friendcrib .tag.pin{background:var(--crib-orange)}
body.site-friendcrib .tag.new{background:var(--crib-blue,#1d5fbf)}
body.site-friendcrib .flash{background:var(--ice-blue);border:1px solid var(--profile-blue);color:var(--ink)}
body.site-friendcrib:not(.themed) .net,body.site-friendcrib:not(.themed) .name,body.site-friendcrib:not(.themed) .hero-title,body.site-friendcrib:not(.themed) .hello{color:var(--crib-blue)}
/* flat: no gradients, no shadows, thin borders */
body.site-friendcrib .glitter{background:none;-webkit-text-fill-color:currentColor;color:var(--crib-orange);animation:none}
body.site-friendcrib .im-window{box-shadow:none;border:1px solid var(--profile-blue)}
body.site-friendcrib .im-title{background:var(--crib-blue)}
body.site-friendcrib .im-log,body.site-friendcrib .im-send textarea,body.site-friendcrib .im-preview{border:1px solid var(--profile-blue)}
body.site-friendcrib .badge88 span{background:#fff}
body.site-friendcrib .badge88 i{background:var(--crib-blue)}
body.site-friendcrib .badge88:hover span,body.site-friendcrib .badge88:focus-visible span{background:var(--crib-orange);color:#fff}
body.site-friendcrib:not(.themed) .stack input,body.site-friendcrib:not(.themed) .stack textarea,body.site-friendcrib:not(.themed) .stack select,
body.site-friendcrib:not(.themed) form.add textarea,body.site-friendcrib:not(.themed) form.add input{border:1px solid var(--profile-blue)}
body.site-friendcrib:not(.themed) .avatar{border:1px solid var(--crib-orange);text-shadow:none}
body.site-friendcrib:not(.themed) .friend .pic,body.site-friendcrib:not(.themed) .thumb,body.site-friendcrib:not(.themed) .person .pic{border:1px solid var(--profile-blue)}
body.site-friendcrib .song,body.site-friendcrib .player{background:#1d2433}
body.site-friendcrib .event-date{border:1px solid var(--profile-blue)}
body.site-friendcrib .event-date span{background:var(--crib-orange)}
body.site-friendcrib .counter{color:#4dff6a}
@media(max-width:600px){body.site-friendcrib nav.bar::after{background:var(--crib-blue);padding-left:12px}}
body.site-friendcrib nav.bar a,body.site-friendcrib:not(.themed) nav.bar a{color:#fff}
body.site-friendcrib:not(.themed) a.pic,body.site-friendcrib:not(.themed) .avatar,body.site-friendcrib:not(.themed) .pic{color:#fff}
body.site-friendcrib:not(.themed) .alert-line{color:var(--retro-red)}
body.site-friendcrib .badge88 span{color:var(--ink)}
.visit{font-size:11px;font-weight:bold;white-space:nowrap}
.site-counter{text-align:center;font-size:11px;margin-top:18px;color:var(--muted)}
body.site-friendcrib nav.bar{gap:4px 6px}
@media(max-width:600px){body.site-friendcrib nav.bar{gap:0 8px}}

/* Custom crib CSS: the safety links can't be hidden or disguised. */
#crib-safety, #crib-safety a, #crib-safety .linkbtn, #crib-safety a:hover, #crib-safety .linkbtn:hover { opacity: 1 !important; visibility: visible !important; color: #C9362B !important; font-size: 12px !important; text-shadow: none !important; background: #fff !important; text-decoration: underline !important; font-family: Verdana, Tahoma, sans-serif !important; }
#crib-safety { display: block !important; border: 0 !important; padding: 2px 4px !important; }
textarea.code { font-family: "Courier New", Courier, monospace; font-size: 12px; width: 100%; }
.css-help { margin: 6px 0 10px; font-size: 12px; }
.css-help summary { cursor: pointer; font-weight: bold; }
.css-help code { background: #F2F2F2; padding: 0 2px; }

/* Crib Editor */
.css-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.css-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; background: #F2F2F2; border: 1px solid #ccc; padding: 6px; }
.css-tools label { display: flex; flex-direction: column; font-size: 11px; font-weight: bold; gap: 2px; }
.css-tools select, .css-tools input[type=text] { font: inherit; font-size: 12px; padding: 3px; max-width: 170px; }
.css-tools input[type=color] { width: 60px; height: 26px; padding: 0; border: 1px solid #999; }
.css-range { display: flex; align-items: center; gap: 4px; } .css-range input { width: 110px; } .css-range output { font-size: 12px; min-width: 36px; }
.css-snips { font-size: 11px; margin: 6px 0; }
.css-code { display: flex; border: 1px solid #999; background: #1e1e1e; margin-top: 4px; }
.css-lines { margin: 0; padding: 6px 6px 6px 4px; min-width: 28px; text-align: right; color: #777; background: #2a2a2a; font: 12px/1.5 "Courier New", Courier, monospace; overflow: hidden; user-select: none; border-right: 1px solid #444; }
.css-code textarea.code { border: 0; margin: 0; background: #1e1e1e; color: #9cdcfe; caret-color: #fff; font: 12px/1.5 "Courier New", Courier, monospace; padding: 6px; resize: vertical; min-height: 260px; white-space: pre; overflow: auto; }
.css-status { font-size: 12px; margin-top: 6px; padding: 5px 6px; border: 1px solid #ccc; background: #F2F2F2; }
.css-status.ok { color: #1b6e20; border-color: #8bc48f; background: #eef8ee; }
.css-status.bad { color: #C9362B; border-color: #e3a49e; background: #fdf0ef; } .css-status ul { margin: 4px 0 0 18px; padding: 0; }
.css-preview-wrap { border: 1px solid #999; position: sticky; top: 8px; }
.css-preview-title { background: #222; color: #fff; font-size: 11px; font-weight: bold; padding: 3px 6px; letter-spacing: 1px; text-transform: uppercase; }
.css-preview { padding: 8px; background: var(--bg, #E1EFFB); max-height: 560px; overflow: auto; }
.css-preview .box { margin-bottom: 8px; } .css-preview .name { font-size: 20px; margin: 0 0 6px; }
.css-preview .top8 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .css-preview .friend { text-align: center; font-size: 11px; }
.css-preview .friend .avatar { width: 40px; height: 40px; margin: 0 auto 2px; display: flex; align-items: center; justify-content: center; }
@media (max-width: 760px) { .css-editor { grid-template-columns: 1fr; } .css-preview-wrap { position: static; } }

/* Status on a crib: big and easy to spot */
.status-line{margin-top:10px;font-size:14px;background:#E1EFFB;border:1px solid #6D9FD1;border-left:4px solid #174A8B;padding:8px 10px;margin-bottom:8px;line-height:1.4}
.status-line b{color:#174A8B}
.status-line .when{font-size:11px}
.empty-status{background:#fff;border-style:dashed;font-size:13px}

/* Crib picture box: picture left, facts right, status and links below */
.id-facts{font-size:12px;min-width:0}
.id-facts .status{font-size:13px;margin-bottom:6px}
.id-facts .fact{margin-top:6px;line-height:1.35}
.id-facts .fact b{font-size:11px;color:#666;font-weight:bold}
.id-facts .presence{margin-top:6px}
.id-foot{font-size:12px;border-top:1px solid #ddd;margin-top:10px;padding-top:8px;display:grid;gap:4px}

/* Site background texture: a soft old-web pinstripe and dot grid (plain cribs and site pages only, not themed cribs) */
body.site-friendcrib:not(.themed){background-color:#EEF1F4;background-image:radial-gradient(rgba(23,74,139,.09) 1px,transparent 1.2px),repeating-linear-gradient(45deg,rgba(255,255,255,.55) 0 2px,transparent 2px 6px);background-size:12px 12px,auto}

/* Menu stays on one line on wider screens; items spread evenly */
@media(min-width:601px){
  body.site-friendcrib nav.bar,nav.bar{flex-wrap:nowrap;justify-content:space-between;gap:0 2px;overflow-x:auto;scrollbar-width:none;padding:6px 10px}
  nav.bar::-webkit-scrollbar{display:none}
  nav.bar a,body.site-friendcrib nav.bar a{flex:none;font-size:11px;padding:2px 3px}
}
@media(min-width:601px) and (max-width:1050px){nav.bar a .ico{display:none}}
@media(min-width:601px) and (max-width:720px){nav.bar a,body.site-friendcrib nav.bar a{font-size:10px;padding:2px 1px}}
#css{margin-top:28px;border-top-width:3px}
#customize > .grid + #css{margin-top:28px}

/* The Neighborhood */
.hood-page{max-width:760px;margin:16px auto 0}
.hood-head h1{display:flex;align-items:center;gap:8px;font-size:22px;margin:0 0 6px;color:var(--crib-blue,#174A8B)}
.hood-head h1 .ico{width:32px;height:32px}
.hood-head p{margin:0 0 10px;font-size:13px}
.hood-status{display:flex;gap:6px;align-items:center;flex-wrap:wrap;background:#E1EFFB;border:1px solid #6D9FD1;padding:8px}
.hood-status label{font-weight:bold;font-size:13px;color:#174A8B}
.hood-status input{flex:1;min-width:160px;font:inherit;padding:5px;border:1px solid #6D9FD1}
.hood-tabs{display:flex;flex-wrap:wrap;gap:4px;margin-top:10px}
.hood-tabs a{font-size:12px;padding:3px 8px;border:1px solid #6D9FD1;background:#fff;text-decoration:none;color:#174A8B}
.hood-tabs a.on,body.site-friendcrib .hood-tabs a.on{background:#174A8B;color:#fff;border-color:#174A8B;font-weight:bold}
.hood-day{display:flex;align-items:center;gap:8px;margin:18px 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#666;background:none!important;border:0;padding:0}
.hood-day::after{content:'';flex:1;border-top:1px solid #6D9FD1}
.hood-day span{background:#F47A20;color:#fff;padding:3px 8px}
.hood-post{display:flex;gap:10px;background:#fff;border:1px solid #6D9FD1;border-left:4px solid #6D9FD1;padding:10px;margin-bottom:8px}
.hood-post.k-status{border-left-color:#174A8B}.hood-post.k-pic{border-left-color:#F47A20}.hood-post.k-blog{border-left-color:#6D9FD1}
.hood-post.k-bulletin{border-left-color:#F6A04D}.hood-post.k-friend{border-left-color:#C9362B}.hood-post.k-event,.hood-post.k-survey{border-left-color:#B8D6F2}
.hood-post .avatar{flex:none;width:48px;height:48px;display:flex;align-items:center;justify-content:center;font-size:22px;text-decoration:none}
.hood-body{min-width:0;flex:1}
.hood-line{font-size:13px;line-height:1.45;overflow-wrap:anywhere}
.hood-ico{display:inline-flex;vertical-align:-3px;color:#174A8B;margin-right:2px}
.k-pic .hood-ico,.k-bulletin .hood-ico{color:#F47A20}.k-friend .hood-ico{color:#C9362B}
.hood-status-text{font-size:15px}
.hood-thumb{display:block;margin-top:6px;border:1px solid #6D9FD1;width:110px;height:110px;object-fit:cover}
.hood-meta{font-size:11px;color:#666;margin-top:6px}
.hood-meta .stopby{font-weight:bold;white-space:nowrap}.hood-meta .stopby .ico{vertical-align:-3px}
.hood-end{text-align:center;font-size:12px;color:#666;margin:16px 0}.hood-end .ico{vertical-align:-3px}
.box h2 .more{float:right;font-size:11px;font-weight:normal;color:inherit}
@media(max-width:600px){.hood-page{margin-top:8px}.hood-post .avatar{width:36px;height:36px;font-size:16px}}
@media(min-width:981px) and (max-width:1180px){nav.bar a,body.site-friendcrib nav.bar a{font-size:10.5px;padding:2px 1px}nav.bar a .ico{margin-right:3px}}
@media(min-width:601px) and (max-width:840px){nav.bar a,body.site-friendcrib nav.bar a{font-size:9.5px;padding:2px 0}body.site-friendcrib nav.bar,nav.bar{padding:6px 6px}}
@media(min-width:601px) and (max-width:680px){nav.bar a,body.site-friendcrib nav.bar a{font-size:8.5px}}

/* Neighborhood with your sidebar */
.hood-grid .hood-head{margin-top:0}
.hood-side .hood-status{margin-top:10px;flex-direction:column;align-items:stretch}
.hood-side .hood-status input{min-width:0}
.hood-side .hello{font-size:15px}
@media(max-width:760px){.hood-grid .hood-main{order:-1}}
/* crib pictures */
.avatar.has-photo,.pic.has-photo{padding:0;overflow:hidden;background:#fff!important}
.avatar.has-photo img,.pic.has-photo img{width:100%;height:100%;object-fit:cover;display:block}
.pending-note{font-size:11px;color:#C9362B;margin:4px 0}
.req-note{margin-bottom:6px;font-size:12px}.req-note summary{cursor:pointer}.req-note input{width:100%;margin-top:4px;font:inherit;padding:4px}
.req-quote{font-size:12px;font-style:italic;color:#666;margin-top:2px}
.sub-bar{margin:0 0 10px;font-size:12px}
.cl-cats a.on{font-weight:bold;text-decoration:none}
.det.interests th{width:90px}
.hood-head h2 .ico{vertical-align:-3px}
.hood-tabs a:hover{border-color:#F47A20}
.hood-tabs a.on,body.site-friendcrib .hood-tabs a.on{background:#F47A20;border-color:#F47A20;color:#fff}
.hood-empty{border-left:4px solid #F47A20;background:#FCE2C5}
.hood-empty .in{background:#FCE2C5}

/* Stickers */
.sticker{display:inline-flex;align-items:center;gap:4px;background:var(--st,#F47A20);color:#fff;font:bold 10px/1 Verdana,Tahoma,sans-serif;letter-spacing:.5px;padding:5px 8px;border:2px solid #fff;outline:1px solid var(--st,#F47A20);margin:3px;transform:rotate(-2deg);text-shadow:1px 1px 0 rgba(0,0,0,.25)}
.sticker:nth-child(even){transform:rotate(2deg)}
.sticker .ico{width:16px;height:16px}
.sticker-wall{display:flex;flex-wrap:wrap;gap:2px;padding:4px 0}
.sticker-give{margin-top:8px}.sticker-give select{font:inherit;font-size:12px;padding:4px}
/* Knock Knock */
.door .knock-form label{font-size:12px;font-weight:bold;display:block;margin-bottom:4px}
.door .knock-form input{font:inherit;padding:5px;border:1px solid #6D9FD1;min-width:0}
.knock{display:flex;gap:8px;align-items:flex-start;padding:6px 0;border-bottom:1px dotted #ccc;font-size:12px}
.knock .pic{width:36px;height:36px;font-size:16px;flex:none}
.knock.new{background:#FCE2C5;padding:6px}
.knock-note{font-style:italic;margin-top:2px}
/* Friends since */
.pals-line{display:block;margin-top:8px;font-size:12px;font-weight:bold}.pals-line .ico{vertical-align:-3px;color:#C9362B}
.next-random{display:inline-block;margin-top:8px;background:#F47A20;color:#fff!important;padding:4px 10px;font-weight:bold;font-size:12px;text-decoration:none}
.pals{display:flex;align-items:center;justify-content:center;gap:12px;margin:8px 0}
.pals .pic{width:80px;height:80px;font-size:32px}
.pals-plus{font:bold 28px Verdana;color:#C9362B}
.pals-since{text-align:center;font-size:15px}
/* My Week in Songs */
.tape{background:#222;border:1px solid #000;padding:8px 10px 10px;color:#fff;position:relative}
.tape-label{background:#FCE2C5;color:#222;font:bold 11px "Courier New",monospace;text-transform:uppercase;letter-spacing:1px;padding:3px 6px;margin-bottom:6px;border-bottom:2px solid #F47A20}
.tape .mix-list{margin:0;padding-left:22px;font:12px/1.6 "Courier New",Courier,monospace}
.tape .mix-list a{color:#F6A04D}
.mix-row{margin-bottom:4px}.mix-row input{font:inherit;padding:4px;min-width:0;border:1px solid #6D9FD1}.mix-n{width:18px;font-weight:bold}
/* Easter egg */
.egg-spot{cursor:help}
.egg-box{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.egg-box[hidden]{display:none}
.egg-inner{background:#fff;border:3px solid #F47A20;padding:16px 18px;max-width:360px;text-align:center;font-size:13px;color:#222}
.egg-inner b{color:#F47A20;font-size:15px}.egg-inner .ico{vertical-align:-3px}
/* Time Capsule */
.capsule-banner{background:#222;color:#fff;font-size:12px;padding:8px 12px;margin-top:16px}.capsule-banner a{color:#F6A04D}.capsule-banner .ico{vertical-align:-3px}
.capsule-list{list-style:none;padding:0}.capsule-list li{padding:6px 0;border-bottom:1px dotted #ccc}.capsule-list .ico{vertical-align:-3px}
.cotw .pic{width:64px;height:64px;font-size:26px}
.no-algo{font-size:12px;margin:8px 0 10px;line-height:1.5}
.no-algo span{display:inline-block;background:#F47A20;color:#fff;font-weight:bold;padding:1px 6px;margin-right:4px;text-transform:uppercase;letter-spacing:.5px;font-size:11px}
.crib-custom .tape .mix-list a,body .tape .mix-list a{color:#F6A04D}
.site-ver{font-family:"Courier New",Courier,monospace}

/* Readability (contrast) and tap-size fixes. Bright Crib Orange stays for bars and the logo;
   orange text and white-on-orange buttons use a deeper orange so they're easy to read. */
body.site-friendcrib{--orange-ink:#C2570C}
body.site-friendcrib .search button,body.site-friendcrib:not(.themed) .btn,body.site-friendcrib .hood-tabs a.on,body.site-friendcrib .next-random{background:var(--orange-ink)}
body.site-friendcrib .search button:hover,body.site-friendcrib:not(.themed) .btn:hover{background:#A34A0A}
body.site-friendcrib .glitter,body.site-friendcrib:not(.themed) .blurb h3,body.site-friendcrib .egg-inner b{color:var(--orange-ink)}
body.site-friendcrib .no-algo span,body.site-friendcrib .hood-day span{background:var(--orange-ink)}
.presence.p-online{background:#1E7E34}
.box h2.o .more{color:#10376B}
@media(max-width:600px){
  nav.bar a,body.site-friendcrib nav.bar a{padding:8px 2px;font-size:12px}
  footer a{display:inline-block;padding:6px 2px}
  .home-links a,.id-foot a{display:inline-block;padding:3px 0}
}
/* Letter avatars: a light shade over the member's color so the white letter stays readable */
.pic:not(.has-photo){box-shadow:inset 0 0 0 999px rgba(0,0,0,.22);text-shadow:1px 1px 0 rgba(0,0,0,.3)}
.box h2 .more{padding:4px 0;display:inline-block}
.alert-line{padding:4px 0}

/* Move-In Checklist */
.move-in .mi-head{margin:0 0 6px;font-size:13px}
.mi-bar{height:10px;background:#E1EFFB;border:1px solid #6D9FD1;margin-bottom:8px}
.mi-bar i{display:block;height:100%;background:#F47A20}
.mi-list{list-style:none;margin:0;padding:0;font-size:13px}
.mi-list li{display:flex;gap:8px;align-items:baseline;padding:5px 0;border-bottom:1px dotted #ccc;flex-wrap:wrap}
.mi-check{flex:none;width:16px;height:16px;border:1px solid #6D9FD1;background:#fff;color:#1E7E34;font-weight:bold;font-size:12px;line-height:14px;text-align:center}
.mi-list li.done .mi-check{background:#eef8ee;border-color:#8bc48f}
.mi-list li.done s{color:#666}
.mi-list .hint{flex-basis:100%;padding-left:24px;margin:0}
.mi-hide{margin-top:8px;text-align:right;font-size:11px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.bg-current{display:flex;align-items:center;gap:8px;margin-top:6px}.bg-current img{border:1px solid #6D9FD1;object-fit:cover}
/* Moderation stats */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.stat{border:1px solid #6D9FD1;background:#fff;padding:8px 10px;display:flex;flex-direction:column}
.stat b{font:22px "Bungee",Impact,sans-serif;color:#174A8B}
.stat span{font-size:12px;font-weight:bold}.stat small{font-size:11px;color:#666}
.stat.alert{border-color:#C9362B;background:#fdf0ef}.stat.alert b{color:#C9362B}

/* Drag-and-drop Top 8 */
.t8-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.t8-slot{border:2px dashed #6D9FD1;background:#F2F7FC;min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;padding:18px 4px 6px}
.t8-slot.over,.t8-tray.over{border-color:#F47A20;background:#FCE2C5}
.t8-no{position:absolute;top:2px;left:5px;font:14px "Bungee",Impact,sans-serif;color:#C2570C}
.t8-empty{font-size:11px;color:#666;text-align:center}
.t8-chip{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:grab;font-size:12px;text-align:center;padding:4px;max-width:100%;border:2px solid transparent;user-select:none}
.t8-chip span{overflow-wrap:anywhere}
.t8-chip.dragging{opacity:.4}
.t8-chip.picked{border-color:#F47A20;background:#FCE2C5}
.t8-chip:focus-visible{outline:2px solid #174A8B}
.t8-face{width:64px;height:64px;display:grid;place-items:center;color:#fff;font:26px "Bungee",Impact,sans-serif;overflow:hidden;border:1px solid #6D9FD1;box-shadow:inset 0 0 0 999px rgba(0,0,0,.18)}
.t8-face img{width:100%;height:100%;object-fit:cover}
.t8-face:has(img){box-shadow:none}
.t8-tray-title{font-size:13px;margin:14px 0 6px}
.t8-tray{display:flex;flex-wrap:wrap;gap:6px;border:1px solid #6D9FD1;background:#fff;padding:8px;min-height:90px}
.t8-tray .t8-face{width:48px;height:48px;font-size:20px}
@media(max-width:600px){.t8-slots{grid-template-columns:repeat(2,1fr)}}
[hidden]{display:none!important}
.pass-it-on{margin-top:12px;padding:10px;border:1px dashed #F47A20;background:#FCE2C5;font-size:13px}
.pass-it-on .ico{vertical-align:-3px}
.pio-pick{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.pio-pick select{font:inherit;font-size:12px;padding:4px;flex:1;min-width:120px}

/* Crib Radio */
.radio-card{display:flex;gap:14px;align-items:center;background:#222;color:#fff;padding:14px;border:1px solid #000}
.radio-face{width:96px;height:96px;flex:none;display:grid;place-items:center;font:40px "Bungee",Impact,sans-serif;color:#fff;overflow:hidden;border:2px solid #F47A20}
.radio-face img{width:100%;height:100%;object-fit:cover}
.radio-now{font:bold 10px Verdana,sans-serif;letter-spacing:2px;color:#F6A04D}
.radio-song{font-size:17px;font-weight:bold;margin:4px 0}
.radio-who a{color:#B8D6F2}.radio-card .hint{color:#ccc}
.radio-head{margin-top:4px;font-style:italic}
.radio-controls{display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap}
.show-grid{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;font-size:12px;max-width:420px}.show-grid select{font:inherit;padding:3px}
.backup-codes{background:#222;color:#9cdcfe;padding:10px;font:14px/1.6 "Courier New",monospace;columns:2;max-width:320px}
.tfa-key{font:18px "Courier New",monospace;font-weight:bold;letter-spacing:1px;background:#E1EFFB;border:1px solid #6D9FD1;padding:6px 8px;margin:6px 0 2px;display:inline-block;word-break:break-all}
.tfa-steps{padding-left:20px;font-size:13px}.tfa-steps li{margin-bottom:8px}

/* ---- Friend Trading Cards: 2006 glossy, chunky borders, holo shine on the rare ones ---- */
.tcard{position:relative;width:240px;max-width:100%;margin:0 auto;padding:10px;color:#222;font:12px Verdana,Tahoma,sans-serif;
  background:linear-gradient(180deg,#fff 0%,#E1EFFB 48%,#B8D6F2 52%,#E1EFFB 100%);
  border:6px solid #174A8B;outline:2px solid #F47A20;outline-offset:-10px;box-shadow:3px 3px 0 #10376B;overflow:hidden}
.tcard::before{content:'';position:absolute;inset:0 0 55% 0;background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,0));pointer-events:none} /* the shiny 2006 gloss */
.tc-top{display:flex;justify-content:space-between;align-items:center;position:relative;font-weight:bold;font-size:10px}
.tc-num{background:#174A8B;color:#fff;padding:1px 5px;font-family:"Courier New",monospace}
.tc-rarity{color:#C2570C;text-shadow:1px 1px 0 #fff}
.tc-pic{display:grid;place-items:center;width:150px;height:150px;margin:8px auto 6px;border:3px solid #fff;outline:2px solid #174A8B;font:64px "Bungee",Impact,sans-serif;color:#fff;text-decoration:none;overflow:hidden;position:relative;box-shadow:inset 0 0 0 999px rgba(0,0,0,.15)}
.tc-pic.has-photo{box-shadow:none}.tc-pic img{width:100%;height:100%;object-fit:cover}
.tc-name{font:20px/1.1 "Bungee",Impact,sans-serif;text-align:center;color:#174A8B;text-shadow:2px 2px 0 #fff,3px 3px 0 #F6A04D;margin-top:2px;overflow-wrap:anywhere}
.tc-user{text-align:center;font-size:9px;color:#666;margin:2px 0 6px;overflow-wrap:anywhere}
.tc-stats{width:100%;border-collapse:collapse;background:rgba(255,255,255,.85);border:1px solid #6D9FD1;font-size:11px;position:relative}
.tc-stats th{text-align:left;color:#174A8B;padding:2px 5px;width:62px;border-bottom:1px dotted #B8D6F2;vertical-align:top}
.tc-stats td{padding:2px 5px;border-bottom:1px dotted #B8D6F2;overflow-wrap:anywhere}
.tc-foot{margin-top:6px;text-align:center;font:bold 8px Verdana,sans-serif;letter-spacing:1.5px;color:#fff;background:#174A8B;padding:2px}
/* rarity frames */
.tcard.r-uncommon{border-color:#1E7E34;outline-color:#B8E0C0}
.tcard.r-rare{border-color:#C2570C;outline-color:#FCE2C5;background:linear-gradient(180deg,#fff 0%,#FCE2C5 48%,#F6A04D 52%,#FCE2C5 100%)}
.tcard.r-super{border-color:#7B5CFF;outline-color:#FFD166;background:linear-gradient(135deg,#ffd6ef,#d6f0ff,#e8ffd6,#fff1c4,#ffd6ef)}
.tcard.r-super::after{content:'';position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.7) 50%,transparent 60%);animation:holo 3.5s linear infinite;pointer-events:none}
@keyframes holo{from{transform:translateX(-60%)}to{transform:translateX(60%)}}
@media(prefers-reduced-motion:reduce){.tcard.r-super::after{animation:none}}
.card-page{display:flex;gap:24px;align-items:flex-start;margin-top:16px;flex-wrap:wrap;justify-content:center}
.card-side{flex:1;min-width:240px;max-width:420px;background:#fff;border:1px solid #6D9FD1;padding:14px}
.card-side h1{font:22px "Bungee",Impact,sans-serif;color:#174A8B;margin:0 0 6px}
.crew-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:10px}
.crew-mine .tcard{outline-style:dashed}
.crew-missing{display:flex;flex-wrap:wrap;gap:10px}
.crew-missing a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;width:70px;text-align:center}
.crew-missing .pic{width:56px;height:56px;display:grid;place-items:center;color:#fff;font:22px "Bungee",Impact,sans-serif}
.tc-pic,.tcard .tc-pic{color:#fff!important;text-shadow:2px 2px 0 rgba(0,0,0,.35)}
.crew-missing .pic{overflow:hidden;box-shadow:inset 0 0 0 999px rgba(0,0,0,.2)}.crew-missing .pic img{width:100%;height:100%;object-fit:cover}
/* Card stock texture: a faint halftone dot pattern under everything, like a real printed card */
.tcard{background-image:radial-gradient(rgba(23,74,139,.10) 1px,transparent 1.3px),linear-gradient(180deg,#fff 0%,#E1EFFB 48%,#B8D6F2 52%,#E1EFFB 100%);background-size:6px 6px,auto}
.tcard.r-rare{background-image:radial-gradient(rgba(194,87,12,.12) 1px,transparent 1.3px),linear-gradient(180deg,#fff 0%,#FCE2C5 48%,#F6A04D 52%,#FCE2C5 100%);background-size:6px 6px,auto}
.tcard.r-super{background-image:radial-gradient(rgba(123,92,255,.14) 1px,transparent 1.3px),linear-gradient(135deg,#ffd6ef,#d6f0ff,#e8ffd6,#fff1c4,#ffd6ef);background-size:6px 6px,auto}
.tc-stats{background:rgba(255,255,255,.9)}
/* Turnstile ("I'm human" check): fits the form width, never pokes out of a narrow box */
.ts-wrap{max-width:100%;overflow:hidden;margin:8px 0}
.ts-wrap .cf-turnstile{margin:0;width:100%;min-height:65px}
@media(max-width:340px){.ts-wrap .cf-turnstile{transform:scale(.9);transform-origin:left top}}
.crib-addr{overflow-wrap:normal;word-break:normal}
.pw-tools{font-size:12px;margin:4px 0 2px}.pw-tools .hint{display:block;margin-top:2px}
/* Sign in with Google */
.google-btn{display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid #6D9FD1;background:#fff;color:#222!important;font-weight:bold;font-size:13px;padding:7px 10px;text-decoration:none;margin-bottom:4px}
.google-btn:hover{background:#E1EFFB}
.g-mark{font:bold 15px Arial,sans-serif;color:#4285F4}
.or-line{display:flex;align-items:center;gap:8px;color:#666;font-size:11px;margin:8px 0}
.or-line::before,.or-line::after{content:'';flex:1;border-top:1px solid #ccc}
.google-note{background:#E1EFFB;border:1px solid #6D9FD1;padding:8px;font-size:12px;margin:6px 0}
.confirm-email form{display:inline}
.devices form{display:inline;margin-left:6px}
.sil{width:100%;height:100%;display:block}
a:has(>.sil),.avatar:has(>.sil),.pic:has(>.sil),.tc-pic:has(>.sil){padding:0;overflow:hidden;box-shadow:none!important}
table.det th{width:32%}
.mi-reopen{margin:10px 0;font-size:12px}
@media(min-width:900px){.settings-page{columns:2;column-gap:16px}.settings-page>.box{break-inside:avoid;display:inline-block;width:100%}}
/* Phones and tablets zoom in on any text box under 16px (tapping or autofill). Keep them at 16px on touch screens. */
@media (pointer:coarse){input:not([type=checkbox]):not([type=radio]):not([type=color]),select,textarea,textarea.code,.css-code textarea.code{font-size:16px!important}}
/* Mobile pass */
.people{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
@media(max-width:600px){.people{grid-template-columns:repeat(3,1fr);gap:10px}}
.safety-links{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:center}
table.topics th{width:auto}table.topics td:first-child{width:70%}table.topics td:not(:first-child),table.topics th:not(:first-child){text-align:center;white-space:nowrap}
@media(max-width:600px){table.topics .when,table.topics th:last-child{display:none}}
.text-in{font:inherit;padding:6px;border:1px solid var(--profile-blue,#999);min-width:0}
/* Tablets: single-box pages line up with the header instead of floating in the middle */
@media(max-width:1100px){.wrap.narrow,.wrap[style*="max-width"]{max-width:none!important}}
.b-native{background:var(--crib-orange,#F47A20)!important;color:#fff!important}.b-native i{color:#fff}
.our-sites{margin:8px auto 6px}
.our-sites summary{cursor:pointer;display:inline-block;padding:6px 10px;color:var(--link);text-decoration:underline}
.our-sites div{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;margin-top:6px}
.our-sites summary{list-style:none}.our-sites summary::-webkit-details-marker{display:none}
.our-sites summary::before{content:"▸";color:var(--crib-orange,#F47A20);display:inline-block;margin-right:5px;transition:transform .15s;text-decoration:none}
.our-sites[open] summary::before{transform:rotate(90deg)}
.our-sites div a::after{content:" »";color:var(--crib-orange,#F47A20);font-weight:bold;text-decoration:none;display:inline-block;margin-left:2px}
/* Today on FriendCrib */
.today .in{display:grid;gap:12px}
.today-label{margin:0;font-size:11px;font-weight:bold;text-transform:uppercase;letter-spacing:.04em;color:var(--crib-orange,#F47A20)}
.today-ask{margin:2px 0 6px;font-weight:bold;font-size:14px}
.today-form{display:flex;gap:6px}.today-form input{flex:1;min-width:0;font:inherit;padding:5px;border:1px solid var(--profile-blue,#999)}
.today-said{list-style:none;margin:8px 0 0;padding:0;font-size:12px}.today-said li{padding:3px 0;border-top:1px dotted var(--ice-blue,#ddd)}
.today-vote{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.today-or{font-size:12px;color:var(--muted,#666)}
.today-bar{display:grid;grid-template-columns:minmax(70px,auto) 1fr 38px;gap:6px;align-items:center;font-size:12px;margin:3px 0}
.tb-track{height:12px;border:1px solid var(--profile-blue,#999);background:#fff}.tb-track i{display:block;height:100%;background:var(--profile-blue,#6fa0d8)}
.today-bar.picked .tb-track i{background:var(--crib-orange,#F47A20)}.today-bar.picked .tb-label{font-weight:bold}
.tb-pct{text-align:right}.today-foot{margin:0;border-top:1px solid var(--ice-blue,#ddd);padding-top:6px}
.today-q,.today-p{min-width:0}
.botw-swatch{width:48px;height:48px;display:grid;place-items:center;flex:none;color:#fff;text-decoration:none}
/* Quizzes */
.quiz-q{border:0;border-top:1px solid var(--ice-blue,#ddd);margin:0;padding:10px 0}.quiz-q legend{padding:0 0 4px;font-size:13px}
.quiz-q .check{display:flex;gap:8px;align-items:flex-start;padding:4px 0}
.quiz-form .btn{margin-top:10px}
.quiz-you{margin:0;font-size:12px;color:var(--muted,#666)}
.quiz-answer{margin:2px 0 8px;font:22px var(--display,inherit);color:var(--crib-orange,#F47A20)}
.quiz-join{background:var(--ice-blue,#eef4fb);border:1px solid var(--profile-blue,#9bbbe0);padding:10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.quiz-list{list-style:none;margin:0;padding:0}.quiz-list li{padding:8px 0;border-top:1px solid var(--ice-blue,#ddd)}
.lock-tag{font-size:11px;font-weight:normal;color:var(--muted,#666);white-space:nowrap}.lock-tag.me{color:var(--crib-orange,#c55a00)}
/* FriendCrib Mag */
.mag-title{font:24px/1.2 var(--display,inherit);color:var(--crib-blue,#1d4f91);margin:4px 0 6px}
.mag-dek{font-size:15px;margin:0 0 4px}
.mag-article .in>p,.mag-article .in>ul{font-size:14px;line-height:1.6}
.mag-h{font-size:16px;color:var(--crib-orange,#c55a00);margin:18px 0 4px;background:none;padding:0;border:0}
.mag-ad{border:1px dashed var(--crib-orange,#F47A20);background:#fff8f0;padding:10px;margin:14px 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px}
.mag-end{margin:18px 0 12px;padding:10px;background:var(--ice-blue,#eef4fb);border:1px solid var(--profile-blue,#9bbbe0)}
.mag-join p{margin:0 0 8px}
.mag-list{list-style:none;margin:0;padding:0}.mag-list li{padding:10px 0;border-top:1px solid var(--ice-blue,#ddd);display:flex;gap:12px;align-items:flex-start}
.mag-thumb{flex:0 0 96px;display:block;width:96px;height:96px;overflow:hidden;border:1px solid var(--ice-blue,#ddd);background:#eee}
.mag-thumb img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
.mag-item{flex:1;min-width:0}
@media (max-width:480px){.mag-thumb{flex-basis:72px;width:72px;height:72px}}
table.mag-admin th{width:auto}
/* Blog toolbar */
.fmt-bar{display:flex;flex-wrap:wrap;gap:3px;padding:4px;background:var(--ice-blue,#eef4fb);border:1px solid var(--profile-blue,#9bbbe0);border-bottom:0}
.fmt-bar button,.fmt-bar select{font:12px var(--body,inherit);min-width:30px;height:28px;padding:0 6px;border:1px solid var(--profile-blue,#9bbbe0);background:#fff;color:var(--ink,#222);cursor:pointer}
.fmt-bar button:hover{background:#fff8f0;border-color:var(--crib-orange,#F47A20)}
.fmt-bar .fmt-face{font-family:"Courier New",monospace}
@media (pointer:coarse){.fmt-bar button,.fmt-bar select{height:34px;font-size:14px!important}}
.stack .fmt-bar select{width:auto}
/* Find me online + leaving page */
.crib-links{list-style:none;margin:0;padding:0;font-size:12px}.crib-links li{display:flex;gap:8px;padding:4px 0;border-top:1px solid var(--ice-blue,#ddd)}.crib-links li:first-child{border-top:0}
.ln-k{min-width:84px;font-weight:bold;color:var(--link)}
.go-host{font-size:20px;font-weight:bold;margin:4px 0}.go-url{word-break:break-all}
/* Mag building blocks */
.mag-art{margin:16px 0}
.art-away{border:1px solid #7a96c2;background:#fffde8;max-width:340px;font:13px Arial,sans-serif;box-shadow:2px 2px 0 rgba(0,0,0,.15)}
.aw-bar{background:linear-gradient(#5b86c9,#2f5aa0);color:#fff;font-weight:bold;padding:3px 8px;font-size:12px}
.aw-msg{padding:10px;color:#00008b;font-family:"Comic Sans MS","Chalkboard SE",Arial,sans-serif}
.art-window{border:1px solid #6b7a8f;background:#ece9d8;max-width:440px;font:12px Tahoma,Verdana,sans-serif;box-shadow:2px 2px 0 rgba(0,0,0,.15)}
.win-bar{display:flex;justify-content:space-between;background:linear-gradient(#3a6fd8,#1c47b5);color:#fff;font-weight:bold;padding:3px 6px}.win-bar i{font-style:normal;letter-spacing:4px}
.win-body{background:#fff;margin:4px;border:1px inset #ccc}.win-body div{padding:3px 6px;border-bottom:1px dotted #ddd;font-family:"Courier New",monospace;word-break:break-word}
.art-timeline{list-style:none;padding:0;border-left:3px solid var(--crib-orange,#F47A20);margin-left:6px}
.art-timeline li{padding:4px 0 8px 14px;position:relative;display:flex;gap:10px;flex-wrap:wrap}
.art-timeline li::before{content:"";position:absolute;left:-8px;top:8px;width:11px;height:11px;background:var(--crib-orange,#F47A20)}
.art-timeline b{min-width:52px;color:var(--crib-blue,#1d4f91)}
.mag-table th,.mag-table td{width:auto;font-size:13px}
.art-top8 figcaption{font-weight:bold;color:var(--crib-orange,#c55a00);margin-bottom:6px}
.art-top8 ol{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.art-top8 li{text-align:center;font-size:12px}.t8-pic{display:grid;place-items:center;aspect-ratio:1;background:#FDE6D3;color:var(--crib-orange,#F47A20);font:24px var(--display,inherit);border:1px solid #f0c9a8;margin-bottom:3px}
.t8-rank{color:var(--muted,#666)}
.art-counter{text-align:center;font-size:13px}
.art-cta{text-align:center}
.art-ask{background:var(--ice-blue,#eef4fb);border-left:4px solid var(--crib-orange,#F47A20);padding:10px}
.art-poll{border:1px solid var(--profile-blue,#9bbbe0);padding:10px;background:#fff}.poll-q{margin:0 0 8px;font-weight:bold}
.mag-help{white-space:pre-wrap;font-size:11px;background:#f6f6f6;padding:8px;border:1px solid #ddd}
@media(max-width:480px){.art-top8 ol{grid-template-columns:repeat(4,1fr);gap:5px}.t8-pic{font-size:18px}}
.art-timeline li{display:grid;grid-template-columns:56px 1fr;gap:8px;flex-wrap:nowrap}.art-timeline b{min-width:0}
.mag-img img{display:block;width:100%;height:auto;border:1px solid var(--line,#ccc);background:#eee}
.mag-img-tall img{width:100%;height:auto}
/* Tall and squarish photos: beside the text on tablets and up, alternating sides; full width on phones */
@media (min-width:640px){
  .mag-img-side{margin-top:4px;margin-bottom:12px}
  .mag-img-tall{width:40%;max-width:330px}
  .mag-img-wide{width:52%;max-width:420px}
  .mag-img-right{float:right;clear:right;margin-left:20px}
  .mag-img-left{float:left;clear:left;margin-right:20px}
  .mag-img-side img{width:100%;max-height:none;height:auto}
  .mag-img-side figcaption{text-align:left}
  .mag-article h2:not(.o),.mag-article h3,.mag-article .mag-art:not(.mag-img-side),.mag-article .tablewrap,.mag-article .mag-ad,.mag-article .mag-end{clear:both}
  .mag-article .in::after{content:"";display:block;clear:both}
}
.mag-img figcaption{font-size:12px;color:var(--muted,#555);margin-top:4px;overflow-wrap:anywhere;max-width:100%}.mag-img .credit{opacity:.8;font-size:10.5px;display:inline;overflow-wrap:anywhere;word-break:break-word}
.mag-video figcaption{font-size:12px;margin-top:4px}.mag-video .video-card{border-width:1px}
/* Back to top */
.to-top{position:fixed;right:16px;bottom:16px;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;width:46px;height:46px;background:var(--crib-orange,#F47A20);color:#fff;font:bold 11px var(--body,inherit);text-decoration:none;border:2px solid #fff;box-shadow:2px 2px 0 rgba(0,0,0,.25);line-height:1.1}
.to-top span{font-size:14px}
.to-top:hover,.to-top:focus-visible{background:var(--crib-blue,#1d4f91);color:#fff}
@media print{.to-top{display:none}}
a.to-top,a.to-top:visited,a.to-top:hover,a.to-top:focus-visible{color:#fff!important;text-decoration:none!important}
/* Throwback pages: sidebar on laptops and desktops, below the throwback on phones */
.mag-layout{display:grid;gap:16px}
.mag-main{min-width:0}
.mag-side .box{margin-top:16px}
@media(min-width:900px){.mag-layout{grid-template-columns:minmax(0,1fr) 300px;align-items:start}}
.side-perks{margin:6px 0 10px;padding-left:18px;font-size:12px}.side-perks li{margin:3px 0}
.side-btn{display:block;text-align:center;font-size:14px;padding:8px}
.side-links{list-style:none;margin:0;padding:0;font-size:12px}.side-links li{padding:5px 0;border-top:1px dotted var(--ice-blue,#ddd)}.side-links li:first-child{border-top:0}
.mag-check .bad{color:#c0392b}.mag-check td{word-break:break-word}

.mag-teaser{margin:4px 0 0;font-size:12.5px;line-height:1.45;color:var(--muted,#555)}

.mag-meta{margin:10px 0 18px;border:1px dashed var(--line);background:color-mix(in srgb,var(--sky) 45%,var(--panel));padding:8px 10px}
.mag-mood{display:flex;flex-wrap:wrap;gap:4px 18px;font:12px Verdana,Tahoma,sans-serif;margin-bottom:6px;padding-bottom:6px;border-bottom:1px dotted var(--line)}
.mag-mood b{color:var(--navy);font-weight:bold}.mag-mood i{color:var(--ink)}
.mag-byline{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.mag-56k{display:inline-block;font:bold 10px/1 Verdana,Tahoma,sans-serif;text-transform:uppercase;letter-spacing:.3px;background:#000;color:#7CFC00;padding:3px 6px;border:1px solid var(--navy)}
.webring{margin:22px auto 14px;max-width:460px;border:2px ridge var(--line);background:var(--sky);padding:8px 10px;text-align:center;font:13px Verdana,Tahoma,sans-serif}
.webring-title{margin-bottom:6px}.webring-links a{font-weight:bold}.webring-links span{color:var(--muted);margin:0 4px}
.today-tb{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--line);background:color-mix(in srgb,var(--sky) 40%,var(--panel));text-decoration:none;color:var(--ink)}
.today-tb:hover{border-color:var(--accent)}.today-tb img{width:56px;height:56px;object-fit:cover;flex:none;border:1px solid var(--line)}
.today-tb .today-label{display:block;margin:0 0 2px}.today-tb b{color:var(--link)}
.mag-sections{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}.mag-sections a{border:1px solid var(--line);background:color-mix(in srgb,var(--sky) 45%,var(--panel));padding:4px 9px;font-size:13px;text-decoration:none;font-weight:bold}
.mag-sections a:hover{border-color:var(--accent)}.mag-section-h{margin:22px 0 4px;padding:4px 8px;background:var(--bar);color:#fff;font-size:15px;scroll-margin-top:70px}
@media (max-width:900px){.mag-teaser{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}}
@media (max-width:480px){.mag-teaser{-webkit-line-clamp:2;line-clamp:2}}
.side-thumbs li a{display:flex;align-items:center;gap:8px}.side-thumbs img{flex:0 0 44px;width:44px;height:44px;object-fit:cover;border:1px solid var(--line);background:#eee}

/* Groups: pictures, header, categories, crib box */
.gpic{width:48px;height:48px;flex:none;display:grid;place-items:center;overflow:hidden;color:#fff;font:20px var(--display);text-decoration:none;border:2px solid var(--line)}
.gpic img{width:100%;height:100%;object-fit:cover;display:block}
.gpic.big{width:96px;height:96px;font-size:40px}
.group-title{display:flex;gap:12px;align-items:center;margin-bottom:6px}
.group-row{display:flex;gap:10px;align-items:flex-start}
.group-cats{line-height:1.8}.group-cats a.on{font-weight:bold;text-decoration:none}
.bulletin-text{font-size:15px;margin:0 0 4px}
.crib-groups{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center;font-size:12px}
.crib-group{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;overflow-wrap:anywhere}
@media (max-width:640px){.gpic.big{width:64px;height:64px;font-size:28px}}

.copy-link{width:100%;font:inherit;padding:6px;border:2px solid var(--line);background:var(--panel)}
@media (pointer:coarse){.copy-link{font-size:16px}}

/* Events: flyers, thumbs, invite list */
.event-flyer{display:block;max-width:100%;max-height:520px;margin:0 auto 12px;border:2px solid var(--line)}
.event-thumb{width:48px;height:48px;flex:none;overflow:hidden;border:2px solid var(--line)}
.event-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.invite-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px 12px;max-height:260px;overflow:auto;padding:4px}

/* Mag page: cover card, card grid, collapsible sections */
.mag-feature{display:block;position:relative;margin:12px 0 6px;border:2px solid var(--line);text-decoration:none;color:#fff;background:var(--bar);overflow:hidden}
.mag-feature img{display:block;width:100%;height:auto;aspect-ratio:16/7;object-fit:cover}
.mag-feature-text{display:block;padding:12px 14px;background:var(--bar)}
.mag-feature-tag{display:inline-block;background:var(--crib-orange,#F47A20);color:#fff;font-size:11px;font-weight:bold;text-transform:uppercase;padding:2px 6px;margin-bottom:6px}
.mag-feature b{display:block;font-size:22px;line-height:1.2;color:#fff}
.mag-feature-sum{display:block;margin-top:6px;font-size:14px;line-height:1.45;color:#e9f1fb}
.mag-feature:hover b{text-decoration:underline}
@media (min-width:900px){.mag-feature img{aspect-ratio:16/6}.mag-feature-text{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(9,30,60,.92) 35%)}.mag-feature img+.mag-feature-text{padding-top:40px}}
.mag-more{margin:4px 0 0}.mag-more summary{cursor:pointer;display:inline-block;padding:6px 12px;border:1px solid var(--line);background:color-mix(in srgb,var(--sky) 45%,var(--panel));font-weight:bold;font-size:13px;margin:8px 0}
.mag-more summary::-webkit-details-marker{display:none}.mag-more[open] summary{margin-bottom:4px}
.mag-top{text-align:right;font-size:12px;margin:6px 0 0}
.mag-join-mobile{display:none;margin:16px 0 4px;padding:12px;border:2px solid var(--crib-orange,#F47A20);background:color-mix(in srgb,var(--crib-orange,#F47A20) 10%,var(--panel))}
.mag-join-mobile .btn{margin-left:6px}
@media (max-width:899px){.mag-join-mobile{display:block}}
@media (min-width:600px){
  .mag-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:10px}
  .mag-grid li.mag-card{display:flex;flex-direction:column;gap:0;padding:0;border:1px solid var(--ice-blue,#ddd);background:var(--panel)}
  .mag-grid .mag-thumb{flex:none;width:100%;height:auto;aspect-ratio:16/9;border:0;border-bottom:1px solid var(--ice-blue,#ddd)}
  .mag-grid .mag-item{padding:8px 10px 10px}
  .mag-grid .mag-teaser{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
}
@media (max-width:599px){
  .mag-sections{position:sticky;top:0;z-index:5;flex-wrap:nowrap;overflow-x:auto;padding:6px 0;margin:10px -4px 4px;background:var(--panel);-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .mag-sections a{white-space:nowrap;flex:none}
  .mag-feature b{font-size:18px}
}
.confirm-email .code-form{display:inline-flex;gap:6px;align-items:center;margin:6px 0 2px;flex-wrap:wrap}
.confirm-email .code-form input{font-size:16px;width:8.5em;letter-spacing:.2em;text-align:center;padding:4px 6px}
.confirm-email .code-more{margin-top:4px}

/* FriendCrib social badges: square, flat Crib Blue squares like 2006 buttons, used in Find Me Online and the footer */
.soc-badge{display:inline-block;min-width:22px;height:22px;padding:0 4px;flex:0 0 auto;margin-right:6px;box-sizing:border-box;background:#174A8B;color:#fff;border:0;box-shadow:none;font:11px/22px var(--display);text-align:center;letter-spacing:.5px;vertical-align:middle;text-decoration:none}
.soc-x{font-family:"Segoe UI Symbol","Apple Symbols","Noto Sans Math",sans-serif;font-weight:700;font-size:13px}
.soc-website{background:#F47A20}
.crib-links li{align-items:center}.crib-links .soc-badge{width:34px}
.x-link{text-decoration:none!important}
.x-link .soc-badge{margin:0}
.x-link:hover .soc-badge,.x-link:focus .soc-badge{background:#F47A20}

/* About page writers and throwback bylines */
.writer{display:flex;gap:16px;align-items:flex-start;padding:14px 0;border-top:1px solid #dbe6f3;scroll-margin-top:80px}
.writer:first-child{border-top:0}
.writer-pic{width:160px;height:160px;object-fit:cover;flex:0 0 auto}
.writer-text h3{margin:0 0 6px}
.writer-text p{margin:6px 0}
.writer-topics{display:inline-block;padding:3px 10px;font-size:12px;font-weight:bold}
.writer-pink{background:#fde3ea;color:#8a1f45}.writer-blue{background:#dfeafd;color:#174A8B}.writer-green{background:#e2f5dc;color:#2f6b1f}
.writer-facts{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:#5d6a85}
.writer:target{background:#fff7ec}
.mag-byline-pic{width:28px;height:28px;object-fit:cover;vertical-align:middle;margin-right:6px}
@media(max-width:560px){.writer{flex-direction:column}.writer-pic{width:120px;height:120px}}
.about-hero h1{font-family:var(--display,"Bungee",Impact,sans-serif);font-size:30px;line-height:1.15;margin:4px 0 10px;color:#174A8B}
.about-hero p{font-size:15px}
.about-window{max-width:360px;margin:14px 0 4px;border:2px solid #174A8B;background:#fff;font-size:12px}
.about-window-bar{background:#174A8B;color:#fff;padding:4px 8px;font-weight:bold}
.about-window-body{padding:8px}
.about-song{background:#fff3e6;border:1px solid #F47A20;padding:4px 6px;margin-bottom:8px}
.about-top8{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin-bottom:8px}
.about-top8 span{background:#dfeafd;text-align:center;padding:8px 0;font-weight:bold;color:#174A8B}
.about-mood{color:#2f6b1f;font-weight:bold}
.about-compare{width:100%;border-collapse:collapse;font-size:13px}
.about-compare th,.about-compare td{border:1px solid #dbe6f3;padding:6px 8px;text-align:left;vertical-align:top}
.about-compare th{background:#174A8B;color:#fff}
.writer-recent{font-size:12px}
@media(max-width:560px){.about-hero h1{font-size:24px}.about-top8{grid-template-columns:repeat(4,1fr)}}
.about-note .in{border-left:4px solid #F47A20}
.about-sign{margin-top:12px}

/* Footer: three labeled rows, old-school style */
footer{border-top:3px solid #174A8B;padding-top:10px}
.foot-row{margin:4px 0;line-height:1.9}
.foot-label{display:inline-block;background:#174A8B;color:#fff;font-weight:bold;font-size:10px;text-transform:uppercase;letter-spacing:.5px;padding:1px 6px;margin-right:8px;vertical-align:middle}
.foot-social{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap}
.foot-social .foot-label{margin-right:0}
.foot-copy{margin-top:4px}
@media(max-width:560px){.foot-label{display:block;width:max-content;margin:8px auto 2px}.foot-social{display:block}.foot-social .foot-label{margin:8px auto 4px}.foot-social a{margin:0 3px}}
.writer-text{flex:1;min-width:0}

.mag-writer{display:flex;gap:12px;align-items:flex-start;margin:18px 0 10px;padding:10px;background:#f3f7fd;border:1px solid #dbe6f3;border-left:4px solid #174A8B;clear:both}
.mag-writer img{width:72px;height:72px;object-fit:cover;flex:0 0 auto}
.mag-writer p{margin:4px 0 6px;font-size:13px}
.mag-writer div{font-size:13px}
/* Retro photo look for writer pictures: warm faded color and a little white print border */
.writer-pic,.mag-byline-pic,.mag-writer img{filter:sepia(.28) saturate(1.2) contrast(1.06) brightness(1.03);border:3px solid #fff;outline:1px solid #c9d6e8;box-shadow:2px 2px 0 rgba(23,74,139,.25)}
.mag-byline-pic{border-width:2px}

/* You Might Also Remember: 8 random throwbacks at the end of each one */
.mag-more{margin:18px 0 12px;clear:both}
.mag-more h2{font-family:var(--display,"Bungee",Impact,sans-serif);font-size:16px;color:#174A8B;margin:0 0 8px;border-bottom:2px solid #F47A20;padding-bottom:4px}
.mag-more ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.mag-more a{display:block;border:1px solid #dbe6f3;background:#fff;text-decoration:none;color:#174A8B;font-weight:bold;font-size:12px;height:100%}
.mag-more a:hover{border-color:#F47A20}
.mag-more img,.mag-more-noimg{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#dfeafd}
.mag-more-noimg{display:flex;align-items:center;justify-content:center;font-size:28px;color:#F47A20}
.mag-more a span:last-child{display:block;padding:6px 8px;line-height:1.3}
@media(max-width:720px){.mag-more ul{grid-template-columns:repeat(2,1fr)}}

/* Music page */
.genre-buttons{display:flex;flex-wrap:wrap;gap:6px}
.genre-buttons a{display:inline-block;padding:4px 10px;border:1px solid #9fbbe6;background:#fff;color:#174A8B;font-weight:bold;font-size:12px;text-decoration:none}
.genre-buttons a:hover,.genre-buttons a.on{background:#174A8B;color:#fff;border-color:#174A8B}
.psongs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px 14px}
.psongs li{display:flex;gap:8px;align-items:flex-start;font-size:13px}
.ps-note{color:#F47A20;font-size:18px;line-height:1}
@media(max-width:560px){.psongs{grid-template-columns:1fr}}

.band-new summary{list-style:none;display:inline-block;cursor:pointer}
.band-new summary::-webkit-details-marker{display:none}
.band-new[open] summary{margin-bottom:8px}

/* Surveys page */
.sv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.sv-card{border:1px solid #dbe6f3;background:#fff;padding:8px 10px}
.sv-title{font-weight:bold}
.sv-preview{margin:6px 0;padding-left:18px;font-size:12px;color:#5d6a85}
.sv-preview li{margin:2px 0}
.sv-actions{font-size:12px}
.sv-daily .sv-card{border-color:#F47A20;background:#fff8f0}
@media(max-width:720px){.sv-grid{grid-template-columns:1fr}}

/* Bulletins */
.bul-from{white-space:nowrap}
.bul .bul-pic{width:28px;height:28px;display:inline-block;vertical-align:middle;margin-right:6px;font-size:10px}
.bul tr.bul-new td{background:#fff8f0}
.bul-actions{display:flex;gap:8px;margin:10px 0}
.bul-actions form{margin:0}

/* Smooth page changes: browsers that support it fade between pages instead of flashing white */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

.mod-remove{margin-top:10px;padding:8px;border:1px dashed #C9362B;font-size:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}