/* The front door online (app/tools/host.py): sign in, sign up by his invitation, a new password, the account, his
   people. Specimen's paper and its three faces, as stanza.pictures wears them: Bodoni for the wordmark and the heads,
   Caslon for all that is read, Franklin for the buttons and the small lines. One narrow column; nothing else. */
:root{--ground:#f3eee3; --ink:#211d18; --soft:#6d6457; --rubric:#9a3324; --rule:rgba(33,29,24,.18);
  --modern:"Bodoni Moda",Didot,"Bodoni 72",serif; --text:"Libre Caslon Text","Iowan Old Style",Georgia,serif;
  --plain:"Libre Franklin","Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--ground); color:var(--ink); font:400 18px/1.55 var(--text); font-variant-numeric:oldstyle-nums}
a{color:inherit; text-underline-offset:3px; text-decoration-thickness:1px}
.door{max-width:30rem; margin:0 auto; padding:clamp(48px,11vh,120px) 16px 96px}
.door.wide{max-width:46rem}
.wordmark{margin:0 0 clamp(36px,7vh,64px); font:italic 400 1.6rem/1 var(--modern)}
.wordmark a{text-decoration:none}
h1{font:400 clamp(2.4rem,7vw,3.3rem)/1 var(--modern); letter-spacing:-.01em; margin:0 0 14px}
h2{font:400 1.45rem/1.2 var(--modern); margin:44px 0 10px; padding-top:22px; border-top:1px solid var(--rule)}
.lede{font:italic 400 1.3rem/1.35 var(--modern); margin:0 0 30px}
p{margin:0 0 14px}
.soft, .aside{color:var(--soft)}
.aside{font-size:.95rem; margin-top:26px}
form{margin:0}
label{display:block; margin:0 0 18px; font:500 .7rem/1.4 var(--plain); text-transform:uppercase; letter-spacing:.16em; color:var(--soft)}
input[type=email], input[type=password], input[type=text]{display:block; width:100%; margin-top:6px; padding:10px 12px;
  font:400 1.05rem/1.3 var(--text); color:var(--ink); background:#fbf8f2; border:1px solid var(--rule); border-radius:2px;
  text-transform:none; letter-spacing:0}
input:focus{outline:2px solid var(--rubric); outline-offset:1px}
.fixed{display:block; margin-top:6px; font:400 1.05rem/1.3 var(--text); color:var(--ink); text-transform:none; letter-spacing:0}
button{appearance:none; cursor:pointer; border:0; border-radius:999px; padding:12px 22px; background:var(--rubric); color:#fff;
  font:600 .72rem/1 var(--plain); text-transform:uppercase; letter-spacing:.16em}
button.plain{background:none; color:var(--ink); border:1px solid var(--rule)}
button.quiet{background:none; color:var(--rubric); padding:0; border-radius:0; letter-spacing:.12em}
button:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.err{color:var(--rubric); font-style:italic; min-height:0}
.err:empty{display:none}
.said{padding:12px 14px; border-left:3px solid var(--rubric); background:#fbf8f2; margin:0 0 24px}
.said code, .link{display:block; margin-top:8px; font:400 .82rem/1.45 ui-monospace,Menlo,monospace; word-break:break-all; user-select:all}
details{margin-top:44px; padding-top:22px; border-top:1px solid var(--rule)}
summary{cursor:pointer; color:var(--rubric); font:500 .72rem/1.4 var(--plain); text-transform:uppercase; letter-spacing:.16em}
details[open] summary{margin-bottom:14px}
.list{list-style:none; margin:0; padding:0}
.list li{display:flex; flex-wrap:wrap; gap:4px 14px; align-items:baseline; padding:12px 0; border-bottom:1px solid var(--rule)}
.list li .who{flex:1 1 14rem}
.list li .when{font:500 .66rem/1.4 var(--plain); text-transform:uppercase; letter-spacing:.14em; color:var(--soft)}
.list form{display:inline}
.row{display:flex; flex-wrap:wrap; gap:12px 18px; align-items:center}
/* the console */
.numbers{list-style:none; margin:24px 0 8px; padding:0; display:grid; gap:6px}
.numbers b{font:400 1.5rem/1 var(--modern); margin-right:.2em}
.list.people li{flex-direction:column; align-items:flex-start; gap:4px}
.list .acts{display:flex; flex-wrap:wrap; gap:8px 14px; align-items:baseline}
.list .acts input[type=text]{display:inline-block; width:13rem; margin:0; padding:5px 8px; font-size:.85rem}
details.remove{margin:0; padding:0; border:0}
details.remove[open]{flex-basis:100%; padding:10px 0 4px}
/* the bench's buttons: links that look like the door's buttons */
a.btn{display:inline-block; text-decoration:none; border-radius:999px; padding:12px 22px; background:var(--rubric); color:#fff;
  font:600 .72rem/1 var(--plain); text-transform:uppercase; letter-spacing:.16em}
a.btn.plain{background:none; color:var(--ink); border:1px solid var(--rule)}
.small{font-size:.88rem}
.small code{font-size:.82rem}