/* peoplebook — deliberately 2007.
   Its own stylesheet, loaded on its own page: the rest of the site is a
   brutalist corporate catalogue and this is meant to feel like a different,
   older piece of software the same company also runs. */

.pb *{box-sizing:border-box}
.pb{
  --pb-blue:#3B5998; --pb-mid:#6D84B4; --pb-lite:#D8DFEA; --pb-pale:#EDEFF4;
  --pb-line:#B3B3B3; --pb-soft:#CCC; --pb-ink:#333; --pb-dim:#777; --pb-link:#3B5998;
  font-family:"Lucida Grande",Tahoma,Verdana,Arial,sans-serif;
  font-size:14px;color:var(--pb-ink);background:#fff;
  line-height:1.45;
}
.pb a{color:var(--pb-link);text-decoration:none}
.pb a:hover{text-decoration:underline}

.pbbar{background:var(--pb-blue);border-bottom:1px solid #133783}
.pbbar .in{max-width:1000px;margin:0 auto;padding:0 14px;display:flex;align-items:center;gap:18px;height:52px}
/* .pb a sets every link to the brand blue and outranks a bare .pbmark, so
   the word "people" was rendering blue on the blue bar and the mark read
   as just "book". Matched on the anchor to win that. */
a.pbmark,.pb a.pbmark:hover{color:#fff;text-decoration:none;font-size:26px;font-weight:bold;letter-spacing:-.5px;font-family:"Lucida Grande",Tahoma,sans-serif;display:flex;align-items:center;gap:7px}
.pbmark img{width:34px;height:34px;border-radius:50%;display:block}
.pbmark span{color:#9DC0E8}
.pbbar nav{margin-left:auto;display:flex;gap:12px}
.pbbar nav a{color:#fff;font-size:14px}
.pbsearch{margin-left:auto;display:flex;gap:6px;align-items:center}
.pbsearch input{font:inherit;font-size:14px;padding:7px 9px;border:1px solid #1D3C78;width:250px}
.pbsearch button{font:inherit;font-size:14px;padding:7px 14px;cursor:pointer;border:1px solid #29487D;background:var(--pb-mid);color:#fff}

.pbwrap{max-width:1000px;margin:0 auto;padding:18px 14px 60px;background:#fff}
.pbcols{display:flex;gap:18px;align-items:flex-start}
.pbside{width:250px;flex:none}
.pbmain{flex:1;min-width:0}

.pbbox{border:1px solid var(--pb-soft);background:#fff;margin-bottom:12px}
.pbbox>h2{
  background:var(--pb-lite);border-bottom:1px solid var(--pb-soft);
  margin:0;padding:8px 12px;font-size:15px;font-weight:bold;color:#333;
  display:flex;justify-content:space-between;align-items:center;gap:8px;
}
.pbbox>h2 a{font-weight:normal;font-size:13px}
.pbbody{padding:12px}

.pbface{display:block;border:1px solid var(--pb-soft);background:var(--pb-pale)}
.pbside .pbface{width:100%}
/* the profile portrait is a 1024px jpg; without this it ignores its
   column and lies across the text next to it */
#pbPFace{width:100%;height:auto}

.pbname{font-size:22px;font-weight:bold;color:var(--pb-blue);margin:0 0 2px}
.pbmeta{color:var(--pb-dim);font-size:13px}

.pbfield{display:flex;gap:8px;padding:7px 0;border-bottom:1px solid var(--pb-pale)}
.pbfield:last-child{border-bottom:0}
.pbfield b{width:110px;flex:none;color:var(--pb-dim);font-weight:normal}
.pbfield span{color:#333}

.pbpost{display:flex;gap:12px;padding:13px;border-bottom:1px solid var(--pb-pale)}
.pbpost:last-child{border-bottom:0}
.pbpost .pbface{width:64px;height:64px;flex:none}
.pbpost .who{font-weight:bold;color:var(--pb-blue)}
.pbpost .txt{margin:2px 0 3px;color:#333;word-wrap:break-word;overflow-wrap:anywhere}
.pbpost .when{color:var(--pb-dim);font-size:12px}
.pbpost .acts{margin-top:6px;font-size:13px;color:var(--pb-dim)}
.pbpost .acts a{font-size:13px}

.pbcmt{margin:6px 0 0 58px;padding:6px 8px;background:var(--pb-pale);border:1px solid #E3E6EC}
.pbcmt .row{display:flex;gap:6px;padding:3px 0}
.pbcmt .row+.row{border-top:1px solid #E3E6EC}
.pbcmt img{width:32px;height:32px;flex:none;border:1px solid var(--pb-soft)}

.pbcompose textarea{
  width:100%;font:inherit;font-size:14px;padding:9px;border:1px solid var(--pb-soft);
  resize:vertical;min-height:64px;
}
.pbbtn{
  font:inherit;font-size:14px;font-weight:bold;padding:8px 16px;cursor:pointer;
  border:1px solid #29487D;background:var(--pb-mid);color:#fff;
}
.pbbtn:disabled{opacity:.5;cursor:default;background:#9AA9C4;border-color:#9AA9C4}
.pbbtn.plain{background:#ECEFF5;color:#333;border:1px solid var(--pb-soft);font-weight:normal}

.pbrow{display:flex;gap:8px;align-items:center;padding:5px 0;border-bottom:1px solid var(--pb-pale)}
.pbrow:last-child{border-bottom:0}
.pbrow img{width:34px;height:34px;flex:none;border:1px solid var(--pb-soft)}

.pbgate{background:#FFF9D7;border:1px solid #E2C822;padding:12px 14px;color:#333;font-size:14px}
.pbnote{color:var(--pb-dim);font-size:12.5px;padding:10px 12px;line-height:1.5}
.pbempty{color:var(--pb-dim);padding:26px 12px;text-align:center;font-size:14px}

.pbgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pbgrid a{text-align:center;color:#333}
.pbgrid img{width:100%;border:1px solid var(--pb-soft)}
.pbgrid .n{display:block;margin-top:4px;font-size:12px;color:var(--pb-blue)}

.pbtabs{display:flex;gap:0;border-bottom:1px solid var(--pb-soft);margin-bottom:10px}
.pbtabs button{
  font:inherit;font-size:15px;padding:9px 20px;cursor:pointer;
  border:1px solid var(--pb-soft);border-bottom:0;background:var(--pb-pale);color:#333;margin-right:3px;
}
.pbtabs button.on{background:#fff;font-weight:bold;color:var(--pb-blue);position:relative;top:1px}

@media (max-width:700px){
  .pbcols{flex-direction:column}
  .pbside{width:100%}
  .pbgrid{grid-template-columns:repeat(4,1fr)}

  /* The blue bar was one flex row that could not wrap: wordmark, a 250px
     search box, two buttons and the nav came to 877px. With no overflow rule
     on this page -- it does not load site.css -- the phone widened its layout
     viewport to fit and scaled the whole page down, which is why every word on
     peoplebook was tiny rather than merely cramped.

     Letting the row wrap and the search box shrink keeps the layout at the
     real screen width, so the text renders at the size it was written at. */
  .pb{overflow-x:hidden}
  .pbbar .in{flex-wrap:wrap;height:auto;padding:9px 14px;gap:10px}
  a.pbmark{font-size:22px}
  .pbsearch{margin-left:auto;order:3;width:100%;gap:8px}
  .pbsearch input{width:100%;min-width:0;font-size:16px;min-height:44px}
  .pbsearch button{min-height:44px;white-space:nowrap}
  .pbbar nav{margin-left:0;order:4;width:100%;gap:16px;flex-wrap:wrap}
  .pbbar nav a{min-height:40px;display:inline-flex;align-items:center}
  /* the composer and its replies are the point of the page */
  .pbpost .pbface{width:52px;height:52px}
  textarea{font-size:16px}
  .pbbtn{min-height:44px}
}

/* the "you" card: the thing a person clicks most, so it is a target rather
   than a line of small print */
.pbyou{display:block;padding:4px;border:1px solid transparent}
.pbyou:hover{background:var(--pb-pale);border-color:var(--pb-soft);text-decoration:none}
.pbyou .pbname{margin-top:8px}
.pbyoulink{
  display:block;margin-top:8px;text-align:center;padding:9px;background:var(--pb-mid);
  color:#fff;font-weight:bold;font-size:14px;border:1px solid #29487D;
}
.pbyoulink:hover{background:var(--pb-blue);text-decoration:none;color:#fff}
.pbmine{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.pbmine a{display:block}
.pbmine img{width:44px;height:44px;border:1px solid var(--pb-soft);display:block}

.pbbtn.warn{background:#D9534F;border-color:#A94442}
.pbbar .pbbtn{white-space:nowrap}

/* wallet picker */
.pb .pickmask{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;background:rgba(16,20,24,.55);padding:20px}
.pb .pickmask.on{display:flex}
.pbpickbox{background:#fff;border:1px solid var(--pb-soft);width:100%;max-width:380px;box-shadow:0 6px 26px rgba(0,0,0,.3)}
.pbpickhead{
  background:var(--pb-lite);border-bottom:1px solid var(--pb-soft);padding:9px 12px;
  font-weight:bold;font-size:15px;display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.pbpick{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;font:inherit;font-size:15px;
  padding:13px 14px;background:#fff;border:0;border-bottom:1px solid var(--pb-pale);cursor:pointer;color:#333;
}
.pbpick:last-child{border-bottom:0}
.pbpick:hover{background:var(--pb-pale)}
.pbpick img,.pbpick .ph{width:30px;height:30px;flex:none;border:1px solid var(--pb-soft);background:var(--pb-pale);display:block}
.pbpick em{margin-left:auto;font-style:normal;font-size:12px;color:var(--pb-dim)}

/* likes and replies */
.pblike{font-size:12px;color:var(--pb-dim)}
a.pblike{cursor:pointer}
a.pblike.on{color:var(--pb-blue);font-weight:bold}
.pbthread{margin-top:8px;border-left:3px solid var(--pb-lite);padding-left:10px}
.pbreply{display:flex;gap:8px;padding:7px 0;border-bottom:1px solid var(--pb-pale)}
.pbreply:last-child{border-bottom:0}
.pbreply img{width:32px;height:32px;flex:none;border:1px solid var(--pb-soft)}
.pbreply .who{font-weight:bold;color:var(--pb-blue)}
.pbreply .when{color:var(--pb-dim);font-size:11px;margin-top:2px}