/* PUBLIC DEMO sign-in screen (20 Oct 2026). Design system 08_brand/DESIGN_SYSTEM_2026-10-19.md: paper ground, Archivo by
   width, each venue's people on a guest check (check paper, 2 px rule under the head, 1 px rule per row, the role in biro on
   the right, torn foot), one SAMPLE stamp. No amber (no money here). Ease (.16,1,.3,1); presses 120-150 ms. */
.si-body{min-height:100vh;min-height:100dvh;background:var(--paper)}
.si{max-width:1180px;margin:0 auto;padding:clamp(40px,11vh,120px) clamp(16px,4.4vw,72px) 40px;
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(48px,7vw,112px);row-gap:40px;align-items:start}
.si-intro{position:sticky;top:clamp(40px,11vh,120px);display:grid;gap:18px;max-width:440px}
.si-logo{width:229px;height:auto;margin-bottom:clamp(24px,5vh,56px)}
.si-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.si-head h1{font-size:clamp(34px,3.2vw,46px);font-weight:800;font-stretch:125%;letter-spacing:-.02em;line-height:1}
.si-stamp{display:inline-block;color:var(--red);border:3px solid var(--red);border-radius:3px;padding:3px 9px 2px;font-weight:900;
  font-stretch:125%;font-size:13px;letter-spacing:.06em;line-height:1.2;transform:rotate(-6deg);opacity:.9}
.si-demo{font-size:clamp(18px,1.5vw,21px);font-weight:600;font-stretch:108%;line-height:1.3;text-wrap:balance}
.si-small{font-size:14.5px;font-stretch:92%;color:var(--steel);line-height:1.5;max-width:46ch}
.si-err{font-size:14.5px;line-height:1.45;color:var(--ink);border-top:2px solid var(--ink);padding-top:10px}
.si-pick{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;padding-bottom:12px;min-width:0}
.si-check,.si-paper{min-width:0;max-width:100%}
.si-check{filter:drop-shadow(0 1px 0 rgba(24,33,28,.06)) drop-shadow(0 10px 14px rgba(24,33,28,.12))}
.si-paper{--teeth:11px;background:var(--check);padding:18px 22px calc(18px + var(--teeth));
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - var(--teeth)) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/14px var(--teeth) repeat-x;
          mask:linear-gradient(#000 0 0) top/100% calc(100% - var(--teeth)) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/14px var(--teeth) repeat-x}
.si-ch{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:10px;border-bottom:2px solid var(--rule)}
.si-ch h2{font-size:17px;font-weight:800;font-stretch:115%;line-height:1.25;min-width:0;overflow-wrap:anywhere}
.si-ch span{font-size:13px;font-stretch:90%;color:var(--check-small);white-space:nowrap}
.si-list{list-style:none;margin:0;padding:0}
.si-list li{border-bottom:1px solid rgba(111,154,122,.55)}
.si-p{appearance:none;width:100%;display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;column-gap:14px;
  min-height:62px;padding:10px 6px;border:0;background:transparent;text-align:left;cursor:pointer;color:var(--ink);font:inherit;
  border-radius:2px;transition:background-color .15s var(--ease),transform .12s var(--ease)}
.si-ini{width:34px;height:34px;border-radius:50%;border:1.6px solid var(--biro);display:grid;place-items:center;font-family:var(--hand);
  font-weight:700;font-size:15px;color:var(--biro);line-height:1}
.si-n{display:grid;gap:2px;min-width:0}
.si-n b{font-size:16px;font-weight:700;font-stretch:108%;line-height:1.2}
.si-n span{font-size:13px;font-stretch:92%;color:var(--check-small);line-height:1.35}
.si-role{font-family:var(--hand);font-weight:700;font-size:18px;color:var(--biro);line-height:1.1;text-align:right;white-space:nowrap}
@media (hover:hover){.si-p:hover{background:rgba(24,33,28,.05)}}
.si-p:active{transform:scale(.985)}
.si-p:focus-visible{outline:2.5px solid var(--biro);outline-offset:1px}
.si-p[aria-busy="true"]{background:rgba(24,33,28,.07)}
.si-body.si-busy .si-p:not([aria-busy="true"]){opacity:.5;cursor:default}
.si-legal{grid-column:1/-1;font-size:12.5px;font-stretch:90%;color:var(--steel);padding-top:20px;border-top:1px solid var(--hair)}
@media (max-width:820px){
  .si{grid-template-columns:minmax(0,1fr);padding:24px 16px 28px;row-gap:28px}
  .si-intro{position:static;gap:14px;max-width:none}
  .si-logo{width:150px;margin-bottom:14px}
  .si-head h1{font-size:32px}
  .si-pick{gap:28px}
  .si-paper{padding:14px 14px calc(14px + var(--teeth))}
  .si-p{grid-template-columns:34px minmax(0,1fr) auto;column-gap:12px;min-height:60px;padding:9px 2px}
  .si-role{font-size:16.5px}
}
/* phones (360-560 px): the biro role goes under the name, so no row is wider than the check (20 Oct 2026 fix) */
@media (max-width:560px){
  .si-p{grid-template-columns:34px minmax(0,1fr);grid-template-rows:auto auto;row-gap:3px}
  .si-ini{grid-row:1/span 2;align-self:center}
  .si-n{grid-column:2}
  .si-role{grid-column:2;grid-row:2;text-align:left;white-space:normal;font-size:15.5px;overflow-wrap:anywhere}
  .si-ch{flex-wrap:wrap;row-gap:2px}
}
@media (prefers-reduced-motion:reduce){.si-p{transition:none}.si-p:active{transform:none}}