/* Shared by the login and friends pages: the same tokens, type and 3-column bar as the catalogue. */
:root{
  --bg:#f3f6ef; --fg:#000000; --red:#c22a1a;
  --sans:"Neue Haas Grotesk Text Pro","Neue Haas Unica","Helvetica Neue",Helvetica,Arial,sans-serif;
  --fs:13px; --lh:1.15; --gap:10px; --space:96px;
  --drop:clamp(100px,24vh,240px); --rg:var(--gap);
}
*{box-sizing:border-box}
html,body{background:var(--bg);color:var(--fg);margin:0}
body{font-family:var(--sans);font-size:var(--fs);line-height:var(--lh);font-weight:700;-webkit-font-smoothing:antialiased;
  padding:env(safe-area-inset-top,0px) max(var(--gap),env(safe-area-inset-right,0px)) 60px max(var(--gap),env(safe-area-inset-left,0px))}
button,input{font:inherit;color:inherit;line-height:inherit}
button{background:none;border:0;padding:0;cursor:pointer;text-align:left}
a{color:inherit;text-decoration:none}
a:hover,button:hover{text-decoration:underline;text-underline-offset:2px}
:focus-visible{outline:1px solid var(--fg);outline-offset:2px}

.bar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);padding-block:6px}
.bar>*{min-width:0}
.top{padding-top:var(--gap);color:var(--red)}
.hero{height:var(--drop)}

.form{align-items:end;row-gap:var(--rg)}
.form .go{grid-column:1;justify-self:start;margin-top:var(--drop);color:var(--red)}
input{border:0;border-bottom:1px solid var(--fg);background:transparent;padding:0 0 3px;outline:none;width:100%;min-width:0;border-radius:0}
input::placeholder{color:var(--fg);opacity:.35}
.msg{margin:28px 0 0;min-height:1.15em}
.msg .go{color:var(--red);margin-left:1em}

/* friends page */
.list{margin-top:var(--space);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px var(--gap)}
.list .row{display:contents}
.list .email{grid-column:span 2;overflow-wrap:anywhere}

@media (max-width:700px){
  :root{--space:48px;--drop:clamp(60px,14vh,140px);--rg:18px}
  .bar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .top .wide{display:none}
  .form input{grid-column:1}
  .form .wide{grid-column:2;grid-row:1 / span 2}
  .list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .list .email{grid-column:1}
}