/* SKYBLEU_GLASS_BUTTON_CORE_V2
   Canonical reusable component derived from the working Schedule Maker real-glass button.
   Required structure:
   .button-wrap.cobalt-glass > .generated-button > .button-text > .etched-label
   + sibling .button-shadow
*/
@property --angle-1{syntax:"<angle>";inherits:false;initial-value:-75deg}
@property --angle-2{syntax:"<angle>";inherits:false;initial-value:-45deg}

.button-wrap.cobalt-glass{
  /* Safe defaults. Saved presets override these through /ui-lab/presets.css. */
  --sky-base-rgb:0 93 255;
  --sky-light-rgb:8 112 255;
  --sky-dark-rgb:0 78 232;
  --sky-deep-rgb:0 28 118;
  --sky-glow-top-rgb:0 86 255;
  --sky-glow-rgb:0 57 225;
  --sky-tint-rgb:0 45 180;
  --sky-text-dark-rgb:0 20 80;
  --sky-active-dark-rgb:0 22 100;
  --sky-outline-dark-rgb:0 23 105;
  --global--size:14px;
  --anim--hover-time:400ms;
  --anim--hover-ease:cubic-bezier(.25,1,.5,1);
  --angle-1:-75deg;
  --angle-2:-45deg;
  --wrap-radius:12px;
  --wrap-z:2;
  --active-rotate-x:1;
  --active-rotate-y:0;
  --active-rotate-z:0;
  --active-rotate-angle:7deg;
  --shadow-cuttoff-fix:2em;
  --shadow-blur-px:12px;
  --shadow-blur:clamp(2px,var(--shadow-blur-px),36px);
  --shadow-hover-blur:clamp(2px,calc(var(--shadow-blur-px) * .5),24px);
  --shadow-active-blur:clamp(2px,var(--shadow-blur-px),36px);
  --shadow-top:calc(var(--shadow-cuttoff-fix) - .5em);
  --shadow-left:calc(var(--shadow-cuttoff-fix) - .875em);
  --shadow-hover-top:calc(var(--shadow-cuttoff-fix) - .875em);
  --shadow-active-top:calc(var(--shadow-cuttoff-fix) - .5em);
  --shadow-opacity:1;
  --shadow-active-opacity:.72;
  --shadow-gradient-top-alpha:.68;
  --shadow-gradient-bottom-alpha:.24;
  --shadow-gradient-top:rgb(var(--sky-glow-top-rgb) / var(--shadow-gradient-top-alpha));
  --shadow-gradient-bottom:rgb(var(--sky-glow-rgb) / var(--shadow-gradient-bottom-alpha));
  --button-min-width:auto;
  --button-min-height:46px;
  --button-opacity:1;
  --button-transform:none;
  --button-border-width:1px;
  --button-radius:12px;
  --button-cursor:pointer;
  --button-bg-angle:-75deg;
  --glass-top-alpha:.10;
  --glass-mid-alpha:.24;
  --glass-bottom-alpha:.06;
  --button-bg-1:rgb(255 255 255 / var(--glass-top-alpha));
  --button-bg-2:rgb(255 255 255 / var(--glass-mid-alpha));
  --button-bg-3:rgb(255 255 255 / var(--glass-bottom-alpha));
  --button-blur:6px;
  --button-hover-blur:4px;
  --button-hover-scale:.985;
  --button-box-shadow:inset 0 .125em .125em rgb(255 255 255 / .46),inset 0 -.125em .125em rgb(var(--sky-text-dark-rgb) / .18),0 .25em .125em -.125em rgb(var(--sky-tint-rgb) / .26),0 0 .1em .22em inset rgb(255 255 255 / .18),0 0 0 1px rgb(255 255 255 / .20);
  --button-hover-box-shadow:inset 0 .125em .125em rgb(255 255 255 / .60),inset 0 -.125em .125em rgb(var(--sky-text-dark-rgb) / .16),0 .16em .08em -.1em rgb(var(--sky-tint-rgb) / .30),0 0 .08em .16em inset rgb(255 255 255 / .30),0 0 0 1px rgb(255 255 255 / .30);
  --button-active-box-shadow:inset 0 .15em .16em rgb(var(--sky-active-dark-rgb) / .18),inset 0 -.08em .12em rgb(255 255 255 / .34),0 .10em .10em -.08em rgb(var(--sky-tint-rgb) / .22),0 0 .08em .18em inset rgb(255 255 255 / .18);
  --text-font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Segoe UI",Arial,sans-serif;
  --text-font-size:1em;
  --text-font-weight:720;
  --text-color:#fff;
  --text-hover-color:#fff;
  --text-letter-spacing:-.012em;
  --text-padding-inline:22px;
  --text-padding-block:12.32px;
  --text-shadow:0 1px 1px rgb(var(--sky-text-dark-rgb) / .30),0 0 10px rgb(255 255 255 / .08);
  --text-hover-shadow:0 1px 1px rgb(var(--sky-text-dark-rgb) / .26),0 0 12px rgb(255 255 255 / .16);
  --text-active-shadow:0 1px 1px rgb(var(--sky-text-dark-rgb) / .38);
  --shine-alpha:.66;
  --shine-color:rgb(255 255 255 / var(--shine-alpha));
  --shine-transparent:rgb(255 255 255 / 0);
  --shine-start:0%;
  --shine-mid:40% 50%;
  --shine-end:55%;
  --shine-bg-size:200% 200%;
  --shine-bg-position:0% 50%;
  --shine-hover-position:25% 50%;
  --shine-active-position:50% 15%;
  --shine-active-angle:-15deg;
  --shine-blend-mode:screen;
  --outline-dark-alpha:.44;
  --outline-light-alpha:.72;
  --outline-secondary-alpha:.30;
  --outline-dark:rgb(var(--sky-outline-dark-rgb) / var(--outline-dark-alpha));
  --outline-transparent:rgb(0 0 0 / 0);
  --outline-light-1:rgb(255 255 255 / var(--outline-light-alpha));
  --outline-light-2:rgb(255 255 255 / var(--outline-secondary-alpha));
  --outline-inner-stroke:rgb(255 255 255 / .34);
  --outline-hover-angle:-125deg;
  --outline-active-angle:-75deg;
  --coat-top-alpha:.40;
  --coat-mid-alpha:.13;
  --coat-bottom-alpha:.12;
  position:relative;
  z-index:var(--wrap-z);
  display:inline-block;
  vertical-align:middle;
  border-radius:var(--wrap-radius);
  background:transparent;
  font-size:var(--global--size);
  font-family:var(--text-font-family);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition:all var(--anim--hover-time) var(--anim--hover-ease);
  isolation:isolate;
}
.button-wrap.cobalt-glass *,
.button-wrap.cobalt-glass *::before,
.button-wrap.cobalt-glass *::after{box-sizing:border-box}

/* Saturated material substrate, physically behind the translucent glass. */
.button-wrap.cobalt-glass::before{
  content:"";
  position:absolute;
  z-index:1;
  inset:1px;
  border-radius:calc(var(--button-radius) - 1px);
  background:linear-gradient(180deg,rgb(var(--sky-light-rgb)) 0%,rgb(var(--sky-base-rgb)) 48%,rgb(var(--sky-dark-rgb)) 100%);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .24),inset 0 -8px 18px rgb(var(--sky-deep-rgb) / .16),0 8px 24px rgb(var(--sky-base-rgb) / .24);
  pointer-events:none;
}

/* Independent sibling glow. Do not collapse this into the button box-shadow. */
.button-wrap.cobalt-glass .button-shadow{
  --shadow-width-fix:var(--shadow-cuttoff-fix);
  display:block;
  position:absolute;
  width:calc(100% + var(--shadow-width-fix));
  height:calc(100% + var(--shadow-width-fix));
  top:calc(0% - var(--shadow-width-fix)/2);
  left:calc(0% - var(--shadow-width-fix)/2);
  filter:blur(var(--shadow-blur));
  -webkit-filter:blur(var(--shadow-blur));
  overflow:visible;
  pointer-events:none;
  z-index:0;
}
.button-wrap.cobalt-glass .button-shadow::after{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  border-radius:var(--button-radius);
  background:linear-gradient(180deg,var(--shadow-gradient-top),var(--shadow-gradient-bottom));
  width:calc(100% - var(--shadow-cuttoff-fix) - .25em);
  height:calc(100% - var(--shadow-cuttoff-fix) - .25em);
  top:var(--shadow-top);
  left:var(--shadow-left);
  padding:.125em;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  -webkit-mask-composite:xor;
  transition:all var(--anim--hover-time) var(--anim--hover-ease);
  overflow:visible;
  opacity:var(--shadow-opacity);
}

/* The real button is clear/translucent glass, not opaque color. */
.button-wrap.cobalt-glass .generated-button{
  --border-width:var(--button-border-width);
  all:unset;
  display:inline-block;
  min-width:var(--button-min-width);
  min-height:var(--button-min-height);
  opacity:var(--button-opacity);
  transform:var(--button-transform);
  cursor:var(--button-cursor);
  position:relative;
  -webkit-tap-highlight-color:rgb(0 0 0 / 0);
  pointer-events:auto;
  z-index:3;
  background:linear-gradient(var(--button-bg-angle),var(--button-bg-1),var(--button-bg-2),var(--button-bg-3));
  border-radius:var(--button-radius);
  box-shadow:var(--button-box-shadow);
  backdrop-filter:blur(var(--button-blur)) saturate(150%);
  -webkit-backdrop-filter:blur(var(--button-blur)) saturate(150%);
  transition:all var(--anim--hover-time) var(--anim--hover-ease);
  overflow:hidden;
}
.button-wrap.cobalt-glass .generated-button::before{
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(180deg,rgb(255 255 255 / var(--coat-top-alpha)) 0%,rgb(255 255 255 / var(--coat-mid-alpha)) 33%,rgb(255 255 255 / .035) 57%,rgb(255 255 255 / var(--coat-bottom-alpha)) 100%);
  pointer-events:none;
  opacity:.74;
}
.button-wrap.cobalt-glass .generated-button:hover:not(:disabled){
  transform:scale(var(--button-hover-scale));
  backdrop-filter:blur(var(--button-hover-blur)) saturate(160%);
  -webkit-backdrop-filter:blur(var(--button-hover-blur)) saturate(160%);
  box-shadow:var(--button-hover-box-shadow);
}

.button-wrap.cobalt-glass .generated-button .button-text{
  position:relative;
  z-index:4;
  display:block;
  user-select:none;
  -webkit-user-select:none;
  font-family:var(--text-font-family);
  letter-spacing:var(--text-letter-spacing);
  font-weight:var(--text-font-weight);
  font-size:var(--text-font-size);
  padding-inline:var(--text-padding-inline);
  padding-block:var(--text-padding-block);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.button-wrap.cobalt-glass .generated-button .etched-label{
  position:relative;
  z-index:6;
  display:inline-block;
  line-height:1;
  color:var(--text-color);
  text-shadow:var(--text-shadow);
  transform:translate3d(0,0,0);
  backface-visibility:hidden;
  transition:color var(--anim--hover-time) var(--anim--hover-ease),text-shadow var(--anim--hover-time) var(--anim--hover-ease);
}
.button-wrap.cobalt-glass .generated-button .etched-label::before{
  content:attr(data-text);
  position:absolute;
  inset:0;
  color:rgb(255 255 255 / .22);
  transform:translate3d(0,-.018em,0);
  opacity:.30;
  pointer-events:none;
}
.button-wrap.cobalt-glass .generated-button .etched-label::after{
  content:attr(data-text);
  position:absolute;
  inset:0;
  color:transparent;
  -webkit-text-stroke:.01em rgb(var(--sky-active-dark-rgb) / .22);
  transform:translate3d(0,.018em,0);
  opacity:.38;
  pointer-events:none;
}
.button-wrap.cobalt-glass .generated-button:hover:not(:disabled) .etched-label{color:var(--text-hover-color);text-shadow:var(--text-hover-shadow)}

.button-wrap.cobalt-glass .generated-button .button-text::after{
  content:"";
  display:block;
  position:absolute;
  z-index:3;
  width:calc(100% - var(--border-width));
  height:calc(100% - var(--border-width));
  top:calc(0% + var(--border-width)/2);
  left:calc(0% + var(--border-width)/2);
  border-radius:var(--button-radius);
  overflow:clip;
  background:linear-gradient(var(--angle-2),var(--shine-transparent) var(--shine-start),var(--shine-color) var(--shine-mid),var(--shine-transparent) var(--shine-end));
  mix-blend-mode:var(--shine-blend-mode);
  pointer-events:none;
  background-size:var(--shine-bg-size);
  background-position:var(--shine-bg-position);
  background-repeat:no-repeat;
  transition:background-position var(--anim--hover-time) var(--anim--hover-ease),--angle-2 var(--anim--hover-time) var(--anim--hover-ease);
}
.button-wrap.cobalt-glass .generated-button:hover:not(:disabled) .button-text::after{background-position:var(--shine-hover-position)}
.button-wrap.cobalt-glass .generated-button:active:not(:disabled) .button-text::after{background-position:var(--shine-active-position);--angle-2:var(--shine-active-angle)}

/* Directional masked perimeter reflection; not a normal border. */
.button-wrap.cobalt-glass .generated-button::after{
  content:"";
  display:block;
  position:absolute;
  z-index:5;
  inset:0;
  border-radius:var(--button-radius);
  width:calc(100% + var(--border-width));
  height:calc(100% + var(--border-width));
  top:calc(0% - var(--border-width)/2);
  left:calc(0% - var(--border-width)/2);
  padding:var(--border-width);
  background:conic-gradient(from var(--angle-1) at 50% 50%,var(--outline-dark),var(--outline-transparent) 5% 40%,var(--outline-dark) 50%,var(--outline-transparent) 60% 95%,var(--outline-dark)),linear-gradient(180deg,var(--outline-light-1),var(--outline-light-2));
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  -webkit-mask-composite:xor;
  transition:all var(--anim--hover-time) var(--anim--hover-ease),--angle-1 var(--anim--hover-time) var(--anim--hover-ease);
  box-shadow:inset 0 0 0 calc(var(--border-width)/2) var(--outline-inner-stroke);
  pointer-events:none;
}
.button-wrap.cobalt-glass .generated-button:hover:not(:disabled)::after{--angle-1:var(--outline-hover-angle)}
.button-wrap.cobalt-glass .generated-button:active:not(:disabled)::after{--angle-1:var(--outline-active-angle)}

.button-wrap.cobalt-glass:has(.generated-button:hover:not(:disabled)) .button-shadow{filter:blur(var(--shadow-hover-blur));-webkit-filter:blur(var(--shadow-hover-blur));transition:filter var(--anim--hover-time) var(--anim--hover-ease)}
.button-wrap.cobalt-glass:has(.generated-button:hover:not(:disabled)) .button-shadow::after{top:var(--shadow-hover-top);opacity:var(--shadow-opacity)}
.button-wrap.cobalt-glass:has(.generated-button:active:not(:disabled)){transform:rotate3d(var(--active-rotate-x),var(--active-rotate-y),var(--active-rotate-z),var(--active-rotate-angle))}
.button-wrap.cobalt-glass:has(.generated-button:active:not(:disabled)) .generated-button{box-shadow:var(--button-active-box-shadow)}
.button-wrap.cobalt-glass:has(.generated-button:active:not(:disabled)) .button-shadow{filter:blur(var(--shadow-active-blur));-webkit-filter:blur(var(--shadow-active-blur))}
.button-wrap.cobalt-glass:has(.generated-button:active:not(:disabled)) .button-shadow::after{top:var(--shadow-active-top);opacity:var(--shadow-active-opacity)}
.button-wrap.cobalt-glass:has(.generated-button:active:not(:disabled)) .etched-label{text-shadow:var(--text-active-shadow)}
.button-wrap.cobalt-glass .generated-button:disabled{cursor:not-allowed;opacity:.55;filter:grayscale(.35)}
.button-wrap.cobalt-glass .generated-button:disabled,
.button-wrap.cobalt-glass .generated-button:disabled span,
.button-wrap.cobalt-glass .generated-button:disabled::after,
.button-wrap.cobalt-glass .generated-button:disabled span::after{transition:none}
.button-wrap.cobalt-glass .generated-button:focus-visible{outline:2px solid rgb(var(--sky-base-rgb) / .90);outline-offset:4px}

.button-wrap.cobalt-glass[data-sky-width="full"]{width:100%}
.button-wrap.cobalt-glass[data-sky-width="full"] .generated-button{display:block;width:100%;text-align:center}

/*
   TOUCH STATE MACHINE
   -------------------
   Desktop keeps native :hover + :active.

   Coarse touch devices deliberately DO NOT use native :hover/:active for
   appearance. Mobile Safari can synthesize a sticky :hover after a tap, while
   :active exists only while the finger is physically held down.

   glass-button.js drives two explicit classes:
       .is-sky-touch-hover
       .is-sky-touch-active

   Sequence for an ordinary tap:
       normal
         -> hover-equivalent
         -> pressed
         -> hover-equivalent
         -> normal

   The active class is always used together with the hover class, matching the
   desktop condition where the cursor is still hovering while the mouse button
   is pressed.
*/
@media(hover:none) and (pointer:coarse){
  .button-wrap.cobalt-glass{
    --anim--hover-time:120ms;
  }

  .button-wrap.cobalt-glass .generated-button{
    touch-action:manipulation;
  }

  /* ---------------------------------------------------------------
     Neutralize synthesized/sticky native touch :hover and :active.
     These selectors are intentionally before the explicit class states.
     --------------------------------------------------------------- */

  .button-wrap.cobalt-glass .generated-button:hover:not(:disabled),
  .button-wrap.cobalt-glass .generated-button:active:not(:disabled){
    transform:var(--button-transform);
    backdrop-filter:blur(var(--button-blur)) saturate(150%);
    -webkit-backdrop-filter:blur(var(--button-blur)) saturate(150%);
    box-shadow:var(--button-box-shadow);
  }

  .button-wrap.cobalt-glass .generated-button:hover:not(:disabled) .etched-label,
  .button-wrap.cobalt-glass .generated-button:active:not(:disabled) .etched-label{
    color:var(--text-color);
    text-shadow:var(--text-shadow);
  }

  .button-wrap.cobalt-glass .generated-button:hover:not(:disabled) .button-text::after,
  .button-wrap.cobalt-glass .generated-button:active:not(:disabled) .button-text::after{
    background-position:var(--shine-bg-position);
    --angle-2:-45deg;
  }

  .button-wrap.cobalt-glass .generated-button:hover:not(:disabled)::after,
  .button-wrap.cobalt-glass .generated-button:active:not(:disabled)::after{
    --angle-1:-75deg;
  }

  .button-wrap.cobalt-glass:has(.generated-button:hover:not(:disabled)),
  .button-wrap.cobalt-glass:has(.generated-button:active:not(:disabled)){
    transform:none;
  }

  .button-wrap.cobalt-glass:has(.generated-button:hover:not(:disabled)) .button-shadow,
  .button-wrap.cobalt-glass:has(.generated-button:active:not(:disabled)) .button-shadow{
    filter:blur(var(--shadow-blur));
    -webkit-filter:blur(var(--shadow-blur));
  }

  .button-wrap.cobalt-glass:has(.generated-button:hover:not(:disabled)) .button-shadow::after,
  .button-wrap.cobalt-glass:has(.generated-button:active:not(:disabled)) .button-shadow::after{
    top:var(--shadow-top);
    opacity:var(--shadow-opacity);
  }

  /* ---------------------------------------------------------------
     Stage 1 / Stage 3 — explicit hover-equivalent touch state.
     --------------------------------------------------------------- */

  .button-wrap.cobalt-glass.is-sky-touch-hover .generated-button:not(:disabled){
    transform:scale(var(--button-hover-scale));
    backdrop-filter:blur(var(--button-hover-blur)) saturate(160%);
    -webkit-backdrop-filter:blur(var(--button-hover-blur)) saturate(160%);
    box-shadow:var(--button-hover-box-shadow);
  }

  .button-wrap.cobalt-glass.is-sky-touch-hover .generated-button:not(:disabled) .etched-label{
    color:var(--text-hover-color);
    text-shadow:var(--text-hover-shadow);
  }

  .button-wrap.cobalt-glass.is-sky-touch-hover .generated-button:not(:disabled) .button-text::after{
    background-position:var(--shine-hover-position);
    --angle-2:-45deg;
  }

  .button-wrap.cobalt-glass.is-sky-touch-hover .generated-button:not(:disabled)::after{
    --angle-1:var(--outline-hover-angle);
  }

  .button-wrap.cobalt-glass.is-sky-touch-hover .button-shadow{
    filter:blur(var(--shadow-hover-blur));
    -webkit-filter:blur(var(--shadow-hover-blur));
  }

  .button-wrap.cobalt-glass.is-sky-touch-hover .button-shadow::after{
    top:var(--shadow-hover-top);
    opacity:var(--shadow-opacity);
  }

  /* ---------------------------------------------------------------
     Stage 2 — explicit pressed state.
     Hover class remains present, so active overrides only the properties
     that differ from desktop hover+active.
     --------------------------------------------------------------- */

  .button-wrap.cobalt-glass.is-sky-touch-active{
    transform:rotate3d(
      var(--active-rotate-x),
      var(--active-rotate-y),
      var(--active-rotate-z),
      var(--active-rotate-angle)
    );
  }

  .button-wrap.cobalt-glass.is-sky-touch-active .generated-button:not(:disabled){
    box-shadow:var(--button-active-box-shadow);
  }

  .button-wrap.cobalt-glass.is-sky-touch-active .generated-button:not(:disabled) .button-text::after{
    background-position:var(--shine-active-position);
    --angle-2:var(--shine-active-angle);
  }

  .button-wrap.cobalt-glass.is-sky-touch-active .generated-button:not(:disabled)::after{
    --angle-1:var(--outline-active-angle);
  }

  .button-wrap.cobalt-glass.is-sky-touch-active .button-shadow{
    filter:blur(var(--shadow-active-blur));
    -webkit-filter:blur(var(--shadow-active-blur));
  }

  .button-wrap.cobalt-glass.is-sky-touch-active .button-shadow::after{
    top:var(--shadow-active-top);
    opacity:var(--shadow-active-opacity);
  }

  .button-wrap.cobalt-glass.is-sky-touch-active .etched-label{
    text-shadow:var(--text-active-shadow);
  }
}
@media(prefers-reduced-motion:reduce){
  .button-wrap.cobalt-glass,
  .button-wrap.cobalt-glass *,
  .button-wrap.cobalt-glass *::before,
  .button-wrap.cobalt-glass *::after{transition-duration:.001ms!important;animation-duration:.001ms!important}
}