/* Circuit+ brand layer for the team portal (4 Oct 2026, Mohammed: "headlines in the Titillium font always have to be all caps").
   Same treatment as circuit.plus and the member app: Titillium Web 900, ALL CAPS, for headlines, class names and buttons.
   No letter-spacing on headings (member names can be Arabic); Changa covers Arabic glyphs. Loaded after staff.css. */
.disp{font-family:'Titillium Web','Changa',sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:0;line-height:1.05}
.card-h h2,.drawer .dh h3,.modal .dh h3,.mhead h2,.topbar h1,.gate h1{font-family:'Titillium Web','Changa',sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:0}
.card-h h2{font-size:1.02rem}
.card-h h2 small,.drawer .dh h3 small,.modal .dh h3 small,.topbar h1 small,.card-h h2 .badge,.drawer .dh h3 .badge,.modal .dh h3 .badge{font-family:'Rubik',sans-serif;text-transform:none;letter-spacing:0}
.btn,.btn-s,.btn-g,.btn-d{border-radius:6px;font-family:'Titillium Web','Changa',sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:.06em;font-size:.82rem}
.cls .nm>b{font-family:'Titillium Web','Changa',sans-serif;font-weight:900;text-transform:uppercase;font-size:1.02rem;line-height:1.2}
.stat b{font-family:'Titillium Web','Changa',sans-serif}
/* sign-in: the member app's dark card with the red top edge */
.gate{background:rgba(19,19,21,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid #2c2c31;border-top:3px solid var(--red);color:#f3f2ee;border-radius:14px;padding:36px 28px 28px;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.gate img{height:30px;margin-bottom:22px;filter:none}
.gate h1{font-size:1.75rem}.gate p{color:#ababb2;font-size:.88rem;margin:10px 0 22px;line-height:1.55}
.gate .f span{color:#ababb2}.gate input{background:#0d0d0f;color:#f3f2ee;border-color:#2c2c31}.gate input:focus{border-color:var(--red)}.gate .btn-g{color:#ababb2}
.sm{font-size:.8rem;border-radius:6px}
/* 5 Oct 2026 (Mohammed: "the login pages need to be dark again"): sign-in screens stay dark whatever the app theme.
   html.signin is set by staff.html while the sign-in screen shows — dark page behind the card (no light flash or
   light overscroll on iPhone) and a dark browser bar (theme-color). */
html.signin,html.signin body{background:#0a0a0b}
html.signin .gatewrap{background:#0a0a0b}
.gate .err{color:#ff8f87}
.gate .codein{background:#0d0d0f;color:#f3f2ee}
/* the desk sign-in ("Who's on the desk?" + PIN) is a sign-in too: same dark card */
.modal:has(#aoPin){--surface:#131315;--surface2:#1b1b20;--sunken:#0d0d0f;--line:#2c2c31;--line2:#3a3a40;--ink:#f3f2ee;--mut:#ababb2;--dim:#7d7d86;--red-ink:#ff6b61;--gold:#e8b33a;color:#f3f2ee;background:#131315;border-top:3px solid var(--red)}
.modal:has(#aoPin) input{background:#0d0d0f;color:#f3f2ee;border-color:#2c2c31}
.modal:has(#aoPin) .err{color:#ff8f87}
body:has(.modal.on #aoPin) .scrim{background:rgba(5,5,7,.78)}
.modal:has(#aoPin) input:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(224,43,32,.3);outline:none}
/* 5 Oct 2026 (Mohammed, iPad: "the DOB tab is bigger than the rest and going over the gender tab"): Safari draws date
   inputs at their own native size and ignores the grid column. Strip the native look so they size like every other field. */
input[type=date],input[type=time]{-webkit-appearance:none;appearance:none;min-width:0;max-width:100%;height:44px;min-height:44px;text-align:left;line-height:normal}
.f input[type=date],.f input[type=time]{display:block;width:100%}
input[type=date]::-webkit-date-and-time-value,input[type=time]::-webkit-date-and-time-value{text-align:left;margin:0}
.f .seg{min-height:44px;align-items:stretch}