/* The few rules the staff sign-in, the Users tab and the floor screen add on top
   of admin.css. Copied from the approved picture (docs/specs/own-logins.picture.src.html,
   the part below its "only what this picture adds" line). It adds no colour: every
   value is a variable from admin.css, or a size the picture already drew. */
.hdr-right{display:flex;align-items:center;gap:10px;min-width:0}
.hdr-who{font-size:12px;font-weight:600;color:var(--text-secondary);white-space:nowrap}
@media(max-width:600px){
  .hdr-who{display:none}
  /* The month arrows, Accounting and Sign out do not fit beside the title on a
     phone. They take their own row under it. */
  .hdr-right{flex:1 1 100%;flex-wrap:wrap;justify-content:space-between}
}
.portal-btn{font-family:inherit;cursor:pointer}
.login-box .pw-field input{padding:14px 18px;letter-spacing:0}
.login-note{font-size:12px;color:var(--text-muted);line-height:1.6;margin-top:14px}
.login-box .login-error[hidden]{display:none}
.login-box p.lead{font-size:13px;color:var(--text-secondary);line-height:1.6;margin:-20px 0 24px}
.login-box .header-badge{display:inline-block;margin-left:6px;vertical-align:middle}
.link-btn{background:none;border:none;color:var(--text-muted);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;margin-top:16px;min-height:44px;padding:0 6px;text-decoration:underline;transition:color var(--transition)}
.link-btn:hover{color:var(--text-secondary)}
.login-btn:active,.manage-btn:active,.manage-add-form button:active,.portal-btn:active{transform:scale(0.97)}
.login-btn,.manage-btn,.manage-add-form button,.portal-btn{transition:background var(--transition),border-color var(--transition),transform 160ms cubic-bezier(0.23,1,0.32,1)}
.people-panels{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
@media(max-width:768px){.people-panels{grid-template-columns:minmax(0,1fr)}}
.people-panels .changes-panel{margin-top:0}
.switch-meter{font-size:13px;line-height:1.6}
.switch-meter b{font-weight:800}
.roles-list{display:flex;flex-direction:column;gap:10px;font-size:13px;line-height:1.5;margin:0;padding:0}
.roles-list li{list-style:none;display:grid;grid-template-columns:118px minmax(0,1fr);gap:10px;align-items:start}
.roles-list .header-badge{justify-self:start}
/* Four columns do not fit a phone, so the table keeps its width and its wrapper
   scrolls sideways, as the Manage DJs table does. admin.css hides the third
   column on a phone for that table; here it holds who has signed in. */
.people-table{min-width:620px}
@media(max-width:768px){.people-table th:nth-child(3),.people-table td:nth-child(3){display:table-cell}}
.people-table td:last-child{white-space:nowrap}
/* Below 600px the four columns cannot sit side by side. Each person becomes one
   block: name and role on the first line, then their status, then the buttons. */
@media(max-width:600px){.people-table{min-width:0}
  .people-table thead{display:none}
  .people-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;align-items:start;padding:10px 4px;border-bottom:1px solid var(--border)}
  .people-table td{display:block;padding:0;border:0}
  .people-table td:nth-child(3),.people-table td:nth-child(4){grid-column:1/-1}
  .people-table td:last-child{white-space:normal;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
}
.people-table .header-badge{white-space:nowrap}
.you-tag{display:block;font-size:11px;color:var(--text-muted);font-weight:600;overflow-wrap:anywhere}
tr.row-new{animation:fadeUp 220ms cubic-bezier(0.16,1,0.3,1)}
.night-note{font-size:12px;color:var(--text-muted);line-height:1.6;margin:0 0 16px}
.floor-wrap{padding:20px;max-width:640px;margin:0 auto}
.floor-wrap .avail-section-heading{margin-top:20px}
.floor-wrap .avail-section-heading:first-of-type{margin-top:0}
.modal-by{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-xs);background:var(--bg);color:var(--text-primary);font-size:13px;font-weight:700}
.modal-by span{font-size:11px;color:var(--text-muted);font-weight:600}
.so-card-dj{overflow-wrap:anywhere;min-width:0}
@media (prefers-reduced-motion: reduce){tr.row-new,.login-box{animation:none}}
/* The floor page: Sign out stays top right on a phone, and the day arrows
   take their own row under the tabs. */
.floor-page .app-header-left{flex:0 0 auto}
@media(max-width:600px){
  .floor-page .hdr-right{flex:0 0 auto;flex-wrap:nowrap;justify-content:flex-end}
}
.day-row{display:flex;justify-content:center;padding:20px 20px 0;max-width:640px;margin:0 auto}
.day-row .month-nav{width:100%;justify-content:center}
/* Slim buttons on a phone. The button is drawn at its computer size; the
   44px a thumb needs stays, as an invisible tap area around it. */
@media(max-width:768px){
  .portal-btn{min-height:0;position:relative}
  .portal-btn::before{content:'';position:absolute;top:-10px;bottom:-10px;left:-4px;right:-4px}
}

/* Floor page: the small Host tag on a host's card (docs/specs/floor-roster.md) */
.host-tag{display:inline-block;margin-left:8px;padding:2px 7px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:var(--host,#8e24aa);vertical-align:middle}

/* Sign-in code box (docs/specs/signin-code.md) */
.code-field input{font-size:26px;font-weight:800;letter-spacing:.45em;text-align:center;padding:14px 0 14px .45em;font-variant-numeric:tabular-nums}
.code-field input::placeholder{color:var(--text-muted);opacity:.45;font-style:normal}
.code-field.shake{animation:codeShake 320ms cubic-bezier(0.23,1,0.32,1)}
@keyframes codeShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@media (prefers-reduced-motion: reduce){.code-field.shake{animation:none}}