/* One tinted foreground material above the fixed Night Watch scene. */
.compact-account{--muted:#bbc9d9;--line:rgba(207,226,247,.18)}
:is(.site .account-panel,.site .section,.compact-account .account-card){
  background:linear-gradient(125deg,#182535,#0c1520);
  border:1px solid rgba(207,226,247,.18);
  border-top-color:rgba(225,240,255,.25);
  box-shadow:0 14px 40px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.12),inset 1px 0 0 rgba(255,255,255,.035),inset 0 -1px 0 rgba(0,0,0,.16);
}
.site .account-panel .card,.site .section .plan{background:rgba(5,13,23,.01125);box-shadow:inset 0 1px 0 rgba(255,255,255,.035);border-color:rgba(218,233,252,.13)}
.site .account-panel .subscription:after{display:none}
.compact-account .account-dock{background:#132033;border-color:rgba(213,235,255,.25);border-top-color:rgba(230,244,255,.34);box-shadow:0 12px 40px #0006,inset 0 1px 0 #ffffff20,inset 0 -1px 0 #0005}
.compact-account .account-dock a[aria-current=page]{background:rgba(159,203,245,.17);box-shadow:inset 0 1px 0 rgba(228,244,255,.15)}
#account-dialog,.site #detail{background:#132033;border-color:rgba(213,233,255,.23);box-shadow:0 26px 90px #0008,inset 0 1px 0 #ffffff1c}

/* Start dialog reading at its heading; close buttons use a compact keyboard-only cue. */
#account-dialog #dialog-title:focus,.site #detail #detail-title:focus{outline:none}
#account-dialog .dialog-close,.site #detail .close{display:grid;place-items:center;width:36px;height:36px;padding:0;border-radius:50%;outline:none}
#account-dialog .dialog-close:hover,.site #detail .close:hover{background:rgba(148,202,255,.12);color:#f4f6fa}
#account-dialog .dialog-close:focus-visible,.site #detail .close:focus-visible{background:rgba(148,202,255,.30);color:#fff}

@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :is(.site .account-panel,.site .section,.compact-account .account-card){
    background:linear-gradient(130deg,rgba(255,255,255,.065),rgba(255,255,255,0) 38%,rgba(255,255,255,.025)),linear-gradient(125deg,rgba(24,37,53,.0175),rgba(12,21,32,.025));
    -webkit-backdrop-filter:blur(2.5px) saturate(125%);
    backdrop-filter:blur(2.5px) saturate(125%);
  }
  .compact-account .scenic-shade{background:rgba(3,9,17,.50)}
  .compact-account .account-dock{
    background:linear-gradient(125deg,rgba(49,69,91,.0175),rgba(10,22,37,.02625));
    -webkit-backdrop-filter:blur(3.5px) saturate(135%);
    backdrop-filter:blur(3.5px) saturate(135%);
  }
  #account-dialog,.site #detail{
    background:linear-gradient(125deg,rgba(27,43,62,.85),rgba(12,24,40,.93));
    -webkit-backdrop-filter:blur(24px) saturate(120%);
    backdrop-filter:blur(24px) saturate(120%);
  }
  #account-dialog::backdrop,.site #detail::backdrop{background:rgba(2,7,16,.57);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
  @media(max-width:640px){
    :is(.site .account-panel,.site .section,.compact-account .account-card){
      background:linear-gradient(130deg,rgba(255,255,255,.055),rgba(255,255,255,0) 40%,rgba(255,255,255,.02)),linear-gradient(125deg,rgba(24,37,53,.02125),rgba(12,21,32,.02875));
      -webkit-backdrop-filter:blur(2px) saturate(120%);
      backdrop-filter:blur(2px) saturate(120%);
    }
    .compact-account .scenic-shade{background:rgba(4,11,21,.58)}
    .compact-account .account-dock{background:linear-gradient(125deg,rgba(41,62,85,.0225),rgba(10,22,37,.03));-webkit-backdrop-filter:blur(3px) saturate(125%);backdrop-filter:blur(3px) saturate(125%)}
  }
}

/* Dense controls remain readable within the translucent material. */
.compact-account .account-form input,.compact-account .link-box{background:rgba(22,39,60,.92);border-color:rgba(207,226,247,.18)}
.compact-account .account-form input::placeholder{color:#bac9dc}
.compact-account .account-button:not(.primary):not(.quiet){background:rgba(31,50,74,.92);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.compact-account .account-button:not(.primary):not(.quiet):hover{background:#2b4059}
.compact-account .account-button.quiet{background:rgba(17,31,49,.70)}
.compact-account .help-art{background-color:transparent}

@media(prefers-reduced-transparency:reduce){
  :is(.site .account-panel,.site .section,.compact-account .account-card),.compact-account .account-dock,#account-dialog,.site #detail{
    background:linear-gradient(125deg,#182535,#0c1520);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  .compact-account .scenic-shade{background:rgba(3,9,17,.69)}
  #account-dialog::backdrop,.site #detail::backdrop{background:rgba(2,7,16,.78);-webkit-backdrop-filter:none;backdrop-filter:none}
}