/* THE SIGN-IN DRAWER'S ONE STYLESHEET (window 11, 18 Oct 2026).

   These rules were pasted into eleven page stylesheets -- oh-overrides,
   about, careers, contact, event-page, exchange-refund (the terms page),
   services, terms, ticket-your-event, purchase-ps and purchase-o5 -- and had
   already drifted: about-o5's copy sat behind a stray closing-and-opening
   style tag that made its first rule invalid, purchase-ps's lacked the
   closed-is-not-painted rule, and the remember and submit rules lived in
   oh-overrides alone. The rules below are oh-overrides' copy, the fullest,
   byte for byte; the two purchase copies styled nothing, as the purchase page
   draws no drawer.

   Linked by the drawer fragment (layouts/fragments/sign-in-drawer.html) and
   by the login page, whose form uses these classes without the drawer.
   tools/sign-in-drawer-check proves the drawer computes the same under this
   sheet as under the copies, on every page type that carried one. */
.sid-overlay{position:fixed;inset:0;background:rgba(20,20,20,0.5);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:310}
.sid-overlay.is-open{opacity:1;pointer-events:auto}
.sid-drawer{position:fixed;top:0;right:0;bottom:0;width:min(460px,92vw);background:var(--o5-surface);box-shadow:-30px 0 70px -24px rgba(0,0,0,0.35);transform:translateX(100%);transition:transform .38s cubic-bezier(.22,.61,.36,1);z-index:311;display:flex;flex-direction:column}
/* CLOSED IS NOT PAINTED. The closed drawer sits just off-screen to the right, and its
   -30px shadow reached back into the viewport: a grey band down the right edge of
   every page. Closed, it has no shadow and is not visible (which also takes its
   fields out of the tab order); both flip only after the .38s slide-out, so the
   close still animates. Opening flips them at once. Identical in every copy of
   this rule. */
.sid-drawer:not(.is-open){box-shadow:none;visibility:hidden;transition:transform .38s cubic-bezier(.22,.61,.36,1),visibility 0s linear .38s,box-shadow 0s linear .38s}
.sid-drawer.is-open{transform:translateX(0)}
.sid-scroll{overflow-y:auto;flex:1}
.sid-close{position:absolute;top:20px;right:20px;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,0.35);background:rgba(255,255,255,0.16);color:#fff;display:inline-flex;align-items:center;justify-content:center;z-index:5;transition:background .15s;cursor:pointer}
.sid-close:hover{background:rgba(255,255,255,0.3)}
.sid-hero{background:#d62133;color:#fff;padding:56px 36px 30px;position:relative;overflow:hidden}
.sid-hero::before{content:'';position:absolute;width:260px;height:260px;right:-110px;top:-130px;background:radial-gradient(circle,rgba(255,255,255,0.22),transparent 70%);border-radius:50%;pointer-events:none}
.sid-hero>*:not(.sid-close){position:relative;z-index:1}
.sid-eyebrow{font-size:10px;font-weight:800;letter-spacing:0.2em;text-transform:uppercase;color:rgba(255,255,255,0.9);display:block}
.sid-hero h2{font-family:var(--o5-display);font-size:26px;font-weight:800;letter-spacing:-0.02em;line-height:1.1;margin:12px 0 10px;color:#fff}
.sid-hero p{font-size:13.5px;color:rgba(255,255,255,0.88);line-height:1.55;margin:0}
.sid-perks{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.sid-perks li{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:#fff}
.sid-perks li svg{flex:none;margin-top:2px}
.sid-form{padding:28px 36px 36px;background:var(--o5-surface)}
.sid-intro{font-size:13.5px;color:var(--o5-ink2);line-height:1.5;margin:0 0 14px}
.sid-sso-list{display:flex;gap:8px}
.sid-sso{display:flex;align-items:center;justify-content:center;gap:6px;flex:1;min-width:0;padding:11px 14px;border:1px solid var(--o5-line);border-radius:999px;background:var(--o5-surface);font-size:13px;font-weight:700;color:var(--o5-ink);cursor:pointer;text-decoration:none;transition:border-color .15s}
.sid-sso.is-compact{flex:0 0 auto;width:46px;padding:0;gap:0;aspect-ratio:1/1}
.sid-sso.is-compact .lbl{display:none}
.sid-sso:hover{border-color:var(--o5-ink)}
.sid-sso .ico{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.sid-lg-google{width:16px;height:16px;background:conic-gradient(from -45deg,#ea4335 0deg 90deg,#fbbc04 90deg 180deg,#34a853 180deg 270deg,#4285f4 270deg 360deg);border-radius:50%;mask:radial-gradient(circle,transparent 26%,#000 27%) center/contain no-repeat;-webkit-mask:radial-gradient(circle,transparent 26%,#000 27%) center/contain no-repeat}
.sid-lg-apple svg{width:14px;height:16px}
.sid-or{display:block;font-size:13px;color:var(--o5-ink2);line-height:1.5;margin:20px 0 16px}
.sid-fields{display:flex;flex-direction:column;gap:12px}
.sid-field{display:block;width:100%;padding:14px 20px;border:1px solid var(--o5-line);border-radius:999px;background:var(--o5-surface);font-family:var(--o5-display);font-size:14px;font-weight:600;color:var(--o5-ink);outline:none;transition:border-color .15s;box-sizing:border-box}
.sid-field:focus{border-color:var(--o5-ink)}
.sid-field::placeholder{color:var(--o5-ink3);font-weight:500}
.sid-pwd{position:relative}
.sid-pwd input{padding-right:48px}
.sid-pwd .eye{position:absolute;top:50%;right:16px;transform:translateY(-50%);background:transparent;border:0;padding:0;color:var(--o5-ink2);cursor:pointer}
.sid-forgot{align-self:flex-end;display:inline-block;margin-top:2px;font-size:11.5px;font-weight:700;color:#d62133;text-decoration:none}
.sid-forgot:hover{color:#b91c2c}
.sid-toggle{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:6px;border-radius:999px;background:var(--o5-surface-2);margin-top:18px}
.sid-toggle-btn{padding:13px 18px;border:0;border-radius:999px;background:transparent;font-family:var(--o5-display);font-size:13.5px;font-weight:800;color:var(--o5-ink2);cursor:pointer;transition:background .18s,color .18s,box-shadow .18s}
.sid-toggle-btn:hover{color:var(--o5-ink)}
.sid-toggle-btn.is-on{background:#d62133;color:#fff;box-shadow:0 6px 14px -8px rgba(214,33,51,0.45)}
.sid-foot{margin:22px 0 0;font-size:13px;color:var(--o5-ink2);text-align:center}
.sid-foot a{color:#d62133;font-weight:800}
@media (max-width:520px){.sid-hero{padding:52px 26px 26px}.sid-form{padding:24px 26px 30px}}

/* The form's remember line and submit button: oh-overrides carried them
   alone, in its header-actions section. */
.sid-remember { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--o5-ink2); }
.sid-submit { width: 100%; height: 50px; margin-top: 16px; border: 0; border-radius: 999px; background: #d62133; color: #fff; font-family: var(--o5-display); font-weight: 800; font-size: 15px; cursor: pointer; transition: background .15s; }
.sid-submit:hover { background: #b91c2c; }
