/* 2026-07-22 — Apple-inspired craft pass.
   This final layer only refines type, material depth and feedback. It does not
   alter the product's grid, dimensions, content order or responsive layout. */
:root{
  --apple-response:cubic-bezier(.2,.78,.2,1);
  --apple-response-fast:cubic-bezier(.22,.72,.18,1);
  --apple-focus:#79cfff;
  --apple-hairline:rgba(226,240,255,.17);
  --apple-highlight:rgba(255,255,255,.22);
  --apple-shadow:0 14px 38px rgba(0,5,18,.2),0 2px 8px rgba(0,5,18,.16)
}

html{font-optical-sizing:auto;text-rendering:optimizeLegibility}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
:is(.hero h1,.section-title h2,.about h2,dialog.modal h2,.publish-step-intro h3,.wizard-simple-page h2){
  font-optical-sizing:auto!important;
  letter-spacing:-.035em!important;
  line-height:1.04!important;
  text-wrap:balance
}
:is(.micro,.wizard-label,.publish-step-intro>p,form label>span,.filters label>span){
  letter-spacing:.105em!important;
  line-height:1.35!important
}
:is(.hero-text,.publish-step-intro>span,.wizard-simple-page>p,.card-body,.welcome-text){
  line-height:1.68!important
}

/* Large material reads thicker than controls; a restrained top edge catches
   light without adding another coloured surface. */
body.dark dialog.modal{
  border-color:rgba(228,241,255,.23)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.32),0 34px 90px rgba(0,4,15,.5),0 8px 28px rgba(0,4,15,.3)!important
}
body.dark :is(.filters,.recruit-card,.squad-card,.stat,.admin-panel,.simple-block,#publish-modal .publish-step-page>label){
  border-color:var(--apple-hairline)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.11),inset 0 -1px 0 rgba(0,0,0,.2),var(--apple-shadow)!important
}
body.dark :is(.picker-trigger,.rank-filter-dropdown>summary,input,textarea,select){
  border-color:rgba(214,233,255,.2)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 1px 0 rgba(0,0,0,.22)!important;
  transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease!important
}
body.dark :is(label,.border-glow-field):focus-within :is(input,textarea,select),
body.dark :is(.picker-trigger,.rank-filter-dropdown>summary):focus-visible{
  border-color:rgba(154,215,255,.48)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 0 0 3px rgba(71,166,232,.11)!important
}

/* Spatially consistent materialisation: surfaces arrive from their source
   without elastic overshoot. */
dialog.modal[open]{
  transform-origin:50% 42%;
  animation:appleMaterialize .36s var(--apple-response) both!important
}
dialog.modal[open]::backdrop{animation:appleScrimIn .28s ease-out both!important}
@keyframes appleMaterialize{
  from{opacity:0;transform:translate3d(0,7px,0) scale(.986)}
  to{opacity:1;transform:none}
}
@keyframes appleScrimIn{from{opacity:0}to{opacity:1}}

html body .custom-picker.open.picker-positioned:not(.drop-up)>.picker-menu,
html body #publish-modal .custom-picker.open.picker-positioned:not(.drop-up)>.picker-menu{
  animation:applePopoverDown .38s var(--apple-response) both!important;
  transform-origin:top center!important
}
html body .custom-picker.open.picker-positioned.drop-up>.picker-menu,
html body #publish-modal .custom-picker.open.picker-positioned.drop-up>.picker-menu{
  animation:applePopoverUp .38s var(--apple-response) both!important;
  transform-origin:bottom center!important
}
@keyframes applePopoverDown{
  from{opacity:0;transform:translate3d(0,-6px,0) scale(.985)}
  to{opacity:1;transform:none}
}
@keyframes applePopoverUp{
  from{opacity:0;transform:translate3d(0,6px,0) scale(.985)}
  to{opacity:1;transform:none}
}
body.dark .picker-menu{
  border-color:rgba(199,226,255,.22)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 24px 54px rgba(0,4,15,.46),0 5px 16px rgba(0,4,15,.28)!important
}

/* Publish menus must stay outside the form's scroll calculation. Disabling
   scroll anchoring prevents the browser from compensating when they open. */
html body #publish-modal[open] .custom-picker>.picker-menu{position:fixed!important}
html body #publish-modal .publish-form-grid{
  overflow-anchor:none!important;
  scroll-padding-bottom:10px!important
}
html body #publish-modal .publish-step-page.active{
  align-self:start!important;
  min-height:0!important
}

/* The rank control belongs to the step surface; it should not introduce a
   second tinted glass sheet behind the track. */
html body #publish-modal .publish-step-page>.rank-field,
html body #publish-modal .rank-field>.publish-rank-slider{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important
}
html body #publish-modal .rank-field>.publish-rank-slider>
  :is(.rdev-liquid-glass__warp,.rdev-liquid-glass__tint,.rdev-liquid-glass__shine){
  display:none!important
}

/* Immediate press, calm critically-damped release. These controls are not
   dragged, so no bounce is introduced. */
:is(.primary,.secondary,.picker-trigger,.rank-filter-dropdown>summary,.modal-close,.channel-button,.report-button,.lobby-reset-button,.preference-button,.account-button,.language-button,.circle-button){
  transform-origin:center!important;
  transition:transform .32s var(--apple-response),border-color .18s ease,box-shadow .32s var(--apple-response),background-color .18s ease!important
}
.webgl-control.is-releasing{animation:appleControlRelease .32s var(--apple-response) both!important}
.webgl-control.is-pressing,
:is(.primary,.secondary,.picker-trigger,.rank-filter-dropdown>summary,.modal-close,.channel-button,.report-button,.lobby-reset-button,.preference-button,.account-button,.language-button,.circle-button):active{
  transform:translate3d(0,1px,0) scale(.985)!important;
  transition-duration:.08s!important
}
@keyframes appleControlRelease{from{transform:translate3d(0,1px,0) scale(.985)}to{transform:none}}

html body .recruit-card{
  transition:transform .34s var(--apple-response),border-color .2s ease,box-shadow .34s var(--apple-response)!important
}

:focus-visible{
  outline:2px solid color-mix(in srgb,var(--apple-focus) 88%,white)!important;
  outline-offset:3px!important
}
@media(hover:hover) and (pointer:fine){
  body.dark .recruit-card:hover{
    transform:translate3d(0,-2px,0)!important;
    border-color:rgba(181,221,255,.28)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 20px 46px rgba(0,5,18,.28),0 5px 14px rgba(0,5,18,.2)!important
  }
  nav a{position:relative;transition:color .18s ease!important}
  nav a::after{
    content:"";position:absolute;left:0;right:0;bottom:1px;height:1px;border-radius:1px;
    background:currentColor;opacity:.5;transform:scaleX(0);transform-origin:right;
    transition:transform .28s var(--apple-response)
  }
  nav a:hover::after{transform:scaleX(1);transform-origin:left}
}

.toast{
  border:1px solid rgba(220,237,255,.24)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.15),0 16px 42px rgba(0,4,15,.36)!important;
  transition:opacity .24s ease,translate .32s var(--apple-response)!important
}
.lobby-dual input::-webkit-slider-thumb,.publish-dual input::-webkit-slider-thumb{
  transition:transform .1s ease-out,box-shadow .18s ease!important
}
.lobby-dual input:active::-webkit-slider-thumb,.publish-dual input:active::-webkit-slider-thumb{
  transform:scale(1.035)!important;
  box-shadow:0 4px 13px rgba(0,0,0,.26),0 0 0 5px rgba(114,199,255,.1),inset 0 1px rgba(255,255,255,.95)!important
}

/* One authoritative selection mark for every enhanced dropdown. Legacy
   multi-select markup keeps an <i> in every row, so it must not determine
   visibility; the real .selected state does. */
html body .custom-picker .picker-options>[data-picker-value]>i{
  display:none!important
}
html body .custom-picker .picker-options>[data-picker-value]>span{
  position:relative!important;
  flex:1 1 auto!important;
  min-width:0!important;
  padding-right:25px!important
}
html body .custom-picker .picker-options>[data-picker-value]>span::after{
  content:"\2713";
  position:absolute;
  top:50%;
  right:3px;
  color:currentColor;
  font-size:16px;
  font-style:normal;
  font-weight:900;
  line-height:1;
  opacity:0;
  visibility:hidden;
  transform:translateY(-50%) scale(.82);
  transition:opacity .14s ease,transform .2s var(--apple-response),visibility 0s linear .2s
}
html body .custom-picker .picker-options>[data-picker-value].selected>span::after{
  opacity:1;
  visibility:visible;
  transform:translateY(-50%) scale(1);
  transition-delay:0s
}

/* Directional actions use a stable semantic colour across every wizard.
   Yellow always moves backward; green advances or confirms. The colour sits
   on the control itself so the existing liquid response never reveals a
   mismatched dark base during press/release. */
:is(#wizard-back,#simple-back,[data-publish-back]){
  background:#ffd84d!important;
  background-color:#ffd84d!important;
  background-image:none!important;
  border-color:#ffe98e!important;
  color:#211a00!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.62),0 8px 22px rgba(255,193,7,.18)!important
}
:is(#wizard-next,#simple-next,[data-publish-next],#publish-form .publish-submit,#welcome-form button[type="submit"],#ticket-form button[type="submit"],#admin-modal-confirm:not(.danger)){
  background:#38c878!important;
  background-color:#38c878!important;
  background-image:none!important;
  border-color:#7fe0a8!important;
  color:#061b10!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 22px rgba(28,184,101,.18)!important
}
:is(#wizard-back,#simple-back,[data-publish-back],#wizard-next,#simple-next,[data-publish-next],#publish-form .publish-submit,#welcome-form button[type="submit"],#ticket-form button[type="submit"],#admin-modal-confirm:not(.danger))
  >:is(span,b,strong,small,i){
  color:inherit!important;
  -webkit-text-fill-color:currentColor!important;
  opacity:1!important;
  filter:none!important;
  mix-blend-mode:normal!important;
  text-shadow:none!important
}
@media(hover:hover) and (pointer:fine){
  :is(#wizard-back,#simple-back,[data-publish-back]):hover{
    background:#ffe36b!important;
    border-color:#fff0a8!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 10px 26px rgba(255,193,7,.26)!important
  }
  :is(#wizard-next,#simple-next,[data-publish-next],#publish-form .publish-submit,#welcome-form button[type="submit"],#ticket-form button[type="submit"],#admin-modal-confirm:not(.danger)):hover{
    background:#48d486!important;
    border-color:#96e8b8!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.58),0 10px 26px rgba(28,184,101,.25)!important
  }
}
:is(#wizard-back,#simple-back,[data-publish-back],#wizard-next,#simple-next,[data-publish-next],#publish-form .publish-submit,#welcome-form button[type="submit"],#ticket-form button[type="submit"],#admin-modal-confirm:not(.danger)):disabled{
  opacity:.46!important;
  box-shadow:none!important
}

/* Accessibility changes the feedback channel rather than removing feedback. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  dialog.modal[open],dialog.modal[open]::backdrop,.custom-picker.open.picker-positioned>.picker-menu,.webgl-control.is-releasing{
    animation:none!important;transform:none!important
  }
  :is(.primary,.secondary,.picker-trigger,.rank-filter-dropdown>summary,.modal-close,.channel-button,.report-button,.lobby-reset-button,.preference-button,.account-button,.language-button,.circle-button,.recruit-card){
    transition:opacity .16s ease,border-color .16s ease,background-color .16s ease!important
  }
  :is(.webgl-control.is-pressing,.primary:active,.secondary:active,.picker-trigger:active,.modal-close:active){transform:none!important;opacity:.82!important}
  html body .custom-picker .picker-options>[data-picker-value]>span::after{transition:none!important}
}
@media(prefers-reduced-transparency:reduce){
  body.dark :is(dialog.modal,.picker-menu,.filters,.topbar){
    background:#161616!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important
  }
}
@media(prefers-contrast:more){
  body.dark :is(dialog.modal,.picker-menu,.filters,.recruit-card,.picker-trigger,input,textarea,select){
    border-color:rgba(255,255,255,.58)!important
  }
  :focus-visible{outline-color:#bfe8ff!important;outline-width:3px!important}
}