/* Signing in, the password, and the settings screen. */
.sign-in{
  width:100%;max-width:400px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 26px 22px;
}
/* The mark sits above the form, not beside the heading: on a screen whose only
   job is one short form, it is the thing that says where you are. */
.sign-in-head{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:8px}
/* The mark is the way back to the front page. It stays a mark and does not
   take a link's colour or underline; the pointer is what says it is one. */
.mark-home{display:block;line-height:0;border-radius:50%}
.mark-home:hover{text-decoration:none;opacity:.85}
.sign-in h1{margin:0;font-size:21px;font-weight:640;letter-spacing:-.015em;text-align:center}
.sign-in .sub{margin:6px 0 22px;font-size:13.5px;color:var(--muted);text-align:center}
.sign-in .under{margin:14px 0 0}

.house-style{min-height:340px;font-family:var(--font-mono);font-size:13px;line-height:1.6}
.service-row{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:12px;padding:12px 0;
}
.service-row + .service-row{border-top:1px solid var(--line)}
.service-row .who{font-weight:600;font-size:14px}
.service-row .where{font-family:var(--font-mono);font-size:12px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis}
.service-row .actions{display:flex;align-items:center;gap:10px}
.service-detail{grid-column:1 / -1;font-family:var(--font-mono);font-size:12px;
  color:var(--muted);word-break:break-word}

@media (max-width:760px){
  .sign-in{padding:20px 18px 18px;box-shadow:none}
  .house-style{min-height:220px}

  /* Three columns become a block: the name, the address under it, and the
     controls under that, so nothing is squeezed to an ellipsis. */
  .service-row{grid-template-columns:1fr;gap:6px}
  .service-row .where{overflow-wrap:anywhere;text-overflow:clip;white-space:normal}
  .service-row .actions{margin-top:4px}
}