/* Band admin. Phone-first: everything below is sized for a thumb, and the
   desktop view is just the same thing with a max-width. */
body.admin{background:var(--ground);color:var(--paper);font-family:var(--prose);padding-bottom:60px}
.admin .btn{cursor:pointer}
.admin h1,.admin h2{font-family:var(--display);text-transform:uppercase;letter-spacing:.03em;margin:0}

/* signed out */
.gate{min-height:100dvh;display:grid;place-items:center;padding:24px}
.gate-card{width:100%;max-width:380px;display:grid;gap:16px;background:var(--panel);
  border:1px solid var(--line);padding:32px 26px}
.gate-card h1{font-size:34px}
.gate-hint{color:var(--mute);font-size:15px;margin:-6px 0 4px}
.linkish{background:none;border:0;color:var(--amber);font-family:var(--util);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;cursor:pointer;padding:6px;justify-self:start}
.err{color:#E4917A;background:#A4442B1F;border-left:3px solid var(--clay);padding:11px 14px;
  margin:0;font-size:15px}

/* signed in */
.abar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;
  background:var(--panel);border-bottom:1px solid var(--line);padding:14px 18px}
.abar .brand-name{margin-right:auto;font-size:22px}
.tabs{position:sticky;top:61px;z-index:19;display:grid;grid-template-columns:repeat(3,1fr);
  background:var(--panel-2);border-bottom:1px solid var(--line)}
.tabs button{background:none;border:0;border-bottom:3px solid transparent;color:var(--mute);
  padding:15px 8px;font-family:var(--util);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;cursor:pointer}
.tabs button[aria-selected="true"]{color:var(--amber);border-bottom-color:var(--amber)}

.panel{max-width:640px;margin:0 auto;padding:20px 16px 40px}
.card{background:var(--panel);border:1px solid var(--line);padding:22px 20px;margin-bottom:26px}
.card h2{font-size:24px;margin-bottom:14px}
.hint{color:var(--mute);font-size:15px;margin:-6px 0 16px}
.form{display:grid;gap:15px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:15px}
/* 16px minimum or iOS zooms the whole page on focus */
.admin input,.admin select,.admin textarea{font-size:16px;padding:14px 13px}
.check{display:flex;gap:12px;align-items:flex-start;cursor:pointer;color:var(--paper-dim);font-size:16px}
.check input{width:22px;height:22px;flex:0 0 22px;margin-top:2px;accent-color:var(--amber)}
.check small{display:block;color:var(--mute);font-size:13.5px;margin-top:3px;line-height:1.5}
.check.small{font-size:14px;margin-top:8px}
.check.small input{width:18px;height:18px;flex:0 0 18px}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.actions .btn{flex:1;min-width:150px}

.listhead{font-size:20px;color:var(--paper);margin:26px 0 12px;display:flex;
  align-items:baseline;gap:10px;flex-wrap:wrap}
.listhead small{font-family:var(--util);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mute)}
.rows{display:grid;gap:10px}
.row{display:flex;align-items:center;gap:14px;background:var(--panel);
  border:1px solid var(--line);padding:14px 16px}
.row-main{flex:1;min-width:0}
.row-title{font-size:17px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-sub{color:var(--mute);font-size:14.5px;margin-top:3px}
.tagx{font-family:var(--util);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#DE9174;border:1px solid #A4442B66;padding:2px 7px;vertical-align:middle}
.row-acts{display:flex;gap:7px;flex-shrink:0}
.row-acts.stack{flex-direction:column}
.mini{background:none;border:1px solid var(--line);color:var(--paper-dim);cursor:pointer;
  padding:9px 12px;font-family:var(--util);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;min-width:44px}
.mini:hover:not(:disabled){border-color:var(--amber);color:var(--amber)}
.mini:disabled{opacity:.3;cursor:default}
.mini.danger:hover{border-color:var(--clay);color:#DE9174}
.empty{color:var(--mute);border:1px dashed var(--line);padding:22px;text-align:center;margin:0}

.dropzone{display:grid;place-items:center;gap:6px;border:2px dashed #4A3F36;padding:34px 20px;
  cursor:pointer;text-align:center}
.dropzone:hover{border-color:var(--amber)}
.dropzone .big{font-family:var(--display);font-size:26px;text-transform:uppercase;
  letter-spacing:.04em;color:var(--amber)}
.dropzone .small{font-family:var(--util);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mute)}
.upload-status{margin-top:14px;font-family:var(--util);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--amber)}
.photo-row{align-items:flex-start}
.thumb{width:70px;height:70px;flex:0 0 70px;background-size:cover;background-position:center;
  border:1px solid var(--line)}
.cap{width:100%}

.afoot{max-width:640px;margin:0 auto;padding:24px 16px 40px;display:flex;
  justify-content:space-between;align-items:center;gap:16px;border-top:1px solid var(--line)}
.afoot a{font-family:var(--util);font-size:11px;letter-spacing:.12em;text-transform:uppercase}

.setup{max-width:520px;margin:14vh auto;padding:32px;font-family:var(--prose);color:var(--paper)}
.setup h1{font-family:var(--display);font-size:40px;text-transform:uppercase}
.setup code{background:var(--panel-2);padding:2px 6px;font-size:14px}
.setup .small{color:var(--mute);font-size:14.5px}

.toast.bad{background:var(--clay);color:#FDF3E7}
@media(min-width:560px){.panel{padding:28px 20px 48px}}