/* login.psbl.co additions on top of filesend's app.css (possible-ui: sign-in = Editorial, the rest = App) */
main.narrow { max-width:880px; }
.signin { max-width:640px; display:flex; flex-direction:column; align-items:flex-start; gap:20px; }
.signin .lede { font-size:20px; line-height:30px; color:var(--soft); margin:8px 0 12px; max-width:28em; }
.signin .btn.primary { min-height:56px; padding:0 40px; }
.signin .sub { margin:0; }
.breakglass { margin-top:40px; width:min(420px,100%); }
.breakglass summary { cursor:pointer; color:var(--dim); font-size:13px; }
.breakglass form { margin-top:16px; }
.notice.error { border-left-color:var(--bad); }
.notice.ok { border-left-color:var(--ok); }

.tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:16px; margin-bottom:24px; }
.tile { display:flex; flex-direction:column; gap:10px; min-height:200px; padding:28px; background:var(--well); border:1px solid var(--rule);
  color:var(--white); text-decoration:none; transition:border-color var(--t), background var(--t); }
a.tile:hover { border-color:var(--spark); background:#111; }
a.tile:hover .tile-name { color:var(--spark); }
.tile-name { font:500 28px/34px var(--label); transition:color var(--t); }
.tile-blurb { color:var(--soft); font-size:15px; line-height:22px; flex:1; }
.tile-host { color:var(--faint); font-size:12px; }
.tile.soon { opacity:.55; }
.manage { margin-top:72px; padding-top:32px; border-top:1px solid var(--rule); display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.manage h2 { margin:0; } .manage p { margin:0; color:var(--dim); }

.chip { display:inline-block; margin:0 6px 6px 0; padding:3px 10px; border:1px solid rgba(255,255,255,.25); font-size:12px; line-height:18px; white-space:nowrap; }
table.ppl td.who a { color:var(--white); text-decoration:none; font-weight:500; } table.ppl td.who a:hover { color:var(--spark); }
table.ppl td.who .sub { margin-top:2px; }
table.ppl tr.off td { opacity:.5; }
table.ppl td.apps { min-width:200px; }
.search { margin-bottom:16px; }
.choices.two { grid-template-columns:repeat(2, minmax(0, 1fr)); }
table.access { width:100%; border-collapse:collapse; }
table.access td { padding:14px 12px 14px 0; border-bottom:1px solid var(--rule); vertical-align:middle; }
table.access td:first-child { width:50%; }
table.access td:last-child { width:150px; padding-right:0; }
table.access select { width:100%; }
table.access .sub { margin-top:2px; }
form.danger { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin:48px 0; }
form.danger .sub { margin:0; }
table.log td { white-space:normal; }
table.log td:first-child { width:90px; color:var(--dim); }
h2 { margin-top:56px; }
@media (max-width:700px) {
  .choices.two { grid-template-columns:1fr; }
  table.access td:first-child { width:auto; }
  table.access tr { display:grid; grid-template-columns:1fr auto; }
  table.access td:first-child { grid-column:1 / -1; border-bottom:0; padding-bottom:4px; }
  table.access td:last-child { width:130px; }
  .m-hide { display:none; }
}
a.btn { color:var(--white); text-decoration:none; }
a.btn.primary { color:var(--black); }
.sub-title + .form-panel, .sub-title + .notice, .notice + .form-panel { margin-top:32px; }
.table-wrap + p.sub { margin-top:16px; }
@media (max-width:700px) {
  table.ppl thead { display:none; }
  table.ppl, table.ppl tbody, table.ppl tr { display:block; }
  table.ppl tr { padding:16px; border-bottom:1px solid rgba(255,255,255,.08); }
  table.ppl td { display:inline; padding:0; border:0; font-size:13px; color:var(--dim); }
  table.ppl td.who { display:block; font-size:15px; color:var(--white); margin-bottom:4px; }
  table.ppl td:nth-child(2)::after { content:" · "; }
  table.ppl td:nth-child(2) .sub { display:none; }
  table.ppl td.apps { display:block; margin-top:10px; min-width:0; }
  table.ppl tbody tr:hover td { background:none; }
}
.signin .btn:not(.primary) { min-height:56px; padding:0 40px; }
.signin-form { width:min(420px,100%); }
.signin-form .btn.primary { width:100%; }
.signin .sub a { color:var(--soft); }
/* Sign-in sits about halfway down the screen; the two doors are the same width */
.signin { margin-top:28svh; }
.signin > .btn { width:min(340px,100%); justify-content:center; text-align:center; padding:0 24px; }