*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:'Courier New',Courier,monospace;
  font-size:14px;
  line-height:1.65;
  color:#111;
  background:#f9f8ef;
  max-width:760px;
  margin:0 auto;
  padding:1.5rem 1.5rem 4rem;
}

.collective-header{
  display:flex;
  align-items:center;
  gap:.85rem;
  margin-bottom:.35rem;
}
.collective-logo{
  width:20px;
  height:20px;
  object-fit:cover;
  flex-shrink:0;
  border:1px solid #ccc;
  background:#f4f4ea;
  margin-right: 0.35em;
}
.collective-name{
  font-size:0.9rem;
  font-weight:bold;
  letter-spacing:.05em;
  color:#111;
}

.site-banner{
  display:flex;
  align-items:center;
  margin-bottom:.6rem;
  padding:0 0 .35rem;
  border-bottom:1px solid #e8e7c4;
  font-size:.75rem;
  color:#999;
  letter-spacing:.08em;
}
.site-banner strong{
  color:#555;
  font-size:.9rem;
  letter-spacing:.1em;
}

h1{
  font-size:1.1rem;
  font-weight:bold;
  margin-bottom:1.25rem;
  padding-bottom:.35rem;
  border-bottom:1px solid #deda93;
  letter-spacing:.02em;
}
h2{
  font-size:.85rem;
  font-weight:bold;
  margin:1.75rem 0 .6rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:#555;
}

p{margin-bottom:.75rem}
p:last-child{margin-bottom:0}
small{font-size:.82em;color:#777;font-weight:normal}
hr{border:none;border-top:1px solid #ccc;margin:1.5rem 0}

a{color:#00c;text-decoration:underline}
a:visited{color:#551a8b}
a:hover{color:#00a}

label{
  display:block;
  font-weight:bold;
  font-size:.85rem;
  margin-bottom:.2rem;
  color:#333;
}
input[type=text],
input[type=password],
input[type=email],
textarea{
  display:block;
  width:100%;
  padding:.35rem .45rem;
  margin-bottom:1rem;
  border:1px solid #999;
  background:#fff;
  font-family:inherit;
  font-size:13px;
  color:#111;
}
input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
textarea:focus{
  outline:2px solid #333;
  outline-offset:0;
  border-color:#333;
}

.field-hint{
  display:block;
  font-size:.78rem;
  color:#777;
  margin-top:-.75rem;
  margin-bottom:1rem;
}
textarea{min-height:90px;resize:vertical}
button,
input[type=submit]{
  font-family:inherit;
  font-size:13px;
  cursor:pointer;
  padding:.25rem .8rem;
  color:#111;
  background:#d4d0c8;
  border:2px solid;
  border-color:#fff #888 #888 #fff;
}
button:hover,
input[type=submit]:hover{background:#c8c4bc}
button:active,
input[type=submit]:active{border-color:#888 #fff #fff #888}

.nav{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:1.5rem;
  padding:.2rem 0 .4rem;
  border-bottom:1px dotted #bbb;
  font-size:.85rem;
  gap:.1rem;
}
.nav a{
  color:#00c;
  text-decoration:none;
  padding:.1rem .35rem;
}
.nav a:first-child{padding-left:0}
.nav a:hover{text-decoration:underline}
.nav form{display:inline-flex;align-items:center}
.nav button{
  background:none;
  border:none;
  color:#777;
  padding:.1rem .35rem;
  font-family:inherit;
  font-size:.85rem;
  cursor:pointer;
}
.nav button:hover{color:#111;background:none}
.nav button:active{border:none}
.nav > * + *::before{
  content:'|';
  color:#ccc;
  margin-right:.2rem;
  pointer-events:none;
}


.err{
  margin-bottom:1rem;
  padding:.3rem .5rem;
  border-left:3px solid #c00;
  color:#c00;
  font-size:.85rem;
  background:#fff8f8;
}
.ok{
  margin-bottom:1rem;
  padding:.3rem .5rem;
  border-left:3px solid #080;
  color:#060;
  font-size:.85rem;
  background:#f4fff4;
}
.muted{color:#777;font-size:.85rem;margin-bottom:1rem}

code{
  font-family:inherit;
  background:#e8e8d8;
  border:1px solid #ccc;
  padding:.05rem .3rem;
  font-size:.9em;
}

details.user-card{
  margin-bottom:.6rem;
  border:1px solid #bbb;
}
details.user-card > summary{
  padding:.4rem .55rem;
  cursor:pointer;
  background:#e8e8d8;
  font-weight:bold;
  font-size:.85rem;
  list-style:none;
  user-select:none;
}
details.user-card > summary::-webkit-details-marker{display:none}
details.user-card > summary::before{content:'▸  ';color:#999;font-size:.75rem}
details.user-card[open] > summary::before{content:'▾  '}
details.user-card > .card-body{
  padding:.65rem;
  border-top:1px solid #ccc;
}


.dim{color:#777;font-size:.8rem}

.footer-art{
  display:block;
  width:100%;
  max-width:400px;
  height:auto;
  object-fit:cover;
  margin:2.5rem auto 0;
  border:2px solid #deda93;
  background:#f4f4ea;
}

.landing-quote{
  margin:1.5rem 0 1.5rem;
  padding:.55rem 1rem;
  border-left:3px solid #deda93;
  color:#555;
  font-style:italic;
}
.landing-quote cite{
  display:block;
  margin-top:.4rem;
  font-style:normal;
  font-size:.82rem;
  color:#999;
}

.bio-box{
  background:#fff;
  border:1px solid #999;
  padding:.35rem .45rem;
  font-size:13px;
  font-family:inherit;
  color:#111;
  white-space:pre-wrap;
  word-break:break-word;
  margin-bottom:.4rem;
}
.landing-blurb{
  margin:1.25rem 0;
  color:#333;
  line-height:1.8;
}
.landing-auth{
  text-align:center;
  margin:2.25rem 0 1.5rem;
  letter-spacing:.06em;
}
.landing-auth a{
  color:#111;
  text-decoration:none;
  padding:.25rem .5rem;
  border:1px solid #999;
}
.landing-auth a:hover{
  background:#deda93;
  border-color:#bbb;
}

.svc-card{
  margin-bottom:1.25rem;
  padding:.6rem .75rem;
  border:1px solid #ddd;
  border-left:3px solid #deda93;
  background:#fafae8;
}
.svc-card h3{
  font-size:.9rem;
  font-weight:bold;
  letter-spacing:.04em;
  margin-bottom:.45rem;
  text-transform:uppercase;
}
.svc-desc{
  font-size:.85rem;
  color:#555;
  margin-bottom:.65rem;
  line-height:1.7;
}
.svc-desc p{margin-bottom:.3rem}
.svc-desc p:last-child{margin-bottom:0}
.svc-desc a{color:#00c}



body.wide{max-width:1120px}
.account{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:.5rem 2rem;align-items:start}
.account h2{margin-top:.5rem}
.account .bio-box{max-height:16rem;overflow:auto}
.setting{border-bottom:1px dotted #ccc}
.account h2 + .setting{border-top:1px dotted #ccc}
.setting>summary{display:flex;align-items:baseline;gap:.75rem;padding:.4rem 0;cursor:pointer;list-style:none;user-select:none}
.setting>summary::-webkit-details-marker{display:none}
.setting .k{flex:0 0 5.5rem;color:#777;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}
.setting .v{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.setting .act{margin-left:auto;color:#00c;font-size:.8rem;text-decoration:underline}
.setting[open]>summary .act{color:#777;text-decoration:none}
.setting>summary:hover .act{color:#00a}
.setting>form,.setting>p{margin:.2rem 0 .9rem}
.svc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr));
  gap:1rem;
}
.svc-grid .svc-card{margin-bottom:0}

button.go{background:#deda93}
button.go:hover{background:#d2cd7c}
button.no{background:#e2b1a4;color:#4a1208}
button.no:hover{background:#d89c8c}
form.deny{display:flex;gap:.4rem;flex:1;min-width:min(16rem,100%)}
.deny input[type=text]{margin:0;flex:1;min-width:0}

.queue-item{
  margin-bottom:.6rem;
  padding:.6rem .75rem;
  border:1px solid #ddd;
  border-left:3px solid #deda93;
  background:#fafae8;
}
.queue-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem}
.queue-head{margin-bottom:.4rem}
.queue-item .bio-box{margin:.2rem 0 .6rem;max-height:14rem;overflow:auto}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.btn-row form{display:inline}

.tag{
  font-size:.72rem;
  font-weight:normal;
  padding:0 .35rem;
  border:1px solid #bbb;
  color:#777;
  background:#fff;
  white-space:nowrap;
}
.tag.on{border-color:#080;color:#060;background:#f4fff4}
.tag.req{border-color:#c90;color:#850;background:#fff8e6}
.tag.no{border-color:#c00;color:#a00;background:#fff8f8}

.svc-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.4rem .6rem;
  padding:.45rem 0;
  border-bottom:1px dotted #ccc;
}
.svc-name{min-width:9rem;font-weight:bold;font-size:.85rem}
.svc-toggle{margin-left:auto}
.svc-data{display:flex;gap:.4rem;flex-basis:100%}
.svc-data input[type=text]{margin:0;flex:1;min-width:0}
.danger{margin-top:.9rem}
.danger button{color:#a00}

.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.5rem}
.chip{background:#ecebe4;color:#999}
.chip.on{background:#deda93;color:#111}

@media (max-width:600px){
  body{padding:1rem .85rem 3rem}
  .svc-name{min-width:0;flex:1}
  details.user-card > summary{padding:.65rem .6rem}
}
.qr{display:block;width:220px;height:220px;margin:.25rem 0 1rem;border:1px solid #ddd}