/* =========================================================================
   Long Beach Pride — application forms (generated)
   Fields, option groups, uploads, summary, progress aside; plus apply.css.
   Extracted from LBP-Website/assets/site.css by 12-tools/extract-chrome-css.py.
   Regenerate instead of editing by hand.
   (c) HAUS XXIV, LLC · Licensed to Long Beach Pride
   ========================================================================= */

.give-mosaic .f{grid-column:5/7;grid-row:5/8}
.seg{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:5px;border-radius:999px;background:var(--bone-2);width:max-content;max-width:100%}
.seg button{height:44px;padding:0 22px;border:0;border-radius:999px;background:transparent;font-size:var(--t-sm);font-weight:600;color:var(--ink-2);transition:background .3s,color .3s,box-shadow .3s}
.seg button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08),0 4px 14px rgba(0,0,0,.06)}
.form-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:clamp(32px,5vw,96px);align-items:start}
.form-aside{position:sticky;top:calc(var(--nav-h) + 32px);display:flex;flex-direction:column;gap:22px}
.form-aside ol{border-top:1px solid var(--hair)}
.form-aside ol a{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--hair);font-size:var(--t-sm);color:var(--ink-3);transition:color .3s}
.form-aside ol a:hover,.form-aside ol a.on{color:var(--ink)}
.form-aside ol a span{font-variant-numeric:tabular-nums;font-weight:600;min-width:2ch}
@media (max-width:1000px){
.form-shell{grid-template-columns:1fr}
.form-aside{position:static}
.form-aside ol{display:none}
}
.fm{display:flex;flex-direction:column;gap:clamp(48px,5vw,88px)}
.fm fieldset{border:0;margin:0;padding:0;min-width:0}
.fm .fs-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px clamp(16px,1.6vw,28px);align-items:baseline;padding-bottom:clamp(20px,2vw,28px);margin-bottom:clamp(24px,2.4vw,40px);border-bottom:1px solid var(--ink)}
.fm .fs-head .no{font-family:var(--serif);font-size:var(--t-3);line-height:1;color:var(--ink-3)}
.fm legend{padding:0;font-family:var(--serif);font-size:var(--t-3);line-height:1.04}
.fm .fs-head p{grid-column:2;font-size:var(--t-sm);color:var(--ink-3);max-width:62ch}
.fg{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(18px,1.8vw,28px) clamp(14px,1.4vw,24px)}
.f{grid-column:span 6;display:flex;flex-direction:column;gap:8px;min-width:0}
.f.w3{grid-column:span 3}
.f.w2{grid-column:span 2}
.f.w4{grid-column:span 4}
@media (max-width:760px){
.f.w3,.f.w2,.f.w4{grid-column:span 6}
}
@media (min-width:761px) and (max-width:1000px){
.f.w2{grid-column:span 3}
}
.f label.l,.f .l{font-size:var(--t-sm);font-weight:600;color:var(--ink)}
.f .l .req{color:var(--err);margin-left:2px}
.f .l .optl{font-weight:500;color:var(--ink-3);margin-left:6px}
.f .help{font-size:var(--t-xs);line-height:1.55;color:var(--ink-3)}
.f input[type=text],.f input[type=email],.f input[type=tel],.f input[type=url],.f input[type=number],.f input[type=date],.f input[type=time],.f select,.f textarea{width:100%;min-height:54px;padding:14px 16px;border:1.5px solid var(--hair-2);border-radius:12px;background:#fff;font-size:16px;line-height:1.4;outline:0;transition:border-color .25s,box-shadow .25s;appearance:none;-webkit-appearance:none}
.f select{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230C0C0E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 16px center no-repeat;padding-right:44px}
.f textarea{min-height:140px;resize:vertical}
.f input:hover,.f select:hover,.f textarea:hover{border-color:rgba(12,12,14,.4)}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--ink);box-shadow:0 0 0 4px rgba(12,12,14,.08)}
.f [aria-invalid="true"]{border-color:var(--err)!important;box-shadow:0 0 0 4px rgba(180,35,24,.08)!important}
.f .err{font-size:var(--t-xs);font-weight:600;color:var(--err);min-height:0}
.f .err:empty{display:none}
.f .count{align-self:flex-end;font-size:var(--t-xs);color:var(--ink-3);font-variant-numeric:tabular-nums}
.opts{display:grid;grid-template-columns:repeat(var(--oc,2),minmax(0,1fr));gap:10px}
@media (max-width:640px){
.opts{--oc:1!important}
}
.opt{position:relative;display:flex;align-items:flex-start;gap:12px;padding:15px 16px;border:1.5px solid var(--hair-2);border-radius:12px;background:#fff;cursor:pointer;font-size:var(--t-sm);line-height:1.45;transition:border-color .25s,background .25s}
.opt:hover{border-color:rgba(12,12,14,.4)}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt .bx{flex:none;width:20px;height:20px;margin-top:1px;border:1.5px solid var(--hair-2);border-radius:6px;background:#fff;display:grid;place-items:center;transition:background .2s,border-color .2s}
.opt input[type=radio]+.bx{border-radius:50%}
.opt .bx svg{width:12px;height:12px;color:#fff;opacity:0}
.opt input:checked+.bx{background:var(--ink);border-color:var(--ink)}
.opt input:checked+.bx svg{opacity:1}
.opt:has(input:checked){border-color:var(--ink);background:#FAFAF8}
.opt input:focus-visible+.bx{outline:2px solid var(--focus);outline-offset:2px}
.opt small{display:block;color:var(--ink-3);margin-top:2px}
.opts[aria-invalid="true"] .opt{border-color:rgba(180,35,24,.5)}
.file{display:flex;align-items:center;gap:14px;padding:16px;border:1.5px dashed var(--hair-2);border-radius:12px;background:#fff}
.file input{font-size:var(--t-sm);max-width:100%}
.sig{font-family:var(--serif)!important;font-size:26px!important}
.fm-summary{padding:20px 22px;border-radius:14px;background:#FEF3F2;color:var(--err);font-size:var(--t-sm)}
.fm-summary[hidden]{display:none}
.fm-summary b{display:block;margin-bottom:6px}
.fm-summary a{text-decoration:underline}
.fm-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px;padding-top:clamp(24px,2.4vw,40px);border-top:1px solid var(--ink)}
.fm-done{display:flex;flex-direction:column;gap:20px;align-items:flex-start;padding:clamp(28px,4vw,64px);border-radius:var(--r-lg);background:var(--bone)}
.fm-done[hidden]{display:none}
.fm-done .d-3{max-width:18ch}
.fm-done .ref{font-size:var(--t-sm);color:var(--ink-3)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.tabs{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:clamp(24px,2.4vw,40px)}
.tabs button{height:46px;padding:0 20px;border:1.5px solid var(--hair-2);border-radius:999px;background:#fff;font-size:var(--t-sm);font-weight:600;color:var(--ink-2);transition:all .3s}
.tabs button:hover{border-color:var(--ink);color:var(--ink)}
.tabs button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.seg{position:relative;isolation:isolate}
.seg>.seg-ind{position:absolute;left:0;top:0;z-index:0;border-radius:999px;pointer-events:none}
.seg.seg-ready>.seg-ind{transition:transform .6s cubic-bezier(.22,1,.36,1),width .6s cubic-bezier(.22,1,.36,1),height .6s cubic-bezier(.22,1,.36,1)}
.seg [role=tab]{position:relative;z-index:1;background:transparent!important;border-color:transparent!important;transition:color .45s cubic-bezier(.22,1,.36,1)!important}
.gi-tabs>.seg-ind{background:#fff;box-shadow:0 8px 22px -6px rgba(0,0,0,.35)}
.tabs.seg{display:inline-flex;flex-wrap:nowrap;max-width:100%;overflow-x:auto;scrollbar-width:none;gap:2px;padding:5px;margin-bottom:clamp(24px,2.4vw,40px);border-radius:999px;background:#ECECEF}
.tabs.seg::-webkit-scrollbar{display:none}
.tabs.seg button{flex:0 0 auto;border:0!important;color:var(--ink-2)}
.tabs.seg button:hover{color:var(--ink)}
.tabs.seg button[aria-selected="true"]{color:#fff}
.tabs>.seg-ind{background:var(--ink);box-shadow:0 6px 16px -6px rgba(0,0,0,.35)}
.seg-in-r{animation:segInR .65s cubic-bezier(.22,1,.36,1) both}
.seg-in-l{animation:segInL .65s cubic-bezier(.22,1,.36,1) both}
html.motion-off .seg>.seg-ind{transition:none}
html.motion-off :is(.seg-in-r,.seg-in-l){animation:none}
@media (prefers-reduced-motion:reduce){
.seg>.seg-ind{transition:none!important}
.seg-in-r,.seg-in-l{animation:none!important}
}
@keyframes segInR{from{opacity:0;transform:translateX(32px)}}
@keyframes segInL{from{opacity:0;transform:translateX(-32px)}}

.link-u{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;font-weight:600}
.link-u:hover{text-decoration-thickness:2px}
.pk-list{display:flex;flex-direction:column;gap:12px}
.pk-list li{display:flex;gap:12px;font-size:var(--t-sm);line-height:1.5;color:var(--ink-2)}
.pk-list b{color:var(--ink);font-weight:600}
.pk-feat .pk-list li{color:rgba(255,255,255,.86)}
.fm-col{min-width:0}
.fm-req{margin-bottom:-24px}
.req-inline{color:var(--err);font-weight:700}
.opt .req{color:var(--err);margin-left:2px}
.ts h2{margin-bottom:4px}
.ts-list{display:flex;flex-direction:column;border-top:1px solid var(--hair)}
.ts-list li{position:relative;display:flex;flex-direction:column;gap:4px;padding:14px 12px 14px 14px;border-bottom:1px solid var(--hair);border-left:3px solid transparent;transition:background .3s,border-color .3s}
.ts-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.ts-row b{font-weight:600}
.ts-row .num{font-family:var(--serif);font-size:clamp(20px,1.5vw,24px);line-height:1}
.ts-list p{font-size:var(--t-xs);line-height:1.5;color:var(--ink-3)}
.ts-sel{display:none;align-self:flex-start;margin-top:4px;padding:2px 10px;border-radius:999px;background:var(--ink);color:#fff;font-size:var(--t-xs);font-weight:600;letter-spacing:.04em}
.ts-list li.on{background:var(--bone);border-left-color:var(--ink)}
.ts-list li.on .ts-sel{display:inline-block}
.cur{position:relative}
.cur span{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-weight:600;color:var(--ink-2);pointer-events:none}
.f .cur input[type=number]{padding-left:34px}
.cs-due{padding:14px 16px;border-radius:12px;background:var(--bone);font-size:var(--t-sm)}
.form-aside .pk-list li{font-size:var(--t-sm)}
@media (max-width:1000px){
.ts-list li{padding-inline:12px}
}
.file input::file-selector-button{min-height:40px;margin-right:12px;padding:0 16px;border:0;border-radius:999px;background:var(--ink);color:#fff;font:inherit;font-weight:600;cursor:pointer}

.hero.ap::after{background:linear-gradient(180deg,rgba(0,0,0,.52) 0%,rgba(0,0,0,.46) 34%,rgba(0,0,0,.6) 62%,rgba(0,0,0,.84) 100%)}
.hero.ap .hero-media img{object-position:var(--pos,center)}
.hero.ap .lead,.hero.ap .kicker{color:#fff}


.fm .f input:focus-visible,.fm .f select:focus-visible,.fm .f textarea:focus-visible{outline:2px solid var(--focus);outline-offset:2px}


.req-key{padding:14px 18px;border-radius:12px;background:var(--bone);font-size:var(--t-sm);color:var(--ink-2)}
.bone .req-key{background:#fff}
.req-key b{color:var(--err);font-weight:700}


.ap-intro{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--gap) clamp(32px,6vw,120px);align-items:end}
.ap-intro .facts-row{display:flex;flex-wrap:wrap;gap:10px}
.pill{display:inline-flex;align-items:center;min-height:36px;padding:6px 14px;border-radius:999px;border:1.5px solid var(--hair-2);font-size:var(--t-sm);font-weight:600;color:var(--ink)}
@media (max-width:900px){.ap-intro{grid-template-columns:1fr}}


.steps{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:clamp(32px,3vw,56px) var(--gap);counter-reset:st}
.step{display:flex;flex-direction:column;gap:14px;padding-top:clamp(20px,2vw,28px);border-top:1px solid var(--ink)}
.step .num{font-family:var(--serif);font-size:clamp(56px,6vw,108px);line-height:.85;letter-spacing:-.03em}
.step h3{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.2vw,38px);line-height:1.05}
.step p{color:var(--ink-2);max-width:none}
@media (max-width:900px){.steps{--n:1!important}.step{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:24px}.step .num{grid-row:span 2}}


.teams{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(28px,3vw,48px)}
.teams li{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 18px;border-radius:999px;background:#fff;border:1.5px solid var(--hair-2);font-size:var(--t-sm);font-weight:600}
.teams li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--rainbow);background-size:600% 100%}
.teams li:nth-child(6n+1)::before{background:#E40303}.teams li:nth-child(6n+2)::before{background:#FF8C00}.teams li:nth-child(6n+3)::before{background:#C9B800}
.teams li:nth-child(6n+4)::before{background:#008026}.teams li:nth-child(6n+5)::before{background:#004DFF}.teams li:nth-child(6n+6)::before{background:#750787}
.way .tags{font-size:var(--t-sm);color:var(--ink-2)}


.notice{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,2vw,32px);align-items:start;padding:clamp(24px,3vw,48px);border:2px solid var(--ink);border-radius:var(--r-lg);background:#fff;overflow:hidden}
.notice::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--rainbow)}
.notice svg{width:clamp(32px,3vw,44px);height:auto;margin-top:4px}
.notice h2,.notice .nt{font-family:var(--serif);font-weight:400;font-size:var(--t-3);line-height:1.05;margin-bottom:12px}
.notice p{max-width:none;color:var(--ink-2)}
.notice p+p{margin-top:.8em}
.notice p strong{color:var(--ink)}
@media (max-width:560px){.notice{grid-template-columns:1fr}}


.ap-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,96px);align-items:center}
.ap-split .ph{aspect-ratio:4/3}
.ap-split .stack{gap:20px;align-items:flex-start}
@media (max-width:900px){.ap-split{grid-template-columns:1fr}}


.paper{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,4vw,80px);padding:clamp(28px,4vw,72px);border-radius:var(--r-lg);background:var(--bone);color:var(--ink);overflow:hidden}
.paper::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--rainbow)}
.paper .lead{font-size:var(--t-body);margin-top:18px}
.paper .d-2{margin-top:18px}
.paper .dl{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:clamp(24px,3vw,40px)}
.paper .dl .btn{height:auto;min-height:var(--bh);white-space:normal;text-align:left;padding-block:12px}
.paper .dl small{font-size:var(--t-xs);color:var(--ink-3)}
.paper ol{display:flex;flex-direction:column;border-top:1px solid var(--ink)}
.paper ol li{display:grid;grid-template-columns:1.1em minmax(0,1fr);gap:4px 18px;padding:clamp(18px,2vw,26px) 0;border-bottom:1px solid var(--hair-2)}
.paper ol .n{grid-row:span 2;font-family:var(--serif);font-size:clamp(34px,3vw,52px);line-height:.9}
.paper ol b{font-size:var(--t-body)}
.paper ol p{color:var(--ink-2);font-size:var(--t-sm)}
.paper ol a{text-decoration:underline;text-underline-offset:3px;font-weight:600;display:inline-block;padding-block:2px;word-break:break-word;color:var(--ink)}
.paper ol a:hover{text-decoration-thickness:2px}
.paper .fine{margin-top:18px;font-size:var(--t-sm);color:var(--ink);font-weight:600}
@media (max-width:900px){.paper{grid-template-columns:1fr}}


.more{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);margin-top:clamp(48px,6vw,96px);border-top:1px solid var(--ink)}
.more a{display:flex;flex-direction:column;gap:6px;padding:clamp(20px,2vw,28px) 0 8px;min-height:44px}
.more a b{display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:var(--serif);font-weight:400;font-size:clamp(24px,2vw,32px);line-height:1.05}
.more a b svg{width:20px;height:20px;flex:none;transition:transform .5s var(--ease)}
.more a:hover b svg{transform:translateX(4px)}
.more a span{font-size:var(--t-sm);color:var(--ink-2)}
@media (max-width:1000px){.more{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.more{grid-template-columns:1fr}}
.way:target{outline:2px solid var(--focus);outline-offset:12px;border-radius:var(--r-lg)}
.way[id]{scroll-margin-top:calc(var(--nav-h) + 24px)}
.notice .big{font-size:clamp(18px,1.45vw,23px);line-height:1.45}
.ap-split .ph{aspect-ratio:3/2}
.opt .req{color:var(--err);margin-left:3px;font-weight:700}